[Spring Boot] 10. bankv1 (그림 그리기 및 연결)

김건우

Apr 01, 2025

Contents

1. 레이아웃 파일 2. 홈 페이지 (home.mustache)3. 계좌 목록 페이지 4. 계좌 생성 페이지 5. 계좌 거래 내역

1. 레이아웃 파일

📂 `layout/header.mustache` (네비게이션 바)


<!DOCTYPE html>
<html lang="ko">
<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">
                {{#sessionUser}}
                    <li class="nav-item"><a class="nav-link" href="/account">계좌목록</a></li>
                    <li class="nav-item"><a class="nav-link" href="/account/save-form">계좌생성</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">이체하기</a></li>
                    <li class="nav-item"><a class="nav-link" href="/logout">로그아웃</a></li>
                {{/sessionUser}}
                {{^sessionUser}}
                    <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>
                {{/sessionUser}}
            </ul>
        </div>
    </div>
</nav>

🔹 Mustache 문법

{{#sessionUser}} → 로그인된 경우 계좌 목록, 계좌 생성, 로그아웃 버튼을 표시

{{^sessionUser}} → 로그인되지 않은 경우 회원가입, 로그인 버튼 표시

📂 `layout/footer.mustache` (푸터)


<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>

2. 홈 페이지 (`home.mustache`)

✅로그인 여부에 따라 사용자 이름 표시

📂home.mustache


{{>layout/header}}
<div class="container mt-2">
    <div class="mt-4 p-5 bg-light text-dark rounded-4">
        <h1>메타코딩 은행에 오신것을 환영합니다.</h1>
        <h3>
            {{#sessionUser}}
                {{sessionUser.fullname}}님
            {{/sessionUser}}
        </h3>
    </div>
</div>
{{>layout/footer}}

로그인된 경우 sessionUser.fullname을 출력하여 사용자 이름을 표시

3. 계좌 목록 페이지

✅사용자의 계좌 목록을 보여줌

📂account/list.mustache


{{>layout/header}}
<div class="container mt-2">
    <table class="table table-hover">
        <thead>
        <tr>
            <th>계좌번호</th>
            <th>잔액</th>
        </tr>
        </thead>
        <tbody>
        {{#models}}
            <tr>
                <td>{{number}}</td>
                <td>{{balance}}원</td>
            </tr>
        {{/models}}
        </tbody>
    </table>
</div>
{{>layout/footer}}

models → 컨트롤러에서 넘겨준 계좌 목록 데이터

4. 계좌 생성 페이지

✅ 사용자가 계좌를 만들 수 있는 폼

📂 account/save-form.mustache


{{>layout/header}}
<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}}

사용자가 입력한 데이터를 POST /account/save로 전송

5. 계좌 거래 내역

✅ 해당 계좌의 거래 내역을 표시

📂 account/history.mustache


{{>layout/header}}
<div class="container mt-2">
    <div class="mt-4 p-5 bg-light text-dark rounded-4">
        <p>{{sessionUser.fullname}}님 계좌</p>
        <p>계좌번호 : {{number}}</p>
        <p>계좌잔액 : {{balance}}원</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>
        {{#transactions}}
            <tr>
                <td>{{date}}</td>
                <td>{{withdrawNumber}}</td>
                <td>{{depositNumber}}</td>
                <td>{{amount}}원</td>
                <td>{{balance}}원</td>
                <td>{{type}}</td>
            </tr>
        {{/transactions}}
        </tbody>
    </table>
</div>
{{>layout/footer}}

transactions → 거래 내역 리스트