diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
new file mode 100644
index 0000000..5ac67a4
--- /dev/null
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -0,0 +1,16 @@
+# Description(구현한 기능)
+
+- [ ] 
+- [ ] 
+
+
+## Type of change (전 주차 대비)
+
+Please delete options that are not relevant.
+
+- [ ] New feature (non-breaking change which adds functionality)
+- [ ] Breaking change (fix or feature that would cause existing functionality to not work as
+      expected)
+
+
+## Screenshots (if appropriate):
diff --git a/.gitignore b/.gitignore
index 4d29575..a4bd5c7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.vscode/*
diff --git a/README.md b/README.md
index 58beeac..4e7717b 100644
--- a/README.md
+++ b/README.md
@@ -1,70 +1,59 @@
-# Getting Started with Create React App
+# 11th snulion pre-seminar react
 
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+## Goal
 
-## Available Scripts
+-   2023 1학기 블로그만들기 세션에서 backend 파트 세미나를 위한 base code 제작
+-   1학기 동아리 활동 간 필요한 매 주차 solution code 제작
 
-In the project directory, you can run:
+## Curriculum
 
-### `npm start`
+-   8주차(5/6) React 입문
+    -   발표 : 김동훈 김시원 김진호
+    -   검수 : 김주연 한우현 홍정우
+-   9주차(5/13) React 실습
+    -   발표 : 김지현 한승오 홍정우
+    -   검수 : 김시원 이동재 이희승
+-   10주차(5/20) React 심화1
+    -   발표 : 이동재 한우현
+    -   검수 : 김진호 이희승 박평재 한승오
+-   10주차(5/27) React 심화2
+    -   발표 : 김동훈 한우현
+    -   검수 : 김시원 김지현 박평재 이동재
 
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
+## Deadline
 
-The page will reload when you make changes.\
-You may also see any lint errors in the console.
+-   8주차(5/6) : 2/14 자정까지
+-   9주차(5/13) : 2/28 자정까지
+-   10주차(5/20) : 4/1 자정까지
+-   11주차(5/27) : 5/1 자정까지
 
-### `npm test`
+## Rule
 
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+### 1. time limit
 
-### `npm run build`
+    -   정해진 deadline까지 code base를 완성해주세요.
+    -   다음 주차 사람은 이를 기반으로 세미나를 준비하게 됩니다.
+    -   불가피하게 code base 변경이 필요할 경우 세미나 팀에 꼭 노티주세요.
 
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
+### 2. Process
 
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
+    1) branch 생성
+    - solution branch에서 branch를 파서 작업하시면 됩니다.
+    - branch 명은 week8/solution, week9/solution, week10/solution, week11/solution 으로 해주세요.
+    - 협업이 필요할시 jh/week5, hs/week5 이런식으로 작업하고 최종적으로 soluion/week2로 합쳐주시면 됩니다. 이 부분은 자유롭게
 
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+    2) commit
+    - commit message는 다음 중 하나로 작성해주세요.
+      - feat: 새로운 feature추가
+      - fix: 내용 수정
+      - refactor: 최적화
+      - chore: 사소한 변경(lint, typo ...)
 
-### `npm run eject`
+    3) pull request
+    - 작업 후 solution branch로 pull request 날려주세요.
+    - reviewers : 다른 발표자 1명
+    - assignees : 자기 자신
 
-**Note: this is a one-way operation. Once you `eject`, you can't go back!**
-
-If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
-
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
-
-You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
-
-## Learn More
-
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
-
-To learn React, check out the [React documentation](https://reactjs.org/).
-
-### Code Splitting
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
-
-### Analyzing the Bundle Size
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
-
-### Making a Progressive Web App
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
-
-### Advanced Configuration
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
-
-### Deployment
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
-
-### `npm run build` fails to minify
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
+    4) merge
+    - 발표자 2명 중 1명이 merge 하시고 노티 주세요.
+    - merge 후에 week8/solution, week9/solution, week10/solution, week11/solution branch는 반드시 남겨주세요. 삭제 금지 !
diff --git a/package-lock.json b/package-lock.json
index 495c411..cc88270 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
         "@testing-library/user-event": "^13.5.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-router-dom": "^6.11.1",
         "react-scripts": "5.0.1",
         "web-vitals": "^2.1.4"
       },
@@ -3116,6 +3117,14 @@
         }
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.6.1.tgz",
+      "integrity": "sha512-YUkWj+xs0oOzBe74OgErsuR3wVn+efrFhXBWrit50kOiED+pvQe2r6MWY0iJMQU/mSVKxvNzL4ZaYvjdX+G7ZA==",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -14360,6 +14369,36 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.11.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.11.1.tgz",
+      "integrity": "sha512-OZINSdjJ2WgvAi7hgNLazrEV8SGn6xrKA+MkJe9wVDMZ3zQ6fdJocUjpCUCI0cNrelWjcvon0S/QK/j0NzL3KA==",
+      "dependencies": {
+        "@remix-run/router": "1.6.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.11.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.11.1.tgz",
+      "integrity": "sha512-dPC2MhoPeTQ1YUOt5uIK376SMNWbwUxYRWk2ZmTT4fZfwlOvabF8uduRKKJIyfkCZvMgiF0GSCQckmkGGijIrg==",
+      "dependencies": {
+        "@remix-run/router": "1.6.1",
+        "react-router": "6.11.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
diff --git a/package.json b/package.json
index 9ce551a..c3aef84 100644
--- a/package.json
+++ b/package.json
@@ -6,8 +6,11 @@
     "@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",
     "web-vitals": "^2.1.4"
   },
@@ -38,4 +41,4 @@
   "devDependencies": {
     "tailwindcss": "^3.3.2"
   }
-}
+}
\ No newline at end of file
diff --git a/src/App.css b/src/App.css
index 0e0b2db..778345f 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,4 +1,4 @@
-.App {
+.app {
   overflow-x: hidden;
   box-sizing: border-box;
   display: flex;
diff --git a/src/App.js b/src/App.js
index 5f30328..d27da22 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,15 +1,35 @@
-import logo from "./logo.svg";
 import Header from "./components/Header";
 import Footer from "./components/Footer";
-import Home from "./routes/Home";
 import "./App.css";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import HomePage from "./routes/HomePage";
+import PostCreatePage from "./routes/PostCreatePage";
+import PostEditPage from "./routes/PostEditPage";
+import SignUpPage from "./routes/SignUpPage";
+import PostDetailPage from "./routes/PostDetailPage";
+import SignInPage from "./routes/SignInPage";
 
 function App() {
   return (
-    <div className="App">
-      <Header />
-      <Home />
-      <Footer />
+    <div className="app">
+      <BrowserRouter>
+        <Header />
+        <Routes>
+          {/* home */}
+          <Route path="/" element={<HomePage />} />
+          {/* craete post */}
+          <Route path="/create" element={<PostCreatePage />} />
+          {/* edit post */}
+          <Route path="/:postId/edit" element={<PostEditPage />} />
+          {/* post detail */}
+          <Route path="/:postId" element={<PostDetailPage />} />
+          {/* sign up */}
+          <Route path="/signup" element={<SignUpPage />} />
+          {/* sign up */}
+          <Route path="/signin" element={<SignInPage />} />
+        </Routes>
+        <Footer />
+      </BrowserRouter>
     </div>
   );
 }
diff --git a/src/apis/api.js b/src/apis/api.js
new file mode 100644
index 0000000..19a91e6
--- /dev/null
+++ b/src/apis/api.js
@@ -0,0 +1,135 @@
+import { instance, instanceWithToken } from "./axios";
+
+// 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;
+};
+
+// GetUser API
+// Edit, Delete 권한을 확인하거나, 프로필 페이지를 만들 때 사용하겠죠?
+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;
+};
+
+// 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("/");
+  } else {
+    console.log("[ERROR] error while updating post");
+  }
+};
+
+//과제!!
+export const deletePost = async (postId) => {
+  const response = await instanceWithToken.delete(`/post/${postId}/`);
+  if (response.status === 204) {
+    console.log("DELETE SUCCESS");
+  } 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("POST LIKE SUCCESS");
+  } else {
+    console.log("[ERROR] error while liking post");
+  }
+  return response.data;
+};
+
+
+// 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");
+  } else {
+    console.log("[ERROR] error while deleting comment");
+  }
+};
\ No newline at end of file
diff --git a/src/apis/axios.js b/src/apis/axios.js
new file mode 100644
index 0000000..4f7a53d
--- /dev/null
+++ b/src/apis/axios.js
@@ -0,0 +1,49 @@
+import axios from "axios";
+import { getCookie } from "../utils/cookie";
+
+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.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);
+  }
+);
diff --git a/src/components/Comment/CommentElement.jsx b/src/components/Comment/CommentElement.jsx
new file mode 100644
index 0000000..06c89e6
--- /dev/null
+++ b/src/components/Comment/CommentElement.jsx
@@ -0,0 +1,83 @@
+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 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 handleEditComment = () => {
+    updateComment(comment.id, { content: content });
+  };
+
+
+  useEffect(() => {
+    // access_token이 있으면 유저 정보 가져옴
+    if (getCookie("access_token")) {
+      const getUserAPI = async () => {
+        const user = await getUser();
+        setUser(user);
+      };
+      getUserAPI();
+    }
+  }, []);
+
+  return (
+    <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)}
+          />
+        ) : (
+          <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 ? (
+        <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={() => handleCommentDelete(comment.id)}>
+                Del
+              </button>
+              <button className="mr-3" onClick={() => setIsEdit(!isEdit)}>
+                Edit
+              </button>
+            </>
+          )}
+        </div>
+      ) : null}
+    </div>
+  );
+};
+export default CommentElement;
diff --git a/src/components/Comment/index.jsx b/src/components/Comment/index.jsx
new file mode 100644
index 0000000..7320324
--- /dev/null
+++ b/src/components/Comment/index.jsx
@@ -0,0 +1,66 @@
+import { useEffect, useState } from "react";
+import CommentElement from "./CommentElement";
+import { createComment, getComments, deleteComment } from "../../apis/api";
+
+
+const Comment = ({ postId }) => {
+  const [commentList, setCommentList] = useState([]); // state for comments
+  const [newContent, setNewContent] = useState(""); // state for new comment
+
+  useEffect(() => {
+    const getCommentsAPI = async () => {
+      const comments = await getComments(postId);
+      setCommentList(comments);
+    };
+    getCommentsAPI();
+  }, [postId]);
+
+  const handleCommentSubmit = (e) => {
+    e.preventDefault();
+    setNewContent("");
+    createComment({ post: postId, content: newContent });
+  };
+
+  // 과제!!
+  const handleCommentDelete = async (commentId) => {
+    const confirmDelete = window.confirm("정말로 댓글을 삭제하시겠습니까?");
+    if (confirmDelete) {
+      await deleteComment(commentId);
+      window.location.reload();
+    }
+  };
+
+  return (
+    <div className="w-full mt-5 self-start">
+      <h1 className="text-3xl font-bold mt-5 mb-3">Comments</h1>
+      {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}
+      >
+        <input
+          type="text"
+          value={newContent}
+          placeholder="댓글을 입력해주세요"
+          className="input h-14"
+          onChange={(e) => setNewContent(e.target.value)}
+        />
+        <button type="submit" className="button">
+          comment
+        </button>
+      </form>
+    </div>
+  );
+};
+
+export default Comment;
diff --git a/src/components/Footer/index.jsx b/src/components/Footer/index.jsx
index f187485..8836de4 100644
--- a/src/components/Footer/index.jsx
+++ b/src/components/Footer/index.jsx
@@ -5,12 +5,10 @@ const Footer = () => {
     <footer>
       <div className="copyright-container">
         <img className="logo" src={logo} alt="logo"></img>
-        <span id="copyright-text" className="copyright">
-          SNU LION 2023
-        </span>
+        <span id="copyright-text" className="copyright">SNU LION 2023</span>
       </div>
     </footer>
   );
-};
+}
 
 export default Footer;
diff --git a/src/components/Form/index.jsx b/src/components/Form/index.jsx
new file mode 100644
index 0000000..41921ba
--- /dev/null
+++ b/src/components/Form/index.jsx
@@ -0,0 +1,262 @@
+import { useState } from "react";
+
+export const SignUpForm = ({ formData, setFormData, handleSignUpSubmit }) => {
+  const handleFormData = (e) => {
+    const { id, value } = e.target;
+    setFormData({ ...formData, [id]: value });
+  };
+
+  return (
+    <form className="form" onSubmit={handleSignUpSubmit}>
+      <label htmlFor="email" className="label">
+        *email:
+      </label>
+      <input
+        required
+        type="email"
+        id="email"
+        className="input"
+        onChange={handleFormData}
+        value={formData.email}
+      />
+
+      <label htmlFor="password" className="label">
+        *password:
+      </label>
+      <input
+        required
+        type="password"
+        id="password"
+        className="input"
+        onChange={handleFormData}
+        value={formData.password}
+      />
+
+      <label htmlFor="confirm_password" className="label">
+        *passoword 확인:{" "}
+      </label>
+      <input
+        required
+        type="password"
+        id="confirm_password"
+        className="input"
+        onChange={handleFormData}
+        value={formData.confirm_password}
+      />
+
+      <label required htmlFor="name" className="label">
+        *이름:
+      </label>
+      <input
+        required
+        type="text"
+        id="username"
+        className="input"
+        onChange={handleFormData}
+        value={formData.username}
+      />
+
+      <label htmlFor="college" className="label">
+        대학:{" "}
+      </label>
+      <input
+        type="text"
+        id="college"
+        className="input"
+        onChange={handleFormData}
+        value={formData.college}
+      />
+
+      <label htmlFor="major" className="label">
+        전공:{" "}
+      </label>
+      <input
+        type="text"
+        id="major"
+        className="input"
+        onChange={handleFormData}
+        value={formData.major}
+      />
+      <button type="submit" className="button mt-7">
+        Sign up !
+      </button>
+    </form>
+  );
+};
+
+export const SignInForm = ({ formData, setFormData, handleSignInSubmit }) => {
+  const handleFormData = (e) => {
+    const { id, value } = e.target;
+    setFormData({ ...formData, [id]: value });
+  };
+
+  return (
+    <form className="form" onSubmit={handleSignInSubmit}>
+      <label htmlFor="username" className="label">
+        *username:
+      </label>
+      <input
+        required
+        type="text"
+        id="username"
+        className="input"
+        onChange={handleFormData}
+        value={formData.username}
+      />
+      <label htmlFor="password" className="label">
+        *password:
+      </label>
+      <input
+        required
+        type="password"
+        id="password"
+        className="input"
+        onChange={handleFormData}
+        value={formData.password}
+      />
+      <button type="submit" className="button mt-7">
+        Sign in !
+      </button>
+    </form>
+  );
+};
+
+export const PostForm = ({ onSubmit, tags, formData, setFormData }) => {
+  //태그 Input 안에 값
+  const [tagInputValue, setTagInputValue] = useState("");
+
+  //자동완성 태그들
+  const [autoCompletes, setAutoCompletes] = useState([]);
+
+  const handleChange = (e) => {
+    console.log(e.target.id);
+    setFormData({ ...formData, [e.target.id]: e.target.value });
+  };
+
+  //태그 인풋 값 바뀌면 그에 따라서 자동 완성값들도 변경
+  const handleTag = (e) => {
+    setTagInputValue(e.target.value);
+    if (e.target.value) {
+      const autoCompleteData = tags.filter((tag) =>
+        tag.includes(e.target.value)
+      );
+      setAutoCompletes(autoCompleteData);
+    }
+  };
+
+  // 자동완성 값이 있는 버튼을 눌렀을 때 이를 태그에 등록
+  const handleAutoCompletes = (autoComplete) => {
+    const selectedTag = tags.find((tag) => tag === autoComplete);
+
+    if (formData.tags.includes(selectedTag)) return;
+
+    setFormData({
+      ...formData,
+      tags: [...formData.tags, selectedTag],
+    });
+    setTagInputValue("");
+    setAutoCompletes([]);
+  };
+
+  // 추가 버튼 혹인 엔터 누르면 태그 생성
+  const addTag = (e) => {
+    e.preventDefault();
+
+    // 입력한 내용이 이미 등록된 태그면 그냥 등록 안됨
+    if (formData.tags.find((tag) => tag === tagInputValue)) return;
+
+    setFormData({
+      ...formData,
+      tags: [...formData.tags, tagInputValue],
+    });
+
+    setTagInputValue("");
+    setAutoCompletes([]);
+  };
+
+  // X버튼 눌렀을때 태그 삭제
+  const deleteTag = (tag) => {
+    setFormData({
+      ...formData,
+      tags: formData.tags.filter((t) => t !== tag),
+    });
+  };
+  return (
+    <form className="form" onSubmit={onSubmit}>
+      <label htmlFor="title" className="label">
+        Title
+      </label>
+      <input
+        type="text"
+        placeholder="Type title.."
+        id="title"
+        value={formData.title}
+        className="input"
+        onChange={handleChange}
+        required
+      />
+      <label htmlFor="content" className="label">
+        Content
+      </label>
+      <textarea
+        placeholder="Type Content.."
+        id="content"
+        value={formData.content}
+        cols="30"
+        rows="10"
+        className="input"
+        onChange={handleChange}
+        required
+      ></textarea>
+      <label htmlFor="tags" className="label">
+        Tags
+      </label>
+      <div className="flex w-full flex-col">
+        <div className="flex  w-full gap-x-5">
+          <input
+            type="text"
+            placeholder="Add Tags.."
+            id="tags"
+            value={tagInputValue}
+            className="input grow"
+            onChange={handleTag}
+          />
+          <button onClick={addTag} className="small-button w-16">
+            add
+          </button>
+        </div>
+        <div className="flex mt-2 bg-black border-gray-500 rounded-2xl w-full">
+          {autoCompletes &&
+            autoCompletes.map((autoComplete) => (
+              <button
+                className="tag rounded-2xl text-start border-gray-500 py-2 px-3 text-white focus:bg-gray"
+                key={autoComplete}
+                onClick={() => handleAutoCompletes(autoComplete)}
+              >
+                #{autoComplete}
+              </button>
+            ))}
+        </div>
+      </div>
+      {formData.tags && (
+        <div className="flex w-full mt-3 gap-x-1 flew-nowrap">
+          {formData.tags.map((tag) => (
+            <div key={tag} className="flex">
+              <span className="tag active m-1 flex flex-row items-center gap-x-2">
+                <p>#{tag}</p>
+              </span>
+              {/* 삭제버튼 */}
+              <button
+                className="after:content-['\00d7'] text-xl"
+                onClick={() => deleteTag(tag)}
+              />
+            </div>
+          ))}
+        </div>
+      )}
+      <button type="submit" className="button mt-7">
+        Submit
+      </button>
+    </form>
+  );
+};
diff --git a/src/components/Header/Header.css b/src/components/Header/Header.css
deleted file mode 100644
index f80b333..0000000
--- a/src/components/Header/Header.css
+++ /dev/null
@@ -1,13 +0,0 @@
-#header-wrapper {
-  width: 100%;
-  height: 80px;
-  padding: 10px 80px;
-  display: flex;
-  align-items: center;
-  gap: 20px;
-  background-color: rgba(0, 0, 0, 0.1);
-}
-
-#header-lion {
-  max-width: 60px;
-}
diff --git a/src/components/Header/index.jsx b/src/components/Header/index.jsx
index 2110ea0..72f7e1e 100644
--- a/src/components/Header/index.jsx
+++ b/src/components/Header/index.jsx
@@ -1,10 +1,50 @@
+import { useEffect, useState } from "react";
 import lion from "../../assets/images/lion.jpeg";
-import "./Header.css";
+import { Link } from "react-router-dom";
+import { getCookie, removeCookie } from "../../utils/cookie";
 const Header = () => {
+  const [isUser, setIsUser] = useState("");
+
+  useEffect(() => {
+    const user = getCookie("access_token") ? true : false;
+    setIsUser(user);
+  }, []);
+
+  const handleLogout = () => {
+    removeCookie("access_token");
+    window.location.href = "/"; // 새로고침 - 로그아웃 되었다는 것을 인지시켜주기 위해
+  };
   return (
-    <div id="header-wrapper" className="flex justify-between">
+    <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" />
+        <img id="header-lion" src={lion} alt="lion" className="max-h-16" />
+        <Link className="ml-3" to="/">
+          Snulion Blog
+        </Link>
+      </div>
+
+      <div className="flex">
+        {!isUser ? (
+          <>
+            <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>
+          </>
+        )}
+
+        {/* <Link to="/signup" className="p-3 uppercase">profile</Link> */}
       </div>
     </div>
   );
diff --git a/src/components/Posts/index.jsx b/src/components/Posts/index.jsx
index f024c63..45ed0dc 100644
--- a/src/components/Posts/index.jsx
+++ b/src/components/Posts/index.jsx
@@ -1,22 +1,69 @@
+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
+  const onClickLike = async () => {
+    try {
+      await likePost(post.id);
+      window.location.reload();
+    } catch (error) {
+      console.error("Failed to like the post:", error);
+    }
   };
 
   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}
+      >
+        ❤️ {post.like_users.length}
+      </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>
+  );
+};
+
+export const BigPost = ({ post }) => {
+  const onClickLike = async () => {
+    try {
+      await likePost(post.id);
+      window.location.reload();
+    } catch (error) {
+      console.error("Failed to like the post:", error);
+    }
+  };
+
+  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>
+        <span className="mt-2 text-white ">{post.author.username}</span>
+        <div className="mt-2 h-28">{post.content}</div>
+        <div className="flex mt-5">
+          {post.tags &&
+            post.tags.map((tag) => (
+              <span key={tag.id} className="tag mr-2">
+                #{tag.content}
+              </span>
+            ))}
+        </div>
+        <div className="flex mt-5 cursor-pointer" onClick={onClickLike}>
+          ❤️ {post.like_users.length}
+        </div>
       </div>
     </div>
   );
diff --git a/src/data/comments.js b/src/data/comments.js
new file mode 100644
index 0000000..a07691a
--- /dev/null
+++ b/src/data/comments.js
@@ -0,0 +1,18 @@
+const comments = [
+  {
+    id: 1,
+    content: "멋사 11기 화이팅!!",
+    like_users: [2],
+    author: { "id": 1, "username": "멋사" },
+    created_at: "2023-02-12T08:09:59.900509Z",
+  },
+  {
+    id: 2,
+    content: "멋사 좋아요~~",
+    like_users: [],
+    author: { "id": 2, "username": "개발자" },
+    created_at: "2022-11-22T08:09:54.233976Z",
+  },
+];
+
+export default comments;
diff --git a/src/index.css b/src/index.css
index 5b2de4d..9d47863 100644
--- a/src/index.css
+++ b/src/index.css
@@ -13,6 +13,9 @@
 .button {
   @apply bg-orange-400 text-white font-medium hover:text-black rounded-xl text-lg p-3.5;
 }
+.small-button {
+  @apply bg-orange-400 text-white font-medium hover:text-black rounded-xl p-1;
+}
 /* 모든 form 일괄 적용 */
 .form {
   @apply w-full flex flex-col items-center;
diff --git a/src/routes/Home.jsx b/src/routes/HomePage.jsx
similarity index 54%
rename from src/routes/Home.jsx
rename to src/routes/HomePage.jsx
index 5e1150c..0432f27 100644
--- a/src/routes/Home.jsx
+++ b/src/routes/HomePage.jsx
@@ -1,24 +1,35 @@
 import { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
 import { SmallPost } from "../components/Posts";
-import posts from "../data/posts";
+import { getPosts, getTags } from "../apis/api";
+import { getCookie } from "../utils/cookie";
 
-const Home = () => {
+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 tagList = posts.reduce((acc, post) => {
-      for (let tag of post.tags) {
-        acc.add(tag.content);
-      }
-      return acc;
-    }, new Set());
-    setTags([...tagList]);
-    setSearchTags([...tagList]);
+    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();
   }, []);
 
+  console.log(postList);
+
   const handleChange = (e) => {
     const { value } = e.target;
     const newTags = tags.filter((tag) => tag.includes(value));
@@ -26,21 +37,15 @@ const Home = () => {
   };
 
   const handleTagFilter = (e) => {
-    let tag = e.target.innerText.slice(1);
-
-    if (tag === searchValue) {
+    const { innerText } = e.target;
+    if (searchValue === innerText.substring(1)) {
       setSearchValue("");
-      setPostList(posts);
     } else {
-      const newPosts = posts.filter((post) =>
-        post.tags.some((t) => t.content === tag)
-      );
-      setPostList(newPosts);
-      setSearchValue(tag);
+      const activeTag = innerText.substring(1);
+      setSearchValue(activeTag);
     }
   };
 
-
   return (
     <div>
       <div className="flex flex-col justify-center items-center mb-5">
@@ -69,12 +74,27 @@ const Home = () => {
       </div>
 
       <div className="grid grid-cols-4 px-10 mt-10">
-        {postList.map((post) => (
-          <SmallPost key={post.id} post={post} />
-        ))}
+        {postList
+          .filter((post) =>
+            searchValue
+              ? post.tags.find((tag) => tag.content === searchValue)
+              : post
+          )
+          .map((post) => (
+            <SmallPost key={post.id} post={post} />
+          ))}
       </div>
+
+      {/* 로그인해야지만 Post 버튼 보이도록 설정 */}
+      {getCookie("access_token") ? (
+        <div className="flex justify-center m-20">
+          <Link className="button" to="/create">
+            Post
+          </Link>
+        </div>
+      ) : null}
     </div>
   );
 };
 
-export default Home;
+export default HomePage;
diff --git a/src/routes/PostCreatePage.jsx b/src/routes/PostCreatePage.jsx
new file mode 100644
index 0000000..6de5bb0
--- /dev/null
+++ b/src/routes/PostCreatePage.jsx
@@ -0,0 +1,48 @@
+import { useEffect, useState } from "react";
+import { PostForm } from "../components/Form";
+import { useNavigate } from "react-router-dom";
+import { createPost, getTags } from "../apis/api";
+
+const PostCreatePage = () => {
+  const navigate = useNavigate();
+
+  const [formData, setFormData] = useState({
+    title: "",
+    content: "",
+    tags: [],
+  });
+
+  // 기존 태그 불러오기
+  // TODO : api connect(get all tags)
+  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(post post)
+    e.preventDefault();
+    createPost(formData, navigate);
+  };
+
+  return (
+    <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
new file mode 100644
index 0000000..17a62e1
--- /dev/null
+++ b/src/routes/PostDetailPage.jsx
@@ -0,0 +1,76 @@
+import { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import Comment from "../components/Comment";
+import { BigPost } from "../components/Posts";
+import { Link } from "react-router-dom";
+import { getPost, getUser } from "../apis/api";
+import { getCookie } from "../utils/cookie";
+import { deletePost } from "../apis/api";
+
+const PostDetailPage = () => {
+  const { postId } = useParams();
+  const [post, setPost] = useState();
+  const [user, setUser] = useState();
+
+  useEffect(() => {
+    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 = async () => {
+    const confirmed = window.confirm("정말로 삭제하시겠습니까?");
+    if (confirmed) {
+      try {
+        await deletePost(postId);
+        console.log("delete");
+        window.location.href = "/";
+      } catch (error) {
+        console.error("Failed to delete the post:", error);
+      }
+    }
+  };
+
+  return (
+    post && (
+      <div className="flex flex-col items-center w-3/5 p-8">
+        {/* post detail component */}
+        <BigPost post={post} />
+
+        {/* comments component */}
+        <Comment postId={postId} />
+
+        <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}
+        </div>
+      </div>
+    )
+  );
+};
+
+export default PostDetailPage;
diff --git a/src/routes/PostEditPage.jsx b/src/routes/PostEditPage.jsx
new file mode 100644
index 0000000..e8306ac
--- /dev/null
+++ b/src/routes/PostEditPage.jsx
@@ -0,0 +1,63 @@
+import { useEffect, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { PostForm } from "../components/Form";
+import { Link } from "react-router-dom";
+import { getPost, getTags, updatePost } from "../apis/api";
+
+const PostEditPage = () => {
+  const { postId } = useParams();
+  const [formData, setFormData] = useState({});
+  const navigate = useNavigate();
+
+  // 기존 post 불러오기
+  useEffect(() => {
+    const getPostAPI = async () => {
+      const post = await getPost(postId);
+      const postFormData = {
+        ...post,
+        tags: post.tags.map((tag) => tag.content),
+      };
+      setFormData(postFormData);
+    };
+    getPostAPI();
+  }, [postId]);
+
+  // 기존 태그 불러오기
+  // TODO : api connect(get all tags)
+  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(post put)
+    e.preventDefault();
+    updatePost(postId, formData, navigate);
+  };
+
+  return (
+    <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;
diff --git a/src/routes/SignInPage.jsx b/src/routes/SignInPage.jsx
new file mode 100644
index 0000000..a6314b0
--- /dev/null
+++ b/src/routes/SignInPage.jsx
@@ -0,0 +1,28 @@
+import { useState } from "react";
+import { SignInForm } from "../components/Form";
+import { signIn } from "../apis/api";
+
+const SignInPage = () => {
+  const [formData, setFormData] = useState({
+    username: "",
+    password: "",
+  });
+
+  const handleSignInSubmit = (e) => {
+    e.preventDefault();
+    signIn(formData);
+  };
+
+  return (
+    <div className="flex flex-col items-center w-1/2">
+      <h3 className=" font-bold text-4xl">Sign In</h3>
+      <SignInForm
+        formData={formData}
+        setFormData={setFormData}
+        handleSignInSubmit={handleSignInSubmit}
+      />
+    </div>
+  );
+};
+
+export default SignInPage;
diff --git a/src/routes/SignUpPage.jsx b/src/routes/SignUpPage.jsx
new file mode 100644
index 0000000..0dbe2ce
--- /dev/null
+++ b/src/routes/SignUpPage.jsx
@@ -0,0 +1,32 @@
+import { useState } from "react";
+import { SignUpForm } from "../components/Form";
+import { signUp } from "../apis/api";
+
+const SignUpPage = () => {
+  const [formData, setFormData] = useState({
+    email: "",
+    password: "",
+    confirm_password: "",
+    username: "",
+    college: "",
+    major: "",
+  });
+
+  const handleSignUpSubmit = (e) => {
+    e.preventDefault();
+    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}
+      />
+    </div>
+  );
+};
+
+export default SignUpPage;
diff --git a/src/utils/cookie.js b/src/utils/cookie.js
new file mode 100644
index 0000000..4329f73
--- /dev/null
+++ b/src/utils/cookie.js
@@ -0,0 +1,15 @@
+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
diff --git a/tailwind.config.js b/tailwind.config.js
index 54d3721..1490793 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,9 +1,10 @@
-// tailwind.config.js
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ["./src/**/*.{js,jsx,ts,tsx}"],
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}",
+  ],
   theme: {
     extend: {},
   },
   plugins: [],
-};
+}