나혼자 미슐랭 개발일지 #6 – 리뷰 이미지 S3 업로드 및 출력 기능

범위: 리뷰 등록 기능 구현, 이미지 업로드(S3 연동), Kakao 장소 검색 연동, Restaurant DB 자동 저장

 

이번에는 사용자 리뷰 등록 경험을 본격적으로 구현하기 위해 여러 기능을 통합하였습니다.

특히, 텍스트 리뷰뿐 아니라 이미지 업로드와 장소 검색까지 포함되어 기능적 완성도가 한 단계 더 올라갔습니다.

 

1. 리뷰 작성 기능 전체 흐름 정리

리뷰 작성은 단순 텍스트 입력을 넘어서

• 음식점 검색
• 평점(음식, 분위기, 서비스)
• 코멘트
• 이미지 첨부
  까지 포함되도록 재설계 하였습니다.

 

 

리뷰 흐름 요약

1. 사용자가 음식점명을 입력하면 Kakao API로 검색
2. 검색 결과를 리스트로 보여주고 클릭 시 selectedRestaurant 설정
3. 리뷰 작성 완료 후 ‘저장하기’ 버튼 클릭 시,
4. 이미지가 있다면 S3에 업로드
5. 리뷰 정보와 S3 이미지 URL을 함께 전송
6. 해당 음식점이 Restaurant 테이블에 없으면 자동 등록

 

 

2. Kakao 장소 검색 API 연동

처음에는 우리(내부) DB에 있는 음식점에서만 검색할지 고민했지만,
리뷰를 쓰려는 사용자 입장에서 음식점이 사전에 등록돼 있어야만 작성 가능하다는 건 너무 큰 제약이었고,

그래서 외부 장소 API를 활용해서 유연하게 검색 → 리뷰 작성 → 내부 DB 자동 저장 흐름을 채택하였습니다.

 

✅ Kakao API vs 내부 DB

구분                Kakao API                                                                    내부 DB

 

장점	다양한 장소 즉시 검색 가능	속도 빠름, 검색 정밀도 높음
단점	검색 정확도/정렬 품질 낮음	DB에 없으면 검색 불가

 

결론적으로, 검색은 Kakao API, DB는 자동 등록으로 UX와 데이터 품질 모두를 챙겼다고 생각합니다.

프론트에서는 검색창에 입력하면 Kakao 장소 목록이 표시되고, 선택한 장소를 기반으로 리뷰를 작성하면
백엔드에서 해당 장소 정보를 자동으로 DB에 저장해두는 방식입니다.

 

 

3. 이미지 업로드 (AWS S3 연동)

이제 리뷰에는 사용자가 찍은 사진도 함께 첨부할 수 있습니다..!
이를 위해 AWS S3 버킷을 새로 생성하고, Spring Boot에서 multipart로 이미지 업로드 → S3에 저장 → 해당 URL을 리뷰에 저장하는 흐름을 구현하였습니다.

🔧 S3 연동 작업 내용

• IAM 사용자 생성 및 권한 설정 (AmazonS3FullAccess)
• application.yml에 access-key, secret-key, region, bucket 설정
• S3Uploader 클래스 생성: MultipartFile → S3 업로드 → 이미지 URL 반환
• review.setImageUrl()로 해당 URL 저장

버킷 설정 이슈

버킷 정책이 "ACL 사용 금지" 상태라 PutObjectRequest에 .acl("public-read") 설정 시 400 에러 발생
→ .acl() 제거하여 해결

 

 

 

 

 

4. 프론트 연동 – FormData + JSON Blob

프론트에서는 리뷰 데이터를 전송할 때,
multipart/form-data로 이미지와 JSON 데이터를 함께 보내야 해서 아래와 같이 처리하였습니다.

formData.append('request', new Blob([JSON.stringify(reviewData)], { type: 'application/json' }), 'request.json');

if (imageFile) {
  formData.append('image', imageFile);
}

→ 백엔드에서는 @RequestPart("request"), @RequestPart("image")로 받도록 처리 !

 

 

 

5. 백엔드 전체 흐름 (ReviewServiceImpl.java)

1. userId, restaurantId로 유저/음식점 조회
2. 이미지가 있으면 s3Uploader.upload() 실행
3. Review 엔티티에 정보 저장 후 저장
4. 음식점이 없을 경우 restaurantRepository.save()로 신규 저장

 

 

구현 결과

• 리뷰 작성 시 이미지 포함 가능
• 이미지 업로드는 S3에 안전하게 저장되고, URL만 DB에 저장됨
• Kakao 검색 기반으로 음식점을 찾을 수 있어 사용자 경험 개선
• 처음 리뷰를 쓰는 음식점은 자동으로 DB에 등록됨
• 리뷰 리스트에서는 S3 이미지가 존재하면 우선 표시, 없을 경우 Restaurant의 이미지 표시