[ Spring ] 게시판 상세조회

🥇 VS-Code [  jsp ] 

---

📺  JSP 본문 코드

   

   <section class="board-detail">  

            <!-- 제목 -->

            <h1 class="board-title">${board.boardTitle}  <span> - ${boardName}</span>    </h1>

            <!-- 프로필 + 닉네임 + 작성일 + 조회수 -->

            <div class="board-header">

                <div class="board-writer">

                    <!-- 프로필 이미지 -->

                    <c:choose>

                       <c:when test="${empty board.profileImage}">

                            <%-- 프로필 이미지가 없을 경우 기본이지미 출력 --%>

                            <img src="/resources/images/user.png">

                       </c:when>

                       <c:otherwise>

                            <%-- 프로필 이미지가 있을 경우 출력 --%>

                            <img src="${board.profileImage}">

                       </c:otherwise>

                    </c:choose>

                    <span>${board.memberNickname}</span>

                   

                    <!-- 좋아요 하트 -->

                    <span class="like-area">

                        <%-- 좋아요 누른적이 없거나, 로그인 X --%>

                        <c:if test="${empty likeCheck}" >

                            <i class="fa-regular fa-heart" id="boardLike"></i>

                        </c:if>

                         <c:if test="${!empty likeCheck}" >

                            <i class="fa-solid fa-heart" id="boardLike"></i>

                        </c:if>

                        <span>${board.likeCount}</span>

                    </span>

                </div>

                <div class="board-info">

                    <p> <span>작성일</span> ${board.boardCreateDate} </p>    

                    <!-- 수정한 게시글인 경우 -->

                    <c:if test="${!empty board.boardUpdateDate}" >

                         <p> <span>마지막 수정일</span>  ${board.boardUpdateDate} </p>  

                    </c:if>

                    <p> <span>조회수</span>  ${board.readCount} </p>                    

                </div>

            </div>

            <!-- 이미지가 있을 경우 -->

            <c:if test="${!empty board.imageList}">

                <!-- 썸네일 영역(썸네일이 있을 경우) -->

                <%--

                    - 이미지는 IMG_ORDER 오름차순으로 정렬 된다

                    - IMG_ORDER의 값이 0인 이미지가 썸네일이다.

                    -> imgaeList에 썸네일이 있다면

                       조회 되었을 때 IMG_ORDER가 0인 이미지가

                       imageList[0]에 저장 되었을 것이다.

                 --%>

                 <c:if test="${board.imageList[0].imageOrder == 0}" >

                    <h5>썸네일</h5>

                    <div class="img-box">

                        <div class="boardImg thumbnail">

                            <img src="${board.imageList[0].imagePath}${board.imageList[0].imageReName}">

                            <a href="${board.imageList[0].imagePath}${board.imageList[0].imageReName}"

                            download="${board.imageList[0].imageOriginal}">다운로드</a>        

                        </div>

                    </div>

                 </c:if>

            </c:if>

            <%-- 썸네일을 제외하고 나머지 이미지의 시작 인덱스 번호 --%>

            <%-- 썸네일이 있을경우 --%>

            <c:if test="${board.imageList[0].imageOrder == 0}">

                <c:set var="start" value="1"/>

            </c:if>

            <%-- 썸네일이 없을경우 --%>

            <c:if test="${board.imageList[0].imageOrder != 0}">

                <c:set var="start" value="0"/>

            </c:if>

            <%-- ${fn:length(board.imageList)} : imageList의 길이 --%>

            <!-- 일반 이미지가 있는 경우 -->

            <c:if test="${fn:length(board.imageList) > start}" >

                <!-- 업로드 이미지 영역 -->

                <h5>업로드 이미지</h5>

                <div class="img-box">

               

                <c:forEach var="i" begin="${start}" end="${fn:length(board.imageList) -1 }">

                    <%--

                        <c:set var="path" value="${board.imageList[i].imagePath}${board.imageList[i].imageReName}">

                        변수로 사용해도가능

                     --%>

                    <div class="boardImg">

                        <img src="${board.imageList[i].imagePath}${board.imageList[i].imageReName}">

                        <a href="${board.imageList[i].imagePath}${board.imageList[i].imageReName}"

                        download="${board.imageList[i].imageOriginal}">다운로드</a>                  

                    </div>

                </c:forEach>

                </div>

            </c:if>

            <!-- 내용   white-space: pre-wrap; : div안에 넣으면 pre태크처럼 사용가능 -->

            <div class="board-content">${board.boardContent}</div>

            <!-- 버튼 영역-->

            <div class="board-btn-area">

                <!-- 로그인한 회원과 게시글 작성자 번호가 같은 경우-->

                <c:if test="${loginMember.memberNo == board.memberNo}" >

                    <button id="updateBtn">수정</button>

                    <button id="deleteBtn">삭제</button>

                </c:if>

                <button id="goToListBtn">목록으로</button>

            </div>

        </section>

        <!-- 댓글 include-->

        <jsp:include page="comment.jsp"/>

    </main>

 

---

🥈 VS-Code [  js ] 

- 추가 적인 JS 작업은 필요하지 않고 바로 Spring으로 작업으러 넘어가면 된다.

---

🥉 Spring

⚠️ @ PathVaribal 을 사용할때 문제점 밑 해결 방법 ⚠️

- 문제점 : 요청 주소와 @PathVariable로 가져다 쓸 주소의 레벨이 같다면  구분하지 않고 모두 매핑되는 문제가 발생

                -> 요청을 했는데 원하는 메소드가 실행이 되지않는다.

- 해결방법 : @PathVariable 지정 시 정규 표현식 사용  -> { K : 정규표현식 }

                -> "{boardCode:[0-9]+}" : boardCode 는 1자리이상 숫자

📺 BoardController

- @PathVariable : 주소에 지정된 부분을 변수에 저장 + request scope 세팅

-  세션에서 LoginMember를 얻어오는 없으면 null, 있으면 회원정보 저장 * 필수적인건 아니라 required = false로 오류방지

// 게시글 상세 조회
	@GetMapping("/{boardCode}/{boardNo}")
	public String boardDetail( @PathVariable("boardCode") int boardCode
							 , @PathVariable("boardNo") int boardNo
							 , Model model
							 , RedirectAttributes ra // 리다이렉트 시 데이터 전달용 객체
			, @SessionAttribute(value ="loginMember", required = false) Member loginMember
			
			// 쿠키를 이용한 조회수 증가에서 사용
			, HttpServletRequest req
			, HttpServletResponse resp
			
			) throws ParseException {
		Map<String,Object> map = new HashMap<>();
		map.put("boardCode", boardCode);
		map.put("boardNo", boardNo);
		
		// 게시글 상세 조회 서비스 호출
		Board board = service.selectBoard(map);

📺 BoardService

📺  BoardServiceImpl

📺  BoardDAO

📺  board-mapper.xml