[React] 화면 크기 변동에 따라 자동으로 font-size 변경하기(feat. AutoTextSize)

 

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

후 사용하면 됩니다.