#회원가입-3

1. 회원정보(리팩토링)

2. 회원가입(패스워드 인코딩 TDD)

3. 회원가입(패스워드 구현)

4. 회원가입 인증 메일 처리(TDD&구현)

1. 회원가입 (리팩토링)

1-1) AccountController

1-1)-1. 회원정보 리팩토링 전

Untitled

1-1)-2. 회원정보 리팩토링 후

saveNewAccount

Untitled

1-2) AccountController

1-2)-1. 이메일 전송 리팩토링 전

Untitled

1-2)-2. 이메일 전송 리팩토링 후

sendSignUpConfirmEmail()

Untitled

1-3) AccountController

1-3)-1. 회원정보&이메일 토큰&이메일 전송 리팩토링 전

Untitled

1-3)-2. 회원정보&이메일 토큰&이메일 전송 리팩토링 후

processNewAccount()

Untitled

1-4) AccountService

Service로 회원정보&이메일 토큰&이메일 전송 리팩토링하기

Untitled

...

1-5) AccountController

Untitled

1-6) AccountService

Untitled

2. 회원가입(패스워드 인코딩 TDD& 패스워드 구현)

2-1) 패스워드 인코딩 TDD

Untitled

Console(Error)
- 패스워드 인코딩을 거치지 않고 평문 그대로 저장했기 때문에 에러가 남.

2-2) AccountRepository

Untitled

2-3) AppConfig

Untitled

2-4) AccountService

Untitled

Console(Success)

3**. 회원가입 인증 메일 처리(TDD&구현)**

TDD(인증 메일 확인 - 입력값 오류
TDD(인증 메일 확인 - 성공

3-1) 회원가입 인증 메일 TDD(인증 메일 확인 - 입력값 오류)

Untitled

Console(Error)
- error라는 Attribute 값이 없기 때문에 TDD Error가 나는 거다.

3-2) AccountController

3-2)-1. 회원 정보가 없는 경우

Untitled

3-2)-2. 토큰 값이 없는 경우

Untitled

3-2-3. Console(Success)

Untitled

3-3) checked-email.html

3-3)-1. 연습 HTML

<!doctype html>
<html lang="en" xmlns:th="<http://www.thymeleaf.org>">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Studymflo</title>
    <link rel="stylesheet" href="<https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css>">
    <style>
        .container {
            max-width: 100%;
        }
    </style>
</head>
<body class="bg-light">
<!-- navigation bar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container-fluid">
        <a class="navbar-brand" 문제1>
            <img 문제2 width="30" height="30">부엉이 홈 버튼
        </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 mr-auto">
                <li class="nav-item">
                    <form 문제3 class="form-inline" method="get">
                        <input class="form-contorl mr-sm-2" name="keyword" type="search" placeholder="스터디명을 입력하세요.">
                    </form>
                </li>
            </ul>
            <ul class="navbar-nav justify-content-end">
                <li class="nav-item">
                    문제4 로그인
                </li>
                <li class="nav-item">
                    문제5 가입
                </li>
            </ul>
        </div>
    </div>
</nav>
<!-- 에러가 있으면 -->
<div class="py-5 text-center" 문제6>
    <p class="lead">스터디올래 이메일 확인</p>
    <div class="alert alert-danger" role="alert">
        이메일 확인 링크가 정확하지 않습니다.
    </div>
</div>
<!-- 에러가 없으면 -->
<div class="py-5 text-center" 문제7>
    <p class="lead">스터디올래 이메일 확인</p>
    <h2>
        이메일을 확인했습니다. <span 문제8>10</span>번째 회원,
        <span th:text="${nickname}">백기선</span>님 가입을 축하합니다.
    </h2>
    <!-- text-info하면 글자 파란색-->
    <small class="text-info">이제부터 가일 할 때 사용한 이메일 또는 닉네임과 패스워드로 로그인 할 수 있습니다.</small>
</div>
</body>
</html>

3-3)-2. 완료 HTML

<!doctype html>
<html lang="en" xmlns:th="<http://www.thymeleaf.org>">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Studymflo</title>
    <link rel="stylesheet" href="<https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css>">
    <style>
        .container {
            max-width: 100%;
        }
    </style>
</head>
<body class="bg-light">
<!-- navigation bar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container-fluid">
        <a class="navbar-brand" th:href="@{/}">
            <img src="/images/logo_sm.png" width="30" height="30">
        </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 mr-auto">
                <li class="nav-item">
                    <form th:action="@{/search/study}" class="form-inline" method="get">
                        <input class="form-contorl mr-sm-2" name="keyword" type="search" placeholder="스터디명을 입력하세요.">
                    </form>
                </li>
            </ul>
            <ul class="navbar-nav justify-content-end">
                <li class="nav-item">
                    <a class="nav-link" href="#" th:href="@{/login}">로그인</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#" th:href="@{/signup}">가입</a>
                </li>
            </ul>
        </div>
    </div>
</nav>
<!-- 에러가 있으면 -->
<div class="py-5 text-center" th:if="${error}">
    <p class="lead">스터디올래 이메일 확인</p>
    <div class="alert alert-danger" role="alert">
        이메일 확인 링크가 정확하지 않습니다.
    </div>
</div>
<!-- 에러가 없으면 -->
<div class="py-5 text-center" th:if="${error == null}">
    <p class="lead">스터디올래 이메일 확인</p>
    <h2>
        이메일을 확인했습니다. <span th:text="${numberOfUser}">10</span>번째 회원,
        <span th:text="${nickname}">백기선</span>님 가입을 축하합니다.
    </h2>
    <!-- text-info하면 글자 파란색-->
    <small class="text-info">이제부터 가일 할 때 사용한 이메일 또는 닉네임과 패스워드로 로그인 할 수 있습니다.</small>
</div>
</body>
</html>

3-4) 회원가입 인증메일 - 성공

3-4)-1. TDD

Untitled