[LAB-11] 파이어스토어에서 가져온 이미지가 보이지 않음

[kyuran6]

질문 작성자

김진희

문제 상황

SEEMORE 버튼 아래에 보여지는 이미지 3장에 이미지가 보이지 않습니다

SEEMORE에 보여지는 이미지는 남이 올린 이미지를 보여주는 것으로 다음과 같습니다.

파이어스토어에서 로그인한 user_uid가 아니며, isAllow 값이 true인 category_uid를 categories 컬렉션에서 하나 가져옵니다 (첫번째 쿼리)

그 다음 images컬렉션에서 그 category_uid를 가진 이미지 중 3장을 보여줍니다 (두번째 쿼리)

이미지가 보여야하는데 로그인 상태에서도, 비로그인 상태에서도 둘다 보이지 않습니다.

가입방법은 Sign Up을 눌러 가입 후 (비밀번호 6자리 이상 기입) 오른 쪽 위 I's gallery 문구를 눌러서 메인으로 나와야 합니다

프로젝트 저장소 URL

공개된 GitHub 프로젝트 저장소 URL을 여기에 남깁니다.

• develop
• 트러블 슈팅을 위해 node_modules 폴더를 제외한 나머지를 압축해 이 곳에 첨부하세요. Asparagus.zip

환경 정보

• macOS

[yamoo9]

문제 분석

Homepage.jsx 컴포넌트의 useEffect 훅 조건에서 로그인 한 사용자만 이미지를 요청할 수 있네요. 확인해보세요.

images 데이터베이스에 저장된 필드 catagory_uid 값이 모든 도큐멘트가 동일하지 않아 보입니다. 일부는 category_uid가 아닐까 추측됩니다. category_uid가 맞는 단어이고, catagory_uid는 오타입니다.

아래는 처리 결과 영상입니다.

HomePage.jsx 컴포넌트 코드를 남겨둡니다. 참고해보세요.

export default function HomePage() {
  useDocumentTitle('HomePage');
  const { authUser } = useAuthUser();
  const [imgArr, setImgArr] = useState([]);
  const [moreImgArr, setMoreImgArr] = useState([]);
  const [visible, setVisible] = useState(false);

  // 인증 사용자가 아닌, 미인증 상태에서 표시되는 이미지 요청/응답 코드 (참고)
  useEffect(() => {
    const getRecentImages = async () => {
      let q = query(
        collection(db, 'images'),
        orderBy('createAt', 'desc'),
        limit(3)
      );

      const myImgList = await getDocs(q);

      const imageList = [];

      myImgList.docs.map((doc) => imageList.push(doc.data().url));

      imageList.sort(() => Math.random() - 0.5);

      setImgArr(imageList);
    };

    const getMoreImages = async () => {
      const q = query(
        collection(db, 'categories'),
        where('isAllow', '==', true),
        limit(3)
      );

      const querySnapshot = await getDocs(q);

      const categoryList = [];

      querySnapshot.docs.map((doc) => {
        categoryList.push(doc.id);
      });

      const moreImgListPromises = categoryList.map((categoryId) => {
        const q2 = query(
          collection(db, 'images'),
          where('catagory_uid', '==', categoryId)
        );

        return getDocs(q2).then(({ docs }) => {
          return docs.map((doc) => {
            console.log(doc.data());
            return doc.data().url;
          });
        });
      });

      Promise.all(moreImgListPromises).then((datas) => {
        console.log(datas);
        const urls = datas.reduce((urls, data) => [...urls, data[0]], []);
        setMoreImgArr(urls);
      });
    };

    getMoreImages();
    getRecentImages();
  }, []);

  console.log(moreImgArr);

  return (
    <>
      <MainSwiper />
      <CategoryTitle title={'C A T E G O R Y'} />
      <Category />
      <RecentImageTitle title={'R E C E N T\u00A0\u00A0\u00A0 I M A G E'} />

      <S.MainSection>
        <SeeMoreImg src={imgArr[0]} />
        <SeeMoreImg src={imgArr[1]} />
        <SeeMoreImg src={imgArr[2]} />
      </S.MainSection>

      <SeeMoreButton
        onClick={() => {
          setVisible(!visible);
        }}
        style={{ marginTop: '160px', marginBottom: '90px' }}
      ></SeeMoreButton>

      <S.SeeMoreSection>
        {visible && moreImgArr
          ? moreImgArr.map((url, index) => <SeeMoreImg key={index} src={url} />)
          : [1, 2, 3].map((index) => <SeeMoreImg key={index} />)}
      </S.SeeMoreSection>

      <TopButton />
    </>
  );
}

[kyuran6]

정말감사합니다!!