ページコンポーネント生成

Name: page
Rating: 65
Author: RyoOsaka

$ARGUMENTS ページを以下の手順で生成する。

1. ファイル配置

code

src/pages/$ARGUMENTS/
├── $ARGUMENTS.tsx          # ページコンポーネント
├── $ARGUMENTS.module.css   # スタイル
└── index.ts               # re-export

2. ページテンプレート

typescript

import type { FC } from 'react';
import styles from './$ARGUMENTS.module.css';

export const ${ARGUMENTS}Page: FC = () => {
  // TODO: データ取得フックを使用
  // const { data, isLoading, error } = use___();

  return (
    <div className={styles.root}>
      <header>
        <h1>$ARGUMENTS</h1>
      </header>
      <main>
        {/* TODO: implement */}
      </main>
    </div>
  );
};

3. 作業手順

•ページコンポーネントを作成する
•必要なデータ取得フック（/api スキル）を作成する
•ルーティングに追加する
•ナビゲーションにリンクを追加する
•テストを作成する

4. チェックリスト

• ローディング状態を表示した
• エラー状態を表示した
• 空状態（データなし）を表示した
• レスポンシブデザインを考慮した
• ルーティングに登録した
• ナビゲーションからアクセス可能にした