+
+ );
+ }
+
return (
프로젝트를 불러오는 중...
+
{/* 카드 리스트 */}
(null);
+ const [quantity, setQuantity] = useState(1);
-
- // 주소
+ // 배송 정보
const [name, setName] = useState("");
- const [phone, setPhone] = useState('');
- const [postcode, setPostcode] = useState('');
- const [address, setAddress] = useState('');
- const [detailAddress, setDetailAddress] = useState('');
+ const [phone, setPhone] = useState("");
+ const [postcode, setPostcode] = useState("");
+ const [address, setAddress] = useState("");
+ const [detailAddress, setDetailAddress] = useState("");
//결제 수단
- const [selected, setSelected] = useState('card');
+ const [selected, setSelected] = useState("card");
const navigate = useNavigate();
+
+ useEffect(() => {
+ // localStorage에서 상품 정보 읽어오기
+ const savedProduct = localStorage.getItem("selectedProduct");
+ if (savedProduct) {
+ const product = JSON.parse(savedProduct);
+ setProductInfo(product);
+ setQuantity(product.quantity || 1);
+ } else {
+ // 상품 정보가 없으면 메인으로 리다이렉트
+ navigate("/");
+ }
+ }, [navigate]);
+
+ const updateQuantity = (newQuantity: number) => {
+ if (newQuantity >= 1) {
+ setQuantity(newQuantity);
+ }
+ };
+
+ const handlePayment = () => {
+ if (!productInfo) return;
+
+ // 주문 정보 유효성 검사
+ if (!name || !phone || !postcode || !address) {
+ alert("모든 배송 정보를 입력해주세요.");
+ return;
+ }
+
+ // 주문 정보를 localStorage에 저장
+ const orderInfo = {
+ product: {
+ ...productInfo,
+ quantity: quantity,
+ },
+ delivery: {
+ name,
+ phone,
+ postcode,
+ address,
+ detailAddress,
+ },
+ payment: {
+ method: selected,
+ totalAmount: productInfo.price * quantity + 3000, // 배송비 포함
+ },
+ orderDate: new Date().toISOString(),
+ };
+
+ localStorage.setItem("orderInfo", JSON.stringify(orderInfo));
+ navigate("/payment");
+ };
+
+ if (!productInfo) {
+ return (
+
{pagedData.map((item) => (
-
@@ -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"
}`}
>
diff --git a/src/pages/Cart.tsx b/src/pages/Cart.tsx
index 750ac44..ac0d3ee 100644
--- a/src/pages/Cart.tsx
+++ b/src/pages/Cart.tsx
@@ -1,198 +1,316 @@
-import { useState } from 'react'
-import { Link, useNavigate } from 'react-router-dom';
-import AddressSearch from '../components/AddressSearch';
-import { useCartStore } from '../store/cartStore';
-import CartItem from '../components/CartItem';
-import PaymentOption from '../components/PaymentOption';
-
+import { useState, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import AddressSearch from "../components/AddressSearch";
+
+interface ProductInfo {
+ projectId: string;
+ name: string;
+ price: number;
+ quantity: number;
+ imageUrl: string;
+ farmer: string;
+ location: string;
+}
export default function Cart() {
- const { items } = useCartStore();
-
- const total = items.reduce((sum, item) => sum + item.price * item.quantity, 0);
+ const [productInfo, setProductInfo] = useState handleProjectClick(item.projectId || item.id)}
+ className="cursor-pointer"
+ >
+
))}
+
+ );
+ }
+
+ const subtotal = productInfo.price * quantity;
+ const shipping = 3000;
+ const total = subtotal + shipping;
+
return (
<>
- 상품 정보를 불러오는 중...
+
- {/* 상품 */}
-
-
-
-
navigate(-1)}>< 뒤로가기
- -
-
- {items.map((item) => (
-
-
-
- 상품금액
-배송비
-할인 금액
-
-
{total.toLocaleString()}원
-3,000원
--2,000원
+
+
+
{/* 배송정보 */}
- navigate(-1)} + > + < 뒤로가기 +
+ + {/* 상품 정보 */} +
+
+ {/* 가격 요약 */}
+ 상품 정보
+ +
+ 
+
+
-
+
+ {productInfo.farmer} • {productInfo.location} +
+{productInfo.name}
++ {(productInfo.price * quantity).toLocaleString()}원 +
+ +
+
+
+ {quantity}
+
+
+
+
+
+ 상품금액
+배송비
+총 결제금액
+
+
+ {subtotal.toLocaleString()}원
+{shipping.toLocaleString()}원
++ {total.toLocaleString()}원 +
+
+
- )
+ );
}
+
{/* 진행 단계 안내 */}
배송정보
-배송정보
- -
- {/* 이름 */}
-
(null);
+ const navigate = useNavigate();
- // const navigate = useNavigate();
+ useEffect(() => {
+ const savedOrder = localStorage.getItem("orderInfo");
+ if (savedOrder) {
+ setOrderInfo(JSON.parse(savedOrder));
+ } else {
+ // 주문 정보가 없으면 메인으로 리다이렉트
+ navigate("/");
+ }
+ }, [navigate]);
+
+ if (!orderInfo) {
+ return (
+
{/* 결제 및 전달 안내 */}
- ([]);
+ const [loading, setLoading] = useState(false);
+
+ useEffect(() => {
+ if (projectId) {
+ loadProjectDiaries(parseInt(projectId));
+ }
+ }, [projectId]);
+
+ const handleAddToCart = () => {
+ // 상품 정보를 localStorage에 저장
+ const productInfo = {
+ projectId: projectId,
+ name: "유기농 토마토",
+ price: 150000,
+ quantity: 1,
+ imageUrl: "/test_img.png",
+ farmer: "김농부",
+ location: "충청남도 논산시",
+ };
+
+ localStorage.setItem("selectedProduct", JSON.stringify(productInfo));
+ navigate("/cart");
+ };
+
+ const loadProjectDiaries = async (id: number) => {
+ try {
+ setLoading(true);
+ const apiResponse = await fetchProjectDiaries(id);
+ if (apiResponse.success && apiResponse.response) {
+ setDiaries(apiResponse.response);
+ console.log("Loaded diaries:", apiResponse.response);
+ } else {
+ console.error("일지 데이터 로드 실패:", apiResponse.error);
+ }
+ } catch (error) {
+ console.error("일지 로드 중 에러:", error);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ const formatDate = (dateString: string) => {
+ return new Date(dateString).toLocaleDateString("ko-KR", {
+ year: "numeric",
+ month: "long",
+ day: "numeric",
+ });
+ };
+
+ const getStatusText = (status: string) => {
+ switch (status) {
+ case "GROWING":
+ return "성장 중";
+ case "HARVESTED":
+ return "수확 완료";
+ case "PLANTED":
+ return "파종 완료";
+ default:
+ return status;
+ }
+ };
+
+ const getStatusColor = (status: string) => {
+ switch (status) {
+ case "GROWING":
+ return "bg-green-100 text-green-800";
+ case "HARVESTED":
+ return "bg-orange-100 text-orange-800";
+ case "PLANTED":
+ return "bg-blue-100 text-blue-800";
+ default:
+ return "bg-gray-100 text-gray-800";
+ }
+ };
return (
)}
+ {/* 농장 일지 */}
+ {activeTab === "diaries" && (
+ 이름
+
+
- )
+ );
}
diff --git a/src/pages/CropInfo.tsx b/src/pages/CropInfo.tsx
index 07aaead..bfade31 100644
--- a/src/pages/CropInfo.tsx
+++ b/src/pages/CropInfo.tsx
@@ -1,9 +1,89 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
+import { useParams, useNavigate } from "react-router-dom";
+import { Link } from "react-router-dom";
+import { fetchProjectDiaries, type DiaryResponse } from "../api/Home";
const CropInfo: React.FC = () => {
- const [activeTab, setActiveTab] = useState<"details" | "guide" | "reviews">(
- "details"
- );
+ const { projectId } = useParams<{ projectId: string }>();
+ const navigate = useNavigate();
+ const [activeTab, setActiveTab] = useState<
+ "details" | "guide" | "reviews" | "diaries"
+ >("diaries");
+ const [diaries, setDiaries] = useState
+
- {/* {emailMessage && (
- 이름 *
setName(e.target.value)} + required />{emailMessage}
- )} */} - - {/* 전화번호 */} -
-
-
-
- 전화번호
+
+
-
- {/* {emailMessage && (
- 전화번호 *
setPhone(e.target.value)} + required />{emailMessage}
- )} */}
- {/* 우편번호 */}
+
{
- setPostcode(zonecode);
- setAddress(address);
- }}
+ {
+ setPostcode(zonecode);
+ setAddress(address);
+ }}
/>
- {/* {postcodeMessage && (
-
-
- {/* 주소 */}
- {/* 결제 수단 */}
-
-
- 우편번호
+우편번호 *
setPostcode(e.target.value)} + required />{postcodeMessage}
-)} */} - -
-
- {/* {addressMessage && (
- 주소
+주소 *
setAddress(e.target.value)} + required /> -{addressMessage}
-)} */} - - {/* 상세주소 */} -
-
setDetailAddress(e.target.value)}
/>
- {/*detailAddressMessage && (
- {detailAddressMessage}
-)} */} - -
-
+ 결제 수단
-
- setSelected('card')}
- />
- setSelected('bank')}
- />
+ {/* 결제 방법 */}
+
-
-
+
-
- {/* 결제하기 */}
-
-
-
-
-
+ {/* 결제하기 버튼 */}
+ 결제 방법
+ +
+
+
+
-
+
+
@@ -130,7 +210,10 @@ const CropInfo: React.FC = () => {
{/* 참여하기 버튼 */}
{/* 상세정보 */}
@@ -457,10 +550,88 @@ const CropInfo: React.FC = () => {
-
@@ -213,6 +296,16 @@ const CropInfo: React.FC = () => {
>
후기
+
+
+ )}
+
{/* 하단 참여하기 버튼 */}
+ 📝 농장 일지 (프로젝트 ID: {projectId}) +
+ + {loading ? ( +
+
+ ) : diaries.length > 0 ? (
+ 일지를 불러오는 중...
+
+ {diaries.map((diary) => (
+
+ ) : (
+
+
+ ))}
+
+
+
+ {diary.imageUrl && (
+
+
+
+
+ {getStatusText(diary.status)}
+
+
+ {formatDate(diary.createdAt)}
+
+
+ + {diary.content} +
+
+ 
{
+ const target = e.target as HTMLImageElement;
+ target.style.display = "none";
+ }}
+ />
+
+ )}
+
+ {diary.tag && (
+
+ {diary.tag.split(",").map((tag, index) => (
+
+ #{tag.trim()}
+
+ ))}
+
+ )}
+
+
+ )}
+
+ 아직 등록된 농장 일지가 없습니다.
+
+
-
diff --git a/src/pages/PaymentComplete.tsx b/src/pages/PaymentComplete.tsx
index 6b07657..638f8ea 100644
--- a/src/pages/PaymentComplete.tsx
+++ b/src/pages/PaymentComplete.tsx
@@ -1,12 +1,52 @@
-import StepBox from "../components/StepBox"
-// import { Link, useNavigate } from "react-router-dom"
-import { Link } from "react-router-dom"
+import StepBox from "../components/StepBox";
+import { Link, useNavigate } from "react-router-dom";
+import { useState, useEffect } from "react";
+
+interface OrderInfo {
+ product: {
+ projectId: string;
+ name: string;
+ price: number;
+ quantity: number;
+ imageUrl: string;
+ farmer: string;
+ location: string;
+ };
+ delivery: {
+ name: string;
+ phone: string;
+ postcode: string;
+ address: string;
+ detailAddress: string;
+ };
+ payment: {
+ method: string;
+ totalAmount: number;
+ };
+ orderDate: string;
+}
export default function PaymentComplete() {
- const farmer = "홍길동"
- const item = "옥수수 두 상자"
+ const [orderInfo, setOrderInfo] = useState
+
+ );
+ }
return (
<>
@@ -14,8 +54,10 @@ export default function PaymentComplete() {
주문 정보를 불러오는 중...
+
결제가 완료됐습니다!
-{farmer}님의 {item} 공동 위탁에 성공적으로 참여하셨습니다.
- ++ {orderInfo.product.farmer}님의 {orderInfo.product.name} 공동 위탁에 + 성공적으로 참여하셨습니다.{" "} +
{/* 신청 내역 */}
@@ -29,43 +71,70 @@ export default function PaymentComplete() {
배송비
-
작물명
-작물명
-작물명
-작물명
+{orderInfo.product.name}
+{orderInfo.product.price.toLocaleString()}원
+{orderInfo.product.quantity}개
+3,000원
총 금액
-000,000원
++ {orderInfo.payment.totalAmount.toLocaleString()}원 +
결제 및 전달 안내
-실제 결제는 위탁이 성공적으로 모집 완료된 이후 진행됩니다. 목표 달성 시, 결제 안내 메일/SMS를 발송해드리니 참고해주세요.
-본 작물의 예상 수확시기는 00년 00월 00일입니다.
- ++ 실제 결제는 위탁이 성공적으로 모집 완료된 이후 진행됩니다. 목표 + 달성 시, 결제 안내 메일/SMS를 발송해드리니 참고해주세요. +
++ 본 작물의 예상 수확시기는{" "} + 00년 00월 00일입니다. +
진행 단계 안내
-다른 작물 둘러보기
- +