[#246] Textarea 추가

packages/app/src/features/register/molecules/ProfileInputs/index.tsx

@@ -1,4 +1,4 @@
-import { Input, Profile, Select, SearchInput } from '@sms/shared'
+import { Input, Profile, Select, SearchInput, Textarea } from '@sms/shared'
 import { InputColumn, FormWrapper } from '@features/register/atoms'
 import { RegisterFormType } from '@features/register/type'
 import {
@@ -57,13 +57,12 @@ const ProfileInputs = ({
         />
       </InputColumn>
       <InputColumn comment='자기 소개'>
-        <Input
+        <Textarea
           {...register('introduce', {
             required: { value: true, message: '필수 값입니다' },
             maxLength: { value: 50, message: '최대 50자 까지 가능합니다' },
           })}
           error={errors.introduce?.message}
-          onReset={() => resetField('introduce')}
           placeholder='1줄 자기소개 입력'
         />
       </InputColumn>

packages/app/src/features/register/molecules/ProjectsInput/index.tsx

@@ -5,7 +5,7 @@ import {
   FourImageInputs,
   IconImageInput,
 } from '@features/register/atoms'
-import { Input, SearchInput, MultiMonthPicker } from '@sms/shared'
+import { Input, SearchInput, MultiMonthPicker, Textarea } from '@sms/shared'
 import { RegisterFormType } from '@features/register/type'
 import * as Icon from '@sms/shared/src/icons'
 import {
@@ -115,7 +115,7 @@ const ProjectsInput = ({
               </InputColumn>
 
               <InputColumn comment='내용'>
-                <Input
+                <Textarea
                   {...register(`projects.${idx}.description`, {
                     required: { value: true, message: '필수 값입니다' },
                     maxLength: {
@@ -144,7 +144,7 @@ const ProjectsInput = ({
               </InputColumn>
 
               <InputColumn comment='주요 작업'>
-                <Input
+                <Textarea
                   {...register(`projects.${idx}.myActivity`, {
                     required: { value: true, message: '필수 값입니다' },
                     maxLength: {

packages/app/src/features/student/atoms/ProfileDetail/style.ts

@@ -61,6 +61,7 @@ export const Introduce = styled.div`
   color: var(--BLACK);
   padding: 1rem 1.14rem;
   border-radius: 0.5rem;
+  white-space: pre-line;
 `
 
 export const IntroduceLabel = styled.div`

packages/app/src/features/student/atoms/ProjectDetail/style.ts

@@ -87,6 +87,7 @@ export const Stack = styled.div`
 export const ProjectDescription = styled.p`
   ${({ theme }) => theme.body2}
   color: var(--N40);
+  white-space: pre-line;
 `
 
 export const LinkWrapper = styled(Link)`

packages/shared/package.json

@@ -32,6 +32,7 @@
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
     "next": "13.3.0",
-    "react-hook-form": "^7.43.9"
+    "react-hook-form": "^7.43.9",
+    "react-textarea-autosize": "^8.5.3"
   }
 }

packages/shared/src/atoms/Textarea/index.stories.ts

@@ -0,0 +1,14 @@
+import { Meta, StoryObj } from '@storybook/react'
+import Textarea from './index'
+
+const config: Meta<typeof Textarea> = {
+  title: 'Textarea',
+  component: Textarea,
+  args: { error: 'ofweji', placeholder: 'hello' },
+}
+
+export default config
+
+type Story = StoryObj<typeof Textarea>
+
+export const Primary: Story = {}

packages/shared/src/atoms/Textarea/index.tsx

@@ -0,0 +1,22 @@
+import { TextareaAutosizeProps } from 'react-textarea-autosize'
+import { forwardRef } from 'react'
+import * as S from './style'
+
+interface Props extends TextareaAutosizeProps {
+  error?: string
+}
+
+const Textarea = forwardRef<HTMLTextAreaElement, Props>(
+  ({ error, ...props }, ref) => {
+    return (
+      <S.Wrapper>
+        <S.TextareaField {...props} ref={ref} />
+        {error && <S.Error>{error}</S.Error>}
+      </S.Wrapper>
+    )
+  }
+)
+
+Textarea.displayName = 'Textarea'
+
+export default Textarea

packages/shared/src/atoms/Textarea/style.ts

@@ -0,0 +1,36 @@
+import TextareaAutosize from 'react-textarea-autosize'
+import styled from '@emotion/styled'
+
+export const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+`
+
+export const TextareaField = styled(TextareaAutosize)`
+  ${({ theme }) => theme.body1}
+  width: 100%;
+  border: 1px solid transparent;
+  border-radius: 0.5rem;
+  padding: 0.75rem;
+  resize: none;
+  outline: none;
+  background: var(--N10);
+  transition: 0.2s;
+
+  ::placeholder {
+    color: var(--N30);
+  }
+
+  :hover {
+    border: 1px solid var(--P1);
+  }
+  :focus {
+    border: 1px solid var(--P2);
+  }
+`
+
+export const Error = styled.div`
+  ${({ theme }) => theme.caption1}
+  color: var(--ERROR);
+  margin-top: 0.5rem;
+`

packages/shared/src/atoms/index.ts

@@ -17,3 +17,4 @@ export { default as Checkbox } from './Checkbox'
 export { default as Toast } from './Toast'
 export { default as ImageInput } from './ImageInput'
 export { default as MonthPicker } from './MonthPicker'
+export { default as Textarea } from './Textarea'