fix: 그라데이션, chip 스타일링 변경, 찜 기능 변경, 초기 데이터 fetching 조건 변경

[HMRyu]

✏️ 작업 내용

• 모임 목록 그라데이션 기능 구현
• chip 보여지고 사라질 때 animation
• chip 시간 format 변경
• 찜 기능 수정
• Loader 공통 컴포넌트 생성

📷 스크린샷

모임 목록 그라데이션

https://github.com/user-attachments/assets/cab2d05b-9368-4049-8123-1f0b9d9174b4

chip 시간 format 및 animation

https://github.com/user-attachments/assets/51410ac9-2c92-4466-8440-afb75968a57d

✍️ 사용법

Loader

<div className='flex min-h-screen items-center justify-center'>
    <PulseLoader color='#EA580C' />
</div>

이렇게 Loader 공통 컴포넌트 만들어 두었습니다!

사용하고 싶은 곳에서 다음과 같이 사용해주시면 됩니다!

<Loader />

gradient

  const [topGradientVisible, setTopGradientVisible] = useState(false);
  const [bottomGradientVisible, setBottomGradientVisible] = useState(false);

  const { ref: firstGatheringRef, inView: firstInView } = useInView({
    threshold: 0,
  });
  const { ref: lastGatheringRef, inView: lastInView } = useInView({
    threshold: 0,
  });

  useEffect(() => {
    setTopGradientVisible(!firstInView);
    setBottomGradientVisible(!lastInView);
  }, [firstInView, lastInView]);

이런 식으로 react-intersection-observer 를 이용하여 두 부분에서 ref 를 걸어서 사용해 주었습니다! 자세한 부분은 코드에서 확인하시면 될 것 같습니다!

이 부분은 다른 부분에서도 사용될 수 있을 것 같아서 훅으로 만들어 놓는 것도 좋을 것 같아요!

🎸 기타

찜 기능

id 값을 useParams 로 받아와서 사용하였습니다. 확인 부탁드립니다!

gradient 기능

desktop 에는 gradient 가 별로 안 예쁜 것 같아서 태블릿이랑, 모바일에만 넣으려고 하는데 어떠실까요...?

보시고 피드백 남겨주세요...!