RecipeCard และ 4 สถานะของหน้า — ปกติ · ว่าง · กำลังโหลด · error

# npx next build
▲ Next.js 16.3.5 (Turbopack)
✓ Compiled successfully in 938ms
  Running TypeScript ...
  Finished TypeScript in 793ms ...
✓ Generating static pages using 6 workers (5/5) in 210ms
└ ƒ /recipes

# เวอร์ชันจริงบนเครื่องที่ใช้ตรวจ (อ่านจาก node_modules)
next            16.3.5
react           19.2.8
typescript      5.9.3
tailwindcss     4.3.3
@base-ui/react  1.8.0
shadcn          4.21.0
node            v24.14.0

1 · อ่านดีไซน์ให้ออก ก่อนเขียน type ของ props

สไลด์หน้า 42 คือภาพหน้า All Recipes ของจริง — การ์ดเรียงสี่คอลัมน์ · สไลด์หน้า 45 ซูมเข้าไปที่การ์ดใบเดียว แล้วไล่ว่าการ์ดหนึ่งใบต้องรู้อะไรบ้าง (ในสไลด์เรียกว่า DESIGN PROPERTIES):

• Recipe name / image / level
• Owner: owner image / owner name
• Rating: rating / rating count
• Is favorite? · onFavorite · onClick

แล้วสไลด์หน้า 46 ทำสิ่งที่สำคัญมาก — หัวข้อเปลี่ยนเป็น DESIGN PROPERTIES FOCUSED และทำตัวอักษรให้จางลงสามรายการ: owner image · Is favorite? · onFavorite
แปลว่า "รอบนี้ยังไม่ทำ" · ดีไซน์วาดไว้ครบ แต่งานรอบแรกเลือกทำเฉพาะที่จำเป็นก่อน

ทีนี้แปลงรายการนั้นเป็นตาราง โดยถามทีละช่องว่า "ถ้าช่องนี้ไม่มี การ์ดยังวาดได้ไหม?"

สังเกตอีกเรื่อง: การ์ดในสไลด์หน้า 42 มีป้ายเวลา (25 min) อยู่มุมรูป แต่รายการในหน้า 45 ไม่มีเวลา และการ์ดตัวอย่างในหน้า 45 ก็ไม่มีป้ายนั้น · บทนี้ยึดรายการในหน้า 45–46 · ถ้าเจอแบบนี้ในงานจริง ให้ถามคนออกแบบ อย่าเดาเอง

เขียนตารางข้างบนออกมาเป็นโค้ด — ? หลังชื่อ field แปลว่า "ไม่มีก็ได้":

// components/RecipeCard/RecipeCard.tsx (ส่วน type)
export type RecipeLevel = "EASY" | "MEDIUM" | "HARD";

export type RecipeSummary = {
  id: number;
  name: string;
  imageUrl?: string; // ยังไม่มีรูปจริง → แสดง placeholder
  level: RecipeLevel;
  ownerName: string;
  rating: number;
  ratingCount: number;
};

export type RecipeCardProps = {
  recipe: RecipeSummary;
  onClick?: (id: number) => void;
};

ทำไมแยกเป็นสองชั้น (RecipeSummary อยู่ข้างใน RecipeCardProps)? เพราะโค้ดตัวอย่างในสไลด์หน้า 45 เรียกการ์ดแบบนี้ — ส่งสูตรทั้งก้อนเป็น prop เดียวชื่อ recipe:

// จากสไลด์หน้า 45 (ส่วนที่ยังใช้ในรอบนี้)
<RecipeCard
  recipe={recipe}
/>

ข้อมูลของสูตร (RecipeSummary) กับสิ่งที่การ์ดรับเพิ่ม (onClick) จึงแยกกันชัด · วันที่หน้าอื่นต้องใช้ข้อมูลสูตรแบบเดียวกัน ก็ import RecipeSummary ไปได้เลย โดยไม่ต้องลาก onClick ติดไปด้วย

ช่องที่ติดป้าย "ต้องมี" ต้องมีจริง — ผมลองลบ ratingCount ออกจากข้อมูลตัวอย่างหนึ่งแถว:

app/recipes/mock.ts(4,3): error TS2741: Property 'ratingCount' is missing in type
  '{ id: number; name: string; level: "EASY"; ownerName: string; rating: number; }'
  but required in type 'RecipeSummary'.

ส่วนรูปที่ยังไม่มี — การ์ดเช็คก่อนว่ามี imageUrl ไหม ถ้าไม่มีก็วาดกล่องสีเทาแทน เหมือนภาพ dish photo ในสไลด์:

// components/RecipeCard/RecipeCard.tsx (ส่วนที่เหลือ)
"use client";

import { Badge } from "@/components/ui/badge";
import { Card } from "@/components/ui/card";

// … type ทั้งสามตัวข้างบน …

const levelLabel: Record<RecipeLevel, string> = {
  EASY: "Easy",
  MEDIUM: "Medium",
  HARD: "Hard",
};

const RecipeCard = ({ recipe, onClick }: RecipeCardProps) => {
  return (
    <Card className="pt-0" onClick={() => onClick?.(recipe.id)}>
      {recipe.imageUrl ? (
        // eslint-disable-next-line @next/next/no-img-element
        <img src={recipe.imageUrl} alt={recipe.name} className="aspect-4/3 object-cover" />
      ) : (
        <div className="flex aspect-4/3 items-center justify-center bg-muted text-xs text-muted-foreground">
          dish photo — {recipe.name}
        </div>
      )}
      <div className="flex flex-col gap-2 px-4">
        <h3 className="line-clamp-2 font-medium">{recipe.name}</h3>
        <p className="text-muted-foreground">{recipe.ownerName}</p>
        <div className="flex items-center justify-between">
          <Badge variant="secondary">{levelLabel[recipe.level]}</Badge>
          <span>
            ★ {recipe.rating.toFixed(1)} ({recipe.ratingCount})
          </span>
        </div>
      </div>
    </Card>
  );
};

export default RecipeCard;

สามจุดที่อาจสะดุด:
· aspect-4/3 มาจากคำอธิบายในสไลด์หน้า 45 ที่เขียนว่ารูปเป็น 4:3 · line-clamp-2 มาจากประโยค title at two lines max ในหน้าเดียวกัน
· onClick?.(recipe.id) — ?. แปลว่า "ถ้ามี onClick ค่อยเรียก ถ้าไม่มีก็ข้ามไป" ไม่ error
· บรรทัด eslint-disable ปิดคำเตือนของ Next.js ที่อยากให้ใช้ <Image> แทน <img> — ตอนนี้ยังไม่มีรูปจริงให้ตั้งค่า เลยใช้ <img> ธรรมดาไปก่อน
ส่วน "use client" บรรทัดแรก มีเหตุผลเฉพาะ — หัวข้อ 4 จะรันให้ดูว่าเกิดอะไรขึ้นถ้าลืมคิดเรื่องนี้

2 · กับดัก: level เป็น string อิสระ หรือ union ของสามคำ

ป้ายระดับความยากในการ์ดมีได้แค่สามค่า — Easy · Medium · Hard · แต่ท่าที่มือใหม่เขียนบ่อยที่สุดคือ level: string เพราะ "มันก็เป็นข้อความนี่"
ลองดูว่าถ้าเขียนแบบนั้น แล้วพิมพ์ผิดหนึ่งตัวในข้อมูล จะเกิดอะไรขึ้น

// เปลี่ยน type เป็น string (และ levelLabel ต้องเปลี่ยนตาม ไม่งั้นได้ TS7053)
export type RecipeSummary = {
  // …
  level: string;
};
const levelLabel: Record<string, string> = { EASY: "Easy", MEDIUM: "Medium", HARD: "Hard" };

// app/recipes/mock.ts — พิมพ์ Y เกินมาหนึ่งตัว
{ id: 1, name: "Thai basil chicken with a crisp fried egg", level: "EASYY", /* … */ },

$ curl -s http://localhost:3000/recipes
<h3>Thai basil chicken with a crisp fried egg</h3><p>Ornuma K.</p>
<div><span data-slot="badge" data-variant="secondary"></span><span>★ <!-- -->4.9<!-- --> (<!-- -->312<!-- -->)</span></div>
…
<span data-slot="badge" data-variant="secondary">Medium</span>
…
<span data-slot="badge" data-variant="secondary">Hard</span>

ทีนี้กลับไปใช้ type แบบในหัวข้อ 1 — level: RecipeLevel ซึ่งคือ "EASY" | "MEDIUM" | "HARD" — แล้วใส่ข้อมูลที่พิมพ์ผิดตัวเดิม:

app/recipes/mock.ts(4,63): error TS2820: Type '"EASYY"' is not assignable to type 'RecipeLevel'.
  Did you mean '"EASY"'?

ฟ้องทันที พร้อมเดาให้ด้วยว่าตั้งใจพิมพ์ "EASY" · และถ้าใครไปเปลี่ยน level กลับเป็น string แต่ลืมแก้ levelLabel ก็ติดอีกด่าน:

components/RecipeCard/RecipeCard.tsx(44,39): error TS7053: Element implicitly has an 'any' type
  because expression of type 'string' can't be used to index type 'Record<RecipeLevel, string>'.
  No index signature with a parameter of type 'string' was found on type 'Record<RecipeLevel, string>'.

3 · หน้าเดียวมี 4 สถานะ — มือใหม่มักทำแค่สถานะแรก

กลับไปดูมุมขวาบนของสไลด์หน้า 42 — มีปุ่มสลับเขียนว่า STATE: Default · Loading · Empty · Error และแถบซ้ายของสไลด์ไล่รายการเดียวกันไว้
หน้า 42 โชว์สถานะ Default (มีการ์ดเต็มหน้า) · หน้า 43 กดไปที่ Empty — ได้ไอคอนแว่นขยาย ข้อความ No recipes match your search และปุ่ม Clear filters พร้อมบรรทัดใต้หัวข้อที่เปลี่ยนเป็น 0 recipes found และประโยคแนะนำให้ลองค้นด้วยชื่อที่สั้นลง · (สไลด์ไม่ได้โชว์ภาพของ Loading กับ Error)

ประเด็นคือคนออกแบบวาดไว้ครบสี่แบบ — เพราะผู้ใช้จริงเจอครบสี่แบบ:

ท่าที่เขียนกันบ่อยคือเก็บสถานะเป็นตัวแปรแยกหลายตัว (isLoading · error · recipes) · ปัญหาคือมันยอมให้เกิดสถานะที่เป็นไปไม่ได้ — กำลังโหลด และ error และ มีข้อมูลพร้อมกัน · ผมเขียนสองแบบในไฟล์เดียวกันแล้วรัน tsc:

type FlagState = {
  isLoading: boolean;
  error?: string;
  recipes: RecipeSummary[];
};
const flags: FlagState = {
  isLoading: true,
  error: "Could not load recipes",
  recipes: mockRecipes,
};

const union: RecipeListState = {
  status: "loading",
  recipes: mockRecipes,
};

error TS2353: Object literal may only specify
  known properties, and 'recipes' does not exist
  in type '{ status: "loading"; }'.

RecipeListState หน้าตาแบบนี้ — union สามแบบ แต่ละแบบมีช่อง status เป็นป้ายบอกว่าตัวเองคือแบบไหน และมีเฉพาะช่องที่สถานะนั้นต้องใช้:

// components/RecipeList/RecipeList.tsx
import Link from "next/link";
import { RecipeCard, type RecipeSummary } from "@/components/RecipeCard";
import { Skeleton } from "@/components/ui/skeleton";

export type RecipeListState =
  | { status: "loading" }
  | { status: "error"; message: string }
  | { status: "success"; recipes: RecipeSummary[] };

const RecipeList = ({ state }: { state: RecipeListState }) => {
  if (state.status === "loading") {
    return (
      <div className="grid grid-cols-4 gap-4" aria-busy="true">
        {Array.from({ length: 4 }, (_, i) => (
          <Skeleton key={i} className="aspect-3/4" />
        ))}
      </div>
    );
  }

  if (state.status === "error") {
    return (
      <div role="alert" className="py-16 text-center">
        <h3 className="font-medium">Something went wrong</h3>
        <p className="text-muted-foreground">{state.message}</p>
        <Link href="/recipes">Try again</Link>
      </div>
    );
  }

  // มาถึงบรรทัดนี้ได้ = status ต้องเป็น "success" แน่นอน → state.recipes ใช้ได้
  if (state.recipes.length === 0) {
    return (
      <div className="py-16 text-center">
        <h3 className="font-medium">No recipes match your search</h3>
        <Link href="/recipes">Clear filters</Link>
      </div>
    );
  }

  return (
    <div className="grid grid-cols-4 gap-4">
      {state.recipes.map((recipe) => (
        <RecipeCard key={recipe.id} recipe={recipe} />
      ))}
    </div>
  );
};

export default RecipeList;

สังเกตว่าไม่มี status: "empty" · "ว่าง" คือ "โหลดสำเร็จแต่ได้ลิสต์ยาว 0" — ถ้าแยกเป็นสถานะที่สี่ จะเขียน { status: "success", recipes: [] } ได้อยู่ดี แล้วต้องมานั่งเถียงว่าอันไหนถูก · ให้ความยาวของลิสต์เป็นตัวตัดสินที่เดียวดีกว่า
และ Skeleton ของ shadcn เปิดไฟล์ดูแล้วเป็นแค่ <div> ที่มี class animate-pulse rounded-md bg-muted — กล่องสีเทากะพริบเบา ๆ ที่กินที่เท่ากับของจริง พอข้อมูลมาหน้าจะไม่กระตุก

สุดท้ายคือหน้าที่เรียกใช้ · เพื่อให้สลับดูทั้ง 4 สถานะได้เหมือนปุ่ม STATE ในสไลด์ ผมให้หน้าอ่านค่า ?state= จาก URL (ข้อมูลยังเป็นของปลอม — ต่อ API จริงเป็นเรื่องของบทหลัง):

// app/recipes/page.tsx
import { RecipeList, type RecipeListState } from "@/components/RecipeList";
import { mockRecipes } from "./mock";

const pickState = (state?: string): RecipeListState => {
  if (state === "loading") return { status: "loading" };
  if (state === "error") return { status: "error", message: "Could not load recipes" };
  if (state === "empty") return { status: "success", recipes: [] };
  return { status: "success", recipes: mockRecipes };
};

export default async function RecipesPage({
  searchParams,
}: {
  searchParams: Promise<{ state?: string }>;
}) {
  const { state } = await searchParams;
  return (
    <main className="mx-auto max-w-5xl p-8">
      <h1 className="text-2xl font-bold">All Recipes</h1>
      <RecipeList state={pickState(state)} />
    </main>
  );
}

(index.ts ของ components/RecipeCard/ และ components/RecipeList/ เป็น barrel แบบเดียวกับบทเรียน 71 หัวข้อ 4 · app/recipes/mock.ts คือ array ของ RecipeSummary สามสูตรแรกในสไลด์หน้า 45)

ผลรันจริง — npx next build แล้ว npx next start แล้ว curl ทีละสถานะ (ตัด class ออก):

$ curl -s "http://localhost:3000/recipes"                  # Default
<main><h1>All Recipes</h1><div><div data-slot="card" data-size="default"><div>dish photo — <!-- -->Thai basil chicken with a crisp fried egg</div><div><h3>Thai basil chicken with a crisp fried egg</h3><p>Ornuma K.</p><div><span data-slot="badge" data-variant="secondary">Easy</span><span>★ <!-- -->4.9<!-- --> (<!-- -->312<!-- -->)</span></div></div></div>
  … การ์ดอีกสองใบ (Medium · Hard) โครงเดียวกัน …
</div></main>

$ curl -s "http://localhost:3000/recipes?state=empty"      # Empty
<main><h1>All Recipes</h1><div><h3>No recipes match your search</h3><a href="/recipes">Clear filters</a></div></main>

$ curl -s "http://localhost:3000/recipes?state=loading"    # Loading
<main><h1>All Recipes</h1><div aria-busy="true"><div data-slot="skeleton"></div><div data-slot="skeleton"></div><div data-slot="skeleton"></div><div data-slot="skeleton"></div></div></main>

$ curl -s "http://localhost:3000/recipes?state=error"      # Error
<main><h1>All Recipes</h1><div role="alert"><h3>Something went wrong</h3><p>Could not load recipes</p><a href="/recipes">Try again</a></div></main>

นับจาก HTML ที่ได้: Default มี data-slot="card" 3 ใบ · Loading มี data-slot="skeleton" 4 กล่อง และการ์ด 0 ใบ · Empty กับ Error ไม่มีทั้งการ์ดและ skeleton — component ตัวเดียว ได้ HTML สี่แบบที่ไม่ซ้ำกันเลย

ประโยชน์ที่ใหญ่ที่สุดของ union คือตอนเพิ่มสถานะใหม่ · สมมติวันหนึ่งมีคนเพิ่ม | { status: "idle" } (ยังไม่เริ่มค้นหา) แต่ลืมเขียน if รองรับ:

components/RecipeList/RecipeList.tsx(33,13): error TS2339: Property 'recipes' does not exist on type
  '{ status: "idle"; } | { status: "success"; recipes: RecipeSummary[]; }'.
  Property 'recipes' does not exist on type '{ status: "idle"; }'.
components/RecipeList/RecipeList.tsx(44,14): error TS2339: Property 'recipes' does not exist on type
  '{ status: "idle"; } | { status: "success"; recipes: RecipeSummary[]; }'.
  Property 'recipes' does not exist on type '{ status: "idle"; }'.
components/RecipeList/RecipeList.tsx(44,27): error TS7006: Parameter 'recipe' implicitly has an 'any' type.

TypeScript ชี้ตรงบรรทัดที่ยังคิดว่า "มาถึงตรงนี้ต้องเป็น success แน่" · ถ้าใช้ตัวแปรแยกแบบ isLoading / error จะไม่มีอะไรฟ้องเลย

แต่ union ก็ไม่ได้กันทุกอย่าง — มีความผิดพลาดแบบหนึ่งที่มันมองไม่เห็น:

// ลบก้อน if ของ Empty ทิ้งทั้งก้อน (9 บรรทัด) ไม่แตะอย่างอื่น
  if (state.status === "error") { /* … เหมือนเดิม … */ }

  // ❌ ก้อน if (state.recipes.length === 0) หายไป

  return (
    <div className="grid grid-cols-4 gap-4">
      {state.recipes.map((recipe) => ( /* … */ ))}
    </div>
  );

$ curl -s "http://localhost:3000/recipes?state=empty"
<main class="mx-auto max-w-5xl p-8"><h1 class="text-2xl font-bold">All Recipes</h1><div class="grid grid-cols-4 gap-4"></div></main>

4 · ทำไม RecipeCard ต้องมี "use client" — และกับดักตอนส่ง onClick

RecipeCard มี onClick ซึ่งคือการตอบสนองต่อการกดของผู้ใช้ — เกิดขึ้นในเบราว์เซอร์ · มันจึงต้องเป็น Client Component (บรรทัด "use client") เหมือน component ที่ใช้ hook ในบทเรียน 73
ส่วน RecipeList กับ page.tsx ไม่มี "use client" — พวกมันรันบน server

ทีนี้ ถ้าอยากให้การ์ดกดได้ ท่าที่มือใหม่เขียนเป็นอย่างแรกคือส่งฟังก์ชันจาก RecipeList ลงไปตรง ๆ:

// components/RecipeList/RecipeList.tsx — ไฟล์นี้ไม่มี "use client"
<RecipeCard key={recipe.id} recipe={recipe} onClick={(id) => console.log(id)} />

$ npx tsc --noEmit          # exit 0 — ไม่ฟ้อง
$ npx next build            # ✓ Compiled successfully · └ ƒ /recipes
$ curl -s -o /dev/null -w "%{http_code}\n" http://localhost:3000/recipes
500

⨯ Error: Event handlers cannot be passed to Client Component props.
  <... recipe={{...}} onClick={function onClick}>
                              ^^^^^^^^^^^^^^^^^^
If you need interactivity, consider converting part of this to a Client Component.

5 · ภารกิจ — เพิ่ม owner image ที่สไลด์พักไว้

// components/RecipeCard/RecipeCard.tsx — ส่วนที่เพิ่ม
export type RecipeSummary = {
  // …
  ownerName: string;
  ownerImageUrl?: string;
  // …
};

const initials = (name: string) =>
  name
    .split(" ")
    .map((word) => word[0])
    .join("")
    .slice(0, 2)
    .toUpperCase();

// แทนบรรทัด <p className="text-muted-foreground">{recipe.ownerName}</p> ด้วย:
<div className="flex items-center gap-2">
  {recipe.ownerImageUrl ? (
    // eslint-disable-next-line @next/next/no-img-element
    <img src={recipe.ownerImageUrl} alt="" className="size-6 rounded-full" />
  ) : (
    <span className="flex size-6 items-center justify-center rounded-full bg-muted text-xs">
      {initials(recipe.ownerName)}
    </span>
  )}
  <span className="text-muted-foreground">{recipe.ownerName}</span>
</div>

// app/recipes/mock.ts — สูตรที่สาม
{ id: 3, name: "Grandmother's coconut pandan custard", level: "HARD", ownerName: "June P.", ownerImageUrl: "/june.png", rating: 4.8, ratingCount: 96 },

$ curl -s http://localhost:3000/recipes
<h3>Thai basil chicken with a crisp fried egg</h3><div><span>OK</span><span>Ornuma K.</span></div>
<h3>Slow-simmered massaman beef curry</h3><div><span>NC</span><span>Nok Charoen</span></div>
<h3>Grandmother&#x27;s coconut pandan custard</h3><div><img src="/june.png" alt=""/><span>June P.</span></div>

6 · สรุปบทนี้

อ้างอิง

• TypeScript Handbook — Narrowing — อ่านหัวข้อย่อย Discriminated unions · ตัวอย่างใน handbook ใช้รูปทรง (circle / square) แทนสถานะหน้า แต่หลักเดียวกับ RecipeListState เป๊ะ — ช่องร่วมที่เป็นคำตายตัว แล้ว if ตามช่องนั้น
• TypeScript Handbook — Literal Types — อ่านหัวข้อ Literal Types ถึงตัวอย่างที่ประกาศ "left" | "right" | "center" · คือท่าเดียวกับ RecipeLevel ในหัวข้อ 2
• React — Conditional Rendering — อ่านหัวข้อ Conditionally returning JSX · ท่า if (…) return … หลายชั้นที่ RecipeList ใช้แยก 4 สถานะ
• shadcn/ui — Skeleton — ดูตัวอย่างโค้ดบนสุดของหน้า ว่าเขาต่อกล่อง Skeleton หลายอันให้เป็นรูปการ์ดยังไง · แล้วเปิด components/ui/skeleton.tsx ในโปรเจกต์ของคุณเทียบ จะเห็นว่ามันเป็นแค่ <div> หนึ่งอัน
• Next.js — Server and Client Components — อ่านส่วนที่พูดเรื่องการส่งข้อมูลจาก Server Component ไป Client Component ที่บอกว่า props ต้อง serializable · คือเหตุผลของ error 500 ในหัวข้อ 4