diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 5a468ab..b2255d6 100644 --- a/CONTRIBUTING.md +++ b/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,8 +172,6 @@ git rebase upstream/main ### フロントエンド（React/Next.js） - - - 関数コンポーネントを使用 - Hooksを適切に使用（`useState`, `useEffect`など） - コンポーネントは再利用可能で単一責任の原則に従う @@ -181,10 +179,9 @@ git rebase upstream/main ### スタイリング - - -- MUIコンポーネントを優先的に使用 -- カスタムスタイルが必要な場合は、MUIのスタイリングシステム（`sx` prop、`styled`）を使用 +- Tailwind CSS を使用したユーティリティファーストのスタイリングを基本とする +- shadcn/ui コンポーネントを優先的に使用 +- カスタムスタイルが必要な場合は、Tailwind CSS のユーティリティクラスを使用 ### コメント diff --git a/frontend/README.md b/frontend/README.md index e215bc4..138c59a 100644 --- a/frontend/README.md +++ b/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 +``` diff --git a/nginx/README.md b/nginx/README.md index 62eb7cb..f474c02 100644 --- a/nginx/README.md +++ b/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 ## 本番環境 diff --git a/readme.md b/readme.md index 99b19f0..b55be34 100644 --- a/readme.md +++ b/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`が定期的にシラバス情報を更新