Commit @a105464d289da8d73ca5410de54a30ad372a659f

임동욱 09-14

feat: 화면 머리말에 설명 한 줄을 열고 가맹몰 네 화면에 시안 문구를 넣는다

FoxPageHeader에 description을 더한다 — 가맹몰 시안(FOX-PAY_2.0 2805:635)이 제목 아래
한 줄을 두는데 원 시안(page-tit-area)엔 그 자리가 없었다. 글자는 FoxHeadingGroup의
설명과 같은 토큰(body-md · font-neutral-subtle)이고 FoxListContainer가 그대로 넘긴다.

문구는 시안 그대로다 — 목록(BO-MAL-001) / 등록(BO-MAL-002) / 수정(BO-MAL-003) /
메뉴 등록·수정(BO-MAL-004).

Co-Authored-By: Claude Opus 5

@a105464d289da8d73ca5410de54a30ad372a659f

fd4a1b4

a105464

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

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

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


   // ── 머리말 ────────────────────────────────────────────────────────────────
   title?: ReactNode;
   breadcrumb?: FoxBreadcrumbItem[];
+  /** 제목 아래 한 줄 설명 — `FoxPageHeader`로 그대로 간다. */
+  description?: ReactNode;
   headerActions?: ReactNode;
   /**
    * 머리말과 목록 사이. 시안에서 이 자리에 오는 것은 `FoxTab`이다 — 목록 전체를 갈아 끼우는

 export function FoxListContainer<T>({
   title,
   breadcrumb,
+  description,
   headerActions,
   tabs,
   columns,

         <FoxPageHeader
           title={title}
           breadcrumb={breadcrumb}
+          description={description}
           actions={headerActions}
         />
       )}

fd4a1b4

a105464

@fox/core/components/fox-page-header/fox-page-header.tsx

--- @fox/core/components/fox-page-header/fox-page-header.tsx

+++ @fox/core/components/fox-page-header/fox-page-header.tsx

...	...	@@ -9,6 +9,8 @@
9	9	title: ReactNode;
10	10	/** 제목 위에 붙는 현재 위치. 넘기지 않으면 영역을 그리지 않는다. */
11	11	breadcrumb?: FoxBreadcrumbItem[];
	12	+ /** 제목 아래 한 줄 — 이 화면이 무엇을 하는 곳인지. 넘기지 않으면 영역을 그리지 않는다. */
	13	+ description?: ReactNode;
12	14	/**
13	15	* 제목 오른쪽 자리. 시안에는 들어간 것이 없지만 배치가 자리를 비워 두고 있어
14	16	* (제목이 남는 폭을 먹고 24px 간격이 있다) 화면이 버튼 같은 것을 얹을 수 있게 연다.
...	...	@@ -21,9 +23,11 @@
21	23	}
22	24
23	25	/**
24		- * @fox 화면 머리말. 현재 위치와 제목을 얹고 본문과의 간격까지 갖는다.
	26	+ * @fox 화면 머리말. 현재 위치와 제목, 그 아래 설명 한 줄을 얹고 본문과의 간격까지 갖는다.
25	27	*
26	28	* 현재 위치는 `FoxBreadcrumb`를 그대로 쓴다 — 시안에서도 breadcrumb 인스턴스다.
	29	+ * 설명은 가맹몰 시안(FOX-PAY_2.0 2805:635)이 제목 아래 두는 한 줄이다 — 원 시안(page-tit-area)엔
	30	+ * 없지만 같은 세로 쌓임이라 제목 다음 자리로 연다.
27	31	*
28	32	* ⚠️ 스타일은 이 파일이 import하지 않는다 — 호스트 앱이 `@use "@fox/styles/components"`
29	33	* (또는 개별 파티셜)로 한 번 불러와야 한다.
...	...	@@ -31,6 +35,7 @@
31	35	export function FoxPageHeader({
32	36	title,
33	37	breadcrumb,
	38	+ description,
34	39	actions,
35	40	hidden = false,
36	41	className,
...	...	@@ -44,6 +49,7 @@
44	49	<div className="fox-page-header__main">
45	50	{breadcrumb && breadcrumb.length > 0 && <FoxBreadcrumb items={breadcrumb} />}
46	51	<h1 className="fox-page-header__title">{title}</h1>
	52	+ {description && <p className="fox-page-header__description">{description}</p>}
47	53	</div>
48	54	{actions && <div className="fox-page-header__actions">{actions}</div>}
49	55	</div>

fd4a1b4

a105464

@fox/dev-test/component-registry.tsx

--- @fox/dev-test/component-registry.tsx

+++ @fox/dev-test/component-registry.tsx

...	...	@@ -3627,6 +3627,16 @@
3627	3627	node: <FoxPageHeader title="리스트 페이지" />,
3628	3628	},
3629	3629	{
	3630	+ label: "제목 아래 설명 — 가맹몰 시안(2805:635)의 한 줄. 이 화면이 무엇을 하는 곳인지 적습니다",
	3631	+ node: (
	3632	+ <FoxPageHeader
	3633	+ breadcrumb={BREADCRUMB_ITEMS}
	3634	+ title="업체 등록"
	3635	+ description="지역상생몰에 노출할 업체를 등록한다"
	3636	+ />
	3637	+ ),
	3638	+ },
	3639	+ {
3630	3640	label: "오른쪽 자리 (actions) — 시안엔 없지만 배치가 자리를 비워 둡니다",
3631	3641	node: (
3632	3642	<FoxPageHeader

fd4a1b4

a105464

@fox/styles/_fox-page-header.scss

--- @fox/styles/_fox-page-header.scss

+++ @fox/styles/_fox-page-header.scss

...	...	@@ -5,6 +5,7 @@
5	5	// <div class="fox-page-header__main">
6	6	// …fox-breadcrumb… <!-- 선택 -->
7	7	// <h1 class="fox-page-header__title">제목</h1>
	8	+// <p class="fox-page-header__description">설명</p> <!-- 선택 -->
8	9	// </div>
9	10	// <div class="fox-page-header__actions">…</div> <!-- 선택 -->
10	11	// </div>
...	...	@@ -15,10 +16,13 @@
15	16	// 본문과의 간격(아래 여백)을 머리말이 갖는다 — 시안이 그렇게 묶어 놓았다. 화면마다 따로
16	17	// 띄우지 않아도 된다.
17	18	//
	19	+// 설명 한 줄은 가맹몰 시안(FOX-PAY_2.0 2805:635 머리말)에서 왔다 — 제목과 같은 세로 쌓임에
	20	+// 서고 글자는 FoxHeadingGroup의 설명과 같은 토큰이다.
	21	+//
18	22	// 토큰이 아닌 값:
19	23	// - line-height / letter-spacing: 시안 텍스트 스타일의 값이나 Figma가 변수로
20	24	// export하지 않는다.
21		-// - `<h1>`의 브라우저 기본 여백 0: UA 기본값 지우기.
	25	+// - `<h1>`·`<p>`의 브라우저 기본 여백 0: UA 기본값 지우기.
22	26
23	27	@use "abstracts" as fox;
24	28
...	...	@@ -51,6 +55,18 @@
51	55	word-break: break-word;
52	56	}
53	57
	58	+ &__description {
	59	+ inline-size: 100%;
	60	+ margin: 0;
	61	+ color: fox.color(font-neutral-subtle);
	62	+ font-family: fox.font-family(body);
	63	+ font-size: fox.font-size(body-md);
	64	+ font-weight: fox.font-weight(regular);
	65	+ line-height: 1.5;
	66	+ letter-spacing: -0.025em;
	67	+ word-break: break-word;
	68	+ }
	69	+
54	70	// 제목 옆에 서고 줄어들지 않는다. 오른쪽 끝에 붙는 것을 선언으로 못박는다 — 제목 칸이
55	71	// 남는 폭을 먹어 밀려나는 것에 기대면, 제목 칸이 없거나 좁아질 때 자리가 흔들린다.
56	72	&__actions {

fd4a1b4

a105464

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

...	...	@@ -114,6 +114,11 @@
114	114	<>
115	115	<FoxPageHeader
116	116	title={`가맹몰 상세 ${isEdit ? '수정' : '등록'}`}
	117	+ description={
	118	+ isEdit
	119	+ ? '등록된 업체 정보를 수정한다. 저장 즉시 앱에 반영된다'
	120	+ : '지역상생몰에 노출할 업체를 등록한다'
	121	+ }
117	122	breadcrumb={[
118	123	{ label: '홈', href: '/' },
119	124	{ label: '관리자관리' },

fd4a1b4

a105464

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

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

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

...	...	@@ -98,6 +98,7 @@
98	98	<>
99	99	<FoxPageHeader
100	100	title={`메뉴 ${isEdit ? '수정' : '등록'}`}
	101	+ description="업체 상세 화면의 메뉴 목록과 메뉴 상세 팝업에 노출된다"
101	102	breadcrumb={[
102	103	{ label: '홈', href: '/' },
103	104	{ label: '관리자관리' },

fd4a1b4

a105464

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


   return (
     <FoxListContainer<MerchantDetailSummary>
       title="가맹몰 상세 관리"
+      description="지역상생몰(바우처 사용처)에 노출되는 업체를 등록·관리한다"
       breadcrumb={[
         { label: '홈', href: '/' },
         { label: '관리자관리' },

Add a comment

Open 0
Closed 0

List

...	...	@@ -262,6 +262,7 @@
262	262	return (
263	263	<FoxListContainer<MerchantDetailSummary>
264	264	title="가맹몰 상세 관리"
	265	+ description="지역상생몰(바우처 사용처)에 노출되는 업체를 등록·관리한다"
265	266	breadcrumb={[
266	267	{ label: '홈', href: '/' },
267	268	{ label: '관리자관리' },

...	...	@@ -41,6 +41,8 @@
41	41	// ── 머리말 ────────────────────────────────────────────────────────────────
42	42	title?: ReactNode;
43	43	breadcrumb?: FoxBreadcrumbItem[];
	44	+ /** 제목 아래 한 줄 설명 — `FoxPageHeader`로 그대로 간다. */
	45	+ description?: ReactNode;
44	46	headerActions?: ReactNode;
45	47	/**
46	48	* 머리말과 목록 사이. 시안에서 이 자리에 오는 것은 `FoxTab`이다 — 목록 전체를 갈아 끼우는
...	...	@@ -110,6 +112,7 @@
110	112	export function FoxListContainer<T>({
111	113	title,
112	114	breadcrumb,
	115	+ description,
113	116	headerActions,
114	117	tabs,
115	118	columns,
...	...	@@ -165,6 +168,7 @@
165	168	<FoxPageHeader
166	169	title={title}
167	170	breadcrumb={breadcrumb}
	171	+ description={description}
168	172	actions={headerActions}
169	173	/>
170	174	)}

Delete comment