next.js - window is not defined

• 케러셀을 반응형으로 구현하기 위해서 style파일 뿐만 아니라 tsx파일에서도 브라우저의 넓이가 필요했기 때문에 window.innerWidth를 사용하여 브라우저의 넓이를 받아와서 반응형으로 구현했습니다.

// ImageSlider.tsx
const [winX, setWinX] = useState(window.innerWidth);

const resizeWindow = () => {
	setWinX(window.innerWidth);
};

useEffect(() => {
	window.addEventListener('resize', resizeWindow);
	return () => {
		window.removeEventListener('resize', resizeWindow);
	};
}, []);

• 제가 구현한것은 기존에는 현재의 index + 1, index + 2, index + 3인 Card에 active 속성을 true로 할당해서 가운데 3개의 카드만 정상적인 색상으로 출력되도록 하는 것 입니다.

• 반응형을 위해서 브라우저의 넓이가 1280px 이하일 때는 현재의 index만 정상적인 색상으로 출력되도록 하였습니다.

const isActive = (idx: number) => {
	if (winX <= 1280) {
		return currentIndex + 2 === idx + 1;
	}
	for (let i = 1; i <= 3; i++) {
		if ((currentIndex + i) % (bookmarkCount + 1) === idx) {
			return true;
		}
	}
	return false;
};

return (
	<S.SliderContainer>
		<S.CardList ref={sliderRef}>
			{bookmarks.map((cardInfo, idx) => (
				<S.CardWrapper key={cardInfo.id * idx + 1} active={isActive(idx)}>
					<Card data={cardInfo} />
				</S.CardWrapper>
			))}
		</S.CardList>
	</S.SliderContainer>
)