ต่อจากสิ่งที่สร้างใน Day 2
หลังจบ Day 2 Project ของเรามี:
- ส่วนของหน้าจอที่แยกใช้ซ้ำได้ (Component):
IssueForm,IssueListและStatusBadge - Type ที่กำหนดรูปแบบข้อมูล และข้อมูลตัวอย่าง (Mock Data) ที่แยกเป็นไฟล์กลาง
- หน้า
/,/issues,/issues/newและ/issues/[id] - เมนูนำทางที่ใช้ร่วมกันทุกหน้าผ่าน
app/layout.tsx - CSS ที่เขียนเอง (Custom CSS) ทั้งหมดอยู่ใน
app/globals.css
Project ทำงานได้แล้ว แต่เมื่อ Component เพิ่มขึ้น CSS กลางจะยาวขึ้นและต้องสลับไฟล์ไปมาระหว่าง TSX กับ CSS
ชั่วโมงนี้จะเริ่มใช้ Tailwind กำหนดหน้าตาเว็บใกล้กับโค้ดของแต่ละส่วน โดยยังไม่เปลี่ยนข้อมูลหรือการทำงานของระบบ