개발상 특이점은 다음과 같았음
<aside>
💡 Input 입력값을 State가 아닌 Ref를 통해 관리함
- 별도의 State Library를 사용하지 않아, 개별 Input의 값이 Update될 때마다 최상단의 컴포넌트가 Re-Rendering됨
- 위와 같은 상황을 방지하기 위해, 하단의 컴포넌트만 State를 가지게 하고, 최상단의 컴포넌트는 값 저장을 위한 Ref만 전달하게 코드를 수정함.
</aside>
<aside>
💡 Scroll Indicator 개발
- 화면 오른편에 현재 스크롤되어 있는 섹션과 클릭을 통해 해당 섹션으로 이동하는 기능
- MouseWheel Event와 window.scrollTop, element.getBoundingClientRect() 값을 이용하여 현재 섹션을 판별하여 Indicator의 색깔이 바뀌도록 코드를 짰음
- window.scrollTo()를 이용하여 Indicator를 클릭하면 해당 섹션으로 이동할 수록 있도록 함
</aside>
<aside>
💡 textarea 내부의 custom scrollbar 개발
- 사이트 디자인과 브라우저 기본 스크롤바의 Look & Feel이 일치하지 않아 custom scrollbar를 디자인하게 되었음
- textarea에 텍스트를 입력할 때마다, e.target.scrollHeight 값을 반영하여 스크롤바의 크기가 변경되게 하였음
- textarea 내부에서 발생하는 MouseWheel Event를 통해 일정 값씩 textarea 내 컨텐츠가 스크롤되게 구현하였음
</aside>