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-18
08-19
08-19
Hyerin1201
08-14
8b0b2ae
feat: 디자인시스템 FoxRadio, FoxRadioIcon, FoxRadioGruop, FoxConditionalOption 추가
UNIX
// FoxRadioGroup — 시안: 통합관리자페이지 디자인시스템(KE9UILWhB8qTBe14uXUn4F)
// Figma radio-group
//
// 라디오 여러 칸의 배치만 책임진다. 선택 상태는 각 `fox-radio`의 네이티브 input이 소유하고,
// 같은 `name`을 쓰면 브라우저가 하나만 선택되게 묶는다 — 그룹이 상태를 갖지 않는다.
//
// 자식들의 `name`을 맞추는 건 작성자 몫이다(React 래퍼는 `name` prop으로 자동화한다). 한 칸만
// 어긋나도 브라우저가 다른 묶음으로 보고 두 개가 동시에 선택된다.
//
// 마크업 계약 (React 밖 소비자용):
// <div class="fox-radio-group fox-radio-group--vertical" role="radiogroup" aria-label="요금제">
// <label class="fox-radio fox-radio--lg">…</label>
// <label class="fox-radio fox-radio--lg">…</label>
// </div>
//
// ⚠️ 시안의 변형 이름이 실제 동작과 반대다. `direction=row`가 세로로 쌓고
// (`flex-direction: column`), `direction=col`이 가로로 나열한다(사용자 확인). 이름을 그대로
// 옮기면 코드가 거짓말을 하므로, **동작 기준으로 다시 이름 붙였다.**
//
// 시안 direction=row → `--vertical` (세로로 쌓임)
// 시안 direction=col → `--horizontal` (가로 나열, 줄바꿈)
//
// 단어는 `fox-button-group`의 orientation 규약을 따른다 — 같은 개념을 형제 컴포넌트가 다르게
// 부르지 않게 한다. 시안과 대조할 때는 위 표를 보면 된다.
//
// 가로는 줄바꿈되며 행 간격(`gap-7`)보다 열 간격(`gap-9`)이 넓다. 세로는 한 축뿐이라
// `gap-7` 하나다.
//
// 시안 dev 출력의 `align-self: stretch`(세로)와 `flex: 1 0 0`(가로)은 옮기지 않았다 — 그룹이
// **부모 안에서** 어떻게 늘어나는지를 정하는 값이라, 규약 7("className은 배치용")에 따라
// 호출부가 정할 몫이다. 남는 폭을 채워야 하는 자리에서는 `className`으로 준다.
//
// 토큰이 아닌 값(사용자 승인):
// - display / flex-direction / flex-wrap / align-*: 배치 규칙.
@use "@fox/styles/abstracts" as fox;
.fox-radio-group {
display: flex;
// 세로 — 한 칸씩 아래로 쌓인다. 라벨 길이가 달라도 왼쪽 끝이 맞아야 하므로 flex-start다.
&--vertical {
flex-direction: column;
align-items: flex-start;
gap: fox.gap(7);
}
// 가로 — 폭이 모자라면 다음 줄로 넘어간다. `align-content`가 있어야 여러 줄이 됐을 때
// 줄 묶음 전체가 가운데 정렬된다.
&--horizontal {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
align-content: center;
gap: fox.gap(7) fox.gap(9);
}
}