MASAKASUNO1 mermaid-exporter .cursorrules file for TypeScript

# Repository Rules & Implementation Guidelines

このドキュメントでは、本リポジトリのディレクトリ構成や、実装時における命名規則・スタイリング・エラーハンドリングなどのポリシーをまとめています。

## 1. リポジトリ概要

- mermaid.jsを簡単にexporr(画像）できるサービスプロジェクトです。
- **Next.js** は **Pages Router** を使用しているため、ページは `src/pages` ディレクトリに配置します。

## 2. ディレクトリ構成
├─ memos
  └─ 各種メモを md 形式で保存
├─ public
  └─ 公開するファイル群
├─ src
  ├─ pages
  │  └─ ページコンポーネント
  ├─ components
  │  ├─ common
  │  │  └─ 共通コンポーネント
  │  ├─ layout
  │  │  └─ レイアウト関連のコンポーネント
  │  ├─ ui
  │  │  └─ shadcn/ui を主体とした UI コンポーネント
  │  └─ …{pagePrefix}
  │    └─ ページ単位でのコンポーネント配置
  ├─ consts
  │  └─ 定数置き場
  ├─ hooks
  │  └─ カスタムフック
  ├─ lib
  │  ├─ firebase
  │  │  └─ firebase 呼び出し関数
  │  └─ localstorage
  │    └─ localStorage 呼び出し関数
  ├─ styles
  │  └─ globals.css (Tailwind 設定外で必要な追加・特殊 CSS)
  ├─ types
  │  └─ 型定義ファイル
  └─ utils
    └─ 汎用的なユーティリティ関数
├─ …その他の設定ファイル


## 3. UI とスタイリング

- **Shadcn UI**, **Radix**, **Tailwind CSS** を併用して開発を行う。
- スタイリングは **Tailwind CSS** を使用し、モバイルファーストのレスポンシブデザインを心がける。
- UI コンポーネントは、まず **shadcn/ui** の利用を検討し、必要に応じて自作コンポーネントを作成する。
  - shadcn/uiのcomponentのファイルは、`src/components/ui` ディレクトリに配置してある
### 補足
- すべてのshadcn/uiのcomponentのファイルは、インストール済みです
- テーマやカラーパレットに変更を加える場合は、`globals.css` や必要に応じて `tailwind.config.js` 等を編集する。  
- 共通レイアウトやヘッダー・フッターなどは、`layout` ディレクトリ内にまとめ、重複を避ける。
- 画像の表示には `next/image` を使用せず、通常の `img` タグを使用する。
  - Vercelにホスティングしない前提のため、`next/image` の最適化機能は不要
  - `loading="lazy"` 属性を使用して遅延読み込みを実装
- アイコンは `lucide-react` を使用し、カテゴリやセクションごとのアイコンマッピングは `src/consts` ディレクトリ内で管理する。
  - 例：`category-icons.ts` - カテゴリとアイコンのマッピング

## 4. 実装方針
### 4.1 ダイアログやモーダル
- `component` ディレクトリ配下に共通化したコンポーネントとして切り出すことを検討する。
- できるだけ汎用性を持たせ、複数の画面で使いまわせるようにする。
### 4.2 ファイル命名規則
- **小文字 (lower case) + ケバブケース (kebab-case)** で命名する。  
  例）`example-component.tsx` / `user-list-dialog.tsx`
### 4.3 データフェッチ
- **`fetch`** を使用してデータを取得する。  
- クライアントサイド/サーバーサイドで使い分ける場合は、`getServerSideProps` や `getStaticProps` など Next.js の機能を活用する。
  - pages routerなので、上記の関数で正しい。（app routerではないことに注意）
### 4.4 エラーハンドリング & バリデーション
- エラーが発生した場合には、**shadcn/ui** の **toast (variant: `destructive`)** を使用してユーザに通知する。
- 成功時のフィードバックも同じく toast を利用してユーザにわかりやすく伝える。
- フォームバリデーションには、必要に応じて `zod` や `React Hook Form` などのライブラリ導入を検討し、ユーザ入力エラーを適切にハンドリングする。
### 4.5 アニメーション
- アニメーションに関しては `framer-motion` を使用することを第一に検討する。そのほかのアニメーションライブラリは使わない。
- framer-motionで難しい時には、該当componentのアニメーションファイルをcss.moduleで記述し、アニメーションを実装する。
### 4.6 モジュールの参照方法
- `scripts`ディレクトリ内のファイルでは、`@`プレフィックスを使用せず、相対パスで参照する
  - 例：`import { db } from "../../utils/firebase"`
- `src`ディレクトリ内のファイルでは、`@`プレフィックスを使用する
  - 例：`import { db } from "@/lib/firebase"`


## 6. 補足事項
- **コミットメッセージ** や **ブランチ名** にも可能な範囲でケバブケースやわかりやすい命名を心がける。
- プロジェクトに参加したメンバーが迷わないよう、**README** や **memos** ディレクトリ内で補足情報を定期的に更新する。