[feat/#58] 디자인 QA 및 스냅샷 재촬영 로직 수정

src/components/Crew/MyCrew/MyCrewHeader.tsx

@@ -1,21 +1,24 @@
 import CreateCrewIcon from "@assets/icons/crew-create-button-icon.svg?react"
 
 interface MyCrewHeaderProps {
-  openCreateModal: () => void
+  openCreateModal?: () => void
+  isDisplayedCreationButton?: boolean
 }
 
 export default function MyCrewHeader(props: MyCrewHeaderProps) {
-  const { openCreateModal } = props
+  const { openCreateModal, isDisplayedCreationButton = false } = props
   return (
     <div className="mb-6 flex w-full items-baseline">
       <div className="flex-grow text-[22px] font-bold text-zinc-900">나의 크루</div>
-      <div
-        className="flex w-[138px] cursor-pointer items-center justify-center gap-[10px] rounded-[33px] bg-zinc-800 p-[10px] text-sm font-semibold text-white"
-        onClick={openCreateModal}
-      >
-        <CreateCrewIcon />
-        <div>크루 만들기</div>
-      </div>
+      {isDisplayedCreationButton && (
+        <div
+          className="flex w-[138px] cursor-pointer items-center justify-center gap-[10px] rounded-[33px] bg-zinc-800 p-[10px] text-sm font-semibold text-white"
+          onClick={openCreateModal}
+        >
+          <CreateCrewIcon />
+          <div>크루 만들기</div>
+        </div>
+      )}
     </div>
   )
 }

src/components/Posture/PostrueCrew.tsx

@@ -1,9 +1,11 @@
 import { duration, notification } from "@/api/notification"
+import EmptyGroupImage from "@/assets/images/crew-empty.png"
+import RoutePath from "@/constants/routes.json"
 import { useModals } from "@/hooks/useModals"
+import useMyGroup from "@/hooks/useMyGroup"
 import useNotification from "@/hooks/useNotification"
 import { useModifyNoti } from "@/hooks/useNotiMutation"
 import usePushNotification from "@/hooks/usePushNotification"
-import { useCreateSnaphot } from "@/hooks/useSnapshotMutation"
 import { useAuthStore } from "@/store"
 import { useSnapShotStore } from "@/store/SnapshotStore"
 import CloseCrewPanelIcon from "@assets/icons/crew-panel-close-button.svg?react"
@@ -13,11 +15,8 @@ import QuestionIcon from "@assets/icons/question-info-icon.svg?react"
 import RankingGuideToolTip from "@assets/images/ranking-guide.png"
 import SelectBox from "@components/SelectBox"
 import { ReactElement, useCallback, useEffect, useRef, useState } from "react"
-import { modals } from "../Modal/Modals"
-import useMyGroup from "@/hooks/useMyGroup"
-import EmptyGroupImage from "@/assets/images/crew-empty.png"
 import { useNavigate } from "react-router-dom"
-import RoutePath from "@/constants/routes.json"
+import { modals } from "../Modal/Modals"
 
 interface IPostureCrew {
   groupUserId: number
@@ -128,7 +127,6 @@ export default function PostrueCrew(props: PostureCrewProps): ReactElement {
   const accessToken = useAuthStore((state) => state.accessToken)
   const { resetSnapShot } = useSnapShotStore()
   const { openModal } = useModals()
-  const createSnapMutation = useCreateSnaphot()
   const wsUrl = `wss://api.alignlab.site/ws/v1/groups/1/users?X-HERO-AUTH-TOKEN=${accessToken}`
   const { isConnected, crews } = useWebSocket(wsUrl)
 
@@ -181,9 +179,6 @@ export default function PostrueCrew(props: PostureCrewProps): ReactElement {
 
   const onClickReTakeSnapShot = () => {
     resetSnapShot()
-    createSnapMutation.mutate({
-      points: [],
-    })
   }
 
   console.log("notification: ", notification)

src/layouts/MonitoringLayout.tsx

@@ -2,7 +2,7 @@ import { Outlet } from "react-router-dom"
 
 export default function MonitoringLayout() {
   return (
-    <div className="h-full min-w-[652px] bg-zinc-900 p-3 ">
+    <div className="h-full min-w-[652px] bg-zinc-900">
       <Outlet />
     </div>
   )

src/pages/MonitoringPage.tsx

@@ -41,9 +41,9 @@ const MonitoringPage: React.FC = () => {
   return (
     <div className="relative flex h-full w-full overflow-hidden">
       {/* Main content area */}
-      <div className={`flex-grow transition-all duration-300 ${isSidebarOpen && !isPopupOpen ? "pr-[232px]" : ""}`}>
-        <div className="relative flex h-full items-center justify-center p-3">
-          <div className="aspect-video w-full max-w-[1280px]">
+      <div className={`flex-grow transition-all duration-300 ${isSidebarOpen && !isPopupOpen ? "pr-[224px]" : ""}`}>
+        <div className="relative flex h-full items-center justify-center">
+          <div className="aspect-video w-full max-w-[1280px] p-8">
             <PoseDetector />
           </div>
           {!hasPermission && (

src/pages/MyCrew.tsx

@@ -56,7 +56,7 @@ export default function MyCrew() {
 
   return (
     <>
-      <MyCrewHeader openCreateModal={() => {}} />
+      <MyCrewHeader />
       {/* {!isLoading && ()} */}
 
       <div className="flex w-full justify-between">
@@ -100,7 +100,7 @@ export default function MyCrew() {
         </div>
         <div className="flex flex-1 flex-col items-center gap-6 rounded-[10px] border-[1px] border-solid border-gray-200 bg-white px-[70px] py-6">
           <span className="font-[13px] font-bold text-[#1A75FF]">크루 소개</span>
-          <p className="overflow-wrap-break-word w-full">{myGroupData?.description}</p>
+          <p className="overflow-wrap-break-word w-full text-center">{myGroupData?.description}</p>
         </div>
       </div>