[TIL] 프리온보딩 5

Today . . .

항상 styled-components에 익숙해져 있다보니 css module을 사용해 코드를 작성하는데 어려움이 있었다. 그 중 나를 제일 괴롭게 한 것은,. props를 어떻게 넘겨주지?에 대한 의문이었다. props를 통해 state값이 변할 때마다, css를 다르게 주었었는데 css module은 props를 넘겨주지 못해서 괴로웠다. 결국, 클래스 명을 따로 부여하여 스타일을 주거나 인라인 스타일을 주는 것 말고는 답이 없었다 🥲 이 기회에 classnames 라이브러리에 대해서 공부해봐야겠다.

그리고 오늘은 최종 머지 날! 완성 된 과제물을 보니까 너무 뿌듯했고, 내가 맡은 부분은 아주 작은 부분이지만 함께 하나의 결과물을 만들었다는 자체가 너무 좋았다 ❤︎

7팀의 TodoList 배포주소 자랑하기

내가 맡은 Drag & Drop

• custom hooks를 만들었다!

const useDragDrop = () => {
  const [todoList, setTodoList] = useRecoilState(todoListState)
  const [grab, setGrab] = useState(null)

  const handleDragOver = (e) => {
    e.preventDefault()
  }

  const handleDragStart = (e) => {
    setGrab(e.currentTarget)
    e.currentTarget.classList.add('grabbing')
    e.currentTarget.style.opacity = 0.5
    e.dataTransfer.effectAllowed = 'move'
    e.dataTransfer.setData('text/html', e.currentTarget)
  }

  const handleDragEnd = (e) => {
    e.currentTarget.classList.remove('grabbing')
    e.currentTarget.style.opacity = ''
    e.dataTransfer.dropEffect = 'move'
    setGrab(null)
  }

  const handleOnDrop = (e) => {
    const grabPosition = Number(grab.dataset.position)
    const targetPosition = Number(e.currentTarget.dataset.position)
    const list = [...todoList]
    list[grabPosition] = list.splice(targetPosition, 1, list[grabPosition])[0]
    setTodoList(list)
    localStorage.setItem('todoList', JSON.stringify(list))
  }

  return { handleDragStart, handleDragEnd, handleDragOver, handleOnDrop, grab }
}

export default useDragDrop

• todoList index.js에서 불러와 list태그에 적용한다

const { handleDragStart, handleDragOver, handleDragEnd, handleOnDrop, grab } = useDragDrop()

 <li
              key={`todo-${todo.id}`}
              data-position={index}
              className={cx(
                styles.task,
                { [styles.hidden]: todo.hidden },
                {
                  [styles.grabbing]: isGrabbing(index),
                }
              )}
              draggable='true'
              onDragStart={handleDragStart}
              onDragOver={handleDragOver}
              onDragEnd={handleDragEnd}
              onDrop={handleOnDrop}
            >