조건부 렌더링과 리스트 — 동적 UI 패턴

function UserBadge({ isAdmin, isPremium }: { isAdmin: boolean; isPremium: boolean }) {
    // 1. if/else (렌더 밖)
    if (isAdmin) {
        return <span className="badge-admin">관리자</span>;
    }

    // 2. 삼항 연산자
    return (
        <span className={isPremium ? "badge-premium" : "badge-free"}>
            {isPremium ? "프리미엄" : "무료"}
        </span>
    );
}

function Notification({ count, message }: { count: number; message?: string }) {
    return (
        <div>
            {/* count > 0일 때만 렌더링 */}
            {count > 0 && <span className="badge">{count}</span>}

            {/* 주의: 0은 렌더링됨! */}
            {/* ❌ */ count && <span>{count}</span>}
            {/* ✅ */ count > 0 && <span>{count}</span>}

            {/* 메시지가 있을 때만 */}
            {message && <p>{message}</p>}
        </div>
    );
}

function Profile({ user }: { user?: { name: string; bio?: string } }) {
    return (
        <div>
            <h2>{user?.name ?? "익명"}</h2>
            <p>{user?.bio ?? "소개글이 없습니다."}</p>
        </div>
    );
}

type LoadState = "idle" | "loading" | "success" | "error";

function DataView({ state, data, error }: {
    state: LoadState;
    data: string[] | null;
    error: string | null;
}) {
    // switch나 객체 맵으로 처리
    const content = {
        idle: <p>조회 버튼을 눌러주세요.</p>,
        loading: <Spinner />,
        success: <DataList items={data ?? []} />,
        error: <ErrorMessage message={error ?? "알 수 없는 오류"} />,
    }[state];

    return <div className="container">{content}</div>;
}

interface Product {
    id: string;
    name: string;
    price: number;
    inStock: boolean;
}

function ProductList({ products }: { products: Product[] }) {
    if (products.length === 0) {
        return <p>상품이 없습니다.</p>;
    }

    return (
        <ul>
            {products.map(product => (
                <li key={product.id}>           {/* key 필수! */}
                    <span>{product.name}</span>
                    <span>{product.price.toLocaleString()}원</span>
                    {!product.inStock && <span>품절</span>}
                </li>
            ))}
        </ul>
    );
}

// ❌ 인덱스를 key로 사용
items.map((item, index) => <li key={index}>{item}</li>)

// ✅ 고유 ID를 key로 사용
items.map(item => <li key={item.id}>{item.name}</li>)

function FilteredList({ items }: { items: Product[] }) {
    const [filter, setFilter] = useState<"all" | "inStock">("all");
    const [sortBy, setSortBy] = useState<"name" | "price">("name");

    const displayed = items
        .filter(item => filter === "all" || item.inStock)
        .sort((a, b) => {
            if (sortBy === "name") return a.name.localeCompare(b.name);
            return a.price - b.price;
        });

    return (
        <div>
            <select onChange={e => setFilter(e.target.value as "all" | "inStock")}>
                <option value="all">전체</option>
                <option value="inStock">재고 있음</option>
            </select>
            <ul>
                {displayed.map(item => (
                    <li key={item.id}>{item.name} — {item.price}원</li>
                ))}
            </ul>
        </div>
    );
}

interface Category {
    id: string;
    name: string;
    items: Product[];
}

function CategoryList({ categories }: { categories: Category[] }) {
    return (
        <div>
            {categories.map(category => (
                <section key={category.id}>
                    <h2>{category.name}</h2>
                    <ul>
                        {category.items.map(item => (
                            <li key={item.id}>{item.name}</li>
                        ))}
                    </ul>
                </section>
            ))}
        </div>
    );
}