Merge pull request #117 from SanginJeong/React-정상인-sprint7

[정상인] sprint7

Author: kiJu2

vite-project/package-lock.json

@@ -3,9 +3,17 @@
   --primary200: #1967d6;
   --primary300: #1251aa;
 
+  --secondary200: #e5e7eb;
+  --secondary300: #e5e7eb;
+  --secondary400: #9ca3af;
+  --secondary500: #6b7280;
+  --secondary600: #4b5563;
+  --secondary800: #1f2937;
+
   --gray50: #f9fafb;
   --gray100: #f3f4f6;
   --gray200: #e5e7eb;
+  --gray300: #d1d5db;
   --gray400: #9ca3af;
   --gray500: #6b7280;
   --gray600: #4b5563;
@@ -70,8 +78,10 @@ p {
 }
 
 .btn-medium {
+  width: 240px;
   height: 48px;
-  padding: 12px 71px;
+  padding: 12px 64px;
+  white-space: nowrap;
   border-radius: 40px;
   border: none;
   font-weight: 600;
@@ -117,6 +127,12 @@ p {
   align-items: center;
 }
 
+.kebab-btn {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 .container {
   max-width: 1200px;
   margin: 0 auto;

vite-project/public/images/Img_inquiry_empty.svg

@@ -1,9 +1,10 @@
 import "./App.css";
 import { Route, Routes, Navigate } from "react-router";
-import ItemsPage from "./pages/ItemsPage";
-import AddItemPage from "./pages/AddItemPage";
+import ProductsPage from "./pages/ProductsPage";
+import AddProductPage from "./pages/AddProductPage";
 import Layout from "./layout/Layout";
 import FreeBoard from "./pages/FreeBoardPage";
+import ProductDetailPage from "./pages/ProductDetailPage";
 
 function App() {
   return (
@@ -12,10 +13,13 @@ function App() {
       <Route path="/" element={<Navigate to="/items" />} />
 
       <Route element={<Layout />}>
-        <Route path="/items" element={<ItemsPage />} />
-        <Route path="/addItem" element={<AddItemPage />} />
+        <Route path="/items">
+          <Route index element={<ProductsPage />} />
+          <Route path=":productId" element={<ProductDetailPage />} />
+        </Route>
+        <Route path="/addItem" element={<AddProductPage />} />
         {/* freeBoard :  link active 테스트를 위해 미리 만듦 */}
-        <Route path="/freeBoard" element={<FreeBoard />} />{" "}
+        <Route path="/freeBoard" element={<FreeBoard />} />
       </Route>
     </Routes>
   );

vite-project/public/images/ic_back.svg

@@ -1,19 +1,15 @@
-import React, { useState } from "react";
+const DropDown = ({ children, className }) => {
+  return <div className={`dropdown ${className}`}>{children}</div>;
+};
 
-const DropDown = ({ children }) => {
-  return <div className="dropdown">{children}</div>;
+DropDown.header = ({ children }) => {
+  return <div>{children}</div>;
 };
 
-DropDown.header = ({ children, onClick }) => {
+DropDown.menus = ({ children, isOpen, className }) => {
   return (
-    <button onClick={onClick} className="button dropdown-btn">
-      {children}
-    </button>
+    isOpen && <ul className={`dropdown-menus ${className}`}>{children}</ul>
   );
 };
 
-DropDown.menus = ({ children, isOpen }) => {
-  return isOpen && <ul className="dropdown-menus">{children}</ul>;
-};
-
 export default DropDown;

vite-project/public/images/ic_kebab.svg

@@ -1,4 +1,3 @@
-import React from "react";
 import "./ProductCard.style.css";
 
 const ProductCard = ({ product, category }) => {

vite-project/src/App.css

@@ -1,12 +1,11 @@
-import React from "react";
 import { Link } from "react-router";
 import ProductCard from "../ProductCard";
 const ProductList = ({ products, className }) => {
   return (
     <ul className={className}>
       {products?.map((product) => (
         <li key={product.id}>
-          <Link>
+          <Link to={`${product.id}`}>
             <ProductCard product={product} category="all-card-img" />
           </Link>
         </li>

vite-project/src/App.jsx

@@ -0,0 +1,14 @@
+import { useEffect } from "react";
+import { useLocation } from "react-router";
+
+const ScrollToTop = () => {
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [pathname]);
+
+  return null;
+};
+
+export default ScrollToTop;