ディレクトリ構成

現状のディレクトリ構成は以下のようなものになっている 変更をする予定はないが追加される可能性はある

src
├── api
├── app
│   ├── favicon.ico
│   ├── globals.css
│   ├── layout.tsx
│   └── page.tsx
├── components
│   ├── functional
│   │   └── FullScreen
│   │       ├── hook.ts
│   │       ├── index.stories.tsx
│   │       ├── index.test.tsx
│   │       └── index.tsx
│   ├── model
│   │   └── ImageCrop
│   │       ├── hooks
│   │       │   └── index.ts
│   │       ├── index.stories.tsx
│   │       ├── index.test.tsx
│   │       ├── index.tsx
│   │       └── presentations
│   │           ├── error.tsx
│   │           ├── index.tsx
│   │           └── loading.tsx
│   ├── page
│   └── ui
│       └── Avatar
│           ├── index.stories.tsx
│           ├── index.test.tsx
│           └── index.tsx
└── libs
    └── dateFormat
        ├── index.test.ts
        └── index.ts

• app ルーティングを記載

• api バックエンドのスキーマ定義を配置する(自動生成なのでいじる必要はない)

• components コンポーネントを配置する

  • page 特定のページを実装するコンポーネント
  • model ドメイン知識を持つコンポーネント
    • hooks そのコンポーネントで使用するフックを定義する
    • index.tsx そのコンポーネントのコンテナ
    • index.test.tsx コンポーネントのテストを書く
    • index.stories.tsx コンポーネントのストーリーを定義する
    • presentations
      • error.tsx コンポーネントに何かしらのエラーが出た時に表示されるコンポーネント
      • loading.tsx　コンポーネントにおいてPromiseがthrowされた時に表示されるコンポーネント
      • index.tsx そのコンポーネントのビューを実装するコンポーネント
  • ui ドメイン知識を持たないコンポーネント
    • index.tsx そのコンポーネントのビューを実装する
    • index.test.tsx そのコンポーネントのテストを記述する
    • index.stories.tsx そのコンポーネントのストーリーを定義する
  • functional 特定の機能を提供するラッパーコンポーネント

• libs　腐敗防止層 サードパーティライブラリや独自実装のライブラリを定義する

これら以外のディレクトリは基本開発者が触ることはない