🚧 input-comment textarea

apps/web/src/app/test/input/page.tsx

@@ -1,9 +1,10 @@
 'use client'
-import { InputSearch } from '@80000coding/ui'
+import { InputComment, InputSearch } from '@80000coding/ui'
 import { useState } from 'react'
 
 export default function Page() {
   const [value, setValue] = useState('')
+  const [commentValue, setComment] = useState('')
 
   return (
     <div className='flex h-screen w-screen flex-col items-start gap-2 p-10'>
@@ -20,6 +21,7 @@ export default function Page() {
       ></Input> */}
       <InputSearch value={value} setValue={setValue}></InputSearch>
       <InputSearch value={value} setValue={setValue} isBackBtn={true}></InputSearch>
+      <InputComment value={commentValue} setValue={setComment}></InputComment>
     </div>
   )
 }

packages/ui/src/index.ts

@@ -6,6 +6,7 @@ export * from './chip'
 export * from './dropdown'
 export * from './icon'
 export * from './input'
+export * from './input/input-comment'
 export * from './input/input-search'
 export * from './notification'
 export * from './toggle'

packages/ui/src/input/input-comment/index.tsx

@@ -0,0 +1,62 @@
+import { Textarea as TextArea$1 } from '@nextui-org/react'
+import { Dispatch, SetStateAction, useState } from 'react'
+
+export type InputCommentProps = {
+  value: string
+  setValue: Dispatch<SetStateAction<string>>
+  displayLength?: boolean
+  isDescription?: boolean
+  isCorrect?: boolean
+} & Omit<React.ComponentProps<typeof TextArea$1>, 'classNames'>
+
+export function InputComment({
+  value,
+  setValue,
+  isInvalid = false,
+  placeholder = '댓글을 입력해주세요',
+  isCorrect = false,
+  label,
+  ...rest
+}: InputCommentProps) {
+  const [isFocus, setIsFocus] = useState(false)
+
+  return (
+    <TextArea$1
+      /* strings */
+      value={value}
+      label={label}
+      placeholder={placeholder}
+      /* status */
+      isInvalid={isInvalid}
+      isClearable={isFocus || !isCorrect}
+      /* actions */
+      onValueChange={setValue}
+      onFocusChange={(e) => {
+        setIsFocus(e)
+      }}
+      /* styles */
+      maxRows={3}
+      type='text'
+      radius='full'
+      labelPlacement='outside'
+      classNames={{
+        label: ['mx-[12px]', 'body-2'],
+        input: ['!bg-white', 'text-black', 'placeholder:text-gray-300', 'body-3'],
+        innerWrapper: ['px-[0px]', 'py-[0px]'],
+        inputWrapper: [
+          'items-start',
+          '!bg-white',
+          'border',
+          isInvalid ? 'border-red-warning' : isCorrect ? 'border-green' : 'border-gray-300',
+          isInvalid ? 'hover:border-red-warning' : 'hover:border-green',
+          isInvalid ? 'focus-within:border-red-warning' : 'focus-within:border-green',
+          '!cursor-text',
+          'rounded-[20px]',
+          'px-[20px]',
+          'py-[13px]',
+        ],
+      }}
+      {...rest}
+    />
+  )
+}