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
Hyerin1201
08-14
df51a67
feat: 디자인시스템 FoxCheckIcon, FoxCheckbox, FoxCheckboxGroup 추가 — FoxConditionalOption에 체크박스 지원
UNIX
// FoxConditionalOption — 시안: 통합관리자페이지 디자인시스템(KE9UILWhB8qTBe14uXUn4F)
// Figma conditional-option
//
// 컨트롤 한 칸 + 그 칸을 켰을 때만 의미가 생기는 select를 한 덩어리로 묶는다. 둘이 합쳐
// 하나의 답이다 — "다른 주소로 배송(컨트롤) → 어느 주소인지(select)"처럼 후속 질문이 딸린
// 선택지에 쓴다.
//
// 앞의 컨트롤은 라디오와 체크박스 둘 다 될 수 있다(시안의 trigger). 하나만 골라야 하면
// 라디오, 여러 개를 켤 수 있어야 하면 체크박스다.
//
// 마크업 계약 (React 밖 소비자용):
// <div class="fox-conditional-option fox-conditional-option--vertical">
// <label class="fox-radio fox-radio--lg">…</label> <!-- 또는 fox-checkbox -->
// <div class="fox-conditional-option__detail">
// <div class="fox-select fox-select--md">…</div>
// </div>
// </div>
//
// select는 컨트롤이 안 켜져 있어도 조작할 수 있다 — 값을 고르면 컨트롤이 자동으로 켜지는데,
// 잠가 두면 그 조작 자체가 불가능해진다. 켜짐 여부는 컨트롤의 네이티브 input이 소유하므로
// 이 파일은 배치만 맡는다.
//
// ⚠️ 시안의 변형 이름이 실제 동작과 반대다(`fox-radio-group`과 같은 문제). 동작 기준으로
// 다시 이름 붙였다.
//
// 시안 direction=row → `--vertical` (select가 라디오 아래로)
// 시안 direction=col → `--horizontal` (select가 라디오 옆에)
//
// 세로일 때 select는 들여쓰지 않고 **맨 앞**에 붙는다 — 동그란 표시와 왼쪽 끝이 맞는다.
//
// 토큰이 아닌 값(사용자 승인):
// - display / flex / align-*: 배치 규칙.
@use "@fox/styles/abstracts" as fox;
.fox-conditional-option {
display: flex;
// 간격은 방향과 무관하게 `gap-3` 하나다 — 옆에 서든 아래로 내려가든 시안이 같은 값을 쓴다.
gap: fox.gap(3);
// select가 컨트롤 옆에 선다. 라벨 한 줄과 높이를 맞춘다.
&--horizontal {
flex-direction: row;
align-items: center;
}
// select가 컨트롤 아래로 내려간다.
&--vertical {
flex-direction: column;
align-items: flex-start;
}
// select가 행 폭을 채운다. `FoxSelect`는 폭을 스스로 정하지 않으므로(부모가 정한다) 여기서
// 늘려 주지 않으면 트리거 안 글자 폭으로 줄어들고, 값을 고를 때마다 상자가 넓어진다.
//
// ⚠️ 세로에서만 듣는다. 가로에서는 교차축이 세로라 `stretch`가 높이를 늘릴 뿐이고 폭은
// 그대로 내용 폭이다 — 가로에서도 채워야 하면 `flex: 1 0 0`을 따로 걸어야 한다.
&--vertical &__detail {
align-self: stretch;
}
}