[💎 : refactor] userTimeline onSnap 제한 걸기 (#12)

- 유사한 작업을 timeline때 적용한 적 있으니 참고 (d37a720)
- onSnapshot이 실시간으로 firestore의 정보를 read해와 사용량을 분당 1천회 사용하는 과금의 주원인이 됨
- onSnapshot과 fetchTweets 과정을 useEffect 내부로 이동시켜 cleanup 기능에 의존하는 방식

src/components/timeline.tsx

@@ -1,12 +1,12 @@
 import { useEffect, useState } from 'react';
+import { Unsubscribe } from 'firebase/auth';
 import {
   collection,
   limit,
   onSnapshot,
   orderBy,
   query,
 } from 'firebase/firestore';
-import { Unsubscribe } from 'firebase/auth';
 import { db } from '../firebase.ts';
 import Tweet from './tweet.tsx';
 import * as S from '../styles/timeline.ts';

src/components/user-timeline.tsx

@@ -1,8 +1,9 @@
 import { useEffect, useState } from 'react';
+import { Unsubscribe } from 'firebase/auth';
 import {
   collection,
-  getDocs,
   limit,
+  onSnapshot,
   orderBy,
   query,
   where,
@@ -15,30 +16,37 @@ import ITweet from '../interfaces/ITweet.ts';
 export default function UserTimeline() {
   const user = auth.currentUser;
   const [tweets, setTweets] = useState<ITweet[]>([]);
-  const fetchTweets = async () => {
-    const tweetsQuery = query(
-      collection(db, 'tweets'),
-      where('userId', '==', user?.uid),
-      orderBy('createdAt', 'desc'),
-      limit(25),
-    );
-    const snapshot = await getDocs(tweetsQuery);
-    const tweetList = snapshot.docs.map((doc) => {
-      const { userId, userName, tweet, createdAt, photo } = doc.data();
-      return {
-        userId,
-        userName,
-        tweet,
-        createdAt,
-        photo,
-        id: doc.id,
-      };
-    });
-    setTweets(tweetList);
-  };
   useEffect(() => {
+    let unsubscribe: Unsubscribe | null = null;
+    const fetchTweets = async () => {
+      const tweetsQuery = query(
+        collection(db, 'tweets'),
+        where('userId', '==', user?.uid),
+        orderBy('createdAt', 'desc'),
+        limit(25),
+      );
+      unsubscribe = await onSnapshot(tweetsQuery, (snapshot) => {
+        const tweetList = snapshot.docs.map((doc) => {
+          const { userId, userName, tweet, createdAt, photo } = doc.data();
+          return {
+            userId,
+            userName,
+            tweet,
+            createdAt,
+            photo,
+            id: doc.id,
+          };
+        });
+        setTweets(tweetList);
+      });
+    };
     fetchTweets();
-  }, [tweets]);
+    return () => {
+      if (unsubscribe) {
+        unsubscribe();
+      }
+    };
+  }, []);
   return (
     <S.TimelineWrapper>
       {tweets.map((tweet) => (