23. 계좌 상세보기 - 2단계(기능, 동적쿼리 구현)

💡 학습 목표 사용자 요청 list.jsp 에서 해당 계좌 번호 선택 - (list.jsp 링크 수정 해야 함) detail.jsp 만들기 account/list.jsp 파일에 링크 추가 하기 계좌 상세 보기 기능 구현 AccountController 주소 설계 및 코드 추가 거래 내역 쿼리 확인 후 DTO 설계 - HistoryDTO AccountService 상세 보기 기능 구현 단일 계좌 검색 기능 추가 거래 내역 확인 기능 추가 (동적 쿼리 생성) utils/TimestampUtil 클래스 추가 - 시간 포맷 기능 #,### 금액 단위 포맷 기능 추가 - HistoryDto 클래스에 기능 추가

 

코드상에서 사용할 쿼리 다시 확인

-- 코드상에서 사용할 쿼리 생성 
-- 출금에 대한 쿼리 출력 
-- receiver : 금액을 받는 대상, 
-- 기능적으로 하나의 JSP 페이지에서 전체 쿼리에 대한 결과 집합에 
-- 컬럼명을 동일하게 사용할 수 있도록 쿼리를 수정합니다 (같은 모델 클래스에 담을 예정)
-- 출금에는 AMT 출금, 1111 ---> 2222 이체 
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 = 1; 



-- 입금에 대한 쿼리 출력 ( AMT 입금, 다른계좌에서 --> 1111계 받거나) 
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 = 1;



-- 입,출금 전체 쿼리 
select h.id, h.amount,
 case 
    	when h.w_account_id = 1 then (h.w_balance) 
        when h.d_account_id = 1 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 = 1 OR h.d_account_id = 1;

select * from history_tb

 

 

1. detail.jsp 만들기

계좌 상세 보기 화면은 계좌 목록 페이지에서 존재하는 하나의 계좌 번호를 선택했을 때 DB에서 데이터를 조회하고 결과를 화면에 출력해야 합니다. 한 번에 작업을 하면 어려움이 있을 수 있으니 기본 화면부터 만들고 기능을 추가하도록 합시다.

계좌 상세 보기 화면은 계좌 목록 페이지에서 존재하는 하나의 계좌 번호를 선택했을 때 DB에서 데이터를 조회하고 결과를 화면에 출력해야 합니다. 한 번에 작업을 하면 어려움이 있을 수 있으니 기본 화면부터 만들고 기능을 추가하도록 합시다.

 

샘플 화면 확인

Table 태그와 부트스트랩4 을 활용하여 약간에 CSS 를 추가 하겠습니다.

 

 

 

2. account/list.jsp 파일에 링크 추가 하기

account/list.jsp 파일에 링크 추가 하기

				<tbody>
					<c:forEach  var="account" items="${accountList}">
						<tr>
							<td><a href="/account/detail/${account.id}?type=all">${account.number}</a></td>
							<td>${account.balance}</td>
						</tr>
					</c:forEach>
				</tbody>

<td><a href="/account/detail/${account.id}?type=all">${account.number}</a></td>

 

 

 

3. 계좌 상세 보기 기능 구현

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) {
		
		// 인증검사 추후 추가 
		
		System.out.println("@PathVariable :  " + accountId);
		System.out.println("@RequestParam :  " + type);
		return "account/detail";
	}

 

 

 

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, 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);
		}
		
		Account account = accountService.readAccountById(accountId);
		List<HistoryAccount> historyList = accountService.readHistoryByAccountId(type, accountId);
		
		
		model.addAttribute("account", account);
		model.addAttribute("historyList", historyList);
		return "account/detail";
	}

 

 

 

detail.jsp

<%@ 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">
			길동님 계좌<br> 계좌번호 : xxxxxxx<br> 잔액 : xxxxx 원 
		</div>
		<br>
		<div>
			<a href="/account/detail/1?type=all" class="btn btn-outline-primary" >전체</a>&nbsp;
			<a href="/account/detail/1?type=deposit" class="btn btn-outline-primary" >입금</a>&nbsp;
			<a href="/account/detail/1?type=withdrawal" class="btn btn-outline-primary" >출금</a>&nbsp;
		</div>
		<br>
		<table class="table table-striped">
			<thead>
				<tr>
					<th>날짜</th>
					<th>보낸이</th>
					<th>받은이</th>
					<th>입출금 금액</th>
					<th>계좌잔액</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<th>yyyy-mm-dd 11:20:11</th>
					<th>ATM</th>
					<th>1111</th>
					<th>10,000</th>
					<th>5,000,000</th>
				</tr>
			</tbody>
			
		</table>
	</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"%>

: 위 코드와 그림 상세보기에서 전체(all),입금(deposit),출금(withdrawal)은 같은 화면에서 사용자 선택에 따라 다른 결과 화면이 출력이 되어야 합니다. (동적 쿼리를 사용해서 구현 할 예정 입니다.)

 

 

 

detail.jsp 최종 코드

<%@ 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>
	
	<c:choose>
		<c:when test="${accountList != null}">
			<%-- 계좌 존재 : html 주석을 사용하면 오류 발생 (jstl 태그 안에서)  --%>
			<table class="table">
				<thead>
					<tr>
						<th>계좌 번호</th>
						<th>잔액</th>
					</tr>
				</thead>
				<tbody>
					<c:forEach  var="account" items="${accountList}">
						<tr>
							<td><a href="/account/detail/${account.id}?type=all">${account.number}</a></td>
							<td>${account.balance}</td>
						</tr>
					</c:forEach>
				</tbody>	
			</table>
					
		</c:when>
		<c:otherwise>
			<div class="jumbotron display-4">
				<h5>아직 생성된 계좌가 없습니다.</h5>
			</div>
		</c:otherwise>
	</c:choose>
		
</div>
<!-- end of col-sm-8  -->
</div>
</div>
<!-- end of content.jsp(xxx.jsp)   -->

<!-- footer.jsp  -->
<%@ include file="/WEB-INF/view/layout/footer.jsp"%>

 

 

4. AccountController 주소 설계 및 코드 추가

AccountRepository에 추상 메서드 추가

💡 의존성 역전 원칙(Dependency Inversion Principle, DIP)에 대한 생각 프로그래밍은 현실 세계의 논리와 구조를 코드로 변환하는 과정이라고 할 수 있습니다. 이 과정에서 "인터페이스 중심 설계"는 중요한 개념 중 하나입니다. 이를 "역할과 구현"이라는 관점으로 이해할 수 있습니다. 예를 들어, "로미오와 줄리엣"이라는 연극을 생각해보면, 여기에는 '로미오'라는 역할이 있고, 이 역할을 수행하는 구체적인 배우가 있습니다. "인터페이스로 설계한다"는 것은, 역할(인터페이스)은 정의되어 있지만, 그 역할을 구현하는 구체적인 주체(구현체)는 바뀔 수 있다는 의미입니다. 즉, '로미오'라는 역할은 동일하지만, 그 역할을 수행하는 배우는 변경될 수 있으며, 배우가 변경되더라도 연극은 계속해서 진행될 수 있습니다. 이는 소프트웨어 설계에서 인터페이스를 통해 '역할'을 정의하고, 이를 다양한 '구현체'로 실현할 수 있음을 의미합니다.

도전 과제 - 자바의 SOLID 원칙에 대해 간략하게 조사해보세요

 

 

 

AccountRepository - 역할(추상메서드 추가)

package com.tenco.bank.repository.interfaces;

import java.util.List;

import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Param;

import com.tenco.bank.repository.model.Account;

//AccountRepository 인터페이스와 account.xml 파일을 매칭 시킨다. 
@Mapper 
public interface AccountRepository {
	public int insert(Account account);
	public int updateById(Account account);
	public int deleteById(Integer id, String name);
	// interface 파마리터명과 xml 에 사용할 변수명을 다르게 사용해야 된다면 @param 애노테이션을 
	// 사용할 수 있다. 그리고 2개 이상에 파라미터를 사용할 경우 반드시 사용하자! 
	public List<Account> findByUserId(@Param("userId") Integer principalId);
	
	// 코드 추가 예정
	public Account findByNumber(@Param("number") String id);
	public Account findByAccountId(Integer accountId);
	
}

 

 

 

HistoryAccount

@Data
@NoArgsConstructor
@AllArgsConstructor
@Builder
@ToString
public class HistoryAccount {
	
	private Integer id; 
	private Long amount;
	private Long balance; 
	private String sender; 
	private String receiver; 
	private Timestamp createdAt;
}

@Mapper
public interface HistoryRepository {
	// ... 생략 
	// 코드 추가 부분
	public List<HistoryAccountDTO> findByAccountIdAndTypeOfHistory(@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}
		</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}
		</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}
		</if>
	</select>