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
... | ... | @@ -127,10 +127,12 @@ |
| 127 | 127 |
block-size: fox.icon(6); |
| 128 | 128 |
} |
| 129 | 129 |
|
| 130 |
+ // 잘라내지 않고 상자 안에 다 보이게 담는다 — 고른 그림이 어떻게 생겼는지 확인하는 |
|
| 131 |
+ // 자리라 일부만 보이면 확인이 되지 않는다. |
|
| 130 | 132 |
&__thumb-image {
|
| 131 | 133 |
inline-size: 100%; |
| 132 | 134 |
block-size: 100%; |
| 133 |
- object-fit: cover; |
|
| 135 |
+ object-fit: contain; |
|
| 134 | 136 |
} |
| 135 | 137 |
|
| 136 | 138 |
&__thumb-remove {
|
--- 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 @@ |
| 1 |
-// 목록 표의 썸네일 — 시안 ADM_ITM_101의 `img-thumb`(80×80 · 1px 테두리 · radius 4 · cover). |
|
| 1 |
+// 목록 표의 썸네일 — 시안 ADM_ITM_101의 `img-thumb`(80×80 · 1px 테두리 · radius 4). |
|
| 2 |
+// 그림은 잘라내지 않고 상자 안에 다 보이게 담는다(contain) — 아이템 생김새가 정보다. |
|
| 2 | 3 |
// @fox에 이미지 조각이 없어 이 화면 전용으로 둔다(값은 전부 @fox 토큰). |
| 3 | 4 |
|
| 4 | 5 |
@use "@fox/styles/abstracts" as fox; |
... | ... | @@ -8,5 +9,5 @@ |
| 8 | 9 |
block-size: 8rem; |
| 9 | 10 |
border: fox.border(1) solid fox.color(border-neutral-subtler); |
| 10 | 11 |
border-radius: fox.radius(2); |
| 11 |
- object-fit: cover; |
|
| 12 |
+ object-fit: contain; |
|
| 12 | 13 |
} |
Add a comment
Delete comment
Once you delete this comment, you won't be able to recover it. Are you sure you want to delete this comment?