Commit @a194ac8a702241e540900f73b38457f4a6d97464

임동욱 09-03

fix: 목록 [관리] 칸의 버튼을 가운데로 맞춘다

@fox 목록 표는 셀을 이미 text-align: center로 두는데, FoxButtonGroup이 블록 레벨 flex라
셀 폭을 채우고 기본값이 justify-content: flex-start다. 그래서 align="center"를 준 두 화면
(관리자 회원·관리자 메뉴)만 가운데였고 나머지는 왼쪽에 붙어 있었다.

- 행 관리 묶음 다섯 곳에 align="center"를 준다(콘텐츠·꾸미기아이템·게시판·포인트기준·공통코드).
- 시스템 메뉴는 자체 flex div를 쓰고 있어 다른 화면과 같은 FoxButtonGroup으로 바꾼다.
- 가맹점은 묶음 없이 span에 aria-label만 있었다. FoxButtonGroup으로 감싸고 가맹점명을
  각 버튼 라벨에 넣는다 — 비의미 요소의 aria-label보다 확실하게 읽힌다(공통코드와 같은 방식).

버튼 하나뿐인 칸(금칙어·포인트 적립)은 손대지 않았다. FoxIconButton이 inline-flex라
셀의 text-align만으로 이미 가운데다(실측 0px).

Co-Authored-By: Claude Opus 5

@a194ac8a702241e540900f73b38457f4a6d97464

e8f99be

a194ac8

app/(protected)/(basic)/boards/_components/board-row-actions.tsx

--- app/(protected)/(basic)/boards/_components/board-row-actions.tsx

+++ app/(protected)/(basic)/boards/_components/board-row-actions.tsx


 
   return (
     <>
-      <FoxButtonGroup size="sm">
+      <FoxButtonGroup size="sm" align="center">
         <FoxIconButton
           type="default"
           size="sm"

e8f99be

a194ac8

app/(protected)/(basic)/contents/_components/content-row-actions.tsx

--- app/(protected)/(basic)/contents/_components/content-row-actions.tsx

+++ app/(protected)/(basic)/contents/_components/content-row-actions.tsx


   }
 
   return (
-    <FoxButtonGroup size="sm">
+    <FoxButtonGroup size="sm" align="center">
       <FoxIconButton
         type="default"
         size="sm"

e8f99be

a194ac8

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

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

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


 
   return (
     <>
-      <FoxButtonGroup size="sm">
+      <FoxButtonGroup size="sm" align="center">
         <FoxIconButton
           type="default"
           size="sm"

e8f99be

a194ac8

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

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

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


 
   return (
     <>
-      <FoxButtonGroup size="sm">
+      <FoxButtonGroup size="sm" align="center">
         <FoxIconButton
           type="default"
           size="sm"

e8f99be

a194ac8

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

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

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


       onClick={(event) => event.stopPropagation()}
       onKeyDown={(event) => event.stopPropagation()}
     >
-      <FoxButtonGroup size="sm">
+      <FoxButtonGroup size="sm" align="center">
         <FoxIconButton
           type="default"
           size="sm"

e8f99be

a194ac8

app/(protected)/(basic)/system/menus/_components/menu-row-actions.tsx

--- app/(protected)/(basic)/system/menus/_components/menu-row-actions.tsx

+++ app/(protected)/(basic)/system/menus/_components/menu-row-actions.tsx


 import { useBlockingAction } from '@/app/_hooks/use-blocking-action';
 import type { SystemMenuNode } from '@/lib/domain/system-menu';
 import { deleteSystemMenuAction } from '../_actions';
-import styles from './menu-tree.module.scss';
 
 interface MenuRowActionsProps {
   node: SystemMenuNode;

   }
 
   return (
-    <div className={styles.actions}>
+    <FoxButtonGroup size="sm" align="center">
       <FoxIconButton
         type="default"
         size="sm"

         disabled={isDeleting}
         onAction={confirmDelete}
       />
-    </div>
+    </FoxButtonGroup>
   );
 }

e8f99be

a194ac8

app/(protected)/(basic)/system/menus/_components/menu-tree.module.scss

--- app/(protected)/(basic)/system/menus/_components/menu-tree.module.scss

+++ app/(protected)/(basic)/system/menus/_components/menu-tree.module.scss


   }
 }
 
-.actions {
-  display: flex;
-  align-items: center;
-  gap: fox.gap(1);
-}

e8f99be

a194ac8

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

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

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


 'use client';
 
+import { FoxButtonGroup } from '@fox/core/components/fox-button-group';
 import { FoxIconButton } from '@fox/core/components/fox-icon-button';
 import { useFeedback } from '@/app/_hooks/use-feedback';
 import type { Merchant } from '@/lib/domain/merchant';

   }
 
   return (
-    <span aria-label={`${merchant.name} 관리`}>
+    <FoxButtonGroup size="sm" align="center">
       <FoxIconButton
         type="default"
         size="sm"
         icon={<i className="fox-ico fox-ico-PencilSimple" aria-hidden="true" />}
-        label="수정"
+        label={`${merchant.name} 수정`}
         onAction={notReady}
       />
       <FoxIconButton
         type="default"
         size="sm"
         icon={<i className="fox-ico fox-ico-Trash" aria-hidden="true" />}
-        label="삭제"
+        label={`${merchant.name} 삭제`}
         onAction={notReady}
       />
-    </span>
+    </FoxButtonGroup>
   );
 }

Add a comment

Open 0
Closed 0

List

...	...	@@ -83,7 +83,7 @@
83	83
84	84	return (
85	85	<>
86		- <FoxButtonGroup size="sm">
	86	+ <FoxButtonGroup size="sm" align="center">
87	87	<FoxIconButton
88	88	type="default"
89	89	size="sm"

...	...	@@ -52,7 +52,7 @@
52	52	}
53	53
54	54	return (
55		- <FoxButtonGroup size="sm">
	55	+ <FoxButtonGroup size="sm" align="center">
56	56	<FoxIconButton
57	57	type="default"
58	58	size="sm"

...	...	@@ -65,7 +65,7 @@
65	65
66	66	return (
67	67	<>
68		- <FoxButtonGroup size="sm">
	68	+ <FoxButtonGroup size="sm" align="center">
69	69	<FoxIconButton
70	70	type="default"
71	71	size="sm"

...	...	@@ -52,7 +52,7 @@
52	52
53	53	return (
54	54	<>
55		- <FoxButtonGroup size="sm">
	55	+ <FoxButtonGroup size="sm" align="center">
56	56	<FoxIconButton
57	57	type="default"
58	58	size="sm"

...	...	@@ -28,7 +28,7 @@
28	28	onClick={(event) => event.stopPropagation()}
29	29	onKeyDown={(event) => event.stopPropagation()}
30	30	>
31		- <FoxButtonGroup size="sm">
	31	+ <FoxButtonGroup size="sm" align="center">
32	32	<FoxIconButton
33	33	type="default"
34	34	size="sm"

...	...	@@ -1,5 +1,6 @@
1	1	'use client';
2	2
	3	+import { FoxButtonGroup } from '@fox/core/components/fox-button-group';
3	4	import { FoxIconButton } from '@fox/core/components/fox-icon-button';
4	5	import { useFeedback } from '@/app/_hooks/use-feedback';
5	6	import type { Merchant } from '@/lib/domain/merchant';
...	...	@@ -23,21 +24,21 @@
23	24	}
24	25
25	26	return (
26		- <span aria-label={`${merchant.name} 관리`}>
	27	+ <FoxButtonGroup size="sm" align="center">
27	28	<FoxIconButton
28	29	type="default"
29	30	size="sm"
30	31	icon={<i className="fox-ico fox-ico-PencilSimple" aria-hidden="true" />}
31		- label="수정"
	32	+ label={`${merchant.name} 수정`}
32	33	onAction={notReady}
33	34	/>
34	35	<FoxIconButton
35	36	type="default"
36	37	size="sm"
37	38	icon={<i className="fox-ico fox-ico-Trash" aria-hidden="true" />}
38		- label="삭제"
	39	+ label={`${merchant.name} 삭제`}
39	40	onAction={notReady}
40	41	/>
41		- </span>
	42	+ </FoxButtonGroup>
42	43	);
43	44	}

Delete comment