Merge pull request #68 from SanjiJikFarm/feat/#39-homeAPI

Author: only1Ksy

sanjijikfarm/src/api/home/CarbonController.js

@@ -0,0 +1,11 @@
+import { axiosInstance } from '../axios/axios';
+import { withErrorBoundary } from '../axios/axios';
+
+/** 이번 달을 인자로 전달하면 탄소 절감량을 반환하는 함수 */
+export const getMonthlyCarbonAmount = (month) =>
+  withErrorBoundary(async () => {
+    const res = await axiosInstance.get('/carbon/monthly', {
+      params: { month },
+    });
+    return res.data;
+  });

sanjijikfarm/src/api/like/LikeController.js

@@ -4,7 +4,7 @@ import { withErrorBoundary } from '../axios/axios';
 /** 상품 아이디를 전달하면 찜 리스트에 추가하는 함수 */
 export function likeProduct(productId) {
   return withErrorBoundary(async () => {
-    const res = await axiosInstance.post(`/products/${productId}/like`);
+    const res = await axiosInstance.get(`/products/${productId}/like`);
     return res.data;
   });
 }

sanjijikfarm/src/api/profile/profile.js

@@ -38,4 +38,3 @@ export const updateUserProfileImage = (newKey) =>
     });
     return res.data;
   });
-

sanjijikfarm/src/components/common/review/ReviewCard.jsx

@@ -5,26 +5,20 @@ export default function ReviewCard({ review }) {
   return (
     <div className="border-gray-1 flex w-full flex-col gap-3 border-b p-4">
       <div className="flex flex-col gap-1">
-        <span className="text-body-1 pl-0.5 font-bold">{review.name}</span>
-        <span className="text-gray-7 text-body-2-med pl-0.5 font-medium">{DateFormatter(review.date)}</span>
+        <span className="text-body-1 pl-0.5 font-bold">{review.productName}</span>
+        <span className="text-gray-7 text-body-2-med pl-0.5 font-medium">{DateFormatter(review.createdAt)}</span>
         <div className="flex items-center pb-1">
           {Array.from({ length: 5 }).map((_, i) => (
             <ReviewStarIcon key={i} className={`${i < review.rating ? 'text-main-green' : 'text-gray-3'}`} />
           ))}
         </div>
         <span className="bg-pale-green text-body-1 scrollbar-hide max-h-25 overflow-scroll p-2.5 font-medium">
-          {review.content}
+          {review.text}
         </span>
       </div>
-      {review.reviewImages.length > 0 && (
-        <div className="scrollbar-hide flex w-full gap-2 overflow-x-auto">
-          {review.reviewImages.map((imgUrl, index) => (
-            <div key={index} className="h-20 w-20 flex-shrink-0">
-              <img className="bg-pale-green h-full w-full object-cover" src={imgUrl} alt={`review img ${index + 1}`} />
-            </div>
-          ))}
-        </div>
-      )}
+      <div className="h-20 w-20 flex-shrink-0">
+        <img className="bg-pale-green h-full w-full object-cover" src={review.imageUrl} alt={`review img`} />
+      </div>
     </div>
   );
 }

sanjijikfarm/src/components/feature/home/MainDecreaseAmount.jsx

@@ -1,15 +1,44 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { getMonthlyCarbonAmount } from '@/api/home/CarbonController';
 import TreeIcon from '@/assets/icons/tree.svg';
 
-export default function MainDecreaseAmount({ amount }) {
+export default function MainDecreaseAmount({ month }) {
+  const { data, isLoading, error } = useQuery({
+    queryKey: ['monthlyReducedAmount', month],
+    queryFn: () => getMonthlyCarbonAmount(month),
+    enabled: !!month,
+    staleTime: 1000 * 60,
+  });
+
+  if (isLoading) {
+    return (
+      <div className="flex h-45 w-full p-4">
+        <div className="border-main-green flex h-full w-full animate-pulse flex-col items-center justify-center gap-2 rounded-3xl border-2 bg-gray-100 p-7">
+          <div className="flex items-center gap-3">
+            <div className="bg-gray-3 h-6 w-40 rounded-md"></div>
+            <div className="bg-gray-3 h-6 w-6 rounded-full"></div>
+          </div>
+          <div className="flex items-end gap-1">
+            <div className="bg-gray-3 h-10 w-24 rounded-md"></div>
+            <div className="bg-gray-3 h-8 w-12 rounded-md"></div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) return <div>error</div>;
+
   return (
     <div className="flex h-45 w-full p-4">
       <div className="border-main-green flex h-full w-full flex-col items-center justify-center gap-2 rounded-3xl border-2 p-7">
         <div className="flex items-center gap-3">
-          <span className="text-heading-1 font-bold">이번주 탄소 절감량</span>
+          <span className="text-heading-1 font-bold">이번달 탄소 절감량</span>
           <TreeIcon />
         </div>
         <div className="flex items-end gap-1">
-          <span className="text-title-0 text- text-main-green font-extrabold">{amount}kg</span>
+          <span className="text-title-0 text- text-main-green font-extrabold">{data.totalSavedKg}kg</span>
           <span className="text-heading-1 font-bold">CO2</span>
         </div>
       </div>

sanjijikfarm/src/components/feature/localfood/map/Map.jsx

@@ -15,6 +15,11 @@ export default function LocalfoodMap({ handleMarkerClick, center, setCenter }) {
   } = useQuery({
     queryKey: ['shopList'],
     queryFn: () => getShopList(),
+    staleTime: 1000 * 60 * 60 * 24,
+    cacheTime: Infinity,
+    refetchOnWindowFocus: false,
+    refetchOnMount: false,
+    refetchInterval: false,
   });
 
   useEffect(() => {

sanjijikfarm/src/pages/HomePage.jsx

@@ -9,8 +9,6 @@ export default function HomePage() {
     { url: 'https://via.placeholder.com/600x300', main: 'Main Title', sub: 'Sub Title goes here' },
   ];
 
-  const TEMP_DECREASE_AMOUNT = 50;
-
   const month = new Date().getMonth();
 
   return (
@@ -22,7 +20,7 @@ export default function HomePage() {
         <span className="text-heading-1 font-bold">{month + 1}월의 식재료 추천</span>
         <FoodSlider month={month + 1} />
       </div>
-      <MainDecreaseAmount amount={TEMP_DECREASE_AMOUNT} />
+      <MainDecreaseAmount month={month + 1} />
     </div>
   );
 }

sanjijikfarm/src/pages/MyLikesPage.jsx

@@ -26,13 +26,13 @@ export default function MyLikesPage() {
 
   if (isLoading || isError) return;
 
-  const allProducts = data?.pages.flatMap((page) => page.contents) ?? [];
+  const allProducts = data?.pages.flatMap((page) => page.content) ?? [];
 
   return (
     <div className="flex h-full w-full">
       <div className="scrollbar-hide flex flex-grow flex-col overflow-scroll">
         {allProducts.length > 0 ? (
-          allProducts.map((localfood) => <LikeLocalfoodCard key={localfood.id} localfood={localfood} />)
+          allProducts.map((localfood) => <LikeLocalfoodCard key={localfood.productId} localfood={localfood} />)
         ) : (
           <LocalfoodEmptyCard text="아직 찜한 메뉴가 없습니다." />
         )}