Feat: 근무표 편집 모드 개발 #DUT-472

src/assets/svg/ShareIcon.tsx

@@ -0,0 +1,9 @@
+import type { SVGProps } from 'react';
+const SvgShareIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" {...props}>
+    <g stroke="#fff" strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5}>
+      <path d="M8 9H7a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2h-1M12 14V3M9 6l3-3 3 3" />
+    </g>
+  </svg>
+);
+export default SvgShareIcon;

src/assets/svg/index.ts

@@ -23,9 +23,9 @@ export { default as InjectorIconSelected } from './InjectorIconSelected';
 export { default as KakaoIcon } from './KakaoIcon';
 export { default as LinkedIcon } from './LinkedIcon';
 export { default as Logo } from './Logo';
+export { default as LogoGray } from './LogoGray';
 export { default as LogoSymbolFill } from './LogoSymbolFill';
 export { default as LogoWithSymbol } from './LogoWithSymbol';
-export { default as LogoGray } from './LogoGray';
 export { default as MenuIcon } from './MenuIcon';
 export { default as MoreIcon } from './MoreIcon';
 export { default as NextIcon2 } from './NextIcon2';
@@ -52,6 +52,7 @@ export { default as SavingIcon } from './SavingIcon';
 export { default as SelectboxArrowIcon } from './SelectboxArrowIcon';
 export { default as SettingIcon } from './SettingIcon';
 export { default as SettingIconSelected } from './SettingIconSelected';
+export { default as ShareIcon } from './ShareIcon';
 export { default as SixDotsIcon } from './SixDotsIcon';
 export { default as ToggleOffIcon } from './ToggleOffIcon';
 export { default as ToggleOnIcon } from './ToggleOnIcon';

src/components/NavigationBar/index.tsx

@@ -24,7 +24,7 @@ const NavigationBar = ({ isFold, setIsFold }: Props) => {
         className={`z-10 ${canHover && 'group-hover:translate-x-0'} ${
           !isFold ? 'sticky' : 'fixed'
         } top-0 duration-500 ease-out ${
-          !isFold ? '' : 'translate-x-[-7.5rem]'
+          !isFold ? '' : 'translate-x-[-8rem]'
         } left-0 flex h-screen w-[10.125rem] flex-col items-center border-r border-sub-4 bg-white font-apple text-base text-sub-3`}
       >
         <div

src/hooks/useEditShift/index.ts

@@ -37,6 +37,7 @@ const useEditShift = (activeEffect = false) => {
     faults,
     checkFaultOptions,
     wardShiftTypeMap,
+    readonly,
     showLayer,
     setState,
   ] = useEditShiftStore(
@@ -51,6 +52,7 @@ const useEditShift = (activeEffect = false) => {
       state.faults,
       state.checkFaultOptions,
       state.wardShiftTypeMap,
+      state.readonly,
       state.showLayer,
       state.setState,
     ],
@@ -438,6 +440,25 @@ const useEditShift = (activeEffect = false) => {
     [shift, focus, editHistory]
   );
 
+  const handleToggleEditMode = useCallback(() => {
+    if (readonly) {
+      setState('readonly', false);
+    } else {
+      setState('readonly', true);
+      setState('focus', null);
+      shift &&
+        setState(
+          'foldedLevels',
+          shift.divisionShiftNurses.map(() => false)
+        );
+    }
+  }, [readonly, shift]);
+
+  const handleCreateNextMonthShift = useCallback(() => {
+    setState('month', new Date().getMonth() + 2);
+    handleToggleEditMode();
+  }, []);
+
   useEffect(() => {
     if (activeEffect && wardConstraint)
       setState('checkFaultOptions', updateCheckFaultOption(wardConstraint));
@@ -476,11 +497,14 @@ const useEditShift = (activeEffect = false) => {
       checkFaultOptions,
       wardShiftTypeMap,
       wardConstraint,
+      readonly,
       showLayer,
       currentShiftTeam,
       shiftTeams,
     },
     actions: {
+      toggleEditMode: handleToggleEditMode,
+      createNextMonthShift: handleCreateNextMonthShift,
       foldLevel,
       changeMonth,
       changeFocus: (focus: Focus | null) => setState('focus', focus),

src/hooks/useEditShift/store.ts

@@ -13,6 +13,7 @@ interface State {
   faults: Faults;
   checkFaultOptions: CheckFaultOptions | null;
   wardShiftTypeMap: Map<number, WardShiftType> | null;
+  readonly: boolean;
   showLayer: {
     fault: boolean;
     check: boolean;
@@ -40,6 +41,7 @@ const useEditShiftStore = create<Store>()(
         faults: new Map(),
         checkFaultOptions: null,
         wardShiftTypeMap: null,
+        readonly: true,
         showLayer: {
           check: true,
           fault: true,
@@ -48,7 +50,7 @@ const useEditShiftStore = create<Store>()(
         setState: (key, value) =>
           set(
             produce(get(), (draft) => {
-              draft[key] = value;
+              draft[key] = value as never;
             })
           ),
       }),
@@ -79,10 +81,18 @@ const useEditShiftStore = create<Store>()(
           },
           removeItem: (name) => localStorage.removeItem(name),
         },
-        partialize: ({ year, month, editHistory, showLayer, currentShiftTeam }: Store) => ({
+        partialize: ({
           year,
           month,
           editHistory,
+          readonly,
+          showLayer,
+          currentShiftTeam,
+        }: Store) => ({
+          year,
+          month,
+          editHistory,
+          readonly,
           showLayer,
           currentShiftTeam,
         }),

src/pages/MakeShiftPage/components/Panel.tsx

@@ -7,13 +7,13 @@ import { RestoreIcon, RestoreIconDisable } from '@assets/svg';
 
 function Panel() {
   const {
-    state: { faults, histories },
+    state: { readonly, faults, histories, shiftStatus },
     actions: { moveHistory, changeFocus },
   } = useEditShift();
   const [open, setOpen] = useState(false);
   const [currentTab, setCurrentTab] = useState('histories');
 
-  return (
+  return !readonly && shiftStatus === 'success' ? (
     <div
       className={twMerge(
         'mb-[3.125rem] mt-[1.25rem] flex w-[13.625rem] shrink-0 flex-col rounded-[1.25rem] bg-white shadow-shadow-1',
@@ -114,7 +114,7 @@ function Panel() {
         {open ? '닫기' : '펼치기'}
       </div>
     </div>
-  );
+  ) : null;
 }
 
 export default Panel;