From 830087e4e53069b723aae38faef998d4518e5e29 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=84=B8=EB=AF=BC?=
 <89172499+semnil5202@users.noreply.github.com>
Date: Wed, 16 Aug 2023 20:37:13 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EB=B2=84=EA=B7=B8=20=EC=9D=BC=EA=B4=84?=
 =?UTF-8?q?=20=EC=88=98=EC=A0=95=20(#320)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Layout/index.tsx      | 24 +++++++------------
 .../MyInfoContainer/MyInfoList/index.tsx      | 21 +++++++++-------
 frontend/src/pages/Profile.tsx                |  3 +++
 3 files changed, 25 insertions(+), 23 deletions(-)

diff --git a/frontend/src/components/Layout/index.tsx b/frontend/src/components/Layout/index.tsx
index 815f9dd5..7b691b79 100644
--- a/frontend/src/components/Layout/index.tsx
+++ b/frontend/src/components/Layout/index.tsx
@@ -32,7 +32,6 @@ const Layout = ({ children }: LayoutProps) => {
   const mapContainer = useRef(null);
   const { width } = useContext(LayoutWidthContext);
   const isLogined = localStorage.getItem('userToken');
-  const user = JSON.parse(localStorage.getItem('user') || '');
 
   const loginButtonClick = () => {
     window.location.href = 'https://mapbefine.kro.kr/api/oauth/kakao';
@@ -60,25 +59,20 @@ const Layout = ({ children }: LayoutProps) => {
               <SeeTogetherProvider>
                 <TagProvider>
                   <Flex height="100vh" width="100vw" overflow="hidden">
-                    <LayoutFlex                      
+                    <LayoutFlex
                       $flexDirection="column"
                       $minWidth={width}
                       height="100vh"
                       $backgroundColor="white"
                     >
-                    <Flex
-                      $justifyContent="space-between"
-                      padding="20px 20px 0 20px"
-                    >
-                      <Logo />
-                      {isLogined ? (
-                        <MyInfoImg src={user.imageUrl} />
-                      ) : (
-                        <InfoDefalutImg onClick={loginButtonClick} />
-                      )}
-                    </Flex>
-                    <Flex
-                      height="calc(100vh - 40px)"
+                      <Flex
+                        $justifyContent="space-between"
+                        padding="20px 20px 0 20px"
+                      >
+                        <Logo />
+                      </Flex>
+                      <Flex
+                        height="calc(100vh - 40px)"
                         $flexDirection="column"
                         overflow="auto"
                         padding="0 20px 20px 20px"
diff --git a/frontend/src/components/MyInfoContainer/MyInfoList/index.tsx b/frontend/src/components/MyInfoContainer/MyInfoList/index.tsx
index f69c2d1b..95a7d395 100644
--- a/frontend/src/components/MyInfoContainer/MyInfoList/index.tsx
+++ b/frontend/src/components/MyInfoContainer/MyInfoList/index.tsx
@@ -1,15 +1,15 @@
 import { Fragment, useEffect, useState } from 'react';
 import { styled } from 'styled-components';
 import { getApi } from '../../../apis/getApi';
-import { MyInfoPinType, MyInfoTopicType } from '../../../types/MyInfo';
 import PinCard from '../../PinCard';
 import TopicCard from '../../TopicCard';
+import { TopicType } from '../../../types/Topic';
 
 const MyInfoList = () => {
-  const [myInfoTopics, setMyInfoTopics] = useState<MyInfoTopicType[]>([]);
+  const [myInfoTopics, setMyInfoTopics] = useState<TopicType[]>([]);
 
   const getMyInfoListFromServer = async () => {
-    const serverMyInfoTopics = await getApi<MyInfoTopicType[]>(
+    const serverMyInfoTopics = await getApi<TopicType[]>(
       'default',
       '/members/my/topics',
     );
@@ -28,11 +28,16 @@ const MyInfoList = () => {
         return (
           <Fragment key={topic.id}>
             <TopicCard
-              topicId={topic.id}
-              topicImage={topic.image}
-              topicTitle={topic.name}
-              topicUpdatedAt={topic.updatedAt}
-              topicPinCount={topic.pinCount}
+              id={topic.id}
+              image={topic.image}
+              name={topic.name}
+              creator={topic.creator}
+              updatedAt={topic.updatedAt}
+              pinCount={topic.pinCount}
+              bookmarkCount={topic.bookmarkCount}
+              isInAtlas={topic.isInAtlas}
+              isBookmarked={topic.isBookmarked}
+              setTopicsFromServer={getMyInfoListFromServer}
             />
           </Fragment>
         );
diff --git a/frontend/src/pages/Profile.tsx b/frontend/src/pages/Profile.tsx
index e8f2a5c8..275218d9 100644
--- a/frontend/src/pages/Profile.tsx
+++ b/frontend/src/pages/Profile.tsx
@@ -7,9 +7,12 @@ import MyInfo from '../components/MyInfo';
 import MyInfoContainer from '../components/MyInfoContainer';
 import useNavigator from '../hooks/useNavigator';
 import useSetNavbarHighlight from '../hooks/useSetNavbarHighlight';
+import useSetLayoutWidth from '../hooks/useSetLayoutWidth';
+import { FULLSCREEN } from '../constants';
 
 const Profile = () => {
   const { routePage } = useNavigator();
+  const { width: _ } = useSetLayoutWidth(FULLSCREEN);
   const { navbarHighlights: __ } = useSetNavbarHighlight('profile');
 
   const goToPopularTopics = () => {