풋살 기록 웹플리케이션 - (2) 기록하기

기존 기록 방식이 어땠느냐?

이렇게 카카오톡 단톡에 일일이 올렸었다.
그럼 이후에 운영진이 취합해서 기록에 반영하곤 했다.
하지만 이제 자동화 해서 기록을 하면 바로바로 기록에 반영 되도록 해보자.

데이터를 등록하면 실시간으로 보여지게 하기 위해 파이어베이스의 리얼타임 데이터베이스를 활용해 보기로 했다.
연동을 하면 웹소켓 처럼 실시간으로 데이터를 바로바로 받아올 수 있다고 한다.

import { getDatabase, ref, onValue } from 'firebase/database'

const [todayRecordObj, setTodayRecordObj] = useState({})
const db = getDatabase()
const todayRef = ref(db, thisYear + '/')

onValue(todayRef, (snapshot) => {
  const data = snapshot.val()
  setTodayRecordObject(data)
})

또한 나중에 데이터 핸들링과 활용에 용이하게 하기 위해
기존에는 라운드 마다 기록을 했다면
골이 나올 때마다 기록을 하는 방식으로 변경을 했다.

기록이 등록 되면
기록실 탭에서 사용하는 firestore 데이터베이스에 바로 반영시켜 기록실 탭에 기록이 바로 반영되도록 했다.

const registerHandler = () => {
    const day = currentTime.getDay()
    if (!([0, 7].includes(day) && currentTime >= startTime && currentTime <= endTime)) {
      Swal.fire({
        icon: 'error',
        text: '기록 가능 시간이 아닙니다.'
        })
    } else {
      const db = getDatabase()
      const time = currentTime.getHours().toString().padStart(2, '0') + ':' + currentTime.getMinutes().toString().padStart(2, '0') + ':' + currentTime.getSeconds().toString().padStart(2, '0')
      const id = uid()

      if (scorer.trim()) {
        const record = {
          id: id,
          time: time,
          goal: scorer.trim(),
          assist: assistant.trim()
        }
        set(ref(db, thisYear + '/' + today + '/' + id), record);
        set(ref(db, thisYear +'/' + today + '_backup' + '/' + id), record);
        setLastRecord(id)
        setScorer('')
        setAssistant('')
      }

      // 스크롤 내려주기
      const scrollToElement = () => {
        const scrollContainer = scrollContainerRef.current;

        if (scrollContainer) {
          scrollContainer.scrollTo({
            top: scrollContainer.scrollTop + scrollContainer.clientHeight,
            behavior: 'smooth',
          });
        }
      }
      setTimeout(() => {
        scrollToElement()
      }, 300)
    }
  }