"use client"; import { FoxInput, FoxInputState, FoxSelect, FoxSelectItem, FoxSelectOption, FoxSelectOptionItem } from "@/@fox/core/components"; import { useState, type CSSProperties, type ReactNode } from "react"; import { FoxButton } from "../core/components/fox-button"; import { FoxButtonGroup } from "../core/components/fox-button-group"; import { FoxButtonPanel } from "../core/components/fox-button-panel"; import { FoxIconButton } from "../core/components/fox-icon-button"; import { FoxLinkButton } from "../core/components/fox-link-button"; import { FoxTextButton } from "../core/components/fox-text-button"; import styles from "./dev-test.module.scss"; export interface ComponentExample { /** 해시 링크에 쓰이는 kebab-case 식별자. */ id: string; name: string; description?: string; /** 눈으로 비교해야 하는 조합을 빠짐없이 넣는다 — 예제가 곧 회귀 확인 수단이다. */ variants: { label: string; node: ReactNode }[]; } // 자리 확인용 도형. `currentColor`로 그려야 계열별 색이 입혀진다. style은 FoxSelect // 힌트 아이콘처럼 크기를 줄여 써야 하는 자리에 쓴다. function DemoIcon({ style }: { style?: CSSProperties } = {}) { return ( ); } function DemoStar() { return ( ); } // overlay 계열은 어두운 반투명 배경이라 밝은 바탕 위에서는 대비를 볼 수 없다. function OnPhoto({ children }: { children: ReactNode }) { return ( {children} ); } // 입력 예제는 폭이 있어야 시안(360px)처럼 보인다. function InputStage({ children }: { children: ReactNode }) { return
{children}
; } // 지우기 버튼과 자동 상태 판정을 실제로 눌러 보려면 예제가 값을 들고 있어야 한다. function InputLiveDemo() { const [text, setText] = useState("지우기를 눌러보세요"); return ( <> ); } // active는 호출부가 소유하므로 켜고 끄는 걸 보려면 예제가 상태를 들고 있어야 한다. function IconToggleDemo() { const [on, setOn] = useState(false); return ( <> } active={on} onAction={() => setOn((prev) => !prev)} /> } active={on} onAction={() => setOn((prev) => !prev)} /> } active={on} onAction={() => setOn((prev) => !prev)} /> ); } const SELECT_ITEMS: FoxSelectItem[] = [ { value: "a", label: "옵션 A" }, { value: "b", label: "옵션 B" }, { value: "c", label: "옵션 C" }, ]; // 옵션 아이콘은 별도 목록으로 둔다 — 위 목록에 섞으면 크기·상태 예제가 전부 같이 바뀌어 // 무엇을 보는 예제인지 흐려진다. 아이콘은 시안 미정이라 자리 확인용 도형이다. const SELECT_ITEMS_RICH: FoxSelectItem[] = [ { value: "a", label: "아이콘 있는 옵션", icon: }, { value: "b", label: "아이콘 없는 옵션" }, { value: "c", label: "아주 긴 옵션 라벨 — 트리거에서는 말줄임으로 잘린다" }, ]; /** 컴포넌트를 만들 때마다 항목 하나를 추가한다 — 다른 파일은 고치지 않는다. */ export const COMPONENT_EXAMPLES: ComponentExample[] = [ { id: "fox-button", name: "FoxButton", description: "Figma 시안(btn, 컴포넌트 세트 106:1606)을 토큰만으로 옮겼습니다. 너비는 내용에 따라 가변이고 높이만 고정입니다. hover·pressed는 마우스를 올리거나 눌러 확인하세요. error 계열은 시안 미정이라 비어 있습니다.", variants: [ { label: "계열 (type) — hover·pressed 확인 가능", node: ( <> ), }, { label: "크기 (size)", node: ( <> ), }, { label: "아이콘", node: ( <> } /> } /> } trailingIcon={} /> ), }, { label: "상태 — disabled / loading (둘 다 클릭이 막힌다)", node: ( <> undefined} /> } /> ), }, { label: "fullWidth", node: , }, { label: "htmlType — 폼 안에서의 역할", node: ( <> ), }, { label: "hidden — 렌더되지 않는다(아래는 비어 있는 것이 정상)", node: