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

* ♻ refactor: 랜덤 디펜스 컴포넌트에서 메시지를 보내는 대신 데이터 업데이트 함수를 직접 사용하도록 변경 * 🛠 fix: 잘못된 public 리소스들의 경로를 올바르게 변경 * 🛠 fix: 스토리지 변경을 감지하는 로직의 타입이 잘못된 부분을 수정 * 🛠 fix: 서비스워커가 메시지를 비동기적으로 응답해야 하는 상황에서만 true를 리턴하도록 수정 * 🛠 fix: 마이그레이션 이후 TypeScript 변경에 따른 타입 에러를 해결 # Conflicts: # components/RandomDefenseCreateMenu/DifficultyAdjustMenu/TierSlider/TierSlider.stories.tsx
wzrabbit · Oct 3, 2024 · ee67570 · ee67570
1 parent 74502a8
commit ee67570
Show file tree

Hide file tree

Showing 29 changed files with 107 additions and 105 deletions.
diff --git a/components/AppearanceFieldsetMenu/AppearanceFieldsetMenu.styled.ts b/components/AppearanceFieldsetMenu/AppearanceFieldsetMenu.styled.ts
@@ -13,6 +13,6 @@ export const Container = styled.div`
 
 export const FontText = styled.p<{ $fontFamily: string; $fontSize: string }>`
   color: ${({ theme }) => theme.color.LEMON};
-  font-size: ${({ $fontSize }) => $fontSize ?? '16px'};
+  font-size: ${({ $fontSize }) => $fontSize};
   font-family: ${({ $fontFamily }) => $fontFamily};
 `;
diff --git a/components/AppearanceFieldsetMenu/AppearanceFieldsetMenu.tsx b/components/AppearanceFieldsetMenu/AppearanceFieldsetMenu.tsx
@@ -50,7 +50,7 @@ const AppearanceFieldsetMenu = () => {
     <S.Container>
       <MenuTitle
         title="테마 설정"
-        iconSrc={browser.runtime.getURL('palette.png')}
+        iconSrc={browser.runtime.getURL('/palette.png')}
       />
       <Fieldset
         legend="토탐정 테마 사용 여부"
@@ -68,7 +68,7 @@ const AppearanceFieldsetMenu = () => {
         name="shouldHideTier"
         options={FONT_INFOS.map(({ name, fontFamily, fontSize }, index) => ({
           label: (
-            <S.FontText $fontFamily={fontFamily} $fontSize={fontSize}>
+            <S.FontText $fontFamily={fontFamily} $fontSize={fontSize ?? '16px'}>
               {name}
             </S.FontText>
           ),

diff --git a/components/HiderMenu/HiderFieldsetMenu.tsx b/components/HiderMenu/HiderFieldsetMenu.tsx
@@ -30,7 +30,7 @@ const HiderFieldsetMenu = () => {
     <S.Container>
       <MenuTitle
         title="잠금 시간 설정"
-        iconSrc={browser.runtime.getURL('lock.png')}
+        iconSrc={browser.runtime.getURL('/lock.png')}
       />
       <ProblemTagLockTimer
         hours={hours}

diff --git a/components/InspectResultIcon/InspectResultIcon.tsx b/components/InspectResultIcon/InspectResultIcon.tsx
@@ -14,8 +14,8 @@ const InspectResultIcon = (props: InspectResultIconProps) => {
   const { theme, icon } = props;
   const iconSrc =
     icon === 'check'
-      ? browser.runtime.getURL('inspect-result-check.png')
-      : browser.runtime.getURL('inspect-result-question.png');
+      ? browser.runtime.getURL('/inspect-result-check.png')
+      : browser.runtime.getURL('/inspect-result-question.png');
   const alt =
     icon === 'check'
       ? '이 문제는 알고 있는 알고리즘만으로 풀 수 있는 문제입니다.'

diff --git a/components/LeftSlideToast/LeftSlideToast.stories.tsx b/components/LeftSlideToast/LeftSlideToast.stories.tsx
@@ -56,7 +56,7 @@ export const Default: Story = {
     ),
   ],
   args: {
-    mainIconSrc: browser.runtime.getURL('dice.png'),
+    mainIconSrc: browser.runtime.getURL('/dice.png'),
     theme: 'none',
     progress: 65,
     title: '테스트 제목입니다.',
@@ -96,7 +96,7 @@ export const TotamjungTheme: Story = {
     ),
   ],
   args: {
-    mainIconSrc: browser.runtime.getURL('dice.png'),
+    mainIconSrc: browser.runtime.getURL('/dice.png'),
     theme: 'totamjung',
     progress: 65,
     title: '테스트 제목입니다.',
@@ -136,7 +136,7 @@ export const MultipleDescriptions: Story = {
     ),
   ],
   args: {
-    mainIconSrc: browser.runtime.getURL('dice.png'),
+    mainIconSrc: browser.runtime.getURL('/dice.png'),
     theme: 'none',
     progress: 65,
     title: '필요할 경우 여러 개의 설명을 사용할 수도 있습니다.',
@@ -158,7 +158,7 @@ export const NoDescription: Story = {
     ),
   ],
   args: {
-    mainIconSrc: browser.runtime.getURL('dice.png'),
+    mainIconSrc: browser.runtime.getURL('/dice.png'),
     theme: 'none',
     progress: 65,
     title: '설명이 필요 없다고요? 그럼 메시지만 간결하게 전달해도 문제 없죠.',
@@ -179,7 +179,7 @@ export const VeryLongDescription: Story = {
     ),
   ],
   args: {
-    mainIconSrc: browser.runtime.getURL('dice.png'),
+    mainIconSrc: browser.runtime.getURL('/dice.png'),
     theme: 'none',
     progress: 65,
     title: '매우 긴 설명',

diff --git a/components/LeftSlideToast/LeftSlideToast.tsx b/components/LeftSlideToast/LeftSlideToast.tsx
@@ -1,11 +1,11 @@
 import * as S from './LeftSlideToast.styled';
 import { CheckIcon, CloseIcon } from '@/assets/svg';
-import type { SVGProps } from 'react';
+import type { SVGProps, ReactElement } from 'react';
 import { TotamjungTheme } from '@/types/totamjungTheme';
 import CircleProgressBar from '@/components/common/CircleProgressBar';
 
 interface LeftSlideToastProps {
-  mainIconSrc: string | SVGProps<SVGSVGElement>;
+  mainIconSrc: string | ReactElement<SVGProps<SVGSVGElement>>;
   theme: TotamjungTheme;
   progress: number;
   title: string;
@@ -47,9 +47,7 @@ const LeftSlideToast = (props: LeftSlideToastProps) => {
             {listedDescriptions.map((description, index) => (
               <S.DescriptionContainer key={index} $totamjungTheme={theme}>
                 <CheckIcon />
-                <S.Description key={index} $totamjungTheme={theme}>
-                  {description}
-                </S.Description>
+                <S.Description key={index}>{description}</S.Description>
               </S.DescriptionContainer>
             ))}
           </S.DescriptionList>

diff --git a/components/MenuTitle/MenuTitle.tsx b/components/MenuTitle/MenuTitle.tsx
@@ -1,8 +1,8 @@
-import type { SVGProps } from 'react';
+import type { SVGProps, ReactElement } from 'react';
 import * as S from './MenuTitle.styled';
 
 interface MenuTitleProps {
-  iconSrc: string | SVGProps<SVGSVGElement>;
+  iconSrc: string | ReactElement<SVGProps<SVGSVGElement>>;
   title: string;
 }
 

diff --git a/components/OptionsDataManageMenu/OptionsDataManageMenu.stories.tsx b/components/OptionsDataManageMenu/OptionsDataManageMenu.stories.tsx
@@ -7,15 +7,12 @@ import OptionsDataManageMenu from './OptionsDataManageMenu';
 const meta = {
   title: 'components/OptionsDataManageMenu',
   component: OptionsDataManageMenu,
-  argTypes: {},
 } satisfies Meta<typeof OptionsDataManageMenu>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-  args: {
-    onChange: () => {},
-  },
+  args: {},
 };
diff --git a/components/OptionsDataManageMenu/OptionsDataResetModal/OptionsDataResetModal.stories.tsx b/components/OptionsDataManageMenu/OptionsDataResetModal/OptionsDataResetModal.stories.tsx
@@ -42,7 +42,7 @@ export const Default: Story = {
           disabled={false}
           ariaLabel="모달 열기"
           onClick={() => {
-            setIsOpen(() => true);
+            setIsOpen(true);
           }}
         />
         <OptionsDataResetModal
@@ -51,13 +51,13 @@ export const Default: Story = {
             alert(
               'onClose()를 실행시켰습니다. 이는 사용자가 작업을 취소했음을 의미합니다.',
             );
-            setIsOpen(() => false);
+            setIsOpen(false);
           }}
           onReset={() => {
             alert(
               'onReset()을 실행시켰습니다. 이는 사용자가 초기화를 수락한 경우입니다.',
             );
-            setIsOpen(() => false);
+            setIsOpen(false);
           }}
         />
       </>

diff --git a/components/OptionsDataManageMenu/OptionsDataUploadModal/OptionsDataUploadModal.stories.tsx b/components/OptionsDataManageMenu/OptionsDataUploadModal/OptionsDataUploadModal.stories.tsx
@@ -42,7 +42,7 @@ export const Default: Story = {
           disabled={false}
           ariaLabel="모달 열기"
           onClick={() => {
-            setIsOpen(() => true);
+            setIsOpen(true);
           }}
         />
         <OptionsDataUploadModal
@@ -51,13 +51,13 @@ export const Default: Story = {
             alert(
               'onClose()를 실행시켰습니다. 이는 사용자가 작업을 취소했음을 의미합니다.',
             );
-            setIsOpen(() => false);
+            setIsOpen(false);
           }}
           onUpload={() => {
             alert(
               'onUpload()을 실행시켰습니다. 이는 사용자가 초기화를 수락한 경우입니다.',
             );
-            setIsOpen(() => false);
+            setIsOpen(false);
           }}
         />
       </>

diff --git a/components/OptionsDataManageMenu/OptionsDataUploadModal/OptionsDataUploadModal.tsx b/components/OptionsDataManageMenu/OptionsDataUploadModal/OptionsDataUploadModal.tsx
@@ -15,7 +15,7 @@ interface OptionsDataUploadModalProps {
 
 const DATA_UPLOAD_CONFIRM_TEXT = '숙지했습니다';
 
-const OptionsDataResetModal = (props: OptionsDataUploadModalProps) => {
+const OptionsDataUploadModal = (props: OptionsDataUploadModalProps) => {
   const { open, onClose, onUpload } = props;
   const { inputValue, isSameWithConfirmText, updateInputValue } =
     useConfirmInput({
@@ -85,4 +85,4 @@ const OptionsDataResetModal = (props: OptionsDataUploadModalProps) => {
   );
 };
 
-export default OptionsDataResetModal;
+export default OptionsDataUploadModal;
diff --git a/...reateMenu/DifficultyAdjustMenu/TierPresetButtonList/TierPresetButton/TierPresetButton.tsx b/...reateMenu/DifficultyAdjustMenu/TierPresetButtonList/TierPresetButton/TierPresetButton.tsx
@@ -38,7 +38,7 @@ const TIER_RANGE = {
   },
 } as const;
 
-const TierPresetButtonProps = (props: TierPresetButtonProps) => {
+const TierPresetButton = (props: TierPresetButtonProps) => {
   const { rank, onClick } = props;
 
   return (
@@ -57,4 +57,4 @@ const TierPresetButtonProps = (props: TierPresetButtonProps) => {
   );
 };
 
-export default TierPresetButtonProps;
+export default TierPresetButton;
diff --git a/components/Widget/Widget.tsx b/components/Widget/Widget.tsx
@@ -60,7 +60,7 @@ const Widget = (props: WidgetProps) => {
                 onClick={openOptionsPage}
               >
                 <S.DropdownButtonIcon
-                  src={browser.runtime.getURL('settings.png')}
+                  src={browser.runtime.getURL('/settings.png')}
                 />
               </S.DropdownMenuButton>
             </S.DropdownMenuItem>
@@ -74,7 +74,7 @@ const Widget = (props: WidgetProps) => {
                 onClick={toggleTotamjungTheme}
               >
                 <S.DropdownButtonIcon
-                  src={browser.runtime.getURL('palette.png')}
+                  src={browser.runtime.getURL('/palette.png')}
                 />
               </S.DropdownMenuButton>
             </S.DropdownMenuItem>
@@ -87,7 +87,7 @@ const Widget = (props: WidgetProps) => {
                 onClick={performRandomDefenseByClick}
               >
                 <S.DropdownButtonIcon
-                  src={browser.runtime.getURL('dice.png')}
+                  src={browser.runtime.getURL('/dice.png')}
                 />
               </S.DropdownMenuButton>
             </S.DropdownMenuItem>
@@ -102,9 +102,9 @@ const Widget = (props: WidgetProps) => {
                   src={
                     shouldShowInspectIcon
                       ? hasUnknownAlgorithms
-                        ? browser.runtime.getURL('inspect-result-question.png')
-                        : browser.runtime.getURL('inspect-result-check.png')
-                      : browser.runtime.getURL('search.png')
+                        ? browser.runtime.getURL('/inspect-result-question.png')
+                        : browser.runtime.getURL('/inspect-result-check.png')
+                      : browser.runtime.getURL('/search.png')
                   }
                 />
               </S.DropdownMenuButton>
@@ -117,7 +117,7 @@ const Widget = (props: WidgetProps) => {
                 $widgetTheme={theme}
               >
                 <S.DropdownButtonIcon
-                  src={browser.runtime.getURL('lock.png')}
+                  src={browser.runtime.getURL('/lock.png')}
                 />
               </S.DropdownMenuButton>
             </S.DropdownMenuItem>

diff --git a/components/common/Fieldset/Fieldset.tsx b/components/common/Fieldset/Fieldset.tsx
@@ -25,7 +25,7 @@ const Fieldset = (props: FieldsetProps) => {
     options,
     checkedValue,
     disabled,
-    isVertical,
+    isVertical = false,
     onChange,
   } = props;
 

diff --git a/components/common/IconButton/IconButton.styled.ts b/components/common/IconButton/IconButton.styled.ts
@@ -33,7 +33,7 @@ export const Button = styled.button<{
   transition: 0.2s;
 `;
 
-export const Text = styled.span<{ $size: 'large' | 'medium'; $color: string }>`
+export const Text = styled.span<{ $size: 'large' | 'medium' }>`
   font-size: ${({ $size }) => ($size === 'large' ? '20px' : '16px')};
   font-weight: 600;
   text-align: center;

diff --git a/components/common/IconButton/IconButton.tsx b/components/common/IconButton/IconButton.tsx
@@ -1,12 +1,12 @@
 import * as S from './IconButton.styled';
-import { SVGProps } from 'react';
+import type { ReactElement, SVGProps } from 'react';
 
 interface CommonIconButtonProps {
   name: string;
   size: 'large' | 'medium';
   width?: string;
   color: string;
-  iconSrc?: string | SVGProps<SVGSVGElement>;
+  iconSrc?: string | ReactElement<SVGProps<SVGSVGElement>>;
   disabled: boolean;
   ariaLabel: string;
   autoFocus?: boolean;

diff --git a/components/common/Input/Input.tsx b/components/common/Input/Input.tsx
@@ -17,7 +17,7 @@ interface InputProps {
   onChange: (event: ChangeEvent<HTMLInputElement>) => void;
 }
 
-const Input = forwardRef((props: InputProps, ref) => {
+const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
   const { width, hasError, textAlign, ariaLabel, ...rest } = props;
 
   return (