Merge pull request #213 from Injaeeee/React-정인재-Sprint7

[정인재] Sprint7

src/Main.js

@@ -3,6 +3,7 @@ import App from "./components/App";
 import Items from './pages/Items';
 import AddItems from './pages/AddItem';
 import NotFound from './pages/NotFound';
+import Products from './pages/Products';
 
 function Main() {
 
@@ -11,8 +12,12 @@ function Main() {
             <Routes>
                 <Route path='/' element={<App />} >
                     <Route index></Route>
-                    <Route path='items' element={<Items />}></Route>
+                    <Route path='items'>
+                        <Route index element={<Items />}></Route>
+                        <Route path=':productSlug' element={<Products />}></Route>
+                    </Route>
                     <Route path='additem' element={<AddItems />}></Route>
+
                     <Route path='*' element={<NotFound />}></Route>
                 </Route>
             </Routes>

src/api.js

@@ -1,16 +1,28 @@
 const BASE_URL = 'https://panda-market-api.vercel.app';
 
-export async function getProducts(order = 'recent') {
+export async function getProducts({ order = 'recent', page = 1, pageSize }) {
 
     const query = `orderBy=${order}`;
-    const response = await fetch(`${BASE_URL}/products?${query}`);
+    const response = await fetch(`${BASE_URL}/products?${query}&page=${page}&pageSize=${pageSize}`);
     const body = await response.json();
     return body;
+}
 
+export async function getProduct(productSlug) {
+    const response = await fetch(`${BASE_URL}/products/${productSlug}`);
+    const body = await response.json();
+    return body;
 }
 
-export async function createProducts(formData) {
 
+export async function getComment(productSlug) {
+    const response = await fetch(`${BASE_URL}/products/${productSlug}/comments?limit=10`)
+    const body = await response.json();
+    return body;
+
+}
+
+export async function createProducts(formData) {
 
     const response = await fetch(`${BASE_URL}/products?`,
         {
@@ -21,5 +33,4 @@ export async function createProducts(formData) {
     const body = await response.json();
     return body;
 
-}
-
+}

src/components/App.js

@@ -1,5 +1,5 @@
 
-import Topbar from './Topbar';
+import Topbar from './Topbar/Topbar'
 import './App.css';
 import { Outlet } from 'react-router-dom';
 

src/components/BestProductList.css → src/components/BestProductList/BestProductList.css

@@ -15,6 +15,8 @@
   display: flex;
   flex-direction: column;
   padding: 24px 0;
+  border: 0;
+  background-color: transparent;
 }
 
 .BestProductListItem p,

src/components/BestProductList/BestProductList.js

@@ -0,0 +1,52 @@
+import { useEffect, useState } from 'react';
+import { getProducts } from '../../api';
+import { Link, useNavigate } from 'react-router-dom';
+import './BestProductList.css';
+
+function BestProductListItem({ item }) {
+    const navigate = useNavigate();
+    const handleAddItemClick = () => {
+        navigate(`/items/${item.id}`);
+    }
+
+    return (
+        <button onClick={handleAddItemClick} className='BestProductListItem'>
+            <img className="BestProductListItem-img" src={item.images} alt={item.name}></img>
+            <p> {item.name}</p>
+            <h3>{item.price}원</h3>
+            <p>{item.favoriteCount}</p>
+        </button>
+    );
+
+}
+
+function BestProductList() {
+
+
+    const [items, setItems] = useState([]);
+
+    const handleLoad = async () => {
+        const { list } = await getProducts({ order: 'favorite', page: 1, pageSize: 10 });
+        setItems(list);
+    }
+
+
+    useEffect(() => {
+        handleLoad();
+    }, []);
+
+    const displayedItems = items.slice(0, 4);
+    return (
+
+        <div className='BestProductList'>
+            {displayedItems.map((item) => {
+                return (
+                    <BestProductListItem key={item.id} item={item} />
+
+                );
+            })}
+        </div>
+    )
+}
+
+export default BestProductList;

src/components/Button.css → src/components/Button/Button.css

@@ -22,3 +22,13 @@
   font-size: 18px;
   font-weight: 700;
 }
+
+.disable {
+  background-color: #9ca3af;
+  color: #ffffff;
+}
+
+.inquiry {
+  width: 74px;
+  align-self: flex-end;
+}

src/components/Button.js → src/components/Button/Button.js

@@ -3,8 +3,8 @@ import './Button.css';
 
 
 
-function Button({ children, onClick, select = '' }) {
-  const classNames = `Button ${select}`;
+function Button({ children, onClick, select = '', width = '' }) {
+  const classNames = `Button ${select} ${width}`;
   return (
     <button className={classNames} onClick={onClick}>
       {children}

src/components/CommentList/CommentList.css

@@ -0,0 +1,43 @@
+.commentWrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  border-bottom: 1px solid #e5e7eb;
+  margin: 20px 0;
+}
+
+.commentImg {
+  width: 40px;
+  height: 40px;
+}
+
+.writerWrapper {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  margin: 20px 0;
+}
+.writer {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.commenContent {
+  font-size: 16px;
+  font-weight: 400;
+  color: #1f2937;
+}
+
+.emptyComment {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.emptyCommentText {
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+  color: #9ca3af;
+}

src/components/CommentList/CommentList.js

@@ -0,0 +1,57 @@
+import { useEffect, useState } from 'react';
+import { getComment } from '../../api';
+import emptyComment from '../../img/Img_inquiry_empty.png'
+import './CommentList.css';
+
+function CommentListItem({ item }) {
+
+
+    return (
+        <div className='commentWrapper'>
+            <span className='commentContent'> {item.content}</span>
+
+            <div className='writerWraaper'>
+                <img src={item.writer.image} className='commentImg'></img>
+                <div className='writer'>
+                    <span className='writerNickname'>{item.writer.nickname}</span>
+                    <span className='updatedAt'>{item.updatedAt}</span>
+                </div>
+            </div>
+
+        </div>
+    );
+
+}
+
+function CommentList({ productSlug }) {
+
+
+    const [items, setItems] = useState([]);
+
+
+    const handleLoad = async () => {
+        const { list } = await getComment(productSlug);
+        setItems(list);
+    }
+
+    useEffect(() => {
+        handleLoad();
+    }, []);
+
+    return (
+
+        <div>
+            {items.length > 0 ? (items.map((item) => {
+                return (
+
+                    <CommentListItem key={item.id} item={item} />
+                );
+            })) : (<div className='emptyComment'>
+                <img src={emptyComment}></img>
+                <span className='emptyCommentText'>아직 문의가 없습니다.</span>
+            </div>)}
+        </div>
+    )
+}
+
+export default CommentList;

src/components/FileInput.js → src/components/FileInput/FileInput.js

@@ -17,6 +17,7 @@ function FileInput({ name, value, onChange }) {
         if (!inputNode) return;
 
         inputNode.value = '';
+
         setPreview(null);
         onChange(name, null);
 
@@ -26,6 +27,7 @@ function FileInput({ name, value, onChange }) {
         if (!value) return;
 
         const nextpreview = URL.createObjectURL(value);
+
         setPreview(nextpreview);
 
     }, [value])

src/components/ProductList.css → src/components/ProductList/ProductList.css

@@ -15,6 +15,8 @@
   display: flex;
   flex-direction: column;
   padding: 24px 0;
+  border: 0;
+  background-color: transparent;
 }
 
 .ProductListItem p,
@@ -23,7 +25,7 @@
   padding: 0;
 }
 
-@media (max-width: 744px) {
+@media (max-width: 1000px) {
   .ProductList {
     width: 696px;
     display: grid;

src/components/ProductList.js → src/components/ProductList/ProductList.js

@@ -1,20 +1,28 @@
 import './ProductList.css';
+import { useNavigate } from 'react-router-dom';
 
 function ProductListItem({ item }) {
 
+    const navigate = useNavigate();
+    const handleAddItemClick = () => {
+        navigate(`/items/${item.id}`);
+    }
+
+
     return (
-        <div className='ProductListItem'>
+        <button onClick={handleAddItemClick} className='ProductListItem'>
             <img className="ProductListItem-img" src={item.images} alt={item.name}></img>
             <p> {item.name}</p>
-            <h3>{item.price}</h3>
+            <h3>{item.price}원</h3>
             <p>{item.favoriteCount}</p>
-        </div>
+        </button>
     );
 
 }
 
 function ProductList({ items }) {
 
+
     return (
 
         <div className='ProductList'>

src/components/Topbar.js → src/components/Topbar/Topbar.js

@@ -1,6 +1,6 @@
-import pandaLogo from '../img/logo.png';
+import pandaLogo from '../../img/logo.png';
 import './Topbar.css';
-import Button from './Button'
+import Button from '../Button/Button';
 import { Link } from 'react-router-dom';
 
 function Topbar() {

src/components/pageNation/PageNation.css

@@ -0,0 +1,12 @@
+.pageButton {
+  width: 40px;
+  height: 40px;
+  border-radius: 40px;
+  background-color: #ffffff;
+  border: #e5e7eb 1px solid;
+}
+
+.active {
+  background-color: #3692ff;
+  color: #ffffff;
+}