header + banner + List 퍼블리싱

오늘 처음으로 Github Desktop을 통해서 동료분과 main branch에 merge를 통해서 통합을 했다. 다행히 branch를 통해서 영역을 나눴고 충돌 또한 없었다.

Git

 

메인페이지

내가 퍼블리싱한 영역은 header즉 nav bar인데 로그인을 하지 않은 상태는 아직 빽엔드와 연동이 되지 않았으므로 state를 이용해서 임의적으로 적용을 해두었다.

 

메인 페이지 로그아웃 상태

로그인 popup을 만들어 두긴 하였는데 아래와 같이 너무 무분별하게 state값을 관리하는 것 같다는 느낌이 드는 것 같다. 물론 로그인 popup component는 Popups폴더에 Login.tsx로 따로 분류를 해주었지만 그래도 만족이 되지는 않는 것 같다.

const [searchSelect, setSerachSelect] = useState('검색')
  const [selectUl, setSelectUl] = useState(false)
  const [token, setToken] = useState(true) // TODO 로그인 상태
  const [userUlList, setUserUlList] = useState(false)
  const [showLoginModal, setShowLoginModal] = useState(false)

  const handleSearchSelect = () => {
    setSelectUl(true)
  }

  const handleSearchValue = (e: React.MouseEvent<HTMLLIElement>) => {
    setSelectUl(false)
    setSerachSelect(e.currentTarget.innerText)
  }

  const handleOpenUserUl = () => {
    setUserUlList(!userUlList)
  }

  const handleLogout = () => {
    setToken(false)
  }

  const handleLogin = () => {
    setShowLoginModal(true)
    const modalBack = document.querySelector('#modalBackdrop') as HTMLElement
    modalBack.style.display = 'block'
  }

 

Drop box도 직접 구현해주었다.

메인 페이지 로그인 상태

 

빽엔드와의 협업을 통해서 로그인 기능 구현을 확실하게 매듭지어야 맘이 편안해질 것 같다.