Commit @64b5dee4e231fb1d641e742437090617f6c63f84

baae92a

64b5dee

@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=\"end\", 이미지·체크박스·버튼·배지는 align=\"center\", 머리칸은 본문과 같게(시안의 가운데 기본은 쓰지 않습니다 · 사용자 확정).",
	3072	+ "Figma 시안 9종(tbl-basic · tbl-list · tbl-form과 각각의 행·칸)을 FoxTable / FoxTableRow / FoxTableCell 셋으로 옮겼습니다. 진짜 <table>이라 스크린리더가 행·열을 읽어 주고 colSpan·rowSpan이 그대로 동작합니다. 머리행은 head만 주면 <thead>로 알아서 갈립니다. 창을 768px 아래로 좁히면 list는 카드로 접히고 form은 레이블이 입력 위로 올라갑니다.",
3073	3073	variants: [
3074	3074	{
3075	3075	label: "list 표 예시 — 시안 699:6304 그대로. 체크·정렬·버튼·고른 줄",

baae92a

64b5dee

@fox/styles/_fox-table.scss

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

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

...	...	@@ -17,7 +17,7 @@
17	17	// </tbody>
18	18	// </table>
19	19	//
20		-// 세 타입은 뼈대가 같고 여백·글자만 다르다. 그 차이를 클래스가 아니라 커스텀
	20	+// 세 타입은 뼈대가 같고 여백·글자·기본 정렬만 다르다. 그 차이를 클래스가 아니라 커스텀
21	21	// 프로퍼티로 내려보낸다 — 칸에 `.fox-table--basic .fox-table-cell`처럼 후손 선택자를 쓰면
22	22	// 표 안에 표가 들어갔을 때 바깥 표의 규칙이 안쪽까지 덮어쓴다. 커스텀 프로퍼티는 안쪽
23	23	// 표가 자기 값으로 다시 덮으므로 그 문제가 없다.
...	...	@@ -26,11 +26,6 @@
26	26	// (시안 device 축). 표 요소를 `display: block`으로 바꿔 만드는데, 그러면 표 의미가 사라져
27	27	// 스크린리더가 행·열을 읽지 못한다. 그래서 `list`의 칸은 `label`을 함께 받아 카드에서
28	28	// 열 이름을 글자로 보여 준다.
29		-//
30		-// 열 정렬 규약(사용자 확정, 2026-09-22) — 시안(tbl-basic·tbl-list)은 가운데였지만 데이터 표의
31		-// 통용 관례를 따른다: 기본은 왼쪽(글자·식별번호·날짜), 비교·합산하는 숫자(금액·건수·순번)는
32		-// `align="end"`, 이미지·체크박스·아이콘·버튼·알약형 배지는 `align="center"`. 머리칸은 본문 열과
33		-// 같은 정렬이다. 근거: A List Apart(Rutter)·Material·Carbon·GOV.UK 표 지침.
34	29	//
35	30	// 토큰이 아닌 값:
36	31	// - form 머리칸의 최소 크기 12rem×4.8rem: 시안 값이나 Figma가 변수로 export하지
...	...	@@ -50,8 +45,8 @@
50	45	--fox-table-head-font-family: #{fox.font-family(title)};
51	46	--fox-table-head-font-weight: #{fox.font-weight(bold)};
52	47	--fox-table-head-line-height: 1.4;
53		- --fox-table-head-align: start;
54		- --fox-table-body-align: start;
	48	+ --fox-table-head-align: center;
	49	+ --fox-table-body-align: center;
55	50	--fox-table-head-min-inline-size: 0;
56	51	--fox-table-cell-min-block-size: 0;
57	52
...	...	@@ -64,7 +59,7 @@
64	59	--fox-table-body-padding-block: #{fox.padding(3)};
65	60	}
66	61
67		- // 입력표는 여백이 넓다.
	62	+ // 입력표는 레이블 열이 왼쪽에 서고 여백이 넓다.
68	63	&--form {
69	64	--fox-table-cell-padding-inline: #{fox.padding(6)};
70	65	--fox-table-head-padding-block: #{fox.padding(6)};

baae92a

64b5dee

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: 'actions',
       header: '관리',
-      align: 'center',
       width: 160,
       render: (row) => (
         <AdminMemberRowActions

baae92a

64b5dee

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

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

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


     {
       key: 'name',
       header: '메뉴명',
+      align: 'start',
       render: (row) => (
         <span
           className={styles.name}

         </span>
       ),
     },
-    { key: 'sortOrder', header: '메뉴순번', align: 'end', width: 120 },
+    { key: 'sortOrder', header: '메뉴순번', width: 120 },
     {
       key: 'roleName',
       header: '권한',

     {
       key: 'actions',
       header: '관리',
-      align: 'center',
       width: 160,
       render: (row) => (
         <FoxButtonGroup size="sm" align="center">

baae92a

64b5dee

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


   return {
     key: 'category',
     header: '구분',
-    align: 'center',
     width: 120,
     render: (row) =>
       row.categoryCode ? (

   return {
     key: 'actions',
     header: '관리',
-    align: 'center',
     width: 120,
     render: (row) => (
       <span onClick={(event) => event.stopPropagation()}>

     {
       key: 'attachment',
       header: '첨부',
-      align: 'center',
       width: 100,
       render: (row) =>
         row.attachmentId ? (

     {
       key: 'actions',
       header: '관리',
-      align: 'center',
       width: 160,
       render: (row) => (
         <InquiryRowActions post={row} answerStatuses={answerStatuses} />

baae92a

64b5dee

app/(protected)/(basic)/contents/comics/_components/comics-list.tsx

--- app/(protected)/(basic)/contents/comics/_components/comics-list.tsx

+++ app/(protected)/(basic)/contents/comics/_components/comics-list.tsx


     {
       key: 'actions',
       header: '관리',
-      align: 'center',
       width: 120,
       render: (row) => (
         <ContentRowActions

baae92a

64b5dee

app/(protected)/(basic)/contents/quizzes/_components/quizzes-list.tsx

--- app/(protected)/(basic)/contents/quizzes/_components/quizzes-list.tsx

+++ app/(protected)/(basic)/contents/quizzes/_components/quizzes-list.tsx


     {
       key: 'actions',
       header: '관리',
-      align: 'center',
       width: 120,
       render: (row) => (
         <ContentRowActions

baae92a

64b5dee

app/(protected)/(basic)/contents/shorts/_components/shorts-list.tsx

--- app/(protected)/(basic)/contents/shorts/_components/shorts-list.tsx

+++ app/(protected)/(basic)/contents/shorts/_components/shorts-list.tsx


     {
       key: 'actions',
       header: '관리',
-      align: 'center',
       width: 120,
       render: (row) => (
         <ContentRowActions

baae92a

64b5dee

app/(protected)/(basic)/decoration-items/_components/decoration-item-list.tsx

--- app/(protected)/(basic)/decoration-items/_components/decoration-item-list.tsx

+++ app/(protected)/(basic)/decoration-items/_components/decoration-item-list.tsx


     {
       key: 'thumbnail',
       header: '썸네일',
-      align: 'center',
       width: 160,
       render: (row) =>
         row.imageUrl ? (

     {
       key: 'points',
       header: '포인트',
-      align: 'end',
       width: 160,
       render: (row) => formatDecorationItemPoints(row.points),
     },

         />
       ),
     },
-    { key: 'sortOrder', header: '정렬순서', align: 'end', width: 80 },
+    { key: 'sortOrder', header: '정렬순서', width: 80 },
     {
       key: 'updatedAt',
       header: '수정일시',

     {
       key: 'actions',
       header: '관리',
-      align: 'center',
       width: 160,
       render: (row) => (
         <DecorationItemRowActions

baae92a

64b5dee

app/(protected)/(basic)/points/accumulated/_components/point-account-list.tsx

--- app/(protected)/(basic)/points/accumulated/_components/point-account-list.tsx

+++ app/(protected)/(basic)/points/accumulated/_components/point-account-list.tsx


     { key: 'loginId', header: '아이디', width: 140 },
     { key: 'studentName', header: '학생명', width: 120, emphasis: true },
     { key: 'schoolName', header: '학교명', width: 160 },
-    { key: 'grade', header: '학년', width: 80 },
-    { key: 'classNo', header: '반', width: 80 },
-    { key: 'studentNo', header: '번호', width: 80 },
+    { key: 'grade', header: '학년', width: 80, align: 'center' },
+    { key: 'classNo', header: '반', width: 80, align: 'center' },
+    { key: 'studentNo', header: '번호', width: 80, align: 'center' },
     {
       key: 'totalPoint',
       header: '총 포인트',

     {
       key: 'actions',
       header: '관리',
-      align: 'center',
       width: 100,
       render: (row) => (
         <FoxIconButton

baae92a

64b5dee

app/(protected)/(basic)/points/standards/_components/point-standard-list.tsx

--- app/(protected)/(basic)/points/standards/_components/point-standard-list.tsx

+++ app/(protected)/(basic)/points/standards/_components/point-standard-list.tsx


     {
       key: 'actions',
       header: '관리',
-      align: 'center',
       width: 120,
       render: (row) => <PointStandardRowActions standard={row} eventCodes={eventCodes} />,
     },

baae92a

64b5dee

app/(protected)/(basic)/system/banned-words/_components/banned-word-list.tsx

--- app/(protected)/(basic)/system/banned-words/_components/banned-word-list.tsx

+++ app/(protected)/(basic)/system/banned-words/_components/banned-word-list.tsx


     {
       key: 'actions',
       header: '관리',
-      align: 'center',
       width: 100,
       render: (row) => (
         <FoxIconButton

baae92a

64b5dee

app/(protected)/(basic)/system/codes/_components/code-management.tsx

--- app/(protected)/(basic)/system/codes/_components/code-management.tsx

+++ app/(protected)/(basic)/system/codes/_components/code-management.tsx


     {
       key: 'actions',
       header: '관리',
-      align: 'center',
       width: 120,
       render: (row) => (
         <CodeRowActions

     {
       key: 'actions',
       header: '관리',
-      align: 'center',
       width: 120,
       render: (row) => (
         <CodeRowActions

baae92a

64b5dee

app/(protected)/(basic)/system/menus/_components/menu-tree-list.tsx

--- app/(protected)/(basic)/system/menus/_components/menu-tree-list.tsx

+++ app/(protected)/(basic)/system/menus/_components/menu-tree-list.tsx


     { key: 'id', header: '번호', width: 100 },
     {
       key: 'toggle',
-      align: 'center',
       header: (
         <button
           type="button"

         </span>
       ),
     },
-    { key: 'sortOrder', header: '메뉴순번', width: 120, align: 'end' },
+    { key: 'sortOrder', header: '메뉴순번', width: 120, align: 'center' },
     {
       key: 'isActive',
       header: '활성여부',

     {
       key: 'actions',
       header: '관리',
-      align: 'center',
       width: 140,
       render: (row) => (
         <MenuRowActions

baae92a

64b5dee

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: 'no',
       header: 'No',
       width: 72,
+      align: 'center',
       render: (_row, index) => (currentPage - 1) * query.pageSize + index + 1,
     },
     {

       key: 'productCount',
       header: '메뉴',
       width: 72,
-      align: 'end',
+      align: 'center',
       render: (row) => (row.productCount === null ? EMPTY_FIELD_PLACEHOLDER : String(row.productCount)),
     },
     {
       key: 'status',
       header: '상태',
       width: 110,
+      align: 'center',
       render: (row) =>
         row.hasDetail && row.isVisible !== null ? (
           <FoxStatusIndicator

       key: 'registeredAt',
       header: '등록일',
       width: 120,
+      align: 'center',
       render: (row) => formatOptionalValue(row.registeredAt),
     },
     {

baae92a

64b5dee

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


             <FoxTableCell head width={140} align="center">이미지</FoxTableCell>
             <FoxTableCell head width={240}>메뉴명</FoxTableCell>
             <FoxTableCell head>설명</FoxTableCell>
-            <FoxTableCell head width={140} align="end">가격</FoxTableCell>
+            <FoxTableCell head width={140} align="center">가격</FoxTableCell>
             <FoxTableCell head width={180} align="center">배지</FoxTableCell>
-            <FoxTableCell head width={96}>노출</FoxTableCell>
+            <FoxTableCell head width={96} align="center">노출</FoxTableCell>
             <FoxTableCell head width={220} align="center">관리</FoxTableCell>
           </FoxTableRow>
 

                     {product.description ?? EMPTY_FIELD_PLACEHOLDER}
                   </span>
                 </FoxTableCell>
-                <FoxTableCell align="end" label="가격">
+                <FoxTableCell align="center" label="가격">
                   {formatProductPrice(product.price)}
                 </FoxTableCell>
                 <FoxTableCell align="center" label="배지">

                     </span>
                   )}
                 </FoxTableCell>
-                <FoxTableCell label="노출">
+                <FoxTableCell align="center" label="노출">
                   <FoxStatusIndicator
                     type={product.isVisible ? 'success' : 'default'}
                     label={formatProductVisibilityLabel(product.isVisible)}

baae92a

64b5dee

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: 'actions',
       header: '관리',
-      align: 'center',
       width: 120,
       render: (row) => <MerchantRowActions merchant={row} codeTables={codeTables} />,
     },

...	...	@@ -122,7 +122,6 @@
122	122	{
123	123	key: 'actions',
124	124	header: '관리',
125		- align: 'center',
126	125	width: 160,
127	126	render: (row) => (
128	127	<AdminMemberRowActions

...	...	@@ -118,6 +118,7 @@
118	118	{
119	119	key: 'name',
120	120	header: '메뉴명',
	121	+ align: 'start',
121	122	render: (row) => (
122	123	<span
123	124	className={styles.name}
...	...	@@ -144,7 +145,7 @@
144	145	</span>
145	146	),
146	147	},
147		- { key: 'sortOrder', header: '메뉴순번', align: 'end', width: 120 },
	148	+ { key: 'sortOrder', header: '메뉴순번', width: 120 },
148	149	{
149	150	key: 'roleName',
150	151	header: '권한',
...	...	@@ -154,7 +155,6 @@
154	155	{
155	156	key: 'actions',
156	157	header: '관리',
157		- align: 'center',
158	158	width: 160,
159	159	render: (row) => (
160	160	<FoxButtonGroup size="sm" align="center">

...	...	@@ -92,7 +92,6 @@
92	92	{
93	93	key: 'thumbnail',
94	94	header: '썸네일',
95		- align: 'center',
96	95	width: 160,
97	96	render: (row) =>
98	97	row.imageUrl ? (
...	...	@@ -118,7 +117,6 @@
118	117	{
119	118	key: 'points',
120	119	header: '포인트',
121		- align: 'end',
122	120	width: 160,
123	121	render: (row) => formatDecorationItemPoints(row.points),
124	122	},
...	...	@@ -133,7 +131,7 @@
133	131	/>
134	132	),
135	133	},
136		- { key: 'sortOrder', header: '정렬순서', align: 'end', width: 80 },
	134	+ { key: 'sortOrder', header: '정렬순서', width: 80 },
137	135	{
138	136	key: 'updatedAt',
139	137	header: '수정일시',
...	...	@@ -143,7 +141,6 @@
143	141	{
144	142	key: 'actions',
145	143	header: '관리',
146		- align: 'center',
147	144	width: 160,
148	145	render: (row) => (
149	146	<DecorationItemRowActions

...	...	@@ -83,9 +83,9 @@
83	83	{ key: 'loginId', header: '아이디', width: 140 },
84	84	{ key: 'studentName', header: '학생명', width: 120, emphasis: true },
85	85	{ key: 'schoolName', header: '학교명', width: 160 },
86		- { key: 'grade', header: '학년', width: 80 },
87		- { key: 'classNo', header: '반', width: 80 },
88		- { key: 'studentNo', header: '번호', width: 80 },
	86	+ { key: 'grade', header: '학년', width: 80, align: 'center' },
	87	+ { key: 'classNo', header: '반', width: 80, align: 'center' },
	88	+ { key: 'studentNo', header: '번호', width: 80, align: 'center' },
89	89	{
90	90	key: 'totalPoint',
91	91	header: '총 포인트',
...	...	@@ -124,7 +124,6 @@
124	124	{
125	125	key: 'actions',
126	126	header: '관리',
127		- align: 'center',
128	127	width: 100,
129	128	render: (row) => (
130	129	<FoxIconButton

...	...	@@ -116,7 +116,6 @@
116	116	{
117	117	key: 'actions',
118	118	header: '관리',
119		- align: 'center',
120	119	width: 120,
121	120	render: (row) => <PointStandardRowActions standard={row} eventCodes={eventCodes} />,
122	121	},

...	...	@@ -36,7 +36,6 @@
36	36	return {
37	37	key: 'category',
38	38	header: '구분',
39		- align: 'center',
40	39	width: 120,
41	40	render: (row) =>
42	41	row.categoryCode ? (
...	...	@@ -70,7 +69,6 @@
70	69	return {
71	70	key: 'actions',
72	71	header: '관리',
73		- align: 'center',
74	72	width: 120,
75	73	render: (row) => (
76	74	<span onClick={(event) => event.stopPropagation()}>
...	...	@@ -88,7 +86,6 @@
88	86	{
89	87	key: 'attachment',
90	88	header: '첨부',
91		- align: 'center',
92	89	width: 100,
93	90	render: (row) =>
94	91	row.attachmentId ? (
...	...	@@ -248,7 +245,6 @@
248	245	{
249	246	key: 'actions',
250	247	header: '관리',
251		- align: 'center',
252	248	width: 160,
253	249	render: (row) => (
254	250	<InquiryRowActions post={row} answerStatuses={answerStatuses} />

...	...	@@ -91,7 +91,6 @@
91	91	{
92	92	key: 'actions',
93	93	header: '관리',
94		- align: 'center',
95	94	width: 120,
96	95	render: (row) => (
97	96	<ContentRowActions

...	...	@@ -98,7 +98,6 @@
98	98	{
99	99	key: 'actions',
100	100	header: '관리',
101		- align: 'center',
102	101	width: 120,
103	102	render: (row) => (
104	103	<ContentRowActions

...	...	@@ -95,7 +95,6 @@
95	95	{
96	96	key: 'actions',
97	97	header: '관리',
98		- align: 'center',
99	98	width: 100,
100	99	render: (row) => (
101	100	<FoxIconButton

...	...	@@ -162,7 +162,6 @@
162	162	{
163	163	key: 'actions',
164	164	header: '관리',
165		- align: 'center',
166	165	width: 120,
167	166	render: (row) => (
168	167	<CodeRowActions
...	...	@@ -206,7 +205,6 @@
206	205	{
207	206	key: 'actions',
208	207	header: '관리',
209		- align: 'center',
210	208	width: 120,
211	209	render: (row) => (
212	210	<CodeRowActions

...	...	@@ -189,6 +189,7 @@
189	189	key: 'no',
190	190	header: 'No',
191	191	width: 72,
	192	+ align: 'center',
192	193	render: (_row, index) => (currentPage - 1) * query.pageSize + index + 1,
193	194	},
194	195	{
...	...	@@ -225,13 +226,14 @@
225	226	key: 'productCount',
226	227	header: '메뉴',
227	228	width: 72,
228		- align: 'end',
	229	+ align: 'center',
229	230	render: (row) => (row.productCount === null ? EMPTY_FIELD_PLACEHOLDER : String(row.productCount)),
230	231	},
231	232	{
232	233	key: 'status',
233	234	header: '상태',
234	235	width: 110,
	236	+ align: 'center',
235	237	render: (row) =>
236	238	row.hasDetail && row.isVisible !== null ? (
237	239	<FoxStatusIndicator
...	...	@@ -246,6 +248,7 @@
246	248	key: 'registeredAt',
247	249	header: '등록일',
248	250	width: 120,
	251	+ align: 'center',
249	252	render: (row) => formatOptionalValue(row.registeredAt),
250	253	},
251	254	{

...	...	@@ -61,9 +61,9 @@
61	61	<FoxTableCell head width={140} align="center">이미지</FoxTableCell>
62	62	<FoxTableCell head width={240}>메뉴명</FoxTableCell>
63	63	<FoxTableCell head>설명</FoxTableCell>
64		- <FoxTableCell head width={140} align="end">가격</FoxTableCell>
	64	+ <FoxTableCell head width={140} align="center">가격</FoxTableCell>
65	65	<FoxTableCell head width={180} align="center">배지</FoxTableCell>
66		- <FoxTableCell head width={96}>노출</FoxTableCell>
	66	+ <FoxTableCell head width={96} align="center">노출</FoxTableCell>
67	67	<FoxTableCell head width={220} align="center">관리</FoxTableCell>
68	68	</FoxTableRow>
69	69
...	...	@@ -85,7 +85,7 @@
85	85	{product.description ?? EMPTY_FIELD_PLACEHOLDER}
86	86	</span>
87	87	</FoxTableCell>
88		- <FoxTableCell align="end" label="가격">
	88	+ <FoxTableCell align="center" label="가격">
89	89	{formatProductPrice(product.price)}
90	90	</FoxTableCell>
91	91	<FoxTableCell align="center" label="배지">
...	...	@@ -101,7 +101,7 @@
101	101	</span>
102	102	)}
103	103	</FoxTableCell>
104		- <FoxTableCell label="노출">
	104	+ <FoxTableCell align="center" label="노출">
105	105	<FoxStatusIndicator
106	106	type={product.isVisible ? 'success' : 'default'}
107	107	label={formatProductVisibilityLabel(product.isVisible)}

...	...	@@ -110,7 +110,6 @@
110	110	{
111	111	key: 'actions',
112	112	header: '관리',
113		- align: 'center',
114	113	width: 120,
115	114	render: (row) => <MerchantRowActions merchant={row} codeTables={codeTables} />,
116	115	},

Delete comment