✅ 결제가 완료되었습니다!
{/* 3.1. 결제하기 구현 */} - + {items.length === 0 ? ( +결제된 아이템이 없습니다
+ ) : ( +
+ {items.map((item, index) => (
+
+ )}
{/* 3.2. 홈으로 가기 버튼 구현 */}
+
+
+ ))}
+ 상품명: {item.title}
+가격: {item.lprice}
+수량: {item.quantity}
++ 총 금액:{" "} + {items.reduce( + (sum, item) => sum + Number(item.lprice) * item.quantity, + 0 + ).toLocaleString()}원 +
+
+
+
{/* 1.2. Header Component를 재활용하여 Mypage Header 표기 (title: 마이페이지) */}
-
);
}
diff --git a/src/app/search/page.tsx b/src/app/search/page.tsx
index c3b6212..be3a3a6 100644
--- a/src/app/search/page.tsx
+++ b/src/app/search/page.tsx
@@ -1,29 +1,62 @@
"use client";
import Header from "../../component/layout/Header";
-import Footer from "../../component/layout/Footer";
import SearchInput from "../../component/search/SearchInput";
import ProductCart from "../../component/shopping/ProductCart";
import { useUser } from "../../context/UserContext";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
import { useSearch } from "../../context/SearchContext";
+import CartList from "../../component/shopping/CartList";
+import { useRouter } from "next/navigation";
+
export default function SearchHome() {
const { user, setUser } = useUser();
const { result } = useSearch();
+ const [cart, setCart] = useState<{ [productId: string]: number }>({});
+
// 페이지 최초 렌더링 될 때, setUser로 이름 설정
useEffect(() => {
// 학번 + 이름 형태로 작성 (ex. 2025***** 내이름 )
- setUser({ name: "" });
+ setUser({
+ userId: "202302522", // 예시
+ age: 22,
+ phoneNumber: "010-1234-5678",
+ });
}, []);
+
+ // Remove item from cart and localStorage
+ const handleRemoveFromCart = (productId: string) => {
+ setCart((prevCart) => {
+ const newCart = { ...prevCart };
+ delete newCart[productId];
+ return newCart;
+ });
+ localStorage.removeItem(productId);
+ };
+
+ const router = useRouter();
+
return (
마이페이지
+
+
+
{/* 1.3. 홈으로 가기 버튼 구현(Link or Router 활용) */}
+
아이디: {user.userId}
+나이: {user.age}
+핸드폰번호: {user.phoneNumber}
+
-
+
+
+
+ )}
{/* 가운데 정렬된 copyright 텍스트 */}
);
diff --git a/src/component/layout/Header.tsx b/src/component/layout/Header.tsx
index 295fc06..c69cb91 100644
--- a/src/component/layout/Header.tsx
+++ b/src/component/layout/Header.tsx
@@ -1,28 +1,29 @@
+"use client";
/* 실습 1 */
/* 실습 4 useContext */
import { useUser } from "@/context/UserContext";
interface HeaderProps {
- title: string;
+ title?: string;
}
// 1. props 실습
const Header = ({ title }: HeaderProps) => {
// user 정보를 context API를 이용해 가져오기
- const { user, setUser } = useUser();
+ const { user } = useUser();
return (
- © Copyright 2025. {user.name}. All rights reserved. + © Copyright 2025. {user.userId}. All rights reserved.
-
);
diff --git a/src/component/search/SearchInput.tsx b/src/component/search/SearchInput.tsx
index aea7294..ffb5359 100644
--- a/src/component/search/SearchInput.tsx
+++ b/src/component/search/SearchInput.tsx
@@ -1,31 +1,51 @@
"use client";
import { useSearch } from "@/context/SearchContext";
+import { useEffect, useRef } from "react";
export default function SearchInput() {
const { query, setQuery, setResult } = useSearch();
+ const inputRef = useRef{title}
+ {title &&{title}
}
{/* public directory에 profile.svg 파일 넣은 후, image tag에 경로 지정 */}
- {user.name}
+ {user.userId}
- {user.name}
+ {user.userId}
void; // 삭제 핸들러 추가
+ onRemoveAction: (productId: string) => void; // renamed
}
-export default function CartList({ cart, products, onRemove }: Props) {
+export default function CartList({ cart, products, onRemoveAction }: Props) {
const cartItems = Object.entries(cart)
.map(([id, quantity]) => {
const product = products.find((p) => p.productId === id);
@@ -21,7 +21,45 @@ export default function CartList({ cart, products, onRemove }: Props) {
);
// 2.4 결제하기: "결제하기" 버튼을 클릭하면, 현재 장바구니에 담긴 상품을 확인해 **localStorage**에 저장 후, 결제완료(/checkout) 페이지로 이동한다.
- const handleCheckout = () => {};
+ const handleCheckout = () => {
+ const checkoutItems = cartItems.map(
+ ({
+ productId,
+ title,
+ lprice,
+ quantity,
+ link,
+ image,
+ hprice,
+ mallName,
+ productType,
+ brand,
+ maker,
+ category1,
+ category2,
+ category3,
+ category4,
+ }) => ({
+ productId,
+ title,
+ lprice,
+ quantity,
+ link,
+ image,
+ hprice,
+ mallName,
+ productType,
+ brand,
+ maker,
+ category1,
+ category2,
+ category3,
+ category4,
+ })
+ );
+ localStorage.setItem("checkoutItems", JSON.stringify(checkoutItems));
+ window.location.href = "/checkout";
+ };
return (
@@ -44,7 +82,7 @@ export default function CartList({ cart, products, onRemove }: Props) {
{(Number(item.lprice) * item.quantity).toLocaleString()}원