[Fix/#100]영화관 즐겨찾기 로직 수정

[huniversal]

📌 Related Issues

• close fix: 영화관 즐겨찾기 세팅 #100

✅ 체크 리스트

• PR 제목의 형식을 잘 작성했나요? e.g. [feat/#이슈번호] PR 템플릿 작성
• 빌드가 성공했나요? (pnpm build)
• 컨벤션을 지켰나요?
• 이슈는 등록했나요?
• 리뷰어와 라벨을 지정했나요?

📄 Tasks

• 영화관 별 아이콘 클릭으로 즐겨찾기 추가/제거
• 즐겨찾기 영화관을 상영정보 목록 최상단으로 자동 정렬
• 로컬스토리지로 즐겨찾기 영역 유지

⭐ PR Point (To Reviewer)

클릭 이벤트 로직

onClick={() => {
  const favorites = JSON.parse(localStorage.getItem(FAVORITE_CINEMAS_KEY) || '[]');
  const newFavorites = isLiked
    ? favorites.filter((name: string) => name !== cinemaName)  
    : [...favorites, cinemaName];  
  localStorage.setItem(FAVORITE_CINEMAS_KEY, JSON.stringify(newFavorites));
  setIsLiked(!isLiked);
  window.dispatchEvent(new Event('favoriteCinemasChanged'));
}}

1. localStroage에서 데이터 가져오기
2. 추가 or 제거
3. localStroage에 저장
4. UI 업데이트
5. 부모 컴포넌트에 알림

즐겨찾기 변경 이벤트 함수

const [, setFavoriteUpdate] = useState(0);

useEffect(() => {
  const handleFavoriteChange = () => {
    setFavoriteUpdate(prev => prev + 1);  // 상태 변경으로 리렌더링 트리거
  };
  window.addEventListener('favoriteCinemasChanged', handleFavoriteChange);
  return () => {
    window.removeEventListener('favoriteCinemasChanged', handleFavoriteChange);
  };
}, []);

• 컴포넌트가 언마운트될 경우 메모리 누수 방지를 위해서 이벤트 리스너를 삭제 처리

정렬 연산

• 성능 최적화를 위해 useMemo를 사용하였습니다.

const sortedShowtimes = useMemo(() => {
  // 데이터가 없으면 빈 배열 반환
  if (!filteredShowtimes) return [];
  // 로컬스토리지에서 즐겨찾기 목록 가져오기
  const favoriteCinemas = JSON.parse(
    localStorage.getItem('favoriteCinemas') || '[]'
  );
  // 즐겨찾기 영화관 필터링
  const favorites = filteredShowtimes.filter((cinema: CinemaResponse) => 
    favoriteCinemas.includes(cinema.cinemaName)
  );
  // 일반 영화관 필터링
  const others = filteredShowtimes.filter((cinema: CinemaResponse) => 
    !favoriteCinemas.includes(cinema.cinemaName)
  );
  // 즐겨찾기를 앞에, 나머지를 뒤에 배치
  return [...favorites, ...others];
}, [filteredShowtimes]);

📷 Screenshot

🔔 ETC

[github-actions]

빌드 및 린트 결과

일부 검사 실패 ⚠️

• 린트 실패 ❌
• 빌드 성공 🎊

[github-actions]

빌드 및 린트 결과

모든 검사 통과 🎉

• 린트 통과 ✅
• 빌드 성공 🎊