221212_데이트 장소 다이어리 제작 7_평점 기능 구현

해당 게시글은 개인 프로젝트인 "데이트 장소 다이어리 제작" 중
#30 "평점 기능 구현" 이슈를 다루고 있습니다.

1. 진행 사항

(1) 요약

• 별점 스타일 적용
• 평점 부여 / 수정 기능 구현

(2) 상세

• 별점은 라디오 버튼으로 구현하였으며 CSS를 적용

<li class="list-group-item" id="place-star">
 <div>
  <h6 class="my-0">평점</h6>
  <fieldset>
    <input type="radio" name="score" value=5 id="rate1"><label for="rate1">★</label></input>
    <input type="radio" name="score" value=4 id="rate2"><label for="rate2">★</label></input>
    <input type="radio" name="score" value=3 id="rate3"><label for="rate3">★</label></input>
    <input type="radio" name="score" value=2 id="rate4"><label for="rate4">★</label></input>
    <input type="radio" name="score" value=1 id="rate5"><label for="rate5">★</label></input>
  </fieldset>
 </div>

#place-star fieldset{
    display: inline-block;
    direction: rtl;
    border:0;
}

#place-star fieldset legend{
    text-align: right;
}

#place-star input[type=radio]{
    display: none;
}

#place-star label{
    font-size: 2em;
    color: transparent;
    text-shadow: 0 0 0 #f0f0f0;
}

#place-star label:hover{
    text-shadow: 0 0 0 rgba(250, 208, 0, 0.99);
}

#place-star label:hover ~ label{
    text-shadow: 0 0 0 rgba(250, 208, 0, 0.99);
}

#place-star input[type=radio]:checked ~ label{
    text-shadow: 0 0 0 rgba(250, 208, 0, 0.99);
}

• 평점의 경우 아예 찍지 않을 경우 '0' 값으로 입력됨
• 게시글 리스트 페이지에서 해당 게시글의 평점도 확인할 수 있도록 변경

2. 결과

• 게시글 리스트 상 게시글의 평점 확인
  
• 게시글 상세 페이지 상 평점 확인