Commit @eec8384318648eb727c956d8ac9a6e6df63f738f

임동욱 09-14

feat: 가맹몰 상세 수정의 등록 정보를 시안대로 가로 한 줄에 놓는다

기획 BO-MAL-003(2805:1760)은 등록일시·등록자·최종 수정·현재 상태 네 쌍을 나란히 두는데,
FoxDescriptionList가 세로로 쌓고 줄마다 구분선을 그어 어긋났다. 목록에 inline 변형
(layout="inline")을 더해 쌍을 가로로 놓고 구분선을 뺀다. 이름은 label-sm·subtle, 값은
body-sm으로 시안 실측(12/13px)을 따르고, 쌍 사이 60px는 토큰에 없어 gap-11로 맞춘다.

Co-Authored-By: Claude Opus 5

@eec8384318648eb727c956d8ac9a6e6df63f738f

a105464

eec8384

@fox/core/components/fox-description-list/fox-description-list.tsx

--- @fox/core/components/fox-description-list/fox-description-list.tsx

+++ @fox/core/components/fox-description-list/fox-description-list.tsx


   hidden?: boolean;
 }
 
+export type FoxDescriptionListLayout = "stack" | "inline";
+
 export interface FoxDescriptionListProps {
   items: FoxDescriptionItem[];
+  /**
+   * `stack`(기본)은 쌍을 세로로 쌓고 줄마다 구분선을 긋는다. `inline`은 쌍을 가로 한 줄에
+   * 나란히 놓는다 — 등록일시·등록자처럼 짧은 이력 값을 요약하는 자리에 쓴다.
+   */
+  layout?: FoxDescriptionListLayout;
   hidden?: boolean;
   className?: string;
 }
 
 /**
  * @fox 조회 목록 — 이름과 값을 한 쌍씩 세로로 쌓는다. 조회 팝업·상세 화면이 쓰는 모양이다.
+ * `layout="inline"`이면 쌍을 가로로 나란히 놓는다(등록 정보 요약).
  *
  * 마크업 계약 (React 밖 소비자용):
- *   <dl class="fox-description-list">
+ *   <dl class="fox-description-list [fox-description-list--inline]">
  *     <div class="fox-description-list__item">
  *       <dt class="fox-description-list__term"><span class="fox-form-label">이름</span></dt>
  *       <dd class="fox-description-list__description">홍길동</dd>

  */
 export function FoxDescriptionList({
   items,
+  layout = "stack",
   hidden = false,
   className,
 }: FoxDescriptionListProps) {

   }
 
   return (
-    <dl className={cx("fox-description-list", className)}>
+    <dl
+      className={cx(
+        "fox-description-list",
+        layout === "inline" && "fox-description-list--inline",
+        className
+      )}
+    >
       {items
         .filter((item) => !item.hidden)
         .map((item) => (

a105464

eec8384

@fox/styles/_fox-description-list.scss

--- @fox/styles/_fox-description-list.scss

+++ @fox/styles/_fox-description-list.scss


 // FoxDescriptionList — 시안: 관리자페이지(QsFVFFUKGH68xAPVkF3SJ9) modal 5227:809의 form-list
+//   inline 변형: FOX PAY_2.0(VqFRgEzMW4CuDLDwa5vYSn) BO-MAL-003 2805:1760의 등록 정보
 //
 // 마크업 계약 (React 밖 소비자용):
-//   <dl class="fox-description-list">
+//   <dl class="fox-description-list [fox-description-list--inline]">
 //     <div class="fox-description-list__item">
 //       <dt class="fox-description-list__term"><span class="fox-form-label">이름</span></dt>
 //       <dd class="fox-description-list__description">홍길동</dd>

 //   </dl>
 //
 // 줄마다 아래에 구분선이 있다 — 시안이 마지막 줄에도 그어 두었으므로 걷어내지 않는다.
+// `--inline`은 쌍을 가로 한 줄에 놓고 구분선을 긋지 않는다. 이름은 한 단계 작고 옅게(label-sm ·
+// subtle), 값은 body-sm — 시안 실측(12/13px)과 같다. 쌍 사이 60px는 토큰에 없어 gap-11(64px)로
+// 맞춘다.
 //
 // 토큰이 아닌 값:
 //   - line-height / letter-spacing: 시안 텍스트 스타일(body/md)의 값이나 Figma가 변수로

     line-height: 1.5;
     letter-spacing: -0.025em;
   }
+
+  &--inline {
+    flex-flow: row wrap;
+    gap: fox.gap(11);
+  }
+
+  &--inline &__item {
+    inline-size: auto;
+    gap: fox.gap(2);
+    padding-block: 0;
+    border-block-end: 0;
+  }
+
+  &--inline &__term .fox-form-label {
+    color: fox.color(font-neutral-subtle);
+    font-size: fox.font-size(label-sm);
+  }
+
+  &--inline &__description {
+    inline-size: auto;
+    font-size: fox.font-size(body-sm);
+  }
 }

a105464

eec8384

app/(protected)/(basic)/system/merchant-details/[frcsNo]/_components/merchant-detail-form.tsx

--- app/(protected)/(basic)/system/merchant-details/[frcsNo]/_components/merchant-detail-form.tsx

+++ app/(protected)/(basic)/system/merchant-details/[frcsNo]/_components/merchant-detail-form.tsx


         {isEdit && (
           <FoxCard size="lg" title="등록 정보" className={styles.section}>
             <FoxDescriptionList
+              layout="inline"
               items={[
                 { key: 'registeredAt', term: '등록일시', description: formatOptionalValue(detail.registeredAt) },
                 { key: 'registeredBy', term: '등록자', description: formatOptionalValue(detail.registeredBy) },

Add a comment

Open 0
Closed 0

List

...	...	@@ -290,6 +290,7 @@
290	290	{isEdit && (
291	291	<FoxCard size="lg" title="등록 정보" className={styles.section}>
292	292	<FoxDescriptionList
	293	+ layout="inline"
293	294	items={[
294	295	{ key: 'registeredAt', term: '등록일시', description: formatOptionalValue(detail.registeredAt) },
295	296	{ key: 'registeredBy', term: '등록자', description: formatOptionalValue(detail.registeredBy) },

...	...	@@ -13,17 +13,25 @@
13	13	hidden?: boolean;
14	14	}
15	15
	16	+export type FoxDescriptionListLayout = "stack" \| "inline";
	17	+
16	18	export interface FoxDescriptionListProps {
17	19	items: FoxDescriptionItem[];
	20	+ /**
	21	+ * `stack`(기본)은 쌍을 세로로 쌓고 줄마다 구분선을 긋는다. `inline`은 쌍을 가로 한 줄에
	22	+ * 나란히 놓는다 — 등록일시·등록자처럼 짧은 이력 값을 요약하는 자리에 쓴다.
	23	+ */
	24	+ layout?: FoxDescriptionListLayout;
18	25	hidden?: boolean;
19	26	className?: string;
20	27	}
21	28
22	29	/**
23	30	* @fox 조회 목록 — 이름과 값을 한 쌍씩 세로로 쌓는다. 조회 팝업·상세 화면이 쓰는 모양이다.
	31	+ * `layout="inline"`이면 쌍을 가로로 나란히 놓는다(등록 정보 요약).
24	32	*
25	33	* 마크업 계약 (React 밖 소비자용):
26		- * <dl class="fox-description-list">
	34	+ * <dl class="fox-description-list [fox-description-list--inline]">
27	35	* <div class="fox-description-list__item">
28	36	* <dt class="fox-description-list__term"><span class="fox-form-label">이름</span></dt>
29	37	* <dd class="fox-description-list__description">홍길동</dd>
...	...	@@ -42,6 +50,7 @@
42	50	*/
43	51	export function FoxDescriptionList({
44	52	items,
	53	+ layout = "stack",
45	54	hidden = false,
46	55	className,
47	56	}: FoxDescriptionListProps) {
...	...	@@ -50,7 +59,13 @@
50	59	}
51	60
52	61	return (
53		- <dl className={cx("fox-description-list", className)}>
	62	+ <dl
	63	+ className={cx(
	64	+ "fox-description-list",
	65	+ layout === "inline" && "fox-description-list--inline",
	66	+ className
	67	+ )}
	68	+ >
54	69	{items
55	70	.filter((item) => !item.hidden)
56	71	.map((item) => (

...	...	@@ -1,7 +1,8 @@
1	1	// FoxDescriptionList — 시안: 관리자페이지(QsFVFFUKGH68xAPVkF3SJ9) modal 5227:809의 form-list
	2	+// inline 변형: FOX PAY_2.0(VqFRgEzMW4CuDLDwa5vYSn) BO-MAL-003 2805:1760의 등록 정보
2	3	//
3	4	// 마크업 계약 (React 밖 소비자용):
4		-// <dl class="fox-description-list">
	5	+// <dl class="fox-description-list [fox-description-list--inline]">
5	6	// <div class="fox-description-list__item">
6	7	// <dt class="fox-description-list__term"><span class="fox-form-label">이름</span></dt>
7	8	// <dd class="fox-description-list__description">홍길동</dd>
...	...	@@ -9,6 +10,9 @@
9	10	// </dl>
10	11	//
11	12	// 줄마다 아래에 구분선이 있다 — 시안이 마지막 줄에도 그어 두었으므로 걷어내지 않는다.
	13	+// `--inline`은 쌍을 가로 한 줄에 놓고 구분선을 긋지 않는다. 이름은 한 단계 작고 옅게(label-sm ·
	14	+// subtle), 값은 body-sm — 시안 실측(12/13px)과 같다. 쌍 사이 60px는 토큰에 없어 gap-11(64px)로
	15	+// 맞춘다.
12	16	//
13	17	// 토큰이 아닌 값:
14	18	// - line-height / letter-spacing: 시안 텍스트 스타일(body/md)의 값이나 Figma가 변수로
...	...	@@ -49,4 +53,26 @@
49	53	line-height: 1.5;
50	54	letter-spacing: -0.025em;
51	55	}
	56	+
	57	+ &--inline {
	58	+ flex-flow: row wrap;
	59	+ gap: fox.gap(11);
	60	+ }
	61	+
	62	+ &--inline &__item {
	63	+ inline-size: auto;
	64	+ gap: fox.gap(2);
	65	+ padding-block: 0;
	66	+ border-block-end: 0;
	67	+ }
	68	+
	69	+ &--inline &__term .fox-form-label {
	70	+ color: fox.color(font-neutral-subtle);
	71	+ font-size: fox.font-size(label-sm);
	72	+ }
	73	+
	74	+ &--inline &__description {
	75	+ inline-size: auto;
	76	+ font-size: fox.font-size(body-sm);
	77	+ }
52	78	}

Delete comment