Feat: 멘토링 피드백 반영 (#64)

index.html

@@ -30,6 +30,7 @@
     <div id="modal-root"></div>
     <div id="edit-modal-root"></div>
     <div id="info-modal-root"></div>
+    <div id="nurse-modal-root"></div>
     <script type="module" src="/src/main.tsx"></script>
     <script>
       (function () {

src/App.tsx

@@ -1,19 +1,6 @@
-import useAuth from '@hooks/auth/useAuth';
 import { Router } from '@pages/Router';
-import { useEffect } from 'react';
 
 function App() {
-  const {
-    state: { accessToken },
-    actions: { handleLogin },
-  } = useAuth();
-
-  useEffect(() => {
-    if (accessToken) {
-      handleLogin(accessToken);
-    }
-  }, []);
-
   return <Router />;
 }
 

src/components/ShiftBadge/index.tsx

@@ -18,8 +18,7 @@ function ShiftBadge({ shiftType, className, forwardRef, isOnlyRequest, ...props
       )}
       ref={forwardRef}
       style={{
-        backgroundColor: shiftType ? shiftType.backgroundColor : '#D6D6DE',
-        color: shiftType?.textColor,
+        backgroundColor: shiftType ? shiftType.color : '#D6D6DE',
       }}
       {...props}
     >

src/components/ShiftCircle/index.tsx

@@ -16,7 +16,7 @@ const ShiftCircle = ({ wardShiftType, translucent }: Props) => {
       className={`${
         translucent && 'opacity-30'
       } absolute left-1/2 top-1/2 flex h-[1.675rem] w-[1.675rem] translate-x-[-50%] translate-y-[-50%] items-center justify-center rounded-full font-poppins text-[.9375rem] text-white`}
-      style={{ backgroundColor: wardShiftType.backgroundColor }}
+      style={{ backgroundColor: wardShiftType.color }}
     >
       {wardShiftType.shortName}
     </div>

src/hooks/auth/useAuth/index.ts

@@ -6,6 +6,7 @@ import { demoStart, getAccountMe, logout } 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';
 
 const useAuth = () => {
   const [isAuth, accessToken, nurseId, accountId, wardId, demoStartDate, _loaded, setState] =
@@ -23,6 +24,7 @@ const useAuth = () => {
       shallow
     );
   const initStore = useInitStore();
+  const { initState: initEditShiftStore } = useEditShiftStore();
   const navigate = useNavigate();
   const queryClient = useQueryClient();
 
@@ -45,9 +47,12 @@ const useAuth = () => {
     },
   });
 
-  const handleLogin = (accessToken: string) => {
-    axiosInstance.defaults.headers.common['Authorization'] = `Bearer ${accessToken}`;
+  const handleLogin = (accessToken: string, nextPageUrl?: string) => {
+    setState('isAuth', true);
     setState('accessToken', accessToken);
+    initEditShiftStore();
+    axiosInstance.defaults.headers.common['Authorization'] = `Bearer ${accessToken}`;
+    location.replace(nextPageUrl || '/');
   };
 
   const { mutate: demoTry } = useMutation(demoStart(), {

src/hooks/shift/useEditShift/handlers.ts

@@ -1,7 +1,8 @@
 import { koToEn } from '@libs/util/koToEn';
 
-export const moveFocusByKeydown = (
-  e: KeyboardEvent,
+export const moveFocus = (
+  direction: 'left' | 'right' | 'up' | 'down',
+  moveEnd: boolean,
   shift: Shift | RequestShift,
   focus: Focus,
   setFocus: (focus: Focus) => void
@@ -15,12 +16,8 @@ export const moveFocusByKeydown = (
   let newNurseId = shiftNurseId;
   let newDay = day;
 
-  if (['Ctrl', 'Space', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].indexOf(e.code) != -1) {
-    e.preventDefault(); // Key 입력으로 화면이 이동하는 것을 막습니다.
-  }
-
-  switch (e.key) {
-    case 'ArrowLeft': {
+  switch (direction) {
+    case 'left': {
       if (day === 0) {
         if (nurseIndex === 0) {
           newDay = dayCnt - 1;
@@ -30,11 +27,11 @@ export const moveFocusByKeydown = (
           newDay = dayCnt - 1;
         }
       } else {
-        newDay = e.ctrlKey || e.metaKey ? 0 : Math.max(0, day - 1);
+        newDay = moveEnd ? 0 : Math.max(0, day - 1);
       }
       break;
     }
-    case 'ArrowRight': {
+    case 'right': {
       if (day === dayCnt - 1) {
         if (nurseIndex === flatNurses.length - 1) {
           newNurseId = flatNurses[0].shiftNurseId;
@@ -44,32 +41,28 @@ export const moveFocusByKeydown = (
           newDay = 0;
         }
       } else {
-        newDay = e.ctrlKey || e.metaKey ? dayCnt - 1 : Math.min(dayCnt - 1, day + 1);
+        newDay = moveEnd ? dayCnt - 1 : Math.min(dayCnt - 1, day + 1);
       }
       break;
     }
-    case 'ArrowUp': {
+    case 'up': {
       if (nurseIndex === 0) {
         newNurseId = flatNurses[flatNurses.length - 1].shiftNurseId;
         newDay = day;
       } else {
-        newNurseId =
-          e.ctrlKey || e.metaKey
-            ? flatNurses[0].shiftNurseId
-            : flatNurses[nurseIndex - 1].shiftNurseId;
+        newNurseId = moveEnd ? flatNurses[0].shiftNurseId : flatNurses[nurseIndex - 1].shiftNurseId;
         newDay = day;
       }
       break;
     }
-    case 'ArrowDown': {
+    case 'down': {
       if (nurseIndex === flatNurses.length - 1) {
         newNurseId = flatNurses[0].shiftNurseId;
         newDay = day;
       } else {
-        newNurseId =
-          e.ctrlKey || e.metaKey
-            ? flatNurses[flatNurses.length - 1].shiftNurseId
-            : flatNurses[nurseIndex + 1].shiftNurseId;
+        newNurseId = moveEnd
+          ? flatNurses[flatNurses.length - 1].shiftNurseId
+          : flatNurses[nurseIndex + 1].shiftNurseId;
         newDay = day;
       }
       break;

src/hooks/shift/useEditShift/index.ts

@@ -2,7 +2,7 @@
 import { useCallback, useEffect } from 'react';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { WardShiftsDTO, getShift, updateShift, updateShifts } from '@libs/api/shift';
-import { getWard, getWardConstraint, updateWardConstraint } from '@libs/api/ward';
+import { getWardConstraint, updateWardConstraint } from '@libs/api/ward';
 import { updateNurseCarry } from '@libs/api/nurse';
 import { match } from 'ts-pattern';
 import { event, sendEvent } from 'analytics';
@@ -13,7 +13,7 @@ import {
   checkShift,
   findNurse,
   keydownEventMapper,
-  moveFocusByKeydown,
+  moveFocus,
   updateCheckFaultOption,
 } from './handlers';
 import { getShiftTeams } from '@libs/api/shiftTeam';
@@ -24,6 +24,7 @@ const useEditShift = (activeEffect = false) => {
     year,
     month,
     currentShiftTeam,
+    oldCurrentShiftTeamId,
     focus,
     focusedDayInfo,
     foldedLevels,
@@ -39,6 +40,7 @@ const useEditShift = (activeEffect = false) => {
       state.year,
       state.month,
       state.currentShiftTeam,
+      state.oldCurrentShiftTeamId,
       state.focus,
       state.focusedDayInfo,
       state.foldedLevels,
@@ -58,15 +60,17 @@ const useEditShift = (activeEffect = false) => {
 
   const queryClient = useQueryClient();
 
-  const wardQueryKey = ['ward', wardId];
   const shiftQueryKey = ['shift', wardId, year, month, currentShiftTeam];
   const shiftTeamQueryKey = ['shiftTeams', wardId];
   const wardConstraintQueryKey = ['wardConstraint', currentShiftTeam, wardId];
 
   const { data: shiftTeams } = useQuery(shiftTeamQueryKey, () => getShiftTeams(wardId!), {
     enabled: wardId != null,
     onSuccess: (data) => {
-      if (currentShiftTeam === null) setState('currentShiftTeam', data[0]);
+      if (currentShiftTeam) {
+        data.every((x) => x.shiftTeamId !== currentShiftTeam.shiftTeamId) &&
+          setState('currentShiftTeam', data[0]);
+      } else setState('currentShiftTeam', data[0]);
     },
   });
 
@@ -94,26 +98,24 @@ const useEditShift = (activeEffect = false) => {
     }
   );
 
-  useQuery(wardQueryKey, () => getWard(wardId!), {
-    enabled: wardId !== null,
-  });
   const { data: shift, status: shiftStatus } = useQuery(
     shiftQueryKey,
     () => getShift(wardId!, currentShiftTeam!.shiftTeamId, year, month),
     {
       enabled: wardId !== null && currentShiftTeam !== null,
       onSuccess: (data) => {
         if (data === null) return;
-        setState(
-          'foldedLevels',
-          data.divisionShiftNurses.map(() => false)
-        );
 
-        const wardShiftTypeMap = new Map<number, WardShiftType>();
-        data.wardShiftTypes.forEach((wardShiftType) => {
-          wardShiftTypeMap.set(wardShiftType.wardShiftTypeId, wardShiftType);
-        });
-        setState('wardShiftTypeMap', wardShiftTypeMap);
+        if (
+          !oldCurrentShiftTeamId ||
+          (oldCurrentShiftTeamId && oldCurrentShiftTeamId !== currentShiftTeam?.shiftTeamId)
+        ) {
+          setState(
+            'foldedLevels',
+            data.divisionShiftNurses.map(() => false)
+          );
+          setState('oldCurrentShiftTeamId', currentShiftTeam?.shiftTeamId);
+        }
       },
     }
   );
@@ -315,10 +317,8 @@ const useEditShift = (activeEffect = false) => {
 
   const changeFocusedShift = useCallback(
     (shiftTypeId: number | null) => {
+      if (!wardId || !focus || !shift) return;
       if (
-        !wardId ||
-        !focus ||
-        !shift ||
         shift.divisionShiftNurses
           .flatMap((x) => x)
           .find((x) => x.shiftNurse.shiftNurseId === focus.shiftNurseId)!.wardShiftList[
@@ -341,29 +341,6 @@ const useEditShift = (activeEffect = false) => {
         return;
 
       mutateShift({ wardId, shift, focus, shiftTypeId });
-
-      const flatNurses = shift.divisionShiftNurses
-        .flatMap<{ shiftNurse: ShiftNurse }>((x) => x)
-        .map((x) => x.shiftNurse);
-      const { day, shiftNurseId } = focus;
-      const dayCnt = shift.days.length;
-      const nurseIndex = flatNurses.findIndex((x) => x.shiftNurseId === shiftNurseId);
-      let newNurseId = shiftNurseId;
-      let newDay = day;
-
-      if (day === dayCnt - 1) {
-        if (nurseIndex === flatNurses.length - 1) {
-          newNurseId = flatNurses[0].shiftNurseId;
-          newDay = 0;
-        } else {
-          newNurseId = flatNurses[nurseIndex + 1].shiftNurseId;
-          newDay = 0;
-        }
-      } else {
-        newDay = Math.min(dayCnt - 1, day + 1);
-      }
-
-      setState('focus', { shiftNurseId: newNurseId, day: newDay });
     },
     [focus, shift]
   );
@@ -430,7 +407,15 @@ const useEditShift = (activeEffect = false) => {
 
   const handleKeyDown = useCallback(
     (e: KeyboardEvent) => {
-      if ((e.ctrlKey || e.metaKey) && e.key === 'z') {
+      if (
+        ['Ctrl', 'Space', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].indexOf(e.code) != -1
+      ) {
+        e.preventDefault(); // Key 입력으로 화면이 이동하는 것을 막습니다.
+      }
+
+      const ctrlKey = e.ctrlKey || e.metaKey;
+
+      if (ctrlKey && e.key === 'z') {
         if (e.shiftKey) {
           moveHistory(1);
           sendEvent(event.redo_key);
@@ -439,21 +424,43 @@ const useEditShift = (activeEffect = false) => {
           sendEvent(event.undo_key);
         }
       }
+
       if (!focus || !shift) return;
-      moveFocusByKeydown(e, shift, focus, (focus: Focus | null) => {
-        setState('focus', focus);
-        sendEvent(
-          e.ctrlKey || e.metaKey ? event.move_cell_focus_end : event.move_cell_focus,
-          e.key
+      if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key)) {
+        moveFocus(
+          e.key.replace('Arrow', '').toLowerCase() as 'left' | 'right' | 'up' | 'down',
+          ctrlKey,
+          shift,
+          focus,
+          (focus: Focus | null) => {
+            setState('focus', focus);
+            sendEvent(ctrlKey ? event.move_cell_focus_end : event.move_cell_focus, e.key);
+          }
         );
-      });
+      }
       keydownEventMapper(
         e,
         ...shift.wardShiftTypes.map((shiftType) => ({
           keys: [shiftType.shortName],
-          callback: () => changeFocusedShift(shiftType.wardShiftTypeId),
+          callback: () => {
+            changeFocusedShift(shiftType.wardShiftTypeId);
+            moveFocus('right', ctrlKey, shift, focus, (focus: Focus | null) => {
+              setState('focus', focus);
+              sendEvent(ctrlKey ? event.move_cell_focus_end : event.move_cell_focus, e.key);
+            });
+          },
         })),
-        { keys: ['Backspace', 'Delete'], callback: () => changeFocusedShift(null) }
+        {
+          keys: ['Backspace'],
+          callback: () => {
+            changeFocusedShift(null);
+            moveFocus('left', ctrlKey, shift, focus, (focus: Focus | null) => {
+              setState('focus', focus);
+              sendEvent(ctrlKey ? event.move_cell_focus_end : event.move_cell_focus, e.key);
+            });
+          },
+        },
+        { keys: ['Delete'], callback: () => changeFocusedShift(null) }
       );
     },
     [shift, focus, editHistory]
@@ -478,6 +485,16 @@ const useEditShift = (activeEffect = false) => {
     handleToggleEditMode();
   }, []);
 
+  useEffect(() => {
+    if (activeEffect && shift) {
+      const wardShiftTypeMap = new Map<number, WardShiftType>();
+      shift.wardShiftTypes.forEach((wardShiftType) => {
+        wardShiftTypeMap.set(wardShiftType.wardShiftTypeId, wardShiftType);
+      });
+      setState('wardShiftTypeMap', wardShiftTypeMap);
+    }
+  }, [activeEffect, shift]);
+
   useEffect(() => {
     if (activeEffect && wardConstraint)
       setState('checkFaultOptions', updateCheckFaultOption(wardConstraint));
@@ -497,7 +514,6 @@ const useEditShift = (activeEffect = false) => {
 
   return {
     queryKey: {
-      wardQueryKey,
       shiftQueryKey,
       shiftTeamQueryKey,
       wardConstraintQueryKey,