상태(State) 설정: useState를 사용하여 상태 값을 설정하고 관리합니다. 예를 들어, number, rewards, locked, statistic, remainingTime, inputValue 등의 상태가 있습니다.
시간 관련 기능: moment 라이브러리를 사용하여 시간과 관련된 작업을 수행합니다. 특히, 남은 시간을 업데이트하는 데 사용됩니다.
애니메이션 효과: useEffect 훅을 이용하여 숫자, 잠긴 금액, 보상 및 통계와 관련된 값들을 일정 시간 동안 애니메이션화하여 부드럽게 변화하도록 합니다.
슬라이더 구현: react-slick 라이브러리를 사용하여 이미지 또는 콘텐츠를 슬라이드로 표시하는 컴포넌트를 생성합니다.
입력 관리 및 클릭 이벤트 핸들링: 사용자의 입력을 받아 상태를 업데이트하고, 버튼 클릭과 같은 이벤트에 대한 핸들러를 구현합니다.
화면 스타일링: CSS 파일을 통해 스타일을 지정하며, 일부 요소들은 동적으로 클래스를 토글하여 모달이나 다른 요소들을 표시하거나 가리도록 합니다.
Chart: Recharts 라이브러리를 사용하여 구현된 선 그래프 컴포넌트입니다. CustomTooltip: Recharts의 툴팁을 커스터마이징한 컴포넌트로, 각 데이터 포인트에 대한 세부 정보를 표시합니다.
스크롤 이벤트 핸들링: 페이지 스크롤에 따라 헤더에 sticky 클래스를 토글합니다.
다크 모드 토글: handleToggle 함수는 다크 모드를 토글하고, 해당 토글에 따라 페이지의 여러 요소에 대한 스타일을 변경합니다.
메타마스크 연동: connectWallet 함수는 사용자의 지갑을 연결하고, 연결된 상태에서는 지갑 주소를 표시하며 연결을 해제할 수 있습니다.
모달 및 메뉴 관리: 햄버거 아이콘을 클릭하면 모달이 나타나고, ESC 키를 누르면 모달이나 메뉴가 닫히도록 합니다.
자동 지갑 데이터 업데이트: useEffect 훅을 사용하여 일정 간격으로 지갑 데이터를 업데이트합니다.
이벤트 리스너 등록 및 해제: useEffect 훅을 사용하여 이벤트 리스너를 등록하고 컴포넌트가 언마운트될 때 이를 해제합니다.