Feature/#184 첨부 파일 관련 공통 컴포넌트 구현 (#185)

* design: iconButton Style 추가

* feat: IconBoxProps interface 추가

#184

* feat: IconBox 구현

#184

src/components/IconBox/index.tsx

@@ -0,0 +1,35 @@
+import { Flex, IconButton, Text } from '@chakra-ui/react';
+
+import { IconBoxProps } from './type';
+
+const IconBox = ({ leftIcon, content, rightIcon, handleClick }: IconBoxProps) => {
+  return (
+    <Flex align="center" gap="2" w="100%" px="3" py="1" color="white" bg="orange_light" borderRadius="xl">
+      <IconButton
+        as="div"
+        flexShrink="0"
+        fontSize="28px"
+        aria-label=""
+        icon={leftIcon}
+        size="icon_md"
+        variant="transparent"
+      />
+      <Text textStyle="bold_xl" flex="auto" isTruncated>
+        {content}
+      </Text>
+      {rightIcon && (
+        <IconButton
+          flexShrink="0"
+          fontSize="28px"
+          aria-label=""
+          icon={rightIcon}
+          onClick={handleClick}
+          size="icon_md"
+          variant="transparent"
+        />
+      )}
+    </Flex>
+  );
+};
+
+export default IconBox;

src/components/IconBox/type.ts

@@ -0,0 +1,6 @@
+export interface IconBoxProps {
+  leftIcon: React.ReactElement;
+  content: string;
+  rightIcon?: React.ReactElement;
+  handleClick?: () => void;
+}

src/theme/components/button.ts

@@ -3,7 +3,6 @@ import { defineStyleConfig } from '@chakra-ui/react';
 const Button = defineStyleConfig({
   baseStyle: {
     borderRadius: 'full',
-    shadow: 'md',
   },
 
   variants: {
@@ -17,6 +16,13 @@ const Button = defineStyleConfig({
       color: 'white',
       minW: '24',
     },
+    transparent: {
+      bg: 'transparent',
+      color: 'white',
+      _hover: {
+        bg: 'transparent',
+      },
+    },
   },
 
   sizes: {