diff --git a/src/App.js b/src/App.js
index d27da22..48cd61b 100644
--- a/src/App.js
+++ b/src/App.js
@@ -8,6 +8,7 @@ import PostEditPage from "./routes/PostEditPage";
 import SignUpPage from "./routes/SignUpPage";
 import PostDetailPage from "./routes/PostDetailPage";
 import SignInPage from "./routes/SignInPage";
+import MyPage from "./routes/MyPage";
 
 function App() {
   return (
@@ -25,8 +26,10 @@ function App() {
           <Route path="/:postId" element={<PostDetailPage />} />
           {/* sign up */}
           <Route path="/signup" element={<SignUpPage />} />
-          {/* sign up */}
+          {/* sign in */}
           <Route path="/signin" element={<SignInPage />} />
+          {/* my page */}
+          <Route path="/mypage" element={<MyPage />} />
         </Routes>
         <Footer />
       </BrowserRouter>
diff --git a/src/apis/api.js b/src/apis/api.js
index 19a91e6..e8df08c 100644
--- a/src/apis/api.js
+++ b/src/apis/api.js
@@ -18,6 +18,16 @@ export const signUp = async (data) => {
   return response;
 };
 
+export const updateAccount = async (data) => {
+  const response = await instanceWithToken.patch(`/account/info/`, data);
+  if (response.status === 200) {
+    console.log("ACCOUNT UPDATE SUCCESS");
+    window.location.reload();
+  } else {
+    console.log("[ERROR] error while updating account");
+  }
+};
+
 // GetUser API
 // Edit, Delete 권한을 확인하거나, 프로필 페이지를 만들 때 사용하겠죠?
 export const getUser = async () => {
@@ -61,27 +71,31 @@ export const updatePost = async (id, data, navigate) => {
   }
 };
 
-//과제!!
-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 deletePost = async (id, navigate) => {
+  if (window.confirm("글을 삭제하시겠어요? 정말요?")) {
+    const response = await instanceWithToken.delete(`post/${id}/`);
+    if (response.status === 204) {
+      console.log("POST DELETE SUCCESS");
+      navigate("/");
+    } else {
+      console.log("[ERROR] error while deleting post");
+    }
   }
 };
+
 //과제!!
-export const likePost = async (postId) => {
-  const response = await instanceWithToken.post(`/post/${postId}/like/`);
+export const likePost = async (id) => {
+  const response = await instanceWithToken.post(`/post/${id}/like/`);
   if (response.status === 200) {
     console.log("POST LIKE SUCCESS");
+    window.location.reload();
   } else {
-    console.log("[ERROR] error while liking post");
+    console.log("[ERROR] error while creating like");
   }
+
   return response.data;
 };
 
-
 // Tag 관련 API들
 export const getTags = async () => {
   const response = await instance.get("/tag/");
@@ -125,11 +139,14 @@ export const updateComment = async (id, data) => {
 };
 
 //과제!!
-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");
+  const isConfirmed = window.confirm("댓글을 삭제하시겠어요? 진짜요?");
+  if (isConfirmed) {
+    const response = await instanceWithToken.delete(`/comment/${id}/`);
+    if (response.status === 204) {
+      console.log("DELETE COMMENT SUCCESS");
+      window.location.reload();
+    } 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
index 4f7a53d..6912ccc 100644
--- a/src/apis/axios.js
+++ b/src/apis/axios.js
@@ -1,10 +1,10 @@
 import axios from "axios";
 import { getCookie } from "../utils/cookie";
 
-axios.defaults.baseURL = 'http://localhost:8000/api';
+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');
+axios.defaults.headers.post["Content-Type"] = "application/json";
+axios.defaults.headers.common["X-CSRFToken"] = getCookie("csrftoken");
 
 // 누구나 접근 가능한 API들
 export const instance = axios.create();
@@ -15,7 +15,7 @@ export const instanceWithToken = axios.create();
 instanceWithToken.interceptors.request.use(
   // 요청을 보내기전 수행할 일
   (config) => {
-    const accessToken = getCookie('access_token');
+    const accessToken = getCookie("access_token");
 
     if (!accessToken) {
       // token 없으면 리턴
@@ -37,7 +37,7 @@ instanceWithToken.interceptors.request.use(
 
 instanceWithToken.interceptors.response.use(
   (response) => {
-    // 서버 응답 데이터를 프론트에 넘겨주기 전 수행할 일 
+    // 서버 응답 데이터를 프론트에 넘겨주기 전 수행할 일
     console.log("Interceptor Response!!");
     return response;
   },
diff --git a/src/components/Comment/CommentElement.jsx b/src/components/Comment/CommentElement.jsx
index 06c89e6..e45836a 100644
--- a/src/components/Comment/CommentElement.jsx
+++ b/src/components/Comment/CommentElement.jsx
@@ -48,6 +48,7 @@ const CommentElement = (props) => {
           {year}.{month}.{day}
         </span>
       </div>
+
       {user?.id === comment.author ? (
         <div className="w-1/4 flex flex-row-reverse items-center">
           {isEdit ? (
diff --git a/src/components/Comment/index.jsx b/src/components/Comment/index.jsx
index 7320324..f788f01 100644
--- a/src/components/Comment/index.jsx
+++ b/src/components/Comment/index.jsx
@@ -17,17 +17,14 @@ const Comment = ({ postId }) => {
 
   const handleCommentSubmit = (e) => {
     e.preventDefault();
-    setNewContent("");
     createComment({ post: postId, content: newContent });
+    setNewContent("");
   };
 
-  // 과제!!
-  const handleCommentDelete = async (commentId) => {
-    const confirmDelete = window.confirm("정말로 댓글을 삭제하시겠습니까?");
-    if (confirmDelete) {
-      await deleteComment(commentId);
-      window.location.reload();
-    }
+
+  const handleCommentDelete = (comment_id) => {
+    console.log("delete");
+    deleteComment(comment_id);
   };
 
   return (
diff --git a/src/components/Form/index.jsx b/src/components/Form/index.jsx
index 1a2d250..023c8f1 100644
--- a/src/components/Form/index.jsx
+++ b/src/components/Form/index.jsx
@@ -1,4 +1,5 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
+import { getUser, updateAccount } from "../../apis/api";
 
 export const SignUpForm = ({ formData, setFormData, handleSignUpSubmit }) => {
   const handleFormData = (e) => {
@@ -261,3 +262,224 @@ export const PostForm = ({ onSubmit, tags, formData, setFormData }) => {
     </form>
   );
 };
+
+export const MyPageForm = ({ formData, setFormData, handleUpdateAccount }) => {
+  const handleFormData = (e) => {
+    const { id, value } = e.target;
+
+    setFormData({ ...formData, [id]: value });
+  };
+
+  const [isEmailEdit, setIsEmailEdit] = useState(false);
+  const [isUsernameEdit, setIsUsernameEdit] = useState(false);
+  const [isCollegeEdit, setIsCollegeEdit] = useState(false);
+  const [isMajorEdit, setIsMajorEdit] = useState(false);
+
+  return (
+    <>
+      <form className="form mb-5">
+        <label htmlFor="email" className="label">
+          email:
+        </label>
+
+        <div className="flex w-full items-center">
+          {isEmailEdit ? (
+            <>
+              <input
+                required
+                type="text"
+                id="email"
+                className="input"
+                onChange={handleFormData}
+                value={formData.email}
+              />
+              <button
+                className="w-1/6"
+                onClick={() => {
+                  setIsEmailEdit(!isEmailEdit);
+                }}
+              >
+                취소
+              </button>
+              <button
+                className="w-1/6"
+                onClick={() => {
+                  setIsEmailEdit(!isEmailEdit);
+                  handleUpdateAccount(formData);
+                }}
+              >
+                완료
+              </button>
+            </>
+          ) : (
+            <div className="flex border-b-2 w-full items-center">
+              <div className="w-full ">{formData.email}</div>
+              <button
+                type="submit"
+                className="button w-1/6 ml-4"
+                onClick={() => {
+                  setIsEmailEdit(!isEmailEdit);
+                }}
+              >
+                변경
+              </button>
+            </div>
+          )}
+        </div>
+      </form>
+
+      <form className="form mb-5">
+        <label htmlFor="username" className="label">
+          username:
+        </label>
+
+        <div className="flex w-full items-center">
+          {isUsernameEdit ? (
+            <>
+              <input
+                required
+                type="text"
+                id="username"
+                className="input"
+                onChange={handleFormData}
+                value={formData.username}
+              />
+              <button
+                className="w-1/6"
+                onClick={() => {
+                  setIsUsernameEdit(!isUsernameEdit);
+                }}
+              >
+                취소
+              </button>
+              <button
+                className="w-1/6"
+                onClick={() => {
+                  setIsUsernameEdit(!isUsernameEdit);
+                  handleUpdateAccount(formData);
+                }}
+              >
+                완료
+              </button>
+            </>
+          ) : (
+            <div className="flex border-b-2 w-full items-center">
+              <div className="w-full ">{formData.username}</div>
+              <button
+                type="submit"
+                className="button w-1/6 ml-4"
+                onClick={() => {
+                  setIsUsernameEdit(!isUsernameEdit);
+                }}
+              >
+                변경
+              </button>
+            </div>
+          )}
+        </div>
+      </form>
+
+      <form className="form mb-5">
+        <label htmlFor="college" className="label">
+          college:
+        </label>
+
+        <div className="flex w-full items-center">
+          {isCollegeEdit ? (
+            <>
+              <input
+                required
+                type="text"
+                id="college"
+                className="input"
+                onChange={handleFormData}
+                value={formData.college}
+              />
+              <button
+                className="w-1/6"
+                onClick={() => {
+                  setIsCollegeEdit(!isCollegeEdit);
+                }}
+              >
+                취소
+              </button>
+              <button
+                className="w-1/6"
+                onClick={() => {
+                  setIsCollegeEdit(!isCollegeEdit);
+                  handleUpdateAccount(formData);
+                }}
+              >
+                완료
+              </button>
+            </>
+          ) : (
+            <div className="flex border-b-2 w-full items-center">
+              <div className="w-full ">{formData.college}</div>
+              <button
+                type="submit"
+                className="button w-1/6 ml-4"
+                onClick={() => {
+                  setIsCollegeEdit(!isCollegeEdit);
+                }}
+              >
+                변경
+              </button>
+            </div>
+          )}
+        </div>
+      </form>
+
+      <form className="form mb-5">
+        <label htmlFor="major" className="label">
+          major:
+        </label>
+
+        <div className="flex w-full items-center">
+          {isMajorEdit ? (
+            <>
+              <input
+                required
+                type="text"
+                id="major"
+                className="input"
+                onChange={handleFormData}
+                value={formData.major}
+              />
+              <button
+                className="w-1/6"
+                onClick={() => {
+                  setIsMajorEdit(!isMajorEdit);
+                }}
+              >
+                취소
+              </button>
+              <button
+                className="w-1/6"
+                onClick={() => {
+                  setIsMajorEdit(!isMajorEdit);
+                  handleUpdateAccount(formData);
+                }}
+              >
+                완료
+              </button>
+            </>
+          ) : (
+            <div className="flex border-b-2 w-full items-center">
+              <div className="w-full ">{formData.major}</div>
+              <button
+                type="submit"
+                className="button w-1/6 ml-4"
+                onClick={() => {
+                  setIsMajorEdit(!isMajorEdit);
+                }}
+              >
+                변경
+              </button>
+            </div>
+          )}
+        </div>
+      </form>
+    </>
+  );
+};
diff --git a/src/components/Header/index.jsx b/src/components/Header/index.jsx
index 72f7e1e..e5e6183 100644
--- a/src/components/Header/index.jsx
+++ b/src/components/Header/index.jsx
@@ -14,6 +14,7 @@ const Header = () => {
     removeCookie("access_token");
     window.location.href = "/"; // 새로고침 - 로그아웃 되었다는 것을 인지시켜주기 위해
   };
+
   return (
     <div
       id="header-wrapper"
@@ -38,6 +39,9 @@ const Header = () => {
           </>
         ) : (
           <>
+            <Link to="/mypage" className="mr-10 p-3 uppercase">
+              MY PAGE
+            </Link>
             <Link to="/" onClick={handleLogout} className="mr-10 p-3 uppercase">
               log out
             </Link>
diff --git a/src/components/Posts/index.jsx b/src/components/Posts/index.jsx
index 45ed0dc..d46daaf 100644
--- a/src/components/Posts/index.jsx
+++ b/src/components/Posts/index.jsx
@@ -1,5 +1,7 @@
 import { Link } from "react-router-dom";
 import { likePost } from "../../apis/api";
+import { useState, useEffect } from "react";
+
 
 export const SmallPost = ({ post }) => {
   const onClickLike = async () => {
@@ -38,13 +40,20 @@ export const SmallPost = ({ post }) => {
 };
 
 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);
-    }
+
+  const [likeUsers, setLikeUsers] = useState([]);
+
+  useEffect(() => {
+    setLikeUsers([...post.like_users, "test"]);
+  }, [post]);
+
+  const onClickLike = () => {
+    likePost(post.id, {
+      id: post.id,
+      content: post.content,
+      like_users: likeUsers,
+    });
+
   };
 
   return (
diff --git a/src/index.css b/src/index.css
index 9d47863..9356dff 100644
--- a/src/index.css
+++ b/src/index.css
@@ -21,7 +21,7 @@
   @apply w-full flex flex-col items-center;
 }
 .label {
-  @apply self-start mt-5 mb-2 align-middle ml-3;
+  @apply self-start mt-5 mb-2 align-middle font-bold text-xl;
 }
 /* 모든 input 일괄 적용 */
 .input {
diff --git a/src/routes/HomePage.jsx b/src/routes/HomePage.jsx
index 0432f27..6bed815 100644
--- a/src/routes/HomePage.jsx
+++ b/src/routes/HomePage.jsx
@@ -3,6 +3,7 @@ import { Link } from "react-router-dom";
 import { SmallPost } from "../components/Posts";
 import { getPosts, getTags } from "../apis/api";
 import { getCookie } from "../utils/cookie";
+// import axios from "axios";
 
 const HomePage = () => {
   const [tags, setTags] = useState([]);
@@ -10,6 +11,14 @@ const HomePage = () => {
   const [searchValue, setSearchValue] = useState("");
   const [postList, setPostList] = useState([]);
 
+  // useEffect(() => {
+  //   const getPostAPI = async () => {
+  //     const response = await axios.get("http://localhost:8000/api/post/");
+  //     console.log(response);
+  //   };
+  //   getPostAPI();
+  // }, []);
+
   useEffect(() => {
     const getPostsAPI = async () => {
       const posts = await getPosts();
diff --git a/src/routes/MyPage.jsx b/src/routes/MyPage.jsx
new file mode 100644
index 0000000..78a4810
--- /dev/null
+++ b/src/routes/MyPage.jsx
@@ -0,0 +1,76 @@
+import { useEffect, useState } from "react";
+import { MyPageForm } from "../components/Form";
+import { SmallPost } from "../components/Posts";
+import { getPosts, getUser, updateAccount } from "../apis/api";
+import { getCookie } from "../utils/cookie";
+
+const MyPage = () => {
+  const [postList, setPostList] = useState([]);
+  const [user, setUser] = useState();
+  const [formData, setFormData] = useState({
+    email: "",
+    username: "",
+    college: "",
+    major: "",
+  });
+
+  useEffect(() => {
+    const getPostsAPI = async () => {
+      const posts = await getPosts();
+      setPostList(posts);
+    };
+    getPostsAPI();
+  }, []);
+
+  useEffect(() => {
+    // access_token이 있으면 유저 정보 가져옴
+    if (getCookie("access_token")) {
+      const getUserAPI = async () => {
+        const user = await getUser();
+        console.log(user);
+        setUser(user);
+      };
+      getUserAPI();
+    }
+  }, []);
+
+  useEffect(() => {
+    // 유저 정보가 있으면 폼 데이터에 유저 정보를 넣어줌
+    if (user && user.user) {
+      setFormData({
+        email: user.user.email,
+        username: user.user.username,
+        college: user.college,
+        major: user.major,
+      });
+    }
+  }, [user]);
+
+  const handleUpdateAccount = (formData) => {
+    console.log(formData);
+    updateAccount(formData);
+  };
+
+  return (
+    <div className="flex flex-col items-center w-1/2">
+      <h3 className="font-bold text-4xl">My Info</h3>
+      <MyPageForm
+        formData={formData}
+        setFormData={setFormData}
+        handleUpdateAccount={handleUpdateAccount}
+      />
+
+      <h3 className="font-bold text-4xl mt-10">My Posts</h3>
+
+      <div className="grid grid-cols-4 px-10 mt-10">
+        {postList
+          .filter((post) => user?.user.id === post?.author.id)
+          .map((post) => (
+            <SmallPost key={post.id} post={post} />
+          ))}
+      </div>
+    </div>
+  );
+};
+
+export default MyPage;
diff --git a/src/routes/PostDetailPage.jsx b/src/routes/PostDetailPage.jsx
index 17a62e1..bab57de 100644
--- a/src/routes/PostDetailPage.jsx
+++ b/src/routes/PostDetailPage.jsx
@@ -1,9 +1,9 @@
 import { useEffect, useState } from "react";
-import { useParams } from "react-router-dom";
+import { useNavigate, 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 { getPost, getUser, deletePost, likePost } from "../apis/api";
 import { getCookie } from "../utils/cookie";
 import { deletePost } from "../apis/api";
 
@@ -11,6 +11,7 @@ const PostDetailPage = () => {
   const { postId } = useParams();
   const [post, setPost] = useState();
   const [user, setUser] = useState();
+  const navigate = useNavigate();
 
   useEffect(() => {
     const getPostAPI = async () => {
@@ -26,22 +27,17 @@ const PostDetailPage = () => {
       const getUserAPI = async () => {
         const user = await getUser();
         setUser(user);
+        console.log(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);
-      }
-    }
+
+    console.log("delete");
+    deletePost(postId, navigate);
+
   };
 
   return (