Day 5 : 세계지도 인터랙션, 국가별 호버 이벤트와 법규(?)

2023.05.17 - [Project ISL/프론트엔드] - Day 4 : 노력하는 자에겐 상이...?

Day 4 : 노력하는 자에겐 상이...?

Day 4 글을 읽고 와주시면 다음 글의 내용이 훨씬 잘 이해가 갈 거예요!

---

ISL 관리 페이지

어제 각 나라별로 마우스 호버시 색깔이 바뀌도록 하는 이벤트를 설정하고 마무리했고,

오늘은 이제 법규를 날리기 위한 작업 내용을 보여드리도록 하겠습니다 :)

 

 

어제 완성된 코드부터 보시죠!

window.onload = function () {
    // 모든 path 태그를 선택
    const countries = document.querySelectorAll("#worldMap path")

    // 모든 path에 대해 클릭 이벤트를 추가
    countries.forEach((country) => {
        // 색상 변경 이벤트를 추가
        country.addEventListener("mouseover", function () {
            this.style.fill = "#3C3B6E"
        })
        country.addEventListener("mouseout", function () {
            this.style.fill = "#88a4bc"
        })
    })
}

코드에 대한 간단한 설명을 하자면

모든 html, css 요소들이 load 된 뒤에 로직이 실행이 되도록 했습니다.

 

html 문서에서 id=worldMap 인 요소안 모든 path 태그들을

const countries 안에 List로 담고 countries 안에 있는 모든 path 태그에 대해

forEach 함수를 써서 이벤트 리스너를 달았습니다.

 

법규 날리기 코드 추가하기

window.onload = function () {
    // 모든 path 태그를 선택
    const countries = document.querySelectorAll("#worldMap path")

    // 모든 path에 대해 클릭 이벤트를 추가
    countries.forEach((country) => {
        // 말풍선을 나오게 하고, 2초 후에 말풍선을 지우는 이벤트를 추가
        // 여기

        // 색상 변경 이벤트를 추가
        country.addEventListener("mouseover", function () {
            this.style.fill = "#3C3B6E"
        })
        country.addEventListener("mouseout", function () {
            this.style.fill = "#88a4bc"
        })
    })
}

forEach 블록 안에 추가된 주석 보이시나요?

저 주석의 위치에 설명에 적힌 기능의 함수가 들어가야 합니다.

 

그렇다면 저 위치에 들어갈 함수의 작성을 해야겠죠?

들어갈 함수는 2가지입니다.

1. 법규를 품은 말풍선 나오기
2. 법규를 품은 말풍선 없애기

그렇다면 위 2개의 기능을 하는 함수를 작성하면 다음과 같습니다.

법규 말풍선 생성/삭제 함수

// 말풍선 생성
function createTooltip(e, text) {
    const tooltip = document.createElement("div")
    tooltip.style.display = "block"
    tooltip.style.position = "absolute"
    tooltip.style.backgroundColor = "#fff"
    tooltip.style.border = "1px solid #ddd"
    tooltip.style.padding = "10px"
    tooltip.style.borderRadius = "10px"
    tooltip.style.width = "auto" // width를 auto로 설정
    tooltip.style.maxWidth = "200px" // 최대 너비를 설정
    tooltip.style.opacity = 0 // 초기 투명도를 0으로 설정
    tooltip.style.transform = "scale(0)" // 초기 크기를 0으로 설정
    tooltip.style.transition = "all 0.3s ease-out" // 트랜지션 효과 추가
    tooltip.innerHTML = text
    document.body.appendChild(tooltip)
    // 툴팁의 크기를 계산하여 위치를 조정
    tooltip.style.left = `${e.pageX - tooltip.offsetWidth / 2}px`
    tooltip.style.top = `${e.pageY - tooltip.offsetHeight}px`
    // 투명도와 크기를 변경하여 툴팁을 부드럽게 나타나게 함
    setTimeout(() => {
        tooltip.style.opacity = 1
        tooltip.style.transform = "scale(1)"
    }, 0)
    return tooltip
}

// 말풍선 제거
function removeTooltip(tooltip, delay) {
    setTimeout(() => {
        // 투명도와 크기를 변경하여 툴팁을 부드럽게 사라지게 함
        tooltip.style.opacity = 0
        tooltip.style.transform = "scale(0)"
        // 툴팁을 완전히 제거하기 전에 애니메이션을 완료할 시간을 줌
        setTimeout(() => {
            tooltip.remove()
        }, 300)
    }, delay)
}

함수 createToolTip과 removeToolTip을 생성했습니다!

createToolTip 함수가 긴 이유는 작은 말풍선 하나 만드는 데도 

많은 css 속성 설정이 많기 때문이죠...!

 

너무 길어서 함수를 좀 정규화할까도 생각했지만,

모든 것들이 말풍선 생성이라는 동일한 목적을 가진 코드들이라

그냥 내버려두기로 결정했습니다!

 

다시 원점으로 

함수를 만들었다면, 이제는 만든 함수들을 다시 넣어야겠죠!

만든 함수를 넣어 완성한 코드는 다음과 같습니다!

window.onload = function () {
    // 모든 path 태그를 선택
    const countries = document.querySelectorAll("#worldMap path")

    // 모든 path에 대해 클릭 이벤트를 추가
    countries.forEach((country) => {
        country.addEventListener("click", (e) => {
            const tooltip = createTooltip(e, "🖕")
            removeTooltip(tooltip, 2000)
        })

        // 색상 변경 이벤트를 추가
        country.addEventListener("mouseover", function () {
            this.style.fill = "#3C3B6E"
        })
        country.addEventListener("mouseout", function () {
            this.style.fill = "#88a4bc"
        })
    })
}

위처럼 코드를 넣고 동작을 테스트 해보면 다음과 같이 나오게 됩니다!

영롱하다...!

TIL

오늘은 이렇게 기존의 코드에다가 기능을 1개씩 추가하는 것들을 해봤습니다!

예전에 JavaScript 를 배웠을 때는 무작정 함수 안에 여러 기능들을 다 넣는 식으로

코드를 짜다 나중에 참 후회가 많았었습니다.

 

하지만 후에 자바를 배우면서 모듈화라는 개념에 대해 익숙해졌다고는 생각했지만

실제로 적용해보지 않아 내가 잘 배웠나라는 생각을 했는 데

오늘 코드를 짜면서 계속 모듈화를 해야 하나 말아야 하나에 대한 고민을 하는 제 자신을 보며

모듈화라는 개념을 잘 사용하는 개발자에 가까워졌다는 것을 배웠습니다 :)

 

https://github.com/xpmxf4/ISL

GitHub - xpmxf4/ISL

위는 거의 GitHub 저장소입니다!

언제나 피드백과 리뷰는 환영입니다!