상세페이지에 상세설명 추가

기여·2024년 8월 16일
0

소소한 개발팁

목록 보기
73/103

학원에서 배워본 Summernote 활용.
그런데 그때처럼 HashMap<String, Object> 쓰지 않아도 되더라~

  • DB products 테이블에 pdetail (longtext) 필드 추가
  • Vo에는 pdetail (String) 추가
  • Mapper sql문에도 pdetail values #{pdetail} 추가
  • Service엔 변동 없음
  • Ctrl:
@PostMapping("addPrd")
// 아래 1줄 추가
vo.setPdetail(request.getParameter("pdetail"));
...

@GetMapping("viewPrd") //상품 상세보기도 그대로다.
	public String viewPrd(Model model, PrdVo vo) {
		System.out.println("viewPrd code: " + vo.getProduct_code());		
		
		// 모델에 제품 정보 추가
	    model.addAttribute("product", prdSvc.viewPrd(vo));
	    
	    //사용자 로그인 여부에 따라 구매 버튼 출력 결정
		String uid=(String) session.getAttribute("username");
		vo.setUid(uid);
		
		return "prd/viewPrd";
	}
  • 상품등록 일부 양식:
<!-- libraries(jQuery, bootstrap) -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">

<!-- summernote css/js -->
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">

<script>
   $(document).ready(function() {
	   $('#summernote').summernote({
           placeholder: '상세설명 작성할 부분입니다.',
           tabsize: 2,
           height: 300
       });

       // 콘솔에 summernote 인스턴스 출력
       console.log('summernote instance:', $summernote.summernote('code'));
   });
</script>

<textarea  id="summernote" name="pdetail">이렇게 활용할 수 있어요~</textarea>
  • 상세페이지 적용부분:
<div class="hadan" style="width: 900px; display: flex; flex-wrap: wrap; 
    justify-content: center; margin: 10px; padding: 10px;">               
        <div th:utext="${product.pdetail}"></div> <!-- `utext`를 사용하여 HTML 태그도 렌더링 -->
    </div><!-- hadan 끝 -->
profile
기기 좋아하는 여자

0개의 댓글