From 0b84ae6a0f2a2ecc1ad306f8d2f476ddd10e53fe Mon Sep 17 00:00:00 2001
From: hochan <hochan0115@gmail.com>
Date: Sat, 20 May 2023 12:17:12 +0900
Subject: [PATCH 1/2] added comment components

---
 src/components/Comment/CommentElement.jsx | 48 ++++++++++++++
 src/components/Comment/index.jsx          | 79 ++++++++++++++++++++---
 src/components/Form/index.jsx             | 27 +++++++-
 src/components/Posts/CommentElement.jsx   | 31 ---------
 src/data/comments.js                      | 20 ++++--
 src/routes/PostDetailPage.jsx             |  4 +-
 6 files changed, 161 insertions(+), 48 deletions(-)
 create mode 100644 src/components/Comment/CommentElement.jsx
 delete mode 100644 src/components/Posts/CommentElement.jsx

diff --git a/src/components/Comment/CommentElement.jsx b/src/components/Comment/CommentElement.jsx
new file mode 100644
index 0000000..f71e057
--- /dev/null
+++ b/src/components/Comment/CommentElement.jsx
@@ -0,0 +1,48 @@
+import React, { useState } from "react";
+
+const CommentElement = ({comment, handleCommentEdit, handleCommentDelete}) => {
+  // TODO : props 받기
+  // TODO : 수정하는 input 내용 관리
+  // comment created_at 전처리
+  const date = new Date(comment.created_at);
+  const year = date.getFullYear();
+  let month = date.getMonth() + 1;
+  month = month < 10 ? `0${month}` : month;
+  let day = date.getDate();
+  day = day < 10 ? `0${day}` : day;
+
+  const [commentInput, setCommentInput] = useState(comment.content);
+  const [editing, setEditing] = useState(false);
+  const onclickEdit = (e) => {
+    e.preventDefault();
+    if(editing)
+      handleCommentEdit(comment.id, commentInput); //will edit comment
+    setEditing(!editing);
+  };
+
+  return (
+    <div className="w-full flex justify-between gap-1 mb-2">
+      <div className="w-3/4">
+        {/* {수정중 ? <input /> : <p>{내용}</p>} */}
+        {editing?
+          <input onChange={(e)=>{setCommentInput(e.target.value)}} value={commentInput} className="input"/> 
+          : <p className="text-lg" >{commentInput}</p>
+        }
+        {editing ? null:
+          <span className="text-base mr-1 text-gray-300">
+            {year}.{month}.{day}
+          </span>
+        } 
+      </div>
+        <div className="w-1/4 flex flex-row-reverse items-center">
+          {!editing?<button className="text-gray-300 ml-1 mr-1" onClick={()=>{handleCommentDelete(comment.id)}}>삭제</button>:null}
+          <button className="text-gray-300 ml-1 mr-1" onClick={onclickEdit}>
+            {editing ? "수정완료" : "수정"}
+          </button>
+
+        </div>
+    </div>
+    );
+};
+
+export default CommentElement;
diff --git a/src/components/Comment/index.jsx b/src/components/Comment/index.jsx
index a713ce7..10c6010 100644
--- a/src/components/Comment/index.jsx
+++ b/src/components/Comment/index.jsx
@@ -1,24 +1,83 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import comments from "../../data/comments";
 import CommentElement from "./CommentElement";
+import { CommentForm } from "../Form";
 
-const Comment = () => {
+export const Comment = (postId) => {
 	// TODO 1: 가짜 comments 불러와서 관리해야겟즤
-
+	const [commentList, setCommentList] = useState();
+	const [commentIdCounter, setCommentIdCounter] = useState(0);
+	useEffect(() => {
+		const filteredComment=comments.filter((c)=>{return c.post===postId;})
+		setCommentList(filteredComment);
+	},[]);
 	// TODO 2: comment추가하는 input 관리해줘야겟지
-
+	const [commentInput, setCommentInput] = useState("");
+	const [formData, setFormData] = useState({
+    id: 0,
+    content: "",
+    created_at: "",
+    post: 0,
+    author: {
+			id: 0,
+			username: ""
+		}});
+	
 	// TODO 3: comment Form 제출됐을때 실행되는 함수 만들어줘
+	const handleCommentSubmit = () => {
+		//comment Input을 가지고 comment를 추가
+		const newCommentData = {
+			...formData,
+			id : commentIdCounter,
+			content: commentInput,
+			created_at: new Date(),
+			post: postId,
+			author: {
+				id: 2,
+				username: "베이비"
+			}
+		};
+		setCommentIdCounter(commentIdCounter+1);
+		setCommentList([...commentList, newCommentData]);
+	}
+
+	//comment editing
+	const handleCommentEdit = (commentId, contentEdited) => {
+		//commentId를 가지고 comment를 찾아서 content를 수정
+		const newCommentList = commentList.map((comment) => {
+			if(comment.id === commentId) {
+				comment.content = contentEdited;
+				comment.created_at = new Date();
+			}
+			return comment;
+		});
+		setCommentList(newCommentList);
+	}
+
+	// TODO 4: commet Delete 하는 함수 만들어죠\
+	const handleCommentDelete = (commentId) => {
+		//commentId를 가지고 comment를 찾아서 삭제
+		const newCommentList = commentList.filter((comment) => comment.id !== commentId);
+		setCommentList(newCommentList);
+	}
 
-	// TODO 4: commet Delete 하는 함수 만들어죠
 	return (
 		<div className="w-full mt-5 self-start">
       <h1 className="text-3xl font-bold mt-5 mb-3">Comments</h1>
-			// commentElement
-			// <CommentElement/> 가 comment마다 반복시켜야즤
+			{commentList && commentList.map((comment) => (
+				<CommentElement 
+					comment={comment} 
+					handleCommentEdit={handleCommentEdit} 
+					handleCommentDelete={handleCommentDelete}
+				/>
+			))}
+			{/* // <CommentElement/> 가 comment마다 반복시켜야즤 */}
 
-			<form>
-				// TODO 2-3 : comment 추가하는 comment form 만들어주기
-			</form>
+			<CommentForm 
+				onSubmit={handleCommentSubmit}
+				commentInput={commentInput}
+				setCommentInput={setCommentInput}
+			/>
 		</div>
 	);
 };
diff --git a/src/components/Form/index.jsx b/src/components/Form/index.jsx
index 31aa8a4..29ba8fb 100644
--- a/src/components/Form/index.jsx
+++ b/src/components/Form/index.jsx
@@ -260,4 +260,29 @@ export const PostForm = ({ onSubmit, tags, formData, setFormData }) => {
         </button>
       </form>
     );
-  };
\ No newline at end of file
+  };
+
+export const CommentForm = ({onSubmit, commentInput, setCommentInput}) => {
+  const handleChange=(e)=>{
+    setCommentInput(e.target.value);
+  }
+  const onClickSubmit = (e) => {
+    e.preventDefault();
+    onSubmit();
+    setCommentInput("");
+  };
+
+  return (
+    <form className="flex w-full mt-3 gap-x-1 flew-nowrap" onSubmit={onClickSubmit}>
+      <input
+        type="text"
+        placeholder="댓글을 입력해주세요..."
+        id="comment"
+        className="input mt-7 mr-5 h-15"
+        value={commentInput}
+        onChange={handleChange}
+      />
+      <button type="submit" className="button mt-7 h-15">Submit</button>
+    </form>
+  );
+};
\ No newline at end of file
diff --git a/src/components/Posts/CommentElement.jsx b/src/components/Posts/CommentElement.jsx
deleted file mode 100644
index 2f1cf0d..0000000
--- a/src/components/Posts/CommentElement.jsx
+++ /dev/null
@@ -1,31 +0,0 @@
-const CommentElement = (props) => {
-  // TODO : props 받기
-  // TODO : 수정하는 input 내용 관리
-
-  // comment created_at 전처리
-  const date = new Date(comment.created_at);
-  const year = date.getFullYear();
-  let month = date.getMonth() + 1;
-  month = month < 10 ? `0${month}` : month;
-  let day = date.getDate();
-  day = day < 10 ? `0${day}` : day;
-
-  return (
-    <div className="w-full flex justify-between gap-1 mb-2">
-      <div className="w-3/4">
-        // 수정중일때와 아닐때를 다르게 보여줘야겠지
-        {수정중 ? <input /> : <p>{내용}</p>}
-        // 날짜
-        <span className="text-base mr-1 text-gray-300">
-          {year}.{month}.{day}
-        </span>
-        // 수정, 삭제버튼
-        <div className="w-1/4 flex flex-row-reverse items-center">
-          // delete 버튼은 수정이 아닐때만 보이게 해줘
-        </div>
-      </div>
-    </div>
-    );
-};
-
-export default CommentElement;
diff --git a/src/data/comments.js b/src/data/comments.js
index f8ca604..91b6e13 100644
--- a/src/data/comments.js
+++ b/src/data/comments.js
@@ -1,12 +1,24 @@
-[
+const comments=[
   {
-    "id": 1,
+    "id": 100,
     "content": "comment1",
     "created_at": "2023-04-18T15:09:43Z",
-    "post": 1,
+    "post": 2,
+    "author": {
+			"id": 2,
+			"username": "user2"
+		}
+  },
+  {
+    "id": 101,
+    "content": "comment2",
+    "created_at": "2023-04-18T15:09:43Z",
+    "post": 2,
     "author": {
 			"id": 2,
 			"username": "user2"
 		}
   }
-]
\ No newline at end of file
+]
+
+export default comments
\ No newline at end of file
diff --git a/src/routes/PostDetailPage.jsx b/src/routes/PostDetailPage.jsx
index c59f0ba..f3e34b6 100644
--- a/src/routes/PostDetailPage.jsx
+++ b/src/routes/PostDetailPage.jsx
@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 import { BigPost } from "../components/Posts";
 import { Link } from "react-router-dom";
+import { Comment } from "../components/Comment";
 import posts from "../data/posts";
 
 const PostDetailPage = () => {
@@ -27,14 +28,13 @@ const onClickDelete = () => {
       <div className="flex flex-col items-center w-3/5 p-8">
         {/* post detail component */}
         <BigPost post={post} />
-
+        <Comment postId={postId}/>
 				<div>
           <Link to={`/${post.id}/edit`}>
             <button className="button mt-10 mx-4 py-2 px-10">Edit</button>
           </Link>
           <button className="button mt-10 mx-4 py-2 px-10" onClick={onClickDelete}>Delete</button>
         </div>
-
       </div>
     )
   );

From 480a31e6c8664d9886b3e0c47adc048001513271 Mon Sep 17 00:00:00 2001
From: hochan <hochan0115@gmail.com>
Date: Sat, 17 Jun 2023 12:36:32 +0900
Subject: [PATCH 2/2] added myinfo page

---
 package-lock.json                         | 191 +++++++++++++++++++++
 package.json                              |   3 +
 src/App.js                                |   5 +-
 src/apis/api.js                           | 197 ++++++++++++++++++++++
 src/apis/axios.js                         |  64 +++++++
 src/components/Comment/CommentElement.jsx |  97 +++++++----
 src/components/Comment/index.jsx          |  86 ++++------
 src/components/Form/index.jsx             |  14 +-
 src/components/Header/index.jsx           |  33 +++-
 src/components/ItemEdit/index.jsx         |  55 ++++++
 src/components/Posts/index.jsx            |  43 ++---
 src/routes/HomePage.jsx                   |  78 +++++----
 src/routes/MyInfoPage.jsx                 |  56 ++++++
 src/routes/PostCreatePage.jsx             |  72 +++-----
 src/routes/PostDetailPage.jsx             |  48 +++++-
 src/routes/PostEditPage.jsx               |  97 +++++------
 src/routes/SignInPage.jsx                 |   9 +-
 src/routes/SignUpPage.jsx                 |   8 +-
 src/utils/cookie.js                       |  21 +++
 19 files changed, 913 insertions(+), 264 deletions(-)
 create mode 100644 src/apis/api.js
 create mode 100644 src/apis/axios.js
 create mode 100644 src/components/ItemEdit/index.jsx
 create mode 100644 src/routes/MyInfoPage.jsx
 create mode 100644 src/utils/cookie.js

diff --git a/package-lock.json b/package-lock.json
index 56071c4..a7558dc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,11 +11,14 @@
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
+        "axios": "^1.4.0",
         "dotting": "^1.0.13",
         "react": "^18.2.0",
+        "react-cookie": "^4.1.1",
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.11.1",
         "react-scripts": "5.0.1",
+        "styled-components": "^5.3.11",
         "web-vitals": "^2.1.4"
       },
       "devDependencies": {
@@ -2142,6 +2145,29 @@
         "postcss-selector-parser": "^6.0.10"
       }
     },
+    "node_modules/@emotion/is-prop-valid": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz",
+      "integrity": "sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==",
+      "dependencies": {
+        "@emotion/memoize": "^0.8.1"
+      }
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
+      "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA=="
+    },
+    "node_modules/@emotion/stylis": {
+      "version": "0.8.5",
+      "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
+      "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
+    },
+    "node_modules/@emotion/unitless": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
+      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
+    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -3821,6 +3847,11 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/cookie": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.3.3.tgz",
+      "integrity": "sha512-LKVP3cgXBT9RYj+t+9FDKwS5tdI+rPBXaNSkma7hvqy35lc7mAokC2zsqWJH0LaqIt3B962nuYI77hsJoT1gow=="
+    },
     "node_modules/@types/eslint": {
       "version": "8.37.0",
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.37.0.tgz",
@@ -3874,6 +3905,15 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/hoist-non-react-statics": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
+      "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
+      "dependencies": {
+        "@types/react": "*",
+        "hoist-non-react-statics": "^3.3.0"
+      }
+    },
     "node_modules/@types/html-minifier-terser": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
@@ -5097,6 +5137,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.1.1",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.1.1.tgz",
@@ -5320,6 +5383,26 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/babel-plugin-styled-components": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.1.3.tgz",
+      "integrity": "sha512-jBioLwBVHpOMU4NsueH/ADcHrjS0Y/WTpt2eGVmmuSFNEv2DF3XhcMncuZlbbjxQ4vzxg+yEr6E6TNjrIQbsJQ==",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.18.6",
+        "@babel/helper-module-imports": "^7.21.4",
+        "babel-plugin-syntax-jsx": "^6.18.0",
+        "lodash": "^4.17.21",
+        "picomatch": "^2.3.1"
+      },
+      "peerDependencies": {
+        "styled-components": ">= 2"
+      }
+    },
+    "node_modules/babel-plugin-syntax-jsx": {
+      "version": "6.18.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
+      "integrity": "sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw=="
+    },
     "node_modules/babel-plugin-transform-react-remove-prop-types": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz",
@@ -5633,6 +5716,14 @@
         "node": ">= 6"
       }
     },
+    "node_modules/camelize": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz",
+      "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/caniuse-api": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -6068,6 +6159,14 @@
         "postcss": "^8.4"
       }
     },
+    "node_modules/css-color-keywords": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
+      "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/css-declaration-sorter": {
       "version": "6.4.0",
       "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.4.0.tgz",
@@ -6249,6 +6348,16 @@
       "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz",
       "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w=="
     },
+    "node_modules/css-to-react-native": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz",
+      "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==",
+      "dependencies": {
+        "camelize": "^1.0.0",
+        "css-color-keywords": "^1.0.0",
+        "postcss-value-parser": "^4.0.2"
+      }
+    },
     "node_modules/css-tree": {
       "version": "1.0.0-alpha.37",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz",
@@ -8712,6 +8821,19 @@
         "he": "bin/he"
       }
     },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
+    "node_modules/hoist-non-react-statics/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "node_modules/hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -14088,6 +14210,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",
@@ -14232,6 +14359,19 @@
         "node": ">=14"
       }
     },
+    "node_modules/react-cookie": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/react-cookie/-/react-cookie-4.1.1.tgz",
+      "integrity": "sha512-ffn7Y7G4bXiFbnE+dKhHhbP+b8I34mH9jqnm8Llhj89zF4nPxPutxHT1suUqMeCEhLDBI7InYwf1tpaSoK5w8A==",
+      "dependencies": {
+        "@types/hoist-non-react-statics": "^3.0.1",
+        "hoist-non-react-statics": "^3.0.0",
+        "universal-cookie": "^4.0.0"
+      },
+      "peerDependencies": {
+        "react": ">= 16.3.0"
+      }
+    },
     "node_modules/react-dev-utils": {
       "version": "12.0.1",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
@@ -15204,6 +15344,11 @@
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
       "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
     },
+    "node_modules/shallowequal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -15606,6 +15751,35 @@
         "webpack": "^5.0.0"
       }
     },
+    "node_modules/styled-components": {
+      "version": "5.3.11",
+      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.11.tgz",
+      "integrity": "sha512-uuzIIfnVkagcVHv9nE0VPlHPSCmXIUGKfJ42LNjxCCTDTL5sgnJ8Z7GZBq0EnLYGln77tPpEpExt2+qa+cZqSw==",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.0.0",
+        "@babel/traverse": "^7.4.5",
+        "@emotion/is-prop-valid": "^1.1.0",
+        "@emotion/stylis": "^0.8.4",
+        "@emotion/unitless": "^0.7.4",
+        "babel-plugin-styled-components": ">= 1.12.0",
+        "css-to-react-native": "^3.0.0",
+        "hoist-non-react-statics": "^3.0.0",
+        "shallowequal": "^1.1.0",
+        "supports-color": "^5.5.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/styled-components"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0",
+        "react-dom": ">= 16.8.0",
+        "react-is": ">= 16.8.0"
+      }
+    },
     "node_modules/stylehacks": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz",
@@ -16276,6 +16450,23 @@
         "node": ">=8"
       }
     },
+    "node_modules/universal-cookie": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/universal-cookie/-/universal-cookie-4.0.4.tgz",
+      "integrity": "sha512-lbRVHoOMtItjWbM7TwDLdl8wug7izB0tq3/YVKhT/ahB4VDvWMyvnADfnJI8y6fSvsjh51Ix7lTGC6Tn4rMPhw==",
+      "dependencies": {
+        "@types/cookie": "^0.3.3",
+        "cookie": "^0.4.0"
+      }
+    },
+    "node_modules/universal-cookie/node_modules/cookie": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.2.tgz",
+      "integrity": "sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/universalify": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
diff --git a/package.json b/package.json
index ec5e5a9..fabdeef 100644
--- a/package.json
+++ b/package.json
@@ -6,11 +6,14 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.4.0",
     "dotting": "^1.0.13",
     "react": "^18.2.0",
+    "react-cookie": "^4.1.1",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.11.1",
     "react-scripts": "5.0.1",
+    "styled-components": "^5.3.11",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
diff --git a/src/App.js b/src/App.js
index 768e834..719ea4b 100644
--- a/src/App.js
+++ b/src/App.js
@@ -8,6 +8,7 @@ import PostEditPage from "./routes/PostEditPage";
 import SignUpPage from "./routes/SignUpPage";
 import PostDetailPage from "./routes/PostDetailPage";
 import SignInPage from "./routes/SignInPage";
+import MyInfoPage from "./routes/MyInfoPage";
 
 function App() {
   return (
@@ -25,8 +26,10 @@ function App() {
           <Route path="/:postId" element={<PostDetailPage />} />
           {/* sign up */}
           <Route path="/signup" element={<SignUpPage />} />
-          {/* sign up */}
+          {/* sign in */}
           <Route path="/signin" element={<SignInPage />} />
+          {/* My Info */}
+          <Route path="/myinfo" element={<MyInfoPage />} />
         </Routes>
         <Footer />
       </BrowserRouter>
diff --git a/src/apis/api.js b/src/apis/api.js
new file mode 100644
index 0000000..0b6abe2
--- /dev/null
+++ b/src/apis/api.js
@@ -0,0 +1,197 @@
+import { removeCookie } from "../utils/cookie";
+import { instance, instanceWithToken } from "./axios";
+
+
+// src/api/api.js
+// Account 관련 API들
+export const signIn = async (data) => {
+  const response = await instance.post("/account/signin/", data);
+  if (response.status === 200) {
+    window.location.href = "/";
+  } else {
+    console.log("Error");
+  }
+};
+
+export const signUp = async (data) => {
+  const response = await instance.post("/account/signup/", data);
+  if (response.status === 200) {
+    window.location.href = "/"; //새로고침 있음
+  }
+  return response;
+};
+
+// 추가!!
+
+export const logOut = async (token) => {
+  const response = await instanceWithToken.post("/account/logout/", {
+    refresh: token,
+  });
+  if (response.status === 204) {
+    console.log("REFRESH TOKEN SUCCESS");
+
+    removeCookie("refresh_token");
+    removeCookie("access_token");
+
+    window.location.reload();
+  } else {
+    console.log("[ERROR] error while refreshing token");
+  }
+};
+
+// 추가!!
+
+
+//Post 관련 API들
+export const getPosts = async () => {
+  const response = await instance.get("/post/");
+  return response.data;
+};
+
+export const getPost = async (id) => {
+  const response = await instance.get(`/post/${id}/`);
+  return response.data;
+};
+
+export const createPost = async (data, navigate) => {
+  const response = await instanceWithToken.post("/post/", data);
+  if (response.status === 201) {
+    console.log("POST SUCCESS");
+    navigate("/");
+  } else {
+    console.log("[ERROR] error while creating post");
+  }
+};
+
+export const updatePost = async (id, data, navigate) => {
+  const response = await instanceWithToken.patch(`/post/${id}/`, data);
+  if (response.status === 200) {
+    console.log("POST UPDATE SUCCESS");
+    navigate(-1);
+  } else {
+    console.log("[ERROR] error while updating post");
+  }
+};
+
+
+// 과제!!
+export const deletePost = async (id) => {
+  const response = await instanceWithToken.delete(`/post/${id}/`);
+  if(response.status===204){
+    console.log("POST DELETE SUCCESS");
+    window.location.href = "/";
+  }else{
+    console.log("[ERROR] error while deleting post");
+  }
+    
+};
+
+// 과제!!
+export const likePost = async (postId) => {
+  const response = await instanceWithToken.post(`/post/${postId}/like/`,postId);
+  if(response.status===200)
+    console.log("LIKE UPDATE SUCCESS");
+  else if(response.status===401)
+    alert("로그인 후 시도해주세요");
+  else
+    console.log("[ERROR] error while editing like");
+  // console.log(response.data['like_users'].length); 
+  //return like count
+  return response.data['like_users'].length;
+};
+
+
+// Tag 관련 API들
+export const getTags = async () => {
+  const response = await instance.get("/tag/");
+  return response.data;
+};
+
+export const createTag = async (data) => {
+  const response = await instanceWithToken.post("/tag/", data);
+  if (response.status === 201) {
+    console.log("TAG SUCCESS");
+  } else {
+    console.log("[ERROR] error while creating tag");
+  }
+  return response; // response 받아서 그 다음 처리
+};
+
+
+// Comment 관련 API들
+export const getComments = async (postId) => {
+  const response = await instance.get(`/comment/?post=${postId}`);
+  return response.data;
+};
+
+export const createComment = async (data) => {
+  const response = await instanceWithToken.post("/comment/", data);
+  if (response.status === 201) {
+    console.log("COMMENT SUCCESS");
+    window.location.reload(); // 새로운 코멘트 생성시 새로고침으로 반영
+  } else {
+    console.log("[ERROR] error while creating comment");
+  }
+};
+
+export const updateComment = async (id, data) => {
+  const response = await instanceWithToken.patch(`/comment/${id}/`, data);
+  if (response.status === 200) {
+    console.log("COMMENT UPDATE SUCCESS");
+    window.location.reload();
+  } else {
+    console.log("[ERROR] error while updating comment");
+  }
+};
+
+export const getUser =async ()=>{
+  const response = await instanceWithToken.get("/account/info/");
+  if(response.status === 200){
+    console.log("GET USER SUCCESS");
+  }else{
+    console.log("[ERROR] error while updating comment");
+  }
+  return response.data;
+}
+
+export const getUserProfile = async () => {
+  const response = await instanceWithToken.get("/account/profile/");
+  if(response.status === 200){
+    console.log("GET USER SUCCESS");
+  }else{
+    console.log("[ERROR] error while updating comment");
+  }
+  return response.data;
+}
+
+export const updateUserProfile = async (data) => {
+  const response = await instanceWithToken.patch("/account/profile/",data);
+  if(response.status === 200){
+    alert("수정되었습니다.");
+    console.log("UPDATE USER SUCCESS");
+  }else{
+    console.log("[ERROR] error while updating comment");
+  }
+}
+
+
+// 과제 !!
+export const deleteComment = async (id) => {
+  const response = await instanceWithToken.delete(`/comment/${id}/`);
+  if(response.status===204){
+    console.log("COMMENT DELETE SUCCESS");
+    window.location.reload();
+  }else{
+    console.log("[ERROR] error while deleting comment");
+  }
+};
+
+// 추가!!
+export const refreshToken = async (token) => {
+  const response = await instance.post("/account/refresh/", { refresh: token });
+  if (response.status === 200) {
+    console.log("REFRESH TOKEN SUCCESS");
+  } else {
+    console.log("[ERROR] error while refreshing token");
+  }
+};
\ No newline at end of file
diff --git a/src/apis/axios.js b/src/apis/axios.js
new file mode 100644
index 0000000..e31204b
--- /dev/null
+++ b/src/apis/axios.js
@@ -0,0 +1,64 @@
+// src/apis/axios.js
+
+import axios from "axios";
+import { getCookie } from "../utils/cookie";
+import { refreshToken } from "./api";
+
+// baseURL, credential, 헤더 세팅 
+axios.defaults.baseURL = 'http://localhost:8000/api';
+axios.defaults.withCredentials = true;
+axios.defaults.headers.post['Content-Type'] = 'application/json';
+axios.defaults.headers.common['X-CSRFToken'] = getCookie('csrftoken');
+
+
+// 누구나 접근 가능한 API들 
+export const instance = axios.create();
+
+// Token 있어야 접근 가능한 API들 - 얘는 토큰을 넣어줘야 해요
+export const instanceWithToken = axios.create();
+
+
+// ⬇️ 추가
+// instanceWithToken에는 쿠키에서 토큰을 찾고 담아줍시다!
+instanceWithToken.interceptors.request.use(
+  // 요청을 보내기전 수행할 일
+  // 사실상 이번 세미나에 사용할 부분은 이거밖에 없어요 
+  (config) => {
+    const accessToken = getCookie('access_token');
+
+    if (!accessToken) {
+      // token 없으면 리턴
+      return;
+    } else {
+      // token 있으면 헤더에 담아주기 (Authorization은 장고에서 JWT 토큰을 인식하는 헤더 key)
+      config.headers["Authorization"] = `Bearer ${accessToken}`;
+    }
+    return config;
+  },
+
+  // 클라이언트 요청 오류 났을 때 처리
+  (error) => {
+    // 콘솔에 찍어주고, 요청을 보내지 않고 오류를 발생시킴
+    console.log("Request Error!!");
+    return Promise.reject(error);
+  }
+);
+
+instanceWithToken.interceptors.response.use(
+  (response) => {
+    console.log("Interceptor Response!!");
+    return response;
+  },
+  async (error) => {
+    console.log("Response Error!!");
+
+    const originalRequest = error.config;
+    if (error.response.status === 401) { //토큰이 만료됨에 따른 에러인지 확인
+      const token = getCookie("refresh_token");
+      await refreshToken(token); //refresh token 을 활용하여 access token 을 refresh
+
+      return instanceWithToken(originalRequest); //refresh된 access token 을 활용하여 재요청 보내기
+    }
+    return Promise.reject(error);
+  }
+);
\ No newline at end of file
diff --git a/src/components/Comment/CommentElement.jsx b/src/components/Comment/CommentElement.jsx
index f71e057..ca35d7a 100644
--- a/src/components/Comment/CommentElement.jsx
+++ b/src/components/Comment/CommentElement.jsx
@@ -1,9 +1,14 @@
-import React, { useState } from "react";
+import { useEffect, useState } from "react";
+import { getUser, updateComment } from "../../apis/api";
+import { getCookie } from "../../utils/cookie";
+
+const CommentElement = (props) => {
+  const { comment, handleCommentDelete } = props;
+  const [content, setContent] = useState(comment.content);
+  const [isEdit, setIsEdit] = useState(false);
+
+  const [user, setUser] = useState(null);
 
-const CommentElement = ({comment, handleCommentEdit, handleCommentDelete}) => {
-  // TODO : props 받기
-  // TODO : 수정하는 input 내용 관리
-  // comment created_at 전처리
   const date = new Date(comment.created_at);
   const year = date.getFullYear();
   let month = date.getMonth() + 1;
@@ -11,38 +16,72 @@ const CommentElement = ({comment, handleCommentEdit, handleCommentDelete}) => {
   let day = date.getDate();
   day = day < 10 ? `0${day}` : day;
 
-  const [commentInput, setCommentInput] = useState(comment.content);
-  const [editing, setEditing] = useState(false);
-  const onclickEdit = (e) => {
-    e.preventDefault();
-    if(editing)
-      handleCommentEdit(comment.id, commentInput); //will edit comment
-    setEditing(!editing);
+  useEffect(() => {
+    if (getCookie("access_token")) {
+      const getUserAPI = async () => {
+        const user = await getUser();
+        setUser(user);
+      };
+      getUserAPI();
+    }
+  }, []);
+  
+	// 추가
+  const handleEditComment = () => {
+    updateComment(comment.id, { content: content });
   };
+	// updateComment 활용
+
 
   return (
     <div className="w-full flex justify-between gap-1 mb-2">
       <div className="w-3/4">
-        {/* {수정중 ? <input /> : <p>{내용}</p>} */}
-        {editing?
-          <input onChange={(e)=>{setCommentInput(e.target.value)}} value={commentInput} className="input"/> 
-          : <p className="text-lg" >{commentInput}</p>
-        }
-        {editing ? null:
-          <span className="text-base mr-1 text-gray-300">
-            {year}.{month}.{day}
-          </span>
-        } 
+        {isEdit ? (
+          <input
+            className="input mr-4"
+            value={content}
+            onChange={(e) => setContent(e.target.value)}
+          />
+        ) : (
+          <p className="text-lg mr-4">{comment.content}</p>
+        )}
+        <span className="text-base mr-1 text-gray-300">
+          {year}.{month}.{day}
+        </span>
       </div>
+			{/* 수정 */}
+
+      {user?.id === comment.author?.id ? (
         <div className="w-1/4 flex flex-row-reverse items-center">
-          {!editing?<button className="text-gray-300 ml-1 mr-1" onClick={()=>{handleCommentDelete(comment.id)}}>삭제</button>:null}
-          <button className="text-gray-300 ml-1 mr-1" onClick={onclickEdit}>
-            {editing ? "수정완료" : "수정"}
-          </button>
+          {isEdit ? (
+            <>
+              <button onClick={handleEditComment}>Done</button>
 
+              <button
+                className="mr-3"
+                onClick={() => {
+                  setIsEdit(!isEdit);
+                  setContent(comment.content);
+                }}
+              >
+                Back
+              </button>
+            </>
+          ) : (
+            <>
+              <button onClick={() => handleCommentDelete(comment.id)}>
+                Del
+              </button>
+              <button className="mr-3" onClick={() => setIsEdit(!isEdit)}>
+                Edit
+              </button>
+            </>
+          )}
         </div>
+      ) : null}
+
+			{/* 수정 */}
     </div>
-    );
+  );
 };
-
-export default CommentElement;
+export default CommentElement;
\ No newline at end of file
diff --git a/src/components/Comment/index.jsx b/src/components/Comment/index.jsx
index 10c6010..584370b 100644
--- a/src/components/Comment/index.jsx
+++ b/src/components/Comment/index.jsx
@@ -1,64 +1,46 @@
 import { useEffect, useState } from "react";
-import comments from "../../data/comments";
 import CommentElement from "./CommentElement";
 import { CommentForm } from "../Form";
+import { deleteComment, getComments } from "../../apis/api";
 
-export const Comment = (postId) => {
+export const Comment = ({postId}) => {
 	// TODO 1: 가짜 comments 불러와서 관리해야겟즤
-	const [commentList, setCommentList] = useState();
-	const [commentIdCounter, setCommentIdCounter] = useState(0);
+	const [commentList, setCommentList] = useState([]);
+
+	//get comments
 	useEffect(() => {
-		const filteredComment=comments.filter((c)=>{return c.post===postId;})
-		setCommentList(filteredComment);
-	},[]);
-	// TODO 2: comment추가하는 input 관리해줘야겟지
-	const [commentInput, setCommentInput] = useState("");
-	const [formData, setFormData] = useState({
-    id: 0,
-    content: "",
-    created_at: "",
-    post: 0,
-    author: {
-			id: 0,
-			username: ""
-		}});
+		const getCommentAPI=async ()=>{
+			const comments=await getComments(postId);
+			setCommentList(comments);
+		};
+		getCommentAPI();
+	},[postId]);
+
+	
 	
 	// TODO 3: comment Form 제출됐을때 실행되는 함수 만들어줘
-	const handleCommentSubmit = () => {
-		//comment Input을 가지고 comment를 추가
-		const newCommentData = {
-			...formData,
-			id : commentIdCounter,
-			content: commentInput,
-			created_at: new Date(),
-			post: postId,
-			author: {
-				id: 2,
-				username: "베이비"
-			}
-		};
-		setCommentIdCounter(commentIdCounter+1);
-		setCommentList([...commentList, newCommentData]);
-	}
 
-	//comment editing
-	const handleCommentEdit = (commentId, contentEdited) => {
-		//commentId를 가지고 comment를 찾아서 content를 수정
-		const newCommentList = commentList.map((comment) => {
-			if(comment.id === commentId) {
-				comment.content = contentEdited;
-				comment.created_at = new Date();
-			}
-			return comment;
-		});
-		setCommentList(newCommentList);
-	}
+
+	// //comment editing
+	// const handleCommentEdit = (commentId, contentEdited) => {
+	// 	//commentId를 가지고 comment를 찾아서 content를 수정
+	// 	const newCommentList = commentList.map((comment) => {
+	// 		if(comment.id === commentId) {
+	// 			comment.content = contentEdited;
+	// 			comment.created_at = new Date();
+	// 		}
+	// 		return comment;
+	// 	});
+	// 	setCommentList(newCommentList);
+	// }
 
 	// TODO 4: commet Delete 하는 함수 만들어죠\
 	const handleCommentDelete = (commentId) => {
 		//commentId를 가지고 comment를 찾아서 삭제
-		const newCommentList = commentList.filter((comment) => comment.id !== commentId);
-		setCommentList(newCommentList);
+		if(window.confirm("정말 삭제?")){
+			deleteComment(commentId);
+			
+		}
 	}
 
 	return (
@@ -67,17 +49,13 @@ export const Comment = (postId) => {
 			{commentList && commentList.map((comment) => (
 				<CommentElement 
 					comment={comment} 
-					handleCommentEdit={handleCommentEdit} 
+					// handleCommentEdit={handleCommentEdit} 
 					handleCommentDelete={handleCommentDelete}
 				/>
 			))}
 			{/* // <CommentElement/> 가 comment마다 반복시켜야즤 */}
 
-			<CommentForm 
-				onSubmit={handleCommentSubmit}
-				commentInput={commentInput}
-				setCommentInput={setCommentInput}
-			/>
+			<CommentForm postId={postId}/>
 		</div>
 	);
 };
diff --git a/src/components/Form/index.jsx b/src/components/Form/index.jsx
index 29ba8fb..55e86e2 100644
--- a/src/components/Form/index.jsx
+++ b/src/components/Form/index.jsx
@@ -1,4 +1,5 @@
 import { useState } from "react";
+import { createComment } from "../../apis/api";
 
 //signup form component
 export const SignUpForm = ({formData, setFormData, handleSignUpSubmit})=> {
@@ -262,14 +263,17 @@ export const PostForm = ({ onSubmit, tags, formData, setFormData }) => {
     );
   };
 
-export const CommentForm = ({onSubmit, commentInput, setCommentInput}) => {
+export const CommentForm = ({postId}) => {
+  const [newContent, setNewContent] = useState("");
+  
   const handleChange=(e)=>{
-    setCommentInput(e.target.value);
+    setNewContent(e.target.value);
   }
   const onClickSubmit = (e) => {
     e.preventDefault();
-    onSubmit();
-    setCommentInput("");
+    createComment({ post: postId, content: newContent });
+    setNewContent("");
+ 		// postId, newContent만 하나의 객체로 만들어 보내줌
   };
 
   return (
@@ -279,7 +283,7 @@ export const CommentForm = ({onSubmit, commentInput, setCommentInput}) => {
         placeholder="댓글을 입력해주세요..."
         id="comment"
         className="input mt-7 mr-5 h-15"
-        value={commentInput}
+        value={newContent}
         onChange={handleChange}
       />
       <button type="submit" className="button mt-7 h-15">Submit</button>
diff --git a/src/components/Header/index.jsx b/src/components/Header/index.jsx
index 5f0a8c7..600c2fc 100644
--- a/src/components/Header/index.jsx
+++ b/src/components/Header/index.jsx
@@ -1,20 +1,43 @@
 import {Link} from "react-router-dom";
 import lion from "../../assets/images/lion.jpeg";
+import { getCookie,removeCookie } from "../../utils/cookie";
+import { useEffect, useState } from "react";
+import { logOut } from "../../apis/api";
 
 const Header = () => {
+
+  const [isLoggedIn, setIsLoggedIn] = useState("");
+  useEffect(() => {
+    const loggedIn=getCookie("access_token")?true:false;
+    setIsLoggedIn(loggedIn);
+  }, []);
+	
+	const handleLogout = () => {
+    const token = getCookie("refresh_token");
+    logOut(token);
+  };
+
+
   return (
     <div id="header-wrapper" className="flex items-center justify-between w-full gap-5 bg-black px-5 py-2.5 h-20">
       <div className="flex items-center">
         <img id="header-lion" src={lion} alt="lion" className="max-h-16"/>
         
-				{/* 추가 👇🏻 */}
 				<Link to="/" className="ml-3">Snulion Blog</Link>
-				{/* 추가 👆🏻 */}
       </div>
-			{/* 추가 👇🏻 */}
 			<div className="flex">
-        <Link to="/signin" className="mr-10 p-3 uppercase">sign in</Link>
-        <Link to="/signup" className="mr-10 p-3 uppercase">sign up</Link>
+        {!isLoggedIn ? (
+          <>
+            <Link to="/signin" className="mr-10 p-3 uppercase">sign in</Link>
+            <Link to="/signup" className="mr-10 p-3 uppercase">sign up</Link>
+          </>
+        ) : (
+          <>
+            <Link to="/myinfo" className="mr-10 p-3 uppercase">My Info</Link>
+            <Link to="/" onClick={handleLogout} className="mr-10 p-3 uppercase">Log out</Link>
+          </>
+        )
+      }
       </div>
     </div>
   );
diff --git a/src/components/ItemEdit/index.jsx b/src/components/ItemEdit/index.jsx
new file mode 100644
index 0000000..753b390
--- /dev/null
+++ b/src/components/ItemEdit/index.jsx
@@ -0,0 +1,55 @@
+import { useState } from "react";
+
+export const EditableInputField = ({
+  content,
+  setContent,
+  handleEdited,
+  label,
+  placeholder,
+}) => {
+  const [edit, setEdit] = useState(false);
+
+  return (
+    <div className="w-full">
+      {label && <label className="text-gray-300 text-sm">{label}</label>}
+      <div className="w-full flex justify-between gap-1 mb-2">
+        <input
+          type="text"
+          className="border border-orange-500 rounded-md w-full px-2 py-1 text-white bg-transparent disabled:border-gray-300"
+          value={content}
+          placeholder={placeholder}
+          onChange={(e) => setContent(e.target.value)}
+          disabled={!edit}
+        />
+      {!edit ? (
+        <span>
+          <button
+            className="text-gray-500 text-sm m-1 whitespace-nowrap hover:text-gray-100"
+            onClick={() => setEdit(!edit)}
+          >
+            수정
+          </button>
+        </span>
+      ) : (
+        <span className="flex justify-end">
+          <button
+            className="text-gray-500 text-sm m-1  whitespace-nowrap hover:text-gray-100"
+            onClick={() => setEdit(!edit)}
+          >
+            취소
+          </button>
+          <button
+            className="text-gray-500 text-sm m-1  whitespace-nowrap hover:text-gray-100"
+            onClick={(e) => {
+              setEdit(!edit);
+              handleEdited(e);
+            }}
+          >
+            완료
+          </button>
+        </span>
+      )}
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/Posts/index.jsx b/src/components/Posts/index.jsx
index dd41f79..a18750a 100644
--- a/src/components/Posts/index.jsx
+++ b/src/components/Posts/index.jsx
@@ -1,44 +1,45 @@
-import {Link} from "react-router-dom";
+import { Link } from "react-router-dom";
+import { likePost } from "../../apis/api";
+import { useState } from "react";
 
 export const SmallPost = ({ post }) => {
-  const onClickLike = () => {
-    console.log("나도 좋아!");
+  const [likeCount, setLikeCount] = useState(post.like_users.length);
+  const onClickLike = async () => {
     // add api call for liking post here
+    setLikeCount(await likePost(post.id));
   };
 
   return (
     <div className="w-64 relative block group py-10 px-8 mr-5 my-5 ring-8 ring-transparent border-2 border-box border-white hover:bg-orange-400 hover:text-black hover:border-transparent hover:ring-orange-200 rounded-xl font-medium">
       <h1 className="font-extrabold text-2xl truncate">{post.title}</h1>
       <p className="mt-2">{post.author.username}</p>
-      <div className="flex flex-wrap mt-5">
+      <div className="flex flex-wrap mt-5 mb-3">
         {post.tags.map((tag) => (
           <span key={tag.id} className="tag m-1">
             #{tag.content}
           </span>
         ))}
       </div>
-      <div onClick={onClickLike}>
-        {post.like_users.length > 0 && `❤️ ${post.like_users.length}`}
+      <div
+        className="absolute bottom-3 left-4 cursor-pointer"
+        onClick={onClickLike}
+      >
+        ❤️ {likeCount}
       </div>
-      <div className="flex justify-center m-20">
-        <div className="flex justify-center m-20">
+      <Link to={`/${post.id}`}>
+        <div className="absolute bottom-0 right-0 bg-orange-400 px-5 py-2 rounded-lg translate-x-5 translate-y-5">
+          <span className="uppercase">detail</span>
         </div>
-        
-        <Link to={`/${post.id}`}>
-          <div className="absolute bottom-0 right-0 bg-orange-400 px-5 py-2 rounded-lg translate-x-5 translate-y-5">
-            <span className="uppercase">detail</span>
-          </div>
-        </Link>
-      </div>
+      </Link>
     </div>
   );
 };
 
-
 export const BigPost = ({ post }) => {
-  const onClickLike = () => {
-    console.log("나도 좋아!");
+  const [likeCount, setLikeCount] = useState(post.like_users.length);
+  const onClickLike = async () => {
     // add api call for liking post here
+    setLikeCount(await likePost(post.id));
   };
 
   return (
@@ -55,10 +56,10 @@ export const BigPost = ({ post }) => {
               </span>
             ))}
         </div>
-        <div className="flex mt-5" onClick={onClickLike}>
-          ❤️ {post.like_users.length > 0 && `${post.like_users.length}`}
+        <div className="flex mt-5 cursor-pointer" onClick={onClickLike}>
+          ❤️ {likeCount}
         </div>
       </div>
     </div>
   );
-};
+};
\ No newline at end of file
diff --git a/src/routes/HomePage.jsx b/src/routes/HomePage.jsx
index 621a5e8..dbdb978 100644
--- a/src/routes/HomePage.jsx
+++ b/src/routes/HomePage.jsx
@@ -1,25 +1,33 @@
 import { useEffect, useState } from "react";
 import { SmallPost } from "../components/Posts";
-import posts from "../data/posts";
-import { Dotting } from "dotting";
+import { getPosts, getTags } from "../apis/api";
+import { Link } from "react-router-dom";
+import { getCookie } from "../utils/cookie";
 
 const HomePage = () => {
+  //get post API call
+
   const [tags, setTags] = useState([]);
   const [searchTags, setSearchTags] = useState([]);
   const [searchValue, setSearchValue] = useState("");
-  const [postList, setPostList] = useState(posts);
+  const [postList, setPostList] = useState([]);
 
   useEffect(() => {
-    const tagList = posts.reduce((acc, post) => {
-      for (let tag of post.tags) {
-        acc.add(tag.content);
-      }
-      return acc;
-    }, new Set());
-    setTags([...tagList]);
-    setSearchTags([...tagList]);
+    const getPostAPI=async ()=>{
+      const posts=await getPosts();
+      setPostList(posts);
+    };
+    getPostAPI();
+    const getTagsAPI=async ()=>{
+      const tags = await getTags();
+      const tagContents=tags.map((tag)=>tag.content);
+      setTags(tagContents);
+      setSearchTags(tagContents);
+    };
+    getTagsAPI();
   }, []);
 
+
   const handleChange = (e) => {
     const { value } = e.target;
     const newTags = tags.filter((tag) => tag.includes(value));
@@ -28,29 +36,14 @@ const HomePage = () => {
 
   const handleTagFilter = (e) => {
     const { innerText } = e.target;
-    let tag=innerText.slice(1);
-    if(tag == searchValue) {
+    if (searchValue === innerText.substring(1)) {
       setSearchValue("");
-      // setSearchTags(tags);
-      setPostList(posts);
+    } else {
+      const activeTag = innerText.substring(1);
+      setSearchValue(activeTag);
     }
-    else {
-      setSearchValue(tag);
-      const newTags = tags.filter((postTag) => postTag.includes(tag));
-      // setSearchTags(newTags);
-    
-    let filteredPosts = posts.filter((post) => {
-      for (let postTag of post.tags) {
-        if (postTag.content === tag) {
-          return true;
-        }
-      }
-      return false;
-
-    });
-    setPostList(filteredPosts);
-  }
   };
+
   return (
     <div>
       {/* <Dotting width={600} height={300}/> */}
@@ -77,13 +70,26 @@ const HomePage = () => {
             );
           })}
         </div>
+        <div className="grid grid-cols-4 px-10 mt-10">
+        {postList
+          .filter((post) =>
+            searchValue
+              ? post.tags.find((tag) => tag.content === searchValue)
+              : post
+          )
+          .map((post) => (
+            <SmallPost key={post.id} post={post} />
+          ))}
       </div>
-
-      <div className="grid grid-cols-4 px-10 mt-10">
-        {postList.map((post) => (
-          <SmallPost key={post.id} post={post} />
-        ))}
+      {getCookie("access_token") ? (
+        <div className="flex justify-center m-20">
+          <Link className="button" to="/create">
+            Post
+          </Link>
+        </div>
+      ) : null}
       </div>
+
     </div>
   );
 };
diff --git a/src/routes/MyInfoPage.jsx b/src/routes/MyInfoPage.jsx
new file mode 100644
index 0000000..c1e4a96
--- /dev/null
+++ b/src/routes/MyInfoPage.jsx
@@ -0,0 +1,56 @@
+import { useEffect, useState } from "react";
+import { EditableInputField } from "../components/ItemEdit";
+import { getUserProfile, updateUserProfile } from "../apis/api";
+
+const MyInfoPage = () => {
+  const [userProfile, setUserProfile] = useState();
+  const validUser = userProfile?.user;
+  useEffect(() => {
+    const getUserFromAPI = async () => {
+      const gotUserProfile = await getUserProfile();
+      setUserProfile(gotUserProfile);
+      // console.log(gotUserProfile);   
+    }
+    getUserFromAPI();
+  },[]);
+  
+  const handleEdited = (e) => {
+    e.preventDefault();
+    console.log(userProfile);
+    updateUserProfile(userProfile);
+  };
+
+
+  return (
+    validUser &&
+    <div className="flex flex-col items-center w-1/2">
+      <h1 className="text-gray-100 font-semibold text-xl">My Info</h1>
+      <EditableInputField
+        label="email"
+        content={userProfile.user.email}
+        setContent={(c)=>{setUserProfile({...userProfile, user:{...userProfile.user, email:c}})}}
+        handleEdited={handleEdited}
+      />
+      <EditableInputField
+        label={"User Name"}
+        content={userProfile.user.username}
+        setContent={(c)=>{setUserProfile({...userProfile, user:{...userProfile.user, username:c}})}}
+        handleEdited={handleEdited}
+      />
+    <EditableInputField
+        label={"College"}
+        content={userProfile.college}
+        setContent={(c)=>{setUserProfile({...userProfile, college: c})}}
+        handleEdited={handleEdited}
+      />
+    <EditableInputField
+        label={"Major"}
+        content={userProfile.major}
+        setContent={(c)=>{setUserProfile({...userProfile, major: c})}}
+        handleEdited={handleEdited}
+      />
+    </div>
+  );
+};
+
+export default MyInfoPage;
\ No newline at end of file
diff --git a/src/routes/PostCreatePage.jsx b/src/routes/PostCreatePage.jsx
index 85c97bb..30894b6 100644
--- a/src/routes/PostCreatePage.jsx
+++ b/src/routes/PostCreatePage.jsx
@@ -2,72 +2,50 @@ import { useEffect, useState } from "react";
 import { BigPost } from "../components/Posts";
 import posts from "../data/posts";
 import { PostForm } from "../components/Form";
+import { getTags, createPost } from "../apis/api";
+import { useNavigate } from "react-router-dom";
 
 const PostCreatePage = () => {
   const [isSubmitted, setIsSubmitted] = useState(false);
   // 화면그리기
   const [formData, setFormData] = useState({
-    id: posts.length,
     title: "",
     content: "",
-    author: { id: posts.length, username: "베이비" },
     tags: [],
   });
-	
-	const onSubmit = (e) => {
-    //TODO : api connect
-    e.preventDefault();
 
-		{/* 추가 👇🏻 */}
-		const createdPost = {
-      ...formData,
-      like_users: [],
-      tags: formData.tags.map((tag, idx) => {
-        return { id: idx + 1, content: tag };
-      }),
+  const navigate = useNavigate();
+
+  const onSubmit = (e) => {
+      e.preventDefault();
+      createPost(formData, navigate);
     };
-    setFormData(createdPost);
-    setIsSubmitted(true);
-		{/* 추가 👆🏻 */}
-  };
 
   // 기존 태그 불러오기
   // TODO : api call(get all tags)
   const [tags, setTags] = useState([]);
   useEffect(() => {
-    const duplicatedTagList = posts.reduce((acc, post) => {
-      for (let tag of post.tags) {
-        acc.add(tag.content);
-      }
-
-      return acc;
-    }, new Set());
-
-    const tagList = [...duplicatedTagList];
-
-    setTags([...tagList]);
+    const getTagsAPI = async () => {
+      const tags = await getTags();
+      const tagContents = tags.map((tag) => {
+        return tag.content;
+      });
+      setTags(tagContents);
+    };
+    getTagsAPI();
   }, []);
-
   return (
-    <>
-      {isSubmitted ? (
-        <div className="flex flex-col items-center w-3/5 p-8">
-          <BigPost post={formData} />
-        </div>
-      ) : (
-        <div className="flex flex-col items-center w-3/5">
-          <h3 className="font-bold text-4xl">New Post</h3>
-					<PostForm
-						tags={tags}
-            onSubmit={onSubmit}
-            formData={formData}
-						setFormData={setFormData}
-          />
-
-        </div>
-      )}
-    </>
+    <div className="flex flex-col items-center w-3/5">
+      <h3 className="font-bold text-4xl">New Post</h3>
+      <PostForm
+        onSubmit={onSubmit}
+        tags={tags}
+        formData={formData}
+        setFormData={setFormData}
+      />
+    </div>
   );
 };
 
+
 export default PostCreatePage;
diff --git a/src/routes/PostDetailPage.jsx b/src/routes/PostDetailPage.jsx
index f3e34b6..846a95b 100644
--- a/src/routes/PostDetailPage.jsx
+++ b/src/routes/PostDetailPage.jsx
@@ -3,23 +3,43 @@ import { useParams } from "react-router-dom";
 import { BigPost } from "../components/Posts";
 import { Link } from "react-router-dom";
 import { Comment } from "../components/Comment";
-import posts from "../data/posts";
+import { deletePost, getPost, getUser } from "../apis/api";
+import { getCookie } from "../utils/cookie";
 
 const PostDetailPage = () => {
 // parameter로 받은 id에 해당하는 post를 찾아서 넣자
 // TODO : api call(get post by id)
   const { postId } = useParams();
   const [post, setPost] = useState();
+
+  const [user, setUser] = useState();
+
   useEffect(() => {
-    const post = posts.find((post) => post.id === parseInt(postId));
-    setPost(post);
+    // const post = posts.find((post) => post.id === parseInt(postId));
+    // setPost(post);
+    const getPostAPI=async ()=>{
+      setPost(await getPost(postId));
+    };
+    getPostAPI();
   }, [postId]);
 
+  useEffect(() => {
+    // access_token이 있으면 유저 정보 가져옴
+    if (getCookie("access_token")) {
+      const getUserAPI = async () => {
+        const currentUser = await getUser();
+        setUser(currentUser);
+        console.log(currentUser);
+      };
+      getUserAPI();
+    }
+  }, []);
 
 const onClickDelete = () => {
-    console.log("delete");
     // add api call for deleting post here
     // add redirect to home page
+    if(window.confirm("정말 삭제?"));
+      deletePost(postId);
   };
 
 
@@ -29,11 +49,21 @@ const onClickDelete = () => {
         {/* post detail component */}
         <BigPost post={post} />
         <Comment postId={postId}/>
-				<div>
-          <Link to={`/${post.id}/edit`}>
-            <button className="button mt-10 mx-4 py-2 px-10">Edit</button>
-          </Link>
-          <button className="button mt-10 mx-4 py-2 px-10" onClick={onClickDelete}>Delete</button>
+        <div>
+          {user?.id === post?.author?.id ? (
+            <>
+              <Link to={`/${post.id}/edit`}>
+                <button className="button mt-10 mx-4 py-2 px-10">Edit</button>
+              </Link>
+              <button
+                className="button mt-10 mx-4 py-2 px-10"
+                onClick={onClickDelete}
+              >
+                Delete
+              </button>
+            </>
+          ) : null}
+					{/* user와 post.author가 동일하면 버튼을 리턴, 아니면 null */}
         </div>
       </div>
     )
diff --git a/src/routes/PostEditPage.jsx b/src/routes/PostEditPage.jsx
index 9aadef0..a568bf6 100644
--- a/src/routes/PostEditPage.jsx
+++ b/src/routes/PostEditPage.jsx
@@ -4,75 +4,70 @@ import { PostForm } from "../components/Form";
 import posts from "../data/posts";
 import { Link } from "react-router-dom";
 import { BigPost } from "../components/Posts";
+import { getPost, getTags, updatePost } from "../apis/api";
+import { useNavigate } from "react-router-dom";
 
 const PostEditPage = () => {
-  const [isSubmitted, setIsSubmitted] = useState(false);
   const { postId } = useParams();
-  const [formData, setFormData] = useState({});
+  const [formData, setFormData] = useState({
+    title: "",
+    content: "",
+    tags: [],
+  });
 
-  const [tags, setTags] = useState([]);
   useEffect(() => {
-    const duplicatedTagList = posts.reduce((acc, post) => {
-      for (let tag of post.tags) {
-        acc.add(tag.content);
-      }
-
-      return acc;
-    }, new Set());
-
-    const tagList = [...duplicatedTagList];
+    const getPostAPI = async () => {
+      const post = await getPost(postId);
+      const postFormData = {
+        ...post,
+        tags: post.tags.map((tag) => tag.content),
+      };
+      setFormData(postFormData);
+    };
+    getPostAPI();
+  }, [postId]);
 
-    setTags([...tagList]);
+  const [tags, setTags] = useState([]);
+  useEffect(() => {
+    const getTagsAPI = async () => {
+      const tags = await getTags();
+      const tagContents = tags.map((tag) => {
+        return tag.content;
+      });
+      setTags(tagContents);
+    };
+    getTagsAPI();
   }, []);
 
-	const onSubmit = (e) => {
-    //TODO : api connect
-    e.preventDefault();
+  const navigate = useNavigate();
 
-		{/* 추가 👇🏻 */}
-		const createdPost = {
-      ...formData,
-      like_users: [],
-      tags: formData.tags.map((tag, idx) => {
-        return { id: idx + 1, content: tag };
-      }),
+  const onSubmit = (e) => {
+      e.preventDefault();
+      updatePost(postId, formData, navigate);
     };
-    setFormData(createdPost);
-    setIsSubmitted(true);
-		{/* 추가 👆🏻 */}
-  };
 
   // 기존 post 불러오기
   useEffect(() => {
     const post = posts.find((post) => post.id === parseInt(postId));
-    const postFormData = { ...post, tags: post.tags.map((tag) => tag.content) };
+    const postFormData = { ...post, tags: post?.tags.map((tag) => tag.content) };
     setFormData(postFormData);
   }, [postId]);
 
-
   return (
-    <>
-      {isSubmitted ? (
-        <div className="flex flex-col items-center w-3/5 p-8">
-          <BigPost post={formData} />
-        </div>
-      ) : (
-        <div className="flex flex-col items-center w-3/5">
-          <div className="flex w-full items-center">
-            <Link to={`/${postId}`}>
-              <button className="w-20">{`< Back`}</button>
-            </Link>
-            <h3 className="flex-1 font-bold text-4xl">Edit Post</h3>
-          </div>
-          <PostForm
-						tags={tags}
-            onSubmit={onSubmit}
-            formData={formData}
-						setFormData={setFormData}
-          />
-        </div>
-      )}
-    </>
+    <div className="flex flex-col items-center w-3/5">
+      <div className="flex w-full items-center">
+        <Link to={`/${postId}`}>
+          <button className="w-20">{`< Back`}</button>
+        </Link>
+        <h3 className="flex-1 font-bold text-4xl">Edit Post</h3>
+      </div>
+      <PostForm
+        onSubmit={onSubmit}
+        tags={tags}
+        formData={formData}
+        setFormData={setFormData}
+      />
+    </div>
   );
 };
 
diff --git a/src/routes/SignInPage.jsx b/src/routes/SignInPage.jsx
index 95e282c..c3da044 100644
--- a/src/routes/SignInPage.jsx
+++ b/src/routes/SignInPage.jsx
@@ -1,15 +1,18 @@
 import { useState } from "react";
 import { SignInForm } from "../components/Form";
+import { signIn } from "../apis/api";
 
 const SignInPage = () => {
   const [formData, setFormData] = useState({
     username: "",
     password: "",
   });
-  const handleSignInSubmit = () => {
-    console.log(formData  );
-    alert("로그인 완 료!");
+  const handleSignInSubmit = (e) => {
 		// add api call for sign in here
+    e.preventDefault();
+    signIn(formData);
+    // console.log(formData  );
+    // alert("로그인 완 료!");
   };
 
   return (
diff --git a/src/routes/SignUpPage.jsx b/src/routes/SignUpPage.jsx
index f5adcd3..16b1002 100644
--- a/src/routes/SignUpPage.jsx
+++ b/src/routes/SignUpPage.jsx
@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { SignUpForm } from "../components/Form";
+import { signUp } from "../apis/api";
 
 const SignUpPage = () => {
   const [formData, setFormData] = useState({
@@ -10,10 +11,11 @@ const SignUpPage = () => {
     college: "",
     major: "",
   });
-  const [email, setEmail] = useState("");
-	const handleSignUpSubmit = () => {
-    alert(`${email}로 회원가입 해 줘`);
+	const handleSignUpSubmit = (e) => {
+    e.preventDefault();
 		// add api call for sign up here
+    signUp(formData);
+    // alert(`${email}로 회원가입 해 줘`);
 
   };
 
diff --git a/src/utils/cookie.js b/src/utils/cookie.js
new file mode 100644
index 0000000..bd44684
--- /dev/null
+++ b/src/utils/cookie.js
@@ -0,0 +1,21 @@
+// src/utils/cookie.js
+
+import { Cookies } from 'react-cookie';
+
+const cookies = new Cookies()
+
+// 쿠키 설정하는 함수 
+// 궁금하실까봐 만들긴 했는데, 우리는 안 쓸거에요!! (쿠키에 토큰 넣어주는 건 서버에서 해주니까요)
+export const setCookie = ( name, value, option) => {
+	return cookies.set( name, value, {...option})
+}
+
+// 쿠키 정보 가져오는 함수 
+export const getCookie = ( name ) => {
+	return cookies.get(name)
+}
+
+// 쿠키 정보 삭제하는 함수 
+export const removeCookie = ( name ) => {
+    cookies.remove(name)
+}
\ No newline at end of file