คู่มือการใช้งาน LullaWake

เพื่อนคู่ใจปลุกคุณอย่างอ่อนโยน

✨ คุณสมบัติหลัก

ตั้งปลุกได้หลายรายการ

ตั้งนาฬิกาปลุกได้มากเท่าที่คุณต้องการ

ปรับแต่งการปลุกซ้ำ

เลือกวันที่ต้องการให้ปลุกซ้ำในแต่ละสัปดาห์ หรือตั้งเป็นปลุกครั้งเดียว

ปลุกอย่างนุ่มนวล (Gentle Wake)

ค่อยๆ เพิ่มระดับเสียงปลุกตามระยะเวลาที่กำหนดได้ (0-30 นาที)

เสียงปลุกหลากหลาย

เลือกเสียงปลุกที่ฟังสบายได้จากรายการ

Snooze & Stop

ฟังก์ชัน snooze (10 นาที) และปุ่มหยุดเพื่อปิดการปลุก

การสั่น

อุปกรณ์จะสั่นเมื่อนาฬิกาปลุกดัง (สำหรับอุปกรณ์ที่รองรับ)

🛠️ การทำงาน

การจัดการ State

State หลักของแอปพลิเคชัน รวมถึงรายการนาฬิกาปลุก (alarms) ถูกจัดการใน src/app/page.tsx โดยใช้ useState ของ React

การตรวจสอบนาฬิกาปลุก

useEffect ใน page.tsx จะตั้งค่า interval เพื่อเรียกใช้ฟังก์ชัน checkAlarms ทุกๆ วินาที

คอมโพเนนต์ Ringer

เมื่อนาฬิกาปลุกดัง จะเล่นเสียงปลุกที่เลือกไว้, จัดการคุณสมบัติ Gentle Wake, และมีปุ่ม Snooze และ Stop

handleSnooze & handleStop

จัดการการเลื่อนปลุก (10 นาที) และการหยุดปลุก (ปิดใช้งานหรือเลื่อนชั่วคราวเพื่อป้องกันการปลุกซ้ำ)

📂 โครงสร้างโปรเจกต์

src/app/page.tsx

คอมโพเนนต์หน้าหลักที่เก็บโค้ดส่วนใหญ่เกี่ยวกับการจัดการนาฬิกาปลุก

src/components/

ประกอบด้วยคอมโพเนนต์ React ทั้งหมด เช่น AlarmItem, AlarmForm, Ringer

src/lib/

ประกอบด้วยฟังก์ชันเสริม, การกำหนดประเภทข้อมูล (types), และข้อมูลคงที่ (sounds.ts)

public/sounds/alarm/

ประกอบด้วยไฟล์เสียงปลุก