fix: InputField 컴포넌트 통합

src/components/Sign/InputField.tsx

@@ -1,4 +1,6 @@
 import React from 'react';
+import EyeOpenIcon from '../../assets/images/icon/ic_eye_open.svg';
+import EyeCloseIcon from '../../assets/images/icon/ic_eye_close.svg';
 
 interface InputFieldProps {
 	id: string;
@@ -7,7 +9,9 @@ interface InputFieldProps {
 	value: string;
 	placeholder: string;
 	error: string;
+	showPassword?: boolean;
 	onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+	togglePasswordVisibility?: () => void;
 }
 
 const InputField: React.FC<InputFieldProps> = ({
@@ -17,24 +21,35 @@ const InputField: React.FC<InputFieldProps> = ({
 	value,
 	placeholder,
 	error,
+	showPassword = false,
 	onChange,
+	togglePasswordVisibility,
 }) => {
 	return (
 		<div>
 			<div className={`${id}_label`}>
 				<label htmlFor={id}>{label}</label>
 			</div>
-			<div>
+			<div className={`${id}_content`}>
 				<input
 					id={id}
 					className={`${id}_input ${error ? 'error_line' : ''}`}
-					type={type}
+					type={showPassword ? 'text' : type}
 					value={value}
 					name={id}
 					placeholder={placeholder}
 					onChange={onChange}
 					required
 				/>
+				{type === 'password' && togglePasswordVisibility && (
+					<button type='button' className='psw_chk_btn' onClick={togglePasswordVisibility}>
+						<img
+							className='psw_chk_img'
+							src={showPassword ? EyeOpenIcon : EyeCloseIcon}
+							alt='toggle password visibility'
+						/>
+					</button>
+				)}
 				{error && <span className={`error_msg ${id}_error_msg`}>{error}</span>}
 			</div>
 		</div>

src/pages/SignIn.tsx

@@ -3,7 +3,6 @@ import './Sign.css';
 import LogoImage from '../assets/images/title/title_img.svg';
 import { validateEmail, validatePassword, errorMessages } from '../Utils/Validator';
 import InputField from '../components/Sign/InputField';
-import PasswordInputField from '../components/Sign/PasswordInputField';
 import SocialSignIn from '../components/Sign/SocialSignIn';
 import { PostSignIn } from '../api/Validator.api';
 import { useNavigate } from 'react-router';
@@ -134,9 +133,10 @@ const SignIn: React.FC = () => {
 						error={errors.user_email}
 						onChange={handleInputChange}
 					/>
-					<PasswordInputField
+					<InputField
 						id='user_psw'
 						label='비밀번호'
+						type='password'
 						value={password}
 						placeholder='비밀번호를 입력해주세요'
 						error={errors.user_psw}

src/pages/SignUp.tsx

@@ -9,7 +9,6 @@ import {
 	validatePasswordMatch,
 } from '../Utils/Validator';
 import InputField from '../components/Sign/InputField';
-import PasswordInputField from '../components/Sign/PasswordInputField';
 import SocialSignIn from '../components/Sign/SocialSignIn';
 import { PostSignUp } from '../api/Validator.api';
 import { useNavigate } from 'react-router';
@@ -164,19 +163,21 @@ const SignUp: React.FC = () => {
 						error={errors.user_nickname}
 						onChange={handleInputChange}
 					/>
-					<PasswordInputField
+					<InputField
 						id='user_psw'
 						label='비밀번호'
+						type='password'
 						value={password}
 						placeholder='비밀번호를 입력해주세요'
 						error={errors.user_psw}
 						showPassword={showPassword}
 						onChange={handleInputChange}
 						togglePasswordVisibility={togglePasswordVisibilityHandler}
 					/>
-					<PasswordInputField
+					<InputField
 						id='user_psw_chk'
 						label='비밀번호 확인'
+						type='password'
 						value={passwordCheck}
 						placeholder='비밀번호를 다시 한 번 입력해주세요'
 						error={errors.user_psw_chk}