Merge pull request #74 from EmploymentRescueTeam/feature/#60

특정 판매자 전체 상품 조회 페이지 연결

src/api/service.ts

@@ -45,6 +45,12 @@ export const postProducts = async (
   return res;
 };
 
+// 상품삭제
+export const deleteProducts = async (id: number) => {
+  const res = await client.delete(`products/${id}`);
+  return res;
+};
+
 export const getProductCategory = async () => {
   const res = await client.get(`/products/categories`);
   return res.data;
@@ -55,16 +61,16 @@ export const getProducts = async (searchWord?: string, category?: string) => {
     params: {
       searchWord,
       categoryNames: category,
+      pageSize: 300, // 추후 수정 예정입니다.
     },
   });
   return res.data;
 };
 
-// 상품삭제
-export const deleteProducts = async (id: number) => {
-  const res = await client.delete(`products/${id}`);
-  return res;
-};
+
+export const getUserProducts = async (id: string) => {
+  const res = await client.get(`/products/${id}/list`);
+  return res.data;
 
 export const postSignUp = async (
   email: string,
@@ -131,4 +137,4 @@ export const addWishProduct = async (id: number) => {
 export const deleteWishProduct = async (id: number) => {
   const res = await client.delete(`wish/${id}`);
   return res;
-};
+};

src/app/main/page.tsx

@@ -1,6 +1,6 @@
 import MainPage from '@/templates/main/mainPage';
 
-export default async function Main() {
+export default function Main() {
   return (
     <>
       <MainPage />

src/app/product/products/page.tsx

@@ -0,0 +1,9 @@
+import ProductShowAll from '@/templates/product/productShowAll';
+
+export default function Page() {
+  return (
+    <>
+      <ProductShowAll />
+    </>
+  );
+}

src/components/productItem.tsx

@@ -8,10 +8,11 @@ export default function ProductItem({ product }: { product: IProduct }) {
   const onClick = () => {
     router.push(`/product/${[product.id]}`);
   };
+
   return (
-    <li className="product" onClick={onClick}>
+    <div className="product" onClick={onClick}>
       <div className="product__img">
-        <img src={product.thumbnail} />
+        <img src={product.thumbnail} alt="" />
       </div>
       <div className="product__content">
         <div className="title">{product.title}</div>
@@ -23,6 +24,6 @@ export default function ProductItem({ product }: { product: IProduct }) {
           </p>
         </div>
       </div>
-    </li>
+    </div>
   );
 }

src/templates/category/categoryPage.tsx

@@ -35,6 +35,7 @@ export default function CategoryPage() {
       <div className="category__content">
         {category.map((item: CategoryType) => (
           <div
+            key={item.id}
             onClick={() => {
               onClick(item);
             }}>

src/templates/homePage.tsx

@@ -6,6 +6,7 @@ import { useRouter } from 'next/navigation';
 
 export default function HomePage() {
   const router = useRouter();
+
   return (
     <>
       <Header />

src/templates/product/productDetail.tsx

@@ -130,7 +130,7 @@ export const ProductDetail = () => {
     autoplay: false, // 자동 재생
     arrows: false,
   };
-
+  console.log(product);
   return (
     <div id="product-detail">
       <div className="product-detail">
@@ -222,7 +222,11 @@ export const ProductDetail = () => {
               <div>
                 <div className="more-product__title">
                   <p>{product?.seller.nickname}님의 판매상품</p>
-                  <Btn type="button" href="products" label="모두보기" />
+                  <Btn
+                    type="button"
+                    href={`products?id=${id}`}
+                    label="모두보기"
+                  />
                 </div>
 
                 <div className="more-product__grid">

src/templates/product/productShowAll.tsx

@@ -0,0 +1,54 @@
+'use client';
+import Header from '@/components/header';
+import ProductStateList from './productStateList/productStateList';
+import { useState, useEffect, SetStateAction } from 'react';
+import { AXIOSResponse, IProduct } from '@/types/interface';
+import { useSearchParams } from 'next/navigation';
+import { getUserProducts } from '@/api/service';
+import ProductList from '@/components/productList';
+
+export default function ProductShowAll() {
+  const [filter, setFilter] = useState<string>('all');
+  const [products, setProducts] = useState<IProduct[]>([]);
+  const idParams = useSearchParams();
+  const id = idParams.get('id') || '';
+  const handleChangeList: React.Dispatch<React.SetStateAction<string>> = (
+    value: SetStateAction<string>,
+  ) => {
+    setFilter(value);
+  };
+  useEffect(() => {
+    const fetchData = async () => {
+      const res: AXIOSResponse<IProduct[]> = await getUserProducts(id);
+      console.log(res);
+      if (res.statusCode === 200) {
+        setProducts(() => {
+          return res.data.filter((product) => {
+            if (filter === 'all') {
+              return product;
+            } else if (
+              filter === 'completed' &&
+              product.status === '거래완료'
+            ) {
+              return product;
+            } else if (filter === 'sale' && product.status === '판매중') {
+              return product;
+            } else {
+              return;
+            }
+          });
+        });
+      }
+    };
+    fetchData();
+  }, [filter]);
+  console.log(products);
+
+  return (
+    <>
+      <Header goBack={true} title="판매상품 보기" />
+      <ProductStateList onChangeList={handleChangeList} />
+      <ProductList data={products} />
+    </>
+  );
+}