Api

src/App.tsx

@@ -67,12 +67,12 @@ function App() {
           <Route path="/payment" element={<PaymentComplete />} />
           <Route path="/list" element={<ProjectList />} />
           <Route path="/reserve" element={<Reserve />} />
-
           <Route path="*" element={<NotFound />} /> {/* 404 페이지 처리 */}
           <Route
             path="/mypage"
             element={isLoggedIn ? <Mypage /> : <Navigate to="/login" replace />}
           />
+          <Route path="/cropinfo/:projectId" element={<CropInfo />} />
           <Route path="/cropinfo" element={<CropInfo />} />
           <Route path="/cropdiary" element={<CropDiary />} />
         </Routes>

src/api/Home.ts

@@ -72,3 +72,68 @@ export const fetchProductsReview2 = async (): Promise<ReviewApiResponse> => {
     };
   }
 };
+
+export interface ProjectResponse {
+  projectId: number;
+  projectTitle: string;
+  farmer: {
+    name: string;
+    location: string;
+    specialNote: string;
+  };
+  price: number;
+  productImageUrl: string;
+}
+
+export interface DiaryResponse {
+  diaryId: number;
+  content: string;
+  status: string;
+  imageUrl: string;
+  tag: string;
+  createdAt: string;
+}
+
+export interface ProjectsApiResponse {
+  success: boolean;
+  response: ProjectResponse[];
+  error: null | string;
+}
+
+export interface DiaryApiResponse {
+  success: boolean;
+  response: DiaryResponse[];
+  error: null | string;
+}
+
+export const fetchLatestProjects = async (): Promise<ProjectsApiResponse> => {
+  try {
+    const response = await axios.get("api/projects/latest");
+    console.log("Fetched latest projects:", response.data);
+    return response.data;
+  } catch (error) {
+    console.error("Latest projects API 에러:", error);
+    return {
+      success: false,
+      response: [],
+      error: "프로젝트 데이터를 불러올 수 없습니다.",
+    };
+  }
+};
+
+export const fetchProjectDiaries = async (
+  projectId: number
+): Promise<DiaryApiResponse> => {
+  try {
+    const response = await axios.get(`api/products/${projectId}/diaries`);
+    console.log(`Fetched diaries for project ${projectId}:`, response.data);
+    return response.data;
+  } catch (error) {
+    console.error(`Project ${projectId} 일지 API 에러:`, error);
+    return {
+      success: false,
+      response: [],
+      error: "프로젝트 일지 데이터를 불러올 수 없습니다.",
+    };
+  }
+};

src/components/project-list/ProductCardList.tsx

@@ -1,7 +1,26 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
 import ProductCard from "./ProductCard";
+import { fetchLatestProjects, type ProjectResponse } from "../../api/Home";
 
-const dummyData = Array.from({ length: 33 }, (_, i) => ({
+interface ProjectCardData {
+  id: number;
+  imageUrl: string;
+  title: string;
+  price: string;
+  weightPerBox: string;
+  daysLeft: number;
+  rating: number;
+  reviewCount: number;
+  farmer?: {
+    name: string;
+    location: string;
+    specialNote: string;
+  };
+  projectId?: number;
+}
+
+const dummyData: ProjectCardData[] = Array.from({ length: 33 }, (_, i) => ({
   id: i,
   imageUrl: "/test_img.png",
   title: `title ${i + 1}`,
@@ -16,24 +35,82 @@ const ITEMS_PER_PAGE = 12;
 
 export default function ProductCardList() {
   const [currentPage, setCurrentPage] = useState(0);
+  const [projects, setProjects] = useState<ProjectResponse[]>([]);
+  const [loading, setLoading] = useState(true);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const loadProjects = async () => {
+      try {
+        setLoading(true);
+        const apiResponse = await fetchLatestProjects();
+        if (apiResponse.success && apiResponse.response) {
+          setProjects(apiResponse.response);
+        } else {
+          console.error("프로젝트 데이터 로드 실패:", apiResponse.error);
+        }
+      } catch (error) {
+        console.error("프로젝트 로드 중 에러:", error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadProjects();
+  }, []);
 
   const goToNextPage = (i: number) => {
     setCurrentPage(i);
-    window.scrollTo({ top: 20, behavior: "smooth" });
+    window.scrollTo({ top: 100, behavior: "smooth" });
   };
 
-  const totalPages = Math.ceil(dummyData.length / ITEMS_PER_PAGE);
-  const pagedData = dummyData.slice(
+  const handleProjectClick = (projectId: number) => {
+    navigate(`/cropInfo/${projectId}`);
+  };
+
+  // API 데이터가 있으면 사용하고, 없으면 더미 데이터 사용
+  const dataToShow: ProjectCardData[] =
+    projects.length > 0
+      ? projects.map((project) => ({
+          id: project.projectId,
+          imageUrl: project.productImageUrl,
+          title: project.projectTitle,
+          price: `${project.price.toLocaleString()}원`,
+          weightPerBox: "1박스",
+          daysLeft: Math.floor(Math.random() * 30),
+          rating: 4 + Math.random(),
+          reviewCount: Math.floor(Math.random() * 50),
+          farmer: project.farmer,
+          projectId: project.projectId,
+        }))
+      : dummyData;
+
+  const totalPages = Math.ceil(dataToShow.length / ITEMS_PER_PAGE);
+  const pagedData = dataToShow.slice(
     currentPage * ITEMS_PER_PAGE,
     (currentPage + 1) * ITEMS_PER_PAGE
   );
 
+  if (loading) {
+    return (
+      <div className="flex justify-center items-center min-h-[400px]">
+        <div className="text-lg">프로젝트를 불러오는 중...</div>
+      </div>
+    );
+  }
+
   return (
     <div className="">
       {/* 카드 리스트 */}
       <div className="grid grid-cols-4 gap-10 my-10">
         {pagedData.map((item) => (
-          <ProductCard key={item.id} {...item} />
+          <div
+            key={item.id}
+            onClick={() => handleProjectClick(item.projectId || item.id)}
+            className="cursor-pointer"
+          >
+            <ProductCard {...item} />
+          </div>
         ))}
       </div>
 
@@ -45,7 +122,7 @@ export default function ProductCardList() {
             onClick={() => goToNextPage(i)}
             className={`px-3 py-1 rounded text-sm font-medium transition-colors ${
               currentPage === i
-                ? "bg-blue-500 text-white"
+                ? "bg-green-700 text-white"
                 : "bg-gray-200 text-black hover:bg-gray-300"
             }`}
           >