아이디 생성기에 복사버튼을 달아보자

https://koreanraichu.tistory.com/634

클립보드 버튼을 만들어보자

여기서 이어진다.

---

기존의 아이디 생성기는 생성된 아이디를 직접 드래그해서 컨트롤씨를 눌러야 복사가 됐다. 솔직히 붙여넣는건 그렇다치고 복사까지 그렇게 한다고요? 아 귀차낭. 그래서 복사버튼을 추가해봤음. 그래서 전체적으로 어떻게 바꼈느냐…

 

1. 전체적인 디자인 변경
2. 체크박스에 라벨 추가(이거 해두면 글자 눌러도 체크박스 선택됨)
3. 입력창 포커스 상태 CSS 추가
4. 생성되는 아이디에 복사버튼 추가(복사시 우상단에 토스트 메시지 생성됨)

이렇게 됐다.

---

일단 이전 글과 달리 이번에 추가할 버튼... 요소가 HTML에 없다. 왜냐하면 아이디 생성기는 아이디 만들 때 p태그를 동적으로 생성하고, 이번에 할 일은 p태그를 동적으로 생성할 때 버튼을 '같이' 생성해서 오른쪽에 나란히 붙여줘야 한다. 벌써부터 빡셈의 기운이 느껴진다고요? 예, 이것때문에 지피티 불렀습니다.

 

토스트 메시지

일단 쉬운것부터 보자. 

function showToast(message) {
    const toast = document.createElement("div");
    toast.innerText = message;
    toast.style.position = "fixed";
    toast.style.top = "30px";
    toast.style.right = "30px";
    toast.style.backgroundColor = "var(--main-color)";
    toast.style.color = "var(--sub-color)";
    toast.style.padding = "10px 20px";
    toast.style.borderRadius = "8px";
    toast.style.boxShadow = "0 4px 8px rgba(0,0,0,0.2)";
    toast.style.zIndex = 1000;
    toast.style.opacity = "0";
    toast.style.transition = "opacity 0.3s ease";
    toast.style.fontSize = "16pt";

    document.body.appendChild(toast);

    // 페이드 인
    setTimeout(() => {
        toast.style.opacity = "1";
    }, 10);

    // 2초 뒤 제거
    setTimeout(() => {
        toast.style.opacity = "0";
        // 페이드 아웃 후 DOM에서 제거
        setTimeout(() => {
            document.body.removeChild(toast);
        }, 300);
    }, 2000);
}

토스트 메시지는 뭐냐면 사용자가 어떤 상호작용을 할 때 뿅 하고 튀어나오는 작은 메시지이다. 뭐 예를 들어서 보내기 버튼을 눌렀다면 보냈습니다 하고 뿅 나왔다가 사라지는 메시지. 토스트 메시지는 생성된 아이디를 복사하기 위해 버튼을 눌렀을 때 복사되었습니다!가 뜬다. 그게 다다. 이건 지피티가 만들면서 동적으로 CSS 줘서 이렇게 된 거다. div로 만들고 따로 클래스를 안 줘서 저게 최선이더라...

 

그럼 이제 끝판왕 차례다.

 

복사버튼

function makeID() {
    let idLength = idLengthval.value;
    let idText = "";
    let word_list = makelist();
    for (let i = 0; i < idLength; i++) {
        idText += word_list.charAt(Math.floor(Math.random() * word_list.length));
    }
    const idValue = document.createElement("p");
    idValue.innerText = idText + " ";

    const clipBoard = document.createElement("button");
    clipBoard.innerHTML = `<i class="fa-solid fa-clipboard"></i> Copy`;
    idValue.appendChild(clipBoard);

    idValarea.appendChild(idValue);

    clipBoard.addEventListener("click", () => {
        navigator.clipboard.writeText(idText);
        showToast("ID 복사 완료!");
    });
}

벌써 뭐가 많다고요? 나도 그렇게 생각한다.

 

일단 위에도 썼듯이 아이디 생성기는 아이디를 만들때 p태그를 동적으로 생성하기때문에 HTML파일에는 아무것도 없다. 그래서 문제가 뭔데요?

function makeID() {
    let idLength = idLengthval.value;
    let idText = "";
    let word_list = makelist();
    let idValue = document.createElement("p");
    //자바스크립트는 아스키코드 못다루나? 
    for (let i = 0;i < idLength;i++) {
        idText += word_list.charAt(Math.floor(Math.random() * word_list.length));
        idValue.innerText = idText;
        idValarea.appendChild(idValue);
    };
}

이전버전 코드를 한번 봅시다. 그러면 좀 하시는 분들은 뭐가 문제인지 바로 알 수 있다. 아니 그 속도 이런거 말고. 

 

idValue가 생성된 아이디이고 얘를 그냥 다이렉트로 붙여버리기때문에 여기에 버튼을 만들어서 그냥 갖다 붙여버리면 에러가 나거나 버튼이 우리가 생각하는 그 버튼이 아닌 [HTML Object Button] 뭐 이런게 반긴다.

 

idValue.appendChild(clipBoard);

idValarea.appendChild(idValue);

다시 이 부분을 보면 두번 붙이는 걸 알 수 있는데, idValue는 만들어진 아이디고 clipBoard는 복사버튼, idValarea는 생성된 아이디가 나열되는 div이다. 그니까 얘를 p태그 버튼 이렇게 병렬로 붙이는 게 아니라 버튼을 만들어서 p태그에 붙이고 그 p태그를 나열시킨 것. 이게 정말 빡셌음.

 

나머지는 크게 1. 아무것도 선택 안 했을 때 알림 뜨게 하는 것, 2. 뭔진 모르겠지만 좀 더 빨라진 정도...

 

그래서 결과 

저게 빡세서 글치 CSS 따로 만져주고 글꼴이랑 색깔 바꿔준 거 말고 없다. 라벨이랑.