사전 기반 지식
- 부트스트랩의 그리드 시스템:
- 개념: 부트스트랩은 화면을 12개의 컬럼으로 나누어 레이아웃을 구성할 수 있도록 돕는 그리드 시스템을 제공합니다. col-sm-8은 작은 화면에서 8개의 컬럼을 차지하는 레이아웃을 의미합니다.
- 사용 방법: col-sm-8, col-md-6 등의 클래스를 사용해 반응형 레이아웃을 쉽게 구성할 수 있습니다.
- 예제: col-sm-8은 12개의 그리드 중 8개를 차지하며, 이는 전체 화면의 약 66.67%입니다.
- 플렉스박스(Flexbox)와 중앙 정렬:
- 개념: 플렉스박스는 CSS의 레이아웃 모델로, 요소를 쉽게 정렬하고 배치하는 데 사용됩니다. 부트스트랩의 d-flex와 justify-content-center는 플렉스박스를 활용해 자식 요소를 수평 중앙에 정렬하는 데 사용됩니다.
- 사용 방법: d-flex를 부모 요소에 적용하고, justify-content-center를 추가하여 자식 요소를 중앙에 배치합니다.
- 페이징(Pagination) 구현:
- 개념: 페이징은 많은 양의 데이터를 여러 페이지로 나누어 보여주는 기법입니다. 사용자가 한 페이지에 표시할 데이터의 수를 지정하고, 나머지 데이터는 다음 페이지로 넘깁니다.
- 사용 방법: 현재 페이지 번호(currentPage)와 전체 페이지 수(totalPages)를 기반으로 페이징 링크를 생성합니다. 부트스트랩의 pagination 클래스를 사용해 시각적으로 구성합니다.
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!-- header.jsp -->
<%@ include file="/WEB-INF/view/layout/header.jsp"%>
<!-- start of content.jsp(xxx.jsp) -->
<div class="col-sm-8">
<h2>계좌 상세 보기(인증)</h2>
<h5>Bank App에 오신걸 환영합니다</h5>
<div class="bg-light p-md-5">
<div class="user--box">
${principal.username}님 계좌<br> 계좌번호 : ${account.number}<br> 잔액 : ${account.formatKoreanWon(account.balance)}
</div>
<br>
<div>
<a href="/account/detail/${account.id}?type=all" class="btn btn-outline-primary" >전체</a>
<a href="/account/detail/${account.id}?type=deposit" class="btn btn-outline-primary" >입금</a>
<a href="/account/detail/${account.id}?type=withdrawal" class="btn btn-outline-primary" >출금</a>
</div>
<br>
<table class="table table-striped">
<thead>
<tr>
<th>날짜</th>
<th>보낸이</th>
<th>받은이</th>
<th>입출금 금액</th>
<th>계좌잔액</th>
</tr>
</thead>
<tbody>
<c:forEach var="historyAccount" items="${historyList}">
<tr>
<th>${historyAccount.timestampToString(historyAccount.createdAt)}</th>
<th>${historyAccount.sender}</th>
<th>${historyAccount.receiver}</th>
<th>${historyAccount.formatKoreanWon(historyAccount.amount)}</th>
<th>${historyAccount.formatKoreanWon(historyAccount.balance)}</th>
</tr>
</c:forEach>
</tbody>
</table>
<br>
<!-- Pagination -->
<div class="d-flex justify-content-center" >
<ul class="pagination">
<!-- Previous Page Link -->
<li class="page-item <c:if test='${currentPage == 1}'>disabled</c:if>">
<a class="page-link" href="?type=${type}&page=${currentPage - 1}&size=${size}" >Previous</a>
</li>
<!-- Page Numbers -->
<!-- [Previous] 1 2 3 4 5 6 7 8 [Next] -->
<c:forEach begin="1" end="${totalPages}" var="page" >
<li class="page-item <c:if test='${page == currentPage}'>active </c:if>">
<a class="page-link" href="?type=${type}&page=${page}&size=${size}" >${page}</a>
</li>
</c:forEach>
<!-- Next Page Link -->
<li class="page-item <c:if test='${currentPage == totalPages}'>disabled</c:if>" >
<a class="page-link" href="?type=${type}&page=${currentPage + 1}&size=${size}" >Next</a>
</li>
</ul>
</div>
</div>
</div>
<!-- end of col-sm-8 -->
</div>
</div>
<!-- end of content.jsp(xxx.jsp) -->
<!-- footer.jsp -->
<%@ include file="/WEB-INF/view/layout/footer.jsp"%>
AccountController - 코드 추가 및 수정
/**
* 계좌 상세 보기 페이지
* 주소 설계 : http://localhost:8080/account/detail/1?type=all, deposit, withdraw
* @return
*/
@GetMapping("/detail/{accountId}")
public String detail(@PathVariable(name = "accountId") Integer accountId,
@RequestParam(required = false, name ="type") String type,
@RequestParam(name ="page", defaultValue = "1" ) int page,
@RequestParam(name ="size", defaultValue = "2" ) int size,
Model model) {
// 인증검사
User principal = (User) session.getAttribute(Define.PRINCIPAL); // 다운 캐스팅
if (principal == null) {
throw new UnAuthorizedException(Define.ENTER_YOUR_LOGIN, HttpStatus.UNAUTHORIZED);
}
// 유효성 검사
List<String> validTypes = Arrays.asList("all", "deposit", "withdrawal");
if(!validTypes.contains(type)) {
throw new DataDeliveryException("유효하지 않은 접근 입니다", HttpStatus.BAD_REQUEST);
}
// 페이지 개수를 계산하기 위해서 총 페이지 수를 계산해주어한다.
int totalRecords = accountService.countHistoryByAccountIdAndType(type, accountId);
int totalPages = (int)Math.ceil((double)totalRecords / size);
Account account = accountService.readAccountById(accountId);
List<HistoryAccount> historyList = accountService.readHistoryByAccountId(type, accountId, page, size);
2Page -> 2개
1
2
3
4
5
11
model.addAttribute("account", account);
model.addAttribute("historyList", historyList);
model.addAttribute("currentPage", page);
model.addAttribute("totalPages", totalPages);
model.addAttribute("type", type);
model.addAttribute("size", size);
return "account/detail";
}
AccountService - 코드 추가 및 수정
/**
* 단일 계좌 거래 내역 조회
* @param type = [all, deposit, withdrawal]
* @param accountId (pk)
* @return 전체, 입금, 출금 거래내역(3가지 타입) 반환
*/
// @Transactional
public List<HistoryAccount> readHistoryByAccountId(String type, Integer accountId, int page, int size) {
List<HistoryAccount> list = new ArrayList<>();
int limit = size; // 2
// 1 * 2 = 2 , 1, 2, 3, 3
int offset = (page - 1) * size;
list = historyRepository.findByAccountIdAndTypeOfHistory(type, accountId, limit, offset);
return list;
}
// 해당 계좌와 거래 유형에 따른 전체 레코드 수를 반환하는 메서드
public int countHistoryByAccountIdAndType(String type, Integer accountId) {
return historyRepository.countByAccountIdAndType(type, accountId);
}
AccountRepository - 코드 추가 및 수정
//코드 추가 예정 - 모델을 반드시 1:1 엔터티에 매핑을 시킬 필요는 없다.
// 조인 쿼리, 서브쿼리, 동적쿼리 , type=all, de.., accountId
public List<HistoryAccount> findByAccountIdAndTypeOfHistory(@Param("type") String type,
@Param("accountId") Integer accountId,
@Param("limit") int limit,
@Param("offset") int offset);
public int countByAccountIdAndType(@Param("type")String type, @Param("accountId")Integer accountId);
history.xml - 쿼리 수정 및 추가
<select id="findByAccountIdAndTypeOfHistory" resultType="com.tenco.bank.repository.model.HistoryAccount">
<if test="type == 'all'">
select h.id, h.amount,
case
when h.w_account_id = #{accountId} then (h.w_balance)
when h.d_account_id = #{accountId} then (h.d_balance)
end as balance,
coalesce(cast(wa.number as char(10)), 'ATM') as sender,
coalesce(cast(da.number as char(10)), 'ATM') as receiver,
h.created_at
from history_tb as h
left join account_tb as wa on h.w_account_id = wa.id
left join account_tb as da on h.d_account_id = da.id
where h.w_account_id = #{accountId} OR h.d_account_id = #{accountId}
limit #{limit} offset #{offset}
</if>
<if test="type == 'deposit'">
select h.id, h.amount, h.d_balance as balance, h.created_at,
coalesce(CAST(wa.number as CHAR(10)) , 'ATM') as sender,
da.number as receiver
from history_tb as h
left join account_tb as wa on wa.id = h.w_account_id
left join account_tb as da on da.id = h.d_account_id
where h.d_account_id = #{accountId}
limit #{limit} offset #{offset}
</if>
<if test="type == 'withdrawal'">
select h.id, h.amount, h.w_balance AS balance, h.created_at,
coalesce(cast(da.number as CHAR(10)), 'ATM') as receiver,
wa.number as sender
from history_tb as h
left join account_tb as wa on wa.id = h.w_account_id
left join account_tb as da on da.id = h.d_account_id
where h.w_account_id = #{accountId}
limit #{limit} offset #{offset}
</if>
</select>
<select id="countByAccountIdAndType" resultType="int">
<if test="type == 'all'">
select count(*)
from history_tb as h
where h.w_account_id = #{accountId} OR h.d_account_id = #{accountId}
</if>
<if test="type == 'deposit'">
select count(*)
from history_tb as h
where h.d_account_id = #{accountId}
</if>
<if test="type == 'withdrawal'">
select count(*)
from history_tb as h
where h.w_account_id = #{accountId}
</if>
</select>
'Spring boot > Bank App 만들기' 카테고리의 다른 글
| 27.사용자 비밀번호 암호화 처리 (0) | 2024.09.25 |
|---|---|
| 26.intercepter 활용(인증검사 공통 처리) (0) | 2024.09.25 |
| 24.간단한 유틸 클래스 만들어 보기 (0) | 2024.09.25 |
| 23. 계좌 상세보기 - 2단계(기능,동적쿼리 구현) (0) | 2024.09.25 |
| 22. 계좌 상세보기 - 1단계(쿼리 학습) (0) | 2024.09.25 |
