Wordle Maker Project 2일차

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

목표

• Wordle Maker 페이지 디자인

진행

개발환경을 맥으로 옮겼는데, 개발환경을 구축하느라 시간을 많이 썼다. 오늘은 간단하게 디자인만 진행했는데, 우선 기존에 6줄 있던 단어들을 1줄로 줄이고, 닉네임과 정답 단어를 입력받도록 했다. 먼저 닉네임을 입력하라는 메시지를 띄운 후, 입력받는다면 애니메이션을 출력하고 단어칸들을 다시 빈 칸으로 만들어 정답 단어를 입력하라고 메시지를 띄운다.

코드

import styled from 'styled-components';
import WordList from "./Word/WordList";
import Keyboard from './Keyboard/Keyboard';
import { useEffect, useState } from 'react';
import { BACK } from './Keyboard/Keyboard';

const BoardContainer = styled.div` // 헤더를 제외한 부분 스타일
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    height: calc(100% - 65px);
    display: flex;
    flex-direction: column;
`;

const BoardBlock = styled.div` // 단어 리스트 스타일
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    overflow: hidden;
`;

const Message = styled.div` // 알림 박스 스타일
    width: auto;
    height: 40px; 
    position: absolute;
    display: ${props => props.message !== null ? 'inline-block' : 'none'};
    left: 50%;
    top: 60px;
    background-color: black;
    border-radius: 5px;
    color: white;
    padding: 2px 10px;
    text-align: center;
    line-height: 40px;
    font-size: 17px;
    font-weight: bold;
    transform: translate(-50%, 0);
`;

const wordMaxLen = 5;

let isFinished = false;
let submitNickname = false;
let submitWord = false;
let listIndex = 0;
let keyState = {};

const MakerBoard = () => {
    const [word, setWord] = useState([]);
    const [wordList, setWordList] = useState([]);
    const [wordState, setWordState] = useState('');
    const [message, setMessage] = useState(null);

    useEffect(() => {
        setMessage('Enter your nickname!');
    }, []);

    const onClick = e => { // 키를 눌렀을 때 실행되는 함수
        if ( isFinished )
                return;
        if ( e.target.innerText === 'ENTER') { // ENTER를 눌렀을 경우
            if ( word.length < wordMaxLen ) { 
                setMessage('Not enough letters');
                setWordState('not-word');
                setTimeout(() => {setWordState(''); setMessage(null);}, 500);
                return;
            }
            if ( submitNickname === false ) {
                submitNickname = true;

                // 닉네임 서버로 보내기 추가
                
                for( let i = 0 ; i < wordMaxLen ; i++ ) {
                    word[i].state = 'correct';
                }
                setWordList({
                    ...wordList,
                    word,
                });
                
                setTimeout(() => {
                    
                    setWord([]);
                    setWordList({
                        word,
                    });
                    setMessage('Enter your word!')
                }, 2000);
            } else if ( submitWord === false ) {
                submitWord = true;
                isFinished = true;

                // 입력한 단어(정답 단어) 서버로 보내기 추가

                for( let i = 0 ; i < wordMaxLen ; i++ ) {
                    word[i].state = 'correct';
                }
                setWordList({
                    ...wordList,
                    word,
                });
                setTimeout(() => {
                    setMessage('Your Wordle was made!');
                }, 2000);
                
                
                // 만든 문제 링크 띄우기(모달 or 링크 복사 div)
                
            }
            return;
        }
        setMessage(null);
        if ( e.target.innerText === BACK ) {
            if ( word.length === 0 )
                return;
            setWord(word.slice(0, -1));
            return;
        }
        if ( word.length > wordMaxLen )
            return;
        setWord(word.concat({
            text: e.target.innerText,
            state: 'filled',
        }));
    };

    return (
        <BoardContainer>
            <Message message={message}>{message}</Message>
            <BoardBlock>
                <WordList word={word} wordState={wordState} wordList={wordList} listIndex={listIndex}/>
            </BoardBlock>
            <Keyboard onClick={onClick} keyState={keyState}/>
        </BoardContainer>
    );
};

export default MakerBoard;

오늘 구현한 핵심적인 부분은 ENTER를 눌렀을 시 실행되는 부분이다. word와 wordList, message 상태를 관리하면서 차례차례 닉네임과 정답 단어를 입력할 수 있도록 하였다.

보충할 것

• 닉네임 입력 후 단어 입력 시 애니메이션 부자연스러움

내일 할 것

• 생각하고 결정

마무리

오늘 시간이 너무 부족해서 velog도 빠르게 작성할 수 밖에 없었다. 개발환경을 다 구축했으니 내일부터는 프로젝트에 집중해야겠다.