+
+
+
+
+ )
+};
+
+export default HomeLayout;
\ No newline at end of file
diff --git a/week4/UMC-FE/src/layouts/ProtectedLayout.tsx b/week4/UMC-FE/src/layouts/ProtectedLayout.tsx
new file mode 100644
index 00000000..9eb27226
--- /dev/null
+++ b/week4/UMC-FE/src/layouts/ProtectedLayout.tsx
@@ -0,0 +1,14 @@
+import { useAuth } from '../context/AuthContext';
+import { Navigate, Outlet } from 'react-router-dom';
+
+const ProtectedLayout = () => {
+ const {accessToken} = useAuth();
+
+ if (!accessToken) {
+ return HomePage
;
+};
+
+export default HomePage;
\ No newline at end of file
diff --git a/week4/UMC-FE/src/pages/Login.tsx b/week4/UMC-FE/src/pages/Login.tsx
new file mode 100644
index 00000000..b9557e66
--- /dev/null
+++ b/week4/UMC-FE/src/pages/Login.tsx
@@ -0,0 +1,76 @@
+import useForm from '../hooks/useForm';
+import { validateSignin, type UserSigninInfomation } from '../utils/validate';
+import { useAuth } from '../context/AuthContext';
+import { use, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+const Login = () => {
+ const { login, accessToken } = useAuth();
+ const navigate = useNavigate();
+
+ useEffect(() => {
+ if (accessToken) {
+ navigate("/");
+ }
+ }, [accessToken, navigate]);
+
+ const { getInputProps, errors, touched, values } = useForm
+
+ );
+};
+
+export default Login;
+
diff --git a/week4/UMC-FE/src/pages/NotFoundPage.tsx b/week4/UMC-FE/src/pages/NotFoundPage.tsx
new file mode 100644
index 00000000..81d979c4
--- /dev/null
+++ b/week4/UMC-FE/src/pages/NotFoundPage.tsx
@@ -0,0 +1,5 @@
+const NotFoundPage = () => {
+ return
+
+ 로그인
+ +
+
+ {errors.email && touched.email && (
+
+
+ {errors.email}
+ )} +
+
+ {errors.password && touched.password && (
+
+
+
+ {errors.password}
+ )} +NotFoundPage
;
+};
+
+export default NotFoundPage;
\ No newline at end of file
diff --git a/week4/UMC-FE/src/pages/SignupPage.tsx b/week4/UMC-FE/src/pages/SignupPage.tsx
new file mode 100644
index 00000000..7d1a4829
--- /dev/null
+++ b/week4/UMC-FE/src/pages/SignupPage.tsx
@@ -0,0 +1,171 @@
+import {z} from "zod";
+import {useForm, type SubmitHandler} from "react-hook-form";
+import {zodResolver} from "@hookform/resolvers/zod";
+import { data } from "react-router-dom";
+import { is } from "zod/locales";
+import { postSignup } from "../apis/auth";
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+const schema = z.object({
+ email: z.string().email({ message: "유효한 이메일 주소를 입력해주세요." }),
+ password: z
+ .string()
+ .min(8, { message: "비밀번호는 최소 8자 이상이어야 합니다." })
+ .max(20, { message: "비밀번호는 최대 20자 이하여야 합니다." }),
+ passwordCheck: z
+ .string()
+ .min(8, { message: "비밀번호 확인은 최소 8자 이상이어야 합니다." })
+ .max(20, { message: "비밀번호 확인은 최대 20자 이하여야 합니다." }),
+ name: z.string().min(2, { message: "이름은 최소 2자 이상이어야 합니다." })
+})
+.refine((data) => data.password === data.passwordCheck, {
+ message: "비밀번호가 일치하지 않습니다.",
+ path: ["passwordCheck"],
+});
+
+type FormFields = z.infer
+
+ );
+};
+
+export default SignupPage;
\ No newline at end of file
diff --git a/week4/UMC-FE/src/pages/myPage.tsx b/week4/UMC-FE/src/pages/myPage.tsx
new file mode 100644
index 00000000..0ae46005
--- /dev/null
+++ b/week4/UMC-FE/src/pages/myPage.tsx
@@ -0,0 +1,41 @@
+import { useEffect, useState } from "react";
+import { getMyInfo } from "../apis/auth";
+import type { ResponseMyInfoDto } from "../types/auth";
+import { useAuth } from "../context/AuthContext";
+import { useNavigate } from "react-router-dom";
+
+const MyPage = () => {
+ const navigae = useNavigate();
+ const {logout} = useAuth();
+ const [data, setData] = useState
+
+ 회원가입
+ + {step > 1 && ( +
+
+ )}
+
+
+ 이메일: {emailValue}
+
+ 
+
+ )
+}
+
+export default MyPage;
\ No newline at end of file
diff --git a/week4/UMC-FE/src/types/auth.ts b/week4/UMC-FE/src/types/auth.ts
new file mode 100644
index 00000000..86009ad4
--- /dev/null
+++ b/week4/UMC-FE/src/types/auth.ts
@@ -0,0 +1,44 @@
+import type { CommonResponse } from "./common";
+
+// 회원가입
+export type RequestSignupDto = {
+ name: string;
+ email: string;
+ bio?: string;
+ avatar?: string;
+ password: string;
+};
+
+export type ResponseSignupDto = CommonResponse<{
+ id: number;
+ name: string;
+ email: string;
+ bio: string | null;
+ avatar: string | null;
+ createdAt: Date;
+ updatedAt: Date;
+}>;
+
+// 로그인
+export type RequestSigninDto = {
+ email: string;
+ password: string;
+};
+
+export type ResponseSigninDto = 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/week4/UMC-FE/src/types/common.ts b/week4/UMC-FE/src/types/common.ts
new file mode 100644
index 00000000..aa8a9fd2
--- /dev/null
+++ b/week4/UMC-FE/src/types/common.ts
@@ -0,0 +1,6 @@
+export type CommonResponse