//Radio.js 재사용 컴포넌트
const Radio = ({ handleClickAdmin, click, text }) => {
return (
<ButtonBox>
<AdminText>
<NomalImg
alt="nomalImg"
src="/images/비활성화.png"
onClick={() => handleClickAdmin()}
show={click}
/>
<ChangedImg
alt="changedImg"
src="/images/활성화.png"
onClick={() => handleClickAdmin()}
show={click}
/>
{text}
</AdminText>
</ButtonBox>
const NomalImg = styled.img`
${({ show })} => {
return show ? `display:none` : `display:blick`;
}}
`;
const ChangeImg = styled.img`
${({ show })} => {
return show ? `display:blick` : `display:none`;
}}
`;
//Login.js
const Login = () => {
const [inputStatus, setInputStatus] = useState(false);
const handleClickAdmin = () => {
setInputStatus(!inputStatus);
};
return(
<AdminText>
<Radio
click={!inputStatus}
handleClickAdmin={handleClickAdmin}
text="관리자"
/>
<Radio
click={inputStatus}
handleClickAdmin={handleClickAdmin}
text="기업"
/>
</AdminText>
input radio type을 처음 사용해봤다
하나가 클릭 되었을때 다른 하나는 비활성화 되어야 하니까 처음 접했을땐 너무 어려워서 시간이 꽤 걸렸다.
1. 클릭했을때만 background-color를 변경
2. radio 가 아닌 이미지토글로 해서 클릭하면 이미지가 변하게
3. onClick 각각에 다른 함수 달기
4. 한 함수로 계속 state 반대로 변경하기
등등의 여러 방법들의 고민들이 생겼었다.
background-color로 하니까 버튼전체가 주황색이 되어 테두리 선이 보이지 않아서 패스하고 이미지토글로 변경했다.
그리고 한 함수로 하나의 state를 관리하면서 반대로 변경해준다.
처음에는 계속 inputState따로 show 따로 관리를 하려고 시도했는데 그게 아니였다.
하나의 state로 관리하면서 click은 state를 직접적으로 연결되고,
show는 함수로 연결된다