yamoo9 / likelion-FEQA

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

[LAB-2] Firestore에 저장된 정보를 초기화면에서 불러오지 못하는 문제 #211

Closed sumin-Kim-00 closed 1 year ago

sumin-Kim-00 commented 1 year ago

질문 작성자

김수민

문제 상황

경로 - src/components/MapInfo/kindergartenList.js

image image

-> 리렌더링 시 아이콘이 채워져있지 않음

프로젝트 저장소 URL

https://github.com/kindergarten-udon/udon-house

develop 브랜치에서 작업하였습니다. [LAB-2]FEAQ.zip

테스트 계정과 .env 파일은 디엠으로 보내드렸습니다.

환경 정보

yamoo9 commented 1 year ago

문제 해결

아래 영상은 문제가 해결된 화면 UI를 보여 줍니다. 😊 즐겨찾기 버튼을 클릭하면 정상적으로 화면에 토글 상태를 표시할 뿐 아니라, 페이지 전환 시에도 활성 상태의 즐겨찾기를 정상적으로 표시합니다.

가이드 파일

가이드 파일을 다운로드 받아 참고해보세요. 혹시나 코드 풀이가 필요하면 해설을 요청주세요. 😌

src.zip

수정한 부분은 아래 작성된 코드입니다.

const starIndexRef = useRef(-1);
const pressedStarButtonRef = useRef(false);
const handleStar = (index) => (e) => {
  starIndexRef.current = index;
  const updateStarClickedArr = starClickedArr.map((clicked, i) => (index === i ? !clicked : clicked));
  setStarClickedArr(updateStarClickedArr);
  pressedStarButtonRef.current = true;
};
useLayoutEffect(() => {
  let index = starIndexRef.current;

  if (index > -1 && pressedStarButtonRef.current) {
    const { CRNAME, CRTELNO, CRADDR } = pagedContents[index];
    const contentRef = collection(dbService, "favorite");

    // 사용자가 클릭한 즐겨찾기 정보 찾기
    const findedFavoriteData = favoriteData.find(({ title }) => title === CRNAME);

    let favoriteDataId;

    // 즐겨찾기 정보가 존재할 경우
    if (findedFavoriteData) {
      favoriteDataId = findedFavoriteData.id;
    }

    let isClickedOn = starClickedArr[starIndexRef.current];

    if (isClickedOn) {
      addDoc(contentRef, {
        active: true,
        title: CRNAME,
        tel: CRTELNO,
        address: CRADDR,
        creatorId: testUid,
      });
      console.log("추가 됨");
    } else {
      if (favoriteDataId) {
        const removeDoc = doc(collection(dbService, "favorite"), favoriteDataId);
        deleteDoc(removeDoc);
        console.log("삭제 됨");
      }
    }
    pressedStarButtonRef.current = false;
  }
}, [starClickedArr]);
useEffect(() => {
  const activeIndexs = new Set();
  favoriteData.forEach(({ title }, index) => {
    activeIndexs.add(pagedContents.findIndex(({ CRNAME }) => CRNAME === title));
  });

  const displayStarClickedArr = [...starClickedArr];

  for (const i of activeIndexs) {
    displayStarClickedArr[i] = true;
  }

  setStarClickedArr(displayStarClickedArr);
}, [favoriteData]);

작성된 JSX 구문은 버튼 요소에 클릭 이벤트를 연결해 제어하도록 수정되었습니다. 😳

<button type="button" className="mr-2 p-2 md:p-1 hover:text-yellow-400" onClick={handleStar(index)}>
  {starClickedArr[index] === true ? <AiFillStar className="iconStyle text-yellow-400" /> : <AiOutlineStar className="iconStyle" />}
</button>