feat: 비밀번호 입력 컴포넌트 수정 (#19)

* refactor: eye svg 파일 이름 변경

* feat: 눈 아이콘 클릭 이벤트 추가

src/components/PasswordInput/index.tsx

@@ -1,32 +1,40 @@
-import { ChangeEvent, ComponentPropsWithoutRef } from 'react'
+import { ChangeEvent, useState } from 'react'
 import { EyeOffIcon, EyeOnIcon } from '@/assets/icons'
 
-interface PasswordInputProps
-  extends Omit<ComponentPropsWithoutRef<'input'>, 'onChange'> {
-  type: 'password' | 'confirmation'
+interface PasswordInputProps {
   handlePasswordChange?: (e: ChangeEvent<HTMLInputElement>) => void
   disabled?: boolean
   placeholder?: string
 }
 
 const PasswordInput = ({
-  type,
-  placeholder,
+  placeholder = '비밀번호를 입력하세요.',
   disabled,
   handlePasswordChange,
   ...rest
 }: PasswordInputProps) => {
+  const [showPassword, setShowPassword] = useState(false)
+
+  const handleEyeClick = () => {
+    setShowPassword((prev) => !prev)
+  }
+
   return (
-    <div className="items-center2 relative flex h-fit w-fit flex-row content-center justify-center gap-2 border-2 border-black">
+    <div className="flex h-fit w-fit flex-row items-center justify-center border-2 border-black">
       <input
-        className="input border-0 bg-white pl-8 text-black"
-        placeholder={placeholder ?? '새 비밀번호 입력'}
+        className="input border-0 bg-white p-0 pl-3 text-black"
+        placeholder={placeholder}
         disabled={disabled}
         onChange={handlePasswordChange}
+        type={showPassword ? 'text' : 'password'}
         {...rest}
       />
-      <i className="flex items-center">
-        {type === 'password' ? <EyeOffIcon /> : <EyeOnIcon />}
+      <i className="mx-2 cursor-pointer">
+        {showPassword ? (
+          <EyeOnIcon onClick={handleEyeClick} />
+        ) : (
+          <EyeOffIcon onClick={handleEyeClick} />
+        )}
       </i>
     </div>
   )