Commit @3f630a46e2d441d480c2024ccabd5f7f3d6aac0e

임동욱 09-14

feat: 가맹몰 추가 이미지 타일을 개정 시안(2805:1597)대로 맞춘다

타일 아래 「추가 이미지 N」 캡션과 휴지통 아이콘을 지우고 「삭제」 글자(xsm 텍스트 버튼)만
둔다. 「추가 이미지」 캡션은 맨 끝 [+ 추가] 타일 아래에만 붙고, 타일 안은 시안대로
"+ 추가" 한 줄이라 N/11 카운트도 뺀다.

Co-Authored-By: Claude Opus 5

@3f630a46e2d441d480c2024ccabd5f7f3d6aac0e

bf310a2

3f630a4

app/(protected)/(basic)/system/merchant-details/_components/merchant-image-field.module.scss

--- app/(protected)/(basic)/system/merchant-details/_components/merchant-image-field.module.scss

+++ app/(protected)/(basic)/system/merchant-details/_components/merchant-image-field.module.scss


   gap: fox.gap(4);
 }
 
+// 타일과 그 아래 글자 사이 — 시안 8px.
 .thumbnail,
 .slot {
   display: flex;
   flex-direction: column;
-  gap: fox.gap(2);
-}
-
-.slotFooter {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: fox.gap(2);
+  align-items: flex-start;
+  gap: fox.gap(3);
 }
 
 .caption {
   font-size: fox.font-size(label-sm);
   color: fox.color(font-neutral-default);
+}
+
+// [+ 추가] 타일 아래 「추가 이미지」 — 시안은 「삭제」와 같은 11px 연한 글자다.
+.captionSubtle {
+  font-size: fox.font-size(label-xsm);
+  color: fox.color(font-neutral-subtle);
 }
 
 .required {

 
 // 「+ 추가」 타일 — 기획 BO-MAL-002의 160×160 점선 상자. 크기는 옆 이미지 칸과 같아야 줄이
 // 맞는다(토큰 스케일이 96px에서 끝나 리터럴로 둔다, 꾸미기아이템 썸네일과 같은 처리).
+// 안의 글자는 시안대로 "+ 추가" 한 줄이다.
 .addTile {
   display: flex;
   inline-size: 16rem;
   block-size: 16rem;
-  flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: fox.gap(2);
+  gap: fox.gap(1);
   padding: 0;
   margin: 0;
   border: fox.border(1) dashed fox.color(border-neutral-subtle);
   border-radius: fox.radius(3);
   background: fox.color(surface-neutral-gray);
-  color: fox.color(font-neutral-default);
-  font-size: fox.font-size(label-md);
+  color: fox.color(font-neutral-subtler);
+  font-size: fox.font-size(label-sm);
   cursor: pointer;
   appearance: none;
 
   &:hover {
     background: fox.color(action-default-hover);
+    color: fox.color(font-neutral-default);
   }
-}
-
-.addHint {
-  font-size: fox.font-size(label-xsm);
-  color: fox.color(font-neutral-subtle);
 }

bf310a2

3f630a4

app/(protected)/(basic)/system/merchant-details/_components/merchant-image-field.tsx

--- app/(protected)/(basic)/system/merchant-details/_components/merchant-image-field.tsx

+++ app/(protected)/(basic)/system/merchant-details/_components/merchant-image-field.tsx


 const IMAGE_HINT = 'JPG · PNG / 5MB 이하';
 
 /**
- * 기획 BO-MAL-002 ⑤ — 대표 1장 필수 + 추가 최대 11장, 추가 이미지는 드래그로 순서를 바꾼다.
+ * 기획 BO-MAL-002 ⑤ — 대표 1장 필수 + 추가 최대 11장, 추가 이미지는 타일을 끌어 순서를 바꾼다.
+ * 타일 아래에는 「삭제」 글자만 두고, 「추가 이미지」 캡션은 맨 끝 [+ 추가] 타일에만 붙는다
+ * (개정 시안 2805:1597).
  *
  * 추가 이미지는 칸마다 `imageSlot`(`saved:<fileSn>` | `new`)과 `imageFile`을 같은 순서로
  * 싣는다. 액션은 이 둘을 자리로 짝지어 묶음을 다시 만든다 — 저장된 장은 백엔드에서 다시 읽고

                 name="imageSlot"
                 value={slot.fileSn === null ? 'new' : `saved:${slot.fileSn}`}
               />
-              <span className={styles.slotFooter}>
-                <span className={styles.caption}>추가 이미지 {index + 1}</span>
-                <FoxTextButton
-                  size="md"
-                  type="secondary"
-                  leadingIcon={<i className="fox-ico fox-ico-Trash" aria-hidden="true" />}
-                  label="삭제"
-                  onAction={() => removeSlot(slot.key)}
-                />
-              </span>
+              <FoxTextButton
+                size="xsm"
+                type="secondary"
+                label="삭제"
+                onAction={() => removeSlot(slot.key)}
+              />
             </div>
           )}
         />
 
         {slots.length < MAX_EXTRA_IMAGES && (
-          <button type="button" className={styles.addTile} onClick={addSlot}>
-            <i className="fox-ico fox-ico-Plus" aria-hidden="true" />
-            <span>추가</span>
-            <span className={styles.addHint}>
-              {slots.length}/{MAX_EXTRA_IMAGES}
-            </span>
-          </button>
+          <div className={styles.slot}>
+            <button type="button" className={styles.addTile} onClick={addSlot}>
+              <i className="fox-ico fox-ico-Plus" aria-hidden="true" />
+              <span>추가</span>
+            </button>
+            <span className={styles.captionSubtle}>추가 이미지</span>
+          </div>
         )}
       </div>
 

Add a comment

Open 0
Closed 0

List

...	...	@@ -25,7 +25,9 @@
25	25	const IMAGE_HINT = 'JPG · PNG / 5MB 이하';
26	26
27	27	/**
28		- * 기획 BO-MAL-002 ⑤ — 대표 1장 필수 + 추가 최대 11장, 추가 이미지는 드래그로 순서를 바꾼다.
	28	+ * 기획 BO-MAL-002 ⑤ — 대표 1장 필수 + 추가 최대 11장, 추가 이미지는 타일을 끌어 순서를 바꾼다.
	29	+ * 타일 아래에는 「삭제」 글자만 두고, 「추가 이미지」 캡션은 맨 끝 [+ 추가] 타일에만 붙는다
	30	+ * (개정 시안 2805:1597).
29	31	*
30	32	* 추가 이미지는 칸마다 `imageSlot`(`saved:<fileSn>` \| `new`)과 `imageFile`을 같은 순서로
31	33	* 싣는다. 액션은 이 둘을 자리로 짝지어 묶음을 다시 만든다 — 저장된 장은 백엔드에서 다시 읽고
...	...	@@ -116,28 +118,24 @@
116	118	name="imageSlot"
117	119	value={slot.fileSn === null ? 'new' : `saved:${slot.fileSn}`}
118	120	/>
119		- <span className={styles.slotFooter}>
120		- <span className={styles.caption}>추가 이미지 {index + 1}</span>
121		- <FoxTextButton
122		- size="md"
123		- type="secondary"
124		- leadingIcon={<i className="fox-ico fox-ico-Trash" aria-hidden="true" />}
125		- label="삭제"
126		- onAction={() => removeSlot(slot.key)}
127		- />
128		- </span>
	121	+ <FoxTextButton
	122	+ size="xsm"
	123	+ type="secondary"
	124	+ label="삭제"
	125	+ onAction={() => removeSlot(slot.key)}
	126	+ />
129	127	</div>
130	128	)}
131	129	/>
132	130
133	131	{slots.length < MAX_EXTRA_IMAGES && (
134		- <button type="button" className={styles.addTile} onClick={addSlot}>
135		- <i className="fox-ico fox-ico-Plus" aria-hidden="true" />
136		- <span>추가</span>
137		- <span className={styles.addHint}>
138		- {slots.length}/{MAX_EXTRA_IMAGES}
139		- </span>
140		- </button>
	132	+ <div className={styles.slot}>
	133	+ <button type="button" className={styles.addTile} onClick={addSlot}>
	134	+ <i className="fox-ico fox-ico-Plus" aria-hidden="true" />
	135	+ <span>추가</span>
	136	+ </button>
	137	+ <span className={styles.captionSubtle}>추가 이미지</span>
	138	+ </div>
141	139	)}
142	140	</div>
143	141

...	...	@@ -13,23 +13,24 @@
13	13	gap: fox.gap(4);
14	14	}
15	15
	16	+// 타일과 그 아래 글자 사이 — 시안 8px.
16	17	.thumbnail,
17	18	.slot {
18	19	display: flex;
19	20	flex-direction: column;
20		- gap: fox.gap(2);
21		-}
22		-
23		-.slotFooter {
24		- display: flex;
25		- align-items: center;
26		- justify-content: space-between;
27		- gap: fox.gap(2);
	21	+ align-items: flex-start;
	22	+ gap: fox.gap(3);
28	23	}
29	24
30	25	.caption {
31	26	font-size: fox.font-size(label-sm);
32	27	color: fox.color(font-neutral-default);
	28	+}
	29	+
	30	+// [+ 추가] 타일 아래 「추가 이미지」 — 시안은 「삭제」와 같은 11px 연한 글자다.
	31	+.captionSubtle {
	32	+ font-size: fox.font-size(label-xsm);
	33	+ color: fox.color(font-neutral-subtle);
33	34	}
34	35
35	36	.required {
...	...	@@ -38,30 +39,26 @@
38	39
39	40	// 「+ 추가」 타일 — 기획 BO-MAL-002의 160×160 점선 상자. 크기는 옆 이미지 칸과 같아야 줄이
40	41	// 맞는다(토큰 스케일이 96px에서 끝나 리터럴로 둔다, 꾸미기아이템 썸네일과 같은 처리).
	42	+// 안의 글자는 시안대로 "+ 추가" 한 줄이다.
41	43	.addTile {
42	44	display: flex;
43	45	inline-size: 16rem;
44	46	block-size: 16rem;
45		- flex-direction: column;
46	47	align-items: center;
47	48	justify-content: center;
48		- gap: fox.gap(2);
	49	+ gap: fox.gap(1);
49	50	padding: 0;
50	51	margin: 0;
51	52	border: fox.border(1) dashed fox.color(border-neutral-subtle);
52	53	border-radius: fox.radius(3);
53	54	background: fox.color(surface-neutral-gray);
54		- color: fox.color(font-neutral-default);
55		- font-size: fox.font-size(label-md);
	55	+ color: fox.color(font-neutral-subtler);
	56	+ font-size: fox.font-size(label-sm);
56	57	cursor: pointer;
57	58	appearance: none;
58	59
59	60	&:hover {
60	61	background: fox.color(action-default-hover);
	62	+ color: fox.color(font-neutral-default);
61	63	}
62		-}
63		-
64		-.addHint {
65		- font-size: fox.font-size(label-xsm);
66		- color: fox.color(font-neutral-subtle);
67	64	}

Delete comment