Commit @83cc3877a4b1f8010c3ab13f403e014cda535529

임동욱 08-18

fix: 사이드바 항목 폭이 시안보다 넓던 문제 — box-sizing과 테두리 처리

원인이 둘이었다.

1. `box-sizing`이 기본값 `content-box`였다. 앱에 전역 리셋이 없고(@fox 컴포넌트는 각자
   선언한다) 이 모듈은 `.sidebar`에만 줘서, `inline-size: 100%`에 패딩·테두리가 더해졌다.
   2depth 판이 233, 그 안의 행이 231이 됐다(시안 216/200). 이 파일이 그리는 조각 전체에
   `border-box`를 적용했다.

2. 테두리가 폭을 먹었다. Figma stroke는 안쪽에 그려지지만 CSS `border`는 박스를 줄인다.
   사이드바 오른쪽 구분선 때문에 안쪽 폭이 216에서 215로(사용자가 본 값), 2depth 판의
   테두리 때문에 행이 200에서 198로 줄었다. 둘 다 레이아웃에 관여하지 않는 inset 그림자로
   같은 선을 그렸다 — 헤더 프로필 pill에서 쓴 것과 같은 처리다.

검증 — 실측이 시안과 일치한다. 사이드바 240, 내부 리스트·1depth 행·2depth 판 216,
2depth 행 200(3개 모두), 즐겨찾기 행 216. 흰 판과 구분선은 그대로 보인다.

Co-Authored-By: Claude Opus 5

@83cc3877a4b1f8010c3ab13f403e014cda535529

6f38284

83cc387

app/(protected)/(basic)/_components/admin-sidebar.module.scss

--- app/(protected)/(basic)/_components/admin-sidebar.module.scss

+++ app/(protected)/(basic)/_components/admin-sidebar.module.scss


 
 @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;

   // 시안 240px. Figma가 변수로 export하지 않는다.
   inline-size: 24rem;
   padding: fox.padding(5);
-  border-inline-end: fox.border(1) solid fox.color(border-neutral-subtler);
+  // 시안 240은 구분선을 포함한 값이라 `border`로 그리면 안쪽 폭이 216에서 215로 줄어든다.
+  // 레이아웃에 관여하지 않는 inset 그림자로 같은 선을 그린다(헤더 프로필 pill과 같은 처리).
+  box-shadow: inset calc(-1 * #{fox.border(1)}) 0 0 0
+    fox.color(border-neutral-subtler);
   // 시안은 회색에서 시작해 70% 지점부터 옅은 파랑으로 넘어간다.
   background: linear-gradient(
     to bottom,

   align-items: flex-start;
   margin: fox.gap(2) 0 0;
   padding: fox.padding(3);
-  border: fox.border(1) solid fox.color(border-neutral-subtler);
   border-radius: fox.radius(3);
+  // 시안의 2depth-list가 200인데 `border`로 그리면 216에서 테두리 2px을 더 빼 198이 된다.
+  // 사이드바 바깥 구분선과 같은 이유로 inset 그림자를 쓴다(Figma stroke는 안쪽이다).
+  box-shadow: inset 0 0 0 fox.border(1) fox.color(border-neutral-subtler);
   background: fox.color(surface-neutral-default);
   list-style: none;
 }

Add a comment

Open 0
Closed 0

List

Delete comment