File name
Commit message
Commit date
File name
Commit message
Commit date
09-03
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
import type { ReactNode } from 'react';
import { FoxBadgeDot } from '@fox/core/components/fox-badge-dot';
import { FoxIconButton } from '@fox/core/components/fox-icon-button';
import styles from './header-icon-button.module.scss';
interface HeaderIconButtonProps {
icon: ReactNode;
/** 글자가 없으므로 이 값이 접근성 이름이 된다. */
label: string;
/** 참이면 우상단에 알림 점(FoxBadgeDot)을 얹는다. */
hasBadge?: boolean;
onAction?: () => void;
}
/**
* 헤더 우측 아이콘 버튼(시안 header의 `item`). FoxIconButton을 그대로 쓰고 모양 차이 두 개
* (radius·아이콘 크기)만 CSS 모듈로 덮는다 — 근거는 module.scss 상단 참고.
*
* 배지는 `<button>` 안이 아니라 형제로 둔다. 버튼 안에 넣으면 아이콘 슬롯의 크기 규칙
* (`__icon > *`가 100%)에 걸려 배지까지 늘어난다.
*/
export function HeaderIconButton({
icon,
label,
hasBadge = false,
onAction,
}: HeaderIconButtonProps) {
return (
<span className={styles.slot}>
<FoxIconButton
type="ghost"
size="md"
icon={icon}
label={label}
className={styles.button}
onAction={onAction}
/>
{hasBadge && <FoxBadgeDot className={styles.badge} label="읽지 않은 알림 있음" />}
</span>
);
}