2025-RealCoding · tlawjddnjs · Jun 16, 2025
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/app/checkout/page.tsx b/src/app/checkout/page.tsx
@@ -1,21 +1,69 @@
+"use client";
 // CheckoutPage
-import { useState } from "react";
+import { useEffect, useState } from "react";
+import Link from "next/link";
 import { ProductItem } from "@/types/Product";
 
 interface CheckoutItem {
-  product: ProductItem;
-  quantity: number;
+    product: ProductItem;
+    quantity: number;
 }
-//  과제 3
+
+// 과제 3
 export default function CheckoutPage() {
-  const [items, setItems] = useState<CheckoutItem[]>([]);
-  // 3.1. 결제하기 구현
-  return (
-    <div className="p-6 max-w-3xl mx-auto bg-white rounded shadow mt-6">
-      <h1 className="text-2xl font-bold mb-4">✅ 결제가 완료되었습니다!</h1>
-      {/* 3.1. 결제하기 구현 */}
-      <div></div>
-      {/* 3.2. 홈으로 가기 버튼 구현 */}
-    </div>
-  );
+    const [items, setItems] = useState<CheckoutItem[]>([]);
+
+    useEffect(() => {
+        const data = localStorage.getItem("purchasedItems");
+        if (data) {
+            setItems(JSON.parse(data));
+            localStorage.removeItem("purchasedItems");
+        }
+    }, []);
+
+    const total = items.reduce(
+        (sum, item) => sum + Number(item.product.lprice) * item.quantity,
+        0
+    );
+
+    return (
+        <div className="p-6 max-w-3xl mx-auto bg-white rounded shadow mt-6">
+            <h1 className="text-2xl font-bold mb-4">✅ 결제가 완료되었습니다!</h1>
+
+            {/* 3.1. 결제 정보 출력 */}
+            {items.length === 0 ? (
+                <p className="text-gray-600">결제된 아이템이 없습니다.</p>
+            ) : (
+                <div className="space-y-4">
+                    {items.map((item, idx) => (
+                        <div
+                            key={idx}
+                            className="border p-4 rounded shadow flex justify-between items-center"
+                        >
+                            <div>
+                                <p dangerouslySetInnerHTML={{ __html: item.product.title }}></p>
+                                <p className="text-sm text-gray-500">수량: {item.quantity}</p>
+                            </div>
+                            <p className="font-bold text-red-600">
+                                {(Number(item.product.lprice) * item.quantity).toLocaleString()}원
+                            </p>
+                        </div>
+                    ))}
+                    <div className="text-right font-bold text-lg mt-4">
+                        총 결제 금액: {total.toLocaleString()}원
+                    </div>
+                </div>
+            )}
+
+            {/* 3.2. 홈으로 가기 버튼 */}
+            <div className="mt-8 text-center">
+                <Link
+                    href="/"
+                    className="inline-block bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
+                >
+                    홈으로 돌아가기
+                </Link>
+            </div>
+        </div>
+    );
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,6 +1,9 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
+import { ReactNode } from "react";
+import "@/context/UserContext";
+import { UserProvider } from "@/context/UserContext";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -27,7 +30,7 @@ export default function RootLayout({
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
-        {children}
+      <UserProvider>{children}</UserProvider>
       </body>
     </html>
   );

diff --git 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) 추가)
+    // 1.1. UserContext를 활용한 Mypage 구현
+    const { user } = useUser();
+
+    return (
+        <div className="flex flex-col items-center min-h-screen bg-gray-50 p-8 space-y-4">
+            {/* 1.2. Header Component를 재활용하여 Mypage Header 표기 */}
+            <Header title="마이페이지" />
 
-  return (
-    <div className="flex flex-col items-center min-h-screen bg-gray-50">
-      {/* 1.2. Header Component를 재활용하여 Mypage Header 표기 (title: 마이페이지) */}
-      <p>마이페이지</p>
-      {/* Mypage 정보를 UserContext 활용하여 표시 (이름, 아이디, 나이, 핸드폰번호 모두 포함) */}
+            {/* 1.1. Mypage 정보를 UserContext 활용하여 표시 */}
+            <div className="bg-white shadow-md rounded p-6 w-full max-w-md text-left">
+                <p className="mb-2"><strong>이름:</strong> {user.name}</p>
+                <p className="mb-2"><strong>나이:</strong> {user.age}</p>
+                <p className="mb-2"><strong>전화번호:</strong> {user.phoneNumber}</p>
+            </div>
 
-      {/* 1.3. 홈으로 가기 버튼 구현(Link or Router 활용) */}
-    </div>
-  );
+            {/* 1.3. 홈으로 가기 버튼 구현 */}
+            <Link href="/" className="text-blue-600 hover:underline mt-4">
+                홈으로 가기
+            </Link>
+        </div>
+    );
 }
diff --git a/src/app/search/page.tsx b/src/app/search/page.tsx
@@ -14,10 +14,14 @@ export default function SearchHome() {
 
   //  페이지 최초 렌더링 될 때, setUser로 이름 설정
   useEffect(() => {
-    //  학번 + 이름 형태로 작성 (ex. 2025***** 내이름 )
-    setUser({ name: "" });
+    setUser({
+      name: "심정원",
+      age: 22,
+      phoneNumber: "010-1234-5678",
+    });
   }, []);
 
+
   return (
     <div className="flex justify-center">
       <div className="w-[80%]">

diff --git a/src/component/search/SearchInput.tsx b/src/component/search/SearchInput.tsx
@@ -1,10 +1,19 @@
 "use client";
 import { useSearch } from "@/context/SearchContext";
+import { useEffect, useRef } from "react";
+
 
 export default function SearchInput() {
   const { query, setQuery, setResult } = useSearch();
 
-  // 검색 기능
+  const inputRef = useRef<HTMLInputElement>(null);
+
+    useEffect(() => {
+        inputRef.current?.focus();
+    }, []);
+
+
+    // 검색 기능
   const search = async () => {
     try {
       const res = await fetch(`/api/search?query=${encodeURIComponent(query)}`);
@@ -19,13 +28,15 @@ export default function SearchInput() {
   };
 
   // 2.2. SearchInput 컴포넌트가 최초 렌더링 될 때, input tag에 포커스 되는 기능
-  const handleInputChange = () => {};
-
+    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setQuery(e.target.value);
+    };
   // 과제 1-2-3: 페이지 최초 렌더링 시, input에 포커스 되는 기능 (useRef)
 
   return (
     <div className="flex justify-center items-center gap-2 mt-4">
       <input
+          ref={inputRef}
         type="text"
         value={query}
         onChange={handleInputChange}

diff --git a/src/component/shopping/CartList.tsx b/src/component/shopping/CartList.tsx
@@ -1,29 +1,53 @@
 "use client";
 import { ProductItem } from "@/types/Product";
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+
 
 interface Props {
   cart: { [productId: string]: number };
   products: ProductItem[];
-  onRemove: (productId: string) => void; // 삭제 핸들러 추가
+  onRemoveAction: (productId: string) => void; // 삭제 핸들러 추가
 }
 
-export default function CartList({ cart, products, onRemove }: Props) {
-  const cartItems = Object.entries(cart)
+export default function CartList({ cart, products, onRemoveAction }: Props) {
+    const [showCart, setShowCart] = useState(false);
+    const router = useRouter();
+
+    const cartItems = Object.entries(cart)
     .map(([id, quantity]) => {
       const product = products.find((p) => p.productId === id);
       return product ? { ...product, quantity } : null;
     })
     .filter((item): item is NonNullable<typeof item> => item !== null);
 
+    useEffect(() => {
+        setShowCart(cartItems.length > 0);
+    }, [cartItems]);
+
+
   const total = cartItems.reduce(
     (sum, item) => sum + Number(item.lprice) * item.quantity,
     0
   );
 
   // 2.4 결제하기: "결제하기" 버튼을 클릭하면, 현재 장바구니에 담긴 상품을 확인해 **localStorage**에 저장 후, 결제완료(/checkout) 페이지로 이동한다.
-  const handleCheckout = () => {};
+    const handleCheckout = () => {
+        const cartItems = Object.entries(cart)
+            .map(([id, quantity]) => {
+                const product = products.find((p) => p.productId === id);
+                return product ? { title: product.title, lprice: product.lprice, quantity } : null;
+            })
+            .filter((item): item is NonNullable<typeof item> => item !== null);
+
+        localStorage.setItem("purchasedItems", JSON.stringify(cartItems));
+
+        router.push("/checkout");
+    };
+
+    if (!showCart) return null;
 
-  return (
+    return (
     <div className="p-4 bg-white rounded shadow mt-6">
       <h2 className="text-xl font-bold mb-4">🛒 장바구니</h2>
       {cartItems.length === 0 ? (
@@ -44,7 +68,7 @@ export default function CartList({ cart, products, onRemove }: Props) {
                   {(Number(item.lprice) * item.quantity).toLocaleString()}원
                 </p>
                 <button
-                  onClick={() => onRemove(item.productId)}
+                  onClick={() => onRemoveAction(item.productId)}
                   className="text-sm text-white bg-red-500 px-2 py-1 rounded hover:bg-red-600"
                 >
                   삭제

diff --git a/src/component/shopping/ProductCart.tsx b/src/component/shopping/ProductCart.tsx
@@ -20,15 +20,28 @@ export default function ProductCart({ items }: { items: ProductItem[] }) {
   };
 
   /* 과제 2-3: Cart 아이템 지우기 */
-  const handleRemoveFromCart = () => {};
+  const handleRemoveFromCart = (productId: string) => {
+    const newCart = { ...cart };
+    delete newCart[productId];
+    setCart(newCart);
+
+    localStorage.removeItem(productId);
+  };
+
+  <CartList
+      cart={cart}
+      products={items}
+      onRemoveAction={handleRemoveFromCart}
+  />
+
 
   return (
     <div className="p-10">
       {/* 상품 리스트 */}
       <ProductList items={items} onAddToCart={handleAddToCart} />
       {/* 장바구니 */}
       {/* 2.1. 조건부 카트 보이기: 카트에 담긴 상품이 없으면 카트가 보이지 않고, 카트에 담긴 물건이 있으면 카트가 보인다 */}
-      <CartList cart={cart} products={items} onRemove={handleRemoveFromCart} />
+      <CartList cart={cart} products={items} onRemoveAction={handleRemoveFromCart} />
     </div>
   );
 }
diff --git a/src/context/UserContext.tsx b/src/context/UserContext.tsx
@@ -6,7 +6,8 @@ import { createContext, ReactNode, useContext, useState } from "react";
 // User
 interface User {
   name: string;
-  // age: number
+  age: number;
+  phoneNumber: string;
   // 추가하고 싶은 속성들 ...
 }
 // UserContextType
@@ -22,7 +23,10 @@ export const UserContext = createContext<UserContextType | undefined>(
 
 // 2. Provider 생성
 export const UserProvider = ({ children }: { children: ReactNode }) => {
-  const [user, setUser] = useState<User>({ name: "" });
+  const [user, setUser] = useState<User>({
+    name: "심정원"
+    , age: 22
+    , phoneNumber: "010-1234-5678"});
   return (
     <UserContext.Provider value={{ user, setUser }}>
       {children}