From d30110bbb42417b16dea4ad7c01eaa85caaf0816 Mon Sep 17 00:00:00 2001
From: CZ <wngus0223@naver.com>
Date: Sat, 20 May 2023 13:22:21 +0900
Subject: [PATCH 1/3] week9 task

---
 src/components/Comments/CommentElement.jsx |  85 +++++-----
 src/components/Comments/index.jsx          | 183 +++++++++++----------
 src/routes/PostDetailPage.jsx              |   2 +-
 3 files changed, 139 insertions(+), 131 deletions(-)

diff --git a/src/components/Comments/CommentElement.jsx b/src/components/Comments/CommentElement.jsx
index 1057c66..ce51251 100644
--- a/src/components/Comments/CommentElement.jsx
+++ b/src/components/Comments/CommentElement.jsx
@@ -1,10 +1,16 @@
 import { useEffect, useState } from "react";
 
-const CommentElement = ({ comment, deleteComment, editComment}) => {
+const CommentElement = ({
+  comment,
+  comments,
+  deleteComment,
+  setComments
+}) => {
   // TODO : props 받기
   // TODO : 수정하는 input 내용 관리`
 
   // comment created_at 전처리
+  console.log(comments);
   const date = new Date(comment.created_at);
   const year = date.getFullYear();
   let month = date.getMonth() + 1;
@@ -13,6 +19,7 @@ const CommentElement = ({ comment, deleteComment, editComment}) => {
   day = day < 10 ? `0${day}` : day;
 
   const [isClickEdit, setIsClickEdit] = useState(false);
+  const [commentContent, setCommentContent] = useState(comment.content);
 
   const onClickDelete = () => {
     console.log("delete");
@@ -20,43 +27,55 @@ const CommentElement = ({ comment, deleteComment, editComment}) => {
   };
 
   const onClickEdit = () => {
+    console.log("edit");
     setIsClickEdit(true);
-  };
-
-	const doneClickEdit = () => {
-		// setFormData((nowFormData) => ({
-		// 	...nowFormData,
-		// 	content: input.value
-		// }))
-		editComment(comment);
-    setIsClickEdit(false);
-  };
+  }
 
-  // useEffect(()=>{
-  // 	if(handleCommentDelete){
+  const editingContent = (e) => {
+    // console.log(e.target.value);
+    setCommentContent(e.target.value);
+  }
 
-  // 	}
-  // })
+  const updateComment = (e) => {
+    e.preventDefault();
+    const updatingComments = comments.map((c) => (
+      // c.id == comment.id ? ([...comments, c.content= commentContent]) : ([...comments])
+      c.id == comment.id ? (c.content= commentContent) : ([...comments])
+    ));
+    // console.log("comments!", comments);
+    setComments(comments);
+    // console.log(comments);
+    setIsClickEdit(false);
+  }
 
   return (
     <div>
       <div className="w-full flex justify-between gap-1 mb-2">
         {isClickEdit ? (
-          <div className="w-full flex flex-row">
-            <div className="w-3/4">
-              <input className="input mr-4" defaultValue= {comment.content} />
-              <span className="text-base mr-1 text-gray-300">
-                {year}.{month}.{day}
-              </span>
+          <form className = "form" onSubmit={updateComment}>
+            <div className="w-full flex flex-row">
+              <div className="w-3/4">
+                <input
+                  id = "edited_content"
+                  className="input mr-4"
+                  defaultValue={comment.content}
+                  onChange={editingContent}
+                />
+                <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">
+                <button className="mr-3 mb-6" type="submit">
+                  Done
+                </button>
+              </div>
             </div>
-            <div className="w-1/4 flex flex-row-reverse items-center">
-              <button className="mr-3 mb-6" onClick={doneClickEdit}>Done</button>
-            </div>
-          </div>
+          </form>
         ) : (
           <div className="w-full flex flex-row">
             <div className="w-3/4">
-              <div>{comment.content}</div>
+              <div>{commentContent}</div>
               <span className="text-base mr-1 text-gray-300">
                 {year}.{month}.{day}
               </span>
@@ -70,19 +89,7 @@ const CommentElement = ({ comment, deleteComment, editComment}) => {
           </div>
         )}
       </div>
-    </div> // 1
-    // 			<div>
-    // 		<div className="w-3/4">
-    // 			<div>{comment.content}</div>
-    // 			<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">
-    // 			<button onClick={onClickDelete}>Del</button>
-    // 			<button className="mr-3" onClick={onClickEdit}>Edit</button>
-    // 		</div>
-    // 		)};
+    </div> 
   );
 };
 
diff --git a/src/components/Comments/index.jsx b/src/components/Comments/index.jsx
index aca7515..8df5f42 100644
--- a/src/components/Comments/index.jsx
+++ b/src/components/Comments/index.jsx
@@ -4,106 +4,107 @@ import comment from "../../data/comment";
 import CommentElement from "./CommentElement";
 
 const Comment = ({ commentt }) => {
-	// TODO 1: 가짜 comments 불러와서 관리해야겟즤
-	const { postId } = useParams();
-
-	const [comments, setComments] = useState();
-
-	useEffect(() => {
-		const comments = comment.filter((comment)=> comment.post == postId);
-		setComments(comments);
-	}, [postId]);
-
-	// TODO 2: comment추가하는 input 관리해줘야겟지
-	const [isSubmitted, setIsSubmitted] = useState(false);	
-	const [commentInputValue, setCommentInputValue] = useState("");
-	
-	useEffect(() =>{
-		const commentInputValue = formData.content;
-		setCommentInputValue(commentInputValue);
-		// commentelement로 만들어줘야겠지? -> 이게 아닌가벼?
-		// 그럼 이걸 그냥 밑에 올리는. 그런... 
-	},[commentInputValue]);
-
-	// TODO 3: comment Form 제출됐을때 실행되는 함수 만들어줘
-
-	const time = new Date();
-	const [created_at, setCreated_at] = useState(time.toJSON());
-	// ✅ submit 될 때의 시간을 넣고 싶은데 어떻게 하지??!?
-
-	const [formData, setFormData] = useState({
-		id: comment.length + 1, // 이건 data/comment에 접근을 못해서 제대로 된 index가 나올 수 없을 듯...
-		content: "",
-		created_at: created_at,
-		post: postId, // 사실 여기에는 postId가 들어가는 명세로 되어있어요
-		author: {id: 2, username: "user2"}
-	});
-
-	const handleFormData = (e) => {
+  // TODO 1: 가짜 comments 불러와서 관리해야겟즤
+  const { postId } = useParams();
+
+  const [comments, setComments] = useState();
+
+  useEffect(() => {
+    const comments = comment.filter((comment) => comment.post == postId);
+    setComments(comments);
+  }, [postId]);
+
+  // TODO 2: comment추가하는 input 관리해줘야겟지
+  const [isSubmitted, setIsSubmitted] = useState(false);
+  const [commentInputValue, setCommentInputValue] = useState("");
+
+  useEffect(() => {
+    const commentInputValue = formData.content;
+    setCommentInputValue(commentInputValue);
+    // commentelement로 만들어줘야겠지? -> 이게 아닌가벼?
+    // 그럼 이걸 그냥 밑에 올리는. 그런...
+  }, [commentInputValue]);
+
+  // TODO 3: comment Form 제출됐을때 실행되는 함수 만들어줘
+
+  const time = new Date();
+  const [created_at, setCreated_at] = useState(time.toJSON());
+
+  const [formData, setFormData] = useState({
+    id: comment.length + 1, // 이건 data/comment에 접근을 못해서 제대로 된 index가 나올 수 없을 듯...
+    content: "",
+    created_at: created_at,
+    post: postId, // 사실 여기에는 postId가 들어가는 명세로 되어있어요
+    author: { id: 2, username: "user2" },
+  });
+
+  const handleFormData = (e) => {
     const { id, value } = e.target;
     setFormData({ ...formData, [id]: value });
-		console.log(formData);
+    console.log(formData);
   };
 
-	const handleCommentSubmit = (e) => {
-		e.preventDefault();
-		comments.push(formData);
-		console.log(formData.content);
-		setFormData((nowFormData) => ({
-			...nowFormData,
-			content: ""
-		}))
-		// console.log("input", commentInputValue);
-		console.log(comments);
+  const handleCommentSubmit = (e) => {
+    e.preventDefault();
+    comments.push(formData);
+    console.log(formData.content);
+    setFormData((nowFormData) => ({
+      ...nowFormData,
+      content: "",
+    }));
+    // console.log("input", commentInputValue);
+    console.log(comments);
     // alert(`"${formData.content}" 댓글이 작성 완료되었습니다잉`);
-		// comments.push(formData);
+    // comments.push(formData);
+  };
+
+  // TODO 4: commet Delete 하는 함수 만들어죠
+  const deleteComment = (comment) => {
+    console.log(comment.content);
+    const deletedComments = comments.filter(
+      (c) => c.content !== comment.content
+    );
+    setComments(deletedComments);
+    console.log(deletedComments);
   };
 
-// TODO 4: commet Delete 하는 함수 만들어죠
-	const deleteComment = (comment) => {
-		console.log(comment.content);
-		const deletedComments = comments.filter((c) => c.content !== comment.content)
-		setComments(deletedComments);
-		console.log(deletedComments);
-	};
-
-	const editComment = (comment) => {
-		// console.log("comment:", comment);
-		// console.log("comment.id:", comment.id);
-		// console.log("감히 제가.. comments에 접근해봅니다", comments[comment.id-1]);
-		console.log(comment.value);
-		const editedComment = comments[comment.id-1].content = comment.value;
-		// console.log(editedComment);
-	};
-
-	return (
-		<div className="w-full mt-5 self-start">
+  return (
+    <div className="w-full mt-5 self-start">
       <h1 className="text-3xl font-bold mt-5 mb-3">Comments</h1>
-			{/* // commentElement */}
-			{/* // <CommentElement/> 가 comment마다 반복시켜야즤 */}
-			
-			{comments && comments.map((comment)=> (
-				<CommentElement comment={comment} deleteComment={deleteComment} editComment={editComment}/>
-			))}
-
-			<form className="flex items-center justify-center mt-10 gap-2" onSubmit={handleCommentSubmit}>
-				{/* // TODO 2-3 : comment 추가하는 comment form 만들어주기 */}
-				<input 
-					required
-					type="text" 
-					id="content"
-					className="input h-14"
-					onChange={handleFormData}
-	        value={formData.content}
-					placeholder="댓글을 입력해주세용"
-				/>
-
-				<button type="submit" className="button">
+      {/* // commentElement */}
+      {/* // <CommentElement/> 가 comment마다 반복시켜야즤 */}
+
+      {comments &&
+        comments.map((comment) => (
+          <CommentElement
+            comment={comment}
+            comments={comments}
+            deleteComment={deleteComment}
+            setComments={setComments}
+          />
+        ))}
+
+      <form
+        className="flex items-center justify-center mt-10 gap-2"
+        onSubmit={handleCommentSubmit}
+      >
+        {/* // TODO 2-3 : comment 추가하는 comment form 만들어주기 */}
+        <input
+          required
+          type="text"
+          id="content"
+          className="input h-14"
+          onChange={handleFormData}
+          value={formData.content}
+          placeholder="댓글을 입력해주세용"
+        />
+
+        <button type="submit" className="button">
           comment
         </button>
-			</form>
-		</div>
-	);
+      </form>
+    </div>
+  );
 };
 
-export default Comment;
\ No newline at end of file
+export default Comment;
diff --git a/src/routes/PostDetailPage.jsx b/src/routes/PostDetailPage.jsx
index 5813914..3bf6111 100644
--- a/src/routes/PostDetailPage.jsx
+++ b/src/routes/PostDetailPage.jsx
@@ -34,7 +34,7 @@ useEffect(() => {
       <div className="flex flex-col items-center w-3/5 p-8">
         {/* post detail component */}
         <BigPost post={post} />
-        <Comment comment={comment} />
+        <Comment comment={comment}/>
 				<div>
           <Link to={`/${post.id}/edit`}>
           <button className="button mt-10 mx-4 py-2 px-10">Edit</button>

From d7019f08125e3e78852863f0cd9f48b1230eb6e2 Mon Sep 17 00:00:00 2001
From: CZ <wngus0223@naver.com>
Date: Tue, 30 May 2023 14:29:27 +0900
Subject: [PATCH 2/3] week10 task

---
 package-lock.json                          |  87 +++++++++++++
 package.json                               |   2 +
 src/apis/api.js                            | 142 +++++++++++++++++++++
 src/apis/axios.js                          |  57 +++++++++
 src/components/Comments/CommentElement.jsx | 142 ++++++++++-----------
 src/components/Comments/index.jsx          |  85 ++++++------
 src/components/Form/index.jsx              |   1 +
 src/components/Header/index.jsx            |  36 +++++-
 src/components/Posts/index.jsx             |   7 +-
 src/routes/HomePage.jsx                    |  70 ++++++----
 src/routes/PostCreatePage.jsx              |  68 ++++------
 src/routes/PostDetailPage.jsx              |  73 +++++++----
 src/routes/PostEditPage.jsx                | 101 +++++++--------
 src/routes/SignInPage.jsx                  |   8 +-
 src/routes/SignUpPage.jsx                  |  21 +--
 src/utils/cookie.js                        |  22 ++++
 16 files changed, 630 insertions(+), 292 deletions(-)
 create mode 100644 src/apis/api.js
 create mode 100644 src/apis/axios.js
 create mode 100644 src/utils/cookie.js

diff --git a/package-lock.json b/package-lock.json
index cc88270..3ac2ccb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,9 @@
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
+        "axios": "^1.4.0",
         "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",
@@ -3820,6 +3822,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",
@@ -3873,6 +3880,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",
@@ -5096,6 +5112,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",
@@ -8702,6 +8741,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",
@@ -14078,6 +14130,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",
@@ -14222,6 +14279,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",
@@ -16266,6 +16336,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 ac7db0d..d3fe664 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,9 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.4.0",
     "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",
diff --git a/src/apis/api.js b/src/apis/api.js
new file mode 100644
index 0000000..d9e5ff1
--- /dev/null
+++ b/src/apis/api.js
@@ -0,0 +1,142 @@
+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 getUser = async () => {
+  const response = await instanceWithToken.get("/account/info/");
+  if (response.status == 200) {
+    // console.log("success");
+  } else {
+    console.log("fail");
+  }
+  return response;
+};
+
+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(-1); // 새로고침 X
+    navigate("/post");
+  } 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, navigate) => {
+  const response = await instanceWithToken.delete(`/post/${id}/`);
+  window.confirm("정말 삭제하실건가요...? U._.U");
+  if (response.status === 204) {
+    console.log("POST DELETE SUCCESS");
+    window.location.reload();
+    navigate(-1);
+  } else {
+    console.log("[ERROR] error while deleting post");
+  }
+};
+
+// 과제!!
+export const likePost = async (postId) => {
+  const response = await instanceWithToken.post(`/post/${postId}/like/`);
+  if (response.status == 200) {
+    console.log("I like it!");
+    window.location.reload();
+  } else {
+    console.log("[Error] error while liking post");
+  }
+};
+
+// src/apis/api.js
+// ...
+// 추가
+
+// 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 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");
+  }
+};
diff --git a/src/apis/axios.js b/src/apis/axios.js
new file mode 100644
index 0000000..ecf79ce
--- /dev/null
+++ b/src/apis/axios.js
@@ -0,0 +1,57 @@
+// src/apis/axios.js
+
+import axios from "axios";
+import { getCookie } from "../utils/cookie";
+
+// 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();
+
+// src/apis/axios.js
+// ⬇️ 추가
+// 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;
+  },
+  (error) => {
+    // 서버가 오류를 응답했을 때 처리 - 콘솔 찍어주고, 프론트에게 보내지 않고 오류를 발생시킴
+    console.log("Response Error!!");
+    return Promise.reject(error);
+  }
+);
\ No newline at end of file
diff --git a/src/components/Comments/CommentElement.jsx b/src/components/Comments/CommentElement.jsx
index ce51251..90d8305 100644
--- a/src/components/Comments/CommentElement.jsx
+++ b/src/components/Comments/CommentElement.jsx
@@ -1,16 +1,14 @@
 import { useEffect, useState } from "react";
+import { getUser, updateComment, deleteComment } from "../../apis/api";
+import { getCookie } from "../../utils/cookie";
 
-const CommentElement = ({
-  comment,
-  comments,
-  deleteComment,
-  setComments
-}) => {
-  // TODO : props 받기
-  // TODO : 수정하는 input 내용 관리`
+const CommentElement = (props) => {
+  const { comment, handleCommentDelete } = props;
+  const [content, setContent] = useState(comment.content);
+  const [isEdit, setIsEdit] = useState(false);
+
+  const [user, setUser] = useState(null);
 
-  // comment created_at 전처리
-  console.log(comments);
   const date = new Date(comment.created_at);
   const year = date.getFullYear();
   let month = date.getMonth() + 1;
@@ -18,79 +16,73 @@ const CommentElement = ({
   let day = date.getDate();
   day = day < 10 ? `0${day}` : day;
 
-  const [isClickEdit, setIsClickEdit] = useState(false);
-  const [commentContent, setCommentContent] = useState(comment.content);
-
-  const onClickDelete = () => {
-    console.log("delete");
-    deleteComment(comment);
+  const handleEditComment = () => {
+    console.log("content: ", content);
+    updateComment(comment.id, { content: content });
   };
 
-  const onClickEdit = () => {
-    console.log("edit");
-    setIsClickEdit(true);
-  }
-
-  const editingContent = (e) => {
-    // console.log(e.target.value);
-    setCommentContent(e.target.value);
-  }
+  const handleDeleteComment = () => {
+    console.log("comment.id: ", comment.id);
+    deleteComment(comment.id);
+  };
 
-  const updateComment = (e) => {
-    e.preventDefault();
-    const updatingComments = comments.map((c) => (
-      // c.id == comment.id ? ([...comments, c.content= commentContent]) : ([...comments])
-      c.id == comment.id ? (c.content= commentContent) : ([...comments])
-    ));
-    // console.log("comments!", comments);
-    setComments(comments);
-    // console.log(comments);
-    setIsClickEdit(false);
-  }
+  useEffect(() => {
+    // access_token이 있으면 유저 정보 가져옴
+    if (getCookie("access_token")) {
+      const getUserAPI = async () => {
+        const user = await getUser();
+        setUser(user);
+      };
+      getUserAPI();
+    }
+  }, []);
 
   return (
-    <div>
-      <div className="w-full flex justify-between gap-1 mb-2">
-        {isClickEdit ? (
-          <form className = "form" onSubmit={updateComment}>
-            <div className="w-full flex flex-row">
-              <div className="w-3/4">
-                <input
-                  id = "edited_content"
-                  className="input mr-4"
-                  defaultValue={comment.content}
-                  onChange={editingContent}
-                />
-                <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">
-                <button className="mr-3 mb-6" type="submit">
-                  Done
-                </button>
-              </div>
-            </div>
-          </form>
+    <div className="w-full flex justify-between gap-1 mb-2">
+      <div className="w-3/4">
+        {isEdit ? (
+          <input
+            className="input mr-4"
+            value={content}
+            onChange={(e) => setContent(e.target.value)}
+          />
         ) : (
-          <div className="w-full flex flex-row">
-            <div className="w-3/4">
-              <div>{commentContent}</div>
-              <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">
-              <button onClick={onClickDelete}>Del</button>
-              <button className="mr-3" onClick={onClickEdit}>
-                Edit
-              </button>
-            </div>
-          </div>
+          <p className="text-lg mr-4">{comment.content}</p>
         )}
+        <span className="text-base mr-1 text-gray-300">
+          {year}.{month}.{day}
+        </span>
       </div>
-    </div> 
+      {user?.data.id === comment.author.id ? (
+        <div className="w-1/4 flex flex-row-reverse items-center">
+          {isEdit ? (
+            <>
+              <button className="mr-3" onClick={handleEditComment}>
+                Done
+              </button>
+              <button
+                className="mr-3"
+                onClick={() => {
+                  setIsEdit(!isEdit);
+                  setContent(comment.content);
+                }}
+              >
+                Back
+              </button>
+            </>
+          ) : (
+            <>
+              <button onClick={() => handleDeleteComment(comment.id)}>
+                Del
+              </button>
+              <button className="mr-3" onClick={() => setIsEdit(!isEdit)}>
+                Edit
+              </button>
+            </>
+          )}
+        </div>
+      ) : null}
+    </div>
   );
 };
-
 export default CommentElement;
diff --git a/src/components/Comments/index.jsx b/src/components/Comments/index.jsx
index 8df5f42..68cc298 100644
--- a/src/components/Comments/index.jsx
+++ b/src/components/Comments/index.jsx
@@ -2,17 +2,25 @@ import { createElement, useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 import comment from "../../data/comment";
 import CommentElement from "./CommentElement";
+import { getComments } from "../../apis/api";
+import { createComment } from "../../apis/api";
 
-const Comment = ({ commentt }) => {
+const Comment = ({ postId }) => {
   // TODO 1: 가짜 comments 불러와서 관리해야겟즤
-  const { postId } = useParams();
-
-  const [comments, setComments] = useState();
-
-  useEffect(() => {
-    const comments = comment.filter((comment) => comment.post == postId);
-    setComments(comments);
+  // const { postId } = useParams();
+
+  const [commentList, setCommentList] = useState([]); // 처음에는 빈 리스트로 설정	
+	const [newContent, setNewContent] = useState("");
+	
+	//추가
+	useEffect(() => {
+    const getCommentsAPI = async () => {
+      const comments = await getComments(postId);
+      setCommentList(comments);
+    };
+    getCommentsAPI();
   }, [postId]);
+;
 
   // TODO 2: comment추가하는 input 관리해줘야겟지
   const [isSubmitted, setIsSubmitted] = useState(false);
@@ -21,8 +29,6 @@ const Comment = ({ commentt }) => {
   useEffect(() => {
     const commentInputValue = formData.content;
     setCommentInputValue(commentInputValue);
-    // commentelement로 만들어줘야겠지? -> 이게 아닌가벼?
-    // 그럼 이걸 그냥 밑에 올리는. 그런...
   }, [commentInputValue]);
 
   // TODO 3: comment Form 제출됐을때 실행되는 함수 만들어줘
@@ -46,59 +52,42 @@ const Comment = ({ commentt }) => {
 
   const handleCommentSubmit = (e) => {
     e.preventDefault();
-    comments.push(formData);
-    console.log(formData.content);
-    setFormData((nowFormData) => ({
-      ...nowFormData,
-      content: "",
-    }));
-    // console.log("input", commentInputValue);
-    console.log(comments);
-    // alert(`"${formData.content}" 댓글이 작성 완료되었습니다잉`);
-    // comments.push(formData);
+    createComment({ post: postId, content: newContent });
+    setNewContent("");
   };
 
   // TODO 4: commet Delete 하는 함수 만들어죠
-  const deleteComment = (comment) => {
-    console.log(comment.content);
-    const deletedComments = comments.filter(
-      (c) => c.content !== comment.content
-    );
-    setComments(deletedComments);
-    console.log(deletedComments);
-  };
+  // const handleCommentDelete = () => {
+  //   // deleteComment(comment.id);
+  //   console.log("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마다 반복시켜야즤 */}
-
-      {comments &&
-        comments.map((comment) => (
-          <CommentElement
-            comment={comment}
-            comments={comments}
-            deleteComment={deleteComment}
-            setComments={setComments}
-          />
-        ))}
-
+      {commentList.map((comment) => {
+        return (
+          <div className="w-full flex flex-row" key={comment.id}>
+            <CommentElement
+              comment={comment}
+              // handleCommentDelete={handleCommentDelete}
+            />
+          </div>
+        );
+      })}
+      {/* comment form component */}
       <form
         className="flex items-center justify-center mt-10 gap-2"
         onSubmit={handleCommentSubmit}
+        // method="patch"
       >
-        {/* // TODO 2-3 : comment 추가하는 comment form 만들어주기 */}
         <input
-          required
           type="text"
-          id="content"
+          value={newContent}
+          placeholder="댓글을 입력해주세요"
           className="input h-14"
-          onChange={handleFormData}
-          value={formData.content}
-          placeholder="댓글을 입력해주세용"
+          onChange={(e) => setNewContent(e.target.value)}
         />
-
         <button type="submit" className="button">
           comment
         </button>
diff --git a/src/components/Form/index.jsx b/src/components/Form/index.jsx
index 9743d2c..a6b485d 100644
--- a/src/components/Form/index.jsx
+++ b/src/components/Form/index.jsx
@@ -181,6 +181,7 @@ export const PostForm = ({ onSubmit, tags, formData, setFormData }) => {
         tags: formData.tags.filter((t) => t !== tag),
       });
     };
+    
     return (
       <form className="form" onSubmit={onSubmit}>
         <label htmlFor="title" className="label">
diff --git a/src/components/Header/index.jsx b/src/components/Header/index.jsx
index 679d66d..8c69794 100644
--- a/src/components/Header/index.jsx
+++ b/src/components/Header/index.jsx
@@ -1,7 +1,23 @@
 import lion from "../../assets/images/lion.jpeg";
 import { Link } from "react-router-dom";
+import { getCookie, removeCookie } from "../../utils/cookie";
+import { useEffect, useState } from "react";
 
 const Header = () => {
+  const [isLoggedIn, setIsLoggedIn] = useState(""); 
+  // console.log("cookie | ",getCookie("access_token"));
+
+  useEffect(() => {
+    const loggedIn = getCookie("access_token") ? true : false;
+    setIsLoggedIn(loggedIn);
+  }, []);
+
+  const handleLogout = () => {
+    removeCookie("access_token");
+		removeCookie("refresh_token");
+    window.location.href = "/"; // 새로고침 - 로그아웃 되었다는 것을 인지시켜주기 위해
+  };
+
   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">
@@ -9,9 +25,23 @@ const Header = () => {
         <Link to="/" className="ml-3">SNU LION 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>
-      </div>
+        {!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="/" onClick={handleLogout} className="mr-10 p-3 uppercase">
+              log out
+            </Link>
+          </>
+        )}
+        </div>
     </div>
   );
 };
diff --git a/src/components/Posts/index.jsx b/src/components/Posts/index.jsx
index f8449b6..a0fccfa 100644
--- a/src/components/Posts/index.jsx
+++ b/src/components/Posts/index.jsx
@@ -1,9 +1,11 @@
 import { Link } from "react-router-dom";
+import { likePost } from "../../apis/api";
 
 export const SmallPost = ({ post }) => {
   const onClickLike = () => {
     console.log("나도 좋아!");
     // add api call for liking post here
+    likePost(post.id);
   };
 
   return (
@@ -32,13 +34,14 @@ export const SmallPost = ({ post }) => {
 export const BigPost = ({ post }) => {
   const onClickLike = () => {
     console.log("나도 좋아!");
+    likePost(post.id);
     // add api call for liking post here
   };
 
   return (
     <div className="py-5 w-full bg-orange-400 text-black border-0 ring-8 ring-orange-200 rounded-xl font-medium">
       <div className="px-8">
-        <h1 className="font-extrabold text-2xl">{post.title}</h1> 
+        <h1 className="font-extrabold text-2xl">{post.title}</h1>
         <span className="mt-2 text-white ">{post.author.username}</span>
         <div className="mt-2 h-28">{post.content}</div>
         <div className="flex mt-5">
@@ -55,4 +58,4 @@ export const BigPost = ({ post }) => {
       </div>
     </div>
   );
-};
\ No newline at end of file
+};
diff --git a/src/routes/HomePage.jsx b/src/routes/HomePage.jsx
index aa78d04..0896e1c 100644
--- a/src/routes/HomePage.jsx
+++ b/src/routes/HomePage.jsx
@@ -2,12 +2,34 @@ import { useEffect, useState } from "react";
 import { SmallPost } from "../components/Posts";
 import posts from "../data/posts";
 import { Link } from "react-router-dom";
+import { getPosts, getUser } from "../apis/api";
+import { getTags } from "../apis/api";
+import { getCookie } from "../utils/cookie";
 
 const HomePage = () => {
   const [tags, setTags] = useState([]);
   const [searchTags, setSearchTags] = useState([]);
   const [searchValue, setSearchValue] = useState("");
-  const [postList, setPostList] = useState(posts);
+  const [postList, setPostList] = useState([]);
+
+  useEffect(() => {
+		const getPostsAPI = async () => {
+			const posts = await getPosts();
+			setPostList(posts);
+		};
+		getPostsAPI();
+
+    const getTagsAPI = async () => {
+      const tags = await getTags();
+      const tagContents = tags.map((tag) => {
+        return tag.content;
+      });
+      setTags(tagContents);
+      setSearchTags(tagContents);
+    };
+    getTagsAPI();
+	}, []);
+
 
   useEffect(() => {
     const tagList = posts.reduce((acc, post) => {
@@ -27,25 +49,13 @@ const HomePage = () => {
   };
 
   const handleTagFilter = (e) => {
-    const tagText = e.target.innerText;
-    console.log(tagText);
-    const filteredTagText = tagText.replace("#", "");
-    console.log(filteredTagText);
-    setSearchValue(filteredTagText);
-
-    if (filteredTagText === searchValue) {
-      console.log("다시");
+    const { innerText } = e.target;
+    if (searchValue === innerText.substring(1)) {
       setSearchValue("");
-      setPostList(posts);
-      return;
+    } else {
+      const activeTag = innerText.substring(1);
+      setSearchValue(activeTag);
     }
-
-    console.log("postList", postList);
-    console.log("posts", posts);
-    const filteredPosts = posts.filter((post) =>
-      post.tags.some((tag) => tag.content === filteredTagText)
-    );
-    setPostList(filteredPosts);
   };
 
   return (
@@ -76,15 +86,23 @@ const HomePage = () => {
       </div>
 
       <div className="grid grid-cols-4 px-10 mt-10">
-        {postList.map((post) => (
-          <SmallPost key={post.id} post={post} />
-        ))}
-      </div>
-      <div className="flex justify-center m-20">
-        <Link className="button" to="/create">
-          Post
-        </Link>
+        {postList
+          .filter((post) =>
+            searchValue
+              ? post.tags.find((tag) => tag.content === searchValue)
+              : post
+          )
+          .map((post) => (
+            <SmallPost key={post.id} post={post} />
+          ))}
       </div>
+      {getCookie("access_token") ? (
+        <div className="flex justify-center m-20">
+          <Link className="button" to="/create">
+            Post
+          </Link>
+        </div>
+      ) : null}
     </div>
   );
 };
diff --git a/src/routes/PostCreatePage.jsx b/src/routes/PostCreatePage.jsx
index b92e1f9..52e05bd 100644
--- a/src/routes/PostCreatePage.jsx
+++ b/src/routes/PostCreatePage.jsx
@@ -1,66 +1,46 @@
 import { useEffect, useState } from "react";
-import { BigPost } from "../components/Posts";
-import posts from "../data/posts";
 import { PostForm } from "../components/Form";
+import { useNavigate } from "react-router-dom";
+import { createPost, getTags } from "../apis/api";
 
 const PostCreatePage = () => {
-  const [isSubmitted, setIsSubmitted] = useState(false);
   const [formData, setFormData] = useState({
-    id: posts.length,
     title: "",
     content: "",
-    author: { id: posts.length, username: "와기" },
     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();
   }, []);
 
+	const navigate = useNavigate();
+
   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 };
-      }),
-    };
-    setFormData(createdPost);
-    setIsSubmitted(true);
+    createPost(formData, navigate);
+    window.location.href="/";
   };
 
   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;
+export default PostCreatePage;
\ No newline at end of file
diff --git a/src/routes/PostDetailPage.jsx b/src/routes/PostDetailPage.jsx
index 3bf6111..f170352 100644
--- a/src/routes/PostDetailPage.jsx
+++ b/src/routes/PostDetailPage.jsx
@@ -1,50 +1,71 @@
 import { useEffect, useState } from "react";
-import { useParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
+import Comment from "../components/Comments";
 import { BigPost } from "../components/Posts";
-import Comment from "../components/Comments"
 import { Link } from "react-router-dom";
-import posts from "../data/posts";
-import comments from "../data/comment";
+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();
+
+  console.log(user);
+
   useEffect(() => {
-    const post = posts.find((post) => post.id === parseInt(postId));
-    setPost(post);
+    const getPostAPI = async () => {
+      const post = await getPost(postId);
+      setPost(post);
+    };
+    getPostAPI();
   }, [postId]);
 
+  useEffect(() => {
+    // access_token이 있으면 유저 정보 가져옴
+    if (getCookie("access_token")) {
+      const getUserAPI = async () => {
+        const user = await getUser();
+        setUser(user);
+      };
+      getUserAPI();
+    }
+  }, []);
 
-const onClickDelete = () => {
-    console.log("delete");
-    // add api call for deleting post here
-    // add redirect to home page
-  };
 
-const [comment, setComment] = useState();
-useEffect(() => {
-  const comment = comments.find((comment) => comment.post === parseInt(postId));
-  setComment(comment);
-}, [postId]);
+  const navigate = useNavigate();
+  
+  const onClickDelete = () => {
+    deletePost(post.id, navigate);
+  };
 
   return (
     post && (
       <div className="flex flex-col items-center w-3/5 p-8">
         {/* post detail component */}
         <BigPost post={post} />
-        <Comment comment={comment}/>
-				<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>
 
+        {/* comments component */}
+        <Comment postId={postId} />
+
+        <div>
+          {user?.data.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}
+        </div>
       </div>
     )
   );
 };
 
-export default PostDetailPage;
\ No newline at end of file
+export default PostDetailPage;
diff --git a/src/routes/PostEditPage.jsx b/src/routes/PostEditPage.jsx
index aec8ded..8c214b9 100644
--- a/src/routes/PostEditPage.jsx
+++ b/src/routes/PostEditPage.jsx
@@ -1,74 +1,65 @@
 import { useEffect, useState } from "react";
-import { BigPost } from "../components/Posts";
-import posts from "../data/posts";
+import { useNavigate, useParams } from "react-router-dom";
 import { PostForm } from "../components/Form";
-import { useParams } from "react-router-dom";
+import posts from "../data/posts";
 import { Link } from "react-router-dom";
+import { BigPost } from "../components/Posts";
+import { getPost, getTags, updatePost } from "../apis/api";
 
 const PostEditPage = () => {
-  const [isSubmitted, setIsSubmitted] = useState(false);
-	const { postId } = useParams();
-  const [formData, setFormData] = useState({});
-	useEffect(() => {
-    const post = posts.find((post) => post.id === parseInt(postId));
-    const postFormData = { ...post, tags: post.tags.map((tag) => tag.content) };
-    setFormData(postFormData);
-  }, [postId]);
+  const { postId } = useParams();
+	const [formData, setFormData] = useState({
+    title: "",
+    content: "",
+    tags: [],
+  });
+  const navigate = useNavigate();
 
+  useEffect(() => {
+    const getPostAPI = async () => {
+      const post = await getPost(postId);
+      const postFormData = {
+        ...post,
+        tags: post.tags.map((tag) => tag.content),
+      };
+      setFormData(postFormData);
+    };
+    getPostAPI();
+  }, [postId]);
 
   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();
   }, []);
 
   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 };
-      }),
-    };
-    setFormData(createdPost);
-    setIsSubmitted(true);
+    updatePost(postId, formData, navigate);
   };
 
   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>
   );
 };
 
-export default PostEditPage;
+export default PostEditPage;
\ No newline at end of file
diff --git a/src/routes/SignInPage.jsx b/src/routes/SignInPage.jsx
index 3cd17c3..9632b35 100644
--- a/src/routes/SignInPage.jsx
+++ b/src/routes/SignInPage.jsx
@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { SignInForm } from "../components/Form";
+import { signIn } from "../apis/api";
 
 const SignInPage = () => {
   const [formData, setFormData] = useState({
@@ -7,10 +8,9 @@ const SignInPage = () => {
     password: "",
   });
 
-  const handleSignInSubmit = () => {
-    console.log(formData);
-    alert("로그인 완-료!");
-    // add api call for sign in here
+  const handleSignInSubmit = (e) => {
+    e.preventDefault();
+    signIn(formData);
   };
 
   return (
diff --git a/src/routes/SignUpPage.jsx b/src/routes/SignUpPage.jsx
index 92b990b..5303e52 100644
--- a/src/routes/SignUpPage.jsx
+++ b/src/routes/SignUpPage.jsx
@@ -1,5 +1,8 @@
 import { useState } from "react";
 import { SignUpForm } from "../components/Form";
+import axios from "axios";
+import { getCookie } from "../utils/cookie";
+import { signUp } from "../apis/api";
 
 const SignUpPage = () => {
   const [formData, setFormData] = useState({
@@ -11,20 +14,20 @@ const SignUpPage = () => {
     major: "",
   });
 
-  const handleSignUpSubmit = () => { // API 호출하는 함수
-    console.log(formData);
-    alert(`${formData.email}로 회원가입 해 줘`);
-    // add api call for sign up here
+  const handleSignUpSubmit = async (e) => {
+    // API 호출하는 함수
+    e.preventDefault(); // form 보낼 때 새로고침 안 되도록 해주세용 
+    signUp(formData);
   };
 
   return (
     <div className="flex flex-col items-center w-1/2">
       <h3 className=" font-bold text-4xl">Sign Up</h3>
-      <SignUpForm 
-				formData={formData} 
-				setFormData={setFormData} 
-				handleSignUpSubmit={handleSignUpSubmit} 
-			/>
+      <SignUpForm
+        formData={formData}
+        setFormData={setFormData}
+        handleSignUpSubmit={handleSignUpSubmit}
+      />
     </div>
   );
 };
diff --git a/src/utils/cookie.js b/src/utils/cookie.js
new file mode 100644
index 0000000..9be8dea
--- /dev/null
+++ b/src/utils/cookie.js
@@ -0,0 +1,22 @@
+// 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) => {
+  const cookieValue = cookies.get(name);
+  return cookies.get(name);
+};
+
+// 쿠키 정보 삭제하는 함수
+export const removeCookie = (name) => {
+  cookies.remove(name);
+};

From 53a062803aca6ffb29a87f085614050f037b9365 Mon Sep 17 00:00:00 2001
From: CZ <wngus0223@naver.com>
Date: Fri, 2 Jun 2023 05:19:42 +0900
Subject: [PATCH 3/3] week 11 task

---
 src/App.js                      |   3 +
 src/apis/api.js                 |  50 +++++-
 src/apis/axios.js               |  16 +-
 src/components/Header/index.jsx |  11 +-
 src/index.css                   |   8 +
 src/routes/MyInfoPage.jsx       | 275 ++++++++++++++++++++++++++++++++
 6 files changed, 353 insertions(+), 10 deletions(-)
 create mode 100644 src/routes/MyInfoPage.jsx

diff --git a/src/App.js b/src/App.js
index c1f77e7..785bd66 100644
--- a/src/App.js
+++ b/src/App.js
@@ -9,6 +9,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() {
@@ -29,6 +30,8 @@ function App() {
           <Route path="/signup" element={<SignUpPage />} />
           {/* sign up */}
           <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
index d9e5ff1..69c30f1 100644
--- a/src/apis/api.js
+++ b/src/apis/api.js
@@ -1,4 +1,5 @@
 import { instance, instanceWithToken } from "./axios";
+import { removeCookie } from "../utils/cookie";
 
 // src/api/api.js
 // Account 관련 API들
@@ -19,10 +20,30 @@ export const signUp = async (data) => {
   return response;
 };
 
-export const getUser = async () => {
+export const  getUser = async () => {
   const response = await instanceWithToken.get("/account/info/");
   if (response.status == 200) {
-    // console.log("success");
+    console.log("success");
+  } else {
+    console.log("fail");
+  }
+  return response;
+};
+
+export const  getUserProfile = async () => {
+  const response = await instanceWithToken.get("/account/profile/");
+  if (response.status == 200) {
+    console.log("success");
+  } else {
+    console.log("fail");
+  }
+  return response;
+};
+
+export const  updateUserProfile = async () => {
+  const response = await instanceWithToken.patch("/account/profile/");
+  if (response.status == 200) {
+    console.log("success");
   } else {
     console.log("fail");
   }
@@ -140,3 +161,28 @@ export const deleteComment = async (id) => {
     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");
+  }
+};
+
+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");
+  }
+};
diff --git a/src/apis/axios.js b/src/apis/axios.js
index ecf79ce..0d2f8e7 100644
--- a/src/apis/axios.js
+++ b/src/apis/axios.js
@@ -2,6 +2,7 @@
 
 import axios from "axios";
 import { getCookie } from "../utils/cookie";
+import { refreshToken } from "./api";
 
 // baseURL, credential, 헤더 세팅 
 axios.defaults.baseURL = 'http://localhost:8000/api';
@@ -45,13 +46,20 @@ instanceWithToken.interceptors.request.use(
 
 instanceWithToken.interceptors.response.use(
   (response) => {
-    // 서버 응답 데이터를 프론트에 넘겨주기 전 수행할 일 
     console.log("Interceptor Response!!");
     return response;
   },
-  (error) => {
-    // 서버가 오류를 응답했을 때 처리 - 콘솔 찍어주고, 프론트에게 보내지 않고 오류를 발생시킴
+  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/Header/index.jsx b/src/components/Header/index.jsx
index 8c69794..3343a5c 100644
--- a/src/components/Header/index.jsx
+++ b/src/components/Header/index.jsx
@@ -2,6 +2,7 @@ import lion from "../../assets/images/lion.jpeg";
 import { Link } from "react-router-dom";
 import { getCookie, removeCookie } from "../../utils/cookie";
 import { useEffect, useState } from "react";
+import { logOut } from "../../apis/api";
 
 const Header = () => {
   const [isLoggedIn, setIsLoggedIn] = useState(""); 
@@ -12,10 +13,9 @@ const Header = () => {
     setIsLoggedIn(loggedIn);
   }, []);
 
-  const handleLogout = () => {
-    removeCookie("access_token");
-		removeCookie("refresh_token");
-    window.location.href = "/"; // 새로고침 - 로그아웃 되었다는 것을 인지시켜주기 위해
+	const handleLogout = () => {
+    const token = getCookie("refresh_token");
+    logOut(token);
   };
 
   return (
@@ -36,6 +36,9 @@ const Header = () => {
           </>
         ) : (
           <>
+            <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>
diff --git a/src/index.css b/src/index.css
index 5b2de4d..bffa0ef 100644
--- a/src/index.css
+++ b/src/index.css
@@ -25,6 +25,14 @@
   @apply border-2 border-white w-full px-6 py-3 rounded-2xl text-white bg-transparent placeholder-opacity-50 focus:outline-none focus:ring-2 focus:ring-orange-400 focus:border-transparent;
 }
 
+.infoinput {
+  @apply w-4/5 px-6 py-3 bg-transparent focus:outline-none; 
+}
+
+.infobutton {
+  @apply border-none p-2 border-r-4 font-semibold rounded-xl h-10 bg-[#FAC454] hover:bg-orange-400 hover:text-gray-900 text-gray-100;
+  /* transition duration-150 ease-out hover:ease-in */
+}
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
diff --git a/src/routes/MyInfoPage.jsx b/src/routes/MyInfoPage.jsx
new file mode 100644
index 0000000..227eead
--- /dev/null
+++ b/src/routes/MyInfoPage.jsx
@@ -0,0 +1,275 @@
+import { useState, useEffect } from "react";
+import { SmallPost } from "../components/Posts";
+import { getUserProfile } from "../apis/api";
+import { updateUserProfile } from "../apis/api";
+import { getPosts } from "../apis/api";
+import { useParams } from "react-router-dom";
+
+const MyInfo = () => {
+  const [formData, setFormData] = useState({
+    email: "",
+    username: "",
+    college: "",
+    major: "",
+  });
+
+  const [postList, setPostList] = useState([]);
+  const [id, setId] = useState();
+
+  useEffect(() => {
+    const getPostsAPI = async () => {
+      const posts = await getPosts();
+      setPostList(posts);
+    };
+    getPostsAPI();
+  }, []);
+
+  console.log("postlist", postList);
+
+  useEffect(() => {
+    const getUserAPI = async () => {
+      const info = await getUserProfile();
+      console.log("info", info);
+      setId(info.data.user.id);
+      setFormData({
+        email: info.data.user.email,
+        username: info.data.user.username,
+        college: info.data.college,
+        major: info.data.major,
+      });
+    };
+    getUserAPI();
+  }, []);
+
+  const [tempFormData, setTempFormData] = useState({
+    email: "",
+    username: "",
+    college: "",
+    major: "",
+  });
+
+  useEffect(() => {
+    setTempFormData({ ...formData });
+    console.log("tempdata", tempFormData);
+  }, [formData]);
+
+  const [isChange, setIsChange] = useState({
+    email: false,
+    username: false,
+    college: false,
+    major: false,
+  });
+
+  const onSubmit = (e) => {
+    e.preventDefault();
+    setFormData({ ...tempFormData });
+    updateUserProfile();
+    setIsChange(false);
+  };
+
+  const handleFormData = (e) => {
+    const { id, value } = e.target;
+    setTempFormData({ ...tempFormData, [id]: value });
+  };
+
+  const onClickChange = (e) => {
+    e.preventDefault();
+    const { id, value } = e.target;
+    setIsChange((info) => ({ ...info, [id]: true }));
+  };
+
+  const onClickCancle = (e) => {
+    e.preventDefault();
+    const { id } = e.target;
+    setTempFormData({ ...formData });
+    setIsChange((info) => ({ ...info, [id]: false }));
+  };
+
+  const [user, setUser] = useState();
+
+  return (
+    <div className="w-full">
+      <div className="font-bold text-4xl mb-5 md:text-center">My Page</div>
+      <div className="w-1/2 m-auto">
+        <div>
+          <label htmlFor="email" className="label">
+            Email:
+          </label>
+        </div>
+        <div className="flex">
+          {isChange.email ? (
+            <>
+              <input
+                required
+                type="email"
+                id="email"
+                className="infoinput"
+                onChange={handleFormData}
+                value={tempFormData.email}
+              />
+              <button
+                className="infobutton mr-3 flex-row-reverse"
+                onClick={onClickCancle}
+                id="email"
+              >
+                Cancel
+              </button>
+              <button className="infobutton" onClick={onSubmit}>
+                Edit
+              </button>
+            </>
+          ) : (
+            <>
+              <div className="infoinput">{formData.email}</div>
+              <button
+                className="infobutton py-0.5 mb-1 w-20"
+                id="email"
+                onClick={onClickChange}
+              >
+                Change
+              </button>
+            </>
+          )}
+        </div>
+        <hr className="mb-3"></hr>
+        <div>
+          <label required htmlFor="name" className="label">
+            Username:
+          </label>
+        </div>
+        <div className="flex">
+          {isChange.username ? (
+            <>
+              <input
+                required
+                type="text"
+                id="username"
+                className="infoinput"
+                onChange={handleFormData}
+                value={tempFormData.username}
+              />
+              <button
+                className="infobutton mr-3 flex-row-reverse"
+                onClick={onClickCancle}
+                id="username"
+              >
+                Cancel
+              </button>
+              <button className="infobutton" onClick={onSubmit}>
+                Edit
+              </button>
+            </>
+          ) : (
+            <>
+              <div className="infoinput">{formData.username}</div>
+              <button
+                className="infobutton py-0.5 mb-1 w-20"
+                id="username"
+                onClick={onClickChange}
+              >
+                Change
+              </button>
+            </>
+          )}
+        </div>
+        <hr className="mb-3"></hr>
+        <div>
+          <label required htmlFor="college" className="label">
+            College:
+          </label>
+        </div>
+      <div className="flex">
+        {isChange.college ? (
+          <>
+            <input
+              required
+              type="text"
+              id="college"
+              className="infoinput"
+              onChange={handleFormData}
+              value={tempFormData.college}
+            />
+            <button
+              className="infobutton mr-3 flex-row-reverse"
+              onClick={onClickCancle}
+              id="college"
+            >
+              Cancel
+            </button>
+            <button className="infobutton" onClick={onSubmit}>
+              Edit
+            </button>
+          </>
+        ) : (
+          <>
+            <div className="infoinput">{formData.college}</div>
+            <button
+              className="infobutton py-0.5 mb-1 w-20"
+              id="college"
+              onClick={onClickChange}
+            >
+              Change
+            </button>
+          </>
+        )}
+      </div>
+      <hr className="mb-3"></hr>
+
+      <div>
+        <div>
+          <label htmlFor="major" className="label">
+            Major:{" "}
+          </label>
+        </div>
+        <div className="flex">
+          {isChange.major ? (
+            <>
+              <input
+                required
+                type="text"
+                id="major"
+                className="infoinput"
+                onChange={handleFormData}
+                value={tempFormData.major}
+              />
+              <button
+                className="infobutton mr-3 flex-row-reverse"
+                onClick={onClickCancle}
+                id="major"
+              >
+                Cancel
+              </button>
+              <button className="infobutton" onClick={onSubmit}>
+                Edit
+              </button>
+            </>
+          ) : (
+            <>
+              <div className="infoinput">{formData.major}</div>
+              <button
+                className="infobutton py-0.5 mb-1 w-20"
+                id="major"
+                onClick={onClickChange}
+              >
+                Change
+              </button>
+            </>
+          )}
+        </div>
+        <hr className="mb-10"></hr>
+      </div>
+      </div>
+
+      <div className="font-bold text-4xl mb-5 md:text-center">My Post</div>
+      <div className="w-full grid grid-cols-4 px-10 mt-10">
+        {postList
+          .filter((post) => post.author.id == id)
+          .map((post) => (
+            <SmallPost key={post.id} post={post} />
+          ))}
+      </div>
+    </div>
+  );
+};
+
+export default MyInfo;