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

…ep3/Team10_FE into Feature/footer_리펙토링-#146

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">

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",
   },
 ];
 

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>
 );
 

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 & {