[#43] ✨ PasswordInput 구현 (#74)

* [#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

Author: yongb2n

.storybook/main.js

@@ -18,6 +18,17 @@ const config = {
       ...config.resolve.alias,
       '@': path.resolve(__dirname, '../src'),
     }
+
+    const fileLoaderRule = config.module.rules.filter(
+      rule => rule.test && rule.test.test('.svg')
+    )
+    fileLoaderRule.forEach(rule => (rule.exclude = /\.svg$/))
+
+    config.module.rules.push({
+      test: /\.svg$/,
+      enforce: 'pre',
+      loader: require.resolve('@svgr/webpack'),
+    })
     return config
   },
   staticDirs: ['../public'],

src/components/common/input/PasswordInput.tsx

@@ -0,0 +1,47 @@
+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
+}
+
+export const PasswordInput = ({
+  error = false,
+  register,
+  className = '',
+  fullWidth = false,
+  ...props
+}: PasswordInputProps): JSX.Element => {
+  const { isOpen: showPassword, toggle: toggleShowPassword } = useToggle()
+  const visibilityIcon = showPassword ? (
+    <IcEyeOpen width={24} height={24} />
+  ) : (
+    <IcEyeClosed width={24} height={24} />
+  )
+
+  return (
+    <TextInput
+      {...register}
+      type={showPassword ? 'text' : 'password'}
+      fullWidth={fullWidth}
+      endAdornment={
+        <button
+          aria-label={showPassword ? '비밀번호 숨김' : '비밀번호 보임'}
+          onClick={toggleShowPassword}
+          type='button'
+        >
+          {visibilityIcon}
+        </button>
+      }
+      {...props}
+    />
+  )
+}

src/components/common/input/TextInput.tsx

@@ -3,12 +3,12 @@ import { ReactNode } from 'react'
 import { FieldValues, UseFormRegister } from 'react-hook-form'
 import { twMerge } from 'tailwind-merge'
 
-interface TextInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+export interface TextInputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {
   error?: boolean
   register?: ReturnType<UseFormRegister<FieldValues>>
   startAdornment?: ReactNode
   endAdornment?: ReactNode
-  className?: string
   fullWidth?: boolean
 }
 

src/hooks/useToggle.ts

@@ -0,0 +1,9 @@
+import { useState } from 'react'
+
+export const useToggle = (
+  initialState = false
+): { isOpen: boolean; toggle: () => void } => {
+  const [isOpen, setIsOpen] = useState(initialState)
+  const toggle = () => setIsOpen(prev => !prev)
+  return { isOpen, toggle }
+}

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

@@ -0,0 +1,33 @@
+import { fn } from '@storybook/test'
+
+import { PasswordInput } from '@/components/common/input/PasswordInput'
+
+export default {
+  title: 'Example/PasswordInput',
+  component: PasswordInput,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['input', 'password'],
+  argTypes: {
+    error: { control: 'boolean' },
+    fullWidth: { control: 'boolean' },
+  },
+  args: {
+    onChange: fn(),
+  },
+}
+
+export const Default = {
+  args: {
+    placeholder: '비밀번호를 입력하세요.',
+    fullWidth: true,
+  },
+}
+
+export const Error = {
+  args: {
+    error: true,
+    fullWidth: true,
+  },
+}