10/24 : travel 패키지 분리 / travelList.jsp / 일정 상세보기 로직 구현

티스토리 뷰

Project 여담/4주차

10/24 : travel 패키지 분리 / travelList.jsp / 일정 상세보기 로직 구현

xoo | 수진 2023. 10. 24. 20:43

1️⃣ travel 패키지 분리

어제 작성했던 mypage안의 일정보관함 로직을 성격 상 travel 패키지로 따로 분리하는게 낫겠다는 판단이 들어 새로 생성해 이동시켰다.

기본적이지만 프로젝트의 패키지를 잘 구분하여 사용하는 것도 중요하다고 생각된다.

관련된 기능이나 역할을 수행하는 클래스들을 동일한 패키지에 배치함으로써 프로젝트의 구조가 더욱 명확해지고 모듈화되어 관리하기 쉬워진다. 유지보수성이 향상 되는 것은 당연하고, 협업도 원활해진다.

이제 나의 여행 일정과 관련된 모든 클래스들은 travel 패키지로 관리할 생각이고

일정 만들기 / 일정 보관함 / 일정 상세보기 / 일정 삭제하기 정도가 포함될 것 같다.

2️⃣ travelList.jsp

부트스트랩을 활용해서 travelList.jsp를 작성했다.

UI구상한 것과 최대한 비슷하게 구현하려고 했는데...한계는 있었다.

✅ travelList.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>여 담; 여행을 담다</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> 
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
      crossorigin="anonymous"></script> 
    <!-- alert 커스텀 -->
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.9.0/dist/sweetalert2.min.css">
	<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.9.0/dist/sweetalert2.all.min.js"></script>
	<style>
		* {
			font-family: 'SUIT-Medium';
		}
		.card-text {
    	margin-bottom: 1px; 
    	font-family: Gothic;
    	color: #808080;
    	font-size: 12px;
		}
		
		.card-title {
		font-family: Gothic;
		font-weight: 800;
		}
		
		.card {
		    width: 18rem; /* 카드의 너비를 일정한 값으로 설정 */
		}
		
		.card-img-top {
		    height: 210px; /* 이미지의 높이를 일정한 값으로 설정 */
		    object-fit: cover; /* 이미지 비율 유지하며 카드 이미지 영역 가득 채우기 */
		}
		
		.card-footer {
			font-weight: bold;
		}
		.card-footer:link {
		  color : black;
		  text-decoration: none;
		  transition: background 0.5s ease-in-out;
		}
		.card-footer:visited {
		  color : black;
		  text-decoration: none;
		  transition: background 0.5s ease-in-out;
		}
		.card-footer:hover {
		  color : black;
		  text-decoration: none;
		  background: #D9D9D9;
		}
		.card-footer:active {
		  color : black;
		  text-decoration: none;
		  transition: background 0.1s ease-in-out;
		}
	</style>
	
   <script>
	   $(document).ready(function() {
		    $(".deleteBtn").on("click", function() {
		        var travelID = $(this).attr("data-travelID");
                
	 $(document).ready(function() {
        $(".deleteBtn").on("click", function() {
            var travelID = $(this).attr("data-travelID");
            var confirmed = confirm("정말 삭제하시겠습니까?");   //확인 메세지 표시. true or false 값을 반환.
            if (confirmed) {    //확인을 누른 경우에만 삭제 요청
         	   location.href="travelDel?travelID="+travelID;
            }
        });
    }); 
      
   </script>	
</head>
<body>

	<div id="header">
		<jsp:include page="../common/top.jsp" flush="true" />
	</div>

<!-- contents -->  

    <div class="centered-title text-center mt-5">
        <h2 style="font-weight: 600;">일정 보관함</h2>
    </div>
    
<div class="container">
    <div class="d-flex justify-content-end mt-5">
        <button type="button" class="btn btn-outline-primary" onclick="window.location.href='/app/loginCheck/pickLocation'">새 일정 만들기</button>
    </div>
    <br>
    <br>
    <div class="container" style="min-height: 70vh;">
        <div class="row justify-content-center">
            <c:forEach var="travel" items="${pageDTO2.list}" varStatus="status">
          	  <div class="col-md-3">  
                <div class="card text-center mb-5" style="width: 18rem;">
                   <img id="travelImage${travel.travelID}" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title" id="travelTitle">${travel.travelTitle}</h5>
                        <p class="card-text">여행 시작&nbsp;&nbsp;&nbsp;${travel.SDate.substring(0, 10)}</p>
                        <p class="card-text">여행 끝&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;${travel.EDate.substring(0, 10)}</p>
                        <br>
                        <a href="travelRetrieve?travelID=${travel.travelID}" class="btn btn-primary btn-sm">일정 보러가기</a>
                   		<button type="button" class="deleteBtn btn btn-danger btn-sm" data-travelID="${travel.travelID}">삭제</button>
                    </div>
                    <a href="../WriteTravel?travelID=${travel.travelID}" class="card-footer">
						게시판 등록
                    </a>
                </div>
              </div>
	 </c:forEach>
  </div>
</div>   
</div>
</body>
</html>

<div class="col-md-4"> 및 하위 요소는 부트스트랩 그리드 시스템을 사용하여 화면을 분할하는 역할을 한다.
<c:forEach> 태그를 사용하여 ${travelList}의 각 항목을 순환하도록 했다. ${travel}은 각 순환 반복에 대한 현재 여행 계획 객체를 나타내게 된다.
${travel.areaCode} 및 ${travel.travelTitle}는 해당 여행 계획의 지역 코드와 여행 제목을 나타낸다. 뒤에 '서울' 같은 글자는 내가 임의로 넣은 것이다.
<a href="travelDetail?userID=${travel.travelID}"> 요소는 "일정 보러가기" 버튼으로, 이 버튼을 클릭하면 해당 여행 계획의 세부 정보 페이지로 이동한다.
${travel.travelID}는 각 여행 계획의 고유한 ID 또는 식별자를 나타내며, 이를 사용하여 링크를 생성한다.

즉, 이 코드는 ${travelList} 목록에서 여행 계획을 순환하고, 각 계획에 대한 카드를 생성한다. 이 카드는 해당 여행 계획의 정보를 포함하고 있으며, "일정 보러가기" 버튼을 클릭하면 해당 여행 계획의 세부 정보 페이지로 이동하게 된다!

결과)

3️⃣ 일정 상세보기 로직 구현

✅ travelController

@GetMapping("/travelRetrieve") : HTTP GET 요청에 대한 URL 매핑을 지정. 클라이언트가 "/travelRetrieve" 경로로 GET 요청을 보낼 때 이 메소드가 호출된다.
public String travelRetrieve(@RequestParam int travelID, Model m): 이 메소드는 travelID와 Model 객체를 파라미터로 받는다.
- @RequestParam int travelID : 이 파라미터는 요청의 쿼리 문자열에서 "travelID" 매개 변수를 추출하고 이를 메소드 내부에서 사용할 수 있게 한다. 여행 계획의 고유 ID를 나타낸다.
- Model m : 이 파라미터는 뷰에 데이터를 전달하기 위한 Spring의 Model객체이다.
TravelDTO dto = service.travelRetrieve(travelID); : 여행 계획의 세부 정보를 검색하는 service.travelRetrieve(travelID) 메소드를 호출하고 결과를 dto 객체에 저장한다. travelID는 메소드의 파라미터로 전달된 여행 계획의 고유 ID를 사용하여 검색된다.
return "mypage/travelRetrieve"; : 뷰 이름 "mypage/travelRetrieve"를 반환하며, Spring은 이 뷰 페이지를 렌더링하여 클라이언트에게 표시한다.

✅ travelDAO

public TravelDTO travelRetrieve(int travelID) : TravelDTO 라는 객체를 반환하고, travelID 라는 정수형 파라미터를 받는다. 이 파라미터는 조회하려는 여행 계획의 고유 ID를 나타낸다.
return session.selectOne("TravelMapper.travelRetrieve", travelID); : SQL 매퍼 프레임워크를 사용한 데이터베이스에서 데이터를 검색. 그 결과를 TravelDTO 객체로 반환한다.

✅ travelService

✅ travelServiceImpl

TravelDTO dto = dao.travelRetrieve(travelID); : dao 객체를 사용하여 데이터베이스에서 여행 계획의 세부 정보를 검색하고, 그 결과를 TravelDTO 객체인 dto에 저장한다.
return dto; : 검색한 여행 계획의 세부 정보가 저장된 dto 객체를 반환한다.

✅ travelMapper

데이터베이스에서 특정 travelID를 가진 여행 계획의 세부 정보를 검색하기 위한 SQL 쿼리 이다.
결과는 TravelDTO 객체로 매핑된다.

✅ travelRetrieve.jsp

travelRetrieve.jsp 는 일정만들기가 구현되고 나면 비슷한 ui로 구현할 생각이다!

저작자표시 비영리 변경금지

'Project 여담 > 4주차' 카테고리의 다른 글

10/27 : unable to start within 45 seconds / 회원 탈퇴 Transaction 처리 / 탈퇴 프로세스 에러 해결 (0)	2023.10.27
10/26 : 일정 삭제 undefined 400 에러 / 일정 삭제 기능 구현 (0)	2023.10.26
10/25 : 일정보관함 목록 테스트 / 일정 삭제하기 로직 구현 (0)	2023.10.25
10/23 : 일정보관함 로직 구현 / loginCheckInterceptor 적용 (0)	2023.10.23

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2024/05 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

글 보관함

< Xoo | Log >

티스토리 뷰