[Feature] - react-router-dom 설정 (#71)

* chore: react-router-dom 세팅 * chore: createBrowserRouter 적용 * chore: @Constants path alias 추가 * feat: AppLayout 컴포넌트 추가 1. TravelogueDetailPage 내 margin-top 제거 2. AppLayout 컴포넌트 구현 * feat: router path 관련 상수 추가 * refactor: router 세팅 변경 1. App 내 router router.tsx로 이동 2. router.tsx 내 AppLayout 추가 및 router path 설정 * chore: storybook-addon-remix-react-router 의존성 추가 * chore: storybook 내 router addon 설정 추가 --------- Co-authored-by: 손진영 <sm099@naver.com>
woowacourse-teams · Jul 20, 2024 · 5a43f26 · 5a43f26
1 parent 5a5ec69
commit 5a43f26
Show file tree

Hide file tree

Showing 17 changed files with 200 additions and 185 deletions.
diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml
diff --git a/frontend/.storybook/main.ts b/frontend/.storybook/main.ts
@@ -10,6 +10,7 @@ const config: StorybookConfig = {
     "@storybook/addon-essentials",
     "@chromatic-com/storybook",
     "@storybook/addon-interactions",
+    "storybook-addon-remix-react-router",
   ],
   framework: "@storybook/react-webpack5",
   webpackFinal: async (config) => {
@@ -21,6 +22,7 @@ const config: StorybookConfig = {
         "@assets": path.resolve(__dirname, "../src/assets"),
         "@styles": path.resolve(__dirname, "../src/styles"),
         "@apis": path.resolve(__dirname, "../src/apis"),
+        "@constants": path.resolve(__dirname, "../src/constants"),
       };
     }
     config.module = config.module || {};

diff --git a/frontend/.storybook/preview.tsx b/frontend/.storybook/preview.tsx
@@ -3,6 +3,7 @@ import React from "react";
 import { Global, ThemeProvider } from "@emotion/react";
 
 import type { Preview } from "@storybook/react";
+import { withRouter } from "storybook-addon-remix-react-router";
 
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
@@ -30,6 +31,7 @@ const preview: Preview = {
         </QueryClientProvider>
       );
     },
+    withRouter,
   ],
 };
 

diff --git a/frontend/chromatic_publish.sh b/frontend/chromatic_publish.sh
diff --git a/frontend/package.json b/frontend/package.json
@@ -9,8 +9,7 @@
     "lint:styled": "stylelint './src/**/*.styled.ts' --fix",
     "test": "jest --watchAll",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "chromatic": "bash ./chromatic_publish.sh"
+    "build-storybook": "storybook build"
   },
   "dependencies": {
     "@emotion/react": "^11.11.4",
@@ -21,7 +20,8 @@
     "axios": "^1.7.2",
     "dotenv-webpack": "^8.1.0",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.25.1"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.6.1",
@@ -57,6 +57,7 @@
     "postcss-styled-syntax": "^0.6.4",
     "prettier": "^3.3.2",
     "storybook": "^8.2.4",
+    "storybook-addon-remix-react-router": "^3.0.0",
     "stylelint": "16.6.1",
     "stylelint-config-standard": "^36.0.1",
     "stylelint-order": "^6.0.4",

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -1,7 +1,9 @@
-import TravelogueDetailPage from "@components/pages/travelogueDetail/TravelogueDetailPage";
+import { RouterProvider } from "react-router-dom";
+
+import { router } from "./router";
 
 const App = () => {
-  return <TravelogueDetailPage />;
+  return <RouterProvider router={router} />;
 };
 
 export default App;
diff --git a/frontend/src/components/common/TransformBottomSheet/TransformBottomSheet.stories.tsx b/frontend/src/components/common/TransformBottomSheet/TransformBottomSheet.stories.tsx
diff --git a/frontend/src/components/common/TransformBottomSheet/TransformBottomSheet.styled.ts b/frontend/src/components/common/TransformBottomSheet/TransformBottomSheet.styled.ts
@@ -20,29 +20,27 @@ const slideDown = keyframes`
 `;
 
 export const BottomSheetLayout = styled.div<{ $isOpen: boolean }>`
-  display: flex;
-  overflow: hidden;
   position: fixed;
   bottom: 0;
-  z-index: 1000;
   width: 100%;
-  height: ${({ $isOpen }) => ($isOpen ? "12rem" : "5rem")};
-
-  background-color: white;
-
-  animation: ${({ $isOpen }) => ($isOpen ? slideUp : slideDown)} 0.3s ease-out;
   max-width: 48rem;
+  display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  height: ${({ $isOpen }) => ($isOpen ? "12rem" : "5rem")};
+  background-color: white;
   border-top-left-radius: 20px;
   border-top-right-radius: 20px;
-  box-shadow: 0 -2px 10px rgb(0 0 0 / 10%);
+  box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.1);
+  animation: ${({ $isOpen }) => ($isOpen ? slideUp : slideDown)} 0.3s ease-out;
+  overflow: hidden;
+  z-index: 1000;
 `;
 
 export const BottomSheetContent = styled.div`
-  height: 100%;
   padding: 20px;
+  height: 100%;
   overflow-y: auto;
 
   ${(props) => props.theme.typography.detailBold}
@@ -54,20 +52,17 @@ export const BottomSheetBottomContainer = styled.div`
   left: 0;
   width: 100%;
   padding: 10px;
-
   background-color: white;
 `;
 
 export const BottomSheetButton = styled.button`
   width: 100%;
   padding: 10px;
-  border: none;
-
   background-color: #007bff;
-
   color: white;
-  font-weight: bold;
-  font-size: 16px;
+  border: none;
   border-radius: 5px;
+  font-size: 16px;
+  font-weight: bold;
   cursor: pointer;
 `;
diff --git a/frontend/src/components/layout/AppLayout/AppLayout.styled.ts b/frontend/src/components/layout/AppLayout/AppLayout.styled.ts
@@ -0,0 +1,5 @@
+import styled from "@emotion/styled";
+
+export const OutletContainer = styled.main`
+  padding-top: 5.7rem;
+`;
diff --git a/frontend/src/components/layout/AppLayout/AppLayout.tsx b/frontend/src/components/layout/AppLayout/AppLayout.tsx
@@ -0,0 +1,18 @@
+import { Outlet } from "react-router-dom";
+
+import { Header } from "@components/common";
+
+import * as S from "./AppLayout.styled";
+
+const AppLayout = () => {
+  return (
+    <>
+      <Header />
+      <S.OutletContainer>
+        <Outlet />
+      </S.OutletContainer>
+    </>
+  );
+};
+
+export default AppLayout;
diff --git a/frontend/src/components/pages/travelogueDetail/TravelogueDetailPage.styled.ts b/frontend/src/components/pages/travelogueDetail/TravelogueDetailPage.styled.ts
@@ -1,7 +1,6 @@
 import styled from "@emotion/styled";
 
 export const TitleLayout = styled.section`
-  margin-top: 5.7rem;
   display: flex;
   flex-direction: column;
   gap: 1.6rem;

diff --git a/frontend/src/components/pages/travelogueDetail/TravelogueDetailPage.tsx b/frontend/src/components/pages/travelogueDetail/TravelogueDetailPage.tsx
@@ -6,7 +6,7 @@ import { useQuery } from "@tanstack/react-query";
 
 import { client } from "@apis/client";
 
-import { Header, Tab, TransformBottomSheet } from "@components/common";
+import { Tab, TransformBottomSheet } from "@components/common";
 import TravelogueTabContent from "@components/pages/travelogueDetail/TravelogueTabContent/TravelogueTabContent";
 
 import { EmptyHeart } from "@assets/svg";
@@ -44,7 +44,6 @@ const TravelogueDetailPage = () => {
 
   return (
     <>
-      <Header />
       <S.TitleLayout>
         <S.Thumbnail src={data?.data?.thumbnail} />
         <S.TitleContainer>
@@ -59,7 +58,7 @@ const TravelogueDetailPage = () => {
           </S.LikesContainer>
           <S.Title
             css={css`
-              margin: 1.6rem 0 3.2rem 0;
+              margin: 1.6rem 0 3.2rem;
             `}
           >
             {daysAndNights} 여행 한눈에 보기

diff --git a/frontend/src/constants/route.ts b/frontend/src/constants/route.ts
@@ -0,0 +1,4 @@
+export const ROUTE_PATHS = {
+  root: "/",
+  travelogue: "/travelogue/:id",
+} as const;
diff --git a/frontend/src/router.tsx b/frontend/src/router.tsx
@@ -0,0 +1,24 @@
+import { createBrowserRouter } from "react-router-dom";
+
+import AppLayout from "@components/layout/AppLayout/AppLayout";
+import TravelogueDetailPage from "@components/pages/travelogueDetail/TravelogueDetailPage";
+
+import { ROUTE_PATHS } from "./constants/route";
+
+export const router = createBrowserRouter([
+  {
+    path: ROUTE_PATHS.root,
+    element: <AppLayout />,
+    children: [
+      {
+        path: ROUTE_PATHS.root,
+        //TODO: 별도의 main page 컴포넌트 추가 해야함
+        element: <div>메인 페이지</div>,
+      },
+      {
+        path: ROUTE_PATHS.travelogue,
+        element: <TravelogueDetailPage />,
+      },
+    ],
+  },
+]);
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
@@ -20,7 +20,8 @@
       "@styles/*": ["styles/*"],
       "@assets/*": ["assets/*"],
       "@components/*": ["components/*"],
-      "@apis/*": ["apis/*"]
+      "@apis/*": ["apis/*"],
+      "@constants/*": ["constants/*"]
     }
   },
   "include": ["src"],

diff --git a/frontend/webpack.common.js b/frontend/webpack.common.js
@@ -18,6 +18,7 @@ module.exports = {
       "@assets": path.resolve(__dirname, "src/assets/"),
       "@components": path.resolve(__dirname, "src/components/"),
       "@apis": path.resolve(__dirname, "src/apis/"),
+      "@constants/*": path.resolve(__dirname, "src/constants/"),
     },
     extensions: [".ts", ".tsx", ".js", ".jsx"],
   },
@@ -57,8 +58,9 @@ module.exports = {
   ],
   devServer: {
     compress: true,
+    host: "localhost",
     port: 3000,
-    open: true,
+    hot: true,
     historyApiFallback: true,
   },
 };