Commit @69628146832521a75f5c4bc701172d1312d64051

3f8423c

6962814

@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}>
+              <FoxTableCell
+                key={column.key}
+                head
+                width={column.width}
+                align={column.align}
+              >
                 {column.header}
               </FoxTableCell>
             ))}

3f8423c

6962814

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

3f8423c

6962814

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

3f8423c

6962814

@fox/styles/_fox-table.scss

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

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

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

3f8423c

6962814

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}>이미지</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>
+            <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>
           </FoxTableRow>
 
           {products.length === 0 ? (

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

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

Delete comment