refactor: 데스크탑 템플릿 리스트 readOnly값 쿼리 파라미터로 변경

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

@@ -14,14 +14,15 @@ import { retrospectInitialState } from "@/store/retrospect/retrospectInitial";
 import { TemplateListConform } from "../TemplateListConform";
 import { useSearchParams } from "react-router-dom";
 
-function TemplateListDetailItem({ templateId, readOnly = false }: { templateId: number; readOnly?: boolean }) {
+function TemplateListDetailItem({ templateId }: { templateId: number }) {
   const { tabs, curTab, selectTab } = useTabs(["기본", "질문구성"] as const);
   const { data } = useGetTemplateInfo({ templateId: templateId });
   const { heading, description } = splitTemplateIntroduction(data.introduction);
   const { openFunnelModal, closeFunnelModal } = useFunnelModal();
   const setRetrospectValue = useSetAtom(retrospectInitialState);
   const [searchParams, setSearchParams] = useSearchParams();
   const type = searchParams.get("template_type");
+  const templateMode = searchParams.get("template_mode");
 
   /**
    * @description 회고 템플릿 선택하기 버튼 클릭 핸들러
@@ -64,7 +65,7 @@ function TemplateListDetailItem({ templateId, readOnly = false }: { templateId:
       <TemplateQuestion templateId={templateId} templateDetailQuestionList={data.templateDetailQuestionList} />
 
       {/* 읽기 전용(readOnly = true)일 경우에는 버튼 컨테이너를 노출시키지 않아요 */}
-      {!readOnly && (
+      {templateMode !== "readonly" && (
         <ButtonProvider sort={"horizontal"}>
           <ButtonProvider.Primary onClick={handleSelectTemplate}>선택하기</ButtonProvider.Primary>
         </ButtonProvider>

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

@@ -1,6 +1,4 @@
 import { css } from "@emotion/react";
-import { useContext } from "react";
-import { TemplateListPageContext } from "..";
 import { Typography } from "@/component/common/typography";
 import { Tag } from "@/component/common/tag";
 import { TemplateLottiePicture } from "@/component/template/TemplateLottiePicture";
@@ -21,11 +19,11 @@ type DesktopTemplateListItemProps = {
 };
 
 export function TemplateListItem({ id, title, tag, imageUrl }: DesktopTemplateListItemProps) {
-  const { readOnly } = useContext(TemplateListPageContext);
   const { openFunnelModal, closeFunnelModal } = useFunnelModal();
   const setRetrospectValue = useSetAtom(retrospectInitialState);
 
   const [searchParams, setSearchParams] = useSearchParams();
+  const templateMode = searchParams.get("template_mode");
   const type = searchParams.get("template_type");
 
   const handleClickDetail = () => {
@@ -89,7 +87,7 @@ export function TemplateListItem({ id, title, tag, imageUrl }: DesktopTemplateLi
           </div>
         )}
       </div>
-      {!readOnly ? (
+      {templateMode !== "readonly" ? (
         <button
           css={css`
             width: 100%;
@@ -125,7 +123,14 @@ export function TemplateListItem({ id, title, tag, imageUrl }: DesktopTemplateLi
           </Typography>
         </button>
       ) : (
-        <button onClick={handleClickDetail}>
+        <button
+          onClick={handleClickDetail}
+          css={css`
+            width: 100%;
+            text-align: center;
+            padding: 0.8rem 2rem;
+          `}
+        >
           <Typography variant={"body12Bold"} color={"gray800"}>
             더 알아보기
           </Typography>

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

@@ -15,15 +15,16 @@ import { TemplateListTab } from "./TemplateListTab";
 import { DESIGN_TOKEN_COLOR } from "@/style/designTokens";
 import { useSearchParams } from "react-router-dom";
 
-export const TemplateListPageContext = createContext<{ readOnly: boolean; spaceId: string; isLeader: boolean }>({
-  readOnly: false,
+export const TemplateListPageContext = createContext<{
+  spaceId: string;
+  isLeader: boolean;
+}>({
   spaceId: "",
   isLeader: false,
 });
 
 export function TemplateList() {
   const { toast } = useToast();
-  const isReadOnly = useRef(false);
   const isLeader = useRef(false);
   const params = useRequiredParams<{ spaceId?: string }>();
   const [searchParams] = useSearchParams();
@@ -57,7 +58,7 @@ export function TemplateList() {
           margin-top: 0.8rem;
         `}
       >
-        <TemplateListPageContext.Provider value={{ readOnly: isReadOnly.current, spaceId, isLeader: isLeader.current }}>
+        <TemplateListPageContext.Provider value={{ spaceId, isLeader: isLeader.current }}>
           <div
             css={css`
               display: flex;
@@ -80,8 +81,6 @@ export function TemplateList() {
               gap: 1.2rem;
               margin-top: 2rem;
               padding-bottom: 2.4rem;
-
-              // TODO 카드 리스트 반응형 대응을 해야할지..?
             `}
           >
             {

apps/web/src/app/desktop/component/retrospect/template/recommend/Done.tsx

@@ -41,7 +41,7 @@ function RecommendDone() {
     openFunnelModal({
       title: templateData.templateName,
       step: "listTemplateDetail",
-      contents: <TemplateListDetailItem templateId={Number(tempTemplateId)} readOnly={true} />,
+      contents: <TemplateListDetailItem templateId={Number(tempTemplateId)} />,
       templateTag: templateData.title,
       onPrevious: moveToRecommendTemplate,
     });

apps/web/src/app/desktop/retrospectSpace/RetroSpectSpacePage.tsx

@@ -58,7 +58,6 @@ export default function RetroSpectSpacePage() {
       `}
     >
       <RetrospectSpaceHeader />
-
       {/* 데스크탑 레이아웃 (980px 이상) */}
       <div
         css={css`
@@ -83,7 +82,6 @@ export default function RetroSpectSpacePage() {
         </div>
         <ActionItems />
       </div>
-
       {/* 태블릿 레이아웃 (980px 미만) */}
       <div
         css={css`

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

@@ -658,7 +658,7 @@ function RecommendRetrospectTemplateConfirmFunnel() {
     openFunnelModal({
       title,
       step: "listTemplateDetail",
-      contents: <TemplateListDetailItem templateId={id} readOnly={true} />,
+      contents: <TemplateListDetailItem templateId={id} />,
       templateTag: templateName,
       overlayIndex: 100002,
       onPrevious: closeFunnelModal,

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

@@ -11,13 +11,15 @@ import { useResetAtom } from "jotai/utils";
 import { retrospectCreateAtom } from "@/store/retrospect/retrospectCreate";
 import { FUNNEL_STEP_BACK_CONFIG, FUNNEL_STEPS_WITH_BACK } from "@/app/desktop/component/retrospect/template/constants";
 import { DESIGN_TOKEN_COLOR } from "@/style/designTokens";
+import { useSearchParams } from "react-router-dom";
 
 export default function DesktopFunnelModal() {
   const { open, close } = useModal();
   const { funnelModalState, openFunnelModal, closeFunnelModal } = useFunnelModal();
   const resetRetroCreateData = useResetAtom(retrospectCreateAtom);
   const { spaceId, templateId } = useAtomValue(retrospectInitialState);
   const { mutate: postRecentTemplateId } = usePostRecentTemplateId(Number(spaceId));
+  const [, setSearchParams] = useSearchParams();
 
   if (!funnelModalState.isOpen) return null;
 
@@ -43,7 +45,6 @@ export default function DesktopFunnelModal() {
     resetRetroCreateData();
     closeFunnelModal();
   };
-
   const handleClose = () => {
     if (funnelModalState.step === "retrospectCreate") {
       open({
@@ -60,6 +61,15 @@ export default function DesktopFunnelModal() {
         },
       });
     } else {
+      // readOnly 권한일 때 템플릿 상세 페이지의 쿼리 파라미터 제외
+      setSearchParams((prev) => {
+        const newParams = new URLSearchParams(prev);
+        if (newParams.has("template_mode")) {
+          newParams.delete("template_mode");
+        }
+        return newParams;
+      });
+
       closeFunnelModal();
     }
   };

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

@@ -17,13 +17,15 @@ import MemberManagement from "./members/MemberManagement";
 import { useQueries } from "@tanstack/react-query";
 import { useAtomValue, useSetAtom } from "jotai";
 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();
 
   const setRetrospectValue = useSetAtom(retrospectInitialState);
 
@@ -65,6 +67,12 @@ export default function RetrospectSpaceHeader() {
   };
 
   const handleMoveToListTemplate = () => {
+    // readOnly 권한일 때 템플릿 상세 페이지에서 사용될 쿼리 파라미터 추가
+    setSearchParams((prev) => {
+      const newParams = new URLSearchParams(prev);
+      newParams.set("template_mode", "readonly");
+      return newParams;
+    });
     openFunnelModal({
       title: "템플릿 리스트",
       step: "listTemplate",

apps/web/src/component/retrospect/template/list/CustomTemplateListItem.tsx

@@ -2,7 +2,6 @@ import { css } from "@emotion/react";
 import { useContext } from "react";
 import { useNavigate } from "react-router-dom";
 
-import { TemplateListPageContext } from "@/app/desktop/component/retrospect/template/list";
 import { BottomSheet } from "@/component/BottomSheet";
 import { Button, ButtonProvider } from "@/component/common/button";
 import { Card } from "@/component/common/Card";
@@ -19,6 +18,7 @@ import { useModal } from "@/hooks/useModal";
 import { useFunnelModal } from "@/hooks/useFunnelModal";
 import CustomTemplateListDetailItem from "@/app/desktop/component/retrospect/template/list/CustomTemplateListDetailItem";
 import { getDeviceType } from "@/utils/deviceUtils";
+import { TemplateListPageContext } from "@/app/mobile/retrospect/template/list/TemplateListPage";
 
 type CustomTemplateListItem = {
   id: number;