Wordle Maker Project 26일차

오늘은 11월 26일 26일차이다.

목표

• 페이지들끼리 연결
• delete 시 다시 확인하는 과정 추가

진행

solvePage는 따로 연결할 필요는 없을 것 같다. 어차피 maker가 링크를 공유하면 solver들이 거기로 접속하여 wordle을 푸는 방식이기 때문이다. 그래서 maker와 loader 페이지에 각각 loader 페이지, maker 페이지로 이동할 수 있는 버튼을 넣었다.
delete 시에는 서버에서 3초를 세어 그 안에 delete 버튼을 한 번 더 누르면 wordle이 삭제되도록 구현했다.

코드

const Header = props => {
    const navigate = useNavigate();
    
    const onClick = () => {
        if ( props.title === 'Wordle Maker' )
            navigate('/load');
        else if ( props.title === 'Wordle Loader' )
            navigate('/');
    };
    return (
        <HeaderBlcok>
            <LeftSpace />
            <Title>{props.title}</Title>
            <Buttons>
                {
                    (props.title === 'Wordle Maker' && <button onClick={onClick}>Wordle Loader</button>) ||
                    (props.title === 'Wordle Loader' && <button onClick={onClick}>Wordle Maker</button>)
                }
                
            </Buttons>
        </HeaderBlcok>
    )
}

Header 컴포넌트이다. maker 페이지와 loader 페이지에 각각 리다이렉트 버튼을 만들어주었다.

    const onClickDelete = e => {
        client.delete(`/load/delete/${nickname}`)
            .then( res => {
                if ( res.data === 'oneClick' ) {
                    setMessage('Press delete button one more again');
                    setTimeout(() => {
                        setMessage(null);
                    }, 3000);
                } else if ( res.data === 'doubleClick' ) {
                    navigate('/');
                }
            })
    };

loadPage에서 delete 버튼에 달려있는 onClickDelete 함수이다. 이때 서버로 요청을 보내는데, 서버에서 oneClick 응답이 오면 한 번 더 클릭하라는 message를 띄우고 3초를 센다. 이후 한 번 더 누르면 서버에서 doubleClick 응답이 오는데, 이때는 / 페이지로 리다이렉트해준다.

router.delete('/delete/:maker', async (req, res) => {
    try {
        if ( doubleChecked[req.params.maker] === undefined ) {
            doubleChecked[req.params.maker] = 1;
            setTimeout(() => {
                delete doubleChecked[req.params.maker];
            }, 3000);
            res.send('oneClick');
        } else if ( doubleChecked [req.params.maker] === 1 ) {
            req.session.maker = null;
            await Maker.destroy({
                where: {
                    nickname: req.params.maker,
                }
            });
            res.send('doubleClick');
        }
    } catch (error) {
        console.error(error);
    }
});

DELETE /load/delete/:maker를 처리하는 함수이다. doubleChecked는 로컬 변수인데, dictionary 형식이다. 처음으로 요청이 오면 doubleChecked에서 maker 닉네임을 키로 가지는 값을 1로 변경해주고, 3초 후에 이 값을 삭제하도록 setTimeout을 걸어주고, oneClick 응답을 보낸다. 그 3초 사이에 한 번 더 누르면 세션과 db에서 정보를 삭제해주고, doubleClick 응답을 보낸다.

내일 할 것

• 배포 준비

마무리

11월이 얼마 안 남기도 했고, 내가 처음에 생각했던 틀로는 다 구현을 했기 때문에 이제 배포 작업에 들어가려고 한다. 배포를 한 번도 해보지 않았기 때문에 경험삼아 하는 것이고, 더 추가할 기능이 생긴다면 계속 수정해나갈 계획이다.