React 정상인 sprint7

vite-project/src/App.css

@@ -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/src/App.jsx

@@ -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/src/common/Dropdown/index.jsx

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

vite-project/src/common/ProductCard/index.jsx

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

vite-project/src/common/ProductList/index.jsx

@@ -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/common/ScrollToTop/index.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;

vite-project/src/common/TagBadge/TagBadge.style.css

@@ -6,6 +6,7 @@
   display: inline-flex;
   justify-content: center;
   align-items: center;
+  white-space: nowrap;
   gap: 10px;
 }
 

vite-project/src/common/TagBadge/index.jsx

@@ -4,9 +4,11 @@ const TagBadge = ({ name, onDelete }) => {
   return (
     <div className="tag-badge">
       <span>#{name}</span>
-      <button className="button ic-x-btn" onClick={onDelete}>
-        <img src="images/ic_x.svg" alt="태그 삭제 이미지" />
-      </button>
+      {onDelete && (
+        <button className="button ic-x-btn" onClick={onDelete}>
+          <img src="/images/ic_x.svg" alt="태그 삭제 이미지" />
+        </button>
+      )}
     </div>
   );
 };

vite-project/src/common/TagList/index.jsx

@@ -6,7 +6,10 @@ const TagList = ({ tags, onDelete }) => {
     <ul className="tag-area">
       {tags?.map((tag, index) => (
         <li key={tag}>
-          <TagBadge name={tag} onDelete={() => onDelete(index)} />
+          <TagBadge
+            name={tag}
+            onDelete={onDelete ? () => onDelete(index) : undefined}
+          />
         </li>
       ))}
     </ul>

vite-project/src/common/UserInfo/Userinfo.style.css

@@ -0,0 +1,22 @@
+.userInfo-badge {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.userInfo-badge-name-date {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  font-size: 14px;
+}
+
+.userInfo-badge-name {
+  color: var(--secondary600);
+  font-weight: 500;
+}
+
+.userInfo-badge-createdAt {
+  color: var(--gray400);
+  font-weight: 400;
+}

vite-project/src/common/UserInfo/index.jsx

@@ -0,0 +1,16 @@
+import "./UserInfo.style.css";
+
+const UserInfo = ({ image, name, date }) => {
+  const imageSrc = image || "/images/nav-panda.svg";
+  return (
+    <div className="userInfo-badge">
+      <img src={imageSrc} alt="이미지" />
+      <div className="userInfo-badge-name-date">
+        <span className="userInfo-badge-name">{name}</span>
+        <span className="userInfo-badge-date">{date}</span>
+      </div>
+    </div>
+  );
+};
+
+export default UserInfo;

vite-project/src/constants/PRODUCTS.js

@@ -2,4 +2,7 @@ export const ORDER_BYS = {
   최신순: "recent",
   좋아요순: "favorite",
 };
+
+export const DROPDOWN_MENUS = Object.keys(ORDER_BYS);
+
 export const GROUP_SIZE = 5;

vite-project/src/hooks/useDeleteProductCommentQuery.js

@@ -0,0 +1,20 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import instance from "../api/axiosInstance";
+
+const deleteProductComment = ({ commentId }) => {
+  return instance.delete(`comments/${commentId}`);
+};
+
+export const useDeleteProductCommentQuery = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: deleteProductComment,
+    onSuccess: () => {
+      queryClient.invalidateQueries(["getProductComments"]);
+    },
+    onError: (error) => {
+      console.log(error);
+    },
+  });
+};

vite-project/src/hooks/useGetProductComments.js

@@ -0,0 +1,17 @@
+import { useQuery } from "@tanstack/react-query";
+import instance from "../api/axiosInstance";
+
+const getProductComments = ({ productId, limit, cursor }) => {
+  return instance.get(`products/${productId}/comments`, {
+    params: { limit, cursor },
+  });
+};
+
+export const useGetProductCommentsQuery = ({ productId, limit, cursor }) => {
+  return useQuery({
+    queryKey: ["getProductComments", productId, limit],
+    queryFn: () => getProductComments({ productId, limit, cursor }),
+    staleTime: 300000,
+    select: (response) => response.data,
+  });
+};

vite-project/src/hooks/useGetProductDetail.js

@@ -0,0 +1,15 @@
+import { useQuery } from "@tanstack/react-query";
+import instance from "../api/axiosInstance";
+
+const getProductDetail = ({ productId }) => {
+  return instance.get(`products/${productId}`);
+};
+
+export const useGetProductDetailQuery = ({ productId }) => {
+  return useQuery({
+    queryKey: ["getProductDetail", productId],
+    queryFn: () => getProductDetail({ productId }),
+    staleTime: 300000,
+    select: (response) => response.data,
+  });
+};

vite-project/src/hooks/useGetProducts.js

@@ -1,8 +1,8 @@
 import { useQuery } from "@tanstack/react-query";
 import instance from "../api/axiosInstance";
 
-const getProducts = async ({ page = 1, orderBy = "recent", pageSize = 10 }) => {
-  return await instance.get("/products", {
+const getProducts = ({ page = 1, orderBy = "recent", pageSize = 10 }) => {
+  return instance.get("/products", {
     params: { page, orderBy, pageSize },
   });
 };

vite-project/src/main.jsx

@@ -2,12 +2,14 @@ import { createRoot } from "react-dom/client";
 import { BrowserRouter } from "react-router";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import App from "./App.jsx";
+import ScrollToTop from "./common/ScrollToTop/index.jsx";
 
 const queryClient = new QueryClient();
 
 createRoot(document.getElementById("root")).render(
   <QueryClientProvider client={queryClient}>
     <BrowserRouter>
+      <ScrollToTop />
       <App />
     </BrowserRouter>
   </QueryClientProvider>