From 6efaf784cfd4cf4aa20e47be7d97a8e07d183799 Mon Sep 17 00:00:00 2001
From: VsangkyeongV <137258368+VsangkyeongV@users.noreply.github.com>
Date: Fri, 14 Jul 2023 16:39:33 +0900
Subject: [PATCH 1/2] =?UTF-8?q?=EC=BA=90=EB=9F=AC=EC=85=80=20=EB=A7=8C?=
 =?UTF-8?q?=EB=93=A4=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

인라인 스타일 적용이 안됩니다 ㅠㅠ
---
 carousel/Carousel.css | 21 +++++++++++++++++++++
 carousel/infcs.js     | 41 +++++++++++++++++++++++++++++++++++++++++
 2 files changed, 62 insertions(+)
 create mode 100644 carousel/Carousel.css
 create mode 100644 carousel/infcs.js

diff --git a/carousel/Carousel.css b/carousel/Carousel.css
new file mode 100644
index 0000000..992bb48
--- /dev/null
+++ b/carousel/Carousel.css
@@ -0,0 +1,21 @@
+.CarouselContainer {
+  display: flex;
+  flex-direction: row;
+  justify-content: start;
+  align-items: start;
+}
+.Carousel {
+  width: 300vw;
+  height: 300px;
+  margin-top: 40px;
+  margin-bottom: 61px;
+  background-color: #eaeaea;
+}
+.inner {
+  width: 1060px;
+}
+
+.inner img {
+  width: 1060px;
+  height: 300px;
+}
diff --git a/carousel/infcs.js b/carousel/infcs.js
new file mode 100644
index 0000000..8b2e252
--- /dev/null
+++ b/carousel/infcs.js
@@ -0,0 +1,41 @@
+import React from "react";
+import Slider from "react-slick";
+import "./Carousel.css";
+const CenterMode = () => {
+  const settings = {
+    className: "center centerMode",
+    centerMode: true,
+    infinite: true,
+    centerPadding: "100px",
+    slidesToShow: 1,
+    slidesPerRow: 3,
+    speed: 500,
+  };
+
+  return (
+    <div style={{ height: "300px", width: "1920px" }}>
+      <Slider {...settings}>
+        <div className="inner" style={{ width: "10%" }}>
+          <img src="img/fire.jpg"></img>
+        </div>
+        <div className="inner" style={{ width: "90%" }}>
+          <img src="img/fire.jpg"></img>
+        </div>
+        <div className="inner" style={{ width: "10%" }}>
+          <img src="img/fire.jpg"></img>
+        </div>
+        <div className="inner">
+          <img src="img/fire.jpg"></img>
+        </div>
+        <div className="inner">
+          <img src="img/fire.jpg"></img>
+        </div>
+        <div className="inner">
+          <img src="img/fire.jpg"></img>
+        </div>
+      </Slider>
+    </div>
+  );
+};
+
+export default CenterMode;

From f369ad1fe4fba2dc3e56f391927c5a9434609e86 Mon Sep 17 00:00:00 2001
From: VsangkyeongV <137258368+VsangkyeongV@users.noreply.github.com>
Date: Wed, 19 Jul 2023 20:51:28 +0900
Subject: [PATCH 2/2] =?UTF-8?q?1=EC=B0=A8pr=EC=9E=85=EB=8B=88=EB=8B=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

일단 데이터만 받았습니다
---
 VsangekyeongV/react-project/package-lock.json | 29 +++++++++++
 VsangekyeongV/react-project/package.json      |  1 +
 .../src/components/LoginForm.tsx              |  2 +-
 .../src/components/Main/Index.tsx             | 48 +++++++------------
 .../src/components/Main/Main.css              |  8 ++++
 .../src/components/Main/NoticeCard.css        |  6 +--
 .../src/components/Main/NoticeCard.tsx        | 11 ++---
 .../src/types/NoticeCardInterface.tsx         |  6 ++-
 8 files changed, 68 insertions(+), 43 deletions(-)

diff --git a/VsangekyeongV/react-project/package-lock.json b/VsangekyeongV/react-project/package-lock.json
index 3bdc837..3cc867c 100644
--- a/VsangekyeongV/react-project/package-lock.json
+++ b/VsangekyeongV/react-project/package-lock.json
@@ -15,6 +15,7 @@
         "@types/node": "^16.18.38",
         "@types/react": "^18.2.14",
         "@types/react-dom": "^18.2.6",
+        "axios": "^1.4.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.14.1",
@@ -5029,6 +5030,29 @@
         "node": ">=4"
       }
     },
+    "node_modules/axios": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.4.0.tgz",
+      "integrity": "sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==",
+      "dependencies": {
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
+    "node_modules/axios/node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/axobject-query": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz",
@@ -13989,6 +14013,11 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/psl": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
diff --git a/VsangekyeongV/react-project/package.json b/VsangekyeongV/react-project/package.json
index 5d6499a..495f899 100644
--- a/VsangekyeongV/react-project/package.json
+++ b/VsangekyeongV/react-project/package.json
@@ -10,6 +10,7 @@
     "@types/node": "^16.18.38",
     "@types/react": "^18.2.14",
     "@types/react-dom": "^18.2.6",
+    "axios": "^1.4.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.14.1",
diff --git a/VsangekyeongV/react-project/src/components/LoginForm.tsx b/VsangekyeongV/react-project/src/components/LoginForm.tsx
index 3fe8203..78638de 100644
--- a/VsangekyeongV/react-project/src/components/LoginForm.tsx
+++ b/VsangekyeongV/react-project/src/components/LoginForm.tsx
@@ -1,5 +1,5 @@
 import { useState, ChangeEvent } from "react";
-import { Link, useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 
 const LoginForm = () => {
   const [buttonEnabled, setButtonEnabled] = useState(false);
diff --git a/VsangekyeongV/react-project/src/components/Main/Index.tsx b/VsangekyeongV/react-project/src/components/Main/Index.tsx
index 85c5a15..8ec2090 100644
--- a/VsangekyeongV/react-project/src/components/Main/Index.tsx
+++ b/VsangekyeongV/react-project/src/components/Main/Index.tsx
@@ -3,35 +3,23 @@ import { NoticeCardInterface } from "@/types/NoticeCardInterface";
 import "./Main.css";
 import NoticeCard from "./NoticeCard";
 import "./NoticeCard.css";
+import axios from "axios";
+import { useEffect, useState } from "react";
 
 const Main = () => {
-  const title = [
-    "비밀의 정원: 사랑과 장미의 이야기",
-    "푸른 바다의 수호자: 해양 보호 활동의 중요성",
-    "시간을 거슬러: 과거로 돌아가는 탐험",
-    "무한한 가능성의 문: 꿈을 향한 여정",
-    "성공을 위한 7가지 습관: 목표 달성을 위한 비결",
-    "심리학의 신비: 인간 마음의 허상과 진실",
-    "빛과 어둠의 대결: 미스터리한 우주의 비밀",
-    "마법의 숲: 요정과 마법사의 이야기",
-    "사라진 세계: 미래를 위한 모험의 시작",
-    "소리 없는 외침: 사랑과 갈등이 교차하는 이야기",
-  ];
-  const makePost = () => {
-    const posts: NoticeCardInterface[] = [];
-    for (let i = 1; i < 11; i++) {
-      const post = {
-        num: i,
-        postTitle: title[i - 1],
-        user: `unknown${i}`,
-        date: `2023/6/${i}`,
-        commentNum: Math.floor(Math.random() * 100) + 1,
-      };
-      posts.push(post);
-    }
-    return posts;
-  };
-  const posts = makePost();
+  const [posts, setPosts] = useState<NoticeCardInterface[]>([]);
+  useEffect(() => {
+    axios
+      .get("https://jsonplaceholder.typicode.com/posts")
+      .then((response) => {
+        setPosts(response.data);
+        console.log("success!", response.data);
+      })
+      .catch((error) => {
+        console.log("some errors", error);
+      });
+  }, []);
+
   return (
     <div className="main">
       <div className="main-logoPage">
@@ -40,12 +28,10 @@ const Main = () => {
       <div className="main-container dis-col-center">
         <div className="main-container-name ">게시글 목록</div>
         <div className="main-container-table dis-col">
-          <div className="dis-row-center main-container-table-bar ">
+          <div className="dis-row-space main-container-table-bar ">
             <div className="card-num dis-col-center">번호</div>
             <div className="card-title dis-col-center">제목</div>
-            <div className="card-user dis-col-center">작성자</div>
-            <div className="card-date dis-col-center">작성일</div>
-            <div className="card-commentNum dis-col-center">댓글수</div>
+            <div className="card-body dis-col-center">본문</div>
           </div>
           <div className="main-container-table-source">
             {posts.map((post, index) => (
diff --git a/VsangekyeongV/react-project/src/components/Main/Main.css b/VsangekyeongV/react-project/src/components/Main/Main.css
index 2d71777..ec5931d 100644
--- a/VsangekyeongV/react-project/src/components/Main/Main.css
+++ b/VsangekyeongV/react-project/src/components/Main/Main.css
@@ -1,10 +1,18 @@
 .dis-row {
   display: flex;
   flex-direction: row;
+  align-items: center;
+}
+.dis-row-space {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
 }
 .dis-col {
   display: flex;
   flex-direction: column;
+  align-items: center;
 }
 .dis-col-center {
   display: flex;
diff --git a/VsangekyeongV/react-project/src/components/Main/NoticeCard.css b/VsangekyeongV/react-project/src/components/Main/NoticeCard.css
index 93e0535..2d49cc1 100644
--- a/VsangekyeongV/react-project/src/components/Main/NoticeCard.css
+++ b/VsangekyeongV/react-project/src/components/Main/NoticeCard.css
@@ -8,7 +8,7 @@
   width: 100px;
   height: 70px;
 }
-.card-title {
+.card-body {
   width: 800px;
   height: 70px;
 }
@@ -16,8 +16,8 @@
   width: 100px;
   height: 70px;
 }
-.card-date {
-  width: 200px;
+.card-title {
+  width: 300px;
   height: 70px;
 }
 .card-commentNum {
diff --git a/VsangekyeongV/react-project/src/components/Main/NoticeCard.tsx b/VsangekyeongV/react-project/src/components/Main/NoticeCard.tsx
index 2c23948..f317395 100644
--- a/VsangekyeongV/react-project/src/components/Main/NoticeCard.tsx
+++ b/VsangekyeongV/react-project/src/components/Main/NoticeCard.tsx
@@ -5,12 +5,11 @@ import { NoticeCardInterface } from "@/types/NoticeCardInterface";
 
 const NoticeCard: React.FC<NoticeCardInterface> = (props) => {
   return (
-    <div className="notice-card dis-row-center">
-      <div className="card-num dis-col-center">{props.num}</div>
-      <div className="card-title dis-col-center">{props.postTitle}</div>
-      <div className="card-user dis-col-center">{props.user}</div>
-      <div className="card-date dis-col-center">{props.date}</div>
-      <div className="card-commentNum dis-col-center">{props.commentNum}</div>
+    <div className="notice-card dis-row-space">
+      <div className="card-num dis-col-center">{props.id}</div>
+      {/* <div className="card-user dis-col-center">{props.userId}</div> */}
+      <div className="card-title dis-col-center">{props.title}</div>
+      <div className="card-body dis-col-center">{props.body}</div>
     </div>
   );
 };
diff --git a/VsangekyeongV/react-project/src/types/NoticeCardInterface.tsx b/VsangekyeongV/react-project/src/types/NoticeCardInterface.tsx
index 323d1f5..5ec1454 100644
--- a/VsangekyeongV/react-project/src/types/NoticeCardInterface.tsx
+++ b/VsangekyeongV/react-project/src/types/NoticeCardInterface.tsx
@@ -1,7 +1,9 @@
 export interface NoticeCardInterface {
-  num: number;
-  postTitle: string;
+  id: number;
+  title: string;
   user: string;
   date: string;
   commentNum: number;
+  body: string;
+  userId: number;
 }