[React] 비밀번호 보이기/숨기기 버튼 만들기

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>
    )
});

그 후 그 이미지를 타입 상태를 변경하는 버튼으로 사용한다.