File name
Commit message
Commit date
File name
Commit message
Commit date
09-16
// 앱 글로벌 스타일 — 디자인 시스템 로드 + **이 앱에만 해당하는** 최소 베이스.
//
// 색·타이포·간격 같은 디자인 값은 여기에 두지 않는다. 전부 `@fox/styles/tokens/`가
// 소유하며, 이 파일은 "@fox를 켜고, 이 앱의 셸 구조를 잡는다"까지만 한다.
// 화면·컴포넌트 스타일은 각자의 `.module.scss`로 간다.
@use "@fox/styles";
// 믹스인·함수만 가져온다 — CSS 출력이 0이라 위 진입점과 겹쳐도 규칙이 복제되지 않는다.
@use "@fox/styles/abstracts" as fox;
// 공용 컴포넌트 스타일. CSS Modules가 아니라 전역 BEM이라 여기서 한 번 불러온다 —
// 그래야 React 밖(다른 프레임워크·순수 SCSS)에서도 같은 방식으로 쓸 수 있다.
@use "@fox/styles/components";
// Pretendard — @fox 토큰이 패밀리명을 **리터럴 `Pretendard`로** 지정하므로(`font.family.*`),
// 앱은 정확히 그 이름의 폰트를 공급해야 한다. `next/font/local`은 패밀리명을
// 해시(`__Pretendard_xxxx`)로 바꿔 그 리터럴과 영영 만나지 못해 쓸 수 없다 — 토큰은 Figma
// export 자동 생성이라 이름을 코드 쪽에 맞추는 반대 방향도 불가능하다.
// weight는 토큰이 쓰는 400·600·800에 더해, 어떤 CSS도 굵기를 지정하지 않는 자리(제목·`th`·
// `strong` 등 UA 기본값)가 쓰는 700을 포함한다 — 없으면 700이 800으로 올라가 굵어진다.
@font-face {
font-family: "Pretendard";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/fonts/pretendard-regular.woff2") format("woff2");
}
@font-face {
font-family: "Pretendard";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("/fonts/pretendard-semibold.woff2") format("woff2");
}
@font-face {
font-family: "Pretendard";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("/fonts/pretendard-bold.woff2") format("woff2");
}
@font-face {
font-family: "Pretendard";
font-style: normal;
font-weight: 800;
font-display: swap;
src: url("/fonts/pretendard-extrabold.woff2") format("woff2");
}
// 앱 기본 서체 — @fox README가 정의한 호스트 앱 계약(`--app-font-sans`)의 실제 주입 지점이다.
// 폰트 파일을 next/font가 아니라 위 `@font-face`가 공급하므로 변수도 여기서 정의한다.
// 이 값과 @fox 토큰(`font.family.*`)이 지금은 둘 다 Pretendard라 화면 전체가 한 서체다.
:root {
--app-font-sans: "Pretendard";
}
// 테두리·안쪽 여백을 폭에 포함해 센다. 시안이 그 기준으로 그려져 있고(Figma stroke는 안쪽),
// 없으면 `inline-size: 100%`에 패딩이 더해져 자식이 부모보다 넓어진다 — 사이드바 항목 폭이
// 시안보다 15px 넓던 원인이 이것이었다. @fox 컴포넌트는 각자 선언하고 있어 영향이 없다.
*,
*::before,
*::after {
box-sizing: border-box;
}
// 폼 조작기는 CSS 명세상 `font`를 상속받지 않아, 아무도 지정하지 않으면 브라우저 기본값
// (macOS 크롬 기준 Arial 13.33px)이 이긴다. 그래서 제목·본문은 Pretendard인데 그 옆 버튼만
// 다른 서체로 나오는 일이 생긴다. 여기서 한 번 되돌린다.
//
// 타입 선택자(특이도 0,0,1)라 클래스로 서체·크기를 정한 곳은 그대로 이긴다 — @fox 컴포넌트도
// 앱의 module.scss도 영향받지 않고, 아무도 정하지 않은 자리만 앱 서체를 따라온다.
button,
input,
select,
textarea {
font: inherit;
}
// 앱 셸 — 루트 레이아웃이 뷰포트 높이를 채우고 세로로 쌓이는 구조.
// 푸터를 바닥에 붙이거나 본문 영역만 스크롤시키는 화면들이 이 전제에 기댄다.
html,
body {
block-size: 100%;
}
body {
display: flex;
flex-direction: column;
// 브라우저 기본 8px 마진 제거 — 헤더·사이드바가 뷰포트에 붙어야 한다.
margin: 0;
min-block-size: 100%;
// @fox 밖 텍스트의 서체. 계약 변수를 거쳐 꽂으므로 서체를 갈 때는 위 `--app-font-sans`
// 한 줄만 고치면 된다. @fox 컴포넌트는 이 값이 아니라 토큰(`Pretendard` 리터럴)을 쓰지만,
// 지금은 둘이 같은 서체를 가리킨다.
font-family: var(--app-font-sans, system-ui), system-ui, sans-serif;
}
// 스크롤바 — 시안 `scroll`(7341:2675)을 앱 전체에 입힌다. `*`에 거는 이유는 스크롤이 어디에
// 생기는지 미리 알 수 없어서다(문서 자체, 셸 본문, 사이드바, 표 래퍼, 화면이 나중에 만드는
// 상자 …). 특이도 0,0,0이라 어느 자리든 자기 규칙으로 덮을 수 있다.
//
// @fox 컴포넌트도 각자 `fox.scroll()`을 부르고 있어 여기와 겹치지만 그대로 둔다 — @fox는
// 이 파일 없이 다른 프로젝트로 복사돼도 제 모양이 나와야 한다.
//
// ⚠️ macOS는 기본이 겹쳐 뜨는(overlay) 스크롤바라 자리를 차지하지 않는데, 외형을 입히면
// 자리를 차지하는 방식으로 바뀌어 스크롤되는 상자마다 안쪽 폭이 12px 줄어든다.
* {
@include fox.scroll;
}