@ncds/ui-admin 1.8.27 → 1.8.28-alpha.0

package/dist/esm/vitest.config.js

@@ -22,7 +22,18 @@ export default defineConfig({
       // 'lcov' 대신 'lcovonly' — 'lcov' 는 HTML 리포트까지 생성한다.
       reporter: ['text-summary', ['lcovonly', {
         projectRoot: REPO_ROOT
-      }]]
+      }]],
+      // 회귀 방지 하한선 — 실측에서 약 2%p 낮춘 값 (ui-admin-mcp 와 같은 여유폭).
+      // 실측 기준: 2026-10-12, 25cb4d96 — stmts 54.91 / branch 44.63 / funcs 55.20 / lines 55.80
+      // 최종 목표: 93 / 88 (lines 95 · branches 90). 테스트 보강 단계마다 실측 −2 로 인상한다.
+      // autoUpdate: false — 값은 실측을 확인하고 사람이 직접 올린다.
+      thresholds: {
+        autoUpdate: false,
+        statements: 53,
+        branches: 43,
+        functions: 53,
+        lines: 54
+      }
     }
   }
 });

package/dist/temp/src/components/feedback-and-status/badge/Badge.d.ts

@@ -16,4 +16,4 @@ type BadgeProps = {
 };
 declare const Badge: ({ label, type, color, className, leadingIcon, trailingIcon, size, }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
 export { Badge };
-export type { BadgeType, BadgeColor, BadgeSize, BadgeProps };
+export type { BadgeColor, BadgeProps, BadgeSize, BadgeType };

package/dist/temp/src/components/feedback-and-status/badge/Badge.js

@@ -7,7 +7,7 @@ import { sideSlotRender } from './utils';
  */
 const BADGE_ICON_SIZE = 12;
 /** new-badge 박스 안에 들어가는 'N' 아이콘 크기. 박스는 sm 16px / md 20px 이며 아이콘은 그보다 작다(패딩 포함). */
-const NEW_BADGE_ICON_SIZE = { sm: 12, md: 16 };
+const NEW_BADGE_ICON_SIZE = { sm: 12, md: 14 };
 const Badge = ({ label, type = 'pill-outline', color = 'neutral', className, leadingIcon, trailingIcon, size = 'xs', }) => {
     // new-badge: 신규 콘텐츠 'N' 마크 전용 타입. label·color·leadingIcon·trailingIcon은 무시되고
     // 색은 --pink-600 으로 고정된다. (디자이너 명세: Icon/FeaturedIcon/Badge로 대체 불가한 전용 표시)

package/dist/temp/src/components/layout/page-title/__tests__/pageTitleStyle.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/temp/src/components/layout/page-title/__tests__/pageTitleStyle.test.js

@@ -0,0 +1,94 @@
+import path from 'node:path';
+import { compile as compileSass } from 'sass';
+import { describe, expect, it } from 'vitest';
+// 배경·그림자·패딩은 jsdom 에서 계산되지 않으므로, 컴파일된 CSS 에서 variant 별 규칙을 검사한다.
+// (input-base/__tests__/inputAutofill.test.ts 와 같은 방식 — 컴포넌트 SCSS 엔트리를 직접 컴파일)
+const PAGE_TITLE_SCSS_PATH = path.resolve(__dirname, '../../../../../assets/styles/components/page-title/_index.scss');
+const compiledPageTitleCss = compileSass(PAGE_TITLE_SCSS_PATH).css;
+/** 선택자 → 선언 목록. 같은 선택자가 여러 규칙에 나오면 선언을 이어 붙인다. */
+const parseRules = (css) => {
+    const rules = new Map();
+    for (const [, selectorList, body] of css.matchAll(/([^{}]+)\{([^{}]*)\}/g)) {
+        const declarations = body
+            .split(';')
+            .map((declaration) => declaration.trim().replace(/\s+/g, ' '))
+            .filter(Boolean);
+        for (const selector of selectorList.split(',').map((selector) => selector.trim().replace(/\s+/g, ' '))) {
+            rules.set(selector, [...(rules.get(selector) ?? []), ...declarations]);
+        }
+    }
+    return rules;
+};
+const rules = parseRules(compiledPageTitleCss);
+const declarationsOf = (selector) => rules.get(selector) ?? [];
+const propertiesOf = (selector) => declarationsOf(selector).map((declaration) => declaration.split(':')[0].trim());
+const ROOT = '.ncua-page-title';
+const FIXED = '.ncua-page-title--fixed';
+const PAGE_HEADER = '.ncua-page-title__page-header';
+const FIXED_PAGE_HEADER = '.ncua-page-title--fixed .ncua-page-title__page-header';
+describe('PageTitle 스타일 — Default (·Detail)', () => {
+    it('.ncua-page-title 에 background·box-shadow 가 없다 (투명, 그림자 없음)', () => {
+        // Given: 컴파일된 PageTitle CSS 에서
+        // When: 루트 규칙의 속성을 모으면
+        const properties = propertiesOf(ROOT);
+        // Then: 루트 규칙은 존재하지만 배경·그림자를 지정하지 않는다
+        expect(properties.length).toBeGreaterThan(0);
+        expect(properties).not.toContain('background');
+        expect(properties).not.toContain('background-color');
+        expect(properties).not.toContain('box-shadow');
+    });
+    it('.ncua-page-title__page-header 패딩은 32px 40px 0 이다', () => {
+        // Given: 컴파일된 PageTitle CSS 에서
+        // When: page-header 규칙을 찾으면
+        const declarations = declarationsOf(PAGE_HEADER);
+        // Then: 위 32px · 좌우 40px · 아래 0 이다
+        expect(declarations).toContain('padding: 32px 40px 0');
+        expect(declarations).not.toContain('padding: 24px 40px');
+    });
+});
+describe('PageTitle 스타일 — Fixed (·Fixed Detail)', () => {
+    it('.ncua-page-title--fixed 배경은 --gray-50 이다', () => {
+        // Given: 컴파일된 PageTitle CSS 에서
+        // When: fixed modifier 규칙을 찾으면
+        const declarations = declarationsOf(FIXED);
+        // Then: sticky 로 콘텐츠 위에 겹치므로 배경 Gray/50 을 가진다
+        expect(declarations).toContain('background: var(--gray-50)');
+    });
+    it('.ncua-page-title--fixed 하단 border 는 1px solid --gray-100 이다', () => {
+        // Given/When: fixed modifier 규칙을 찾으면
+        const declarations = declarationsOf(FIXED);
+        // Then: 기존 Gray/300 이 아니라 Gray/100 border 를 쓴다
+        expect(declarations).toContain('border-bottom: 1px solid var(--gray-100)');
+        expect(declarations).not.toContain('border-bottom: 1px solid var(--gray-300)');
+    });
+    it('.ncua-page-title--fixed 에 box-shadow 가 없다', () => {
+        // Given/When: fixed modifier 규칙의 속성을 모으면
+        // Then: 그림자를 지정하지 않는다
+        expect(propertiesOf(FIXED)).not.toContain('box-shadow');
+    });
+    it('Fixed 의 page-header 패딩은 12px 40px 로 유지된다', () => {
+        // Given/When: fixed 하위 page-header 규칙을 찾으면
+        // Then: 기존 Fixed 패딩이 그대로다 (범위 밖)
+        expect(declarationsOf(FIXED_PAGE_HEADER)).toContain('padding: 12px 40px');
+    });
+    it('Fixed sticky 동작(position·top·z-index)은 유지된다', () => {
+        // Given/When: fixed modifier 규칙을 찾으면
+        const declarations = declarationsOf(FIXED);
+        // Then: 기존 sticky 선언이 그대로다
+        expect(declarations).toContain('position: sticky');
+        expect(declarations).toContain('top: 0');
+        expect(declarations).toContain('z-index: 999');
+    });
+});
+describe('PageTitle 스타일 — 토큰 사용', () => {
+    it('배경·border 색상에 하드코딩 값 없이 CSS 변수만 쓴다 (ADR-4)', () => {
+        // Given/When: 루트·fixed 규칙의 배경·border 선언을 모으면
+        const colorDeclarations = [...declarationsOf(ROOT), ...declarationsOf(FIXED)].filter((declaration) => /^(background|border-bottom)/.test(declaration));
+        // Then: hex·rgb·색 이름 대신 var(--*) 만 쓴다
+        expect(colorDeclarations.length).toBeGreaterThan(0);
+        for (const declaration of colorDeclarations) {
+            expect(declaration).not.toMatch(/#[0-9a-f]{3,8}\b|rgba?\(|(?<![-\w])white\b/i);
+            expect(declaration).toMatch(/var\(--[a-z0-9-]+\)/);
+        }
+    });
+});