Building the header + banner + List UI and our first merge

Today, for the first time, I merged our work into the main branch with a teammate through GitHub Desktop. Luckily, we had split our areas by branch, and there were no conflicts either.

The part I built is the header, that is, the nav bar. It isn't connected to the backend yet, so for the logged-out state I set things up temporarily with state.

I did make a login popup, but as you can see below, I feel like I'm managing state values too carelessly. I did separate the login popup component into Login.tsx in the Popups folder, but I'm still not satisfied with it.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28const [searchSelect, setSerachSelect] = useState('검색')
  const [selectUl, setSelectUl] = useState(false)
  const [token, setToken] = useState(true) // TODO login state
  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'
  }

I also built the Drop box myself.

I think I'll only feel at ease once I finish the login feature properly by working with the backend.

Building the header + banner + List UI and our first merge

More in Learning