JSFiddle - React, Tailwind, and code Playground

by sosone

HTML

<body style="min-height:100px;">
    <select id="selRatio" class="input-select-short">
      <option value="">-- 비율 --</option>
    </select>
    <select id="selResolution" class="input-select-short">
      <option value="">-- 해상도 --</option>
    </select>
    <select id="selUsage" class="input-select-short">
        <option value="">-- 사용처 --</option>
    </select>
</body>

JavaScript

const AspectRatioInfo = function (){
    const originalRatioData = [
        {
            key: "1", 		// Key값으로 사용, select > option 의 value로 사용
            width: 1, 		// 비율 계산용 
            height: 1, 		// 비율 계산용
            text: "1:1",	// select box 표시용 
            range: [1],		// 직접 비율 계산시 해당 범위로 찾을 수 있도록 배열로
            usages: ["Instagram"], // 사용처 목록(배열)
            resolutions: ["1080x1080"] // 해상도 목록(배열)
        },
        {
            key: "1.33",
            width: 4,
            height: 3,
            text: "4:3 (1.33:1)",
            range: [1.33],
            usages: ["iPad 5/6/7/8/9", "iPad Mini 2/3/4/5", "iPad Air 1/2/3", "iPad Pro 12.9"],
            resolutions: ["800x600","1024x768", "1600x1200", "2048x1536"]
        },
        {
            key: "1.77",
            width: 16,
            height: 9,
            text: "16:9 (1.77:1)",
            range: [1.77, 1.78],
            usages: ["iPhone 5/6/7/8", "iMac", "Galaxy Note 5/9", "YouTube"],
            resolutions: ["640x360", "1280x720", "1600x900", "1920x1080", "2560x1440", "3200x1800", "3840x2160", "5120x2880", "7680x4320"]
        },
        // ... 생략 ...
    ];
    
    
    // -- 비율 -- 선택박스용 데이터 정렬 
    const getListOfWidthHeight = function(){

        const listOfWidthHeight = originalRatioData.sort(function(a, b){
            return a.width - b.width;
        }).map(function(ratio){
            return {
                key: ratio.key,
                width: ratio.width,
                height: ratio.height,
                text: ratio.text,
                ratio: ratio.range[0]
            };
        });

        return listOfWidthHeight;
    }

    // -- 해상도 -- 선택박스용 데이터 필터링 및 정렬
    const getListOfResolution = function(){
        const resolutionArray = [];

        // originalRatioData > resolutions 배열 이용하기
        originalRatioData.forEach(function(ratio){
            ratio.resolutions.forEach(function(resolution){
                resolutionArray.push({
                    key:...