docs: ドキュメントを現在のリポジトリ状態に合わせて更新

CONTRIBUTING.md

@@ -84,7 +84,7 @@ rishu-appへの貢献はいろいろな形で歓迎しています：
    - VS Codeでクローンしたディレクトリを開く
    - コマンドパレット（`Ctrl+Shift+P` / `Cmd+Shift+P`）を開く
    - `Dev Containers: Reopen in Container` を選択
-   - 開発したいサービスを選択（frontend、syllabus-frontendなど）
+   - 開発したいサービスを選択（frontend、syllabus-backend、syllabus-scrapeなど）
 
 4. **リモートリポジトリの設定**
 
@@ -160,7 +160,7 @@ git rebase upstream/main
 ### 全体的なコーディング規約
 
 このプロジェクトは複数のサービスから構成されています：
-- **frontend、syllabus-frontend、syllabus-scrape**: TypeScript
+- **frontend、syllabus-scrape**: TypeScript
 - **syllabus-backend**: Go
 
 それぞれのサービスで共通して守るべき規約：
@@ -172,19 +172,16 @@ git rebase upstream/main
 
 ### フロントエンド（React/Next.js）
 
-<!-- TODO: 将来的にfrontendの機能はsyllabus-frontendに統合予定。その際にReact/Next.jsは使用しなくなる可能性があります -->
-
 - 関数コンポーネントを使用
 - Hooksを適切に使用（`useState`, `useEffect`など）
 - コンポーネントは再利用可能で単一責任の原則に従う
 - PropTypesの代わりにTypeScriptの型を使用
 
 ### スタイリング
 
-<!-- TODO: 上記のフロントエンド統合に伴い、MUIも使用しなくなる可能性があります -->
-
-- MUIコンポーネントを優先的に使用
-- カスタムスタイルが必要な場合は、MUIのスタイリングシステム（`sx` prop、`styled`）を使用
+- Tailwind CSS を使用したユーティリティファーストのスタイリングを基本とする
+- shadcn/ui コンポーネントを優先的に使用
+- カスタムスタイルが必要な場合は、Tailwind CSS のユーティリティクラスを使用
 
 ### コメント
 

frontend/README.md

@@ -1,36 +1,137 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+# frontend
 
-## Getting Started
+抽選科目の登録状況を可視化するフロントエンドサービスです。
 
-First, run the development server:
+## 概要
+
+このサービスは、risyu APIから取得した抽選科目の申込状況データを表示するNext.js製のWebアプリケーションです。また、金沢大学のシラバス情報の検索・閲覧および履修登録ビルダー機能も提供しています。
+
+## 利用技術
+
+- **Next.js** 16 - Reactベースのフロントエンドフレームワーク
+- **React** 19 - UIライブラリ
+- **TypeScript** - 型安全な開発言語
+- **Tailwind CSS** v4 - ユーティリティファーストCSSフレームワーク
+- **shadcn/ui** - Tailwind CSS + Radix UIベースのコンポーネントライブラリ
+- **pnpm** - パッケージマネージャー
+
+## ディレクトリ構造
+
+```
+frontend/
+├── src/
+│   ├── app/           # Next.js App Router（ページ・レイアウト）
+│   ├── components/    # 共通コンポーネント（shadcn/ui等）
+│   ├── features/      # 機能別コンポーネント
+│   ├── hooks/         # カスタムフック
+│   ├── lib/           # ユーティリティ・ヘルパー
+│   ├── types/         # TypeScript型定義
+│   └── utils/         # ユーティリティ関数
+├── public/            # 静的アセット
+├── .storybook/        # Storybook設定
+├── Dockerfile         # 本番環境用Dockerfile
+├── Dockerfile.dev     # 開発環境用Dockerfile
+├── package.json       # 依存関係管理
+├── pnpm-lock.yaml     # pnpm lockファイル
+└── tsconfig.json      # TypeScript設定
+```
+
+## 開発環境のセットアップ
+
+### 事前準備
+
+- Docker
+- Docker Compose
+- VS Code（推奨）
+  - Dev Container拡張機能
+
+### 起動方法
+
+#### Dev Containerを使用する場合
+
+1. VS Codeでプロジェクトルートを開く
+2. コマンドパレット（`Ctrl+Shift+P`）から`Dev Containers: Reopen in Container`を選択
+3. `frontend`を選択
+
+#### Docker Composeを使用する場合
+
+```bash
+# プロジェクトルートで実行
+docker compose -f docker-compose.yml -f docker-compose.dev.yml up frontend
+```
+
+サービスは`http://localhost:3000`で起動します。
+
+### ローカルでの実行
 
 ```bash
-npm run dev
-# or
-yarn dev
-# or
+# 依存関係のインストール
+pnpm install
+
+# 開発サーバーの起動
 pnpm dev
-# or
-bun dev
+
+# ビルド
+pnpm build
+
+# 型チェック
+pnpm typecheck
+```
+
+## コード品質管理
+
+### リント・フォーマット
+
+```bash
+# ESLintによるリントチェック
+pnpm lint
+```
+
+### テスト
+
+```bash
+# 全テストの実行
+pnpm test
+
+# ユニットテストのみ実行
+pnpm test:unit
+
+# Storybookテストのみ実行
+pnpm test:storybook
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+### Storybook
+
+```bash
+# Storybookの起動（http://localhost:6006）
+pnpm storybook
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+# Storybookのビルド
+pnpm build-storybook
+```
 
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+## 主な機能
 
-## Learn More
+- **抽選科目一覧** (`/odds`): 履修登録期間中の抽選科目の申込状況を表示
+- **授業一覧** (`/view`): シラバス情報の検索・閲覧
+- **履修登録ビルダー** (`/builder`): 履修登録のプランニングを支援
 
-To learn more about Next.js, take a look at the following resources:
+## トラブルシューティング
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+### ポートが既に使用されている
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+```bash
+# ホストマシンで実行: ポート3000を使用しているプロセスを確認
+lsof -i :3000
 
-## Deploy on Vercel
+# または別のポートを使用
+# docker-compose.dev.ymlのportsセクションを編集
+```
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+### 依存関係のインストールエラー
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+```bash
+# node_modulesを削除して再インストール
+rm -rf node_modules
+pnpm install
+```

nginx/README.md

@@ -4,7 +4,7 @@
 
 ## 概要
 
-このサービスは、各マイクロサービス（frontend、syllabus-frontend、syllabus-backend）へのリクエストをルーティングするリバースプロキシとして動作します。本番環境でのフロントエンドとして、クライアントからのすべてのHTTPリクエストを受け付けます。
+このサービスは、各マイクロサービス（frontend、syllabus-backend）へのリクエストをルーティングするリバースプロキシとして動作します。本番環境でのフロントエンドとして、クライアントからのすべてのHTTPリクエストを受け付けます。
 
 ## 利用技術
 
@@ -30,14 +30,12 @@ nginx/
 - **ポート80でリクエストを受信**
 - **各サービスへのプロキシ設定（サブドメインベース）**:
   - `example.com` → frontend
-  - `builder.example.com` → syllabus-frontend
   - `api.example.com` → syllabus-backend
 
 #### ルーティング例
 
 ```
 http://example.com/              → frontendサービス
-http://builder.example.com/      → syllabus-frontendサービス
 http://api.example.com/          → syllabus-backendサービス
 ```
 
@@ -67,9 +65,6 @@ docker compose -f docker-compose.yml -f docker-compose.dev.yml up
 # ホストマシンで実行: メインページへのアクセス
 curl http://localhost/
 
-# ホストマシンで実行: syllabus-frontendへのアクセス（builder.localhostサブドメイン）
-curl -H "Host: builder.localhost" http://localhost/
-
 # ホストマシンで実行: syllabus-backendへのアクセス（api.localhostサブドメイン）
 curl -H "Host: api.localhost" http://localhost/courses
 ```
@@ -79,7 +74,6 @@ curl -H "Host: api.localhost" http://localhost/courses
 ブラウザで以下のURLにアクセスして、各サービスが正常に動作していることを確認：
 
 - `http://localhost/` - frontend
-- `http://builder.localhost/` - syllabus-frontend
 - `http://api.localhost/courses` - syllabus-backend
 
 ## 本番環境

readme.md

@@ -6,10 +6,9 @@ Inspired by [kurisyushien.org](https://kurisyushien.org)
 ![TypeScript](https://img.shields.io/badge/-Typescript-007ACC.svg?logo=typescript&style=plastic)
 ![Next.js](https://img.shields.io/badge/-Next.js-000000.svg?logo=next.js&style=plastic)
 ![React](https://img.shields.io/badge/-React-61DAFB.svg?logo=react&style=plastic)
-![SolidJS](https://img.shields.io/badge/-SolidJS-2C4F7C.svg?logo=solid&style=plastic)
 ![Go](https://img.shields.io/badge/-Go-00ADD8.svg?logo=go&style=plastic)
 ![PostgreSQL](https://img.shields.io/badge/-PostgreSQL-336791.svg?logo=postgresql&style=plastic)
-![MUI](https://img.shields.io/badge/-MUI-757575.svg?logo=MUI&style=plastic)
+![Tailwind CSS](https://img.shields.io/badge/-Tailwind%20CSS-06B6D4.svg?logo=tailwindcss&style=plastic)
 ![Docker](https://img.shields.io/badge/-Docker-2496ED.svg?logo=docker&style=plastic)
 ![Dev Container](https://img.shields.io/badge/-Dev%20Container-444444.svg?logo=dev.to&style=plastic)
 ![risyu API](https://img.shields.io/badge/-risyu%20API-FFFFFF.svg?logo=api&style=flat)
@@ -73,14 +72,12 @@ rishu-appは、金沢大学の学生が履修登録をより効率的に行え
    - VS Codeでクローンしたディレクトリを開く
    - コマンドパレット（`Ctrl+Shift+P` / `Cmd+Shift+P`）を開く
    - `Dev Containers: Reopen in Container`を選択
-   - 開発したいサービスを選択（frontend、legacy-frontend、legacy-syllabus-frontend、syllabus-backend、syllabus-scrapeなど）
+   - 開発したいサービスを選択（frontend、syllabus-backend、syllabus-scrapeなど）
 
 開発環境では`docker-compose.yml`を`docker-compose.dev.yml`で上書きして使用します。各サービスのDev Containerで開発サーバーを起動して開発を進めてください。
 
 開発環境のポート割り当て：
-- `frontend` (新実装): http://localhost:3000
-- `legacy-frontend` (旧実装): http://localhost:3001
-- `legacy-syllabus-frontend` (旧実装): http://localhost:4000
+- `frontend`: http://localhost:3000
 - `syllabus-backend`: http://localhost:8080
 
 詳細な開発ガイドラインについては、[CONTRIBUTING.md](CONTRIBUTING.md)を参照してください。
@@ -90,20 +87,10 @@ rishu-appは、金沢大学の学生が履修登録をより効率的に行え
 このプロジェクトは以下のサービスで構成されています：
 
 ### frontend
-抽選科目の登録状況を可視化するフロントエンドサービス（新実装）
+抽選科目の登録状況を可視化するフロントエンドサービス
 - **技術スタック**: Next.js, React, TypeScript, Tailwind CSS, shadcn/ui, pnpm
 - **役割**: risyu APIから取得したデータをグラフ形式で表示
 
-### legacy-frontend
-抽選科目の登録状況を可視化するフロントエンドサービス（旧実装・開発環境のみ）
-- **技術スタック**: Next.js, React, TypeScript, MUI
-- **役割**: risyu APIから取得したデータをグラフ形式で表示（移行完了後に削除予定）
-
-### legacy-syllabus-frontend
-シラバス情報を表示するフロントエンドサービス（旧実装・開発環境のみ）
-- **技術スタック**: SolidJS, TypeScript, Tailwind CSS
-- **役割**: シラバスデータの検索と閲覧インターフェースを提供（移行完了後に削除予定）
-
 ### syllabus-backend
 シラバスデータを提供するバックエンドAPI
 - **技術スタック**: Go, Gin, GORM, PostgreSQL
@@ -123,10 +110,9 @@ rishu-appは、金沢大学の学生が履修登録をより効率的に行え
 
 ### フロントエンド
 - [Next.js](https://nextjs.org/) - Reactベースのフロントエンドフレームワーク
-- [SolidJS](https://www.solidjs.com/) - 高性能なUIフレームワーク
 - [TypeScript](https://www.typescriptlang.org/) - 型安全な開発言語
-- [MUI](https://mui.com/) - Reactコンポーネントライブラリ
 - [Tailwind CSS](https://tailwindcss.com/) - ユーティリティファーストCSSフレームワーク
+- [shadcn/ui](https://ui.shadcn.com/) - Tailwind CSS + Radix UIベースのコンポーネントライブラリ
 
 ### バックエンド
 - [Go](https://golang.org/) - 高性能なバックエンド言語
@@ -162,25 +148,20 @@ architecture-beta
     backend:B -- T:scraper
 
     service rishuapp(server)[rishu app] in frontend
-    service rishu(server)[rishu builder viewer] in frontend
-
-    junction frontendjunction
-    frontendjunction:T -- B:rishuapp
-    frontendjunction:B -- T:rishu
 
     service endpoint(server)[EndPoint]
     service gateway(internet)[Gateway]
 
     gateway:B -- T:endpoint
     endpoint:B -- T:backend
-    endpoint:L -- R:frontendjunction
+    endpoint:L -- R:rishuapp
 
     service syllabus(server)[Syllabus]
 
     scraper:L -- R:syllabus
 ```
 
-- **フロントエンド層**: `frontend`（新実装）が本番環境で動作。`legacy-frontend`と`legacy-syllabus-frontend`は開発環境でのみ利用可能
+- **フロントエンド層**: `frontend`が本番環境で動作
 - **バックエンド層**: `syllabus-backend`がRESTful APIを提供
 - **データ層**: `syllabus-db`（PostgreSQL）がデータを永続化
 - **データ収集層**: `syllabus-scrape`が定期的にシラバス情報を更新