Commit @391793840e1b86b19e537f49025651a2096cc3ac

임동욱 08-27

feat: 가맹점 수정을 조회 전용 모달로 연다

지금까지는 수정 버튼이 "백엔드 준비 중" 토스트만 띄워 등록된 내용을 볼 방법이
없었다. 모달을 열되 값은 바꿀 수 없게 한다.

`IS_EDIT_ENABLED` 한 줄에 전부 걸어 뒀다 — 수정 API가 생기면 그것만 true로 바꾸면
입력칸도 저장 버튼도 그대로 살아난다. 폼 로직은 손대지 않았다.

Co-Authored-By: Claude Opus 5

@391793840e1b86b19e537f49025651a2096cc3ac

e3760f3

3917938

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 { useState } from 'react';
 import { FoxIconButton } from '@fox/core/components/fox-icon-button';
 import { useFeedback } from '@/app/_hooks/use-feedback';
 import type { Merchant } from '@/lib/domain/merchant';
+import { MerchantFormModal } from './merchant-form-modal';
 
 interface MerchantRowActionsProps {
   merchant: Merchant;
 }
 
 /**
- * TODO(백엔드): 수정·삭제 API가 없다 — `/api/v1/mngr/voc`는 목록(`/pagination`)과 등록뿐이다.
- * 시안의 자리는 두되 눌러도 할 수 있는 일이 없어, 비활성 대신 사유를 알리도록 했다.
+ * 수정은 모달을 열어 등록된 내용을 보여 준다 — 백엔드에 수정 API가 없어 모달이 조회
+ * 전용으로 뜬다(`merchant-form-modal.tsx`의 `IS_EDIT_ENABLED`). API가 생기면 그 한 줄만
+ * 바꾸면 여기는 손대지 않아도 된다.
+ *
+ * TODO(백엔드): 삭제 API도 없다(`/api/v1/mngr/voc`는 목록·등록뿐). 시안의 자리는 두되
+ * 눌러도 할 수 있는 일이 없어 사유를 알린다.
  */
 export function MerchantRowActions({ merchant }: MerchantRowActionsProps) {
   const { showToast } = useFeedback();
-
-  function notReady() {
-    showToast({
-      variant: 'warning',
-      message: '가맹점 수정·삭제 기능은 백엔드 준비 중입니다.',
-    });
-  }
+  const [isDetailOpen, setIsDetailOpen] = useState(false);
 
   return (
     <span aria-label={`${merchant.name} 관리`}>

         size="sm"
         icon={<i className="fox-ico fox-ico-PencilSimple" aria-hidden="true" />}
         label="수정"
-        onAction={notReady}
+        onAction={() => setIsDetailOpen(true)}
       />
       <FoxIconButton
         type="default"
         size="sm"
         icon={<i className="fox-ico fox-ico-Trash" aria-hidden="true" />}
         label="삭제"
-        onAction={notReady}
+        onAction={() =>
+          showToast({
+            variant: 'warning',
+            message: '가맹점 삭제 기능은 백엔드 준비 중입니다.',
+          })
+        }
       />
+
+      {isDetailOpen && (
+        <MerchantFormModal
+          merchant={merchant}
+          onClose={() => setIsDetailOpen(false)}
+        />
+      )}
     </span>
   );
 }

Add a comment

Open 0
Closed 0

List

...	...	@@ -7,6 +7,7 @@
7	7	useState,
8	8	useTransition,
9	9	} from 'react';
	10	+import { FoxAlert } from '@fox/core/components/fox-alert';
10	11	import { FoxButton } from '@fox/core/components/fox-button';
11	12	import { FoxFormLabel } from '@fox/core/components/fox-form-label';
12	13	import { FoxHelperText } from '@fox/core/components/fox-helper-text';
...	...	@@ -34,6 +35,13 @@
34	35	import { openPostcodeSearch } from './postcode';
35	36	import styles from './merchant-form.module.scss';
36	37
	38	+/**
	39	+ * 백엔드에 가맹점 수정 API가 없어(`/api/v1/mngr/voc`는 목록·등록뿐) 수정 모달을 조회
	40	+ * 전용으로 연다. API가 생기면 이 한 줄만 `true`로 바꾸면 된다 — 입력칸·저장 버튼이
	41	+ * 전부 이 값에 걸려 있고 폼 자체는 그대로 살아 있다.
	42	+ */
	43	+const IS_EDIT_ENABLED = false;
	44	+
37	45	interface MerchantFormModalProps {
38	46	merchant?: Merchant;
39	47	onClose: () => void;
...	...	@@ -41,6 +49,10 @@
41	49
42	50	export function MerchantFormModal({ merchant, onClose }: MerchantFormModalProps) {
43	51	const isEdit = Boolean(merchant);
	52	+ const isReadOnly = isEdit && !IS_EDIT_ENABLED;
	53	+ // 조회 전용일 때 입력칸마다 얹는다. `state="view"`는 시안의 조회 상태로, 잠긴 것(disabled)과
	54	+ // 달리 "볼 수만 있는 값"으로 보이게 한다.
	55	+ const viewProps = isReadOnly ? ({ readOnly: true, state: 'view' } as const) : null;
44	56	const { showToast } = useFeedback();
45	57	const formRef = useRef<HTMLFormElement>(null);
46	58	const [state, formAction, isPending] = useActionState(
...	...	@@ -105,19 +117,23 @@
105	117	<FoxModal
106	118	open
107	119	size="md"
108		- title={isEdit ? '가맹점 수정' : '가맹점 등록'}
	120	+ title={isReadOnly ? '가맹점 정보' : isEdit ? '가맹점 수정' : '가맹점 등록'}
109	121	onClose={onClose}
110	122	actions={
111		- <>
112		- <FoxButton type="default" size="md" label="취소" onAction={onClose} />
113		- <FoxButton
114		- type="primary"
115		- size="md"
116		- label={isPending ? '저장 중...' : isEdit ? '수정' : '등록'}
117		- disabled={isPending}
118		- onAction={() => formRef.current?.requestSubmit()}
119		- />
120		- </>
	123	+ isReadOnly ? (
	124	+ <FoxButton type="default" size="md" label="닫기" onAction={onClose} />
	125	+ ) : (
	126	+ <>
	127	+ <FoxButton type="default" size="md" label="취소" onAction={onClose} />
	128	+ <FoxButton
	129	+ type="primary"
	130	+ size="md"
	131	+ label={isPending ? '저장 중...' : isEdit ? '수정' : '등록'}
	132	+ disabled={isPending}
	133	+ onAction={() => formRef.current?.requestSubmit()}
	134	+ />
	135	+ </>
	136	+ )
121	137	}
122	138	>
123	139	<form
...	...	@@ -125,6 +141,13 @@
125	141	onSubmit={(event) => submitFormAction(event, formAction)}
126	142	className={styles.fields}
127	143	>
	144	+ {isReadOnly && (
	145	+ <FoxAlert
	146	+ type="information"
	147	+ message="가맹점 수정은 백엔드 준비 중입니다. 지금은 등록된 내용만 확인할 수 있습니다."
	148	+ />
	149	+ )}
	150	+
128	151	<input type="hidden" name="id" value={merchant?.id ?? ''} />
129	152	<input type="hidden" name="categoryCode" value={categoryCode} />
130	153	<input type="hidden" name="isVisible" value={isVisible ? 'Y' : 'N'} />
...	...	@@ -150,6 +173,7 @@
150	173	항목이라 화면에서는 지우지 않고, 값이 없으면 `-`로 보여준다(사용자 확정). */}
151	174	<div className={styles.field}>
152	175	<FoxInput
	176	+ {...viewProps}
153	177	size="md"
154	178	name="brandName"
155	179	label="브랜드명"
...	...	@@ -161,6 +185,7 @@
161	185
162	186	<div className={styles.field}>
163	187	<FoxInput
	188	+ {...viewProps}
164	189	size="md"
165	190	name="name"
166	191	label="가맹점명"
...	...	@@ -175,6 +200,7 @@
175	200
176	201	<div className={styles.field}>
177	202	<FoxSelect
	203	+ readOnly={isReadOnly}
178	204	size="md"
179	205	label="업종"
180	206	requirement="required"
...	...	@@ -193,6 +219,7 @@
193	219	<div className={styles.field}>
194	220	<div className={styles.pair}>
195	221	<FoxInput
	222	+ {...viewProps}
196	223	size="md"
197	224	name="businessNumber"
198	225	label="사업자등록번호"
...	...	@@ -202,6 +229,7 @@
202	229	message={errors.businessNumber}
203	230	/>
204	231	<FoxInput
	232	+ {...viewProps}
205	233	size="md"
206	234	name="ownerName"
207	235	label="대표자명"
...	...	@@ -214,6 +242,7 @@
214	242
215	243	<div className={styles.field}>
216	244	<FoxInput
	245	+ {...viewProps}
217	246	size="md"
218	247	name="phoneNumber"
219	248	label="전화번호"
...	...	@@ -238,15 +267,18 @@
238	267	state="view"
239	268	placeholder="주소 검색을 진행해주세요."
240	269	/>
241		- <FoxButton
242		- type="secondary"
243		- size="md"
244		- label={isSearching ? '검색 중...' : '주소 검색'}
245		- disabled={isSearching}
246		- onAction={searchAddress}
247		- />
	270	+ {!isReadOnly && (
	271	+ <FoxButton
	272	+ type="secondary"
	273	+ size="md"
	274	+ label={isSearching ? '검색 중...' : '주소 검색'}
	275	+ disabled={isSearching}
	276	+ onAction={searchAddress}
	277	+ />
	278	+ )}
248	279	</div>
249	280	<FoxInput
	281	+ {...viewProps}
250	282	size="md"
251	283	name="addressDetail"
252	284	aria-label="상세주소"
...	...	@@ -287,12 +319,14 @@
287	319	</FoxFormLabel>
288	320	<FoxRadioGroup name="visibility" size="md" label="사용여부">
289	321	<FoxRadio
	322	+ disabled={isReadOnly}
290	323	value="Y"
291	324	label="노출"
292	325	checked={isVisible}
293	326	onChange={() => setIsVisible(true)}
294	327	/>
295	328	<FoxRadio
	329	+ disabled={isReadOnly}
296	330	value="N"
297	331	label="미노출"
298	332	checked={!isVisible}
...	...	@@ -303,6 +337,7 @@
303	337
304	338	<div className={styles.field}>
305	339	<FoxInput
	340	+ {...viewProps}
306	341	size="md"
307	342	name="memo"
308	343	label="메모"

...	...	@@ -1,26 +1,26 @@
1	1	'use client';
2	2
	3	+import { useState } from 'react';
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';
	7	+import { MerchantFormModal } from './merchant-form-modal';
6	8
7	9	interface MerchantRowActionsProps {
8	10	merchant: Merchant;
9	11	}
10	12
11	13	/**
12		- * TODO(백엔드): 수정·삭제 API가 없다 — `/api/v1/mngr/voc`는 목록(`/pagination`)과 등록뿐이다.
13		- * 시안의 자리는 두되 눌러도 할 수 있는 일이 없어, 비활성 대신 사유를 알리도록 했다.
	14	+ * 수정은 모달을 열어 등록된 내용을 보여 준다 — 백엔드에 수정 API가 없어 모달이 조회
	15	+ * 전용으로 뜬다(`merchant-form-modal.tsx`의 `IS_EDIT_ENABLED`). API가 생기면 그 한 줄만
	16	+ * 바꾸면 여기는 손대지 않아도 된다.
	17	+ *
	18	+ * TODO(백엔드): 삭제 API도 없다(`/api/v1/mngr/voc`는 목록·등록뿐). 시안의 자리는 두되
	19	+ * 눌러도 할 수 있는 일이 없어 사유를 알린다.
14	20	*/
15	21	export function MerchantRowActions({ merchant }: MerchantRowActionsProps) {
16	22	const { showToast } = useFeedback();
17		-
18		- function notReady() {
19		- showToast({
20		- variant: 'warning',
21		- message: '가맹점 수정·삭제 기능은 백엔드 준비 중입니다.',
22		- });
23		- }
	23	+ const [isDetailOpen, setIsDetailOpen] = useState(false);
24	24
25	25	return (
26	26	<span aria-label={`${merchant.name} 관리`}>
...	...	@@ -29,15 +29,27 @@
29	29	size="sm"
30	30	icon={<i className="fox-ico fox-ico-PencilSimple" aria-hidden="true" />}
31	31	label="수정"
32		- onAction={notReady}
	32	+ onAction={() => setIsDetailOpen(true)}
33	33	/>
34	34	<FoxIconButton
35	35	type="default"
36	36	size="sm"
37	37	icon={<i className="fox-ico fox-ico-Trash" aria-hidden="true" />}
38	38	label="삭제"
39		- onAction={notReady}
	39	+ onAction={() =>
	40	+ showToast({
	41	+ variant: 'warning',
	42	+ message: '가맹점 삭제 기능은 백엔드 준비 중입니다.',
	43	+ })
	44	+ }
40	45	/>
	46	+
	47	+ {isDetailOpen && (
	48	+ <MerchantFormModal
	49	+ merchant={merchant}
	50	+ onClose={() => setIsDetailOpen(false)}
	51	+ />
	52	+ )}
41	53	</span>
42	54	);
43	55	}

Delete comment