Merge branch 'Weekly9' of https://github.com/kakao-tech-campus-2nd-st…

…ep3/Team10_FE into Feature/카드_리펙토링-#145
kakao-tech-campus-2nd-step3 · Nov 19, 2024 · c840a5f · c840a5f
2 parents ea0ab24 + 2e059f4
commit c840a5f
Show file tree

Hide file tree

Showing 9 changed files with 83 additions and 27 deletions.
diff --git a/src/api/emailApi.ts b/src/api/emailApi.ts
@@ -13,11 +13,21 @@ type LoginData = {
   password: string;
 };
 
-type FarmerData = {
+type FarmerRegisterData = {
   name: string;
   address: string;
   phone: string;
 };
+
+type FarmerData = {
+  name: string;
+  email: string;
+  password: string;
+  phoneNumber: string;
+  storeName: string;
+  storeAddress: string;
+};
+
 type AddressData = {
   defaultAddress: string;
   addressDetail: string;
@@ -39,7 +49,7 @@ const useLoginEmail = () => {
 };
 
 const useCreateFarmer = () => {
-  const fetcher = (farmerData: FarmerData) =>
+  const fetcher = (farmerData: FarmerRegisterData) =>
     needAuthDefaultApi.put(`/api/members/to-farmer`, farmerData).then(({ data }) => data);
   return useMutation({ mutationFn: fetcher });
 };
@@ -58,6 +68,20 @@ const useUpdateEmail = () => {
   });
 };
 
+const useUpdateFarmer = () => {
+  const queryClient = useQueryClient();
+  const fetcher = (updateData: FarmerData) =>
+    needAuthDefaultApi.put(`/api/members/update/farmer`, updateData).then(({ data }) => data);
+
+  return useMutation({
+    mutationFn: fetcher,
+    onSuccess: () =>
+      queryClient.invalidateQueries({
+        queryKey: ["farmer"],
+      }),
+  });
+};
+
 const useUpdateAddress = () => {
   const queryClient = useQueryClient();
   const fetcher = (updateData: AddressData) =>
@@ -82,4 +106,12 @@ const useDeleteAccount = () => {
   });
 };
 
-export { useCreateEmail, useLoginEmail, useUpdateEmail, useUpdateAddress, useCreateFarmer, useDeleteAccount };
+export {
+  useCreateEmail,
+  useLoginEmail,
+  useUpdateEmail,
+  useUpdateAddress,
+  useCreateFarmer,
+  useUpdateFarmer,
+  useDeleteAccount,
+};
diff --git a/src/api/productApi.ts b/src/api/productApi.ts
@@ -20,7 +20,7 @@ type ProductData = {
 };
 
 const useGetProducts = () => {
-  const fetcher = () => defaultApi.get(`/products`).then(({ data }) => data);
+  const fetcher = () => defaultApi.get(`/api/products`).then(({ data }) => data);
 
   return useQuery({
     queryKey: ["products"],
@@ -29,7 +29,7 @@ const useGetProducts = () => {
 };
 
 const useGetProductDetail = (productId: number) => {
-  const fetcher = () => defaultApi.get(`/products/${productId}`).then(({ data }) => data);
+  const fetcher = () => defaultApi.get(`/api/products/${productId}`).then(({ data }) => data);
   return useQuery({
     queryKey: ["products", productId],
     queryFn: fetcher,
@@ -38,7 +38,7 @@ const useGetProductDetail = (productId: number) => {
 };
 
 const useCreateProducts = () => {
-  const fetcher = (productData: ProductData) => defaultApi.post(`/products`, productData).then(({ data }) => data);
+  const fetcher = (productData: ProductData) => defaultApi.post(`/api/products`, productData).then(({ data }) => data);
 
   return useMutation({ mutationFn: fetcher });
 };
@@ -47,7 +47,7 @@ const useUpdateProducts = (productId: number) => {
   const queryClient = useQueryClient();
 
   const fetcher = (productData: ProductData) =>
-    defaultApi.put(`/products/${productId}`, productData).then(({ data }) => data);
+    defaultApi.put(`/api/products/${productId}`, productData).then(({ data }) => data);
 
   return useMutation({
     mutationFn: fetcher,

diff --git a/src/components/features/MyPage/Category.tsx b/src/components/features/MyPage/Category.tsx
@@ -13,7 +13,7 @@ const Category = () => (
       </Flex>
       <ChakraLink
         as={Link}
-        w="50px"
+        w="100px"
         h="20px"
         mt={3}
         ml={5}

diff --git a/src/components/features/MyPage/Order/FarmList.tsx b/src/components/features/MyPage/Order/FarmList.tsx
@@ -2,10 +2,11 @@ import { useState } from "react";
 import { Flex, Button, Text } from "@chakra-ui/react";
 import farm1 from "@assets/Image/Farm/Farm1.png";
 import Image from "@components/common/Image";
+import { Farm } from "@type/index";
 import ContactNumberModal from "./ContactNumberModal";
 import ReviewModal from "./ReviewModal";
 
-const FarmList = () => {
+const FarmList = ({ item }: { item: Farm }) => {
   const [isReviewModalOpen, setIsReviewModalOpen] = useState(false);
   const [isContactModalOpen, setIsContactModalOpen] = useState(false);
 
@@ -27,11 +28,8 @@ const FarmList = () => {
 
   return (
     <Flex direction="column">
-      <Text mt={10} color="#000000" fontSize="20px" fontWeight="bold">
-        2024.09.14
-      </Text>
       <Text mt={3} color="#000000" fontSize="16px" fontWeight="bold">
-        지민이네 복숭아 농장
+        {item.name}
       </Text>
       <Flex align="center" justify="space-between" direction="row" gap="10px">
         <Image mt={3} w="150px" borderRadius="xl" h="150px" src={farm1} alt="Farm image" />
@@ -41,15 +39,15 @@ const FarmList = () => {
               주소 :&nbsp;
             </Text>
             <Text color="#000000" fontSize="16px" fontWeight="medium">
-              부산대학교 금정구 중앙대로 1616
+              {item.address}
             </Text>
           </Flex>
 
           <Text color="#000000" fontSize="16px" fontWeight="bold">
             한 줄 소개
           </Text>
           <Text w="300px" color="#000000" fontSize="16px" fontWeight="medium">
-            가끔 지민은 학교에서 심각하게 집에 가고싶을 때마다 달달한 복숭아 아이스티를 마시며 향수병을 달랩니다.
+            {item.description}
           </Text>
         </Flex>
         <Flex justify="center" direction="column" gap="10px">

diff --git a/src/components/features/StorePage/StoreBanner.tsx b/src/components/features/StorePage/StoreBanner.tsx
@@ -8,7 +8,7 @@ const StoreBanner = () => (
       <Image h="full" src="/assets/image/vegetables.png" />
       <Flex align="center" justify="center" direction="column" w="470px" h="full" color="white">
         <Text fontSize="xl" fontWeight="bold">
-          믿고 먹는 건간한 먹거리,{" "}
+          믿고 먹는 건강한 먹거리,{" "}
           <Text as="span" color="#48BB78">
             품앗이
           </Text>{" "}

diff --git a/src/mocks/mockItem/mockFarms.ts b/src/mocks/mockItem/mockFarms.ts
@@ -5,26 +5,40 @@ const mockFarms: Farm[] = [
     id: 1,
     name: "건호 농장",
     address: "부산진구 개금동",
+    description:
+      "가끔 지민은 학교에서 심각하게 집에 가고싶을 때마다 달달한 복숭아 아이스티를 마시며 향수병을 달랩니다.",
+    date: "2024.09.14",
   },
   {
     id: 2,
     name: "토마토 농장",
     address: "부산 장전동",
+    description:
+      "가끔 지민은 학교에서 심각하게 집에 가고싶을 때마다 달달한 복숭아 아이스티를 마시며 향수병을 달랩니다.",
+    date: "2024.10.14",
   },
   {
     id: 3,
     name: "지민 농장",
     address: "경남 양산시 덕게동",
+    description:
+      "가끔 지민은 학교에서 심각하게 집에 가고싶을 때마다 달달한 복숭아 아이스티를 마시며 향수병을 달랩니다.",
+    date: "2024.09.24",
   },
   {
     id: 4,
     name: "할로윈 농장",
     address: "청담 에이프릴 영어학원",
+    description:
+      "가끔 지민은 학교에서 심각하게 집에 가고싶을 때마다 달달한 복숭아 아이스티를 마시며 향수병을 달랩니다.",
+    date: "2024.09.12",
   },
   {
     id: 5,
     name: "가지싫어 농장",
     address: "부산 해운대구 반송동",
+    description: "가끔 지민은 학교에서 심각하게 집에 가고싶을 때마다 가지를 먹으며 향수병을 달랩니다.",
+    date: "2024.09.04",
   },
 ];
 

diff --git a/src/pages/MyPage/FarmListPage.tsx b/src/pages/MyPage/FarmListPage.tsx
@@ -1,22 +1,32 @@
-import farm6 from "@assets/Image/Farm/Farm6.png";
+import { Flex, Text } from "@chakra-ui/react";
 import ListView from "@components/ItemView/ListView";
 import Card from "@components/common/Card";
 import FarmList from "@components/features/MyPage/Order/FarmList";
 import mockFarms from "@mocks/mockItem/mockFarms";
 import { Farm } from "@type/index";
 
-const farmListData: Farm[] = mockFarms.map((farm, index) => ({
-  id: farm.id,
-  date: `2024.09.${index + 14}`,
-  name: farm.name,
-  address: farm.address,
-  description: "기본 설명입니다.",
-  profile: farm6,
-}));
+const sortedFarms = mockFarms.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
+
+const groupedFarms = sortedFarms.reduce<Farm[][]>((acc, cur) => {
+  const last = acc[acc.length - 1];
+  if (!last || last[0].date !== cur.date) {
+    acc.push([cur]);
+  } else {
+    last.push(cur);
+  }
+  return acc;
+}, []);
 
 const FarmListPage = () => (
   <Card title="농장 체험 내역" w="100%" h="fit-content" p="10">
-    <ListView items={farmListData} ItemComponent={FarmList} />
+    {groupedFarms.map(farms => (
+      <Flex key={farms[0].date} direction="column" mb={4}>
+        <Text py="2" fontWeight="bold" borderBottom="0.7px solid #000000">
+          {farms[0].date}
+        </Text>
+        <ListView items={farms} ItemComponent={FarmList} />
+      </Flex>
+    ))}
   </Card>
 );
 

diff --git a/src/pages/MyPage/ProductWishlistPage.tsx b/src/pages/MyPage/ProductWishlistPage.tsx
@@ -3,7 +3,7 @@ import Card from "@components/common/Card";
 import ProductWish from "@components/features/MyPage/Wishlist/ProductWish";
 
 const ProductWishlistPage = () => (
-  <Card title="위시리스트-농산물" w="100%" h="fit-content" p="10">
+  <Card title="위시리스트" w="100%" h="fit-content" p="10">
     <ProductWish />
   </Card>
 );

diff --git a/src/types/index.ts b/src/types/index.ts
@@ -6,6 +6,8 @@ export type Farm = Item & {
   name: string;
   address: string;
   profile?: string;
+  description: string;
+  date: string;
 };
 
 export type Product = Item & {