Feat: UI 설정 편집 기능 개발 (#DUT-575) (#65)

* Feat: 멘토링 피드백 반영 * Feat: UI 설정 편집 기능 개발
gom-3 · Oct 16, 2023 · 801ac13 · 801ac13
1 parent 03e20ae
commit 801ac13
Show file tree

Hide file tree

Showing 19 changed files with 344 additions and 120 deletions.
diff --git a/src/assets/svg/ToggleOffIcon.tsx b/src/assets/svg/ToggleOffIcon.tsx
diff --git a/src/assets/svg/ToggleOnIcon.tsx b/src/assets/svg/ToggleOnIcon.tsx
diff --git a/src/assets/svg/index.ts b/src/assets/svg/index.ts
@@ -58,8 +58,6 @@ 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';
 export { default as UncheckedIcon } from './UncheckedIcon';
 export { default as UncheckedIcon2 } from './UncheckedIcon2';
 export { default as UnlinkedIcon } from './UnlinkedIcon';

diff --git a/src/components/ShiftBadge/index.tsx b/src/components/ShiftBadge/index.tsx
@@ -1,3 +1,4 @@
+import useUIConfig from '@hooks/useUIConfig';
 import { Ref } from 'react';
 import { twMerge } from 'tailwind-merge';
 
@@ -9,6 +10,10 @@ interface Props
 }
 
 function ShiftBadge({ shiftType, className, forwardRef, isOnlyRequest, ...props }: Props) {
+  const {
+    state: { shiftTypeColorStyle },
+  } = useUIConfig();
+
   return (
     <div
       className={twMerge(
@@ -17,9 +22,17 @@ function ShiftBadge({ shiftType, className, forwardRef, isOnlyRequest, ...props
         className
       )}
       ref={forwardRef}
-      style={{
-        backgroundColor: shiftType ? shiftType.color : '#D6D6DE',
-      }}
+      style={
+        shiftTypeColorStyle === 'background'
+          ? {
+              backgroundColor: shiftType ? shiftType.color : '#D6D6DE',
+            }
+          : {
+              border: '.0625rem solid #E7E7EF',
+              backgroundColor: 'white',
+              color: shiftType ? shiftType.color : 'black',
+            }
+      }
       {...props}
     >
       {shiftType ? shiftType.shortName : '-'}

diff --git a/src/components/Toggle/index.tsx b/src/components/Toggle/index.tsx
@@ -0,0 +1,27 @@
+interface ToggleProps {
+  isOn: boolean;
+  setIsOn: (isOn: boolean) => void;
+}
+
+const Toggle = ({ isOn, setIsOn }: ToggleProps) => {
+  const handleToggle = () => {
+    setIsOn(!isOn);
+  };
+
+  return (
+    <div
+      onClick={handleToggle}
+      className={`relative h-[1rem] w-[1.875rem] cursor-pointer rounded-[1rem] transition-[0.8s] ${
+        isOn ? 'bg-main-1' : 'bg-sub-4'
+      }`}
+    >
+      <div
+        className={`absolute top-0 h-[1rem] w-[1rem] rounded-[1rem] border-[.0625rem] bg-white transition-[0.8s] ${
+          isOn ? 'left-[100%] translate-x-[-100%] border-main-1' : 'left-0 border-sub-4'
+        }`}
+      />
+    </div>
+  );
+};
+
+export default Toggle;
diff --git a/src/hooks/shift/useEditShift/index.ts b/src/hooks/shift/useEditShift/index.ts
@@ -107,6 +107,7 @@ const useEditShift = (activeEffect = false) => {
         if (data === null) return;
 
         if (
+          !foldedLevels ||
           !oldCurrentShiftTeamId ||
           (oldCurrentShiftTeamId && oldCurrentShiftTeamId !== currentShiftTeam?.shiftTeamId)
         ) {

diff --git a/src/hooks/useUIConfig/index.ts b/src/hooks/useUIConfig/index.ts
@@ -0,0 +1,30 @@
+import { shallow } from 'zustand/shallow';
+import { useUIConfigStore } from './store';
+
+const useUIConfig = () => {
+  const [separateWeekendColor, shiftTypeColorStyle, setState] = useUIConfigStore(
+    (state) => [state.separateWeekendColor, state.shiftTypeColorStyle, state.setState],
+    shallow
+  );
+
+  const handleChangeSeparateWeekendColor = (value: boolean) => {
+    setState('separateWeekendColor', value);
+  };
+
+  const handleShiftTypeColorStyle = (value: typeof shiftTypeColorStyle) => {
+    setState('shiftTypeColorStyle', value);
+  };
+
+  return {
+    state: {
+      separateWeekendColor,
+      shiftTypeColorStyle,
+    },
+    actions: {
+      handleChangeSeparateWeekendColor,
+      handleShiftTypeColorStyle,
+    },
+  };
+};
+
+export default useUIConfig;
diff --git a/src/hooks/useUIConfig/store.ts b/src/hooks/useUIConfig/store.ts
@@ -0,0 +1,43 @@
+import { create } from 'zustand';
+import { devtools, persist } from 'zustand/middleware';
+import { produce } from 'immer';
+
+interface State {
+  separateWeekendColor: boolean;
+  shiftTypeColorStyle: 'background' | 'text';
+}
+
+interface Store extends State {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  setState: (key: keyof State, value: any) => void;
+  initState: () => void;
+}
+
+const initialState: State = {
+  separateWeekendColor: false,
+  shiftTypeColorStyle: 'background',
+};
+
+export const useUIConfigStore = create<Store>()(
+  devtools(
+    persist(
+      (set, get) => ({
+        ...initialState,
+        setState: (state, value) =>
+          set(
+            produce(get(), (draft) => {
+              draft[state] = value as never;
+            })
+          ),
+        initState: () => set(initialState),
+      }),
+      {
+        name: 'useUIConfigStore',
+        partialize: ({ separateWeekendColor, shiftTypeColorStyle }: Store) => ({
+          separateWeekendColor,
+          shiftTypeColorStyle,
+        }),
+      }
+    )
+  )
+);
diff --git a/src/libs/api/shiftType.ts b/src/libs/api/shiftType.ts
@@ -5,7 +5,7 @@ const getShiftTypes = async (wardId: number) =>
 
 export type CreateShiftTypeDTO = Pick<
   WardShiftType,
-  'name' | 'shortName' | 'color' | 'startTime' | 'endTime' | 'isOff' | 'isDefault'
+  'name' | 'shortName' | 'color' | 'startTime' | 'endTime' | 'isOff' | 'isDefault' | 'isCounted'
 >;
 const createShiftType = async (wardId: number, createShiftTypeDTO: CreateShiftTypeDTO) =>
   (await axiosInstance.post<WardShiftType>(`/wards/${wardId}/shift-types`, createShiftTypeDTO))

diff --git a/src/main.tsx b/src/main.tsx
@@ -8,7 +8,15 @@ import { Toaster } from 'react-hot-toast';
 import App from 'App';
 import './index.css';
 
-const queryClient = new QueryClient();
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+      refetchOnMount: 'always',
+      staleTime: 1000 * 10,
+    },
+  },
+});
 
 const container = document.getElementById('root') as HTMLElement;
 const element = (

diff --git a/src/pages/MakeShiftPage/components/CountDutyByDay.tsx b/src/pages/MakeShiftPage/components/CountDutyByDay.tsx
@@ -1,49 +1,59 @@
 import useEditShift from '@hooks/shift/useEditShift';
+import useUIConfig from '@hooks/useUIConfig';
 
 function CountDutyByDay() {
   const {
     state: { focus, shift },
   } = useEditShift();
+  const {
+    state: { shiftTypeColorStyle },
+  } = useUIConfig();
 
   return (
     shift && (
       <div className="rounded-[1.25rem] shadow-[0rem_-0.25rem_2.125rem_0rem_#EDE9F5]">
-        {shift.wardShiftTypes.map((wardShiftType, index) => (
-          <div
-            key={index}
-            className="flex h-[2.5rem] items-center justify-center gap-[1.25rem] border-b-[.0625rem] border-[#E0E0E0] last:border-none"
-          >
+        {shift.wardShiftTypes
+          .filter((x) => x.isCounted)
+          .map((wardShiftType, index) => (
             <div
-              className={`flex h-full w-[3.125rem] items-center justify-center font-poppins text-[1.5rem] 
+              key={index}
+              className="flex h-[2.5rem] items-center justify-center gap-[1.25rem] border-b-[.0625rem] border-[#E0E0E0] last:border-none"
+            >
+              <div
+                className={`flex h-full w-[3.125rem] items-center justify-center font-poppins text-[1.5rem] 
             ${index === 0 && 'rounded-tl-[1.25rem]'} 
-            ${index === shift.wardShiftTypes.length - 1 && 'rounded-bl-[1.25rem]'}
+            ${
+              index === shift.wardShiftTypes.filter((x) => x.isCounted).length - 1 &&
+              'rounded-bl-[1.25rem]'
+            }
             `}
-              style={{
-                backgroundColor: wardShiftType.color,
-                color: 'white',
-              }}
-            >
-              {wardShiftType.shortName}
-            </div>
-            <div className="flex h-full px-[1rem] text-center">
-              {shift.days.map((_date, i) => (
-                <p
-                  key={i}
-                  className={`flex w-[2.25rem] flex-1 items-center justify-center font-poppins text-[1.25rem] text-sub-2 ${
-                    focus?.day === i && 'bg-main-4'
-                  }`}
-                >
-                  {
-                    shift.divisionShiftNurses
-                      .flatMap((rows) => rows)
-                      .filter((row) => row.wardShiftList[i] === wardShiftType.wardShiftTypeId)
-                      .length
-                  }
-                </p>
-              ))}
+                style={
+                  shiftTypeColorStyle === 'background'
+                    ? { backgroundColor: wardShiftType.color, color: 'white' }
+                    : { color: wardShiftType.color, backgroundColor: 'white' }
+                }
+              >
+                {wardShiftType.shortName}
+              </div>
+              <div className="flex h-full px-[1rem] text-center">
+                {shift.days.map((_date, i) => (
+                  <p
+                    key={i}
+                    className={`flex w-[2.25rem] flex-1 items-center justify-center font-poppins text-[1.25rem] text-sub-2 ${
+                      focus?.day === i && 'bg-main-4'
+                    }`}
+                  >
+                    {
+                      shift.divisionShiftNurses
+                        .flatMap((rows) => rows)
+                        .filter((row) => row.wardShiftList[i] === wardShiftType.wardShiftTypeId)
+                        .length
+                    }
+                  </p>
+                ))}
+              </div>
             </div>
-          </div>
-        ))}
+          ))}
       </div>
     )
   );

diff --git a/src/pages/MakeShiftPage/components/Panel.tsx b/src/pages/MakeShiftPage/components/Panel.tsx
@@ -20,7 +20,7 @@ function Panel() {
         open && 'absolute bottom-[1.25rem] right-[1.25rem] h-[300%] max-h-[50vh]'
       )}
       style={{
-        width: `${(shift.wardShiftTypes.length + 1) * 2 + 1.25}rem`,
+        width: `${(shift.wardShiftTypes.filter((x) => x.isCounted).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">