feat: 비밀번호 입력 컴포넌트 구현 (#13)

* feat: 비밀번호 입력 컴포넌트 구현

* refactor: input 타입 변경

* refactor: 함수명 수정,event->e로 네이밍 변경

* refactor: 수정 사항 반영

src/assets/icons/index.ts

@@ -1,4 +1,6 @@
 export { default as CloseIcon } from './close.svg?react'
+export { default as PassWord } from './password.svg?react'
+export { default as PassWordConfirm } from './passwordconfirm.svg?react'
 export { default as StarIcon } from './star.svg?react'
 export { default as TableSend } from './table_send.svg?react'
 export { default as SearchIcon } from './search.svg?react'

src/components/PasswordInput.tsx

@@ -0,0 +1,35 @@
+import { ChangeEvent, ComponentPropsWithoutRef } from 'react'
+import { PassWord, PassWordConfirm } from '@/assets/icons'
+
+interface PasswordInputProps
+  extends Omit<ComponentPropsWithoutRef<'input'>, 'onChange'> {
+  type: 'password' | 'confirmation'
+  handlePassWordChange?: (e: ChangeEvent<HTMLInputElement>) => void
+  disabled?: boolean
+  placeholder?: string
+}
+
+const PassWordInput = ({
+  type,
+  placeholder,
+  disabled,
+  handlePassWordChange,
+  ...rest
+}: PasswordInputProps) => {
+  return (
+    <div className="items-center2 relative flex h-fit w-fit flex-row content-center justify-center gap-2 border-2 border-black">
+      <input
+        className="input border-0 bg-white pl-8 text-black"
+        placeholder={placeholder ?? '새 비밀번호 입력'}
+        disabled={disabled}
+        onChange={handlePassWordChange}
+        {...rest}
+      />
+      <i className="flex items-center">
+        {type === 'password' ? <PassWord /> : <PassWordConfirm />}
+      </i>
+    </div>
+  )
+}
+
+export default PassWordInput

src/components/index.ts

@@ -1,3 +1,4 @@
+export { default as PassWordInput } from './PasswordInput'
 export { default as StarRating } from './StarRating'
 export { default as IconButton } from './IconButton'
 export { default as SearchBar } from './SearchBar'