Fix: 랜딩 페이지 수정, 버그 픽스 (#67)

* Feat: 멘토링 피드백 반영 * Feat: UI 설정 편집 기능 개발 * Fix: 멘토링 피드백 반영 * Feat: 멘토링 피드백 반영, 랜딩 수정
gom-3 · Oct 23, 2023 · 257d515 · 257d515
1 parent 9499e99
commit 257d515
Show file tree

Hide file tree

Showing 11 changed files with 91 additions and 64 deletions.
diff --git a/public/img/landing_5.png b/public/img/landing_5.png
diff --git a/public/img/landing_mobile_5.png b/public/img/landing_mobile_5.png
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,6 +1,8 @@
+import useAuth from '@hooks/auth/useAuth';
 import { Router } from '@pages/Router';
 
 function App() {
+  useAuth(true);
   return <Router />;
 }
 

diff --git a/src/hooks/auth/useAuth/index.ts b/src/hooks/auth/useAuth/index.ts
@@ -1,51 +1,46 @@
 import { shallow } from 'zustand/shallow';
 import useAuthStore from './store';
 import axiosInstance from '@libs/api/client';
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { demoStart, getAccountMe, logout } from '@libs/api/auth';
+import { useMutation } from '@tanstack/react-query';
+import { demoStart, getAccountMe } from '@libs/api/auth';
 import { useNavigate } from 'react-router';
 import ROUTE from '@libs/constant/path';
 import useInitStore from '@hooks/useInitStore';
 import useEditShiftStore from '@hooks/shift/useEditShift/store';
+import { useEffect } from 'react';
 
-const useAuth = () => {
-  const [isAuth, accessToken, nurseId, accountId, wardId, demoStartDate, _loaded, setState] =
-    useAuthStore(
-      (state) => [
-        state.isAuth,
-        state.accessToken,
-        state.nurseId,
-        state.accountId,
-        state.wardId,
-        state.demoStartDate,
-        state._loaded,
-        state.setState,
-      ],
-      shallow
-    );
+const useAuth = (activeEffect = false) => {
+  const [
+    accountMe,
+    isAuth,
+    accessToken,
+    nurseId,
+    accountId,
+    wardId,
+    demoStartDate,
+    _loaded,
+    setState,
+  ] = useAuthStore(
+    (state) => [
+      state.accountMe,
+      state.isAuth,
+      state.accessToken,
+      state.nurseId,
+      state.accountId,
+      state.wardId,
+      state.demoStartDate,
+      state._loaded,
+      state.setState,
+    ],
+    shallow
+  );
   const initStore = useInitStore();
   const { initState: initEditShiftStore } = useEditShiftStore();
   const navigate = useNavigate();
-  const queryClient = useQueryClient();
 
-  const accountMeQueryKey = ['accountMe'];
-
-  const { data: accountMe } = useQuery(accountMeQueryKey, getAccountMe, {
-    onSuccess: (account) => {
-      setState('isAuth', true);
-      setState('wardId', account.wardId);
-      setState('accountId', account.accountId);
-      setState('nurseId', account.nurseId);
-    },
-    enabled: !!_loaded,
-  });
-
-  const { mutate: handleLogout } = useMutation(() => logout(accessToken), {
-    onMutate: () => {
-      queryClient.cancelQueries(accountMeQueryKey);
-      initStore();
-    },
-  });
+  const handleLogout = async () => {
+    initStore();
+  };
 
   const handleLogin = (accessToken: string, nextPageUrl?: string) => {
     setState('isAuth', true);
@@ -68,10 +63,22 @@ const useAuth = () => {
     },
   });
 
+  const handleGetAccountMe = async () => {
+    const account = await getAccountMe();
+    setState('accountMe', account);
+    setState('wardId', account.wardId);
+    setState('accountId', account.accountId);
+    setState('nurseId', account.nurseId);
+    setState('isAuth', true);
+  };
+
+  useEffect(() => {
+    if (_loaded && activeEffect) {
+      handleGetAccountMe();
+    }
+  }, [activeEffect, accessToken, _loaded]);
+
   return {
-    queryKey: {
-      accountMeQuery: accountMeQueryKey,
-    },
     state: {
       accountMe: accountMe === undefined ? null : accountMe,
       isAuth,
@@ -83,6 +90,7 @@ const useAuth = () => {
       _loaded,
     },
     actions: {
+      handleGetAccountMe,
       handleLogin,
       handleLogout,
       demoTry,

diff --git a/src/hooks/auth/useAuth/store.ts b/src/hooks/auth/useAuth/store.ts
@@ -5,6 +5,7 @@ import { produce } from 'immer';
 import { setAccessToken } from '@libs/api/client';
 
 interface State {
+  accountMe: Account | null;
   isAuth: boolean;
   accessToken: string | null;
   accountId: number | null;
@@ -20,6 +21,7 @@ interface Store extends State {
 }
 
 const initialState: State = {
+  accountMe: null,
   isAuth: false,
   accessToken: null,
   accountId: null,

diff --git a/src/hooks/auth/useRegister/index.ts b/src/hooks/auth/useRegister/index.ts
@@ -1,4 +1,4 @@
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useMutation, useQuery } from '@tanstack/react-query';
 import { CreateNurseDTO, createAccountNurse } from '@libs/api/nurse';
 import useAuth from '../useAuth';
 import { CreateWardDTO, addMeToWatingNurses, createWrad, deleteWatingNurses } from '@libs/api/ward';
@@ -8,19 +8,17 @@ import ROUTE from '@libs/constant/path';
 
 const useRegister = () => {
   const {
-    queryKey: { accountMeQuery },
     state: { accountMe, accountId },
+    actions: { handleGetAccountMe },
   } = useAuth();
   const navigate = useNavigate();
 
-  const queryClient = useQueryClient();
-
   const { mutate: changeAccountStatusMutate } = useMutation(
     ({ accountId, status }: { accountId: number; status: Account['status'] }) =>
       eidtAccountStatus(accountId, status),
     {
       onSuccess: ({ status }) => {
-        queryClient.invalidateQueries(accountMeQuery);
+        handleGetAccountMe();
         if (status === 'LINKED') navigate(ROUTE.MAKE);
       },
     }

diff --git a/src/hooks/useInitStore.ts b/src/hooks/useInitStore.ts
@@ -1,3 +1,4 @@
+import { setAccessToken } from '@libs/api/client';
 import useAuthStore from './auth/useAuth/store';
 import useEditShiftStore from './shift/useEditShift/store';
 import { useRequestShiftStore } from './shift/useRequestShift/store';
@@ -11,6 +12,7 @@ const useInitStore = () => {
     initReqShiftStore();
     initShiftStore();
     initAuthStore();
+    setAccessToken('');
   };
 
   return initStore;

diff --git a/src/pages/LandingPage/index.tsx b/src/pages/LandingPage/index.tsx
@@ -14,7 +14,7 @@ import { useNavigate } from 'react-router';
 
 function LandingPage() {
   const {
-    state: { isAuth },
+    state: { isAuth, accountMe },
     actions: { handleLogout, demoTry },
   } = useAuth();
   const navigate = useNavigate();
@@ -99,7 +99,7 @@ function LandingPage() {
                   onClick={() => handleLogout()}
                   className="cursor-pointer rounded-[1.875rem] border-[.0625rem] border-sub-2.5 px-[1rem] py-[.25rem] font-apple text-[1.125rem] font-medium text-sub-2.5"
                 >
-                  로그아웃
+                  {accountMe?.status === 'DEMO' ? '데모 종료하기' : '로그아웃'}
                 </button>
               ) : (
                 <button
@@ -147,19 +147,32 @@ function LandingPage() {
             </p>
           </div>
           <div className="mt-[15px] flex h-[38px] gap-[10px] xl:mt-[.75rem] xl:gap-[3.125rem]">
-            <div
-              className="flex flex-1 cursor-pointer items-center justify-center rounded-[8px] bg-white font-apple text-[16px] font-semibold xl:h-[3.75rem] xl:w-[15.3125rem] xl:flex-none xl:rounded-[.9375rem] xl:text-[1.5rem] xl:shadow-shadow-3"
-              onClick={() => demoTry()}
-            >
-              데모 테스트 해보기
-            </div>
-            <div
-              className="flex flex-1 cursor-pointer items-center justify-center gap-[9px] rounded-[8px] bg-white font-apple text-[16px] font-semibold xl:h-[3.75rem] xl:w-[15.3125rem] xl:flex-none xl:rounded-[.9375rem] xl:text-[1.5rem] xl:shadow-shadow-3"
-              onClick={() => navigate(ROUTE.MAKE)}
-            >
-              <Logo className="w-[17px] xl:w-[1.6875rem]" />
-              근무표 만들기
-            </div>
+            {accountMe?.status === 'DEMO' ? (
+              <div
+                className="flex flex-1 cursor-pointer items-center justify-center rounded-[8px] bg-white font-apple text-[16px] font-semibold xl:h-[3.75rem] xl:w-[16.3125rem] xl:flex-none xl:rounded-[.9375rem] xl:text-[1.5rem] xl:shadow-shadow-3"
+                onClick={() => demoTry()}
+              >
+                데모 테스트 마저 하기
+              </div>
+            ) : (
+              <>
+                {!accountMe && (
+                  <div
+                    className="flex flex-1 cursor-pointer items-center justify-center rounded-[8px] bg-white font-apple text-[16px] font-semibold xl:h-[3.75rem] xl:w-[15.3125rem] xl:flex-none xl:rounded-[.9375rem] xl:text-[1.5rem] xl:shadow-shadow-3"
+                    onClick={() => demoTry()}
+                  >
+                    데모 테스트 해보기
+                  </div>
+                )}
+                <div
+                  className="flex flex-1 cursor-pointer items-center justify-center gap-[9px] rounded-[8px] bg-white font-apple text-[16px] font-semibold xl:h-[3.75rem] xl:w-[15.3125rem] xl:flex-none xl:rounded-[.9375rem] xl:text-[1.5rem] xl:shadow-shadow-3"
+                  onClick={() => navigate(ROUTE.MAKE)}
+                >
+                  <Logo className="w-[17px] xl:w-[1.6875rem]" />
+                  근무표 만들기
+                </div>
+              </>
+            )}
           </div>
           <div className="mt-[43px] flex items-center gap-[8px] xl:mt-[2.5rem]">
             <div className="flex h-[24px] items-center rounded-[5px] bg-main-4 px-[8px] font-poppins text-[16px] text-main-1 xl:h-[1.875rem] xl:w-[3.875rem] xl:justify-center xl:px-[.5rem] xl:text-[1.25rem]">

diff --git a/src/pages/MakeShiftPage/components/Panel.tsx b/src/pages/MakeShiftPage/components/Panel.tsx
@@ -20,7 +20,9 @@ function Panel() {
         open && 'absolute bottom-[1.25rem] right-[1.25rem] h-[300%] max-h-[50vh]'
       )}
       style={{
-        width: `${(shift.wardShiftTypes.filter((x) => x.isCounted).length + 1) * 2 + 1.25}rem`,
+        width: `${
+          (shift.wardShiftTypes.filter((x) => x.isCounted).length + 1) * 2 + 1.25 + 1.25
+        }rem`,
       }}
     >
       <div className="flex h-[2.5rem] w-full border-b-[.0313rem] border-sub-4 font-apple text-base font-medium">

diff --git a/src/pages/MakeShiftPage/components/ShiftCalendar.tsx b/src/pages/MakeShiftPage/components/ShiftCalendar.tsx
@@ -119,7 +119,7 @@ export default function ShiftCalendar() {
 
   return shift && foldedLevels && wardShiftTypeMap && currentShiftTeam ? (
     <div ref={clickAwayRef} className="flex w-full flex-col">
-      <div className="z-20 my-[.75rem] flex h-[1.875rem] items-center gap-[1.25rem] bg-[#FDFCFE]">
+      <div className="z-20 my-[.75rem] flex h-[1.875rem] items-center gap-[1.25rem] bg-[#FDFCFE] pr-[1rem]">
         <div className="flex gap-[1.25rem]">
           <div className="w-[3.375rem] text-center font-apple text-[1rem] font-medium text-sub-3">
             {/* 구분 */}
@@ -200,7 +200,7 @@ export default function ShiftCalendar() {
       </div>
       <DragDropContext onDragEnd={(d) => !readonly && onDragEnd(d)}>
         <div
-          className="mt-[-1.25rem] flex flex-col gap-[.3125rem] overflow-x-hidden overflow-y-scroll pb-8 pt-[1.25rem] scrollbar-hide"
+          className="mt-[-1.25rem] flex flex-col gap-[.3125rem] overflow-x-hidden overflow-y-scroll pb-8 pr-[1rem] pt-[1.25rem] scrollbar-hide"
           ref={containerRef}
         >
           {shift.divisionShiftNurses
@@ -248,7 +248,7 @@ export default function ShiftCalendar() {
                             >
                               {(provided) => (
                                 <div
-                                  className={`relative flex h-[2.5rem] items-center gap-[1.25rem]
+                                  className={`relative flex h-[2.5rem] items-center gap-[1.25rem] bg-white
                                 ${
                                   rowIndex === 0
                                     ? rowIndex === rows.length - 1

diff --git a/src/pages/MakeShiftPage/components/Toolbar.tsx b/src/pages/MakeShiftPage/components/Toolbar.tsx
@@ -46,7 +46,7 @@ function Toolbar() {
   >(null);
 
   return (
-    <div className="sticky top-0 z-30 flex h-[6.125rem] w-full items-center bg-[#FDFCFE] pb-[.75rem] pl-[1.25rem] pt-[1.875rem]">
+    <div className="sticky top-0 z-30 flex h-[6.125rem] w-full items-center bg-[#FDFCFE] pb-[.75rem] pl-[1.25rem] pr-[1rem] pt-[1.875rem]">
       <div className="flex gap-[1.25rem]">
         <div className="w-[3.375rem]"></div>
         <div className="w-[4.375rem]"></div>