TODO

☑️ 로그인하고 로컬스토리지에 저장하기

로그인페이지를 맡게 되었다. UI는 굉장히 단순했기 때문에 금방 끝낼수 있었지만 각 경우의 수에 따라 로컬스토리지에 저장하는 것에 시간을 많이 쓴 것 같다.

먼저 우리팀은 유저의 닉네임을 받아서 로그인을 하기로 했다. 만약 유저가 닉네임을 입력시에 그 유저의 id가 없다면, 새로운 유저이기 때문에 빈 데이터구조를 만들어주어야 하고, 만약 로컬스토리지 안에 유저의 id가 있다면 기존의 유저이기 때문의 그 유저의 id를 메인페이지로 전달해서 TODO를 불러와야 한다.

위의 설명을 보면 두 가지의 경우이지만 아예 localStorage가 완전히 비어있을 경우까지 고려해야했다. 안그러면 데이터 구조를 map을 돌릴때 에러가 나기 때문에..

따라서 이렇게 작성했다.

  const onClickLoginBtn = () => {
    const item = JSON.parse(localStorage.getItem('todo'))
    const newUser = {
      ...BASIC_DATA,
      userNickName: userName,
      id: `${new Date().getMilliseconds()}${userName}`,
      isLogined: true,
    }

    try {
      // 로컬스토리지가 완전히 비었을 때 (가장 최초의 회원)
      if (item === null) {
        localStorage.setItem('todo', JSON.stringify([newUser]))
        navigate('/', { state: { userId: `${new Date().getMilliseconds()}${userName}`, isNewUser: true } })
      } 
      // localStorage에 유저의 이름이 있을 때 (기존 회원)
      else if (item.map((el) => el.userNickName).includes(userName)) {
        const loginUser = item.find((el) => el.userNickName === userName)
        navigate('/', { state: { userId: loginUser.id, isNewUser: false } })
      } 
      // localStorage에 유저의 이름이 없을 때 (신규 회원)
      else {
        localStorage.setItem('todo', JSON.stringify([...item, newUser]))
        navigate('/', { state: { userId: `${new Date().getMilliseconds()}${userName}`, isNewUser: true } })
      }
    } catch (e) {
      console.log(e)
    }
  }

가독성이 매우 안좋은 것 같은데 어떻게 리팩토링을 해야할까...