Issue164 리뷰 이미지 업로드 기능 추가

[hafnium1923]

#164
@ashleysyheo

• 리뷰 추가 시, 이미지도 업로드할 수 있다(optional + 한 개만 업로드 가능)

[uk960214]

수고하셨습니다!

코드에 남긴 리뷰 외에도 기획과 UI 상 질문이 있는데요,

1. 이미지는 하나만 추가할 수 있던데 혹시 여러 개의 이미지를 추가하는 기능에 대해서는 계획이 없으신가요?? 만약에 계획은 있는데 지금은 구현이 안된 것이라면 imageUrl 타입을 배열로 받는 것은 어떨까 하는 생각도 했습니다.
2. 이미지를 하나 밖에 업로드할 수 없지만 현재 UI 상으로는 여러 개 올릴 수 있는 것 같은 느낌이더라구요. 만약에 이미지를 수정하는 것을 가능하게 하기 위해서 현재 UI (버튼과 이미지가 같이 보이는 것)을 구성한거라면, 혹시 업로드한 이미지를 지우고 (x 버튼처럼), 다시 업로드 버튼을 보여주는 방식은 어떠신가요?
   
3. 업로드 된 이미지의 스타일이 좀 심심한 것 같아요! 혹시 border-radius 정도는 넣을 생각은 안해보셨나요??

[uk960214]

object-position 옵션이 필요한 이유는 무엇인가요??

[ashleysyheo]

지금 ReviewContentWrapper에서 display: flex가 설정되어 있어서, 각 자식(?)들이 전체 width를 차지하고 있습니다. 그래서 이미지의 width가 자동으로 전체 너비를 차지하기 때문에 사진이 찌그러지는 문제가 발생해서 object-position을 추가했습니다!

업로드 된 이미지의 스타일이 좀 심심한 것 같아요! 혹시 border-radius 정도는 넣을 생각은 안해보셨나요??

원래는 border-radius를 추가하고 싶었습니다...!

그런데 object-fit으로 비율을 조절하고 있기 때문에 img의 실제 너비는 전체 width가 되어서 border-radius를 설정하면 왼쪽 위아래만 적용되는 문제가 발생해서 일단 뺐습니다. 이 부분을 어떻게 해결하면 좋을지 생각해 내지 못해서 일단 border-radius를 뺐습니다.

[uk960214]

flex일 때 전체 너비를 차지하는 문제는 정렬을 기본값이라도 주게 되면 자체 너비를 가지게 되어서 해결됩니다!
이렇게 바꾸면 object fit, position으로 해결하지 않아도 되고 border radius, shadow등 원하는 대로 스타일을 줄 수 있을 것 같네요!

[ashleysyheo]

이미지 여러 개 추가 관련

백엔드랑 얘기해 봤는데, 여러 개를 추가할 수 있도록 하려면 많이 변경해야 해서 당장은 계획이 없다고 합니다! 그런데 여러 개를 업로드할 수 있는 게 더 자연스럽다고 동의해서 추후에 논의해 볼 예정입니다.

이미지 업로드 UI

블링이 말한 것처럼 여러 개를 올릴 수 있다는 느낌이 들긴 드네요... 아직까지는 이미지를 여러 개 업로드할 수 있게 할 계획이 없기 때문에 제안해 주신 것처럼 변경해 봤습니다!

[liswktjs]

변경사항 확인하였습니다!

[uk960214]

이미지 업로드 UI에서 x 버튼 추가된 것은 아주 좋은 것 같아요! 개인적인 취향이지만 아이콘 버튼에 이미지와 동일한 radius가 들어가고 코너에 딱 맞춰져 있어서 살짝 어색한 느낌이 드는데 혹시 버튼에는 radius를 없앤다거나 position을 코너에 딱 맞지 않게 해서 x 버튼이 좀 더 눈에 띄게 만드는 것은 어떻게 생각하시나요?

+ 이미지를 삭제하고 다시 업로드 하려고 하면 안되는 버그가 있네요! 어째서인지 지우고 다시 업로드하면 images를 호출하지 않아요!
++ 지금 가게 상세 페이지를 들어가면 기본으로 리뷰 작성창이 떠있고 꺼지지 않아요. 아마도 개발 시 편의를 위해서 렌더링 조건을 반대로 해놓은 것 같은데 되돌려야 할 것 같아요!

[ashleysyheo]

삭제 버튼 ui

x 버튼에 margin을 주는 것을 고려했는데 실제로 한 4px 정도의 간격을 주니까 뭔가 어색한 느낌이 들고 이미지를 너무 가리는 것 같더라고요!

그래서 한 번 전체에 border-radius를 주는 대신 border-top-right-radius만 이미지 border-radius랑 맞춰봤습니다. 그리고 버튼 색상도 진회색이 아니라 블랙으로 변경해서 조금 더 눈에 띌 수 있도록 수정했습니다!

지금 가게 상세 페이지를 들어가면 기본으로 리뷰 작성창이 떠있고 꺼지지 않아요. 아마도 개발 시 편의를 위해서 렌더링 조건을 반대로 해놓은 것 같은데 되돌려야 할 것 같아요!

앗.... 완전 깜빡했어요! 되돌려놨습니다!

이미지를 삭제하고 다시 업로드 하려고 하면 안되는 버그가 있네요! 어째서인지 지우고 다시 업로드하면 images를 호출하지 않아요!

이미지를 삭제하고 다시 업로드 하려고 하면 안되는 상황이 정확히 어떤건가요...? 제가 했을 때는 삭제하고 재업로드가 잘 되거든요.

video.mov

[nan-noo]

리뷰 남겼습니다!

저도 블링이랑 똑같은 오류 나요!

2023-06-27.205547.mp4

그리고 인풋 크기 고정하면 어떨까요? 화면 밖으로 튀어나가서..!

[nan-noo]

디렉토리명 > image보다 더 구체적으로 정하면 어떨까요?
review 디렉토리에 넣지 않고 image를 새로 만든 이유가 있을까요?

[ashleysyheo]

이미지 api 자체를 재사용할 수 있게 만들기 위해서 리뷰를 보낼 때 이미지 파일 데이터를 보내서 imageUrl을 생성하는 것이 아닌 별도의 api를 만들었다고 백엔드한테 들었습니다. 그런 의미에서 추후에 이 api가 리뷰가 아닌 다른 상황에서 사용될 것을 생각하면 images를 만드는 것이 좀 더 어울리지 않나 싶어서 그렇게 했습니다!

[nan-noo]

아하 그러면 한 api로 모든 종류의 이미지 업로드를 다루는건가요?? 아니면 나중에 /image/review 식으로 세부적으로 나뉘나요?

[ashleysyheo]

제가 이해하기로는 이 images api로 모든 종류의 이미지 업로드를 다 다룬다고 알고 있습니다! 그래서 백엔드 쪽에서도 리뷰 폼을 제출할 때 이미지 파일 데이터를 보내는 것이 아니라, 일차적으로 이미지 url을 요청한 다음에 그 url을 리뷰 보낼 때 함께 보내도록 만든 것 같아요.

[ashleysyheo]

@nan-noo

저도 블링이랑 똑같은 오류 나요!

엇 왜죠... 🥲 혹시 accessToken 여부를 검증하는 로직 때문에 오류가 나는 거 아닐까요....??

POST /api/images HTTP/1.1

Header
Authorization: Bearer {access_token}

Body
file : multiPart/form-data

지금 위처럼 이미지 api에서도 accessToken을 보내야 해서 msw로 확인할 때 sendImageUploadPostRequest에서 accessToken 여부를 검증하는 부분을 코멘트 처리해야 제대로 확인할 수 있습니다. 한 번 확인 부탁드려요!

그리고 인풋 크기 고정하면 어떨까요? 화면 밖으로 튀어나가서..!

이것도 제 컴퓨터에서는 안 보여서 몰랐어요 🥲 일단, textarea에 max-width를 추가했는데, 아직도 튀어나오나요??

[uk960214]

오 저는 두 문제 다 이제는 해결된 것 같네요! 수고하셨습니다!

[nan-noo]

저 이미지 업로드 오류가 발생하는 상황이, A 사진을 업로드 하고 삭제한 다음 다시 A 사진을 업로드하면 발생합니다! A 사진 업로드하고 B 사진 업로드하는 건 잘 돼용

텍스트아리아 삐져나오는 건 오른쪽 아래 늘리는 버튼 막아달라는 이야기였어요!!

[nan-noo]

스타일 적용하는 방식을 줄이는 게 좋을 것 같아요! 블링이 말한 함수 활용도 좋네요

[nan-noo]

아하 그러면 한 api로 모든 종류의 이미지 업로드를 다루는건가요?? 아니면 나중에 /image/review 식으로 세부적으로 나뉘나요?

[ashleysyheo]

@nan-noo

저 이미지 업로드 오류가 발생하는 상황이, A 사진을 업로드 하고 삭제한 다음 다시 A 사진을 업로드하면 발생합니다! A 사진 업로드하고 B 사진 업로드하는 건 잘 돼용

같은 이미지를 업로드할 생각을 못 해봤네요... ㅎㅎ 찾아보니까 onChange 이벤트가 실질적으로 파일 데이터가 바뀔 때만 반응해서 event.target.value를 초기화 시켜주는 코드를 추가했습니다!

텍스트아리아 삐져나오는 건 오른쪽 아래 늘리는 버튼 막아달라는 이야기였어요!!

아 이 얘기였군요!! ㅎㅎ resize 막았습니다!

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

0.0% Coverage
0.4% Duplication