[game] 상세 페이지에서 itemId를 이용해 리뷰 출력 및 시간 표현하기

문제 발생

1. 상세 페이지에서 특정 아이템(itemId)에 연결된 리뷰를 출력하는 기능이 필요했다.
2. 리뷰의 작성 시간을 '2023-10-16T16:09:33.134773'와 같은 형식 대신 "an hour ago", "2 hours ago"와 같은 사람 친화적인 형식으로 변환하고자 했다.

문제 인지

1. 리뷰 출력:

• 특정 아이템의 리뷰만을 필터링하여 출력하는 기능이 구현되어 있지 않았다.
• itemId를 이용하여 해당 아이템에 맞는 리뷰 데이터를 가져와야 했다.

2. 시간 표현:

• 기존의 시간 표현 방식은 사용자가 직관적으로 이해하기 어려웠다.
• 사용자 친화적인 시간 표현 방식을 구현하려면 시간의 차이를 계산하고 해당 결과를 문자열로 변환하는 기능이 필요했다.

해결 과정

1. 리뷰 출력:

• Repository에서 findByItem(Item item) 메서드를 사용하여 해당 아이템과 연관된 리뷰들을 가져올 수 있도록 했다.

• Service와 Controller에서 이를 활용하여 웹 페이지에 필요한 리뷰 데이터를 제공하게 했다.

  public List<ReviewDto> getReviewsByItemId(Long itemId) {
         Item item = itemRepository.findById(itemId).orElseThrow(() -> new IllegalArgumentException("Invalid itemId"));
         List<Review> reviews = reviewRepository.findByItem(item);
  
         return reviews.stream()
                 .map(review -> entityToDTO(review, review.getMember(), review.getItem()))
                 .collect(Collectors.toList());
     } // itemId에 해당하는 리뷰들을 가지고 옴

  @GetMapping(value = "/item/{itemId}")
     public String itemDtl(Model model, @PathVariable("itemId") Long itemId){
         ItemFormDto itemFormDto = itemService.getItemDtl(itemId);
         List<ReviewDto> reviews = reviewService.getReviewsByItemId(itemId);
  
         model.addAttribute("item", itemFormDto);
         model.addAttribute("reviews", reviews);
  
         return "item/itemDtl";
     }

2. 시간 표현 (JavaScript로 구현):

• JavaScript의 Date 객체를 활용하여 현재 시간과 리뷰의 작성 시간 사이의 차이를 계산했다.

  // Moment.js 라이브러리는 JavaScript에서 날짜 및 시간을 쉽게 조작할 수 있는 라이브러리다.
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>

• 계산한 결과를 바탕으로 "an hour ago", "2 days ago"와 같은 형식의 문자열로 변환하는 함수를 JavaScript에서 구현했다.

  $(document).ready(function() {
     $('.review-time').each(function() {
         var time = $(this).text();
         var fromNow = moment(time).fromNow();
         $(this).text(fromNow);
     });
  });

• 이를 통해 서버 부담 없이 클라이언트 측에서 직접 시간을 계산하고 표현했다.