※ 약관동의 스크립트

• https://velog.io/@lth97/php-%ED%9A%8C%EC%9B%90%EA%B0%80%EC%9E%85-%EC%95%BD%EA%B4%80%EB%8F%99%EC%9D%98-%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8
  약관동의 스크립트 이어서 나머지 스크립트 작업과 회원가입 양식을 해보겠습니다.
  못 보셨다면 위에 링크를 클릭해주세요.

목 차

1. 약관동의를 거치지 않고 바로 회원가입 페이지로 이동 방지하기
2. 회원가입 양식 구성하기

1. Page Skip 방지하기

처음에는 바로 회원가입으로 넘어가려고 했지만 생각해 보니 우리가 보통 회원가입을 할 때 여러 가지 약관 동의를 하고 그다음 회원가입 페이지로 이동을 합니다.

ex) 네이버 회원가입 첫 페이지

절차대로라면 위와 같이 약관 동의를 하고 회원가입 페이지로 이동을 할 수 있습니다. 하지만 약관 동의를 하지 않고 바로 넘어가는 걸 방지하기 위해서 약관 동의가 제대로 되었을 때만 기능이 수행하도록 해보겠습니다.

Hidden 속성으로 값 넘겨주기

1. form 태그 안에 input 태그를 사용하여 hidden 속성으로 회원가입 페이지로 보이지 않는 값을 하나 넘겨주었습니다.

<form action="member_input.php" method="post" name="stipulation_form">
  <input type="hidden" name="chk" value="0">
</form>

2. 회원가입 버튼을 눌렀을 때 hidden의 value을 1로 바꾸어서 약관 동의 여부를 확인하겠습니다.

   member.js - 약관동의 스크립트

document.addEventListener("DOMContentLoaded", () => {
  const btn_member = document.querySelector("#btn_member")

  btn_member.addEventListener("click", () => {
    const chk_member1 = document.querySelector("#chk_member1")
    const chk_member2 = document.querySelector("#chk_member2")

    if (chk_member1.checked !== true) {
      alert("회원 약관을 동의해주세요.")
      return false
    }
    if (chk_member2.checked !== true) {
      alert("개인정보 취급방침을 동의해주세요.")
      return false
    }

    const f = document.stipulation_form
    f.chk.value = 1

    f.submit()
  })
})

• const f = document.stipulation_form
  form 태그의 이름 "stipulation_form" 을 찾아서 f 변수에 대입합니다.
• f.chk.value = 1
  f 변수를 가지고 form 태그 아래 input 태그의 이름 "chk"의 value를 찾아서 1을 대입합니다.
• f.submit()
  해당 form 태그를 회원가입 페이지로 전송합니다.

3. 회원가입 페이지에서 약관 동의 페이지로부터 어떤 값이 넘어오는지 확인해 주겠습니다.

   member_input.php - 회원가입 페이지
   print_r($_POST);

4. POST에 담긴 값을 가지고 조건 주기

   member_input.php - 회원가입 페이지

• if (!isset($_POST["chk"]) || $_POST["chk"] != 1)
  isset 함수를 사용하여 POST["chk"] 가 존재하지 않거나 POST["chk"] 값이 "1" 아닐 때 실행합니다.
• die 함수를 사용하여 해당 스크립트가 실행된 후 자동으로 종료됩니다.

5. 실행결과 확인

   

위 사진과 같이 직접적으로 회원가입 페이지로 이동할 시 알림 창과 함께 다시 약관 동의 페이지로 이동합니다.

2. SignUp Page 구성하기

중복되는 설명이 많이 있어서 그런 부분은 생략하겠습니다.

아이디

<main class="w-50 mx-auto border rounded-5 p-5">
  <h1 class="text-center">회원가입</h1>

  <div class="d-flex gap-2 align-items-end">
    <div>
      <label for="f_id">아이디</label>
      <input type="text" class="form-control" id="f_id" placeholder="아이디를 입력해 주세요.">
    </div>
    <button class="btn btn-secondary">아이디 중복 확인</button>
  </div>
</main>

1. 전체를 main 태그로 감싸고 mx-auto로 가운데 정렬, border rounded 사용하여 둥글게 만들었습니다.
2. 아이디 부분을 가로 정렬하기 위해서 flex를 준 다음 align-items-end로 높이를 맞췄습니다.
3. gap을 사용하여 입력 칸과 중복 확인 버튼 사이에 간격을 띄워줬습니다.

비밀번호

<div class="d-flex gap-2 mt-3 justify-content-between">
    <div class="flex-grow-1">
      <label for="f_pw">비밀번호</label>
      <input type="password" class="form-control" id="f_pw" placeholder="비밀번호를 입력해 주세요.">
    </div>
    <div class="flex-grow-1">
      <label for="f_pw2">비밀번호 확인</label>
      <input type="password" class="form-control" id="f_pw2" placeholder="비밀번호 확인">
    </div>
  </div>

1. flex-grow-1을 사용하여 비밀번호 입력 칸 2개의 비율을 1:1로 맞춰줬습니다.

이메일

<div class="d-flex gap-2 align-items-end mt-3">
    <div class="flex-grow-1">
      <label for="f_email">Email</label>
      <input type="email" class="form-control" id="f_email" placeholder="이메일을 입력해 주세요.">
    </div>
    <button class="btn btn-secondary">이메일 중복 확인</button>
  </div>

우편번호

<div class="d-flex mt-3 gap-2 align-items-end">
    <div>
      <label for="f_hcode">우편번호</label>
      <input type="address" name="" id="f_hcode" class="form-control">
    </div>
    <div>
      <button class="btn btn-secondary">우편번호찾기</button>
    </div>
  </div>

주소

<div class="d-flex gap-2 mt-3 justify-content-between">
    <div class="flex-grow-1">
      <label for="f_addr1">주소</label>
      <input type="address" class="form-control" id="f_addr1">
    </div>
    <div class="flex-grow-1">
      <label for="f_addr2">상세주소</label>
      <input type="address" class="form-control" id="f_addr2" placeholder="상세 주소를 입력해 주세요.">
    </div>
  </div>

프로필

<div class="d-flex mt-3 gap-5">
    <div><input type="file" name="profile" class="form-control"></div>
    <img src="images/profile.png" alt="profile" class="w-25">
  </div>

  <div class="mt-3 d-flex gap-2 justify-content-center">
    <button class="btn btn-primary">가입확인</button>
    <button class="btn btn-secondary">취소</button>
  </div>

전체 Code

<?php

// print_r($_POST);
// if (!isset($_POST["chk"]) || $_POST["chk"] != 1) {
//   die("<script>
//   alert('약관 동의가 이루어진 다음에 이용 가능합니다.')
//   location.href='./stipulation.php'
//   </script>");
// }
include "inc_header.php";
?>

<main class="w-50 mx-auto border rounded-5 p-5">
  <h1 class="text-center">회원가입</h1>

// 아이디
  <div class="d-flex gap-2 align-items-end">
    <div>
      <label for="f_id">아이디</label>
      <input type="text" class="form-control" id="f_id" placeholder="아이디를 입력해 주세요.">
    </div>
    <button class="btn btn-secondary">아이디 중복 확인</button>
  </div>

// 비밀번호
  <div class="d-flex gap-2 mt-3 justify-content-between">
    <div class="flex-grow-1">
      <label for="f_pw">비밀번호</label>
      <input type="password" class="form-control" id="f_pw" placeholder="비밀번호를 입력해 주세요.">
    </div>
    <div class="flex-grow-1">
      <label for="f_pw2">비밀번호 확인</label>
      <input type="password" class="form-control" id="f_pw2" placeholder="비밀번호 확인">
    </div>
  </div>

// 이메일
  <div class="d-flex gap-2 align-items-end mt-3">
    <div class="flex-grow-1">
      <label for="f_email">Email</label>
      <input type="email" class="form-control" id="f_email" placeholder="이메일을 입력해 주세요.">
    </div>
    <button class="btn btn-secondary">이메일 중복 확인</button>
  </div>

// 우편번호
  <div class="d-flex mt-3 gap-2 align-items-end">
    <div>
      <label for="f_hcode">우편번호</label>
      <input type="address" name="" id="f_hcode" class="form-control">
    </div>
    <div>
      <button class="btn btn-secondary">우편번호찾기</button>
    </div>
  </div>

// 주소
  <div class="d-flex gap-2 mt-3 justify-content-between">
    <div class="flex-grow-1">
      <label for="f_addr1">주소</label>
      <input type="address" class="form-control" id="f_addr1">
    </div>
    <div class="flex-grow-1">
      <label for="f_addr2">상세주소</label>
      <input type="address" class="form-control" id="f_addr2" placeholder="상세 주소를 입력해 주세요.">
    </div>
  </div>

// 프로필
  <div class="d-flex mt-3 gap-5">
    <div><input type="file" name="profile" class="form-control"></div>
    <img src="images/profile.png" alt="profile" class="w-25">
  </div>

  <div class="mt-3 d-flex gap-2 justify-content-center">
    <button class="btn btn-primary">가입확인</button>
    <button class="btn btn-secondary">취소</button>
  </div>
</main>

<?php
include "inc_footer.php";
?>

Result

마무리

다음 시간에는 아이디, 비밀번호, 이메일 중복 확인을 하려고 했는데 생각해 보니 그걸 하려면 DB가 필요해서 아마 DB 생성부터 연결까지 할 거 같습니다.

긴 글 봐주셔서 감사합니다.