Commit @d28c525b31557455babb81d440207acc495951aa

임동욱 09-22

feat: 표 상단 머리행을 다시 무조건 가운데 정렬로 둔다

6962814로 되돌렸던 규칙을 다시 적용(사용자 확정). thead 칸은 열의 align을 받지 않고
스타일이 가운데로 고정하며, 본문 행의 머리칸(form 레이블 열)은 그대로 왼쪽이다.

Co-Authored-By: Claude Opus 5

@d28c525b31557455babb81d440207acc495951aa

c045bff

d28c525

@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


         {/* `thead`/`tbody`로 감싸지 않는다 — FoxTable이 스스로 만들고, 머리행은 `head`만 보고
             제자리로 보낸다. 감싸면 표 안에 표 구조가 이중으로 생긴다. */}
         <FoxTable type="list" caption={caption}>
+          {/* 머리칸은 열 정렬을 받지 않는다 — 상단 머리행은 늘 가운데(디자인팀 확정). */}
           <FoxTableRow head>
             {columns.map((column) => (
-              <FoxTableCell
-                key={column.key}
-                head
-                width={column.width}
-                align={column.align}
-              >
+              <FoxTableCell key={column.key} head width={column.width}>
                 {column.header}
               </FoxTableCell>
             ))}

c045bff

d28c525

@fox/core/components/fox-table-cell/fox-table-cell.tsx

--- @fox/core/components/fox-table-cell/fox-table-cell.tsx

+++ @fox/core/components/fox-table-cell/fox-table-cell.tsx


         "fox-table-cell",
         isHead ? "fox-table-cell--head" : "fox-table-cell--body",
         emphasis && "fox-table-cell--emphasis",
-        align && ALIGN_CLASS[align],
+        // 머리행(<thead>)의 칸은 열 정렬과 무관하게 늘 가운데다(디자인팀 확정) — 스타일이 정한다.
+        align && !inHead && ALIGN_CLASS[align],
         className
       )}
       scope={isHead ? (inHead ? "col" : "row") : undefined}

c045bff

d28c525

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

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

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

...	...	@@ -3069,7 +3069,7 @@
3069	3069	id: "fox-table",
3070	3070	name: "FoxTable",
3071	3071	description:
3072		- "Figma 시안 9종(tbl-basic · tbl-list · tbl-form과 각각의 행·칸)을 FoxTable / FoxTableRow / FoxTableCell 셋으로 옮겼습니다. 진짜 <table>이라 스크린리더가 행·열을 읽어 주고 colSpan·rowSpan이 그대로 동작합니다. 머리행은 head만 주면 <thead>로 알아서 갈립니다. 창을 768px 아래로 좁히면 list는 카드로 접히고 form은 레이블이 입력 위로 올라갑니다. 열 정렬은 디자인팀 규칙대로 가운데가 기본이고, 제목·코드·ID·이름 열과 긴 글 열(주소·설명·내용·전화번호)은 align=\"start\"로 왼쪽입니다. 머리칸은 본문 열과 같은 정렬입니다.",
	3072	+ "Figma 시안 9종(tbl-basic · tbl-list · tbl-form과 각각의 행·칸)을 FoxTable / FoxTableRow / FoxTableCell 셋으로 옮겼습니다. 진짜 <table>이라 스크린리더가 행·열을 읽어 주고 colSpan·rowSpan이 그대로 동작합니다. 머리행은 head만 주면 <thead>로 알아서 갈립니다. 창을 768px 아래로 좁히면 list는 카드로 접히고 form은 레이블이 입력 위로 올라갑니다. 열 정렬은 디자인팀 규칙대로 가운데가 기본이고, 제목·코드·ID·이름 열과 긴 글 열(주소·설명·내용·전화번호)은 align=\"start\"로 왼쪽입니다. 상단 머리행은 열 정렬과 무관하게 늘 가운데입니다.",
3073	3073	variants: [
3074	3074	{
3075	3075	label: "list 표 예시 — 시안 699:6304 그대로. 체크·정렬·버튼·고른 줄",

c045bff

d28c525

@fox/styles/_fox-table.scss

--- @fox/styles/_fox-table.scss

+++ @fox/styles/_fox-table.scss

...	...	@@ -30,7 +30,8 @@
30	30	// 열 정렬 규약(디자인팀 확정, 2026-09-22) — 목록·기본 표는 가운데가 기본이고, **제목 열
31	31	// (emphasis)·글자 식별 열(코드·ID·아이디·이름·작성자·학교)·긴 글 열(주소·설명·내용·키워드·이메일·
32	32	// 전화번호)은 `align="start"`** 로 왼쪽에 둔다. 번호·날짜·상태·구분 같은 짧은 값은 가운데.
33		-// 머리칸은 본문 열과 같은 정렬이다(FoxListContainer가 같은 align을 머리칸에도 준다).
	33	+// 상단 머리행(`<thead>`)의 칸은 열 정렬과 무관하게 무조건 가운데다. 본문 행의 머리칸
	34	+// (`scope="row"`, form 표의 레이블 열)은 표 타입의 head-align을 따른다.
34	35	//
35	36	// 토큰이 아닌 값:
36	37	// - form 머리칸의 최소 크기 12rem×4.8rem: 시안 값이나 Figma가 변수로 export하지
...	...	@@ -80,6 +81,11 @@
80	81	--fox-table-cell-min-block-size: 4.8rem;
81	82	}
82	83
	84	+ // 상단 머리행은 무조건 가운데 — 칸의 align 클래스보다 앞서도록 여기서 정한다(디자인팀 확정).
	85	+ &__head .fox-table-cell {
	86	+ text-align: center;
	87	+ }
	88	+
83	89	// 표가 무엇을 담는지 스크린리더에만 알린다.
84	90	&__caption {
85	91	position: absolute;

c045bff

d28c525

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


       <div className={styles.table}>
         <FoxTable type="list" caption="메뉴 목록">
           <FoxTableRow head>
-            <FoxTableCell head width={140} align="center">이미지</FoxTableCell>
-            <FoxTableCell head width={240} align="start">메뉴명</FoxTableCell>
-            <FoxTableCell head align="start">설명</FoxTableCell>
-            <FoxTableCell head width={140} align="center">가격</FoxTableCell>
-            <FoxTableCell head width={180} align="center">배지</FoxTableCell>
-            <FoxTableCell head width={96} align="center">노출</FoxTableCell>
-            <FoxTableCell head width={220} align="center">관리</FoxTableCell>
+            <FoxTableCell head width={140}>이미지</FoxTableCell>
+            <FoxTableCell head width={240}>메뉴명</FoxTableCell>
+            <FoxTableCell head>설명</FoxTableCell>
+            <FoxTableCell head width={140}>가격</FoxTableCell>
+            <FoxTableCell head width={180}>배지</FoxTableCell>
+            <FoxTableCell head width={96}>노출</FoxTableCell>
+            <FoxTableCell head width={220}>관리</FoxTableCell>
           </FoxTableRow>
 
           {products.length === 0 ? (

Add a comment

Open 0
Closed 0

List

...	...	@@ -219,14 +219,10 @@
219	219	{/* `thead`/`tbody`로 감싸지 않는다 — FoxTable이 스스로 만들고, 머리행은 `head`만 보고
220	220	제자리로 보낸다. 감싸면 표 안에 표 구조가 이중으로 생긴다. */}
221	221	<FoxTable type="list" caption={caption}>
	222	+ {/* 머리칸은 열 정렬을 받지 않는다 — 상단 머리행은 늘 가운데(디자인팀 확정). */}
222	223	<FoxTableRow head>
223	224	{columns.map((column) => (
224		- <FoxTableCell
225		- key={column.key}
226		- head
227		- width={column.width}
228		- align={column.align}
229		- >
	225	+ <FoxTableCell key={column.key} head width={column.width}>
230	226	{column.header}
231	227	</FoxTableCell>
232	228	))}

...	...	@@ -74,7 +74,8 @@
74	74	"fox-table-cell",
75	75	isHead ? "fox-table-cell--head" : "fox-table-cell--body",
76	76	emphasis && "fox-table-cell--emphasis",
77		- align && ALIGN_CLASS[align],
	77	+ // 머리행(<thead>)의 칸은 열 정렬과 무관하게 늘 가운데다(디자인팀 확정) — 스타일이 정한다.
	78	+ align && !inHead && ALIGN_CLASS[align],
78	79	className
79	80	)}
80	81	scope={isHead ? (inHead ? "col" : "row") : undefined}

...	...	@@ -58,13 +58,13 @@
58	58	<div className={styles.table}>
59	59	<FoxTable type="list" caption="메뉴 목록">
60	60	<FoxTableRow head>
61		- <FoxTableCell head width={140} align="center">이미지</FoxTableCell>
62		- <FoxTableCell head width={240} align="start">메뉴명</FoxTableCell>
63		- <FoxTableCell head align="start">설명</FoxTableCell>
64		- <FoxTableCell head width={140} align="center">가격</FoxTableCell>
65		- <FoxTableCell head width={180} align="center">배지</FoxTableCell>
66		- <FoxTableCell head width={96} align="center">노출</FoxTableCell>
67		- <FoxTableCell head width={220} align="center">관리</FoxTableCell>
	61	+ <FoxTableCell head width={140}>이미지</FoxTableCell>
	62	+ <FoxTableCell head width={240}>메뉴명</FoxTableCell>
	63	+ <FoxTableCell head>설명</FoxTableCell>
	64	+ <FoxTableCell head width={140}>가격</FoxTableCell>
	65	+ <FoxTableCell head width={180}>배지</FoxTableCell>
	66	+ <FoxTableCell head width={96}>노출</FoxTableCell>
	67	+ <FoxTableCell head width={220}>관리</FoxTableCell>
68	68	</FoxTableRow>
69	69
70	70	{products.length === 0 ? (

Delete comment