Merge pull request #761 from depromeet/feature/760

feat: 템플릿 리스트 관련 플로우 개선

Author: klmhyeonwoo

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

@@ -61,7 +61,7 @@ export function TemplateListConform() {
         height: 100%;
       `}
     >
-      <Header title={"해당 템플릿으로\n회고를 진행할까요?"} />
+      <Header title={"추천받은 템플릿 질문들로\n회고를 진행할까요?"} />
       <Spacing size={12} />
       <div
         css={css`

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

@@ -7,6 +7,10 @@ import { TemplateLottiePicture } from "@/component/template/TemplateLottiePictur
 import { DESIGN_SYSTEM_COLOR } from "@/style/variable";
 import { useFunnelModal } from "@/hooks/useFunnelModal";
 import TemplateListDetailItem from "../TemplateListDetailItem";
+import { useSetAtom } from "jotai";
+import { retrospectInitialState } from "@/store/retrospect/retrospectInitial";
+import { TemplateListConform } from "../TemplateListConform";
+import { useSearchParams } from "react-router-dom";
 
 type DesktopTemplateListItemProps = {
   id: number;
@@ -18,7 +22,11 @@ type DesktopTemplateListItemProps = {
 
 export function TemplateListItem({ id, title, tag, imageUrl }: DesktopTemplateListItemProps) {
   const { readOnly } = useContext(TemplateListPageContext);
-  const { openFunnelModal } = useFunnelModal();
+  const { openFunnelModal, closeFunnelModal } = useFunnelModal();
+  const setRetrospectValue = useSetAtom(retrospectInitialState);
+
+  const [searchParams, setSearchParams] = useSearchParams();
+  const type = searchParams.get("template_type");
 
   const handleClickDetail = () => {
     openFunnelModal({
@@ -90,6 +98,27 @@ export function TemplateListItem({ id, title, tag, imageUrl }: DesktopTemplateLi
             border-radius: 0.8rem;
             border: 0.1rem solid #dfe3ea;
           `}
+          onClick={(event) => {
+            // 선택하기 버튼 클릭 시, 상위로 이벤트를 전파하지 않고 바로 템플릿 확정 페이지로 이동합니다.
+            event.stopPropagation();
+            if (type === "new_space") {
+              // 새로운 스페이스 생성을 진행할 때 (+ 회고 템플릿 동시 생성)
+              setSearchParams({ selected_template_id: id.toString() });
+              closeFunnelModal();
+            } else {
+              // 기존 스페이스가 존재할 때, (회고 템플릿 별도 생성)
+              setRetrospectValue((prev) => ({
+                ...prev,
+                tempTemplateId: String(id),
+                saveTemplateId: true,
+              }));
+              openFunnelModal({
+                title: "",
+                step: "recommendTemplate",
+                contents: <TemplateListConform />,
+              });
+            }
+          }}
         >
           <Typography variant={"body12Bold"} color={"gray800"}>
             선택하기

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

@@ -320,6 +320,11 @@ function SelectRetrospectTemplateFunnel() {
     }
   }, [searchParams]);
 
+  useEffect(() => {
+    // 컴포넌트 언마운트 시점에 쿼리 스트링을 정리
+    return () => setSearchParams({});
+  }, []);
+
   return (
     <Fragment>
       <Header title={`${title}에 맞는\n회고 템플릿을 찾아볼까요?`} />
@@ -668,7 +673,7 @@ function RecommendRetrospectTemplateConfirmFunnel() {
         height: 100%;
       `}
     >
-      <Header title={"해당 템플릿으로\n회고를 진행할까요?"} contents="템플릿을 기반으로 질문을 커스텀 할 수 있어요" />
+      <Header title={"추천받은 템플릿 질문들로\n회고를 진행할까요?"} contents="템플릿을 기반으로 질문을 커스텀 할 수 있어요" />
       <Spacing size={10} />
       <div
         css={css`