yamoo9 / likelion-FEQA

질문/답변 — 프론트엔드 스쿨, 멋사
29 stars 9 forks source link

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

Closed kyuran6 closed 1 year ago

kyuran6 commented 1 year ago

질문 작성자

김진희

문제 상황

스크린샷 2023-03-24 시간: 15 09 20 스크린샷 2023-03-24 시간: 15 09 02 스크린샷 2023-03-24 시간: 15 11 34

프로젝트 저장소 URL

환경 정보

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>
  );
}

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

image

가이드 파일

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

src.zip

kyuran6 commented 1 year ago

덕분에 많이 배웁니다 정말 감사합니다 !!