웹개발
[React] 화면 크기 변동에 따라 자동으로 font-size 변경하기(feat. AutoTextSize)
Heeyeon Choi
2024. 10. 20. 19:07
728x90
const [maxDetailFontSize, setDetailMaxFontSize] = useState(12);
const [minDetailFontSize, setDetailMinFontSize] = useState(5);
const [windowWidth, setWindowWidth] = useState(window.innerWidth);
<AutoTextSize
mode='oneline'
maxFontSizePx={maxDetailFontSize}
minFontSizePx={minDetailFontSize}
key={windowWidth} // key 속성을 통해 강제로 리렌더링 유도
>
{time}{t('atTime')} <span style={{color:'#00FF62'}}>{name}</span>{t('rouletteCreated')}
</AutoTextSize>
// 리사이즈 이벤트 리스너 추가
const handleResize = () => {
const newWindowWidth = window.innerWidth;
// 윈도우 크기에 따라 maxFontSize와 minFontSize를 조정
if (newWindowWidth < 500) {
setMaxFontSize(18);
setDetailMaxFontSize(8);
setMinFontSize(6);
setDetailMinFontSize(5);
} else if (newWindowWidth < 800) {
setMaxFontSize(22);
setDetailMaxFontSize(10);
setMinFontSize(8);
setDetailMinFontSize(8);
} else {
setMaxFontSize(25);
setDetailMaxFontSize(12);
setMinFontSize(10);
setDetailMinFontSize(10);
}
// 윈도우 너비 상태 업데이트
setWindowWidth(newWindowWidth);
};
윈도우 리사이즈 이벤트를 받아와서 그에 따른 max, min 사이즈 설정하기
AutoTextSize
npm install AutoTextSize
후 사용하면 됩니다.
728x90