re-resizable : 길이조절 창 비활성화 & 스타일링

1️⃣ re-resizable 라이브러리 사용 중 :

코드페이지에서 사이드바, 코드에디터 넓이를 사용자가 줄일 수 있도록 이 라이브러리를 사용하는데 몇가지 애 먹었던 것들이 있다..

1. 상하좌우 길이 조절 div들이 자동으로 다 활성화 돼있음.

enable={{ top: false, bottom: false, right: true, left: false }}

2️⃣ 해결: 이 코드로 활성화, 비활성화를 정할 수 있었다.

1. 조절 div들 클래스 없음 :
   div들을 스타일링 하고 싶었는데 자동으로 렌더링 될 때 생기는 얘들이라 어떻게 클래스도 못주고 난감해하면서 구글링을 하다가 겨우겨우 알아냈다…

handleClasses={{ right: "resizeHandle1" }}

3️⃣ 한계 :

나는 module.css를 쓰고 있는데, 규칙이 string밖에 안되서 module.css에 넣지 않고 전역css파일(index.css)에 넣어서 스타일링을 주었다.