2023.03.10) 항해 33일차

오늘은 어제 멘탈터져서 다른 공부하느라 못 했던 과제를 했다.

스타일트 컴포넌트로 버튼, 인풋, 모달, 셀렉트를 만들어내는 것이었다.

 

버튼은 어려울 것 없이 뚝딱!!

인풋도 괜찮았지만 단 하나,

인풋창에 숫자만 입력되게 하고 세자릿수마다 콤마가 찍히도록 하기 위해서

정규식을 사용해야만 했던 것이다...

 

  const priceChangHandler = (setPrice, e) => {
    e.target.value = e.target.value.replace(/[^0-9]/g, ""); // 입력값이 숫자가 아니면 공백
    e.target.value = e.target.value.replace(/,/g, ""); // ,값 공백처리
    e.target.value = e.target.value.replace(/\B(?=(\d{3})+(?!\d))/g, ","); // 정규식을 이용해서 3자리 마다 , 추가
    setPrice(e.target.value);
  };

이렇게 정규식을 적용하였더니 문제없이 돌아가서 행복했다ㅠㅠ

 

모달도 div 박스로 구현해서 true이면 display가 flex로,

false이면 display가 none으로 동작하게 해서 모달창을 구현하였다.

모달창 두 개 중 하나는 모달박스 바깥 영역을 누르면 모달창이 꺼지도록 만들어야 했는데,

모달박스를 눌러도 꺼져서 모달박스에

onClick={(e) => e.stopPropagation()}

위의 코드를 넣어서 이벤트 버블링을 막아주었다.

 

 

셀렉터는 제일 어려웠는데......

overflow를 사용하니 생각보다 별거 없었다.....

div박스를 이곳저곳에 만들어보며 별 짓을 다 했는데,,,

해결하고 버튼의 크기가 변하는 것을 막기 위해

min-heigth도 주었다!!!