Badge

import { Badge } from '@mildang/design-system/Badge';

const BadgeInlineExample = () => (
    <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
      <span>알림</span>
      <Badge variant="dot" size="sm" />
      <Badge variant="number" size="sm" count={5} />
    </div>
  );

export default BadgeInlineExample;

import { Badge } from '@mildang/design-system/Badge';
import { Avatar } from '@mildang/design-system/Avatar';

const numberSizes = ['sm', 'md', 'lg', 'xl'] as const;

// 실제 @mildang/icons처럼 em 기반으로 렌더 → 부모(Badge root)의 fontSize에 따라 자동 크기 조정된다.
// width를 넘기면 그 값이 우선한다(호출자 우선).
const DemoIcon = ({ size, round }: { size?: number; round?: boolean }) => (
  <span
    style={{
      display: 'inline-block',
      width: size ?? '1em',
      height: size ?? '1em',
      background: '#e5e7eb',
      borderRadius: round ? '50%' : 6,
    }}
  />
);

const BadgeNumberSizesExample = () => (
    <div style={{ display: 'grid', gap: 24 }}>
      <div style={{ display: 'grid', gap: 8 }}>
        <span style={{ fontSize: 12, color: '#888' }}>rectangular · 사각 host (아이콘)</span>
        <div style={{ display: 'flex', gap: 32, alignItems: 'flex-end' }}>
          {numberSizes.map((s) => (
            <Badge key={s} variant="number" size={s} count={999}>
              <DemoIcon />
            </Badge>
          ))}
        </div>
      </div>
      <div style={{ display: 'grid', gap: 8 }}>
        <span style={{ fontSize: 12, color: '#888' }}>circular · 원형 host (Avatar)</span>
        <div style={{ display: 'flex', gap: 32, alignItems: 'flex-end' }}>
          {numberSizes.map((s) => (
            <Badge key={s} variant="number" size={s} overlap="circular" count={999}>
              <Avatar size={s} initial="밀당" />
            </Badge>
          ))}
        </div>
      </div>
    </div>
  );

export default BadgeNumberSizesExample;

import { Badge } from '@mildang/design-system/Badge';
import { FloatingButton } from '@mildang/design-system/FloatingButton';
import Add from '@mildang/icons/react/add';
import { MenuButton } from '@mildang/design-system/MenuButton';
import { IconButton } from '@mildang/design-system/IconButton';
import MoreHoriz from '@mildang/icons/react/more-horiz';
import Bell from '@mildang/icons/react/bell';
import { Button } from '@mildang/design-system/Button';
import { TitleButton } from '@mildang/design-system/TitleButton';
import { Menu } from '@mildang/design-system/Menu';
import { ReactNode } from 'react';

const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const;

const numberSizes = ['sm', 'md', 'lg', 'xl'] as const;

// host별·사이즈별 정렬 검증 매트릭스.
// - FloatingButton: 원형 → overlap="circular" (FAB는 sm/md만 존재).
// - MenuButton(IconButton 트리거): 기본 테마 rounded-rect → overlap="rectangular" (xs~xl).
//   number는 xs 미지원(sm 폴백)이라 number 행은 sm부터.
const Cell = ({ label, children }: { label: string; children: ReactNode }) => (
  <div style={{ display: 'grid', gap: 8, justifyItems: 'center', minWidth: 72 }}>
    {children}
    <span style={{ fontSize: 11, color: '#888' }}>{label}</span>
  </div>
);

const menuItems = (
  <Menu.Item>옵션</Menu.Item>
);

const BadgeHostSizeMatrixExample = () => (
    <div style={{ display: 'grid', gap: 40, padding: 24 }}>
      {/* FloatingButton — 원형 host → circular */}
      <section style={{ display: 'grid', gap: 12 }}>
        <h4 style={{ margin: 0 }}>FloatingButton (원형 → overlap=&quot;circular&quot;)</h4>
        <div style={{ display: 'flex', gap: 40, alignItems: 'flex-end', flexWrap: 'wrap' }}>
          {(['sm', 'md'] as const).map((s) => (
            <Cell key={`fab-num-${s}`} label={`${s} · number`}>
              <Badge variant="number" size={s} overlap="circular" count={100} max={99}>
                <FloatingButton size={s} color="primary" icon={<Add />} />
              </Badge>
            </Cell>
          ))}
          {(['sm', 'md'] as const).map((s) => (
            <Cell key={`fab-dot-${s}`} label={`${s} · dot`}>
              <Badge variant="dot" size={s} overlap="circular" show>
                <FloatingButton size={s} color="primary" icon={<Add />} />
              </Badge>
            </Cell>
          ))}
        </div>
      </section>

      {/* MenuButton(IconButton 트리거) — rounded-rect host → rectangular */}
      <section style={{ display: 'grid', gap: 12 }}>
        <h4 style={{ margin: 0 }}>MenuButton / IconButton (rounded-rect → overlap=&quot;rectangular&quot;)</h4>
        <div style={{ display: 'flex', gap: 40, alignItems: 'flex-end', flexWrap: 'wrap' }}>
          {(['sm', 'md', 'lg', 'xl'] as const).map((s) => (
            <Cell key={`mb-num-${s}`} label={`${s} · number`}>
              <Badge variant="number" size={s} count={100} max={99}>
                <MenuButton
                  trigger={
                    <IconButton size={s} variant="primary" aria-label="메뉴 열기">
                      <MoreHoriz />
                    </IconButton>
                  }
                >
                  {menuItems}
                </MenuButton>
              </Badge>
            </Cell>
          ))}
        </div>
        <div style={{ display: 'flex', gap: 40, alignItems: 'flex-end', flexWrap: 'wrap' }}>
          {(['xs', 'sm', 'md', 'lg', 'xl'] as const).map((s) => (
            <Cell key={`mb-dot-${s}`} label={`${s} · dot`}>
              <Badge variant="dot" size={s} show>
                <MenuButton
                  trigger={
                    <IconButton size={s} variant="primary" aria-label="메뉴 열기">
                      <MoreHoriz />
                    </IconButton>
                  }
                >
                  {menuItems}
                </MenuButton>
              </Badge>
            </Cell>
          ))}
        </div>
      </section>

      {/* Icon (bell, plain em) — Figma icon_with_badge 정본 케이스. 사각 bounding box → rectangular */}
      <section style={{ display: 'grid', gap: 12 }}>
        <h4 style={{ margin: 0 }}>Icon (bell, plain em → overlap=&quot;rectangular&quot;, Figma 정본)</h4>
        <div style={{ display: 'flex', gap: 40, alignItems: 'flex-end', flexWrap: 'wrap' }}>
          {numberSizes.map((s) => (
            <Cell key={`icon-num-${s}`} label={`${s} · number`}>
              <Badge variant="number" size={s} count={100} max={99}>
                <Bell />
              </Badge>
            </Cell>
          ))}
        </div>
        <div style={{ display: 'flex', gap: 40, alignItems: 'flex-end', flexWrap: 'wrap' }}>
          {sizes.map((s) => (
            <Cell key={`icon-dot-${s}`} label={`${s} · dot`}>
              <Badge variant="dot" size={s} show>
                <Bell />
              </Badge>
            </Cell>
          ))}
        </div>
      </section>

      {/* 일반 Button (text, rounded-rect) → rectangular */}
      <section style={{ display: 'grid', gap: 12 }}>
        <h4 style={{ margin: 0 }}>Button (text, rounded-rect → overlap=&quot;rectangular&quot;)</h4>
        <div style={{ display: 'flex', gap: 40, alignItems: 'flex-end', flexWrap: 'wrap' }}>
          {(['sm', 'md', 'lg'] as const).map((s) => (
            <Cell key={`btn-num-${s}`} label={`${s} · number`}>
              <Badge variant="number" size={s} count={7}>
                <Button size={s} variant="primary">
                  저장
                </Button>
              </Badge>
            </Cell>
          ))}
          <Cell label="md · dot">
            <Badge variant="dot" size="md" show>
              <Button size="md" variant="secondary">
                알림
              </Button>
            </Badge>
          </Cell>
        </div>
      </section>

      {/* TitleButton (제목 드롭다운) → rectangular */}
      <section style={{ display: 'grid', gap: 12 }}>
        <h4 style={{ margin: 0 }}>TitleButton (rounded-rect → overlap=&quot;rectangular&quot;)</h4>
        <div style={{ display: 'flex', gap: 40, alignItems: 'flex-end', flexWrap: 'wrap' }}>
          <Cell label="number">
            <Badge variant="number" size="md" count={7}>
              <TitleButton label="2학년 1반">{menuItems}</TitleButton>
            </Badge>
          </Cell>
          <Cell label="dot">
            <Badge variant="dot" size="md" show>
              <TitleButton label="공지사항">{menuItems}</TitleButton>
            </Badge>
          </Cell>
        </div>
      </section>

      {/* 아주 큰 host(120px) — 앵커가 코너/비율 기준이라 위치는 유지되고, 배지는 size(xl) 고정이라 작게 남는다.
          사각 host → rectangular(코너), 원형 host → circular(45° 가장자리). */}
      <section style={{ display: 'grid', gap: 12 }}>
        <h4 style={{ margin: 0 }}>아주 큰 host (120px) — 위치는 코너/가장자리 유지, 배지 크기는 size 고정</h4>
        <div style={{ display: 'flex', gap: 48, alignItems: 'flex-end', flexWrap: 'wrap' }}>
          <Cell label="사각 · number · rectangular">
            <Badge variant="number" size="xl" count={100} max={99}>
              <div style={{ width: 120, height: 120, borderRadius: 16, background: '#e5e7eb' }} />
            </Badge>
          </Cell>
          <Cell label="사각 · dot · rectangular">
            <Badge variant="dot" size="xl" show>
              <div style={{ width: 120, height: 120, borderRadius: 16, background: '#e5e7eb' }} />
            </Badge>
          </Cell>
          <Cell label="원형 · number · circular">
            <Badge variant="number" size="xl" overlap="circular" count={100} max={99}>
              <div style={{ width: 120, height: 120, borderRadius: '50%', background: '#e5e7eb' }} />
            </Badge>
          </Cell>
          <Cell label="원형 · dot · circular">
            <Badge variant="dot" size="xl" overlap="circular" show>
              <div style={{ width: 120, height: 120, borderRadius: '50%', background: '#e5e7eb' }} />
            </Badge>
          </Cell>
        </div>
      </section>
    </div>
  );

export default BadgeHostSizeMatrixExample;