Task 2: Reactコンポーネント統合実装¶

概要¶

task2-service/ui に LINE Design System準拠のニュース機能コンポーネントを統合実装する

作業ディレクトリ¶

/home/ito/task2-service/ui/

実装ファイル構成¶

ui/src/
├── components/
│   ├── news/
│   │   ├── NewsContainer.jsx    # メインコンテナ
│   │   ├── NewsCard.jsx         # ニュースカード (LINE Design)
│   │   ├── NewsFilter.jsx       # フィルター機能
│   │   ├── NewsGrid.jsx         # グリッドレイアウト
│   │   └── index.js            # エクスポート
│   ├── common/
│   │   ├── LoadingSpinner.jsx   # ローディング
│   │   └── ErrorMessage.jsx     # エラー表示
│   └── redmine/
│       └── RedmineIntegration.jsx # Redmine連携UI
├── hooks/
│   ├── useNews.js              # ニュースフック
│   └── useRedmine.js           # Redmine統合フック
├── services/
│   ├── api.js                  # API統合
│   └── newsAPI.js              # ニュースAPI
├── pages/
│   └── NewsPage.jsx            # ニュースページ
└── styles/
    └── line-components.css     # LINE Design CSS

実装仕様¶

1. LINE Design System準拠¶

/* colors */
line-green: #00B900
line-gray-50: #F8F9FA  
line-gray-900: #202124

/* components */
.news-card: rounded-lg shadow-sm border hover:shadow-md
.filter-button: px-4 py-2 rounded-lg transition-colors
.loading-spinner: LINE Design準拠

2. React技術要件¶

• React 18 + Hooks
• React Router v6統合
• TailwindCSS + LINE Design
• Responsive対応 (mobile-first)

3. 機能要件¶

• ニュース一覧表示 (グリッド/リスト)
• カテゴリフィルタリング
• ソート機能 (日付/関連度)
• Redmine連携 (チケット作成)
• 無限スクロール/ページネーション

4. API統合¶

// hooks/useNews.js
const { news, loading, error } = useNews({
  category: 'technology',
  limit: 20,
  sortBy: 'publishedAt'
});

成果物¶

• NewsContainer.jsx実装
• NewsCard.jsx (LINE Design準拠)
• NewsFilter.jsx実装
• useNews.js カスタムフック
• NewsPage.jsx統合
• line-components.css作成
• App.jsx ルーティング統合

デザイン要件¶

// NewsCard例
<div className="bg-white rounded-lg shadow-sm border border-line-gray-200 
                hover:shadow-md transition-all duration-200 p-6">
  <h3 className="text-lg font-semibold text-line-gray-900 mb-3">
    {news.title}
  </h3>
  <p className="text-line-gray-700 text-sm mb-4">
    {news.description}
  </p>
  <div className="flex items-center space-x-3 text-xs text-line-gray-500">
    <span>{news.source}</span>
    <span>•</span>
    <span>{formatDate(news.publishedAt)}</span>
  </div>
</div>

テスト項目¶

• コンポーネント表示確認
• フィルター機能動作
• Redmine連携UI動作
• レスポンシブ対応確認
• LINE Design適用確認

完了条件¶

• 全コンポーネント実装完了
• LINE Design System準拠確認
• API統合動作確認
• レスポンシブ対応完了
• React Router統合完了

参照: 親チケット #223, 関連チケット #224
実装目標: 2-3日
優先度: 高