Commit @e881cc2dfb3ccc70790d7b4eef2433d0decf4ab0

a7600db

e881cc2

@fox/styles/_fox-description-list.scss

--- @fox/styles/_fox-description-list.scss

+++ @fox/styles/_fox-description-list.scss


   inline-size: 100%;
   flex-direction: column;
   margin: 0;
+  // flex 부모가 `align-items: flex-start`여도 가로로 꽉 차게 한다 — 이 목록은 줄마다 구분선을
+  // 긋기 때문에 폭이 내용에 맞춰 줄면 선이 중간에서 끊긴 것처럼 보인다.
+  align-self: stretch;
 
   &__item {
     display: flex;

e881cc2

app/(protected)/(basic)/students/_components/student-detail-modal.module.scss (added)

+++ app/(protected)/(basic)/students/_components/student-detail-modal.module.scss

...	...	@@ -0,0 +1,7 @@
	1	+// 학생 회원 조회 팝업 — 이 화면에만 필요한 배치.
	2	+
	3	+// FoxModal의 `contents`가 `align-items: flex-start`인 flex 열이라, 그 안의 블록 요소는
	4	+// 내용 너비로 줄어든다. 폼은 조회 목록을 감싸기만 하므로 자리를 그대로 넘겨야 한다.
	5	+.form {
	6	+ inline-size: 100%;
	7	+}

a7600db

e881cc2

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

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

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


   updateStudentActiveStatus,
   type UpdateStudentActiveStatusState,
 } from '../_actions';
+import styles from './student-detail-modal.module.scss';
 
 interface StudentDetailModalProps {
   member: StudentMember;

         </>
       }
     >
-      <form ref={formRef} id={DETAIL_FORM_ID} action={formAction}>
+      <form
+        ref={formRef}
+        id={DETAIL_FORM_ID}
+        action={formAction}
+        className={styles.form}
+      >
         <input type="hidden" name="id" value={member.id} />
         <FoxDescriptionList items={items} />
       </form>

...	...	@@ -21,6 +21,9 @@
21	21	inline-size: 100%;
22	22	flex-direction: column;
23	23	margin: 0;
	24	+ // flex 부모가 `align-items: flex-start`여도 가로로 꽉 차게 한다 — 이 목록은 줄마다 구분선을
	25	+ // 긋기 때문에 폭이 내용에 맞춰 줄면 선이 중간에서 끊긴 것처럼 보인다.
	26	+ align-self: stretch;
24	27
25	28	&__item {
26	29	display: flex;

...	...	@@ -17,6 +17,7 @@
17	17	updateStudentActiveStatus,
18	18	type UpdateStudentActiveStatusState,
19	19	} from '../_actions';
	20	+import styles from './student-detail-modal.module.scss';
20	21
21	22	interface StudentDetailModalProps {
22	23	member: StudentMember;
...	...	@@ -154,7 +155,12 @@
154	155	</>
155	156	}
156	157	>
157		- <form ref={formRef} id={DETAIL_FORM_ID} action={formAction}>
	158	+ <form
	159	+ ref={formRef}
	160	+ id={DETAIL_FORM_ID}
	161	+ action={formAction}
	162	+ className={styles.form}
	163	+ >
158	164	<input type="hidden" name="id" value={member.id} />
159	165	<FoxDescriptionList items={items} />
160	166	</form>

Delete comment