[LAB-8] storage에 이미지 업로드 완료 후 데이터 베이스로 받아오는 상황에서 이미지가 배열로 넘어옵니다.

[kimmoonju-102]

질문 작성자

김문주

문제 상황

파이어베이스 storage에 이미지 업로드까진 성공했습니다.

데이터베이스에 이미지를 업로드하려면 전에 올렸던 이미지들 까지 배열로 받아와 업데이트 됩니다.

이미지를 배열로 말고 하나씩 갖고 오는 법을 잘 모르겠습니다.

프로젝트 저장소 URL

(https://github.com/likelion-frontendo/likelion-saja)

• develop 브랜치에 pr해서 업데이트 해놨습니다.
• 작업 파일 : src/pages/Post/PostImage.jsx에서 작업하고 있습니다.

환경 정보

• 운영체제 정보 (예: Windows, macOS)
• Node.js 정보 (예: v16.14.0)
• 라이브러리 정보 (예: React v18.0.2)

[yamoo9]

문제 파악

디스코드 DM을 통해 정확한 문제 상황과 요구사항을 질문하여 확인했습니다. 주어진 질문 만으로는 문제 파악이 쉽지 않았기 때문입니다. 🤔

정리된 문제 상황 및 요구사항은 다음과 같습니다.

• Fibase 스토리지의 모든 이미지를 배열로 가져오면 안됩니다.
• 사용자는 최대 6장까지 이미지를 업로드 할 수 있습니다.
• 등록 버튼을 누르면 첫번째 이미지만 작성 정보에 포함되어 Firestore에 저장되어야 합니다.

문제 해결

문제 파악 후, 해결된 내용은 첨부된 가이드 파일을 참고하세요.

src.zip

수정된 가이드 파일은 다음과 같습니다.

• PostImage.jsx
• PlaceSearchBox.jsx

PlaceSearchBox 컴포넌트에서 handlePostSubmit 함수 코드를 살펴보세요.

PlaceSearchBox.jsx

const handlePostSubmit = async () => {
  if (imageList.length > 0) {
    // 업로드 할 이미지 중 첫번째 이미지 URL만 업로드 합니다.
    const uploadImageUrl = imageList[0];

    try {
      const uploadData = {
        description: postContent,
        // 첫번째 이미지만 Firestore 데이터베이스에 저장합니다.
        imgUrl: uploadImageUrl,
        location: address,
        price: priceValue,
        title: postTitle,
      };

      // ...
    } catch (e) {
      console.error("Error adding document: ", e);
    }
  }
};

문제가 해결된 영상을 확인해보세요.

https://user-images.githubusercontent.com/1850554/227850168-78aceb31-1228-4d06-81ca-42dfc99b11ee.mp4

[kimmoonju-102]

감사합니다 😄