JECT-Study · WonJuneKim · Dec 17, 2024 · Dec 17, 2024 · Dec 17, 2024 · Dec 17, 2024
diff --git a/src/App.tsx b/src/App.tsx
@@ -7,6 +7,7 @@ import { Route, Routes } from 'react-router-dom';
 import MyPage from '@/pages/MyPage/MyPage';
 import SearchGamePage from '@/pages/SearchResultsPage/SearchGamePage';
 import SearchTalkPickPage from '@/pages/SearchResultsPage/SearchTalkPickPage';
+import BalanceGameEditPage from '@/pages/BalanceGameEditPage/BalanceGameEditPage';
 import ProtectedRoutes from './components/Routes/ProtectedRoutes';
 import { PATH } from './constants/path';
 import { useTokenRefresh } from './hooks/common/useTokenRefresh';
@@ -78,10 +79,9 @@ const App: React.FC = () => {
           <Route path={PATH.TALKPICK_PLACE} element={<TalkPickPlacePage />} />
           <Route path={PATH.TALKPICK()} element={<TalkPickPage />} />
           <Route
-            path={PATH.BALANCEGAME()}
+            path={PATH.BALANCEGAME.VIEW()}
             element={isMobile ? <BalanceGameMobilePage /> : <BalanceGamePage />}
           />
-
           {/* <Route path="/search" element={<SearchResultsPage />} /> */}
           {/* <Route path="posts" element={<PostList />} />
           <Route path="posts/:id" element={<PostPage />} />
@@ -108,6 +108,10 @@ const App: React.FC = () => {
               path={PATH.CREATE.GAME}
               element={<BalanceGameCreationPage />}
             />
+            <Route
+              path={PATH.BALANCEGAME.EDIT()}
+              element={<BalanceGameEditPage />}
+            />
             <Route
               path={PATH.CHANGE.PROFILE}
               element={<ChangeUserInfoPage />}

diff --git a/src/api/game.ts b/src/api/game.ts
@@ -41,6 +41,18 @@ export const getGameBySetId = async (gameSetId: Id) => {
   return data;
 };
 
+export const putGameBySetId = async (gameSetId: Id, gameData: BalanceGame) => {
+  const { data } = await axiosInstance.put<BalanceGame>(
+    END_POINT.GAME_SET(gameSetId),
+    gameData,
+  );
+  return data;
+};
+
+export const deleteBySetId = async (gameSetId: Id) => {
+  return axiosInstance.delete(END_POINT.GAME_SET(gameSetId));
+};
-export const deleteBySetId = async (gameSetId: Id) => {
-  return axiosInstance.delete(END_POINT.GAME_SET(gameSetId));
-};
+export const deleteBySetId = async (gameSetId: Id): Promise<boolean> => {
+  try {
+    await axiosInstance.delete(END_POINT.GAME_SET(gameSetId));
+    return true;
+  } catch (error) {
+    console.error('게임 삭제 중 오류 발생:', error);
+    return false;
+  }
+};
-export const deleteBySetId = async (gameSetId: Id) => {
-  return axiosInstance.delete(END_POINT.GAME_SET(gameSetId));
-};
+export const deleteBySetId = async (gameSetId: Id): Promise<boolean> => {
+  try {
+    await axiosInstance.delete(END_POINT.GAME_SET(gameSetId));
+    return true;
+  } catch (error) {
+    console.error('게임 삭제 중 오류 발생:', error);
+    return false;
+  }
+};
+
 export const putGame = async (gameId: Id, gameData: Game) => {
   const { data } = await axiosInstance.put<GameContent>(
     END_POINT.EDIT_GAME(gameId),

diff --git a/src/components/molecules/TagModal/TagModal.tsx b/src/components/molecules/TagModal/TagModal.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import Modal from '@/components/atoms/Modal/Modal';
 import Button from '@/components/atoms/Button/Button';
 import Input from '@/components/atoms/Input/Input';
@@ -9,11 +9,26 @@ interface TagModalProps {
   isOpen: boolean;
   onClose: () => void;
   onTagSubmit: (mainTag: string, subTag: string) => void;
+  initialMainTag?: string;
+  initialSubTag?: string;
 }
 
-const TagModal = ({ isOpen, onClose, onTagSubmit }: TagModalProps) => {
-  const [mainTag, setMainTag] = useState<string | null>(null);
-  const [subTag, setSubTag] = useState('');
+const TagModal = ({
+  isOpen,
+  onClose,
+  onTagSubmit,
+  initialMainTag,
+  initialSubTag,
+}: TagModalProps) => {
+  const [mainTag, setMainTag] = useState<string | null>(initialMainTag ?? null);
+  const [subTag, setSubTag] = useState<string>(initialSubTag ?? '');
+
+  useEffect(() => {
+    if (isOpen) {
+      setMainTag(initialMainTag ?? null);
+      setSubTag(initialSubTag ?? '');
+    }
+  }, [isOpen, initialMainTag, initialSubTag]);
 
   const handleTagSubmit = () => {
     if (mainTag) {

diff --git a/src/components/organisms/BalanceGameCreation/BalanceGameCreation.style.ts b/src/components/organisms/BalanceGameCreation/BalanceGameCreation.style.ts
@@ -37,3 +37,17 @@ export const toastModalStyling = css({
   transform: 'translate(-50%)',
   zIndex: '1000',
 });
+
+export const titleDescriptionFieldContainer = css({
+  position: 'relative',
+});
+
+export const tagEditButtonContainer = css({
+  position: 'absolute',
+  top: '16px',
+  right: '21px',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  zIndex: '50',
+});
diff --git a/src/components/organisms/BalanceGameCreation/BalanceGameCreation.tsx b/src/components/organisms/BalanceGameCreation/BalanceGameCreation.tsx
@@ -1,69 +1,157 @@
-import React, { useEffect } from 'react';
+import React, { useState } from 'react';
 import TitleDescriptionField from '@/components/atoms/TitleDescriptionField/TitleDescriptionField';
 import BalanceGameOptionCard from '@/components/molecules/BalanceGameOptionCard/BalanceGameOptionCard';
 import DraftPostButton from '@/components/atoms/DraftPostButton/DraftPostButton';
-import { BalanceGameSet } from '@/types/game';
-import { useBalanceGameCreation } from '@/hooks/game/useBalanceGameCreation';
+import { BalanceGameOption, BalanceGameSet } from '@/types/game';
 import GameNavigationSection from '@/components/molecules/GameNavigationSection/GameNavigationSection';
 import useToastModal from '@/hooks/modal/useToastModal';
 import ToastModal from '@/components/atoms/ToastModal/ToastModal';
+import Button from '@/components/atoms/Button/Button';
+import { ERROR } from '@/constants/message';
 import * as S from './BalanceGameCreation.style';
 
 export interface BalanceGameCreationProps {
   title: string;
   onTitleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
   handleCompleteClick: () => void;
-  onDraftLoad: () => void;
-  onGamesUpdate: (games: BalanceGameSet[]) => void;
-  onImageChange: (stageIndex: number, optionIndex: number, file: File) => void;
+  onDraftLoad?: () => void;
+  games: BalanceGameSet[];
+  onGamesChange: (updatedGames: BalanceGameSet[]) => void;
+  onImageChange: (
+    stageIndex: number,
+    optionIndex: number,
+    file: File,
+  ) => Promise<boolean>;
   onImageDelete: (stageIndex: number, optionIndex: number) => void;
-  loadedGames?: BalanceGameSet[];
+  handleTagEditClick?: () => void;
 }
 
 const BalanceGameCreation = ({
   title,
   onTitleChange,
   handleCompleteClick,
   onDraftLoad,
-  onGamesUpdate,
+  games,
+  onGamesChange,
   onImageChange,
   onImageDelete,
-  loadedGames,
+  handleTagEditClick,
 }: BalanceGameCreationProps) => {
-  const totalStage = 10;
   const { isVisible, modalText, showToastModal } = useToastModal();
 
-  const {
-    games,
-    currentStage,
-    currentOptions,
-    currentDescription,
-    clearInput,
-    handleNextStage,
-    handlePrevStage,
-    handleStageDescriptionChange,
-    handleOptionUpdate,
-  } = useBalanceGameCreation(showToastModal, totalStage, loadedGames);
-
-  useEffect(() => {
-    onGamesUpdate(games);
-  }, [games, onGamesUpdate]);
+  const [currentStage, setCurrentStage] = useState(0);
+  const [clearInput, setClearInput] = useState(false);
+
+  const currentGame = games[currentStage];
+  const currentOptions = currentGame?.gameOptions || [];
+  const currentDescription = currentGame?.description || '';
+
+  const updateOption = (
+    stageIndex: number,
+    optionType: 'A' | 'B',
+    newOption: Partial<BalanceGameOption>,
+  ) => {
+    const updatedGames = games.map((game, idx) =>
+      idx === stageIndex
+        ? {
+            ...game,
+            gameOptions: game.gameOptions.map((opt, optIdx) => {
+              const isA = optionType === 'A' && optIdx === 0;
+              const isB = optionType === 'B' && optIdx === 1;
+              if (isA || isB) {
+                return { ...opt, ...newOption };
+              }
+              return opt;
+            }),
+          }
+        : game,
+    );
+    onGamesChange(updatedGames);
+  };
+
+  const validateStage = (): true | string => {
+    const { gameOptions } = currentGame || { gameOptions: [] };
+
+    if (!gameOptions[0]?.name.trim() || !gameOptions[1]?.name.trim()) {
+      return ERROR.VALIDATE.OPTION;
+    }
+
+    const hasBothImages =
+      !!gameOptions[0]?.imgUrl.trim() && !!gameOptions[1]?.imgUrl.trim();
+    const hasNoImages =
+      !gameOptions[0]?.imgUrl.trim() && !gameOptions[1]?.imgUrl.trim();
+
+    if (!(hasBothImages || hasNoImages)) {
+      return ERROR.VALIDATE.GAME_IMAGE;
+    }
+
+    return true;
+  };
+
+  const handleNextStage = () => {
+    const validationResult = validateStage();
+    if (currentStage < games.length - 1) {
+      if (validationResult === true) {
+        setClearInput(true);
+        setCurrentStage((prev) => prev + 1);
+      } else {
+        showToastModal(validationResult);
+      }
+    }
+  };
+
+  const handlePrevStage = () => {
+    if (currentStage > 0) {
+      setClearInput(true);
+      setCurrentStage((prev) => prev - 1);
+    }
+  };
+
+  const handleStageDescriptionChange = (newDescription: string) => {
+    const updatedGames = games.map((game, idx) =>
+      idx === currentStage ? { ...game, description: newDescription } : game,
+    );
+    onGamesChange(updatedGames);
+  };
+
+  const handleOptionUpdate = (
+    optionType: 'A' | 'B',
+    field: 'name' | 'description',
+    value: string,
+  ) => {
+    updateOption(currentStage, optionType, { [field]: value });
+  };
 
   return (
     <div css={S.pageContainer}>
-      <TitleDescriptionField
-        title={title}
-        description={currentDescription}
-        onTitleChange={onTitleChange}
-        onDescriptionChange={(e) =>
-          handleStageDescriptionChange(e.target.value)
-        }
-      />
+      <div css={S.titleDescriptionFieldContainer}>
+        <TitleDescriptionField
+          title={title}
+          description={currentDescription}
+          onTitleChange={onTitleChange}
+          onDescriptionChange={(e) =>
+            handleStageDescriptionChange(e.target.value)
+          }
+        />
+        {handleTagEditClick && (
+          <div css={S.tagEditButtonContainer}>
+            <Button
+              size="large"
+              variant="outlinePrimary"
+              onClick={handleTagEditClick}
+            >
+              태그 수정
+            </Button>
+          </div>
+        )}
+      </div>
       <div css={S.optionsContainer}>
         <BalanceGameOptionCard
           option="A"
           imgUrl={currentOptions[0]?.imgUrl || ''}
-          onImageChange={(file) => onImageChange(currentStage, 0, file)}
+          onImageChange={(file) => {
+            onImageChange(currentStage, 0, file);
+          }}
           onImageDelete={() => onImageDelete(currentStage, 0)}
           choiceInputProps={{
             value: currentOptions[0]?.name || '',
@@ -79,7 +167,9 @@ const BalanceGameCreation = ({
         <BalanceGameOptionCard
           option="B"
           imgUrl={currentOptions[1]?.imgUrl || ''}
-          onImageChange={(file) => onImageChange(currentStage, 1, file)}
+          onImageChange={(file) => {
+            onImageChange(currentStage, 1, file);
+          }}
           onImageDelete={() => onImageDelete(currentStage, 1)}
           choiceInputProps={{
             value: currentOptions[1]?.name || '',
@@ -93,13 +183,15 @@ const BalanceGameCreation = ({
           clearInput={clearInput}
         />
       </div>
-      <div css={S.draftPostButtonContainer}>
-        <DraftPostButton onClick={onDraftLoad} />
-      </div>
+      {onDraftLoad && (
+        <div css={S.draftPostButtonContainer}>
+          <DraftPostButton onClick={onDraftLoad} />
+        </div>
+      )}
       <div css={S.navigationContainer}>
         <GameNavigationSection
           currentStage={currentStage}
-          totalStage={totalStage}
+          totalStage={games.length}
           handleNextClick={handleNextStage}
           handlePrevClick={handlePrevStage}
           handleCompleteClick={handleCompleteClick}

diff --git a/src/components/organisms/BalanceGameList/BalanceGameList.tsx b/src/components/organisms/BalanceGameList/BalanceGameList.tsx
@@ -10,6 +10,7 @@ import { GameContent } from '@/types/game';
 import { ToggleGroupValue } from '@/types/toggle';
 import { useNavigate } from 'react-router-dom';
 import { ERROR } from '@/constants/message';
+import { PATH } from '@/constants/path';
 import MobileToggleGroup from '@/components/mobile/atoms/MobileToggleGroup/MobileToggleGroup';
 import * as S from './BalanceGameList.style';
 
@@ -41,7 +42,7 @@ const BalanceGameList = ({
         alert(ERROR.GAME.NOT_EXIST);
         return;
       }
-      navigate(`/balancegame/${gameId}`);
+      navigate(`/${PATH.BALANCEGAME.VIEW(gameId)}`);
     },
     [navigate],
   );