Merge pull request depromeet#596 from depromeet/bugfix/595

fix: 분석 정보 확인 시에 노출되는 스페이스 관리 버튼 이벤트 연결

Author: klmhyeonwoo

apps/web/src/app/desktop/component/analysis/AnalysisOverview/AnalysisOverviewHeader.tsx

@@ -1,15 +1,18 @@
 import { Icon } from "@/component/common/Icon";
 import { Typography } from "@/component/common/typography";
+import SpaceManageToggleMenu from "@/component/space/edit/SpaceManageToggleMenu";
 import { currentSpaceState } from "@/store/space/spaceAtom";
 import { DESIGN_TOKEN_COLOR } from "@/style/designTokens";
+import { isSpaceLeader } from "@/utils/userUtil";
 import { css } from "@emotion/react";
 import { useAtomValue } from "jotai";
 
 export default function AnalysisOverviewHeader() {
   // TODO: 새로고침해도 query를 통해서 데이터를 불러오도록 수정 필요
   const currentSelectedSpace = useAtomValue(currentSpaceState);
 
-  const { name, introduction, memberCount, formTag } = currentSelectedSpace || {};
+  const { name, introduction, memberCount, formTag, leader, id: spaceId } = currentSelectedSpace || {};
+  const isLeader = isSpaceLeader(leader?.id);
 
   return (
     <section>
@@ -25,7 +28,7 @@ export default function AnalysisOverviewHeader() {
         <Typography variant="heading24Bold" color="gray900">
           {name}
         </Typography>
-        <Icon icon="ic_more" size={2.0} color={DESIGN_TOKEN_COLOR.gray900} />
+        {isLeader && <SpaceManageToggleMenu spaceId={spaceId!} iconSize={2.0} iconColor={"gray900"} />}
       </div>
 
       {/* ---------- 스페이스 소개 ---------- */}

apps/web/src/app/desktop/space/modify/ModifySpacePage.tsx

@@ -3,15 +3,15 @@ import { ImageUploader } from "@/component/common/ImageUploader";
 import { Input, InputLabelContainer, Label, TextArea } from "@/component/common/input";
 import { LoadingModal } from "@/component/common/Modal/LoadingModal";
 import { Spacing } from "@/component/common/Spacing";
-import useModifySpace from "@/hooks/app/space/useModifySpace";
+import useModifySpace, { MODIFY_SPACE_ID_QUERY_KEY } from "@/hooks/app/space/useModifySpace";
 import useDesktopBasicModal from "@/hooks/useDesktopBasicModal";
 import { css } from "@emotion/react";
 import { useSearchParams } from "react-router-dom";
 
 // 데스크톱 환경에서는 해당 수정 페이지가 모달 안에 이식되어요
 export default function ModifySpacePage() {
   const [searchParams] = useSearchParams();
-  const spaceId = searchParams.get("spaceId") as string;
+  const spaceId = searchParams.get(MODIFY_SPACE_ID_QUERY_KEY) as string;
   const {
     data,
     isLoading,

apps/web/src/component/space/edit/SpaceManageToggleMenu.tsx

@@ -1,28 +1,28 @@
 import ModifySpacePage from "@/app/desktop/space/modify/ModifySpacePage";
 import { Icon } from "@/component/common/Icon";
 import { ToggleMenu } from "@/component/common/toggleMenu";
-import useModifySpace from "@/hooks/app/space/useModifySpace";
+import useModifySpace, { MODIFY_SPACE_METHOD_QUERY_KEY, MODIFY_SPACE_ID_QUERY_KEY } from "@/hooks/app/space/useModifySpace";
 import useDesktopBasicModal from "@/hooks/useDesktopBasicModal";
 import { useModal } from "@/hooks/useModal";
 import useToggleMenu from "@/hooks/useToggleMenu";
 import { DESIGN_TOKEN_COLOR } from "@/style/designTokens";
 import { css } from "@emotion/react";
-import { useNavigate } from "react-router-dom";
+import { useSearchParams } from "react-router-dom";
 
 export default function SpaceManageToggleMenu({
   iconSize = 1.8,
   iconColor = "gray900",
   spaceId,
 }: {
   spaceId: string;
-  iconSize?: number;
+  iconSize?: number | string;
   iconColor?: keyof typeof DESIGN_TOKEN_COLOR;
 }) {
   const { isShowMenu, showMenu, hideMenu } = useToggleMenu();
-  const navigate = useNavigate();
   const { open: openDesktopModal } = useDesktopBasicModal();
   const { open: openAlertModal } = useModal();
-  const { onSubmitDeleteSpace, initializeSearchQuery } = useModifySpace({ id: spaceId });
+  const { onSubmitDeleteSpace, initializeSearchQuery } = useModifySpace({ id: spaceId.toString() });
+  const [_, setSearchParams] = useSearchParams();
 
   /**
    * @description 토글 메뉴 표시 함수
@@ -37,7 +37,11 @@ export default function SpaceManageToggleMenu({
    * @description 스페이스 수정 함수
    */
   const handleEditSpace = () => {
-    navigate(`?spaceId=${spaceId}&method=edit`, { replace: true });
+    setSearchParams((prev) => ({
+      ...Object.fromEntries(prev.entries()),
+      [MODIFY_SPACE_ID_QUERY_KEY]: spaceId,
+      [MODIFY_SPACE_METHOD_QUERY_KEY]: "edit",
+    }));
     openDesktopModal({
       title: "스페이스 수정",
       contents: <ModifySpacePage />,

apps/web/src/hooks/app/space/useModifySpace.ts

@@ -15,6 +15,9 @@ interface ModifySpaceProps {
   id: string;
 }
 
+export const MODIFY_SPACE_ID_QUERY_KEY = "modifyTargetId";
+export const MODIFY_SPACE_METHOD_QUERY_KEY = "method";
+
 export default function useModifySpace({ id }: ModifySpaceProps) {
   const { data, isLoading } = useApiGetSpace(id);
   const setterCurrentSpace = useSetAtom(currentSpaceState);
@@ -29,8 +32,8 @@ export default function useModifySpace({ id }: ModifySpaceProps) {
 
   const initializeSearchQuery = () => {
     const searchParams = new URLSearchParams(window.location.search);
-    searchParams.delete("method");
-    searchParams.delete("spaceId");
+    searchParams.delete(MODIFY_SPACE_METHOD_QUERY_KEY);
+    searchParams.delete(MODIFY_SPACE_ID_QUERY_KEY);
     navigate({ search: searchParams.toString() }, { replace: true });
   };