From bb2602483a331e3b1e498238f3f4290cfa563441 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EB=AF=BC?= Date: Tue, 16 Jul 2024 23:39:45 +0900 Subject: [PATCH 1/3] =?UTF-8?q?Feat:=20=EB=A1=9C=EA=B7=B8=EC=95=84?= =?UTF-8?q?=EC=9B=83=20=EC=8B=9C=20=EC=9C=A0=EC=A0=80=EB=8D=B0=EC=9D=B4?= =?UTF-8?q?=ED=84=B0=20=EC=B4=88=EA=B8=B0=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/Lander/Main.tsx | 4 ++++ hooks/useLogout.ts | 8 ++++++++ hooks/useUserData.ts | 9 ++++----- states/userState.tsx | 18 ++++++++++-------- 4 files changed, 26 insertions(+), 13 deletions(-) diff --git a/components/Lander/Main.tsx b/components/Lander/Main.tsx index bf241d1..fe6f055 100644 --- a/components/Lander/Main.tsx +++ b/components/Lander/Main.tsx @@ -12,14 +12,18 @@ import { useState } from 'react'; import SearchResults from './SearchResults'; import { useRecoilValue } from 'recoil'; import { mainSearchValueState } from '@/states/mainPageState'; +import { useUserData } from '@/hooks/useUserData'; function Main() { const [isSearch, setIsSearch] = useState(false); + const { userData } = useUserData(); const { SearchValue } = useRecoilValue(mainSearchValueState); const date = new Date(); const month = date.getMonth() + 1; //const {id, title, bannerImageUrl} = useRecoilValue(BestOfmonth); + console.log(userData); + const params: getActivityListParams = { method: 'offset', cursorId: null, diff --git a/hooks/useLogout.ts b/hooks/useLogout.ts index 9563b53..6a83e0c 100644 --- a/hooks/useLogout.ts +++ b/hooks/useLogout.ts @@ -1,11 +1,19 @@ import { useRouter } from 'next/router'; import useLoginState from './useLoginState'; +import { useRecoilState, useResetRecoilState, useSetRecoilState } from 'recoil'; +import { userDefaultState, userState } from '@/states/userState'; +import { useQueryClient } from '@tanstack/react-query'; export default function useLogout() { const { setIsLoggedIn } = useLoginState(); const route = useRouter(); + const [userData, setUserData] = useRecoilState(userState); + const queryClient = useQueryClient(); const logout = () => { + console.log(userData.id); + queryClient.removeQueries({ queryKey: ['user', userData.id] }); + setUserData(userDefaultState); localStorage.removeItem('refreshToken'); localStorage.removeItem('userId'); setIsLoggedIn(false); diff --git a/hooks/useUserData.ts b/hooks/useUserData.ts index 265803e..425c740 100644 --- a/hooks/useUserData.ts +++ b/hooks/useUserData.ts @@ -1,5 +1,5 @@ import { apiMyInfo } from '@/pages/api/users/apiUsers'; -import { userState } from '@/states/userState'; +import { userDefaultState, userState } from '@/states/userState'; import { useQuery } from '@tanstack/react-query'; import { useEffect, useState } from 'react'; import { useRecoilState } from 'recoil'; @@ -13,9 +13,8 @@ export const useUserData = () => { const { data: userResponseData, isLoading } = useQuery({ queryKey: ['user', userId], queryFn: apiMyInfo, - enabled: !!isLoggedIn, + enabled: !!isLoggedIn && !!userId, }); - useEffect(() => { if (userResponseData) { setUserData(userResponseData); @@ -24,8 +23,8 @@ export const useUserData = () => { useEffect(() => { const userId = localStorage.getItem('userId') || ''; - setUserId(userId); - }, []); + if (userId) setUserId(userId); + }, [userId]); return { userData, isLoading }; }; diff --git a/states/userState.tsx b/states/userState.tsx index ec290b0..f215aeb 100644 --- a/states/userState.tsx +++ b/states/userState.tsx @@ -1,14 +1,16 @@ import { MyInfoResponse } from '@/pages/api/users/apiUser.types'; import { atom } from 'recoil'; +export const userDefaultState = { + id: 0, + email: '', + nickname: '', + profileImageUrl: '', + createdAt: '', + updatedAt: '', +}; + export const userState = atom({ key: 'userState', - default: { - id: 0, - email: '', - nickname: '', - profileImageUrl: '', - createdAt: '', - updatedAt: '', - }, + default: userDefaultState, }); From 11fe98edffcaa0b3103091e0e632bc73a2f1716d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EB=AF=BC?= Date: Wed, 17 Jul 2024 11:57:33 +0900 Subject: [PATCH 2/3] =?UTF-8?q?Feat:=20useEnterSubmit=20=EC=BB=A4=EC=8A=A4?= =?UTF-8?q?=ED=85=80=20=ED=9B=85=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- hooks/useEnterSubmit.ts | 15 +++++++++++++++ pages/login.tsx | 7 ++----- pages/signup.tsx | 10 +++------- 3 files changed, 20 insertions(+), 12 deletions(-) create mode 100644 hooks/useEnterSubmit.ts diff --git a/hooks/useEnterSubmit.ts b/hooks/useEnterSubmit.ts new file mode 100644 index 0000000..4acf103 --- /dev/null +++ b/hooks/useEnterSubmit.ts @@ -0,0 +1,15 @@ +import { useCallback } from 'react'; + +export default function useEnterSubmit(onSubmit: () => void) { + const handleKeyDown = useCallback( + (event: React.KeyboardEvent) => { + if (event.key === 'Enter') { + event.preventDefault(); // + onSubmit(); + } + }, + [onSubmit] + ); + + return handleKeyDown; +} diff --git a/pages/login.tsx b/pages/login.tsx index e8218c5..b5e3f6b 100644 --- a/pages/login.tsx +++ b/pages/login.tsx @@ -10,6 +10,7 @@ import { useEffect, useMemo } from 'react'; import useLoginState from '@/hooks/useLoginState'; import { useRouter } from 'next/router'; import { GetServerSideProps } from 'next'; +import useEnterSubmit from '@/hooks/useEnterSubmit'; export const getServerSideProps: GetServerSideProps = async () => { return { @@ -34,11 +35,7 @@ export default function LoginPage() { postLoginMutation.mutate(data); }; - const handleKeyDown = (event: React.KeyboardEvent) => { - if (event.key === 'Enter') { - handleSubmit(onSubmit)(); - } - }; + const handleKeyDown = useEnterSubmit(handleSubmit(onSubmit)); const { email, password } = watch(); diff --git a/pages/signup.tsx b/pages/signup.tsx index 1d41cad..ad02df2 100644 --- a/pages/signup.tsx +++ b/pages/signup.tsx @@ -11,6 +11,7 @@ import { useEffect, useMemo, useState } from 'react'; import useLoginState from '@/hooks/useLoginState'; import { useRouter } from 'next/router'; import { GetServerSideProps } from 'next'; +import useEnterSubmit from '@/hooks/useEnterSubmit'; export const getServerSideProps: GetServerSideProps = async () => { return { @@ -30,7 +31,6 @@ export default function SingupPage() { register, handleSubmit, formState: { errors }, - getValues, watch, } = useForm({ mode: 'onBlur' }); @@ -40,16 +40,12 @@ export default function SingupPage() { postSignupMutation.mutate(signUpData); }; + const handleKeyDown = useEnterSubmit(handleSubmit(onSubmit)); + const handleCheckboxChange = () => { setIsChecked(!isChecked); }; - const handleKeyDown = (event: React.KeyboardEvent) => { - if (event.key === 'Enter') { - handleSubmit(onSubmit)(); - } - }; - const isNotError = !errors.email && !errors.nickname && From 8786a32d7081a4586b2a62da7445246572f6c36b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EB=AF=BC?= Date: Wed, 17 Jul 2024 12:35:21 +0900 Subject: [PATCH 3/3] =?UTF-8?q?Feat:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8/?= =?UTF-8?q?=ED=9A=8C=EC=9B=90=EA=B0=80=EC=9E=85=20=EB=A1=9C=EB=94=A9=20?= =?UTF-8?q?=EC=83=81=ED=83=9C=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- hooks/useLogin.ts | 2 +- hooks/useSignup.ts | 5 ++++- pages/login.tsx | 7 +++---- pages/signup.tsx | 7 ++----- 4 files changed, 10 insertions(+), 11 deletions(-) diff --git a/hooks/useLogin.ts b/hooks/useLogin.ts index d07cba2..3dedd4d 100644 --- a/hooks/useLogin.ts +++ b/hooks/useLogin.ts @@ -42,5 +42,5 @@ export default function useLogin() { }, }); - return { postLoginMutation }; + return { postLoginMutation, isLoading: postLoginMutation.isPending }; } diff --git a/hooks/useSignup.ts b/hooks/useSignup.ts index 94cf12e..10592e6 100644 --- a/hooks/useSignup.ts +++ b/hooks/useSignup.ts @@ -36,5 +36,8 @@ export default function useSignup() { }, }); - return { postSignupMutation }; + return { + postSignupMutation, + isLoading: postSignupMutation.isPending, + }; } diff --git a/pages/login.tsx b/pages/login.tsx index b5e3f6b..4249333 100644 --- a/pages/login.tsx +++ b/pages/login.tsx @@ -11,6 +11,7 @@ import useLoginState from '@/hooks/useLoginState'; import { useRouter } from 'next/router'; import { GetServerSideProps } from 'next'; import useEnterSubmit from '@/hooks/useEnterSubmit'; +import Spinner from '@/components/Spinner/Spinner'; export const getServerSideProps: GetServerSideProps = async () => { return { @@ -21,7 +22,7 @@ export const getServerSideProps: GetServerSideProps = async () => { }; export default function LoginPage() { - const { postLoginMutation } = useLogin(); + const { postLoginMutation, isLoading } = useLogin(); const { isLoggedIn } = useLoginState(); const router = useRouter(); const { @@ -38,10 +39,8 @@ export default function LoginPage() { const handleKeyDown = useEnterSubmit(handleSubmit(onSubmit)); const { email, password } = watch(); - const isNotError = !errors.email && !errors.password; const isFormFilled = !!email && !!password; - const IsAllFieldsValid = isFormFilled && isNotError; useEffect(() => { @@ -85,7 +84,7 @@ export default function LoginPage() { onClick={handleSubmit(onSubmit)} disabled={!IsAllFieldsValid} > - 로그인하기 + {isLoading ? '로그인중...' : '로그인하기'} diff --git a/pages/signup.tsx b/pages/signup.tsx index ad02df2..88e6dbb 100644 --- a/pages/signup.tsx +++ b/pages/signup.tsx @@ -25,7 +25,7 @@ export default function SingupPage() { const [isChecked, setIsChecked] = useState(false); const { isLoggedIn } = useLoginState(); const router = useRouter(); - const { postSignupMutation } = useSignup(); + const { postSignupMutation, isLoading } = useSignup(); const { register, @@ -51,11 +51,8 @@ export default function SingupPage() { !errors.nickname && !errors.password && !errors.passwordCheck; - const { email, nickname, password, passwordCheck } = watch(); - const isFormFilled = !!email && !!nickname && !!password && !!passwordCheck; - const IsAllFieldsValid = isFormFilled && isChecked && isNotError; useEffect(() => { @@ -129,7 +126,7 @@ export default function SingupPage() { onClick={handleSubmit(onSubmit)} disabled={!IsAllFieldsValid} > - 회원가입 하기 + {isLoading ? '회원가입중...' : '회원가입 하기'}