☑️user측면 수정사항
- 회원가입 -> 일반사용자 / 관리자 가입페이지 구분하기
관리자 가입 요청 후 승인
관리자로 가입하려면 관리자 승인이 필요하도록 한다.
사용자가 관리자로 가입 요청을 하면, 관리자가 이를 검토하고 승인해야만 관리자로 전환된다.
페이지를 새로 추가할까도 고민하다가, 다른 팀원이 모달창으로 회원가입창을 구현해둔것이 있어서 그것으로 진행하기로 하였다. 여러 고민 끝에 일단은, 관리자/일반사용자가 가입경로는 같되, 대신 관리자로 가입할때는 사업자등록번호를 포함한 몇가지 사업자관련 번호를 추가해야 관리자계정으로 가입할 수있도록 만들었다.
다만, 관리자계정으로 가입을하면, 원래 상태가 pending 이 되고 최고관리자가 승인해주는 방식으로 해야하는데, 프로토타입이고 시연할때는 최고관리자단까지 가진 않아도 되서 일단 최고관리자가 승인해주는 단계는 없이, 개발하였다.
✔️구현 방법:
가입 시 isAdmin 필드를 false로 설정하고, adminRequest 필드를 true로 추가한다.
관리자가 승인하면 isAdmin을 true로 변경한다.
가입시 작성해야하는 항목수가 늘어났기 때문에 overflow-y-auto 클래스를 추가하여 세로 스크롤을 활성화한다.
✔️UI 변경:
체크박스를 클릭하면 관리자 인증 할 수 있는 사업자등록번호 입력 필드가 나타나도록 한다.
⭐코드수정
✔️Header.js
- 삼항연산자 사용해서 관리자로 가입했을 경우, [관리자] 라고 이름 옆에 표시 하기
{currentUser ? (
<>
<span className="mr-4 text-black">{currentUser.name}님</span>
{currentUser.isAdmin && (
<span className="mr-4 text-black">[관리자]</span>- 일반 사용자일 경우, 아무표시 없음
- 회원가입이 완료되었습니다 라는 문구 표시구현 필요 (나중에)
✔️SignUpModal.js
- 출력부분에 관리자계정으로 가입할 경우 필요한 4개의 필드값을 추가하고
- 유효성 검사하기. 만약, 관리자계정에 4개 정보를 모두 입력하지 않으면, 정보를 모두 입력해달라는 메세지 출력
{error && <p className="text-red-500 text-sm mb-4">{error}</p>}
// 관리자 추가 입력 필드 유효성 검사
if (isAdmin) {
if (
!businessNumber.trim() ||
!businessName.trim() ||
!representativeName.trim() ||
!adminPhone.trim()
) {
setError("관리자 정보를 모두 입력해주세요.");
return;
}
}✔️ 새 사용자 객체 생성
사용자 객체 생성할때 원래 없던 관리자계정에만 입력하는항목을 추가한다.
관리자가 아니라면 null값을 넣고 저장한다.
const newUser = {
id,
...,
businessNumber: isAdmin ? businessNumber : null,
businessName: isAdmin ? businessName : null,
representativeName: isAdmin ? representativeName : null,
adminPhone: isAdmin ? adminPhone : null,
};
- 회원가입이 완료되었다는 메세지는 아직 구현중
