Commit @3f8423cef2c66af8e1675b678ca4233dd10b8a82

임동욱 09-22

feat: 표 상단 머리행은 무조건 가운데, 전화번호 열은 왼쪽 정렬로 맞춘다

디자인팀 확정. thead 칸은 열의 align을 받지 않고(FoxTableCell·FoxListContainer) 스타일이
가운데로 고정한다 — 본문 행의 머리칸(form 레이블 열)은 그대로 왼쪽. 휴대전화번호·전화번호·
연락처·보호자연락처 열은 긴 글로 보아 align=start.

Co-Authored-By: Claude Opus 5

@3f8423cef2c66af8e1675b678ca4233dd10b8a82

a53fd1f

3f8423c

@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>
             ))}

a53fd1f

3f8423c

@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}

a53fd1f

3f8423c

@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 그대로. 체크·정렬·버튼·고른 줄",

a53fd1f

3f8423c

@fox/styles/_fox-table.scss

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

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

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

a53fd1f

3f8423c

app/(protected)/(basic)/admins/_components/admin-member-list.tsx

--- app/(protected)/(basic)/admins/_components/admin-member-list.tsx

+++ app/(protected)/(basic)/admins/_components/admin-member-list.tsx


     {
       key: 'phoneNumber',
       header: '휴대전화번호',
+      align: 'start',
       width: 200,
       render: (row) => formatOptionalValue(row.phoneNumber),
     },

a53fd1f

3f8423c

app/(protected)/(basic)/boards/_components/board-post-columns.tsx

--- app/(protected)/(basic)/boards/_components/board-post-columns.tsx

+++ app/(protected)/(basic)/boards/_components/board-post-columns.tsx


     {
       key: 'authorPhoneNumber',
       header: '전화번호',
+      align: 'start',
       width: 160,
       render: (row) => formatOptionalValue(formatPhoneNumber(row.authorPhoneNumber)),
     },

a53fd1f

3f8423c

app/(protected)/(basic)/students/_components/student-list.tsx

--- app/(protected)/(basic)/students/_components/student-list.tsx

+++ app/(protected)/(basic)/students/_components/student-list.tsx


     {
       key: 'phoneNumber',
       header: '휴대전화번호',
+      align: 'start',
       width: 160,
       render: (row) => text(formatPhoneNumber(row.phoneNumber)),
     },

     {
       key: 'guardianPhoneNumber',
       header: '보호자연락처',
+      align: 'start',
       width: 160,
       render: (row) =>
         lines(

a53fd1f

3f8423c

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


     {
       key: 'phoneNumber',
       header: '연락처',
+      align: 'start',
       width: 150,
       render: (row) => formatOptionalValue(formatPhoneNumber(row.phoneNumber)),
     },

a53fd1f

3f8423c

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 ? (

a53fd1f

3f8423c

app/(protected)/(basic)/system/merchants/_components/merchant-list.tsx

--- app/(protected)/(basic)/system/merchants/_components/merchant-list.tsx

+++ app/(protected)/(basic)/system/merchants/_components/merchant-list.tsx


     {
       key: 'phoneNumber',
       header: '전화번호',
+      align: 'start',
       width: 160,
       render: (row) => formatOptionalValue(row.phoneNumber),
     },

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	))}

...	...	@@ -212,6 +212,7 @@
212	212	{
213	213	key: 'authorPhoneNumber',
214	214	header: '전화번호',
	215	+ align: 'start',
215	216	width: 160,
216	217	render: (row) => formatOptionalValue(formatPhoneNumber(row.authorPhoneNumber)),
217	218	},

...	...	@@ -92,6 +92,7 @@
92	92	{
93	93	key: 'phoneNumber',
94	94	header: '휴대전화번호',
	95	+ align: 'start',
95	96	width: 160,
96	97	render: (row) => text(formatPhoneNumber(row.phoneNumber)),
97	98	},
...	...	@@ -122,6 +123,7 @@
122	123	{
123	124	key: 'guardianPhoneNumber',
124	125	header: '보호자연락처',
	126	+ align: 'start',
125	127	width: 160,
126	128	render: (row) =>
127	129	lines(

...	...	@@ -213,6 +213,7 @@
213	213	{
214	214	key: 'phoneNumber',
215	215	header: '연락처',
	216	+ align: 'start',
216	217	width: 150,
217	218	render: (row) => formatOptionalValue(formatPhoneNumber(row.phoneNumber)),
218	219	},

...	...	@@ -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}

...	...	@@ -76,6 +76,7 @@
76	76	{
77	77	key: 'phoneNumber',
78	78	header: '휴대전화번호',
	79	+ align: 'start',
79	80	width: 200,
80	81	render: (row) => formatOptionalValue(row.phoneNumber),
81	82	},

...	...	@@ -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 ? (

...	...	@@ -78,6 +78,7 @@
78	78	{
79	79	key: 'phoneNumber',
80	80	header: '전화번호',
	81	+ align: 'start',
81	82	width: 160,
82	83	render: (row) => formatOptionalValue(row.phoneNumber),
83	84	},

Delete comment