➕ react router 설치 및 navigation 로직 생성 (#9)

* ➕ react router 설치

* ✨ 랜딩페이지, 로그인 페이지, 회원가입 페이지 생성

* ✨ router provider 생성

* ♻️ path 상수화

* 👔 navigation을 위한 서비스 로직 생성 및 각 페이지에 적용

Author: Yeonu-Kim

package.json

@@ -16,6 +16,7 @@
     "@tailwindcss/vite": "^4.3.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "react-router": "^7.16.0",
     "tailwindcss": "^4.3.0"
   },
   "devDependencies": {

pnpm-lock.yaml

@@ -1,14 +1,5 @@
-import { useState } from 'react';
+import { RouterProvider } from './routes/router-provider';
 
 export const App = () => {
-  const [count, setCount] = useState(0);
-
-  return (
-    <div>
-      <p>Hello World!</p>
-      <button onClick={() => setCount((count) => count + 1)}>
-        Count is {count}
-      </button>
-    </div>
-  );
+  return <RouterProvider />;
 };

src/App.tsx

@@ -1,5 +1,6 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
+import { BrowserRouter } from 'react-router';
 import { App } from './App';
 
 const rootElement = document.getElementById('root');
@@ -9,6 +10,8 @@ if (rootElement === null) {
 
 createRoot(rootElement).render(
   <StrictMode>
-    <App />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </StrictMode>
 );

src/main.tsx

@@ -0,0 +1,13 @@
+import { useRouteNavigation } from '../routes/use-route-navigation';
+
+export const LandingPage = () => {
+  const { toSignIn, toSignUp } = useRouteNavigation();
+
+  return (
+    <div>
+      <p>랜딩 페이지입니다.</p>
+      <button onClick={toSignIn}>로그인</button>
+      <button onClick={toSignUp}>회원가입</button>
+    </div>
+  );
+};

src/pages/landing.tsx

@@ -0,0 +1,12 @@
+import { useRouteNavigation } from '../routes/use-route-navigation';
+
+export const SignInPage = () => {
+  const { toMain } = useRouteNavigation();
+
+  return (
+    <div>
+      <p>로그인 페이지입니다.</p>
+      <button onClick={toMain}>메인으로</button>
+    </div>
+  );
+};

src/pages/sign-in.tsx

@@ -0,0 +1,12 @@
+import { useRouteNavigation } from '../routes/use-route-navigation';
+
+export const SignUpPage = () => {
+  const { toMain } = useRouteNavigation();
+
+  return (
+    <div>
+      <p>회원가입 페이지입니다.</p>
+      <button onClick={toMain}>메인으로</button>
+    </div>
+  );
+};

src/pages/sign-up.tsx

@@ -0,0 +1,5 @@
+export const PATH = {
+  LANDING: '/',
+  SIGN_IN: '/sign-in',
+  SIGN_UP: '/sign-up',
+};

src/routes/path.ts

@@ -0,0 +1,15 @@
+import { Route, Routes } from 'react-router';
+import { LandingPage } from '../pages/landing';
+import { SignInPage } from '../pages/sign-in';
+import { SignUpPage } from '../pages/sign-up';
+import { PATH } from './path';
+
+export const RouterProvider = () => {
+  return (
+    <Routes>
+      <Route path={PATH.LANDING} element={<LandingPage />} />
+      <Route path={PATH.SIGN_IN} element={<SignInPage />} />
+      <Route path={PATH.SIGN_UP} element={<SignUpPage />} />
+    </Routes>
+  );
+};

src/routes/router-provider.tsx

@@ -0,0 +1,25 @@
+import { useNavigate } from 'react-router';
+import { PATH } from './path';
+
+export const useRouteNavigation = () => {
+  const navigate = useNavigate();
+  const { LANDING, SIGN_IN, SIGN_UP } = PATH;
+
+  return {
+    toMain: () => {
+      void navigate(LANDING);
+    },
+    toSignIn: () => {
+      void navigate(SIGN_IN);
+    },
+    toSignUp: () => {
+      void navigate(SIGN_UP);
+    },
+    toBack: () => {
+      void navigate(-1);
+    },
+    refreshPage: () => {
+      void navigate(0);
+    },
+  };
+};