Merge pull request #59 from KUIT-Space/gh-page

setting: add basename for url
KUIT-Space · Aug 4, 2024 · 0a025f6 · 0a025f6
2 parents 114e148 + e1f1e34
commit 0a025f6
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 65 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,27 +1,35 @@
-import { createBrowserRouter, matchPath, Outlet, RouterProvider, useLocation } from "react-router-dom";
+import {
+  createBrowserRouter,
+  matchPath,
+  Outlet,
+  RouterProvider,
+  useLocation,
+} from "react-router-dom";
 import styled, { ThemeProvider } from "styled-components";
-import { theme } from "@/styles/Theme";
-import GlobalStyle from "@/styles/GlobalStyles";
+
 import BottomNavBar from "@/components/BottomNavBar";
-import LoginPage from "@/pages/LoginPage/LoginPage";
-import SignUpPage from "@/pages/LoginPage/SignUpPage";
-import HomePage from "@/pages/HomePage";
-import VoiceRoomListPage from "@/pages/VoiceRoomPage/VoiceRoomListPage";
+import BoardPage from "@/pages/BoardPage/BoardPage";
+import ChatCreatePage from "@/pages/ChatPage/ChatCreatePage/ChatCreatePage";
 import ChatPage from "@/pages/ChatPage/ChatPage";
 import ChattingPage from "@/pages/ChatPage/ChattingPage/ChattingPage";
-import ChatCreatePage from "@/pages/ChatPage/ChatCreatePage/ChatCreatePage";
+import HomePage from "@/pages/HomePage";
+import LoginPage from "@/pages/LoginPage/LoginPage";
+import SignUpPage from "@/pages/LoginPage/SignUpPage";
 import PayPage from "@/pages/PayPage/PayPage";
-import BoardPage from "@/pages/BoardPage/BoardPage";
-import SpacePage from "./pages/SpacePage/SpacePage";
-import AddSpacePage from "./pages/SpacePage/AddSpacePage";
-import SpaceOption from "./pages/SpacePage/SpaceOption";
+import VoiceRoomListPage from "@/pages/VoiceRoomPage/VoiceRoomListPage";
+import GlobalStyle from "@/styles/GlobalStyles";
+import { theme } from "@/styles/Theme";
+
 import AccountManage from "./pages/SpacePage/AccountManage";
-import ProfileManage from "./pages/SpacePage/ProfileManage";
+import AddSpacePage from "./pages/SpacePage/AddSpacePage";
 import AlarmManage from "./pages/SpacePage/AlarmManage";
+import ProfileManage from "./pages/SpacePage/ProfileManage";
+import SpaceOption from "./pages/SpacePage/SpaceOption";
+import SpacePage from "./pages/SpacePage/SpacePage";
 import CreateVoiceRoomPage from "./pages/VoiceRoomPage/CreateVoiceRoom";
+import EditVoiceRoomPage from "./pages/VoiceRoomPage/EditVoiceRoomPage";
 import JoinVoiceRoomPage from "./pages/VoiceRoomPage/JoinVoiceRoomPage";
 import VoiceRoomPage from "./pages/VoiceRoomPage/VoiceRoomPage";
-import EditVoiceRoomPage from "./pages/VoiceRoomPage/EditVoiceRoomPage";
 
 // will we need constant path in later..?
 // const PATH = {
@@ -37,70 +45,72 @@ import EditVoiceRoomPage from "./pages/VoiceRoomPage/EditVoiceRoomPage";
 // };
 
 const LayoutContainer = styled.div`
-	position: relative;
-	min-width: 360px;
-	max-width: 720px;
-	width: 100%;
-	margin: 0 auto;
+  position: relative;
+  min-width: 360px;
+  max-width: 720px;
+  width: 100%;
+  margin: 0 auto;
 
-	#content {
-		min-height: calc(100vh - 3.75rem);
-	}
+  #content {
+    min-height: calc(100vh - 3.75rem);
+  }
 `;
 
 interface RouteChildren {
-	path: string;
-	element: JSX.Element;
-	hasBottomBar?: boolean;
+  path: string;
+  element: JSX.Element;
+  hasBottomBar?: boolean;
 }
 
 function Layout({ routes_children }: { routes_children: RouteChildren[] }) {
-	const { pathname } = useLocation();
+  const { pathname } = useLocation();
 
-	return (
-		<ThemeProvider theme={theme}>
-			<GlobalStyle />
-			<LayoutContainer>
-				<div id="content">
-					<Outlet />
-				</div>
-				{routes_children.find((child) => matchPath(child.path, pathname))?.hasBottomBar && <BottomNavBar />}
-			</LayoutContainer>
-		</ThemeProvider>
-	);
+  return (
+    <ThemeProvider theme={theme}>
+      <GlobalStyle />
+      <LayoutContainer>
+        <div id="content">
+          <Outlet />
+        </div>
+        {routes_children.find((child) => matchPath(child.path, pathname))?.hasBottomBar && (
+          <BottomNavBar />
+        )}
+      </LayoutContainer>
+    </ThemeProvider>
+  );
 }
 
 function App() {
-	const routes_children = [
-		{ path: "/", element: <HomePage />, hasBottomBar: true },
-		{ path: "/voiceroom", element: <VoiceRoomListPage />, hasBottomBar: true },
-		{ path: "/chat", element: <ChatPage />, hasBottomBar: true },
-		{ path: "/chat/:id", element: <ChattingPage /> },
-		{ path: "/chat/create", element: <ChatCreatePage /> },
-		{ path: "/pay", element: <PayPage />, hasBottomBar: true },
-		{ path: "/board", element: <BoardPage />, hasBottomBar: true },
-		{ path: "/space", element: <SpacePage /> },
-		{ path: "/space/addspace", element: <AddSpacePage /> },
-		{ path: "/space/spaceoption", element: <SpaceOption /> },
-		{ path: "/space/spaceoption/accountmanage", element: <AccountManage /> },
-		{ path: "/space/spaceoption/profilemanage", element: <ProfileManage /> },
-		{ path: "/space/spaceoption/alarmmanage", element: <AlarmManage /> },
-		{ path: "/createvoiceroom", element: <CreateVoiceRoomPage />, hasBottomBar: false },
-		{ path: "/joinvoiceroom", element: <JoinVoiceRoomPage />, hasBottombar: false },
-		{ path: "/editvoiceroom", element: <EditVoiceRoomPage />, hasBottombar: false },
-		{ path: "/login", element: <LoginPage />, hasBottombar: false },
-		{ path: "/signup", element: <SignUpPage />, hasBottombar: false },
-	];
+  const routes_children = [
+    { path: "/", element: <HomePage />, hasBottomBar: true },
+    { path: "/voiceroom", element: <VoiceRoomListPage />, hasBottomBar: true },
+    { path: "/chat", element: <ChatPage />, hasBottomBar: true },
+    { path: "/chat/:id", element: <ChattingPage /> },
+    { path: "/chat/create", element: <ChatCreatePage /> },
+    { path: "/pay", element: <PayPage />, hasBottomBar: true },
+    { path: "/board", element: <BoardPage />, hasBottomBar: true },
+    { path: "/space", element: <SpacePage /> },
+    { path: "/space/addspace", element: <AddSpacePage /> },
+    { path: "/space/spaceoption", element: <SpaceOption /> },
+    { path: "/space/spaceoption/accountmanage", element: <AccountManage /> },
+    { path: "/space/spaceoption/profilemanage", element: <ProfileManage /> },
+    { path: "/space/spaceoption/alarmmanage", element: <AlarmManage /> },
+    { path: "/createvoiceroom", element: <CreateVoiceRoomPage />, hasBottomBar: false },
+    { path: "/joinvoiceroom", element: <JoinVoiceRoomPage />, hasBottombar: false },
+    { path: "/editvoiceroom", element: <EditVoiceRoomPage />, hasBottombar: false },
+    { path: "/login", element: <LoginPage />, hasBottombar: false },
+    { path: "/signup", element: <SignUpPage />, hasBottombar: false },
+  ];
 
-	const routes = [
-		{
-			element: <Layout routes_children={routes_children} />,
-			children: routes_children,
-		},
-	];
-	const router = createBrowserRouter(routes);
+  const routes = [
+    {
+      element: <Layout routes_children={routes_children} />,
+      children: routes_children,
+    },
+  ];
+  const router = createBrowserRouter(routes, { basename: "/KUIT-Space-front/" });
 
-	return <RouterProvider router={router} />;
+  return <RouterProvider router={router} />;
 }
 
 export default App;
diff --git a/vite.config.ts b/vite.config.ts
@@ -16,4 +16,5 @@ export default defineConfig({
       // external: ["react", "react-dom", "styled-components"],
     },
   },
+  base: "/KUIT-Space-front/",
 });
-Original file line number
+Diff line change
@@ Expand Up / @@ -16,4 +16,5 @@ export default defineConfig({ @@
           // external: ["react", "react-dom", "styled-components"],
         },
       },
+      base: "/KUIT-Space-front/",
     });