fix: 버그 일괄 수정 (#320)

woowacourse-teams · Aug 16, 2023 · 830087e · 830087e
1 parent f892740
commit 830087e
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 23 deletions.
diff --git 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
@@ -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
@@ -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 = () => {