From 88dd6c5c302ce77d1849ed0589e39957e60bec6f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?202302597=EC=9D=B4=EC=98=88=EC=9B=90?= Date: Tue, 17 Jun 2025 22:44:04 +0900 Subject: [PATCH 1/3] Update layout.tsx --- src/app/layout.tsx | 27 +++++---------------------- 1 file changed, 5 insertions(+), 22 deletions(-) diff --git a/src/app/layout.tsx b/src/app/layout.tsx index f7fa87e..82331a8 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,34 +1,17 @@ import type { Metadata } from "next"; import { Geist, Geist_Mono } from "next/font/google"; +import { UserProvider } from "@/context/UserContext"; import "./globals.css"; const geistSans = Geist({ - variable: "--font-geist-sans", - subsets: ["latin"], -}); - -const geistMono = Geist_Mono({ - variable: "--font-geist-mono", - subsets: ["latin"], -}); - -export const metadata: Metadata = { - title: "Create Next App", - description: "Generated by create next app", -}; - -export default function RootLayout({ - children, -}: Readonly<{ - children: React.ReactNode; -}>) { - return ( - +@@ -27,7 +28,9 @@ export default function RootLayout({ {children} + + {children} + ); -} From f7001b7053c784fc30b3b34820683d93e7165aeb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?202302597=EC=9D=B4=EC=98=88=EC=9B=90?= Date: Tue, 17 Jun 2025 22:45:17 +0900 Subject: [PATCH 2/3] Update page.tsx --- src/app/mypage/page.tsx | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/src/app/mypage/page.tsx b/src/app/mypage/page.tsx index 93b3ba9..3476e9d 100644 --- a/src/app/mypage/page.tsx +++ b/src/app/mypage/page.tsx @@ -1,14 +1,33 @@ +'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 8c2c6dcf75973a871ff2aed9494e46bc51c9e5ab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?202302597=EC=9D=B4=EC=98=88=EC=9B=90?= Date: Tue, 17 Jun 2025 22:46:44 +0900 Subject: [PATCH 3/3] Update UserContext.tsx --- src/context/UserContext.tsx | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/context/UserContext.tsx b/src/context/UserContext.tsx index e5d3f14..2774022 100644 --- a/src/context/UserContext.tsx +++ b/src/context/UserContext.tsx @@ -1,35 +1,35 @@ +@@ -1,13 +1,16 @@ "use client"; import { createContext, ReactNode, useContext, useState } from "react"; - // 과제 1.1 UserContext 구현 - // User interface User { name: string; // age: number // 추가하고 싶은 속성들 ... + userId: string; + age: number; + phoneNumber: string; } // UserContextType interface UserContextType { - user: User; - setUser: (user: User) => void; -} - -// 1. createContext -export const UserContext = createContext( - undefined -); +@@ -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: "이예원", + userId: "yewonlee", + age: 22, + phoneNumber: "010-1234=5678" + }); return ( {children} ); }; - // 3. user 정보를 사용하기 위한 custom hook export const useUser = () => { const context = useContext(UserContext);