Feat: 로딩 기능 추가, 회원가입 절차 수정 등

package.json

@@ -20,6 +20,7 @@
     "@tanstack/react-query-devtools": "^4.32.0",
     "airbridge-web-sdk-loader": "^1.7.0",
     "axios": "^1.4.0",
+    "browser-image-compression": "^2.0.2",
     "exceljs": "^4.3.0",
     "history": "^5.3.0",
     "immer": "^10.0.2",
@@ -36,6 +37,7 @@
     "react-hook-form": "^7.46.2",
     "react-hot-toast": "^2.4.1",
     "react-loader-spinner": "^5.3.4",
+    "react-lottie": "^1.2.3",
     "react-router": "^6.14.2",
     "react-router-dom": "^6.14.2",
     "ts-pattern": "^5.0.4",
@@ -53,6 +55,7 @@
     "@types/react-beautiful-dnd": "^13.1.4",
     "@types/react-dom": "^18.2.7",
     "@types/react-helmet": "^6.1.7",
+    "@types/react-lottie": "^1.2.9",
     "@types/testing-library__jest-dom": "^5.14.8",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",

src/Loading.tsx

@@ -0,0 +1,28 @@
+import useLoading from '@hooks/ui/useLoading';
+import Lottie from 'react-lottie';
+import loadingLottie from './assets/animation/loading.json';
+
+const Loading = () => {
+  const { loading } = useLoading();
+
+  return (
+    loading && (
+      <div className="fixed z-[1005] flex h-screen w-screen items-center justify-center bg-[#0000006e] backdrop-blur-[1px]">
+        <Lottie
+          options={{
+            autoplay: true,
+            loop: true,
+            animationData: loadingLottie,
+            rendererSettings: {
+              preserveAspectRatio: 'xMidYMid slice',
+            },
+          }}
+          height={400}
+          width={400}
+        />
+      </div>
+    )
+  );
+};
+
+export default Loading;

src/assets/svg/CameraIcon.tsx

@@ -0,0 +1,20 @@
+import type { SVGProps } from 'react';
+const SvgCameraIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 19 19" {...props}>
+    <path
+      stroke={props.stroke || '#93939d'}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="M3.889 5.444h.778A1.556 1.556 0 0 0 6.222 3.89.778.778 0 0 1 7 3.11h4.667a.778.778 0 0 1 .777.778A1.556 1.556 0 0 0 14 5.444h.778A1.555 1.555 0 0 1 16.333 7v7a1.555 1.555 0 0 1-1.555 1.556H3.888A1.556 1.556 0 0 1 2.334 14V7A1.556 1.556 0 0 1 3.89 5.444Z"
+    />
+    <path
+      stroke={props.stroke || '#93939d'}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="M7 10.111a2.333 2.333 0 1 0 4.667 0 2.333 2.333 0 0 0-4.667 0Z"
+    />
+  </svg>
+);
+export default SvgCameraIcon;

src/assets/svg/RandomIcon.tsx

@@ -0,0 +1,13 @@
+import type { SVGProps } from 'react';
+const SvgRandomIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 15 15" {...props}>
+    <path
+      stroke="#93939D"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="M13.556 6.556A6.3 6.3 0 0 0 1.5 5m-.389-3.11V5h3.111M1.111 8.111a6.3 6.3 0 0 0 12.056 1.556m.389 3.111V9.667h-3.111"
+    />
+  </svg>
+);
+export default SvgRandomIcon;

src/assets/svg/index.ts

@@ -63,3 +63,5 @@ export { default as UncheckedIcon2 } from './UncheckedIcon2';
 export { default as UnlinkedIcon } from './UnlinkedIcon';
 export { default as XIcon } from './XIcon';
 export { default as SuccessCircleIcon } from './SuccessCircleIcon';
+export { default as RandomIcon } from './RandomIcon';
+export { default as CameraIcon } from './CameraIcon';

src/components/ShiftBadge/index.tsx

@@ -1,4 +1,4 @@
-import useUIConfig from '@hooks/useUIConfig';
+import useUIConfig from '@hooks/ui/useUIConfig';
 import { Ref } from 'react';
 import { twMerge } from 'tailwind-merge';
 

src/hooks/auth/useAuth/index.ts

@@ -8,6 +8,7 @@ import useInitStore from '@hooks/useInitStore';
 import useEditShiftStore from '@hooks/shift/useEditShift/store';
 import { useEffect } from 'react';
 import { events, sendEvent } from 'analytics';
+import useLoading from '@hooks/ui/useLoading';
 
 const useAuth = (activeEffect = false) => {
   const [
@@ -34,6 +35,7 @@ const useAuth = (activeEffect = false) => {
     ],
     shallow
   );
+  const { setLoading } = useLoading();
   const initStore = useInitStore();
   const { initState: initEditShiftStore } = useEditShiftStore();
   const navigate = useNavigate();
@@ -53,6 +55,7 @@ const useAuth = (activeEffect = false) => {
   };
 
   const demoTry = async () => {
+    setLoading(true);
     const data = await demoStart();
     setState('accessToken', data.accessToken);
     setState('accountId', data.accountResDto.accountId);
@@ -61,6 +64,7 @@ const useAuth = (activeEffect = false) => {
     setState('isAuth', true);
     setState('demoStartDate', new Date());
     navigate(ROUTE.MAKE);
+    setLoading(false);
   };
 
   const handleGetAccountMe = async () => {

src/hooks/auth/useRegister/index.ts

@@ -1,61 +1,66 @@
 import { useMutation, useQuery } from '@tanstack/react-query';
-import { CreateNurseDTO, createAccountNurse } from '@libs/api/nurse';
 import useAuth from '../useAuth';
-import { CreateWardDTO, addMeToWatingNurses, createWrad, deleteWatingNurses } from '@libs/api/ward';
-import { eidtAccountStatus, getAccountMeWaiting } from '@libs/api/account';
+import * as nurseApi from '@libs/api/nurse';
+import * as wardApi from '@libs/api/ward';
+import * as accountApi from '@libs/api/account';
 import { useNavigate } from 'react-router';
 import ROUTE from '@libs/constant/path';
+import useLoading from '@hooks/ui/useLoading';
 
 const useRegister = () => {
   const {
     state: { accountMe, accountId },
     actions: { handleGetAccountMe },
   } = useAuth();
+  const { setLoading } = useLoading();
   const navigate = useNavigate();
 
   const { mutate: changeAccountStatusMutate } = useMutation(
     ({ accountId, status }: { accountId: number; status: Account['status'] }) =>
-      eidtAccountStatus(accountId, status),
+      accountApi.eidtAccountStatus(accountId, status),
     {
       onSuccess: ({ status }) => {
         handleGetAccountMe();
         if (status === 'LINKED') navigate(ROUTE.MAKE);
       },
     }
   );
-
-  const { mutate: registerAccountNurseMutate } = useMutation(
-    ({ accountId, createNurseDTO }: { accountId: number; createNurseDTO: CreateNurseDTO }) =>
-      createAccountNurse(accountId, createNurseDTO),
+  const { mutate: createWardMutate } = useMutation(
+    (createWardDTO: wardApi.CreateWardDTO) => wardApi.createWrad(createWardDTO),
     {
+      onMutate: () => {
+        setLoading(true);
+      },
+      onSettled: () => {
+        setLoading(false);
+      },
       onSuccess: () => {
-        if (!accountId) return;
-        changeAccountStatusMutate({ accountId, status: 'WARD_SELECT_PENDING' });
+        accountMe &&
+          changeAccountStatusMutate({ accountId: accountMe.accountId, status: 'LINKED' });
       },
     }
   );
 
-  const { mutate: createWardMutate } = useMutation(
-    (createWardDTO: CreateWardDTO) => createWrad(createWardDTO),
+  const { mutate: enterWardMutate } = useMutation(
+    (wardId: number) => wardApi.addMeToWatingNurses(wardId),
     {
+      onMutate: () => {
+        setLoading(true);
+      },
+      onSettled: () => {
+        setLoading(false);
+      },
       onSuccess: () => {
-        accountMe &&
-          changeAccountStatusMutate({ accountId: accountMe.accountId, status: 'LINKED' });
+        if (!accountId) return;
+        changeAccountStatusMutate({ accountId, status: 'WARD_ENTRY_PENDING' });
+        navigate(ROUTE.REGISTER);
       },
     }
   );
 
-  const { mutate: enterWardMutate } = useMutation((wardId: number) => addMeToWatingNurses(wardId), {
-    onSuccess: () => {
-      if (!accountId) return;
-      changeAccountStatusMutate({ accountId, status: 'WARD_ENTRY_PENDING' });
-      navigate(ROUTE.REGISTER);
-    },
-  });
-
   const { mutate: cancelWaitingMutate } = useMutation(
     ({ wardId, nurseId }: { wardId: number; nurseId: number }) =>
-      deleteWatingNurses(wardId, nurseId),
+      wardApi.deleteWatingNurses(wardId, nurseId),
     {
       onSuccess: () => {
         if (!accountId) return;
@@ -65,15 +70,37 @@ const useRegister = () => {
     }
   );
 
-  const { data: accountWaitingWard } = useQuery(['accountWaitingWard'], getAccountMeWaiting, {
-    enabled: accountMe?.status === 'WARD_ENTRY_PENDING',
-  });
+  const { data: accountWaitingWard } = useQuery(
+    ['accountWaitingWard'],
+    accountApi.getAccountMeWaiting,
+    {
+      enabled: accountMe?.status === 'WARD_ENTRY_PENDING',
+    }
+  );
+
+  const registerAccountAndNurse = async (
+    createNurseDTO: nurseApi.CreateNurseDTO & { profileImage: string }
+  ) => {
+    if (!accountId || !accountMe) return;
+    setLoading(true);
+    if (accountMe.status === 'NURSE_INFO_PENDING') {
+      // 모바일에서 계정 초기 등록을 이미 마친 경우 계정 정보를 수정한다.
+      await accountApi.editAccount(accountId, {
+        name: createNurseDTO.name,
+        profileImgBase64: createNurseDTO.profileImage,
+      });
+    } else if (accountMe.status === 'INITIAL') {
+      await accountApi.initAccount(accountId, createNurseDTO.name, createNurseDTO.profileImage);
+    }
+    await nurseApi.createAccountNurse(accountId, createNurseDTO);
+    changeAccountStatusMutate({ accountId, status: 'WARD_SELECT_PENDING' });
+    setLoading(false);
+  };
 
   return {
     state: { accountMe, accountWaitingWard },
     actions: {
-      registerAccountNurse: (createNurseDTO: CreateNurseDTO) =>
-        accountId && registerAccountNurseMutate({ accountId, createNurseDTO }),
+      registerAccountAndNurse,
       createWrad: createWardMutate,
       enterWard: enterWardMutate,
       cancelWaiting: (wardId: number, nurseId: number) => cancelWaitingMutate({ wardId, nurseId }),