Commit @8b6539e13aecc767db331b18fec76a5361dc3cf4

임동욱 09-22

feat: 표의 코드·ID·아이디·이름·작성자 열도 왼쪽 정렬로 맞춘다

디자인팀 규칙 보완(사용자 요청). 가맹점코드·코드ID·상세코드ID·아이템ID·메뉴번호, 이름·아이디·
보호자이름·아이템명·작성자·질문자명에 align=start. 번호·날짜·상태·구분 같은 짧은 값은 가운데 그대로.

Co-Authored-By: Claude Opus 5

@8b6539e13aecc767db331b18fec76a5361dc3cf4

6962814

8b6539e

@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은 레이블이 입력 위로 올라갑니다. 열 정렬은 디자인팀 규칙대로 가운데가 기본이고, 제목·코드·ID·이름 열과 긴 글 열(주소·설명·내용·전화번호)은 align=\"start\"로 왼쪽입니다. 머리칸은 본문 열과 같은 정렬입니다.",
3073	3073	variants: [
3074	3074	{
3075	3075	label: "list 표 예시 — 시안 699:6304 그대로. 체크·정렬·버튼·고른 줄",

6962814

8b6539e

@fox/styles/_fox-table.scss

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

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

...	...	@@ -28,7 +28,8 @@
28	28	// 열 이름을 글자로 보여 준다.
29	29	//
30	30	// 열 정렬 규약(디자인팀 확정, 2026-09-22) — 목록·기본 표는 가운데가 기본이고, **제목 열
31		-// (emphasis)과 긴 글 열(주소·설명·내용·키워드·이메일·전화번호)만 `align="start"`** 로 왼쪽에 둔다.
	31	+// (emphasis)·글자 식별 열(코드·ID·아이디·이름·작성자)·긴 글 열(주소·설명·내용·키워드·이메일·
	32	+// 전화번호)은 `align="start"`** 로 왼쪽에 둔다. 번호·날짜·상태·구분 같은 짧은 값은 가운데.
32	33	// 머리칸은 본문 열과 같은 정렬이다(FoxListContainer가 같은 align을 머리칸에도 준다).
33	34	//
34	35	// 토큰이 아닌 값:

6962814

8b6539e

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


       width: 80,
       render: (_row, index) => totalCount - offset - index,
     },
-    { key: 'name', header: '이름', width: FILL_COLUMN_WIDTH },
-    { key: 'loginId', header: '아이디', width: FILL_COLUMN_WIDTH },
+    { key: 'name', header: '이름', align: 'start', width: FILL_COLUMN_WIDTH },
+    { key: 'loginId', header: '아이디', align: 'start', width: FILL_COLUMN_WIDTH },
     {
       key: 'phoneNumber',
       header: '휴대전화번호',

6962814

8b6539e

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


   }
 
   const columns: FoxListColumn<AdminMenuNode>[] = [
-    { key: 'id', header: '메뉴번호', width: 120 },
+    { key: 'id', header: '메뉴번호', align: 'start', width: 120 },
     {
       key: 'isActive',
       header: '활성여부',

6962814

8b6539e

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: 'authorName',
       header: '작성자',
+      align: 'start',
       width: 160,
       render: (row) => formatOptionalValue(row.authorName),
     },

     {
       key: 'authorName',
       header: '작성자',
+      align: 'start',
       width: 160,
       render: (row) => formatOptionalValue(row.authorName),
     },

     {
       key: 'authorName',
       header: '질문자명',
+      align: 'start',
       width: 140,
       render: (row) => formatOptionalValue(row.authorName),
     },

6962814

8b6539e

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


       // "가장 작은 정렬순서가 1번"이 되도록 앞에서부터 센다.
       render: (_row, index) => (currentPage - 1) * query.pageSize + index + 1,
     },
-    { key: 'itemSn', header: '아이템ID', width: 236 },
+    { key: 'itemSn', header: '아이템ID', align: 'start', width: 236 },
     {
       key: 'thumbnail',
       header: '썸네일',

           EMPTY_FIELD_PLACEHOLDER
         ),
     },
-    { key: 'name', header: '아이템명', width: 236 },
+    { key: 'name', header: '아이템명', align: 'start', width: 236 },
     {
       key: 'category',
       header: '카테고리',

6962814

8b6539e

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


       width: 80,
       render: (_row, index) => (currentPage - 1) * query.pageSize + index + 1,
     },
-    { key: 'loginId', header: '아이디', width: 140 },
+    { key: 'loginId', header: '아이디', align: 'start', width: 140 },
     { key: 'studentName', header: '학생명', align: 'start', width: 120, emphasis: true },
     { key: 'schoolName', header: '학교명', width: 160 },
     { key: 'grade', header: '학년', width: 80, align: 'center' },

6962814

8b6539e

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

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

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


       // 저장된 값이 아니라 현재 페이지 기준 표시 순번이다(종전 표와 같은 규칙).
       render: (_row, index) => (currentPage - 1) * query.pageSize + index + 1,
     },
-    { key: 'name', header: '이름', width: 120 },
-    { key: 'loginId', header: '아이디', width: 160 },
+    { key: 'name', header: '이름', align: 'start', width: 120 },
+    { key: 'loginId', header: '아이디', align: 'start', width: 160 },
     {
       key: 'phoneNumber',
       header: '휴대전화번호',

     {
       key: 'guardianName',
       header: '보호자이름',
+      align: 'start',
       width: 120,
       render: (row) => lines(row.guardians.map((guardian) => guardian.name)),
     },

6962814

8b6539e

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


       width: 80,
       render: (_row, index) => (groupPage - 1) * COMMON_CODE_PAGE_SIZE + index + 1,
     },
-    { key: 'comCd', header: '코드ID', width: 120 },
+    { key: 'comCd', header: '코드ID', align: 'start', width: 120 },
     { key: 'name', header: '코드명', align: 'start', width: 160, emphasis: true },
     {
       key: 'description',

       // 기획의 상세코드 목록은 이 자리에 정렬번호를 보여준다(FSC01→1, FSC10→10).
       render: (row) => row.sortSeq,
     },
-    { key: 'comDtlCd', header: '상세코드ID', width: 120 },
+    { key: 'comDtlCd', header: '상세코드ID', align: 'start', width: 120 },
     { key: 'name', header: '상세코드명', align: 'start', width: 120, emphasis: true },
     {
       key: 'description',

6962814

8b6539e

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


       width: 80,
       render: (_row, index) => (currentPage - 1) * query.pageSize + index + 1,
     },
-    { key: 'code', header: '가맹점코드', width: 140 },
+    { key: 'code', header: '가맹점코드', align: 'start', width: 140 },
     { key: 'name', header: '가맹점명', align: 'start', width: 240, emphasis: true },
     {
       key: 'categoryCode',

Add a comment

Open 0
Closed 0

List

...	...	@@ -101,7 +101,7 @@
101	101	}
102	102
103	103	const columns: FoxListColumn<AdminMenuNode>[] = [
104		- { key: 'id', header: '메뉴번호', width: 120 },
	104	+ { key: 'id', header: '메뉴번호', align: 'start', width: 120 },
105	105	{
106	106	key: 'isActive',
107	107	header: '활성여부',

...	...	@@ -100,6 +100,7 @@
100	100	{
101	101	key: 'authorName',
102	102	header: '작성자',
	103	+ align: 'start',
103	104	width: 160,
104	105	render: (row) => formatOptionalValue(row.authorName),
105	106	},
...	...	@@ -138,6 +139,7 @@
138	139	{
139	140	key: 'authorName',
140	141	header: '작성자',
	142	+ align: 'start',
141	143	width: 160,
142	144	render: (row) => formatOptionalValue(row.authorName),
143	145	},
...	...	@@ -206,6 +208,7 @@
206	208	{
207	209	key: 'authorName',
208	210	header: '질문자명',
	211	+ align: 'start',
209	212	width: 140,
210	213	render: (row) => formatOptionalValue(row.authorName),
211	214	},

...	...	@@ -88,7 +88,7 @@
88	88	// "가장 작은 정렬순서가 1번"이 되도록 앞에서부터 센다.
89	89	render: (_row, index) => (currentPage - 1) * query.pageSize + index + 1,
90	90	},
91		- { key: 'itemSn', header: '아이템ID', width: 236 },
	91	+ { key: 'itemSn', header: '아이템ID', align: 'start', width: 236 },
92	92	{
93	93	key: 'thumbnail',
94	94	header: '썸네일',
...	...	@@ -107,7 +107,7 @@
107	107	EMPTY_FIELD_PLACEHOLDER
108	108	),
109	109	},
110		- { key: 'name', header: '아이템명', width: 236 },
	110	+ { key: 'name', header: '아이템명', align: 'start', width: 236 },
111	111	{
112	112	key: 'category',
113	113	header: '카테고리',

...	...	@@ -87,8 +87,8 @@
87	87	// 저장된 값이 아니라 현재 페이지 기준 표시 순번이다(종전 표와 같은 규칙).
88	88	render: (_row, index) => (currentPage - 1) * query.pageSize + index + 1,
89	89	},
90		- { key: 'name', header: '이름', width: 120 },
91		- { key: 'loginId', header: '아이디', width: 160 },
	90	+ { key: 'name', header: '이름', align: 'start', width: 120 },
	91	+ { key: 'loginId', header: '아이디', align: 'start', width: 160 },
92	92	{
93	93	key: 'phoneNumber',
94	94	header: '휴대전화번호',
...	...	@@ -117,6 +117,7 @@
117	117	{
118	118	key: 'guardianName',
119	119	header: '보호자이름',
	120	+ align: 'start',
120	121	width: 120,
121	122	render: (row) => lines(row.guardians.map((guardian) => guardian.name)),
122	123	},

...	...	@@ -145,7 +145,7 @@
145	145	width: 80,
146	146	render: (_row, index) => (groupPage - 1) * COMMON_CODE_PAGE_SIZE + index + 1,
147	147	},
148		- { key: 'comCd', header: '코드ID', width: 120 },
	148	+ { key: 'comCd', header: '코드ID', align: 'start', width: 120 },
149	149	{ key: 'name', header: '코드명', align: 'start', width: 160, emphasis: true },
150	150	{
151	151	key: 'description',
...	...	@@ -189,7 +189,7 @@
189	189	// 기획의 상세코드 목록은 이 자리에 정렬번호를 보여준다(FSC01→1, FSC10→10).
190	190	render: (row) => row.sortSeq,
191	191	},
192		- { key: 'comDtlCd', header: '상세코드ID', width: 120 },
	192	+ { key: 'comDtlCd', header: '상세코드ID', align: 'start', width: 120 },
193	193	{ key: 'name', header: '상세코드명', align: 'start', width: 120, emphasis: true },
194	194	{
195	195	key: 'description',

...	...	@@ -71,8 +71,8 @@
71	71	width: 80,
72	72	render: (_row, index) => totalCount - offset - index,
73	73	},
74		- { key: 'name', header: '이름', width: FILL_COLUMN_WIDTH },
75		- { key: 'loginId', header: '아이디', width: FILL_COLUMN_WIDTH },
	74	+ { key: 'name', header: '이름', align: 'start', width: FILL_COLUMN_WIDTH },
	75	+ { key: 'loginId', header: '아이디', align: 'start', width: FILL_COLUMN_WIDTH },
76	76	{
77	77	key: 'phoneNumber',
78	78	header: '휴대전화번호',

...	...	@@ -80,7 +80,7 @@
80	80	width: 80,
81	81	render: (_row, index) => (currentPage - 1) * query.pageSize + index + 1,
82	82	},
83		- { key: 'loginId', header: '아이디', width: 140 },
	83	+ { key: 'loginId', header: '아이디', align: 'start', width: 140 },
84	84	{ key: 'studentName', header: '학생명', align: 'start', width: 120, emphasis: true },
85	85	{ key: 'schoolName', header: '학교명', width: 160 },
86	86	{ key: 'grade', header: '학년', width: 80, align: 'center' },

...	...	@@ -67,7 +67,7 @@
67	67	width: 80,
68	68	render: (_row, index) => (currentPage - 1) * query.pageSize + index + 1,
69	69	},
70		- { key: 'code', header: '가맹점코드', width: 140 },
	70	+ { key: 'code', header: '가맹점코드', align: 'start', width: 140 },
71	71	{ key: 'name', header: '가맹점명', align: 'start', width: 240, emphasis: true },
72	72	{
73	73	key: 'categoryCode',

Delete comment