JavaScript Mouse Effect 04

<main>
    <section id="mouseType01">
        <div class="cursor"></div>
        <div class="cursor-follower"></div>
        <div class="mouse__wrap">
            <div class="mouse__img">
                <figure>
                    <img src="img/img08.jpg" alt="이미지">
                </figure>
                <figcaption>
                    <p>Enjoy your own life without comparing it with that of another</p>
                    <p>남의 생활과 비교하지 말고 네 자신의 생활을 즐겨라</p>
                </figcaption>
            </div>
        </div>
    </section>
</main>

    body::before {
        background: rgba(31, 47, 68, 0.705);
    }

    .mouse__wrap {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        color: #fff;
        width: 100%;
        height: 100vh;
        overflow: hidden;
        /* cursor: none; */
    }

    .mouse__img {
        position: relative;
    }

    .mouse__img figure {
        position: relative;
        width: 50vw;
        height: 53vh;
        /* overflow: hidden;
        background-color: #ccc; */
        border: 3px solid #fff; 
        transition: transform 500ms cubic-bezier(0.25, 0.46, 0.45, 0.84);
    }

    .mouse__img figure:hover {
        transform: scale(1.025);
    }

    .mouse__img figure img {
        position: absolute;
        left: -5%;
        top: -5%;
        width: 110%;
        height: 110%;
        object-fit: cover; /*background-size: cover;*/
    }

    .mouse__img figcaption {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        font-size: 1.3vw;
        line-height: 1.6;
        white-space: nowrap;
    }


    .cursor {
        position: absolute;
        left: 0;
        top: 0;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #fff;
        z-index: 1000;
        user-select: none;
        pointer-events: none;
    }

    const circle = document.querySelector(".cursor").getBoundingClientRect();

    document.querySelector(".mouse__img").addEventListener("mousemove", (event) => {
        // 커서
        gsap.to(".cursor", {duration: 0.2, left: event.pageX - (circle.width / 2), top: event.pageY - (circle.height / 2)});

        // 마우스 좌표 값
        let mousePageX = event.pageX;
        let mousePageY = event.pageY;

        // 마우스 좌표 값을 가운데로 조절
        // 전체 가로 값 / 2 -> 마우스의 x값으로 넘긴다
        // window.innerWidth = 1474 -> 브라우저 크기
        // window.outerWidth = 1920 -> 브라우저 크기
        // window.innerHeight = 961  -> 브라우저 크기
        // window.screen.width = 1920 -> 화면 크기
        // window.screen.height = 1080 -> 화면 크기
        
        let windowWidth = window.screen.width;

        console.log(windowWidth);