textarea 줄 수에 따라 style 변경하기 ( line count에 따른 border radius설정 및 textarea line count 개수를 이용한 CSS 설정 )

디자인팀에서 요청이 들어왔다.

textarea에 들어가는 line에 따라 border-radius가 달라졌으면 좋겠다는 요청!

 

 

한 줄일땐 동그랗게, 여러 줄일때부터는 네모낳게

 

 

문제는 해당 부분을 사용하는 공간의 text area의 width가 고정되어 있지 않다는 점이다.

유저의 기기는 정말 다양하기 때문에 width를 고정할 수 는 없었다

ex) iphone se에서 3줄일게 z-fold에서는 1줄이 될 수 있다.. 😅

 

 

1) Textarea의 text value를 줄바꿈 기준으로 split

처음 생각한 방법은 text area의 value를 잡아서  splilting 하는 법!

 

const getCurInputTextLineCnt = useCallback((text) => {
    const lines = text?.split(/\r|\r\n|\n/);
    const count = lines?.length;
    return count;
  }, []);

 <TextArea
      onChange={onChange}
      style={{
        borderRadius: getCurInputTextLineCnt(text)>1? "11px" : "100px"
      }}
    />

line count가 1 초과일 경우와 아닐 경우를 구분해 style을 지정했다.

 

한계

 

 

너무 신나서 잘되는 줄 알았더니 사용자가 엔터 없이 내용이 많아져 줄바꿈이 되는 경우를 잡지 못했다.

 

=> height을 이용해야 한다!

 

 

 

 

 

 

 

 

2) Height과 text 모두 이용

🔗 code sandBox 참고

Textarea의 onChange 이벤트에서 target의 scrollHeight을 state로 넣고

isSingleHeight이라는 함수를 만들어

사용자가 엔터를 쳤거나  or 텍스트 height이 넘어갔을 때 style 변경이 가능하도록 설정

 

  const getCurInputTextLineCnt = useCallback((text) => {
    const lines = text?.split(/\r|\r\n|\n/);
    const count = lines?.length;

    return count;
  }, []);

  const isSingleHeight = useCallback((text, height) => {
    console.log("text line count", getCurInputTextLineCnt(text));
    console.log("scroll height", height);
    return getCurInputTextLineCnt(text) > 1 || height > SINGLE_ROW_HEIGHT;
  }, []);

 

한계

height이 바뀌는 순간 catch가 한 박자 느리게 되면서,

여러줄 -> 한 줄 이 되는 순간이 아니라

여러줄 -> 한 줄이 되고 입력이 있어야 style 설정이 되는 한계가 생겼다. 

 

 

 

 

 

 

그 외 추가로 이 문제를 해결하기 위해 

Antd  text area에서 autoSize prop을 보니 line count를 하는 로직이 있을 것같아 antd 를 clone해을 샅샅이 뒤졌고..

antd 에서 🔗 rc-textarea 를 가져와 사용한 것을 확인하고 뜯어보니

 

calculateNodeHeight.tsx 함수를 이용해 구성 중이었고

- 가상의 hiddenText area를 만들고

- ' ' 빈 value를 주어 height을 잡고

-  singleRowHeight을 만들어 height한정 하는 것까지 확인..

 

 

 

 

 

 

 

2) Height과 text 모두 이용

Height만 이용하는 방법 발견!

위 상황에서 text를 굳이 이용한 이유는 하나 view width를 채우지 않고 엔터를 누른 경우를 잡기 위해서이다.

하지만 결국 사용자가 입력하다 엔터를 취소해 다시 한 줄이 된 경우를 잡지 못하는 한계가  있었다.

 

 

요 경우는 TextArea에 onChange대신 onKeyUp을 사용했더니 해결 !

 

두 이벤트 요소의 정의는 아래와 같은데,

 

onChange : html요소가 바뀌었을 때 즉 focus 발생 전과 후를 비교하여 변화가 일어났을 경우 발생하는 이벤트

onKeyUp : input 이벤트 발생 후 value가 업데이트 된 이후 손을 떼면 발생하는 이벤트

 

 

자세한 건 input 관련 이벤트 파헤치기 를 참고해 주세요!

input 관련 이벤트 파헤치기 - input onChange onKeyUp onKeydown