임동욱 임동욱 08-19
fix: 아이템 썸네일을 cover → contain — 그림을 잘라내지 않는다
목록 셀(80×80)과 등록·수정 팝업의 업로드 미리보기(120×120) 모두. 아이템은 생김새 자체가
정보라 잘라내면 어떤 아이템인지 알아볼 수 없고, 미리보기는 고른 그림을 확인하는 자리라
일부만 보이면 확인이 되지 않는다.

@fox: `.fox-file-upload__thumb-image`의 object-fit. FoxFileUpload의 image 모드를 쓰는 화면이
이 팝업뿐이라 영향 범위가 이 화면 안이다.

Co-Authored-By: Claude Opus 5 
@fe26e23f30deb5916faa3728eb081f853b2f7f3e
@fox/styles/_fox-file-upload.scss
--- @fox/styles/_fox-file-upload.scss
+++ @fox/styles/_fox-file-upload.scss
@@ -127,10 +127,12 @@
     block-size: fox.icon(6);
   }
 
+  // 잘라내지 않고 상자 안에 다 보이게 담는다 — 고른 그림이 어떻게 생겼는지 확인하는
+  // 자리라 일부만 보이면 확인이 되지 않는다.
   &__thumb-image {
     inline-size: 100%;
     block-size: 100%;
-    object-fit: cover;
+    object-fit: contain;
   }
 
   &__thumb-remove {
app/(protected)/(basic)/decoration-items/_components/decoration-item-list.module.scss
--- app/(protected)/(basic)/decoration-items/_components/decoration-item-list.module.scss
+++ app/(protected)/(basic)/decoration-items/_components/decoration-item-list.module.scss
@@ -1,4 +1,5 @@
-// 목록 표의 썸네일 — 시안 ADM_ITM_101의 `img-thumb`(80×80 · 1px 테두리 · radius 4 · cover).
+// 목록 표의 썸네일 — 시안 ADM_ITM_101의 `img-thumb`(80×80 · 1px 테두리 · radius 4).
+// 그림은 잘라내지 않고 상자 안에 다 보이게 담는다(contain) — 아이템 생김새가 정보다.
 // @fox에 이미지 조각이 없어 이 화면 전용으로 둔다(값은 전부 @fox 토큰).
 
 @use "@fox/styles/abstracts" as fox;
@@ -8,5 +9,5 @@
   block-size: 8rem;
   border: fox.border(1) solid fox.color(border-neutral-subtler);
   border-radius: fox.radius(2);
-  object-fit: cover;
+  object-fit: contain;
 }
Add a comment
List