[FE] Refactor/#593 모아보기와 단일조회페이지 분리 및 리팩토링

frontend/src/components/AddSeeTogether/index.tsx

@@ -5,10 +5,12 @@ import { deleteApi } from '../../apis/deleteApi';
 import { getApi } from '../../apis/getApi';
 import { postApi } from '../../apis/postApi';
 import { SeeTogetherContext } from '../../context/SeeTogetherContext';
+import useNavigator from '../../hooks/useNavigator';
 import useToast from '../../hooks/useToast';
 import { TopicCardProps } from '../../types/Topic';
 
 interface AddSeeTogetherProps {
+  parentType: 'topicCard' | 'topicInfo';
   isInAtlas: boolean;
   id: number;
   children: React.ReactNode;
@@ -17,6 +19,7 @@ interface AddSeeTogetherProps {
 }
 
 function AddSeeTogether({
+  parentType,
   isInAtlas,
   id,
   children,
@@ -26,6 +29,7 @@ function AddSeeTogether({
   const { showToast } = useToast();
   const { seeTogetherTopics, setSeeTogetherTopics } =
     useContext(SeeTogetherContext);
+  const { routePage } = useNavigator();
 
   const accessToken = localStorage.getItem('userToken');
 
@@ -34,7 +38,7 @@ function AddSeeTogether({
 
     try {
       if (seeTogetherTopics && seeTogetherTopics.length === 7) {
-        showToast('warning', '모아보기는 7개까지만 가능합니다.');
+        showToast('error', '모아보기는 7개까지만 가능합니다.');
         return;
       }
 
@@ -69,11 +73,22 @@ function AddSeeTogether({
       onClickAtlas();
 
       showToast('info', '해당 지도를 모아보기에서 제외했습니다.');
+
+      if (parentType === 'topicInfo') routePageAfterSuccessToDelete(topics);
     } catch {
       showToast('error', '로그인 후 사용해주세요.');
     }
   };
 
+  const routePageAfterSuccessToDelete = (topics: TopicCardProps[]) => {
+    if (topics.length === 0) {
+      routePage(`/`);
+      return;
+    }
+
+    routePage(`/see-together/${topics.map((topic) => topic.id).join(',')}`);
+  };
+
   const onChangeIsInAtlas = (e: React.MouseEvent<HTMLDivElement>) => {
     e.stopPropagation();
 

frontend/src/components/Banner/index.tsx

@@ -28,6 +28,7 @@ export default function Banner() {
       height={400}
       $simpleTab
       $tabBoxPosition="bottom"
+      $isNotTabBoxShow
       swipeable
       swiper
       autoplay

frontend/src/components/PinPreview/index.tsx

@@ -1,4 +1,5 @@
 import { KeyboardEvent, useContext, useEffect, useRef, useState } from 'react';
+import { useLocation } from 'react-router-dom';
 import { styled } from 'styled-components';
 
 import { TagContext } from '../../context/TagContext';
@@ -11,12 +12,13 @@ import Text from '../common/Text';
 
 export interface PinPreviewProps {
   idx: number;
+  pinId: number;
+  topicId: string;
+  urlTopicId: string;
   pinTitle: string;
   pinLocation: string;
   pinInformation: string;
   setSelectedPinId: React.Dispatch<React.SetStateAction<number | null>>;
-  pinId: number;
-  topicId: string;
   setIsEditPinDetail: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
@@ -28,8 +30,10 @@ function PinPreview({
   setSelectedPinId,
   pinId,
   topicId,
+  urlTopicId,
   setIsEditPinDetail,
 }: PinPreviewProps) {
+  const { pathname } = useLocation();
   const { routePage } = useNavigator();
   const { tags, setTags } = useContext(TagContext);
   const [announceText, setAnnounceText] = useState<string>('토픽 핀 선택');
@@ -63,7 +67,12 @@ function PinPreview({
     setSelectedPinId(pinId);
     setIsEditPinDetail(false);
 
-    routePage(`/topics/${topicId}?pinDetail=${pinId}`);
+    if (pathname.split('/')[1] === 'topics') {
+      routePage(`/topics/${urlTopicId}?pinDetail=${pinId}`);
+      return;
+    }
+
+    routePage(`/see-together/${urlTopicId}?pinDetail=${pinId}`);
   };
 
   const onInputKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {

frontend/src/components/PinsOfTopic/index.tsx

@@ -5,6 +5,7 @@ import PinPreview from '../PinPreview';
 import TopicInfo from '../TopicInfo';
 
 interface PinsOfTopicProps {
+  urlTopicId?: string;
   topicId: string;
   topicDetail: TopicDetailProps;
   setSelectedPinId: React.Dispatch<React.SetStateAction<number | null>>;
@@ -13,6 +14,7 @@ interface PinsOfTopicProps {
 }
 
 function PinsOfTopic({
+  urlTopicId,
   topicId,
   topicDetail,
   setSelectedPinId,
@@ -38,13 +40,14 @@ function PinsOfTopic({
       {topicDetail.pins.map((pin, idx) => (
         <li key={pin.id}>
           <PinPreview
+            urlTopicId={urlTopicId || topicId}
             idx={idx}
+            pinId={Number(pin.id)}
+            topicId={topicId}
             pinTitle={pin.name}
             pinLocation={pin.address}
             pinInformation={pin.description}
             setSelectedPinId={setSelectedPinId}
-            pinId={Number(pin.id)}
-            topicId={topicId}
             setIsEditPinDetail={setIsEditPinDetail}
           />
         </li>

frontend/src/components/TopicCard/index.tsx

@@ -154,6 +154,7 @@ function TopicCard({
           {cardType === 'default' && getTopicsFromServer && (
             <ButtonWrapper>
               <AddSeeTogether
+                parentType="topicCard"
                 isInAtlas={isInAtlas}
                 onClickAtlas={onClickIsInAtlas}
                 id={id}

frontend/src/components/TopicInfo/UpdatedTopicInfo.tsx

@@ -5,18 +5,18 @@ import useDelete from '../../apiHooks/useDelete';
 import useGet from '../../apiHooks/useGet';
 import usePost from '../../apiHooks/usePost';
 import usePut from '../../apiHooks/usePut';
+import { putApi } from '../../apis/putApi';
+import { DEFAULT_TOPIC_IMAGE } from '../../constants';
+import useCompressImage from '../../hooks/useCompressImage';
 import useFormValues from '../../hooks/useFormValues';
 import useToast from '../../hooks/useToast';
 import { TopicAuthorInfo } from '../../types/Topic';
 import Button from '../common/Button';
 import Flex from '../common/Flex';
+import Image from '../common/Image';
 import Space from '../common/Space';
-import InputContainer from '../InputContainer';
 import Text from '../common/Text';
-import useCompressImage from '../../hooks/useCompressImage';
-import Image from '../common/Image';
-import { DEFAULT_TOPIC_IMAGE } from '../../constants';
-import { putApi } from '../../apis/putApi';
+import InputContainer from '../InputContainer';
 
 interface UpdatedTopicInfoProp {
   id: number;
@@ -85,7 +85,7 @@ function UpdatedTopicInfo({
       //   await updateTopicPermissionMembers();
       // }
 
-      showToast('info', '지도를 수정하였습니다.');
+      showToast('info', `${name} 지도를 수정하였습니다.`);
       setIsUpdate(false);
       setTopicsFromServer();
     } catch {}
@@ -147,10 +147,15 @@ function UpdatedTopicInfo({
     const compressedFile = await compressImage(file);
     formData.append('image', compressedFile);
 
-    await putApi(`/topics/images/${id}`, formData);
+    try {
+      await putApi(`/topics/images/${id}`, formData);
+    } catch {
+      showToast('error', '사용할 수 없는 이미지입니다.');
+    }
 
     const updatedImageUrl = URL.createObjectURL(compressedFile);
     setChangedImages(updatedImageUrl);
+    showToast('info', '지도 이미지를 수정하였습니다.');
   };
 
   return (
@@ -166,7 +171,7 @@ function UpdatedTopicInfo({
         <TopicImage
           height="168px"
           width="100%"
-          src={changedImages ? changedImages : image}
+          src={changedImages || image}
           alt="사진 이미지"
           $objectFit="cover"
           onError={(e: React.SyntheticEvent<HTMLImageElement, Event>) => {

frontend/src/components/TopicInfo/index.tsx

@@ -67,7 +67,7 @@ function TopicInfo({
   };
 
   const onChangeIsInAtlas = () => {
-    showToast('warning', '비회원은 홈에서만 모아보기에 담을 수 있습니다.');
+    showToast('error', '비회원은 홈에서만 모아보기에 담을 수 있습니다.');
     return false;
   };
 
@@ -155,6 +155,7 @@ function TopicInfo({
 
       <ButtonsWrapper>
         <AddSeeTogether
+          parentType="topicInfo"
           isInAtlas={isInAtlas}
           onClickAtlas={onChangeIsInAtlas}
           id={Number(topicId)}

frontend/src/components/common/Swiper/index.tsx

@@ -158,10 +158,16 @@ function Swiper({
 
       {swiper && (
         <>
-          <SwiperButtonLeftWrapper $tabBoxHeight={$tabBoxHeight}>
+          <SwiperButtonLeftWrapper
+            $tabBoxHeight={$tabBoxHeight}
+            $isNotTabBoxShow={$isNotTabBoxShow}
+          >
             <SwiperLeftBtnSVG onClick={decreasePos} cursor="pointer" />
           </SwiperButtonLeftWrapper>
-          <SwiperButtonRightWrapper $tabBoxHeight={$tabBoxHeight}>
+          <SwiperButtonRightWrapper
+            $tabBoxHeight={$tabBoxHeight}
+            $isNotTabBoxShow={$isNotTabBoxShow}
+          >
             <SwiperRightBtnSVG onClick={increasePos} cursor="pointer" />
           </SwiperButtonRightWrapper>
         </>
@@ -332,24 +338,36 @@ const TabBox = styled.button<{
     `}
 `;
 
-const SwiperButtonLeftWrapper = styled.div<{ $tabBoxHeight: number }>`
+const SwiperButtonLeftWrapper = styled.div<{
+  $tabBoxHeight: number;
+  $isNotTabBoxShow: boolean;
+}>`
   position: absolute;
-  top: ${({ $tabBoxHeight }) => `calc(50% + ${$tabBoxHeight}px / 2)`};
+  top: ${({ $tabBoxHeight, $isNotTabBoxShow }) =>
+    $isNotTabBoxShow ? `50%` : `calc(50% + ${$tabBoxHeight}px / 2)`};
   left: 1%;
-  transform: ${({ $tabBoxHeight }) =>
-    `translateY(calc(-50% - ${$tabBoxHeight}px))`};
+  transform: ${({ $tabBoxHeight, $isNotTabBoxShow }) =>
+    $isNotTabBoxShow
+      ? `translateY(-50%)`
+      : `translateY(calc(-50% - ${$tabBoxHeight}px))`};
 
   @media (max-width: 744px) {
     display: none;
   }
 `;
 
-const SwiperButtonRightWrapper = styled.div<{ $tabBoxHeight: number }>`
+const SwiperButtonRightWrapper = styled.div<{
+  $tabBoxHeight: number;
+  $isNotTabBoxShow: boolean;
+}>`
   position: absolute;
-  top: ${({ $tabBoxHeight }) => `calc(50% + ${$tabBoxHeight}px / 2)`};
+  top: ${({ $tabBoxHeight, $isNotTabBoxShow }) =>
+    $isNotTabBoxShow ? `50%` : `calc(50% + ${$tabBoxHeight}px / 2)`};
   right: 1%;
-  transform: ${({ $tabBoxHeight }) =>
-    `translateY(calc(-50% - ${$tabBoxHeight}px))`};
+  transform: ${({ $tabBoxHeight, $isNotTabBoxShow }) =>
+    $isNotTabBoxShow
+      ? `translateY(-50%)`
+      : `translateY(calc(-50% - ${$tabBoxHeight}px))`};
 
   @media (max-width: 744px) {
     display: none;

frontend/src/context/MarkerContext.tsx

@@ -1,5 +1,5 @@
 import { createContext, useContext, useState } from 'react';
-import { useParams } from 'react-router-dom';
+import { useLocation, useParams } from 'react-router-dom';
 
 import { pinColors, pinImageMap } from '../constants/pinImage';
 import useNavigator from '../hooks/useNavigator';
@@ -41,6 +41,7 @@ function MarkerProvider({ children }: Props): JSX.Element {
   const { coordinates, clickedCoordinate } = useContext(CoordinatesContext);
   const { topicId } = useParams<{ topicId: string }>();
   const { routePage } = useNavigator();
+  const { pathname } = useLocation();
 
   const createMarker = (
     coordinate: Coordinate,
@@ -87,7 +88,12 @@ function MarkerProvider({ children }: Props): JSX.Element {
 
     newMarkers.forEach((marker: Marker) => {
       marker.on('click', () => {
-        routePage(`/topics/${topicId}?pinDetail=${marker.id}`);
+        if (pathname.split('/')[1] === 'topics') {
+          routePage(`/topics/${topicId}?pinDetail=${marker.id}`);
+          return;
+        }
+
+        routePage(`/see-together/${topicId}?pinDetail=${marker.id}`);
       });
     });
     setMarkers(newMarkers);

frontend/src/context/SeeTogetherContext.tsx

@@ -6,8 +6,6 @@ import {
   useState,
 } from 'react';
 
-import { TopicCardProps } from '../types/Topic';
-
 interface SeeTogetherContextProps {
   seeTogetherTopics: number[] | null;
   setSeeTogetherTopics: Dispatch<SetStateAction<number[] | []>>;

frontend/src/hooks/useNavigator.ts

@@ -21,7 +21,7 @@ const useNavigator = () => {
       home: () => routePage('/'),
       seeTogether: () =>
         routePage(
-          `/topics/${
+          `/see-together/${
             seeTogetherTopics?.length === 0 ? -1 : seeTogetherTopics?.join(',')
           }`,
         ),

frontend/src/hooks/useResizeMap.ts

@@ -0,0 +1,26 @@
+import { useEffect } from 'react';
+
+import useMapStore from '../store/mapInstance';
+
+const getAvailableWidth = (sidebarWidth: number = 372) =>
+  window.innerWidth - sidebarWidth;
+
+const getAvailableHeight = () => window.innerHeight;
+
+const useResizeMap = () => {
+  const { mapInstance } = useMapStore((state) => state);
+
+  const resizeMap = () => {
+    if (!mapInstance) return;
+
+    mapInstance.resize(getAvailableWidth(372), getAvailableHeight());
+  };
+
+  useEffect(() => {
+    if (window.innerWidth > 1180) resizeMap();
+  }, [getAvailableWidth(372)]);
+
+  return { resizeMap };
+};
+
+export default useResizeMap;