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
08-14
08-14
08-14
08-14
// FoxPagination — 시안: 통합관리자페이지 디자인시스템(KE9UILWhB8qTBe14uXUn4F)
// Figma pagination (162:374 · 섹션 391:3925)
// pagination-item (섹션 391:3817)
//
// 마크업 계약 (React 밖 소비자용):
// <nav class="fox-pagination" aria-label="페이지">
// <a class="fox-pagination__item fox-pagination__step">
// <span class="fox-pagination__step-icon">…svg…</span>이전
// </a>
// <ul class="fox-pagination__list">
// <li><span class="fox-pagination__item fox-pagination__number
// fox-pagination__number--current" aria-current="page">1</span></li>
// <li><a class="fox-pagination__item fox-pagination__number">2</a></li>
// </ul>
// <a class="fox-pagination__item fox-pagination__step">
// 다음<span class="fox-pagination__step-icon">…svg…</span>
// </a>
// </nav>
//
// 시안의 device 축을 프롭이 아니라 화면 폭으로 나눈다.
// - 모바일: 이전·다음이 첫 줄, 번호가 둘째 줄. 번호칸만 폭을 다 먹어 줄이 넘어간다.
// - PC: 이전·번호·다음이 한 줄. `order`로 번호를 가운데로 되돌린다.
// 마크업은 한 벌이고 DOM 순서(이전 → 번호 → 다음)는 읽는 순서 그대로다.
//
// 번호칸끼리는 간격이 없다(시안 list에 gap이 없다) — 칸 자체가 정사각이라 붙어도 벌어져 보인다.
//
// 토큰이 아닌 값:
// - 번호칸 정사각 크기 3.2rem(PC) / 2.4rem(모바일): 시안 값이나 Figma가 변수로
// export하지 않는다(사용자 승인).
// - line-height / letter-spacing: 위와 같다.
// - 목록의 margin/padding/list-style 0: `<ul>`의 브라우저 기본값 지우기.
// - 버튼·링크 초기화(appearance/cursor/색 상속): 구조 규칙.
@use "abstracts" as fox;
.fox-pagination {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: fox.gap(3);
inline-size: 100%;
padding-block-start: fox.spacing(top-lg);
// `<ul>`이라 브라우저 기본 여백·글머리표를 먼저 지운다.
&__list {
display: flex;
order: 1;
align-items: center;
justify-content: center;
inline-size: 100%;
margin: 0;
padding: 0;
list-style: none;
}
&__item {
display: inline-flex;
align-items: center;
margin: 0;
border: none;
border-radius: fox.radius(2);
background: fox.color(action-secondary);
font-family: fox.font-family(body);
font-size: fox.font-size(label-md);
font-weight: fox.font-weight(regular);
line-height: 1;
letter-spacing: -0.025em;
text-decoration: none;
white-space: nowrap;
}
// ── 이전 · 다음 ────────────────────────────────────────────────────────────
&__step {
gap: fox.gap(1);
padding: fox.padding(2);
color: fox.color(font-neutral-default);
}
&__step-icon {
display: inline-flex;
flex-shrink: 0;
color: fox.color(element-neutral-strong);
> * {
inline-size: fox.icon(3);
block-size: fox.icon(3);
}
}
// ── 번호 ──────────────────────────────────────────────────────────────────
// 시안 값이나 변수로 export되지 않는다 — 파일 상단 참고.
&__number {
box-sizing: border-box;
justify-content: center;
inline-size: 2.4rem;
block-size: 2.4rem;
color: fox.color(font-neutral-subtle);
}
&__number--current {
background: fox.color(action-secondary-active);
color: fox.color(font-neutral-static-inverse);
font-weight: fox.font-weight(bold);
cursor: default;
}
&__ellipsis {
justify-content: center;
inline-size: 2.4rem;
block-size: 2.4rem;
color: fox.color(font-neutral-subtle);
}
// ── 상태 ──────────────────────────────────────────────────────────────────
a.fox-pagination__item,
button.fox-pagination__item {
cursor: pointer;
&:hover {
background: fox.color(action-secondary-hover);
}
&:active {
background: fox.color(action-secondary-pressed);
}
}
// 갈 곳이 없는 이전·다음. `aria-disabled`가 곧 표시 조건이다.
&__item[aria-disabled="true"] {
color: fox.color(font-neutral-disabled);
cursor: default;
.fox-pagination__step-icon {
color: fox.color(icon-neutral-disabled);
}
}
@include fox.pc {
flex-wrap: nowrap;
gap: fox.gap(5);
&__list {
order: 0;
inline-size: auto;
}
&__number,
&__ellipsis {
inline-size: 3.2rem;
block-size: 3.2rem;
}
}
}