리뷰에서 별점 주기

Structure of Knowledge·2021년 3월 5일
0
  • 상품 상세 페이지의 리뷰는 로그인한 유저가 한 개의 리뷰만 작성할 수 있다.
  • 작성한 리뷰는 가장 위에 있는 리뷰 입력 form에서 보여지고 밑으로 모든 리뷰가 리스팅된다.
  • 작성한 리뷰는 리뷰 입력 form에서 수정과 삭제가 가능하다.
  • 로그인 유저가 리뷰를 작성하면, ajax로 처리하고 모든 리뷰 부분이 갱신된다.
  • 별점 매기는 부분에 걸어놓은 스크립트가 ajax로 갱신된 이후에도 유지되도록 해야한다.
<!-- 로그인한 유저인 경우 이 상품에대해 리뷰를 남겼는지 확인하고, 변수로 지정함. -->
<sec:authorize access="isAuthenticated()">
    <sec:authentication property="principal.username" var="loginUser"/>
    <c:forEach items="${reviewResult.reviewList}" var="review">
	<c:if test="${review.m_email == loginUser}">
	     <c:set value="${review}" var="loginUserReview"></c:set>
	</c:if>
    </c:forEach>
</sec:authorize>


<div class="rating">
    <c:forEach begin="1" end="5" var='k'>    
	<c:if test="${empty loginUserReview}">
	    <i id="star${k}" class="far fa-star"></i>
	</c:if>
	<c:if test="${k <= loginUserReview.br_rate}">
	    <i id="star${k}" class="fa fa-star"></i>	<!-- 채워진 별 -->
	</c:if>
	<c:if test="${k > loginUserReview.br_rate}">
	    <i id="star${k}" class="far fa-star"></i>   <!-- 빈 별 -->
	</c:if>
    </c:forEach>
    <sec:authorize access="isAnonymous()">
	<input type="hidden" value="" name="br_rate" id="your-rate"> 
    </sec:authorize>
    <sec:authorize access="isAuthenticated()">
	<c:if test="${empty loginUserReview }">
	    <input type="hidden" value="" name="br_rate" id="your-rate">
	</c:if>
	<c:if test="${!empty loginUserReview }">
	    <input type="hidden" value="${loginUserReview.br_rate }" name="br_rate" id="your-rate">
	</c:if>
     </sec:authorize>
</div>
// 허접한, 별점 매기는 스크립트
    $("#star1").click(function(){
        $("#star1").attr("class","fa fa-star");
        $("#star2").attr("class","far fa-star");
        $("#star3").attr("class","far fa-star");
        $("#star4").attr("class","far fa-star");
        $("#star5").attr("class","far fa-star");
        $("#your-rate").attr("value",1);
    });
    $("#star2").click(function(){
        $("#star1").attr("class","fa fa-star");
        $("#star2").attr("class","fa fa-star");
        $("#star3").attr("class","far fa-star");
        $("#star4").attr("class","far fa-star");
        $("#star5").attr("class","far fa-star");
        $("#your-rate").attr("value",2);
    });
    ......
    
profile
객체와 제어, 비전공자 개발자 되기

0개의 댓글