nbnloper / edupay-admin star
Forked from ldu0009 / edupay-admin
임동욱 임동욱 08-18
refactor: box-sizing 전역 리셋 도입, 사이드바의 모듈 범위 리셋 제거 
사이드바 폭 문제의 뿌리가 전역 리셋 부재였다. @fox 컴포넌트는 각자 `box-sizing: border-box`를
선언하지만 앱 쪽에는 기준이 없어 모듈마다 따로 챙겨야 했고, 빠뜨리면 `inline-size: 100%`에
패딩이 더해져 자식이 부모보다 넓어졌다.

globals.scss에 리셋을 넣고, 직전 커밋에서 사이드바 모듈에 넣었던 범위 한정 리셋은 지웠다 —
같은 일을 두 곳에서 하지 않는다.

@fox는 이미 스스로 선언하고 있어 영향이 없다. 검증도 그렇게 나왔다 — 헤더 64/pill 44/아이콘
버튼 40, 사이드바 240·216·216·216·200(3개), 본문 x240·여백 24, 로그인 카드 440·입력 56×360·
버튼 360×56·토글 세로중앙차 0으로 전부 종전과 같다.

Co-Authored-By: Claude Opus 5
@a4673f44c8c603b9a023e6166efaafb4d1c8f421
83cc387
a4673f4
app/(protected)/(basic)/_components/admin-sidebar.module.scss
--- app/(protected)/(basic)/_components/admin-sidebar.module.scss
+++ app/(protected)/(basic)/_components/admin-sidebar.module.scss
@@ -7,16 +7,6 @@
 
 
 @use "@fox/styles/abstracts" as fox;
 
 
-// 여기 그리는 모든 조각은 테두리·안쪽 여백을 폭에 포함해 센다. 시안이 그 기준으로 그려져
 
-// 있는데(Figma stroke는 안쪽) 앱에 전역 리셋이 없어 기본값이 `content-box`다 — 그대로 두면
 
-// `inline-size: 100%`에 패딩이 더해져 항목이 부모보다 넓어진다.
 
-.sidebar,
 
-.sidebar *,
 
-.sidebar *::before,
 
-.sidebar *::after {
 
-  box-sizing: border-box;
 
-}
 
-
 
 .sidebar {
 
   box-sizing: border-box;
 
   display: flex;
83cc387
a4673f4
app/globals.scss
--- app/globals.scss
+++ app/globals.scss
@@ -55,6 +55,15 @@
 
   --app-font-sans: "Pretendard";
 
 }
 
 
+// 테두리·안쪽 여백을 폭에 포함해 센다. 시안이 그 기준으로 그려져 있고(Figma stroke는 안쪽),
 
+// 없으면 `inline-size: 100%`에 패딩이 더해져 자식이 부모보다 넓어진다 — 사이드바 항목 폭이
 
+// 시안보다 15px 넓던 원인이 이것이었다. @fox 컴포넌트는 각자 선언하고 있어 영향이 없다.
 
+*,
 
+*::before,
 
+*::after {
 
+  box-sizing: border-box;
 
+}
 
+
 
 // 앱 셸 — 루트 레이아웃이 뷰포트 높이를 채우고 세로로 쌓이는 구조.
 
 // 푸터를 바닥에 붙이거나 본문 영역만 스크롤시키는 화면들이 이 전제에 기댄다.
 
 html,
Add a comment
List