fix: 템플릿 질문 리스트 질문 추가 과정에서 나오는 "질문 수정을 취소하시겠어요" 모달을 이전 화면 과정에서 이탈시 나오게 제공 (#798)

* fix: #795 질문 수정 취소 플로우 변경

* fix: #795 코드리뷰 피드백 반영

Author: prgmr99

apps/web/src/app/desktop/component/retrospectCreate/QuestionEditSection/AddQuestionView.tsx

@@ -145,10 +145,7 @@ export default function AddQuestionView({ onAddQuestions, maxCount }: AddQuestio
           padding: 0;
         `}
       >
-        <ButtonProvider.Primary
-          onClick={handleAddQuestion}
-          disabled={customQuestion.trim().length === 0 && selectedValues.length === 0}
-        >
+        <ButtonProvider.Primary onClick={handleAddQuestion} disabled={customQuestion.trim().length === 0 && selectedValues.length === 0}>
           {selectedValues.length > 0 ? (
             <span>
               추가하기

apps/web/src/app/desktop/component/retrospectCreate/QuestionEditSection/index.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useCallback } from "react";
 import { Button, ButtonProvider } from "@/component/common/button";
 import { Icon } from "@/component/common/Icon";
 import { Spacing } from "@/component/common/Spacing";
@@ -19,6 +19,8 @@ import AddQuestionView from "./AddQuestionView";
 import { useModal } from "@/hooks/useModal";
 import { isEqual } from "lodash-es";
 
+const MAX_QUESTION_COUNT = 10;
+
 type QuestionEditSectionProps = {
   onClose: () => void;
 };
@@ -102,20 +104,37 @@ export default function QuestionEditSection({ onClose }: QuestionEditSectionProp
    * 새 질문 추가 핸들러
    */
   const handleAddQuestion = () => {
-    if (questions.length >= 10) return;
+    if (questions.length >= MAX_QUESTION_COUNT) return;
 
     // 현재 질문들을 백업하고 질문 추가 모드로 전환
-    setBackupQuestions([...questions]);
+    const questionsToBackup = [...questions];
+    setBackupQuestions(questionsToBackup);
     setIsAddMode(true);
+
+    const cancelCallback = () => {
+      setEditingQuestions(questionsToBackup);
+      setIsAddMode(false);
+      setBackupQuestions([]);
+      setModalDataState((prev) => ({
+        ...prev,
+        title: "질문 리스트",
+        options: {
+          enableFooter: false,
+          needsBackButton: true,
+          backButtonCallback: handleCancel,
+        },
+      }));
+    };
+
     setModalDataState((prev) => ({
       ...prev,
       title: "질문 추가",
-      onClose: handleAddQuestionCancel,
+      onClose: cancelCallback,
       options: {
         enableFooter: false,
         needsBackButton: true,
         disabledClose: true,
-        backButtonCallback: handleAddQuestionCancel,
+        backButtonCallback: cancelCallback,
       },
     }));
   };
@@ -149,7 +168,7 @@ export default function QuestionEditSection({ onClose }: QuestionEditSectionProp
   /**
    * 질문 수정 취소 핸들러 (뒤로가기 버튼)
    */
-  const handleCancel = () => {
+  const handleCancel = useCallback(() => {
     const hasChanged = !isEqual(originalQuestions, editingQuestions);
 
     if (hasChanged) {
@@ -168,35 +187,7 @@ export default function QuestionEditSection({ onClose }: QuestionEditSectionProp
     } else {
       onClose();
     }
-  };
-
-  /**
-   * 질문 추가 취소 핸들러
-   */
-  const handleAddQuestionCancel = () => {
-    openExitWarningModal({
-      title: "질문 추가를 취소하시겠어요?",
-      contents: "추가중인 내용은 모두 사라져요",
-      onConfirm: () => {
-        // 백업된 질문들로 복원
-        setEditingQuestions(backupQuestions);
-        setIsAddMode(false);
-        setBackupQuestions([]);
-        setModalDataState((prev) => ({
-          ...prev,
-          title: "질문 리스트",
-          options: {
-            enableFooter: false,
-            needsBackButton: true,
-            backButtonCallback: handleCancel,
-          },
-        }));
-      },
-      options: {
-        buttonText: ["취소", "나가기"],
-      },
-    });
-  };
+  }, [originalQuestions, editingQuestions, onClose, openExitWarningModal]);
 
   /**
    * 삭제 모드 진입 핸들러
@@ -245,23 +236,25 @@ export default function QuestionEditSection({ onClose }: QuestionEditSectionProp
     onClose();
   };
 
-  // 모달의 뒤로가기 버튼 콜백을 handleCancel로 설정
+  // 모달의 뒤로가기 버튼과 닫기 버튼 콜백을 handleCancel로 설정
   useEffect(() => {
     if (!isAddMode) {
       setModalDataState((prev) => ({
         ...prev,
+        onClose: handleCancel,
         options: {
           ...prev.options,
+          disabledClose: true,
           backButtonCallback: handleCancel,
         },
       }));
     }
-  }, [editingQuestions, isAddMode]);
+  }, [isAddMode, handleCancel]);
 
   return (
     <>
       {isAddMode ? (
-        <AddQuestionView onAddQuestions={handleAddQuestions} maxCount={10 - questions.length} />
+        <AddQuestionView onAddQuestions={handleAddQuestions} maxCount={MAX_QUESTION_COUNT - questions.length} />
       ) : (
         <>
           <section
@@ -295,9 +288,9 @@ export default function QuestionEditSection({ onClose }: QuestionEditSectionProp
               {/* ---------- 추가 버튼 ---------- */}
               <button
                 onClick={handleAddQuestion}
-                disabled={questions.length >= 10}
+                disabled={questions.length >= MAX_QUESTION_COUNT}
                 css={css`
-                  background-color: ${questions.length >= 10 ? DESIGN_TOKEN_COLOR.gray200 : DESIGN_TOKEN_COLOR.blue100};
+                  background-color: ${questions.length >= MAX_QUESTION_COUNT ? DESIGN_TOKEN_COLOR.gray200 : DESIGN_TOKEN_COLOR.blue100};
                   border-radius: 1.2rem;
                   border: none;
                   display: flex;
@@ -306,14 +299,17 @@ export default function QuestionEditSection({ onClose }: QuestionEditSectionProp
                   height: 4.8rem;
                   width: 100%;
                   transition: background-color 0.2s ease;
-                  cursor: ${questions.length >= 10 ? "not-allowed" : "pointer"};
-
+                  cursor: ${questions.length >= MAX_QUESTION_COUNT ? "not-allowed" : "pointer"};
                   &:hover {
-                    background-color: ${questions.length >= 10 ? DESIGN_TOKEN_COLOR.gray200 : DESIGN_TOKEN_COLOR.blue200};
+                    background-color: ${questions.length >= MAX_QUESTION_COUNT ? DESIGN_TOKEN_COLOR.gray200 : DESIGN_TOKEN_COLOR.blue200};
                   }
                 `}
               >
-                <Icon icon="ic_plus_thin" size={1.8} color={questions.length >= 10 ? DESIGN_TOKEN_COLOR.gray400 : DESIGN_TOKEN_COLOR.blue600} />
+                <Icon
+                  icon="ic_plus_thin"
+                  size={1.8}
+                  color={questions.length >= MAX_QUESTION_COUNT ? DESIGN_TOKEN_COLOR.gray400 : DESIGN_TOKEN_COLOR.blue600}
+                />
               </button>
             </section>
           </section>