refactor: decouple BillCard from model

[Th1nkK1D]

If anyone prefer English, we are happy to translate and discuss in English with you 😄

จุดประสงค์

• ในตอนนี้เรา import model (TypeScript interface) ที่ถูกออกแบบไว้ตั้งแต่ต้นมาอ้างอิงใน shared component ทำให้ props ต่างๆ ของ component couple กับ model มากจนเกินไป เมื่อโปรเจคเริ่มเกิดความเปลี่ยนแปลง เราพบผลเสียที่ตามมาคือ
  • หาก structure ของ data source หรือตัว model มีความเปลี่ยนแปลง เราต้องแก้ไขโค้ดในระดับ component ด้วย
  • บาง component อ้างอิง props type ด้วย model แต่ใช้แค่บาง property ใน interface นั้น ทำให้มีการส่งข้อมูลลงมาที่ component มากกว่าที่จำเป็น ส่งผลเสียต่อ performance
• ดังนั้นแล้วเราจึงต้องทำการ refactor: decouple shared component และ model ออกจากกัน เพื่อแก้ปัญหาทั้งสองข้อข้างต้น และปูทางไปสู่การปรับ data source ของโปรเจคในปีนี้

Scope ของ issue นี้

เริ่มต้นที่

• src/components/BillCard/BillCard.svelte

สิ่งที่ต้องทำ

• อ่าน README เพื่อทำความเข้าใจโปรเจค
• ลบการ import type จาก /models และ +page.server (ยกเว้น enum ที่ทำหน้าที่เป็น constant ไม่ใช่ data structure)
• ปรับ props และ type ของ props ให้เหมาะสมกับหน้าที่ component นั้นๆ รับเฉพาะข้อมูลที่จำเป็น
• อัพเดต story file (.story.svelte ที่ใช้ชื่อเดียวกัน) และทดสอบใน Histoire (yarn story:dev) ว่าใช้งานได้ถูกต้อง UI ตรงกับ https://parliament-watch.pages.dev/stories/
• ปรับ component อื่นๆ ที่ใช้ component นี้ให้ส่ง props อย่างถูกต้อง
• สามารถใช้ yarn run check เพื่อตรวจสอบ error ของ type จากทั้งโปรเจคได้ว่ามีส่วนไหนที่ตกหล่นหรือไม่