배너 조회 기능 구현

src/apis/banner.ts

@@ -0,0 +1,16 @@
+import { API_SERVICE_URL } from '../constants';
+import { fetchApi } from './fetchApi';
+
+export interface Banner {
+  id: number;
+  image: string;
+  link: string;
+}
+
+export const getBanners = async () => {
+  const response = await fetchApi(`${API_SERVICE_URL}/banners`, {
+    method: 'GET',
+  });
+  const data: Banner[] = await response.json();
+  return data;
+};

src/constants/index.ts

@@ -1,14 +1,22 @@
-export const API_BASE_URL = import.meta.env.VITE_API_BASE_URL;
+export const API_BASE_URL = import.meta.env.PROD
+  ? import.meta.env.VITE_API_BASE_URL
+  : '/api/admin';
+
+export const API_SERVICE_URL = import.meta.env.PROD
+  ? import.meta.env.VITE_API_SERVICE_URL
+  : '/api';
 
 export const ROUTE = {
   HOME: '/',
   PRODUCT: '/products',
   REVIEW: '/reviews',
+  BANNER: '/banners',
 };
 
 export const ROUTES = [
   { path: ROUTE.PRODUCT, name: '상품' },
   { path: ROUTE.REVIEW, name: '리뷰' },
+  { path: ROUTE.BANNER, name: '배너' },
 ];
 
 export interface Column {
@@ -43,3 +51,12 @@ export const PRODUCT_SEARCH_COLUMNS: Column[] = [
   { id: 1, name: '아이디', align: 'right' },
   { id: 2, name: '상품명' },
 ];
+
+export const BANNER_COLUMNS_WIDTH = [10, 40, 40, 10];
+
+export const BANNER_COLUMNS: Column[] = [
+  { id: 1, name: '아이디', align: 'right' },
+  { id: 2, name: '이미지', align: 'center' },
+  { id: 3, name: '링크' },
+  { id: 4, name: '', align: 'center' },
+];

src/hooks/queries/index.ts

@@ -2,6 +2,7 @@ export * from './useProductQuery';
 export * from './useCategoryQuery';
 export * from './useReviewQuery';
 export * from './useLoginQuery';
+export * from './useBannerQuery';
 
 export * from './useLoginMutation';
 export * from './useProductMutation';

src/hooks/queries/useBannerQuery.ts

@@ -0,0 +1,10 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { getBanners } from '../../apis/banner';
+
+export const useBannerQuery = () => {
+  return useQuery({
+    queryKey: ['banners'],
+    queryFn: () => getBanners(),
+  });
+};

src/mocks/browser.ts

@@ -5,11 +5,13 @@ import {
   productHandlers,
   reviewHandlers,
   loginHandlers,
+  bannerHandlers,
 } from './handlers';
 
 export const worker = setupWorker(
   ...categoryHandlers,
   ...productHandlers,
   ...reviewHandlers,
-  ...loginHandlers
+  ...loginHandlers,
+  ...bannerHandlers
 );

src/mocks/data/banners.json

@@ -0,0 +1,17 @@
+[
+  {
+    "id": 3,
+    "image": "https://image.funeat.site/prod/banner.png",
+    "link": "https://funeat.site"
+  },
+  {
+    "id": 2,
+    "image": "https://image.funeat.site/prod/banner.png",
+    "link": "https://funeat.site/products/food"
+  },
+  {
+    "id": 1,
+    "image": "https://image.funeat.site/prod/banner.png",
+    "link": "https://funeat.site/recipes"
+  }
+]

src/mocks/handlers/bannerHandlers.ts

@@ -0,0 +1,9 @@
+import { rest } from 'msw';
+
+import banners from '../data/banners.json';
+
+export const bannerHandlers = [
+  rest.get('/api/banners', (_, res, ctx) => {
+    return res(ctx.status(200), ctx.json(banners));
+  }),
+];

src/mocks/handlers/index.ts

@@ -2,3 +2,4 @@ export * from './categoryHandlers';
 export * from './productHandlers';
 export * from './reviewHandlers';
 export * from './loginHandlers';
+export * from './bannerHandlers';

src/pages/Banners/Banners.tsx

@@ -0,0 +1,57 @@
+import BannerRow from './components/BannerRow';
+
+import { BANNER_COLUMNS, BANNER_COLUMNS_WIDTH } from '../../constants';
+import {
+  Colgroup,
+  Table,
+  TableBody,
+  TableHeader,
+} from '../../components/Table';
+import { useDisclosure } from '../../hooks';
+import { useBannerQuery } from '../../hooks/queries';
+
+import {
+  addButton,
+  tableTitle,
+  tableWrapper,
+  title,
+  titleWrapper,
+} from './banners.css';
+
+const Banners = () => {
+  const { data: banners } = useBannerQuery();
+  const { isOpen, onOpen, onClose } = useDisclosure();
+
+  // TODO 배너 추가 모달
+
+  if (!banners) {
+    return null;
+  }
+
+  return (
+    <>
+      <div className={titleWrapper}>
+        <h1 className={title}>배너</h1>
+        <button type='button' className={addButton} onClick={onOpen}>
+          배너 추가
+        </button>
+      </div>
+      <section className={tableWrapper}>
+        <h2 className={tableTitle}>
+          총 {banners.length.toLocaleString('ko-KR')}개의 상품이 검색되었습니다.
+        </h2>
+        <Table>
+          <Colgroup widths={BANNER_COLUMNS_WIDTH} />
+          <TableHeader columns={BANNER_COLUMNS} />
+          <TableBody>
+            {banners.map((banner) => (
+              <BannerRow key={banner.id} banner={banner} />
+            ))}
+          </TableBody>
+        </Table>
+      </section>
+    </>
+  );
+};
+
+export default Banners;

src/pages/Banners/banners.css.ts

@@ -0,0 +1,57 @@
+import { style } from '@vanilla-extract/css';
+
+export const container = style({
+  maxWidth: 1200,
+  margin: '0 auto',
+});
+
+export const titleWrapper = style([
+  container,
+  {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    height: 60,
+    padding: '0 20px',
+  },
+]);
+
+export const title = style({
+  height: 60,
+  lineHeight: '60px',
+  fontSize: 28,
+  fontWeight: 700,
+});
+
+export const searchSection = style([
+  container,
+  {
+    padding: '0 20px',
+    marginTop: 20,
+  },
+]);
+
+export const addButton = style({
+  width: 120,
+  height: 45,
+  lineHeight: '45px',
+  fontSize: 16,
+  border: '1px solid #ccc',
+  borderRadius: 8,
+});
+
+export const tableWrapper = style([
+  container,
+  {
+    width: '100%',
+    padding: '0 20px',
+    marginTop: 20,
+  },
+]);
+
+export const tableTitle = style({
+  height: 60,
+  lineHeight: '60px',
+  fontSize: 18,
+  fontWeight: 500,
+});

src/pages/Banners/components/BannerRow/BannerRow.tsx

@@ -0,0 +1,35 @@
+import { Banner } from '../../../../apis/banner';
+import { td } from '../../../../components/Table/table.css';
+
+import { bannerImage, bannerLink, deleteButton } from './bannerRow.css';
+
+interface BannerRowProps {
+  banner: Banner;
+}
+
+const BannerRow = ({ banner }: BannerRowProps) => {
+  const { id, image, link } = banner;
+
+  // TODO 배너 삭제 클릭 이벤트
+
+  return (
+    <tr>
+      <td className={td['right']}>{id}</td>
+      <td className={td['center']}>
+        <img src={image} className={bannerImage} alt={`배너 아이디 ${id}`} />
+      </td>
+      <td className={td['left']}>
+        <a href={link} className={bannerLink} target='_blank' rel='noopener'>
+          {link}
+        </a>
+      </td>
+      <td className={td['center']}>
+        <button type='button' className={deleteButton}>
+          삭제
+        </button>
+      </td>
+    </tr>
+  );
+};
+
+export default BannerRow;

src/pages/Banners/components/BannerRow/bannerRow.css.ts

@@ -0,0 +1,19 @@
+import { style } from '@vanilla-extract/css';
+
+export const bannerImage = style({
+  width: '100%',
+  height: 'auto',
+});
+
+export const bannerLink = style({
+  textDecoration: 'underline',
+});
+
+export const deleteButton = style({
+  width: 60,
+  height: 45,
+  lineHeight: '45px',
+  fontSize: 16,
+  border: '1px solid #ccc',
+  borderRadius: 8,
+});

src/pages/Banners/components/BannerRow/index.ts

@@ -0,0 +1,3 @@
+import BannerRow from './BannerRow';
+
+export default BannerRow;

src/pages/Banners/index.ts

@@ -0,0 +1,3 @@
+import Banners from './Banners';
+
+export default Banners;

src/pages/index.tsx

@@ -1,15 +1,16 @@
 import { createBrowserRouter } from 'react-router-dom';
 
 import Layout from './Layout';
+import AuthLayout from './Layout/AuthLayout';
 import Home from './Home';
 import Products from './Products';
 import Reviews from './Reviews';
+import Banners from './Banners';
 
 import { ROUTE } from '../constants';
 import PageProvider from '../contexts/PageContext';
 import ProductSearchQueryProvider from './Products/contexts/ProductSearchQueryContext';
 import ReviewSearchQueryProvider from './Reviews/contexts/ReviewSearchQueryContext';
-import AuthLayout from './Layout/AuthLayout';
 
 const router = createBrowserRouter([
   {
@@ -46,6 +47,7 @@ const router = createBrowserRouter([
           </ReviewSearchQueryProvider>
         ),
       },
+      { path: ROUTE.BANNER, element: <Banners /> },
     ],
   },
 ]);

vite.config.ts

@@ -1,19 +1,16 @@
-import { defineConfig, loadEnv } from 'vite';
+import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
 
 // https://vitejs.dev/config/
-export default defineConfig(({ mode }) => {
-  const env = loadEnv(mode, process.cwd(), '');
-  return {
-    plugins: [react(), vanillaExtractPlugin()],
-    server: {
-      proxy: {
-        '/api': {
-          target: env.VITE_API_URL,
-          changeOrigin: true,
-        },
+export default defineConfig({
+  plugins: [react(), vanillaExtractPlugin()],
+  server: {
+    proxy: {
+      '/api': {
+        target: 'http://localhost:8080',
+        changeOrigin: true,
       },
     },
-  };
+  },
 });