Merge pull request #9 from CHZZK-Study/feat/UI-Home

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,16 @@
-import React from 'react';
+import { RouterProvider, createBrowserRouter } from 'react-router-dom';
+
+import Home from './pages/home';
 
 function App() {
-  return <div>app</div>;
+  const router = createBrowserRouter([
+    {
+      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({ name }: { name: string }) {
+  return (
+    <header className="w-full min-h-[3.5rem] bg-yellow-500 flex items-center pl-4 text-lg">
+      {name}
+    </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,23 @@
+import { ReactNode } from 'react';
+
+interface LayoutProps {
+  header: ReactNode;
+  children: ReactNode;
+  footer: ReactNode;
+}
+
+function Layout({ header, children, footer }: LayoutProps) {
+  return (
+    <div className="flex justify-center w-full h-screen">
+      <div className="w-[46rem] min-w-[23rem] flex flex-col justify-between h-full">
+        {header}
+        <main className="flex flex-col w-full gap-4 px-8 py-4 overflow-y-scroll">
+          {children}
+        </main>
+        {footer && footer}
+      </div>
+    </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,39 @@
+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';
+import Layout from '../components/Layout';
+
+function Home() {
+  return (
+    <Layout header={<Header name="치즈 마켓" />} footer={<Footer />}>
+      <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>
+    </Layout>
+  );
+}
+
+export default Home;