[LAB-11] 이미지 배열이 출력되지 않습니다

kyuran6 commented 1 year ago

질문 작성자

김진희

문제 상황

RECENT IMAGE, SEE MORE 아래에 각각 이미지 3장씩 파이어스토어에서 가져온 이미지를 랜덤으로 띄우려고 합니다

콘솔에는 랜덤 배열이 정상 출력되나, 이미지가 뜨질 않습니다.

이미지 출력이 되지 않는 이유를 모르겠어서 질문드립니다

프로젝트 저장소 URL

공개된 GitHub 프로젝트 저장소 URL을 여기에 남깁니다.
feature/main-MainPage
트러블 슈팅을 위해 node_modules 폴더를 제외한 나머지를 압축해 이 곳에 첨부하세요. Asparagus.zip

환경 정보

macOS
Node.js v19.7.0
라이브러리 정보 (예: React v18.0.2)

yamoo9 commented 1 year ago

문제 풀이

SeeMoreImg.jsx 파일에서 전달하는 imgArr 데이터를 전달합니다.

<ImageContainer>
  <BaseImage width="471px" height="600px" imgArr={imgArr} />
</ImageContainer>

BaseImage.jsx 파일에서 문제는 map 안에서 return 값이 없어 이미지가 정상 렌더링 되지 않았습니다.

<BaseImageBox width={width} height={height} bgColor={getColor('gray/100')}>
  {imgArr.map((img) => {
    <img src={img} alt="기본 이미지" />;
  })}
</BaseImageBox>

그리고 아마도 코드 설계가 잘못된 듯 보입니다만, 디자인 시안대로 이미지를 하나씩 렌더링 하려면 아래처럼 코드가 작성되어야 해요. 즉, 이미지 URL 배열이 아니라 하나의 이미지 URL이 전달되어야 합니다.

function BaseImage({ width, height, imgArr }) {
  const img = imgArr[0];
  return (
    <BaseImageBox width={width} height={height} bgColor={getColor('gray/100')}>
      <img src={img} alt="기본 이미지" />;
    </BaseImageBox>
  );
}

그래야 아래처럼 디자인 시안대로 이미지가 하나씩 렌더링 됩니다. 이 부분 검토해보세요. 🤔

가이드 파일

첨부된 가이드 파일을 다운로드 받아 확인해보세요.

src.zip