간단한 버그를 해결하고, 자바스크립트 지식을 쌓는것에 집중했던 하루였습니다.
다라쓰의 댓글입력란은 textarea가 아니라, div contenteditable로 구현되어있습니다.
때문에, textarea 기능 처럼 동작하도록 해주어야 했습니다.
textarea는 기본적으로, 텍스트가 textarea의 끝에 도달하면 자동으로 개행이 되었는데,
div contenteditable은 가로 스크롤이 생기면서 계속 1줄로 가로로 길어지고 있었습니다.
그래서, 아래와 같은 코드를 추가해주었습니다.
word-break: break-all;
white-space: break-spaces;
word-break는 https://developer.mozilla.org/ko/docs/Web/CSS/word-break
모든 문자에 대해서 개행을 하기위해서 break-all을 주었습니다.
white-space는 https://developer.mozilla.org/ko/docs/Web/CSS/white-space
큰 고민없이 가장 무난해보이는 break-spaces 속성을 적용했습니다.
https://github.com/woowacourse-teams/2021-darass/pull/695/files
[FE][댓글모듈] 댓글 입력 시, 가로 스크롤 없이 개행처리 되도록 수정 by zereight · Pull Request #695 ·
Hide details View details zereight merged commit 8c82cfd into main Oct 9, 2021 3 checks passed
github.com
'개발 > 개발 리포트' 카테고리의 다른 글
| 2021/10/11 : React Component NPM으로 배포하기 (feat. typescript) (0) | 2021.10.12 |
|---|---|
| 2021/10/10 : 항상 최상위에 노출되는 모달만들기 (0) | 2021.10.11 |
| 2021/10/08 : 시크릿 모드에서는 localStorage를 사용하지 못한다, jest에서는 --detectOpenHandles 옵션을 사용한다. (0) | 2021.10.09 |
| 2021/10/07 : 댓글 모듈 테스트코드 커버리지 평균 70%이상 달성 완료 (0) | 2021.10.08 |
| 2021/10/06 : localStorage, setTimeOut의 테스트는 생각보다 간단하다. (0) | 2021.10.07 |
