@ihabdevteam/core 0.9.10 → 0.10.0

package/dist/packages/core/src/styles.css

@@ -54,47 +54,79 @@ textarea {
 
 /* ── 타이포그래피 헬퍼 (전역) ────────────────────────────── */
 /* 값은 전부 tokens.css의 --text-* 변수에서 온다(반응형·글자 크기 스케일 포함).
-   여기서는 "어떤 변수를 쓰는지"만 정의한다 — 수치를 바꾸려면 tokens.css를 고친다. */
+   여기서는 "어떤 변수를 쓰는지"만 정의한다 — 수치를 바꾸려면 tokens.css를 고친다.
+
+   **왜 전부 :where() 로 감쌌나 — 이것은 기본값이지 강제가 아니다.**
+   이 번들은 소비자 앱과 섞이지 않게 모든 셀렉터에 `.ihabdevteam-core-scope` 를
+   붙여 내보낸다. 그러면 `.h0` 이 `.ihabdevteam-core-scope .h0`(특이도 0-2-0)이
+   되어, 앱이 `.lp-hero-sub`(0-1-0) 한 겹으로 적은 여백·크기를 **통째로 눌러
+   이긴다.** 바로 아래 "margin은 0 기본, 필요 시 컴포넌트에서 override" 라고 적어
+   두고도 그 override 가 성립하지 않았다.
+
+   실측으로 확인한 피해 — 회원앱 랜딩 한 화면에서 다섯 자리가 눌렸고, 그중 셋은
+   **코어 자신의 컴포넌트**였다(payment-plan__quote · payment-plan__subtitle ·
+   site-footer__copyright). 히어로에서는 `margin-bottom: 32px` 가 0px 이 되어 제목·
+   본문·단추가 맞붙었고, 모바일에서 앱이 정한 26px 제목이 h0 의 28px 로 되돌아갔다.
+
+   `:where()` 는 안에 무엇이 들어 있든 특이도가 0 이다. postcss 설정이 프리픽스도
+   `:where(.ihabdevteam-core-scope)` 로 감싸므로(postcss.config.cjs 참고) 최종
+   특이도가 0-0-0 이 되어, 앱의 어떤 클래스 규칙이든 이 기본값을 덮을 수 있다.
+   타이포 헬퍼는 **바탕**이고 화면이 그 위에 자기 판단을 얹는다 — 그것이 원래
+   의도였고, 이제 실제로 그렇게 된다. */
+
+/* Display — h0 위의 세 단. 랜딩·히어로처럼 크게 외치는 자리 전용이다.
+   h 단과 달리 크기가 뷰포트를 따라 연속으로 변한다(tokens.css 의 clamp) — 까닭은
+   그쪽 주석에 적어 두었다. 앱 화면 제목에는 h0~h5 를 쓴다. */
+:where(.display-1), :where(.display-1b) { font-size: var(--text-display-1-size); line-height: var(--text-display-1-line); letter-spacing: var(--text-display-1-spacing); margin: 0; }
+:where(.display-2), :where(.display-2b) { font-size: var(--text-display-2-size); line-height: var(--text-display-2-line); letter-spacing: var(--text-display-2-spacing); margin: 0; }
+:where(.display-3), :where(.display-3b) { font-size: var(--text-display-3-size); line-height: var(--text-display-3-line); letter-spacing: var(--text-display-3-spacing); margin: 0; }
+
+:where(.display-1)  { font-weight: var(--text-display-1-weight); }
+:where(.display-2)  { font-weight: var(--text-display-2-weight); }
+:where(.display-3)  { font-weight: var(--text-display-3-weight); }
+:where(.display-1b) { font-weight: var(--text-display-1-weight-bold); }
+:where(.display-2b) { font-weight: var(--text-display-2-weight-bold); }
+:where(.display-3b) { font-weight: var(--text-display-3-weight-bold); }
 
 /* Heading — margin은 0 기본, 필요 시 컴포넌트에서 override */
-.h0, .h0b { font-size: var(--text-h0-size); line-height: var(--text-h0-line); letter-spacing: var(--text-h0-spacing); margin: 0; }
-.h1, .h1b { font-size: var(--text-h1-size); line-height: var(--text-h1-line); letter-spacing: var(--text-h1-spacing); margin: 0; }
-.h2, .h2b { font-size: var(--text-h2-size); line-height: var(--text-h2-line); letter-spacing: var(--text-h2-spacing); margin: 0; }
-.h3, .h3b { font-size: var(--text-h3-size); line-height: var(--text-h3-line); letter-spacing: var(--text-h3-spacing); margin: 0; }
-.h4, .h4b { font-size: var(--text-h4-size); line-height: var(--text-h4-line); letter-spacing: var(--text-h4-spacing); margin: 0; }
-.h5, .h5b { font-size: var(--text-h5-size); line-height: var(--text-h5-line); letter-spacing: var(--text-h5-spacing); margin: 0; }
+:where(.h0), :where(.h0b) { font-size: var(--text-h0-size); line-height: var(--text-h0-line); letter-spacing: var(--text-h0-spacing); margin: 0; }
+:where(.h1), :where(.h1b) { font-size: var(--text-h1-size); line-height: var(--text-h1-line); letter-spacing: var(--text-h1-spacing); margin: 0; }
+:where(.h2), :where(.h2b) { font-size: var(--text-h2-size); line-height: var(--text-h2-line); letter-spacing: var(--text-h2-spacing); margin: 0; }
+:where(.h3), :where(.h3b) { font-size: var(--text-h3-size); line-height: var(--text-h3-line); letter-spacing: var(--text-h3-spacing); margin: 0; }
+:where(.h4), :where(.h4b) { font-size: var(--text-h4-size); line-height: var(--text-h4-line); letter-spacing: var(--text-h4-spacing); margin: 0; }
+:where(.h5), :where(.h5b) { font-size: var(--text-h5-size); line-height: var(--text-h5-line); letter-spacing: var(--text-h5-spacing); margin: 0; }
 
 /* Weight */
-.h0  { font-weight: var(--text-h0-weight); }
-.h1  { font-weight: var(--text-h1-weight); }
-.h2  { font-weight: var(--text-h2-weight); }
-.h3  { font-weight: var(--text-h3-weight); }
-.h4  { font-weight: var(--text-h4-weight); }
-.h5  { font-weight: var(--text-h5-weight); }
-.h0b { font-weight: var(--text-h0-weight-bold); }
-.h1b { font-weight: var(--text-h1-weight-bold); }
-.h2b { font-weight: var(--text-h2-weight-bold); }
-.h3b { font-weight: var(--text-h3-weight-bold); }
-.h4b { font-weight: var(--text-h4-weight-bold); }
-.h5b { font-weight: var(--text-h5-weight-bold); }
+:where(.h0)  { font-weight: var(--text-h0-weight); }
+:where(.h1)  { font-weight: var(--text-h1-weight); }
+:where(.h2)  { font-weight: var(--text-h2-weight); }
+:where(.h3)  { font-weight: var(--text-h3-weight); }
+:where(.h4)  { font-weight: var(--text-h4-weight); }
+:where(.h5)  { font-weight: var(--text-h5-weight); }
+:where(.h0b) { font-weight: var(--text-h0-weight-bold); }
+:where(.h1b) { font-weight: var(--text-h1-weight-bold); }
+:where(.h2b) { font-weight: var(--text-h2-weight-bold); }
+:where(.h3b) { font-weight: var(--text-h3-weight-bold); }
+:where(.h4b) { font-weight: var(--text-h4-weight-bold); }
+:where(.h5b) { font-weight: var(--text-h5-weight-bold); }
 
 /* Body — weight 명시 */
-.body-1,  .body-1b { font-size: var(--text-body-1-size); line-height: var(--text-body-1-line); margin: 0; font-weight: var(--text-body-1-weight); }
-.body-2,  .body-2b { font-size: var(--text-body-2-size); line-height: var(--text-body-2-line); margin: 0; font-weight: var(--text-body-2-weight); }
-.body-3,  .body-3b { font-size: var(--text-body-3-size); line-height: var(--text-body-3-line); margin: 0; font-weight: var(--text-body-3-weight); }
+:where(.body-1), :where(.body-1b) { font-size: var(--text-body-1-size); line-height: var(--text-body-1-line); margin: 0; font-weight: var(--text-body-1-weight); }
+:where(.body-2), :where(.body-2b) { font-size: var(--text-body-2-size); line-height: var(--text-body-2-line); margin: 0; font-weight: var(--text-body-2-weight); }
+:where(.body-3), :where(.body-3b) { font-size: var(--text-body-3-size); line-height: var(--text-body-3-line); margin: 0; font-weight: var(--text-body-3-weight); }
 
-.body-1b { font-weight: var(--text-body-1-weight-bold); }
-.body-2b { font-weight: var(--text-body-2-weight-bold); }
-.body-3b { font-weight: var(--text-body-3-weight-bold); }
+:where(.body-1b) { font-weight: var(--text-body-1-weight-bold); }
+:where(.body-2b) { font-weight: var(--text-body-2-weight-bold); }
+:where(.body-3b) { font-weight: var(--text-body-3-weight-bold); }
 
 /* Button / Caption — button에 weight 추가, caption과 크기 차별화 */
-.button-1 { font-size: var(--text-button-1-size); line-height: var(--text-button-1-line); font-weight: var(--text-button-1-weight); margin: 0; }
-.button-2 { font-size: var(--text-button-2-size); line-height: var(--text-button-2-line); font-weight: var(--text-button-2-weight); margin: 0; }
-.caption-1, .caption-1b { font-size: var(--text-caption-1-size); line-height: var(--text-caption-1-line); font-weight: var(--text-caption-1-weight); margin: 0; }
-.caption-2, .caption-2b { font-size: var(--text-caption-2-size); line-height: var(--text-caption-2-line); font-weight: var(--text-caption-2-weight); margin: 0; }
+:where(.button-1) { font-size: var(--text-button-1-size); line-height: var(--text-button-1-line); font-weight: var(--text-button-1-weight); margin: 0; }
+:where(.button-2) { font-size: var(--text-button-2-size); line-height: var(--text-button-2-line); font-weight: var(--text-button-2-weight); margin: 0; }
+:where(.caption-1), :where(.caption-1b) { font-size: var(--text-caption-1-size); line-height: var(--text-caption-1-line); font-weight: var(--text-caption-1-weight); margin: 0; }
+:where(.caption-2), :where(.caption-2b) { font-size: var(--text-caption-2-size); line-height: var(--text-caption-2-line); font-weight: var(--text-caption-2-weight); margin: 0; }
 /* b 계열 — 크기·행간은 같고 굵기만 다르다(body-*b와 동일한 규칙) */
-.caption-1b { font-weight: var(--text-caption-1-weight-bold); }
-.caption-2b { font-weight: var(--text-caption-2-weight-bold); }
+:where(.caption-1b) { font-weight: var(--text-caption-1-weight-bold); }
+:where(.caption-2b) { font-weight: var(--text-caption-2-weight-bold); }
 
 /* ── 전역 스크롤바 ──────────────────────────────────────── */
 ::-webkit-scrollbar { width: 6px; height: 6px; }

package/dist/packages/core/src/tokens.css

@@ -133,10 +133,34 @@
   --font-family: 'Pretendard Variable', 'Pretendard', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
 
   /* ── 타입 스케일 ──────────────────────────────────────────
-     클래스(.h0~.h5 / .body-* / .button-* / .caption-*)는 styles.css에 있고 값은 전부
+     클래스(.display-1~3 / .h0~.h5 / .body-* / .button-* / .caption-*)는 styles.css에 있고 값은 전부
      여기서 온다. 아래 반응형·글자 크기 스케일 블록이 같은 변수를 재정의하므로,
      다른 프레임워크(Tailwind @theme 등)에서도 이 변수만 읽으면 동일한 스케일을 얻는다.
      `-weight`는 기본, `-weight-bold`는 클래스명에 b가 붙은 변형(.h0b, .body-1b …)이다. */
+  /* ── 디스플레이 단 (display-1~3) ─────────────────────────
+     h0 **위**의 세 단. 앱 화면 제목이 아니라 **랜딩·히어로처럼 크게 외치는 자리** 전용이다.
+     그래서 아래 h0~h5 와 규약이 셋 다르다 —
+
+      · **크기는 clamp(뷰포트 연속 보간)** 이다. h 단은 미디어쿼리로 세 계단을 뛰는데,
+        히어로 글자가 계단으로 뛰면 그 폭 근처에서 줄바꿈이 툭툭 달라진다. 아래
+        반응형 블록에 display 를 **다시 적지 않는 것은 그 때문**이다(적으면 계단이
+        되살아난다).
+      · **행간은 배수, 자간은 em** 이다. 크기가 연속으로 변하는데 px 로 박으면 큰 화면
+        에서 행간이 붙고 작은 화면에서 벌어진다.
+      · **글자 크기 스케일([data-font-scale])에서 뺀다.** h0~h3 도 같은 이유로 빠져
+        있다 — 이미 충분히 크고, 키우면 히어로 한 줄이 화면을 넘긴다.
+
+     h0(40px) 과 겹치지 않게 잡았다. 어느 폭에서도 h0 < display-3 < display-2 < display-1:
+       375px  h0 28 · d3 34 · d2 38 · d1 44
+       768px  h0 32 · d3 34 · d2 40 · d1 51
+       1024px h0 40 · d3 42 · d2 53 · d1 68
+       1440px h0 40 · d3 44 · d2 56 · d1 72   (셋 다 최댓값 도달)
+     특히 1024px 은 h0 가 32→40 으로 뛰는 지점이라, display-3 의 vw 계수(4.1)는
+     그 자리에서 40 을 넘도록 잡은 값이다. 낮추면 그 폭에서만 h0 보다 작아진다. */
+  --text-display-1-size: clamp(44px, 6.6vw, 72px); --text-display-1-line: 1.05; --text-display-1-spacing: -0.04em; --text-display-1-weight: 800; --text-display-1-weight-bold: 900;
+  --text-display-2-size: clamp(38px, 5.2vw, 56px); --text-display-2-line: 1.12; --text-display-2-spacing: -0.03em; --text-display-2-weight: 700; --text-display-2-weight-bold: 800;
+  --text-display-3-size: clamp(34px, 4.1vw, 44px); --text-display-3-line: 1.2;  --text-display-3-spacing: -0.02em; --text-display-3-weight: 700; --text-display-3-weight-bold: 800;
+
   --text-h0-size: 40px;   --text-h0-line: 52px;   --text-h0-spacing: -1px;     --text-h0-weight: 700; --text-h0-weight-bold: 800;
   --text-h1-size: 32px;   --text-h1-line: 44px;   --text-h1-spacing: -0.5px;   --text-h1-weight: 700; --text-h1-weight-bold: 800;
   --text-h2-size: 24px;   --text-h2-line: 34px;   --text-h2-spacing: -0.25px;  --text-h2-weight: 500; --text-h2-weight-bold: 600;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ihabdevteam/core",
-  "version": "0.9.10",
+  "version": "0.10.0",
   "private": false,
   "main": "dist/ihabdevteam-core.cjs.js",
   "module": "dist/ihabdevteam-core.esm.js",
@@ -81,7 +81,8 @@
     },
     "./i18n/locales/*": "./dist/packages/core/src/i18n/locales/*",
     "./styles.css": "./dist/ihabdevteam-core.css",
-    "./tokens.css": "./dist/ihabdevteam-core-tokens.css"
+    "./tokens.css": "./dist/ihabdevteam-core-tokens.css",
+    "./fonts.css": "./dist/ihabdevteam-core-fonts.css"
   },
   "publishConfig": {
     "access": "public"
@@ -100,13 +101,13 @@
     "dist/**/*.css"
   ],
   "scripts": {
-    "build": "(rm -rf dist node_modules/.tmp/tsconfig.core.tsbuildinfo 2>/dev/null || true) && tsc -p tsconfig.json && postcss src/styles.css -o dist/ihabdevteam-core.css && CORE_CSS_NO_PREFIX=1 postcss src/tokens.css -o dist/ihabdevteam-core-tokens.css && mkdir -p dist/packages/core/src && find src -type f \\( -name '*.css' -o -name '*.svg' -o -name '*.mp3' -o -name '*.png' \\) | while IFS= read -r f; do d=$(dirname \"$f\"); mkdir -p \"dist/packages/core/$d\"; cp \"$f\" \"dist/packages/core/$d/\"; done && mkdir -p dist/logo && if [ -d src/logo ]; then cp -r src/logo/. dist/logo/; elif [ -d ../../logo ]; then cp -r ../../logo/. dist/logo/; elif [ -d ../../public/logo ]; then cp -r ../../public/logo/. dist/logo/; fi && node scripts/check-build-outputs.mjs && rollup -c && cp dist/packages/core/src/index.d.ts dist/ihabdevteam-core.d.ts",
+    "build": "(rm -rf dist node_modules/.tmp/tsconfig.core.tsbuildinfo 2>/dev/null || true) && tsc -p tsconfig.json && postcss src/styles.css -o dist/ihabdevteam-core.css && CORE_CSS_NO_PREFIX=1 postcss src/tokens.css -o dist/ihabdevteam-core-tokens.css && cp src/fonts.css dist/ihabdevteam-core-fonts.css && mkdir -p dist/packages/core/src && find src -type f \\( -name '*.css' -o -name '*.svg' -o -name '*.mp3' -o -name '*.png' \\) | while IFS= read -r f; do d=$(dirname \"$f\"); mkdir -p \"dist/packages/core/$d\"; cp \"$f\" \"dist/packages/core/$d/\"; done && mkdir -p dist/logo && if [ -d src/logo ]; then cp -r src/logo/. dist/logo/; elif [ -d ../../logo ]; then cp -r ../../logo/. dist/logo/; elif [ -d ../../public/logo ]; then cp -r ../../public/logo/. dist/logo/; fi && node scripts/check-build-outputs.mjs && rollup -c && cp dist/packages/core/src/index.d.ts dist/ihabdevteam-core.d.ts",
     "extract-api": "api-extractor run --local --verbose",
     "postbuild": "npm run extract-api",
     "prepare": "npm run build",
     "prepublishOnly": "npm run build && npm run audit:exports && npm pack --dry-run > /dev/null",
     "dev": "vite serve playground --config playground/vite.config.ts",
-    "typecheck:playground": "tsc -p playground/tsconfig.json --noEmit",
+    "typecheck:playground": "npm run build --silent && tsc -p playground/tsconfig.json --noEmit",
     "build-playground": "vite build playground --config playground/vite.config.js",
     "preview-playground": "vite preview --outDir playground/dist",
     "smoke-test": "node ./scripts/smoke-test.js",
@@ -126,7 +127,8 @@
   },
   "peerDependencies": {
     "react": "^16.8 || ^17 || ^18 || ^19",
-    "react-dom": "^16.8 || ^17 || ^18 || ^19"
+    "react-dom": "^16.8 || ^17 || ^18 || ^19",
+    "pretendard": "^1.3.9"
   },
   "engines": {
     "node": ">=16"
@@ -177,5 +179,10 @@
       "path": "dist/ihabdevteam-core.esm.js",
       "limit": "800 KB"
     }
-  ]
+  ],
+  "peerDependenciesMeta": {
+    "pretendard": {
+      "optional": true
+    }
+  }
 }