File name
Commit message
Commit date
File name
Commit message
Commit date
09-14
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;
/**
* 눌러서 여는 패널이 있으면 그 펼침 상태. FoxIconButton은 `aria-expanded`를 받지 않아
* 감싸는 `<span>`에 얹는다 — 버튼에 직접 주려면 @fox 공개 API를 넓혀야 한다.
*/
isExpanded?: boolean;
onAction?: () => void;
}
/**
* 헤더 우측 아이콘 버튼(시안 header의 `item`). FoxIconButton을 그대로 쓰고 모양 차이 두 개
* (radius·아이콘 크기)만 CSS 모듈로 덮는다 — 근거는 module.scss 상단 참고.
*
* 배지는 `<button>` 안이 아니라 형제로 둔다. 버튼 안에 넣으면 아이콘 슬롯의 크기 규칙
* (`__icon > *`가 100%)에 걸려 배지까지 늘어난다.
*/
export function HeaderIconButton({
icon,
label,
hasBadge = false,
isExpanded,
onAction,
}: HeaderIconButtonProps) {
return (
<span
className={styles.slot}
aria-haspopup={isExpanded === undefined ? undefined : 'menu'}
aria-expanded={isExpanded}
>
<FoxIconButton
type="ghost"
size="md"
icon={icon}
label={label}
className={styles.button}
onAction={onAction}
/>
{hasBadge && <FoxBadgeDot className={styles.badge} label="읽지 않은 알림 있음" />}
</span>
);
}