[Feat] 이미지 관련 api 연결

[dalzzy]

🔍 관련된 이슈

• closed [Feat] #52 이미지 관련 API 연결 #52

📝 작업 내용

• presigned url 발급 API 연결
• s3 이미지 업로드 API 연결
• ImagePreviewItem 컴포넌트 재사용을 위해 width,height, onClick,rounded props를 추가하고 onRemove prop을 optional로 변경
• useImageUpload 훅에서 미리보기 url 반환하도록 수정
• getPresignedUrls() 과 uploadToS3() 로직을 합친 훅 useS3UploadFlow() 추가

<이미지 업로드 플로우 설명>

1. 선택한 이미지 파일명을 서버에 전달하여 pre-signed URL을 발급받고(getPresignedUrls()),
2. 해당 URL로 직접 S3에 업로드한 후(uploadToS3()),
3. 업로드된 이미지의 URL을 상태로 저장하여 다음 단계에서 사용할 수 있도록 처리( 이건 로그인/회원가입 UI수정하면서 완성하겠습니다 )

📸 스크린샷

2025-08-05.1.35.18.mov

🚨 이슈

📣 리뷰 요구사항

리뷰어가 특별히 봐주었으면 하는 부분이 있다면 작성

• 리뷰 작성 API 처럼 api 요청 시 이미지 url을 보내줘야 하는 경우가 있다면 useS3UploadFlow 함수를 사용해서 이미지를 S3에 업로드한 후
  해당 이미지 url을 보내줘야 합니다!

• 단일 파일은 테스트해봤는데 여러 개 파일은 아직 잘 되는지 모르겠어서 한 번 해보시고 안되면 ,, 맞게 수정하셔도 됩니다..!

• 코드 주석처리 된 부분은 제가 use어쩌구Mutation 으로 분리한 함수를 사용해서 쓰려다가 너무 복잡해져서 ,, 그냥 해당 함수를 안쓰도록 수정했는데 나중에 리팩토링해보려고 놔뒀습니다!!

✅ 체크리스트

• 코드가 정상적으로 컴파일되나요?
• merge할 브랜치의 위치를 확인했나요?
• Label을 지정했나요?
• 리뷰어를 지정했나요?

[soyun-git121]

적어주신거 프로필 수정시 이미지 불러올때 사용해보겠습니다!
ImagePreviewItem 컴포넌트를 마이페이지에서도 재사용 하면 되는건가용?

[sispo3314]

수고하셨습니다!! 구현도 잘 되어있고 코드 분리도 깔끔해서 충돌만 해결하시고 머지하시면 될 것 같습니다! bbbb

[dalzzy]

적어주신거 프로필 수정시 이미지 불러올때 사용해보겠습니다! ImagePreviewItem 컴포넌트를 마이페이지에서도 재사용 하면 되는건가용?

네넵