390px 실측 결과 26개 라우트 중 24개에서 문서가 뷰포트를 11px 넘겼고, 320px 에서는 햄버거 버튼이 화면 밖으로 밀려 내비게이션 자체가 불가능했다. 원인은 예외 없이 헤더 우측의 언어(71px)+통화(91px) 선택기였다. 이를 모바일 드로어로 옮기고, 좁은 화면에서는 세로 목록 대신 가로 칩으로 나열하도록 했다. 통화·배송국가는 이커머스 모듈이 슬롯에 주입하는 조각이므로 모듈 쪽에도 responsive.portable 오버라이드를 넣었다. 템플릿의 드로어 자리는 overflow-y-auto 라 옛 absolute 드롭다운이 잘리므로, 템플릿의 이커머스 모듈 의존 하한을 >=1.0.2 로 올렸다. 게시글 상단 네비는 성격이 다른 회귀였다. 게시판 이름이 길수록 flex 형제인 목록·이전글·다음글 버튼이 좁아지는데(87→73→62px), document.scrollWidth 는 내내 뷰포트와 같아 오버플로 검사로는 잡히지 않았다. 넘치는 게 아니라 줄어드는 회귀다. shrink-0 으로 버튼 폭을 고정하고, 모바일에서만 게시판 이름을 자기 줄로 올렸다. 버튼 3개 고정폭 261px + 21자 제목 323px = 584px < 태블릿 콘텐츠 735px 이므로 portable 이 아니라 mobile 스코프로 한정했다. 커밋 전 점검에서 audit 결함 두 건이 드러나 함께 고쳤다. 첫째, layout-* 룰 28개 중 27개가 appliesTo 에 확장 주입 조각 경로를 빠뜨려 조각 32개가 정적 검사에서 통째로 빠져 있었다. 실제 위반 60건이 은닉돼 있었고 그중 45건은 error 다. 다만 glob 만 넓히면 layout-grammar 의 root 화이트리스트가 조각의 정당한 키(target_layout/injections/extension_point/mode/priority)를 전부 오탐해 90건의 error 를 새로 만든다. 조각은 레이아웃이 아니라 별도 스키마이므로 extension-fragment 스키마를 신설해 오탐을 없애는 동시에 조각 고유의 결함(대상 키 누락으로 인한 silent drop, target_layout ↔ extension_point 동시 정의, 무동작 조각)을 새로 검출하게 했다. 둘째, Icon 의 w-N h-N 을 size prop 으로 바꾸라는 규정이 틀렸다. Icon 은 <i> 글리프라 박스 크기가 곧 font-size 인데, size prop 은 Font Awesome fa-* 로 매핑되어 상대값 0.875em + line-height 붕괴를 동반한다. 실측하면 w-4 h-4(16×16)가 fa-sm 에서 12.25×0.88 이 된다. 등가는 text-base 하나뿐이다. 앞선 작업에서 size:"sm" 으로 치환했던 2건을 되돌리고, 규정과 룰 메시지를 실측 등가표로 교체했다.
60 lines
1.6 KiB
JSON
60 lines
1.6 KiB
JSON
{
|
|
"name": "sirsoft-basic",
|
|
"version": "1.0.2",
|
|
"description": "Gnuboard7 Basic User Template Components - Nexibase Style",
|
|
"type": "module",
|
|
"main": "dist/components.js",
|
|
"types": "dist/index.d.ts",
|
|
"files": [
|
|
"dist",
|
|
"components.json"
|
|
],
|
|
"scripts": {
|
|
"build": "vite build",
|
|
"dev": "vite build --watch",
|
|
"test": "vitest",
|
|
"test:run": "vitest run",
|
|
"test:coverage": "vitest run --coverage",
|
|
"type-check": "tsc --noEmit"
|
|
},
|
|
"keywords": [
|
|
"g7",
|
|
"template",
|
|
"user",
|
|
"react",
|
|
"components",
|
|
"nexibase"
|
|
],
|
|
"author": "sirsoft",
|
|
"license": "MIT",
|
|
"peerDependencies": {
|
|
"react": "^19.0.0",
|
|
"react-dom": "^19.0.0"
|
|
},
|
|
"devDependencies": {
|
|
"@tailwindcss/vite": "^4.0.0",
|
|
"@testing-library/jest-dom": "^6.9.1",
|
|
"@testing-library/react": "^16.3.0",
|
|
"@testing-library/user-event": "^14.6.1",
|
|
"@types/react": "^19.0.0",
|
|
"@types/react-dom": "^19.0.0",
|
|
"@vitejs/plugin-react": "^5.1.0",
|
|
"axe-core": "^4.11.0",
|
|
"happy-dom": "^20.0.10",
|
|
"tailwindcss": "^4.0.0",
|
|
"typescript": "^5.7.0",
|
|
"vite": "^7.0.4",
|
|
"vite-plugin-dts": "^4.5.4",
|
|
"vitest": "^4.0.6",
|
|
"vitest-axe": "^0.1.0"
|
|
},
|
|
"dependencies": {
|
|
"@dnd-kit/core": "^6.3.1",
|
|
"@dnd-kit/sortable": "^10.0.0",
|
|
"@dnd-kit/utilities": "^3.2.2",
|
|
"browser-image-compression": "^2.0.2",
|
|
"dompurify": "^3.3.1",
|
|
"yet-another-react-lightbox": "^3.27.0"
|
|
}
|
|
}
|