[feat]MyPage React

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 (
@@ -27,6 +28,9 @@ function App() {
           <Route path="/signup" element={<SignUpPage />} />
           {/* sign up */}
           <Route path="/signin" element={<SignInPage />} />
+          {/* MyPage */}
+          <Route path="/mypage" element={<MyPage />} />
+
         </Routes>
         <Footer />
       </BrowserRouter>

src/apis/api.js

@@ -30,6 +30,16 @@ export const getUser = async () => {
   return response.data;
 };
 
+export const getMyPage = async () => {
+  const response = await instanceWithToken.get("/account/mypage/");
+  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/");
@@ -61,6 +71,15 @@ export const updatePost = async (id, data, navigate) => {
   }
 };
 
+export const updateMyInfo = async (data) => {
+  const response = await instanceWithToken.patch(`/account/info/`, data);
+  if (response.status === 201) {
+    console.log("POST UPDATE SUCCESS");
+  } else {
+    console.log("[ERROR] error while updating post");
+  }
+};
+
 //과제!!
 export const deletePost = async (id, navigate) => {
   const response = await instanceWithToken.delete(`post/${id}/`)

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;

src/components/EditInput/index.jsx

@@ -0,0 +1,139 @@
+import { Link } from "react-router-dom";
+import { useEffect, useState } from "react";
+import { updateMyInfo } from "../../apis/api";
+
+export const MyPageInput = ({ content }) => {
+  const [isEmailEdit, setIsEmailEdit] = useState(false);
+  const [isUsernameEdit, setIsUsernameEdit] = useState(false);
+  const [isCollegeEdit, setIsCollegeEdit] = useState(false);
+  const [isMajorEdit, setIsMajorEdit] = useState(false);
+  const [formData, setFormData] = useState(content);
+
+  const handleChange = (e) => {
+
+    if (e.target.id === "email" || e.target.id === "username")
+      {
+        setFormData({ ...formData, [`user`]: {...formData.user, [e.target.id]: e.target.value} });
+      }
+    else setFormData({ ...formData, [e.target.id]: e.target.value });
+  };
+
+  const onSubmit = async (e) => {
+    e.preventDefault();
+    await updateMyInfo(formData);
+    setIsEmailEdit(false);
+    setIsUsernameEdit(false);
+    setIsCollegeEdit(false);
+    setIsMajorEdit(false);
+  };
+
+  const onEmailEditClick = async (e) => {
+    setIsEmailEdit(true);
+  };
+
+  const onUsernameEditClick = async (e) => {
+    setIsUsernameEdit(true);
+  };
+
+  const onCollegeEditClick = async (e) => {
+    setIsCollegeEdit(true);
+  };
+
+  const onMajorEditClick = async (e) => {
+    setIsMajorEdit(true);
+  };
+
+
+  const onCancelClick = async (e) => {
+    setFormData(content);
+  };
+
+  return (
+    <>
+      {formData && (
+        <form className="form" onSubmit={onSubmit}>
+          <div className="flex  w-full gap-x-5">
+            <input
+              type="text"
+              placeholder="Add Tags.."
+              id="email"
+              value={formData.user.email}
+              className="input grow"
+              onChange={handleChange}
+            />
+            <>
+            {isEmailEdit ? (
+              <div>
+                <button className="small-button w-16">submit</button>
+                <button className="small-button w-16" onClick={onCancelClick}>cancel</button>
+              </div>
+            ) : (
+              <button className="small-button w-16" onClick={onEmailEditClick}>edit</button>
+            )}
+          </>
+          </div>
+          <div className="flex  w-full gap-x-5">
+            <input
+              type="text"
+              placeholder="Add Tags.."
+              id="username"
+              value={formData.user.username}
+              className="input grow"
+              onChange={handleChange}
+            />
+            <>
+            {isUsernameEdit ? (
+              <div>
+                <button className="small-button w-16">submit</button>
+                <button className="small-button w-16" onClick={onCancelClick}>cancel</button>
+              </div>
+            ) : (
+              <button className="small-button w-16" onClick={onUsernameEditClick}>edit</button>
+            )}
+          </>
+          </div>
+          <div className="flex  w-full gap-x-5">
+            <input
+              type="text"
+              placeholder="Add Tags.."
+              id="college"
+              value={formData.college}
+              className="input grow"
+              onChange={handleChange}
+            />
+            <>
+            {isCollegeEdit ? (
+              <div>
+                <button className="small-button w-16">submit</button>
+                <button className="small-button w-16" onClick={onCancelClick}>cancel</button>
+              </div>
+            ) : (
+              <button className="small-button w-16" onClick={onCollegeEditClick}>edit</button>
+            )}
+          </>
+          </div>
+          <div className="flex  w-full gap-x-5">
+            <input
+              type="text"
+              placeholder="Add Tags.."
+              id="major"
+              value={formData.major}
+              className="input grow"
+              onChange={handleChange}
+            />
+            <>
+            {isMajorEdit ? (
+              <div>
+                <button className="small-button w-16">submit</button>
+                <button className="small-button w-16" onClick={onCancelClick}>cancel</button>
+              </div>
+            ) : (
+              <button className="small-button w-16" onClick={onMajorEditClick}>edit</button>
+            )}
+          </>
+          </div>
+        </form>
+      )}
+    </>
+  );
+};

src/components/Header/index.jsx

@@ -1,19 +1,27 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState,  } from "react";
 import lion from "../../assets/images/lion.jpeg";
-import { Link } from "react-router-dom";
+import { Link, useParams } 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"
@@ -38,6 +46,9 @@ const Header = () => {
           </>
         ) : (
           <>
+            <Link to="/mypage" className="mr-10 p-3 uppercase">
+              mypage
+            </Link>
             <Link to="/" onClick={handleLogout} className="mr-10 p-3 uppercase">
               log out
             </Link>

src/routes/MyPage.jsx

@@ -0,0 +1,54 @@
+import { useEffect, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { SmallPost } from "../components/Posts";
+import { MyPageInput } from "../components/EditInput";
+
+import { Link } from "react-router-dom";
+import { getPosts, getUser, getMyPage } from "../apis/api";
+import { getCookie } from "../utils/cookie";
+
+const MyPage = () => {
+  const [userProfile, setUserProfile] = useState();
+
+  const [tags, setTags] = useState([]);
+  const [searchTags, setSearchTags] = useState([]);
+  const [searchValue, setSearchValue] = useState("");
+  const [postList, setPostList] = useState([]);
+
+  useEffect(() => {
+    // access_token이 있으면 유저 정보 가져옴
+    if (getCookie("access_token")) {
+      const getMyPageAPI = async () => {
+        const userProfile = await getMyPage();
+        setUserProfile(userProfile);
+      };
+      const getPostsAPI = async () => {
+        const posts = await getPosts();
+        setPostList(posts);
+      };
+      getPostsAPI();
+      getMyPageAPI();
+    }
+  }, []);
+
+  return (
+    <div>
+      {userProfile && (//userProfile을 안 받아왔을 때에 대한 처리.
+        <>
+          <MyPageInput content={userProfile}></MyPageInput>
+        </>
+      )}
+      <div className="w-full flex-row">
+      {postList.filter((post) =>
+        post.author.id === userProfile.user.id
+      )
+      .map((post) => (
+        <SmallPost key={post.id} post={post} />
+      ))
+      }
+      </div>
+    </div>
+  );
+};
+
+export default MyPage;