feat: 회고 추가하기 클릭 시 모달 플로우 개선

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

@@ -37,6 +37,7 @@ function QuestionEditButton({ onClose, ...props }: QuestionEditButtonProps) {
         display: flex;
         justify-content: center;
         align-items: center;
+        min-width: 12rem;
         border: 1px solid #dfe3ea;
         border-radius: 3rem;
         padding: 1.2rem 1.6rem 1.2rem 1.2rem;

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

@@ -3,7 +3,7 @@ import { ProgressBar } from "@/component/common/ProgressBar";
 import { css } from "@emotion/react";
 import { useMultiStepForm } from "@/hooks/useMultiStepForm";
 import { usePostRetrospectCreate } from "@/hooks/api/retrospect/create/usePostRetrospectCreate";
-import { useAtomValue } from "jotai";
+import { useAtom, useAtomValue } from "jotai";
 import { retrospectCreateAtom } from "@/store/retrospect/retrospectCreate";
 import { REQUIRED_QUESTIONS } from "@/component/retrospectCreate/customTemplate/questions.const";
 import { retrospectInitialState } from "@/store/retrospect/retrospectInitial";
@@ -34,9 +34,10 @@ export function RetrospectCreate() {
   const navigate = useNavigate();
   const { closeFunnelModal } = useFunnelModal();
   const { toast } = useToast();
-  const { spaceId, templateId } = useAtomValue(retrospectInitialState);
-  const spaceIdNumber = Number(spaceId);
-  const templateIdNumber = Number(templateId);
+
+  const [retrospectValue, setRetrospectValue] = useAtom(retrospectInitialState);
+  const spaceIdNumber = Number(retrospectValue.spaceId);
+  const templateIdNumber = Number(retrospectValue.templateId);
 
   const retroCreateData = useAtomValue(retrospectCreateAtom);
   const { mutate: postRetrospectCreate, isPending } = usePostRetrospectCreate(spaceIdNumber);
@@ -62,6 +63,13 @@ export function RetrospectCreate() {
           navigate(PATHS.spaceDetail(String(spaceIdNumber)));
           closeFunnelModal();
           toast.success("회고가 생성되었어요!");
+
+          setRetrospectValue({
+            spaceId: "",
+            templateId: "",
+            tempTemplateId: "",
+            saveTemplateId: false,
+          });
         },
       },
     );

apps/web/src/app/desktop/space/add/AddSpacePage.tsx

@@ -755,15 +755,39 @@ function CreateRetrospectQuestionFunnel() {
           overflow-y: auto;
         `}
       >
-        <Typography
-          variant={"S1"}
+        <div
           css={css`
-            padding-right: 13rem;
+            display: flex;
+            justify-content: space-between;
+            align-items: start;
           `}
         >
-          {customTemplateInfo.title}
-        </Typography>
-        <Tag styles="margin-top: 0.8rem">{customTemplateInfo.tag}</Tag>
+          <div
+            css={css`
+              padding-top: 0.2rem;
+            `}
+          >
+            <Typography variant={"S1"}>{customTemplateInfo.title}</Typography>
+            <Tag styles="margin-top: 0.8rem">{customTemplateInfo.tag}</Tag>
+          </div>
+          <QuestionEditButton
+            onClose={() => {
+              openDesktopModal({
+                title: "",
+                contents: <AddSpacePage />,
+                options: {
+                  enableFooter: false,
+                  needsBackButton: false,
+                },
+                onClose: () => {
+                  resetRetrospectInfo();
+                  resetSpaceInfo();
+                },
+              });
+            }}
+          />
+        </div>
+
         <Spacing size={3} />
         <div
           css={css`
@@ -779,22 +803,6 @@ function CreateRetrospectQuestionFunnel() {
             ))}
           </QuestionList>
         </div>
-        <QuestionEditButton
-          onClose={() => {
-            openDesktopModal({
-              title: "",
-              contents: <AddSpacePage />,
-              options: {
-                enableFooter: false,
-                needsBackButton: false,
-              },
-              onClose: () => {
-                resetRetrospectInfo();
-                resetSpaceInfo();
-              },
-            });
-          }}
-        />
       </div>
       <Spacing size={4} />
       <ButtonProvider

apps/web/src/component/common/Modal/DesktopFunnelModal.tsx

@@ -4,7 +4,7 @@ import { ANIMATION } from "@/style/common/animation";
 import { useFunnelModal } from "@/hooks/useFunnelModal";
 import { useModal } from "@/hooks/useModal";
 import DesktopFunnelModalHeader from "./DesktopFunnelModalHeader";
-import { useAtomValue } from "jotai";
+import { useAtomValue, useSetAtom } from "jotai";
 import { retrospectInitialState } from "@/store/retrospect/retrospectInitial";
 import { usePostRecentTemplateId } from "@/hooks/api/template/usePostRecentTemplateId";
 import { useResetAtom } from "jotai/utils";
@@ -19,6 +19,7 @@ export default function DesktopFunnelModal() {
   const resetRetroCreateData = useResetAtom(retrospectCreateAtom);
   const { spaceId, templateId } = useAtomValue(retrospectInitialState);
   const { mutate: postRecentTemplateId } = usePostRecentTemplateId(Number(spaceId));
+  const setRetrospectValue = useSetAtom(retrospectInitialState);
   const [, setSearchParams] = useSearchParams();
 
   if (!funnelModalState.isOpen) return null;
@@ -57,6 +58,10 @@ export default function DesktopFunnelModal() {
           close();
         },
         onConfirm: () => {
+          setRetrospectValue((prev) => ({
+            ...prev,
+            saveTemplateId: false,
+          }));
           quitPage();
         },
       });

apps/web/src/component/retrospect/space/RetrospectSpaceHeader.tsx

@@ -1,12 +1,9 @@
-import { TemplateChoice } from "@/app/desktop/component/retrospect/choice";
 import { RetrospectCreate } from "@/app/desktop/component/retrospectCreate";
 import { Icon } from "@/component/common/Icon/Icon";
 import { Typography } from "@/component/common/typography";
 import SpaceManageToggleMenu from "@/component/space/edit/SpaceManageToggleMenu";
 import { useApiOptionsGetSpaceInfo } from "@/hooks/api/space/useApiOptionsGetSpaceInfo";
-import { useActionModal } from "@/hooks/useActionModal";
 import { useFunnelModal } from "@/hooks/useFunnelModal";
-import { useModal } from "@/hooks/useModal";
 import { useRequiredParams } from "@/hooks/useRequiredParams";
 import { retrospectInitialState } from "@/store/retrospect/retrospectInitial";
 import { currentSpaceState } from "@/store/space/spaceAtom";
@@ -20,9 +17,8 @@ import { TemplateList } from "@/app/desktop/component/retrospect/template/list";
 import { useSearchParams } from "react-router-dom";
 
 export default function RetrospectSpaceHeader() {
-  const { open } = useModal();
   const { openFunnelModal } = useFunnelModal();
-  const { openActionModal } = useActionModal();
+
   const currentSpace = useAtomValue(currentSpaceState);
   const { spaceId } = useRequiredParams<{ spaceId: string }>();
   const [_, setSearchParams] = useSearchParams();
@@ -43,25 +39,10 @@ export default function RetrospectSpaceHeader() {
         templateId: String(spaceInfo.formId),
       }));
 
-      open({
-        title: "전에 진행했던 템플릿이 있어요!\n계속 진행하시겠어요?",
-        contents: "",
-        options: {
-          buttonText: ["재설정", "진행하기"],
-        },
-        onConfirm: () => {
-          openFunnelModal({
-            title: "",
-            step: "retrospectCreate",
-            contents: <RetrospectCreate />,
-          });
-        },
-        onClose: () => {
-          openActionModal({
-            title: "",
-            contents: <TemplateChoice />,
-          });
-        },
+      openFunnelModal({
+        title: "",
+        step: "retrospectCreate",
+        contents: <RetrospectCreate />,
       });
     }
   };