From e56e93f6ae3c9c64f5c6f291fa156591ed73f1f7 Mon Sep 17 00:00:00 2001 From: NamgungJongMin Date: Sat, 27 Jan 2024 04:47:39 +0900 Subject: [PATCH 1/3] Refactor: add autoComplete property --- src/components/Auth/Input/InputEmail.tsx | 34 ++++++++--------- src/components/Auth/Input/InputEmailSert.tsx | 1 + src/components/Auth/Input/InputNickname.tsx | 38 ++++++++----------- .../Auth/Login/LoginInput/InputEmail.tsx | 32 +++++++--------- 4 files changed, 46 insertions(+), 59 deletions(-) diff --git a/src/components/Auth/Input/InputEmail.tsx b/src/components/Auth/Input/InputEmail.tsx index 336685d2..42f6241a 100644 --- a/src/components/Auth/Input/InputEmail.tsx +++ b/src/components/Auth/Input/InputEmail.tsx @@ -1,40 +1,36 @@ -import styles from "./Input.module.scss"; +import styles from './Input.module.scss'; -import InputRemove from "@/assets/icons/InputRemove.svg?react"; -import validationForm from "@/utils/inputValidation"; +import InputRemove from '@/assets/icons/InputRemove.svg?react'; +import validationForm from '@/utils/inputValidation'; -import { InputEmailProps } from "@/types/auth"; +import {InputEmailProps} from '@/types/auth'; -function InputEmail({ register, dirty, error, resetField }: InputEmailProps) { +function InputEmail({register, dirty, error, resetField}: InputEmailProps) { const resetEmail = () => { - resetField("email"); + resetField('email'); }; return (
- + {dirty && ( - )} diff --git a/src/components/Auth/Input/InputEmailSert.tsx b/src/components/Auth/Input/InputEmailSert.tsx index 00d12b0c..fac3a47b 100644 --- a/src/components/Auth/Input/InputEmailSert.tsx +++ b/src/components/Auth/Input/InputEmailSert.tsx @@ -55,6 +55,7 @@ function InputEmailSert({register, email, due, setDue, type}: InputEmailSertProp maxLength={8} placeholder='인증코드 8자리를 입력해주세요' disabled={due === 0} + autoComplete='off' {...register('emailSert', { required: true, pattern: { diff --git a/src/components/Auth/Input/InputNickname.tsx b/src/components/Auth/Input/InputNickname.tsx index 713b7e31..3d39a15c 100644 --- a/src/components/Auth/Input/InputNickname.tsx +++ b/src/components/Auth/Input/InputNickname.tsx @@ -1,44 +1,38 @@ -import styles from "./Input.module.scss"; +import styles from './Input.module.scss'; -import InputRemove from "@/assets/icons/InputRemove.svg?react"; -import validationForm from "@/utils/inputValidation"; +import InputRemove from '@/assets/icons/InputRemove.svg?react'; +import validationForm from '@/utils/inputValidation'; -import { InputNickname } from "@/types/auth"; +import {InputNickname} from '@/types/auth'; -function InputNickname({ register, dirty, error, resetField }: InputNickname) { +function InputNickname({register, dirty, error, resetField}: InputNickname) { const resetNickname = () => { - resetField("nickname"); + resetField('nickname'); }; return (
- + -

- 일행 간 구분을 위해 본인을 잘 나타낼 수 있는 닉네임을 권장해요. -

+

일행 간 구분을 위해 본인을 잘 나타낼 수 있는 닉네임을 권장해요.

{dirty && ( - )} diff --git a/src/components/Auth/Login/LoginInput/InputEmail.tsx b/src/components/Auth/Login/LoginInput/InputEmail.tsx index 4121ccd3..02ce1c3a 100644 --- a/src/components/Auth/Login/LoginInput/InputEmail.tsx +++ b/src/components/Auth/Login/LoginInput/InputEmail.tsx @@ -1,39 +1,35 @@ -import styles from "./Input.module.scss"; +import styles from './Input.module.scss'; -import InputRemove from "@/assets/icons/InputRemove.svg?react"; -import validationForm from "@/utils/inputValidation"; +import InputRemove from '@/assets/icons/InputRemove.svg?react'; +import validationForm from '@/utils/inputValidation'; -import { LoginInput } from "@/types/auth"; +import {LoginInput} from '@/types/auth'; -function InputEmail({ label, register, dirtyFields, resetField }: LoginInput) { +function InputEmail({label, register, dirtyFields, resetField}: LoginInput) { const resetEmail = () => { - resetField("email"); + resetField('email'); }; return (
- + {dirtyFields.email && ( - )} From 7c998913b6c3b23b1cad75041221189c816f02ea Mon Sep 17 00:00:00 2001 From: NamgungJongMin Date: Sat, 27 Jan 2024 06:11:04 +0900 Subject: [PATCH 2/3] Refactor: remove cache logic at logout --- src/pages/User/UserPrivacy/UserPrivacy.tsx | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/src/pages/User/UserPrivacy/UserPrivacy.tsx b/src/pages/User/UserPrivacy/UserPrivacy.tsx index e557cf4d..96d5e9b8 100644 --- a/src/pages/User/UserPrivacy/UserPrivacy.tsx +++ b/src/pages/User/UserPrivacy/UserPrivacy.tsx @@ -1,3 +1,4 @@ +import {useQueryClient} from '@tanstack/react-query'; import axios from 'axios'; import {Link, useNavigate} from 'react-router-dom'; @@ -10,13 +11,21 @@ import Header from '@/components/Auth/Header/Header'; function UserPrivacy() { const navigate = useNavigate(); const {data, error, isFetching} = useGetMyInfo(true); + const queryClient = useQueryClient(); if (isFetching) { return
; } - if (error) navigate('/auth/login'); + const clickLogout = () => { + axios.post('/api/logout', {}, {withCredentials: true}); + + // remove query cache for logout + queryClient.removeQueries({queryKey: ['myInfo']}); + navigate('/'); + }; + return (
@@ -32,14 +41,7 @@ function UserPrivacy() { 재설정 -
  • { - axios.post('/api/logout'); - navigate('/auth/login'); - }} - > - 로그아웃 -
    • +
  • 로그아웃
  • 회원 탈퇴 From d45f3f1149b811f3807a70149d361acec74cfb09 Mon Sep 17 00:00:00 2001 From: NamgungJongMin Date: Sat, 27 Jan 2024 06:17:07 +0900 Subject: [PATCH 3/3] Refactor: seperate api in withdrawal & login --- src/api/auth.ts | 19 +++++++++++++++-- src/components/Auth/Login/LoginForm.tsx | 27 ++++++++++-------------- src/pages/Auth/Login/Login.tsx | 7 +++--- src/pages/Auth/Withdrawal/Withdrawal.tsx | 19 ++++++++++------- 4 files changed, 42 insertions(+), 30 deletions(-) diff --git a/src/api/auth.ts b/src/api/auth.ts index 8dc297b6..79584608 100644 --- a/src/api/auth.ts +++ b/src/api/auth.ts @@ -1,8 +1,23 @@ import axios from 'axios'; export const authRequest = { - withdrawal: async (password?: string) => - await axios.post( + login: (email: string, password: string) => + axios.post( + '/api/login', + { + email, + password, + }, + {withCredentials: true}, + ), + + login_kakao: () => + axios.post('/api/oauth2/authorization/kakao', null, { + withCredentials: true, + }), + + withdrawal: (password?: string) => + axios.post( '/api/members/sign-out', { password, diff --git a/src/components/Auth/Login/LoginForm.tsx b/src/components/Auth/Login/LoginForm.tsx index 708a0196..7cb63811 100644 --- a/src/components/Auth/Login/LoginForm.tsx +++ b/src/components/Auth/Login/LoginForm.tsx @@ -1,12 +1,12 @@ -import axios from 'axios'; -import {useState} from 'react'; -import {SubmitHandler, useForm} from 'react-hook-form'; +import {FormEvent, useState} from 'react'; +import {useForm} from 'react-hook-form'; import {useNavigate} from 'react-router-dom'; import styles from './LoginForm.module.scss'; import AuthButton from '@/components/Auth/Button/AuthButton'; +import {authRequest} from '@/api/auth'; import validationForm from '@/utils/inputValidation'; import InputEmail from './LoginInput/InputEmail'; @@ -18,7 +18,7 @@ function LoginForm() { const { register, resetField, - handleSubmit, + getValues, formState: {dirtyFields}, } = useForm({ defaultValues: { @@ -41,21 +41,16 @@ function LoginForm() { return false; }; - const onSubmit: SubmitHandler = async (data) => { - const {email, password} = data; + const onSubmit = async (e: FormEvent) => { + e.preventDefault(); + + const {email, password} = getValues(); if (showError(email as string, password as string)) return; try { - const res = await axios.post( - '/api/login', - { - email, - password, - }, - {withCredentials: true}, - ); - console.log(res); + const res = await authRequest.login(email as string, password as string); + console.log('login response', res); if (res.data.responseCode === 401) { setValidationError(true); @@ -69,7 +64,7 @@ function LoginForm() { }; return ( -
    + diff --git a/src/pages/Auth/Login/Login.tsx b/src/pages/Auth/Login/Login.tsx index e7bb4924..32390c0b 100644 --- a/src/pages/Auth/Login/Login.tsx +++ b/src/pages/Auth/Login/Login.tsx @@ -7,6 +7,7 @@ import {useGetMyInfo} from '@/hooks/User/useUser'; import LoginForm from '@/components/Auth/Login/LoginForm'; +import {authRequest} from '@/api/auth'; import KakaoIcon from '@/assets/kakao/kakao_path.svg?react'; import Logo from '@/assets/logo.svg?react'; @@ -22,10 +23,8 @@ function Login() { const onClickKakao = async () => { try { - const res = axios.post('/api/oauth2/authorization/kakao', null, { - withCredentials: true, - }); - console.log(res); + const res = await authRequest.login_kakao(); + console.log('login_kakao response', res); } catch (error) { if (axios.isAxiosError(error)) { console.log(error); diff --git a/src/pages/Auth/Withdrawal/Withdrawal.tsx b/src/pages/Auth/Withdrawal/Withdrawal.tsx index 77d2235f..77d2b4bd 100644 --- a/src/pages/Auth/Withdrawal/Withdrawal.tsx +++ b/src/pages/Auth/Withdrawal/Withdrawal.tsx @@ -29,33 +29,36 @@ function Withdrawal() { password: '', }, }); + const password = watch('password'); const setIsModalOpen = useSetRecoilState(isModalOpenState); const showToast = CustomToast(); const navigate = useNavigate(); + const showFailedSignout = () => { + showToast('비밀번호가 일치하지 않습니다.'); + resetField('password'); + setIsModalOpen(false); + }; + const signout = async () => { try { const res = data?.data.provider === 'NONE' ? await authRequest.withdrawal(password) : await authRequest.withdrawal(); - console.log(res); + console.log('signout response', res); if (res.data.responseCode === 206) { - showToast('비밀번호가 일치하지 않습니다.'); - resetField('password'); - setIsModalOpen(false); + showFailedSignout(); return; } setIsModalOpen(false); - navigate('/'); + navigate('/', {replace: true}); } catch (error) { console.log(error); // 백엔드 validation 오류 - 리팩토링 시 responseCode 조건 걸 예정 - showToast('비밀번호가 일치하지 않습니다.'); - resetField('password'); - setIsModalOpen(false); + showFailedSignout(); } };