목표
캘린더에 렌더링된 일정 부분(모임카드)에 마우스 이벤트 추가하기 onMouseOver, onMouseLeave, onClick 등의 이벤트를 주어 위 짤처럼 동작하는 것을 목표로 한다.
onMouseOver: 모임카드에 마우스를 올리면 배경색을 변경한다. 이 때 같은 일정인 경우 다른 div도 같이 색상이 변경된다.
onMouseLeave: onMouseOver 기본 배경색으로 변경된다.(이벤트 제거)
onClick: 모임카드를 클릭하면 해당하는 모임 페이지로 이동한다.
구현
1. CalendarTable.tsx
월 별 전체 일자를 출력하는 컴포넌트이다. 월 기준 첫 일자와 마지막 일자를 구하여 반복하여 출력한다.
우선 hoverItem state와 핸들링할 수 있는 함수를 정의한 뒤 Props로 CalendarCell에 전달한다.
const [hoverItem, setHoverItem] = useState("");
const handleHoverItem = (id: string) => {
setHoverItem(id);
};2. CalendarCell.tsx
캘린더 일자 하나하나에 해당하는 컴포넌트이다. 모임카드와 후기카드 렌더링 및 스타일 로직을 담당(?)한다.
1. meetCardId 정의
각 모임카드에 정의된 데이터를 기준으로 meetCardId를 추출한다. 다른 '주'에서 생성된 모임 카드여도 같은 모임이라면 같은 type, typeId 값을 갖고있기 때문에 onMouseOver 이벤트로 다른 div의 색상을 변경하는게 가능하다.
const meetCardId = `${meetCard.type}-${meetCard.typeId}`;2. 이벤트처리
onMouseOver: 이벤트 발생 시 handleHoverItem에 해당 meetCardId 를 전달한다.
onMouseLeave: handleHoverItem에 빈 문자열을 전달한다.
onClick: 모임 상세페이지로 이동시킨다.
<div
className={`${meetCardContentBg}`}
onMouseOver={() => handleHoverItem(meetCardId)}
onMouseLeave={() => handleHoverItem("")}
onClick={() => {
router.push(`/meets/${meetCard.typeId}`);
}}
>3. 스타일 변경
onMouseOver 이벤트로부터 변경된 hoverItem과 렌더링되는 모임카드의 meetCardId가 같은 경우 배경색상을 변경한다.
const meetCardContentBg = hoverItem === meetCardId ? "bg-[#FF731A]" : "bg-[#FFD0B2]";결과
4차 구현 마무리
프로젝트에 필요한 캘린더 기능 구현이 드디어 끝났다! 앞으로 자잘한 오류 수정을 진행할 예정이며 전체 코드는 깃허브 에서 확인이 가능합니다.
캘린더 업그레이드 체크리스트
실제 데이터 기준으로 동작되도록 변경 (선행 작업 이후 진행예정)✔️현재의 이 조잡한 디자인을 빨리 바꾸고 싶지만 실제 데이터가 생성된 후 진행 예정✔️필터링✔️일정부분에 mouseEnter, click 이벤트 추가