Spotify API 활용 개인 프로젝트 후기 #2 - QR 구현

document.addEventListener('DOMContentLoaded', function() {
    const trackData = JSON.parse(localStorage.getItem('trackData'));
    const currentUrl = window.location.href;
    const baseUrl = currentUrl.substring(0, currentUrl.lastIndexOf('/'));

    const answerId = Date.now().toString();
    const answerData = {
        id: answerId,
        tracks: trackData
    };

    localStorage.setItem(`answer_${answerId}`, JSON.stringify(answerData));

    const qrUrl = `${baseUrl}/qr.html?answer=${answerId}`;
    new QRCode(document.getElementById("qrcode"), {
        text: qrUrl,
        width: 256,
        height: 256
    });

    const urlParams = new URLSearchParams(window.location.search);
    const answerId2 = urlParams.get('answer');

    if (answerId2) {
        showAnswerSheet(answerId2);
    }
});

function showAnswerSheet(answerId) {
    const answerData = JSON.parse(localStorage.getItem(`answer_${answerId}`));
    if (!answerData) return;

    document.querySelector('.qr-container').style.display = 'none';
    const answerSheet = document.getElementById('answer-sheet');
    answerSheet.style.display = 'block';

    const trackList = document.getElementById('track-list');
    trackList.innerHTML = answerData.tracks.map(track => `
        <div class="track-item">
            <div class="artwork-container">
                <img src="${track.albumImage}" alt="${track.name}">
            </div>
            <div class="track-info">
                <div class="track-name">${track.name}</div>
                <div class="track-artist">${track.artist}</div>
            </div>
        </div>
    `).join('');
}




function goToQuiz() {
    window.location.href = 'quiz.html';
}

DOMContentLoaded EventListener:

document.addEventListener('DOMContentLoaded', function() {
    // ... 코드 내용
});

HTML 문서가 완전히 로드되었을 때 실행되는 코드로, DOMContentLoaded는 HTML이 파싱되어 DOM 트리가 완성되면 발생하는 이벤트이다. jQuery의 $(document).ready()와 비슷한 역할이다.

데이터 초기화 부분은

const trackData = JSON.parse(localStorage.getItem('trackData'));
const currentUrl = window.location.href;
const baseUrl = currentUrl.substring(0, currentUrl.lastIndexOf('/'));

localStorage에서 'trackData'를 가져와 JSON 형태로 파싱한다.
현재 페이지의 URL을 가져오고, 마지막 '/' 이전까지의 베이스 URL을 추출한다.

답안 데이터 생성 및 저장을 위해

const answerId = Date.now().toString();
const answerData = {
    id: answerId,
    tracks: trackData
};
localStorage.setItem(`answer_${answerId}`, JSON.stringify(answerData));

현재 시간을 기반으로 유니크한 answerId를 생성하고, 트랙 데이터와 함께 답안 데이터 객체를 만들어 localStorage에 저장한다.

QR 코드 생성 코드는 아래와 같다.

const qrUrl = `${baseUrl}/qr.html?answer=${answerId}`;
new QRCode(document.getElementById("qrcode"), {
    text: qrUrl,
    width: 256,
    height: 256
});

URL 파라미터 확인 및 답안지 표시를 위해

const urlParams = new URLSearchParams(window.location.search);
const answerId2 = urlParams.get('answer');

if (answerId2) {
    showAnswerSheet(answerId2);
}

URL에서 'answer' 파라미터를 확인한다. 파라미터가 있으면 해당 답안지를 보여주는 함수를 실행한다.

function showAnswerSheet(answerId) {
    const answerData = JSON.parse(localStorage.getItem(`answer_${answerId}`));
    if (!answerData) return;

    document.querySelector('.qr-container').style.display = 'none';
    const answerSheet = document.getElementById('answer-sheet');
    answerSheet.style.display = 'block';

    const trackList = document.getElementById('track-list');
    trackList.innerHTML = answerData.tracks.map((track, index) => `
        <div class="track-item">
            <div class="artwork-container">
                <img src="${track.albumImage}" alt="${track.name}">
            </div>
            <div class="track-info">
                <div class="track-name">${track.name}</div>
                <div class="track-artist">${track.artist}</div>
            </div>
        </div>
    `).join('');
}

localStorage에서 해당 답안 데이터를 가져오고, QR 코드 컨테이너를 숨기고 답안지를 표시한 후, 트랙 리스트를 HTML로 렌더링한다.