Commit @bbf16ab74a95d85bbbe2bb44ba74822768b8ff58

227e492

bbf16ab

@fox/styles/_fox-file-upload.scss

--- @fox/styles/_fox-file-upload.scss

+++ @fox/styles/_fox-file-upload.scss

...	...	@@ -56,9 +56,11 @@
56	56	inline-size: 100%;
57	57	}
58	58
59		- // 폭은 prop이 인라인 스타일로 정한다.
	59	+ // 폭은 prop이 인라인 스타일로 정한다. 안 주면 남는 폭을 채우고, 자리가 모자라면 줄어든다
	60	+ // — `flex-shrink: 0`이면 좁은 그릇(모달 등)에서 칸이 그대로 버텨 넘친 만큼 잘린다.
60	61	&__field {
61		- flex-shrink: 0;
	62	+ flex-shrink: 1;
	63	+ min-inline-size: 0;
62	64	}
63	65
64	66

227e492

bbf16ab

@fox/styles/_fox-modal.scss

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

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

...	...	@@ -145,6 +145,13 @@
145	145	inline-size: 100%;
146	146	block-size: auto;
147	147	}
	148	+
	149	+ // form은 내용이 아니라 그릇이다. 폭을 안 잡아 주면 `align-items: flex-start`에 걸려
	150	+ // 자기 내용만큼만 벌어지고, 그 안의 입력칸이 모달을 넘어 잘린다. 폭만 정한다 —
	151	+ // 안쪽 배치는 화면이 자기 모듈로 정하고 있어 여기서 건드리면 그쪽을 덮는다.
	152	+ > form {
	153	+ inline-size: 100%;
	154	+ }
148	155	}
149	156
150	157	// ── 아래쪽 ────────────────────────────────────────────────────────────────

bbf16ab

app/(protected)/(basic)/system/banned-words/_components/banned-word-excel-modal.module.scss (added)

+++ app/(protected)/(basic)/system/banned-words/_components/banned-word-excel-modal.module.scss

...	...	@@ -0,0 +1,12 @@
	1	+@use "@fox/styles/abstracts" as fox;
	2	+
	3	+// 안내 → 양식 내려받기 → 파일선택 → (오류) 순으로 쌓는다. 모달이 폭만 잡아 주므로
	4	+// 세로 배치는 여기서 정한다.
	5	+.form {
	6	+ display: flex;
	7	+ flex-direction: column;
	8	+ align-items: flex-start;
	9	+ gap: fox.gap(5);
	10	+ inline-size: 100%;
	11	+ min-inline-size: 0;
	12	+}

227e492

bbf16ab

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

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

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


 import { useFeedback } from '@/app/_hooks/use-feedback';
 import { BANNED_WORD_EXCEL_TEMPLATE_PATH } from '@/lib/domain/banned-word-query';
 import { uploadBannedWordExcelAction } from '../_actions';
+import styles from './banned-word-excel-modal.module.scss';
 
 interface BannedWordExcelModalProps {
   onClose: () => void;

   return (
     <FoxModal
       open
-      size="sm"
+      size="md"
       title="엑셀등록"
       onClose={onClose}
       actions={

         </>
       }
     >
-      <form ref={formRef}>
+      <form ref={formRef} className={styles.form}>
         <FoxAlert
           type="information"
           message="양식을 내려받아 금칙어명을 채운 뒤 올려 주세요. 한 줄이라도 형식이 맞지 않으면 전체가 등록되지 않습니다."

...	...	@@ -9,6 +9,7 @@
9	9	import { useFeedback } from '@/app/_hooks/use-feedback';
10	10	import { BANNED_WORD_EXCEL_TEMPLATE_PATH } from '@/lib/domain/banned-word-query';
11	11	import { uploadBannedWordExcelAction } from '../_actions';
	12	+import styles from './banned-word-excel-modal.module.scss';
12	13
13	14	interface BannedWordExcelModalProps {
14	15	onClose: () => void;
...	...	@@ -51,7 +52,7 @@
51	52	return (
52	53	<FoxModal
53	54	open
54		- size="sm"
	55	+ size="md"
55	56	title="엑셀등록"
56	57	onClose={onClose}
57	58	actions={
...	...	@@ -67,7 +68,7 @@
67	68	</>
68	69	}
69	70	>
70		- <form ref={formRef}>
	71	+ <form ref={formRef} className={styles.form}>
71	72	<FoxAlert
72	73	type="information"
73	74	message="양식을 내려받아 금칙어명을 채운 뒤 올려 주세요. 한 줄이라도 형식이 맞지 않으면 전체가 등록되지 않습니다."

Delete comment