Text ReadMore 구현 With WiniLogis Our Shipment

먼저 기획서에서 모바일 화면일 때 3줄 이상의 문장일 경우 Read more 버튼이 보이게 해 달라는 요청이었습니다.

저는 이 요구사항을 충족시키기 위해 모바일일 경우 특정 길이 이상일 때 Read more 버튼이 보이게 직접 구현했었습니다.

하지만 이때 문제점은 영어와 한글이 섞여있거나 A, b와 같이 문자열의 너비 차이 등등 여러 가지 문제 점이 등장했습니다.

WiniLogis Our Shipment 문제화면

 

이 문제를 해결하기 위해 구글 검색을 정말 많이 했었는데 딱히 마음에 드는 해결방법을 찾지 못하던 중이었습니다.

 

하지만 계속된 노력 끝에 WiniLogis에서 사용 중인 기술스택에 적합한 라이브러리를 찾게 되었습니다.

https://www.npmjs.com/package/react-show-more-text

react-show-more-text

 

최근 업데이트도 3개월 전이어서 믿을만하다고 생각이 들었습니다.

회사에서 퇴근하고 나서부터 계속해서 "어떻게 이 문제를 해결해야 할까?"라는 고민을 참지 못하고 집에 와서 구현을 먼저 해보았습니다.

 

구현 방법은 아래와 같습니다.

npm install react-show-more-text
npm i --save-dev @types/react-show-more-text

 

구현 코드

 

위의 링크를 이용해서 예시 코드를 이용하시면 저와 같이 Read More 버튼도 커스텀할 수 있고 라인수를 통해서 Read More 버튼이 보이는 여부를 결정할 수 도있습니다.

추가적으로 오늘 적용할 때 문제 점 white-space: pre-line이 적용이 안되는 에러 발생!

 

해결 법

<div
	dangerouslySetInnerHTML={{
	__html: boardItem.content.replace(/(?:\r\n|\r|\n)/g,'<br />',),
    }}
/>