제 2차 씨본 컬러 시뮬레이터 보수작업

내가 이걸 또 하게 되다니… 싶었는데 쓰다가 또 불편한 게 나와서 에미나이 도움 받아서 기능을 추가했다.

---

이거 보여요? 기존에는 없었던 저 HEX 코드들. 이게 중간색을 쓰고 싶은데 #rrggbb 코드가 없으니까 내가 개발자도구 열고 들어가서 변환을 해야되는데 이게 증말 번거롭습니다… 그리고 나야 개발자도구의 존재를 안다지만 모든 사람들이 그렇진 않잖아요?

 

for (let i = 0; i < n; i++) {
    const step = i / (n - 1);

    const r = Math.round(startRgb[0] + (endRgb[0] - startRgb[0]) * step);
    const g = Math.round(startRgb[1] + (endRgb[1] - startRgb[1]) * step);
    const b = Math.round(startRgb[2] + (endRgb[2] - startRgb[2]) * step);

    const toHex = (c) => c.toString(16).padStart(2, '0');
    const hexCode = `#${toHex(r)}${toHex(g)}${toHex(b)}`.toUpperCase();

    const chip = document.createElement('div');
    chip.classList.add('palette_chip'); 
    chip.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
    chip.style.flex = "1";

    // 스타일 및 텍스트 설정
    chip.style.display = "flex";
    chip.style.alignItems = "center";
    chip.style.justifyContent = "center";
    chip.style.cursor = "pointer"; // 클릭 가능하다는 표시
    chip.style.color = (r * 0.299 + g * 0.587 + b * 0.114) > 186 ? '#000' : '#fff';
    chip.innerText = hexCode;

    chip.onclick = () => {
        navigator.clipboard.writeText(hexCode).then(() => {
            // alert 대신 토스트 호출!
            showToast(`${hexCode} copied!`);
        }).catch(err => {
            console.error('복사 실패:', err);
        });
    };

    palette_div.appendChild(chip);
}

저정도 되면 어디까지가 한 블록인지 헷갈려요... const toHex = (c) => c.toString(16).padStart(2, '0');랑 const hexCode = `#${toHex(r)}${toHex(g)}${toHex(b)}`.toUpperCase(); 보여요? 저걸로 10개 색상을 HEX코드로 변환한 다음에 이너텍스트 박을거고, 그 네모를 누르면 HEX 코드가 복사되면서 복사됐음! 도 할 거다. 처음에는 alert였는데 alert는 확인버튼을 눌러야되거든요? 그래서 토스트 메시지로 바꿨음. 

 

function showToast(message) {
    let toast = document.getElementById('toast');
    if (!toast) {
        toast = document.createElement('div');
        toast.id = 'toast';
        document.body.appendChild(toast);
    }

    toast.innerText = message;
    toast.classList.add('show');

    // 2초 뒤에 사라지게 설정
    setTimeout(() => {
        toast.classList.remove('show');
    }, 2000);
}

그래서 토스트 창(그 있어요 나왔다가 들어가는 창) 생성 함수가 추가됐고

 

/* 토스트 메시지 기본 스타일 */
#toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    opacity: 0;
    transition: opacity 0.3s, bottom 0.3s;
    z-index: 9999;
    pointer-events: none; /* 클릭 방해 금지 */
}

/* 토스트가 보일 때의 상태 */
#toast.show {
    opacity: 1;
    bottom: 50px;
}

관련 CSS도 추가됐습니다. HTML은 바뀐거 없음.