[#43] ✨ TagInput 구현 / ♻️ TextInput, PasswordInput 리팩토링 (#92)

* [#43]✨ Implement TextInput component

* [#43] ♻️ Refactor TextInput with tailwind-merge and update baseStyles

* [#43] ✨ Create IconList component with svg icons

* [#43] 💄 Add essential styles for button, input and select in globals.css

* [#43] ✨ Implement PasswordInput component

* [#43] ✨ Create useToggle hook

* [#43] ✅ add storybook stories for PasswordInput component

* [#43] 🐛 Fix Storybook bug preventing SVGR components from loading

* [#43] ♻️ Update PasswordInput Storybook to ensure icon displays correctly inside input field

* [#43] ♻️ Refactor useToggle hook to return an object

* [#43] ♻️ Refactor for accessibility, update useToggle hook usage, and remove props extension

* [#43] ♻️ Remove className prop from TextInputProps

* [#43] ♻️ Extend TextInputProps to accept additional props

* [#43] 🚚 Change extension from tsx to ts

* [#43] ♻️ TextInput props and wrapping div structure

* [#43] ♻️ Refactoring PasswordInput props

* [#43] ✨ Complete basic functionality for TagInput component

* [#43] ♻️ Update and optimize Storybook

* [#43] ✨ Implement tag addition and deletion fuctionalitiy

* [#43] 🔧 Resolve bulid warnings

Author: yongb2n

src/assets/IconList.tsx src/assets/IconList.tssrc/assets/IconList.tsx renamed to src/assets/IconList.ts

@@ -1,23 +1,15 @@
 import { IcEyeClosed, IcEyeOpen } from '@/assets/IconList'
-import { FieldValues, UseFormRegister } from 'react-hook-form'
 
 import { useToggle } from '@/hooks/useToggle'
 
 import { TextInput, TextInputProps } from './TextInput'
 
-interface PasswordInputProps
-  extends Omit<TextInputProps, 'startAdornment' | 'endAdornment' | 'type'> {
-  error?: boolean
-  register?: ReturnType<UseFormRegister<FieldValues>>
-  className?: string
-  fullWidth?: boolean
-}
+type PasswordInputProps = Omit<
+  TextInputProps,
+  'startAdornment' | 'endAdornment' | 'type'
+>
 
 export const PasswordInput = ({
-  error = false,
-  register,
-  className = '',
-  fullWidth = false,
   ...props
 }: PasswordInputProps): JSX.Element => {
   const { isOpen: showPassword, toggle: toggleShowPassword } = useToggle()
@@ -29,9 +21,7 @@ export const PasswordInput = ({
 
   return (
     <TextInput
-      {...register}
       type={showPassword ? 'text' : 'password'}
-      fullWidth={fullWidth}
       endAdornment={
         <button
           aria-label={showPassword ? '비밀번호 숨김' : '비밀번호 보임'}

src/components/common/input/PasswordInput.tsx

@@ -0,0 +1,70 @@
+import { IcSearch } from '@/assets/IconList'
+import { useState } from 'react'
+import { Controller, useFormContext } from 'react-hook-form'
+
+import { DeletableChip } from '../chip'
+import { TextInput, TextInputProps } from './TextInput'
+
+interface TagProps {
+  id: string
+  label: string
+}
+
+interface TagInputProps extends Omit<TextInputProps, 'endAdornment'> {
+  name: string
+}
+
+export const TagInput = ({ name, ...props }: TagInputProps): JSX.Element => {
+  const { control, setValue, getValues } = useFormContext()
+  const [inputValue, setInputValue] = useState<string>('')
+
+  const handleKeyDown = (
+    event: React.KeyboardEvent<HTMLInputElement>
+  ): void => {
+    if (event.key === 'Enter' && inputValue.trim()) {
+      event.preventDefault()
+      const newTag: TagProps = {
+        id: crypto.randomUUID(),
+        label: inputValue.trim(),
+      }
+      const currentTags = getValues(name) || []
+      setValue(name, [...currentTags, newTag])
+      setInputValue('')
+    }
+  }
+
+  const handleTagDelete = (id: string): void => {
+    const updatedTags =
+      getValues(name)?.filter((tag: TagProps) => tag.id !== id) || []
+    setValue(name, updatedTags)
+  }
+
+  return (
+    <div>
+      <Controller
+        name={name}
+        control={control}
+        render={({ field: { value: _value, onChange: _onChange } }) => (
+          <TextInput
+            value={inputValue}
+            onChange={e => setInputValue(e.target.value)}
+            onKeyDown={handleKeyDown}
+            endAdornment={
+              <IcSearch width={24} height={24} aria-label='검색 아이콘' />
+            }
+            {...props}
+          />
+        )}
+      />
+      <div className='mt-10 flex flex-wrap gap-x-4'>
+        {getValues(name)?.map((tag: TagProps) => (
+          <DeletableChip
+            key={tag.id}
+            label={tag.label}
+            onDelete={() => handleTagDelete(tag.id)}
+          />
+        ))}
+      </div>
+    </div>
+  )
+}

src/components/common/input/TagInput.tsx

@@ -1,14 +1,13 @@
 import clsx from 'clsx'
-import { ReactNode } from 'react'
 import { FieldValues, UseFormRegister } from 'react-hook-form'
 import { twMerge } from 'tailwind-merge'
 
 export interface TextInputProps
   extends React.InputHTMLAttributes<HTMLInputElement> {
   error?: boolean
   register?: ReturnType<UseFormRegister<FieldValues>>
-  startAdornment?: ReactNode
-  endAdornment?: ReactNode
+  startAdornment?: React.ReactElement
+  endAdornment?: React.ReactElement
   fullWidth?: boolean
 }
 
@@ -20,8 +19,8 @@ export const TextInput = ({
   type = 'text',
   error = false,
   register,
-  startAdornment = '',
-  endAdornment = '',
+  startAdornment,
+  endAdornment,
   className = '',
   fullWidth = false,
   ...props
@@ -40,7 +39,7 @@ export const TextInput = ({
   )
 
   return (
-    <div className='relative'>
+    <div className={clsx('relative', fullWidth ? 'w-full' : 'w-min')}>
       {startAdornment && (
         <span className='absolute left-14 top-10'>{startAdornment}</span>
       )}

src/components/common/input/TextInput.tsx

@@ -3,10 +3,10 @@ import { fn } from '@storybook/test'
 import { PasswordInput } from '@/components/common/input/PasswordInput'
 
 export default {
-  title: 'Example/PasswordInput',
+  title: 'Common/Input/PasswordInput',
   component: PasswordInput,
   parameters: {
-    layout: 'fullscreen',
+    layout: 'padded',
   },
   tags: ['input', 'password'],
   argTypes: {
@@ -21,13 +21,18 @@ export default {
 export const Default = {
   args: {
     placeholder: '비밀번호를 입력하세요.',
-    fullWidth: true,
   },
 }
 
 export const Error = {
   args: {
     error: true,
+  },
+}
+
+export const FullWidth = {
+  args: {
+    placeholder: '비밀번호를 입력하세요.',
     fullWidth: true,
   },
 }

src/stories/common/input/PasswordInput.stories.ts

@@ -4,11 +4,11 @@ import { TextInput } from '@/components/common/input/TextInput'
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 export default {
-  title: 'Example/TextInput',
+  title: 'Common/Input/TextInput',
   component: TextInput,
   parameters: {
     // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
-    layout: 'fullscreen',
+    layout: 'padded',
   },
   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ['common', 'input'],
@@ -24,18 +24,21 @@ export default {
 // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
 export const Default = {
   args: {
+    placeholder: '텍스트를 입력하세요.',
     primary: true,
   },
 }
 
 export const Error = {
   args: {
+    placeholder: '비밀번호를 입력하세요.',
     error: true,
   },
 }
 
 export const FullWidth = {
   args: {
+    placeholder: '텍스트를 입력하세요.',
     fullWidth: true,
   },
 }