diff --git a/public/icons/login/facebook.svg b/public/icons/login/facebook.svg new file mode 100644 index 0000000..7c45f4c --- /dev/null +++ b/public/icons/login/facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icons/login/google.svg b/public/icons/login/google.svg new file mode 100644 index 0000000..3ebc98c --- /dev/null +++ b/public/icons/login/google.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/icons/login/kakao.svg b/public/icons/login/kakao.svg new file mode 100644 index 0000000..3ba3c72 --- /dev/null +++ b/public/icons/login/kakao.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icons/login/naver.svg b/public/icons/login/naver.svg new file mode 100644 index 0000000..f3ee1a8 --- /dev/null +++ b/public/icons/login/naver.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icons/login/phone.svg b/public/icons/login/phone.svg new file mode 100644 index 0000000..56a8273 --- /dev/null +++ b/public/icons/login/phone.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icons/logo.svg b/public/icons/logo.svg new file mode 100644 index 0000000..94ba2b1 --- /dev/null +++ b/public/icons/logo.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/src/app/(auth)/sign-in/page.tsx b/src/app/(auth)/sign-in/page.tsx index 2ac27c7..b9f35ac 100644 --- a/src/app/(auth)/sign-in/page.tsx +++ b/src/app/(auth)/sign-in/page.tsx @@ -1,3 +1,49 @@ +import SignupButton from "@/components/feature/SignInPage/SignupButton"; +import { SIGNUP_BUTTON_TYPES } from "@/constants/signUpButtonType"; +import Image from "next/image"; + export default function SignInPage() { - return
SignInPage
; + return ( +
+ {/* Logo */} +

+ logo +

+ + {/* 로그인/회원가입 구분선 */} +
+
+ + 로그인/회원가입 + +
+
+ + {/* 로그인 버튼 */} + +
+ ); } diff --git a/src/app/(auth)/sign-in/phone/page.tsx b/src/app/(auth)/sign-in/phone/page.tsx new file mode 100644 index 0000000..7a67ec4 --- /dev/null +++ b/src/app/(auth)/sign-in/phone/page.tsx @@ -0,0 +1,142 @@ +"use client"; + +import { useForm } from "react-hook-form"; +import Input from "@/components/commons/Input"; +import Link from "next/link"; +import { useState } from "react"; +import CheckBox from "@/components/commons/CheckBox"; +import UnderlineButton from "@/components/commons/UnderlineButton"; +import Card from "@/components/commons/Card"; +import Button from "@/components/commons/Button"; +import { PhoneSignInForm } from "./type"; + +export default function PhoneSignInPage() { + const { + register, + handleSubmit, + formState: { errors, isSubmitting }, + watch, + setValue, + } = useForm({ + defaultValues: { phone: "", password: "" }, + mode: "onSubmit", + }); + const [isRemember, setIsRemember] = useState(false); + + const phoneValue = watch("phone") || ""; + const passwordValue = watch("password") || ""; + const isPhoneError = phoneValue.length > 0 && /\D/.test(phoneValue); + + const onSubmit = (data: PhoneSignInForm) => { + console.log(isRemember); + console.log(data); + }; + + return ( +
+

전화번호로 시작하기

+ + {/* 전화번호 */} + + {isPhoneError && ( + + 숫자만 입력 가능합니다. + + )} + {errors.phone && !isPhoneError && ( + {errors.phone.message} + )} + + {/* 비밀번호 */} + + {errors.password && ( + + {errors.password.message} + + )} + + {/* 로그인 유지 & 비밀번호 재설정 */} + {isRemember && ( + + )} + +
+ setIsRemember(!isRemember)} + font='body-5' + /> + + + + +
+ + {/* 로그인 버튼 */} + + + ); +} diff --git a/src/constants/signUpButtonType.ts b/src/constants/signUpButtonType.ts new file mode 100644 index 0000000..61824e6 --- /dev/null +++ b/src/constants/signUpButtonType.ts @@ -0,0 +1,9 @@ +import { ButtonType } from "@/types/components/feature/SignInPage/SignUpButton"; + +export const SIGNUP_BUTTON_TYPES: ButtonType[] = [ + "kakao", + "naver", + "facebook", + "google", + "phone", +]; diff --git a/src/types/components/commons/input/index.ts b/src/types/components/commons/input/index.ts index 39949c1..c3587f6 100644 --- a/src/types/components/commons/input/index.ts +++ b/src/types/components/commons/input/index.ts @@ -1,15 +1,18 @@ +import { PhoneSignInForm } from "@/app/(auth)/sign-in/phone/type"; import { FontSizeType } from "@/constants/design"; +import { UseFormRegisterReturn, UseFormSetValue } from "react-hook-form"; export interface InputProps { type: "default" | "error"; id: string; label: string; placeholder: string; - text: string; - setText: (text: string) => void; font?: FontSizeType; iconType?: "text" | "password"; iconSize?: number; isRequired?: boolean; className?: string; + text?: string; + setText?: UseFormSetValue; + register?: UseFormRegisterReturn; } diff --git a/src/types/components/commons/input/inputDeleteIcon.ts b/src/types/components/commons/input/inputDeleteIcon.ts index e42f5a4..f628fb7 100644 --- a/src/types/components/commons/input/inputDeleteIcon.ts +++ b/src/types/components/commons/input/inputDeleteIcon.ts @@ -1,5 +1,8 @@ +import { PhoneSignInForm } from "@/app/(auth)/sign-in/phone/type"; +import { UseFormSetValue } from "react-hook-form"; + export interface InputDeleteIconProps { iconSize: number; - text: string; - setText: (text: string) => void; + text: string | undefined; + setText: UseFormSetValue | undefined; } diff --git a/src/types/components/feature/SignInPage/SignUpButton.ts b/src/types/components/feature/SignInPage/SignUpButton.ts new file mode 100644 index 0000000..974b8a2 --- /dev/null +++ b/src/types/components/feature/SignInPage/SignUpButton.ts @@ -0,0 +1,10 @@ +import { FontSizeType } from "@/constants/design"; + +export interface SignupButtonProps { + type: ButtonType; + font?: FontSizeType; + iconSize?: number; + className?: string; +} + +export type ButtonType = "kakao" | "naver" | "facebook" | "google" | "phone";