2025-RealCoding · 95x8x9 · Jun 16, 2025
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,19 +9,20 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "next": "15.3.3",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "next": "15.3.3"
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "typescript": "^5",
-    "@types/node": "^20",
+    "@eslint/eslintrc": "^3",
+    "@tailwindcss/postcss": "^4",
+    "@types/estree": "^1.0.8",
+    "@types/node": "^20.19.0",
     "@types/react": "^19",
     "@types/react-dom": "^19",
-    "@tailwindcss/postcss": "^4",
-    "tailwindcss": "^4",
     "eslint": "^9",
     "eslint-config-next": "15.3.3",
-    "@eslint/eslintrc": "^3"
+    "tailwindcss": "^4",
+    "typescript": "^5"
   }
 }
diff --git a/src/app/checkout/page.tsx b/src/app/checkout/page.tsx
@@ -1,6 +1,8 @@
 // CheckoutPage
-import { useState } from "react";
+"use client";
 import { ProductItem } from "@/types/Product";
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
 
 interface CheckoutItem {
   product: ProductItem;
@@ -9,13 +11,66 @@ interface CheckoutItem {
 //  과제 3
 export default function CheckoutPage() {
   const [items, setItems] = useState<CheckoutItem[]>([]);
+  const [isEmpty, setIsEmpty] = useState(false);
+  const router = useRouter();
+
+  useEffect(() => {
+    const data = localStorage.getItem("checkout");
+    if (data) {
+      const parsed = JSON.parse(data);
+      if (parsed.length === 0) setIsEmpty(true);
+      else setItems(parsed);
+    } else {
+      setIsEmpty(true);
+    }
+    localStorage.removeItem("checkout");
+  }, []);
+
+  const getTotalPrice = () => {
+    return items.reduce(
+      (sum: number, item:CheckoutItem) => sum + Number(item.product.lprice) * item.quantity,
+      0
+    );
+  };
   // 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>
+      {isEmpty ? (
+        <p className="text-gray-500">결제된 아이템이 없습니다.</p>
+      ) : (
+        <div className="space-y-4">
+          {items.map((item:CheckoutItem, index:number) => (
+            <div
+              key={index}
+              className="flex justify-between border-b pb-2 items-center"
+            >
+              <div>
+                <p className="font-semibold">{item.product.title}</p>
+                <p className="text-sm text-gray-500">
+                  {item.product.lprice.toLocaleString()}원 × {item.quantity}
+                </p>
+              </div>
+              <div>
+                {(Number(item.product.lprice) * item.quantity).toLocaleString()}원
+              </div>
+            </div>
+          ))}
+          <div className="font-bold text-right pt-4">
+            총 결제금액: {getTotalPrice().toLocaleString()}원
+          </div>
+        </div>
+      )}
       {/* 3.2. 홈으로 가기 버튼 구현 */}
+      <div className="mt-6 text-right">
+        <button
+          onClick={() => router.push("/")}
+          className="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded"
+        >
+          홈으로 가기
+        </button>
+      </div>
     </div>
   );
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
+import { UserProvider } from "@/context/UserContext";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -27,7 +28,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,42 @@
+"use client";
+
+import Header from "@/component/layout/Header";
+import { useUser } from "@/context/UserContext";
+import Link from "next/link";
+
 // 과제 1: 마이페이지 구현
 export default function MyPage() {
   // 1.1. UserContext를 활용한 Mypage 구현 (UserContext에 아이디(userId: string), 나이(age: number), 핸드폰번호(phoneNumber: string) 추가)
+
+  const { user } = useUser();
+  const { userId, age, phoneNumber } = user;
 
   return (
     <div className="flex flex-col items-center min-h-screen bg-gray-50">
       {/* 1.2. Header Component를 재활용하여 Mypage Header 표기 (title: 마이페이지) */}
-      <p>마이페이지</p>
+      <Header title="마이페이지" />
       {/* Mypage 정보를 UserContext 활용하여 표시 (이름, 아이디, 나이, 핸드폰번호 모두 포함) */}
+      <div className="mt-10 p-6 bg-white shadow rounded w-full max-w-md space-y-4">
+        <p className="text-lg">
+          <strong>아이디:</strong> {userId}
+        </p>
+        <p className="text-lg">
+          <strong>나이:</strong> {age}
+        </p>
+        <p className="text-lg">
+          <strong>핸드폰번호:</strong> {phoneNumber}
+        </p>
+      </div>
 
       {/* 1.3. 홈으로 가기 버튼 구현(Link or Router 활용) */}
+      <div className="mt-6">
+        <Link
+          href="/"
+          className="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded"
+        >
+          홈으로 가기
+        </Link>
+      </div>
     </div>
   );
 }
diff --git a/src/app/search/page.tsx b/src/app/search/page.tsx
@@ -15,7 +15,12 @@ export default function SearchHome() {
   //  페이지 최초 렌더링 될 때, setUser로 이름 설정
   useEffect(() => {
     //  학번 + 이름 형태로 작성 (ex. 2025***** 내이름 )
-    setUser({ name: "" });
+    setUser({
+      name: "202202546 금소현",
+      age: 23,
+      userId:  "95x8x9",
+      phoneNumber: "010-1234-5678"
+    });
   }, []);
 
   return (

diff --git a/src/component/search/SearchInput.tsx b/src/component/search/SearchInput.tsx
@@ -1,9 +1,16 @@
 "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 {
@@ -19,7 +26,7 @@ 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)
 

diff --git a/src/component/shopping/CartList.tsx b/src/component/shopping/CartList.tsx
@@ -1,5 +1,6 @@
 "use client";
 import { ProductItem } from "@/types/Product";
+import { useRouter } from "next/navigation";
 
 interface Props {
   cart: { [productId: string]: number };
@@ -8,6 +9,7 @@ interface Props {
 }
 
 export default function CartList({ cart, products, onRemove }: Props) {
+  const router = useRouter();
   const cartItems = Object.entries(cart)
     .map(([id, quantity]) => {
       const product = products.find((p) => p.productId === id);
@@ -21,7 +23,16 @@ export default function CartList({ cart, products, onRemove }: Props) {
   );
 
   // 2.4 결제하기: "결제하기" 버튼을 클릭하면, 현재 장바구니에 담긴 상품을 확인해 **localStorage**에 저장 후, 결제완료(/checkout) 페이지로 이동한다.
-  const handleCheckout = () => {};
+  const handleCheckout = () => {
+    const checkoutData = cartItems.map(({ productId, title, lprice, quantity }) => ({
+      product: { productId, title, lprice },
+      quantity,
+    }));
+
+    localStorage.setItem("checkout", JSON.stringify(checkoutData));
+    router.push("/checkout");
+
+  };
 
   return (
     <div className="p-4 bg-white rounded shadow mt-6">

diff --git a/src/component/shopping/ProductCart.tsx b/src/component/shopping/ProductCart.tsx
@@ -8,6 +8,11 @@ export default function ProductCart({ items }: { items: ProductItem[] }) {
   const [cart, setCart] = useState<{ [id: string]: number }>({}); // {"88159814281" : 1}
   const [showCart, setShowCart] = useState(false); //  과제 2.1
 
+  useEffect(() => {
+  const hasItems = Object.keys(cart).length > 0;
+  setShowCart(hasItems);
+  }, [cart]);
+
   //  카트에 담기
   const handleAddToCart = (item: ProductItem, quantity: number) => {
     setCart((prev) => ({
@@ -20,7 +25,12 @@ export default function ProductCart({ items }: { items: ProductItem[] }) {
   };
 
   /* 과제 2-3: Cart 아이템 지우기 */
-  const handleRemoveFromCart = () => {};
+  const handleRemoveFromCart = (productId: string) => {
+    const updatedCart = { ...cart };
+    delete updatedCart[productId];
+    setCart(updatedCart);
+    localStorage.removeItem(productId);
+  };
 
   return (
     <div className="p-10">

diff --git a/src/context/UserContext.tsx b/src/context/UserContext.tsx
@@ -6,6 +6,10 @@ import { createContext, ReactNode, useContext, useState } from "react";
 // User
 interface User {
   name: string;
+  age: number;
+  userId: string;
+  phoneNumber: string;
+
   // age: number
   // 추가하고 싶은 속성들 ...
 }
@@ -22,7 +26,12 @@ 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: "202202546 금소현",
+    age: 23,
+    userId: "95x8x9",
+    phoneNumber: "010-1234-5678",
+  });
   return (
     <UserContext.Provider value={{ user, setUser }}>
       {children}