gwcCreateModalDialog의 resizing 코드 예 (JS 코드 최소화)

gwcCreateModalDialog에서 크기 조절 시 UI가 적절하게 배치되도록 하기 위한 코드를 정리해 봅니다.

먼저 만들고자 하는 UI는 다음 영상과 같습니다.

먼저 JS 코드는 다음과 같습니다.

class GeocodingTool {
    constructor() {
        const dlg = gwcCreateModalDialog("지오코딩");

        dlg.content = `
            

                

                    

                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                    
                    
                    

                        
                        
                        
                        
                        
                    
                
            
        `;

        dlg.width = "70em"; // 크기 조절 기능을 위해서는 반드시 크기를 지정해줘야 함
        dlg.height = "50em"; // 크기 조절 기능을 위해서는 반드시 크기를 지정해줘야 함

        dlg.resizablePanel.minWidth = 550;
        dlg.resizablePanel.minHeight = 300;

        dlg.resizablePanel.resizableRight = true;
        dlg.resizablePanel.resizableBottom = true;
        
        dlg.show();
        GeoServiceWebComponentManager.instance.update();
    }
}

CSS 코드는 다음과 같습니다.

.vertical-linear-layout {
    display: flex;
    flex-direction: column;
    gap: 0.3em;
}

.horizontal-linear-layout {
    display: flex;
    gap: 0.3em;
    flex-direction: row;
    _padding: 0 1em;
}

.v-center {
    align-items: center;
}

.h-center {
    justify-content: center;
}

.geocoding-tool-dialog {
    padding: 0.5em;
    height: 100%;
}

.geocoding-tool-dialog .content {
    height: 100%;
}

.geocoding-tool-dialog gwc-grid {
    flex: 1;
}

.geocoding-tool-dialog .address-column {
    width: 250px;
}

.geocoding-tool-dialog .run {
    margin-left: auto;
}