操作
バグ #471
未完了【親】レジュメ変換システム - フロントエンド基盤構築
ステータス:
新規
優先度:
高め
担当者:
-
開始日:
2025-06-11
期日:
進捗率:
0%
予定工数:
説明
概要¶
レジュメ変換システムのフロントエンド基盤構築を行います。React + TypeScriptを使用したフロントエンド環境の設定、Material-UIとTailwindCSSによるUIコンポーネントの基盤構築を行います。
作業内容¶
-
フロントエンド環境構築
- React + TypeScriptのプロジェクト初期化
- ビルド環境の構築 (Webpack/Vite)
- ESLint, Prettierなどの開発環境設定
-
UIライブラリ導入
- Material-UIの導入と設定
- TailwindCSSの導入と設定
- テーマ設定とカスタマイズ
-
状態管理基盤構築
- React Contextの設定
- カスタムフックの作成
- 状態管理ユーティリティの実装
-
ルーティング実装
- React Routerの設定
- 画面遷移フロー実装
- ルートガード実装
-
共通コンポーネント実装
- レイアウトコンポーネント
- フォームコンポーネント
- 通知コンポーネント
- モーダルコンポーネント
-
APIクライアント実装
- Axiosの導入と設定
- API呼び出し共通処理の実装
- エラーハンドリング
成果物¶
- Reactプロジェクト基盤
- UIコンポーネントライブラリ
- 状態管理基盤
- ルーティング設定
- 共通コンポーネント
- APIクライアント
技術スタック¶
- React v18以上
- TypeScript v5以上
- Material-UI v5以上
- TailwindCSS v3以上
- React Router v6以上
- Axios
参照¶
Redmine Admin さんが8日前に更新
【重要】チケット実行順序について¶
このチケット（フロントエンド基盤構築）の子チケットは、以下の順序で実行してください。順序は チケット#512 に定義されているマイルストーン計画に基づいています：
- #488: フロントエンド環境構築
- #489: UIライブラリ導入・テーマ設定（要件：#511 LINEデザイン言語の実装とスタイルガイドの完了）
- #490: 状態管理基盤構築（要件：#508 詳細フロントエンドコンポーネント構造定義の完了）
- #491: ルーティング実装
- #492: 共通コンポーネント実装
各チケットを開始する前に、必ず前のチケットが完了していることを確認してください。また、このチケットの作業を開始する前に、マイルストーン1（要件定義・詳細設計）が完了していることを確認してください。
このマイルストーンの完了条件は以下の通りです：
- フロントエンドのプロジェクト基盤が構築されていること
- LINEデザイン言語に準拠したUIライブラリが導入されていること
- 状態管理、ルーティングの基盤が整っていること
- 共通コンポーネントが実装されていること
Redmine Admin さんが8日前に更新
単体テストチケットの追加について¶
このチケット（フロントエンド基盤構築）に以下の単体テストチケットを追加しました：
- #519: フロントエンド基盤の単体テスト
実行順序を以下のように更新します：
- #488: フロントエンド環境構築
- #489: UIライブラリ導入・テーマ設定（要件：#511 LINEデザイン言語の実装とスタイルガイドの完了）
- #490: 状態管理基盤構築（要件：#508 詳細フロントエンドコンポーネント構造定義の完了）
- #491: ルーティング実装
- #492: 共通コンポーネント実装
- #519: フロントエンド基盤の単体テスト（前の5つのチケットが完了した後に実行）
フロントエンド基盤実装の各モジュールが完了した後、すぐに単体テストを実施することで、早期のバグ発見と品質確保が可能になります。
操作