Release 0.7.0: 로딩 기능 추가, 회원가입 절차 수정 (#78)

* Feat: 모바일 병동 입장 UI 개발 (DUT-528) (#71)

* Fix: 랜딩페이지 이미지, height 수정

* Feat: 신청근무 UI 리펙토링, 개발

* Feat: 웹 신청근무 수락/거절 기능 개발

* Refactor: 이벤트 최적화, 최신 기능 이벤트 반영

* Release 0.4.0: 신청근무 수락, 거절 추가 / 이벤트 최적화

* Feat: 웹 성능 최적화 (#73)

* Feat: Code splitting, dynamic import (React.lazy)

* Feat: Font Opt

* Feat: png to webp

* Release 0.5.0: 웹 성능 최적화

* Feat: 간호사 연동 관리 기능 개발 (#75)

* Feat: 랜딩 수정

* Feat: 로딩 기능 추가, 회원가입 절차 수정 등 (#DUT-648 / #77)

* Release 0.7.0: 로딩 기능 추가, 회원가입 절차 수정

package.json

@@ -1,7 +1,7 @@
 {
   "name": "dutying-web",
   "private": true,
-  "version": "0.6.0",
+  "version": "0.7.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -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 () => {