Merge pull request #53 from efub-ecyce/feat/#42

Feat/#42
efub-ecyce · Nov 30, 2024 · 1a8298d · 1a8298d
2 parents f52cf89 + 48e6838
commit 1a8298d
Show file tree

Hide file tree

Showing 9 changed files with 280 additions and 213 deletions.
diff --git a/src/api/product.ts b/src/api/product.ts
@@ -1,5 +1,49 @@
 import { client } from './client';
 
+export interface Option {
+  optionName: string;
+  optionPrice: number;
+}
+
+export interface ProductInfo {
+  productName: string;
+  price: number | undefined;
+  content: string;
+  duration: number | undefined;
+  deliveryFee: number | undefined;
+
+  materialInfo: string;
+  buyerNotice: string;
+  options: Option[];
+}
+
+export const getAllProduct = async () => {
+    try {
+        const res = await client.get(`/product`);
+        return res.data;
+    } catch (error) {
+        throw error;
+    }
+};
+
+export const getProductDetail = async (productId: string || number) => {
+    try {
+        const res = await client.get(`/product/${productId}`);
+        return res.data;
+    } catch (error) {
+        throw error;
+    }
+};
+
+export const getProductCategory = async (categoryId: number) => {
+    try {
+        const res = await client.get(`/product/category?code=${categoryId}`);
+        return res.data;
+    } catch (error) {
+        throw error;
+    }
+};
+
 export const patchProductState = async (productId: number, state: string) => {
   try {
     const res = await client.patch(`/product/${productId}`, {
@@ -18,21 +62,6 @@ export const deleteProduct = async (productId: number) => {
   }
 };
 
-export interface Option {
-  optionName: string;
-  optionPrice: number;
-}
-export interface ProductInfo {
-  productName: string;
-  price: number | undefined;
-  content: string;
-  duration: number | undefined;
-  deliveryFee: number | undefined;
-
-  materialInfo: string;
-  buyerNotice: string;
-  options: Option[];
-}
 
 export interface PatchInfo {
   productName: string;
@@ -45,14 +74,6 @@ export interface PatchInfo {
   buyerNotice: string;
 }
 
-export const getProductDetail = async (productId: number) => {
-  try {
-    const res = await client.get(`/product/${productId}`);
-    return res.data;
-  } catch (error) {
-    throw error;
-  }
-};
 
 export const postProduct = async (
   productData: ProductInfo,

diff --git a/src/components/MainPage/Filter.tsx b/src/components/MainPage/Filter.tsx
@@ -2,20 +2,26 @@ import React, { useState } from 'react';
 import * as S from './Filter.style';
 import { ReactComponent as FilterIcon } from '../../assets/MainPage/filter.svg';
 
-const Filter: React.FC = () => {
+interface FilterProps {
+  onFilterChange: (filterName: string) => void;
+}
+
+const Filter: React.FC<FilterProps> = ({ onFilterChange }) => {
   const [activeBtn, setActiveBtn] = useState<string | null>(null);
 
   const handleBtnClick = (btnName: string) => {
     setActiveBtn(btnName);
+    onFilterChange(btnName);
   };
 
   return (
     <S.Wrapper>
       <S.FilterIcon><FilterIcon /></S.FilterIcon>
+      {/* 기본값 (getAllProduct 호출) */}
       <S.Btn
-        active={activeBtn === '인기순'}
-        onClick={() => handleBtnClick('인기순')}
-      >인기순</S.Btn>
+        active={!activeBtn}
+        onClick={() => handleBtnClick(null as unknown as string)}
+      >전체</S.Btn>
       <S.Btn
         active={activeBtn === '후기순'}
         onClick={() => handleBtnClick('후기순')}

diff --git a/src/components/ProfilePage/ProductList.tsx b/src/components/ProfilePage/ProductList.tsx
@@ -14,7 +14,7 @@ const ProductList = () => {
   return (
     <S.Container>
       <S.Contents>
-        <ProductComponent1
+        {/* <ProductComponent1
           title={productData.title}
           term={productData.term}
           price={productData.price}
@@ -76,7 +76,7 @@ const ProductList = () => {
           price={productData.price}
           imageURL={productData.imageURL}
           bookmarkedData={productData.bookmarked}
-        />
+        /> */}
       </S.Contents>
     </S.Container>
   );

diff --git a/src/components/common/ProductComponent1.tsx b/src/components/common/ProductComponent1.tsx
@@ -2,27 +2,35 @@ import React, { useState } from 'react';
 import * as S from "../common/ProductComponent1.style";
 import { ReactComponent as UnfilledBookmark } from '../../assets/common/ProductComponent1/bookmark_unfilled.svg';
 import { ReactComponent as FilledBookmark } from '../../assets/common/ProductComponent1/bookmark_filled.svg';
+import { useNavigate } from 'react-router-dom';
 
-interface ProductProps {
-  title: string;
-  term: number;
+export interface ProductProps {
+  productName: string;
+  duration: number;
   price: number;
-  imageURL: string;
-  bookmarkedData: boolean;
+  isMarked: boolean;
+  productId: number;
+  // imageURL: string;
 }
 
-const ProductComponent1 = ({ title, term, price, imageURL, bookmarkedData }: ProductProps) => {
-  const [bookmarked, setBookmarked] = useState(bookmarkedData);
+const ProductComponent1 = ({ productName, duration, price, isMarked, productId }: ProductProps) => {
+  const [bookmarked, setBookmarked] = useState(isMarked);
+  const navigate = useNavigate();
 
-  const toggleBookmark = () => {
+  const toggleBookmark = (e: React.MouseEvent) => {
+    e.stopPropagation();
     setBookmarked(prev => !prev);
   }
+
+  const handleNavigate = () => {
+    navigate(`/product/${productId}`);
+  };
 
   return (
-    <S.Wrapper>
-      <S.ProductPicture imageURL={imageURL}></S.ProductPicture>
-      <S.Title>{title}</S.Title>
-      <S.Term>제작 소요 기간 {term}일</S.Term>
+    <S.Wrapper onClick={handleNavigate}>
+      <S.ProductPicture imageURL={"imageURL"}></S.ProductPicture>
+      <S.Title>{productName}</S.Title>
+      <S.Term>제작 소요 기간 {duration}일</S.Term>
       <S.PNB>
         <S.Price>{price.toLocaleString()}원</S.Price>
         {bookmarked ? (

diff --git a/src/pages/Main/BookmarkPage/BookmarkPage.tsx b/src/pages/Main/BookmarkPage/BookmarkPage.tsx
@@ -19,7 +19,7 @@ const BookmarkPage = () => {
         <Header title='관심목록'/>
       </S.Top>
       <S.Contents>
-        {/* 이거 나중에 map으로 꼭 바꿔라 ;; */}
+        {/* 이거 나중에 map으로 꼭 바꿔라 ;;
         <ProductComponent1
           title={productData.title}
           term={productData.term}
@@ -82,7 +82,7 @@ const BookmarkPage = () => {
           price={productData.price}
           imageURL={productData.imageURL}
           bookmarkedData={productData.bookmarked}
-        />
+        /> */}
       </S.Contents>
       <S.NavBar>
         <NavBar />

diff --git a/src/pages/Main/MainPage/MainPage.style.ts b/src/pages/Main/MainPage/MainPage.style.ts
@@ -40,6 +40,7 @@ export const Contents = styled.div`
     grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
     gap: 1rem;
     width: 100%;
+    min-height: 850px;
     justify-content: center;
     overflow-y: auto;
     margin-top: calc(8rem);
@@ -50,4 +51,6 @@ export const Contents = styled.div`
     &::-webkit-scrollbar {
         display: none;
     }
+
+    align-content: start;
 `;
diff --git a/src/pages/Main/MainPage/MainPage.tsx b/src/pages/Main/MainPage/MainPage.tsx
@@ -1,90 +1,87 @@
+import React, { useState, useEffect } from 'react';
 import NavBar from '../../../components/common/NavBar';
 import ProductComponent1 from '../../../components/common/ProductComponent1';
 import Header from '../../../components/MainPage/Header';
 import Filter from '../../../components/MainPage/Filter';
-import { useNavigate } from 'react-router-dom';
 import * as S from './MainPage.style';
+import { getAllProduct, getProductCategory } from '../../../api/product';
 
-const MainPage = () => {
-  const productData = {
-    title: "청바지를 활용한 텀블러 가방",
-    term: 3,
+export interface ProductProps {
+  key: number;
+  duration: number;
+  isMarked: boolean;
+  nickname: string;
+  price: number;
+  productId: number;
+  productName: string;
+}
+
+const productDummyData: ProductProps[] = [
+  {
+    key: 0,
+    duration: 3,
+    isMarked: false,
+    nickname: "뉴진스",
     price: 20000,
-    imageURL: "",
-    bookmarked: false,
+    productId: 1,
+    productName: "청바지를 활용한 텀블러 가방",
+    // imageURL: "",
+  },
+];
+
+const MainPage = () => {
+  const [productList, setProductList] = useState<ProductProps[]>([]);
+  const [selectedFilter, setSelectedFilter] = useState<string | null>(null);
+
+  const fetchProductList = async (filterName: string | null) => {
+    try {
+      if (!filterName) {
+        // 기본값 == 모든 제품
+        const response = await getAllProduct();
+        setProductList(response.length ? response : productDummyData);
+      } else {
+        // 필터가 선택된 경우
+        const filterMap: { [key: string]: number } = {
+          후기순: 1,
+          북마크순: 2,
+          최신순: 3,
+        };
+        const categoryId = filterMap[filterName];
+        const response = await getProductCategory(categoryId);
+        setProductList(response.length ? response : productDummyData);
+      }
+    } catch (error) {
+      console.error(error);
+      setProductList(productDummyData);
+    }
+  };
+
+  useEffect(() => {
+    fetchProductList(selectedFilter);
+  }, [selectedFilter]);
+
+  const handleFilterChange = (filterName: string) => {
+    setSelectedFilter(filterName);
   };
 
   return (
     <S.Container>
       <S.Top>
         <Header />
-        <Filter />
+        <Filter onFilterChange={handleFilterChange} />
       </S.Top>
       <S.Contents>
-        {/* 이거 나중에 map으로 꼭 바꿔라 ;; */}
-        <ProductComponent1
-          title={productData.title}
-          term={productData.term}
-          price={productData.price}
-          imageURL={productData.imageURL}
-          bookmarkedData={productData.bookmarked}
-        />
-        <ProductComponent1
-          title={productData.title}
-          term={productData.term}
-          price={productData.price}
-          imageURL={productData.imageURL}
-          bookmarkedData={productData.bookmarked}
-        />
-        <ProductComponent1
-          title={productData.title}
-          term={productData.term}
-          price={productData.price}
-          imageURL={productData.imageURL}
-          bookmarkedData={productData.bookmarked}
-        />
-        <ProductComponent1
-          title={productData.title}
-          term={productData.term}
-          price={productData.price}
-          imageURL={productData.imageURL}
-          bookmarkedData={productData.bookmarked}
-        />
-        <ProductComponent1
-          title={productData.title}
-          term={productData.term}
-          price={productData.price}
-          imageURL={productData.imageURL}
-          bookmarkedData={productData.bookmarked}
-        />
-        <ProductComponent1
-          title={productData.title}
-          term={productData.term}
-          price={productData.price}
-          imageURL={productData.imageURL}
-          bookmarkedData={productData.bookmarked}
-        />
-        <ProductComponent1
-          title={productData.title}
-          term={productData.term}
-          price={productData.price}
-          imageURL={productData.imageURL}
-          bookmarkedData={productData.bookmarked}
-        />
-        <ProductComponent1
-          title={productData.title}
-          term={productData.term}
-          price={productData.price}
-          imageURL={productData.imageURL}
-          bookmarkedData={productData.bookmarked}
-        />
-        <ProductComponent1
-          title={productData.title}
-          term={productData.term}
-          price={productData.price}
-          imageURL={productData.imageURL}
-          bookmarkedData={productData.bookmarked}
-        />
+        {productList.map((product, index) => (
+          <ProductComponent1
+            key={index}
+            productName={product.productName}
+            duration={product.duration}
+            price={product.price}
+            // imageURL={product.imageURL}
+            isMarked={product.isMarked}
+            productId={product.productId}
+          />
+        ))}
       </S.Contents>
       <S.NavBar>
         <NavBar />