Skip to content

202302597 이예원 #67

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ooo040216 wants to merge 3 commits into
base: main
Choose a base branch
from
Open

202302597 이예원 #67

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
88dd6c5
Update layout.tsx
ooo040216 Jun 17, 2025
f7001b7
Update page.tsx
ooo040216 Jun 17, 2025
8c2c6dc
Update UserContext.tsx
ooo040216 Jun 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 5 additions & 22 deletions src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<html lang="en">
@@ -27,7 +28,9 @@ export default function RootLayout({
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
{children}
<UserProvider>
{children}
</UserProvider>
</body>
</html>
);
}
19 changes: 19 additions & 0 deletions src/app/mypage/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<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-pink-500 hover:shadow-lg transition cursor-pointer">
홈으로 가기
</Link>
</div>
);
}
22 changes: 11 additions & 11 deletions src/context/UserContext.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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<UserContextType | undefined>(
undefined
);
@@ -22,7 +25,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: "이예원",
userId: "yewonlee",
age: 22,
phoneNumber: "010-1234=5678"
});
return (
<UserContext.Provider value={{ user, setUser }}>
{children}
</UserContext.Provider>
);
};

// 3. user 정보를 사용하기 위한 custom hook
export const useUser = () => {
const context = useContext(UserContext);
Expand Down