File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
08-14
08-14
08-18
08-14
08-18
08-18
08-18
File name
Commit message
Commit date
"use client";
import type { ReactNode } from "react";
import { cx } from "../../utils";
export type FoxCardSize = "xlg" | "lg" | "md" | "sm";
export interface FoxCardProps {
size?: FoxCardSize;
/** 위쪽 그림. 시안은 16:9다. */
image?: ReactNode;
title?: ReactNode;
/** 제목 아래 한두 줄 설명. */
description?: ReactNode;
/** 제목·설명 아래에 서는 내용. 폼 구역처럼 카드 한 장으로 묶는 것을 넣는다. */
children?: ReactNode;
/** 아래쪽 줄. 시안은 글자 버튼이다. */
actions?: ReactNode;
/** 참이면 렌더하지 않는다(DOM에 남지 않는다). */
hidden?: boolean;
/** 배치 조정용. */
className?: string;
}
/**
* @fox 카드. 그림·글·내용·동작이 위에서 아래로 쌓인다.
*
* 제목·설명은 머리말이고 `children`은 그 아래 몸통이다 — 둘 다 주면 함께 그린다
* (가맹몰 등록처럼 폼 구역을 카드로 묶을 때). 어느 한쪽만 줘도 된다.
*
* 크기는 여백과 모서리만 바꾼다 — 폭은 놓이는 자리가 정한다.
*
* ⚠️ 스타일은 이 파일이 import하지 않는다 — 호스트 앱이 `@use "@fox/styles/components"`
* (또는 개별 파티셜)로 한 번 불러와야 한다.
*/
export function FoxCard({
size = "md",
image,
title,
description,
children,
actions,
hidden = false,
className,
}: FoxCardProps) {
if (hidden) {
return null;
}
const hasHeader = Boolean(title) || Boolean(description);
return (
<div className={cx("fox-card", `fox-card--${size}`, className)}>
{image && <div className="fox-card__image">{image}</div>}
<div className="fox-card__contents">
{hasHeader && (
<div className="fox-card__header">
{title && <p className="fox-card__title">{title}</p>}
{description && <p className="fox-card__description">{description}</p>}
</div>
)}
{children && <div className="fox-card__body">{children}</div>}
</div>
{actions && <div className="fox-card__actions">{actions}</div>}
</div>
);
}