Merge pull request #60 from SanjiJikFarm/feat/#59-mypurchase

[Feat/#59 mypurchase api] 마이페이지 구매내역 API 연결

Author: hakyunghahm

sanjijikfarm/src/components/feature/Receipt/ItemCard.jsx

@@ -7,27 +7,18 @@ export default function ItemCard({ name, code, price, qty, total, rating, onClic
       <div className="text-body-1 mb-1 font-semibold">{name}</div>
 
       {/* 코드 + 가격 정보 */}
-      <div className="text-body-2-med mb-1 flex justify-between text-gray-700">
-        <span>{code}</span>
-        <span>{price.toLocaleString()}</span>
-        <span>{qty}</span>
-        <span className="text-body-2-med text-gray-700">{total.toLocaleString()}</span>
+      <div className="text-body-2-med mb-2 flex justify-between text-gray-700">
+        <span className="w-1/3">{price.toLocaleString()}</span>
+        <span className="w-1/3 text-center">{qty}</span>
+        <span className="w-1/3 text-right">{total.toLocaleString()}</span>
       </div>
 
       {/* 별점 + 리뷰 버튼 */}
       <div className="mt-2 flex items-center justify-between">
         {hasRating ? <span className="text-main-brown text-body-2-med">★ {rating}</span> : <span />}
 
         <button
-          onClick={() =>
-            onClickReview({
-              name,
-              code,
-              rating,
-              reviewText: '맛있고 신선했어요!',
-              images: ['/example.jpg'],
-            })
-          }
+          onClick={onClickReview}
           className={`text-body-2 rounded px-3 py-1 font-semibold ${
             hasRating ? 'bg-pale-green text-black' : 'bg-main-green text-white hover:bg-green-600'
           }`}

sanjijikfarm/src/pages/MyPurchases.jsx

@@ -1,44 +1,121 @@
+import { useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+
+import { useAuthStore } from '@/api/axios/store';
+import { getReceiptList } from '@/api/receipt/receipt';
+import { fetchReviewList } from '@/api/review/review';
 import ItemCard from '@/components/feature/Receipt/ItemCard';
-const dummyGroupedData = [
-  {
-    date: '2025.07.29',
-    items: [
-      { name: '김포로컬푸드 공동판매장', code: '2100032732783', price: 4000, quantity: 1, total: 4000, rating: 3.8 },
-      { name: '김포로컬푸드 공동판매장', code: '2100032732783', price: 4000, quantity: 1, total: 4000, rating: 0 },
-    ],
-  },
-  {
-    date: '2025.07.31',
-    items: [
-      { name: '김포로컬푸드 공동판매장', code: '2100032732783', price: 4000, quantity: 1, total: 4000, rating: 4.2 },
-      { name: '김포로컬푸드 공동판매장', code: '2100032732783', price: 4000, quantity: 1, total: 4000 },
-    ],
-  },
-  {
-    date: '2025.08.01',
-    items: [
-      { name: '김포로컬푸드 공동판매장', code: '2100032732783', price: 4000, quantity: 1, total: 4000, rating: 4.2 },
-      { name: '김포로컬푸드 공동판매장', code: '2100032732783', price: 4000, quantity: 1, total: 4000 },
-    ],
-  },
-];
+import ReviewModal from '@/components/feature/Receipt/ReviewModal';
+
+function groupReceiptsByDate(receipts) {
+  const grouped = {};
+
+  receipts.forEach((receipt) => {
+    const { date, storeName, itemList } = receipt;
+
+    if (!grouped[date]) {
+      grouped[date] = [];
+    }
+
+    const items = itemList.map((item) => ({
+      name: storeName,
+      price: parseInt(item.price),
+      quantity: parseInt(item.qty),
+      total: parseInt(item.total),
+      rating: item.rating,
+      reviewId: item.reviewId ?? null,
+      reviewText: item.reviewText ?? '',
+      imageUrl: item.imageUrl ?? null,
+      productId: item.productId,
+    }));
+
+    grouped[date].push(...items);
+  });
+
+  return Object.entries(grouped)
+    .map(([date, items]) => ({ date, items }))
+    .sort((a, b) => new Date(b.date) - new Date(a.date));
+}
 
 export default function MyPurchases() {
+  const { username } = useAuthStore.getState();
+  const [selectedItem, setSelectedItem] = useState(null);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isEditMode, setIsEditMode] = useState(false);
+
+  const {
+    data: receiptList,
+    isLoading,
+    isError,
+    refetch,
+  } = useQuery({
+    queryKey: ['receiptListWithReviews', username],
+    queryFn: async () => {
+      const [receipts, reviews] = await Promise.all([getReceiptList(username), fetchReviewList()]);
+
+      return receipts.map((receipt) => {
+        const newItemList = receipt.itemList.map((item) => {
+          const matched = reviews.find((r) => r.productId === item.productId);
+          return {
+            ...item,
+            rating: matched?.rating ?? 0,
+            reviewId: matched?.reviewId ?? null,
+            reviewText: matched?.text ?? '',
+            imageUrl: matched?.imageUrl ?? null,
+          };
+        });
+
+        return {
+          ...receipt,
+          itemList: newItemList,
+        };
+      });
+    },
+  });
+
+  const handleOpenModal = (item) => {
+    setSelectedItem(item);
+    setIsEditMode(!!item.reviewId);
+    setIsModalOpen(true);
+  };
+
+  const handleCloseModal = () => {
+    setSelectedItem(null);
+    setIsModalOpen(false);
+  };
+
+  if (isLoading) return <div className="py-10 text-center">로딩 중...</div>;
+  if (isError || !receiptList) return <div className="py-10 text-center">오류 발생</div>;
+
+  const groupedData = groupReceiptsByDate(receiptList);
+
   return (
     <div className="relative h-screen bg-white">
+      {isModalOpen && selectedItem && (
+        <ReviewModal
+          item={selectedItem}
+          isEditMode={isEditMode}
+          onClose={async () => {
+            await refetch();
+            handleCloseModal();
+          }}
+        />
+      )}
+
       <div className="scrollbar-hide overflow-y-auto px-5 pt-6 pb-6" style={{ height: 'calc(100vh - 120px)' }}>
-        {dummyGroupedData.map((group, groupIdx) => (
+        {groupedData.map((group, groupIdx) => (
           <div key={groupIdx} className={`pt-6 ${groupIdx > 0 ? 'mt-4 border-t border-gray-200' : ''}`}>
             <h2 className="text-title-3 mb-4 ml-2 font-bold">{group.date}</h2>
             <div className="space-y-4">
-              {group.items.map((item) => (
+              {group.items.map((item, idx) => (
                 <ItemCard
+                  key={idx}
                   name={item.name}
-                  code={item.code}
                   price={item.price}
                   qty={item.quantity}
                   total={item.total}
                   rating={item.rating}
+                  onClickReview={() => handleOpenModal(item)}
                 />
               ))}
             </div>