From 2a4cf72960cf164582dc7fd67f741b11dc10462b Mon Sep 17 00:00:00 2001 From: leejin_rho Date: Wed, 3 Jul 2024 11:19:02 +0900 Subject: [PATCH 01/11] =?UTF-8?q?#10=20feat:=20authInput=20component=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/auth/AuthInput.tsx | 55 +++++++++++++ components/calendar/CalendarModal.tsx | 2 +- pages/login.tsx | 12 ++- pages/signup.tsx | 111 ++++++++++++++++---------- pages/success.tsx | 37 +++++++++ 5 files changed, 169 insertions(+), 48 deletions(-) create mode 100644 components/auth/AuthInput.tsx create mode 100644 pages/success.tsx diff --git a/components/auth/AuthInput.tsx b/components/auth/AuthInput.tsx new file mode 100644 index 0000000..a9d9617 --- /dev/null +++ b/components/auth/AuthInput.tsx @@ -0,0 +1,55 @@ +import { ChangeEvent, HTMLInputTypeAttribute, forwardRef } from "react"; + +export interface TextInputProps { + value: string; + setValue: React.Dispatch>; + isError: boolean; + errorText?: string; + placeholder?: string; + type?: HTMLInputTypeAttribute; + name: string; + onChange: (e: ChangeEvent) => void; + maxLength?: number; +} + +const AuthInput = forwardRef( + ( + { + value, + isError, + placeholder = "", + errorText, + type = "text", + name, + onChange, + maxLength = 10, + }, + ref, + ) => { + return ( +
+
+ +
+ {isError && ( +
{errorText}
+ )} +
+ ); + }, +); + +export default AuthInput; diff --git a/components/calendar/CalendarModal.tsx b/components/calendar/CalendarModal.tsx index 2a34b95..93916ab 100644 --- a/components/calendar/CalendarModal.tsx +++ b/components/calendar/CalendarModal.tsx @@ -72,7 +72,7 @@ interface TextProps { addExpBack?: string; } -function TextLine({ +export function TextLine({ title, className, children, diff --git a/pages/login.tsx b/pages/login.tsx index 3857aa3..9d34106 100644 --- a/pages/login.tsx +++ b/pages/login.tsx @@ -9,6 +9,7 @@ import { ResponseBody, setTokenFromLocalStorage } from "@/apis/client"; import { SignIn } from "@/apis/auth"; import { atom, useAtom } from "jotai"; import { centerNameAtom, isAdminAtom } from "@/utils/atom"; +import AuthInput from "@/components/auth/AuthInput"; interface userProps { loginId: string; @@ -62,7 +63,7 @@ const Login: NextPage = () => { alert("로그인에 성공하였습니다"); }, onError: (error) => { - alert("로그인에 실패하였습니다"); + alert("아이디나 비밀번호가 틀렸습니다."); }, }); @@ -75,24 +76,21 @@ const Login: NextPage = () => { >
- -
diff --git a/pages/main.tsx b/pages/main.tsx index 689ed86..07200b4 100644 --- a/pages/main.tsx +++ b/pages/main.tsx @@ -7,17 +7,17 @@ const OnBoardingMain: NextPage = () => { const router = useRouter(); return ( -
- +
+
diff --git a/pages/signup.tsx b/pages/signup.tsx index b36dbbf..1a7be4a 100644 --- a/pages/signup.tsx +++ b/pages/signup.tsx @@ -1,22 +1,18 @@ +import { centerProps, userProps } from "@/apis/auth"; +import { useGetCenterList } from "@/apis/hooks/auth"; import Button from "@/components/Button"; import HeadFunction from "@/components/HeadFunction"; -import TextInput from "@/components/Input"; import AuthInput from "@/components/auth/AuthInput"; import { TextLine } from "@/components/calendar/CalendarModal"; import { NextPage } from "next"; -import { useRouter } from "next/router"; import { useState, useEffect, useCallback, useRef } from "react"; -interface userProps { - loginId: string; - password: string; - nickname: string; - identifier: string; - centerIdx: number; -} - const SignUp: NextPage = () => { - const router = useRouter(); + //api 호출 + const { data } = useGetCenterList(); + // console.log("데이터:", data); + + //input용 const [userInfo, setUserInfo] = useState({ loginId: "", @@ -26,8 +22,6 @@ const SignUp: NextPage = () => { centerIdx: 0, }); - //input 함수 - //inputRef설정 함수 const idInputRef = useRef(null); const pwInputRef = useRef(null); @@ -54,7 +48,7 @@ const SignUp: NextPage = () => {
@@ -101,11 +95,29 @@ const SignUp: NextPage = () => { /> + {data && ( + + )}
- From e43226c2d34cb6cdd4e956f14c281bb148f74b70 Mon Sep 17 00:00:00 2001 From: leejin_rho Date: Wed, 3 Jul 2024 15:03:39 +0900 Subject: [PATCH 03/11] =?UTF-8?q?#16=20feat:=20signup=20api=20=EC=97=B0?= =?UTF-8?q?=EA=B2=B0=20=EB=B0=8F=20=ED=9A=8C=EC=9B=90=EA=B0=80=EC=9E=85=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apis/auth.ts | 2 +- apis/hooks/auth.ts | 34 +++++++++++++++++----------------- pages/signup.tsx | 17 ++++++++++------- 3 files changed, 28 insertions(+), 25 deletions(-) diff --git a/apis/auth.ts b/apis/auth.ts index 2b6071b..3f21cd8 100644 --- a/apis/auth.ts +++ b/apis/auth.ts @@ -1,4 +1,4 @@ -import client, { ResponseBody } from "./client"; +import client from "./client"; export const SignIn = async (userData: { loginId: string; diff --git a/apis/hooks/auth.ts b/apis/hooks/auth.ts index 336b529..60b40a5 100644 --- a/apis/hooks/auth.ts +++ b/apis/hooks/auth.ts @@ -1,5 +1,5 @@ import { useQuery, useMutation } from "@tanstack/react-query"; -import { getCenterList } from "../auth"; +import { SignUp, getCenterList, userProps } from "../auth"; import { useRouter } from "next/router"; function useGetCenterList() { @@ -16,22 +16,22 @@ function useGetCenterList() { return { data }; } -export { useGetCenterList }; +function useSignUp(userData: userProps) { + const router = useRouter(); -// export const useSignUp = async () => { -// const router = useRouter(); + const { mutate } = useMutation({ + mutationKey: ["signUp"], + mutationFn: () => SignUp(userData), + onSuccess: () => { + router.push("/login"); + }, + onError: () => { + window.alert("다시 회원가입해주세요."); + router.push("/main"); + }, + }); -// const { data } = useQuery({ -// queryKey: [""], -// queryFn: , -// onSuccess: () => { -// window.alert("회원가입 성공"); -// }, -// onError: () => { -// window.alert("다시 회원가입해주세요."); -// router.push("/404"); -// }, -// }); + return { mutate }; +} -// return { data }; -// }; +export { useGetCenterList, useSignUp }; diff --git a/pages/signup.tsx b/pages/signup.tsx index 1a7be4a..dbe823d 100644 --- a/pages/signup.tsx +++ b/pages/signup.tsx @@ -1,17 +1,16 @@ import { centerProps, userProps } from "@/apis/auth"; -import { useGetCenterList } from "@/apis/hooks/auth"; +import { useGetCenterList, useSignUp } from "@/apis/hooks/auth"; import Button from "@/components/Button"; import HeadFunction from "@/components/HeadFunction"; import AuthInput from "@/components/auth/AuthInput"; import { TextLine } from "@/components/calendar/CalendarModal"; import { NextPage } from "next"; -import { useState, useEffect, useCallback, useRef } from "react"; +import { useState, useCallback, useRef } from "react"; +import { useRouter } from "next/router"; +import "react-toastify/dist/ReactToastify.css"; +import CheckIcon from "@/public/svgs/Check.svg"; const SignUp: NextPage = () => { - //api 호출 - const { data } = useGetCenterList(); - // console.log("데이터:", data); - //input용 const [userInfo, setUserInfo] = useState({ @@ -31,7 +30,6 @@ const SignUp: NextPage = () => { //onChange const onChange = (e: React.ChangeEvent) => { - console.log(userInfo); setUserInfo({ ...userInfo, [e.target.name]: e.target.value }); }; @@ -39,10 +37,15 @@ const SignUp: NextPage = () => { const onSubmit = useCallback( (e: React.FormEvent) => { e.preventDefault(); + signUpMutate(); }, [userInfo], ); + //api 호출 + const { data } = useGetCenterList(); + const { mutate: signUpMutate } = useSignUp(userInfo); + return (
From a53b338b2662b868ef4d0a18bde745e451b1f2be Mon Sep 17 00:00:00 2001 From: leejin_rho Date: Wed, 3 Jul 2024 16:39:46 +0900 Subject: [PATCH 04/11] =?UTF-8?q?#16=20feat:=20useSignup=20deploy=20?= =?UTF-8?q?=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apis/hooks/auth.ts | 3 +- components/auth/AuthInput.tsx | 4 +- pages/signup.tsx | 99 +++++++++++++++++++++++++++++------ 3 files changed, 87 insertions(+), 19 deletions(-) diff --git a/apis/hooks/auth.ts b/apis/hooks/auth.ts index 60b40a5..8256cac 100644 --- 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 index a9d9617..caafa8d 100644 --- 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>; isError: boolean; @@ -15,6 +16,7 @@ export interface TextInputProps { const AuthInput = forwardRef( ( { + className = "", value, isError, placeholder = "", @@ -29,7 +31,7 @@ const AuthInput = forwardRef( return (
diff --git a/pages/signup.tsx b/pages/signup.tsx index dbe823d..b5ee5ce 100644 --- 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({ + status: false, + text: "", + }); + + const onClickCheckBtn = () => { + if (checkNicknameValidity()) nameCheckMutate(); + }; + + const [tempName, setTempName] = useState(""); + 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 (
@@ -56,14 +97,25 @@ const SignUp: NextPage = () => {
- + + + + @@ -73,18 +125,30 @@ const SignUp: NextPage = () => { ref={pwInputRef} value={userInfo.password} onChange={onChange} + className={"w-[19.5rem]"} /> - - + + + + @@ -95,6 +159,7 @@ const SignUp: NextPage = () => { value={userInfo.identifier} maxLength={10} onChange={onChange} + className={"w-[19.5rem]"} /> From 94baf5a2143ed1b5abe0bac332ac975c01d1470e Mon Sep 17 00:00:00 2001 From: leejin_rho Date: Wed, 3 Jul 2024 16:45:37 +0900 Subject: [PATCH 05/11] =?UTF-8?q?#16=20feat:=20useSignup=20deploy=20?= =?UTF-8?q?=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apis/auth.ts | 3 +++ apis/hooks/auth.ts | 2 +- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/apis/auth.ts b/apis/auth.ts index 3f21cd8..7d4cd64 100644 --- a/apis/auth.ts +++ b/apis/auth.ts @@ -66,6 +66,9 @@ export type centerProps = { export interface getCenterListBody { ceterList: centerProps[]; + isSuccess: boolean; + code: number; + message: string; } export const getCenterList = async (): Promise => { diff --git a/apis/hooks/auth.ts b/apis/hooks/auth.ts index 8256cac..13a703f 100644 --- a/apis/hooks/auth.ts +++ b/apis/hooks/auth.ts @@ -26,7 +26,7 @@ function useSignUp(userData: userProps) { onSuccess: () => { router.push("/login"); }, - onError: () => { + onError: (error: Error) => { window.alert("다시 회원가입해주세요."); router.push("/main"); }, From e09639b43fa9a1f2eba5cfc6c1b972d54416ca42 Mon Sep 17 00:00:00 2001 From: leejin_rho Date: Wed, 3 Jul 2024 16:48:08 +0900 Subject: [PATCH 06/11] =?UTF-8?q?#16=20feat:=20useSignup=20deploy=20?= =?UTF-8?q?=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apis/hooks/auth.ts | 5 ----- 1 file changed, 5 deletions(-) diff --git a/apis/hooks/auth.ts b/apis/hooks/auth.ts index 13a703f..d62b2c1 100644 --- a/apis/hooks/auth.ts +++ b/apis/hooks/auth.ts @@ -8,12 +8,7 @@ function useGetCenterList() { const { data } = useQuery({ queryKey: ["getCenterList"], queryFn: getCenterList, - onError: (error: Error) => { - window.alert("새로고침 해주세요."); - console.error(error); - }, }); - return { data }; } From 676af788195a340d215d9091a9a4fb6417bc6637 Mon Sep 17 00:00:00 2001 From: leejin_rho Date: Wed, 3 Jul 2024 16:50:45 +0900 Subject: [PATCH 07/11] =?UTF-8?q?#16=20feat:=20authInput=20=EC=98=A4?= =?UTF-8?q?=EB=A5=98=20=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 | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/components/auth/AuthInput.tsx b/components/auth/AuthInput.tsx index caafa8d..95cbe99 100644 --- a/components/auth/AuthInput.tsx +++ b/components/auth/AuthInput.tsx @@ -3,8 +3,7 @@ import { ChangeEvent, HTMLInputTypeAttribute, forwardRef } from "react"; export interface TextInputProps { className?: string; value: string; - setValue: React.Dispatch>; - isError: boolean; + isError?: boolean; errorText?: string; placeholder?: string; type?: HTMLInputTypeAttribute; From 2b2968da81589b577835e7e8751520e8897ccc33 Mon Sep 17 00:00:00 2001 From: leejin_rho Date: Wed, 3 Jul 2024 16:52:38 +0900 Subject: [PATCH 08/11] =?UTF-8?q?#16=20fix:=20=EC=98=A4=ED=83=80=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 --- pages/signup.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/signup.tsx b/pages/signup.tsx index b5ee5ce..762867c 100644 --- a/pages/signup.tsx +++ b/pages/signup.tsx @@ -137,7 +137,7 @@ const SignUp: NextPage = () => { value={userInfo.nickname} onChange={onChange} maxLength={8} - calssName="flex-grow" + className="flex-grow" />