모달 팝업 내 동적 테이블 UI 정렬 문제 해결

📌 모달 팝업 내 동적 테이블 UI 정렬 문제 해결

1. 문제 상황 (Problem)

• 모달 팝업 내부에서 div 기반 테이블 UI 구현
• .div_th (헤더 영역) 높이가 서로 달라 UI가 깨짐
• .div_td 내용 길이에 따라 줄바꿈이 비정상적으로 동작

 

<div class="row multi">
    <div class="cell_div">
    	<div class="div_th">이름</div>
    	<div class="div_td"></div>
    </div>
    <div class="cell_div">
    	<div class="div_th">종류</div>
    	<div class="div_td"></div>
    </div>
</div>

---

2. 원인 분석 (Root Cause)

🔹 1) 높이 불일치

• 각 .div_th는 콘텐츠 길이에 따라 height가 자동 결정됨
• 동일 row 내에서도 높이가 다르게 렌더링됨

🔹 2) 높이 측정 실패 (0 문제)

• 팝업이 display: none 상태에서 실행
• offsetHeight = 0 발생

🔹 3) 줄바꿈 문제

• 긴 텍스트 또는 공백 없는 문자열 → overflow 발생
• 기본 CSS로는 강제 줄바꿈이 제한됨

---

3. 해결 방법 (Solution)

✅ 3-1. 팝업 렌더링 이후 높이 동기화

• Ajax → 데이터 삽입 → 팝업 open 이후 실행
• setTimeout으로 렌더링 타이밍 확보

 

var searchSuc = function(data){
    if(data.result == "SUCCESS"){
        detailDataInser(data.detail);
        fn_open_popup('detail_popup');

        setTimeout(function() {
            var rows = document.querySelectorAll('.row.multi');

            for (var i = 0; i < rows.length; i++) {
                var ths = rows[i].querySelectorAll('.cell_div .div_th');

                if (ths.length === 2) {
                    // 초기화
                    for (var j = 0; j < ths.length; j++) {
                        ths[j].style.height = 'auto';
                    }

                    // 높이 비교
                    var h1 = ths[0].offsetHeight;
                    var h2 = ths[1].offsetHeight;
                    var max = (h1 > h2) ? h1 : h2;

                    // 적용
                    for (var j = 0; j < ths.length; j++) {
                        ths[j].style.height = max + 'px';
                    }
                }
            }
        }, 50);
    }
};

 

---

✅ 3-2. 인접 요소끼리만 높이 비교

• 전체가 아니라 같은 row 내 2개 요소만 비교
• UI 자연스러움 유지

---

✅ 3-3. 텍스트 줄바꿈 처리

.div_td {
	white-space: normal;
	word-break: break-word;
}

---

4. 핵심 개념 정리 (Key Insights)

🔹 DOM 렌더링 타이밍

• display: none 상태 → offsetHeight = 0
• 해결: 렌더링 이후 실행 (setTimeout, requestAnimationFrame)

---

🔹 높이 계산 방식

속성특징

offsetHeight	padding + border 포함 (일반적 사용)
clientHeight	border 제외
getBoundingClientRect()	가장 정확 (소수 포함)

---

🔹 줄바꿈 전략

속성특징

break-word	일반적인 줄바꿈 (권장)
break-all	강제 줄바꿈 (가독성 낮음)
keep-all	한글 단어 유지 (줄바꿈 억제)

---

5. 개선 효과 (Result)

• ✅ UI 정렬 일관성 확보
• ✅ 다양한 데이터 길이 대응 가능
• ✅ 모달 기반 동적 렌더링 안정성 확보
• ✅ 사용자 가독성 개선

---

6. 한 줄 요약 (Resume Point)

모달 팝업 내 동적 데이터 렌더링 시 발생하는 UI 정렬 문제를 해결하기 위해, 렌더링 타이밍 제어와 DOM 높이 동기화 로직을 구현하여 일관된 레이아웃과 가독성을 확보함.