refactor: 모아보기 기능 비회원도 가능하도록 수정

woowacourse-teams · Sep 27, 2023 · 7924374 · 7924374
1 parent 0c5bf0d
commit 7924374
Show file tree

Hide file tree

Showing 8 changed files with 199 additions and 89 deletions.
diff --git a/frontend/src/components/AddSeeTogether/index.tsx b/frontend/src/components/AddSeeTogether/index.tsx
@@ -12,18 +12,22 @@ interface AddSeeTogetherProps {
   id: number;
   children: React.ReactNode;
   getTopicsFromServer: () => void;
+  onClickAtlas: () => void;
 }
 
 const AddSeeTogether = ({
   isInAtlas,
   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,17 +61,30 @@ 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 {
       showToast('error', '로그인 후 사용해주세요.');
     }
   };
 
+  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
@@ -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
@@ -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
@@ -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}