Merge pull request #41 from bomin0830/master

Refactor: 로그인/회원가입 리팩토링

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,

hooks/useEnterSubmit.ts

@@ -0,0 +1,15 @@
+import { useCallback } from 'react';
+
+export default function useEnterSubmit(onSubmit: () => void) {
+  const handleKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLFormElement>) => {
+      if (event.key === 'Enter') {
+        event.preventDefault(); //
+        onSubmit();
+      }
+    },
+    [onSubmit]
+  );
+
+  return handleKeyDown;
+}

hooks/useLogin.ts

@@ -42,5 +42,5 @@ export default function useLogin() {
     },
   });
 
-  return { postLoginMutation };
+  return { postLoginMutation, isLoading: postLoginMutation.isPending };
 }

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);

hooks/useSignup.ts

@@ -36,5 +36,8 @@ export default function useSignup() {
     },
   });
 
-  return { postSignupMutation };
+  return {
+    postSignupMutation,
+    isLoading: postSignupMutation.isPending,
+  };
 }

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 };
 };

pages/login.tsx

@@ -10,6 +10,8 @@ import { useEffect, useMemo } from 'react';
 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 {
@@ -20,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 {
@@ -34,17 +36,11 @@ export default function LoginPage() {
     postLoginMutation.mutate(data);
   };
 
-  const handleKeyDown = (event: React.KeyboardEvent<HTMLFormElement>) => {
-    if (event.key === 'Enter') {
-      handleSubmit(onSubmit)();
-    }
-  };
+  const handleKeyDown = useEnterSubmit(handleSubmit(onSubmit));
 
   const { email, password } = watch();
-
   const isNotError = !errors.email && !errors.password;
   const isFormFilled = !!email && !!password;
-
   const IsAllFieldsValid = isFormFilled && isNotError;
 
   useEffect(() => {
@@ -88,7 +84,7 @@ export default function LoginPage() {
           onClick={handleSubmit(onSubmit)}
           disabled={!IsAllFieldsValid}
         >
-          로그인하기
+          {isLoading ? '로그인중...' : '로그인하기'}
         </PrimaryButton>
       </form>
 

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 {
@@ -24,13 +25,12 @@ export default function SingupPage() {
   const [isChecked, setIsChecked] = useState(false);
   const { isLoggedIn } = useLoginState();
   const router = useRouter();
-  const { postSignupMutation } = useSignup();
+  const { postSignupMutation, isLoading } = useSignup();
 
   const {
     register,
     handleSubmit,
     formState: { errors },
-    getValues,
     watch,
   } = useForm<signUpFormValues>({ mode: 'onBlur' });
 
@@ -40,26 +40,19 @@ export default function SingupPage() {
     postSignupMutation.mutate(signUpData);
   };
 
+  const handleKeyDown = useEnterSubmit(handleSubmit(onSubmit));
+
   const handleCheckboxChange = () => {
     setIsChecked(!isChecked);
   };
 
-  const handleKeyDown = (event: React.KeyboardEvent<HTMLFormElement>) => {
-    if (event.key === 'Enter') {
-      handleSubmit(onSubmit)();
-    }
-  };
-
   const isNotError =
     !errors.email &&
     !errors.nickname &&
     !errors.password &&
     !errors.passwordCheck;
-
   const { email, nickname, password, passwordCheck } = watch();
-
   const isFormFilled = !!email && !!nickname && !!password && !!passwordCheck;
-
   const IsAllFieldsValid = isFormFilled && isChecked && isNotError;
 
   useEffect(() => {
@@ -133,7 +126,7 @@ export default function SingupPage() {
           onClick={handleSubmit(onSubmit)}
           disabled={!IsAllFieldsValid}
         >
-          회원가입 하기
+          {isLoading ? '회원가입중...' : '회원가입 하기'}
         </PrimaryButton>
       </form>
 

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<MyInfoResponse>({
   key: 'userState',
-  default: {
-    id: 0,
-    email: '',
-    nickname: '',
-    profileImageUrl: '',
-    createdAt: '',
-    updatedAt: '',
-  },
+  default: userDefaultState,
 });