From 8c22d65256cfa919682d19177c4b0373193e4cb2 Mon Sep 17 00:00:00 2001
From: rudtj <kyoungseo03@naver.com>
Date: Wed, 20 Nov 2024 00:07:53 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20farm=20list=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../features/MyPage/Order/FarmList.tsx        | 12 ++++----
 src/mocks/mockItem/mockFarms.ts               | 14 +++++++++
 src/pages/MyPage/FarmListPage.tsx             | 30 ++++++++++++-------
 src/types/index.ts                            |  2 ++
 4 files changed, 41 insertions(+), 17 deletions(-)

diff --git a/src/components/features/MyPage/Order/FarmList.tsx b/src/components/features/MyPage/Order/FarmList.tsx
index 55a57d5..77f4fd5 100644
--- 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,7 +39,7 @@ const FarmList = () => {
               주소 :&nbsp;
             </Text>
             <Text color="#000000" fontSize="16px" fontWeight="medium">
-              부산대학교 금정구 중앙대로 1616
+              {item.address}
             </Text>
           </Flex>
 
@@ -49,7 +47,7 @@ const FarmList = () => {
             한 줄 소개
           </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/mocks/mockItem/mockFarms.ts b/src/mocks/mockItem/mockFarms.ts
index b725c57..ba0df62 100644
--- 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
index e89e018..35d75ae 100644
--- 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/types/index.ts b/src/types/index.ts
index d810f3d..ca29c5f 100644
--- 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 & {