feat : blog 연결

package.json

@@ -20,16 +20,14 @@
     "lodash": "^4.17.21",
     "path": "^0.12.7",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "xml2js": "^0.6.2"
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.9.0",
     "@types/express": "^4",
     "@types/lodash": "^4",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "@types/xml2js": "^0",
     "@vitejs/plugin-react": "^4.3.1",
     "eslint": "^9.9.0",
     "eslint-plugin-react-hooks": "^5.1.0-rc.0",

src/pages/board/component/input/index.tsx

@@ -14,7 +14,7 @@ import { useEffect } from "react";
 import TooltipInput from "../../../../common/component/input/tooltip";
 import useAvartar from "../../hook/useAvartar";
 import useInput from "../../hook/useInput";
-import classes from "../../Board.module.css";
+import classes from "./Input.module.css";
 import { useDisclosure } from "@mantine/hooks";
 
 const CommentInput = () => {

src/pages/profile/component/blog/index.tsx

@@ -10,31 +10,38 @@ function Blog() {
     fetchPosts();
   }, []);
 
+  useEffect(() => {
+    console.log(posts);
+  }, [posts]);
+
   const getPostPage = (idx: number) => {
     return (
       <List>
-        {posts.slice((idx - 1) * 5, idx + 5).map((posts) => (
-          <List.Item key={posts.title}>
-            <a href={posts.link}>{posts.title}</a>
-          </List.Item>
-        ))}
+        {posts?.data?.article
+          .slice((idx - 1) * 5, (idx - 1) * 5 + 5)
+          .map((posts) => (
+            <List.Item key={posts.title}>
+              <a href={posts.link}>{posts.title}</a>
+            </List.Item>
+          ))}
       </List>
     );
   };
 
   return (
     <Grid.Col span={6} className={classes.gridItem}>
-      <Container display="flex">
+      <Container pb={10} display="flex">
         <IconBrandBlogger />
       </Container>
-      {posts && posts.length > 0 ? (
+      {posts && posts.result ? (
         <>
           {getPostPage(listIdx)}
           <Pagination
-            total={posts.length / 5}
+            total={(posts.data?.count || 0) / 5}
             value={listIdx}
             onChange={setListIdx}
-            pb="sm"
+            pb="xs"
+            withControls={false}
           />
         </>
       ) : (

src/pages/profile/component/github/index.tsx

@@ -25,7 +25,7 @@ function Github() {
   };
   return (
     <Grid.Col span={6} className={classes.gridItem}>
-      <Container display="flex">
+      <Container pb={10} display="flex">
         <IconBrandGithub />
       </Container>
       {repos && repos.length > 0 ? (

src/pages/profile/hook/rest/medium.ts

@@ -1,15 +1,15 @@
 import { useState } from "react";
-import { parseStringPromise } from "xml2js";
-
+import Response from "../../../../common/http/response";
 interface MediumPostResponse {
-  title: string;
-  link: string;
-  pubDate: string;
-  content: string;
+  count: number;
+  article: {
+    title: string;
+    link: string;
+  }[];
 }
 
 const useMedium = () => {
-  const [posts, setPosts] = useState<MediumPostResponse[]>([]);
+  const [posts, setPosts] = useState<Response<MediumPostResponse>>();
   const [loading, setLoading] = useState<boolean>(false);
   const [error, setError] = useState<string | null>(null);
 
@@ -18,25 +18,18 @@ const useMedium = () => {
     setError(null);
 
     try {
-      const response = await fetch(`https://medium.com/feed/@fog0510`, {});
+      const response = await fetch(
+        import.meta.env.VITE_INTRO_API_URL + "/blog",
+        {}
+      );
 
       if (!response.ok) {
         throw new Error("Medium feed 목록 호출 실패.");
       }
 
-      const data = await response.text();
-      const parsing = await parseStringPromise(data);
-      console.log(parsing);
-      const items = parsing.rss.channel[0].item;
-
-      const parsedPosts = items.map((item: any) => ({
-        title: item.title[0],
-        link: item.link[0],
-        pubDate: item.pubDate[0],
-        content: item["content:encoded"] ? item["content:encoded"][0] : "",
-      }));
+      const data = await response.json();
 
-      setPosts(parsedPosts);
+      setPosts(data);
     } catch (error) {
       setError((error as Error).message);
     } finally {

src/pages/skill/index.tsx

@@ -52,7 +52,7 @@ function Skill() {
   ));
 
   return (
-    <Container>
+    <Container w="80vw">
       <Title order={2}>기술</Title>
       <Carousel
         slideSize={

yarn.lock

@@ -1017,15 +1017,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/xml2js@npm:^0":
-  version: 0.4.14
-  resolution: "@types/xml2js@npm:0.4.14"
-  dependencies:
-    "@types/node": "npm:*"
-  checksum: 10c0/06776e7f7aec55a698795e60425417caa7d7db3ff680a7b4ccaae1567c5fec28ff49b9975e9a0d74ff4acb8f4a43730501bbe64f9f761d784c6476ba4db12e13
-  languageName: node
-  linkType: hard
-
 "@typescript-eslint/eslint-plugin@npm:8.7.0":
   version: 8.7.0
   resolution: "@typescript-eslint/eslint-plugin@npm:8.7.0"
@@ -2453,7 +2444,6 @@ __metadata:
     "@types/lodash": "npm:^4"
     "@types/react": "npm:^18.3.3"
     "@types/react-dom": "npm:^18.3.0"
-    "@types/xml2js": "npm:^0"
     "@vitejs/plugin-react": "npm:^4.3.1"
     embla-carousel-react: "npm:^7.1.0"
     eslint: "npm:^9.9.0"
@@ -2471,7 +2461,6 @@ __metadata:
     typescript: "npm:^5.5.3"
     typescript-eslint: "npm:^8.0.1"
     vite: "npm:^5.4.1"
-    xml2js: "npm:^0.6.2"
   languageName: unknown
   linkType: soft
 
@@ -3487,13 +3476,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sax@npm:>=0.6.0":
-  version: 1.4.1
-  resolution: "sax@npm:1.4.1"
-  checksum: 10c0/6bf86318a254c5d898ede6bd3ded15daf68ae08a5495a2739564eb265cd13bcc64a07ab466fb204f67ce472bb534eb8612dac587435515169593f4fffa11de7c
-  languageName: node
-  linkType: hard
-
 "scheduler@npm:^0.23.2":
   version: 0.23.2
   resolution: "scheduler@npm:0.23.2"
@@ -4114,23 +4096,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"xml2js@npm:^0.6.2":
-  version: 0.6.2
-  resolution: "xml2js@npm:0.6.2"
-  dependencies:
-    sax: "npm:>=0.6.0"
-    xmlbuilder: "npm:~11.0.0"
-  checksum: 10c0/e98a84e9c172c556ee2c5afa0fc7161b46919e8b53ab20de140eedea19903ed82f7cd5b1576fb345c84f0a18da1982ddf65908129b58fc3d7cbc658ae232108f
-  languageName: node
-  linkType: hard
-
-"xmlbuilder@npm:~11.0.0":
-  version: 11.0.1
-  resolution: "xmlbuilder@npm:11.0.1"
-  checksum: 10c0/74b979f89a0a129926bc786b913459bdbcefa809afaa551c5ab83f89b1915bdaea14c11c759284bb9b931e3b53004dbc2181e21d3ca9553eeb0b2a7b4e40c35b
-  languageName: node
-  linkType: hard
-
 "yallist@npm:^3.0.2":
   version: 3.1.1
   resolution: "yallist@npm:3.1.1"