[FE] refactor/#450 모아보기 기능 비회원도 가능하도록 수정

frontend/src/components/AddSeeTogether/index.tsx

@@ -12,18 +12,22 @@ interface AddSeeTogetherProps {
   id: number;
   children: React.ReactNode;
   getTopicsFromServer: () => void;
+  onClickAtlas: () => boolean;
 }
 
 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,36 @@ 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();
+
+    const isChangeAtlas = onClickAtlas();
+
+    if (isChangeAtlas) {
+      if (seeTogetherTopics?.includes(id))
+        setSeeTogetherTopics(
+          seeTogetherTopics.filter((topicId) => topicId !== id),
+        );
+      else setSeeTogetherTopics((prev) => [...prev, id]);
+    }
+  };
+
+  if (accessToken === null) {
+    return <Wrapper onClick={onChangeIsInAtlas}>{children}</Wrapper>;
+  }
+
   return (
     <Wrapper onClick={isInAtlas ? deleteSeeTogether : addSeeTogetherList}>
       {children}

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',

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';
@@ -18,6 +18,7 @@ import AddFavorite from '../AddFavorite';
 import { TopicCardProps } from '../../types/Topic';
 import useKeyDown from '../../hooks/useKeyDown';
 import { ModalContext } from '../../context/ModalContext';
+import useToast from '../../hooks/useToast';
 
 interface OnClickDesignatedProps {
   topicId: number;
@@ -47,6 +48,9 @@ const TopicCard = ({
   const { routePage } = useNavigator();
   const { closeModal } = useContext(ModalContext);
   const { elementRef, onElementKeyDown } = useKeyDown<HTMLLIElement>();
+  const [isInNonMemberAtlas, setIsInNonMemberAtlas] =
+    useState<boolean>(isInAtlas);
+  const { showToast } = useToast();
 
   const goToSelectedTopic = () => {
     routePage(`/topics/${id}`, [id]);
@@ -60,6 +64,15 @@ const TopicCard = ({
     closeModal('newPin');
   };
 
+  const onClickIsInAtlas = () => {
+    setIsInNonMemberAtlas(!isInNonMemberAtlas);
+    if (!isInNonMemberAtlas) {
+      showToast('info', '모아보기에 추가했습니다.');
+      return true;
+    }
+    showToast('info', '해당 지도를 모아보기에서 제외했습니다.');
+    return true;
+  };
   return (
     <Wrapper
       data-cy="topic-card"
@@ -139,10 +152,15 @@ const TopicCard = ({
             <ButtonWrapper>
               <AddSeeTogether
                 isInAtlas={isInAtlas}
+                onClickAtlas={onClickIsInAtlas}
                 id={id}
                 getTopicsFromServer={getTopicsFromServer}
               >
-                {isInAtlas ? <SeeTogetherSVG /> : <SeeTogetherNotFilledSVG />}
+                {isInNonMemberAtlas ? (
+                  <SeeTogetherSVG />
+                ) : (
+                  <SeeTogetherNotFilledSVG />
+                )}
               </AddSeeTogether>
               <AddFavorite
                 isBookmarked={isBookmarked}

frontend/src/components/TopicInfo/index.tsx

@@ -63,6 +63,15 @@ const TopicInfo = ({
       showToast('error', '토픽 링크를 복사하는데 실패했습니다.');
     }
   };
+
+  const onChangeIsInAtlas = () => {
+    showToast('warning', '비회원은 홈에서만 모아보기에 담을 수 있습니다.');
+    return false;
+  };
+
+  useEffect(() => {
+    if (!isUpdate) setTopicsFromServer();
+  }, [isUpdate]);
 
   if (isUpdate) {
     return (
@@ -148,6 +157,7 @@ const TopicInfo = ({
       <ButtonsWrapper>
         <AddSeeTogether
           isInAtlas={isInAtlas}
+          onClickAtlas={onChangeIsInAtlas}
           id={Number(topicId)}
           getTopicsFromServer={setTopicsFromServer}
         >

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

frontend/src/hooks/useNavigator.ts

@@ -1,12 +1,15 @@
 import { useContext } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { ModalContext } from '../context/ModalContext';
+import { SeeTogetherContext } from '../context/SeeTogetherContext';
 
 const useNavigator = () => {
   const navigator = useNavigate();
 
   const { openModal, closeModal } = useContext(ModalContext);
   const { topicId } = useParams();
+  const { seeTogetherTopics } = useContext(SeeTogetherContext);
+
   const routePage = (url: string | -1, value?: string | number | number[]) => {
     if (typeof url === 'string') navigator(url, { state: value });
     if (url === -1) navigator(url);
@@ -15,7 +18,12 @@ const useNavigator = () => {
   return {
     routingHandlers: {
       home: () => routePage('/'),
-      seeTogether: () => routePage('/see-together'),
+      seeTogether: () =>
+        routePage(
+          `/topics/${
+            seeTogetherTopics?.length === 0 ? -1 : seeTogetherTopics?.join(',')
+          }`,
+        ),
       addMapOrPin: () => openModal('addMapOrPin'),
       favorite: () => routePage('/favorite'),
       profile: () => routePage('/my-page'),

frontend/src/pages/Home.tsx

@@ -8,6 +8,7 @@ import { Suspense, lazy, useContext, useEffect } from 'react';
 import { MarkerContext } from '../context/MarkerContext';
 import TopicCardContainerSkeleton from '../components/Skeletons/TopicListSkeleton';
 import { setFullScreenResponsive } from '../constants/responsive';
+import { SeeTogetherContext } from '../context/SeeTogetherContext';
 import SearchBar from '../components/SearchBar/SearchBar';
 
 const TopicListContainer = lazy(
@@ -18,13 +19,21 @@ const Home = () => {
   const { routingHandlers } = useNavigator();
   const { goToPopularTopics, goToLatestTopics, goToNearByMeTopics } =
     routingHandlers;
-
+  const { seeTogetherTopics, setSeeTogetherTopics } =
+    useContext(SeeTogetherContext);
   const { markers, removeMarkers, removeInfowindows } =
     useContext(MarkerContext);
+  const accessToken = localStorage.getItem('userToken');
 
   useSetLayoutWidth(FULLSCREEN);
   useSetNavbarHighlight('home');
 
+  useEffect(() => {
+    if (accessToken === null && seeTogetherTopics?.length !== 0) {
+      setSeeTogetherTopics([]);
+    }
+  }, []);
+
   useEffect(() => {
     if (markers && markers.length > 0) {
       removeMarkers();