feat: 밸런스게임 모바일 페이지 수정, 삭제 기능 연결

src/App.tsx

@@ -148,7 +148,7 @@ const App: React.FC = () => {
             />
             <Route
               path={PATH.BALANCEGAME.EDIT()}
-              element={<BalanceGameEditPage />}
+              element={!isMobile && <BalanceGameEditPage />}
             />
             <Route
               path={PATH.CHANGE.PROFILE}

src/components/atoms/ToastModal/ToastModal.style.ts

@@ -20,7 +20,8 @@ export const getToastModalColor = (
   return style[bgColor];
 };
 
-export const toastModalStyling = css(typo.Main.SemiBold, {
+export const toastModalStyling = css({
+  ...typo.Main.SemiBold,
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
@@ -29,6 +30,11 @@ export const toastModalStyling = css(typo.Main.SemiBold, {
   padding: '20px 30px',
   borderRadius: '35px',
   boxShadow: '1px 1px 10px rgba(0, 0, 0, 0.07)',
+
+  '@media (max-width: 430px)': {
+    ...typo.Mobile.Text.SemiBold_12,
+    padding: '14px 24px',
+  },
 });
 
 export const toastContainer = css({

src/components/mobile/molecules/GameTagModal/GameTagModal.tsx

@@ -5,6 +5,7 @@ import { TAG_OPTIONS } from '@/constants/game';
 import Modal from '@/components/mobile/atoms/Modal/Modal';
 import Button from '@/components/mobile/atoms/Button/Button';
 import Divider from '@/components/atoms/Divider/Divider';
+import { validateGameTag } from '@/hooks/game/validateBalanceGameForm';
 import * as S from './GameTagModal.style';
 
 interface GameTagModalProps {
@@ -31,10 +32,13 @@ const GameTagModal = ({
   };
 
   const handleTagSubmit = () => {
-    if (currentMainTag) {
-      submitGame();
-      onClose?.();
-    }
+    if (!currentMainTag) return;
+
+    const { isValid } = validateGameTag(form);
+    if (!isValid) return;
+
+    submitGame();
+    onClose?.();
   };
 
   return (
@@ -70,7 +74,6 @@ const GameTagModal = ({
             name="subTag"
             css={S.inputStyling}
             placeholder="ex. 너무어려운밸런스게임, 선택장애, 이상형"
-            maxLength={10}
             value={form.subTag}
             onChange={setSubTagValue}
           />

src/components/mobile/organisms/BalanceGameCreateSection/BalanceGameCreateSection.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { BUTTON_TEXT, MAX_STAGE } from '@/constants/game';
+import { GameSet } from '@/types/game';
 import ToastModal from '@/components/atoms/ToastModal/ToastModal';
 import Button from '@/components/mobile/atoms/Button/Button';
 import GameStageLabel from '@/components/mobile/atoms/GameStageLabel/GameStageLabel';
@@ -12,7 +13,15 @@ import TempGameModal from '@/components/mobile/molecules/TempGameModal/TempGameM
 import { usePostBalanceGameForm } from '@/hooks/game/usePostBalanceGameForm';
 import * as S from './BalanceGameCreateSection.style';
 
-const BalanceGameCreateSection = () => {
+interface BalanceGameCreateSectionProps {
+  existingGame?: GameSet;
+  gameSetId?: number;
+}
+
+const BalanceGameCreateSection = ({
+  existingGame,
+  gameSetId,
+}: BalanceGameCreateSectionProps) => {
   const [gameStage, setGameStage] = useState<number>(0);
 
   const [tagModalOpen, setTagModalOpen] = useState<boolean>(false);
@@ -34,7 +43,13 @@ const BalanceGameCreateSection = () => {
     handleBalanceGame,
     handleTempBalanceGame,
     handleDraftButton,
-  } = usePostBalanceGameForm(gameStage, setGameStage, setTagModalOpen);
+  } = usePostBalanceGameForm(
+    gameStage,
+    setGameStage,
+    setTagModalOpen,
+    existingGame,
+    gameSetId,
+  );
 
   return (
     <form css={S.balanceGameStyling}>
@@ -79,7 +94,8 @@ const BalanceGameCreateSection = () => {
             }}
             onConfirm={() => {
               handleDeleteImg(
-                form.games[gameStage].gameOptions[selectedOptionId].fileId,
+                form.games[gameStage].gameOptions[selectedOptionId].fileId ??
+                  null,
                 selectedOptionId,
               );
               setImgDeleteModalOpen(false);

src/components/mobile/organisms/BalanceGameEndingSection/BalanceGameEndingSection.tsx

@@ -7,6 +7,8 @@ import {
 } from '@/assets';
 import { PATH } from '@/constants/path';
 import { useNavigate } from 'react-router-dom';
+import { useNewSelector } from '@/store';
+import { selectAccessToken } from '@/store/auth';
 import { useGameEndBookmark } from '@/hooks/game/useBalanceGameBookmark';
 import useToastModal from '@/hooks/modal/useToastModal';
 import ToastModal from '@/components/atoms/ToastModal/ToastModal';
@@ -29,7 +31,7 @@ const BalanceGameEndingSection = ({
   isMyEndBookmark,
 }: BalanceGameEndingSectionProps) => {
   const navigate = useNavigate();
-  const isGuest = !localStorage.getItem('accessToken');
+  const isGuest = !useNewSelector(selectAccessToken);
 
   const [shareModalOpen, setShareModalOpen] = useState<boolean>(false);
   const { isVisible, modalText, showToastModal } = useToastModal();

src/components/mobile/organisms/BalanceGameSection/BalanceGameSection.style.ts

@@ -80,6 +80,7 @@ export const subTagWrapper = css({
   display: 'flex',
   width: '100%',
   marginBottom: '50px',
+  gap: '8px',
 });
 
 export const iconButtonWrapper = css({

src/components/mobile/organisms/BalanceGameSection/BalanceGameSection.tsx

@@ -1,8 +1,12 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { MobileBookmarkDF, MobileBookmarkPR, MobileShare } from '@/assets';
 import { useNavigate } from 'react-router-dom';
+import { useNewSelector } from '@/store';
+import { selectAccessToken } from '@/store/auth';
 import { GameDetail, GameSet } from '@/types/game';
+import { createArrayFromCommaString } from '@/utils/array';
 import { PATH } from '@/constants/path';
+import { ERROR, PROMPT } from '@/constants/message';
 import MenuTap, { MenuItem } from '@/components/atoms/MenuTap/MenuTap';
 import useToastModal from '@/hooks/modal/useToastModal';
 import { VoteRecord } from '@/types/vote';
@@ -15,7 +19,10 @@ import ToastModal from '@/components/atoms/ToastModal/ToastModal';
 import BalanceGameBox from '@/components/mobile/molecules/BalanceGameBox/BalanceGameBox';
 import { useGuestGameVote } from '@/hooks/game/useBalanceGameVote';
 import { useGameBookmark } from '@/hooks/game/useBalanceGameBookmark';
-import ShareModal from '../../molecules/ShareModal/ShareModal';
+import { useDeleteGameSetMutation } from '@/hooks/api/game/useDeleteGameSetMutation';
+import ShareModal from '@/components/mobile/molecules/ShareModal/ShareModal';
+import TextModal from '@/components/mobile/molecules/TextModal/TextModal';
+import ReportModal from '@/components/mobile/molecules/ReportModal/ReportModal';
 import * as S from './BalanceGameSection.style';
 
 export interface BalanceGameSectionProps {
@@ -51,11 +58,13 @@ const BalanceGameSection = ({
 
   const gameStages: GameDetail[] =
     game?.gameDetailResponses ?? gameDefaultDetail;
-  const isGuest = !localStorage.getItem('accessToken');
+  const isGuest = !useNewSelector(selectAccessToken);
 
   const [guestVotedList, setGuestVotedList] = useState<VoteRecord[]>([]);
 
   const currentGame: GameDetail = gameStages[currentStage];
+  const subTagList = createArrayFromCommaString(game?.subTag ?? '');
+
   const { handleGuestGameVote } = useGuestGameVote(
     guestVotedList,
     setGuestVotedList,
@@ -64,8 +73,16 @@ const BalanceGameSection = ({
     game,
   );
 
-  const [shareModalOpen, setShareModalOpen] = useState<boolean>(false);
   const { isVisible, modalText, showToastModal } = useToastModal();
+  const { mutate: deleteBalanceGame } = useDeleteGameSetMutation();
+
+  const [activeModal, setActiveModal] = useState<
+    'reportGame' | 'reportText' | 'deleteText' | 'share' | 'none'
+  >('none');
+
+  const onCloseModal = () => {
+    setActiveModal('none');
+  };
 
   useEffect(() => {
     if (game && initialRender.current) {
@@ -89,6 +106,20 @@ const BalanceGameSection = ({
     changeStage(1);
   };
 
+  const handleGameDeleteButton = () => {
+    deleteBalanceGame(
+      { gameSetId },
+      {
+        onSuccess: () => {
+          navigate('/');
+        },
+        onError: () => {
+          showToastModal(ERROR.DELETEGAME.FAIL);
+        },
+      },
+    );
+  };
+
   const { handleBookmarkClick } = useGameBookmark(
     isGuest,
     isMyGame,
@@ -99,8 +130,28 @@ const BalanceGameSection = ({
     game,
   );
 
-  const myGameItem: MenuItem[] = [{ label: '수정' }, { label: '삭제' }];
-  const otherGameItem: MenuItem[] = [{ label: '신고' }];
+  const myGameItem: MenuItem[] = [
+    {
+      label: '수정',
+      onClick: () => {
+        navigate(`/${PATH.CREATE.GAME}`, { state: { game, gameSetId } });
+      },
+    },
+    {
+      label: '삭제',
+      onClick: () => {
+        setActiveModal('deleteText');
+      },
+    },
+  ];
+  const otherGameItem: MenuItem[] = [
+    {
+      label: '신고',
+      onClick: () => {
+        setActiveModal('reportText');
+      },
+    },
+  ];
 
   return (
     <div css={S.balanceGameStyling}>
@@ -111,17 +162,34 @@ const BalanceGameSection = ({
       )}
       <div css={S.centerStyling}>
         <ShareModal
-          isOpen={shareModalOpen}
+          isOpen={activeModal === 'share'}
+          onConfirm={() => {}}
+          onClose={onCloseModal}
+        />
+        <TextModal
+          text={PROMPT.GAME.DELETE}
+          isOpen={activeModal === 'deleteText'}
+          onConfirm={handleGameDeleteButton}
+          onClose={onCloseModal}
+        />
+        <TextModal
+          text={PROMPT.GAME.REPORT}
+          isOpen={activeModal === 'reportText'}
+          onConfirm={() => setActiveModal('reportGame')}
+          onClose={onCloseModal}
+        />
+        <ReportModal
+          isOpen={activeModal === 'reportGame'}
           onConfirm={() => {}}
-          onClose={() => setShareModalOpen(false)}
+          onClose={onCloseModal}
         />
       </div>
       <div css={S.balancGameTopWrapper}>
         <GameTag tag={game?.mainTag ?? ''} />
         <div css={S.iconButtonWrapper}>
           <IconButton
             icon={<MobileShare />}
-            onClick={() => setShareModalOpen(true)}
+            onClick={() => setActiveModal('share')}
           />
           <IconButton
             icon={
@@ -164,7 +232,8 @@ const BalanceGameSection = ({
             />
           </div>
           <div css={S.subTagWrapper}>
-            {game.subTag && <GameTagChip tag={game.subTag} />}
+            {game.subTag &&
+              subTagList.map((tag) => <GameTagChip key={tag} tag={tag} />)}
           </div>
         </div>
       )}

src/components/molecules/BalanceGameEndingBox/BalanceGameEndingBox.tsx

@@ -9,6 +9,8 @@ import ShareModal from '@/components/molecules/ShareModal/ShareModal';
 import LoginModal from '@/components/molecules/LoginModal/LoginModal';
 import useToastModal from '@/hooks/modal/useToastModal';
 import { useGameEndBookmark } from '@/hooks/game/useBalanceGameBookmark';
+import { useNewSelector } from '@/store';
+import { selectAccessToken } from '@/store/auth';
 import * as S from './BalanceGameEndingBox.style';
 
 export interface BalanceGameEndingBoxProps {
@@ -25,7 +27,7 @@ const BalanceGameEndingBox = ({
   isMyEndBookmark,
 }: BalanceGameEndingBoxProps) => {
   const currentURL: string = window.location.href;
-  const isGuest = !localStorage.getItem('accessToken');
+  const isGuest = !useNewSelector(selectAccessToken);
 
   const [loginModalOpen, setLoginModalOpen] = useState<boolean>(false);
   const [shareModalOpen, setShareModalOpen] = useState<boolean>(false);

src/hooks/api/game/useCreateGameMutation.ts

@@ -21,7 +21,7 @@ export const useCreateGameMutation = (
       queryClient.invalidateQueries({
         queryKey: ['games'],
       });
-      showToastModal(SUCCESS.CREATEGAME.CREATE, () => {
+      showToastModal(SUCCESS.GAME.CREATE, () => {
         navigate(`/${PATH.BALANCEGAME.VIEW(gameId)}`);
       });
     },