chore: migration

src/component/Header/MobilePanel/index.tsx

@@ -7,8 +7,8 @@ import useMediaQuery from 'hooks/useMediaQuery';
 import useSuspenseUser from 'hooks/useSuspenseUser';
 import { useLogout } from 'query/auth';
 import usePrevPathStore from 'store/path';
+import cn from 'utils/ts/className';
 
-import { cn } from '@bcsdlab/utils';
 import { createPortal } from 'react-dom';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
 

src/component/Header/PCPanel/index.tsx

@@ -3,8 +3,8 @@ import useMegaMenu from 'component/Header/hooks/useMegaMenu';
 import { CATEGORY_COOP, HeaderCategory } from 'constant/category';
 import { useLogout } from 'query/auth';
 import usePrevPathStore from 'store/path';
+import cn from 'utils/ts/className';
 
-import { cn } from '@bcsdlab/utils';
 import { Link, useNavigate } from 'react-router-dom';
 
 import styles from './PCPanel.module.scss';

src/page/Auth/FindPassword/NewPassword/index.tsx

@@ -8,8 +8,8 @@ import useBooleanState from 'hooks/useBooleanState';
 import { useRouteCheck } from 'page/Auth/FindPassword/hooks/useRouteCheck';
 import { useNewPassword } from 'query/auth';
 import useEmailAuthStore from 'store/useEmailAuth';
-
-import { cn, sha256 } from '@bcsdlab/utils';
+import cn from 'utils/ts/className';
+import sha256 from 'utils/ts/SHA-256';
 
 import styles from './NewPassword.module.scss';
 

src/page/Auth/FindPassword/SendAuthNumber/index.tsx

@@ -4,8 +4,8 @@ import KoinLogo from 'assets/svg/auth/koin-logo.svg?react';
 import ErrorIcon from 'assets/svg/error/auth-error.svg?react';
 import { useVerifyEmail, useSubmit } from 'query/auth';
 import useEmailAuthStore from 'store/useEmailAuth';
+import cn from 'utils/ts/className';
 
-import { cn } from '@bcsdlab/utils';
 import { Outlet } from 'react-router-dom';
 
 import styles from './SendAuthNumber.module.scss';

src/page/Auth/Login/index.tsx

@@ -9,8 +9,9 @@ import useMediaQuery from 'hooks/useMediaQuery';
 import { LoginParams } from 'model/auth';
 import { useLogin } from 'query/auth';
 import { useErrorMessageStore } from 'store/errorMessageStore';
+import cn from 'utils/ts/className';
+import sha256 from 'utils/ts/SHA-256';
 
-import { cn, sha256 } from '@bcsdlab/utils';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { FieldErrors, SubmitHandler, useForm } from 'react-hook-form';
 import { Link, useNavigate } from 'react-router-dom';

src/page/Coop/components/Calendar/index.tsx

@@ -1,6 +1,6 @@
 import { getDayOfWeek } from 'page/Coop/hook/useGetDayOfWeek';
+import cn from 'utils/ts/className';
 
-import { cn } from '@bcsdlab/utils';
 import dayjs from 'dayjs';
 
 import styles from './Calendar.module.scss';

src/page/Coop/components/MenuType/index.tsx

@@ -1,6 +1,5 @@
 import { Menus } from 'model/Coop';
-
-import { cn } from '@bcsdlab/utils';
+import cn from 'utils/ts/className';
 
 import styles from './MenuType.module.scss';
 

src/page/Coop/components/SoldoutModal/index.tsx

@@ -1,8 +1,8 @@
 import { useEffect } from 'react';
 
 import CustomButton from 'page/Auth/Signup/component/CustomButton';
+import cn from 'utils/ts/className';
 
-import { cn } from '@bcsdlab/utils';
 import { createPortal } from 'react-dom';
 
 import styles from './SoldoutModal.module.scss';

src/page/Error/PageNotFound/PageNotFound.module.scss

@@ -0,0 +1,52 @@
+.template {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-top: 220px;
+  padding-bottom: 120px;
+  flex-direction: column;
+}
+
+.error-icon {
+  width: 200px;
+  height: 200px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.content {
+  font-style: normal;
+  line-height: normal;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  &__title {
+    margin-top: 70px;
+    color: #175c8e;
+    text-align: center;
+    font-size: 36px;
+    font-weight: 700;
+  }
+
+  &__description {
+    margin-top: 20px;
+    color: #858585;
+    text-align: center;
+    font-size: 18px;
+    font-weight: 400;
+  }
+
+  &__button {
+    margin-top: 80px;
+    width: 368px;
+    height: 48px;
+    background-color: #175c8e;
+    color: white;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 500;
+    cursor: pointer;
+  }
+}

src/page/Error/PageNotFound/index.tsx

@@ -0,0 +1,32 @@
+import Error from 'assets/svg/error/page-not-found-error.svg?react';
+
+import { useNavigate } from 'react-router-dom';
+
+import styles from './PageNotFound.module.scss';
+
+export default function PageNotFound() {
+  const navigate = useNavigate();
+
+  return (
+    <div className={styles.template}>
+      <div className={styles['error-icon']}>
+        <Error />
+      </div>
+      <div className={styles.content}>
+        <div className={styles.content__title}>개발 중인 페이지입니다</div>
+        <div className={styles.content__description}>
+          죄송합니다. 현재 개발 중인 페이지입니다.
+          <br />
+          최대한 빠르게 오픈하도록 하겠습니다.
+        </div>
+        <button
+          type="button"
+          className={styles.content__button}
+          onClick={() => navigate('/owner')}
+        >
+          메인 화면 바로가기
+        </button>
+      </div>
+    </div>
+  );
+}

src/utils/ts/SHA-256.ts

@@ -0,0 +1,16 @@
+async function sha256(message: string) {
+  // encode as UTF-8
+  const msgBuffer = new TextEncoder().encode(message);
+
+  // hash the message
+  const hashBuffer = await crypto.subtle.digest('SHA-256', msgBuffer);
+
+  // convert ArrayBuffer to Array
+  const hashArray = Array.from(new Uint8Array(hashBuffer));
+
+  // convert bytes to hex string
+  const hashHex = hashArray.map((b) => b.toString(16).padStart(2, '0')).join('');
+  return hashHex;
+}
+
+export default sha256;

src/utils/ts/className.ts

@@ -0,0 +1,10 @@
+interface ClassName {
+  [key: string]: boolean | string;
+}
+
+const classNames = (className: ClassName) => Object.entries(className)
+  .filter(([, value]) => value)
+  .map(([key]) => key)
+  .join(' ');
+
+export default classNames;