Closed ovelute53 closed 1 year ago
질문의 문제는 https://github.com/yamoo9/likelion-FEQA/issues/208#issuecomment-1480903863 답변과 유사한 상황입니다. Reservation3.jsx 파일을 아래와 같이 수정해보세요. 😊
Reservation3.jsx
export const Reservation3 = () => {
const [rooms, setRooms] = useState([]);
useLayoutEffect(() => {
(async () => {
const q = query(
collection(db, 'rooms'),
where('maxNumberOfPerson', '<=', 5)
);
const querySnapshot = await getDocs(q);
if (querySnapshot.empty) {
console.log('다른 날짜를 선택해주세요');
} else {
const roomList = [];
const imageList = [];
querySnapshot.forEach((doc) => {
const storage = getStorage();
const data = doc.data();
roomList.push(data);
const storageRef = ref(storage, data.imageUrl);
imageList.push(
getDownloadURL(storageRef)
.then((url) => url)
.catch((error) => console.error)
);
});
Promise.all(imageList)
.then((imageUrls) => {
imageUrls.forEach((url, index) => {
roomList[index].imageUrl = url;
});
setRooms(roomList);
})
.catch((error) => console.error);
}
})();
}, []);
return (
<ReservationTitle value={'객실'}>
<StepNavigation
page={'reservation3'}
labelArray={['투숙객 선택', '날짜 선택', '객실 선택']}
></StepNavigation>
<Container>
{rooms.map((room, index) => (
<RoomInfoCard
key={room.id}
name={room.name}
description={room.description}
notice={room.notice}
addInfoSite={room.site}
price={room.price}
imageUrl={room.imageUrl}
isLast={index === rooms.length - 1}
/>
))}
</Container>
<ButtonWrapper>
<BackButton id={'reservation2'} value={'뒤로'} />
<ContinueButton id={'reservation4'} value={'장바구니 및 결제'} />
</ButtonWrapper>
</ReservationTitle>
);
};
그러면 아래처럼 이미지가 정상적으로 표시됩니다.
질문 작성자
윤새한
문제 상황
이미지를 storage에 저장해두고 getDownloadURL로 가져왔습니다.
객실정보를 firestore에 저장할 때, 이미지를 imageUrl이라는 이름으로 storage에 저장한 파일명과 일치하도록 작성하였고,
rendering 시 forEach로 이미지와 text들을 배열로 가져와서 사용하려고 코드를 작성하였고, text 정보(doc.data())들은 화면에 rendering되나 이미지 정보를 담아놓은 배열은 화면에 렌더링 되지 않습니다.(console.log로 확인해본 결과 배열은 잘 나오는 것으로 확인되었습니다.)
추가적으로 console.log로 이미지 배열을 찍어보았을 때 배열이 두개씩 찍히는 것을 확인하고 엄격모드로 되어있나 확인해보았지만 특이사항 없었습니다.
렌더링된 화면
.env파일을 디엠으로 보내드리겠습니다.
프로젝트 저장소 URL
https://github.com/ovelute53/final-project/blob/develop/final-cra/src/pages/Reservation3.jsx
develop 브랜치에서 작업 진행하였습니다.
환경 정보