プロジェクト

全般

プロフィール

操作
リンクをコピー

バグ #450

未完了

Phase 1: ヘッダーコンポーネント実装 (RAG UI統合)

Redmine Admin さんが10日前に追加. 10日前に更新.

ステータス:
解決
優先度:
高め
担当者:
-
開始日:
2025-06-10
期日:
進捗率:

0%

予定工数:

説明

🎯 Phase 1: ヘッダーコンポーネント実装

📋 実装タスク

1. ヘッダー基本レイアウト

  • Header.tsx コンポーネント作成
  • TailwindCSS でレイアウト定義
  • LINEデザイン言語カラーパレット適用

2. ロゴ・ブランディング要素

  • サイトロゴ配置（左上）
  • サイト名「Task2 RAG Assistant」表示
  • ブランディング統一

3. ユーザーメニュー実装

  • ユーザーアバター表示（右上）
  • ドロップダウンメニュー実装
  • ログアウト・プロフィール項目

4. 通知システム準備

  • 通知アイコン配置
  • 通知数バッジ表示
  • 通知ドロップダウン基本構造

5. グローバル検索バー

  • 検索入力フィールド（中央）
  • 検索アイコン・プレースホルダー
  • 検索候補表示準備

6. レスポンシブ対応

  • モバイル表示最適化
  • ハンバーガーメニューボタン
  • タブレット表示調整

🎨 技術仕様

コンポーネント構造

// src/components/Layout/Header.tsx
interface HeaderProps {
  user?: User;
  notifications?: Notification[];
  onSearch?: (query: string) => void;
  onToggleSidebar?: () => void;
}

export const Header: React.FC<HeaderProps> = ({
  user,
  notifications,
  onSearch,
  onToggleSidebar
}) => {
  // 実装内容
};

スタイリング仕様

/* ヘッダー基本スタイル */
.header {
  height: 64px;
  background: white;
  border-bottom: 1px solid #E5E7EB;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* LINEデザイン準拠 */
.header-primary { color: #00B900; }
.header-text { color: #1A1A1A; }

🔗 関連

  • 親チケット: #449
  • 次フェーズ: サイドバー実装

✅ 完了基準

  • ヘッダーコンポーネント完全実装
  • 全ブレークポイントでの表示確認
  • LINEデザイン言語適用確認
操作
リンクをコピー

他の形式にエクスポート: Atom PDF