[#10] Feat: 페이지 및 라우팅 세팅

src/App.tsx

@@ -1,10 +1,10 @@
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
-import './App.css'
+import { useState } from "react";
+import reactLogo from "./assets/react.svg";
+import viteLogo from "/vite.svg";
+import "./App.css";
 
 function App() {
-  const [count, setCount] = useState(0)
+  const [count, setCount] = useState(0);
 
   return (
     <>
@@ -29,7 +29,7 @@ function App() {
         Click on the Vite and React logos to learn more
       </p>
     </>
-  )
+  );
 }
 
-export default App
+export default App;

src/main.tsx

@@ -1,18 +1,17 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import App from './App.tsx';
-import './index.css';
-import { BrowserRouter } from 'react-router-dom';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import { RouterProvider } from "react-router-dom";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+import { router } from "./routes/router";
 
 const queryClient = new QueryClient();
 
-ReactDOM.createRoot(document.getElementById('root')!).render(
+ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <QueryClientProvider client={queryClient}>
-      <BrowserRouter>
-        <App />
-      </BrowserRouter>
+      <RouterProvider router={router} />
     </QueryClientProvider>
   </React.StrictMode>
 );

src/pages/detailPage/Detail.page.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+export const Detail: React.FC = () => {
+  return <div>Detail.page</div>;
+};

src/pages/detailPage/index.ts

@@ -0,0 +1,3 @@
+import { Detail } from "./Detail.page";
+
+export { Detail };

src/pages/homePage/Home.page.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+export const Home: React.FC = () => {
+  return <div>Home.page</div>;
+};

src/pages/homePage/index.ts

@@ -0,0 +1,3 @@
+import { Home } from "./Home.page";
+
+export { Home };

src/pages/myPage/My.page.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+export const My: React.FC = () => {
+  return <div>My.page</div>;
+};

src/pages/myPage/index.ts

@@ -0,0 +1,3 @@
+import { My } from "./My.page";
+
+export { My };

src/pages/notFoundPage/NotFound.page.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+export const NotFound: React.FC = () => {
+  return <div>NotFound.page</div>;
+};

src/pages/notFoundPage/index.ts

@@ -0,0 +1,3 @@
+import { NotFound } from "./NotFound.page";
+
+export { NotFound };

src/pages/searchPage/Search.page.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+export const Search: React.FC = () => {
+  return <div>Search.page</div>;
+};

src/pages/searchPage/index.ts

@@ -0,0 +1,3 @@
+import { Search } from "./Search.page";
+
+export { Search };

src/pages/signInPage/SignIn.page.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+export const SignIn: React.FC = () => {
+  return <div>SignIn.page</div>;
+};

src/pages/signInPage/index.ts

@@ -0,0 +1,3 @@
+import { SignIn } from "./SignIn.page";
+
+export { SignIn };

src/pages/signUpPage/SignUp.page.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+export const SignUp: React.FC = () => {
+  return <div>SignUp.page</div>;
+};

src/pages/signUpPage/index.ts

@@ -0,0 +1,3 @@
+import { SignUp } from "./SignUp.page";
+
+export { SignUp };

src/pages/transferPurchasePage/TransferPurchase.page.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+export const TransferPurchase: React.FC = () => {
+  return <div>TransferPurchase.page</div>;
+};

src/pages/transferPurchasePage/index.ts

@@ -0,0 +1,3 @@
+import { TransferPurchase } from "./TransferPurchase.page";
+
+export { TransferPurchase };

src/pages/transferSalePage/TransferSale.page.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+export const TransferSale: React.FC = () => {
+  return <div>TransferSale.page</div>;
+};

src/pages/transferSalePage/index.ts

@@ -0,0 +1,3 @@
+import { TransferSale } from "./TransferSale.page";
+
+export { TransferSale };

src/pages/transferWritingPage/TransferWriting.page.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+export const TransferWriting: React.FC = () => {
+  return <div>TransferWriting.page</div>;
+};

src/pages/transferWritingPage/index.ts

@@ -0,0 +1,3 @@
+import { TransferWriting } from "./TransferWriting.page";
+
+export { TransferWriting };

src/routes/router.tsx

@@ -0,0 +1,59 @@
+import { createBrowserRouter } from "react-router-dom";
+import { Home } from "../pages/homePage";
+import { NotFound } from "../pages/notFoundPage";
+import { Search } from "../pages/searchPage";
+import { SignUp } from "../pages/signUpPage";
+import { SignIn } from "../pages/signInPage";
+import { My } from "../pages/myPage";
+import { TransferWriting } from "../pages/transferWritingPage";
+import { TransferSale } from "../pages/transferSalePage";
+import { TransferPurchase } from "../pages/transferPurchasePage";
+import { Detail } from "../pages/detailPage";
+
+export const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <Home />,
+    errorElement: <NotFound />,
+  },
+  {
+    path: "/search",
+    element: <Search />,
+    errorElement: <NotFound />,
+  },
+  {
+    path: "/signUp",
+    element: <SignUp />,
+    errorElement: <NotFound />,
+  },
+  {
+    path: "/signIn",
+    element: <SignIn />,
+    errorElement: <NotFound />,
+  },
+  {
+    path: "/myPage",
+    element: <My />,
+    errorElement: <NotFound />,
+  },
+  {
+    path: "/hotels/new",
+    element: <TransferWriting />,
+    errorElement: <NotFound />,
+  },
+  {
+    path: "/saleList",
+    element: <TransferSale />,
+    errorElement: <NotFound />,
+  },
+  {
+    path: "/purchaseList",
+    element: <TransferPurchase />,
+    errorElement: <NotFound />,
+  },
+  {
+    path: "/rooms",
+    element: <Detail />,
+    errorElement: <NotFound />,
+  },
+]);