From fcf39d0c6e36a4cd41af07529788ef925885c7df Mon Sep 17 00:00:00 2001 From: kimzieun <10wldms14@gmail.com> Date: Mon, 16 Jun 2025 15:29:39 +0900 Subject: [PATCH 1/9] Update page.tsx --- src/app/mypage/page.tsx | 22 +++++++++++++++++++--- 1 file changed, 19 insertions(+), 3 deletions(-) diff --git a/src/app/mypage/page.tsx b/src/app/mypage/page.tsx index 93b3ba9..3b977c0 100644 --- a/src/app/mypage/page.tsx +++ b/src/app/mypage/page.tsx @@ -1,14 +1,30 @@ +'use client'; + +import { useUser } from "@/context/UserContext"; +import Header from "@/component/layout/Header"; +import Link from "next/link"; + // 과제 1: 마이페이지 구현 export default function MyPage() { // 1.1. UserContext를 활용한 Mypage 구현 (UserContext에 아이디(userId: string), 나이(age: number), 핸드폰번호(phoneNumber: string) 추가) - + const { user } = useUser(); return (
{/* 1.2. Header Component를 재활용하여 Mypage Header 표기 (title: 마이페이지) */} -

마이페이지

+
{/* Mypage 정보를 UserContext 활용하여 표시 (이름, 아이디, 나이, 핸드폰번호 모두 포함) */} - +
+

회원 정보

+

이름: {user.name}

+

아이디: {user.userId}

+

나이: {user.age}

+

전화번호: {user.phoneNumber}

+
{/* 1.3. 홈으로 가기 버튼 구현(Link or Router 활용) */} + + 홈으로 가기 +
); } From 2a5dfe7c2cfdb6337274450313d543c3735b4442 Mon Sep 17 00:00:00 2001 From: kimzieun <10wldms14@gmail.com> Date: Mon, 16 Jun 2025 15:32:05 +0900 Subject: [PATCH 2/9] Update UserContext.tsx --- src/context/UserContext.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/context/UserContext.tsx b/src/context/UserContext.tsx index e5d3f14..6e91afe 100644 --- a/src/context/UserContext.tsx +++ b/src/context/UserContext.tsx @@ -8,6 +8,9 @@ interface User { name: string; // age: number // 추가하고 싶은 속성들 ... + userId: string; + age: number; + phoneNumber: string; } // UserContextType interface UserContextType { @@ -22,7 +25,12 @@ export const UserContext = createContext( // 2. Provider 생성 export const UserProvider = ({ children }: { children: ReactNode }) => { - const [user, setUser] = useState({ name: "" }); + const [user, setUser] = useState({ + name: "202302573 안세원", + userId: "hi1234", + age: 16, + phoneNumber: "010-0000-0000" + }); return ( {children} From ae96bef0c66fd720ee69d0c7a541fd14d966a2fe Mon Sep 17 00:00:00 2001 From: kimzieun <10wldms14@gmail.com> Date: Mon, 16 Jun 2025 15:39:14 +0900 Subject: [PATCH 3/9] Update SearchInput.tsx --- src/component/search/SearchInput.tsx | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/src/component/search/SearchInput.tsx b/src/component/search/SearchInput.tsx index aea7294..53497bb 100644 --- a/src/component/search/SearchInput.tsx +++ b/src/component/search/SearchInput.tsx @@ -1,7 +1,9 @@ "use client"; +import { useEffect, useRef } from "react"; import { useSearch } from "@/context/SearchContext"; export default function SearchInput() { + const inputRef = useRef(null); const { query, setQuery, setResult } = useSearch(); // 검색 기능 @@ -19,14 +21,22 @@ export default function SearchInput() { }; // 2.2. SearchInput 컴포넌트가 최초 렌더링 될 때, input tag에 포커스 되는 기능 - const handleInputChange = () => {}; + const handleInputChange = (e: React.ChangeEvent) => { + setQuery(e.target.value); + }; // 과제 1-2-3: 페이지 최초 렌더링 시, input에 포커스 되는 기능 (useRef) - + useEffect(() => { + if (inputRef.current) { + inputRef.current.focus(); + } + }, []); + return (
Date: Mon, 16 Jun 2025 15:39:53 +0900 Subject: [PATCH 4/9] Update CartList.tsx --- src/component/shopping/CartList.tsx | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/src/component/shopping/CartList.tsx b/src/component/shopping/CartList.tsx index adc8745..926f66e 100644 --- a/src/component/shopping/CartList.tsx +++ b/src/component/shopping/CartList.tsx @@ -21,7 +21,19 @@ export default function CartList({ cart, products, onRemove }: Props) { ); // 2.4 결제하기: "결제하기" 버튼을 클릭하면, 현재 장바구니에 담긴 상품을 확인해 **localStorage**에 저장 후, 결제완료(/checkout) 페이지로 이동한다. - const handleCheckout = () => {}; + const handleCheckout = () => { + const checkoutData = cartItems.map((item) => ({ + product: { + productId: item.productId, + title: item.title, + lprice: item.lprice, + }, + quantity: item.quantity, + })); + + localStorage.setItem("checkoutItems", JSON.stringify(checkoutData)); + window.location.href = "/checkout"; + }; return (
From 35e7dc4a5bc9882b459dad3bec05d7e39428e25d Mon Sep 17 00:00:00 2001 From: kimzieun <10wldms14@gmail.com> Date: Mon, 16 Jun 2025 15:40:43 +0900 Subject: [PATCH 5/9] Update ProductCart.tsx --- src/component/shopping/ProductCart.tsx | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/src/component/shopping/ProductCart.tsx b/src/component/shopping/ProductCart.tsx index a66c2b3..d89ca5f 100644 --- a/src/component/shopping/ProductCart.tsx +++ b/src/component/shopping/ProductCart.tsx @@ -20,7 +20,13 @@ export default function ProductCart({ items }: { items: ProductItem[] }) { }; /* 과제 2-3: Cart 아이템 지우기 */ - const handleRemoveFromCart = () => {}; + const handleRemoveFromCart = (productId: string) => { + const updatedCart = Object.fromEntries( + Object.entries(cart).filter(([id, _]) => id !== productId) + ); + setCart(updatedCart); + localStorage.removeItem(productId); + }; return (
@@ -28,7 +34,13 @@ export default function ProductCart({ items }: { items: ProductItem[] }) { {/* 장바구니 */} {/* 2.1. 조건부 카트 보이기: 카트에 담긴 상품이 없으면 카트가 보이지 않고, 카트에 담긴 물건이 있으면 카트가 보인다 */} - + {Object.keys(cart).length > 0 && ( + + )}
); } From 206bebce9434ef6f45076069f90d112b7fe7025a Mon Sep 17 00:00:00 2001 From: kimzieun <10wldms14@gmail.com> Date: Mon, 16 Jun 2025 15:41:37 +0900 Subject: [PATCH 6/9] Update page.tsx --- src/app/checkout/page.tsx | 44 +++++++++++++++++++++++++++++++++++++-- 1 file changed, 42 insertions(+), 2 deletions(-) diff --git a/src/app/checkout/page.tsx b/src/app/checkout/page.tsx index 0d40153..15543bf 100644 --- a/src/app/checkout/page.tsx +++ b/src/app/checkout/page.tsx @@ -1,5 +1,5 @@ // CheckoutPage -import { useState } from "react"; +import { useState, useEffect, use } from "react"; import { ProductItem } from "@/types/Product"; interface CheckoutItem { @@ -9,13 +9,53 @@ interface CheckoutItem { // 과제 3 export default function CheckoutPage() { const [items, setItems] = useState([]); + + useEffect(() => { + const storedItems = localStorage.getItem("checkoutItems"); + if (storedItems) { + const parsedItems: CheckoutItem[] = JSON.parse(storedItems); + setItems(parsedItems); + parsedItems.forEach((item) => { localStorage.removeItem(item.product.productId); }); + localStorage.removeItem("checkoutItems"); + } + }, []); + + const total = items.reduce((sum, item) => sum + Number(item.product.lprice) * item.quantity, 0); // 3.1. 결제하기 구현 return (

✅ 결제가 완료되었습니다!

{/* 3.1. 결제하기 구현 */} -
+ {items.length === 0 ? ( +

결제한 아이템이 없습니다.

+ ):( + <> +
    + {items.map((item, index) => ( +
  • +

    +

    + 수량: {item.quantity}개 / 가격:{" "} + {(Number(item.product.lprice) * item.quantity).toLocaleString()}원 +

    +
    • + ))} +
+
+ 총 결제 금액: {total.toLocaleString()}원 +
+ + )} + {/* 3.2. 홈으로 가기 버튼 구현 */} +
); } From 7e836155f34f1c9e275926e2c4e422e6172f6083 Mon Sep 17 00:00:00 2001 From: kimzieun <10wldms14@gmail.com> Date: Mon, 16 Jun 2025 15:43:04 +0900 Subject: [PATCH 7/9] Update page.tsx --- src/app/search/page.tsx | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/src/app/search/page.tsx b/src/app/search/page.tsx index c3b6212..fd1b8ca 100644 --- a/src/app/search/page.tsx +++ b/src/app/search/page.tsx @@ -5,19 +5,31 @@ 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"; export default function SearchHome() { const { user, setUser } = useUser(); const { result } = useSearch(); + const [cart, setCart] = useState<{ [productId: string]: number }>({}); + const [showCart, setShowCart] = useState(false); + // 페이지 최초 렌더링 될 때, setUser로 이름 설정 useEffect(() => { // 학번 + 이름 형태로 작성 (ex. 2025***** 내이름 ) - setUser({ name: "" }); + setUser({ + name: "202103592 김지은", + userId: "hi1234", + age: 16, + phoneNumber: "010-0000-0000" + }); }, []); + useEffect(() => { + setShowCart(Object.keys(cart).length > 0); + }, [cart]); + return (
From 14d12b7b4555172f01b817cb64b0fa51584f4069 Mon Sep 17 00:00:00 2001 From: kimzieun <10wldms14@gmail.com> Date: Mon, 16 Jun 2025 15:45:21 +0900 Subject: [PATCH 8/9] Update layout.tsx --- src/app/layout.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/app/layout.tsx b/src/app/layout.tsx index f7fa87e..f8f3c15 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,5 +1,6 @@ import type { Metadata } from "next"; import { Geist, Geist_Mono } from "next/font/google"; +import { UserProvider } from "@/context/UserContext"; import "./globals.css"; const geistSans = Geist({ @@ -27,7 +28,9 @@ export default function RootLayout({ - {children} + + {children} + ); From 216327692a0ec60f23dbe713c4c4b47ad0369e5a Mon Sep 17 00:00:00 2001 From: kimzieun <10wldms14@gmail.com> Date: Mon, 16 Jun 2025 16:13:06 +0900 Subject: [PATCH 9/9] Update UserContext.tsx --- src/context/UserContext.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/context/UserContext.tsx b/src/context/UserContext.tsx index 6e91afe..88044b2 100644 --- a/src/context/UserContext.tsx +++ b/src/context/UserContext.tsx @@ -26,7 +26,7 @@ export const UserContext = createContext( // 2. Provider 생성 export const UserProvider = ({ children }: { children: ReactNode }) => { const [user, setUser] = useState({ - name: "202302573 안세원", + name: "202103592 김지은", userId: "hi1234", age: 16, phoneNumber: "010-0000-0000"