구현내용

컨텐츠 페이지 구현 컨텐츠 페이지 메인

1. 최신 컨텐츠 소개 슬라이드 섹션

2. 더보기 버튼 - 전체 컨텐츠

3. 기초 투자 용어 소개 섹션

• 컨텐츠 디테일 페이지 - 각 주제 디테일 설명글

주요 함수 내용 및 실행 방법

1. 백엔드와 회의, 합의 하에 필요한 컨텐츠 내용에 대해서는 프론트단에서 직접 입력하기로 결정했었기에, 상수파일에 컨텐츠 내용을 작성해 두었습니다.
2. dangerousInnerHTML을 사용하여, html 형식의 글을 그대로 입력합니다

스크린샷/동영상(옵션)

이슈 해결

기존 계획과 달리, 컨텐츠 페이지를 청년에 관련한 필수적인 요소들에 대해서, 백엔드 없이 프론트단에서 제작을 하는것으로 지난 회의에서 결정이 되었습니다. (기간 상)

이에 생각한 페이지 구성은

상단에는 슬라이드 페이지로 최근에 작성한 컨텐츠 4개를 보여주는 섹션,

그 밑에는 더보기 버튼을 통해 모든 컨텐츠카드를 볼 수 있는 섹션,

그 하단에는 앞선 퀴즈 토픽들의 이해를 돕는 투자 방식에 대한 기본 방식(최신 컨텐츠와 별개로 절대로 변하지 않는 기초 지식. 적금,주식,부동산, 등.)

정보가 보이는 섹션

이 되게 하고자 구성했습니다.

이를 위해, 먼저 자동 슬라이드 로직을 구현하고자 했습니다.

전체 컨텐츠 중 최신 4개의 컨텐츠에 대해서 실행되어야 합니다.

const [currentIndex, setCurrentIndex] = useState(0);
const [isAutoPlaying, setIsAutoPlaying] = useState(true);

이를 위해, 현재 표시되고 있는 슬라이드의 인덱스와 자동 재생 활성화 비활성화 상태를 먼저 선언했습니다.

useEffect(() => {
  if (!isAutoPlaying || contents.length <= 1) return;

  const interval = setInterval(() => {
    setCurrentIndex((prevIndex) =>
      prevIndex === contents.length - 1 ? 0 : prevIndex + 1
    );
  }, 4000);

  return () => clearInterval(interval);
}, [isAutoPlaying, contents.length]);

그리고 useEffect를 사용해 자동 슬라이드를 구현하였습니다.

4초마다 자동으로 , 계속, 슬라이드가 넘어가야 하므로 setInterval 사용과 함께 언마운트 혹은 useEffect 다시 실행 전 (클린업 함수) 에 clearInterval로 메모리 누수를 방지합니다.

그리고 인덱스 값의 규칙을 업데이트 함수형식으로 넣어줍니다.

이렇게 useEffect와 setInterval을 활용해 자동 슬라이드를 구현할 수 있었습니다.