feat: ListComponent 생성

HDesign/.storybook/preview.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+/** @jsxImportSource @emotion/react */
 
 import type {Preview} from '@storybook/react';
 import {HDesignProvider} from '../src/theme/HDesignProvider';

HDesign/src/assets/index.ts

@@ -4,3 +4,4 @@ export {default as Buljusa} from '@assets/buljusa.svg';
 export {default as Arrow} from '@assets/arrow.svg';
 export {default as Error} from '@assets/error.svg';
 export {default as Trash} from '@assets/trash.svg';
+export {default as RightChevron} from '@assets/rightChevron.svg';

HDesign/src/components/IconButton/IconButton.tsx

@@ -2,12 +2,16 @@
 import {forwardRef} from 'react';
 
 import {IconButtonProps} from '@components/IconButton/IconButton.type';
-import {InputDelete, Plus, Buljusa} from '@assets';
+import {InputDelete, Plus, Buljusa, RightChevron, Arrow, Trash, Error} from '@assets';
 
 const ICON = {
   inputDelete: <InputDelete />,
   plus: <Plus />,
   buljusa: <Buljusa />,
+  rightChevron: <RightChevron />,
+  arrow: <Arrow />,
+  error: <Error />,
+  trash: <Trash />,
 };
 
 export const IconButton: React.FC<IconButtonProps> = forwardRef<HTMLButtonElement, IconButtonProps>(function Button(

HDesign/src/components/IconButton/IconButton.type.ts

@@ -1,4 +1,4 @@
-type IconButtonType = 'inputDelete' | 'plus' | 'buljusa';
+type IconButtonType = 'inputDelete' | 'plus' | 'buljusa' | 'rightChevron' | 'arrow' | 'error' | 'trash';
 
 export interface IconButtonStyleProps {}
 

HDesign/src/components/ListButton/ListButton.stories.tsx

@@ -0,0 +1,32 @@
+import type {Meta, StoryObj} from '@storybook/react';
+
+import ListButton from '@components/ListButton/ListButton';
+
+const meta = {
+  title: 'Components/ListButton',
+  component: ListButton,
+  tags: ['autodocs'],
+  parameters: {
+    // layout: 'centered',
+  },
+  argTypes: {
+    prefix: {
+      description: '',
+      control: {type: 'text'},
+    },
+    suffix: {
+      description: '',
+      control: {type: 'text'},
+    },
+  },
+  args: {
+    prefix: '전체 참여자',
+    suffix: '7명',
+  },
+} satisfies Meta<typeof ListButton>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {};

HDesign/src/components/ListButton/ListButton.style.ts

@@ -0,0 +1,21 @@
+/** @jsxImportSource @emotion/react */
+import {css} from '@emotion/react';
+
+import {Theme} from '@theme/theme.type';
+
+export const listButtonStyle = (theme: Theme) =>
+  css({
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    width: '100%',
+    padding: '0.375rem 1rem',
+    backgroundColor: theme.colors.white,
+
+    boxShadow: `0 1px 0 0 ${theme.colors.grayContainer} inset `,
+  });
+
+export const textStyle = (theme: Theme) =>
+  css({
+    color: theme.colors.gray,
+  });

HDesign/src/components/ListButton/ListButton.tsx

@@ -0,0 +1,33 @@
+/** @jsxImportSource @emotion/react */
+import React, {forwardRef} from 'react';
+
+import Text from '@components/Text/Text';
+import IconButton from '@components/IconButton/IconButton';
+import Flex from '@components/Flex/Flex';
+
+import {useTheme} from '@theme/HDesignProvider';
+
+import {ListButtonProps} from './ListButton.type';
+import {listButtonStyle, textStyle} from './ListButton.style';
+
+export const ListButton: React.FC<ListButtonProps> = forwardRef<HTMLButtonElement, ListButtonProps>(function Button(
+  {prefix, suffix, ...htmlProps}: ListButtonProps,
+  ref,
+) {
+  const {theme} = useTheme();
+  return (
+    <button css={listButtonStyle(theme)} ref={ref} {...htmlProps}>
+      <Text size="caption" css={textStyle(theme)}>
+        {prefix}
+      </Text>
+      <Flex gap="0.5rem" alignItems="center">
+        <Text size="caption" css={textStyle(theme)}>
+          {suffix}
+        </Text>
+        <IconButton iconType="rightChevron" />
+      </Flex>
+    </button>
+  );
+});
+
+export default ListButton;

HDesign/src/components/ListButton/ListButton.type.ts

@@ -0,0 +1,10 @@
+export interface ListButtonStyleProps {}
+
+export interface ListButtonCustomProps {
+  prefix?: string;
+  suffix?: string;
+}
+
+export type ListButtonOptionProps = ListButtonStyleProps & ListButtonCustomProps;
+
+export type ListButtonProps = React.ComponentProps<'button'> & ListButtonOptionProps;