2025-RealCoding · kkimash · 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,5 +1,7 @@
 // CheckoutPage
-import { useState } from "react";
+"use client";
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
 import { ProductItem } from "@/types/Product";
 
 interface CheckoutItem {
@@ -9,13 +11,61 @@ interface CheckoutItem {
 //  과제 3
 export default function CheckoutPage() {
   const [items, setItems] = useState<CheckoutItem[]>([]);
+  const router = useRouter();
+
+  useEffect(() => {
+    const data = localStorage.getItem("checkoutItems");
+    if (data) {
+      const parsed: CheckoutItem[] = JSON.parse(data);
+      setItems(parsed);
+      localStorage.removeItem("checkoutItems");
+    }
+  }, []);
+
+  const total = items.reduce(
+   (sum, item) => 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. 결제하기 구현 */}
+      {items.length === 0 ? (
+        <p>결제된 아이템이 없습니다.</p>
+      ) : (
+        <>
+          <ul className="divide-y divide-gray-200">
+            {items.map((item, index) => (
+              <li key={index}>
+                <div>
+                  <p dangerouslySetInnerHTML={{ __html: item.product.title }} />
+                  <p>수량: {item.quantity}</p>
+                </div>
+                <div>
+                  {(
+                    Number(item.product.lprice) * item.quantity
+                  ).toLocaleString()}
+                  원
+                </div>
+              </li>
+            ))}
+          </ul>
+
+          <div className="text-right mt-4 text-lg font-bold">
+            총 합계: {total.toLocaleString()}원
+          </div>
+        </>
+      )}
       <div></div>
       {/* 3.2. 홈으로 가기 버튼 구현 */}
+      <button
+        onClick={() => router.push("/")}
+        className="mt-6 w-full bg-blue-500 text-white py-2 rounded hover:bg-blue-600 transition"
+      >
+        홈으로 가기
+      </button>
     </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,33 @@
+"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();
 
   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="p-6 max-w-3xl mx-auto bg-white rounded shadow mt-6">
+        <h2 className="text-2xl font-bold mb-4">회원 정보</h2>
+        <p className="text-gray-700 mb-2"><strong>이름: </strong>{user.name}</p>
+        <p className="text-gray-700 mb-2"><strong>아이디: </strong>{user.userId}</p>
+        <p className="text-gray-700 mb-2"><strong>나이: </strong>{user.age}</p>
+        <p className="text-gray-700"><strong>전화번호: </strong>{user.phoneNumber}</p>
+      </div>
       {/* 1.3. 홈으로 가기 버튼 구현(Link or Router 활용) */}
+      <Link href="/"
+        className="mt-6 px-4 py-2 rounded-md bg-blue-400 text-white border border-gray-300 hover:bg-blue-500 hover:shadow-lg transition cursor-pointer">
+          홈으로 가기
+      </Link>
     </div>
   );
-}
+}
diff --git a/src/app/search/page.tsx b/src/app/search/page.tsx
@@ -15,7 +15,13 @@ export default function SearchHome() {
   //  페이지 최초 렌더링 될 때, setUser로 이름 설정
   useEffect(() => {
     //  학번 + 이름 형태로 작성 (ex. 2025***** 내이름 )
-    setUser({ name: "" });
+      setUser({ 
+        name: "202303194 김민재",
+        age: 25,
+        userId: "ashclothes01",
+        email: "202303194@o.cnu.ac.kr",
+        phoneNumber: "010-1234-5678",
+     });
   }, []);
 
   return (

diff --git a/src/component/search/SearchInput.tsx b/src/component/search/SearchInput.tsx
@@ -1,8 +1,14 @@
 "use client";
 import { useSearch } from "@/context/SearchContext";
+import { useRef, useEffect } from "react";
 
 export default function SearchInput() {
   const { query, setQuery, setResult } = useSearch();
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, []);
 
   // 검색 기능
   const search = async () => {
@@ -19,13 +25,16 @@ 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,5 +1,6 @@
 "use client";
 import { ProductItem } from "@/types/Product";
+import { useRouter } from "next/navigation";
 
 interface Props {
   cart: { [productId: string]: number };
@@ -20,9 +21,23 @@ export default function CartList({ cart, products, onRemove }: Props) {
     0
   );
 
+  const router = useRouter();
+
   // 2.4 결제하기: "결제하기" 버튼을 클릭하면, 현재 장바구니에 담긴 상품을 확인해 **localStorage**에 저장 후, 결제완료(/checkout) 페이지로 이동한다.
-  const handleCheckout = () => {};
+  const handleCheckout = () => {
+    const checkoutItems = cartItems.map((item) => ({
+      product: {
+        productId: item.productId,
+        title: item.title,
+        lprice: Number(item.lprice),
+      },
+      quantity: item.quantity,
+    }));
+
+    localStorage.setItem("checkoutItems", JSON.stringify(checkoutItems));
 
+    router.push("/checkout");
+  };
   return (
     <div className="p-4 bg-white rounded shadow mt-6">
       <h2 className="text-xl font-bold mb-4">🛒 장바구니</h2>

diff --git a/src/component/shopping/ProductCart.tsx b/src/component/shopping/ProductCart.tsx
@@ -18,17 +18,37 @@ export default function ProductCart({ items }: { items: ProductItem[] }) {
     localStorage.setItem(item.productId, quantity + "");
     localStorage.getItem(item.productId);
   };
+    useEffect(() => {
+    const hasItems = Object.keys(cart).length > 0;
+    setShowCart(hasItems);
+  }, [cart]);
+
 
   /* 과제 2-3: Cart 아이템 지우기 */
-  const handleRemoveFromCart = () => {};
+  const handleRemoveFromCart = (productId: string) => {
+    setCart((prev) => {
+      const updated = Object.fromEntries(
+        Object.entries(prev).filter(([id]) => id !== productId)
+      );
+      return updated;
+    });
+
+    localStorage.removeItem(productId);
+  };
 
   return (
     <div className="p-10">
       {/* 상품 리스트 */}
       <ProductList items={items} onAddToCart={handleAddToCart} />
       {/* 장바구니 */}
       {/* 2.1. 조건부 카트 보이기: 카트에 담긴 상품이 없으면 카트가 보이지 않고, 카트에 담긴 물건이 있으면 카트가 보인다 */}
-      <CartList cart={cart} products={items} onRemove={handleRemoveFromCart} />
+      {showCart && (
+        <CartList
+          cart={cart}
+          products={items}
+          onRemove={handleRemoveFromCart}
+        />
+      )}
     </div>
   );
 }
diff --git a/src/context/UserContext.tsx b/src/context/UserContext.tsx
@@ -8,6 +8,10 @@ interface User {
   name: string;
   // age: number
   // 추가하고 싶은 속성들 ...
+    age: number;
+    userId: string;
+    email: string;
+    phoneNumber: string;
 }
 // UserContextType
 interface UserContextType {
@@ -22,7 +26,13 @@ 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: "202303194 김민재",
+        age: 25,
+        userId: "ashclothes01",
+        email: "202303194@o.cnu.ac.kr",
+        phoneNumber: "010-1234-5678",
+   });
   return (
     <UserContext.Provider value={{ user, setUser }}>
       {children}

diff --git a/tsconfig.json b/tsconfig.json
@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "ES2017",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -19,11 +23,20 @@
       }
     ],
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": [
+        "./src/*"
+      ]
     },
     "noUnusedLocals": false,
     "noUnusedParameters": false
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }