Portfolio


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

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

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


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>
)


const [winX, setWinX] = useState(1440); // 기본값은 원하는 넓이로

useEffect(() => {
	setWinX(window.innerWidth);
}, []);

next.js - window is not defined