nbnloper / edupay-admin star
Forked from ldu0009 / edupay-admin
임동욱 임동욱 08-18
merge: 사이드바 항목 폭 수정
@802058c0ee7ea14ca367c21914e1e3345cf20f30
fe7f656
802058c
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,6 +7,16 @@
 
 
 @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;
@@ -15,7 +25,10 @@
 
   // 시안 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,
@@ -163,8 +176,10 @@
 
   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
List