From f0ee71f494f8ed623157ba8e4adf30d83e75e698 Mon Sep 17 00:00:00 2001
From: zziglet <a01023701973@gmail.com>
Date: Wed, 4 Sep 2024 11:00:20 +0900
Subject: [PATCH 1/8] =?UTF-8?q?fix=20:=20user=5Fid=EB=A5=BC=20access=20tok?=
 =?UTF-8?q?en=EC=9C=BC=EB=A1=9C=20=ED=95=B4=EC=84=9D=ED=95=98=EB=8F=84?=
 =?UTF-8?q?=EB=A1=9D=20=EB=B3=80=EA=B2=BD=20(#7)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

user_id를 받는 모든 api의 방식을 수정했습니다.
---
 src/components/bars/TitleBar.jsx |  1 +
 src/user.json                    | 12 ------------
 2 files changed, 1 insertion(+), 12 deletions(-)
 delete mode 100644 src/user.json

diff --git a/src/components/bars/TitleBar.jsx b/src/components/bars/TitleBar.jsx
index 57d178c..5c92030 100644
--- a/src/components/bars/TitleBar.jsx
+++ b/src/components/bars/TitleBar.jsx
@@ -140,6 +140,7 @@ function TitleBar(props) {
 
             {isProfileMenuOpen && (
               <ProfileMenu>
+                <MenuItem onClick={() => nav('/mypage')}>마이페이지</MenuItem>
                 <MenuItem onClick={handleLogout}>로그아웃</MenuItem>
                 <MenuItem onClick={() => nav('/settings')}>설정</MenuItem>
               </ProfileMenu>
diff --git a/src/user.json b/src/user.json
deleted file mode 100644
index 73d4a30..0000000
--- a/src/user.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "user": {
-    "id": "jinji123",
-    "bio": "안녕하시소",
-    "tier": 1,
-    "score": 75,
-    "follower": 20,
-    "following": 35,
-    "profile": "https://example.com/path/to/profile.png",
-    "background": "https://example.com/path/to/background.png"
-  }
-}

From 4f81245b69c916c8cd70ca50861bfffda5a11e27 Mon Sep 17 00:00:00 2001
From: zziglet <a01023701973@gmail.com>
Date: Wed, 4 Sep 2024 11:41:11 +0900
Subject: [PATCH 2/8] =?UTF-8?q?fix=20:=20user=5Fid=EB=A5=BC=20access=20tok?=
 =?UTF-8?q?en=EC=9C=BC=EB=A1=9C=20=ED=95=B4=EC=84=9D=ED=95=98=EB=8F=84?=
 =?UTF-8?q?=EB=A1=9D=20=EC=88=98=EC=A0=95=20(#7)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

user_id 관련 api 모두 수정했습니다.
---
 src/components/user/Wandubat.jsx |  4 +++-
 src/pages/LoginAlertPage.jsx     |  2 +-
 src/pages/MyPage.jsx             | 22 +++++++++++++++++-----
 3 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/src/components/user/Wandubat.jsx b/src/components/user/Wandubat.jsx
index d5b3981..9c467ea 100644
--- a/src/components/user/Wandubat.jsx
+++ b/src/components/user/Wandubat.jsx
@@ -141,12 +141,14 @@ function Wandubat(props) {
   useEffect(() => {
     const fetchWandu = async () => {
       try {
+        const accessToken = localStorage.getItem('accessToken');
         const response = await fetch(
-          `http://3.37.43.129/api/user/${userId}/seriousness/seriousness-field`,
+          `http://3.37.43.129/api/user/seriousness/seriousness-field`,
           {
             method: 'GET',
             headers: {
               'Content-Type': 'application/json',
+              'Authorization': `Bearer ${accessToken}`,
             },
           }
         );
diff --git a/src/pages/LoginAlertPage.jsx b/src/pages/LoginAlertPage.jsx
index 094c5d3..3fa5e4a 100644
--- a/src/pages/LoginAlertPage.jsx
+++ b/src/pages/LoginAlertPage.jsx
@@ -94,7 +94,7 @@ const LoginAlertPage = ({ isOpen, onClose }) => {
         setIsLoggedIn(true);
 
         // 사용자 대시보드로 리디렉션
-        navigate('/mypage');
+        navigate('/');
       } catch (error) {
         setError(error.message);
       }
diff --git a/src/pages/MyPage.jsx b/src/pages/MyPage.jsx
index 4eec066..6e50c6e 100644
--- a/src/pages/MyPage.jsx
+++ b/src/pages/MyPage.jsx
@@ -219,8 +219,16 @@ function MyPage() {
   useEffect(() => {
     const fetchTiers = async () => {
       try {
+        const accessToken = localStorage.getItem('accessToken');
         const response = await fetch(
-          `http://3.37.43.129/api/user/${user.userId}/seriousness`
+          `http://3.37.43.129/api/user/seriousness`,
+          {
+            method: 'GET',
+            headers: {
+              'Content-Type': 'application/json',
+              'Authorization': `Bearer ${accessToken}`,
+            },
+          }
         );
         if (!response.ok) {
           throw new Error('Failed to fetch user info');
@@ -235,9 +243,14 @@ function MyPage() {
 
     const fetchUserPosts = async () => {
       try {
-        const response = await fetch(
-          `http://3.37.43.129/api/user/${user.userId}/posts`
-        );
+        const accessToken = localStorage.getItem('accessToken');
+        const response = await fetch(`http://3.37.43.129/api/user/posts`, {
+          method: 'GET',
+          headers: {
+            'Content-Type': 'application/json',
+            'Authorization': `Bearer ${accessToken}`,
+          },
+        });
         if (!response.ok) {
           throw new Error('Failed to fetch user posts');
         }
@@ -260,7 +273,6 @@ function MyPage() {
       <TitleBar />
       <UserWrapper>
         <UserBackgroundImg>
-          {/* data에서 user의 배경이미지와 연결 */}
           <img src={background} alt="back" />
         </UserBackgroundImg>
         <ProfileImg>

From 8e362f5371a96348153f77b87c768856b60b69d5 Mon Sep 17 00:00:00 2001
From: zziglet <a01023701973@gmail.com>
Date: Wed, 4 Sep 2024 22:47:33 +0900
Subject: [PATCH 3/8] =?UTF-8?q?fix=20:=20mainpage=20nav=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95=20(#7)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

mainpage에서 현재 위치한 mainbar item에 맞게 api를 호출하도록 수정하였습니다.
---
 src/pages/MainPage.jsx | 20 ++++++++++++--------
 src/routes/Router.jsx  |  6 +++---
 2 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/pages/MainPage.jsx b/src/pages/MainPage.jsx
index b61769b..cec50df 100644
--- a/src/pages/MainPage.jsx
+++ b/src/pages/MainPage.jsx
@@ -28,7 +28,8 @@ const MainBarWrapper = styled.div`
   background-color: white;
 `;
 
-function MainPage() {
+function MainPage(props) {
+  const { posttype } = props;
   const [posts, setPosts] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
@@ -36,12 +37,15 @@ function MainPage() {
   useEffect(() => {
     const fetchPosts = async () => {
       try {
-        const response = await fetch('http://3.37.43.129/api/posts/recent', {
-          method: 'GET',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-        });
+        const response = await fetch(
+          `http://3.37.43.129/api/posts/${posttype}`,
+          {
+            method: 'GET',
+            headers: {
+              'Content-Type': 'application/json',
+            },
+          }
+        );
         if (!response.ok) {
           throw new Error('Failed to fetch user info');
         }
@@ -56,7 +60,7 @@ function MainPage() {
     };
 
     fetchPosts();
-  }, []);
+  }, [posttype]);
 
   return (
     <Wrapper>
diff --git a/src/routes/Router.jsx b/src/routes/Router.jsx
index b5152e4..c311018 100644
--- a/src/routes/Router.jsx
+++ b/src/routes/Router.jsx
@@ -10,7 +10,7 @@ function Router() {
   return (
     <BrowserRouter>
       <Routes>
-        <Route path="/" element={<MainPage title="GabLog" />} />
+        <Route path="/" element={<MainPage posttype="recent" />} />
         {/* test: /mypage로 임시 url 설정 */}
         <Route path="/mypage" element={<MyPage />} />
         <Route
@@ -21,8 +21,8 @@ function Router() {
           path="/mypage/following"
           element={<FollowListPage title="following" />}
         />
-        <Route path="/following" element={<MainPage title="팔로잉" />} />
-        <Route path="/popular" element={<MainPage title="인기글" />} />
+        <Route path="/following" element={<MainPage posttype="recent" />} />
+        <Route path="/popular" element={<MainPage posttype="hot" />} />
         <Route path="/posts/:postId" element={<ViewPostPage />} />
         <Route path="/write" element={<WritePostPage />} />
       </Routes>

From d3a189715e05e133701e3a608a229081e1ba9298 Mon Sep 17 00:00:00 2001
From: zziglet <a01023701973@gmail.com>
Date: Wed, 4 Sep 2024 23:31:09 +0900
Subject: [PATCH 4/8] =?UTF-8?q?feat=20:=20follower,=20followin=20list=20?=
 =?UTF-8?q?=EC=B6=9C=EB=A0=A5=20(#7)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

user의 팔로워, 팔로잉 리스트 출력 구현하였습니다.
---
 src/components/user/FollowItem.jsx    | 32 ++++++++++++---
 src/components/user/FollowerList.jsx  | 57 ++++++++++++++++++++++++++-
 src/components/user/FollowingList.jsx | 55 ++++++++++++++++++++++++++
 src/pages/FollowListPage.jsx          | 55 ++++++++++++++++++--------
 src/routes/Router.jsx                 |  1 -
 5 files changed, 176 insertions(+), 24 deletions(-)

diff --git a/src/components/user/FollowItem.jsx b/src/components/user/FollowItem.jsx
index 6aac7db..fae7c2a 100644
--- a/src/components/user/FollowItem.jsx
+++ b/src/components/user/FollowItem.jsx
@@ -52,17 +52,39 @@ const UserBio = styled.div`
   margin-right: 830px;
 `;
 
-function FollowItem() {
+function FollowItem({ props }) {
+  const { followeeId } = props;
+  const [user, setUser] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchUser = async () => {
+      const response = await fetch(
+        `http://3.37.43.129/api/users/${followeeId}`
+      );
+      if (response.ok) {
+        const data = await response.json();
+        setUser(data);
+      }
+      setLoading(false);
+    };
+
+    fetchUser();
+  }, [followeeId]);
+
+  if (loading) return <div>Loading...</div>;
+  if (!user) return null;
+
   return (
     <Container>
       <ProfileImg>
-        <img alt="profile" />
+        <img src={user.profileImage} alt="profile" />
       </ProfileImg>
       <UserInfo>
-        <UserNickname>나는다연</UserNickname>
-        <UserId>@hongdari</UserId>
+        <UserNickname>{user.nickName}</UserNickname>
+        <UserId>{user.userId}</UserId>
       </UserInfo>
-      <UserBio>안녕하시소</UserBio>
+      <UserBio>{user.introduce}</UserBio>
       <Button title="팔로우" className="green" />
     </Container>
   );
diff --git a/src/components/user/FollowerList.jsx b/src/components/user/FollowerList.jsx
index a6bcd34..90fd83b 100644
--- a/src/components/user/FollowerList.jsx
+++ b/src/components/user/FollowerList.jsx
@@ -1 +1,56 @@
-//mypage에서 보여질 user의 follower list 컴포넌트
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import FollowItem from './FollowItem';
+
+// Post Item을 그리드 형식으로 출력
+const Container = styled.div`
+  display: flex;
+  justify-content: center;
+`;
+
+const Wrapper = styled.div`
+  display: grid;
+  grid-template-rows: repeat(auto-fill, minmax(60px, 1fr)); // 세로로 나열
+  gap: 16px;
+  justify-items: center;
+  height: auto; // 콘텐츠에 맞게 높이 자동 조정
+`;
+
+function FollowerList({ props }) {
+  const { userId } = props;
+  const [follower, setFollower] = useState([]);
+
+  useEffect(() => {
+    const fetchFollower = async () => {
+      try {
+        const response = await fetch(
+          `http://3.37.43.129/api/user/${userId}/followers`,
+          {
+            method: 'GET',
+            headers: {
+              'Content-Type': 'application/json',
+            },
+          }
+        );
+        const data = await response.json();
+        setFollower(data);
+      } catch (error) {
+        console.error('Error fetching follower list:', error);
+      }
+    };
+
+    fetchFollower();
+  }, []);
+
+  return (
+    <Container>
+      <Wrapper>
+        {follower.map((user) => (
+          <FollowItem key={user.id} userId={follower.followerId} />
+        ))}
+      </Wrapper>
+    </Container>
+  );
+}
+
+export default FollowerList;
diff --git a/src/components/user/FollowingList.jsx b/src/components/user/FollowingList.jsx
index 097c2d3..51fa5fd 100644
--- a/src/components/user/FollowingList.jsx
+++ b/src/components/user/FollowingList.jsx
@@ -1 +1,56 @@
 //mypage에서 보여질 user의 following list 컴포넌트
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import FollowItem from './FollowItem';
+
+const Container = styled.div`
+  display: flex;
+  justify-content: center;
+`;
+
+const Wrapper = styled.div`
+  display: grid;
+  grid-template-rows: repeat(auto-fill, minmax(60px, 1fr));
+  gap: 16px;
+  justify-items: center;
+  height: auto;
+`;
+
+function FollowingList({ props }) {
+  const { userId } = props;
+  const [following, setFollowing] = useState([]);
+
+  useEffect(() => {
+    const fetchFollowing = async () => {
+      try {
+        const response = await fetch(
+          `http://3.37.43.129/api/user/${userId}/followees`,
+          {
+            method: 'GET',
+            headers: {
+              'Content-Type': 'application/json',
+            },
+          }
+        );
+        const data = await response.json();
+        setFollowing(data);
+      } catch (error) {
+        console.error('Error fetching following list:', error);
+      }
+    };
+
+    fetchFollowing();
+  }, []);
+
+  return (
+    <Container>
+      <Wrapper>
+        {following.map((user) => (
+          <FollowItem key={user.id} userId={following.followeeId} />
+        ))}
+      </Wrapper>
+    </Container>
+  );
+}
+
+export default FollowingList;
diff --git a/src/pages/FollowListPage.jsx b/src/pages/FollowListPage.jsx
index 344cece..3702e3f 100644
--- a/src/pages/FollowListPage.jsx
+++ b/src/pages/FollowListPage.jsx
@@ -2,7 +2,8 @@
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import TitleBar from '../components/bars/TitleBar';
-import FollowItem from '../components/user/FollowItem';
+import FollowingList from '../components/user/FollowingList';
+import FollowerList from '../components/user/FollowerList';
 
 const Container = styled.div`
   width: calc(100% - 32px);
@@ -56,22 +57,42 @@ const TitleWrapper = styled.div`
   }
 `;
 
-function FollowListPage() {
-  return (
-    <Container>
-      <TitleBar />
-      <UserWrapper>
-        <ProfileImg>
-          <img alt="profile" />
-        </ProfileImg>
-        <UserId>jinji123의 팔로워</UserId>
-      </UserWrapper>
-      <TitleWrapper>
-        <TitleWrapper className="count">20명</TitleWrapper>의 팔로워
-      </TitleWrapper>
-      <FollowItem></FollowItem>
-    </Container>
-  );
+function FollowListPage({ props }) {
+  const { userId, title } = props;
+
+  if (title == 'following') {
+    return (
+      <Container>
+        <TitleBar />
+        <UserWrapper>
+          <ProfileImg>
+            <img alt="profile" />
+          </ProfileImg>
+          <UserId>jinji123의 팔로워</UserId>
+        </UserWrapper>
+        <TitleWrapper>
+          <TitleWrapper className="count">20명</TitleWrapper>의 팔로워
+        </TitleWrapper>
+        <FollowingList userId={userId} />
+      </Container>
+    );
+  } else {
+    return (
+      <Container>
+        <TitleBar />
+        <UserWrapper>
+          <ProfileImg>
+            <img alt="profile" />
+          </ProfileImg>
+          <UserId>jinji123의 팔로워</UserId>
+        </UserWrapper>
+        <TitleWrapper>
+          <TitleWrapper className="count">20명</TitleWrapper>의 팔로워
+        </TitleWrapper>
+        <FollowerList userId={userId} />
+      </Container>
+    );
+  }
 }
 
 export default FollowListPage;
diff --git a/src/routes/Router.jsx b/src/routes/Router.jsx
index c311018..13ac6d3 100644
--- a/src/routes/Router.jsx
+++ b/src/routes/Router.jsx
@@ -11,7 +11,6 @@ function Router() {
     <BrowserRouter>
       <Routes>
         <Route path="/" element={<MainPage posttype="recent" />} />
-        {/* test: /mypage로 임시 url 설정 */}
         <Route path="/mypage" element={<MyPage />} />
         <Route
           path="/mypage/follower"

From 7ac195207b67253d1352d014385d7df9072a877d Mon Sep 17 00:00:00 2001
From: zziglet <a01023701973@gmail.com>
Date: Thu, 5 Sep 2024 16:02:09 +0900
Subject: [PATCH 5/8] =?UTF-8?q?feat=20:=20MyPage=20bar=EC=97=90=20?=
 =?UTF-8?q?=EB=94=B0=EB=A5=B8=20=EC=BB=A8=ED=85=90=EC=B8=A0=20api=20?=
 =?UTF-8?q?=ED=86=B5=EC=8B=A0=20(#7)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

mypage bar navigation 및 fetch 수정하였습니다.
---
 src/components/bars/MyPageBar.jsx      |   4 +-
 src/components/bars/TitleBar.jsx       |   4 +-
 src/components/comment/CommentItem.jsx |  36 ++++++-
 src/pages/LoginAlertPage.jsx           |   2 +-
 src/pages/MainPage.jsx                 |   3 +-
 src/pages/MyPage.jsx                   | 135 +++++++++++++++++++------
 src/routes/Router.jsx                  |   5 +-
 7 files changed, 152 insertions(+), 37 deletions(-)

diff --git a/src/components/bars/MyPageBar.jsx b/src/components/bars/MyPageBar.jsx
index 977e61d..81d1c6a 100644
--- a/src/components/bars/MyPageBar.jsx
+++ b/src/components/bars/MyPageBar.jsx
@@ -39,11 +39,11 @@ function MyPageBar() {
       <Wrapper>
         <nav>
           {/* 임시 url */}
-          <NavItem to="/mypage" exact>
+          <NavItem to="/mypage/main" exact>
             개요
           </NavItem>
           <NavItem to="/mypage/post">게시글</NavItem>
-          <NavItem to="/mypage/scrab">스크랩</NavItem>
+          <NavItem to="/mypage/scrap">스크랩</NavItem>
           <NavItem to="/mypage/comment">댓글</NavItem>
         </nav>
       </Wrapper>
diff --git a/src/components/bars/TitleBar.jsx b/src/components/bars/TitleBar.jsx
index 5c92030..1a61543 100644
--- a/src/components/bars/TitleBar.jsx
+++ b/src/components/bars/TitleBar.jsx
@@ -140,7 +140,9 @@ function TitleBar(props) {
 
             {isProfileMenuOpen && (
               <ProfileMenu>
-                <MenuItem onClick={() => nav('/mypage')}>마이페이지</MenuItem>
+                <MenuItem onClick={() => nav('/mypage/main')}>
+                  마이페이지
+                </MenuItem>
                 <MenuItem onClick={handleLogout}>로그아웃</MenuItem>
                 <MenuItem onClick={() => nav('/settings')}>설정</MenuItem>
               </ProfileMenu>
diff --git a/src/components/comment/CommentItem.jsx b/src/components/comment/CommentItem.jsx
index 3ff1289..0c8cf0d 100644
--- a/src/components/comment/CommentItem.jsx
+++ b/src/components/comment/CommentItem.jsx
@@ -75,6 +75,35 @@ const HideButton = styled.button`
 `;
 
 function CommentItem({ comment, hasReplies, onToggleHide }) {
+  const [isLiked, setIsLiked] = useState(comment.isLiked);
+
+  const toggleLike = async () => {
+    try {
+      const accessToken = localStorage.getItem('accessToken');
+      const response = await fetch(
+        `http://3.37.43.129/api/comments/${comment.id}/like`,
+        {
+          method: 'PUT',
+          headers: {
+            'Content-Type': 'application/json',
+            'Authorization': `Bearer ${accessToken}`,
+          },
+        }
+      );
+
+      if (!response.ok) {
+        throw new Error('Failed to toggle like');
+      }
+
+      const data = await response.json(); // API로부터 반환된 데이터
+
+      // 상태 업데이트
+      setIsLiked(data.isLiked); // boolean 값 업데이트
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
   return (
     <Container>
       <ProfileImg>
@@ -87,7 +116,12 @@ function CommentItem({ comment, hasReplies, onToggleHide }) {
       <MainText>{comment.content}</MainText>
       <IconWrapper>
         <FiMessageCircle size="24" />
-        <FiHeart size="24" />
+        <div
+          onClick={toggleLike}
+          style={{ cursor: 'pointer', color: isLiked ? '#ff4081' : '#767676' }}
+        >
+          <FiHeart size="24" />
+        </div>
         {hasReplies && (
           <HideButton onClick={onToggleHide}>
             {comment.isHidden ? '댓글 보기' : '댓글 숨기기'}
diff --git a/src/pages/LoginAlertPage.jsx b/src/pages/LoginAlertPage.jsx
index 3fa5e4a..9dfe2e7 100644
--- a/src/pages/LoginAlertPage.jsx
+++ b/src/pages/LoginAlertPage.jsx
@@ -87,12 +87,12 @@ const LoginAlertPage = ({ isOpen, onClose }) => {
         }
 
         const data = await response.json();
+        console.log(data);
         const token = data.accessToken;
 
         // JWT 토큰을 로컬 스토리지에 저장
         localStorage.setItem('accessToken', token);
         setIsLoggedIn(true);
-
         // 사용자 대시보드로 리디렉션
         navigate('/');
       } catch (error) {
diff --git a/src/pages/MainPage.jsx b/src/pages/MainPage.jsx
index cec50df..5b8ee5f 100644
--- a/src/pages/MainPage.jsx
+++ b/src/pages/MainPage.jsx
@@ -19,7 +19,6 @@ const ContentWrapper = styled.div`
   margin-top: 20px;
 `;
 
-//mainbar(gaplog, 팔로잉, 인기글) layout -> 추후에 mainbar로 옮겨갈지 고민..
 const MainBarWrapper = styled.div`
   top: 0;
   width: calc(100% - 32px);
@@ -47,7 +46,7 @@ function MainPage(props) {
           }
         );
         if (!response.ok) {
-          throw new Error('Failed to fetch user info');
+          throw new Error('Failed to fetch info');
         }
         const data = await response.json();
         console.log('Posts Data: ', data);
diff --git a/src/pages/MyPage.jsx b/src/pages/MyPage.jsx
index 6e50c6e..a1f1b4c 100644
--- a/src/pages/MyPage.jsx
+++ b/src/pages/MyPage.jsx
@@ -211,7 +211,8 @@ const CategoryWrapper = styled.div`
   margin-right: 174px;
 `;
 
-function MyPage() {
+function MyPage(props) {
+  const { nav } = props;
   const { user } = useUser();
   const [tier, setTier] = useState('');
   const [posts, setPosts] = useState([]);
@@ -262,12 +263,114 @@ function MyPage() {
       }
     };
 
+    const fetchScrapPosts = async () => {
+      try {
+        const accessToken = localStorage.getItem('accessToken');
+        const response = await fetch(`http://3.37.43.129/api/user/scraps`, {
+          method: 'GET',
+          headers: {
+            'Content-Type': 'application/json',
+            'Authorization': `Bearer ${accessToken}`,
+          },
+        });
+        if (!response.ok) {
+          throw new Error('Failed to fetch user scraps');
+        }
+        const data = await response.json();
+        console.log(data);
+        setPosts(data);
+      } catch (err) {
+        console.error(err);
+      }
+    };
+
+    const fetchComments = async () => {
+      try {
+        const accessToken = localStorage.getItem('accessToken');
+        const response = await fetch(`http://3.37.43.129/api/user/comments`, {
+          method: 'GET',
+          headers: {
+            'Content-Type': 'application/json',
+            'Authorization': `Bearer ${accessToken}`,
+          },
+        });
+        if (!response.ok) {
+          throw new Error('Failed to fetch user comments');
+        }
+        const data = await response.json();
+        console.log(data);
+      } catch (err) {
+        console.error(err);
+      }
+    };
+
     if (user) {
       fetchTiers();
-      fetchUserPosts(); // 사용자 정보가 있을 때만 글 목록을 가져옴
+      fetchUserPosts();
+      fetchScrapPosts();
+      fetchComments();
     }
   }, [user]);
 
+  const renderContent = () => {
+    switch (nav) {
+      case 'post':
+        return (
+          <Wrapper>
+            <PostWrapper>
+              <CategoryWrapper>
+                <Category />
+              </CategoryWrapper>
+              <PostList userId={tier.userId} posts={posts} pageType="mypage" />
+            </PostWrapper>
+          </Wrapper>
+        );
+      case 'comment':
+        return <Wrapper></Wrapper>;
+      case 'scrap':
+        return (
+          <Wrapper>
+            <PostWrapper>
+              <CategoryWrapper>
+                <Category />
+              </CategoryWrapper>
+              <PostList userId={tier.userId} posts={posts} pageType="mypage" />
+            </PostWrapper>
+          </Wrapper>
+        );
+      default:
+        return (
+          <Wrapper>
+            <TierWrapper>
+              {user && (
+                <>
+                  <TierTitle color={TierTitleColors[tier.tier] || '#30180d'}>
+                    {TierNames[tier.tier] || 'Unknown Tier'}
+                  </TierTitle>
+                  <TierScore color={TierTitleColors[tier.tier] || '#30180d'}>
+                    {tier.tier}
+                  </TierScore>
+                  <TierBar>
+                    <TierScoreBar
+                      width={`${(tier.tiers / 100) * 100}%`}
+                      color={TierBarColors[tier.tier] || '#30180d'}
+                    />
+                  </TierBar>
+                </>
+              )}
+            </TierWrapper>
+            <Wandubat userId={tier.userId} />
+            <PostWrapper>
+              <CategoryWrapper>
+                <Category />
+              </CategoryWrapper>
+              <PostList userId={tier.userId} posts={posts} pageType="mypage" />
+            </PostWrapper>
+          </Wrapper>
+        );
+    }
+  };
+
   return (
     <Container>
       <TitleBar />
@@ -296,33 +399,7 @@ function MyPage() {
         <MyPageBar />
       </MyPageBarWrapper>
 
-      <Wrapper>
-        <TierWrapper>
-          {user && (
-            <>
-              <TierTitle color={TierTitleColors[tier.tier] || '#30180d'}>
-                {TierNames[tier.tier] || 'Unknown Tier'}
-              </TierTitle>
-              <TierScore color={TierTitleColors[tier.tier] || '#30180d'}>
-                {tier.tier}
-              </TierScore>
-              <TierBar>
-                <TierScoreBar
-                  width={`${(tier.tiers / 100) * 100}%`}
-                  color={TierBarColors[tier.tier] || '#30180d'}
-                />
-              </TierBar>
-            </>
-          )}
-        </TierWrapper>
-        <Wandubat userId={tier.userId} />
-        <PostWrapper>
-          <CategoryWrapper>
-            <Category />
-          </CategoryWrapper>
-          <PostList userId={tier.userId} posts={posts} pageType="mypage" />
-        </PostWrapper>
-      </Wrapper>
+      {renderContent()}
     </Container>
   );
 }
diff --git a/src/routes/Router.jsx b/src/routes/Router.jsx
index 13ac6d3..49a58ed 100644
--- a/src/routes/Router.jsx
+++ b/src/routes/Router.jsx
@@ -11,7 +11,10 @@ function Router() {
     <BrowserRouter>
       <Routes>
         <Route path="/" element={<MainPage posttype="recent" />} />
-        <Route path="/mypage" element={<MyPage />} />
+        <Route path="/mypage/main" element={<MyPage nav="root" />} />
+        <Route path="/mypage/post" element={<MyPage nav="post" />} />
+        <Route path="/mypage/scrap" element={<MyPage nav="scrap" />} />
+        <Route path="/mypage/comment" element={<MyPage nav="comment" />} />
         <Route
           path="/mypage/follower"
           element={<FollowListPage title="follower" />}

From 66e0f0b3732007c2db5a547f6142cacc17594782 Mon Sep 17 00:00:00 2001
From: zziglet <a01023701973@gmail.com>
Date: Thu, 5 Sep 2024 20:33:10 +0900
Subject: [PATCH 6/8] =?UTF-8?q?fix=20:=20=EB=A1=9C=EA=B7=B8=EC=95=84?=
 =?UTF-8?q?=EC=9B=83=20=EC=8B=9C=20title=20bar=20=EB=B3=80=EA=B2=BD=20(#12?=
 =?UTF-8?q?)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

로그아웃 시 title bar 상태가 변경되지 않는 것을 수정했습니다.
---
 src/components/bars/TitleBar.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/bars/TitleBar.jsx b/src/components/bars/TitleBar.jsx
index 1a61543..022e6cd 100644
--- a/src/components/bars/TitleBar.jsx
+++ b/src/components/bars/TitleBar.jsx
@@ -80,7 +80,7 @@ const MenuItem = styled.div`
 `;
 
 function TitleBar(props) {
-  const { user, isLoggedIn, setUser } = useUser();
+  const { user, isLoggedIn, setUser, setIsLoggedIn } = useUser();
   const [isProfileMenuOpen, setIsProfileMenuOpen] = useState(false);
   const [isDMModalOpen, setIsDMModalOpen] = useState(false);
   const [isLoginModalOpen, setIsLoginModalOpen] = useState(false); // 로그인 모달 상태
@@ -114,7 +114,7 @@ function TitleBar(props) {
 
       // 사용자 상태를 null로 설정
       setUser(null);
-
+      setIsLoggedIn(false);
       // 홈 페이지로 리디렉션
       nav('/');
     } catch (error) {

From c003b4ad2b8c7de9addab4aeb160783ba7aedd8e Mon Sep 17 00:00:00 2001
From: zziglet <a01023701973@gmail.com>
Date: Thu, 5 Sep 2024 20:38:30 +0900
Subject: [PATCH 7/8] =?UTF-8?q?fix=20:=20user=20=EC=A0=95=EB=B3=B4=20?=
 =?UTF-8?q?=EC=A0=80=EC=9E=A5=20=EC=88=98=EC=A0=95=20(#12)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

user 정보가 userContext에 저장되도록 수정했습니다.
---
 src/pages/LoginAlertPage.jsx | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/src/pages/LoginAlertPage.jsx b/src/pages/LoginAlertPage.jsx
index 9dfe2e7..03313c4 100644
--- a/src/pages/LoginAlertPage.jsx
+++ b/src/pages/LoginAlertPage.jsx
@@ -92,6 +92,23 @@ const LoginAlertPage = ({ isOpen, onClose }) => {
 
         // JWT 토큰을 로컬 스토리지에 저장
         localStorage.setItem('accessToken', token);
+
+        const userResponse = await fetch('http://3.37.43.129/api/user', {
+          method: 'GET',
+          headers: {
+            Authorization: `Bearer ${token}`, // access token을 Authorization 헤더에 추가
+          },
+        });
+
+        if (!userResponse.ok) {
+          throw new Error('Failed to retrieve user information');
+        }
+
+        const userData = await userResponse.json();
+        console.log(userData);
+
+        // 사용자 정보를 상태에 저장
+        setUser(userData);
         setIsLoggedIn(true);
         // 사용자 대시보드로 리디렉션
         navigate('/');

From b06b244c2d95be91b083d266bcd93a8653de0359 Mon Sep 17 00:00:00 2001
From: zziglet <jjw04033@konkuk.ac.kr>
Date: Tue, 17 Sep 2024 18:59:22 +0900
Subject: [PATCH 8/8] =?UTF-8?q?fix=20:=20api=20url=20=EC=88=98=EC=A0=95=20?=
 =?UTF-8?q?(#12)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

api 수정으로 인해 fetch요청 url 수정하였습니다.
---
 GapLog-Client        |  1 +
 src/pages/MyPage.jsx | 17 +++++++++--------
 2 files changed, 10 insertions(+), 8 deletions(-)
 create mode 160000 GapLog-Client

diff --git a/GapLog-Client b/GapLog-Client
new file mode 160000
index 0000000..c003b4a
--- /dev/null
+++ b/GapLog-Client
@@ -0,0 +1 @@
+Subproject commit c003b4ad2b8c7de9addab4aeb160783ba7aedd8e
diff --git a/src/pages/MyPage.jsx b/src/pages/MyPage.jsx
index a1f1b4c..2d9a063 100644
--- a/src/pages/MyPage.jsx
+++ b/src/pages/MyPage.jsx
@@ -265,14 +265,15 @@ function MyPage(props) {
 
     const fetchScrapPosts = async () => {
       try {
-        const accessToken = localStorage.getItem('accessToken');
-        const response = await fetch(`http://3.37.43.129/api/user/scraps`, {
-          method: 'GET',
-          headers: {
-            'Content-Type': 'application/json',
-            'Authorization': `Bearer ${accessToken}`,
-          },
-        });
+        const response = await fetch(
+          `http://3.37.43.129/api/user/${user.userId}/scraps`,
+          {
+            method: 'GET',
+            headers: {
+              'Content-Type': 'application/json',
+            },
+          }
+        );
         if (!response.ok) {
           throw new Error('Failed to fetch user scraps');
         }