게시판에 카테고리 기능을 추가했다.

사실 UI적인 부분을 추가하는 부분이 크게 어렵지는 않았다.

자바스크립트로 창 열림/닫힘을 구분하는 게 아닌 CSS로 제어하기

얼마 전 습득했던 Tailwind CSS의 플러그인인 DaisyUI의 플로팅 버튼 컴포넌트 사용 방법을 보고 터득한 기술이다.

부모 요소에다가 :focus-within을 걸어버리면 내부 요소에 포커스가 잡혀있는 경우 해당하는 상태로 부모 요소가 지정된다는 사실!

즉, 라벨 요소에 클릭 가능한 요소인 것처럼 인식되게끔 role="button"과 tabindex="0"을 걸어주고, 드롭다운 항목에도 모두 그렇게 해주면 문제는 해결된다. 그러면 자바스크립트 없이도 드롭다운을 구현할 수 있게 되는 놀라운!

선택하면 창이 닫히게 해야 하는데 그건 어쩔 수 없이 자바스크립트로...

이렇게 얘기하니 마치 내가 자바스크립트를 좋아하지 않는 것처럼 보일 수 있는데...

사실 자바스크립트로 수동으로 제어하는 것이 그다지 세련된 접근법이 아닌 것 같아보여서 그런 것일 뿐...ㅎ

암튼,.. 창을 닫히게 하는 것은 결국 내부 포커스된 요소가 포커스를 잃어야 한다는 것인데, 그것은 CSS만으로는 해결할 수 없었다.

간단하게 pointerup 이벤트에다가 blur()을 걸어주는 것으로 해결했다.

백엔드

어쨌든 기존에 카테고리 관련된 스트럭처를 준비해놓지 않았기 때문에 이 부분을 손봐야 했다.

딱히 어려울 것은 없었고, 기존에 확장 가능하게끔 준비를 해 놓은 덕분에 그냥 도큐먼트 업데이트만 잘 해주면 되었다.

아마... 잘 되어야 할텐데,,,