문제 정의

DaisyUI로는 컴포넌트에 한계가 있다. 컴포넌트의 커스터마이징과 확장성에도 한계가 있어 보다 유연하고 강력한 UI 라이브러리로 마이그레이션이 필요하다. 또한 디자인 시스템의 일관성과 개발 생산성을 향상시키기 위해 컴포넌트 기반 접근 방식이 더 적합하다고 판단했다.

기능 요구사항

1. 기존 Daisy UI에서 Chara UI로 마이그레이션한다.

To Do List

• [x] 웹 마이그레이션
  • [x] Header : https://ui.shadcn.com/docs/components/navigation-menu
  • [x] MemoCard : https://ui.shadcn.com/docs/components/card
• [x] 테마 설정
• [x] 모노 레포 내 UI 패키지에서 이를 한 번에 관리하기
• [x] Side Panel 마이그레이션
• [x] Web에서 UI 패키지의 컴포넌트 활용
• [x] SidePanel 다크모드 지원
  • SidePanel은 쿠키 사용이 안된다.

고민 포인트

1. tsc --emitDeclarationOnly --outDir dist명령어로 declare파일을 생성했을 때 어떤 이점이 있을까?

   물론 typescript와 javascript 코드를 분리한다는 점에서 장점이 있겠지만 나는 사실 불편함을 많이 느꼈다.

   shared패키지에서 import한 useMemoPostMutation이 선언된 곳을 찾아가보고싶다고 해보자. 이 때 useMemoPostMutation훅을 command + 좌클릭을 할 것이다. shared패키지의 package.json의 types 경로(혹은 exports > types 경로)가 지정되어 있고 해당 위치에 적절한 declare파일이 생성되어 있다면 그 파일 경로로 가게 될 것이다. 그럼 우리는 아래와 같이 type껍데기(declare파일)만 보게 된다.

   

   useMemoPostMutation.d.ts

   실제 선언된 코드를 찾기 위해서는 #useMemoPostMutation로 직접 검색해야한다.

   상당히 불편한 부분이다.

배운 점

1. 패키지 내 alias가 안된다면 build옵션의 bundle을 true로 설정하자.

   const buildOptions = {
     bundle: true,
     // ..