+
+ )
+}
\ No newline at end of file
diff --git a/week05/week05_GuSer_02/src/constant/key.ts b/week05/week05_GuSer_02/src/constant/key.ts
new file mode 100644
index 00000000..9c833b69
--- /dev/null
+++ b/week05/week05_GuSer_02/src/constant/key.ts
@@ -0,0 +1,4 @@
+export const LOCAL_STORAGE_KEY = {
+ ACCESS_TOKEN: 'accessToken',
+ REFRESH_TOKEN: 'refreshToken'
+}
\ No newline at end of file
diff --git a/week05/week05_GuSer_02/src/context/AuthContext.tsx b/week05/week05_GuSer_02/src/context/AuthContext.tsx
new file mode 100644
index 00000000..aa5bf867
--- /dev/null
+++ b/week05/week05_GuSer_02/src/context/AuthContext.tsx
@@ -0,0 +1,103 @@
+import { createContext, useContext, useState } from "react";
+import type { RequestLoginDto } from "../types/auth";
+import { useLocalStorage } from "../hooks/useLocalStorage";
+import { LOCAL_STORAGE_KEY } from "../constant/key";
+import { postLogout, postLogin } from "../apis/auth";
+import type { PropsWithChildren } from "react";
+
+interface AuthContextType {
+ accessToken: string | null;
+ refreshToken: string | null;
+ login: (signInData: RequestLoginDto) => Promise
+
+
+ navigate('/')}>돌려돌려 LP판
+
+ 로그인
+ 회원가입
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default HomeLayout;
\ No newline at end of file
diff --git a/week05/week05_GuSer_02/src/layouts/ProtectedLayout.tsx b/week05/week05_GuSer_02/src/layouts/ProtectedLayout.tsx
new file mode 100644
index 00000000..4c502710
--- /dev/null
+++ b/week05/week05_GuSer_02/src/layouts/ProtectedLayout.tsx
@@ -0,0 +1,15 @@
+import { Navigate, Outlet } from "react-router-dom";
+import {useAuth} from "../context/AuthContext";
+
+
+const ProtecteLayout = () => {
+ const {accessToken} = useAuth();
+
+ if(!accessToken){
+ return
+
+ );
+};
+
+export default LoginPage;
+
+
diff --git a/week05/week05_GuSer_02/src/pages/MainPage.tsx b/week05/week05_GuSer_02/src/pages/MainPage.tsx
new file mode 100644
index 00000000..aa7957b4
--- /dev/null
+++ b/week05/week05_GuSer_02/src/pages/MainPage.tsx
@@ -0,0 +1,9 @@
+const MainPage = () => {
+ return (
+ <>
+
+ {/* 뒤로가기 버튼 */}
+
+
+ {/* 구글 로고 */}
+ 
+
+ {/* 이메일 입력 */}
+
+ {errors?.email && touched?.email && (
+
+ {errors.email}
+ )}
+
+ {/* 비밀번호 입력 */}
+
+ {errors?.password && touched?.password && (
+ {errors.password}
+ )}
+
+ {/* 로그인 버튼 */}
+
+
+ {/* 구글 로그인 버튼 */}
+
+ 메인페이지
+ + ) +} + +export default MainPage \ No newline at end of file diff --git a/week05/week05_GuSer_02/src/pages/MyPage.tsx b/week05/week05_GuSer_02/src/pages/MyPage.tsx new file mode 100644 index 00000000..44df5d33 --- /dev/null +++ b/week05/week05_GuSer_02/src/pages/MyPage.tsx @@ -0,0 +1,136 @@ +import { useEffect, useState } from 'react'; +import { getMyInfo, updateMyAvatar } from '../apis/auth'; +import type { ResponseMyInfoDto } from '../types/user'; +import { useAuth } from '../context/AuthContext'; +import { useNavigate } from 'react-router-dom'; + +// 기본 프로필 이미지 (없을 때 표시) +import defaultProfile from '../assets/profile.svg'; + +const MyPage = () => { + const navigate = useNavigate(); + const { logout } = useAuth(); + + // 기존 변수명/흐름 유지 + const [data, setData] = useState
+ {/* ✅ 1) 환영 인사 */}
+
+ );
+};
+
+export default MyPage;
diff --git a/week05/week05_GuSer_02/src/pages/NotFoundPage.tsx b/week05/week05_GuSer_02/src/pages/NotFoundPage.tsx
new file mode 100644
index 00000000..bbf98731
--- /dev/null
+++ b/week05/week05_GuSer_02/src/pages/NotFoundPage.tsx
@@ -0,0 +1,5 @@
+const NotFoundPage = () => {
+ return + {userName ? `${userName}님 환영합니다.` : '환영합니다.'} +
+ + {/* ✅ 2) 프로필 이미지 + 업로드 UI */} +
+ {/* 현재 등록된 아바타(없으면 기본 이미지) */}
+ 
+
+
+
+ {/* ✅ 3) 로그인한 계정 이메일 */}
+
+
+
+
+ {previewUrl && (
+ 미리보기를 확인하고 업로드를 눌러주세요.
+ )} +
+ 로그인 계정:
+ {userEmail || '-'}
+
+
+ {/* 로그아웃 */}
+
+ not found
;
+};
+
+export default NotFoundPage;
\ No newline at end of file
diff --git a/week05/week05_GuSer_02/src/pages/SignupPage.tsx b/week05/week05_GuSer_02/src/pages/SignupPage.tsx
new file mode 100644
index 00000000..a3bbd0d3
--- /dev/null
+++ b/week05/week05_GuSer_02/src/pages/SignupPage.tsx
@@ -0,0 +1,173 @@
+import { useNavigate } from "react-router-dom";
+import z from "zod"
+import { useForm, type SubmitHandler } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { postSignup } from "../apis/auth"
+import { useState } from "react"
+import mail from "../assets/mail.svg"
+import eye from "../assets/eye.svg"
+import eyeoff from "../assets/eye-off.svg"
+import profile from "../assets/profile.svg"
+
+const schema = z.object({
+ email: z.string().email({message: '이메일 형식이 올바르지 않습니다.'}),
+ password: z.string().min(6, {message: '비밀번호는 6자 이상이어야 합니다.'}).max(20, {message: '비밀번호는 20자 이하이어야 합니다.'}),
+ passwordCheck: z.string().min(6, {message: '비밀번호는 6자 이상이어야 합니다.'}).max(20, {message: '비밀번호는 20자 이하이어야 합니다.'}),
+ name: z.string().min(1, {message: '이름을 입력해주세요.'})
+}).refine((data) => data.password === data.passwordCheck, {message: '비밀번호가 일치하지 않습니다.', path: ['passwordCheck']} )
+
+type Formfields = z.infer
+
+ {errors?.email &&
+ case 2:
+ return {errors.email.message}
} +
+ {/* 이전 단계에 입력한 이메일 표시 */}
+
+ case 3:
+ return
+ 
+
+ {getValues('email')}
+
+
+
+
+ 
setShowPass(!showPass)} />
+
+ {errors?.password && {errors.password.message}
} +
+
+
+
+ 
setShowPassCheck(!showPassCheck)} />
+
+ {errors?.passwordCheck && {errors.passwordCheck.message}
} +
+ 
+
+ {errors?.name &&
+ }
+ }
+
+ return (
+ {errors.name.message}
} +
+
+ )
+}
+
+export default SignupPage
\ No newline at end of file
diff --git a/week05/week05_GuSer_02/src/types/auth.ts b/week05/week05_GuSer_02/src/types/auth.ts
new file mode 100644
index 00000000..cb7cd9fe
--- /dev/null
+++ b/week05/week05_GuSer_02/src/types/auth.ts
@@ -0,0 +1,39 @@
+import type { CommonResponse } from "./common"
+
+export interface RequestSignupDto {
+ name: string
+ email: string
+ password: string
+}
+
+export type ResponseSignupDto = CommonResponse<{
+ id: number
+ name: string
+ email: string
+ bio: string | null
+ avatar: string | null
+ createdAt: Date
+ updatedAt: Date
+}>
+
+export interface RequestLoginDto {
+ email: string
+ password: string
+}
+
+export type ResponseLoginDto = CommonResponse<{
+ id: number
+ name: string
+ accessToken: string
+ refreshToken: string
+}>
+
+export type ResponseMyInfoDto = CommonResponse<{
+ id: number
+ name: string
+ email: string
+ bio: string | null
+ avatar: string | null
+ createdAt: Date
+ updatedAt: Date
+}>
\ No newline at end of file
diff --git a/week05/week05_GuSer_02/src/types/common.ts b/week05/week05_GuSer_02/src/types/common.ts
new file mode 100644
index 00000000..0da7f34c
--- /dev/null
+++ b/week05/week05_GuSer_02/src/types/common.ts
@@ -0,0 +1,6 @@
+export interface CommonResponse
+
+
+
+
+
+
+ 회원가입
+ +