feat: 공용 레이아웃 컴포넌트 추가 (#29)

* chore(ui): vite 의존성 제거 * feat(ui): svg 경로 import 를 위한 svg.d.ts 정의 * feat(ui): app 타입 상수 추가 * feat(ui): header 타입 상수 추가 * feat(ui): page 타입 상수 추가 * feat(ui): app, header, page 타입 정의 * feat(ui): 3가지 타입의 header 컴포넌트 추가 * feat(ui): header 컴포넌트에 들어갈 svg 아이콘 추가 * feat(ui): appType 과 pageType 을 관리하는 useHeader hook 추가 * feat(ui): headerType 과 headerTitle 을 계산하는 함수 추가 * design(ui): bottomNavBar 스타일 변경 * feat(ui): headerType 에 따라 다른 Header 컴포넌트 보여주는 기능 추가 * feat(common): layout 컴포넌트를 보호소앱과 봉사자앱에서 관리하도록 변경 * feat(common): router 에 id 를 추가하여 App 타입과 Page 타입 저장 * fix(common): packages/ui 의 path alias 가 빌드시에 적용 안되는 에러 수정 * refactor(ui): pageType 의 HEADER_TYPE 내용을 구조분해 할당으로 꺼내 사용하도록 수정
anifriends · Nov 3, 2023 · 03fb14b · 03fb14b
1 parent 7da9943
commit 03fb14b
Show file tree

Hide file tree

Showing 27 changed files with 641 additions and 61 deletions.
diff --git a/apps/shelter/src/components/layout/index.tsx b/apps/shelter/src/components/layout/index.tsx
@@ -0,0 +1,24 @@
+import { Container } from '@chakra-ui/react';
+import { Outlet } from 'react-router-dom';
+import BottomNavBar from 'ui/layout/BottomNavBar';
+import Header from 'ui/layout/Header';
+import { HeaderOption } from 'ui/types/header';
+
+export default function Layout() {
+  const headerOption: HeaderOption = {
+    onMenuClick: () => {},
+    onSubmit: (keyword: string) => {
+      console.log(keyword);
+    },
+  };
+
+  return (
+    <Container maxW="container.sm" h="100vh" p={0} centerContent>
+      <Header headerOption={headerOption} />
+      <Container height="100%" pb="50px" px="16px">
+        <Outlet />
+      </Container>
+      <BottomNavBar />
+    </Container>
+  );
+}
diff --git a/apps/shelter/src/routes/index.tsx b/apps/shelter/src/routes/index.tsx
@@ -1,6 +1,6 @@
 import { createBrowserRouter } from 'react-router-dom';
-import Layout from 'ui/layout';
 
+import Layout from '@/components/layout';
 import PATH from '@/constants/path';
 import AnimalsPage from '@/pages/animals';
 import AnimalsDetailPage from '@/pages/animals/detail';
@@ -34,55 +34,143 @@ export const router = createBrowserRouter([
       {
         path: PATH.VOLUNTEERS.INDEX,
         children: [
-          { index: true, element: <VolunteersPage /> },
-          { path: PATH.VOLUNTEERS.DETAIL, element: <VolunteersDetailPage /> },
-          { path: PATH.VOLUNTEERS.PROFILE, element: <VolunteersProfilePage /> },
-          { path: PATH.VOLUNTEERS.SEARCH, element: <VolunteersSearchPage /> },
-          { path: PATH.VOLUNTEERS.WRITE, element: <VolunteersWritePage /> },
-          { path: PATH.VOLUNTEERS.UPDATE, element: <VolunteersUpdatePage /> },
+          {
+            id: `SHELTER_APP:VOLUNTEERS`,
+            index: true,
+            element: <VolunteersPage />,
+          },
+          {
+            id: 'SHELTER_APP:VOLUNTEERS_DETAIL',
+            path: PATH.VOLUNTEERS.DETAIL,
+            element: <VolunteersDetailPage />,
+          },
+          {
+            id: 'SHELTER_APP:VOLUNTEERS_PROFILE',
+            path: PATH.VOLUNTEERS.PROFILE,
+            element: <VolunteersProfilePage />,
+          },
+          {
+            id: 'SHELTER_APP:VOLUNTEERS_SEARCH',
+            path: PATH.VOLUNTEERS.SEARCH,
+            element: <VolunteersSearchPage />,
+          },
+          {
+            id: 'SHELTER_APP:VOLUNTEERS_WRITE',
+            path: PATH.VOLUNTEERS.WRITE,
+            element: <VolunteersWritePage />,
+          },
+          {
+            id: 'SHELTER_APP:VOLUNTEERS_UPDATE',
+            path: PATH.VOLUNTEERS.UPDATE,
+            element: <VolunteersUpdatePage />,
+          },
         ],
       },
       {
         path: PATH.ANIMALS.INDEX,
         children: [
-          { index: true, element: <AnimalsPage /> },
-          { path: PATH.ANIMALS.DETAIL, element: <AnimalsDetailPage /> },
-          { path: PATH.ANIMALS.SEARCH, element: <AnimalsSearchPage /> },
-          { path: PATH.ANIMALS.WRITE, element: <AnimalsWritePage /> },
-          { path: PATH.ANIMALS.UPDATE, element: <AnimalsUpdatePage /> },
+          {
+            id: 'SHELTER_APP:ANIMALS',
+            index: true,
+            element: <AnimalsPage />,
+          },
+          {
+            id: 'SHELTER_APP:ANIMALS_DETAIL',
+            path: PATH.ANIMALS.DETAIL,
+            element: <AnimalsDetailPage />,
+          },
+          {
+            id: 'SHELTER_APP:ANIMALS_SEARCH',
+            path: PATH.ANIMALS.SEARCH,
+            element: <AnimalsSearchPage />,
+          },
+          {
+            id: 'SHELTER_APP:ANIMALS_WRITE',
+            path: PATH.ANIMALS.WRITE,
+            element: <AnimalsWritePage />,
+          },
+          {
+            id: 'SHELTER_APP:ANIMALS_UPDATE',
+            path: PATH.ANIMALS.UPDATE,
+            element: <AnimalsUpdatePage />,
+          },
         ],
       },
       {
         path: PATH.CHATTINGS.INDEX,
         children: [
-          { index: true, element: <ChattingsPage /> },
-          { path: PATH.CHATTINGS.ROOM, element: <ChattingsRoomPage /> },
+          {
+            id: 'SHELTER_APP:CHATTINGS',
+            index: true,
+            element: <ChattingsPage />,
+          },
+          {
+            id: 'SHELTER_APP:CHATTINGS_ROOM',
+            path: PATH.CHATTINGS.ROOM,
+            element: <ChattingsRoomPage />,
+          },
         ],
       },
       {
         path: PATH.MYPAGE.INDEX,
         children: [
-          { index: true, element: <MyPage /> },
-          { path: PATH.MYPAGE.REVIEWS, element: <MyReviewsPage /> },
+          {
+            id: 'SHELTER_APP:MYPAGE',
+            index: true,
+            element: <MyPage />,
+          },
+          {
+            id: 'SHELTER_APP:MYPAGE_REVIEWS',
+            path: PATH.MYPAGE.REVIEWS,
+            element: <MyReviewsPage />,
+          },
         ],
       },
       {
         path: PATH.SETTINGS.INDEX,
         children: [
-          { path: PATH.SETTINGS.ACCOUNT, element: <SettingsAccountPage /> },
-          { path: PATH.SETTINGS.PASSWORD, element: <SettingsPasswordPage /> },
+          {
+            id: 'SHELTER_APP:SETTINGS_ACCOUNT',
+            path: PATH.SETTINGS.ACCOUNT,
+            element: <SettingsAccountPage />,
+          },
+          {
+            id: 'SHELTER_APP:SETTINGS_PASSWORD',
+            path: PATH.SETTINGS.PASSWORD,
+            element: <SettingsPasswordPage />,
+          },
         ],
       },
       {
         path: PATH.MANAGE.INDEX,
         children: [
-          { path: PATH.MANAGE.ATTENDANCE, element: <ManageAttendancePage /> },
-          { path: PATH.MANAGE.APPLY, element: <ManageAttendancePage /> },
+          {
+            id: 'SHELTER_APP:MANAGE.ATTENDANCE',
+            path: PATH.MANAGE.ATTENDANCE,
+            element: <ManageAttendancePage />,
+          },
+          {
+            id: 'SHELTER_APP:MANAGE.APPLY',
+            path: PATH.MANAGE.APPLY,
+            element: <ManageAttendancePage />,
+          },
         ],
       },
-      { path: PATH.NOTIFICATIONS, element: <NotificationsPage /> },
-      { path: PATH.SIGNUP, element: <SignupPage /> },
-      { path: PATH.SIGNIN, element: <SigninPage /> },
+      {
+        id: 'SHELTER_APP:NOTIFICATIONS',
+        path: PATH.NOTIFICATIONS,
+        element: <NotificationsPage />,
+      },
+      {
+        id: 'SHELTER_APP:SIGNUP',
+        path: PATH.SIGNUP,
+        element: <SignupPage />,
+      },
+      {
+        id: 'SHELTER_APP:SIGNIN',
+        path: PATH.SIGNIN,
+        element: <SigninPage />,
+      },
     ],
   },
 ]);
diff --git a/apps/volunteer/src/components/layout/index.tsx b/apps/volunteer/src/components/layout/index.tsx
@@ -0,0 +1,24 @@
+import { Container } from '@chakra-ui/react';
+import { Outlet } from 'react-router-dom';
+import BottomNavBar from 'ui/layout/BottomNavBar';
+import Header from 'ui/layout/Header';
+import { HeaderOption } from 'ui/types/header';
+
+export default function Layout() {
+  const headerOption: HeaderOption = {
+    onMenuClick: () => {},
+    onSubmit: (keyword: string) => {
+      console.log(keyword);
+    },
+  };
+
+  return (
+    <Container maxW="container.sm" h="100vh" p={0} centerContent>
+      <Header headerOption={headerOption} />
+      <Container height="100%" pb="50px" px="16px">
+        <Outlet />
+      </Container>
+      <BottomNavBar />
+    </Container>
+  );
+}
diff --git a/apps/volunteer/src/routes/index.tsx b/apps/volunteer/src/routes/index.tsx
@@ -1,6 +1,6 @@
 import { createBrowserRouter } from 'react-router-dom';
-import Layout from 'ui/layout';
 
+import Layout from '@/components/layout';
 import PATH from '@/constants/path';
 import AnimalsPage from '@/pages/animals';
 import AnimalsDetailPage from '@/pages/animals/detail';
@@ -29,53 +29,108 @@ export const router = createBrowserRouter([
       {
         path: PATH.VOLUNTEERS.INDEX,
         children: [
-          { index: true, element: <VolunteersPage /> },
-          { path: PATH.VOLUNTEERS.DETAIL, element: <VolunteersDetailPage /> },
-          { path: PATH.VOLUNTEERS.SEARCH, element: <VolunteersSearchPage /> },
+          {
+            id: 'VOLUNTEER_APP:VOLUNTEERS',
+            index: true,
+            element: <VolunteersPage />,
+          },
+          {
+            id: 'VOLUNTEER_APP:VOLUNTEERS_DETAIL',
+            path: PATH.VOLUNTEERS.DETAIL,
+            element: <VolunteersDetailPage />,
+          },
+          {
+            id: 'VOLUNTEER_APP:VOLUNTEERS_SEARCH',
+            path: PATH.VOLUNTEERS.SEARCH,
+            element: <VolunteersSearchPage />,
+          },
         ],
       },
       {
         path: PATH.ANIMALS.INDEX,
         children: [
-          { index: true, element: <AnimalsPage /> },
-          { path: PATH.ANIMALS.DETAIL, element: <AnimalsDetailPage /> },
+          {
+            id: 'VOLUNTEER_APP:ANIMALS',
+            index: true,
+            element: <AnimalsPage />,
+          },
+          {
+            id: 'VOLUNTEER_APP:ANIMALS_DETAIL',
+            path: PATH.ANIMALS.DETAIL,
+            element: <AnimalsDetailPage />,
+          },
         ],
       },
       {
         path: PATH.CHATTINGS.INDEX,
         children: [
-          { index: true, element: <ChattingsPage /> },
-          { path: PATH.CHATTINGS.ROOM, element: <ChattingsRoomPage /> },
+          {
+            id: 'VOLUNTEER_APP:CHATTINGS',
+            index: true,
+            element: <ChattingsPage />,
+          },
+          {
+            id: 'VOLUNTEER_APP:CHATTINGS_ROOM',
+            path: PATH.CHATTINGS.ROOM,
+            element: <ChattingsRoomPage />,
+          },
         ],
       },
       {
+        id: 'VOLUNTEER_APP:MYPAGE',
         path: PATH.MYPAGE.INDEX,
         element: <MyPage />,
       },
       {
         path: PATH.SETTINGS.INDEX,
         children: [
-          { path: PATH.SETTINGS.ACCOUNT, element: <SettingsAccountPage /> },
-          { path: PATH.SETTINGS.PASSWORD, element: <SettingsPasswordPage /> },
+          {
+            id: 'VOLUNTEER_APP:SETTINGS_ACCOUNT',
+            path: PATH.SETTINGS.ACCOUNT,
+            element: <SettingsAccountPage />,
+          },
+          {
+            id: 'VOLUNTEER_APP:SETTINGS_PASSWORD',
+            path: PATH.SETTINGS.PASSWORD,
+            element: <SettingsPasswordPage />,
+          },
         ],
       },
       {
         path: PATH.SHELTERS.INDEX,
         children: [
-          { path: PATH.SHELTERS.PROFILE, element: <SheltersProfilePage /> },
           {
+            id: 'VOLUNTEER_APP:SHELTERS_PROFILE',
+            path: PATH.SHELTERS.PROFILE,
+            element: <SheltersProfilePage />,
+          },
+          {
+            id: 'VOLUNTEER_APP:SHELTERS_REVIEWS_WRITE',
             path: PATH.SHELTERS.REVIEWS_WRITE,
             element: <SheltersReviewsWritePage />,
           },
           {
+            id: 'VOLUNTEER_APP:SHELTERS_REVIEWS_UPDATE',
             path: PATH.SHELTERS.REVIEWS_UPDATE,
             element: <SheltersReviewsUpdatePage />,
           },
         ],
       },
-      { path: PATH.NOTIFICATIONS, element: <NotificationsPage /> },
-      { path: PATH.SIGNUP, element: <SignupPage /> },
-      { path: PATH.SIGNIN, element: <SigninPage /> },
+      {
+        id: 'VOLUNTEER_APP:NOTIFICATIONS',
+        path: PATH.NOTIFICATIONS,
+        element: <NotificationsPage />,
+      },
+      {
+        id: 'VOLUNTEER_APP:SIGNUP',
+        path: PATH.SIGNUP,
+        element: <SignupPage />,
+      },
+      {
+        id: 'VOLUNTEER_APP:SIGNIN',
+        path: PATH.SIGNIN,
+        element: <SigninPage />,
+      },
     ],
   },
 ]);
diff --git a/packages/ui/assets/icon_back.svg b/packages/ui/assets/icon_back.svg
diff --git a/packages/ui/assets/icon_menu.svg b/packages/ui/assets/icon_menu.svg
diff --git a/packages/ui/assets/icon_notifications.svg b/packages/ui/assets/icon_notifications.svg
diff --git a/packages/ui/assets/icon_search.svg b/packages/ui/assets/icon_search.svg