LikeLion 출석부 제작하기 #5

최민석·2021년 1월 22일

Firebase LIKELION React Toyproject

Toyproject

목록 보기

5/8

해결 개발 현황

Auth 인증 페이지 생성 ( 운영진, 멤버 코드 분리 )

Auth 인증 Logic 구현 ( URL 접근 X , Redux State 이용)

따로 계정생성을 해서 만들지 않은 이유는 큰 필요성을 느끼지 못했다.

멤버와 운영진의 코드를 따로 분리시켜 화면을 달리하는 방법을 선택했다.

왜냐하면 멤버가 출석체크 관리 페이지에 들어가면 크나 큰 오류이기 때문!

인증방식

Redux를 활용하여 간편한 인증절차를 만들었다.

<Form>
    <Form.Group>
        <Form.Label>접속 코드</Form.Label>
        <Form.Control 
        type="text" 
        placeholder="접속 코드를 입력하세요"
        value={code} 
        onChange={(e)=> {
            setcode(e.target.value)
            }} />
            <Form.Text className="text-muted">
                이 페이지는 🦁멋쟁이사자처럼 at 순천향대학교 출석부 입니다.
            </Form.Text>
    </Form.Group>
    <Button style={{ width: '100%' }} 
    variant="primary" 
    type="submit" 
    onClick={handleSubmit}>
        접속하기
    </Button>
</Form>

해당 코드에서 인증페이지에서 폼에 대한 구성 현황이다.

코드를 입력받는 부분에 onChange 함수를 인라인으로 구현하여,
Value값을 입력과 동시에 실시간으로 받음.
현재 code state값에는 입력 받은 값이 들어가 있음.
버튼을 눌러서 onClick 이벤트 실행함.(Form action을 통해 전달이 아님.)

const handleSubmit = (e) => {
    e.preventDefault();
    if (code === 'likelionadmin') {
        dispatch(SetCurrentAuth(code))
        alert("운영진 인증 완료")
        history.push("/main")
    } else if (code === 'likelion') {
        dispatch(SetCurrentAuth(code))
        alert("유저 접속 완료")
        history.push("/main")
    } else if (code === '울부짖어라밈미') {
        dispatch(SetCurrentAuth(code))
        alert("유민에게 주는 선물")
        history.push("/main")
    } else if (code === '울어라두부') {
        dispatch(SetCurrentAuth(code))
        alert("율희에게 주는 선물")
        history.push("/main")
    } else {
        alert("코드가 잘못 됐습니다.")
    }
}