Commit @1322010e23d688c1d5eb8b97fd6bf798e9eb13f1

Y
List All
Feedback
- This Project
- All Projects

임동욱 08-18

fix: 제목 없는 모달도 제목 줄 자리를 남김

제목을 안 넘기면 제목 줄이 통째로 빠져 닫기 아이콘이 내용 위로 내려앉았다. 시안의 tit
프레임은 제목이 없어도 28px(제목 글자 크기 × 줄높이)을 차지한다.

줄은 항상 내고 ``만 제목이 있을 때 낸다 — 빈 제목을 심으면 이름 없는 heading이 되어
스크린리더가 헛읽는다. 높이는 토큰에서 계산해 브레이크포인트가 바뀌어도 따라간다.

검증: 제목이 있든 없든 제목줄 높이 28 · 위치 41 · 내용 시작 85로 같다. 제목이 없을 때
닫기 아이콘 아래끝 56이 내용 시작 85보다 위라 겹치지 않는다.

Co-Authored-By: Claude Opus 5

@1322010e23d688c1d5eb8b97fd6bf798e9eb13f1

Add a comment

Open 0
Closed 0

List

...	...	@@ -94,11 +94,9 @@
94	94	}}
95	95	>
96	96	<div className="fox-modal__body">
97		- {title && (
98		- <div className="fox-modal__tit">
99		- <h2 className="fox-modal__title">{title}</h2>
100		- </div>
101		- )}
	97	+ {/* 제목이 없어도 줄은 남긴다 — 그래야 닫기 버튼과 내용이 겹치지 않는다.
	98	+ 빈 제목을 심으면 이름 없는 heading이 되므로 `<h2>`는 있을 때만 낸다. */}
	99	+ <div className="fox-modal__tit">{title && <h2 className="fox-modal__title">{title}</h2>}</div>
102	100	<div className="fox-modal__contents">{children}</div>
103	101	</div>
104	102

...	...	@@ -96,12 +96,16 @@
96	96	}
97	97
98	98	// 닫기 버튼이 오른쪽 위에 앉으므로 제목만 그만큼 비켜 준다.
	99	+ //
	100	+ // 제목이 없어도 한 줄 높이를 남긴다 — 시안의 tit 프레임이 제목 없이도 28px(제목 글자
	101	+ // 크기 × 줄높이)을 차지한다. 이 자리를 없애면 닫기 버튼이 내용 위로 내려앉는다.
99	102	&__tit {
100	103	display: flex;
101	104	flex-direction: column;
102	105	align-items: flex-start;
103	106	gap: fox.gap(3);
104	107	inline-size: 100%;
	108	+ min-block-size: calc(#{fox.font-size(heading-md)} * 1.4);
105	109	padding-inline-end: fox.padding(8);
106	110	}
107	111

Delete comment