[FIX] 마이그레이션 이후 타입스크립트 타입 에러 및 서비스워커 에러를 해결

[wzrabbit]

PR 설명

본 PR에서는, WXT 마이그레이션 이후 달라진 API 및 업그레이드된 타입스크립트 버전으로 인해 새롭게 발생한 에러들을 해결했습니다.

1️⃣ WXT 관련 에러

1. public 에셋들의 경로가 잘못된 점을 수정: my-image.png와 같은 경로를 /my-image.png와 같은 경로로 수정했습니다. 놀랍게도 WXT에서는 type safety가 보장되지 않는 public 에셋들에 대해서도 잘못된 경로임을 인지하고 에러를 띄웠는데**, 이는 postinstall에서 생성되는 타입들로 인해 타입의 안정성을 보장받고 있다는 것을 알게 되었습니다.

2. 마이그레이션 이후 서비스워커 로직을 담당하는 main.ts에서 타입 에러가 났는데, sendResponse 콜백 함수의 타입이 () => void여야 하는 것으로 추론되었습니다. 당연하지만 sendResponse 특성상 사용자의 브라우저로 응답 데이터를 보내줘야만 하는데 타입의 파라미터에 아무것도 없는 것은 이상하게 여겨졌습니다. 확인 결과 이는 버그의 일종이었으며, 이후에는 이슈에 명시된 방식대로 문제를 해결했습니다.
   • browser.runtime.onMessage.addListener callback's 3rd argument sendResponse has incorrect type wxt-dev/wxt#299
   • [Experimental Feedback] Exclude webextension-polyfill via extensionApi: "chrome" wxt-dev/wxt#868
3. 스토리지 변경을 감지해야 하는 로직의 타입을 WXT에서 제공하는 타입으로 변경했습니다.

2️⃣ 타입 관련 에러

• 몇몇 컴포넌트에서 optional인 props에 대해 default 값을 제대로 지정해주지 않은 점을 알 수 있었습니다. 전부 수정했습니다.
  • changes의 경우 Storage.StorageChange
  • areaName의 경우 string

3️⃣ 구현 관련 에러

• 서비스워커 로직에서 sendResponse를 사용해야 하는 경우에만 조건부로 true를 반환하도록 변경하였습니다.
• 잘못된 컴포넌트명을 사용하고 있는 컴포넌트들에 대해 컴포넌트명을 올바르게 수정했습니다.