[FE]Refactor/#169 불필요한 코드, 컨텍스트 제거

frontend/src/App.tsx

@@ -1,13 +1,8 @@
 import { RouterProvider } from 'react-router-dom';
 import router from './router';
-import TagContextProvider from './store/TagId';
 
 const App = () => {
-  return (
-    <TagContextProvider>
-      <RouterProvider router={router} />;
-    </TagContextProvider>
-  );
+  return <RouterProvider router={router} />;
 };
 
 export default App;

frontend/src/components/PinPreview/index.tsx

@@ -3,8 +3,6 @@ import Flex from '../common/Flex';
 import Space from '../common/Space';
 import Text from '../common/Text';
 import useNavigator from '../../hooks/useNavigator';
-import { useContext } from 'react';
-import { TagIdContext } from '../../store/TagId';
 
 export interface PinPreviewProps {
   pinTitle: string;
@@ -15,6 +13,8 @@ export interface PinPreviewProps {
   topicId: number | undefined;
   tagPins: string[];
   setTagPins: (value: string[]) => void;
+  taggedPinIds: number[];
+  setTaggedPinIds: React.Dispatch<React.SetStateAction<number[]>>;
 }
 
 const PinPreview = ({
@@ -26,18 +26,18 @@ const PinPreview = ({
   topicId,
   tagPins,
   setTagPins,
+  taggedPinIds,
+  setTaggedPinIds,
 }: PinPreviewProps) => {
   const { routePage } = useNavigator();
 
-  const { tagId, setTagId } = useContext(TagIdContext);
-
   const onAddTagOfTopic = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (e.target.checked) {
       setTagPins([...tagPins, pinTitle]);
-      setTagId([...tagId, pinId]);
+      setTaggedPinIds((prev) => [...prev, pinId]);
     } else {
       setTagPins(tagPins.filter((value) => value !== pinTitle));
-      setTagId(tagId.filter((value) => value !== pinId));
+      setTaggedPinIds(taggedPinIds.filter((value) => value !== pinId));
     }
   };
 
@@ -61,14 +61,14 @@ const PinPreview = ({
         onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
           onAddTagOfTopic(e)
         }
-        checked={Boolean(tagId.includes(pinId))}
+        checked={Boolean(taggedPinIds.includes(pinId))}
       />
       <Flex
         $flexDirection="column"
         cursor="pointer"
         onClick={onClickSetSelectedPinId}
         width="90%"
-        height="80%"
+        height="95%"
       >
         <Text color="black" $fontSize="default" $fontWeight="bold">
           {pinTitle}

frontend/src/components/TopicCard/index.tsx

@@ -2,8 +2,6 @@ import { styled } from 'styled-components';
 import Flex from '../common/Flex';
 import Text from '../common/Text';
 import useNavigator from '../../hooks/useNavigator';
-import { useContext } from 'react';
-import { TagIdContext } from '../../store/TagId';
 
 export interface TopicCardProps {
   topicId: number;
@@ -12,7 +10,9 @@ export interface TopicCardProps {
   topicUpdatedAt: string;
   topicPinCount: number;
   tagTopics: string[];
-  setTagTopics: (value: string[]) => void;
+  setTagTopics: React.Dispatch<React.SetStateAction<string[]>>;
+  taggedTopicIds: number[];
+  setTaggedTopicIds: React.Dispatch<React.SetStateAction<number[]>>;
 }
 
 const TopicCard = ({
@@ -23,22 +23,21 @@ const TopicCard = ({
   topicPinCount,
   tagTopics,
   setTagTopics,
+  taggedTopicIds,
+  setTaggedTopicIds,
 }: TopicCardProps) => {
   const { routePage } = useNavigator();
-
-  const { tagId, setTagId } = useContext(TagIdContext);
-
   const goToSelectedTopic = () => {
     routePage(`topics/${topicId}`, [topicId]);
   };
 
   const onAddTagOfTopic = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (e.target.checked) {
       setTagTopics([...tagTopics, topicTitle]);
-      setTagId([...tagId, topicId]);
+      setTaggedTopicIds((prev) => [...prev, topicId]);
     } else {
       setTagTopics(tagTopics.filter((value) => value !== topicTitle));
-      setTagId(tagId.filter((value) => value !== topicId));
+      setTaggedTopicIds(taggedTopicIds.filter((value) => value !== topicId));
     }
   };
 
@@ -60,7 +59,7 @@ const TopicCard = ({
           onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
             onAddTagOfTopic(e)
           }
-          checked={Boolean(tagId.includes(topicId))}
+          checked={taggedTopicIds.includes(topicId)}
         />
         <Flex
           width="100%"

frontend/src/pages/Home.tsx

@@ -10,27 +10,24 @@ import { TopicType } from '../types/Topic';
 import useNavigator from '../hooks/useNavigator';
 import { CoordinatesContext } from '../context/CoordinatesContext';
 import { MergeOrSeeTogether } from '../components/MergeOrSeeTogether';
-import { TagIdContext } from '../store/TagId';
 
 const Home = () => {
   const [topics, setTopics] = useState<TopicType[]>([]);
+  const [taggedTopicIds, setTaggedTopicIds] = useState<number[]>([]);
   const [tagTopics, setTagTopics] = useState<string[]>([]);
   const { routePage } = useNavigator();
   const { setCoordinates } = useContext(CoordinatesContext);
 
-  const { tagId, setTagId } = useContext(TagIdContext);
-
   const goToNewTopic = () => {
-    routePage('new-topic', 'topics');
+    routePage('new-topic', taggedTopicIds);
   };
 
   const goToSeveralTopic = () => {
-    routePage(`topics/${tagId}`, tagId);
+    routePage(`topics/${taggedTopicIds.join(',')}`, taggedTopicIds.join(','));
   };
 
   const onTagCancel = () => {
     setTagTopics([]);
-    setTagId([]);
   };
 
   const getAndSetDataFromServer = async () => {
@@ -48,10 +45,6 @@ const Home = () => {
     ]);
   }, []);
 
-  useEffect(() => {
-    if (topics.length === 0) setTagId([]);
-  }, [topics]);
-
   return (
     <Box position="relative">
       <Space size={2} />
@@ -81,6 +74,8 @@ const Home = () => {
                   topicPinCount={topic.pinCount}
                   tagTopics={tagTopics}
                   setTagTopics={setTagTopics}
+                  taggedTopicIds={taggedTopicIds}
+                  setTaggedTopicIds={setTaggedTopicIds}
                 />
                 <Space size={4} />
               </Fragment>
@@ -89,7 +84,7 @@ const Home = () => {
       </ul>
       <Flex position="fixed" bottom="40px" left="130px">
         <Button variant="primary" onClick={goToNewTopic}>
-          {tagId.length > 0 ? '토픽 병합하기' : '토픽 추가하기'}
+          {tagTopics.length > 0 ? '토픽 병합하기' : '토픽 추가하기'}
         </Button>
       </Flex>
     </Box>

frontend/src/pages/NewTopic.tsx

@@ -4,13 +4,10 @@ import Flex from '../components/common/Flex';
 import Space from '../components/common/Space';
 import Button from '../components/common/Button';
 import Textarea from '../components/common/Textarea';
-import { styled } from 'styled-components';
 import { postApi } from '../utils/postApi';
 import useNavigator from '../hooks/useNavigator';
 import { NewTopicFormValuesType } from '../types/FormValues';
 import useFormValues from '../hooks/useFormValues';
-import { useContext, useEffect } from 'react';
-import { TagIdContext } from '../store/TagId';
 import { useLocation } from 'react-router-dom';
 
 const NewTopic = () => {
@@ -21,10 +18,7 @@ const NewTopic = () => {
     topics: [],
   });
   const { routePage } = useNavigator();
-
-  const { state } = useLocation();
-
-  const { tagId, setTagId } = useContext(TagIdContext);
+  const { state: taggedIds } = useLocation();
 
   const goToBack = () => {
     routePage(-1);
@@ -34,38 +28,30 @@ const NewTopic = () => {
     e.preventDefault();
 
     const topicId = await postToServer();
-    if (topicId) routePage(`/topics/${topicId}`, [Number(topicId)]);
+    if (topicId) routePage(`/topics/${topicId}`);
   };
 
   const postToServer = async () => {
-    if (state === 'topics') {
-      const response = await postApi('/topics/merge', {
-        image: formValues.image,
-        name: formValues.name,
-        description: formValues.description,
-        topics: tagId,
-      });
-
-      const location = response.headers.get('Location');
-
-      if (location) {
-        const topicIdFromLocation = location.split('/')[2];
-        return topicIdFromLocation;
-      }
-    } else {
-      const response = await postApi('/topics/new', {
-        image: formValues.image,
-        name: formValues.name,
-        description: formValues.description,
-        pins: tagId,
-      });
-
-      const location = response.headers.get('Location');
-
-      if (location) {
-        const topicIdFromLocation = location.split('/')[2];
-        return topicIdFromLocation;
-      }
+    const response =
+      taggedIds?.length > 1 && typeof taggedIds !== 'string'
+        ? await postApi('/topics/merge', {
+            image: formValues.image,
+            name: formValues.name,
+            description: formValues.description,
+            topics: taggedIds,
+          })
+        : await postApi('/topics/new', {
+            image: formValues.image,
+            name: formValues.name,
+            description: formValues.description,
+            pins: typeof taggedIds === 'string' ? taggedIds.split(',') : [],
+          });
+
+    const location = response.headers.get('Location');
+
+    if (location) {
+      const topicIdFromLocation = location.split('/')[2];
+      return topicIdFromLocation;
     }
   };
 
@@ -153,25 +139,4 @@ const NewTopic = () => {
   );
 };
 
-const TopicIcon = styled(Input)`
-  display: none;
-  position: relative;
-
-  & + label {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 52px;
-    height: 52px;
-    font-size: 36px;
-    border: 1px solid ${({ theme }) => theme.color.black};
-    border-radius: 4px;
-    cursor: pointer;
-  }
-
-  &:checked + label {
-    background-color: ${({ theme }) => theme.color.primary};
-  }
-`;
-
 export default NewTopic;