Merge pull request depromeet#763 from depromeet/762-데스크탑-커스텀-템플릿-제목-변경

JaeIn1 · web-flow · commit 8455e92ffff2 · 2025-12-30T20:28:21.000+09:00
[데스크탑] 커스텀 템플릿 제목 변경 기능 추가
diff --git a/apps/web/package.json b/apps/web/package.json
@@ -39,6 +39,7 @@
     "jotai": "^2.8.4",
     "jotai-devtools": "^0.10.0",
     "js-cookie": "^3.0.5",
+    "lodash-es": "^4.17.22",
     "lottie-react": "^2.4.0",
     "mixpanel-browser": "^2.55.1",
     "prettier": "^3.2.5",
@@ -65,6 +66,7 @@
     "@tanstack/eslint-plugin-query": "^5.49.1",
     "@types/date-fns": "^2.6.0",
     "@types/js-cookie": "^3.0.6",
+    "@types/lodash-es": "^4.17.12",
     "@types/node": "^20.12.12",
     "@types/react": "^18.2.66",
     "@types/react-beforeunload": "^2.1.5",
diff --git a/apps/web/src/app/desktop/component/retrospect/template/list/CustomTemplateListDetailItem/index.tsx b/apps/web/src/app/desktop/component/retrospect/template/list/CustomTemplateListDetailItem/index.tsx
@@ -5,9 +5,13 @@ import { useSetAtom } from "jotai";
 import { retrospectInitialState } from "@/store/retrospect/retrospectInitial";
 import { TemplateQuestion } from "../TemplateListDetailItem/TemplateQuestion";
 import { RetrospectCreate } from "@/app/desktop/component/retrospectCreate";
+import { useSearchParams } from "react-router-dom";
 
 function CustomTemplateListDetailItem({ templateId }: { templateId: number }) {
   const { data } = useGetCustomTemplate(templateId);
+  const [searchParams, _] = useSearchParams();
+  const templateMode = searchParams.get("template_mode");
+
   const transformedData = {
     ...data,
     questions: data.questions.map((q, index) => ({
@@ -37,9 +41,11 @@ function CustomTemplateListDetailItem({ templateId }: { templateId: number }) {
     <>
       <TemplateQuestion templateId={templateId} templateDetailQuestionList={transformedData.questions} />
 
-      <ButtonProvider sort={"horizontal"}>
-        <ButtonProvider.Primary onClick={handleSelectTemplate}>선택하기</ButtonProvider.Primary>
-      </ButtonProvider>
+      {templateMode !== "readonly" && (
+        <ButtonProvider sort={"horizontal"}>
+          <ButtonProvider.Primary onClick={handleSelectTemplate}>선택하기</ButtonProvider.Primary>
+        </ButtonProvider>
+      )}
     </>
   );
 }
diff --git a/apps/web/src/app/desktop/component/retrospect/template/list/TemplateListConform.tsx b/apps/web/src/app/desktop/component/retrospect/template/list/TemplateListConform.tsx
@@ -4,7 +4,7 @@ import { Spacing } from "@/component/common/Spacing";
 import { useGetSimpleTemplateInfo } from "@/hooks/api/template/useGetSimpleTemplateInfo";
 import { retrospectInitialState } from "@/store/retrospect/retrospectInitial";
 import { css } from "@emotion/react";
-import { useAtomValue, useSetAtom } from "jotai";
+import { useAtom, useSetAtom } from "jotai";
 import { Tooltip } from "@/component/common/tip";
 import { ButtonProvider } from "@/component/common/button";
 import { useFunnelModal } from "@/hooks/useFunnelModal";
@@ -15,11 +15,10 @@ import { RetrospectCreate } from "@/app/desktop/component/retrospectCreate";
 import { retrospectCreateAtom } from "@/store/retrospect/retrospectCreate";
 
 export function TemplateListConform() {
-  const setRetrospectValue = useSetAtom(retrospectInitialState);
-  const { tempTemplateId } = useAtomValue(retrospectInitialState);
+  const [retrospectValue, setRetrospectValue] = useAtom(retrospectInitialState);
   const setRetroCreateData = useSetAtom(retrospectCreateAtom);
 
-  const { data: templateData, isLoading } = useGetSimpleTemplateInfo(tempTemplateId);
+  const { data: templateData, isLoading } = useGetSimpleTemplateInfo(retrospectValue.tempTemplateId);
   const { openFunnelModal } = useFunnelModal();
   const { openActionModal } = useActionModal();
 
diff --git a/apps/web/src/app/desktop/component/retrospectCreate/QuestionEditSection/AddQuestionView.tsx b/apps/web/src/app/desktop/component/retrospectCreate/QuestionEditSection/AddQuestionView.tsx
@@ -12,8 +12,6 @@ import { useCheckBox } from "@/hooks/useCheckBox";
 import { QuestionItemCheckbox } from "@/component/retrospectCreate";
 import { useToast } from "@/hooks/useToast";
 import { DESIGN_TOKEN_COLOR } from "@/style/designTokens";
-import { useSetAtom } from "jotai";
-import { retrospectCreateAtom } from "@/store/retrospect/retrospectCreate";
 
 type AddQuestionViewProps = {
   onAddQuestion: (content: string) => void;
@@ -27,28 +25,17 @@ export default function AddQuestionView({ onAddQuestion, onAddMultipleQuestions,
   const { value: customQuestion, handleInputChange: handleCustomChange, resetInput } = useInput();
   const { tabs: categoryTabs, curTab: curCategoryTab, selectTab: selectCategoryTab } = useTabs(QUESTION_TYPES);
   const { selectedValues, isChecked, toggle } = useCheckBox();
-  const setRetroCreateData = useSetAtom(retrospectCreateAtom);
-
-  const updateRetrospectData = () => {
-    setRetroCreateData((prev) => ({
-      ...prev,
-      isNewForm: true,
-      formName: `커스텀 템플릿`,
-    }));
-  };
 
   const handleDirectAdd = () => {
     if (customQuestion.trim()) {
       onAddQuestion(customQuestion);
       resetInput();
-      updateRetrospectData();
     }
   };
 
   const handleRecommendedAdd = () => {
     if (selectedValues.length > 0) {
       onAddMultipleQuestions(selectedValues);
-      updateRetrospectData();
     }
   };
 
diff --git a/apps/web/src/app/desktop/component/retrospectCreate/QuestionEditSection/MainQuestionsContents.tsx b/apps/web/src/app/desktop/component/retrospectCreate/QuestionEditSection/MainQuestionsContents.tsx
@@ -29,7 +29,7 @@ export default function MainQuestionsContents({ questions, isDeleteMode, handleD
    */
   const handleContentChange = (index: number, newContent: string) => {
     const updatedQuestions = questions.map((item, i) => (i === index ? { ...item, questionContent: newContent } : item));
-    setRetroCreateData((prev) => ({ ...prev, questions: updatedQuestions, isNewForm: true, formName: `커스텀 템플릿` }));
+    setRetroCreateData((prev) => ({ ...prev, questions: updatedQuestions, isNewForm: true }));
   };
 
   /**
diff --git a/apps/web/src/app/desktop/component/retrospectCreate/QuestionEditSection/index.tsx b/apps/web/src/app/desktop/component/retrospectCreate/QuestionEditSection/index.tsx
@@ -17,6 +17,7 @@ import MainQuestionsHeader from "./MainQuestionsHeader";
 import MainQuestionsContents from "./MainQuestionsContents";
 import AddQuestionView from "./AddQuestionView";
 import { useModal } from "@/hooks/useModal";
+import { isEqual } from "lodash-es";
 
 type QuestionEditSectionProps = {
   onClose: () => void;
@@ -86,6 +87,7 @@ export default function QuestionEditSection({ onClose }: QuestionEditSectionProp
     } else {
       setRetrospectQuestions(updatedQuestions);
     }
+
     toast.success("삭제가 완료되었어요!");
   };
 
@@ -117,7 +119,7 @@ export default function QuestionEditSection({ onClose }: QuestionEditSectionProp
   const handleAddQuestionComplete = (content: string) => {
     const newQuestions = [...questions, { questionType: "plain_text" as const, questionContent: content }];
     if (isInitializedCreateSpace) {
-      setRetroCreateData((prev) => ({ ...prev, questions: newQuestions, hasChangedOriginal: true, isNewForm: true, formName: `커스텀 템플릿` }));
+      setRetroCreateData((prev) => ({ ...prev, questions: newQuestions }));
     } else {
       setRetrospectQuestions(newQuestions);
     }
@@ -228,6 +230,21 @@ export default function QuestionEditSection({ onClose }: QuestionEditSectionProp
     setBackupQuestions([]);
   };
 
+  // 제출 완료 핸들러
+  const handleComplete = () => {
+    const hasChanged = !isEqual(backupQuestions, questions);
+
+    if (hasChanged || retroCreateData.hasChangedOriginal) {
+      setRetroCreateData((prev) => ({
+        ...prev,
+        hasChangedOriginal: true,
+        isNewForm: true,
+      }));
+    }
+
+    onClose();
+  };
+
   return (
     <>
       {isAddMode ? (
@@ -293,7 +310,7 @@ export default function QuestionEditSection({ onClose }: QuestionEditSectionProp
               padding-top: 0.8rem;
             `}
           >
-            <Button colorSchema={"primary"} onClick={onClose} isProgress={false}>
+            <Button colorSchema={"primary"} onClick={handleComplete} isProgress={false}>
               완료
             </Button>
           </ButtonProvider>
diff --git a/apps/web/src/app/desktop/component/retrospectCreate/index.tsx b/apps/web/src/app/desktop/component/retrospectCreate/index.tsx
@@ -64,12 +64,11 @@ export function RetrospectCreate() {
           closeFunnelModal();
           toast.success("회고가 생성되었어요!");
 
-          setRetrospectValue({
-            spaceId: "",
-            templateId: "",
+          setRetrospectValue((prev) => ({
+            ...prev,
             tempTemplateId: "",
             saveTemplateId: false,
-          });
+          }));
         },
       },
     );
diff --git a/apps/web/src/app/desktop/component/retrospectCreate/steps/ConfirmDefaultTemplate.tsx b/apps/web/src/app/desktop/component/retrospectCreate/steps/ConfirmDefaultTemplate.tsx
@@ -7,7 +7,7 @@ import { Tag } from "@/component/common/tag";
 import { Spacing } from "@/component/common/Spacing";
 import { ButtonProvider } from "@/component/common/button";
 import QuestionEditButton from "@/app/desktop/component/retrospectCreate/QuestionEditButton";
-import { useContext, useEffect, useRef } from "react";
+import { useContext, useEffect, useRef, useState } from "react";
 
 import { useAtom, useAtomValue } from "jotai";
 import { retrospectCreateAtom } from "@/store/retrospect/retrospectCreate";
@@ -16,23 +16,33 @@ import { TemplateChoice } from "@/app/desktop/component/retrospect/choice";
 import { retrospectInitialState } from "@/store/retrospect/retrospectInitial";
 import { RetrospectCreateContext } from "..";
 import { Tooltip } from "@/component/common/tip";
+import { useToast } from "@/hooks/useToast";
 
 export function ConfirmDefaultTemplate() {
   const { templateId, saveTemplateId } = useAtomValue(retrospectInitialState);
   const { goNext } = useContext(RetrospectCreateContext);
   const [retroCreateData, setRetroCreateData] = useAtom(retrospectCreateAtom);
   const { openActionModal } = useActionModal();
+  const { toast } = useToast();
+  const [customTemplateTitle, setCustomTemplateTitle] = useState("");
 
   const titleRef = useRef<HTMLDivElement>(null);
 
   const {
     data: { title, tag, questions },
   } = useGetCustomTemplate(Number(templateId));
 
-  // 질문이 수정되었는지 여부에 따라 보여줄 텍스트 결정
-  const displayTitle = retroCreateData.hasChangedOriginal ? "커스텀 템플릿" : title;
+  const displayTitle = retroCreateData.hasChangedOriginal ? retroCreateData.formName || customTemplateTitle || "커스텀 템플릿" : title;
   const displayTag = retroCreateData.hasChangedOriginal ? "CUSTOM" : tag;
 
+  useEffect(() => {
+    if (retroCreateData.hasChangedOriginal && retroCreateData.formName) {
+      setCustomTemplateTitle(retroCreateData.formName);
+    } else {
+      setCustomTemplateTitle(title);
+    }
+  }, [title, retroCreateData.hasChangedOriginal, retroCreateData.formName]);
+
   useEffect(() => {
     setRetroCreateData((prev) => ({
       ...prev,
@@ -48,6 +58,14 @@ export function ConfirmDefaultTemplate() {
     });
   };
 
+  const handleTitleChange = (newTitle: string) => {
+    setCustomTemplateTitle(newTitle);
+    setRetroCreateData((prev) => ({
+      ...prev,
+      formName: newTitle,
+    }));
+  };
+
   return (
     <>
       <Header
@@ -79,7 +97,29 @@ export function ConfirmDefaultTemplate() {
               padding-top: 0.2rem;
             `}
           >
-            <Typography variant={"S1"}>{displayTitle}</Typography>
+            {!retroCreateData.hasChangedOriginal ? (
+              <Typography variant={"S1"}>{displayTitle}</Typography>
+            ) : (
+              <input
+                type="text"
+                value={customTemplateTitle}
+                onChange={(e) => {
+                  handleTitleChange(e.target.value);
+                }}
+                css={css`
+                  font-size: 2rem;
+                  font-weight: bold;
+                  width: 100%;
+                  margin-right: 1rem;
+                `}
+                onBlur={() => {
+                  if (displayTitle !== retroCreateData.formName) {
+                    toast.success("이름 수정이 완료되었어요!");
+                  }
+                }}
+              />
+            )}
+
             <Tag styles="margin-top: 0.8rem">{displayTag}</Tag>
           </div>
           {retroCreateData.hasChangedOriginal ? (
diff --git a/apps/web/src/component/retrospectCreate/customTemplate/EditQuestions.tsx b/apps/web/src/component/retrospectCreate/customTemplate/EditQuestions.tsx
@@ -73,7 +73,6 @@ export function EditQuestions({ goNext, goPrev }: EditQuestionsProps) {
       isNewForm: isEdited,
       hasChangedOriginal: !isDefaultExtended,
       questions: newQuestions,
-      formName: `커스텀 템플릿`,
     }));
   };
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
