File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
// Basic 레이아웃 헤더 — 시안: 통합관리자페이지 디자인시스템(KE9UILWhB8qTBe14uXUn4F)
// header (7028:7614 · 컴포넌트 7001:10471)
//
// 시안에서 디자인시스템 컴포넌트로 정의된 조각은 아이콘 4종과 badge-dot뿐이다. 로고 영역·
// 아이콘 버튼·프로필 pill은 header 안의 로컬 프레임이라 @fox로 승격하지 않고 여기서 조립한다.
// 색·간격·radius·타이포는 전부 @fox 토큰을 거친다.
@use "@fox/styles/abstracts" as fox;
.header {
// 시안 높이 64는 테두리를 포함한 값이다(Figma stroke는 안쪽에 그린다).
box-sizing: border-box;
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: space-between;
// 시안 64px. Figma가 변수로 export하지 않는다.
block-size: 6.4rem;
padding-inline: fox.padding(8);
border-block-end: fox.border(1) solid fox.color(border-neutral-subtler);
background: fox.color(surface-neutral-default);
}
// ── 로고 ────────────────────────────────────────────────────────────────────
// 시안은 28px 정사각 심볼 + 텍스트지만, 에듀페이 로고는 170×62 워드마크다. 높이만 28px로
// 맞추고 폭은 비율대로 둔다(사용자 확정).
.logo {
display: flex;
align-items: center;
gap: fox.gap(3);
}
.logoMark {
display: block;
block-size: 2.8rem;
inline-size: auto;
}
.title {
color: fox.color(font-neutral-default);
font-family: fox.font-family(title);
// 시안 24px / letter-spacing -0.6px(= -0.025em). Figma가 변수로 export하지 않는다.
font-size: 2.4rem;
font-weight: fox.font-weight(bold);
line-height: 1.5;
letter-spacing: -0.025em;
white-space: nowrap;
}
// ── 우측 기능 영역 ──────────────────────────────────────────────────────────
.fnc {
display: flex;
align-items: center;
justify-content: flex-end;
gap: fox.gap(5);
}
.btnGroup {
display: flex;
align-items: center;
gap: fox.gap(2);
}
// ── 프로필 ──────────────────────────────────────────────────────────────────
// 메뉴가 이 버튼 기준으로 떠야 해서 위치 기준을 만든다.
.profile {
position: relative;
}
.profileButton {
display: flex;
align-items: center;
gap: fox.gap(2);
padding-block: fox.padding(3);
padding-inline: fox.padding(4);
border: none;
border-radius: fox.radius(max);
// 시안 높이 44 = 상하 여백 8 + 아바타 28. Figma stroke가 안쪽이라 테두리가 높이를 늘리지
// 않는다 — `border`를 쓰면 46이 되므로 레이아웃에 관여하지 않는 inset 그림자로 같은 선을
// 그린다.
box-shadow: inset 0 0 0 fox.border(1) fox.color(border-neutral-subtle);
background: fox.color(action-default);
cursor: pointer;
}
.avatar {
display: inline-flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
// 시안 28px 원형 + 내부 20px. Figma가 변수로 export하지 않는다.
inline-size: 2.8rem;
block-size: 2.8rem;
border-radius: fox.radius(max);
background: fox.theme(primary-10);
color: fox.color(icon-neutral-default);
}
// 시안은 이 자리에 프로필 사진을 넣지만 관리자 사진을 받는 경로가 없어 사람 아이콘으로 채운다.
.avatar > svg {
inline-size: 2rem;
block-size: 2rem;
}
.profileName {
color: fox.color(font-neutral-subtle);
font-family: fox.font-family(body);
font-size: fox.font-size(label-md);
font-weight: fox.font-weight(medium);
line-height: 1;
letter-spacing: -0.025em;
white-space: nowrap;
}
.caret {
display: inline-flex;
flex-shrink: 0;
inline-size: fox.icon(3);
block-size: fox.icon(3);
color: fox.color(icon-neutral-default);
}
.caret > svg {
inline-size: 100%;
block-size: 100%;
}
// ── 프로필 메뉴 ─────────────────────────────────────────────────────────────
// ⚠️ 시안에 없는 부분이다. 시안의 pill은 CaretDown만 있고 열린 모습이 그려져 있지 않아,
// 판때기는 FoxSelectOption(떠 있는 목록)이 쓰는 것과 같은 토큰 조합으로 맞췄다.
.menu {
position: absolute;
inset-block-start: calc(100% + #{fox.gap(2)});
inset-inline-end: 0;
z-index: 1;
min-inline-size: 100%;
padding-block: fox.padding(2);
border: fox.border(1) solid fox.color(border-neutral-default);
border-radius: fox.form(radius-md);
background: fox.color(surface-neutral-default);
// 그림자 색은 FoxSelectOption과 같은 값을 쓴다 — 시안이 테마 토큰이 아니라 원시값에
// 물려 놓아서 다크 모드에서도 검은 그림자다.
box-shadow: fox.shadow(location1) fox.shadow(location1) fox.shadow(blur1) 0
fox.primitive(alpha-black10);
}
.menuItem {
display: flex;
inline-size: 100%;
align-items: center;
padding-block: fox.padding(3);
padding-inline: fox.padding(4);
border: none;
background: none;
color: fox.color(font-neutral-default);
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;
white-space: nowrap;
cursor: pointer;
&:hover {
background: fox.color(action-default-hover);
}
}