모달 (로그인/로그아웃 시 변경)

공용으로 사용할 header부분에 햄버거 버튼을 만들고, 그 버튼을 눌렀을 때, 모달이 나오도록 하는게 목표다!!!

그리고 로그인 시 / 로그아웃 시 모달을 다르게 해줄 것이다.

먼저 html에 모달을 달아준다. 디자인도 대충 해주고, 프로필사진도 기본사진을 일단 넣어줬다.

<nav class="navbar navbar-expand-lg">

    <div class="container-fluid">

        <a href="/story"><img src="/static/img/yummy_yagi_logo.jpg" class="header-logo"></a>

        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"

                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

            <span class="navbar-toggler-icon"></span>

        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">

            <ul class="navbar-nav me-auto mb-2 mb-lg-0" id="navbar-left">

                <li class="nav-item">

                    <a class="nav-link" aria-current="page" href="/story"

                         style="font-size: 50px; margin-left: 15px; color: #E32AF3">

                        야미야기

                    </a>

                </li>

            </ul>

            <ul class="navbar-nav ml-auto" id="navbar-right">

                <li class="nav-item2">

                    <!-- 로그아웃 시 버튼 -->

                    <a class="nav-link" data-bs-toggle="modal" data-bs-target="#myLogoutModal"

                         id="logout-hamburger-button">☰</a>

                    <!-- 로그인 시 버튼 -->

                    <a class="nav-link" data-bs-toggle="modal" data-bs-target="#myLoginModal"

                         id="login-hamburger-button">☰</a>

                </li>

            </ul>

        </div>

    </div>

</nav>

<!-- 로그아웃 시 모달 -->

<div class="modal fade" id="myLogoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

    <div class="modal-dialog" role="document">

        <div class="modal-content">

            <div class="modal-header">

                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

            </div>

            <div class="modal-body">

                <div>

                    <img class="modal-img" src="/static/img/default_profile.jpg" />

                </div>

                <div class="modal-username" style="font-size:25px; margin-top:15px;">로그인을 해주세요</div>

            </div>

            <div class="modal-body">

                <div class="modal-body-content"><a href="/user/register.html">회원가입</a></div>

                <div class="modal-body-content"><a href="/user/login.html">로그인</a></div>

            </div>

        </div>

    </div>

</div>

<!-- 로그인 시 모달 -->

<div class="modal fade" id="myLoginModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

    <div class="modal-dialog" role="document">

        <div class="modal-content">

            <div class="modal-header">

                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

            </div>

            <div class="modal-body">

                <div>

                    <img class="modal-img" src= "/static/img/default_profile.jpg" id="modalProfileImg" />

                </div>

                <div class="modal-nickname"> 끼리끼 </div>

                <div class="modal-useremail"> leekh9997@naver.com </div>

            </div>

            <div class="modal-body">

                <div class="modal-body-content"><a href="/">글 작성</a></div>

                <div class="modal-body-content"><a href="/">마이 페이지</a></div>

                <div class="modal-body-content"><a href="/">회원정보 수정</a></div>

                <div class="modal-body-content"><a href="/">고객 센터</a></div>

            </div>

            <div class="modal-footer" style="color: #E32AF3;">

                <div class="modal-footer-content"><a style="cursor:pointer" onclick="handleLogout()">로그아웃</a></div>

            </div>

        </div>

    </div>

</div>

로그인 했을 때는, 로그아웃 모달을 display=none; 해주고, 반대로

로그아웃 했을 때는, 로그인 모달을 display=none; 해주면 될 것 같다는 생각을 했다.

 

모달 버튼을 만들 때는, 버튼에  data-bs-toggle="modal" data-bs-target="#myLogoutModal" 이런 코드를 써주면 된다.

그리고 모달창에 data-bs-target 와 같은 이름을 넣어주면 모달창이 열리는 구조이다.

이제 html을 작성했으니, js를 작성해주면 끝날 것 같다!!!

---

header를 적용시키는 함수에서 addEventListener 를 통해 클릭 시, 모달을 show해주도록 했다.

참고로 JQuery를 사용하기 때문에, html에서 부트스트랩같은 것을 가져올때 처럼 가져와야 한다.

JQuery는 거의 배우지 않아서 안쓰려고 했는데, 이건 쓰는게 좋겠다 싶었다 ^^;; 할 수 있겠지만 벌써 머리가 아프네여

// header 적용

async function injectHeader() {

    fetch("../header.html")

        .then(response => response.text())

        .then(data => {

            document.querySelector("header").innerHTML = data;

            const loginButton = document.getElementById("login-hamburger-button");

            const logoutButton = document.getElementById("logout-hamburger-button");

 

            loginButton.addEventListener("click", function () {

                // 로그인시 모달

                updateLoginModal();

                $('#myLoginModal').modal('show');

            });

       

            logoutButton.addEventListener("click", function () {

                // 로그아웃시 모달

                $('#myLogoutModal').modal('show');

            });

        })

        .catch(error => {

            console.error("Error injecting header:", error);

        });

}

injectHeader();

이렇게 작성해주고 함수를 실행시켜줬더니, header가 적용이 잘 되는걸 볼 수 있었고, 햄버거버튼을 클릭했을 때, 모달도 잘 나오는걸 볼 수 있었다.

햄버거버튼이 2개 다 있고, 각각 열었을 때의 모습

 

이제 if 로그인 or not 했을 때, 하나 display=none; 처리 해주면 끝날듯?!

우리는 토큰방식을 쓰니까, local storage에 payload가 있는지로 판단하면 될듯 !!

<완성된 코드>

// header 적용

async function injectHeader() {

    fetch("../header.html")

        .then(response => response.text())

        .then(data => {

            document.querySelector("header").innerHTML = data;

            const loginButton = document.getElementById("login-hamburger-button");

            const logoutButton = document.getElementById("logout-hamburger-button");

            const payload = localStorage.getItem("payload");

            if (payload) {

                // 로그인 상태일 때

                loginButton.style.display = "block";

                logoutButton.style.display = "none";

            } else {

                // 로그아웃 상태일 때

                loginButton.style.display = "none";

                logoutButton.style.display = "block";

            }

            loginButton.addEventListener("click", function () {

                // 로그인시 모달

                updateLoginModal();

                $('#myLoginModal').modal('show');

            });

       

            logoutButton.addEventListener("click", function () {

                // 로그아웃시 모달

                $('#myLogoutModal').modal('show');

            });

        })

        .catch(error => {

            console.error("Error injecting header:", error);

        });

}

injectHeader();

그냥 아까 그 코드에 payload부분만 추가해줬음.

- 끝 -

인줄 알았겠지만 이제는 로그인 했을 때, 사진, 닉네임, 이메일을 가져와야한다.

---

console.log(payload)를 해보니 사진, 닉네임, 이메일을 가져오고 있는걸 볼 수 있었다.

음.. 파싱해주고 가져오면 끝나겠구만.

<파싱 후 콘솔창>

<코드>

            const payload = localStorage.getItem("payload");

            const payload_parse = JSON.parse(payload);

            console.log(payload)

            console.log(payload_parse)

            console.log(payload_parse.profile_img)

            console.log(payload_parse.nickname)

            console.log(payload_parse.email)

<최종 콘솔창>

---

이제 html에 넣어주면 될듯!!

// 로그인 모달 값 가져오기

function updateLoginModal() {

    const modalProfileImg = document.getElementById("modalProfileImg");

    const modalNickname = document.querySelector(".modal-nickname");

    const modalUserEmail = document.querySelector(".modal-useremail");

    const payload = localStorage.getItem("payload");

    const payload_parse = JSON.parse(payload);

    if (payload) {

        modalProfileImg.src = `${backend_base_url}` + payload_parse.profile_img;

        modalNickname.textContent = payload_parse.nickname;

        modalUserEmail.textContent = payload_parse.email;

    }

}

src랑 textContent를 사용해서 넣어주니 완료~

모달창 완성!!!!!!!!!!

- 진짜 끝 -