+ 
+ 구글로그인
+
+
+
+ {/* OR */}
+
+ 구글로그인
+
+
+
+
+
+ {/* 회원가입 입력 */}
+ OR
+
+
+
+ {errors.email && (
+
+
+ );
+};
diff --git a/judy/Week5/LP/src/components/signup/PasswordInput.tsx b/judy/Week5/LP/src/components/signup/PasswordInput.tsx
new file mode 100644
index 00000000..0383acc9
--- /dev/null
+++ b/judy/Week5/LP/src/components/signup/PasswordInput.tsx
@@ -0,0 +1,100 @@
+import { useState } from "react";
+import { MdEmail } from "react-icons/md";
+import { FaEyeSlash, FaRegEye } from "react-icons/fa";
+import { useFormContext } from "react-hook-form";
+import { FormFields } from "../../context/SignupFormContext";
+
+interface Props {
+ nextStep: () => void;
+}
+
+export const PasswordInput = ({ nextStep }: Props) => {
+ const {
+ register,
+ watch,
+ formState: { errors },
+ } = useFormContext{errors.email.message}
+ )}
+
+
+
+ {/* 이메일 */}
+
+ );
+};
diff --git a/judy/Week5/LP/src/components/signup/ProfileInput.tsx b/judy/Week5/LP/src/components/signup/ProfileInput.tsx
new file mode 100644
index 00000000..f9484ea7
--- /dev/null
+++ b/judy/Week5/LP/src/components/signup/ProfileInput.tsx
@@ -0,0 +1,55 @@
+import { FaRegCircleUser } from "react-icons/fa6";
+import { useNavigate } from "react-router-dom";
+import { SubmitHandler, useFormContext } from "react-hook-form";
+import { FormFields } from "../../context/SignupFormContext";
+import { apiClient } from "../../api/apiClient";
+
+export const ProfileInput = () => {
+ const {
+ register,
+ handleSubmit,
+ formState: { errors, isSubmitting },
+ } = useFormContext
+
+
+ {/* 비밀번호 입력 폼 */}
+
+
+
+ );
+};
diff --git a/judy/Week5/LP/src/context/SignupFormContext.tsx b/judy/Week5/LP/src/context/SignupFormContext.tsx
new file mode 100644
index 00000000..d91c8e33
--- /dev/null
+++ b/judy/Week5/LP/src/context/SignupFormContext.tsx
@@ -0,0 +1,42 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { ReactNode } from "react";
+import { FormProvider, useForm } from "react-hook-form";
+import { z } from "zod";
+
+const schema = z
+ .object({
+ email: z.string().email({ message: "올바른 이메일 형식이 아닙니다." }),
+ password: z
+ .string()
+ .min(8, {
+ message: "비밀번호는 8자 이상이어야 합니다.",
+ })
+ .max(20, {
+ message: "비밀번호는 20자 이하이어야 합니다.",
+ }),
+ confirmPassword: z.string(),
+ name: z.string().min(1, {
+ message: "이름을 입력해주세요.",
+ }),
+ })
+ .refine((data) => data.password === data.confirmPassword, {
+ path: ["confirmPassword"],
+ message: "비밀번호가 일치하지 않습니다.",
+ });
+
+export type FormFields = z.infer{errors.name.message}
+ )}
+
+
+
+
+ );
+};
diff --git a/judy/Week5/LP/src/layout/ProtectedLayout.tsx b/judy/Week5/LP/src/layout/ProtectedLayout.tsx
new file mode 100644
index 00000000..6835ec61
--- /dev/null
+++ b/judy/Week5/LP/src/layout/ProtectedLayout.tsx
@@ -0,0 +1,16 @@
+import { Navigate, Outlet } from "react-router-dom";
+import { NavBar } from "./NavBar";
+
+export const ProtectedLayout = () => {
+ const accessToken = window.localStorage.getItem("accessToken");
+
+ if (!accessToken) {
+ return 돌려돌려LP판
+
+ {isLogin ? (
+ <>
+
+ 마이페이지
+
+
+ ) : (
+ <>
+
+ 로그인
+
+
+ 회원가입
+
+
+ )}
+
+ 로그인 중...
;
+};
diff --git a/judy/Week5/LP/src/pages/HomePage.tsx b/judy/Week5/LP/src/pages/HomePage.tsx
new file mode 100644
index 00000000..5665664a
--- /dev/null
+++ b/judy/Week5/LP/src/pages/HomePage.tsx
@@ -0,0 +1,3 @@
+export const HomePage = () => {
+ return 홈페이지
;
+};
diff --git a/judy/Week5/LP/src/pages/LoginPage.tsx b/judy/Week5/LP/src/pages/LoginPage.tsx
new file mode 100644
index 00000000..04e1dd45
--- /dev/null
+++ b/judy/Week5/LP/src/pages/LoginPage.tsx
@@ -0,0 +1,119 @@
+import clsx from "clsx";
+
+import { IoIosArrowBack } from "react-icons/io";
+import { Link, useNavigate } from "react-router-dom";
+import { UserSigninInfomation, validateSignin } from "../utils/regex";
+import useForm from "../hooks/useForm";
+import { apiClient } from "../api/apiClient";
+import { LoginRequest } from "../types/LoginType";
+import { useEffect } from "react";
+
+export const LoginPage = () => {
+ const navigate = useNavigate();
+ const accessToken = window.localStorage.getItem("accessToken");
+ const { values, errors, touched, getInputProps } =
+ useForm
+
+ );
+};
diff --git a/judy/Week5/LP/src/pages/MyPage.tsx b/judy/Week5/LP/src/pages/MyPage.tsx
new file mode 100644
index 00000000..830f073e
--- /dev/null
+++ b/judy/Week5/LP/src/pages/MyPage.tsx
@@ -0,0 +1,82 @@
+import { useEffect, useState } from "react";
+import { apiClient } from "../api/apiClient";
+import { FaUserCircle } from "react-icons/fa";
+import { useNavigate } from "react-router-dom";
+
+interface IFMyInfo {
+ status: boolean;
+ statusCode: number;
+ message: string;
+ data: {
+ id: number;
+ name: string;
+ email: string;
+ bio: string | null;
+ avatar: string | null;
+ createdAt: string;
+ updatedAt: string;
+ };
+}
+
+interface IFLogout {
+ status: boolean;
+ statusCode: number;
+ message: string;
+ data: null;
+}
+
+export const MyPage = () => {
+ const [myInfo, setMyInfo] = useState
+ {/* 로그인 header */}
+
+ 구글로그인
+
+
+
+ {/* OR */}
+
+
+
+
+ {/* 소셜 로그인 */}
+
+
+ 구글로그인
+
+
+
+ {/* OR */}
+
+
+
+
+ {/* 로그인 입력 */}
+ OR
+
+
+
+ {errors?.email && touched?.email && (
+
+ {errors?.email}
+ )}
+
+ {errors?.password && touched?.password && (
+ {errors?.password}
+ )}
+
+
+
+ );
+};
diff --git a/judy/Week5/LP/src/pages/SignupPage.tsx b/judy/Week5/LP/src/pages/SignupPage.tsx
new file mode 100644
index 00000000..6fe5e2e9
--- /dev/null
+++ b/judy/Week5/LP/src/pages/SignupPage.tsx
@@ -0,0 +1,35 @@
+import { useState } from "react";
+import { IoIosArrowBack } from "react-icons/io";
+import { Link } from "react-router-dom";
+import { EmailInput } from "../components/signup/EmailInput";
+import { PasswordInput } from "../components/signup/PasswordInput";
+import { ProfileInput } from "../components/signup/ProfileInput";
+import { SignupFormProvider } from "../context/SignupFormContext";
+
+export const SignupPage = () => {
+ const [step, setStep] = useState<"email" | "password" | "profile">("email");
+ return (
+
+
+
+
+
+
+ 로그아웃
+
+
+
+
+ {/* 회원가입 header */}
+ setStep("password")} />
+ )}
+ {step === "password" && (
+ setStep("profile")} />
+ )}
+ {step === "profile" &&
+
+
+
+ {/* 이메일 입력 */}
+ {step === "email" && (
+