[메리크리] 로그인 화면/메인화면 UI 개발 (audio, display, setInterval, location.href)

📍1. 계획 및 구상

우선 로그인화면과 메인화면의 UI 계획은 위와 같다.

 

로그인 화면은 닉네임 입력 후 입장 버튼을 누르면 메인화면으로 이동하면서 audio가 재생된다.

메인화면은 크리스마스까지 남은 시간이 setInterval으로 실시간 업데이트되고, 세 가지 버튼을 통해 각 기능 페이지로 이동할 수 있다.

 

원래 구상은 로그인페이지를 별도로 나누지 않았다. 그냥 메인화면에 bgm이 자동재생되고, 닉네임을 입력받고, 기능 화면으로 이동할 수 있도록 하는 거였다.

---

📍2. 구현

📖 audio, display

하지만 audio 클래스는 몇몇 브라우저에서 자동 재생이 허용되지 않는다는 사실을 알았다.

그래서 로그인 페이지를 별도로 생성하여 로그인버튼을 통해 오디오가 재생되도록 만들었다 !!

 

페이지가 새로고침되면 노래가 끊기므로 로그인화면과 메인화면은 같은 페이지에서 display를 사용하여 숨기고 보이게 하였다.

따라서, page1, page2라는 두 div를 나누고, 로그인 화면일 때는 page2를 숨기고, 메인화면일 때는 page1을 숨겼다.

 

display: 'none' <= 디스플레이를 숨김

display: 'block' <= 디스플레이를 보이게 함

 

• [page1, page2 html]

	<!-- page1 - entrance -->
    <div id="page1">
        <div class="entrance">
            <input type="text" id="name" placeholder="이름">
            <button id="entrancebtn" onclick="startPage2()">입장</button>
        </div>
    </div>

    <!-- page2 - Merry Cristmas -->
    <div id="page2">
        <div class="tt">
            <h1 id="title">Merry Christmas</h1>
        </div>
        <p id="timer">&nbsp; </p>
        <div id="btn_group">
            <button id="calBtn" onclick="cal_click()" class="btn">약속잡기</button>
            <button id="letterBtn" onclick="letter_click()" class="btn">편지쓰기</button>
            <button id="songBtn" onclick="music_click()" class="btn">노래듣기</button>
        </div>
    </div>

 

• [로그인 화면 js]

// startPage1 - 페이지가 로드되면 page1만 보이게 하기 //
        document.addEventListener('DOMContentLoaded', function () {
            document.getElementById('page2').style.display = 'none';
        });

 

 

• [메인화면 js] 

// startPage2 //
        function startPage2() {

            // audio 재생 //
            var audio = new Audio('resources/candy.mp3');
            audio.currentTime = 7;
            audio.loop = true; // 재생반복
            audio.play();

            // 닉네임 저장
            name = document.getElementById('name').value;

            // 배경화면 바꾸기, page1 숨기기, page2 보이기
            document.body.style.backgroundImage = "url('resources/background.GIF')";
            document.getElementById('page1').style.display = 'none';
            document.getElementById('page2').style.display = 'block';
        }

 

 

 

📖 setInterval

메인화면에서는 RemainTime()이라는 함수를 setInerval을 사용하여 1초마다 실행되도록 설정하였다.

결과적으론 매초 크리스마스까지 남은 시간이 업데이트된다!

// 크리스마스까지 남은 시간 계산하기 //
        function RemainTime() {
            const nowDay = new Date(); // 지금 시간
            const targetDay = new Date('2023-12-25T00:00:00').getTime(); // 타겟 시간 (크리스마스)

            // 간격 계산
            const remainDays = targetDay - nowDay; 
            const days = Math.floor(remainDays / (1000 * 60 * 60 * 24));
            const hours = Math.floor((remainDays % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            const minutes = Math.floor((remainDays % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((remainDays % (1000 * 60)) / 1000);

            // page2의 timer에 출력
            document.getElementById('timer').textContent = `크리스마스까지 ${days}일 ${hours}시간 ${minutes}분 ${seconds}초 남았습니다. `;
        }
        
        // 매초 실행 //
        setInterval(() => { RemainTime(); }, 1000);

 

 

📖 location.href

그리고 각 버튼을 누르면 각 페이지로 이동한다. 이때, index 값으로 사용자의 닉네임을 넘겨준다.

		function music_click() {
            window.location.href = "song.html?index=" + name;
        }
        function cal_click() {
            window.location.href = "cal.html?index=" + name;
        } function letter_click() {
            window.location.href = "letter.html?index=" + name;
        }

---

📍3. 결과