Skip to main content
ยังไม่ได้ข้อสรุป ว่าจะใช้ 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/