// 🚩 절대 이렇게 하지 마세요
const user = await response.json() as User;

npm install zod @tanstack/react-query

import { z } from "zod";

// 1️⃣ 스키마 정의 (런타임 규칙)
const UserSchema = z.object({
  id: z.string().uuid(),
  username: z.string().min(3),
  email: z.string().email(),
  // 2026 표준: API는 지저분해요, 옵셔널 필드는 우아하게!
  avatarUrl: z.string().url().optional(),
  role: z.enum(["admin", "user", "intern_who_broke_prod"]),
});

// 2️⃣ 타입 추론 (컴파일 타임 규칙)
// 인터페이스 수동 작성 필요 없음! Zod가 해줍니다.
type User = z.infer<typeof UserSchema>;

const fetchUser = async (userId: string): Promise<User> => {
  const res = await fetch(`/api/users/${userId}`);

  if (!res.ok) {
    throw new Error(`API exploded with status: ${res.status}`);
  }

  const rawData = await res.json();

  // 🪄 마법의 순간!
  // rawData가 스키마와 맞지 않으면 여기서 에러를 던집니다.
  // "undefined" 에러가 UI까지 전파되는 것을 효과적으로 차단!
  return UserSchema.parse(rawData);
};

const TransactionSchema = z.object({
  id: z.string(),
  // 백엔드는 ISO 문자열을 보냄: "2026-05-20T10:00:00Z"
  timestamp: z.string().datetime(),
  // 백엔드는 센트(정수)를 보냄: 1500
  amountInCents: z.number(),
}).transform((data) => ({
  ...data,
  // ⚡ 여기서 변환 발생!
  // UI는 진짜 Date 객체를 받음
  date: new Date(data.timestamp),
  // UI는 포맷팅된 문자열을 받음: "$15.00"
  formattedAmount: new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD'
  }).format(data.amountInCents / 100),
}));

type Transaction = z.infer<typeof TransactionSchema>;

// 이제 컴포넌트는 'date'를 Date 객체로 취급합니다.
// JSX 안에서 날짜 파싱 필요 없음! 🎉

const SafeProductList = z.array(
  ProductSchema.catch((ctx) => {
    console.error("Failed to parse product:", ctx.error);
    // 폴백 반환 또는 나중에 필터링할 'invalid' 심볼 반환
    return { id: "invalid", name: "Corrupted Data", price: 0 };
  })
);

// 더 좋은 방법: 파이프라인으로 자동 필터링!
const ResilientList = z.array(z.any())
  .transform((items) => {
    return items
      .map(item => ProductSchema.safeParse(item))
      .filter(result => result.success) // 🗑️ 쓰레기는 버리고
      .map(result => result.data);      // 💎 금만 남기기
  });

import { useQuery } from "@tanstack/react-query";

export const useUser = (userId: string) => {
  return useQuery({
    queryKey: ["user", userId],
    queryFn: () => fetchUser(userId),
    // 2026 모범 사례: Zod 에러에서는 재시도하지 마세요!
    // 스키마가 틀리면, 재시도해도 데이터 구조가 고쳐지지 않습니다.
    retry: (failureCount, error) => {
      if (error instanceof z.ZodError) return false;
      return failureCount < 3;
    },
  });
};