feat: 로그인 성공 시 유저 스토어에 저장되게 로직 변경

Author: healim01

frontend/src/components/MyPage/UserFeature.tsx

@@ -1,20 +1,23 @@
 import styled from '@emotion/styled';
 import { useQueryClient } from '@tanstack/react-query';
+import { useNavigate } from 'react-router-dom';
 
 import { ArrowRightCircle } from '@/assets/assets';
 import DeleteAccountModal from '@/components/MyPage/DeleteAccountModal';
 import LogoutModal from '@/components/MyPage/LogoutModal';
 import { QUERY_KEYS } from '@/constants/queryKeys';
+import { ROUTE_PATH } from '@/constants/routePath';
 import { VOC_URL } from '@/constants/VoC';
-import useUserQuery from '@/hooks/query/useUserQuery';
 import useModal from '@/hooks/useModal';
+import useUserStore from '@/store/useUserStore';
 import { boxShadowSpread, flexColumn, flexRow, flexSpaceBetween, title4 } from '@/styles/common';
 
 const UserFeature = () => {
-  useUserQuery();
+  const { user } = useUserStore();
 
-  const queryClient = useQueryClient();
+  const navigate = useNavigate();
 
+  const queryClient = useQueryClient();
   const checklist = queryClient.getQueryData([QUERY_KEYS.CHECKLIST_LIST]);
 
   const { isModalOpen: isLogoutModalOpen, openModal: openLogoutModal, closeModal: closeLogoutModal } = useModal();
@@ -39,13 +42,24 @@ const UserFeature = () => {
           </>
         </S.LabelContainer>
 
-        <S.Section>
-          <S.LabelContainer>방끗이 도움되었나요? 한마디 남겨주세요!</S.LabelContainer>
-          <S.Button tabIndex={1} onClick={handleMoveVoc}>
-            방끗이 기다려요, 의견 남기기!
-            <ArrowRightCircle aria-hidden="true" />
-          </S.Button>
-        </S.Section>
+        {user.userType !== 'ADMIN' && (
+          <S.Section>
+            <S.LabelContainer>방끗이 도움되었나요? 한마디 남겨주세요!</S.LabelContainer>
+            <S.Button tabIndex={1} onClick={handleMoveVoc}>
+              방끗이 기다려요, 의견 남기기!
+              <ArrowRightCircle aria-hidden="true" />
+            </S.Button>
+          </S.Section>
+        )}
+
+        {user.userType === 'ADMIN' && (
+          <S.Section>
+            <S.Button tabIndex={1} onClick={() => navigate(ROUTE_PATH.admin)}>
+              어드민 페이지 바로가기
+              <ArrowRightCircle aria-hidden="true" />
+            </S.Button>
+          </S.Section>
+        )}
 
         <S.Section>
           <S.LabelContainer>방끗 잠시 안녕!</S.LabelContainer>

frontend/src/hooks/query/useAddOAuthUserQuery.ts

@@ -1,7 +1,10 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 
-import { postOAuthLogin } from '@/apis/user';
+import { getUserInfo, postOAuthLogin } from '@/apis/user';
 import { QUERY_KEYS } from '@/constants/queryKeys';
+import useToast from '@/hooks/useToast';
+import amplitudeInitializer from '@/service/amplitude/amplitudeInitializer';
+import useUserStore from '@/store/useUserStore';
 
 interface MutationVariables {
   code: string;
@@ -10,10 +13,24 @@ interface MutationVariables {
 
 const useAddOAuthUserQuery = () => {
   const queryClient = useQueryClient();
+  const { user, setUser } = useUserStore();
+  const { init } = amplitudeInitializer();
+  const { showToast } = useToast();
+
   return useMutation({
     mutationFn: ({ code, redirectUri }: MutationVariables) => postOAuthLogin(code, redirectUri),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.AUTH] });
+
+      const initAmplitudeUser = async () => {
+        const result = await getUserInfo();
+        setUser(result);
+
+        init(user.userEmail);
+        showToast({ message: `${user?.userName}님, 환영합니다.`, type: 'confirm' });
+      };
+
+      initAmplitudeUser();
     },
   });
 };

frontend/src/hooks/query/usePostSignInQuery.ts

@@ -1,17 +1,35 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { useNavigate } from 'react-router-dom';
 
-import { postSignIn } from '@/apis/user';
+import { getUserInfo, postSignIn } from '@/apis/user';
 import { QUERY_KEYS } from '@/constants/queryKeys';
 import { ROUTE_PATH } from '@/constants/routePath';
+import useToast from '@/hooks/useToast';
+import amplitudeInitializer from '@/service/amplitude/amplitudeInitializer';
+import useUserStore from '@/store/useUserStore';
 
 const usePostSignInQuery = () => {
   const navigate = useNavigate();
   const queryClient = useQueryClient();
+  const { user, setUser } = useUserStore();
+  const { init } = amplitudeInitializer();
+  const { showToast } = useToast();
+
   return useMutation({
     mutationFn: postSignIn,
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.AUTH] });
+
+      const initAmplitudeUser = async () => {
+        const result = await getUserInfo();
+        setUser(result);
+
+        init(user.userEmail);
+        showToast({ message: `${user?.userName}님, 환영합니다.`, type: 'confirm' });
+      };
+
+      initAmplitudeUser();
+
       navigate(ROUTE_PATH.home);
     },
   });

frontend/src/hooks/query/useUserQuery.ts

@@ -1,15 +1,27 @@
 import { useQuery } from '@tanstack/react-query';
+import { useEffect } from 'react';
 
 import { getUserInfo } from '@/apis/user';
 import { QUERY_KEYS } from '@/constants/queryKeys';
+import useUserStore from '@/store/useUserStore';
 import { User } from '@/types/user';
 
 const useUserQuery = () => {
-  return useQuery<User>({
+  const { setUser } = useUserStore();
+
+  const userQuery = useQuery<User>({
     queryKey: [QUERY_KEYS.AUTH, QUERY_KEYS.USER],
     queryFn: getUserInfo,
     retry: false,
   });
+
+  useEffect(() => {
+    if (userQuery.isSuccess && userQuery.data) {
+      setUser(userQuery.data);
+    }
+  }, [userQuery.isSuccess, userQuery.data, setUser]);
+
+  return userQuery;
 };
 
 export default useUserQuery;

frontend/src/hooks/useAutoLogin.ts

@@ -5,11 +5,13 @@ import { deleteToken, getIsUserValid, getUserInfo, postReissueAccessToken } from
 import { ROUTE_PATH } from '@/constants/routePath';
 import useToast from '@/hooks/useToast';
 import amplitudeInitializer from '@/service/amplitude/amplitudeInitializer';
+import useUserStore from '@/store/useUserStore';
 
 const useAutoLogin = () => {
   const navigate = useNavigate();
   const { showToast } = useToast();
   const { init } = amplitudeInitializer();
+  const { user, setUser } = useUserStore();
 
   const fetchIsUserValid = async () => {
     const { isAccessTokenExist, isRefreshTokenExist } = await getIsUserValid();
@@ -27,8 +29,10 @@ const useAutoLogin = () => {
 
   const autoLogin = async () => {
     const result = await getUserInfo();
-    init(result.userEmail);
-    showToast({ message: `${result?.userName}님, 환영합니다.`, type: 'confirm' });
+    setUser(result);
+
+    init(user.userEmail);
+    showToast({ message: `${user?.userName}님, 환영합니다.`, type: 'confirm' });
     return navigate(ROUTE_PATH.home);
   };
 

frontend/src/hooks/useOAuthLogin.ts

@@ -1,20 +1,15 @@
 import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { getUserInfo } from '@/apis/user';
 import { KAKAO_AUTH_URL } from '@/constants/oAuth';
 import { ROUTE_PATH } from '@/constants/routePath';
 import useAddOAuthUserQuery from '@/hooks/query/useAddOAuthUserQuery';
 import useMutateChecklist from '@/hooks/useMutateChecklist';
-import useToast from '@/hooks/useToast';
-import amplitudeInitializer from '@/service/amplitude/amplitudeInitializer';
 
 const useOAuthLogin = () => {
   const navigate = useNavigate();
   const { mutate: addOAuthUser, isSuccess } = useAddOAuthUserQuery();
   const { handleSubmitChecklist } = useMutateChecklist('add');
-  const { init } = amplitudeInitializer();
-  const { showToast } = useToast();
 
   const currentUrl = new URL(window.location.href);
   currentUrl.searchParams.delete('code');
@@ -28,14 +23,7 @@ const useOAuthLogin = () => {
   }, [addOAuthUser]);
 
   useEffect(() => {
-    const initAmplitudeUser = async () => {
-      const result = await getUserInfo();
-      init(result.userEmail);
-      showToast({ message: `${result?.userName}님, 환영합니다.`, type: 'confirm' });
-    };
-
     if (isSuccess) {
-      initAmplitudeUser();
       if (redirectUri.includes(ROUTE_PATH.checklistNew)) return handleSubmitChecklist();
       else return navigate(ROUTE_PATH.home);
     }

frontend/src/mocks/fixtures/user.ts

@@ -5,6 +5,7 @@ export const user: User = {
   userName: '방끗이',
   userEmail: '[email protected]',
   createdAt: '2024-08-11T10:00:00Z',
+  userType: 'ADMIN',
 };
 
 export const mockUserTokenValid: UserTokenValid = {

frontend/src/pages/SignInPage.tsx

@@ -2,21 +2,17 @@ import styled from '@emotion/styled';
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { getUserInfo } from '@/apis/user';
 import { BangBangIcon, BangGgoodTextIcon } from '@/assets/assets';
 import Button from '@/components/_common/Button/Button';
 import FormField from '@/components/_common/FormField/FormField';
 import Header from '@/components/_common/Header/Header';
 import { ROUTE_PATH } from '@/constants/routePath';
 import usePostSignInQuery from '@/hooks/query/usePostSignInQuery';
-import useToast from '@/hooks/useToast';
 import useValidateInput from '@/hooks/useValidateInput';
-import amplitudeInitializer from '@/service/amplitude/amplitudeInitializer';
 import { flexCenter, title3, title4 } from '@/styles/common';
 import { validateEmail } from '@/utils/authValidation';
 
 const SignInPage = () => {
-  const { showToast } = useToast();
   const [postErrorMessage, setPostErrorMessage] = useState('');
   const navigate = useNavigate();
 
@@ -42,19 +38,11 @@ const SignInPage = () => {
   const disabled = !isEmailValidated || !isPasswordValidated;
 
   const { mutate: signIn } = usePostSignInQuery();
-  const { init } = amplitudeInitializer();
 
-  const handleSubmit = async () =>
-    await signIn(
+  const handleSubmit = () =>
+    signIn(
       { email, password },
       {
-        onSuccess: async () => {
-          const result = await getUserInfo();
-          init(result.userEmail);
-
-          showToast({ message: `${result?.userName}님, 환영합니다.`, type: 'confirm' });
-          return navigate(ROUTE_PATH.home);
-        },
         onError: error => setPostErrorMessage(error.message),
       },
     );
@@ -67,7 +55,6 @@ const SignInPage = () => {
 
   const handleMoveToSignUp = () => navigate(ROUTE_PATH.signUp);
   const handleMoveToResetPassword = () => navigate(ROUTE_PATH.resetPassword);
-
   const handleClickBackward = () => navigate(ROUTE_PATH.root);
 
   return (