> ## 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.

# หน้าที่ของแต่ละส่วน

export const CLASSIFICATION_TERMS = {
  positive: {
    must: '+MUST',
    should: '+SHOULD',
    optional: '+OPTIONAL'
  },
  negative: {
    must: '-MUST',
    should: '-SHOULD',
    optional: '-OPTIONAL'
  }
};

export const TextHighlight = ({text = '', positive = false, negative = false}) => {
  let textColor = undefined;
  let bgColor = undefined;
  if (positive) {
    textColor = 'black';
    bgColor = 'oklch(72.77% 0.1798 128.27)';
  }
  if (negative) {
    textColor = 'black';
    bgColor = 'oklch(51.73% 0.2119 28.74)';
  }
  return <div style={{
    display: 'inline-block',
    fontWeight: 'bold',
    paddingLeft: '4px',
    paddingRight: '4px',
    border: '1px solid',
    borderRadius: '8px',
    color: textColor,
    backgroundColor: bgColor
  }}>
      {text}
    </div>;
};

## ภาพรวม Overview

* `src/`: project root (ย่อการ import ด้วย `@/`)
  * `assets/`
    * `css/`: เก็บไฟล์ `css` ที่เป็นระดับ global ของ project
    * `images/`: เก็บไฟล์รูปภาพทั้งหมด
  * `components/`: <TextHighlight text={'generate ได้'} /> เก็บไฟล์ที่เป็น component เพื่อให้มีการเรียกใช่ได้ทั้ง project
    * `shared/`: เป็น component ที่ใช้ร่วมกันได้ในหลายๆ feature
    * `<feature-name>/`: เป็น component ที่เจาะจงใช้เพียงแค่ feature นั้นๆ
  * `features/`: <TextHighlight text={'generate ได้'} /> เก็บไฟล์ที่เป็น component ที่ไว้ใช้แสดง UI ทั้งหน้า (อาจมาจากการรวมกันของหลายๆ `component`)
  * `pages/`: จัดการ routing path ด้วยการสร้าง folders และ files โดยที่จะเรียก feature มาแสดง ทำให้โอกาศที่จะมีหน้า ที่คล้ายกันหรือซ้ำกัน น้อยลง
  * `hooks/`: <TextHighlight text={'generate ได้'} /> เก็บไฟล์ที่เป็น hook เพื่อใช้ภายใน project
  * `services/`: เก็บไฟล์ที่เกี่ยวกับการเรียกหาข้อมูลภายนอก เช่น `api`, หรือการครอบการใช้งานของ web storage/cookie
  * `stores/`: <TextHighlight text={'generate ได้'} /> เก็บไฟล์ที่เกี่ยวกับ state management
  * `functions/`: <TextHighlight text={'generate ได้'} /> เก็บไฟล์ที่เป็น function สำหรับใช้ร่วมกันใน project
  * `variables/`: <TextHighlight text={'generate ได้'} /> เก็บไฟล์ที่เป็น variable สำหรับใช้ร่วมกันใน project

## รายละเอียด Detail

* `components` และ `features`
  * ทั้งคู่เป็น react component
  * ความแตกต่างคือ หน้าที่การใช้งาน
    * `components`
      * <TextHighlight positive text={ CLASSIFICATION_TERMS.positive.must } /> ใช้เพื่อ สร้างโค้ดที่ไว้ใช้ร่วมกัน
      * <TextHighlight positive text={ CLASSIFICATION_TERMS.positive.must } /> ใช้เพื่อ ลดความซ้ำซ้อนของโค้ด
      * <TextHighlight positive text={ CLASSIFICATION_TERMS.positive.must } /> เป็น โค้ดที่เป็นส่วนหนึ่ง ที่ไว้ใช้ใน feature
    * `features`
      * <TextHighlight positive text={ CLASSIFICATION_TERMS.positive.must } /> ใช้เพื่อแสดง UI โดยประกอบจากหลายๆ `component`
      * <TextHighlight positive text={ CLASSIFICATION_TERMS.positive.should } /> หากมี `feature` ที่ซ้ำกัน ควรแยกเป็น `component`
      * <TextHighlight positive text={ CLASSIFICATION_TERMS.positive.must } /> ใน 1 `feature` จะไม่มีการใช้งาน `feature` อื่น แต่อาจมีการใช้งาน `component` เดียวกัน
  * ทำไมถึงแยก
    * เพื่อจำแนก **จุดประสงค์** การใช้งาน component
    * เพื่อให้ **ง่าย** ต่อการแก้ปัญหา
    * แบบเข้าใจง่าย คือ
      * <TextHighlight positive text={ CLASSIFICATION_TERMS.positive.must } /> `components` ใช้เพื่อ `feature` หรือ เพื่อ `component` ด้วยกัน
      * <TextHighlight positive text={ CLASSIFICATION_TERMS.positive.must } /> `feature` ใช้เพื่อ `page` เท่านั้น
      * <TextHighlight negative text={ CLASSIFICATION_TERMS.negative.must } /> `feature` ใช้เพื่อ `feature` ไม่ได้

* ทำไมถึงแยก `features` และ `pages`
  * มีจุดประสงค์ให้ `pages` เป็นตัวกำหนด url path เท่านั้น
  * หากมีหลาย `page` ที่มี UI หรือวิธีการทำงาน คล้าย/เหมือนกัน จะได้เรียก `feature` ได้เลย ไม่ต้อง copy `page`
  * <TextHighlight negative text={ CLASSIFICATION_TERMS.negative.should } /> ไม่แยกได้ไหม
    * ควรแยกเสมอ เพราะหากเกิดหน้าที่มี url path ที่แยกออกจากกัน แต่การทำงานคล้าย/เหมือนกัน จะทำให้เกิดความซ้ำซ้อนของโค้ด
    * ไม่รองรับการขยายตัวของ project
    * หากทำในภายหลัง จะเกิดการแก้หลายๆอย่าง ซึ่งอาจมีปัญหาตามมา

* `stores` ใช้ทำอะไร
  * <TextHighlight positive text={ CLASSIFICATION_TERMS.positive.must } /> เก็บ `state` ในระดับ `global`
  * <TextHighlight negative text={ CLASSIFICATION_TERMS.negative.optional } /> สามารถเอามาใช้แทนที่ `useState` ได้ แต่ไม่แนะนำ
  * เพื่อความเข้าใจ กรุณา[อ่านเพิ่มเติม](https://medium.com/@r.sipchenko/comparing-react-state-management-solutions-7fc5173111da)

* วิธีคิด
  * <TextHighlight positive text={ CLASSIFICATION_TERMS.positive.must } />  เปรียบเทียบการ แยกกันและรวมกัน ทำอะไร ง่าย/ยาก ขึ้นบ้าง (เหตุผล + ตัวอย่าง)
  * <TextHighlight positive text={ CLASSIFICATION_TERMS.positive.should } /> ถ้าเปลี่ยนชื่อ ชื่อไหน สามารถอ่านและเข้าใจง่าย (ในเชิงภาษาอังกฤษ)
  * <TextHighlight positive text={ CLASSIFICATION_TERMS.positive.should } /> ต้องคิดเรื่องการเรียง ชื่อ หรือไม่
  * <TextHighlight positive text={ CLASSIFICATION_TERMS.positive.must } /> ป้องกันการมี โค้ดซ้ำซ้อน กันอย่างไร
  * <TextHighlight positive text={ CLASSIFICATION_TERMS.positive.should } /> เป็นไปตามมาตรฐาน pattern ใดบ้าง หรือ มีการดัดแปลงอะไรมาบ้าง