Feature/router

package.json

@@ -10,9 +10,13 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "localforage": "^1.10.0",
+    "match-sorter": "^6.3.3",
     "firebase": "^10.7.1",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.21.3",
+    "sort-by": "^0.0.2"
   },
   "devDependencies": {
     "@types/react": "^18.2.37",

src/error-page.tsx

@@ -0,0 +1,13 @@
+import { useRouteError } from "react-router-dom";
+
+export default function ErrorPage() {
+  const error = useRouteError();
+  console.error(error);
+
+  return (
+    <div id="error-page" style={{ padding: 40 }}>
+      <h1>Oops!</h1>
+      <p>Sorry, an unexpected error has occurred.</p>
+    </div>
+  );
+}

src/interfaces/Common.ts

@@ -0,0 +1,9 @@
+export type ValidationResult =
+  | {
+      isError: false;
+      errorMsg?: undefined;
+    }
+  | {
+      isError: true;
+      errorMsg: string;
+    };

src/main.tsx

@@ -1,10 +1,29 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
-import './index.css'
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import { RouterProvider, createBrowserRouter } from "react-router-dom";
+import CreateMeet from "./routes/CreateMeet/CreateMeet.tsx";
+import ErrorPage from "./error-page";
+import Meet from "./routes/Meet/Meet.tsx";
+import { meetLoader } from "./routes/Meet/meetLoader.ts";
 
-ReactDOM.createRoot(document.getElementById('root')!).render(
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <CreateMeet />,
+    errorElement: <ErrorPage />,
+    children: [
+      {
+        path: "meet/:meetId",
+        element: <Meet />,
+        loader: meetLoader,
+      },
+    ],
+  },
+]);
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-)
+    <RouterProvider router={router} />
+  </React.StrictMode>
+);

src/routes/CreateMeet/CreateMeet.tsx

@@ -0,0 +1,24 @@
+import { Link } from "react-router-dom";
+
+// TODO(세현): 모임 생성 추가
+const CreateMeet = () => {
+  // example
+  const id = 2;
+
+  return (
+    <Link
+      style={{
+        padding: 20,
+        backgroundColor: "navy",
+        borderRadius: 20,
+        margin: 20,
+        color: "white",
+      }}
+      to={`meet/${id}`}
+    >
+      생성 후 이동
+    </Link>
+  );
+};
+
+export default CreateMeet;

src/routes/Meet/Meet.tsx

@@ -0,0 +1,13 @@
+import { parseNum } from "@/utils/jsUtils";
+import { useParams } from "react-router-dom";
+
+const Meet = () => {
+  const { meetId: _meetId } = useParams<"meetId">();
+  const meetId = _meetId ? parseNum(_meetId) : null;
+  if (!meetId) return <></>;
+
+  // TODO: meetId 사용해서 미팅 정보 가져오고 시간 선택
+  return <></>;
+};
+
+export default Meet;

src/utils/jsUtils.ts

@@ -0,0 +1,14 @@
+/**
+ * string 으로 쓰여진 숫자를 Number로 변환하는 함수.
+ * 빈 스트링인 경우, 숫자형식이 아니거나 NaN인 경우 null 반환
+ */
+
+export const parseNum = (str: string) => {
+  if (str === "") return null;
+
+  const parsed = Number(str.replace(/[^0-9+.]/g, ""));
+
+  if (typeof parsed !== "number" || Number.isNaN(parsed)) return null;
+
+  return parsed;
+};

src/utils/validateUtils.ts

@@ -0,0 +1,27 @@
+import { ValidationResult } from "@/interfaces/Common";
+
+export const validateMeetName = (name: string): ValidationResult => {
+  if (name.trim().length < 3 || name.trim().length > 15) {
+    return {
+      isError: true,
+      errorMsg: "모임 이름은 3자 이상 15자 이내여야 합니다.",
+    };
+  }
+
+  return {
+    isError: false,
+  };
+};
+
+export const validateUserName = (name: string): ValidationResult => {
+  if (name.trim().length < 1 || name.trim().length > 15) {
+    return {
+      isError: true,
+      errorMsg: "이름은 1자 이상 15자 이내여야 합니다.",
+    };
+  }
+
+  return {
+    isError: false,
+  };
+};