[Javascript]JS 객체를 이용해 동적인 선택창 만들기

보안 문제로 인해 모든 코드는 실제와 다릅니다

🧨 문제

옵션에 따른 선택지를 약 50개의 개별 팝업을 사용하여 UI를 제공하여 사용자 경험이 저하된다.

 

🔧 과제

1. 팝업 구조 개선
2. 옵션 조합에 따라 동적으로 정보가 업데이트 되는 기능 구현
3. 타이틀 클릭시 설정된 옵션값이 뜨는 기능 구현

---

🪄해결

1.  팝업 구조 통합

50개의 개별 팝업을 옵션으로 분류하여 2개의 공통 팝업으로 통합했다.

 

2.데이터 매핑 최적화

정보를 키-값 기반의 매핑 구조로 설계하여 옵션 조합을 효율적으로 처리하였다

function getData(param){
	let selectOption = {};
    let dataMapping ={};
    
	selectOption = {
    	opt01: $(input[name="opt01"]:checked).data('name')
        opt02: $(input[name="opt02"]:checked).data('name')
        opt03: $(input[name="opt03"]:checked).data('name')
        opt04: $(input[name="opt04"]:checked).data('name')
        opt05: $(input[name="opt05"]:checked).data('name')
    }
    dataMapping = {
    	'opt01|opt02|opt03|opt04|opt05':{
        	title: '옵션1'
        	imagePath:'/image/page/data1.jpg',
            description: '설명글입니다'
            price:2000
        },
        'opt01|undfined|opt03|opt04|otp05':{
        	title: '옵션2'
        	imagePath:'/image/page/data2.jpg',
            description: '설명글입니다'
            price:3000
        }
    }
    
    return{selectOption, dataMapping}
}

 

3. 동적 업데이트 

옵션의 data-name을 통해 일치하는 키의 여부에 따라 정보를 동적으로 불러오도록 하였다.

선택된 키의 옵션이 없을 경우에 대한 값을 만들어 사용자의 편의성을 높였다.

function updateData(param, selectKey){
	const {selectOption, dataMapping} = getData(param)
    
    let selectKey = {
    	${selectOption.opt01}|${selectOption.opt02}|...
    }
    
    let selectMapping = dataMapping[selectKey] || {
    	title: '옵션이 없습니다'
        imagePath:'/image/page/noData.jpg',
        description: ''
        price:''
    }
}

---

🎉 결과

• 팝업 간 전환속도가 5s에서 50ms 이하로 단축되었다
• 빠르고 직관적인 UI제공으로 사용자 만족도가 증가하였다
• 팝업 개수를 줄임으로써 코드 중복을 제거할 수 있었다