10th week mission complete - hyeokbeom

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>

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");
+    }
   }
-};
+};

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;
   },

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 ? (

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 (

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>
+    </>
+  );
+};