File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
08-14
08-18
08-14
08-14
08-18
08-19
08-19
// FoxButtonGroup — 시안: 통합관리자페이지 디자인시스템(KE9UILWhB8qTBe14uXUn4F) Figma btn-group (컴포넌트 세트 398:4854)
//
// 시안에서 가져온 건 간격뿐이다 — 크기·방향과 무관하게 `gap/2` 하나다. 그래서 크기별
// 모디파이어가 없다(React 래퍼의 `size`는 자식 버튼에 내려주는 값이지 그룹의 모양이 아니다).
// 나머지 배치 규칙(정렬·줄바꿈)은 시안이 아니라 지시받은 사양이다.
//
// 마크업 계약 (React 밖 소비자용):
// <div class="fox-button-group fox-button-group--horizontal fox-button-group--start">
// <button class="fox-button fox-button--default fox-button--md">버튼</button>
// <button class="fox-button fox-button--default fox-button--md">버튼</button>
// </div>
// 자식 버튼의 크기 클래스를 그룹 크기로 맞추는 건 작성자 몫이다 — React 래퍼는 이걸
// `size` prop으로 자동화한다.
//
// 블록 레벨 `flex`다(`inline-flex`가 아니다). 정렬이 의미를 가지려면 그룹이 부모 폭을
// 채워야 하고, 세로일 때 자식이 폭을 채우려면 stretch할 자리가 있어야 한다.
@use "abstracts" as fox;
.fox-button-group {
display: flex;
gap: fox.gap(2);
&--horizontal {
flex-direction: row;
align-items: center;
}
// 세로는 자식이 항상 폭을 채운다(시안의 w-full).
&--vertical {
flex-direction: column;
align-items: stretch;
}
// 주축 정렬. 세로에서는 그룹 높이가 정해져 있을 때만 눈에 띈다.
&--start {
justify-content: flex-start;
}
&--center {
justify-content: center;
}
&--end {
justify-content: flex-end;
}
&--wrap {
flex-wrap: wrap;
}
}