[TIL] 230114

오늘의 삽질...

10초 후 자동으로 사라지는 모달 컴포넌트

  const [seconds, setSeconds] = useState(10);
  
  function GameAnswerModal({ setIsMyTurnModal }) {

  ...

  useEffect(() => {
    const countdown = setInterval(() => {
      setSeconds(parseInt(seconds, 10) - 1);
    }, 1000);
    if (parseInt(seconds, 10) === 0) {
      setIsMyTurnModal(false);
    }
    return () => clearInterval(countdown);
  }, [seconds]);
  
  ...
  
  }

상위 컴포넌트

          {isMyTurnModal && (
            <GameModal
              content={
                <GameAnswerModal
                  // gameInfo={param}
                  setIsMyTurnModal={setIsMyTurnModal}
                />
              }
            />
          )}

 

10초가 지나도 모달이 사라지지 않아서

    if (parseInt(seconds, 10) === 0) {
      setIsMyTurnModal(false);
    }

여기서 도대체 뭐가 문제인가 왜 안 될까 몇 시간 동안 붙잡고 있었는데

위의 코드들만 넣으니 모달이 잘 사라졌다.

내가 쓰지 않았다고 하더라도 뜯어보고 점검하는 습관을 가져야겠다.

 

게임방 아이디를 props로 받아오는 로직에 문제가 있었다.

고친 코드가 맞는지 테스트 해보고 싶었는데 CORS가 떴다.

 

상위 컴포넌트에서 props.roomId로 게임방 아이디만 받아서 props로 넘겨주고 path variable 의 post method로 서버에 전달했다.

상위 컴포넌트 안에 모달이 있고 그 안에 함수가 실행되는 모달이 있어서 props drilling이 생길 것 같았다.

그래서 팀원분께 여쭤보고 뎁스 하나를 없앴다. 다행히 임시로 만들어 놓은 것이었다.

 

*오전 기술매니저님의 조언

atomic design 과 같은 디자인 패턴 찾아보기

 

미루고 흐린 눈 하던 UI 작업 시작!

디자인이 마음에 드니 신나서 밤을 새버렸다.

 

git stash 를 해서 저장했는데 작업 내역을 못 찾아서 다시 썼다.

이제 자고 내일 서버 api 연동 테스트를 해야겠다.