show image list, use strong type for data from API

cms/src/routes/+page.server.ts

@@ -13,7 +13,6 @@ export const load: PageServerLoad = async ({fetch}) => {
 	if(!res.ok)
 		throw error(500, 'ไม่สามารถอ่านเนื้อหาหน้าหลักได้');
 	const {content,image} = await res.json()
-	console.log("xxx",image)
 	//Inner function reduce code and able to throw here 
 	async function loadExam(api_path:string,err_msg:string){
 		const res = await fetch(api_path)

cms/src/routes/competitive/+page.server.ts

@@ -4,12 +4,11 @@ import type {CalendarEvent,Exam} from '$lib/data/CMSDataType'
 import dayjs from 'dayjs'
 import type { PageServerLoad } from './$types'
 export const load: PageServerLoad = async ({fetch}) => {
-    let exams:Exam[] = []
 	const res = await fetch(competitiveBase+"/competitive")
 	if(!res.ok)
         throw error(res.status, 'ไม่สามารถอ่านข้อมูลการสอบได้');
-    exams = await res.json()
-    
+        
+    const exams:Exam[] = await res.json()
     const events:CalendarEvent[]=[]
     exams.forEach((ex)=>{
         const {id,title,start,end,category_id} = ex

cms/src/routes/competitive/[id]/+page.server.ts

@@ -1,4 +1,5 @@
 import {competitiveBase} from '$lib/data/CMSDataType'
+import type {Exam} from '$lib/data/CMSDataType'
 import { error } from '@sveltejs/kit'
 import dayjs from 'dayjs'
 import type { PageServerLoad } from './$types'
@@ -11,7 +12,7 @@ export const load: PageServerLoad = async ({params,fetch}) => {
 	if(!res.ok){
 		throw error(500,{message:`พบข้อผิดพลาดเกี่ยวกับข้อมูลสอบคัดเลือก ${id}`})
 	}
-    const post = await res.json()
+    const post:Exam = await res.json()
 	post.date= post.start? dayjs(post.start).format("DD MMM BBBB"):""
     return post
 }

cms/src/routes/competitive/[id]/+page.svelte

@@ -34,12 +34,17 @@
             <div class="">
                 {@html data.detail}
             </div>
+			{#if data.images}
+				{#each data.images as i}
+			<div><img src={i.url} alt={i.title}></div>
+				{/each}
+			{/if}
 			{#if data.files}
 				{#each data.files as file}
-				<hr class="border-blueGray-200 mb-4 mt-4" />
-				<div class="text-lg py-1">
-					<i class="fa-solid fa-bookmark mr-3 text-xs text-blue-400"></i><a href={file.url} class="text-blue-400 hover:text-blue-600"  target="_blank">คลิกที่นี่เพื่ออ่าน </a> <span class="font-medium">{file.title}</span>
-				</div>
+			<hr class="border-blueGray-200 mb-4 mt-4" />
+			<div class="text-lg py-1">
+				<i class="fa-solid fa-bookmark mr-3 text-xs text-blue-400"></i><a href={file.url} class="text-blue-400 hover:text-blue-600"  target="_blank">คลิกที่นี่เพื่ออ่าน </a> <span class="font-medium">{file.title}</span>
+			</div>
 				{/each}
 			{/if}
 			<hr class="border-blueGray-200 my-7" />
@@ -51,5 +56,4 @@
 			</div>
         </div>
     </div>
-
 </section>

cms/src/routes/qualifying/+page.server.ts

@@ -4,11 +4,10 @@ import type {CalendarEvent,Exam} from '$lib/data/CMSDataType'
 import dayjs from 'dayjs'
 import type { PageServerLoad } from './$types'
 export const load: PageServerLoad = async ({fetch}) => {
-    let exams:Exam[] = []
 	const res = await fetch(qualifyingBase+"/qualifying")
 	if(!res.ok)
         throw error(res.status, 'ไม่สามารถอ่านข้อมูลการสอบได้');
-    exams = await res.json()
+    const exams:Exam[] = await res.json()
     
     const events:CalendarEvent[]=[]
     exams.forEach((ex)=>{

cms/src/routes/qualifying/[id]/+page.server.ts

@@ -1,4 +1,5 @@
 import {qualifyingBase} from '$lib/data/CMSDataType'
+import type {Exam} from '$lib/data/CMSDataType'
 import { error } from '@sveltejs/kit'
 import dayjs from 'dayjs'
 import type { PageServerLoad } from './$types'
@@ -11,7 +12,7 @@ export const load: PageServerLoad = async ({params,fetch}) => {
 	if(!res.ok){
 		throw error(500,{message:`พบข้อผิดพลาดเกี่ยวกับข้อมูลสอบคัดเลือก ${id}`})
 	}
-    const post = await res.json()
+    const post:Exam = await res.json()
 	post.date= post.start? dayjs(post.start).format("DD MMM BBBB"):""
     return post
 }

cms/src/routes/qualifying/[id]/+page.svelte

@@ -34,12 +34,18 @@
             <div class="">
                 {@html data.detail}
             </div>
+			{#if data.images}
+				{#each data.images as i}
+			<div><img src={i.url} alt={i.title}></div>
+				{/each}
+			{/if}
+
 			{#if data.files}
 				{#each data.files as file}
-				<hr class="border-blueGray-200 mb-4 mt-4" />
-				<div class="text-lg py-1">
-					<i class="fa-solid fa-bookmark mr-3 text-xs text-blue-400"></i><a href={file.url} class="text-blue-400 hover:text-blue-600"  target="_blank">คลิกที่นี่เพื่ออ่าน </a> <span class="font-medium">{file.title}</span>
-				</div>
+			<hr class="border-blueGray-200 mb-4 mt-4" />
+			<div class="text-lg py-1">
+				<i class="fa-solid fa-bookmark mr-3 text-xs text-blue-400"></i><a href={file.url} class="text-blue-400 hover:text-blue-600"  target="_blank">คลิกที่นี่เพื่ออ่าน </a> <span class="font-medium">{file.title}</span>
+			</div>
 				{/each}
 			{/if}
 			<hr class="border-blueGray-200 my-7" />