Feat: UI-Homepage 완성

.eslintrc.cjs

@@ -16,15 +16,16 @@ module.exports = {
   parser: '@typescript-eslint/parser',
   plugins: ['react-refresh'],
   rules: {
-    'import/no-extraneous-dependencies': "off",
+    'import/no-extraneous-dependencies': 'off',
+    'import/prefer-default-export': 'off',
     'react-refresh/only-export-components': [
       'warn',
       { allowConstantExport: true },
     ],
-    "react/react-in-jsx-scope": "off"
+    'react/react-in-jsx-scope': 'off',
   },
   parserOptions: {
     tsconfigRootDir: './',
-    project: ['./tsconfig.json', './tsconfig.app.json', './tsconfig.node.json']
+    project: ['./tsconfig.json', './tsconfig.app.json', './tsconfig.node.json'],
   },
 };

package.json

@@ -22,7 +22,9 @@
     "@reduxjs/toolkit": "^2.2.6",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-redux": "^9.1.2"
+    "react-icons": "^5.2.1",
+    "react-redux": "^9.1.2",
+    "react-router-dom": "^6.25.1"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.4.6",

src/App.tsx

@@ -1,6 +1,22 @@
-import React from 'react';
+import { RouterProvider, createBrowserRouter } from 'react-router-dom';
+
+import Home from './pages/home';
+import Layout from './components/Layout';
 
 function App() {
-  return <div>app</div>;
+  const router = createBrowserRouter([
+    {
+      element: <Layout />,
+      children: [
+        {
+          path: '/',
+          element: <Home />,
+        },
+      ],
+    },
+  ]);
+
+  return <RouterProvider router={router} />;
 }
+
 export default App;

src/components/CategoryList.tsx

@@ -0,0 +1,26 @@
+import { categories } from '../constants/categories';
+
+function CategoryItem({ name }: { name: string }) {
+  return (
+    <div className="flex flex-col items-center gap-2">
+      <img
+        src="/air-jordan-row.jpeg"
+        alt="air-jordan-row"
+        className="w-[4rem] h-[4rem] rounded-full"
+      />
+      <div className="text-sm">{name}</div>
+    </div>
+  );
+}
+
+function CategoryList() {
+  return (
+    <div className="grid w-full grid-cols-4 gap-4">
+      {Object.values(categories).map((value: string) => (
+        <CategoryItem key={value} name={value} />
+      ))}
+    </div>
+  );
+}
+
+export default CategoryList;

src/components/Footer.tsx

@@ -0,0 +1,19 @@
+import {
+  AiOutlineBell,
+  AiOutlineHeart,
+  AiOutlineHome,
+  AiOutlineUser,
+} from 'react-icons/ai';
+
+function Footer() {
+  return (
+    <footer className="flex items-center gap-2 justify-around w-full min-h-[3.5rem] bg-yellow-500">
+      <AiOutlineHome size={25} />
+      <AiOutlineBell size={25} />
+      <AiOutlineHeart size={25} />
+      <AiOutlineUser size={25} />
+    </footer>
+  );
+}
+
+export default Footer;

src/components/Header.tsx

@@ -0,0 +1,9 @@
+function Header({ pageName }: { pageName: string }) {
+  return (
+    <header className="w-full min-h-[3.5rem] bg-yellow-500 flex items-center pl-4 text-lg">
+      {pageName}
+    </header>
+  );
+}
+
+export default Header;

src/components/HomeItem.tsx

@@ -0,0 +1,24 @@
+import { AiOutlineUsergroupDelete } from 'react-icons/ai';
+
+function HomeItem() {
+  return (
+    <figure className="flex flex-col min-w-[9rem]">
+      <div className="relative w-full h-full">
+        <img src="/air-jordan-row.jpeg" alt="air-jordan-row" />
+        <div className="absolute bottom-0 w-full py-1 text-sm text-center bg-slate-400">
+          16시간 남음
+        </div>
+      </div>
+      <figcaption className="flex flex-col items-start justify-start flex-1 w-full px-1 py-2 text-sm">
+        <div className="text-gray-700">[나이키] 신발</div>
+        <div className="font-semibold">10,000원 (시작가)</div>
+        <div className="flex items-center text-gray-500">
+          <AiOutlineUsergroupDelete />
+          <span>11명 참여 중</span>
+        </div>
+      </figcaption>
+    </figure>
+  );
+}
+
+export default HomeItem;

src/components/HomeItemList.tsx

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+
+function HomeItemList({
+  children,
+  name,
+}: {
+  children: ReactNode;
+  name: string;
+}) {
+  return (
+    <section className="flex flex-col w-full gap-4">
+      <div className="text-lg font-semibold">{name}</div>
+      <div className="flex items-center gap-4 overflow-x-scroll">
+        {children}
+      </div>
+    </section>
+  );
+}
+
+export default HomeItemList;

src/components/Layout.tsx

@@ -0,0 +1,13 @@
+import { Outlet } from 'react-router-dom';
+
+function Layout() {
+  return (
+    <div className="flex justify-center w-full h-screen">
+      <main className="w-[46rem] min-w-[23rem]">
+        <Outlet />
+      </main>
+    </div>
+  );
+}
+
+export default Layout;

src/constants/categories.ts

@@ -0,0 +1,10 @@
+export const categories = Object.freeze({
+  Electronics: '전자기기',
+  HomeAppliances: '가전제품',
+  FashionClothing: '패션 및 의류',
+  FurnitureInterior: '가구 및 인테리어',
+  BooksMedia: '도서 및 미디어',
+  SportsLeisure: '스포츠 및 레저',
+  ToysHobbies: '장난감 및 취미',
+  Others: '기타',
+});

src/pages/home.tsx

@@ -0,0 +1,42 @@
+import CategoryList from '../components/CategoryList';
+import Footer from '../components/Footer';
+import Header from '../components/Header';
+import HomeItem from '../components/HomeItem';
+import HomeItemList from '../components/HomeItemList';
+
+function Home() {
+  return (
+    <div className="flex flex-col justify-between w-full h-full">
+      <Header pageName="치즈 마켓" />
+      <section className="flex flex-col w-full gap-4 px-8 py-4 overflow-y-scroll">
+        <HomeItemList name="베스트 경매">
+          <HomeItem />
+          <HomeItem />
+          <HomeItem />
+          <HomeItem />
+          <HomeItem />
+        </HomeItemList>
+        <HomeItemList name="종료 임박 경매">
+          <HomeItem />
+          <HomeItem />
+          <HomeItem />
+          <HomeItem />
+          <HomeItem />
+        </HomeItemList>
+        <HomeItemList name="카테고리">
+          <CategoryList />
+        </HomeItemList>
+        <HomeItemList name="사전 등록 경매">
+          <HomeItem />
+          <HomeItem />
+          <HomeItem />
+          <HomeItem />
+          <HomeItem />
+        </HomeItemList>
+      </section>
+      <Footer />
+    </div>
+  );
+}
+
+export default Home;