ยังไม่ได้ข้อสรุป ว่าจะใช้ pattern แบบไหน
อาจมีการเปลี่ยนแปลงอีกในอนาคต
-
ใช้ pattern ที่ดัดแปลงจาก
Atomic Break Down Pattern และ Modular Group Pattern
- จัดกลุ่มของการทำงานที่เกี่ยวข้องให้อยู่ด้วยกัน
- แยกส่วนที่ซ้ำซ้อนออกจากกัน
- ควบคุมปริมาณของโค้ดต่อไฟล์ได้ง่าย
-
ผลลัพธ์การปรับแต่ง
src/
├── features/
│ ├── auth/
│ │ ├── index.tsx
│ │ ├── auth.main.tsx
│ │ ├── auth.model.tsx
│ │ ├── auth.module.css
│ │ └── auth.test.tsx
│ └── dashboard/
│ ├── index.tsx
│ ├── dashboard.container.tsx
│ ├── dashboard.content.tsx
│ ├── dashboard.model.tsx
│ ├── dashboard.module.css
│ └── dashboard.test.tsx
└── components/
├── shared/
│ └── <component-name>/
│ ├── <component-name>.container.tsx
│ ├── <component-name>.content.tsx
│ ├── <component-name>.model.tsx
│ ├── <component-name>.module.css
│ └── <component-name>.test.tsx
├── auth/
└── dashboard/
- ปรับแต่งจาก
Atomic Break Down Pattern
src/
├── components/
│ ├── atoms/
│ │ ├── Button.js
│ │ └── Input.js
│ ├── molecules/
│ │ ├── SearchBar.js
│ │ └── UserCard.js
│ ├── organisms/
│ │ ├── Header.js
│ │ └── Footer.js
│ └── templates/
│ ├── HomeTemplate.js
│ └── ProfileTemplate.js
├── pages/
│ ├── Home.js
│ └── Profile.js
└── App.js
- และปรับแต่งจาก
Modular Group Pattern
src/
├── modules/
│ ├── auth/
│ │ ├── components/
│ │ ├── services/
│ │ ├── styles/
│ │ └── tests/
│ └── dashboard/
│ ├── components/
│ ├── services/
│ ├── styles/
│ └── tests/
└── shared/
└── components/