[글쓴이:] 김 형준

작성일자

Javascript, 전화번호 형식으로 변경하는 함수

사용자가 원하는 형식으로 전화를 입력했을때 정해진 형식(xx-xxx-xxxx)으로 변경해주는 함수입니다.

const formatPhoneNumber = (input) => {
    const cleanInput = input.replaceAll(/[^0-9]/g, "");
    let result = "";
    const length = cleanInput.length;

    if(length === 8) {
        result = cleanInput.replace(/(\d{4})(\d{4})/, '$1-$2');
    } else if(cleanInput.startsWith("02") && (length === 9 || length === 10)) {
        result = cleanInput.replace(/(\d{2})(\d{3,4})(\d{4})/, '$1-$2-$3');
    } else if(!cleanInput.startsWith("02") && (length === 10 || length === 11)) {
        result = cleanInput.replace(/(\d{3})(\d{3,4})(\d{4})/, '$1-$2-$3');
    } else {
        result = undefined;
    }

    console.log(`${input} -> ${result}`);

    return result;
}

테스트를 위해 다음 코드를 실행해 보면..

formatPhoneNumber("08032332333");
formatPhoneNumber("021231234");
formatPhoneNumber("(02)12351234");
formatPhoneNumber("63633221");
formatPhoneNumber("010-9543-3224");
formatPhoneNumber("0625252312");
formatPhoneNumber("03112341234");

결과는 다음과 같습니다.

021231234 -> 02-123-1234
08032332333 -> 080-3233-2333
021231234 -> 02-123-1234
(02)12351234 -> 02-1235-1234
63633221 -> 6363-3221
010-9543-3224 -> 010-9543-3224
0625252312 -> 062-525-2312
03112341234 -> 031-1234-1234

인지하지 못한 전화번호 형식이 있을 수 있으니 개선해서 사용하시면 됩니다.

작성일자

gwc-resizable-panel + gwc-vscrollview 를 이용해 사이드 패널 구성

크기 조절이 가능한 gwc-resizable-panel 태그를 이용한 사이드 패널을 구성하면 이 패널 안에 내용이 많아 수직으로 스크롤해야 할 경우 gwc-vscrollview 태그를 자식으로 두는 경우에 대한 코드를 정리합니다.

위의 화면 중 노란색 영역이 gwc-resizable-panel이고 초록 영역이 자식인 gwc-vscrollview 입니다.

사이드 패널에 대한 JS 코드는 다음과 같습니다.

class SearchResultUI {
    constructor() {
        const domLayout = document.createElement("div");
        domLayout.classList.add("search-result-ui");

        domLayout.innerHTML = `
            
                
 
                    
0

                    
0

                    
0

                    
                    
                

                
                    
                        

                    
                
            
        `;

        document.body.appendChild(domLayout);

        GeoServiceWebComponentManager.instance.update();
    }
}

7번의 gwc-resizable-panel의 resizable-left와 min-width는 각각 패널의 왼쪽 모서리를 이용해 크기를 조절할 수 있고, 패널의 가로 크기는 최소 200px를 유지해야 한다는 것입니다. min-width 값의 단위는 px이며 값을 지정할 때는 단위를 지정하지 않습니다./p>

해당되는 CSS는 다음과 같습니다.


.search-result-ui > gwc-resizable-panel {
    box-shadow:  0 0 2px rgb(0 0 0 / 50%), 0 0 10px rgb(0 0 0 / 50%);;
    left: calc(100% - 20em); /* width 값만큼 빼줘야 함 */
    right: 0;
    top: 3em;
    width: 20em;
    height: calc(100vh - 3em); /* 패널 위에 공간이 3em 임 */
    _opacity: 0.8;
}

.search-result-ui > gwc-resizable-panel > .search-result-header {
    height: 2.6em;
    ...
}

...

.search-result-ui > gwc-resizable-panel gwc-vscrollview {
    width: 100%;
    background: rgba(20,20,20,1);
    height: calc(100% - 2.6em); /* 스크롤 영역 위의 공간이 2.6em 임 */
}

.search-result-ui > gwc-resizable-panel .search-result-content {
    padding: 0.4em;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.2em;
}

아래의 영상은 위의 UI가 반영된 실제 구동 영상입니다. 패널에 대한 크기 조절 등의 사용자 인터렉션을 파악할 수 있습니다.