[feat] 주요활동 선택 스텝 리뉴얼

src/main.tsx

@@ -21,6 +21,13 @@ import '@styles/global.css';
 
 import App from './App';
 
+// TODO: UI 테스트용 MSW 활성화 — API 배포 후 제거
+async function enableMocking() {
+  if (!import.meta.env.DEV) return;
+  const { worker } = await import('./mocks/browser');
+  return worker.start({ onUnhandledRequest: 'bypass' });
+}
+
 initSentry();
 initClarity();
 
@@ -43,18 +50,22 @@ if (!rootElement) {
   throw new Error('Root element not found');
 }
 
-createRoot(rootElement, getSentryReactErrorHandlerOptions()).render(
-  // <StrictMode>
-  <ErrorBoundary FallbackComponent={AppErrorFallback}>
-    <HelmetProvider>
-      <QueryClientProvider client={queryClient}>
-        <OverlayProvider>
-          <App />
-          <ToastContainer {...toastConfig} />
-          {import.meta.env.DEV && <ReactQueryDevtools initialIsOpen={false} />}
-        </OverlayProvider>
-      </QueryClientProvider>
-    </HelmetProvider>
-  </ErrorBoundary>
-  // </StrictMode>
-);
+enableMocking().then(() => {
+  createRoot(rootElement, getSentryReactErrorHandlerOptions()).render(
+    // <StrictMode>
+    <ErrorBoundary FallbackComponent={AppErrorFallback}>
+      <HelmetProvider>
+        <QueryClientProvider client={queryClient}>
+          <OverlayProvider>
+            <App />
+            <ToastContainer {...toastConfig} />
+            {import.meta.env.DEV && (
+              <ReactQueryDevtools initialIsOpen={false} />
+            )}
+          </OverlayProvider>
+        </QueryClientProvider>
+      </HelmetProvider>
+    </ErrorBoundary>
+    // </StrictMode>
+  );
+});

src/mocks/handlers.ts

@@ -28,60 +28,84 @@ export const handlers = [
     });
   }),
 
-  // GET /api/v1/dashboard-info — 활동 옵션 (prefetchStaticData에서 호출)
-  http.get('*/api/v1/dashboard-info', () => {
+  // GET /api/v2/dashboard/activities — 주요활동 + 활동별 필수 가구
+  http.get('*/api/v2/dashboard/activities', () => {
     return HttpResponse.json({
       code: 200,
       message: 'OK',
       data: {
         activities: [
-          { code: 'COOKING', label: '요리' },
-          { code: 'READING', label: '독서' },
+          {
+            code: 'REMOTE_WORK',
+            label: '재택근무형',
+            furnitures: [{ id: 7, code: 'DESK', label: '업무용 책상' }],
+          },
+          {
+            code: 'READING',
+            label: '독서형',
+            furnitures: [{ id: 12, code: 'BOOKSHELF', label: '책 선반' }],
+          },
+          {
+            code: 'FLOOR_LIVING',
+            label: '좌식 생활형',
+            furnitures: [{ id: 9, code: 'LOW_TABLE', label: '좌식 테이블' }],
+          },
+          {
+            code: 'HOME_CAFE',
+            label: '홈카페형',
+            furnitures: [{ id: 8, code: 'DINING_TABLE', label: '식탁' }],
+          },
         ],
+      },
+    });
+  }),
+
+  // GET /api/v2/dashboard/categories — 가구 카테고리 + 카테고리별 가구
+  http.get('*/api/v2/dashboard/categories', () => {
+    return HttpResponse.json({
+      code: 200,
+      message: 'OK',
+      data: {
         categories: [
           {
             categoryId: 1,
-            nameKr: '침대',
+            nameKr: '침대/프레임',
             nameEng: 'BED',
             furnitures: [
-              { id: 1, code: 'BED_SINGLE', label: '싱글 침대' },
-              { id: 2, code: 'BED_DOUBLE', label: '더블 침대' },
+              { id: 1, code: 'BED_SINGLE', label: '싱글' },
+              { id: 2, code: 'BED_SUPER_SINGLE', label: '슈퍼싱글' },
+              { id: 3, code: 'BED_DOUBLE', label: '더블' },
+              { id: 4, code: 'BED_QUEEN_OR_LARGER', label: '퀸 이상' },
             ],
           },
           {
             categoryId: 2,
             nameKr: '소파',
             nameEng: 'SOFA',
             furnitures: [
-              { id: 3, code: 'SOFA_2', label: '2인 소파' },
-              { id: 4, code: 'SOFA_3', label: '3인 소파' },
+              { id: 5, code: 'SOFA_SINGLE', label: '1인용' },
+              { id: 6, code: 'SOFA_DOUBLE', label: '2인용' },
             ],
           },
           {
             categoryId: 3,
-            nameKr: '수납',
-            nameEng: 'STORAGE',
-            furnitures: [
-              { id: 5, code: 'STORAGE_SHELF', label: '선반' },
-              { id: 6, code: 'STORAGE_WARDROBE', label: '옷장' },
-            ],
-          },
-          {
-            categoryId: 4,
             nameKr: '테이블',
             nameEng: 'TABLE',
             furnitures: [
-              { id: 7, code: 'TABLE_DINING', label: '식탁' },
-              { id: 8, code: 'TABLE_COFFEE', label: '커피 테이블' },
+              { id: 7, code: 'DESK', label: '업무용 책상' },
+              { id: 8, code: 'DINING_TABLE', label: '식탁' },
+              { id: 9, code: 'LOW_TABLE', label: '좌식 테이블' },
             ],
           },
           {
-            categoryId: 5,
-            nameKr: '선택 가구',
+            categoryId: 4,
+            nameKr: '그 외',
             nameEng: 'SELECTIVE',
             furnitures: [
-              { id: 9, code: 'SELECTIVE_PLANT', label: '화분' },
-              { id: 10, code: 'SELECTIVE_LAMP', label: '스탠드 조명' },
+              { id: 10, code: 'MOVABLE_TV', label: '이동식 TV' },
+              { id: 11, code: 'FULL_MIRROR', label: '전신 거울' },
+              { id: 12, code: 'BOOKSHELF', label: '책 선반' },
+              { id: 13, code: 'DISPLAY_CABINET', label: '장식장' },
             ],
           },
         ],

src/pages/imageSetup/apis/queries/useActivitiesQuery.ts

@@ -0,0 +1,24 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { HTTPMethod, request } from '@apis/config/request';
+
+import { API_ENDPOINT } from '@constants/apiEndpoints';
+import { queryKeys } from '@constants/queryKey';
+
+import type { ActivitiesResponse } from '../../types/apis/activityInfo';
+
+export const getActivities = async (): Promise<ActivitiesResponse> => {
+  return request<ActivitiesResponse>({
+    method: HTTPMethod.GET,
+    url: API_ENDPOINT.IMAGE_SETUP.ACTIVITIES,
+  });
+};
+
+export const useActivitiesQuery = () => {
+  return useQuery({
+    queryKey: queryKeys.imageSetup.activities(),
+    queryFn: getActivities,
+    staleTime: Infinity,
+    gcTime: 1000 * 60 * 60 * 24,
+  });
+};

src/pages/imageSetup/apis/queries/useFurnitureCategoriesQuery.ts

@@ -0,0 +1,25 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { HTTPMethod, request } from '@apis/config/request';
+
+import { API_ENDPOINT } from '@constants/apiEndpoints';
+import { queryKeys } from '@constants/queryKey';
+
+import type { FurnitureCategoriesResponse } from '../../types/apis/activityInfo';
+
+export const getFurnitureCategories =
+  async (): Promise<FurnitureCategoriesResponse> => {
+    return request<FurnitureCategoriesResponse>({
+      method: HTTPMethod.GET,
+      url: API_ENDPOINT.IMAGE_SETUP.FURNITURE_CATEGORIES,
+    });
+  };
+
+export const useFurnitureCategoriesQuery = () => {
+  return useQuery({
+    queryKey: queryKeys.imageSetup.furnitureCategories(),
+    queryFn: getFurnitureCategories,
+    staleTime: Infinity,
+    gcTime: 1000 * 60 * 60 * 24,
+  });
+};

src/pages/imageSetup/components/layout/FunnelLayout.tsx

@@ -1,24 +1,35 @@
 import { overlay } from 'overlay-kit';
 import { useNavigate } from 'react-router-dom';
 
-import TitleNavBar from '@components/navBar/TitleNavBar';
 import Popup from '@components/overlay/popup/Popup';
 
+import TitleNavBar from '@/shared/components/v2/navBar/TitleNavBar';
+
 import * as styles from './FunnelLayout.css';
 import {
   logSelectHouseInfoClickModalContinue,
   logSelectHouseInfoClickModalExit,
   logSelectHouseInfoViewModal,
 } from '../../utils/analytics';
 
+type FunnelStepKey = 'FloorPlanSelect' | 'InteriorStyle' | 'ActivityInfo';
+
+// 퍼널 스텝 별 NavBar 타이틀 매핑
+const NAVBAR_TITLE_BY_STEP: Record<FunnelStepKey, string> = {
+  FloorPlanSelect: '공간 선택하기',
+  InteriorStyle: '취향 선택하기',
+  ActivityInfo: '가구 선택하기',
+};
+
 interface FunnelLayoutProps {
   children: React.ReactNode;
-  currentStep: 'FloorPlanSelect' | 'InteriorStyle' | 'ActivityInfo';
+  currentStep: FunnelStepKey;
 }
 
 const FunnelLayout = ({ children, currentStep }: FunnelLayoutProps) => {
   const navigate = useNavigate();
 
+  // TODO: 퍼널 전체 탈출 가드 useBlocker로 바꾸기
   const handleBackClick = () => {
     if (currentStep === 'FloorPlanSelect') {
       logSelectHouseInfoViewModal();
@@ -43,10 +54,8 @@ const FunnelLayout = ({ children, currentStep }: FunnelLayoutProps) => {
   return (
     <div className={styles.wrapper}>
       <TitleNavBar
-        // TODO: 각 스텝별 헤더 타이틀 설정하기
-        title="스타일링 이미지 생성"
-        isBackIcon={true}
-        isLoginBtn={false}
+        title={NAVBAR_TITLE_BY_STEP[currentStep]}
+        backLabel="이전"
         onBackClick={
           currentStep === 'FloorPlanSelect' ? handleBackClick : undefined
         }