스프링부트

[스프링부트] 24. 스프링부트 뱅크 v1 (Controller & Mustache)

백하림's avatar
백하림
Mar 24, 2025
[스프링부트] 24. 스프링부트 뱅크 v1 (Controller & Mustache)

1. Controller

package com.metacoding.bankv1.user;

import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;

@RequiredArgsConstructor
@Controller
public class UserController {
    private final UserService userService;

    @GetMapping("/login-form")
    public String loginForm() {
        return "user/login-form";
    }

    @GetMapping("/join-form")
    public String joinForm() {
        return "user/join-form";
    }

    @PostMapping("/join")
    public String join(UserRequest.JoinDTO joinDTO) {
        userService.회원가입(joinDTO);
        return "redirect:/login-form";
    }
}

2. header.mustache

notion image
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bank</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="/">Home</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="collapsibleNavbar">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="/join-form">회원가입</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/login-form">로그인</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">계좌목록</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">계좌생성</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">이체하기</a>
                </li>
            </ul>
        </div>
    </div>
</nav>
<!--네브바종료-->

3. footer.mustache

notion image
<footer class="mt-5 p-4 bg-dark text-white text-center d-flex justify-content-around">
    <div>
        <p>Created by Cos</p>
        <p>🚩 겟인데어</p>
    </div>
    <div>
        <p>🏴 부산 수영구 XX동</p>
        <p>📞 010-2222-7777</p>
    </div>
</footer>

</body>
</html>

4. 홈 화면

{{> layout/header}}

<!--마진 : mt, mr, ml, mb (1~5) ex) mt-3-->
<div class="container mt-2">
    홈 입니다.
</div>

{{> layout/footer}}
notion image

5. 회원 가입 화면

{{> layout/header}}

<!--마진 : mt, mr, ml, mb (1~5) ex) mt-3-->
<div class="container mt-2">
    <div class="mt-4 p-5 bg-light text-dark rounded-4">
        <h1>회원가입 페이지</h1>
        <form action="/join" method="post">
            <div class="mb-3 mt-3">
                <input type="text" class="form-control" placeholder="Enter username" name="username">
            </div>
            <div class="mb-3">
                <input type="password" class="form-control" placeholder="Enter password" name="password">
            </div>
            <div class="mb-3">
                <input type="text" class="form-control" placeholder="Enter fullname" name="fullname">
            </div>
            <button type="submit" class="btn btn-primary">회원가입</button>
        </form>
    </div>

</div>

{{> layout/footer}}
notion image

6. 로그인 화면

{{> layout/header}}

<!--마진 : mt, mr, ml, mb (1~5) ex) mt-3-->
<div class="container mt-2">
    <div class="mt-4 p-5 bg-light text-dark rounded-4">
        <h1>로그인 페이지</h1>
        <form action="/login" method="post">
            <div class="mb-3 mt-3">
                <input type="text" class="form-control" placeholder="Enter username" name="username">
            </div>
            <div class="mb-3">
                <input type="password" class="form-control" placeholder="Enter password" name="password">
            </div>
            <button type="submit" class="btn btn-primary">로그인</button>
        </form>
    </div>

</div>

{{> layout/footer}}
notion image

7. 계좌 생성 화면

{{> layout/header}}

<!--마진 : mt, mr, ml, mb (1~5) ex) mt-3-->
<div class="container mt-2">
    <div class="mt-4 p-5 bg-light text-dark rounded-4">
        <h1>계좌생성 페이지</h1>
        <form action="/account/save" method="post">
            <div class="mb-3 mt-3">
                <input type="text" class="form-control" placeholder="Enter number" name="number">
            </div>
            <div class="mb-3">
                <input type="password" class="form-control" placeholder="Enter password" name="password">
            </div>
            <div class="mb-3 mt-3">
                <input type="text" class="form-control" placeholder="Enter balance" name="balance">
            </div>
            <button type="submit" class="btn btn-primary">계좌생성</button>
        </form>
    </div>

</div>

{{> layout/footer}}
notion image

8. 계좌 이체 화면

{{> layout/header}}

<!--마진 : mt, mr, ml, mb (1~5) ex) mt-3-->
<div class="container mt-2">
    <div class="mt-4 p-5 bg-light text-dark rounded-4">
        <h1>계좌이체 페이지</h1>
        <form action="#" method="post">
            <div class="mb-3 mt-3">
                <input type="text" class="form-control" placeholder="Enter amount" name="amount">
            </div>
            <div class="mb-3">
                <input type="text" class="form-control" placeholder="Enter withdrawNumber" name="withdrawNumber">
            </div>
            <div class="mb-3">
                <input type="text" class="form-control" placeholder="Enter depositNumber" name="depositNumber">
            </div>
            <div class="mb-3 mt-3">
                <input type="text" class="form-control" placeholder="Enter withdrawPassword" name="withdrawPassword">
            </div>
            <button type="submit" class="btn btn-primary">이체하기</button>
        </form>
    </div>

</div>

{{> layout/footer}}
notion image

9. 계좌 목록 화면

{{> layout/header}}

<!--마진 : mt, mr, ml, mb (1~5) ex) mt-3-->
<div class="container mt-2">
    <table class="table table-hover">
        <thead>
        <tr>
            <th>계좌번호</th>
            <th>잔액</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>1111</td>
            <td>1000원</td>
        </tr>
        <tr>
            <td>2222</td>
            <td>1000원</td>
        </tr>
        </tbody>
    </table>

</div>

{{> layout/footer}}
notion image

10. 상세 보기 화면

{{> layout/header}}
<!--마진 : mt, mr, ml, mb (1~5) ex) mt-5-->
<div class="container mt-2">

    <div class="mt-4 p-5 bg-light text-dark rounded-4">
        <p>쌀님 계좌</p>
        <p>계좌번호 : 1111</p>
        <p>계좌잔액 : 1000원</p>
    </div>

    <div class="mt-3 mb-3">
        <button type="button" class="btn btn-outline-primary">전체</button>
        <button type="button" class="btn btn-outline-primary">입금</button>
        <button type="button" class="btn btn-outline-primary">출금</button>
    </div>

    <table class="table table-hover">
        <thead>
        <tr>
            <th>날짜</th>
            <th>보낸이</th>
            <th>받은이</th>
            <th>금액</th>
            <th>계좌잔액</th>
            <th>입금/출금</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>2025.03.24 : 10:00</td>
            <td>1111</td>
            <td>2222</td>
            <td>100원</td>
            <td>1000원</td>
            <td>출금</td>
        </tr>
        <tr>
            <td>2025.03.23 : 10:00</td>
            <td>2222</td>
            <td>1111</td>
            <td>100원</td>
            <td>1100원</td>
            <td>입금</td>
        </tr>
        </tbody>
    </table>
</div>

{{> layout/footer}}
notion image
Share article

More articles

See more posts

[스프링부트] 26. 스프링부트 뱅크 v1 회원가입

March 24, 2025
[스프링부트] 26. 스프링부트 뱅크 v1 회원가입

[스프링부트] 25. 스프링부트 뱅크 v1 테이블 설계

March 24, 2025
[스프링부트] 25. 스프링부트 뱅크 v1 테이블 설계

[환경세팅] 11. Cursor j unit

March 21, 2025
[환경세팅] 11. Cursor j unit

[스프링부트] 23. 상점 v1 최종 (Mustache)

March 21, 2025
[스프링부트] 23. 상점 v1 최종 (Mustache)

harimmon

RSS·Powered by Inblog