const StyledInputDiv =styled.div`
position:relative;
`
const StyledImage=styled.div`
position:absolute;
top:14px;
right:0;
cursor:pointer;
`
저기 맨 위 부모 컴퍼넌트에 relative를 주고
이미지를 absolute로 준 다음
적절한 위치에 배치한다.
const Input = forwardRef((props:ComponentProps<any>,ref:ForwardedRef<HTMLInputElement>) => {
const [type,setType]=useState("password");
const onClick=()=>{
type!=="text"?setType("text"):setType("password");
}
const passwordInput= ()=><StyledInput ref={ref} id={props.id} width={props.width} height={props.height} placeholder={props.placeholder} type={type} value={props.value} name={props.name} autoComplete={"off"} onBlur={props.onBlur} onChange={props.onChange}></StyledInput>
const normalInput=()=> <StyledInput ref={ref} id={props.id} type={props.type} value={props.value} name={props.name} autoComplete={"off"} maxLength={props.maxlength} onBlur={props.onBlur} onChange={props.onChange} {...props}></StyledInput>
return (
<StyledInputDiv >
{props.type==="password"?passwordInput():normalInput()}
{props.type==="password"?<StyledImage onClick={onClick}>{type==="password"?<Image height="30px" width="30px" src="/imoticon/Gift.png"></Image>:<Image height="30px" width="30px" src="/imoticon/Tube.png"></Image>}</StyledImage>:null}
</StyledInputDiv>
)
});
그 후 그 이미지를 타입 상태를 변경하는 버튼으로 사용한다.