From 03e20aefe2dc7cebc540c9d3210cf69369ce35c0 Mon Sep 17 00:00:00 2001
From: Inseo Hwang <sjsjsj1246@gmail.com>
Date: Tue, 17 Oct 2023 02:17:55 +0900
Subject: [PATCH] =?UTF-8?q?Feat:=20=EB=A9=98=ED=86=A0=EB=A7=81=20=ED=94=BC?=
 =?UTF-8?q?=EB=93=9C=EB=B0=B1=20=EB=B0=98=EC=98=81=20(#64)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html                                    |   1 +
 src/App.tsx                                   |  13 -
 src/components/ShiftBadge/index.tsx           |   3 +-
 src/components/ShiftCircle/index.tsx          |   2 +-
 src/hooks/auth/useAuth/index.ts               |   9 +-
 src/hooks/shift/useEditShift/handlers.ts      |  35 +-
 src/hooks/shift/useEditShift/index.ts         | 120 ++++---
 src/hooks/shift/useEditShift/mockShift.ts     |  48 +--
 src/hooks/shift/useEditShift/store.ts         |   4 +
 src/hooks/shift/useRequestShift/index.ts      |  73 ++--
 src/libs/api/shiftType.ts                     |   9 +-
 src/libs/api/ward.ts                          |   2 +-
 src/pages/LoginPage/RedirectPage.tsx          |   3 +-
 src/pages/LoginPage/index.tsx                 |   4 +-
 .../components/CountDutyByDay.tsx             |   4 +-
 .../components/NurseEditModal.tsx             | 327 +++++++++---------
 src/pages/MakeShiftPage/components/Panel.tsx  |  13 +-
 .../MakeShiftPage/components/RequestLayer.tsx |   5 +-
 .../components/ShiftCalendar.tsx              |   8 +-
 .../components/editWard/CreateShiftModal.tsx  |  58 +---
 .../components/editWard/SetShiftType.tsx      |  12 +-
 src/pages/MakeShiftPage/index.tsx             |  11 +-
 src/pages/RegisterPage/RegisterWard.tsx       |  64 ++--
 src/types/ward.ts                             |   8 +-
 24 files changed, 420 insertions(+), 416 deletions(-)

diff --git a/index.html b/index.html
index 96f20662..1c3db85b 100644
--- a/index.html
+++ b/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 () {
diff --git a/src/App.tsx b/src/App.tsx
index 33102129..d8d4f75a 100644
--- a/src/App.tsx
+++ b/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 />;
 }
 
diff --git a/src/components/ShiftBadge/index.tsx b/src/components/ShiftBadge/index.tsx
index 594f9105..82de04d5 100644
--- a/src/components/ShiftBadge/index.tsx
+++ b/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}
     >
diff --git a/src/components/ShiftCircle/index.tsx b/src/components/ShiftCircle/index.tsx
index 905f619f..4994fd06 100644
--- a/src/components/ShiftCircle/index.tsx
+++ b/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>
diff --git a/src/hooks/auth/useAuth/index.ts b/src/hooks/auth/useAuth/index.ts
index 4f2c6edf..54fd81a5 100644
--- a/src/hooks/auth/useAuth/index.ts
+++ b/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(), {
diff --git a/src/hooks/shift/useEditShift/handlers.ts b/src/hooks/shift/useEditShift/handlers.ts
index 3b45b2df..ba597043 100644
--- a/src/hooks/shift/useEditShift/handlers.ts
+++ b/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;
diff --git a/src/hooks/shift/useEditShift/index.ts b/src/hooks/shift/useEditShift/index.ts
index 18e4139f..7e04d10d 100644
--- a/src/hooks/shift/useEditShift/index.ts
+++ b/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,7 +60,6 @@ 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];
@@ -66,7 +67,10 @@ const useEditShift = (activeEffect = false) => {
   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,9 +98,6 @@ const useEditShift = (activeEffect = false) => {
     }
   );
 
-  useQuery(wardQueryKey, () => getWard(wardId!), {
-    enabled: wardId !== null,
-  });
   const { data: shift, status: shiftStatus } = useQuery(
     shiftQueryKey,
     () => getShift(wardId!, currentShiftTeam!.shiftTeamId, year, month),
@@ -104,16 +105,17 @@ const useEditShift = (activeEffect = false) => {
       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,
diff --git a/src/hooks/shift/useEditShift/mockShift.ts b/src/hooks/shift/useEditShift/mockShift.ts
index 0d525975..60ce726b 100644
--- a/src/hooks/shift/useEditShift/mockShift.ts
+++ b/src/hooks/shift/useEditShift/mockShift.ts
@@ -150,10 +150,10 @@ export const demo1 = {
       shortName: 'D',
       startTime: '07:00',
       endTime: '15:00',
-      backgroundColor: '#04dcad',
-      textColor: '#FFFFFF',
+      color: '#4DC2AD',
       isOff: false,
       isDefault: true,
+      isCounted: true,
     },
     {
       wardShiftTypeId: 2,
@@ -161,10 +161,10 @@ export const demo1 = {
       shortName: 'E',
       startTime: '17:00',
       endTime: '22:00',
-      backgroundColor: '#ff8ba5',
-      textColor: '#FFFFFF',
+      color: '#ff8ba5',
       isOff: false,
       isDefault: true,
+      isCounted: true,
     },
     {
       wardShiftTypeId: 3,
@@ -172,10 +172,10 @@ export const demo1 = {
       shortName: 'N',
       startTime: '22:00',
       endTime: '07:00',
-      backgroundColor: '#3580ff',
-      textColor: '#FFFFFF',
+      color: '#3580ff',
       isOff: false,
       isDefault: true,
+      isCounted: true,
     },
     {
       wardShiftTypeId: 4,
@@ -183,10 +183,10 @@ export const demo1 = {
       shortName: 'O',
       startTime: null,
       endTime: null,
-      backgroundColor: '#465b7a',
-      textColor: '#FFFFFF',
+      color: '#465b7a',
       isOff: true,
       isDefault: true,
+      isCounted: true,
     },
   ],
   divisionShiftNurses: [
@@ -1053,10 +1053,10 @@ export const demo2 = {
       shortName: 'D',
       startTime: '07:00',
       endTime: '15:00',
-      backgroundColor: '#FFFFFF',
-      textColor: '#04dcad',
+      color: '#FFFFFF',
       isOff: false,
       isDefault: true,
+      isCounted: true,
     },
     {
       wardShiftTypeId: 2,
@@ -1064,10 +1064,10 @@ export const demo2 = {
       shortName: 'E',
       startTime: '17:00',
       endTime: '22:00',
-      backgroundColor: '#FFFFFF',
-      textColor: '#ff8ba5',
+      color: '#FFFFFF',
       isOff: false,
       isDefault: true,
+      isCounted: true,
     },
     {
       wardShiftTypeId: 3,
@@ -1075,10 +1075,10 @@ export const demo2 = {
       shortName: 'N',
       startTime: '22:00',
       endTime: '07:00',
-      backgroundColor: '#FFFFFF',
-      textColor: '#3580ff',
+      color: '#FFFFFF',
       isOff: false,
       isDefault: true,
+      isCounted: true,
     },
     {
       wardShiftTypeId: 4,
@@ -1086,10 +1086,10 @@ export const demo2 = {
       shortName: 'O',
       startTime: null,
       endTime: null,
-      backgroundColor: '#FFFFFF',
-      textColor: '#465b7a',
+      color: '#FFFFFF',
       isOff: true,
       isDefault: true,
+      isCounted: true,
     },
     {
       wardShiftTypeId: 5,
@@ -1097,10 +1097,10 @@ export const demo2 = {
       shortName: 'R',
       startTime: '22:00',
       endTime: '07:00',
-      backgroundColor: '#FFFFFF',
-      textColor: '#883311',
+      color: '#FFFFFF',
       isOff: false,
       isDefault: true,
+      isCounted: true,
     },
     {
       wardShiftTypeId: 6,
@@ -1108,10 +1108,10 @@ export const demo2 = {
       shortName: 'D',
       startTime: '07:00',
       endTime: '22:00',
-      backgroundColor: '#FFFFFF',
-      textColor: '#128122',
+      color: '#FFFFFF',
       isOff: false,
       isDefault: true,
+      isCounted: true,
     },
   ],
   divisionShiftNurses: [
@@ -1978,7 +1978,7 @@ export const blank = {
       shortName: 'D',
       startTime: '07:00',
       endTime: '15:00',
-      backgroundColor: '#04dcad',
+      color: '#04dcad',
       isOff: false,
       isDefault: true,
     },
@@ -1988,7 +1988,7 @@ export const blank = {
       shortName: 'E',
       startTime: '17:00',
       endTime: '22:00',
-      backgroundColor: '#ff8ba5',
+      color: '#ff8ba5',
       isOff: false,
       isDefault: true,
     },
@@ -1998,7 +1998,7 @@ export const blank = {
       shortName: 'N',
       startTime: '22:00',
       endTime: '07:00',
-      backgroundColor: '#3580ff',
+      color: '#3580ff',
       isOff: false,
       isDefault: true,
     },
@@ -2008,7 +2008,7 @@ export const blank = {
       shortName: 'O',
       startTime: null,
       endTime: null,
-      backgroundColor: '#465b7a',
+      color: '#465b7a',
       isOff: true,
       isDefault: true,
     },
diff --git a/src/hooks/shift/useEditShift/store.ts b/src/hooks/shift/useEditShift/store.ts
index 3309b6c9..b43f75d0 100644
--- a/src/hooks/shift/useEditShift/store.ts
+++ b/src/hooks/shift/useEditShift/store.ts
@@ -6,6 +6,7 @@ interface State {
   year: number;
   month: number;
   currentShiftTeam: ShiftTeam | null;
+  oldCurrentShiftTeamId: number | null;
   focus: Focus | null;
   focusedDayInfo: DayInfo | null;
   foldedLevels: boolean[] | null;
@@ -32,6 +33,7 @@ const initialState: State = {
   month: new Date().getMonth() + 1,
   focus: null,
   currentShiftTeam: null,
+  oldCurrentShiftTeamId: null,
   focusedDayInfo: null,
   foldedLevels: null,
   editHistory: new Map(),
@@ -93,6 +95,7 @@ const useEditShiftStore = create<Store>()(
           readonly,
           showLayer,
           currentShiftTeam,
+          oldCurrentShiftTeamId,
         }: Store) => ({
           year,
           month,
@@ -100,6 +103,7 @@ const useEditShiftStore = create<Store>()(
           readonly,
           showLayer,
           currentShiftTeam,
+          oldCurrentShiftTeamId,
         }),
       }
     )
diff --git a/src/hooks/shift/useRequestShift/index.ts b/src/hooks/shift/useRequestShift/index.ts
index 33cca53c..f62cdcca 100644
--- a/src/hooks/shift/useRequestShift/index.ts
+++ b/src/hooks/shift/useRequestShift/index.ts
@@ -1,13 +1,9 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
-import { useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useRequestShiftStore } from './store';
 import { shallow } from 'zustand/shallow';
-import {
-  findNurse,
-  keydownEventMapper,
-  moveFocusByKeydown,
-} from '@hooks/shift/useEditShift/handlers';
+import { findNurse, keydownEventMapper, moveFocus } from '@hooks/shift/useEditShift/handlers';
 import { produce } from 'immer';
 import { getReqShift, updateReqShift } from '@libs/api/shift';
 import { event, sendEvent } from 'analytics';
@@ -183,21 +179,56 @@ const useRequestShift = (activeEffect = false) => {
     focusedShiftChange({ wardId, requestShift, focus, shiftTypeId });
   };
 
-  const handleKeyDown = (e: KeyboardEvent) => {
-    if (!focus || !requestShift) return;
-    moveFocusByKeydown(e, requestShift, focus, (focus: Focus | null) => {
-      setState('focus', focus);
-      sendEvent(e.ctrlKey || e.metaKey ? event.move_cell_focus_end : event.move_cell_focus, e.key);
-    });
-    keydownEventMapper(
-      e,
-      ...requestShift.wardShiftTypes.map((shiftType) => ({
-        keys: [shiftType.shortName],
-        callback: () => changeFocusedShift(shiftType.wardShiftTypeId),
-      })),
-      { keys: ['Backspace'], callback: () => changeFocusedShift(null) }
-    );
-  };
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (
+        ['Ctrl', 'Space', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].indexOf(e.code) != -1
+      ) {
+        e.preventDefault(); // Key 입력으로 화면이 이동하는 것을 막습니다.
+      }
+
+      const ctrlKey = e.ctrlKey || e.metaKey;
+
+      if (!focus || !requestShift) return;
+      if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key)) {
+        moveFocus(
+          e.key.replace('Arrow', '').toLowerCase() as 'left' | 'right' | 'up' | 'down',
+          ctrlKey,
+          requestShift,
+          focus,
+          (focus: Focus | null) => {
+            setState('focus', focus);
+            sendEvent(ctrlKey ? event.move_cell_focus_end : event.move_cell_focus, e.key);
+          }
+        );
+      }
+      keydownEventMapper(
+        e,
+        ...requestShift.wardShiftTypes.map((shiftType) => ({
+          keys: [shiftType.shortName],
+          callback: () => {
+            changeFocusedShift(shiftType.wardShiftTypeId);
+            moveFocus('right', ctrlKey, requestShift, focus, (focus: Focus | null) => {
+              setState('focus', focus);
+              sendEvent(ctrlKey ? event.move_cell_focus_end : event.move_cell_focus, e.key);
+            });
+          },
+        })),
+        {
+          keys: ['Backspace'],
+          callback: () => {
+            changeFocusedShift(null);
+            moveFocus('left', ctrlKey, requestShift, 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) }
+      );
+    },
+    [requestShift, focus]
+  );
 
   useEffect(() => {
     activeEffect && document.addEventListener('keydown', handleKeyDown);
diff --git a/src/libs/api/shiftType.ts b/src/libs/api/shiftType.ts
index 63bfbb3b..681ae265 100644
--- a/src/libs/api/shiftType.ts
+++ b/src/libs/api/shiftType.ts
@@ -5,14 +5,7 @@ const getShiftTypes = async (wardId: number) =>
 
 export type CreateShiftTypeDTO = Pick<
   WardShiftType,
-  | 'name'
-  | 'shortName'
-  | 'backgroundColor'
-  | 'textColor'
-  | 'startTime'
-  | 'endTime'
-  | 'isOff'
-  | 'isDefault'
+  'name' | 'shortName' | 'color' | 'startTime' | 'endTime' | 'isOff' | 'isDefault'
 >;
 const createShiftType = async (wardId: number, createShiftTypeDTO: CreateShiftTypeDTO) =>
   (await axiosInstance.post<WardShiftType>(`/wards/${wardId}/shift-types`, createShiftTypeDTO))
diff --git a/src/libs/api/ward.ts b/src/libs/api/ward.ts
index 2037cbd5..c2b2ae7e 100644
--- a/src/libs/api/ward.ts
+++ b/src/libs/api/ward.ts
@@ -5,7 +5,7 @@ const getWard = async (wardId: number) => (await axiosInstance.get<Ward>(`/wards
 export type CreateWardDTO = {
   name: string;
   hospitalName: string;
-  wardShiftTypes: Omit<WardShiftType, 'wardShiftTypeId'>[];
+  wardShiftTypes: Omit<WardShiftType, 'wardShiftTypeId' | 'isCounted'>[];
   shiftTeams: { nurseNames: string[] }[];
 };
 const createWrad = async (createWardDTO: CreateWardDTO) =>
diff --git a/src/pages/LoginPage/RedirectPage.tsx b/src/pages/LoginPage/RedirectPage.tsx
index 3b93a603..0290d5b5 100644
--- a/src/pages/LoginPage/RedirectPage.tsx
+++ b/src/pages/LoginPage/RedirectPage.tsx
@@ -13,8 +13,7 @@ const RedirectPage = () => {
     const accessToken = query?.['accessToken'] as string;
     const nextPageUrl = query?.['nextPageUrl'] as string;
     if (accessToken) {
-      handleLogin(accessToken);
-      location.replace(nextPageUrl || '/');
+      handleLogin(accessToken, nextPageUrl);
     }
   }, []);
 
diff --git a/src/pages/LoginPage/index.tsx b/src/pages/LoginPage/index.tsx
index 9b33bdf1..b96c0d53 100644
--- a/src/pages/LoginPage/index.tsx
+++ b/src/pages/LoginPage/index.tsx
@@ -14,7 +14,9 @@ const LoginPage = () => {
         <div className="relative">
           <div className="absolute top-[-4.3rem] font-apple text-[2rem] text-sub-2">로그인</div>
           <a
-            href={`${import.meta.env.VITE_SERVER_URL}/oauth2/authorization/kakao`}
+            href={`${import.meta.env.VITE_SERVER_URL}/oauth2/authorization/kakao?nextPageUrl=${
+              location.origin
+            }/make`}
             className="flex h-[7.625rem] w-[40rem] items-center justify-center rounded-[1.25rem] border border-sub-4 shadow-banner"
           >
             <KakaoIcon className="mr-[3.125rem] h-[4rem] w-[4rem]" />
diff --git a/src/pages/MakeShiftPage/components/CountDutyByDay.tsx b/src/pages/MakeShiftPage/components/CountDutyByDay.tsx
index e1765f83..1cc6a2c8 100644
--- a/src/pages/MakeShiftPage/components/CountDutyByDay.tsx
+++ b/src/pages/MakeShiftPage/components/CountDutyByDay.tsx
@@ -19,8 +19,8 @@ function CountDutyByDay() {
             ${index === shift.wardShiftTypes.length - 1 && 'rounded-bl-[1.25rem]'}
             `}
               style={{
-                backgroundColor: wardShiftType.backgroundColor,
-                color: wardShiftType.textColor,
+                backgroundColor: wardShiftType.color,
+                color: 'white',
               }}
             >
               {wardShiftType.shortName}
diff --git a/src/pages/MakeShiftPage/components/NurseEditModal.tsx b/src/pages/MakeShiftPage/components/NurseEditModal.tsx
index 38cd05e1..407c232d 100644
--- a/src/pages/MakeShiftPage/components/NurseEditModal.tsx
+++ b/src/pages/MakeShiftPage/components/NurseEditModal.tsx
@@ -5,6 +5,7 @@ import useEditShiftTeam from '@hooks/ward/useEditShiftTeam';
 import { event, sendEvent } from 'analytics';
 import { produce } from 'immer';
 import { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
 
 function NurseEditModal() {
   const {
@@ -23,179 +24,187 @@ function NurseEditModal() {
     if (selectedNurse) setWriteNurse(selectedNurse);
   }, [selectedNurse]);
 
-  return (
+  return createPortal(
     <div
-      className={`ignore-onclickoutside fixed top-[9.5rem] z-[999] flex h-fit w-[25rem] flex-col justify-center rounded-[1.25rem] border-l-[.0625rem] border-sub-4.5 bg-white shadow-shadow-2 transition-all duration-500 ease-out ${
+      className={`ignore-onclickoutside fixed top-[50%] z-[999] h-[90vh] w-[25rem] translate-y-[-50%] overflow-y-scroll rounded-[1.25rem] border-l-[.0625rem] border-sub-4.5 bg-white shadow-shadow-2 transition-all duration-500 ease-out scrollbar-hide ${
         selectedNurse ? 'right-[3.125rem]' : 'right-[-25rem]'
       }`}
     >
-      <div className="flex h-[2.75rem] items-center bg-sub-5 px-[2.5rem]">
-        <p className="font-apple text-base text-sub-3">간호사별 관리</p>
-        <div className="ml-auto flex cursor-pointer items-center" onClick={() => selectNurse(null)}>
-          <p className="font-apple text-base text-sub-3">닫기</p>
-          <CancelIcon className="h-[1.5rem] w-[1.5rem]" />
-        </div>
-      </div>
-      <div className="my-[1.25rem] flex h-[2.625rem] w-full items-center px-[2.5rem]">
-        <div className="h-[2.625rem] w-[2.625rem] rounded-full bg-gray-400 " />
-        <TextField
-          autoFocus
-          className="ml-[1.25rem] h-[2.625rem] w-[10.125rem] px-3 text-[1.875rem] font-semibold text-text-1"
-          onChange={(e) => {
-            handleChange('name', e.target.value);
-            sendEvent(event.change_nurse_name);
-          }}
-          value={writeNurse?.name || ''}
-        />
-        <div
-          className="ml-auto flex h-[1.25rem] w-[1.75rem] cursor-pointer items-center justify-center rounded-[.3125rem] bg-sub-5 font-apple text-[.875rem] text-[#A2A6F5]"
-          onClick={() => {
-            handleChange('gender', writeNurse?.gender === '남' ? '여' : '남');
-            sendEvent(event.change_nurse_gender);
-          }}
-        >
-          {writeNurse?.gender}
+      <div className="flex h-fit w-full flex-col">
+        <div className="flex h-[2.75rem] items-center bg-sub-5 px-[2.5rem]">
+          <p className="font-apple text-base text-sub-3">간호사별 관리</p>
+          <div
+            className="ml-auto flex cursor-pointer items-center"
+            onClick={() => selectNurse(null)}
+          >
+            <p className="font-apple text-base text-sub-3">닫기</p>
+            <CancelIcon className="h-[1.5rem] w-[1.5rem]" />
+          </div>
         </div>
-      </div>
-      <div className="h-[.3125rem] w-full bg-sub-5" />
-      <div className="flex h-[7.25rem] w-full flex-col items-stretch justify-between border-b-[.0313rem] border-sub-4 px-[2.5rem] pb-[1.875rem] pt-[.625rem]">
-        <div className="flex items-center justify-between">
-          <p className="shrink-0 font-apple text-base font-medium text-sub-2">입사 년도</p>
-          <p className="ml-8 truncate font-apple text-[.625rem] font-light text-sub-3">
-            * 해당 병원에 입사한 년도를 작성해주세요.
-          </p>
+        <div className="my-[1.25rem] flex h-[2.625rem] w-full items-center px-[2.5rem]">
+          <div className="h-[2.625rem] w-[2.625rem] rounded-full bg-gray-400 " />
+          <TextField
+            autoFocus
+            className="ml-[1.25rem] h-[2.625rem] w-[10.125rem] px-3 text-[1.875rem] font-semibold text-text-1"
+            onChange={(e) => {
+              handleChange('name', e.target.value);
+              sendEvent(event.change_nurse_name);
+            }}
+            value={writeNurse?.name || ''}
+          />
+          <div
+            className="ml-auto flex h-[1.25rem] w-[1.75rem] cursor-pointer items-center justify-center rounded-[.3125rem] bg-sub-5 font-apple text-[.875rem] text-[#A2A6F5]"
+            onClick={() => {
+              handleChange('gender', writeNurse?.gender === '남' ? '여' : '남');
+              sendEvent(event.change_nurse_gender);
+            }}
+          >
+            {writeNurse?.gender}
+          </div>
         </div>
-        <TextField
-          type="date"
-          className="h-[2.5rem] font-poppins text-[1.25rem] text-sub-3"
-          onChange={(e) => {
-            handleChange('employmentDate', e.target.value);
-            sendEvent(event.change_nurse_employment_date);
-          }}
-          value={writeNurse?.employmentDate || ''}
-        />
-      </div>
-      <div className="flex h-[7.25rem] w-full flex-col items-stretch justify-between border-b-[.0313rem] border-sub-4 px-[2.5rem] pb-[1.875rem] pt-[.625rem]">
-        <div className="flex items-center justify-between">
-          <p className="shrink-0 font-apple text-base font-medium text-sub-2">전화 번호</p>
-          <p className="ml-8 truncate font-apple text-[.625rem] font-light text-sub-3">
-            * 비상 연락 망
-          </p>
+        <div className="h-[.3125rem] w-full bg-sub-5" />
+        <div className="flex h-[7.25rem] w-full flex-col items-stretch justify-between border-b-[.0313rem] border-sub-4 px-[2.5rem] pb-[1.875rem] pt-[.625rem]">
+          <div className="flex items-center justify-between">
+            <p className="shrink-0 font-apple text-base font-medium text-sub-2">입사 년도</p>
+            <p className="ml-8 truncate font-apple text-[.625rem] font-light text-sub-3">
+              * 해당 병원에 입사한 년도를 작성해주세요.
+            </p>
+          </div>
+          <TextField
+            type="date"
+            className="h-[2.5rem] font-poppins text-[1.25rem] text-sub-3"
+            onChange={(e) => {
+              handleChange('employmentDate', e.target.value);
+              sendEvent(event.change_nurse_employment_date);
+            }}
+            value={writeNurse?.employmentDate || ''}
+          />
         </div>
-        <TextField
-          type="tel"
-          className="h-[2.5rem] font-poppins text-[1.25rem] text-sub-3"
-          onChange={(e) => {
-            handleChange('phoneNum', e.target.value);
-            sendEvent(event.change_nurse_phone);
-          }}
-          value={writeNurse?.phoneNum || ''}
-        />
-      </div>
-      <div className="flex h-[7.25rem] w-full flex-col items-stretch justify-between border-b-[.0313rem] border-sub-4 px-[2.5rem] pb-[1.875rem] pt-[.625rem]">
-        <div className="flex items-center justify-between">
-          <p className="shrink-0 font-apple text-base font-medium text-sub-2">가능 근무</p>
-          <p className="ml-8 truncate font-apple text-[.625rem] font-light text-sub-3">
-            * 가능 근무를 모두 선택해주세요.
-          </p>
+        <div className="flex h-[7.25rem] w-full flex-col items-stretch justify-between border-b-[.0313rem] border-sub-4 px-[2.5rem] pb-[1.875rem] pt-[.625rem]">
+          <div className="flex items-center justify-between">
+            <p className="shrink-0 font-apple text-base font-medium text-sub-2">전화 번호</p>
+            <p className="ml-8 truncate font-apple text-[.625rem] font-light text-sub-3">
+              * 비상 연락 망
+            </p>
+          </div>
+          <TextField
+            type="tel"
+            className="h-[2.5rem] font-poppins text-[1.25rem] text-sub-3"
+            onChange={(e) => {
+              handleChange('phoneNum', e.target.value);
+              sendEvent(event.change_nurse_phone);
+            }}
+            value={writeNurse?.phoneNum || ''}
+          />
         </div>
-        <div className="flex gap-[1.375rem]">
-          {writeNurse?.nurseShiftTypes.slice(0, 3).map(({ nurseShiftTypeId, isPossible, name }) => (
-            <div
-              key={nurseShiftTypeId}
-              className={`flex h-[2.5rem] flex-1 cursor-pointer items-center justify-center rounded-[.3125rem] border-[.0625rem] font-apple text-[1.25rem]
+        <div className="flex h-[7.25rem] w-full flex-col items-stretch justify-between border-b-[.0313rem] border-sub-4 px-[2.5rem] pb-[1.875rem] pt-[.625rem]">
+          <div className="flex items-center justify-between">
+            <p className="shrink-0 font-apple text-base font-medium text-sub-2">가능 근무</p>
+            <p className="ml-8 truncate font-apple text-[.625rem] font-light text-sub-3">
+              * 가능 근무를 모두 선택해주세요.
+            </p>
+          </div>
+          <div className="flex gap-[1.375rem]">
+            {writeNurse?.nurseShiftTypes
+              .slice(0, 3)
+              .map(({ nurseShiftTypeId, isPossible, name }) => (
+                <div
+                  key={nurseShiftTypeId}
+                  className={`flex h-[2.5rem] flex-1 cursor-pointer items-center justify-center rounded-[.3125rem] border-[.0625rem] font-apple text-[1.25rem]
                 ${isPossible ? 'border-main-1 text-main-1' : 'border-sub-4 text-sub-3'}
               `}
-              onClick={() => {
-                handleChange(
-                  'nurseShiftTypes',
-                  produce(writeNurse.nurseShiftTypes, (draft: Nurse['nurseShiftTypes']) => {
-                    draft.find((x) => x.nurseShiftTypeId === nurseShiftTypeId)!.isPossible =
-                      !isPossible;
-                  })
-                );
-                sendEvent(event.change_nurse_shift_types);
-              }}
-            >
-              {name}
+                  onClick={() => {
+                    handleChange(
+                      'nurseShiftTypes',
+                      produce(writeNurse.nurseShiftTypes, (draft: Nurse['nurseShiftTypes']) => {
+                        draft.find((x) => x.nurseShiftTypeId === nurseShiftTypeId)!.isPossible =
+                          !isPossible;
+                      })
+                    );
+                    sendEvent(event.change_nurse_shift_types);
+                  }}
+                >
+                  {name}
+                </div>
+              ))}
+          </div>
+        </div>
+        <div className="flex h-[2.5rem] w-full items-center border-b-[.0313rem] border-sub-4 bg-main-bg px-[2.5rem] py-[.625rem]">
+          <p className="font-apple text-base font-medium text-sub-2">근무자</p>
+          {writeNurse?.isWorker ? (
+            <div className="ml-auto flex items-center gap-[.625rem]">
+              <p className="font-apple text-[.75rem] text-sub-3">해당 됨</p>
+              <CheckedIcon
+                className="h-[1.25rem] w-[1.25rem] cursor-pointer"
+                fill="#B08BFF"
+                onClick={() => {
+                  handleChange('isWorker', false);
+                  sendEvent(event.change_nurse_is_worker);
+                }}
+              />
             </div>
-          ))}
+          ) : (
+            <div className="ml-auto flex items-center gap-[.625rem]">
+              <p className="font-apple text-[.75rem] text-sub-3">해당 안됨</p>
+              <UncheckedIcon2
+                className="h-[1.25rem] w-[1.25rem] cursor-pointer"
+                onClick={() => {
+                  handleChange('isWorker', true);
+                  sendEvent(event.change_nurse_is_worker);
+                }}
+              />
+            </div>
+          )}
+        </div>
+        <div className="mt-[.3125rem] flex h-[2.5rem] w-full items-center border-y-[.0313rem] border-sub-4 bg-main-bg px-[2.5rem] py-[.625rem]">
+          <p className="font-apple text-base font-medium text-sub-2">근무표 작성 가능자</p>
+          {writeNurse?.isDutyManager ? (
+            <div className="ml-auto flex items-center gap-[.625rem]">
+              <p className="font-apple text-[.75rem] text-sub-3">해당 됨</p>
+              <CheckedIcon
+                className="h-[1.25rem] w-[1.25rem] cursor-pointer"
+                fill="#B08BFF"
+                onClick={() => {
+                  handleChange('isDutyManager', false);
+                  sendEvent(event.change_nurse_is_manager);
+                }}
+              />
+            </div>
+          ) : (
+            <div className="ml-auto flex items-center gap-[.625rem]">
+              <p className="font-apple text-[.75rem] text-sub-3">해당 안됨</p>
+              <UncheckedIcon2
+                className="h-[1.25rem] w-[1.25rem] cursor-pointer"
+                onClick={() => {
+                  handleChange('isDutyManager', true);
+                  sendEvent(event.change_nurse_is_manager);
+                }}
+              />
+            </div>
+          )}
         </div>
-      </div>
-      <div className="flex h-[2.5rem] w-full items-center border-b-[.0313rem] border-sub-4 bg-main-bg px-[2.5rem] py-[.625rem]">
-        <p className="font-apple text-base font-medium text-sub-2">근무자</p>
-        {writeNurse?.isWorker ? (
-          <div className="ml-auto flex items-center gap-[.625rem]">
-            <p className="font-apple text-[.75rem] text-sub-3">해당 됨</p>
-            <CheckedIcon
-              className="h-[1.25rem] w-[1.25rem] cursor-pointer"
-              fill="#B08BFF"
-              onClick={() => {
-                handleChange('isWorker', false);
-                sendEvent(event.change_nurse_is_worker);
-              }}
-            />
-          </div>
-        ) : (
-          <div className="ml-auto flex items-center gap-[.625rem]">
-            <p className="font-apple text-[.75rem] text-sub-3">해당 안됨</p>
-            <UncheckedIcon2
-              className="h-[1.25rem] w-[1.25rem] cursor-pointer"
-              onClick={() => {
-                handleChange('isWorker', true);
-                sendEvent(event.change_nurse_is_worker);
-              }}
-            />
-          </div>
-        )}
-      </div>
-      <div className="mt-[.3125rem] flex h-[2.5rem] w-full items-center border-y-[.0313rem] border-sub-4 bg-main-bg px-[2.5rem] py-[.625rem]">
-        <p className="font-apple text-base font-medium text-sub-2">근무표 작성 가능자</p>
-        {writeNurse?.isDutyManager ? (
-          <div className="ml-auto flex items-center gap-[.625rem]">
-            <p className="font-apple text-[.75rem] text-sub-3">해당 됨</p>
-            <CheckedIcon
-              className="h-[1.25rem] w-[1.25rem] cursor-pointer"
-              fill="#B08BFF"
-              onClick={() => {
-                handleChange('isDutyManager', false);
-                sendEvent(event.change_nurse_is_manager);
-              }}
-            />
-          </div>
-        ) : (
-          <div className="ml-auto flex items-center gap-[.625rem]">
-            <p className="font-apple text-[.75rem] text-sub-3">해당 안됨</p>
-            <UncheckedIcon2
-              className="h-[1.25rem] w-[1.25rem] cursor-pointer"
-              onClick={() => {
-                handleChange('isDutyManager', true);
-                sendEvent(event.change_nurse_is_manager);
-              }}
-            />
-          </div>
-        )}
-      </div>
 
-      <p className="ml-[2.5rem] mt-[1.875rem] font-apple text-base font-medium text-sub-2.5">
-        메모
-      </p>
-      <textarea
-        value={writeNurse?.memo}
-        className="mx-[2.5rem] mt-[.9375rem] h-[10.8125rem] resize-none rounded-[.3125rem] border-[.0313rem] border-sub-4.5 bg-main-bg p-2 font-apple text-sm text-sub-1"
-        onChange={(e) => {
-          handleChange('memo', e.target.value);
-          sendEvent(event.change_nurse_memo);
-        }}
-      />
+        <p className="ml-[2.5rem] mt-[1.875rem] font-apple text-base font-medium text-sub-2.5">
+          메모
+        </p>
+        <textarea
+          value={writeNurse?.memo}
+          className="mx-[2.5rem] mt-[.9375rem] h-[10.8125rem] resize-none rounded-[.3125rem] border-[.0313rem] border-sub-4.5 bg-main-bg p-2 font-apple text-sm text-sub-1"
+          onChange={(e) => {
+            handleChange('memo', e.target.value);
+            sendEvent(event.change_nurse_memo);
+          }}
+        />
 
-      <button
-        className="mb-[1.625rem] ml-auto mr-[2.5rem] mt-[1.5625rem] flex h-[2.25rem] w-[4.375rem] items-center justify-center rounded-[3.125rem] bg-main-3 px-[1.25rem] py-[.5rem] font-apple text-base font-medium text-white"
-        onClick={() => writeNurse && updateNurse(writeNurse.nurseId, writeNurse)}
-      >
-        저장
-      </button>
-    </div>
+        <button
+          className="mb-[1.625rem] ml-auto mr-[2.5rem] mt-[1.5625rem] flex h-[2.25rem] w-[4.375rem] items-center justify-center rounded-[3.125rem] bg-main-3 px-[1.25rem] py-[.5rem] font-apple text-base font-medium text-white"
+          onClick={() => writeNurse && updateNurse(writeNurse.nurseId, writeNurse)}
+        >
+          저장
+        </button>
+      </div>
+    </div>,
+    document.getElementById('nurse-modal-root')!
   );
 }
 
diff --git a/src/pages/MakeShiftPage/components/Panel.tsx b/src/pages/MakeShiftPage/components/Panel.tsx
index cc210950..d9d117ef 100644
--- a/src/pages/MakeShiftPage/components/Panel.tsx
+++ b/src/pages/MakeShiftPage/components/Panel.tsx
@@ -1,24 +1,27 @@
 import { event, sendEvent } from 'analytics';
 import useEditShift from '@hooks/shift/useEditShift';
 import { useState } from 'react';
-import { twMerge } from 'tailwind-merge';
 import { match } from 'ts-pattern';
 import { RestoreIcon, RestoreIconDisable } from '@assets/svg';
+import { twMerge } from 'tailwind-merge';
 
 function Panel() {
   const {
-    state: { readonly, faults, histories, shiftStatus },
+    state: { readonly, faults, histories, shiftStatus, shift },
     actions: { moveHistory, changeFocus },
   } = useEditShift();
   const [open, setOpen] = useState(false);
   const [currentTab, setCurrentTab] = useState('histories');
 
-  return !readonly && shiftStatus === 'success' ? (
+  return !readonly && shiftStatus === 'success' && shift ? (
     <div
       className={twMerge(
-        'absolute bottom-0 right-0 flex h-full w-[13.625rem] shrink-0 flex-col rounded-[1.25rem] bg-white shadow-banner',
-        open && 'h-[300%] max-h-[calc(50vh)]'
+        'flex flex-col rounded-[1.25rem] bg-white shadow-banner',
+        open && 'absolute bottom-[1.25rem] right-[1.25rem] h-[300%] max-h-[50vh]'
       )}
+      style={{
+        width: `${(shift.wardShiftTypes.length + 1) * 2 + 1.25}rem`,
+      }}
     >
       <div className="flex h-[2.5rem] w-full border-b-[.0313rem] border-sub-4 font-apple text-base font-medium">
         <div
diff --git a/src/pages/MakeShiftPage/components/RequestLayer.tsx b/src/pages/MakeShiftPage/components/RequestLayer.tsx
index 252a34f1..4642e4fc 100644
--- a/src/pages/MakeShiftPage/components/RequestLayer.tsx
+++ b/src/pages/MakeShiftPage/components/RequestLayer.tsx
@@ -24,10 +24,7 @@ function RequestLayer({ isAccept, request, showCheck, showSlash }: Props) {
           >
             <RequestSlashIcon className="absolute right-0 top-[-0.85rem] h-[.75rem] w-[.75rem]" />
             <div className="invisible relative top-[-1.3125rem] z-[1] flex justify-center group-hover:visible">
-              <ChatIcon
-                className="absolute h-[1.25rem] w-[1.0625rem]"
-                fill={request.backgroundColor}
-              />
+              <ChatIcon className="absolute h-[1.25rem] w-[1.0625rem]" fill={request.color} />
               <p className="absolute font-poppins text-[.6rem] text-white">{request.shortName}</p>
             </div>
           </div>
diff --git a/src/pages/MakeShiftPage/components/ShiftCalendar.tsx b/src/pages/MakeShiftPage/components/ShiftCalendar.tsx
index 13107318..f3dabb0e 100644
--- a/src/pages/MakeShiftPage/components/ShiftCalendar.tsx
+++ b/src/pages/MakeShiftPage/components/ShiftCalendar.tsx
@@ -161,16 +161,16 @@ export default function ShiftCalendar() {
             <div
               key={index}
               className="flex h-[1.5rem] w-[1.5rem] items-center justify-center rounded-[.375rem] p-2 font-poppins text-[1.25rem]"
-              style={{ backgroundColor: shiftType.backgroundColor, color: shiftType.textColor }}
+              style={{ backgroundColor: shiftType.color, color: 'white' }}
             >
               {shiftType.shortName}
             </div>
           ))}
           <div
-            className="flex h-[1.5rem] w-[1.5rem] items-center justify-center rounded-[.375rem] bg-red p-2 font-poppins text-[1.25rem] text-white"
+            className="flex h-[1.5rem] w-[1.5rem] items-center justify-center rounded-[.375rem] bg-red p-2 font-poppins text-[0.8rem] text-white"
             style={{
-              backgroundColor: shift.wardShiftTypes.find((x) => x.name === '오프')?.backgroundColor,
-              color: shift.wardShiftTypes.find((x) => x.name === '오프')?.textColor,
+              backgroundColor: shift.wardShiftTypes.find((x) => x.name === '오프')?.color,
+              color: 'white',
             }}
           >
             WO
diff --git a/src/pages/MakeShiftPage/components/editWard/CreateShiftModal.tsx b/src/pages/MakeShiftPage/components/editWard/CreateShiftModal.tsx
index 470b8ed7..6d8a1223 100644
--- a/src/pages/MakeShiftPage/components/editWard/CreateShiftModal.tsx
+++ b/src/pages/MakeShiftPage/components/editWard/CreateShiftModal.tsx
@@ -19,8 +19,7 @@ function CreateShiftModal({ open, shiftType, close, onSubmit, onDelete }: Props)
     name: '',
     startTime: '00:00',
     endTime: '00:00',
-    backgroundColor: '#FFFFFF',
-    textColor: '#000000',
+    color: '#6c3434',
     isOff: false,
     isDefault: false,
     shortName: '',
@@ -111,46 +110,21 @@ function CreateShiftModal({ open, shiftType, close, onSubmit, onDelete }: Props)
                 </div>
               </div>
             )}
-            <div className="flex w-full gap-12">
-              <div className="flex flex-col items-center">
-                <p className="mb-[.625rem] mt-[1.875rem] font-apple text-base text-sub-3">
-                  배경 색
-                </p>
-                <div className="flex flex-1 items-center gap-[4.375rem]">
-                  <label
-                    htmlFor={`pick_background_color`}
-                    className={`h-[3.4375rem] w-[3.4375rem] rounded-full border-[.0625rem] border-sub-4.5`}
-                    style={{ backgroundColor: writeShift.backgroundColor }}
-                  />
-                  <input
-                    id={`pick_background_color`}
-                    className="absolute h-[3.4375rem] w-[3.4375rem] opacity-0"
-                    type="color"
-                    value={writeShift.backgroundColor}
-                    onChange={(e) =>
-                      setWriteShift({ ...writeShift, backgroundColor: e.target.value })
-                    }
-                  />
-                </div>
-              </div>
-              <div className="flex flex-col items-center">
-                <p className="mb-[.625rem] mt-[1.875rem] font-apple text-base text-sub-3">
-                  글자 색
-                </p>
-                <div className="flex flex-1 items-center gap-[4.375rem]">
-                  <label
-                    htmlFor={`pick_text_color`}
-                    className={`h-[3.4375rem] w-[3.4375rem] rounded-full border-[.0625rem] border-sub-4.5`}
-                    style={{ backgroundColor: writeShift.textColor }}
-                  />
-                  <input
-                    id={`pick_text_color`}
-                    className="absolute h-[3.4375rem] w-[3.4375rem] opacity-0"
-                    type="color"
-                    value={writeShift.textColor}
-                    onChange={(e) => setWriteShift({ ...writeShift, textColor: e.target.value })}
-                  />
-                </div>
+            <div className="flex flex-col items-start">
+              <p className="mb-[.625rem] mt-[1.875rem] font-apple text-base text-sub-3">배경 색</p>
+              <div className="flex flex-1 items-center gap-[4.375rem]">
+                <label
+                  htmlFor={`pick_background_color`}
+                  className={`h-[3.4375rem] w-[3.4375rem] rounded-full border-[.0625rem] border-sub-4.5`}
+                  style={{ backgroundColor: writeShift.color }}
+                />
+                <input
+                  id={`pick_background_color`}
+                  className="absolute h-[3.4375rem] w-[3.4375rem] opacity-0"
+                  type="color"
+                  value={writeShift.color}
+                  onChange={(e) => setWriteShift({ ...writeShift, color: e.target.value })}
+                />
               </div>
             </div>
             <div className="flex">
diff --git a/src/pages/MakeShiftPage/components/editWard/SetShiftType.tsx b/src/pages/MakeShiftPage/components/editWard/SetShiftType.tsx
index d36669f6..85753194 100644
--- a/src/pages/MakeShiftPage/components/editWard/SetShiftType.tsx
+++ b/src/pages/MakeShiftPage/components/editWard/SetShiftType.tsx
@@ -34,8 +34,7 @@ function SetShiftType() {
         <p className="flex-[2]">근무 명</p>
         <p className="flex-1">약자</p>
         <p className="flex-[3]">근무 시간</p>
-        <p className="flex-1">배경색</p>
-        <p className="flex-1">글자색</p>
+        <p className="flex-1">색상</p>
         <p className="flex-1">유형</p>
         <p className="flex-1">수정</p>
       </div>
@@ -94,14 +93,7 @@ function SetShiftType() {
             <label
               htmlFor={`color_picker_${index}`}
               className={`h-[2rem] w-[2rem] rounded-[.4375rem] border-[.0625rem] border-sub-4`}
-              style={{ backgroundColor: shiftType.backgroundColor }}
-            />
-          </div>
-          <div className="relative flex flex-1 items-center justify-center font-apple text-[2.25rem] font-semibold text-sub-2.5">
-            <label
-              htmlFor={`color_picker_${index}`}
-              className={`h-[2rem] w-[2rem] rounded-[.4375rem] border-[.0625rem] border-sub-4`}
-              style={{ backgroundColor: shiftType.textColor }}
+              style={{ backgroundColor: shiftType.color }}
             />
           </div>
           <div className="flex flex-1 justify-center">
diff --git a/src/pages/MakeShiftPage/index.tsx b/src/pages/MakeShiftPage/index.tsx
index e392a688..af9368fd 100644
--- a/src/pages/MakeShiftPage/index.tsx
+++ b/src/pages/MakeShiftPage/index.tsx
@@ -6,12 +6,19 @@ import useEditShift from '@hooks/shift/useEditShift';
 import NurseEditModal from './components/NurseEditModal';
 
 const MakeShiftPage = () => {
-  useEditShift(true);
+  const {
+    state: { shift },
+  } = useEditShift(true);
   return (
     <div className="mx-auto flex h-screen w-fit min-w-[104.625rem] flex-col">
       <Toolbar />
       <ShiftCalendar />
-      <div className="relative mt-[1.25rem] flex w-full justify-between bg-[#FDFCFE] pl-[15.9375rem]">
+      <div
+        className="sticky bottom-0 z-20 flex items-stretch gap-[1.25rem] bg-main-bg py-[1.25rem] pl-[15.9375rem]"
+        style={{
+          height: shift ? `${shift.wardShiftTypes.length * 2.5 + 2.5}rem` : '0',
+        }}
+      >
         <CountDutyByDay />
         <Panel />
       </div>
diff --git a/src/pages/RegisterPage/RegisterWard.tsx b/src/pages/RegisterPage/RegisterWard.tsx
index aa9cf928..c7b5f5c3 100644
--- a/src/pages/RegisterPage/RegisterWard.tsx
+++ b/src/pages/RegisterPage/RegisterWard.tsx
@@ -40,8 +40,7 @@ function RegisterWard() {
       shortName: 'D',
       startTime: '07:00',
       endTime: '15:00',
-      backgroundColor: '#4DC2AD',
-      textColor: '#FFFFFF',
+      color: '#4DC2AD',
       isDefault: true,
       isOff: false,
     },
@@ -50,8 +49,7 @@ function RegisterWard() {
       shortName: 'E',
       startTime: '15:00',
       endTime: '23:00',
-      backgroundColor: '#FF8BA5',
-      textColor: '#FFFFFF',
+      color: '#FF8BA5',
       isDefault: true,
       isOff: false,
     },
@@ -60,8 +58,7 @@ function RegisterWard() {
       shortName: 'N',
       startTime: '23:00',
       endTime: '07:00',
-      backgroundColor: '#3580FF',
-      textColor: '#FFFFFF',
+      color: '#3580FF',
       isDefault: true,
       isOff: false,
     },
@@ -70,8 +67,7 @@ function RegisterWard() {
       shortName: 'O',
       startTime: '',
       endTime: '',
-      backgroundColor: '#465B7A',
-      textColor: '#FFFFFF',
+      color: '#465B7A',
       isDefault: true,
       isOff: true,
     },
@@ -98,6 +94,17 @@ function RegisterWard() {
 
   const navigate = useNavigate();
 
+  const appendClipboardTextToNurse = async (index: number) => {
+    const nurses = (await navigator.clipboard.readText())
+      .split('\n')
+      .map((x) => x.replace(/\r/g, ''));
+    setShiftTeams(
+      produce(shiftTeams, (draft) => {
+        draft[index] = draft[index].concat(nurses);
+      })
+    );
+  };
+
   useEffect(() => {
     if (accountMe?.status !== 'WARD_SELECT_PENDING') navigate(ROUTE.REGISTER);
   }, [accountMe]);
@@ -179,8 +186,7 @@ function RegisterWard() {
               <p className="flex-[2]">근무 명</p>
               <p className="flex-1">약자</p>
               <p className="flex-[3]">근무 시간</p>
-              <p className="flex-1">배경색</p>
-              <p className="flex-1">글자색</p>
+              <p className="flex-1">색상</p>
               <p className="flex-1">유형</p>
               <p className="flex-1">수정</p>
             </div>
@@ -239,41 +245,22 @@ function RegisterWard() {
                     </>
                   )}
                 </div>
+
                 <div className="relative flex flex-1  items-center justify-center font-apple text-[2.25rem] font-semibold text-sub-2.5">
                   <label
-                    htmlFor={`pick_background_color_${index}`}
-                    className={`h-[2rem] w-[2rem] rounded-[.4375rem] border-[.0625rem] border-sub-4`}
-                    style={{ backgroundColor: shiftType.backgroundColor }}
-                  />
-                  <input
-                    id={`pick_background_color_${index}`}
-                    className="absolute h-[2rem] w-[2rem] cursor-pointer opacity-0"
-                    type="color"
-                    value={shiftType.backgroundColor}
-                    onChange={(e) => {
-                      setWardShiftTypes(
-                        produce(wardShiftTypes, (draft) => {
-                          draft[index].backgroundColor = e.target.value;
-                        })
-                      );
-                    }}
-                  />
-                </div>
-                <div className="relative flex flex-1  items-center justify-center font-apple text-[2.25rem] font-semibold text-sub-2.5">
-                  <label
-                    htmlFor={`pick_text_color_${index}`}
+                    htmlFor={`pick_color_${index}`}
                     className={`h-[2rem] w-[2rem] rounded-[.4375rem] border-[.0625rem] border-sub-4`}
-                    style={{ backgroundColor: shiftType.textColor }}
+                    style={{ backgroundColor: shiftType.color }}
                   />
                   <input
-                    id={`pick_text_color_${index}`}
+                    id={`pick_color_${index}`}
                     className="absolute h-[2rem] w-[2rem] cursor-pointer opacity-0"
                     type="color"
-                    value={shiftType.textColor}
+                    value={shiftType.color}
                     onChange={(e) => {
                       setWardShiftTypes(
                         produce(wardShiftTypes, (draft) => {
-                          draft[index].textColor = e.target.value;
+                          draft[index].color = e.target.value;
                         })
                       );
                     }}
@@ -297,7 +284,7 @@ function RegisterWard() {
                   <PenIcon
                     className="h-[2.25rem] w-[2.25rem] cursor-pointer"
                     onClick={() => {
-                      setTempShiftType({ ...shiftType, wardShiftTypeId: index });
+                      setTempShiftType({ ...shiftType, wardShiftTypeId: index, isCounted: true });
                       setOpenModal(true);
                     }}
                   />
@@ -377,6 +364,11 @@ function RegisterWard() {
                     placeholder="이름 추가"
                     className="w-[70%] focus:outline-none"
                     onKeyDown={(e) => {
+                      if ((e.ctrlKey || e.metaKey) && (e.key === 'v' || e.key === 'V')) {
+                        e.preventDefault();
+                        appendClipboardTextToNurse(index);
+                        return;
+                      }
                       if (e.nativeEvent.isComposing) return;
                       if (e.currentTarget.value === '') return;
                       if (e.key === 'Enter') {
diff --git a/src/types/ward.ts b/src/types/ward.ts
index 92899705..ee85c716 100644
--- a/src/types/ward.ts
+++ b/src/types/ward.ts
@@ -39,14 +39,14 @@ type WardShiftType = {
   startTime: string;
   /** 근무 종료 시간 @example 15:00 */
   endTime: string;
-  /** 근무 배경 색상 */
-  backgroundColor: string;
-  /** 근무 글자 색상 */
-  textColor: string;
+  /** 근무 색상 */
+  color: string;
   /** 기본 값 여부 (D,E,N,O 인지) */
   isDefault: boolean;
   /** 휴가 여부 */
   isOff: boolean;
+  /** 합계에 포함할 것인지 */
+  isCounted: boolean;
 };
 
 type ShiftNurse = {