#16 feat: useSignup deploy 오류 수정

team-Ollie · Jul 3, 2024 · a53b338 · a53b338
1 parent e43226c
commit a53b338
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 19 deletions.
diff --git a/apis/hooks/auth.ts b/apis/hooks/auth.ts
@@ -8,8 +8,9 @@ function useGetCenterList() {
   const { data } = useQuery({
     queryKey: ["getCenterList"],
     queryFn: getCenterList,
-    onError: () => {
+    onError: (error: Error) => {
       window.alert("새로고침 해주세요.");
+      console.error(error);
     },
   });
 

diff --git a/components/auth/AuthInput.tsx b/components/auth/AuthInput.tsx
@@ -1,6 +1,7 @@
 import { ChangeEvent, HTMLInputTypeAttribute, forwardRef } from "react";
 
 export interface TextInputProps {
+  className?: string;
   value: string;
   setValue: React.Dispatch<React.SetStateAction<string>>;
   isError: boolean;
@@ -15,6 +16,7 @@ export interface TextInputProps {
 const AuthInput = forwardRef<HTMLInputElement, TextInputProps>(
   (
     {
+      className = "",
       value,
       isError,
       placeholder = "",
@@ -29,7 +31,7 @@ const AuthInput = forwardRef<HTMLInputElement, TextInputProps>(
     return (
       <div className="w-full relative">
         <div
-          className={`w-[19.5rem] rounded-xl border border-solid  ${
+          className={`${className} rounded-xl border border-solid  ${
             isError ? "border-red-500" : "border-semantic-grey-2"
           } rounded-lg p-2`}
         >

diff --git a/pages/signup.tsx b/pages/signup.tsx
@@ -9,6 +9,9 @@ import { useState, useCallback, useRef } from "react";
 import { useRouter } from "next/router";
 import "react-toastify/dist/ReactToastify.css";
 import CheckIcon from "@/public/svgs/Check.svg";
+import FlexBox from "@/components/Flexbox";
+import { usePostNicknameCheck } from "@/apis/hooks/mypage";
+import { InputError } from "./mypage/password";
 
 const SignUp: NextPage = () => {
   //input용
@@ -46,6 +49,44 @@ const SignUp: NextPage = () => {
   const { data } = useGetCenterList();
   const { mutate: signUpMutate } = useSignUp(userInfo);
 
+  //중복 확인
+  const [nameError, setNameError] = useState<InputError>({
+    status: false,
+    text: "",
+  });
+
+  const onClickCheckBtn = () => {
+    if (checkNicknameValidity()) nameCheckMutate();
+  };
+
+  const [tempName, setTempName] = useState<string>("");
+  const checkNicknameValidity = () => {
+    setTempName(userInfo.nickname);
+    if (userInfo.nickname.length > 8) {
+      setNameError({
+        status: true,
+        text: "닉네임 최대 길이는 8자입니다.",
+      });
+      return false;
+    }
+
+    const regex = /^[가-힣a-zA-Z0-9\s]*$/;
+    if (!regex.test(userInfo.nickname)) {
+      setNameError({
+        status: true,
+        text: "닉네임은 영어, 한글, 숫자로만 구성할 수 있습니다.",
+      });
+      return false;
+    }
+
+    return true;
+  };
+
+  const { mutate: nameCheckMutate } = usePostNicknameCheck(
+    userInfo.nickname,
+    setNameError,
+  );
+
   return (
     <div className="flex flex-col w-full h-screen items-center">
       <HeadFunction title="회원가입" />
@@ -56,14 +97,25 @@ const SignUp: NextPage = () => {
         <div className="flex flex-col gap-3">
           <TextLine children={"아이디"} className="pl-1" />
 
-          <AuthInput
-            placeholder="아이디를 입력하세요"
-            name="loginId"
-            ref={idInputRef}
-            value={userInfo.loginId}
-            onChange={onChange}
-            maxLength={16}
-          />
+          <FlexBox className="w-full gap-2">
+            <AuthInput
+              placeholder="아이디를 입력하세요"
+              name="loginId"
+              ref={idInputRef}
+              value={userInfo.loginId}
+              onChange={onChange}
+              maxLength={16}
+              className="flex-grow"
+            />
+            <button
+              className="shrink-0 px-3 py-2.5 border border-main-color text-main-color rounded-lg h5"
+              onClick={(e) => {
+                e.preventDefault();
+              }}
+            >
+              중복
+            </button>
+          </FlexBox>
 
           <TextLine children={"비밀번호"} className="pl-1" />
 
@@ -73,18 +125,30 @@ const SignUp: NextPage = () => {
             ref={pwInputRef}
             value={userInfo.password}
             onChange={onChange}
+            className={"w-[19.5rem]"}
           />
 
           <TextLine children={"닉네임"} className="pl-1" />
-
-          <AuthInput
-            placeholder="한글, 영어, 숫자 포함 최대 8자"
-            name="nickname"
-            ref={nicknameInputRef}
-            value={userInfo.nickname}
-            onChange={onChange}
-            maxLength={8}
-          />
+          <FlexBox className="w-full gap-2">
+            <AuthInput
+              placeholder="한글, 영어, 숫자 포함 최대 8자"
+              name="nickname"
+              ref={nicknameInputRef}
+              value={userInfo.nickname}
+              onChange={onChange}
+              maxLength={8}
+              calssName="flex-grow"
+            />
+            <button
+              className="shrink-0 px-3 py-2.5 border border-main-color text-main-color rounded-lg h5"
+              onClick={(e) => {
+                e.preventDefault();
+                onClickCheckBtn();
+              }}
+            >
+              중복
+            </button>
+          </FlexBox>
 
           <TextLine children={"식별번호"} className="pl-1" />
 
@@ -95,6 +159,7 @@ const SignUp: NextPage = () => {
             value={userInfo.identifier}
             maxLength={10}
             onChange={onChange}
+            className={"w-[19.5rem]"}
           />
 
           <TextLine children={"소속센터"} className="pl-1" />