[Spring Boot] 회원가입/ 회원정보수정/ 회원탈퇴/ 비밀번호 변경

728x90

프로그래밍 세계를 탐구합시다.

Spring Boot를 활용하여 회원가입/ 회원정보수정/ 회원탈퇴/ 비밀번호 변경을 구현할 수 있습니다.

회원가입

회원정보수정 / 회원탈퇴

비밀번호 변경

[회원가입]

- 이용약관 필수사항 동의, 아이디 중복확인, 이메일 인증을 완료해야 회원가입 버튼이 활성화 됩니다.

- 유효성 검사를 통해 한글, 영어를 입력해야 이름을 입력할 수 있습니다.

- 비밀번호 조건(영어, 숫자)를 충족해야 가입할 수 있습니다.

데이터 저장은 h2 database 이용했습니다.

https://www.h2database.com/html/main.html

H2 Database Engine

H2 Database Engine Welcome to H2, the Java SQL database. The main features of H2 are: Very fast, open source, JDBC API Embedded and server modes; in-memory databases Browser based Console application Small footprint: around 2.5 MB jar file size Supp

www.h2database.com

작성 코드

UserController.java

package com.example.board.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.security.crypto.password.PasswordEncoder;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;

import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.http.HttpSession;

import com.example.board.model.CarType;
import com.example.board.model.Company;
import com.example.board.model.Coupon;
import com.example.board.model.Membership;
import com.example.board.model.User;
import com.example.board.repository.CarTypeRepository;
import com.example.board.repository.CompanyRepository;
import com.example.board.repository.CouponRepository;
import com.example.board.repository.MembershipRepository;
import com.example.board.repository.UserRepository;

@Controller
public class UserController {
	@Autowired
	UserRepository userRepository;

	@Autowired
	HttpSession session;

	@Autowired
	PasswordEncoder passwordEncoder;

	@Autowired
	CarTypeRepository carTypeRepository;

	@Autowired
	CompanyRepository companyRepository;

	@Autowired
	CouponRepository couponRepository;

	@Autowired
	MembershipRepository membershipRepository;

	@GetMapping("/email-check")
	@ResponseBody
	public String emailCheck(@ModelAttribute User user) {
		String email = user.getEmail();

		User result = userRepository.findByEmail(email);

		if (result != null) { // 값 있음, 아이디가 있음, 가입 불가
			return "가입불가";
		} else { // 값 없음, 아이디가 없음, 가입 가능
			return "가입가능";
		}
	}

	@GetMapping("/signin")
	public String signin() {

		return "signin";
	}

	@PostMapping("/signin")
	public String signinPost(@ModelAttribute User user, Model model) {
		User dbUser = userRepository.findByEmail(user.getEmail());

		// 오류
		if (dbUser == null) {
			model.addAttribute("error", "이메일 또는 비밀번호가 일치하지 않습니다.");
			return "signin";
		}
		String encodedPwd = dbUser.getPwd();
		String userPwd = user.getPwd();
		boolean isMatch = passwordEncoder.matches(userPwd, encodedPwd);

		if (isMatch) {
			// 로그인 성공한 경우
			session.setAttribute("user_info", dbUser);

			// 멤버십 정보
			List<Membership> memberships = membershipRepository.findByUser(dbUser);
			if (memberships != null && !memberships.isEmpty()) {
				session.setAttribute("has_membership", true);
			} else {
				session.setAttribute("has_membership", false);
			}

			return "redirect:/";
		} else {
			model.addAttribute("error", "이메일 또는 비밀번호가 일치하지 않습니다.");
			return "signin";
		}
	}

	@GetMapping("/signout")
	public String signout() {
		session.invalidate();
		return "redirect:/";
	}

	@GetMapping("/signup")
	public String signup(Model model) {
		List<CarType> carTypes = carTypeRepository.findAll();
		model.addAttribute("carTypes", carTypes);
		List<Company> companys = companyRepository.findAll();
		model.addAttribute("companys", companys);
		return "signup";
	}

	@PostMapping("/signup")
	public String signupPost(@ModelAttribute User user,
			@RequestParam(value = "isAdmin", required = false) boolean isAdmin,
			@RequestParam("carname") String carname) {
		String userPwd = user.getPwd();
		String encodePwd = passwordEncoder.encode(userPwd);
		user.setPwd(encodePwd);
		user.setCreDate(new Date());

		// 사용자 역할 설정
		User.UserRole userRole = isAdmin ? User.UserRole.ADMIN : User.UserRole.CUSTOMER;

		// 사용자 정보 저장
		user.setRole(userRole);
		user.setCarname(carname);
		user.setCoin(0);
		user.setCoinDate(new Date(0));

		userRepository.save(user);

		// User 수 증가
		List<User> users = userRepository.findAll();
		int userCount = users.size();
		userCount++;
		for (User u : users) {
			u.setCount(userCount);
		}
		userRepository.saveAll(users);

		return "redirect:/";
	}

	@GetMapping("/mypage")
	public String mypage(Model model, @RequestParam String email) {
		User opt = userRepository.findByEmail(email);
		model.addAttribute("user", opt);
		User user = (User) session.getAttribute("user_info");
		if (user != null) {
			int userCoins = user.getCoin();
			
			model.addAttribute("userCoin", userCoins);
		}

		return "mypage";
	}

	@PostMapping("/mypage")
	public String updatePost(@ModelAttribute User user) {
		User sessionUser = (User) session.getAttribute("user_info");

		long id = sessionUser.getId();
		User dbUser = userRepository.findById(id);

		String userPwd = user.getPwd();
		String dbPwd = dbUser.getPwd();
		String encodedPwd = passwordEncoder.encode(userPwd);
		if (userPwd.equals(dbPwd)) {
			encodedPwd = userPwd;
		}
		user.setPwd(encodedPwd);
		user.setCreDate(new Date());

		userRepository.save(user);
		return "/signin";
	}

	@GetMapping("/loginnoti")
	public String loginnoti() {
		return "loginnoti";
	}

	@GetMapping("/getCarType")
	@ResponseBody
	public List<CarType> getCarType(String companyName) {
		Company company = companyRepository.findByCompanyName(companyName);
		List<CarType> carTypes = carTypeRepository.findByCompany(company);
		return carTypes;
	}

	// 탈퇴하기
	@GetMapping("/exit")
	public String exit() {
		User user = (User) session.getAttribute("user_info");
		userRepository.delete(user);
		session.invalidate();

		return "redirect:/";
	}

	// 비밀번호 변경하기
	@GetMapping("/pwdforget")
	public String pwdforget() {
		return "/pwdforget";
	}

	@PostMapping("/pwdforget")
	@ResponseBody
	public String pwdforgetPost(@RequestBody User user) {
		// 세션에서 사용자 정보 가져오기
    User sessionUser = (User) session.getAttribute("user");
		if (sessionUser != null) {
			String newPassword = user.getNewPassword();
			if (newPassword != null && !newPassword.isEmpty()) {
					String hashedPassword = passwordEncoder.encode(newPassword);
					sessionUser.setPwd(hashedPassword);
					userRepository.save(sessionUser);
					return "비밀번호가 성공적으로 변경되었습니다.";
			} else {
					return "비밀번호 값을 올바르게 입력하십시오.";
			}
	}
	return "비밀번호 변경에 실패하셨습니다.";
	
	}
	
	// 본인 인증하기
	@PostMapping("/validateUser")
	public ResponseEntity<Map<String, Boolean>> validateUser(@RequestBody User user) {
		String email = user.getEmail();
		String name = user.getName();
		Integer phone = user.getPhone();
		List<User> resultList = userRepository.findByEmailAndNameAndPhone(email, name, phone);

		Map<String, Boolean> response = new HashMap<>();
		if (!resultList.isEmpty()) {
			response.put("isValid", true);
			// 세션에 사용자 정보 저장
			session.setAttribute("user", resultList.get(0));
		} else {
			response.put("isValid", false);
		}

		return ResponseEntity.ok(response);
	}

}

Mailer.java

package com.example.board.email;

import java.util.Properties;
import java.util.Random;

import javax.servlet.http.HttpSession;

import javax.mail.Address;
import javax.mail.Message;
import javax.mail.Session;
import javax.mail.Transport;
import javax.mail.internet.InternetAddress;
import javax.mail.internet.MimeMessage;
import javax.servlet.http.HttpSession;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
public class Mailer {
  @Autowired
	HttpSession session;

@GetMapping("/emailcode")
@ResponseBody
  public void sendMail(
    SMTPAuthenticator smtp , @RequestParam String email){
     
        
        String content = Long.toString(Math.abs(new Random().nextLong()),36).substring(0,4);
    Properties p = new Properties();
    p.put("mail.smtp.host", "smtp.gmail.com");
    p.put("mail.smtp.port", "465");
    p.put("mail.smtp.starttls.enable", "true");
    p.put("mail.smtp.auth", "true");
    p.put("mail.smtp.debug", "true");
    p.put("mail.smtp.socketFactory.port", "465");
    p.put("mail.smtp.socketFactory.class", "javax.net.ssl.");
    p.put("mail.smtp.socketFactory.fallback", "false");
    try {
      Session ses = Session.getInstance(p, smtp);
      ses.setDebug(true);
      MimeMessage msg = new MimeMessage(ses); // 메일의 내용을 담을 객체
      msg.setSubject("pika충전소 회원가입 본인 인증"); // 제목
      Address fromAddr = new InternetAddress("이메일");
      msg.setFrom(fromAddr); // 보내는 사람
      Address toAddr = new InternetAddress(email);
      msg.addRecipient(Message.RecipientType.TO, toAddr); // 받는 사람
      msg.setContent(content, "text/html;charset=UTF-8"); // 내용과 인코딩
      Transport.send(msg); // 전송
    } catch (Exception e) {
      e.printStackTrace();
    }
    session.setAttribute("code",content);
  }
  @GetMapping("emailcode-check")
  @ResponseBody
  public String codecheck(@RequestParam String emailcode){
    Object code = session.getAttribute("code");
    System.out.println(code);
    System.out.println(emailcode);
    if(code.equals(emailcode) ){
      System.out.println("yes");
      return "코드일치";
    }else{
      System.out.println("no");
      return "코드불일치";
    }
  }
}

SMTPAuthenticator.java

package com.example.board.email;

import javax.mail.Authenticator;
import javax.mail.PasswordAuthentication;

public class SMTPAuthenticator extends Authenticator {
  @Override
  protected PasswordAuthentication getPasswordAuthentication() {
    return new PasswordAuthentication(
        "이메일", "키");
  }
}

SignInCheckInterceptor.java

package com.example.board.interceptor;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import org.springframework.stereotype.Component;
import org.springframework.web.servlet.HandlerInterceptor;
import org.springframework.web.servlet.ModelAndView;

import com.example.board.model.User;

import lombok.extern.slf4j.Slf4j;

@Component
@Slf4j
public class SignInCheckInterceptor implements HandlerInterceptor {
    @Override
    public boolean preHandle(
            HttpServletRequest request, HttpServletResponse response,
            Object handler) throws Exception {
        log.debug("preHandle");
        HttpSession session = request.getSession();
        User user = (User) session.getAttribute("user_info");
        if (user == null) {
            response.sendRedirect("/loginnoti");
            return false;
        }
        return true;
    }

    @Override
    public void postHandle(
            HttpServletRequest request, HttpServletResponse response,
            Object handler, ModelAndView modelAndView) throws Exception {
        log.debug("postHandle");
    }

    @Override
    public void afterCompletion(
            HttpServletRequest request, HttpServletResponse response,
            Object handler, Exception ex) throws Exception {
        log.debug("afterCompletion");
    }
}

User.java

package com.example.board.model;

import java.io.Serializable;
import java.time.LocalDateTime;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;

import javax.persistence.CascadeType;
import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.FetchType;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.OneToMany;

import lombok.Data;

@Entity
@Data
public class User implements Serializable {
	@Id
	@GeneratedValue(strategy = GenerationType.AUTO)
	private Long id;
	private String email;
	private String pwd;
	private String name;
	private Integer phone;
	private Date creDate;
	private String carname;
	@Column(nullable = true)
	private Integer count;
	private UserRole role;

	public enum UserRole {
		CUSTOMER, // 일반 고객0
		ADMIN // 관리자1
	}

	public String getRole() {
		return role.name(); // 열거형 값의 이름을 문자열로 반환
	}

	private Integer coin;
  private Date coinDate;
	private String newPassword;
	
	@OneToMany(mappedBy = "user", cascade = CascadeType.REMOVE, orphanRemoval = true, fetch = FetchType.EAGER)
	List<Board> boards = new ArrayList<>();

	@OneToMany(mappedBy = "user")
    private List<Membership> memberships;

	@OneToMany(mappedBy = "user", cascade = CascadeType.ALL, fetch = FetchType.LAZY)
	private List<Coupon> coupons;
}

UserRepository.java

package com.example.board.repository;

import java.util.List;

import org.springframework.data.jpa.repository.JpaRepository;
import com.example.board.model.User;


public interface UserRepository extends JpaRepository<User, Long> {
  public User findByEmailAndPwd(String email, String pwd);
  public User findByEmail(String email);
  public User findById(long id);
  List<User> findByEmailAndNameAndPhone(String email,String name, Integer phone);
}

loginnoti.html

<!DOCTYPE html>
<html lang="en">

<head th:replace="common/head">

</head>
<style>
    @font-face {
        font-family: 'TheJamsil5Bold';
        src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302_01@1.0/TheJamsil5Bold.woff2') format('woff2');
        font-weight: 500;
        font-style: normal;
    }
  body {
    font-family: 'TheJamsil5Bold';
    height: 100vh;
    /* 화면 높이의 100%로 설정 */
    background-color: #000;
    background-size: cover;
    /* 이미지를 화면에 맞게 조절 */
    background-repeat: no-repeat;
    /* 이미지 반복을 중지 */
  }
  .btn {
    background-color: rgb(228, 179, 93);
    border-color: rgb(228, 179, 93);
  }

  .btn:hover {
    background-color: rgb(228, 179, 93);
    border-color: rgb(228, 179, 93);
  }
</style>

<body>

  <div th:replace="common/header">

  </div>

  <nav th:replace="common/nav">

  </nav>

  <div class="container mt-5">
    <div class="row">

      <div class="d-grid gap-2 text-center">
        <h1>로그인 후 사용해주세요🦖</h1>
        <button class="btn btn-primary" id="loginnoti" onclick="loginnoti()">로그인페이지로 이동</button>
      </div>

    </div>
  </div>

  <div th:replace="common/footer">
  </div>
  <script>
    function loginnoti() {
      location = '/signin';
    }
  </script>

</body>

</html>

mypage.html

<!DOCTYPE html>
<html lang="en">

<head th:replace="common/head">

</head>

<style>
  @font-face {
    font-family: 'TheJamsil5Bold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302_01@1.0/TheJamsil5Bold.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
  }

  body {
    font-family: 'TheJamsil5Bold';
    height: 100vh;
    /* 화면 높이의 100%로 설정 */
    background-color: #000;
    background-size: cover;
    /* 이미지를 화면에 맞게 조절 */
    background-repeat: no-repeat;
    /* 이미지 반복을 중지 */
  }

  .change-color {
    background-color: #ffed91;
    border-color: #ffed91;
    text-decoration: none;
    color: black;
  }

  .change-color:hover {
    color: black;
    background-color: #fff9cd;
    border-color: #fff9cd;
  }

  .exit {
    display: flex;
    justify-content: center;
    color: black;
    text-decoration: none;
    width: 200px;
  }

  .exit-link {
    display: grid !important;
    justify-content: center;
    margin-top: 50px;
  }
  .card {
    padding: 2rem;
  }
</style>

<body>

  <div th:replace="common/header">

  </div>

  <nav th:replace="common/nav">

  </nav>

  <div class="container mt-5">
    <div class="card">
      <div class="row">
        <form method="post" action="/mypage">
          <div class="mb-3">
            <input type="hidden" id="id" name="id" th:value="${user.id}">
            <label for="email">Email:</label>
            <input type="text" class="form-control" id="email" name="email" th:value="${user.email}" readonly>
          </div>
          <div class="mb-3">
            <label for="pwd">Password:</label>
            <input type="password" class="form-control" id="pwd" name="pwd" th:value="${user.pwd}" readonly hidden>
          </div>
          <div class="mb-3">
            <label for="name">Name:</label>
            <input type="text" class="form-control" id="name" name="name" th:value="${user.name}">
          </div>
          <div class="mb-3">
            <label for="phone">Phone:</label>
            <input type="text" class="form-control" id="phone" name="phone" th:value="${user.phone}">
          </div>
          <div class="mb-3">
            <label for="car">My Car:</label>
            <input type="text" class="form-control" id="car" name="car" th:value="${user.carname}">
          </div>
          <div class="d-grid gap-2">
            <button class="btn btn-primary change-color" id="update" th:onclick="mypage()">회원정보 수정</button>
          </div>
          <input type="hidden" id="coin" name="coin" th:value="${user.coin}">
          <!-- <input type="hidden" id="coinDate" name="coinDate" th:value="${user.coinDate}"> -->
          <input type="hidden" id="count" name="count" th:value="${user.count}">
          <!-- <input type="hidden" id="creDate" name="creDate" th:value="${user.creDate}"> -->
          <input type="hidden" id="role" name="role" th:value="${user.role}">
          <input type="hidden" id="newPassword" name="newPassword" th:value="${user.newPassword}">
        </form>
        <div class="exit-link">
          <button class="exit" id="exit" th:onclick="confirmDeletion()">회원탈퇴</button>
        </div>
      </div>
    </div>
  </div>

  <div th:replace="common/footer">
  </div>
  <script>
    function confirmDeletion() {
      if (confirm("정말로 회원탈퇴를 하시겠습니까?")) {
        location.href = "/exit";
      }
    }
    function mypage() {
       // 폼 데이터 수집
        var formData = {
        id: document.getElementById("id").value,
        email: document.getElementById("email").value,
        name: document.getElementById("name").value,
        phone: document.getElementById("phone").value,
        car: document.getElementById("car").value
    };

    // AJAX 요청을 사용하여 서버로 데이터 전송
    $.ajax({
        type: "POST",
        url: "/mypage",
        data: formData,
        success: function (response) {
            // 수정 성공 시 처리
            alert("회원 정보가 수정되었습니다.");
            location.reload();  // 페이지 새로고침 또는 리디렉션
        }
    });
    }
  </script>
</body>

</html>

pwdforget.html

<!DOCTYPE html>
<html lang="en">

<head th:replace="common/head"></head>

<style>
  @font-face {
    font-family: 'TheJamsil5Bold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302_01@1.0/TheJamsil5Bold.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
  }

  body {
    font-family: 'TheJamsil5Bold';
    height: 100vh;
    /* 화면 높이의 100%로 설정 */
    background-color: #000;
    background-size: cover;
    /* 이미지를 화면에 맞게 조절 */
    background-repeat: no-repeat;
    /* 이미지 반복을 중지 */
  }

  .btnn-primary {
    background-color: #f2f5c0;
    border-color: #f2f5c0;
    color: black;
  }
  .btnn-primary:hover{
    background-color: #e2ce38;
    border-color: #e2ce38;
    color: black;
  }
  

  #pwd i .eyes {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto 2px;
    height: 30px;
    font-size: 22px;
    cursor: pointer;
    color: white;
  }

  label {
    color: white
  }

  .fa-eye:before {
    content: "\f06e";
    color: white;
  }

  .fa-eye-slash:before {
    content: "\f070";
    color: white;
  }

  /* modal */
  .modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    font-family: 'TheJamsil5Bold';
  }

  .modal-content {
    background-color: #fefefe;
    margin: auto;
    width: 600px;
    padding: 30px;
    color: black;
    overflow-y: scroll;
  }

  .close {
    color: #aaaaaa;
  }

  .subscribe-title {
    text-align: center;
    font-size: 30px;
    margin-bottom: 50px;
  }

  .subscribe-content {
    text-align: center;
    font-size: 15px;
    margin-bottom: 20px;
  }

  .content-info {
    text-align: center;
    margin-top: 2px;
    font-weight: bold;
    font-size: large;
  }

  .modal2 {
    font-size: 22px;
  }
  
</style>

<body>
  <div th:replace="common/header"> </div>
  <nav th:replace="common/nav"></nav>

  <div class="container mt-5">
    <div class="row">
      <form method="post" action="/pwdforget">
        <div class="mb-3">
          <label for="email">Email:</label>
          <input type="email" class="form-control" id="email" name="email" pattern="[a-z0-9._+-]+@[a-z]+\.[a-z]{2,}$"
            title=" 정확한 이메일 주소를 입력해주세요" placeholder="ex.daram@dotori.com" required>
        </div>
        <div class="mb-3">
          <label for="name">Name:</label>
          <input type="text" class="form-control" id="name" name="name" pattern="^[가-힣]+$" title="올바른 이름을 입력하세요 ex.홍길동"
            placeholder="이름" required>
        </div>
        <div class="mb-3">
          <label for="name">Phone:</label>
          <input type="text" class="form-control" id="phone" name="phone" pattern="[0-9]{10,11}"
            title="10-11자리의 숫자를 '-' 없이 입력하세요" placeholder="휴대전화번호('-'기호 제외 10~11자리)" required>
        </div>
        <div class="d-grid gap-2">
          <button type="button" class="btn btnn-primary" id="signup" onclick="validateUser()" >본인 인증하기</button>
        </div>
        <div id="error-message1" class="d-none" style="color: red; margin: 10px;">
          <p>입력하신 정보와 일치하는 사용자를 찾을 수 없습니다.</p>
        </div>
        <div id="change-password-form" class="d-none">
          <div class="mb-3">
            <label for="pwd">New Password:</label>
            <input type="password" class="form-control" id="newPassword" name="newPassword"
              pattern="(?=.*\d)(?=.*[a-zA-Z]).{8,}" title="영문대소문자/숫자로 이루어진 최소 8글자의 비밀번호를 입력하세요"
              placeholder="새로운 비밀번호를 입력하세요" required>
            <i class="fa fa-eye fa-lg eyes" th:attr="onclick='togglePasswordVisibility()'"></i>
          </div>
          <div class="d-grid gap-2">
            <button type="button" class="btn btnn-primary" id="changePassword">비밀번호
              변경</button>
          </div>
        </div>

        <!-- <div id="error-message1" class="d-none" style="color: red; margin: 10px;">
          <p>입력하신 정보와 일치하는 사용자를 찾을 수 없습니다.</p>
        </div> -->
        <!-- <div id="error-message2" class="d-none" style="color: red; margin: 10px;">
          <p>비밀번호 형식이 올바르지 않습니다. 영문대소문자/숫자로 이루어진 최소 8글자의 비밀번호를 입력하세요.</p>
        </div> -->
      </form>

    </div>
  </div>
  <script>
    //본인 인증
    function validateUser() {
      var email = document.getElementById('email').value;
      var name = document.getElementById('name').value;
      var phone = document.getElementById('phone').value;

      // AJAX 요청을 사용하여 서버에 사용자의 정보가 유효한지 확인합니다.
      $.ajax({
        url: '/validateUser',
        type: 'POST',
        contentType: 'application/json',
        data: JSON.stringify({
          email: email,
          name: name,
          phone: phone
        }),
        success: function (response) {
          if (response.isValid) {
            // 유효하면 비밀번호 변경 폼을 보여줍니다.
            document.getElementById('error-message1').classList.add('d-none');
            document.getElementById('change-password-form').classList.remove('d-none');
          } else {
            // 유효하지 않으면 에러 메시지를 보여줍니다.
            document.getElementById('error-message1').classList.remove('d-none');
          }
        }
      });
    }

    //비밀번호 변경
    const changeBtn = document.querySelector('#changePassword')
    changeBtn.addEventListener('click', changePassword);
    function changePassword() {
      var email = document.getElementById('email').value;
      var name = document.getElementById('name').value;
      var phone = document.getElementById('phone').value;
      var newPassword = document.getElementById('newPassword').value;
      console.log(newPassword);

      //data 속성을 통해 내용을 서버로 전달
      $.ajax({
        url: '/pwdforget',
        type: 'POST',
        contentType: 'application/json',
        data: JSON.stringify({
          email: email,
          name: name,
          phone: phone,
          newPassword: newPassword
        }),
        success: function (response) {
          // 서버에서 응답이 오면, 성공 메시지를 보여줍니다.
          alert(response);
          location = '/signin';
        },
        error: function (error) {
          // 에러가 발생한 경우, 에러 메시지를 보여줍니다.
          alert("오류가 발생했습니다: " + error.responseText);
        }
      });
    }
    

    // 비밀번호 보이기표시
    function togglePasswordVisibility() {
      var $passwordInput = $('#newPassword'); // ID를 사용하여 비밀번호 입력란을 선택
      if ($passwordInput.attr('type') === 'password') {
        $('.eyes').removeClass('fa-eye').addClass('fa-eye-slash');
        $passwordInput.attr('type', 'text');
      } else {
        $('.eyes').removeClass('fa-eye-slash').addClass('fa-eye');
        $passwordInput.attr('type', 'password');
      }
    }

  </script>
  </div>

  <div th:replace="common/footer" style="margin-top: 1rem;">
  </div>

</body>

</html>

signin.html

<!DOCTYPE html>
<html lang="en">

<head th:replace="common/head"></head>
<style>
  @font-face {
        font-family: 'TheJamsil5Bold';
        src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302_01@1.0/TheJamsil5Bold.woff2') format('woff2');
        font-weight: 500;
        font-style: normal;
    }
  body {
    font-family: 'TheJamsil5Bold';
    height: 100vh;
    /* 화면 높이의 100%로 설정 */
    background-color: #000;
    background-size: cover;
    /* 이미지를 화면에 맞게 조절 */
    background-repeat: no-repeat;
    /* 이미지 반복을 중지 */
  }
  .btn-primary {
    background-color: #f2f5c0;
    border-color: #f2f5c0;
    color: black;
  }
  .btn-primary:hover{
    background-color: #e2ce38;
    border-color: #e2ce38;
    color: black;
  }
  
  #pwd{
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
 }

  .form-control{
  position: relative;
  padding-right: 40px;
  z-index: 1;
  }
  .form-control:disabled {
    z-index: 1; /* 비활성화된 입력란의 스타일도 덮어쓰기 위해 z-index 설정 */
  }
  .eyes {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
    cursor: pointer;
    z-index: 2 ; 
  }
  .form-control:focus + .eyes {
    z-index: 3 ; /* 포커스된 입력란과 연결된 눈 모양 아이콘을 더 높은 z-index로 설정하여 포커스 시 위로 오게 합니다. */
  }
  .title h1{
        text-align: center;
        margin-bottom: 3rem;
        color: white;
    }
</style>

<body>
  <div th:replace="common/header"></div>
  <nav th:replace="common/nav"></nav>
  <div class="title">
    <h1>로그인</h1>
</div>
  <div class="container mt-5">
    <div class="row">
      <form method="post" action="/signin">
        <div class="mb-3 input-group flex-nowrap">
          <span class="input-group-text">💻</span>
          <input type="email" class="form-control" id="email" name="email" placeholder="email" title="이메일 형식이어야 합니다" required>
        </div>
        <div class="mb-3 input-group flex-nowrap">
          <span class="input-group-text">🔒</span>
          <input type="password" class="form-control" id="pwd" name="pwd" placeholder="password" required>
          <i class="fa fa-eye fa-lg eyes" th:attr="onclick='togglePasswordVisibility()'"></i>
        </div>
        <div th:if="${error}" class="alert alert-danger">
          <p th:text="${error}"></p>
        </div>
        <div class="d-grid gap-2">
          <button class="btn btn-primary" id="signin">로그인</button>
        </div>
        <div class="d-grid gap-2">
          <a class="pwdforget" id="pwdforget" href="/pwdforget" style=" color: rgb(22, 208, 255); padding: 20px 5px;">비밀번호가 기억나지 않는다면?</a>
        </div>
      </form>
    </div>
  </div>

  <script>
    function togglePasswordVisibility() {
      var $passwordInput = $('#pwd');
      if ($passwordInput.attr('type') === 'password') {
          $('.eyes').removeClass('fa-eye').addClass('fa-eye-slash');
          $passwordInput.attr('type', 'text');
      } else {
          $('.eyes').removeClass('fa-eye-slash').addClass('fa-eye');
          $passwordInput.attr('type', 'password');
      }
  }
  </script>
</body>

</html>

signup.html

<!DOCTYPE html>
<html lang="en">

<head th:replace="common/head"></head>

<style>
  @font-face {
    font-family: 'TheJamsil5Bold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302_01@1.0/TheJamsil5Bold.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
  }

  body {
    font-family: 'TheJamsil5Bold';
    height: 100vh;
    /* 화면 높이의 100%로 설정 */
    background-color: #000;
    background-size: cover;
    /* 이미지를 화면에 맞게 조절 */
    background-repeat: no-repeat;
    /* 이미지 반복을 중지 */
  }

  .btnn-primary {
    background-color: #f2f5c0;
    border-color: #f2f5c0;
    color: black;
  }
  .btnn-primary:disabled{
    background-color: #f2f5c0;
    border-color: #f2f5c0;
    color: black;
    
  }
  .btnn-primary:hover{
    background-color: #e2ce38;
    border-color: #e2ce38;
    color: black;
  }

  #pwd i .eyes {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto 2px;
    height: 30px;
    font-size: 22px;
    cursor: pointer;
    color: white;
  }

  label {
    color: white
  }

  .fa-eye:before {
    content: "\f06e";
    color: white;
  }

  .fa-eye-slash:before {
    content: "\f070";
    color: white;
  }

  /* modal */
  .modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    font-family: 'TheJamsil5Bold';
  }

  .modal-content {
    background-color: #fefefe;
    margin: auto;
    width: 600px;
    padding: 30px;
    color: black;
    overflow-y: scroll;
  }

  .close {
    color: #aaaaaa;
  }

  .subscribe-title {
    text-align: center;
    font-size: 30px;
    margin-bottom: 50px;
  }

  .subscribe-content {
    text-align: center;
    font-size: 15px;
    margin-bottom: 20px;
  }

  .content-info {
    text-align: center;
    margin-top: 2px;
    font-weight: bold;
    font-size: large;
  }

  .modal2 {
    font-size: 22px;
  }

  .mb-3 {
    width: 50%;
  }
  .btn-gradient {
        text-decoration: none;
        color: white;
        padding: 10px 30px;
        display: inline-block;
        position: relative;
        border: 1px solid rgba(0, 0, 0, 0.21);
        border-bottom: 4px solid rgba(0, 0, 0, 0.21);
        border-radius: 4px;
        text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
    }

    .btn-gradient.yellow {
        background: rgba(240, 210, 100, 1);
        background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(240, 210, 100, 1)), to(rgba(229, 201, 96, 1)));
        background: -webkit-linear-gradient(rgba(240, 210, 100, 1) 0%, rgba(229, 201, 96, 1) 100%);
        background: -moz-linear-gradient(rgba(240, 210, 100, 1) 0%, rgba(229, 201, 96, 1) 100%);
        background: -o-linear-gradient(rgba(240, 210, 100, 1) 0%, rgba(229, 201, 96, 1) 100%);
        background: linear-gradient(rgba(240, 210, 100, 1) 0%, rgba(229, 201, 96, 1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0d264', endColorstr='#e5c960', GradientType=0);
    }

  /* joinForm */
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box
  }

  ul>li {
    list-style: none
  }

  a {
    text-decoration: none;
  }

  .clearfix::after {
    content: "";
    display: block;
    clear: both;
  }

  #joinForm {
    width: 460px;
    margin:  auto;
  }

  ul.join_box {
    border: 2px solid #ddd;
    background-color: #fff;
    width:500px;
    padding-inline-start:40px;
    padding-inline-end:40px;
  }

  .checkBox,
  .checkBox>ul {
    position: relative;
  }

  .checkBox>ul>li {
    float: left;
  }

  .checkBox>ul>li:first-child {
    width: 85%;
    padding: 15px;
    font-weight: 600;
    color: #888;
  }

  .checkBox>ul>li:nth-child(2) {
    position: absolute;
    top: 50%;
    right: 30px;
    margin-top: -12px;
  }

  .checkBox textarea {
    width: 96%;
    height: 90px;
    margin: 0 2%;
    background-color: #f7f7f7;
    color: #888;
    border: none;
  }

  .footBtwrap {
    margin-top: 15px;
  }

  .footBtwrap>li {
    float: left;
    width: 50%;
    height: 60px;
  }

  .footBtwrap>li>button {
    display: block;
    width: 100%;
    height: 100%;
    font-size: 20px;
    text-align: center;
    line-height: 43px;
  }

  .fpmgBt1 {
    background-color: #fff;
    color: #888
  }

  .fpmgBt2 {
    background-color: #f2f5c0;
    color: #171616
  }
  .fpmgBt2:hover {
    background-color: #e2ce38;
    border-color: #e2ce38;
    color: #171616
  }
  .fpmgBt2:disabled {
    background-color: #f2f5c0;
    border-color: #f2f5c0;
    color: #171616
  }

  .signupForm{
    display: flex;
    margin-left: 10rem;
  }
  #realsignupForm{
    display:inline-flex;
    flex-direction: column;
    align-items: center;
  }
  .title h1{
        text-align: center;
        margin-bottom: 3rem;
        color: white;
    }
</style>

<body>

  <div th:replace="common/header"> </div>
  <nav th:replace="common/nav"></nav>
  <div class="title">
    <h1>회원가입</h1>
  </div>
  <div class="signupForm">
    <form action="" id="joinForm">
      <ul class="join_box">
        <li class="checkBox check01">
          <ul class="clearfix">
            <li>이용약관, 개인정보 수집 및 이용,
              위치정보 이용약관(선택), 프로모션 안내
              메일 수신(선택)에 모두 동의합니다.</li>
            <li class="checkAllBtn">
              <input type="checkbox" name="chkAll" id="chk" class="chkAll" onchange="chkAll(this.checked)">
            </li>
          </ul>
        </li>
        <li class="checkBox check02">
          <ul class="clearfix">
            <li>이용약관 동의(필수)</li>
            <li class="checkBtn">
              <input type="checkbox" name="chk">
            </li>
          </ul>
          <textarea name="" id="">여러분을 환영합니다.
        Pika 충전소 서비스 및 제품(이하 ‘서비스’)을 이용해 주셔서 감사합니다. 본 약관은 다양한 Pika 충전소 서비스의 이용과 관련하여 Pika 충전소 서비스를 제공하는 Pika 충전소 주식회사(이하 ‘Pika 충전소’)와 이를 이용하는 Pika 충전소 서비스 회원(이하 ‘회원’) 또는 비회원과의 관계를 설명하며, 아울러 여러분의 Pika 충전소 서비스 이용에 도움이 될 수 있는 유익한 정보를 포함하고 있습니다.
        </textarea>
        </li>
        <li class="checkBox check03">
          <ul class="clearfix">
            <li>개인정보 수집 및 이용에 대한 안내(필수)</li>
            <li class="checkBtn">
              <input type="checkbox" name="chk">
            </li>
          </ul>

          <textarea name="" id="">개인정보보호법에 따라 Pika 충전소에 회원가입 신청하시는 분께 수집하는 개인정보의 항목, 개인정보의 수집 및 이용목적, 개인정보의 보유 및 이용기간, 동의 거부권 및 동의 거부 시 불이익에 관한 사항을 안내 드리오니 자세히 읽은 후 동의하여 주시기 바랍니다.이용자는 회원가입을 하지 않아도 정보 검색, 뉴스 보기 등 대부분의 Pika 충전소 서비스를 회원과 동일하게 이용할 수 있습니다. 이용자가 메일, 캘린더, 카페, 블로그 등과 같이 개인화 혹은 회원제 서비스를 이용하기 위해 회원가입을 할 경우, Pika 충전소는 서비스 이용을 위해 필요한 최소한의 개인정보를 수집합니다.
        </textarea>
        </li>
        <li class="checkBox check03">
          <ul class="clearfix">
            <li>위치정보 이용약관 동의(선택)</li>
            <li class="checkBtn">
              <input type="checkbox" name="chk1">
            </li>
          </ul>

          <textarea name="" id="">여러분을 환영합니다.
            위치기반서비스 이용약관에 동의하시면, 위치를 활용한 광고 정보 수신 등을 포함하는 Pika 충전소 위치기반 서비스를 이용할 수 있습니다. 이 약관은 Pika 충전소 주식회사 (이하 “회사”)가 제공하는 위치기반서비스와 관련하여 회사와 개인위치정보주체와의 권리, 의무 및 책임사항, 기타 필요한 사항을 규정함을 목적으로 합니다.
        </textarea>
        </li>
        <li class="checkBox check04">
          <ul class="clearfix">
            <li>이벤트 등 프로모션 알림 메일 수신(선택)</li>
            <li class="checkBtn">
              <input type="checkbox" name="chk1">
            </li>
          </ul>

        </li>
      </ul>
      <ul class="footBtwrap clearfix">
        <li><button type="button" class="fpmgBt1 btn btnn-primary" onclick="disagreement()">비동의</button></li>
        <li><button type="button" class="fpmgBt2 btn btnn-primary" onclick="agreement()">동의</button></li>
      </ul>
    </form>

    <div class="container mt-5">
      <div class="row">
        <form method="post" action="/signup" id="realsignupForm">
          <div class="mb-3">
            <label for="email">Email:</label>
            <input type="email" class="form-control" id="email" name="email" pattern="[a-z0-9._%+-]+@[a-z]+\.[a-z]{2,}$"
              title=" 정확한 이메일 주소를 입력해주세요" placeholder="ex.daram@dotori.com" required>
            <button class="btn btnn-primary" type="button" onclick="checkEmail()">중복확인</button>
            <button class="btn btnn-primary" type="button" onclick="run()">이메일 인증</button>
            <span id="duplicateResult"></span>
          </div>
          <div class="mb-3">
            <label for="pwd">Password:</label>
            <input type="password" class="form-control" id="pwd" name="pwd" pattern="(?=.*\d)(?=.*[a-zA-Z]).{8,}"
              title="영문대소문자/숫자로 이루어진 최소 8글자의 비밀번호를 입력하세요" placeholder="영문대소문자/숫자로 이루어진 최소 8글자의 비밀번호" required>
            <i class="fa fa-eye fa-lg eyes" th:attr="onclick='togglePasswordVisibility()'"></i>

          </div>
          <div class="mb-3">
            <label for="name">Name:</label>
            <input type="text" class="form-control" id="name" name="name" pattern="^[a-zA-Z가-힣]+$"
              title="올바른 이름을 입력하세요 ex.홍길동" placeholder="이름" required>
          </div>
          <div class="mb-3">
            <label for="name">Phone:</label>
            <input type="text" class="form-control" id="phone" name="phone" pattern="[0-9]{10,11}"
              title="10-11자리의 숫자를 '-' 없이 입력하세요" placeholder="휴대전화번호('-'기호 제외 10~11자리)" required>
          </div>
          <div class="mb-3">
            <label for="campany">회사 선택:</label>
            <select class="form-select" id="company" name="company">
              <option value="">회사를 선택하세요</option>
              <option th:each="type : ${companys}" th:value="${type.Id}" th:text="${type.companyName}"></option>
            </select>
            <label for="carType">차종 선택:</label>
            <select class="form-select" id="carname" name="carname">
              <option value="">차종을 선택하세요</option>
              <!-- <option th:each="type : ${carTypes}" th:value="${type.name}" th:text="${type.name}"></option> -->
            </select>
          </div>
          <div class="mb-3 form-check">
            <input type="checkbox" class="form-check-input" id="isAdmin" name="isAdmin">
            <label class="form-check-label" for="isAdmin">관리자</label>
          </div>
          <div class="d-grid gap-2">

            <button class="btn btnn-primary" id="signup" style="width : 250px;">가입하기</button>
          </div>
        </form>
      </div>


      <!-- Modal -->
      <div id="myModal" class="modal">
        <div class="modal-dailog">
          <div class="modal-content" style="color:black;">
            <span class="close">&times;</span>
            <div class="subscribe-title"> 이메일 본인 인증 </div>
            <div class="subscribe-content">
              작성하신 이메일 주소로 발송된 이메일을 확인해주세요.
            </div>
            <div class="content-info">
              <input type="text" class="codetext">
            </div>
            <div class="coupon-btn"
              style="display: flex; justify-content: space-evenly;align-items: center; margin-top: 20px;">
              <button class="btn-gradient yellow large" onclick="checkEmailcode()">확인</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  
      <script>
// 이용약관

const pchkBoxes = document.querySelectorAll('input[name="chk"]');
const cchkBoxes = document.querySelectorAll('input[name="chk1"]');
function chkAll(isChecked) {
  

  // 모든 체크박스를 루프 돌며 상태를 chkAll과 동일하게 설정
  pchkBoxes.forEach((checkbox) => {
    checkbox.checked = isChecked;
  });
  cchkBoxes.forEach((checkbox) => {
    checkbox.checked = isChecked;
  });

  // 최소 두 개의 체크박스가 선택되었는지 확인하여 "동의" 버튼을 활성화
  const checkedCount = Array.from(pchkBoxes).filter((checkbox) => checkbox.checked).length;
  agreeButton.disabled = checkedCount < 2;
}

// chkAll 체크박스에 이벤트 리스너 추가
document.querySelector('#chk').addEventListener('change', function () {
  chkAll(this.checked);
});

// "동의" 버튼을 업데이트하는 개별 체크박스에 이벤트 리스너 추가
const individualCheckboxes = document.querySelectorAll('input[name="chk"]');
individualCheckboxes.forEach((checkbox) => {
  checkbox.addEventListener('change', function () {
    const checkedCount = Array.from(individualCheckboxes).filter((checkbox) => checkbox.checked).length;
    agreeButton.disabled = checkedCount < 2;
  });

});


let agree;
function agreement(){
  alert("이용약관에 동의하셨습니다.")
  agree = true;
}
function disagreement(){
  alert("이용약관 필수사항에 동의하시지 않으셨습니다.")
}


        // 회원가입하기 버튼 비활성/활성화
        const signupButton = document.getElementById('signup');
        signupButton.disabled = true;
        const agreeButton = document.querySelector('.fpmgBt2');
        agreeButton.disabled = true;
        let isEmailValid = false;
        let isEmailCodeValid = false;

        function updateSignupButtonState() {
          if (isEmailValid && isEmailCodeValid && agree === true) {
            signupButton.disabled = false;
          } else {
            signupButton.disabled = true;

          }
        }



        // id중복체크
        async function checkEmail() {
          const email = document.querySelector("[name=email]").value;

          const response = await fetch(`/email-check?email=${encodeURIComponent(email)}`);
          const result = await response.text();

          // 중복 확인 결과에 따라 메시지 표시
          const duplicateResultElement = document.getElementById("duplicateResult");

          if (result == "가입불가") {
            duplicateResultElement.textContent = "중복된 Email입니다.";
            duplicateResultElement.style.color = "red";
            isEmailValid = false;
            // 다른 스타일링 등의 추가적인 처리 가능
          } else if (result == "가입가능") {
            duplicateResultElement.textContent = "사용 가능한 Email입니다.";
            duplicateResultElement.style.color = "green";
            isEmailValid = true;
            // 다른 스타일링 등의 추가적인 처리 가능
          }
          updateSignupButtonState();
        }
        // 비밀번호 보이기표시
        function togglePasswordVisibility() {
          var $passwordInput = $('#pwd'); // ID를 사용하여 비밀번호 입력란을 선택
          if ($passwordInput.attr('type') === 'password') {
            $('.eyes').removeClass('fa-eye').addClass('fa-eye-slash');
            $passwordInput.attr('type', 'text');
          } else {
            $('.eyes').removeClass('fa-eye-slash').addClass('fa-eye');
            $passwordInput.attr('type', 'password');
          }

        }

        //회사 옵션에 따라 해당 차 종류 가져오기
        const company = document.querySelector('#company');
        const carSelect = document.querySelector('#carname');
        company.addEventListener('change', async (e) => {
          // console.dir(e.target);
          // console.dir(e.target.selectedIndex);
          const index = e.target.selectedIndex;
          // console.dir(e.target[index]);
          const selectedCompany = e.target[index].innerText;
          // console.dir(selectedCompany);
          await getCarTypes(selectedCompany);
        });

        async function getCarTypes(selectedCompany) {
          const data = await fetch(`/getCarType?companyName=${selectedCompany}`);
          const res = await data.json();
          console.log(res);

          // 기존 옵션 제거
          carSelect.innerHTML = '';

          // "차종을 선택하세요" 기본 옵션 추가
          let defaultOption = document.createElement('option');
          defaultOption.value = '';
          defaultOption.text = '차종을 선택하세요';

          carSelect.appendChild(defaultOption);

          // 새로운 옵션 추가
          res.forEach(carType => {
            let optionElement = document.createElement('option');
            optionElement.value = carType.name;
            optionElement.text = carType.name;

            carSelect.appendChild(optionElement);
          });
        }

        //이메일 인증 모달창
        async function run(code) {

          const options = { backdrop: false };
          var myModal = new bootstrap.Modal(document.getElementById('myModal'), options);
          myModal.show();

          const email = document.querySelector("[name=email]").value;
          const response = await fetch(`/emailcode?email=${email}`);


          $('.close').click(function () {
            $('#myModal').css('display', 'none');
            $('.subscribe-title').empty();
            $('.subscribe-content').empty();
          });
        }

        // 이메일 인증
        async function checkEmailcode() {

          const emailcode = document.querySelector('.codetext').value;
          const response = await fetch(`/emailcode-check?emailcode=${emailcode}`);
          const result = await response.text();
          console.log(response);
          console.log(result);
          if (result === "코드불일치") {
            var contentInfo = document.querySelector('.content-info');
            var subscribecontent = document.querySelector('.subscribe-content');
            var couponbtn = document.querySelector('.coupon-btn');
            var closebtn = document.querySelector('.close');
            subscribecontent.innerHTML = '<div class="modal2">본인 인증에 실패했습니다.</div>';
            contentInfo.innerHTML = '<div class="modal2">다시 시도해주세요.</div>';
            couponbtn.innerHTML = '<h1></h1>';
            closebtn.innerHTML = '<a href ="/signup">돌아가기</a>';
            isEmailCodeValid = false;

          } else if (result === "코드일치") {
            var contentInfo = document.querySelector('.content-info');
            var subscribecontent = document.querySelector('.subscribe-content');
            var couponbtn = document.querySelector('.coupon-btn');
            subscribecontent.innerHTML = '<div class="modal2">인증이 완료되었습니다.</div>';
            contentInfo.innerHTML = '<div class="modal2"> 회원가입을 진행해주세요.</div>';
            couponbtn.innerHTML = '<h1></h1>';
            isEmailCodeValid = true;
          }
          updateSignupButtonState();
        }


      </script>
    
    <div th:replace="common/footer" style="margin-top: 1rem;">
    </div>

</body>

</html>

728x90

저작자표시 비영리 변경금지

'IT > Java - Spring Boot' 카테고리의 다른 글

[Spring Boot] thymeleaf 의존성 추가하기 (Controller가 templates의 html을 인식하지 못할 때) (0)	2024.01.19
[Spring Boot] 유튜브 API 활용해서 특정 키워드 영상 페이지에 출력하기 (0)	2023.11.01
[Spring Boot] 게시판 만들기 (1)	2023.11.01
[Spring Boot] 카카오 지도 api 활용하여 지도 출력하기 (1)	2023.11.01
[Spring Boot] 페이지에 상단 바 코딩하기 (0)	2023.11.01