nbnloper / edupay-admin star
Forked from ldu0009 / edupay-admin
임동욱 임동욱 09-11
feat: 가맹몰 썸네일 틀을 1.5배(84×60)로 키운다 
56×40은 디자인 시스템 토큰이 아니라 기획 와이어프레임의 IMG 자리 크기였다(사용자 확정).
틀이 커진 만큼 목록·메뉴 표의 이미지 열도 넓힌다.

Co-Authored-By: Claude Opus 5
@ba8fc95b7d34182fb34dc94d9d09904cb4544368
f65aaed
ba8fc95
app/(protected)/(basic)/system/merchant-details/_components/merchant-detail-list.tsx
--- app/(protected)/(basic)/system/merchant-details/_components/merchant-detail-list.tsx
+++ app/(protected)/(basic)/system/merchant-details/_components/merchant-detail-list.tsx
@@ -193,7 +193,7 @@
 
     {
 
       key: 'thumbnail',
 
       header: '대표이미지',
 
-      width: 110,
 
+      width: 124,
 
       align: 'center',
 
       render: (row) => (
 
         <MerchantThumbnail src={row.thumbnailUrl} alt={`${row.name} 대표이미지`} />
f65aaed
ba8fc95
app/(protected)/(basic)/system/merchant-details/_components/merchant-product-table.tsx
--- app/(protected)/(basic)/system/merchant-details/_components/merchant-product-table.tsx
+++ app/(protected)/(basic)/system/merchant-details/_components/merchant-product-table.tsx
@@ -54,7 +54,7 @@
 
         <FoxTable type="list" caption="메뉴 목록">
 
           <FoxTableRow head>
 
             <FoxTableCell head width={64} align="center">순서</FoxTableCell>
 
-            <FoxTableCell head width={96} align="center">이미지</FoxTableCell>
 
+            <FoxTableCell head width={124} align="center">이미지</FoxTableCell>
 
             <FoxTableCell head width={240}>메뉴명</FoxTableCell>
 
             <FoxTableCell head>설명</FoxTableCell>
 
             <FoxTableCell head width={140} align="center">가격</FoxTableCell>
f65aaed
ba8fc95
app/(protected)/(basic)/system/merchant-details/_components/merchant-thumbnail.module.scss
--- app/(protected)/(basic)/system/merchant-details/_components/merchant-thumbnail.module.scss
+++ app/(protected)/(basic)/system/merchant-details/_components/merchant-thumbnail.module.scss
@@ -1,12 +1,13 @@
 
 @use "@fox/styles/abstracts" as fox;
 
 
-// 기획 BO-MAL-001·002의 56×40 썸네일 틀. 토큰 스케일이 96px에서 끝나 딱 맞는 값이 없어
 
-// 리터럴로 두고 근거를 남긴다(꾸미기아이템 썸네일과 같은 처리).
 
+// 기획 BO-MAL-001·002의 56×40 썸네일 틀을 1.5배(84×60)로 키웠다(사용자 확정 — 시스템에
 
+// 썸네일 크기 토큰이 없어 와이어프레임 값이 기준이었다). 토큰 스케일 밖이라 리터럴로 두고
 
+// 근거를 남긴다(꾸미기아이템 썸네일과 같은 처리).
 
 .image,
 
 .placeholder {
 
   box-sizing: border-box;
 
-  inline-size: 5.6rem;
 
-  block-size: 4rem;
 
+  inline-size: 8.4rem;
 
+  block-size: 6rem;
 
   border: fox.border(1) solid fox.color(border-neutral-subtler);
 
   border-radius: fox.radius(2);
 
 }
f65aaed
ba8fc95
app/(protected)/(basic)/system/merchant-details/_components/merchant-thumbnail.tsx
--- app/(protected)/(basic)/system/merchant-details/_components/merchant-thumbnail.tsx
+++ app/(protected)/(basic)/system/merchant-details/_components/merchant-thumbnail.tsx
@@ -6,7 +6,7 @@
 
 }
 
 
 /**
 
- * 목록·메뉴 표의 56×40 썸네일. 이미지가 없어도 같은 크기의 틀에 "no image"를 띄운다 —
 
+ * 목록·메뉴 표의 84×60 썸네일. 이미지가 없어도 같은 크기의 틀에 "no image"를 띄운다 —
 
  * `-` 한 글자면 열이 들쭉날쭉해지고 이미지 자리가 어디인지 보이지 않는다(사용자 확정).
 
  */
 
 export function MerchantThumbnail({ src, alt }: MerchantThumbnailProps) {
Add a comment
List