안녕하세요!
오늘도 프로젝트에 대한 내용을 가져왔습니다
제가 이번에도 로그인 & 회원가입에 대한 기능 담당을 하게 됐는데요 ㅋㅋ!
이 기회에 이 분야를 깊에 파보려고 합니다..!
그러면 오늘은 그냥 바로 가보시죠!!
TypeScript에서 약관 동의의 체크박스 기능 만들어 봅시다! 빠져봅시다!
시작하기전 당신이 말한 체크박스가 무엇이요
오늘은 좀 무게감 있게 말씀주시는군요
네 약관동의에 들어가는 체크 박스란
우리가 회원가입을 진행할 때 혹은 사이트를 이용할 때 먼저 필요 내용을 고지하고 동의하고 사이트를 이용한다는 내용의 약속을 받는건데요
(출처: 나우웨이팅 고객센터)
이런 기능을 말합니다! 여러분들도 회원가입하시거나 사이트 이용하실 때 많이 보셨죠?
바로 그겁니다 ㅎ
그냥 input으로 type checkbox 이용하면 되는거 아닌가요?
아 네네! 맞긴 합니다 하지만 우리는 모두 동의 기능을 만들고
모두 동의가 되었을 때 확인 버튼을 누를 수 있게 색상으로 피드백을 주는 기능을 만들겁니다!
어렵네요 어떻게 진행해야되네요
저도 처음에는 어렵게 느껴졌는데 여러가지 찾아보고 해보니깐 뭐 그렇게 어렵지는 않아 보이는 것 같습니다
(먼저 설명 이어가기 앞서 벨로그 '짱쫑'님의 포스팅을 참고하여 진행했습니다)
return 기본구조
<div>
{/* 약관 동의 부분 */}
<div>
<label>약관 동의</label>
<div>
<input
type="checkbox"
name="all"
onChange={checkAll}
checked={checkList.length === 3 ? true : false}
/>
<div>전체동의</div>
</div>
<div>
<input
type="checkbox"
name="age"
onChange={check}
checked={checkList.includes("age") ? true : false}
/>
<div>
<span>(필수)</span> 만 14세 이상입니다
</div>
</div>
<div>
<input
type="checkbox"
name="terms"
onChange={check}
checked={checkList.includes("terms") ? true : false}
/>
<div>
<span>(필수)</span> 이용약관 동의
</div>
</div>
<div>
<input
type="checkbox"
name="collect"
onChange={check}
checked={checkList.includes("collect") ? true : false}
/>
<div>
<span>(필수)</span> 개인정보 수집 및 이용 동의
</div>
</div>
</div>
{displayNameError && <div>{displayNameError}</div>}
<button
onClick={handleClickSignUp}
className={buttonColor ? "text-green-500" : "text-slate-200"}
>
회원가입
</button>기본구조로는 div -> input -> div 구조를 가지고 있습니다
기본구조는 요렇게 진행됐고
그러면 기본구조를 움직이는 변수와 useEffect를 만들어봅시다!
하나씩 설명 도와드리곘습니다!
우리가 필요한 변수
// 체크리스트 부분 useState
const [checkList, setCheckList] = useState<string[]>([]);
const [buttonColor, setButtonColor] = useState<boolean>(false);
// 체크리스트 전체 동의에 필요한 변수
const checkAll = (event: ChangeEvent<HTMLInputElement>) => {
event.target.checked
? setCheckList(["age", "terms", "collect"])
: setCheckList([]);
};
const check = (event: ChangeEvent<HTMLInputElement>) => {
event.target.checked
? setCheckList([...checkList, event.target.name])
: setCheckList(
checkList.filter((choice) => choice !== event.target.name)
);
};상태 변화를 파악해야하니깐 우리는 useState를 사용할겁니다!
명칭은 아무렇게 적으셔도 좋지만 '짱쫑'님께서 직관적으로 잘 사용하셨기 때문에는 저는 그냥 사용하도록 하겠습니다 ㅎ!
checkAll 변수를 이용해서 전체 동의에 대한 기능를 구현해줍니다
그리고 check 변수를 이용해서 내가 체크한 박스를 제외하고 나머지는 활성화 해주고 반대로 내가 체크하지 않은 박스를 제외하고 나머지는 활성화 하는 코드로 체크박스에 어느정도 틀을 만들어 줍니다
다음은 useEffect
다음은 useEffect 입니다 여기서 useEffect 코드를 작성하는 이유는 true값과 false값을 만들어주어서 버튼에 색상변화를 주고 체크박스가 모두 체크되어있을 때 버튼이 활성되는 듯한 느낌을 줘봅시다!
useEffect에 들어가있는 if문에 모두가 다 담겨있다 = 모두 체크가 되어있다 그러면 true를 반환
반대로 그게 아니라면 false를 반환
입니다!
다음은 마지막으로 tailwind를 통한 색상 변화
<button
onClick={handleClickSignUp}
className={buttonColor ? "text-green-500" : "text-slate-200"}
>
회원가입
</button>우리가 useEffect를 통해 가져온 Boolean 값을 토대로 회원가입 버튼에 삼항연산자를 이용해 색상을 변화 해줍니다
참고로 tailwind는 그 동안 사용했던 styled-component를 이용하는 방식과 다르게 className을 통해서 css 효과를 줍니다!
tailwind를 사용한 css 효과는 제가 프로젝트를 진행하면서 조금 더 자세히 알려드릴 수 있도록 하겠습니다!!
네! 오늘은 이렇게 체크박스를 이용한 약관동의 기능을 만들어보았습니다!
정말 '짱쫑'님의 벨로그 포스팅이 없었다면 저는 구현하지 못 했을겁니다 어찌어찌 이렇게 만들어보았습니다...ㅎ
이번 프로젝트는 기획 단계가 조금 많아서 이제 조금씩 시작하고 있는 것 같습니다
그리고 이번 프로젝트에 리더를 담당하게 되어서 디자이너분이랑 소통도하고 기획하고 소통하느라 조금 힘들긴한데 그래도 개발 프로젝트에 대해 이렇게 제가 나서서 할 수 있는게 행복하기도 한 경험인 것 같습니다!
네! 그러면 오늘은 이렇게 마무리하고
다음에 또 프로젝트를 진행하면서 작업에 해결 방법이나 이슈에 대해 공유하도록 하겠습니다!!
그러면 오늘도 여러분 빠이팅이고
우리는 또 행복하자구요!!!!
조심히 들어가세요!
