정말 오랜만에 텍스트 에디터 수정

아니 눈누에 아주그냥 폰트들이 아주 와랄라랄랄라라라 넘쳐나서 에디터를 수정해야되는데… 기존 코드 어떻습니까…

 

//글꼴 목록은 여기 다 있습니다.
fontSelection.addEventListener('click',()=>{
    if (fontSelection.selectedIndex == 0) {
        fontSelection.style.fontFamily = 'AyoungSYearning2019Handwriting';
        textTitle.style.fontFamily = 'AyoungSYearning2019Handwriting';
        textArea.style.fontFamily = 'AyoungSYearning2019Handwriting';
    } else if (fontSelection.selectedIndex == 1) {
        fontSelection.style.fontFamily = 'Pretendard-Regular';
        textTitle.style.fontFamily = 'Pretendard-Regular';
        textArea.style.fontFamily = 'Pretendard-Regular';
    } else if (fontSelection.selectedIndex == 2) {
        fontSelection.style.fontFamily = 'RIDIBatang';
        textTitle.style.fontFamily = 'RIDIBatang';
        textArea.style.fontFamily = 'RIDIBatang';
    } else if (fontSelection.selectedIndex == 3) {
        fontSelection.style.fontFamily = 'Xcu';
        textTitle.style.fontFamily = 'Xcu';
        textArea.style.fontFamily = 'Xcu';
    } else if (fontSelection.selectedIndex == 4) {
        fontSelection.style.fontFamily = 'MabinogiClassicR';
        textTitle.style.fontFamily = 'MabinogiClassicR';
        textArea.style.fontFamily = 'MabinogiClassicR';
    } else if (fontSelection.selectedIndex == 5) {
        fontSelection.style.fontFamily = 'GeuriunXGukhanbakGeulbangGuri';
        textTitle.style.fontFamily = 'GeuriunXGukhanbakGeulbangGuri';
        textArea.style.fontFamily = 'GeuriunXGukhanbakGeulbangGuri';
    } else if (fontSelection.selectedIndex == 6) {
        fontSelection.style.fontFamily = 'GeuriunXGukhanbakNatseonSongeul';
        textTitle.style.fontFamily = 'GeuriunXGukhanbakNatseonSongeul';
        textArea.style.fontFamily = 'GeuriunXGukhanbakNatseonSongeul';
    } else if (fontSelection.selectedIndex == 7) {
        fontSelection.style.fontFamily = 'NostalgicNaramOfThought';
        textTitle.style.fontFamily = 'NostalgicNaramOfThought';
        textArea.style.fontFamily = 'NostalgicNaramOfThought';
    } else if (fontSelection.selectedIndex == 8) {
        fontSelection.style.fontFamily = 'GeuriunOmiriHandwriting';
        textTitle.style.fontFamily = 'GeuriunOmiriHandwriting';
        textArea.style.fontFamily = 'GeuriunOmiriHandwriting';
    } else if (fontSelection.selectedIndex == 9) {
        fontSelection.style.fontFamily = 'NostalgicGellyRoll';
        textTitle.style.fontFamily = 'NostalgicGellyRoll';
        textArea.style.fontFamily = 'NostalgicGellyRoll';
    } else if (fontSelection.selectedIndex == 10) {
        fontSelection.style.fontFamily = 'Rimgul';
        textTitle.style.fontFamily = 'Rimgul';
        textArea.style.fontFamily = 'Rimgul';
    } else if (fontSelection.selectedIndex == 11) {
        fontSelection.style.fontFamily = 'Umdot';
        textTitle.style.fontFamily = 'Umdot';
        textArea.style.fontFamily = 'Umdot';
    } else if (fontSelection.selectedIndex == 12) {
        fontSelection.style.fontFamily = 'Seogung';
        textTitle.style.fontFamily = 'Seogung';
        textArea.style.fontFamily = 'Seogung';
    } else if (fontSelection.selectedIndex == 13) {
        fontSelection.style.fontFamily = 'Tangba';
        textTitle.style.fontFamily = 'Tangba';
        textArea.style.fontFamily = 'Tangba';
    } else if (fontSelection.selectedIndex == 14) {
        fontSelection.style.fontFamily = 'PyeongchangWologae';
        textTitle.style.fontFamily = 'PyeongchangWologae';
        textArea.style.fontFamily = 'PyeongchangWologae';
    }
});

이 코드의 장점은 일단 구현은 했다. 근데 나중에 글꼴 첨삭하거나 순서 바꿀때 사람이 한떨기 저승갓숭이 됩니다. 왜냐고? 저거 번호를 일일이 바꿔야돼... 맨 밑에께 빠지는건 양반입니다. 가운데꺼 빠지면 번호 다땡겨야되고 가운데에 뭐가 추가되면 또 번호 다 밀고 해야되는데 이거 하다보면 사람이 진짜 저승갓숭에 빙의해요. 화병걸려. 그래서 에미나이한테 물어봤더니 어떤 방법을 줬느냐...

 

fontSelection.addEventListener('change', (e) => {
    const selectedFont = e.target.value; // 선택된 option의 value 값을 가져옵니다.

    fontSelection.style.fontFamily = selectedFont;
    textTitle.style.fontFamily = selectedFont;
    textArea.style.fontFamily = selectedFont;
});

JS단에서는 옵션태그에 있는 value만 가져와서 CSS 바꾸게 하고 옵션태그 안에 import에 있는 font-family명을 고대로 복붙하면 HTML이랑 CSS만 수정하면 된다. 참 쉽죠?