[JavaScript] 26. JavaScript를 사용한 헤더 만들기

2024년 08월 26일

Song hyun
작성자
2024.08.26.:03

728x90

[JavaScript] 26. JavaScript를 사용한 헤더 만들기

1. header.js

// DOMContentLoaded 이벤트를 사용해보자.

document.addEventListener('DOMContentLoaded',function(){
    // DOM 요소를 가져오기
    const boardMenu = document.getElementById('board');
    const signInMenu = document.getElementById('signIn');
    const signUpMenu = document.getElementById('signUp');
    const authLinks = document.getElementById('authLinks');

    // 로그인 여부 확인 
    const user = localStorage.getItem('user');
    if(user!==null){
        if(authLinks){
            // 로그인, 회원가입 링크를 로그아웃 링크로 변경
            authLinks.innerHTML = '<span class="menu-link" id="logoutLink">로그아웃</span>';

            // 로그아웃 클릭 시 처리
            document.getElementById('logoutLink').addEventListener('click',function(){
                localStorage.removeItem('user');

                // 로그아웃 후 페이지를 새로고침 해야 렌더링이 된다.
                location.reload();
            });
        }
    }

    // 각 메뉴에 클릭 이벤트를 추가합니다.
    if(boardMenu){
        boardMenu.addEventListener('click',function(){
            window.location.href='board-list.html';
        });
    }

    if(signInMenu){
        boardMenu.addEventListener('click',function(){
            window.location.href='sign-in.html';
        });
    }

    if(signUpMenu){
        boardMenu.addEventListener('click',function(){
            window.location.href='sign-up.html';
        });
    }

});

2. sign-in.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>로그인</title>
    <link rel="stylesheet" href="../css/common.css" />
    <link rel="stylesheet" href="../css/header.css" />
  </head>
  <body>
    <header>
      <nav class="nav-container">
          <div class="nav-item">
              <span class="menu-link" id="board">게시판</span>
          </div>
          <div class="nav-item" id="authLinks">
              <span class="menu-link" id="signIn">로그인</span>
              <span class="menu-link" id="signUp">회원가입</span>
          </div>
      </nav>
  </header>

    <main class="content-wrapper">
      <section class="form-title">
        <h1>로그인 by JS</h1>
      </section>

      <section>
        <form action="" onsubmit="return false;">
          <table>
            <tr>
              <th>아이디</th>
              <td>
                <input type="text" class="inputs" placeholder="아이디를입력하세요" value="tenco1" />
              </td>
            </tr>
            <tr>
              <th>비밀번호</th>
              <td>
                <input type="password" class="inputs" placeholder="비밀번호를입력하세요" value="1234" />
              </td>
            </tr>
          </table>
        </form>
      </section>

      <div class="btn-area">
        <button type="button" class="btn">로그인</button>
      </div>
    </main>

    <script src="../js/header.js"></script>
    <script src="../js/signIn.js"></script>
  </body>
</html>

728x90

'HTML,CSS, JS > JavaScript' 카테고리의 다른 글

[JavaScript] 28. JavaScript를 사용한 목록 페이지 만들기(3) (0)	2024.08.26
[JavaScript] 27. JavaScript를 사용한 목록 페이지 만들기(1) (0)	2024.08.26
[JavaScript] 25. JavaScript를 사용한 로그인 만들기 (1) (0)	2024.08.23
[JavaScript] 24. JavaScript를 사용한 회원 가입 만들기 (3) (0)	2024.08.23
[JavaScript] 23. JavaScript를 사용한 회원 가입 만들기 (2) (0)	2024.08.21

다음 글이 없습니다.

이전 글이 없습니다.

[JavaScript] 26. JavaScript를 사용한 헤더 만들기

'HTML,CSS, JS > JavaScript' 카테고리의 다른 글

티스토리툴바