build: 프로젝트 초기 설정

- bcsdlab utils 추가 - 기본 레이아웃 추가 - 인증 레이아웃 추가 - 관련 훅, 컴포넌트, 타입 추가
BCSDLab · Jun 9, 2024 · d3b8a4e · d3b8a4e
1 parent cbc5c84
commit d3b8a4e
Show file tree

Hide file tree

Showing 119 changed files with 7,052 additions and 10 deletions.
diff --git a/.pnp.cjs b/.pnp.cjs
diff --git a/index.html b/index.html
@@ -13,6 +13,7 @@
     <link rel="icon" type="image/png" sizes="16x16" href="https://static.koreatech.in/assets/favicons/favicon-16x16.png">
     <link rel="apple-touch-icon" href="https://static.koreatech.in/assets/favicons/favicon-32x32.png" />
     <link rel="shortcut icon" href="https://static.koreatech.in/assets/favicons/favicon-32x32.png">
+    <link rel="manifest" href="/public/manifest.json" />
     <title>코인 - 생협</title>
   </head>
   <body>

diff --git a/package.json b/package.json
@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@bcsdlab/koin": "^0.0.15",
+    "@bcsdlab/utils": "^0.0.15",
     "@hookform/resolvers": "^3.1.0",
     "@tanstack/react-query": "^5.40.0",
     "@testing-library/jest-dom": "^6.4.5",

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/logo32.png b/public/logo32.png
diff --git a/public/manifest.json b/public/manifest.json
@@ -0,0 +1,25 @@
+{
+  "short_name": "코인 생협",
+  "name": "코인 생협 기능 관리 어플리케이션",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo32.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo32.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/public/vite.svg b/public/vite.svg
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,10 +1,30 @@
-import ErrorIcon from 'assets/svg/error/error.svg?react';
+import { Suspense } from 'react';
+
+import AuthLayout from 'layout/AuthLayout';
+import DefaultLayout from 'layout/DefaultLayout';
+import CompleteChangePassword from 'page/Auth/FindPassword/CompleteChangePassword';
+import NewPassword from 'page/Auth/FindPassword/NewPassword';
+import FindPassword from 'page/Auth/FindPassword/SendAuthNumber';
+import Login from 'page/Auth/Login';
+import Signup from 'page/Auth/Signup';
+import Coop from 'page/Coop';
+
+import { Route } from 'react-router-dom';
 
 export default function App() {
   return (
-    <>
-      <h1>App</h1>
-      <ErrorIcon />
-    </>
+    <Suspense fallback={<div />}>
+      <Route path="/coop" element={<DefaultLayout />}>
+        <Route path="/coop" element={<Coop />} />
+      </Route>
+
+      <Route element={<AuthLayout />}>
+        <Route path="/login" element={<Login />} />
+        <Route path="/signup" element={<Signup />} />
+        <Route path="/find-password" element={<FindPassword />} />
+        <Route path="/new-password" element={<NewPassword />} />
+        <Route path="/complete-change-password" element={<CompleteChangePassword />} />
+      </Route>
+    </Suspense>
   );
 }
diff --git a/src/utils/styles/fonts.scss → src/assets/styles/fonts.scss b/src/utils/styles/fonts.scss → src/assets/styles/fonts.scss
diff --git a/src/utils/styles/mediaQuery.scss → src/assets/styles/mediaQuery.scss b/src/utils/styles/mediaQuery.scss → src/assets/styles/mediaQuery.scss
diff --git a/src/utils/styles/mixin.scss → src/assets/styles/mixin.scss b/src/utils/styles/mixin.scss → src/assets/styles/mixin.scss
diff --git a/src/component/Copyright/Copyright.module.scss b/src/component/Copyright/Copyright.module.scss
@@ -0,0 +1,17 @@
+@use "src/utils/styles/mediaQuery" as media;
+
+.copyright {
+  font-size: 12px;
+  text-align: center;
+  margin-bottom: 6vh;
+  font-weight: 400;
+  color: #252525;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+
+  @include media.media-breakpoint-down(mobile) {
+    margin-bottom: 3vh;
+  }
+}
diff --git a/src/component/Copyright/index.tsx b/src/component/Copyright/index.tsx
@@ -0,0 +1,16 @@
+import useMediaQuery from 'hooks/useMediaQuery';
+
+import styles from './Copyright.module.scss';
+
+export default function Copyright() {
+  const { isMobile } = useMediaQuery();
+  const year = new Date().getFullYear();
+
+  return (
+    <div className={styles.copyright}>
+      {isMobile
+        ? 'Copyright @ BCSD Lab All rights reserved.'
+        : `COPYRIGHT © ${year} BCSD LAB ALL RIGHTS RESERVED.`}
+    </div>
+  );
+}
diff --git a/src/component/Header/Header.module.scss b/src/component/Header/Header.module.scss
@@ -0,0 +1,80 @@
+/* stylelint-disable no-descending-specificity */
+/* stylelint-disable declaration-colon-newline-after */
+@use "src/utils/styles/mediaQuery" as media;
+
+.header {
+  height: 80px;
+  font-size: 12px;
+  font-weight: 700;
+  background: #175c8e;
+  color: #fff;
+  display: block;
+
+  @include media.media-breakpoint-down(mobile) {
+    height: 77px;
+    border-radius: 0 0 20px 20px;
+    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 34%);
+    position: sticky;
+    top: 0;
+    left: 0;
+    z-index: 20;
+    border-bottom: none;
+  }
+
+  &__content {
+    width: 1132px;
+    height: 100%;
+    margin: 0 auto;
+    display: flex;
+    align-items: center;
+
+    @include media.media-breakpoint-down(mobile) {
+      width: auto;
+    }
+  }
+}
+
+.add-menu-header {
+  position: relative;
+  background-color: #175c8e;
+  width: 100%;
+  height: 52px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &__prev-button {
+    position: absolute;
+    left: 16px;
+    width: 24px;
+    height: 25.944px;
+    flex-shrink: 0;
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 0;
+
+    svg path {
+      fill: white;
+    }
+  }
+
+  &__caption {
+    color: #fff;
+    text-align: center;
+    font-size: 20px;
+    font-weight: 500;
+  }
+}
+
+@keyframes slide-left-enter {
+  0% {
+    opacity: 0;
+    transform: translateX(-100%);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}