feat: product category

- #147

src/api/productApi.ts

@@ -19,12 +19,13 @@ type ProductData = {
   subDesc3: string;
 };
 
-const useGetProducts = () => {
+const useGetProducts = (categoryId = 0) => {
   const fetcher = () => defaultApi.get(`/api/products`).then(({ data }) => data);
+  const categoryFetcher = () => defaultApi.get(`/api/categories/${categoryId}`).then(({ data }) => data);
 
   return useQuery({
-    queryKey: ["products"],
-    queryFn: fetcher,
+    queryKey: ["products", categoryId],
+    queryFn: categoryId ? categoryFetcher : fetcher,
   });
 };
 

src/components/features/MyPage/Order/CancelOrderModal.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { Flex, ModalBody, ModalHeader, ModalCloseButton, Button, Text, Divider } from "@chakra-ui/react";
+import { useGetProductDetail } from "@api/productApi";
 import BasicModal from "@components/common/modal/BasicModal";
-import useGetProduct from "./useGetProduct";
 
 interface CancelOrderModalProps {
   isOpen: boolean;
@@ -18,7 +18,7 @@ const CancelOrderModal: React.FC<CancelOrderModalProps> = ({
   maxH = "800px",
   productId,
 }) => {
-  const { data: productData } = useGetProduct(productId);
+  const { data: productData } = useGetProductDetail(productId);
 
   const [totalRefundAmount, setTotalRefundAmount] = useState(0);
 

src/components/features/MyPage/Order/RefundModal.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { Flex, ModalBody, ModalHeader, ModalCloseButton, Button, Text, Divider } from "@chakra-ui/react";
+import { useGetProductDetail } from "@api/productApi";
 import BasicModal from "@components/common/modal/BasicModal";
-import useGetProduct from "./useGetProduct";
 
 interface RefundModalProps {
   isOpen: boolean;
@@ -12,7 +12,7 @@ interface RefundModalProps {
 }
 
 const RefundModal: React.FC<RefundModalProps> = ({ isOpen, onClose, maxW = "600px", maxH = "800px", productId }) => {
-  const { data: productData } = useGetProduct(productId);
+  const { data: productData } = useGetProductDetail(productId);
 
   const [totalRefundAmount, setTotalRefundAmount] = useState(0);
 

src/components/features/RegisterPage/Farmer.tsx

@@ -3,6 +3,7 @@ import { useNavigate } from "react-router-dom";
 import { Button, Text, Flex, Input, Image } from "@chakra-ui/react";
 import { useCreateFarmer } from "@api/emailApi";
 import call from "@assets/logo/Call.png";
+import useLogin from "@hooks/useLogin";
 
 type FarmerData = {
   name: string;
@@ -26,10 +27,12 @@ const Farmer = () => {
   const { mutateAsync: createFarmer } = useCreateFarmer();
   const navigate = useNavigate();
 
+  const { refreshLogin } = useLogin();
+
   const handleRegister = () => {
     createFarmer(farmerData)
       .then(() => {
-        navigate("/");
+        refreshLogin().then(() => navigate("/"));
       })
       .catch(() => {
         alert("농부 등록에 실패했습니다.");

src/components/features/StorePage/ProductList/ProductFilter/index.tsx

@@ -1,24 +1,33 @@
 import { Divider, Flex, Text } from "@chakra-ui/react";
+import { useGetProductCategories } from "@api/categoryApi";
 import ProductGroupView from "@components/features/StorePage/ProductList/ProductFilter/ProductGroupView";
-import { ProductFilterItem } from "@components/features/StorePage/ProductList/ProductFilter/type";
 import productGroup from "@constants/productGroup";
 import useFilters, { UseFilters } from "@hooks/useFilters";
+import { encodeCategory } from "@utils/categoryParser";
 
 type ProductFilterProps = {
-  items?: ProductFilterItem[];
   filterState?: UseFilters;
 };
 
-const ProductFilter = ({ items = [], filterState = useFilters() }: ProductFilterProps) => (
-  <Flex direction="column" w="250px" h="100%" pt="10">
-    <Text w="full" py="5" fontSize="xl" fontWeight="bold">
-      필터
-    </Text>
-    <Divider />
-    {productGroup.map(group => (
-      <ProductGroupView key={group.group} group={group} items={items} filterState={filterState} />
-    ))}
-  </Flex>
-);
+const ProductFilter = ({ filterState = useFilters() }: ProductFilterProps) => {
+  const { data: productCategories } = useGetProductCategories();
+
+  return (
+    <Flex direction="column" w="250px" h="100%" pt="10">
+      <Text w="full" py="5" fontSize="xl" fontWeight="bold">
+        필터
+      </Text>
+      <Divider />
+      {productGroup.map(group => (
+        <ProductGroupView
+          key={group.group}
+          group={group}
+          items={(productCategories || []).map(encodeCategory)}
+          filterState={filterState}
+        />
+      ))}
+    </Flex>
+  );
+};
 
 export default ProductFilter;

src/components/features/StorePage/ProductList/ProductsView.tsx

@@ -1,16 +1,16 @@
+import { useGetProducts } from "@api/productApi";
 import GridView, { GridViewProps } from "@components/ItemView/GridView";
 import ProductCard from "@components/features/StorePage/ProductCard";
-import mockProducts from "@mocks/mockItem/mockProducts";
 import { Product } from "@type/index";
 
 type ProductsViewProps = {
   filters: string[];
 } & Omit<GridViewProps<Product>, "items" | "ItemComponent">;
 
 const ProductsView = ({ filters, ...props }: ProductsViewProps) => {
-  const filteredProducts = mockProducts.filter(() => filters.length === 0);
+  const { data: products } = useGetProducts(filters[0] ? Number(filters[0]) : 0);
 
-  return <GridView items={filteredProducts} ItemComponent={ProductCard} {...props} />;
+  return <GridView items={products || []} ItemComponent={ProductCard} {...props} />;
 };
 
 export default ProductsView;

src/components/features/StorePage/ProductList/index.tsx

@@ -2,15 +2,13 @@ import { Flex } from "@chakra-ui/react";
 import ProductFilter from "@components/features/StorePage/ProductList/ProductFilter";
 import ProductsView from "@components/features/StorePage/ProductList/ProductsView";
 import useFilters from "@hooks/useFilters";
-import mockCategory from "@mocks/mockItem/mockCategory";
-import { encodeCategory } from "@utils/categoryParser";
 
 const ProductList = () => {
   const productFilterState = useFilters();
 
   return (
     <Flex gap="5" w="100%" h="100vh">
-      <ProductFilter filterState={productFilterState} items={mockCategory.map(encodeCategory)} />
+      <ProductFilter filterState={productFilterState} />
       <Flex overflow="scroll" w="100%" h="100%">
         <ProductsView filters={productFilterState.filters} py="10" columns={3} gap="25px" />
       </Flex>