> ## Documentation Index
> Fetch the complete documentation index at: https://styleguide-nextjs.2smooth.io/llms.txt
> Use this file to discover all available pages before exploring further.

# การแยกไฟล์

* ใช้ pattern ที่ดัดแปลงมาจาก `Container/Presentational Pattern`
  * แยกส่วนการทำงานของ logic และ ui ออกจากกัน
  * สามารถใช้ความเข้าใจของ `MVC` pattern
* ประเภทของไฟล์
  * `<name>.main.tsx`
    * เปรียบเสมือนการรวมกันของ `C` และ `V` หรือ `Controller` และ `View` ใน `MVC`
    * จะมีได้เมื่อทำการ generate source code ของ component แล้วเลือก `MAIN`
    ```
    ? [PLOP] Please choose a generator. (Use arrow keys)
    ❯ component - Auto generate component in /src/components
      feature - Auto generate feature in /src/features
      function - Auto generate utility function in /src/functions
      hook - Auto generate custom hook in /src/hooks
      store - Auto generate global state manager in /src/stores
      variable - Auto generate utility variable in /src/variables

    ? [PLOP] Please choose a generator. component - Auto generate component in /src/components
    ? Choose component type (Use arrow keys)
    ❯ MAIN
      CONTAINER + CONTENT
    ```
  * `<name>.container.tsx`
    * เปรียบเสมือน `C` หรือ `Controller` ใน `MVC`
    * ทำเกี่ยวกับ state และ logic ต่างๆ ของ feature นั้นๆ
    * หากมีความซับซ้อนมากเกินไป แนะนำให้แยกออกเป็น `components/<feature-name>` เพื่อง่ายต่อการ maintain
  * `<name>.content.tsx`
    * เปรียบเสมือน `V` หรือ `View` ใน `MVC`
    * ทำการแสดง ui โดยรับ `props` มาจาก `<name>.container.tsx`
  * `<name>.model.tsx`
    * เปรียบเสมือน `M` หรือ `Model` ใน `MVC`
    * ทำการประกาศ interface/type ไว้ที่นี่
  * `<name>.module.css`
    * ใช้วิธีการของ `CSS module`
    * สามารถใช้ร่วมกับ `PostCSS` ได้
    * เพื่อลดความซ้ำซ้อนของ style ใน `<name>.content.tsx`
  * `<name>.stories.tsx`
    * จะมีอยู่ภายใต้ `components/` เท่านั้น
    * เพื่อให้คนในทีมสามารถรับรู้ว่ามี component อะไรให้ใช้ และ ตัวอย่างการใช้
  * `<name>.test.tsx`
    * ไฟล์ unit test
* ตัวอย่าง
  * แบบ main
  ```
  └── ../
      ├── index.tsx
      ├── <module-name>.main.tsx
      ├── <module-name>.model.tsx
      ├── <module-name>.module.css
      └── <module-name>.test.tsx
  ```
  * แบบ container/content
  ```
  └── ../
      ├── index.tsx
      ├── <module-name>.container.tsx
      ├── <module-name>.content.tsx
      ├── <module-name>.model.tsx
      ├── <module-name>.module.css
      └── <module-name>.test.tsx
  ```