feat: 커스텀 템플릿 생성 안되는 이슈

apps/web/src/app/desktop/component/retrospect/template/list/TemplateListConform.tsx

@@ -12,10 +12,13 @@ import { TemplateCard } from "../card/TemplateCard";
 import { useActionModal } from "@/hooks/useActionModal";
 import { TemplateChoice } from "@/app/desktop/component/retrospect/choice";
 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 setRetroCreateData = useSetAtom(retrospectCreateAtom);
+
   const { data: templateData, isLoading } = useGetSimpleTemplateInfo(tempTemplateId);
   const { openFunnelModal } = useFunnelModal();
   const { openActionModal } = useActionModal();
@@ -34,6 +37,13 @@ export function TemplateListConform() {
       ...prev,
       templateId: prev.tempTemplateId,
       saveTemplateId: true,
+      hasChangedOriginal: false,
+    }));
+
+    setRetroCreateData((prev) => ({
+      ...prev,
+      hasChangedOriginal: false,
+      isNewForm: false,
     }));
 
     openFunnelModal({

apps/web/src/app/desktop/component/retrospectCreate/QuestionEditButton.tsx

@@ -34,9 +34,6 @@ function QuestionEditButton({ onClose, ...props }: QuestionEditButtonProps) {
     <button
       type="button"
       css={css`
-        position: absolute;
-        top: 2rem;
-        right: 2rem;
         display: flex;
         justify-content: center;
         align-items: center;

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

@@ -12,6 +12,8 @@ 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;
@@ -25,17 +27,28 @@ 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();
     }
   };
 
@@ -124,7 +137,7 @@ export default function AddQuestionView({ onAddQuestion, onAddMultipleQuestions,
         <ButtonProvider.Primary onClick={curTab === "직접작성" ? handleDirectAdd : handleRecommendedAdd}>
           {selectedValues.length > 0 ? (
             <span>
-              추가하기{" "}
+              추가하기
               <span
                 css={css`
                   color: ${DESIGN_TOKEN_COLOR.blue600};

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 }));
+    setRetroCreateData((prev) => ({ ...prev, questions: updatedQuestions, isNewForm: true, formName: `커스텀 템플릿` }));
   };
 
   /**
@@ -54,6 +54,10 @@ export default function MainQuestionsContents({ questions, isDeleteMode, handleD
     const originalContent = originalContentRef.current[index] || "";
 
     if (originalContent !== currentContent && currentContent.trim() !== "") {
+      setRetroCreateData((prev) => ({
+        ...prev,
+        hasChangedOriginal: true,
+      }));
       toast.success("질문이 수정되었어요!");
     }
 
@@ -65,7 +69,7 @@ export default function MainQuestionsContents({ questions, isDeleteMode, handleD
     questions.forEach((question, index) => {
       originalContentRef.current[index] = question.questionContent;
     });
-  }, [questions]);
+  }, []);
 
   return (
     <DragDropContext onDragEnd={handleDragEnd}>

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

@@ -116,7 +116,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 }));
+      setRetroCreateData((prev) => ({ ...prev, questions: newQuestions, hasChangedOriginal: true, isNewForm: true, formName: `커스텀 템플릿` }));
     } else {
       setRetrospectQuestions(newQuestions);
     }

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

@@ -14,6 +14,7 @@ import { PATHS } from "@layer/shared";
 import { useNavigate } from "react-router-dom";
 import { useFunnelModal } from "@/hooks/useFunnelModal";
 import { useToast } from "@/hooks/useToast";
+import { queryClient } from "@/lib/tanstack-query/queryClient";
 
 const PAGE_STEPS = ["confirmTemplate", "mainInfo", "dueDate"] as const;
 const CUSTOM_TEMPLATE_STEPS = ["confirmDefaultTemplate", "editQuestions", "confirmEditTemplate"] as const;
@@ -46,14 +47,18 @@ export function RetrospectCreate() {
 
   const handleSubmit = useCallback(() => {
     if (!pageState.isLastStep) return;
+
     const questionsWithRequired = REQUIRED_QUESTIONS.concat(retroCreateData.questions);
     postRetrospectCreate(
       {
         spaceId: spaceIdNumber,
         body: { ...retroCreateData, questions: questionsWithRequired, curFormId: templateIdNumber },
       },
       {
-        onSuccess: () => {
+        onSuccess: async () => {
+          await queryClient.invalidateQueries({
+            queryKey: ["getSpaceInfo", String(spaceIdNumber)],
+          });
           navigate(PATHS.spaceDetail(String(spaceIdNumber)));
           closeFunnelModal();
           toast.success("회고가 생성되었어요!");

apps/web/src/app/desktop/component/retrospectCreate/steps/ConfirmDefaultTemplate.tsx

@@ -7,29 +7,39 @@ 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 } from "react";
+import { useContext, useEffect, useRef } from "react";
 
 import { useAtom, useAtomValue } from "jotai";
 import { retrospectCreateAtom } from "@/store/retrospect/retrospectCreate";
 import { useActionModal } from "@/hooks/useActionModal";
 import { TemplateChoice } from "@/app/desktop/component/retrospect/choice";
 import { retrospectInitialState } from "@/store/retrospect/retrospectInitial";
 import { RetrospectCreateContext } from "..";
+import { Tooltip } from "@/component/common/tip";
 
 export function ConfirmDefaultTemplate() {
   const { templateId, saveTemplateId } = useAtomValue(retrospectInitialState);
   const { goNext } = useContext(RetrospectCreateContext);
   const [retroCreateData, setRetroCreateData] = useAtom(retrospectCreateAtom);
   const { openActionModal } = useActionModal();
 
+  const titleRef = useRef<HTMLDivElement>(null);
+
   const {
     data: { title, tag, questions },
   } = useGetCustomTemplate(Number(templateId));
 
+  // 질문이 수정되었는지 여부에 따라 보여줄 텍스트 결정
+  const displayTitle = retroCreateData.hasChangedOriginal ? "커스텀 템플릿" : title;
+  const displayTag = retroCreateData.hasChangedOriginal ? "CUSTOM" : tag;
+
   useEffect(() => {
-    if (retroCreateData.questions.length > 0) return;
-    setRetroCreateData((prev) => ({ ...prev, questions }));
-  }, []);
+    setRetroCreateData((prev) => ({
+      ...prev,
+      questions,
+      curFormId: Number(templateId),
+    }));
+  }, [questions, templateId, setRetroCreateData]);
 
   const handleChangeTemplate = () => {
     openActionModal({
@@ -41,13 +51,13 @@ export function ConfirmDefaultTemplate() {
   return (
     <>
       <Header
-        title={`${saveTemplateId ? "해당" : "대표"} 템플릿으로 회고를 진행할까요?`}
-        contents={`${saveTemplateId ? "템플릿을 기반으로 질문을 커스텀 할 수 있어요" : "가장 최근에 선택한 회고 템플릿이에요"}`}
+        title={`${retroCreateData.hasChangedOriginal ? "수정된" : saveTemplateId ? "해당" : "대표"} 템플릿으로 회고를 진행할까요?`}
+        contents={`${retroCreateData.hasChangedOriginal ? "다음 회고에서도 해당 템플릿으로 제공해드릴게요!" : saveTemplateId ? "템플릿을 기반으로 질문을 커스텀 할 수 있어요" : "가장 최근에 선택한 회고 템플릿이에요"}`}
       />
       <Spacing size={4} />
       <div
+        ref={titleRef}
         css={css`
-          position: relative;
           display: flex;
           flex-direction: column;
           border: 1px solid #dfe3ea;
@@ -56,16 +66,36 @@ export function ConfirmDefaultTemplate() {
           overflow-y: auto;
         `}
       >
-        <Typography
-          variant={"S1"}
+        {/* ------- title , tag , 질문 수정 UI ------- */}
+        <div
           css={css`
-            padding-right: 13rem;
+            display: flex;
+            justify-content: space-between;
+            align-items: start;
           `}
         >
-          {title}
-        </Typography>
-        <Tag styles="margin-top: 0.8rem">{tag}</Tag>
+          <div
+            css={css`
+              padding-top: 0.2rem;
+            `}
+          >
+            <Typography variant={"S1"}>{displayTitle}</Typography>
+            <Tag styles="margin-top: 0.8rem">{displayTag}</Tag>
+          </div>
+          {retroCreateData.hasChangedOriginal ? (
+            <Tooltip>
+              <Tooltip.Trigger>
+                <QuestionEditButton />
+              </Tooltip.Trigger>
+              <Tooltip.Content message="커스텀된 템플릿의 이름을 수정할 수 있어요!" placement="top-end" offsetX={-15} offsetY={10} hideOnClick />
+            </Tooltip>
+          ) : (
+            <QuestionEditButton />
+          )}
+        </div>
         <Spacing size={3} />
+
+        {/* ------- 템플릿 질문 리스트 UI ------- */}
         <div
           css={css`
             overflow-y: auto;
@@ -80,8 +110,8 @@ export function ConfirmDefaultTemplate() {
             ))}
           </QuestionList>
         </div>
-        <QuestionEditButton />
       </div>
+
       <ButtonProvider sort={"horizontal"}>
         <ButtonProvider.Gray onClick={handleChangeTemplate}>템플릿 변경</ButtonProvider.Gray>
         <ButtonProvider.Primary onClick={goNext}>진행하기</ButtonProvider.Primary>

apps/web/src/component/common/button/ButtonProvider.tsx

@@ -56,7 +56,7 @@ export const ButtonProvider = ({
           position: sticky;
           bottom: 0;
           padding: ${isDesktop ? "0.8rem 0 1.6rem" : "4rem 0 2rem"};
-          background-color: ${funnelModalState.step === "listTemplateDetail" ? "#fff" : "transparent"};
+          background-color: ${isDesktop && funnelModalState.step === "listTemplateDetail" ? "#fff" : "transparent"};
           margin-top: auto;
           z-index: 10000;
         `,