이미지 변경 기능 추가

[DrunkenNeoguri]

본 이슈는 매장 관리 페이지에서 이미지를 업로드 및 변경할 수 있는 기능을 구현하기 위해 생성된 이슈입니다. 작업 관련 사항은 아래의 Preview Comment를 통해 안내합니다.

[DrunkenNeoguri]

Fix: Firebase Storage 연동 및 스토리지 내 이미지 업로드 기능 추가(https://github.com/DrunkenNeoguri/WaitSecond/commit/8a30daab0e1e9b0893d2a2042738c2b45ece991b)

• Firebase Storage 스토리지 연동 적용
• Button을 대신하여 type=file인 Input 및 Text label로 대체
• Storage 기능을 이용해 이미지 업로드 구현 및 업로드된 파일 저장
  • Input으로 올린 file Object를 firebase ref 모듈을 이용해 객체화
  • 객체화된 파일을 firebase의 uploadBytes 기능을 통해 스토리지에 저장
  • 저장 후, setDoc를 통해 스토리에 저장된 이미지 파일 경로를 doc에 업로드
  • 업로드 후, 받아온 경로를 setState를 통해 업데이트
  • 업로드가 완료되면 toast 메시지가 출력되도록 적용 후 쿼리 초기화
• 페이지 새로고침 등 초기 로딩 시 임시 이미지 적용
• 메인 페이지 내 최대 너비 적용
• 이미지 로드 시, 리사이징 상태를 고려하여 lazy loading이 적용되도록 Image 컴포넌트내 loading prop에 lazy 적용

[DrunkenNeoguri]

기능 구현이 완료되어 이슈를 닫고 머지 및 릴리즈까지 진행합니다.