[FE] 지출 내역 추가 플로우에서 참여 인원의 토큰의 x버튼에 낭독기 커서가 가도록 함

client/package.json

@@ -24,7 +24,7 @@
     "@eslint/compat": "^1.1.0",
     "@eslint/js": "^9.6.0",
     "@jest/types": "^29.6.3",
-    "@sentry/webpack-plugin": "^2.22.0",
+    "@sentry/webpack-plugin": "^2.22.5",
     "@storybook/addon-essentials": "^8.2.2",
     "@storybook/addon-interactions": "^8.2.2",
     "@storybook/addon-links": "^8.2.2",

client/src/components/Design/components/ChipButton/ChipButton.tsx

@@ -5,6 +5,7 @@ import {useTheme} from '@components/Design/theme/HDesignProvider';
 
 import Text from '../Text/Text';
 import Icon from '../Icon/Icon';
+import IconButton from '../IconButton/IconButton';
 
 import {chipButtonStyle} from './ChipButton.style';
 
@@ -16,10 +17,13 @@ interface Props {
 
 const ChipButton = ({color, text, onClick}: Props) => {
   const {theme} = useTheme();
+
   return (
     <div css={chipButtonStyle({color, theme})}>
       <Text textColor="black">{text}</Text>
-      <Icon iconType="inputDelete" onClick={onClick} />
+      <IconButton variants="none">
+        <Icon iconType="inputDelete" onClick={onClick} />
+      </IconButton>
     </div>
   );
 };

client/src/components/Design/components/Icon/Icon.tsx

@@ -2,7 +2,6 @@
 
 import Toss from '@assets/image/Toss_Symbol_Primary.png';
 import InputDelete from '@assets/image/inputDelete.svg';
-import Buljusa from '@assets/image/buljusa.svg';
 import Error from '@assets/image/error.svg';
 import Confirm from '@assets/image/confirm.svg';
 import Trash from '@assets/image/trash.svg';
@@ -20,27 +19,27 @@ import {useTheme} from '@theme/HDesignProvider';
 
 import {iconStyle} from './Icon.style';
 
-const ICON = {
-  inputDelete: <InputDelete />,
-  buljusa: <Buljusa />,
-  rightChevron: <RightChevron />,
-  search: <Search />,
-  error: <Error />,
-  confirm: <Confirm />,
-  trash: <Trash />,
-  trashMini: <TrashMini />,
-  check: <Check />,
-  x: <X />,
-  pencilMini: <PencilMini />,
+export const ICON = {
+  inputDelete: <InputDelete aria-label="지우기" />,
+  rightChevron: <RightChevron aria-label="더보기" />,
+  search: <Search aria-label="검색" />,
+  error: <Error aria-label="오류" />,
+  confirm: <Confirm aria-label="확인" />,
+  trash: <Trash aria-label="삭제" />,
+  trashMini: <TrashMini aria-label="삭제" />,
+  check: <Check aria-label="선택" />,
+  x: <X aria-label="x" />,
+  pencilMini: <PencilMini aria-label="수정" />,
   toss: <img src={Toss} width="16" height="16" alt="toss icon" />,
-  meatballs: <Meatballs />,
-  editPencil: <EditPencil />,
-  heundeut: <img src={`${process.env.IMAGE_URL}/heundeut.svg`} />,
-  photoButton: <PhotoButton />,
-};
+  meatballs: <Meatballs aria-label="메뉴" />,
+  editPencil: <EditPencil aria-label="수정" />,
+  heundeut: <img src={`${process.env.IMAGE_URL}/heundeut.svg`} aria-label="행동대장 로고" />,
+  photoButton: <PhotoButton aria-label="사진" />,
+} as const;
 
-export const Icon: React.FC<IconProps> = ({iconColor, iconType, ...htmlProps}: IconProps) => {
+export const Icon = ({iconColor, iconType, ...htmlProps}: IconProps) => {
   const {theme} = useTheme();
+
   return (
     <div css={iconStyle({iconType, theme, iconColor})} {...htmlProps}>
       {ICON[iconType]}

client/src/components/Design/components/Icon/Icon.type.ts

@@ -1,23 +1,9 @@
 import {Theme} from '@theme/theme.type';
 import {ColorKeys} from '@token/colors';
 
-export type IconType =
-  | 'inputDelete'
-  | 'buljusa'
-  | 'rightChevron'
-  | 'search'
-  | 'error'
-  | 'confirm'
-  | 'trash'
-  | 'trashMini'
-  | 'check'
-  | 'x'
-  | 'pencilMini'
-  | 'toss'
-  | 'meatballs'
-  | 'editPencil'
-  | 'heundeut'
-  | 'photoButton';
+import {ICON} from './Icon';
+
+export type IconType = keyof typeof ICON;
 
 export type IconColor = ColorKeys;
 

client/src/components/Design/components/IconButton/IconButton.tsx

@@ -11,6 +11,7 @@ export const IconButton: React.FC<IconButtonProps> = forwardRef<HTMLButtonElemen
   ref,
 ) {
   const {theme} = useTheme();
+
   return (
     <button ref={ref} css={iconButtonStyle({theme, size, variants})} {...htmlProps}>
       {children}

client/src/hooks/useToast/useToast.test.tsx

@@ -1,11 +1,10 @@
-import {render, renderHook, screen, waitFor} from '@testing-library/react';
+import {render, screen, waitFor} from '@testing-library/react';
 import {act} from 'react';
 
 import ToastContainer from '@components/Toast/ToastContainer';
 
 import {HDesignProvider} from '@HDesign/index';
 
-import {useToast} from './useToast';
 import toast from './toast';
 
 const TOAST_MESSAGE = '테스트 메세지에요.';