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} + ); -} 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 활용) */} + + 홈으로 가기 +
); } 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);