[Feature/ReportPage]

[hyosin-Jang]

📑 이슈 내용

• 이메일신고&트위터 신고 버튼 기능 구현

📝 상세 내용

• 이메일 신고 기능
  • 페이지는 그대로 유지하고 state에 따라 컴포넌트만 전환하기 위해 ReportBoard에서 ReportButtons를 자식 컴포넌트로 분리함
  • ReportButtons의 centerReport: 센터에 신고하기 버튼 상태 관리함
  • 자식 컴포넌트인 EmailBox에서 신고 버튼을 누르면 부모 컴포넌트 state값을 변경하기 위해
    부모 컴포넌트인 ReportButtons로부터 state를 변경하는 함수인 changeState를 props로 전달함
• 트위터 신고 기능
  • useState를 사용해서 버튼 상태 관리함 active값에 따라 css와 text가 변경되도록 구현함

✔ 체크리스트

• 중복 신고 방지하기 위해 신고 버튼은 한번만 클릭되고, 이후에는 disable하도록 하기
• 이메일 유효성 검사하기

📍 레퍼런스

• 운영체제의 세마포 개념 사용해서 중복클릭 방지하는 방법
• React에서 form 유효성 검사하는 방법(custom hooks, 기본적인 form control)

📷 스크린샷