대시보드 UI 구현

.prettierrc

@@ -0,0 +1,9 @@
+{
+  "useTabs": false,
+  "printWidth": 80,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "endOfLine": "lf",
+  "arrowParens": "always"
+}

package.json

@@ -17,11 +17,13 @@
   "dependencies": {
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
-    "@pic-pik/react": "^0.1.3",
     "@hookform/resolvers": "^3.9.0",
+    "@pic-pik/react": "^0.1.3",
     "@tanstack/react-query": "^5.51.24",
     "@tanstack/react-query-devtools": "^5.51.24",
+    "@tanstack/react-table": "^8.20.5",
     "axios": "^1.7.4",
+    "date-fns": "^4.0.0",
     "jotai": "^2.9.3",
     "lodash": "^4.17.21",
     "msw": "^2.3.5",

src/App.tsx

@@ -1,11 +1,19 @@
-import AppRoutes from "routes/AppRoutes";
-import Layout from "common/components/layout";
+import AppRoutes from 'routes/AppRoutes';
+import Layout from 'common/components/layout';
+import ErrorBoundary from 'common/components/errorBoundary';
+import ErrorOrLoaderMsg from 'common/components/loader';
+import { Suspense } from 'react';
 
 //아래 Route외 html Layout 컴포넌트로 변경 예정
 function App() {
+  // 레이아웃 내부에 에러바운더리, 로더 추가
   return (
     <Layout>
-      <AppRoutes />
+      <ErrorBoundary fallbackUI={<ErrorOrLoaderMsg type="error" />}>
+        <Suspense fallback={<ErrorOrLoaderMsg type="loading" />}>
+          <AppRoutes />
+        </Suspense>
+      </ErrorBoundary>
     </Layout>
   );
 }

src/api/modules/stores/index.ts

@@ -1,20 +1,40 @@
 import axiosInstance from 'api/core';
 
-import { type CreateStoreRequest, CreateStoreResponse, GetStoreResponse, StoresParams, GetStoresMenuResponse, GetStoresMenuParams, GetMenuDetailResponse, CreateMenuRequest, CreateMenuResponse, GetOrderResponse, GetOrderDetailResponse, UpdateOrderRequest, GetReviewsResponse, GetReviewsParams } from 'api/modules/stores/types';
+import {
+  type CreateStoreRequest,
+  CreateStoreResponse,
+  GetStoreResponse,
+  StoresParams,
+  GetStoresMenuResponse,
+  GetStoresMenuParams,
+  GetMenuDetailResponse,
+  CreateMenuRequest,
+  CreateMenuResponse,
+  GetOrderResponse,
+  GetOrderDetailResponse,
+  UpdateOrderRequest,
+  GetReviewsResponse,
+  GetReviewsParams,
+} from 'api/modules/stores/types';
 import { type CommonResponseReturnType } from 'api/modules/commonType';
 
 const URL_ROOT = 'stores';
 
 export const storeAPI = {
   store: {
     // 음식점 정보 등록 API
-    createStore: async (payload: CreateStoreRequest): Promise<CommonResponseReturnType<CreateStoreResponse>> => {
+    createStore: async (
+      payload: CreateStoreRequest,
+    ): Promise<CommonResponseReturnType<CreateStoreResponse>> => {
       const res = await axiosInstance.post(`${URL_ROOT}`, payload);
       return res.data;
     },
 
     // 음식점 정보 조회 API
-    getStore: async (storeId: number, queryParams?: GetStoresMenuParams): Promise<GetStoreResponse> => {
+    getStore: async (
+      storeId: number,
+      queryParams?: GetStoresMenuParams,
+    ): Promise<GetStoreResponse> => {
       const res = await axiosInstance.get(`${URL_ROOT}/${storeId}`, {
         params: queryParams,
       });
@@ -30,28 +50,47 @@ export const storeAPI = {
 
   menu: {
     // 메뉴 정보 조회 API
-    getStoresMenu: async (storeId: number, queryParams?: StoresParams): Promise<GetStoresMenuResponse> => {
+    getStoresMenu: async (
+      storeId: number,
+      queryParams?: StoresParams,
+    ): Promise<GetStoresMenuResponse> => {
       const res = await axiosInstance.get(`${URL_ROOT}/${storeId}/menus`, {
         params: queryParams,
       });
       return res.data;
     },
 
     // 메뉴 정보 상세 조회 API
-    getStoresMenuDetail: async (storeId: number, menuId: number): Promise<GetMenuDetailResponse> => {
-      const res = await axiosInstance.get(`${URL_ROOT}/${storeId}/menus/${menuId}`);
+    getStoresMenuDetail: async (
+      storeId: number,
+      menuId: number,
+    ): Promise<GetMenuDetailResponse> => {
+      const res = await axiosInstance.get(
+        `${URL_ROOT}/${storeId}/menus/${menuId}`,
+      );
       return res.data;
     },
 
     // 메뉴 정보 추가
-    createStoresMenu: async (storeId: number, payload: CreateMenuRequest): Promise<CreateMenuResponse> => {
-      const res = await axiosInstance.post(`${URL_ROOT}/${storeId}/menus`, payload);
+    createStoresMenu: async (
+      storeId: number,
+      payload: CreateMenuRequest,
+    ): Promise<CreateMenuResponse> => {
+      const res = await axiosInstance.post(
+        `${URL_ROOT}/${storeId}/menus`,
+        payload,
+      );
       return res.data;
     },
 
     // 메뉴 정보 삭제
-    deleteStoresMenu: async (storeId: number, menuId: number): Promise<void> => {
-      const res = await axiosInstance.delete(`${URL_ROOT}/${storeId}/menus/${menuId}`);
+    deleteStoresMenu: async (
+      storeId: number,
+      menuId: number,
+    ): Promise<void> => {
+      const res = await axiosInstance.delete(
+        `${URL_ROOT}/${storeId}/menus/${menuId}`,
+      );
       return res.data;
     },
   },
@@ -64,29 +103,47 @@ export const storeAPI = {
     },
 
     // 주문 정보 상세 조회
-    getStoresOrderDetail: async (storeId: number, orderId: number): Promise<GetOrderDetailResponse> => {
-      const res = await axiosInstance.get(`${URL_ROOT}/${storeId}/orders/${orderId}`);
+    getStoresOrderDetail: async (
+      storeId: number,
+      orderId: number,
+    ): Promise<GetOrderDetailResponse> => {
+      const res = await axiosInstance.get(
+        `${URL_ROOT}/${storeId}/orders/${orderId}`,
+      );
       return res.data;
     },
 
     // 주문 정보 수정(취소) API
-    updateStoresOrder: async (storeId: number, orderId: number, payload: UpdateOrderRequest): Promise<void> => {
-      const res = await axiosInstance.patch(`${URL_ROOT}/${storeId}/orders/${orderId}`, payload);
+    updateStoresOrder: async (
+      storeId: number,
+      orderId: number,
+      payload: UpdateOrderRequest,
+    ): Promise<void> => {
+      const res = await axiosInstance.patch(
+        `${URL_ROOT}/${storeId}/orders/${orderId}`,
+        payload,
+      );
       return res.data;
     },
   },
 
   review: {
     // 리뷰 정보 조회
-    getStoresReviews: async (storeId: number, queryParams?: GetReviewsParams): Promise<GetReviewsResponse> => {
+    getStoresReviews: async (
+      storeId: number,
+      queryParams?: GetReviewsParams,
+    ): Promise<GetReviewsResponse> => {
       const res = await axiosInstance.get(`${URL_ROOT}/${storeId}/reviews`, {
         params: queryParams,
       });
       return res.data;
     },
 
     // 리뷰 정보 삭제 - 관리자만 가능
-    deleteStoresReview: async (storeId: number, reviewId: number): Promise<void> => {
+    deleteStoresReview: async (
+      storeId: number,
+      reviewId: number,
+    ): Promise<void> => {
       await axiosInstance.delete(`${URL_ROOT}/${storeId}/reviews/${reviewId}`);
     },
   },