사이드바 닫기
Notion에서 Resizer를 클릭하여 사이드바를 닫을 수 있습니다.
드래그와 클릭의 차이점
Resizer의 클릭 이벤트에서 사이드바를 닫을 수 있습니다.
const resizerClickHandler = (event: React.MouseEvent) => {
// 드래그
if (beforeCoordX.current !== event.clientX) {
return;
}
// 클릭
sidebarRef.current!.style.width = "0px";
sidebarRef.current!.style.opacity = "0";
sidebarRef.current!.style.transform = "perspective(400px) rotateY(90deg)"
}이때 리사이저가 드래그인지 클릭인지 구분이 필요하다.
드래그하면 사이드바의 크기가 조정되고 클릭하면 사이드바가 닫힙니다.
마우스 이벤트 mousedown, mouseup, click 순차적으로 발생합니다.
이것을 구별하기 위해 resizerMouseDownHandler먼저 x 좌표(beforeCoordX) 클릭 이벤트의 x 좌표와 비교합니다.
다르면 드래그하고 있음을 알 수 있습니다.
관점
사이드바를 닫으려면 CSS transition 속성을 사용할 수 있습니다.
이때 perspective아래 그림과 같이 사이드바가 안쪽으로 닫히는 효과를 적용하였습니다.
width0으로 주는 rotateY90도로 설정하면 접을수록 점점 작아지는 트랜지션 효과를 적용할 수 있습니다.
SVG 추가
아이콘을 추가하기 위해 svg 파일을 추가하기로 했습니다.
svg를 만드는 방법에는 여러 가지가 있지만 저는 크게 두 가지 방법을 생각해 냈습니다.
- 피그마 사용법
피그마지금은 매우 유명한 디자인 도구이고 학교에서 팀 프로젝트를 위해 한동안 사용했지만 아직 익숙하지 않아서 다른 방법을 찾았습니다.
- 무료 svg 아이콘 사용
나는 찾았다 부트스트랩svg 아이콘은 무료로 제공됩니다.
나중에 별도의 svg를 만들어야 한다면 Figma를 사용하겠습니다.
부트스트랩에서 제공하는 아이콘의 퀄리티가 상당히 좋은데 이 정도면 충분하다고 생각해서 사용하기로 했습니다.
중간점검
아직 사이드바에 추가할 기능이 많이 있지만 잠시 미루겠습니다.
필기 앱의 핵심인 필기 기능을 구현하기로 했습니다.
글을 쓰려면 간략히 contentEditable 속성을 사용하여 div에 쓸 수 있습니다.
그러나 마크다운 기능을 적용하기 위해서는 입력한 마크다운을 파싱하고 스타일을 적용한 후 DOM에 추가해야 하는 번거로움이 매우 크다.
그래서 우선 메타의 오픈소스 어휘코드 구조를 조금씩 참고해서 살펴보고 다시 판단해야 할 것 같습니다.