[Fix] QA 배포본 로그인 에러 해결 (#432)

* fix: teamId 있을 시 dashboard로

* feat: teamId prop 추가 + spinner 위치 수정

* fix: teamId 관리 로직 수정

* fix: global state가 아닌 localstorage get

* fix: query -> suspensequery

Author: wuzoo

apps/client/src/page/dashboard/component/File/FileSection.tsx

@@ -15,6 +15,7 @@ import { extractFileExtension } from '@/shared/util/file';
 
 const FileSection = () => {
   const teamId = useInitializeTeamId();
+
   const { data: fileData } = $api.useQuery('get', '/api/v1/teams/{teamId}/drive', {
     params: {
       path: {

apps/client/src/page/dashboard/component/Handover/HandoverSection.style.ts

@@ -5,8 +5,6 @@ import { dashboradScrollStyle } from '@/page/dashboard/DashboardPage.style';
 
 export const listItemStyle = css(
   {
-    flexDirection: 'column',
-    gap: '0.8rem',
     height: '100%',
 
     overflowY: 'scroll',

apps/client/src/page/dashboard/component/Handover/HandoverSection.tsx

@@ -10,13 +10,13 @@ import { useCurrentDate } from '@/shared/hook/common/useCurrentDate';
 
 const HandoverSection = () => {
   const createdAt = useCurrentDate();
-  const { data, isFetching } = useNoteData(createdAt);
+  const { data, isPending } = useNoteData(createdAt);
 
   return (
-    <Flex css={listItemStyle}>
+    <Flex styles={{ direction: 'column', gap: '0.8rem', align: 'center' }} css={listItemStyle}>
       {!data?.data?.noteGetResponseList[0] && <ItemAdder path={PATH.HANDOVER} />}
 
-      {isFetching ? (
+      {isPending ? (
         <Spinner size={30} />
       ) : (
         data?.data?.noteGetResponseList.map((note) => {

apps/client/src/page/dashboard/component/Timeline/Timeline/Timeline.tsx

@@ -10,13 +10,10 @@ import { timelineContentStyle } from '@/page/dashboard/component/Timeline/Timeli
 
 import { $api } from '@/shared/api/client';
 import { PATH } from '@/shared/constant/path';
-import { useInitializeTeamId } from '@/shared/hook/common/useInitializeTeamId';
 
-const Timeline = () => {
+const Timeline = ({ teamId }: { teamId: number }) => {
   const navigate = useNavigate();
 
-  const teamId = useInitializeTeamId();
-
   const { currentYear, currentMonth, endDay } = useDateContext();
 
   const { data } = $api.useQuery(

apps/client/src/page/dashboard/component/Timeline/index.tsx

@@ -13,7 +13,7 @@ const TimelineSection = () => {
     <DateProvider teamId={teamId}>
       <TimeLineHeader />
       <Suspense>
-        <Timeline />
+        <Timeline teamId={teamId} />
       </Suspense>
     </DateProvider>
   );

apps/client/src/page/drive/hook/api/queries.ts

@@ -1,8 +1,8 @@
 import { $api } from '@/shared/api/client';
-import { useTeamId } from '@/shared/store/team';
+import { useInitializeTeamId } from '@/shared/hook/common/useInitializeTeamId';
 
 export const useDriveData = () => {
-  const teamId = useTeamId();
+  const teamId = useInitializeTeamId();
 
   return $api.useSuspenseQuery('get', '/api/v1/teams/{teamId}/drive', {
     params: {

apps/client/src/page/login/index/hook/useLoginMutation.ts

@@ -26,7 +26,11 @@ export const useLoginMutation = () => {
 
       axiosInstance.defaults.headers.Authorization = `Bearer ${accessToken}`;
 
-      navigate(PATH.DASHBOARD);
+      const isExistingUser = !!localStorage.getItem('teamId');
+
+      isExistingUser
+        ? navigate(`${PATH.DASHBOARD}?teamId=${localStorage.getItem('teamId')}`)
+        : navigate(PATH.ONBOARDING);
     },
 
     onError: (error: AxiosError) => {

apps/client/src/shared/component/SideNavBar/SideNavBar.tsx

@@ -9,25 +9,28 @@ import Item from '@/shared/component/SideNavBar/Item/Item';
 import { containerStyle, settingStyle, tikiLogoStyle } from '@/shared/component/SideNavBar/SideNavBar.style';
 import { PATH } from '@/shared/constant/path';
 import { useOpenModal } from '@/shared/store/modal';
+import { useTeamId, useTeamIdAction } from '@/shared/store/team';
 import { Team } from '@/shared/type/team';
 
 const SideNavBar = () => {
-  const [selectedId, setSelectedId] = useState('showcase');
+  const [isInShowcase, setIsInShowcase] = useState(false);
 
+  const teamId = useTeamId();
+  const { setTeamId } = useTeamIdAction();
   const navigate = useNavigate();
-
   const openModal = useOpenModal();
 
-  const { data } = $api.useQuery('get', '/api/v1/members/teams', {});
+  const { data } = $api.useQuery('get', '/api/v1/members/teams');
 
   const handleItemClick = (id: string, path: string) => {
-    setSelectedId(id);
-
     if (id === 'showcase') {
+      setTeamId(null);
+      setIsInShowcase(true);
       navigate(path);
     } else {
-      navigate(path);
+      setTeamId(+id);
       localStorage.setItem('teamId', id);
+      navigate(path);
     }
     close();
   };
@@ -42,15 +45,15 @@ const SideNavBar = () => {
       <Flex tag="ul" styles={{ direction: 'column', align: 'center' }}>
         <Item
           variant={{ type: 'dashboard', hoverMessage: 'showcase' }}
-          isClicked={selectedId === 'showcase'}
+          isClicked={isInShowcase}
           onLogoClick={() => handleItemClick('showcase', PATH.SHOWCASE)}
         />
         <Divider type="horizontal" size={56.78} color={theme.colors.gray_300} />
         {data?.data?.belongTeamGetResponses.map((data: Team) => {
           return (
             <Item
               key={data.id}
-              isClicked={selectedId === String(data.id)}
+              isClicked={teamId === data.id}
               variant={{ type: 'team', logoUrl: data.iconImageUrl, hoverMessage: data.name }}
               onLogoClick={() => handleItemClick(String(data.id), `${PATH.DASHBOARD}?teamId=${data.id}`)}
             />

apps/client/src/shared/hook/common/useInitializeTeamId.tsx

@@ -12,7 +12,7 @@ export const useInitializeTeamId = () => {
   const { setTeamId } = useTeamIdAction();
   const navigate = useNavigate();
 
-  const { data, isSuccess } = $api.useQuery('get', '/api/v1/members/teams', {
+  const { data, isSuccess } = $api.useSuspenseQuery('get', '/api/v1/members/teams', {
     select: (response: TeamResponse) => {
       return response.data;
     },

apps/client/src/shared/store/team.ts

@@ -1,17 +1,17 @@
 import { create } from 'zustand';
 
 type TeamStore = {
-  teamId: number;
+  teamId: number | null;
   actions: {
-    setTeamId: (id: number) => void;
+    setTeamId: (id: number | null) => void;
   };
 };
 
 const useTeamStore = create<TeamStore>((set) => ({
   teamId: Number(localStorage.getItem('teamId')),
 
   actions: {
-    setTeamId: (teamId: number) =>
+    setTeamId: (teamId: number | null) =>
       set({
         teamId,
       }),