From a8bbb5e815796663b9bbd2d5574bb3a91006249e Mon Sep 17 00:00:00 2001 From: si14444 Date: Sun, 20 Aug 2023 21:59:35 +0900 Subject: [PATCH 1/6] =?UTF-8?q?GPT=EB=A1=9C=EC=A7=81=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/pages/join/join-Password.tsx | 46 ++++++++++++------------- libs/getNicknameFromGPT.ts | 11 ++++++ pages/join.tsx | 21 +++++++++-- 3 files changed, 51 insertions(+), 27 deletions(-) create mode 100644 libs/getNicknameFromGPT.ts diff --git a/components/pages/join/join-Password.tsx b/components/pages/join/join-Password.tsx index b398186..d0ffea8 100644 --- a/components/pages/join/join-Password.tsx +++ b/components/pages/join/join-Password.tsx @@ -22,33 +22,28 @@ import { checkPasswordTest } from '@/libs/passwordTest'; type JoinPasswordType = { email: string; + getNicknames: string[]; }; -//초기 닉네임 설정 -const initNicknames = [ - '혁명적인설탕', - '고요한오리', - '긍정적인다람쥐', - '꾸준한호랑이', - '센스있는팬더', - '빛나는별', - '신비로운달', - '환상적인바람', - '푸른바다', - '자유로운새', -]; - -const getRandomNickname = () => { - const randomIndex = Math.floor(Math.random() * initNicknames.length); - return initNicknames[randomIndex]; -}; +//initNicknames[Math.floor(Math.random() * initNicknames.length)] + +const JoinPassword: React.FC = ({ email, getNicknames }) => { + const [nicknames, setNicknames] = useState(getNicknames); + //받아온 닉네임의 초기값을 설정하는 함수. -const JoinPassword: React.FC = ({ email }) => { const router = useRouter(); const newSignUpMutation = useMutation(postSignUp); - const [nickname, setNickname] = useState(getRandomNickname()); + + //초기 닉네임 설정 + const setInitNicknames = () => { + const initNickname: string = nicknames[0]; + setNicknames((prevNicknames) => prevNicknames.slice(1)); + return initNickname; + }; + + const [nickname, setNickname] = useState(setInitNicknames); + //API로부터 받아온 닉네임들 저장하는 배열 - const [nicknames, setNicknames] = useState([]); const [showPassword, setShowPassword] = useState({ showPassword: false, @@ -149,15 +144,18 @@ const JoinPassword: React.FC = ({ email }) => { async function changeNicknameHandler() { setIsDuplicatedCheckAble(false); try { - // 저장된 배열이 0일 때만 API 호출 - if (nicknames.length === 0) { + // 저장된 배열이 5일 때만 API 호출 + if (nicknames.length <= 5) { setIsFetch(true); const response = await getNickname(); - setNicknames(response.data.information.nickname); + const updatedNicknames: string[] = nicknames.concat(response.data.information.nickname); + setNicknames(updatedNicknames); } setIsFetch(false); setNickname(nicknames[0]); + console.log(nicknames); + //GPT가 빈 배열을 가져오는 경우 if (nicknames.length === 0) { setCheckNickname('error'); diff --git a/libs/getNicknameFromGPT.ts b/libs/getNicknameFromGPT.ts new file mode 100644 index 0000000..3ff8439 --- /dev/null +++ b/libs/getNicknameFromGPT.ts @@ -0,0 +1,11 @@ +import { getNickname } from '@/apis/getNickname'; +import useApiError from '@/hooks/custom/useApiError'; + +export async function getNicknameFromGPT() { + try { + const response = await getNickname(); + return response.data.information.nickname; + } catch { + return []; + } +} diff --git a/pages/join.tsx b/pages/join.tsx index b69ce97..c613d33 100644 --- a/pages/join.tsx +++ b/pages/join.tsx @@ -1,11 +1,26 @@ -import React, { useState } from 'react'; +import React, { useEffect, useState } from 'react'; import JoinPassword from '@/components/pages/join/join-Password'; import Layout from '@/components/layouts/layout'; import AuthEmail from '@/components/authEmail'; +import { getNicknameFromGPT } from '@/libs/getNicknameFromGPT'; const Join = () => { const [page, setPage] = useState<'Email' | 'Password'>('Email'); const [email, setEmail] = useState(''); + const [nicknames, setNicknames] = useState([]); + + const moveNextPage = () => { + setPage('Password'); + }; + + const getNickname = async () => { + const response = getNicknameFromGPT(); + setNicknames(await response); + }; + + useEffect(() => { + getNickname(); + }, []); return ( @@ -20,11 +35,11 @@ const Join = () => { } - moveNextPage={() => setPage('Password')} + moveNextPage={moveNextPage} setEmail={setEmail} /> )} - {page === 'Password' && } + {page === 'Password' && } ); }; From 7c1d16cc64f7ed11372b518e3b3d1947db065291 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=95=EC=A7=80=EC=88=98?= Date: Mon, 21 Aug 2023 00:50:22 +0900 Subject: [PATCH 2/6] =?UTF-8?q?Fix=20=ED=9A=8C=EC=9B=90=EA=B0=80=EC=9E=85?= =?UTF-8?q?=20=EC=8B=9C=20=EC=9D=B4=EB=A9=94=EC=9D=BC=20=EC=A4=91=EB=B3=B5?= =?UTF-8?q?=EC=B2=B4=ED=81=AC,=20=EA=B0=84=ED=8E=B8=EA=B0=80=EC=9E=85=20?= =?UTF-8?q?=EC=99=84=EB=A3=8C=20=EB=B2=84=ED=8A=BC=20=EB=B9=84=ED=99=9C?= =?UTF-8?q?=EC=84=B1=ED=99=94=20=EB=AC=B8=EC=A0=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/authEmail.tsx | 32 ++++++++++++-------- components/pages/join/join-Password.tsx | 40 ++++++++++++------------- hooks/queries/useLettersQuery.ts | 2 +- pages/join.tsx | 1 + pages/reset-password.tsx | 1 + 5 files changed, 42 insertions(+), 34 deletions(-) diff --git a/components/authEmail.tsx b/components/authEmail.tsx index 0b1aec6..e7dd1fb 100644 --- a/components/authEmail.tsx +++ b/components/authEmail.tsx @@ -10,20 +10,22 @@ import { useMutation } from 'react-query'; type Props = { title: React.ReactNode; + screenType: 'join' | 'reset-password'; moveNextPage: () => void; setEmail: React.Dispatch>; }; const DEFAULT_TIMER_TIME = 1000 * 60 * 3; // 타이머 초기 값 -> 3분 -export default function AuthEmail({ title, moveNextPage, setEmail }: Props) { - const router = useRouter(); +export default function AuthEmail({ title, screenType, moveNextPage, setEmail }: Props) { // 이메일 입력값 const [emailValue, setEmailValue] = useState(''); // 이메일 유효성 검사 여부 - // normal - 기본값 | notIsValid - 형식 오류 | positive - 통과 | duplicated - 중복 - const [emailIsValid, setEmailIsValid] = useState<'normal' | 'notIsValid' | 'positive' | 'duplicated'>('normal'); + // normal - 기본값 | notIsValid - 형식 오류 | positive - 통과 | duplicated - 중복(회원가입에만 해당) | notUser - 존재하지 않는 회원(비밀번호 재설정에만 해당) + const [emailIsValid, setEmailIsValid] = useState<'normal' | 'notIsValid' | 'positive' | 'duplicated' | 'notUser'>( + 'normal', + ); const [time, setTime] = useState(DEFAULT_TIMER_TIME); const [timerStarted, setTimerStarted] = useState(false); const [AuthNumberSended, setAuthNumberSended] = useState(false); // 인증번호 발송되었는지 @@ -112,13 +114,15 @@ export default function AuthEmail({ title, moveNextPage, setEmail }: Props) { // 비밀번호 재설정 페이지는 이메일 중복 검사를 추가로 수행한다. // 이메일이 중복되어야 기존 회원임을 인증함 - if (router.pathname === '/reset-password') { - const response = await getEmailDuplicated(emailValue); - const isUser = !response.data.information.available; - if (!isUser) { - setEmailIsValid('duplicated'); - return; - } + const response = await getEmailDuplicated(emailValue); + const isExistUser = !response.data.information.available; // 이미 존재하는 유저인지 + if (screenType === 'join' && isExistUser) { + setEmailIsValid('duplicated'); + return; + } + if (screenType === 'reset-password' && !isExistUser) { + setEmailIsValid('notUser'); + return; } //타이머 시작 로직 @@ -165,7 +169,7 @@ export default function AuthEmail({ title, moveNextPage, setEmail }: Props) { className={`w-full px-12 py-15 rounded-10 border-2 focus:border-[#707070] outline-none placeholder-text_secondary placeholder:font-paragraph--sm gap-127 font-paragraph--sm ${ emailIsValid === 'normal' ? 'bg-white border-primary/30' - : emailIsValid === 'notIsValid' || emailIsValid === 'duplicated' + : emailIsValid === 'notIsValid' || emailIsValid === 'duplicated' || emailIsValid === 'notUser' ? 'bg-negative/10 border-negative focus:border-negative' : '' }`} @@ -174,8 +178,10 @@ export default function AuthEmail({ title, moveNextPage, setEmail }: Props) { placeholder='이메일을 입력해주세요' onChange={emailChangeHandler} /> - {emailIsValid === 'notIsValid' || emailIsValid === 'duplicated' ? ( + {emailIsValid === 'notIsValid' || emailIsValid === 'notUser' ? (

이메일을 다시 확인해주세요

+ ) : emailIsValid === 'duplicated' ? ( +

이미 가입된 이메일이에요

) : (

)} diff --git a/components/pages/join/join-Password.tsx b/components/pages/join/join-Password.tsx index d0ffea8..b3a8fbd 100644 --- a/components/pages/join/join-Password.tsx +++ b/components/pages/join/join-Password.tsx @@ -55,7 +55,9 @@ const JoinPassword: React.FC = ({ email, getNicknames }) => { admitSquare: false, }); - const [checkNickname, setCheckNickname] = useState<'' | 'inputNickName' | 'positive' | 'duplicated' | 'error'>(''); + const [checkNickname, setCheckNickname] = useState<'' | 'inputNickName' | 'positive' | 'duplicated' | 'error'>( + 'positive', + ); const [passwordValue, setPasswordValue] = useState({ passwordValue: '', @@ -143,6 +145,7 @@ const JoinPassword: React.FC = ({ email, getNicknames }) => { //GPT닉네임 바꾸는 함수 async function changeNicknameHandler() { setIsDuplicatedCheckAble(false); + try { // 저장된 배열이 5일 때만 API 호출 if (nicknames.length <= 5) { @@ -154,15 +157,13 @@ const JoinPassword: React.FC = ({ email, getNicknames }) => { setIsFetch(false); setNickname(nicknames[0]); - console.log(nicknames); - //GPT가 빈 배열을 가져오는 경우 if (nicknames.length === 0) { setCheckNickname('error'); } else { setCheckNickname(''); } - + setCheckNickname('positive'); setNicknames((prevNicknames) => prevNicknames.slice(1)); } catch (error) { // 서버에서 500 오류가 발생한 경우 @@ -171,28 +172,21 @@ const JoinPassword: React.FC = ({ email, getNicknames }) => { } } - //signUp 유효성 검사 - const signUpTest = () => { - return ( - checkNickname === 'positive' && - passwordIsValid && - checkPasswordIsValid && - checkSquare.admitSquare && - checkSquare.ageSquare - ); - }; - const passwordIsValid = passwordRegex.test(passwordValue.passwordValue); const checkPasswordIsValid = checkPasswordTest(passwordValue.checkPasswordValue, passwordValue.passwordValue); - const signUpIsValid = signUpTest(); + // 간편가입 완료 버튼 활성화 여부 + const signUpIsValid = + checkNickname === 'positive' && + passwordIsValid && + checkPasswordIsValid && + checkSquare.admitSquare && + checkSquare.ageSquare; const successHandler = (check: boolean) => { - console.log(check); if (check) { router.push('/'); - console.log('sign-up'); } }; @@ -249,10 +243,14 @@ const JoinPassword: React.FC = ({ email, getNicknames }) => { @@ -295,6 +293,7 @@ const JoinPassword: React.FC = ({ email, getNicknames }) => { : 'bg-[#e11900]/10 border-[#E11900] focus:border-[#E11900]' }`} placeholder='비밀번호를 입력' + autoComplete='off' /> -
{mailBoxs}
+
+ {letters && mailBoxs} + {isLettersLoading && } +
+