From 7924374646b36be3ad2111f56c82adee4010eb7a Mon Sep 17 00:00:00 2001
From: GC-Park <kuyt3122@naver.com>
Date: Wed, 27 Sep 2023 17:36:33 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20=EB=AA=A8=EC=95=84=EB=B3=B4?=
 =?UTF-8?q?=EA=B8=B0=20=EA=B8=B0=EB=8A=A5=20=EB=B9=84=ED=9A=8C=EC=9B=90?=
 =?UTF-8?q?=EB=8F=84=20=EA=B0=80=EB=8A=A5=ED=95=98=EB=8F=84=EB=A1=9D=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/AddSeeTogether/index.tsx   |  22 +-
 frontend/src/components/Layout/Navbar.tsx     | 231 ++++++++++++------
 .../components/SeeTogetherCounter/index.tsx   |   2 +-
 frontend/src/components/TopicCard/index.tsx   |   9 +-
 frontend/src/components/TopicInfo/index.tsx   |   5 +
 frontend/src/context/SeeTogetherContext.tsx   |   8 +-
 frontend/src/pages/SelectedTopic.tsx          |   1 -
 frontend/src/router.tsx                       |  10 -
 8 files changed, 199 insertions(+), 89 deletions(-)

diff --git a/frontend/src/components/AddSeeTogether/index.tsx b/frontend/src/components/AddSeeTogether/index.tsx
index 9acfed43..ca60407d 100644
--- a/frontend/src/components/AddSeeTogether/index.tsx
+++ b/frontend/src/components/AddSeeTogether/index.tsx
@@ -12,6 +12,7 @@ interface AddSeeTogetherProps {
   id: number;
   children: React.ReactNode;
   getTopicsFromServer: () => void;
+  onClickAtlas: () => void;
 }
 
 const AddSeeTogether = ({
@@ -19,11 +20,14 @@ const AddSeeTogether = ({
   id,
   children,
   getTopicsFromServer,
+  onClickAtlas,
 }: AddSeeTogetherProps) => {
   const { showToast } = useToast();
   const { seeTogetherTopics, setSeeTogetherTopics } =
     useContext(SeeTogetherContext);
 
+  const accessToken = localStorage.getItem('userToken');
+
   const addSeeTogetherList = async (e: React.MouseEvent<HTMLDivElement>) => {
     e.stopPropagation();
 
@@ -37,10 +41,11 @@ const AddSeeTogether = ({
 
       const topics = await getApi<TopicCardProps[]>('/members/my/atlas');
 
-      setSeeTogetherTopics(topics);
+      setSeeTogetherTopics(topics.map((topic) => topic.id));
 
       // TODO: 모아보기 페이지에서는 GET /members/my/atlas 두 번 됨
       getTopicsFromServer();
+      onClickAtlas();
 
       showToast('info', '모아보기에 추가했습니다.');
     } catch {
@@ -56,10 +61,11 @@ const AddSeeTogether = ({
 
       const topics = await getApi<TopicCardProps[]>('/members/my/atlas');
 
-      setSeeTogetherTopics(topics);
+      setSeeTogetherTopics(topics.map((topic) => topic.id));
 
       // TODO: 모아보기 페이지에서는 GET /members/my/atlas 두 번 됨
       getTopicsFromServer();
+      onClickAtlas();
 
       showToast('info', '해당 지도를 모아보기에서 제외했습니다.');
     } catch {
@@ -67,6 +73,18 @@ const AddSeeTogether = ({
     }
   };
 
+  const onChangeIsInAtlas = (e: React.MouseEvent<HTMLDivElement>) => {
+    e.stopPropagation();
+
+    setSeeTogetherTopics((prev) => [...prev, id]);
+
+    onClickAtlas();
+  };
+
+  if (accessToken === null) {
+    return <Wrapper onClick={onChangeIsInAtlas}>{children}</Wrapper>;
+  }
+
   return (
     <Wrapper onClick={isInAtlas ? deleteSeeTogether : addSeeTogetherList}>
       {children}
diff --git a/frontend/src/components/Layout/Navbar.tsx b/frontend/src/components/Layout/Navbar.tsx
index 085afe28..5ec0d425 100644
--- a/frontend/src/components/Layout/Navbar.tsx
+++ b/frontend/src/components/Layout/Navbar.tsx
@@ -4,6 +4,7 @@ import useNavigator from '../../hooks/useNavigator';
 import Flex from '../common/Flex';
 import Button from '../common/Button';
 import Space from '../common/Space';
+import Text from '../common/Text';
 import Home from '../../assets/nav_home.svg';
 import SeeTogether from '../../assets/nav_seeTogether.svg';
 import Favorite from '../../assets/nav_favorite.svg';
@@ -15,74 +16,155 @@ import FocusFavorite from '../../assets/nav_favorite_focus.svg';
 import FocusAddMapOrPin from '../../assets/nav_addMapOrPin_focus.svg';
 import FocusProfile from '../../assets/nav_profile_focus.svg';
 import Modal from '../Modal';
-import {
-  NavbarHighlightKeys,
-  NavbarHighlightsContext,
-} from '../../context/NavbarHighlightsContext';
-import NavbarItem from './NavbarItem';
+import { ModalContext } from '../../context/ModalContext';
+import { NavbarHighlightsContext } from '../../context/NavbarHighlightsContext';
+import { useParams } from 'react-router-dom';
+import SeeTogetherCounter from '../SeeTogetherCounter';
+import useKeyDown from '../../hooks/useKeyDown';
+import { SeeTogetherContext } from '../../context/SeeTogetherContext';
 
 interface NavBarProps {
   $layoutWidth: '100vw' | '372px';
 }
 
-interface NavbarItemProps {
-  key: NavbarHighlightKeys;
-  label: string;
-  icon: React.FunctionComponent;
-  focusIcon: React.FunctionComponent;
-}
-
-const NAV_ITEMS: NavbarItemProps[] = [
-  { key: 'home', label: '홈', icon: Home, focusIcon: FocusHome },
-  {
-    key: 'seeTogether',
-    label: '모아보기',
-    icon: SeeTogether,
-    focusIcon: FocusSeeTogether,
-  },
-  {
-    key: 'addMapOrPin',
-    label: '추가하기',
-    icon: AddMapOrPin,
-    focusIcon: FocusAddMapOrPin,
-  },
-  {
-    key: 'favorite',
-    label: '즐겨찾기',
-    icon: Favorite,
-    focusIcon: FocusFavorite,
-  },
-  {
-    key: 'profile',
-    label: '내 정보',
-    icon: Profile,
-    focusIcon: FocusProfile,
-  },
-];
-
 const Navbar = ({ $layoutWidth }: NavBarProps) => {
-  const { routingHandlers } = useNavigator();
+  const { routePage } = useNavigator();
+  const { topicId } = useParams();
+  const { openModal, closeModal } = useContext(ModalContext);
   const { navbarHighlights } = useContext(NavbarHighlightsContext);
+  const { elementRef: firstElement, onElementKeyDown: firstKeyDown } =
+    useKeyDown<HTMLDivElement>();
+  const { elementRef: secondElement, onElementKeyDown: secondKeyDown } =
+    useKeyDown<HTMLDivElement>();
+  const { elementRef: thirdElement, onElementKeyDown: thirdKeyDown } =
+    useKeyDown<HTMLDivElement>();
+  const { elementRef: fourElement, onElementKeyDown: fourKeyDown } =
+    useKeyDown<HTMLDivElement>();
+  const { elementRef: FifthElement, onElementKeyDown: FifthKeyDown } =
+    useKeyDown<HTMLDivElement>();
+    const { seeTogetherTopics } =
+    useContext(SeeTogetherContext);
+
+  const goToHome = () => {
+    routePage('/');
+  };
+
+  const goToSeeTogether = () => {
+    routePage(`/topics/${seeTogetherTopics?.join(',')}`);
+  };
+
+  const onClickAddMapOrPin = () => {
+    openModal('addMapOrPin');
+  };
+
+  const goToFavorite = () => {
+    routePage('/favorite');
+  };
+
+  const goToProfile = () => {
+    routePage('/my-page');
+  };
+
+  const goToNewTopic = () => {
+    routePage('/new-topic');
+    closeModal('addMapOrPin');
+  };
+
+  const goToNewPin = () => {
+    routePage('/new-pin', topicId);
+    closeModal('addMapOrPin');
+  };
+
   return (
-    <>
-      <Wrapper
-        $isAddPage={navbarHighlights.addMapOrPin}
+    <Wrapper
+      $isAddPage={navbarHighlights.addMapOrPin}
+      $layoutWidth={$layoutWidth}
+    >
+      <IconWrapper
+        $layoutWidth={$layoutWidth}
+        onClick={goToHome}
+        tabIndex={10}
+        ref={firstElement}
+        onKeyDown={firstKeyDown}
+      >
+        {navbarHighlights.home ? <FocusHome /> : <Home />}
+        <Text
+          color={navbarHighlights.home ? 'primary' : 'darkGray'}
+          $fontSize="extraSmall"
+          $fontWeight="normal"
+        >
+          홈
+        </Text>
+      </IconWrapper>
+
+      <IconWrapper
+        $layoutWidth={$layoutWidth}
+        onClick={goToSeeTogether}
+        tabIndex={10}
+        ref={secondElement}
+        onKeyDown={secondKeyDown}
+      >
+        {navbarHighlights.seeTogether ? <FocusSeeTogether /> : <SeeTogether />}
+        <Text
+          color={navbarHighlights.seeTogether ? 'primary' : 'darkGray'}
+          $fontSize="extraSmall"
+          $fontWeight="normal"
+        >
+          모아보기
+        </Text>
+        <SeeTogetherCounter />
+      </IconWrapper>
+
+      <IconWrapper
+        $layoutWidth={$layoutWidth}
+        onClick={onClickAddMapOrPin}
+        tabIndex={10}
+        ref={thirdElement}
+        onKeyDown={thirdKeyDown}
+      >
+        {navbarHighlights.addMapOrPin ? <FocusAddMapOrPin /> : <AddMapOrPin />}
+        <Text
+          color={navbarHighlights.addMapOrPin ? 'primary' : 'darkGray'}
+          $fontSize="extraSmall"
+          $fontWeight="normal"
+        >
+          추가하기
+        </Text>
+      </IconWrapper>
+
+      <IconWrapper
         $layoutWidth={$layoutWidth}
+        onClick={goToFavorite}
+        tabIndex={11}
+        ref={fourElement}
+        onKeyDown={fourKeyDown}
       >
-        {NAV_ITEMS.map((item) => {
-          return (
-            <NavbarItem
-              key={item.key}
-              label={item.label}
-              icon={item.icon}
-              focusIcon={item.focusIcon}
-              isHighlighted={navbarHighlights[item.key]}
-              onClick={() => routingHandlers[item.key]()}
-              $layoutWidth={$layoutWidth}
-            />
-          );
-        })}
-      </Wrapper>
+        {navbarHighlights.favorite ? <FocusFavorite /> : <Favorite />}
+        <Text
+          color={navbarHighlights.favorite ? 'primary' : 'darkGray'}
+          $fontSize="extraSmall"
+          $fontWeight="normal"
+        >
+          즐겨찾기
+        </Text>
+      </IconWrapper>
+
+      <IconWrapper
+        $layoutWidth={$layoutWidth}
+        onClick={goToProfile}
+        tabIndex={11}
+        ref={FifthElement}
+        onKeyDown={FifthKeyDown}
+      >
+        {navbarHighlights.profile ? <FocusProfile /> : <Profile />}
+        <Text
+          color={navbarHighlights.profile ? 'primary' : 'darkGray'}
+          $fontSize="extraSmall"
+          $fontWeight="normal"
+        >
+          내 정보
+        </Text>
+      </IconWrapper>
 
       <Modal
         modalKey="addMapOrPin"
@@ -94,24 +176,16 @@ const Navbar = ({ $layoutWidth }: NavBarProps) => {
         left={$layoutWidth === '100vw' ? '' : `${372 / 2}px`}
       >
         <Flex $justifyContent="center" width="100%">
-          <RouteButton
-            variant="primary"
-            onClick={routingHandlers['newTopic']}
-            tabIndex={10}
-          >
+          <RouteButton variant="primary" onClick={goToNewTopic} tabIndex={10}>
             지도 추가하기
           </RouteButton>
           <Space size={4} />
-          <RouteButton
-            variant="primary"
-            onClick={routingHandlers['newPin']}
-            tabIndex={10}
-          >
+          <RouteButton variant="primary" onClick={goToNewPin} tabIndex={10}>
             핀 추가하기
           </RouteButton>
         </Flex>
       </Modal>
-    </>
+    </Wrapper>
   );
 };
 
@@ -141,6 +215,25 @@ const Wrapper = styled.nav<{
   }
 `;
 
+const IconWrapper = styled.div<{ $layoutWidth: '100vw' | '372px' }>`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 52px;
+  cursor: pointer;
+  margin-right: ${({ $layoutWidth }) =>
+    $layoutWidth === '100vw' ? '48px' : '0'};
+
+  &:last-of-type {
+    margin-right: 0;
+  }
+
+  @media (max-width: 1076px) {
+    margin-right: 0;
+  }
+`;
+
 const RouteButton = styled(Button)`
   box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.5);
 `;
diff --git a/frontend/src/components/SeeTogetherCounter/index.tsx b/frontend/src/components/SeeTogetherCounter/index.tsx
index 4c372916..dec3fc93 100644
--- a/frontend/src/components/SeeTogetherCounter/index.tsx
+++ b/frontend/src/components/SeeTogetherCounter/index.tsx
@@ -16,7 +16,7 @@ const SeeTogetherCounter = () => {
       if (!userToken) return;
 
       const topics = await getApi<TopicCardProps[]>('/members/my/atlas');
-      setSeeTogetherTopics(topics);
+      setSeeTogetherTopics(topics.map((topic) => topic.id));
     } catch {
       showToast(
         'error',
diff --git a/frontend/src/components/TopicCard/index.tsx b/frontend/src/components/TopicCard/index.tsx
index 91f54434..6dc72af9 100644
--- a/frontend/src/components/TopicCard/index.tsx
+++ b/frontend/src/components/TopicCard/index.tsx
@@ -3,7 +3,7 @@ import Text from '../common/Text';
 import useNavigator from '../../hooks/useNavigator';
 import Box from '../common/Box';
 import Image from '../common/Image';
-import { SyntheticEvent, useContext } from 'react';
+import { SyntheticEvent, useContext, useState } from 'react';
 import Space from '../common/Space';
 import Flex from '../common/Flex';
 import FavoriteSVG from '../../assets/favoriteBtn_filled.svg';
@@ -47,6 +47,7 @@ const TopicCard = ({
   const { routePage } = useNavigator();
   const { closeModal } = useContext(ModalContext);
   const { elementRef, onElementKeyDown } = useKeyDown<HTMLLIElement>();
+  const [atlas, setAtlas] = useState<boolean>(isInAtlas);
 
   const goToSelectedTopic = () => {
     routePage(`/topics/${id}`, [id]);
@@ -60,6 +61,9 @@ const TopicCard = ({
     closeModal('newPin');
   };
 
+  const onChangeIsInAtlas = () => {
+    setAtlas(!atlas);
+  };
   return (
     <Wrapper
       data-cy="topic-card"
@@ -139,10 +143,11 @@ const TopicCard = ({
             <ButtonWrapper>
               <AddSeeTogether
                 isInAtlas={isInAtlas}
+                onClickAtlas={onChangeIsInAtlas}
                 id={id}
                 getTopicsFromServer={getTopicsFromServer}
               >
-                {isInAtlas ? <SeeTogetherSVG /> : <SeeTogetherNotFilledSVG />}
+                {atlas ? <SeeTogetherSVG /> : <SeeTogetherNotFilledSVG />}
               </AddSeeTogether>
               <AddFavorite
                 isBookmarked={isBookmarked}
diff --git a/frontend/src/components/TopicInfo/index.tsx b/frontend/src/components/TopicInfo/index.tsx
index 4337205c..b1284744 100644
--- a/frontend/src/components/TopicInfo/index.tsx
+++ b/frontend/src/components/TopicInfo/index.tsx
@@ -66,6 +66,10 @@ const TopicInfo = ({
     }
   };
 
+  const onChangeIsInAtlas = () => {
+    isInAtlas = !isInAtlas;
+  }
+
   useEffect(() => {
     if (!isUpdate) setTopicsFromServer();
   }, [isUpdate]);
@@ -153,6 +157,7 @@ const TopicInfo = ({
       <ButtonsWrapper>
         <AddSeeTogether
           isInAtlas={isInAtlas}
+          onClickAtlas = {onChangeIsInAtlas}
           id={Number(topicId.split(',')[idx])}
           getTopicsFromServer={setTopicsFromServer}
         >
diff --git a/frontend/src/context/SeeTogetherContext.tsx b/frontend/src/context/SeeTogetherContext.tsx
index 81af69af..ed9d57fb 100644
--- a/frontend/src/context/SeeTogetherContext.tsx
+++ b/frontend/src/context/SeeTogetherContext.tsx
@@ -8,8 +8,8 @@ import {
 import { TopicCardProps } from '../types/Topic';
 
 interface SeeTogetherContextProps {
-  seeTogetherTopics: TopicCardProps[] | null;
-  setSeeTogetherTopics: Dispatch<SetStateAction<TopicCardProps[] | null>>;
+  seeTogetherTopics: number[] | null;
+  setSeeTogetherTopics: Dispatch<SetStateAction<number[] | []>>;
 }
 
 interface SeeTogetherProviderProps {
@@ -23,8 +23,8 @@ export const SeeTogetherContext = createContext<SeeTogetherContextProps>({
 
 const SeeTogetherProvider = ({ children }: SeeTogetherProviderProps) => {
   const [seeTogetherTopics, setSeeTogetherTopics] = useState<
-    TopicCardProps[] | null
-  >(null);
+    number[] | []
+  >([]);
 
   return (
     <SeeTogetherContext.Provider
diff --git a/frontend/src/pages/SelectedTopic.tsx b/frontend/src/pages/SelectedTopic.tsx
index c39a7a2f..9321a7f5 100644
--- a/frontend/src/pages/SelectedTopic.tsx
+++ b/frontend/src/pages/SelectedTopic.tsx
@@ -146,7 +146,6 @@ const SelectedTopic = () => {
           <PinDetailWrapper className={isOpen ? '' : 'collapsedPinDetail'}>
             <PinDetail
               width={width}
-              topicId={topicId}
               pinId={selectedPinId}
               isEditPinDetail={isEditPinDetail}
               setIsEditPinDetail={setIsEditPinDetail}
diff --git a/frontend/src/router.tsx b/frontend/src/router.tsx
index 7f5833bd..a4e2dbd9 100644
--- a/frontend/src/router.tsx
+++ b/frontend/src/router.tsx
@@ -5,7 +5,6 @@ import RootPage from './pages/RootPage';
 import { ReactNode } from 'react';
 import AuthLayout from './components/Layout/AuthLayout';
 import NotFound from './pages/NotFound';
-
 const SelectedTopic = lazy(() => import('./pages/SelectedTopic'));
 const NewPin = lazy(() => import('./pages/NewPin'));
 const NewTopic = lazy(() => import('./pages/NewTopic'));
@@ -102,15 +101,6 @@ const routes: routeElement[] = [
         ),
         withAuth: false,
       },
-      {
-        path: 'see-together',
-        element: (
-          <SuspenseComp>
-            <SeeTogetherTopics />
-          </SuspenseComp>
-        ),
-        withAuth: true,
-      },
       {
         path: 'favorite',
         element: (