feat: 참여자 입금 상태, 참여자 이름 Chip 컴포넌트 구현 (#570)

* feat: Icon 컴포넌트에 check, x 추가

* feat: 참여자의 입금 상태를 관리하는 DepositCheck 컴포넌트 기능 구현

* test: DepositCheck 스토리북 생성

* refactor: isCheck props를 isDeposited로 api 이름과 동일하게 변경

* fix: icon defalut color 누락된 부분 추가

---------

Co-authored-by: jinho_kim98 <[email protected]>

client/src/components/Design/components/DepositCheck/DepositCheck.stories.tsx

@@ -0,0 +1,27 @@
+import type {Meta, StoryObj} from '@storybook/react';
+
+import DepositCheck from '@HDcomponents/DepositCheck/DepositCheck';
+
+const meta = {
+  title: 'Components/DepositCheck',
+  component: DepositCheck,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    isDeposited: {
+      description: '',
+      control: {type: 'boolean'},
+    },
+  },
+  args: {
+    isDeposited: false,
+  },
+} satisfies Meta<typeof DepositCheck>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {};

client/src/components/Design/components/DepositCheck/DepositCheck.style.ts

@@ -0,0 +1,21 @@
+import {css} from '@emotion/react';
+
+import {WithTheme} from '@components/Design/type/withTheme';
+
+import {DepositCheckStyleProps} from './DepositCheck.type';
+
+export const DepositCheckStyle = ({theme, isDeposited}: WithTheme<DepositCheckStyleProps>) =>
+  css({
+    display: 'flex',
+    alignItems: 'center',
+    gap: '0.125rem',
+    border: `1px solid ${isDeposited ? theme.colors.primary : theme.colors.gray}`,
+    borderRadius: '0.5rem',
+    padding: '0.25rem 0.375rem',
+    height: '1.25rem',
+
+    '.deposit-check-text': {
+      color: isDeposited ? theme.colors.primary : theme.colors.gray,
+      paddingTop: '0.0625rem',
+    },
+  });

client/src/components/Design/components/DepositCheck/DepositCheck.tsx

@@ -0,0 +1,21 @@
+/** @jsxImportSource @emotion/react */
+import {useTheme} from '@components/Design';
+
+import Icon from '../Icon/Icon';
+import Text from '../Text/Text';
+
+import {DepositCheckStyle} from './DepositCheck.style';
+import {DepositCheckProps} from './DepositCheck.type';
+
+const DepositCheck: React.FC<DepositCheckProps> = ({isDeposited = false}: DepositCheckProps) => {
+  const {theme} = useTheme();
+  return (
+    <div css={DepositCheckStyle({theme, isDeposited})}>
+      <Text size="tiny" className="deposit-check-text">
+        입금
+      </Text>
+      <Icon iconType={isDeposited ? 'check' : 'x'}></Icon>
+    </div>
+  );
+};
+export default DepositCheck;

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

@@ -0,0 +1,11 @@
+export interface DepositCheckStyleProps {
+  isDeposited: boolean;
+}
+
+export interface DepositCheckCustomProps {
+  isDeposited: boolean;
+}
+
+export type DepositCheckOptionProps = DepositCheckStyleProps & DepositCheckCustomProps;
+
+export type DepositCheckProps = React.ComponentProps<'div'> & DepositCheckOptionProps;

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

@@ -13,7 +13,7 @@ const meta = {
     iconType: {
       description: '',
       control: {type: 'select'},
-      options: ['inputDelete', 'buljusa', 'rightChevron', 'search', 'confirm', 'error', 'trash'],
+      options: ['inputDelete', 'buljusa', 'rightChevron', 'search', 'confirm', 'error', 'trash', 'check', 'x'],
     },
   },
   args: {

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

@@ -1,6 +1,5 @@
 import {css} from '@emotion/react';
 
-import {Theme} from '@theme/theme.type';
 import {ColorKeys} from '@token/colors';
 
 import {IconColor, IconStylePropsWithTheme, IconType} from './Icon.type';
@@ -13,6 +12,8 @@ const ICON_DEFAULT_COLOR: Record<IconType, IconColor> = {
   confirm: 'complete',
   error: 'warn',
   trash: 'white',
+  check: 'primary',
+  x: 'gray',
   toss: 'white',
   meatballs: 'black',
 };

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

@@ -8,6 +8,8 @@ import Confirm from '@assets/image/confirm.svg';
 import Trash from '@assets/image/trash.svg';
 import Search from '@assets/image/search.svg';
 import RightChevron from '@assets/image/rightChevron.svg';
+import Check from '@assets/image/check.svg';
+import X from '@assets/image/x.svg';
 import Meatballs from '@assets/image/meatballs.svg';
 import {IconProps} from '@HDcomponents/Icon/Icon.type';
 import {useTheme} from '@theme/HDesignProvider';
@@ -22,6 +24,8 @@ const ICON = {
   error: <Error />,
   confirm: <Confirm />,
   trash: <Trash />,
+  check: <Check />,
+  x: <X />,
   toss: <img src={Toss} width="24" height="24" alt="toss icon" />,
   meatballs: <Meatballs />,
 };

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

@@ -9,6 +9,8 @@ export type IconType =
   | 'error'
   | 'confirm'
   | 'trash'
+  | 'check'
+  | 'x'
   | 'toss'
   | 'meatballs';