merge to main

apps/mobile/package.json

@@ -2,7 +2,7 @@
   "name": "@layer/mobile",
   "main": "expo-router/entry",
   "types": "./bridge/native.ts",
-  "version": "2.0.12",
+  "version": "2.0.13",
   "scripts": {
     "start": "expo start",
     "reset-project": "node ./scripts/reset-project.js",

apps/mobile/provider/suspense-provider/index.tsx

@@ -16,7 +16,7 @@ import { router } from "expo-router";
 import { createContext } from "@/lib/create-context";
 
 const [Provider, useSuspense] = createContext<{ backgroundColor: string }>(
-  "SUSPENCE_PROVIDER"
+  "SUSPENCE_PROVIDER",
 );
 
 const DEFAULT_MESSAGE = "데이터를 가져오고 있어요";
@@ -83,7 +83,7 @@ const SuspenseProvider = ({ children }: PropsWithChildren) => {
 const createAnimation = (
   value: Animated.Value,
   toValue: number,
-  duration: number
+  duration: number,
 ): Animated.CompositeAnimation => {
   return Animated.timing(value, {
     toValue,

apps/web/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@layer/web",
   "private": true,
-  "version": "2.0.12",
+  "version": "2.0.13",
   "type": "module",
   "scripts": {
     "dev": "vite",

apps/web/src/app/desktop/component/analysis/AnalysisDialog/AnalysisIndividualContents.tsx

@@ -1,3 +1,4 @@
+import { Z_INDEX } from "@/style/zIndex";
 import { Icon, IconType } from "@/component/common/Icon/Icon";
 import { Typography } from "@/component/common/typography";
 import { SATISTFACTION_COLOR } from "@/component/write/template/template.const";
@@ -187,7 +188,7 @@ export default function AnalysisIndividualContents({ individualAnalysis }: Analy
                     display: flex;
                     align-items: center;
                     gap: 0.8rem;
-                    z-index: 10;
+                    z-index: ${Z_INDEX.localOverlay};
 
                     /* ---------- 말풍선 꼬리 ---------- */
                     &::after {

apps/web/src/app/desktop/component/analysis/AnalysisDialog/AnalysisTeamContents.tsx

@@ -1,3 +1,4 @@
+import { Z_INDEX } from "@/style/zIndex";
 import { Icon } from "@/component/common/Icon/Icon";
 import { Typography } from "@/component/common/typography";
 
@@ -202,7 +203,7 @@ export default function AnalysisTeamContents({ teamAnalyze }: AnalysisTeamConten
                     display: flex;
                     align-items: center;
                     gap: 0.8rem;
-                    z-index: 10;
+                    z-index: ${Z_INDEX.localOverlay};
 
                     /* ---------- 말풍선 꼬리 ---------- */
                     &::after {

apps/web/src/app/desktop/component/home/ActionItemsWrapper/index.tsx

@@ -1,3 +1,4 @@
+import { Z_INDEX } from "@/style/zIndex";
 import { COOKIE_KEYS, LOCAL_STORAGE_KEYS } from "@/config/storage-keys";
 import Cookies from "js-cookie";
 
@@ -199,7 +200,7 @@ export default function ActionItemsWrapper() {
               border: 1px solid ${DESIGN_TOKEN_COLOR.gray300};
               top: 50%;
               transform: translateY(-50%);
-              z-index: 10;
+              z-index: ${Z_INDEX.localOverlay};
 
               &::after {
                 font-size: 1.4rem;

apps/web/src/app/desktop/component/home/InProgressRetrospectsWrapper/index.tsx

@@ -1,3 +1,4 @@
+import { Z_INDEX } from "@/style/zIndex";
 import { css } from "@emotion/react";
 import { Typography } from "@/component/common/typography";
 
@@ -51,7 +52,7 @@ export default function InProgressRetrospectsWrapper() {
             width: 8rem;
             height: 100%;
             background: linear-gradient(to left, ${DESIGN_TOKEN_COLOR.gray100}, rgba(255, 255, 255, 0));
-            z-index: 2;
+            z-index: ${Z_INDEX.raised};
             pointer-events: none;
             opacity: 1;
             transition: opacity 0.3s ease;
@@ -66,7 +67,7 @@ export default function InProgressRetrospectsWrapper() {
             width: 8rem;
             height: 100%;
             background: linear-gradient(to right, ${DESIGN_TOKEN_COLOR.gray100}, rgba(255, 255, 255, 0));
-            z-index: 2;
+            z-index: ${Z_INDEX.raised};
             pointer-events: none;
             opacity: 0;
             transition: opacity 0.3s ease;
@@ -101,7 +102,7 @@ export default function InProgressRetrospectsWrapper() {
             border: 1px solid ${DESIGN_TOKEN_COLOR.gray200};
             top: 65%;
             transform: translateY(-50%);
-            z-index: 10;
+            z-index: ${Z_INDEX.localOverlay};
 
             &::after {
               font-size: 1.6rem;

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

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

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

@@ -1,3 +1,4 @@
+import { Z_INDEX } from "@/style/zIndex";
 import { css } from "@emotion/react";
 import { Typography } from "@/component/common/typography";
 import { Tag } from "@/component/common/tag";
@@ -36,7 +37,7 @@ export function TemplateListItem({ id, title, tag, imageUrl }: DesktopTemplateLi
       step: "listTemplateDetail",
       contents: <TemplateListDetailItem templateId={id} />,
       templateTag: tag,
-      overlayIndex: 10002,
+      overlayIndex: Z_INDEX.popoverRaised,
     });
   };
 

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

@@ -1,3 +1,4 @@
+import { Z_INDEX } from "@/style/zIndex";
 import { css } from "@emotion/react";
 
 import { useTabs } from "@/hooks/useTabs";
@@ -31,7 +32,7 @@ export function TemplateListTab<T extends string>({ tabs, curTab, selectTab, Tab
           display: inline-flex;
           gap: 0.8rem;
           padding-top: 2rem;
-          z-index: 1001;
+          z-index: ${Z_INDEX.sticky};
           border-bottom: 0.2rem solid ${DESIGN_TOKEN_COLOR.gray200};
         `,
       ]}

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

@@ -2,7 +2,11 @@ import { useRequiredParams } from "@/hooks/useRequiredParams";
 import { useTabs } from "@/hooks/useTabs";
 import { useToast } from "@/hooks/useToast";
 import { css } from "@emotion/react";
-import { createContext, useEffect, useRef } from "react";
+import { createContext, useEffect } from "react";
+import { useAtomValue } from "jotai";
+import { currentSpaceState } from "@/store/space/spaceAtom";
+import { branchLayoutAtom } from "@/store/auth/authAtom";
+import { isSpaceLeader } from "@/utils/userUtil";
 import { TemplateListTabButton } from "./TemplateListTab/TemplateListTabButton";
 import { CustomTemplateList } from "@/component/retrospect/template/list";
 import { useGetDefaultTemplateList } from "@/hooks/api/template/useGetDefaultTemplateList";
@@ -16,8 +20,6 @@ import { DESIGN_TOKEN_COLOR } from "@/style/designTokens";
 import { useSearchParams } from "react-router-dom";
 import { trackEvent } from "@/lib/google-analytics";
 import { GA_EVENTS } from "@/lib/google-analytics/events";
-import { useAtomValue } from "jotai";
-import { branchLayoutAtom } from "@/store/auth/authAtom";
 import { Button } from "@/component/common/button";
 import { useFunnelModal } from "@/hooks/useFunnelModal";
 import { TemplateRecommend } from "../recommend";
@@ -112,7 +114,8 @@ function RecommendBanner({ onClickRecommend }: { onClickRecommend: () => void })
 
 export function TemplateList() {
   const { toast } = useToast();
-  const isLeader = useRef(false);
+  const currentSpace = useAtomValue(currentSpaceState);
+  const isLeader = isSpaceLeader(currentSpace?.leader?.id);
   const params = useRequiredParams<{ spaceId?: string }>();
   const [searchParams] = useSearchParams();
   const spaceId = params.spaceId || searchParams.get("spaceId") || "";
@@ -163,7 +166,7 @@ export function TemplateList() {
           margin-top: 2rem;
         `}
       >
-        <TemplateListPageContext.Provider value={{ spaceId, isLeader: isLeader.current }}>
+        <TemplateListPageContext.Provider value={{ spaceId, isLeader }}>
           {branchLayout === "A" ? <InfoBanner /> : <RecommendBanner onClickRecommend={handleClickRecommend} />}
           <ul
             css={css`

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

@@ -1,3 +1,4 @@
+import { Z_INDEX } from "@/style/zIndex";
 import { css } from "@emotion/react";
 import { forwardRef, useEffect, useMemo, useRef } from "react";
 import type { CalendarProps } from "react-calendar";
@@ -69,7 +70,7 @@ const DesktopDateTimePicker = forwardRef<HTMLDivElement, DesktopDateTimePickerPr
         box-shadow:
           0 4px 12px 0 rgba(6, 8, 12, 0.12),
           0 4px 8px 0 rgba(6, 8, 12, 0.08);
-        z-index: 10;
+        z-index: ${Z_INDEX.localOverlay};
         gap: ${isDesktop ? "1.6rem" : "2.8rem"};
       `}
       ref={ref}

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

@@ -1,3 +1,4 @@
+import { Z_INDEX } from "@/style/zIndex";
 import { Icon } from "@/component/common/Icon";
 import useDesktopBasicModal from "@/hooks/useDesktopBasicModal";
 import { DESIGN_TOKEN_COLOR } from "@/style/designTokens";
@@ -46,7 +47,7 @@ function QuestionEditButton({ onClose, ...props }: QuestionEditButtonProps) {
         color: ${DESIGN_TOKEN_COLOR.gray700};
         font-weight: 600;
         cursor: pointer;
-        z-index: 10;
+        z-index: ${Z_INDEX.localOverlay};
         background-color: white;
 
         &:hover {

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

@@ -1,3 +1,5 @@
+import { retrospectQueryKeys } from "@/hooks/api/retrospect/queryKeys";
+import { spaceQueryKeys } from "@/hooks/api/space/queryKeys";
 import { createContext, useCallback, useEffect } from "react";
 import { ProgressBar } from "@/component/common/ProgressBar";
 import { css } from "@emotion/react";
@@ -63,11 +65,11 @@ export function RetrospectCreate() {
         onSuccess: async () => {
           // 사용자가 템플릿을 변경하거나, 회고를 생성할 때 변경된 정보가 있으면 스페이스 정보를 다시 가져옵니다.
           await queryClient.invalidateQueries({
-            queryKey: ["getSpaceInfo", spaceIdNumber],
+            queryKey: spaceQueryKeys.info(spaceIdNumber),
           });
           // 사용자가 회고를 추가했다면, 회고 리스트 조회를 다시 리패치합니다.
           await queryClient.invalidateQueries({
-            queryKey: ["getRetrospects", spaceIdNumber],
+            queryKey: retrospectQueryKeys.list(spaceIdNumber),
           });
           navigate(PATHS.spaceDetail(String(spaceIdNumber)));
           closeFunnelModal();

apps/web/src/app/desktop/component/retrospectWrite/complete/index.tsx

@@ -1,3 +1,4 @@
+import { Z_INDEX } from "@/style/zIndex";
 import { css, keyframes } from "@emotion/react";
 import Lottie from "lottie-react";
 import { useEffect, useState } from "react";
@@ -112,20 +113,20 @@ export function RetrospectWriteComplete() {
 
               div:nth-of-type(1) {
                 background-color: #243753;
-                z-index: 3;
+                z-index: ${Z_INDEX.elevated};
                 position: relative;
               }
 
               div:nth-of-type(2) {
                 background-color: #c4d7fd;
-                z-index: 2;
+                z-index: ${Z_INDEX.raised};
                 transform: rotate(-8deg);
                 animation: ${CARD_ANIMATION.FIRST_CARD} 0.6s ease-in-out;
               }
 
               div:nth-of-type(3) {
                 background-color: #a7c4fc;
-                z-index: 1;
+                z-index: ${Z_INDEX.base};
                 transform: rotate(-16deg);
                 animation: ${CARD_ANIMATION.SECOND_CARD} 0.8s ease-in-out;
               }
@@ -144,7 +145,7 @@ export function RetrospectWriteComplete() {
                   right: -5%;
                   width: 20%;
                   height: auto;
-                  z-index: 4;
+                  z-index: ${Z_INDEX.foreground};
                 `}
               />
               <div
@@ -198,7 +199,7 @@ export function RetrospectWriteComplete() {
                 transform: translate(-50%, -50%);
                 width: 90%;
                 height: 80%;
-                z-index: -1;
+                z-index: ${Z_INDEX.behind};
               `}
             />
           )}

apps/web/src/app/desktop/component/retrospectWrite/prepare/index.tsx

@@ -1,3 +1,4 @@
+import { Z_INDEX } from "@/style/zIndex";
 import { useMixpanel } from "@/lib/provider/mix-pannel-provider";
 import { Header } from "@/component/common/header";
 import { css } from "@emotion/react";
@@ -58,7 +59,7 @@ export function Prepare({ spaceId, retrospectId, title, introduction }: PrepareP
               width: 100%;
               height: 40%;
               top: -10%;
-              z-index: 10000;
+              z-index: ${Z_INDEX.overlay};
               transform: scale(1, -1);
             `}
           />
@@ -70,7 +71,7 @@ export function Prepare({ spaceId, retrospectId, title, introduction }: PrepareP
               width: 100%;
               height: 60%;
               bottom: 0;
-              z-index: 10000;
+              z-index: ${Z_INDEX.overlay};
             `}
           />
           <Swiper

apps/web/src/app/desktop/component/retrospectWrite/writeDialog/WriteDialogHeader.tsx

@@ -1,3 +1,4 @@
+import { Z_INDEX } from "@/style/zIndex";
 import { Icon } from "@/component/common/Icon";
 import { Typography } from "@/component/common/typography";
 import { DESIGN_TOKEN_COLOR } from "@/style/designTokens";
@@ -68,7 +69,7 @@ export function WriteDialogHeader({
       css={css`
         position: sticky;
         top: 0;
-        z-index: 10;
+        z-index: ${Z_INDEX.localOverlay};
         display: flex;
         justify-content: space-between;
         align-items: center;

apps/web/src/app/desktop/login/DesktopLoginPage.tsx

@@ -1,3 +1,4 @@
+import { Z_INDEX } from "@/style/zIndex";
 import "swiper/css";
 import "swiper/css/navigation";
 import { Icon } from "@/component/common/Icon";
@@ -215,7 +216,7 @@ export default function DesktopLoginPage() {
                 border: 0.11rem solid ${DESIGN_TOKEN_COLOR.gray300};
                 top: 55%;
                 transform: translateY(-50%);
-                z-index: 10;
+                z-index: ${Z_INDEX.localOverlay};
                 transition: all 0.4s;
 
                 &::after {