From 2d5a5dd58fff411fccbbe6e507889034933c5f10 Mon Sep 17 00:00:00 2001 From: leejin_rho Date: Thu, 4 Jul 2024 00:03:25 +0900 Subject: [PATCH 1/4] =?UTF-8?q?#16=20fix:=20inputAuth=20line-height=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/auth/AuthInput.tsx | 2 +- pages/success.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/components/auth/AuthInput.tsx b/components/auth/AuthInput.tsx index 95cbe99..80c1ebd 100644 --- a/components/auth/AuthInput.tsx +++ b/components/auth/AuthInput.tsx @@ -37,7 +37,7 @@ const AuthInput = forwardRef( { }); return ( -
+
{
From 0e5d2ca235b22c28f47885e3043cd902e89aeb62 Mon Sep 17 00:00:00 2001 From: leejin_rho Date: Thu, 4 Jul 2024 09:52:33 +0900 Subject: [PATCH 2/4] =?UTF-8?q?#16=20feat:=20id,=20nickname=20=EC=A4=91?= =?UTF-8?q?=EB=B3=B5=20=EC=9C=A0=ED=9A=A8=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apis/auth.ts | 15 +++ apis/hooks/auth.ts | 20 ++- components/auth/AuthInput.tsx | 16 ++- pages/signup.tsx | 231 ++++++++++++++++++++++------------ 4 files changed, 193 insertions(+), 89 deletions(-) diff --git a/apis/auth.ts b/apis/auth.ts index ee9285f..6ea332d 100644 --- a/apis/auth.ts +++ b/apis/auth.ts @@ -79,3 +79,18 @@ export const getCenterList = async () => { throw error; } }; + +interface IdCheckResponseBody { + timestamp: string; + status: number; + error: string; + code: string; + message: string; +} + +async function postIdCheck(loginId: string): Promise { + const { data } = await client.post(`/users/loginId`, { loginId }); + return data; +} + +export { postIdCheck }; diff --git a/apis/hooks/auth.ts b/apis/hooks/auth.ts index a88caf8..4ac3384 100644 --- a/apis/hooks/auth.ts +++ b/apis/hooks/auth.ts @@ -1,5 +1,5 @@ import { useQuery, useMutation } from "@tanstack/react-query"; -import { SignUp, getCenterList, userProps } from "../auth"; +import { SignUp, getCenterList, postIdCheck, userProps } from "../auth"; import { useRouter } from "next/router"; function useGetCenterList() { @@ -28,4 +28,20 @@ function useSignUp(userData: userProps) { return { mutate }; } -export { useGetCenterList, useSignUp }; +function usePostIdCheck( + loginId: string, + setIdError: React.Dispatch>, +) { + const { mutate } = useMutation({ + mutationKey: ["postIdCheck", loginId], + mutationFn: () => postIdCheck(loginId), + onSuccess: () => setIdError({ status: false, text: "" }), + onError: () => { + setIdError({ status: true, text: "이미 사용 중인 아이디입니다." }); + }, + }); + + return { mutate }; +} + +export { useGetCenterList, useSignUp, usePostIdCheck }; diff --git a/components/auth/AuthInput.tsx b/components/auth/AuthInput.tsx index 80c1ebd..52a0f0f 100644 --- a/components/auth/AuthInput.tsx +++ b/components/auth/AuthInput.tsx @@ -10,6 +10,7 @@ export interface TextInputProps { name: string; onChange: (e: ChangeEvent) => void; maxLength?: number; + isSuccess: boolean; } const AuthInput = forwardRef( @@ -24,16 +25,19 @@ const AuthInput = forwardRef( name, onChange, maxLength = 10, + isSuccess = false, }, ref, ) => { + const borderStyle = () => { + if (isSuccess) return "border-green-600"; + else if (isError) return "border-red-500"; + return "border-solid"; + }; + return (
-
+
( />
{isError && ( -
{errorText}
+
{errorText}
)}
); diff --git a/pages/signup.tsx b/pages/signup.tsx index 72f16d1..6ec49c3 100644 --- a/pages/signup.tsx +++ b/pages/signup.tsx @@ -1,5 +1,5 @@ import { centerProps, userProps } from "@/apis/auth"; -import { useGetCenterList, useSignUp } from "@/apis/hooks/auth"; +import { useGetCenterList, usePostIdCheck, useSignUp } from "@/apis/hooks/auth"; import Button from "@/components/Button"; import HeadFunction from "@/components/HeadFunction"; import AuthInput from "@/components/auth/AuthInput"; @@ -12,6 +12,7 @@ import CheckIcon from "@/public/svgs/Check.svg"; import FlexBox from "@/components/Flexbox"; import { usePostNicknameCheck } from "@/apis/hooks/mypage"; import { InputError } from "./mypage/password"; +import NicknameInput from "@/components/mypage/NicknameInput"; const SignUp: NextPage = () => { //input용 @@ -49,6 +50,8 @@ const SignUp: NextPage = () => { const { mutate: signUpMutate } = useSignUp(userInfo); //중복 확인 + //닉네임 중복 + const [tempName, setTempName] = useState(""); const [nameError, setNameError] = useState({ status: false, text: "", @@ -58,7 +61,6 @@ const SignUp: NextPage = () => { if (checkNicknameValidity()) nameCheckMutate(); }; - const [tempName, setTempName] = useState(""); const checkNicknameValidity = () => { setTempName(userInfo.nickname); if (userInfo.nickname.length > 8) { @@ -86,100 +88,167 @@ const SignUp: NextPage = () => { setNameError, ); + //아이디 중복 + const [tempId, setTempId] = useState(""); + const [idError, setIdError] = useState({ + status: false, + text: "", + }); + + const checkIdValidity = () => { + setTempId(userInfo.loginId); + if (userInfo.loginId.length > 16) { + setIdError({ + status: true, + text: "아이디 최대 길이는 16자입니다.", + }); + return false; + } + + const regex = /^[a-zA-Z0-9\s]*$/; + if (!regex.test(userInfo.loginId)) { + setIdError({ + status: true, + text: "아이디는 영어, 숫자로만 구성할 수 있습니다.", + }); + return false; + } + + return true; + }; + + const { mutate: idCheckMutate } = usePostIdCheck( + userInfo.loginId, + setIdError, + ); + + const onClickIdBtn = () => { + if (checkIdValidity()) idCheckMutate(); + }; + return ( -
+
-
- +
+
+ + + + + + +
+ +
+ - - {/* */} - - - - - +
- - +
+ + + + + + +
+ +
+ - {/* */} - - - - - +
- - {data && ( - - )} +
+ + {data && ( + + )} +