나혼자 미슐랭 개발일지 #8 – 리뷰 수정 기능 구현 및 별점 구조 개선

📌 scope ?

• 리뷰 수정 페이지(EditReviewPage) 개발
• 음식/분위기/서비스 별점 분리 구조 반영
• 백엔드 리뷰 테이블 구조 수정
• 리뷰 수정 API 및 이미지 업데이트 기능 구현

 

 

 

1. 리뷰 수정 기능 필요성

리뷰 작성 이후 사용자가 내용을 수정할 수 있도록 기능을 추가해야 했습니다.

하지만 단순히 평점 하나만 바꾸는 게 아니라, 음식/분위기/서비스 각각의 점수를 분리해서 받고 있었기에, 기존 리뷰 테이블 구조 자체를 바꿔야 했습니다... (설계할 때 한번 더 생각할걸....ㅜ)

 

 

 

2. BE 리뷰 테이블 구조 수정

기존에는 평균 평점 rating 필드만 있었지만, 이번 수정으로 다음 3가지 항목들을 추가하였습니다.

• foodRating: 음식 맛에 대한 점수
• moodRating: 분위기 점수
• serviceRating: 서비스 점수

수정된 DTO:

public class ReviewUpdateRequest {
    private Float foodRating;
    private Float moodRating;
    private Float serviceRating;
    private Float rating; // 세 항목의 평균값
    private String comment;
}

 

 

 

3. 리뷰 수정 API 구현

컨트롤러에서 @RequestPart를 활용하여 JSON + 이미지 파일을 동시에 받도록 처리.

@PutMapping("/{id}")
public ReviewResponse updateReview(@PathVariable Long id,
    @RequestPart("review") @Valid ReviewUpdateRequest request,
    @RequestPart(value = "image", required = false) MultipartFile imageFile) {
    return reviewService.updateReview(id, request, imageFile);
}

 

 

Service 주요 로직:

• 기존 리뷰 불러오기 → 없으면 예외
• 각 별점, 코멘트 업데이트
• LocalDateTime.now()로 수정 시간 업데이트
• 이미지가 전달된 경우만 새로 업로드 → 기존 이미지 유지
• 변경 사항 저장 후 응답 DTO로 변환

이미지 업로드 시 예외 처리까지 명시:

if (imageFile != null && !imageFile.isEmpty()) {
    try {
        String imageUrl = s3Uploader.upload(imageFile);
        review.setImageUrl(imageUrl);
    } catch (IOException e) {
        throw new RuntimeException("이미지 업로드 중 오류 발생", e);
    }
}

 

 

 

4. FE – EditReviewPage 구성

새 페이지 EditReviewPage.jsx를 생성해서 수정 기능을 구성.

 

flowb:

• useParams()로 리뷰 id 추출 후 기존 리뷰 정보 GET 요청
• 가져온 정보를 기반으로 상태 초기화 (별점, 코멘트, 이미지)
• 수정된 평점을 기준으로 평균 평점 계산
• FormData로 JSON(review) + image 함께 서버에 전송
• 수정 성공 시 /list로 리디렉션

별점 컴포넌트는 기존 StarRating을 그대로 재활용. 이미지 미리보기 기능도 추가하여, 사용자가 새 이미지를 선택했는지 명확히 인지할 수 있도록 개선.

 

 

5. 고려 사항 및 개선 포인트

• 평균 평점은 클라이언트에서 계산해서 서버로 넘기는 구조로 구현 (서버 계산 고려)
• 이미지 변경이 없는 경우 기존 이미지를 유지함으로써 S3 트래픽 최소화
• 유효성 검사 및 오류 알림 메시지는 후속 작업으로 개선 예정

 

수정 성공 !

 

 

Today Key word

• 별점 항목 분리 (food/mood/service)
• 리뷰 수정 API (PUT + multipart/form-data)
• 이미지 수정 및 S3 연동
• 프론트엔드 EditReviewPage 구현