Goal : 1) click door 2) image appear 3) (after delay) Page Changes

html

<div class="world">
    <!-- 사실상 내용들은 house에 있는 데 왜 stage를 넣어준 것일까 ?
    house안에는 벽들이 3d로 배치되고
    캐릭터는 house와 별개로, 존재해야 한다
    즉, 분리된 위치에 있어야 한다
    그러면서 동시에 house와 캐릭터를 같이 감싸고 있어야 한다 
    그래서 stage 로 houser와 캐릭터를 감싸기 위해 stage가 존재하는 것이다  -->
    <div class="stage">
        <div class="house">
            <section class="wall wall-left" style = "display: flex;">
                <img style = "width: 100%" src = "./images/Christmas2.gif" alt="">
                <img style = "width: 100%" src = "./images/Christmas3.gif" alt="">
                <img style = "width: 100%" src = "./images/Christmas4.gif" alt="">
                <img style = "width: 100%" src = "./images/Christmas2.gif" alt="">
                <img style = "width: 100%" src = "./images/Christmas3.gif" alt="">
                <img style = "width: 100%" src = "./images/Christmas4.gif" alt="">
                <img style = "width: 100%" src = "./images/Christmas2.gif" alt="">
                <img style = "width: 100%" src = "./images/Christmas3.gif" alt="">
                <img style = "width: 100%" src = "./images/Christmas4.gif" alt="">
            </section>
            <section class="wall wall-right"></section>
            <section class="wall wall-front wall-front-a">
                <div class="wall-content">
                    <h2 class="wall-title">한동아</h2>
                    <button id = "SeptemberBtn">September</button>
                    <div class="door">
                        <div class="door-back">
                            <div class="ilbuni"></div>
                        </div>
                        <div class="door-body"></div>
                    </div>
                    <!-- <h2 class="wall-title">안녕하세요</h2> -->
                </div>
            </section>
            <section class="wall wall-front wall-front-b">
                <div class="wall-content">
                    <h2 class="wall-title">알고리즘 스터디</h2>
                    <button id = "OctoberBtn">October</button>
                    <!-- <h2 class="wall-title">Hello</h2> -->
                </div>
            </section>
            <section class="wall wall-front wall-front-c">
                <div class="wall-content">
                    <h2 class="wall-title">어떻게 </h2>
                    <button id = "NovemberBtn">November</button>
                    <!-- <h2 class="wall-title">Hola</h2> -->
                </div>
            </section>
            <section class="wall wall-front wall-front-d">
                <div class="wall-content">
                    <h2 class="wall-title">들어가</h2>
                    <button id = "DecemberBtn">December</button>
                    <!-- <h2 class="wall-title">こんにちは</h2> -->
                </div>
            </section>

        </div>
        <!--// house -->

        <!-- 캐릭터 놓이는 곳 -->

    </div>
    <!--// stage -->
</div>

Solution : JS

(function(){


    // 문 
    let currentItem ;

    function activate(Elem){
        Elem.classList.add('door-opened')
        currentItem = Elem
    }

    function inactivate(Elem){
        Elem.classList.remove('door-opened')
    }
    
    function MonthPageAppear(month){
        // August html 만들어서 베포한다
        const fragment = document.createDocumentFragment()
        let Elem = document.createElement('div')
        Elem.classList.add(month)
        Elem.innerHTML = `
        <span>${month}</span>

        `
        fragment.appendChild(Elem)
        document.body.appendChild(fragment)

        // world d를 숨긴다
        document.querySelector('.world').style.cssText = `
            visibility : hidden;
            opacity : 0;
            transition: visibility 0s 2s, opacity 2s linear`

        // August에 style 적용하기
        document.querySelector(`.${month}`).style.cssText = `width: 100vw;
            height: 100%;
            background: red;
            display: flex;
            justify-content: center;
            align-items: center;
            animation : Appear 2s linear;
            `
    }

    // Page Appear, Disappear Control
    function MonthAppear(month, monthBtn){
        monthBtn.addEventListener('click', () => {
            // 1) door open
            const targetElem = monthBtn
            if(currentItem)
                inactivate(currentItem)

            if( targetElem.classList.contains('door-body')){
                // 내가 클릭한 door-body의 부모 element인 door에 door-opened가 붙어야 한다
                activate(targetElem.parentNode)
            }

            // 2) Page Appear
            setTimeout(() => {
                MonthPageAppear('September')
            }, 2000)
        })
    }

    // 9월
    MonthAppear('September',document.querySelector('.door-body'))
    // 10월
    /*
    MonthAppear('October','OctoberBtn')
    // 11월
    MonthAppear('November','NovemberBtn')
    // 12월
    MonthAppear('December','DecemberBtn')

    */

})()