수입 및 지출 내역 시각화

예전에 진행한 프로젝트에서 직접적으로 활용해보지 못한 Firebase 활용 및 학습 목적의 프로젝트로 수입 및 지출 내역을 입력하면 총 내역 및 세부 지출 내역의 정보를 차트로 시각화한 서비스를 진행 했습니다.

---

먼저 Firebase를 활용해 보는 학습 목적을 가지고 있으므로 구글 계정을 통한 로그인부터 데이터 생성, 가져오기, 삭제를 마치고 이에 대한 hosting 배포의 과정을 생각하며 시작했습니다.

활용한 기능

1. 구글 계정을 통한 OAuth 인증 로그인

• 구글 계정을 사용하여 OAuth 인증을 통해 로그인하며 구글 계정의 닉네임을 활용합니다.
• Firebase onAuthStateChanged로 사용자 인증 상태를 감지합니다.

2. 수입 및 지출 내역 추가

• 데이터가 업데이트 되면 onSnapshot 사용으로 업데이트된 최신의 데이터 바탕으로 총 합산

3. 수입과 지출 필터링 및 선택한 내역에 대한 삭제

3-1. 입력한 데이터 가져오기 및 전체 내역 합산 hooks

// useGetDoc

const useGetDoc = (uid: string, type: string | null) => {
  const [docList, setDocList] = useState<docType[]>([]);

  useEffect(() => {
    const userDiary = `user/${uid}/user-diary`;
    let unsubscribe: Unsubscribe;

    // 내역 button 필터링
    if (type === "수입" || type === "지출") {
      const queryCheck = query(collection(db, userDiary), where("type", "==", type), orderBy("date", "desc"));
      unsubscribe = onSnapshot(queryCheck, (snapShot) => {
        const productArr = snapShot.docs.map((doc) => ({ id: doc.id, ...doc.data() } as docType));
        setDocList(productArr);
      });
    } else {
      // 전체 내역 필터링
      const queryCheck = query(collection(db, userDiary), orderBy("date", "desc"));
      unsubscribe = onSnapshot(queryCheck, (snapShot) => {
        const productArr = snapShot.docs.map((doc) => ({ id: doc.id, ...doc.data() } as docType));
        setDocList(productArr);
      });
    }

	// 메모리 누수를 방지 및 불필요한 서버 리소스 줄이기 위해 onSnapshot 구독 해제
    return () => {
      if (unsubscribe) {
        unsubscribe();
      }
    };
  }, [uid, type]);

  // 내역별 총 계산
  const typeCheck = useMemo(() => docList.filter((item) => item.type === type), [docList]);
  const onlyNumberPrice = useMemo(() => typeCheck.map((item) => item.price.replace(/[^\d]/g, "")), [typeCheck]);
  const total = useMemo(() => onlyNumberPrice.reduce((acc, el) => acc + Number(el), 0), [onlyNumberPrice]);

  return { docList, total };
};

4. 입력한 내역 바탕의 금액 비율 시각화 chart.js 활용

• 총 합산 내역과 지출 세부 내역의 비율을 차트로 시각화 내용 정리

5. Firebase Hosting

• Firebase Hosting 및 Github Actions을 활용한 자동 배포 정리

6. user-diary 컬렉션 문서 데이터

---

• 프로젝트 Github 링크