JSP 분석
각 JSP가 어떤 데이터를 request attribute로 받는지 확인
index.jsp ➡ 결제 버튼 / 상품 선택
paymentSuccess.jsp ➡ 결제 완료 페이지
orderHistory.jsp ➡ 주문 내역 출력
paymentFail.jsp ➡ 주문 실패 페이지
index.jsp
<body>
<h2>테스트 상품 결제</h2>
<!-- 결제 내역 버튼 -->
<div class="history-wrapper">
<a href="${pageContext.request.contextPath}/OrderHistory.do" class="history-button">결제 내역 보기</a>
</div>
<!-- 상품 목록 가로 배치 -->
<div class="products-wrapper">
<div class="product-card">
<img src="images/kiki.jpg" alt="오리">
<div class="product-name">오리</div>
<div class="product-price">₩4,500</div>
<form action="https://jaxon-implorable-jocelynn.ngrok-free.dev/payMent/KakaoPayReady.do" method="post">
<input type="hidden" name="pid" value="P001">
<button type="submit" class="pay-button">구매하기</button>
</form>
</div>
<div class="product-card">
<img src="images/kiki2.jpg" alt="병아리">
<div class="product-name">병아리</div>
<div class="product-price">₩5,000</div>
<form action="https://jaxon-implorable-jocelynn.ngrok-free.dev/payMent/KakaoPayReady.do" method="post">
<input type="hidden" name="pid" value="P002">
<button type="submit" class="pay-button">구매하기</button>
</form>
</div>
(상품추가는 반복)
</div>
</body>
</html>
index 페이지에서는
테스트 상품 결제 페이지로
사용자가 상품을 보고 결제 버튼을 눌러 카카오페이로 결제할 수 있음
▪ JSP EL ${pageContext.request.contextPath} 사용
프로젝트 컨텍스트 경로 자동 적용
클릭시 OrderHistoryAction이 호출되고, 주문내역 페이지로 이동
▪ 상품 목록
가로 배치 카드 형태로 각 상품 표시
각 카드에는 :
1. 이미지, 2 이름, 3 가격, 4 결제 버튼
form action ➡ KakaoPayReady.do
서버 측 KakaoPayReadyAction 호출
pid 전송 ➡ 어떤 상품 결제인지 서버에서 확인
▪ 특징
각 상품마다 별도의 form
hidden input으로 pid를 보내서 서버에서 ProductDAO 조회 가능
▪ 결제 흐름
1. 사용자가 구매하기 버튼 클릭
2. form POST ➡ /KakaoPayReady.do 호출
3. 서버에서 pid 확인 ➡ ProductDAO에서 상품 정보 조회
4. 카카오페이 준비 API 호출(결제 요청)
5. 사용자 카카오페이 화면 ➡ 결제 완료
6. KakaoPayApproveAction ➡ 결제 승인 후 OrderDTO 생성, DB 저장
orderHistory.jsp
<body>
<h2>주문 내역</h2>
<a href="${pageContext.request.contextPath}/index.jsp" class="home-button">메인페이지</a>
<div class="order-list">
<c:forEach var="o" items="${order}">
<div class="order-item">
<img src="${pageContext.request.contextPath}/${o.imgURL}" alt="${o.productName}">
<div class="order-info">
<p><strong>상품명:</strong> ${o.productName}</p>
<p><strong>금액:</strong> ${o.orderPrice}원</p>
<p><strong>주문일:</strong> ${o.orderDate}</p>
</div>
</div>
</c:forEach>
</div>
</body>
</html>
주문 내역 페이지 (orderHistory.jsp)
사용자가 이전에 구매한 주문 내역을 확인할 수 있도록 구현
MVC 패턴에서 View 역할 수행
▪ ${pageContext.request.contextPath}
프로젝트 컨텍스트 경로 동적으로 적용
▪ 주문 목록 반복
<div class="order-list">
<c:forEach var="o" items="${order}">
<div class="order-item">
...
</div>
</c:forEach>
</div><c:forEach> → JSTL(JSP Standard Tag Library) 반복문
items="${order}" → Controller(Action)에서 전달한 request.setAttribute("order", orderList)
var="o" → 반복 시 각 OrderDTO 객체를 o로 참조
즉, 모든 주문(OrderDTO 객체)을 순회하며 HTML 출력
▪ 개별 주문 아이템 출력
<img src="${pageContext.request.contextPath}/${o.imgURL}" alt="${o.productName}">
<div class="order-info">
<p><strong>상품명:</strong> ${o.productName}</p>
<p><strong>금액:</strong> ${o.orderPrice}원</p>
<p><strong>주문일:</strong> ${o.orderDate}</p>
</div>
<img> → 주문한 상품 이미지 표시
alt → 이미지 대체 텍스트
${o.productName}, ${o.orderPrice}, ${o.orderDate} → OrderDTO 필드 사용
▪ 데이터 흐름
1. 사용자가 주문 내역 보기 버튼 클릭 ➡ OrderHistoryAction 호출
2. Action에서 DAO에서 주문 리스트 조회 → orderList
3. request.setAttribute("order", orderList)로 JSP에 전달
4. JSP에서 <c:forEach>로 반복 → 각 주문 출력
즉, Controller → Model → View 흐름 그대로 반영
paymentSuccess.jsp
<body>
<div class="success-card">
<h2>결제가 완료되었습니다!</h2>
<p>주문번호: ${sessionScope.tid}</p>
<p>감사합니다.</p>
<a href="${pageContext.request.contextPath}/index.jsp" class="home-button">메인페이지</a>
</div>
</body>
</html>
결제 성공 페이지
사용자가 결제를 완료했음을 확인
결제 완료 후 주문번호 표시 및 메인페이지 이동 버튼 제공
▪ <div class="success-card">
카드 형태로 결제 성공 메시지 시각화
▪ <p>주문번호: ${sessionScope.tid}</p>
${sessionScope.tid} → 세션에서 TID를 꺼내어 출력
KakaoPayApproveAction에서 결제 승인 후 session.setAttribute("tid", tid)로 저장했을 경우 사용 가능
▪ ${pageContext.request.contextPath}/index.jsp → 프로젝트 컨텍스트 자동 적용
${pageContext} : JSP에서 페이지 관련 정보를 담고 있는 내장 객체
request : 현재 클라이언트 요청 정보를 가진 HttpServletRequest 객체
contextPath : 웹 애플리케이션 컨텍스트 경로 반환
▶ JSP EL을 통해 프로젝트 컨텍스트 경로 + index.jsp
paymentFail.jsp
<body>
<div class="fail-card">
<h2>결제에 실패했습니다.</h2>
<a href="<%= request.getContextPath() %>/payMent/OrderHistory.do">주문 내역 보기</a>
<a href="${pageContext.request.contextPath}/index.jsp" class="home-button">메인페이지</a>
</div>
</body>
</html>
web.xml
FrontController mapping 확인
CharacterEncodingFilter 있는지
KakaoPay redirect_url 설정 영향 확인
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd">
<web-app id="WebApp_ID">
<display-name>payMent</display-name>
<servlet>
<servlet-name>FrontController</servlet-name>
<display-name>FrontController</display-name>
<description></description>
<servlet-class>controller.common.FrontController</servlet-class>
</servlet>
<!-- FrontController URL 패턴 매핑 -->
<servlet-mapping>
<servlet-name>FrontController</servlet-name>
<url-pattern>*.do</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
<welcome-file>index.xhtml</welcome-file>
<welcome-file>default.html</welcome-file>
<welcome-file>default.htm</welcome-file>
<welcome-file>default.jsp</welcome-file>
<welcome-file>default.xhtml</welcome-file>
</welcome-file-list>
</web-app>
FrontController 패턴 핵심 : 모든 요청을 하나의 서블릿에서 처리
기존처럼 개별 서블릿을 다 등록할 필요 없음
🔥 우선순위 순서 요약
- FrontController.java
- ActionFactory.java
- 각 Action (Ready → Approve → History)
- Dao (OrderDAO / ProductDAO)
- DTO
- JSP
- web.xml
'JSP' 카테고리의 다른 글
| 카카오 결제 API를 활용한 프로젝트의 전체 흐름 정리해보기 (0) | 2025.12.05 |
|---|---|
| 결제 API : ngrok 실행시키기 (0) | 2025.12.04 |
| 카카오톡 결제 API를 사용하여 작은 결제 프로젝트 만들어보기 - 1 (0) | 2025.12.03 |
| a태그와 JSP 내장객체 pageContext (0) | 2025.12.02 |
| Servlet vs Action의 역할 (0) | 2025.12.02 |