refactor: 메인 페이지 피드 정보 받아오는 방식 변경 onSnapShot => next.js api

firebase-practice/.gitignore

@@ -36,3 +36,6 @@ yarn-error.log*
 
 # test page
 test.tsx
+
+# env
+.env

firebase-practice/pages/_app.tsx

@@ -6,8 +6,8 @@ import { onAuthStateChanged } from "firebase/auth"
 import { authService, DBService } from "@FireBase"
 import { RecoilRoot, useSetRecoilState } from "recoil"
 import { darkModeState, userDataState } from "@share/recoil/recoilList"
-import { UserData } from "backend/dto"
-import { doc, onSnapshot } from "firebase/firestore"
+import { FeedItem, UserData } from "backend/dto"
+import axios from "axios"
 
 const SetDarkMode = () => {
   const setDarkRecoil = useSetRecoilState(darkModeState)
@@ -20,11 +20,18 @@ const SetDarkMode = () => {
 const SetCurrnentUser = () => {
   const setCurrentUser = useSetRecoilState(userDataState)
   useEffect(() => {
-    onAuthStateChanged(authService, (user) => {
+    onAuthStateChanged(authService, async (user) => {
       if (user) {
-        onSnapshot(doc(DBService, "users", `${user.uid}`), (response) => {
-          setCurrentUser(response.data() as UserData)
-        })
+        const userId = user.uid
+
+        const userInfo = await axios(`/api/profile?userId=${userId}`).then<
+          Omit<UserData, "feed">
+        >((res) => res.data)
+        const userFeeds = await axios(`/api/userFeed?userId=${userId}`).then<
+          FeedItem[]
+        >((res) => res.data)
+
+        setCurrentUser({ ...userInfo, feed: userFeeds })
       }
     })
   }, [])

firebase-practice/pages/api/comment.ts

@@ -25,7 +25,6 @@ import { v4 } from "uuid"
  * update : commentId, oldComment, uploadTime 모두 포함한 데이터 전송
  * new comment : userId, comment, feedId 만을 포함한 데이터 전송
  *
- *
  * method : DELETE
  * request url : /api/comment
  * request body : {commentId, comment, uploadTime, userId, feedId}
@@ -38,15 +37,14 @@ export default async function getComment(
 ) {
   if (req.method === "GET") {
     const commentId = req.query?.commentId
-    console.log(commentId)
     const getCommentRef = doc(DBService, "Comments", `${commentId}`)
     const docSnapShot = await getDoc(getCommentRef)
 
     if (docSnapShot.exists()) {
       const data = docSnapShot.data()?.AllComments
       res.status(200).json(data as Comment[])
     } else {
-      res.status(500).json("Fail")
+      res.status(200).json([])
     }
   }
   if (req.method === "POST") {

firebase-practice/pages/api/feed.ts

@@ -1,8 +1,9 @@
 import { DBService } from "@FireBase"
-import { FeedData } from "backend/dto"
+import { FeedItem, UserInfo } from "backend/dto"
 import {
   arrayRemove,
   arrayUnion,
+  deleteDoc,
   doc,
   getDoc,
   setDoc,
@@ -16,12 +17,12 @@ import type { NextApiRequest, NextApiResponse } from "next"
  * request url : /api/feed
  * response : 메인 페이지의 피드 정보들
  *
- * TODO: 새로운 피드 등록과 피드 수정 기능 구분하기
  * method : POST
  * request url : /api/feed
  * request body for new feed : {imageUrl, desc, location, isPrivate, creator}
  * response : Success
  *
+ * uploadTime이 new feed 인 경우
  * method : POST
  * request url : /api/feed
  * request body for new feed : {imageUrl, desc, location, isPrivate, storageId, creator, uploadTime, newDesc, newLocation, newIsPrivate}
@@ -35,19 +36,39 @@ import type { NextApiRequest, NextApiResponse } from "next"
 
 export default async function getFeed(
   req: NextApiRequest,
-  res: NextApiResponse<FeedData[] | string>,
+  res: NextApiResponse<FeedItem[] | string>,
 ) {
   if (req.method === "GET") {
     const getFeedRef = doc(DBService, "mainPage", "userFeedDataAll")
     const docSnapShot = await getDoc(getFeedRef)
 
     if (docSnapShot.exists()) {
-      const data = docSnapShot.data()?.feed as FeedData[]
+      const data = docSnapShot.data()?.feed as FeedItem[]
+
+      const feedItems = await Promise.all(
+        data.map(async (feedItem) => {
+          const userId = feedItem.creator
+          const getUserInfoRef = doc(DBService, "users", `${userId}`)
+          const userInfoDocSnapShot = await getDoc(getUserInfoRef)
+
+          const userInfo = userInfoDocSnapShot.data()?.info as UserInfo
+
+          return {
+            ...feedItem,
+            creator: {
+              ...userInfo,
+            },
+          }
+        }),
+      )
+
       res
         .status(200)
-        .json(data.sort((a, b) => Number(a.uploadTime) - Number(b.uploadTime)))
+        .json(
+          feedItems.sort((a, b) => Number(b.uploadTime) - Number(a.uploadTime)),
+        )
     } else {
-      res.status(500).json("Fail")
+      res.status(404).json("not found")
     }
   } else if (req.method === "POST") {
     const {
@@ -58,89 +79,66 @@ export default async function getFeed(
       storageId,
       creator,
       uploadTime,
-      newDesc,
-      newLocation,
-      newIsPrivate,
     } = req.body
 
-    const firestoreAllRef = doc(DBService, "mainPage", `userFeedDataAll`)
-    const firestorePersonalRef = doc(DBService, "users", `${creator}`)
-
-    if (!uploadTime) {
-      const feed: FeedData = {
-        imageUrl: imageUrl,
-        desc: desc,
-        location: location,
-        isPrivate: isPrivate,
-        storageId: storageId,
-        creator: creator,
+    const firestoreRef = doc(DBService, "mainPage", `userFeedDataAll`)
+
+    const isNewFeed = uploadTime === "new feed"
+
+    if (isNewFeed) {
+      const feed: FeedItem = {
+        imageUrl,
+        desc,
+        location,
+        isPrivate,
+        storageId,
+        creator,
         uploadTime: getCurrentTime(),
       }
 
-      await updateDoc(firestoreAllRef, {
-        feed: arrayUnion(feed),
-      }).catch(async (error) => {
-        if (error.code === "not-found") {
-          await setDoc(firestoreAllRef, {
-            feed: [feed],
-          })
-        } else {
-          res.status(500).json(error.code)
-        }
-      })
-
-      await updateDoc(firestorePersonalRef, {
+      await updateDoc(firestoreRef, {
         feed: arrayUnion(feed),
       }).catch(async (error) => {
         if (error.code === "not-found") {
-          await setDoc(firestorePersonalRef, {
+          setDoc(firestoreRef, {
             feed: [feed],
           })
         } else {
           res.status(500).json(error.code)
         }
       })
-
-      res.status(200).json("Success")
-    } else {
-      const feedToRemove: FeedData = {
-        imageUrl: imageUrl,
-        desc: desc,
-        location: location,
-        isPrivate: isPrivate,
-        storageId: storageId,
-        creator: creator,
-        uploadTime: uploadTime,
+    }
+    if (!isNewFeed) {
+      const { newDesc, newLocation, newIsPrivate } = req.body
+
+      const feedToRemove: FeedItem = {
+        imageUrl,
+        desc,
+        location,
+        isPrivate,
+        storageId,
+        creator,
+        uploadTime,
       }
-      const newFeed: FeedData = {
-        imageUrl: imageUrl,
+      const newFeed: FeedItem = {
+        imageUrl,
         desc: newDesc,
         location: newLocation,
         isPrivate: newIsPrivate,
-        storageId: storageId,
-        creator: creator,
-        uploadTime: uploadTime,
+        storageId,
+        creator,
+        uploadTime,
       }
 
-      await updateDoc(firestoreAllRef, {
-        feed: arrayRemove(feedToRemove),
-      }).catch((error) => res.status(500).json(error.code))
-
-      await updateDoc(firestorePersonalRef, {
+      updateDoc(firestoreRef, {
         feed: arrayRemove(feedToRemove),
-      }).catch((error) => {
-        res.status(500).json(error.code)
       })
-
-      await updateDoc(firestoreAllRef, {
-        feed: arrayUnion(newFeed),
-      }).catch((error) => res.status(500).json(error.code))
-
-      await updateDoc(firestorePersonalRef, {
-        feed: arrayUnion(newFeed),
-      }).catch((error) => res.status(500).json(error.code))
-
-      res.status(200).json("Success")
+        .then(() => {
+          updateDoc(firestoreRef, {
+            feed: arrayUnion(newFeed),
+          }).catch((error) => res.status(500).json(error.code))
+        })
+        .catch((error) => res.status(500).json(error.code))
     }
   } else if (req.method === "DELETE") {
     const {
@@ -151,33 +149,37 @@ export default async function getFeed(
       storageId,
       creator,
       uploadTime,
-    } = req.body as FeedData
-
-    const firestoreAllRef = doc(DBService, "mainPage", `userFeedDataAll`)
-    const firestorePersonalRef = doc(DBService, "users", `${creator}`)
-
-    const feed: FeedData = {
-      imageUrl: imageUrl,
-      desc: desc,
-      location: location,
-      isPrivate: isPrivate,
-      storageId: storageId,
-      creator: creator,
-      uploadTime: uploadTime,
+      userId,
+    } = req.body
+
+    const feedRef = doc(DBService, "mainPage", `userFeedDataAll`)
+    const userRef = doc(DBService, "users", `${userId}`)
+    const commentRef = doc(DBService, "Comments", `${storageId}`)
+
+    const feed: Omit<FeedItem, "creator"> & { creator: string } = {
+      creator,
+      desc,
+      imageUrl,
+      isPrivate: isPrivate === "true",
+      location,
+      storageId,
+      uploadTime,
     }
 
-    await updateDoc(firestoreAllRef, {
+    updateDoc(feedRef, {
       feed: arrayRemove(feed),
     }).catch((error) => {
       res.status(500).json(error.code)
     })
 
-    await updateDoc(firestorePersonalRef, {
-      feed: arrayRemove(feed),
+    updateDoc(userRef, {
+      likeFeedIds: arrayRemove(storageId),
     }).catch((error) => {
       res.status(500).json(error.code)
     })
 
-    res.status(200).json("Success")
+    deleteDoc(commentRef).catch((error) => {
+      res.status(500).json(error.code)
+    })
   }
 }