댓글에 별점기능(마우스 호버 효과)을 적용하여 게시글 평가하기
이곳 팁자료실과 스킨자료실에 유사한 기능을 갖는 자료들이 많이 올라와 있지만, 제가 사용하고자 했던 기능들은 없는 것 같아서 이 곳에 올려봅니다. (스킨자료실에 올리기에는 수정내용이 많지 않습니다.)
기본이 된 자료는 PIREE님의 게시물(그누보드 - p760031 - 댓글로 별점평가 게시판 스킨 > 그누보드5 스킨 (sir.kr))이며, 별점기능(Pure CSS 5-Star Rating (codepen.io), HTML, CSS로 별찍기 (Star Rating) (tistory.com)) 등을 참고하였습니다.
이 곳에는 고수님들이 많으시기에 따로 디자인하지 않고, 기본스킨에 적용하여 올립니다.
혹시나 코드에 문제가 있는 경우 확인부탁드립니다..
게시판 목록에서는 다음과 같습니다.
기본 테이블 레이아웃에서 cell 하나 추가하였습니다.
<게시판 목록>
글 내용을 보는 페이지는 다음과 같습니다.
<게시글 읽기 화면>
별점(평점)이 없는 경우에는 평가자에 포함하지 않고, 평균점수가 계산됩니다.
여분필드를 라디오(radio) 버튼으로 적용하였을 때 댓글 수정모드에서 값을 넘겨서 처리하는 부분이 상당히 골치가 아팠는데(그 전까지는 댓글 수정기능을 차단해놓고 사용했습니다..), 우연히 해결하여 이 글을 올릴 수 있게 되었습니다.
평점은 10점 만점으로 되어있으며, 마우스 hover 효과는 링크1의 테스트 페이지를 참고해주시면 됩니다.
따로 게시판 설정에서 손대실 부분은 스킨 디렉토리 정도이며,
사용하는 여분 필드는
게시글의 경우,
wr_8 : 평가자수
wr_9 : 평점총합
wr_10 : 평점평균
댓글의 경우,
wr_1 : 평가점수
입니다.
기본 스킨에 적용하다보니 모바일향 디자인은 적용되지 않지만, 해당기능은 모바일 페이지에서 동일하게 동작됩니다.
여러 곳에 잘 활용하셨으면 합니다^^ (개인적으로 영화 평점 게시판에 활용하고 있습니다.)
감사합니다 :)
덧) 2003년부터 제로보드4에 적용되는 영화게시판 스킨을 쭈욱 만들어 배포하다가 이번에 그누보드5로 변환하면서, 이곳저곳을 찾아보니 그누보드에도 제가 배포했었던 스킨을 컨버팅한 자료들이 많이 있었네요 ㅎㅎ
잠시나마 옛 추억이 떠오릅니다^^;
댓글 14개
3년 전
팁 감사 합니다.
3년 전
좋은 자료 고맙습니다.
꼼꼼이 살펴보고 적용해보겠습니다.^^
꼼꼼이 살펴보고 적용해보겠습니다.^^
3년 전
평점이 10점 만점으로 되어있는데요. 별갯수와 맞추기위해서 5점 만점으로 바꾸려면 어떻게 해야할까요?
write.comment.update.skin의
// 별점평가_점수
$rating2 = (int)$_POST['rating2'];
IF ( $rating2 > 0 && $rating2 < 11 )
{
에서 11을 6으로 바꾸니까 별표시에 마우스후버효과가 적용되지 않습니다.
감사합니다.
write.comment.update.skin의
// 별점평가_점수
$rating2 = (int)$_POST['rating2'];
IF ( $rating2 > 0 && $rating2 < 11 )
{
에서 11을 6으로 바꾸니까 별표시에 마우스후버효과가 적용되지 않습니다.
감사합니다.
3년 전
@김철용
line은 제가 올린 파일 기준입니다.
1. list.skin.php파일
■ 147 line
<div class="star-ratings-fill" style="width:<?php echo (int)($list[$i]['wr_10']*10); ?>%">
를 아래와 같이 수정합니다.
<div class="star-ratings-fill" style="width:<?php echo (int)($list[$i]['wr_10']*20); ?>%">
2. style.css파일
■ 376-381 line
/* add padding and positioning to half star labels */
.rating__label--half {
padding-right: 0;
margin-right: -0.6em;
z-index: 2;
}
위부분을 삭제합니다.
■ 395-401 line
/* make all stars orange on rating group hover */
.rating-group:hover .rating__label .rating__icon--star,
.rating-group:hover .rating__label--half .rating__icon--star { color: orange; }
/* make hovered input's following siblings grey on hover */
.rating__input:hover ~ .rating__label .rating__icon--star,
.rating__input:hover ~ .rating__label--half .rating__icon--star {color: #ddd;}
를
/* make all stars orange on rating group hover */
.rating-group:hover .rating__label .rating__icon--star { color: orange; }
/* make hovered input's following siblings grey on hover */
.rating__input:hover ~ .rating__label .rating__icon--star {color: #ddd;}
로 수정합니다.
3. view.skin.php파일
■ 105 line
<div class="star-ratings-fill" style="width:<?php echo (int)($view['wr_10']*10); ?>%">
를
<div class="star-ratings-fill" style="width:<?php echo (int)($view['wr_10']*20); ?>%">
로 수정합니다.
■ 112 line
<div class="star-info"><span class="av"><?php echo number_format($view['wr_10'],2) ?></span><span>/10</span> (<?php if($view['wr_8'] > 0) { echo $view['wr_8']."명 평가"; } else { echo "평가자 없음"; } ?>)</div>
에서
<div class="star-info"><span class="av"><?php echo number_format($view['wr_10'],2) ?></span><span>/5</span> (<?php if($view['wr_8'] > 0) { echo $view['wr_8']."명 평가"; } else { echo "평가자 없음"; } ?>)</div>
로 수정합니다.
4. view_comment.skin.php
■ 52 line
<div class="star-ratings-fill" style="width:<?php echo (int)($list[$i]['wr_1']*10); ?>%">
를
<div class="star-ratings-fill" style="width:<?php echo (int)($list[$i]['wr_1']*20); ?>%">
로 수정합니다.
line은 제가 올린 파일 기준입니다.
1. list.skin.php파일
■ 147 line
<div class="star-ratings-fill" style="width:<?php echo (int)($list[$i]['wr_10']*10); ?>%">
를 아래와 같이 수정합니다.
<div class="star-ratings-fill" style="width:<?php echo (int)($list[$i]['wr_10']*20); ?>%">
2. style.css파일
■ 376-381 line
/* add padding and positioning to half star labels */
.rating__label--half {
padding-right: 0;
margin-right: -0.6em;
z-index: 2;
}
위부분을 삭제합니다.
■ 395-401 line
/* make all stars orange on rating group hover */
.rating-group:hover .rating__label .rating__icon--star,
.rating-group:hover .rating__label--half .rating__icon--star { color: orange; }
/* make hovered input's following siblings grey on hover */
.rating__input:hover ~ .rating__label .rating__icon--star,
.rating__input:hover ~ .rating__label--half .rating__icon--star {color: #ddd;}
를
/* make all stars orange on rating group hover */
.rating-group:hover .rating__label .rating__icon--star { color: orange; }
/* make hovered input's following siblings grey on hover */
.rating__input:hover ~ .rating__label .rating__icon--star {color: #ddd;}
로 수정합니다.
3. view.skin.php파일
■ 105 line
<div class="star-ratings-fill" style="width:<?php echo (int)($view['wr_10']*10); ?>%">
를
<div class="star-ratings-fill" style="width:<?php echo (int)($view['wr_10']*20); ?>%">
로 수정합니다.
■ 112 line
<div class="star-info"><span class="av"><?php echo number_format($view['wr_10'],2) ?></span><span>/10</span> (<?php if($view['wr_8'] > 0) { echo $view['wr_8']."명 평가"; } else { echo "평가자 없음"; } ?>)</div>
에서
<div class="star-info"><span class="av"><?php echo number_format($view['wr_10'],2) ?></span><span>/5</span> (<?php if($view['wr_8'] > 0) { echo $view['wr_8']."명 평가"; } else { echo "평가자 없음"; } ?>)</div>
로 수정합니다.
4. view_comment.skin.php
■ 52 line
<div class="star-ratings-fill" style="width:<?php echo (int)($list[$i]['wr_1']*10); ?>%">
를
<div class="star-ratings-fill" style="width:<?php echo (int)($list[$i]['wr_1']*20); ?>%">
로 수정합니다.
3년 전
@김철용
■ 135-160 line
<div id="half-stars-example">
<div class="rating-group">
<input class="rating__input rating__input--none" checked name="rating2" id="rating2-0" value="0" type="radio">
<label aria-label="0 stars" class="rating__label" for="rating2-0"></label>
<label aria-label="0.5 stars" class="rating__label rating__label--half" for="rating2-05"><i class="rating__icon rating__icon--star fa fa-star-half"></i></label>
<input class="rating__input" name="rating2" id="rating2-05" value="1" type="radio">
<label aria-label="1 star" class="rating__label" for="rating2-10"><i class="rating__icon rating__icon--star fa fa-star"></i></label>
<input class="rating__input" name="rating2" id="rating2-10" value="2" type="radio">
<label aria-label="1.5 stars" class="rating__label rating__label--half" for="rating2-15"><i class="rating__icon rating__icon--star fa fa-star-half"></i></label>
<input class="rating__input" name="rating2" id="rating2-15" value="3" type="radio">
<label aria-label="2 stars" class="rating__label" for="rating2-20"><i class="rating__icon rating__icon--star fa fa-star"></i></label>
<input class="rating__input" name="rating2" id="rating2-20" value="4" type="radio">
<label aria-label="2.5 stars" class="rating__label rating__label--half" for="rating2-25"><i class="rating__icon rating__icon--star fa fa-star-half"></i></label>
<input class="rating__input" name="rating2" id="rating2-25" value="5" type="radio">
<label aria-label="3 stars" class="rating__label" for="rating2-30"><i class="rating__icon rating__icon--star fa fa-star"></i></label>
<input class="rating__input" name="rating2" id="rating2-30" value="6" type="radio">
<label aria-label="3.5 stars" class="rating__label rating__label--half" for="rating2-35"><i class="rating__icon rating__icon--star fa fa-star-half"></i></label>
<input class="rating__input" name="rating2" id="rating2-35" value="7" type="radio">
<label aria-label="4 stars" class="rating__label" for="rating2-40"><i class="rating__icon rating__icon--star fa fa-star"></i></label>
<input class="rating__input" name="rating2" id="rating2-40" value="8" type="radio">
<label aria-label="4.5 stars" class="rating__label rating__label--half" for="rating2-45"><i class="rating__icon rating__icon--star fa fa-star-half"></i></label>
<input class="rating__input" name="rating2" id="rating2-45" value="9" type="radio">
<label aria-label="5 stars" class="rating__label" for="rating2-50"><i class="rating__icon rating__icon--star fa fa-star"></i></label>
<input class="rating__input" name="rating2" id="rating2-50" value="10" type="radio">
</div>
</div>
를
<div id="half-stars-example">
<div class="rating-group">
<input class="rating__input rating__input--none" checked name="rating2" id="rating2-0" value="0" type="radio">
<label aria-label="0 stars" class="rating__label" for="rating2-0"></label>
<label aria-label="1 star" class="rating__label" for="rating2-10"><i class="rating__icon rating__icon--star fa fa-star"></i></label>
<input class="rating__input" name="rating2" id="rating2-10" value="1" type="radio">
<label aria-label="2 stars" class="rating__label" for="rating2-20"><i class="rating__icon rating__icon--star fa fa-star"></i></label>
<input class="rating__input" name="rating2" id="rating2-20" value="2" type="radio">
<label aria-label="3 stars" class="rating__label" for="rating2-30"><i class="rating__icon rating__icon--star fa fa-star"></i></label>
<input class="rating__input" name="rating2" id="rating2-30" value="3" type="radio">
<label aria-label="4 stars" class="rating__label" for="rating2-40"><i class="rating__icon rating__icon--star fa fa-star"></i></label>
<input class="rating__input" name="rating2" id="rating2-40" value="4" type="radio">
<label aria-label="5 stars" class="rating__label" for="rating2-50"><i class="rating__icon rating__icon--star fa fa-star"></i></label>
<input class="rating__input" name="rating2" id="rating2-50" value="5" type="radio">
</div>
</div>
로 수정합니다.
■ 341-375 line
switch (document.getElementById('save_comment_wr1_' + comment_id).value)
{
case '1':
rated_value = "rating2-05";
break;
case '2':
rated_value = "rating2-10";
break;
case '3':
rated_value = "rating2-15";
break;
case '4':
rated_value = "rating2-20";
break;
case '5':
rated_value = "rating2-25";
break;
case '6':
rated_value = "rating2-30";
break;
case '7':
rated_value = "rating2-35";
break;
case '8':
rated_value = "rating2-40";
break;
case '9':
rated_value = "rating2-45";
break;
case '10':
rated_value = "rating2-50";
break;
default:
rated_value = "rating2-0";
}
를
■ 135-160 line
<div id="half-stars-example">
<div class="rating-group">
<input class="rating__input rating__input--none" checked name="rating2" id="rating2-0" value="0" type="radio">
<label aria-label="0 stars" class="rating__label" for="rating2-0"></label>
<label aria-label="0.5 stars" class="rating__label rating__label--half" for="rating2-05"><i class="rating__icon rating__icon--star fa fa-star-half"></i></label>
<input class="rating__input" name="rating2" id="rating2-05" value="1" type="radio">
<label aria-label="1 star" class="rating__label" for="rating2-10"><i class="rating__icon rating__icon--star fa fa-star"></i></label>
<input class="rating__input" name="rating2" id="rating2-10" value="2" type="radio">
<label aria-label="1.5 stars" class="rating__label rating__label--half" for="rating2-15"><i class="rating__icon rating__icon--star fa fa-star-half"></i></label>
<input class="rating__input" name="rating2" id="rating2-15" value="3" type="radio">
<label aria-label="2 stars" class="rating__label" for="rating2-20"><i class="rating__icon rating__icon--star fa fa-star"></i></label>
<input class="rating__input" name="rating2" id="rating2-20" value="4" type="radio">
<label aria-label="2.5 stars" class="rating__label rating__label--half" for="rating2-25"><i class="rating__icon rating__icon--star fa fa-star-half"></i></label>
<input class="rating__input" name="rating2" id="rating2-25" value="5" type="radio">
<label aria-label="3 stars" class="rating__label" for="rating2-30"><i class="rating__icon rating__icon--star fa fa-star"></i></label>
<input class="rating__input" name="rating2" id="rating2-30" value="6" type="radio">
<label aria-label="3.5 stars" class="rating__label rating__label--half" for="rating2-35"><i class="rating__icon rating__icon--star fa fa-star-half"></i></label>
<input class="rating__input" name="rating2" id="rating2-35" value="7" type="radio">
<label aria-label="4 stars" class="rating__label" for="rating2-40"><i class="rating__icon rating__icon--star fa fa-star"></i></label>
<input class="rating__input" name="rating2" id="rating2-40" value="8" type="radio">
<label aria-label="4.5 stars" class="rating__label rating__label--half" for="rating2-45"><i class="rating__icon rating__icon--star fa fa-star-half"></i></label>
<input class="rating__input" name="rating2" id="rating2-45" value="9" type="radio">
<label aria-label="5 stars" class="rating__label" for="rating2-50"><i class="rating__icon rating__icon--star fa fa-star"></i></label>
<input class="rating__input" name="rating2" id="rating2-50" value="10" type="radio">
</div>
</div>
를
<div id="half-stars-example">
<div class="rating-group">
<input class="rating__input rating__input--none" checked name="rating2" id="rating2-0" value="0" type="radio">
<label aria-label="0 stars" class="rating__label" for="rating2-0"></label>
<label aria-label="1 star" class="rating__label" for="rating2-10"><i class="rating__icon rating__icon--star fa fa-star"></i></label>
<input class="rating__input" name="rating2" id="rating2-10" value="1" type="radio">
<label aria-label="2 stars" class="rating__label" for="rating2-20"><i class="rating__icon rating__icon--star fa fa-star"></i></label>
<input class="rating__input" name="rating2" id="rating2-20" value="2" type="radio">
<label aria-label="3 stars" class="rating__label" for="rating2-30"><i class="rating__icon rating__icon--star fa fa-star"></i></label>
<input class="rating__input" name="rating2" id="rating2-30" value="3" type="radio">
<label aria-label="4 stars" class="rating__label" for="rating2-40"><i class="rating__icon rating__icon--star fa fa-star"></i></label>
<input class="rating__input" name="rating2" id="rating2-40" value="4" type="radio">
<label aria-label="5 stars" class="rating__label" for="rating2-50"><i class="rating__icon rating__icon--star fa fa-star"></i></label>
<input class="rating__input" name="rating2" id="rating2-50" value="5" type="radio">
</div>
</div>
로 수정합니다.
■ 341-375 line
switch (document.getElementById('save_comment_wr1_' + comment_id).value)
{
case '1':
rated_value = "rating2-05";
break;
case '2':
rated_value = "rating2-10";
break;
case '3':
rated_value = "rating2-15";
break;
case '4':
rated_value = "rating2-20";
break;
case '5':
rated_value = "rating2-25";
break;
case '6':
rated_value = "rating2-30";
break;
case '7':
rated_value = "rating2-35";
break;
case '8':
rated_value = "rating2-40";
break;
case '9':
rated_value = "rating2-45";
break;
case '10':
rated_value = "rating2-50";
break;
default:
rated_value = "rating2-0";
}
를
3년 전
@김철용
switch (document.getElementById('save_comment_wr1_' + comment_id).value)
{
case '1':
rated_value = "rating2-10";
break;
case '2':
rated_value = "rating2-20";
break;
case '3':
rated_value = "rating2-30";
break;
case '4':
rated_value = "rating2-40";
break;
case '5':
rated_value = "rating2-50";
break;
default:
rated_value = "rating2-0";
}
로 수정합니다.
5. write_comment_update.skin.php
■ 13 line
IF ( $rating2 > 0 && $rating2 < 11 )
를
IF ( $rating2 > 0 && $rating2 < 6 )
으로 수정합니다.
한번 적용해보시고, 다시 글 남겨주세요^^
switch (document.getElementById('save_comment_wr1_' + comment_id).value)
{
case '1':
rated_value = "rating2-10";
break;
case '2':
rated_value = "rating2-20";
break;
case '3':
rated_value = "rating2-30";
break;
case '4':
rated_value = "rating2-40";
break;
case '5':
rated_value = "rating2-50";
break;
default:
rated_value = "rating2-0";
}
로 수정합니다.
5. write_comment_update.skin.php
■ 13 line
IF ( $rating2 > 0 && $rating2 < 11 )
를
IF ( $rating2 > 0 && $rating2 < 6 )
으로 수정합니다.
한번 적용해보시고, 다시 글 남겨주세요^^
3년 전
[http://sir.kr/data/editor/2204/4b342315a304ba2bc2bf81ff613cef72_1650929185_8151.png]
질문에 친절하게 답변해주셔서 고맙습니다.
이제 초보수준을 갓 벗어나서 저는 한 곳만 수정하면 될줄 알았는데 다 수정해야 되네요.
알려주신대로 하니까 평점이 5점만점으로 잘 나옵니다.
정말 대단하십니다.
css에서 별 반개를 나타낸는 코드를 삭제했어니까 댓글에서 입력할때 별에 마우스오버했을 때 별 반개는 표시되지 않는 것이 당연한 것 맞는지요?
별점표시를 저는 책소개 게시판이나 영화소개 게시판에 적용해보려고 하는데요.
별점표시를 영화소개게시판에 사용하고 계신다니 나중에 적용하다가 모르는 것있으면 문의 드려도 될런지 모르겠습니다.
감사합니다.
http://gratia.kr/bbs/board.php?bo_table=basic_rating
질문에 친절하게 답변해주셔서 고맙습니다.
이제 초보수준을 갓 벗어나서 저는 한 곳만 수정하면 될줄 알았는데 다 수정해야 되네요.
알려주신대로 하니까 평점이 5점만점으로 잘 나옵니다.
정말 대단하십니다.
css에서 별 반개를 나타낸는 코드를 삭제했어니까 댓글에서 입력할때 별에 마우스오버했을 때 별 반개는 표시되지 않는 것이 당연한 것 맞는지요?
별점표시를 저는 책소개 게시판이나 영화소개 게시판에 적용해보려고 하는데요.
별점표시를 영화소개게시판에 사용하고 계신다니 나중에 적용하다가 모르는 것있으면 문의 드려도 될런지 모르겠습니다.
감사합니다.
http://gratia.kr/bbs/board.php?bo_table=basic_rating
3년 전
@김철용 네^^ 5점 기준으로 했을 때는 마우스 hover는 별이 한개씩 변화되는게 맞습니다~
언제든지 문의주세요^^
언제든지 문의주세요^^
DawnDew
3년 전
감사합니다
그누배우자
3년 전
별점을 주고 수정을 할경우
별점이 초기화 되어있는데 이부분은 원래 그런것인지요 ㅠ
별점이 초기화 되어있는데 이부분은 원래 그런것인지요 ㅠ
3년 전
@그누배우자 혹시 테스트 게시판에서 테스트해보셨는지요? 아니면 테스트하신 주소가 있을까요? 수정시에도 초기화되지 않습니다만
내일의호랑이
3년 전
너무 좋은 기능이네요!! 혹시 글 목록에서 별점 숫자를 확인할 수는 없을까요??
그리고 회원별로 댓글 별점을 한번씩만 줄 수 있도록 변경하는 것도 가능할까요?
그리고 회원별로 댓글 별점을 한번씩만 줄 수 있도록 변경하는 것도 가능할까요?
3년 전
@내일의호랑이 스킨의 list.skin.php 파일에서 <?php echo number_format($list[$i]['wr_10'],1) ?> 변수를 입력하시면 목록에서도 점수를 표현하실 수 있습니다.
그리고 댓글 수 제한은 아래 글을 참고하시면 될 것 같습니다^^
https://sir.kr/qa/119707
그리고 댓글 수 제한은 아래 글을 참고하시면 될 것 같습니다^^
https://sir.kr/qa/119707
11개월 전
혹시 아직 이글을 보실지 모르겠지만 초보라서요 ㅠㅠ
다른 스킨이나 배경 페이지는 잘 로드가 되는데, 이 스킨만 오류가 뜨는데, 임시 방편으로 개별적으로 list.skin나 view.skin에 jquery를 넣어도 $ is not defined라고 오류가 뜨네요... 다운로드한 파일은 skin/board/basic-rating으로 넣었고, 게시판 설정에서는 head tail 다 설정되어있고, 게시판 스킨 지정도 basic-rating으로 해둔 상태입니다.
콘솔 오류 전문입니다.
board.php?bo_table=ng_cafe&wr_id=1:147 Uncaught ReferenceError: $ is not defined at board.php?bo_table=ng_cafe&wr_id=1:147:5
viewimageresize.js:96 Uncaught ReferenceError: jQuery is not defined at viewimageresize.js:96:3
board.php?bo_table=ng_cafe&wr_id=1:206 Uncaught ReferenceError: jQuery is not defined at board.php?bo_table=ng_cafe&wr_id=1:206:13
게시판 목록
그누보드5 팁자료실
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 공지 | 3년 전 | 4427 | ||
| 2094 | 3년 전 | 2681 | ||
| 2093 |
 소소한여자 |
3년 전 | 2620 | |
| 2092 |
 Innisfree |
3년 전 | 4105 | |
| 2091 | 3년 전 | 2749 | ||
| 2090 | 3년 전 | 3371 | ||
| 2089 |
슈퍼스타맨
|
3년 전 | 3842 | |
| 2088 | 3년 전 | 3656 | ||
| 2087 |
 팬텀디자인 |
3년 전 | 3602 | |
| 2086 |
팬텀디자인 |
3년 전 | 3391 | |
| 2085 | 3년 전 | 2593 | ||
| 2084 | 3년 전 | 5729 | ||
| 2083 | 3년 전 | 3926 | ||
| 2082 | 3년 전 | 3649 | ||
| 2081 | 3년 전 | 2476 | ||
| 2080 | 3년 전 | 3603 | ||
| 2079 | 3년 전 | 2975 | ||
| 2078 | 3년 전 | 4045 | ||
| 2077 | 3년 전 | 2347 | ||
| 2076 | 3년 전 | 2028 | ||
| 2075 | 3년 전 | 3029 | ||
| 2074 | 3년 전 | 2084 | ||
| 2073 | 3년 전 | 2216 | ||
| 2072 | 3년 전 | 7216 | ||
| 2071 | 3년 전 | 2231 | ||
| 2070 | 3년 전 | 4221 | ||
| 2069 |
wsx1234
|
3년 전 | 2395 | |
| 2068 | 3년 전 | 3804 | ||
| 2067 | 3년 전 | 5852 | ||
| 2066 |
나무이야기
|
3년 전 | 10724 | |
| 2065 | 3년 전 | 3852 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기