Feature/#196 auto resize textarea 아이콘 추가기능 확장 (#197)

* feat: auto resize text area 아이콘 추가 기능 구현
#196

* design : input 기본 컴포넌트 rounded 및 아이콘 반응형 추가
#196

* design : textarea 기본 컴포넌트 rounded 2x로 변경
#196

* design : iconBox 높이 40px로 변경
- chakra ui 기본 input박스와 맞추기 위해 40px로 수정

#196

src/components/AutoResizeTextarea/index.tsx

@@ -1,12 +1,45 @@
 /* eslint-disable react/jsx-props-no-spreading */
-import { Textarea, forwardRef } from '@chakra-ui/react';
-import React from 'react';
+import { Box, Flex, Textarea, forwardRef } from '@chakra-ui/react';
 import ResizeTextarea from 'react-textarea-autosize';
 
 import { AutoResizeTextareaProps } from './type';
 
-const AutoResizeTextarea = forwardRef(({ ref, ...props }: AutoResizeTextareaProps) => (
-  <Textarea ref={ref} as={ResizeTextarea} overflow="hidden" w="100%" minH="unset" resize="none" {...props} />
-));
+const AutoResizeTextarea = forwardRef(
+  (
+    { value, onChange, LeftIconButton, RightIconButton, ...props }: AutoResizeTextareaProps,
+    ref: React.Ref<HTMLTextAreaElement>,
+  ) => {
+    const rightChildCount = RightIconButton?.props.children?.length ?? 1;
+    const leftChildCount = LeftIconButton?.props.children?.length ?? 1;
 
+    const rightPadding = RightIconButton ? `${38 * rightChildCount}px` : '16px';
+    const leftPadding = LeftIconButton ? `${38 * leftChildCount}px` : '16px';
+
+    return (
+      <Flex pos="relative" w="100%">
+        <Box pos="absolute" zIndex="1" left="0" alignContent="center" h="40px">
+          {LeftIconButton}
+        </Box>
+        <Box w="100%">
+          <Textarea
+            ref={ref}
+            as={ResizeTextarea}
+            w="100%"
+            minH="40px"
+            py="2"
+            pr={rightPadding}
+            pl={leftPadding}
+            resize="none"
+            onChange={onChange}
+            value={value}
+            {...props}
+          />
+        </Box>
+        <Box pos="absolute" zIndex="1" right="0" alignContent="center" h="40px">
+          {RightIconButton}
+        </Box>
+      </Flex>
+    );
+  },
+);
 export default AutoResizeTextarea;

src/components/AutoResizeTextarea/type.ts

@@ -1,3 +1,6 @@
 export interface AutoResizeTextareaProps {
-  ref?: React.Ref<HTMLTextAreaElement>;
+  value: string;
+  onChange: React.ChangeEventHandler<HTMLTextAreaElement>;
+  LeftIconButton?: React.ReactElement;
+  RightIconButton?: React.ReactElement;
 }

src/components/IconBox/index.tsx

@@ -4,7 +4,7 @@ import { IconBoxProps } from './type';
 
 const IconBox = ({ leftIcon, content, rightIcon, handleClick }: IconBoxProps) => {
   return (
-    <Flex align="center" gap="1" w="100%" color="white" bg="orange_light" borderRadius="2xl">
+    <Flex align="center" gap="1" w="100%" h="40px" color="white" bg="orange_light" borderRadius="2xl">
       <IconButton as="div" flexShrink="0" aria-label="" icon={leftIcon} size="icon_md" variant="transparent" />
       <Text textStyle="bold_md" flex="auto" isTruncated>
         {content}

src/theme/components/input.ts

@@ -13,12 +13,16 @@ const Input = defineMultiStyleConfig({
       field: {
         bg: 'orange_light',
         color: 'white',
-        rounded: '3xl',
+        rounded: '2xl',
         _focus: {
           borderColor: 'orange',
           bg: 'orange',
         },
       },
+      element: {
+        h: '40px',
+        w: { base: '34px', lg: '36px', '2xl': '38px' },
+      },
     }),
   },
 });

src/theme/components/textarea.ts

@@ -9,7 +9,7 @@ const Textarea = defineStyleConfig({
     default: {
       bg: 'orange_light',
       color: 'white',
-      rounded: '3xl',
+      rounded: '2xl',
       _focus: {
         borderColor: 'orange',
         bg: 'orange',