File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
08-14
08-14
08-14
08-14
// FoxButtonPanel — 시안: 통합관리자페이지 디자인시스템(KE9UILWhB8qTBe14uXUn4F)
// Figma btn-page (컴포넌트 세트 404:5121 · 섹션 405:5193)
//
// 페이지 하단 동작 영역. 자식은 버튼 그룹이고, 여럿이면 양끝으로 벌리고 하나면 가운데 둔다.
//
// 마크업 계약 (React 밖 소비자용):
// <div class="fox-button-panel fox-button-panel--offset">
// <div class="fox-button-group fox-button-group--horizontal fox-button-group--start">…</div>
// <div class="fox-button-group fox-button-group--horizontal fox-button-group--end">…</div>
// </div>
// 자식이 하나면 `:only-child`가 알아서 가운데로 보낸다 — 별도 클래스가 필요 없고, 프래그먼트나
// 조건부 렌더로 자식 수가 갈리는 React 쪽 계산 실수도 생기지 않는다(DOM이 기준이다).
//
// 시안이 요구하는 두 가지를 패널이 자식에게 강제한다(사용자 승인):
// - 패널 안 그룹의 간격은 `gap/3`이다. 그룹 단독으로 쓸 때의 `gap/2`를 덮어쓴다.
// - 모바일에서는 패널도 그룹도 세로로 쌓이고 버튼이 폭을 채운다.
//
// 토큰이 아닌 값(사용자 승인):
// - 버튼 `min-inline-size: 16rem`(160px): 시안이 패널 안 버튼에만 주는 값인데 변수로
// 바인딩되어 있지 않고 토큰 스케일에도 160이 없다. `.fox-button`에만, 패널 안에서만 건다.
// - box-sizing: 상단 여백을 패딩으로 주므로 필요하다.
@use "abstracts" as fox;
.fox-button-panel {
box-sizing: border-box;
display: flex;
inline-size: 100%;
gap: fox.gap(3);
align-items: flex-start;
justify-content: space-between;
// 시안의 80px `margin` 프레임. 다른 맥락에 놓을 땐 끈다.
&--offset {
padding-block-start: fox.spacing(top-2xlg);
}
&:has(> :only-child) {
justify-content: center;
}
.fox-button-group {
gap: fox.gap(3);
}
.fox-button {
min-inline-size: 16rem;
}
@include fox.mobile {
flex-direction: column;
align-items: stretch;
.fox-button-group {
flex-direction: column;
align-items: stretch;
}
.fox-button {
inline-size: 100%;
}
}
}