MyTime - 크롬 익스텐션 만들기 - 5 (설정 모달)

이 전에는 모달 프레임(컴포넌트라고 표현하는게 맞을까?)을 만들었으므로 이를 가지고 설정 모달을 만들어 보자.

---

init

형태는 이미 갖추어져 있다. 그러므로 헤더 텍스트, 들어가야할 버튼, 모달의 크기를 지정해준다.

    const initSettingsModal = () => {
        const [settingsModal, settingsModalBody, settingsModalButtons] 
        	= createModal('설정', ['확인', '취소'], '400px', '300px');

     	...
        
        return settingsModal;
    }

모달창의 주 내용인 body를 알맞게 작성한다. 색상 박스와 그에 대한 설명, 그리고 기본 값을 제외한 나머지에 삭제 버튼을 만들어 준다. 마지막에는 추가하기버튼을 만들어 준다.

모달창을 끄기 위한 버튼의 이벤트 리스너를 설정해준다. 변경한 설정을 저장하는 로직은 추후에 넣도록 한다.

const initSettingsModal = () => {
    ...
    
    settingsModalButtons[0].addEventListener('click', () => {settingsModal.classList.add('hide');});
    settingsModalButtons[1].addEventListener('click', () => {settingsModal.classList.add('hide');}); 
    
    return settingsModal;
}

---

결과

---

고민

• constants.js나 utils.js 뿐 아니라 기본 창, 그리고 나머지 모달들을 모두 다른 js파일로 만들려고 생각중이다. 그러다 보니 모달들 사이에 데이터 흐름이 자연스럽지 않은 것 같고, 이벤트 리스너를 등록해야 하는데 선언되지 않은 문제가 있다. (예를 들어 설정 버튼을 눌러서 설정 모달을 열어야 하는데, 설정 모달이 아직 생성되지 않은 상태일 때). 추후에 데이터 관리나, DOM관리를 어떻게 할 지, 어떻게 만들면 좋을지 더 생각해봐야겠다.
• css 및 DOM관리를 위해서 변수명을 정하는데 이름이 너무 길어지고 있는 것 같다. (예를 들면 settings-modal-body-text-container). 더 알맞은? 명명법을 찾아봐야겠다.