JavaScript 회원 가입 만들기

2024년 09월 17일

tjdudtn
작성자
2024.09.17.:03

디자인 시안 확인 sign-up.html 파일임

sign-up.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>회원가입 by JS</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">게시판</span>
        </div>
        <div class="nav-item">
          <span class="menu-link">로그인</span>
          <span class="menu-link">회원가입</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" />
                <button type="button" id="checkIdBtn" class="btn-small">중복확인</button>
              </td>
            </tr>
            <tr>
              <th>닉네임</th>
              <td>
                <input type="text" class="inputs" placeholder="닉네임을입력하세요" value="둘리1" />
              </td>
            </tr>
            <tr>
              <th>비밀번호</th>
              <td>
                <input type="password" class="inputs" placeholder="비밀번호을입력하세요" value="1234" />
              </td>
            </tr>
            <tr>
              <th>비밀번호확인</th>
              <td>
                <input type="password" class="inputs" placeholder="비밀번호을입력하세요" value="1234" />
              </td>
            </tr>
          </table>

          <div class="btn-area">
            <button type="button" id="signUpBtn" class="btn">회원가입</button>
          </div>
        </form>
      </section>
    </main>

    <!-- js 파일은 하단에 두는 것이 일반적입니다. 
     모든 HTML 요소가 로드된 후에 스크립트를 실행하기 위함이고 
     페이지 로드 속도를 최적화 하는데 도움이 된다. 
    -->
    <script src="../js/header.js"></script>
    <script src="../js/signUp.js"></script>
  </body>
</html>

common.css

/* 기본 스타일 설정 */
/* 모든 요소에 일관되게 box-sizing 을 적용 */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    min-height: 100vh;    
}

.content-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* 
    align-content: center; 
    flex-wrap 속성을 사용하여 여러 줄로 구성된 경우 사용한다. 
*/

.form-title h1 {
    font-size: 24px;
    text-align: center;
    margin-bottom: 20px;
}

table,
th, 
td {
    border: 1px solid black;
    border-collapse: collapse;
}
/* collapse 
    CSS 에서 테이블에 셀 간 테두리를 어떻게 처리할지 결정하는 속성. 
    테두라기 중복되는것을 방지하거나 각 셀의 테두리를 따로 유지할지 설정 할 수 있습니다.
*/

table {
    width: 100%;
    margin: 0;
}

th,
td {
    text-align: left;    
    padding: 10px;
}

section {
    width: 100%;
    max-width: 800px;
    padding: 20px;
}

/* 인풋 스타일 설정 */
.inputs {
    width: calc(100% - 22px);
    height: 40px;
    border: none;
    padding: 5px 10px;
}

.btn {
    font-size: 14px;
    padding: 12px;
    border-radius: 8px;
    color: white;
    background-color: brown;
    border: none;
    cursor: pointer;
}

.btn-small {
    font-size: 10px;
    padding: 8px;
    border-radius: 4px;
    border: none;
    color: white;
    background-color: green;
    margin-top: 10px;
    cursor: pointer;
}

.btn-area {
    display: flex;
    justify-content: right;
    margin: 20px 0;
}

header.css

header {
    width: 100%;
    background-color: gray;
    padding: 10px;
    box-sizing: border-box;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.menu-link {
    color: white;
    padding: 5px 10px;
    font-size: 18px;
}

.menu-link:hover {
    background-color: darkgray;
}

// 1. 변수에 선언과 초기화 
const inputs = document.querySelectorAll(".inputs");
const checkIdBtn = document.getElementById("checkIdBtn");
const signUpBtn = document.getElementById("signUpBtn");
const toDay = new Date(); // 현재 날짜와 시간을 가져오는 객체 

// 로컬스토리지에 접근해서 사용자 정보를 가져오는 함수를 만들어 보자. 
// localStorage <-- 변수를 통해 접근 가능 
function getUserInfo() {
    
    let userListString = localStorage.getItem("userList");
    if(userListString === null) {
        return [];
    } else {
        // 문자열을(JSON 형식) JS 에 데이터 타입인 객체로 변환 처리 
        return JSON.parse(userListString);
    }
}

const userInfo = getUserInfo();

// 아이디 중복 확인 기능 만들어 보기 
function checkDuplicatedId() {

    const inputUsername = inputs[0].value.trim(); 
    
    if(inputUsername === "") {
        alert('아이디를 입력하세요');
        inputs[0].focus();
        return ; 
    }

    // 로컬스토리지에서 가져온 사용자리스트에서 반복문을 돌면서 inputUsername 에 담기 
    // 같은 값이 있는지 확인 
    let isDuplicatedId = false; 
    for(let i = 0; i < userInfo.length; i++ ) {
        if(userInfo[i].username === inputUsername) {
            isDuplicatedId = true; 
            break;        
        }
    }
    
    if(isDuplicatedId == true) {
        alert('이미 존재하는 아이디입니다.');
        inputs[0].focus();
    } else {
        alert('사용 가능한 아이디 입니다.');
        inputs[0].readOnly = true; 
        inputs[0].style.backgroundColor = "green";    
    }
}

// 회원가입 처리 함수 
function registerUser() {
    const username = inputs[0];
    const nickname = inputs[1];
    const password = inputs[2];
    const confirmPassword = inputs[3];
    
    // 유효성 검사 
    if(username.readOnly == false) {
        alert('아이디 중복 확인을 해주세요');
        username.focus();
        return;
    }

    if(nickname.value.trim() === "") {
        alert('닉네임을 입력하세요');
        nickname.focus();
        return;
    }

    if(password.value.trim() === "") {
        alert('비밀번호를 입력하세요');
        password.focus();
        return;
    }

    if(password.value !== confirmPassword.value) {
        alert('비밀번호가 일치하지 않습니다');
        password.focus();
        return; 
    }

    // 새로운 사용자 정보를 객체 리터럴로 생성 
    const newUser = { 
        username: username.value,
        nickname: nickname.value,
        password: password.value,
        createdAt: toDay.getFullYear() + "." + (toDay.getMonth() + 1) + "."  + toDay.getDate()
    };

    // [ {...} , {}, {} ] : 자료구조 
    userInfo.push(newUser);
    // 로컬 스토리지에 자료구조 통으로 덮어쓰기 저장 
    localStorage.setItem('userList', JSON.stringify(userInfo));

     window.location.href = "sign-in.html";
}

// 이벤트 리스너 등록 처리 
function addEventListener() {
    checkIdBtn.addEventListener('click', checkDuplicatedId);
    signUpBtn.addEventListener('click',  registerUser);
}

// 이벤트 리스너 함수 실행(호출)
addEventListener();

결과 화면 확인

'JavaScript > JavaScript 게시판 만들기' 카테고리의 다른 글

JavaScript board-list 기능 만들기 (5)	2024.09.17
JavaScript 로그인 기능 만들기 (0)	2024.09.17
프로젝트 뼈대 만들기 (0)	2024.09.17
실행환경 구축 (VS CODE) (0)	2024.09.17
로컬스토리지(localStorage)란? (0)	2024.09.17

다음 글이 없습니다.

이전 글이 없습니다.

'JavaScript > JavaScript 게시판 만들기' 카테고리의 다른 글

티스토리툴바