Commit @8b17efcaa977976618b4af91030b0f1cf937cc19

임동욱 08-19

fix: 삭제 확인 모달을 @fox로 — components/ui/alert이 무스타일이었다

관리자 회원·꾸미기 아이템(그리고 같은 얼럿을 쓰는 코드관리·게시판 2곳)의 삭제 확인이 화면에
제대로 뜨지 않았다. FeedbackHost가 `components/ui/alert`을 쓰는데 그 파일은 Tailwind 클래스로만
스타일링돼 있고(`fixed inset-0 bg-scrim` 등) Tailwind는 e3d3133에서 제거됐다 — position도 배경도
걸리지 않아 문서 흐름에 글자만 붙었다.

FeedbackHost의 얼럿을 `FoxModal`로 바꿨다. `showAlert` API는 그대로라 호출부 다섯 곳이 함께
살아난다. 기본 버튼도 FoxButton으로 바꿨고, 게시판 두 곳이 넘기던 `components/ui/button`(같은
이유로 무스타일)도 FoxButton으로 교체했다.

삭제 버튼은 `type="error"` → `type="primary"`. `.fox-button--error`가 빈 블록이고 Figma 토큰에도
`button-error-*` 그룹이 없어 브라우저 기본 버튼으로 그려지고 있었다(사용자 확정: @fox에 있는
계열만 쓴다. 파괴적이라는 경고는 모달 문구가 맡는다).

검증 — 실측: 모달 400px·흰 배경·radius 24, [취소] 80×40 투명+회색 글자, [삭제] 80×40
rgb(37,110,244) 흰 글자, 스크림·닫기(X) 정상.

TODO: 같은 파일의 토스트·스피너도 Tailwind 클래스만 남아 무스타일이다. @fox에 계열을 가진
스낵바가 없어(아이콘을 호출부가 정한다) 별도 논의가 필요하다.

Co-Authored-By: Claude Opus 5

@8b17efcaa977976618b4af91030b0f1cf937cc19

7d2f744

8b17efc

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

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

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


       actions: (
         <FoxButtonGroup size="md">
           <FoxButton type="default" size="md" label="취소" onAction={hideAlert} />
-          <FoxButton type="error" size="md" label="삭제" onAction={runDelete} />
+          <FoxButton type="primary" size="md" label="삭제" onAction={runDelete} />
         </FoxButtonGroup>
       ),
     });

7d2f744

8b17efc

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


 'use client';
 
 import { useState, useTransition } from 'react';
-import { Button } from '@/components/ui/button';
+import { FoxButton } from '@fox/core/components/fox-button';
+import { FoxButtonGroup } from '@fox/core/components/fox-button-group';
 import { FoxIconButton } from '@fox/core/components/fox-icon-button';
 import { FoxPencilSimpleIcon, FoxTrashIcon } from '@fox/core/icons';
 import { useFeedback } from '@/app/_hooks/use-feedback';

       title: '게시물을 삭제하시겠습니까?',
       message: `"${post.title}" 게시물을 삭제합니다. 삭제 후에는 되돌릴 수 없습니다.`,
       actions: (
-        <>
-          <Button type="button" variant="ghost" onClick={hideAlert}>
-            취소
-          </Button>
-          <Button type="button" variant="primary" onClick={runDelete}>
-            삭제
-          </Button>
-        </>
+        <FoxButtonGroup size="md">
+          <FoxButton type="default" size="md" label="취소" onAction={hideAlert} />
+          <FoxButton type="primary" size="md" label="삭제" onAction={runDelete} />
+        </FoxButtonGroup>
       ),
     });
   }

7d2f744

8b17efc

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

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

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


 'use client';
 
 import { useState, useTransition } from 'react';
+import { FoxButton } from '@fox/core/components/fox-button';
+import { FoxButtonGroup } from '@fox/core/components/fox-button-group';
 import { Button } from '@/components/ui/button';
 import { useFeedback } from '@/app/_hooks/use-feedback';
 import type { BoardPost } from '@/lib/domain/board-post';

       title: '문의를 삭제하시겠습니까?',
       message: `"${post.title}" 문의를 삭제합니다. 삭제 후에는 되돌릴 수 없습니다.`,
       actions: (
-        <>
-          <Button type="button" variant="ghost" onClick={hideAlert}>
-            취소
-          </Button>
-          <Button type="button" variant="primary" onClick={runDelete}>
-            삭제
-          </Button>
-        </>
+        <FoxButtonGroup size="md">
+          <FoxButton type="default" size="md" label="취소" onAction={hideAlert} />
+          <FoxButton type="primary" size="md" label="삭제" onAction={runDelete} />
+        </FoxButtonGroup>
       ),
     });
   }

7d2f744

8b17efc

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


       actions: (
         <>
           <FoxButton type="default" size="md" label="취소" onAction={hideAlert} />
-          <FoxButton type="error" size="md" label="삭제" onAction={runDelete} />
+          <FoxButton type="primary" size="md" label="삭제" onAction={runDelete} />
         </>
       ),
     });

7d2f744

8b17efc

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


         <>
           <FoxButton type="default" size="md" label="취소" onAction={hideAlert} />
           <FoxButton
-            type="error"
+            type="primary"
             size="md"
             label="삭제"
             onAction={() => {

7d2f744

8b17efc

app/_components/feedback-host.tsx

--- app/_components/feedback-host.tsx

+++ app/_components/feedback-host.tsx


 'use client';
 
-import { Alert } from '@/components/ui/alert';
+import { FoxButton } from '@fox/core/components/fox-button';
+import { FoxModal } from '@fox/core/components/fox-modal';
 import { Spinner } from '@/components/ui/spinner';
 import { Toast } from '@/components/ui/toast';
 import { useFeedback } from '@/app/_hooks/use-feedback';

       )}
 
       {alert && (
-        <Alert
-          variant={alert.variant}
+        <FoxModal
+          open
+          size="sm"
           title={alert.title}
+          onClose={hideAlert}
           actions={
             alert.actions ?? (
-              <button
-                type="button"
-                onClick={hideAlert}
-                className="rounded-md bg-primary px-4 py-2 text-body-md text-on-primary"
-              >
-                확인
-              </button>
+              <FoxButton
+                type="primary"
+                size="md"
+                label="확인"
+                onAction={hideAlert}
+              />
             )
           }
         >
           {alert.message}
-        </Alert>
+        </FoxModal>
       )}
 
       {spinnerCount > 0 && (

Add a comment

Open 0
Closed 0

List

...	...	@@ -67,7 +67,7 @@
67	67	actions: (
68	68	<FoxButtonGroup size="md">
69	69	<FoxButton type="default" size="md" label="취소" onAction={hideAlert} />
70		- <FoxButton type="error" size="md" label="삭제" onAction={runDelete} />
	70	+ <FoxButton type="primary" size="md" label="삭제" onAction={runDelete} />
71	71	</FoxButtonGroup>
72	72	),
73	73	});

...	...	@@ -1,7 +1,8 @@
1	1	'use client';
2	2
3	3	import { useState, useTransition } from 'react';
4		-import { Button } from '@/components/ui/button';
	4	+import { FoxButton } from '@fox/core/components/fox-button';
	5	+import { FoxButtonGroup } from '@fox/core/components/fox-button-group';
5	6	import { FoxIconButton } from '@fox/core/components/fox-icon-button';
6	7	import { FoxPencilSimpleIcon, FoxTrashIcon } from '@fox/core/icons';
7	8	import { useFeedback } from '@/app/_hooks/use-feedback';
...	...	@@ -52,14 +53,10 @@
52	53	title: '게시물을 삭제하시겠습니까?',
53	54	message: `"${post.title}" 게시물을 삭제합니다. 삭제 후에는 되돌릴 수 없습니다.`,
54	55	actions: (
55		- <>
56		- <Button type="button" variant="ghost" onClick={hideAlert}>
57		- 취소
58		- </Button>
59		- <Button type="button" variant="primary" onClick={runDelete}>
60		- 삭제
61		- </Button>
62		- </>
	56	+ <FoxButtonGroup size="md">
	57	+ <FoxButton type="default" size="md" label="취소" onAction={hideAlert} />
	58	+ <FoxButton type="primary" size="md" label="삭제" onAction={runDelete} />
	59	+ </FoxButtonGroup>
63	60	),
64	61	});
65	62	}

...	...	@@ -1,6 +1,8 @@
1	1	'use client';
2	2
3	3	import { useState, useTransition } from 'react';
	4	+import { FoxButton } from '@fox/core/components/fox-button';
	5	+import { FoxButtonGroup } from '@fox/core/components/fox-button-group';
4	6	import { Button } from '@/components/ui/button';
5	7	import { useFeedback } from '@/app/_hooks/use-feedback';
6	8	import type { BoardPost } from '@/lib/domain/board-post';
...	...	@@ -43,14 +45,10 @@
43	45	title: '문의를 삭제하시겠습니까?',
44	46	message: `"${post.title}" 문의를 삭제합니다. 삭제 후에는 되돌릴 수 없습니다.`,
45	47	actions: (
46		- <>
47		- <Button type="button" variant="ghost" onClick={hideAlert}>
48		- 취소
49		- </Button>
50		- <Button type="button" variant="primary" onClick={runDelete}>
51		- 삭제
52		- </Button>
53		- </>
	48	+ <FoxButtonGroup size="md">
	49	+ <FoxButton type="default" size="md" label="취소" onAction={hideAlert} />
	50	+ <FoxButton type="primary" size="md" label="삭제" onAction={runDelete} />
	51	+ </FoxButtonGroup>
54	52	),
55	53	});
56	54	}

...	...	@@ -57,7 +57,7 @@
57	57	actions: (
58	58	<>
59	59	<FoxButton type="default" size="md" label="취소" onAction={hideAlert} />
60		- <FoxButton type="error" size="md" label="삭제" onAction={runDelete} />
	60	+ <FoxButton type="primary" size="md" label="삭제" onAction={runDelete} />
61	61	</>
62	62	),
63	63	});

...	...	@@ -115,7 +115,7 @@
115	115	<>
116	116	<FoxButton type="default" size="md" label="취소" onAction={hideAlert} />
117	117	<FoxButton
118		- type="error"
	118	+ type="primary"
119	119	size="md"
120	120	label="삭제"
121	121	onAction={() => {

...	...	@@ -1,6 +1,7 @@
1	1	'use client';
2	2
3		-import { Alert } from '@/components/ui/alert';
	3	+import { FoxButton } from '@fox/core/components/fox-button';
	4	+import { FoxModal } from '@fox/core/components/fox-modal';
4	5	import { Spinner } from '@/components/ui/spinner';
5	6	import { Toast } from '@/components/ui/toast';
6	7	import { useFeedback } from '@/app/_hooks/use-feedback';
...	...	@@ -25,23 +26,24 @@
25	26	)}
26	27
27	28	{alert && (
28		- <Alert
29		- variant={alert.variant}
	29	+ <FoxModal
	30	+ open
	31	+ size="sm"
30	32	title={alert.title}
	33	+ onClose={hideAlert}
31	34	actions={
32	35	alert.actions ?? (
33		- <button
34		- type="button"
35		- onClick={hideAlert}
36		- className="rounded-md bg-primary px-4 py-2 text-body-md text-on-primary"
37		- >
38		- 확인
39		- </button>
	36	+ <FoxButton
	37	+ type="primary"
	38	+ size="md"
	39	+ label="확인"
	40	+ onAction={hideAlert}
	41	+ />
40	42	)
41	43	}
42	44	>
43	45	{alert.message}
44		- </Alert>
	46	+ </FoxModal>
45	47	)}
46	48
47	49	{spinnerCount > 0 && (

Delete comment