ut-code · aster-void · Jul 15, 2025 · Jul 15, 2025 · Jul 15, 2025 · Jul 15, 2025
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,7 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
+node_modules/
+
 .tool-versions
 bun.lockb
 

diff --git a/biome.jsonc b/biome.jsonc
@@ -10,7 +10,8 @@
     "includes": [
       "**/*",
       "!packages/class_data/data/**",
-      "!packages/web/src/app/globals.css"
+      "!packages/web/src/app/globals.css",
+      "!packages/web/src/styles/globals.css"
     ]
   },
   "formatter": {

diff --git a/bun.lock b/bun.lock
diff --git a/packages/web/index.html b/packages/web/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="ja">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>シ楽バス</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/packages/web/next.config.mjs b/packages/web/next.config.mjs
diff --git a/packages/web/package.json b/packages/web/package.json
@@ -2,26 +2,31 @@
   "name": "@packages/web",
   "version": "0.1.0",
   "private": true,
+  "type": "module",
   "scripts": {
-    "dev": "next dev",
-    "dev:mock": "export NEXT_PUBLIC_MODE=mock && next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint"
+    "dev": "vite",
+    "dev:mock": "VITE_MODE=mock vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "check": "tsc --noEmit"
   },
   "dependencies": {
     "@headlessui/react": "^2.2.4",
-    "next": "^15.3.5",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "react-router-dom": "^7.1.1",
     "react-hook-form": "^7.60.0",
     "react-icons": "^5.5.0",
     "@packages/class_data": "workspace:*"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.1.11",
+    "@types/react": "^19.0.5",
+    "@types/react-dom": "^19.0.5",
+    "@vitejs/plugin-react": "^4.3.4",
     "postcss": "^8.5.6",
     "tailwindcss": "^4.1.11",
-    "typescript": "^5.8.3"
+    "typescript": "^5.8.3",
+    "vite": "^6.0.7"
   }
 }
diff --git a/packages/web/src/App.tsx b/packages/web/src/App.tsx
@@ -0,0 +1,69 @@
+import { useState } from "react";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+
+import { ThemeContext } from "@/app/context";
+import type { RegisterType, ThemeType } from "@/app/type";
+import { UserContext, type UserContextValue } from "@/app/UserContext";
+import { User } from "@/app/utils/user";
+import Footer from "./app/components/Footer";
+import Header from "./app/components/Header";
+import AboutUs from "./pages/AboutUs";
+import Disclaimer from "./pages/Disclaimer";
+import Home from "./pages/Home";
+import HowToUse from "./pages/HowToUse";
+import NotFound from "./pages/NotFound";
+import Notion from "./pages/Notion";
+
+/**
+ * App コンポーネントは、アプリケーション全体のレイアウトを定義します。
+ *
+ * - テーマ（light/dark）の切り替え機能を提供します。
+ * - ユーザー情報を管理し、アプリ全体で利用可能にします。
+ * @returns アプリケーションのルートコンポーネント
+ */
+export default function App() {
+  /**
+   * テーマ管理
+   */
+  const [theme, setTheme] = useState<ThemeType>("light");
+
+  const userInstance = new User();
+  const [user, setUserState] = useState<RegisterType | undefined>(
+    userInstance.getUser(),
+  );
+
+  const setUser = (newUser: RegisterType) => {
+    userInstance.setUser(newUser);
+    setUserState(newUser);
+  };
+
+  const userContextValue: UserContextValue = {
+    user,
+    setUser,
+  };
+
+  return (
+    <ThemeContext.Provider value={{ theme, setTheme }}>
+      <UserContext.Provider value={userContextValue}>
+        <div
+          className={`bg-surface-container text-text-default ${theme} min-h-screen`}
+        >
+          <BrowserRouter>
+            <div className="overscroll-none min-width-[300px] pt-12 pb-12">
+              <Header />
+              <Routes>
+                <Route path="/" element={<Home />} />
+                <Route path="/aboutus" element={<AboutUs />} />
+                <Route path="/disclaimer" element={<Disclaimer />} />
+                <Route path="/how-to-use" element={<HowToUse />} />
+                <Route path="/notion" element={<Notion />} />
+                <Route path="*" element={<NotFound />} />
+              </Routes>
+              <Footer />
+            </div>
+          </BrowserRouter>
+        </div>
+      </UserContext.Provider>
+    </ThemeContext.Provider>
+  );
+}
diff --git a/packages/web/src/app/UserContext.ts b/packages/web/src/app/UserContext.ts
@@ -1,5 +1,3 @@
-"use client";
-
 import { createContext, useContext } from "react";
 import type { RegisterType } from "@/app/type";
 

diff --git a/packages/web/src/app/components/FilterUI/FilterComponents/ClassType.tsx b/packages/web/src/app/components/FilterUI/FilterComponents/ClassType.tsx
@@ -1,8 +1,6 @@
 /*
  * セメスターフィルターのコンポーネント
  */
-
-"use client";
 import type React from "react";
 import type { ClassType } from "@/app/type";
 import { FlagButton } from "../UI/FlagButton";

diff --git a/packages/web/src/app/components/FilterUI/FilterComponents/Evaluation.tsx b/packages/web/src/app/components/FilterUI/FilterComponents/Evaluation.tsx
@@ -2,7 +2,6 @@
  * 評価方法フィルターのコンポーネント
  */
 
-"use client";
 import type React from "react";
 import type { ReactNode } from "react";
 import type { Evaluation } from "@/app/type";

diff --git a/packages/web/src/app/components/FilterUI/FilterComponents/Freeword.tsx b/packages/web/src/app/components/FilterUI/FilterComponents/Freeword.tsx
@@ -2,7 +2,6 @@
  * フリーワード検索のコンポーネントを定義する
  */
 
-"use client";
 import type React from "react";
 import Checkbox from "../UI/Checkbox";
 

diff --git a/packages/web/src/app/components/FilterUI/FilterComponents/RegistrationFilter.tsx b/packages/web/src/app/components/FilterUI/FilterComponents/RegistrationFilter.tsx
@@ -2,7 +2,6 @@
  * 履修登録済みか否かでフィルターするコンポーネント
  */
 
-"use client";
 import type React from "react";
 import { FlagButton } from "../UI/FlagButton";
 

diff --git a/packages/web/src/app/components/FilterUI/FilterComponents/Semester.tsx b/packages/web/src/app/components/FilterUI/FilterComponents/Semester.tsx
@@ -2,7 +2,6 @@
  * セメスターフィルターのコンポーネント
  */
 
-"use client";
 import type React from "react";
 import type { Semester } from "@/app/type";
 import { FlagButton } from "../UI/FlagButton";

diff --git a/packages/web/src/app/components/FilterUI/FilterUI.tsx b/packages/web/src/app/components/FilterUI/FilterUI.tsx
@@ -2,7 +2,6 @@
  * 全てのフィルターを表示するコンポーネント
  */
 
-"use client";
 import { useState } from "react";
 import type { ClassType, Evaluation, Semester } from "@/app/type";
 import { ClassTypeFilter } from "./FilterComponents/ClassType";

diff --git a/packages/web/src/app/components/FilterUI/UI/Checkbox.tsx b/packages/web/src/app/components/FilterUI/UI/Checkbox.tsx
@@ -1,4 +1,3 @@
-"use client";
 import type React from "react";
 
 type CheckboxProps = {

diff --git a/packages/web/src/app/components/Footer/index.tsx b/packages/web/src/app/components/Footer/index.tsx
@@ -1,4 +1,4 @@
-import Link from "next/link";
+import { Link } from "react-router-dom";
 
 /**
  * フッター
@@ -11,43 +11,46 @@ export default function Footer() {
       className="flex items-center justify-end px-4 py-2 text-white bg-inverse-primary fixed bottom-0 w-full"
     >
       <div className="flex flex-wrap justify-end space-x-4 bg-gray-800">
-        <Link
+        <a
           href="https://forms.gle/stBdKuCsXm8LUdBm8"
           className="hover:bg-surface-variant hover:text-white px-2 py-1 rounded-sm transition duration-200 "
+          target="_blank"
+          rel="noopener noreferrer"
         >
           ご意見
-        </Link>
+        </a>
         <Link
-          href="/how-to-use"
+          to="/how-to-use"
           className="hover:bg-surface-variant hover:text-white px-2 py-1 rounded-sm transition duration-200"
         >
           使い方
         </Link>
         <Link
-          href="/notion"
+          to="/notion"
           className="hover:bg-surface-variant hover:text-white px-2 py-1 rounded-sm transition duration-200"
         >
           履修上の注意
         </Link>
         <Link
-          href="/disclaimer"
+          to="/disclaimer"
           className="hover:bg-surface-variant hover:text-white px-2 py-1 rounded-sm transition duration-200"
         >
           免責事項
         </Link>
         <Link
-          href="/aboutus"
+          to="/aboutus"
           className="hover:bg-surface-variant hover:text-white px-2 py-1 rounded-sm transition duration-200"
         >
           About us
         </Link>
-        <Link
+        <a
           href="https://utcode.net/"
           className="hover:bg-surface-variant hover:text-white px-2 py-1 rounded-sm transition duration-200"
           target="_blank"
+          rel="noopener noreferrer"
         >
           ut.code();
-        </Link>
+        </a>
       </div>
     </footer>
   );

diff --git a/packages/web/src/app/components/Header/index.tsx b/packages/web/src/app/components/Header/index.tsx
@@ -1,6 +1,3 @@
-"use client";
-
-import Image from "next/image";
 import { useContext } from "react";
 import { FaCog } from "react-icons/fa";
 import { MdDarkMode, MdOutlineWbSunny } from "react-icons/md";
@@ -33,7 +30,7 @@ export default function Header() {
           rel="noopener"
         >
           <span>by</span>
-          <Image
+          <img
             src="/utcode_logo.svg"
             alt="ut.code();"
             width={100}

diff --git a/packages/web/src/app/components/Sample/ClassModal/page.tsx b/packages/web/src/app/components/Sample/ClassModal/page.tsx
@@ -1,4 +1,3 @@
-"use client";
 import type React from "react";
 import { useState } from "react";
 import ClassModalComponent from "../../ClassModal"; // モーダルのコンポーネント

diff --git a/packages/web/src/app/components/Sample/ColorTheme/field.tsx b/packages/web/src/app/components/Sample/ColorTheme/field.tsx
@@ -1,7 +1,6 @@
 /*
     定義済みColorを用いてインプットフィールドをデザインするサンプル
 */
-"use client";
 import type React from "react";
 import { useForm } from "react-hook-form";
 

diff --git a/packages/web/src/app/components/Sample/ColorTheme/toggle.tsx b/packages/web/src/app/components/Sample/ColorTheme/toggle.tsx
@@ -1,7 +1,6 @@
 /*
   定義済みColorを用いてトグルボタンをデザインするサンプル
  */
-"use client";
 
 import type React from "react";
 import { useState } from "react";

diff --git a/packages/web/src/app/components/Sample/Timetable/page.tsx b/packages/web/src/app/components/Sample/Timetable/page.tsx
@@ -1,4 +1,3 @@
-"use client";
 import { useState } from "react";
 import type { ClassDataType } from "@/app/type";
 import ClassModalComponent from "../../ClassModal";

diff --git a/packages/web/src/app/components/Timetable/slots/daySlot.tsx b/packages/web/src/app/components/Timetable/slots/daySlot.tsx
@@ -7,7 +7,7 @@ import { SlotDiv, type slotProps } from "./slot";
  */
 interface dayProps extends slotProps {
   day: Day;
-  daySlotElement: React.FC<Day>;
+  daySlotElement: (day: Day) => React.ReactNode;
 }
 
 /**

diff --git a/packages/web/src/app/components/Timetable/slots/periodSlot.tsx b/packages/web/src/app/components/Timetable/slots/periodSlot.tsx
@@ -1,11 +1,12 @@
+import type React from "react";
 import { type Period, SlotDiv, type slotProps } from "./slot";
 
 /**
  * 時限が表示されるスロット要素のプロパティ
  */
 interface periodProps extends slotProps {
   period: Period | "集中";
-  periodSlotElement: React.FC<Period | "集中">;
+  periodSlotElement: (period: Period | "集中") => React.ReactNode;
 }
 
 /**

diff --git a/packages/web/src/app/components/Timetable/timetableFrame.tsx b/packages/web/src/app/components/Timetable/timetableFrame.tsx
@@ -9,7 +9,6 @@
  * 使用例: components/Sample/Timetable/page
  */
 
-"use client";
 import type React from "react";
 import { type ReactElement, useEffect, useState } from "react";
 import type { ClassDataType, Day, DayPeriod } from "@/app/type";
@@ -33,11 +32,11 @@ interface TimetableProps {
 
   // 時限ヘッダー内のデザイン
   // 詳細はclassSlotElementと同じ
-  periodSlotElement: React.FC<Period | "集中">;
+  periodSlotElement: (period: Period | "集中") => React.ReactNode;
 
   // 曜日ヘッダー内のデザイン
   // 詳細はclassSlotElementと同じ
-  daySlotElement: React.FC<Day>;
+  daySlotElement: (day: Day) => React.ReactNode;
 }
 
 /**