From bdd09ed600cb96f68f3e286898d930f6900718b0 Mon Sep 17 00:00:00 2001 From: kyw0716 Date: Mon, 7 Nov 2022 22:56:59 +0900 Subject: [PATCH 01/28] =?UTF-8?q?refactor:=20=EB=A9=94=EC=9D=B8=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=ED=94=BC=EB=93=9C=20=EC=A0=95?= =?UTF-8?q?=EB=B3=B4=20=EB=B0=9B=EC=95=84=EC=98=A4=EB=8A=94=20=EB=B0=A9?= =?UTF-8?q?=EC=8B=9D=20=EB=B3=80=EA=B2=BD=20onSnapShot=20=3D>=20next.js=20?= =?UTF-8?q?api?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- firebase-practice/pages/index.tsx | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/firebase-practice/pages/index.tsx b/firebase-practice/pages/index.tsx index 84e904a..5126a13 100644 --- a/firebase-practice/pages/index.tsx +++ b/firebase-practice/pages/index.tsx @@ -17,10 +17,10 @@ import { useRouter } from "next/router" import CommentModal from "@share/Modal/comment/CommentModal" import UserListModal from "@share/Modal/userList/UserListModal" import Loading from "@share/Loading/Loading" +import axios from "axios" const Home: NextPage = () => { const router = useRouter() - const [dataFromFirestore, setDataFromFirestore] = useState() const [feedData, setFeedData] = useState() const currentUserData = useRecoilValue(userDataState) @@ -31,16 +31,13 @@ const Home: NextPage = () => { const likerListData = useRecoilValue(userListState) useEffect(() => { - const AllFeedRef = doc(DBService, "mainPage", `userFeedDataAll`) - onSnapshot(AllFeedRef, { includeMetadataChanges: true }, (doc) => { - if (doc) setDataFromFirestore(doc.data()) + axios({ + method: "GET", + url: `/api/feed`, + }).then((response) => { + setFeedData(response.data) }) }, []) - useEffect(() => { - if (dataFromFirestore !== undefined) { - setFeedData(dataFromFirestore.feed) - } - }, [dataFromFirestore]) return ( From 820cdd87a39c74d81a7e13d91c7f6ede6b1a35af Mon Sep 17 00:00:00 2001 From: kyw0716 Date: Sun, 13 Nov 2022 21:57:37 +0900 Subject: [PATCH 02/28] =?UTF-8?q?feat:=20=ED=98=84=EC=9E=AC=20=EC=9C=A0?= =?UTF-8?q?=EC=A0=80=20=EC=A0=95=EB=B3=B4=20=EB=B0=9B=EC=95=84=EC=98=A4?= =?UTF-8?q?=EB=8A=94=20=EB=B0=A9=EC=8B=9D=20=EB=B3=80=EA=B2=BD=20onSnapSho?= =?UTF-8?q?t=20=3D>=20next=20api?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- firebase-practice/pages/_app.tsx | 8 ++++++-- firebase-practice/pages/index.tsx | 2 -- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/firebase-practice/pages/_app.tsx b/firebase-practice/pages/_app.tsx index a81d718..97efa6d 100644 --- a/firebase-practice/pages/_app.tsx +++ b/firebase-practice/pages/_app.tsx @@ -8,6 +8,7 @@ import { RecoilRoot, useSetRecoilState } from "recoil" import { darkModeState, userDataState } from "@share/recoil/recoilList" import { UserData } from "backend/dto" import { doc, onSnapshot } from "firebase/firestore" +import axios from "axios" const SetDarkMode = () => { const setDarkRecoil = useSetRecoilState(darkModeState) @@ -22,8 +23,11 @@ const SetCurrnentUser = () => { useEffect(() => { onAuthStateChanged(authService, (user) => { if (user) { - onSnapshot(doc(DBService, "users", `${user.uid}`), (response) => { - setCurrentUser(response.data() as UserData) + axios({ + method: "", + url: `/api/profile?userId=${user.uid}`, + }).then((response) => { + setCurrentUser(response.data) }) } }) diff --git a/firebase-practice/pages/index.tsx b/firebase-practice/pages/index.tsx index 5126a13..3ea7292 100644 --- a/firebase-practice/pages/index.tsx +++ b/firebase-practice/pages/index.tsx @@ -1,7 +1,5 @@ import type { NextPage } from "next" import { useEffect, useState } from "react" -import { DBService } from "@FireBase" -import { doc, DocumentData, onSnapshot } from "firebase/firestore" import { FlexBox, Margin } from "ui" import FeedList from "@share/Feed/mainPage/FeedList" import Layout from "components/layout" From 720fb9ab759c76690b932cd0c9761e6b0d9f830a Mon Sep 17 00:00:00 2001 From: kyw0716 Date: Sat, 19 Nov 2022 23:34:23 +0900 Subject: [PATCH 03/28] =?UTF-8?q?refactor:=20=EC=A2=8B=EC=95=84=EC=9A=94?= =?UTF-8?q?=20=EB=B0=9B=EC=95=84=EC=98=A4=EB=8A=94=20=EB=B0=A9=EC=8B=9D=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD=20onSnapShot=20=3D>=20next=20api?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- firebase-practice/pages/api/like.ts | 1 - .../share/Feed/mainPage/FeedCard/LikeCommentInfo.tsx | 8 ++++++-- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/firebase-practice/pages/api/like.ts b/firebase-practice/pages/api/like.ts index 3d168b2..1048a62 100644 --- a/firebase-practice/pages/api/like.ts +++ b/firebase-practice/pages/api/like.ts @@ -31,7 +31,6 @@ export default async function getLike( ) { if (req.method === "GET") { const storageId = req.query?.storageId - console.log(storageId) const getLikeRef = doc(DBService, "like", `${storageId}`) const docSnapShot = await getDoc(getLikeRef) diff --git a/firebase-practice/src/components/share/Feed/mainPage/FeedCard/LikeCommentInfo.tsx b/firebase-practice/src/components/share/Feed/mainPage/FeedCard/LikeCommentInfo.tsx index 42556a2..aff3bc0 100644 --- a/firebase-practice/src/components/share/Feed/mainPage/FeedCard/LikeCommentInfo.tsx +++ b/firebase-practice/src/components/share/Feed/mainPage/FeedCard/LikeCommentInfo.tsx @@ -5,6 +5,7 @@ import { userDataState, userListState, } from "@share/recoil/recoilList" +import axios from "axios" import { FeedData } from "backend/dto" import { doc, onSnapshot } from "firebase/firestore" import React, { SetStateAction, useEffect, useState } from "react" @@ -44,8 +45,11 @@ export default function LikeCommentInfo({ onSnapshot(doc(DBService, "Comments", `${feedData.storageId}`), (doc) => { setCommentData(doc.data()?.AllComments) }) - onSnapshot(doc(DBService, "like", `${feedData.storageId}`), (doc) => { - setLikerList(doc.data()?.likerList) + axios({ + method: "GET", + url: `/api/like?storageId=${feedData.storageId}`, + }).then((res) => { + setLikerList(res.data) }) }, [feedData]) From b7094313f9079631de370b76b6db5f55e0738661 Mon Sep 17 00:00:00 2001 From: kyw0716 Date: Sun, 20 Nov 2022 21:07:16 +0900 Subject: [PATCH 04/28] =?UTF-8?q?refactor:=20=EC=BD=94=EB=A9=98=ED=8A=B8?= =?UTF-8?q?=20=EC=A0=95=EB=B3=B4=20=EB=B0=9B=EC=95=84=EC=98=A4=EB=8A=94=20?= =?UTF-8?q?=EB=B0=A9=EC=8B=9D=20=EB=B3=80=EA=B2=BD=20onSnapShot=20=3D>=20n?= =?UTF-8?q?ext=20api?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- firebase-practice/pages/api/comment.ts | 1 - .../share/Feed/mainPage/FeedCard/LikeCommentInfo.tsx | 12 +++++++++--- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/firebase-practice/pages/api/comment.ts b/firebase-practice/pages/api/comment.ts index fa898f9..b4554d7 100644 --- a/firebase-practice/pages/api/comment.ts +++ b/firebase-practice/pages/api/comment.ts @@ -38,7 +38,6 @@ 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) diff --git a/firebase-practice/src/components/share/Feed/mainPage/FeedCard/LikeCommentInfo.tsx b/firebase-practice/src/components/share/Feed/mainPage/FeedCard/LikeCommentInfo.tsx index aff3bc0..30b6742 100644 --- a/firebase-practice/src/components/share/Feed/mainPage/FeedCard/LikeCommentInfo.tsx +++ b/firebase-practice/src/components/share/Feed/mainPage/FeedCard/LikeCommentInfo.tsx @@ -6,7 +6,7 @@ import { userListState, } from "@share/recoil/recoilList" import axios from "axios" -import { FeedData } from "backend/dto" +import { Comment, FeedData } from "backend/dto" import { doc, onSnapshot } from "firebase/firestore" import React, { SetStateAction, useEffect, useState } from "react" import { useRecoilValue, useSetRecoilState } from "recoil" @@ -42,9 +42,15 @@ export default function LikeCommentInfo({ const [isCurrentUserLike, setIsCurrentUserLike] = useState(false) useEffect(() => { - onSnapshot(doc(DBService, "Comments", `${feedData.storageId}`), (doc) => { - setCommentData(doc.data()?.AllComments) + axios({ + method: "GET", + url: `/api/comment?commentId=${feedData.storageId}`, }) + .then((res) => { + setCommentData(res.data) + }) + .catch((error) => console.log(error)) + axios({ method: "GET", url: `/api/like?storageId=${feedData.storageId}`, From 215c2312b7ebbd8fd3d859ff1640f605775f9077 Mon Sep 17 00:00:00 2001 From: kyw0716 Date: Sun, 20 Nov 2022 21:11:47 +0900 Subject: [PATCH 05/28] =?UTF-8?q?fix:=20=EC=BD=94=EB=A9=98=ED=8A=B8=20?= =?UTF-8?q?=EB=B0=B0=EC=97=B4=EC=9D=B4=20=EC=97=86=EC=9D=84=20=EB=95=8C=20?= =?UTF-8?q?=EB=B0=9C=EC=83=9D=ED=95=98=EB=8A=94=20=EC=97=90=EB=9F=AC=20?= =?UTF-8?q?=EC=B2=98=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- firebase-practice/pages/api/comment.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/firebase-practice/pages/api/comment.ts b/firebase-practice/pages/api/comment.ts index b4554d7..7694bad 100644 --- a/firebase-practice/pages/api/comment.ts +++ b/firebase-practice/pages/api/comment.ts @@ -41,11 +41,13 @@ export default async function getComment( const getCommentRef = doc(DBService, "Comments", `${commentId}`) const docSnapShot = await getDoc(getCommentRef) + console.log(docSnapShot.data()) + 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") { From 570c873e3ede4898d2dc1b18cd464f1da33285a1 Mon Sep 17 00:00:00 2001 From: kyw0716 Date: Mon, 21 Nov 2022 23:10:17 +0900 Subject: [PATCH 06/28] =?UTF-8?q?refactor:=20[myPage]=20=ED=94=BC=EB=93=9C?= =?UTF-8?q?=20=EC=BD=94=EB=A9=98=ED=8A=B8,=20=EC=A2=8B=EC=95=84=EC=9A=94?= =?UTF-8?q?=20=EB=B0=9B=EC=95=84=EC=98=A4=EB=8A=94=20=EB=B0=A9=EC=8B=9D=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD=20onSnapShot=20=3D>=20next=20api?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- firebase-practice/pages/api/comment.ts | 2 -- .../mypage/FeedSortingCard/LikeCommentInfo.tsx | 18 ++++++++++++++---- 2 files changed, 14 insertions(+), 6 deletions(-) diff --git a/firebase-practice/pages/api/comment.ts b/firebase-practice/pages/api/comment.ts index 7694bad..f74099b 100644 --- a/firebase-practice/pages/api/comment.ts +++ b/firebase-practice/pages/api/comment.ts @@ -41,8 +41,6 @@ export default async function getComment( const getCommentRef = doc(DBService, "Comments", `${commentId}`) const docSnapShot = await getDoc(getCommentRef) - console.log(docSnapShot.data()) - if (docSnapShot.exists()) { const data = docSnapShot.data()?.AllComments res.status(200).json(data as Comment[]) diff --git a/firebase-practice/src/components/share/Feed/mypage/FeedSortingCard/LikeCommentInfo.tsx b/firebase-practice/src/components/share/Feed/mypage/FeedSortingCard/LikeCommentInfo.tsx index 15d93f1..d0a4919 100644 --- a/firebase-practice/src/components/share/Feed/mypage/FeedSortingCard/LikeCommentInfo.tsx +++ b/firebase-practice/src/components/share/Feed/mypage/FeedSortingCard/LikeCommentInfo.tsx @@ -5,6 +5,7 @@ import { userDataState, userListState, } from "@share/recoil/recoilList" +import axios from "axios" import { FeedData } from "backend/dto" import { doc, onSnapshot } from "firebase/firestore" import React, { SetStateAction, useCallback, useEffect, useState } from "react" @@ -39,11 +40,20 @@ export default function LikeCommentInfo({ const isDarkMode = useRecoilValue(darkModeState) useEffect(() => { - onSnapshot(doc(DBService, "Comments", `${feedData.storageId}`), (doc) => { - setCommentData(doc.data()?.AllComments) + axios({ + method: "GET", + url: `/api/comment?commentId=${feedData.storageId}`, }) - onSnapshot(doc(DBService, "like", `${feedData.storageId}`), (doc) => { - setLikerList(doc.data()?.likerList) + .then((res) => { + setCommentData(res.data) + }) + .catch((error) => console.log(error)) + + axios({ + method: "GET", + url: `/api/like?storageId=${feedData.storageId}`, + }).then((res) => { + setLikerList(res.data) }) }, []) From 07c4d8599893ea0d654b895eb11c5912d27d2474 Mon Sep 17 00:00:00 2001 From: kyw0716 Date: Wed, 23 Nov 2022 13:53:24 +0900 Subject: [PATCH 07/28] =?UTF-8?q?refactor:=20=EB=8D=B0=EC=9D=B4=ED=84=B0?= =?UTF-8?q?=20=EB=B0=9B=EC=95=84=EC=98=A4=EB=8A=94=20=EB=B0=A9=EC=8B=9D=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD=20onSnapShot=20=3D>=20next=20api?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- firebase-practice/pages/_app.tsx | 1 - firebase-practice/pages/api/profile.ts | 1 - firebase-practice/pages/api/requireAPI.md | 1 + firebase-practice/pages/profile/[id].tsx | 19 ++++++++++-------- .../followListAtMainPage/FollowCard.tsx | 10 ++++++---- .../mainPage/FeedCard/LikeCommentInfo.tsx | 2 -- .../share/Feed/mainPage/FeedCard/index.tsx | 10 ++++++---- .../FeedSortingCard/LikeCommentInfo.tsx | 2 -- .../Feed/mypage/FeedSortingCard/index.tsx | 12 ++++++----- .../share/Feed/profilepage/FeedGridCard.tsx | 18 +++++++++++------ .../share/Modal/comment/CommentList.tsx | 18 +++++++++++------ .../share/Modal/comment/CommentWrapper.tsx | 19 +++++++----------- .../components/share/Modal/comment/Icons.tsx | 20 +++++++++++++------ 13 files changed, 76 insertions(+), 57 deletions(-) diff --git a/firebase-practice/pages/_app.tsx b/firebase-practice/pages/_app.tsx index 97efa6d..b88f6ba 100644 --- a/firebase-practice/pages/_app.tsx +++ b/firebase-practice/pages/_app.tsx @@ -7,7 +7,6 @@ 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 axios from "axios" const SetDarkMode = () => { diff --git a/firebase-practice/pages/api/profile.ts b/firebase-practice/pages/api/profile.ts index a86ae29..5e1500b 100644 --- a/firebase-practice/pages/api/profile.ts +++ b/firebase-practice/pages/api/profile.ts @@ -20,7 +20,6 @@ export default async function profile( ) { if (req.method === "GET") { const userId = req.query?.userId - console.log(userId) const getProfileRef = doc(DBService, "users", `${userId}`) const docSnapShot = await getDoc(getProfileRef) diff --git a/firebase-practice/pages/api/requireAPI.md b/firebase-practice/pages/api/requireAPI.md index fb1ec6a..dc9895d 100644 --- a/firebase-practice/pages/api/requireAPI.md +++ b/firebase-practice/pages/api/requireAPI.md @@ -11,6 +11,7 @@ 7. 코멘트 등록/삭제하기 (o) 8. 좋아요 등록/취소하기 (o) 9. 피드 등록/수정/삭제하기 (등록: o, 삭제: o, 수정: o) +10. DM 정보 불러오기, 등록하기
diff --git a/firebase-practice/pages/profile/[id].tsx b/firebase-practice/pages/profile/[id].tsx index 42aef5b..dbafd16 100644 --- a/firebase-practice/pages/profile/[id].tsx +++ b/firebase-practice/pages/profile/[id].tsx @@ -1,6 +1,5 @@ import { useEffect, useState } from "react" -import { DBService } from "@FireBase" -import { doc, DocumentData, onSnapshot } from "firebase/firestore" +import { DocumentData } from "firebase/firestore" import { GetServerSideProps } from "next" import ProfileHeader from "@feature/profile/customerProfile" import styled from "styled-components" @@ -13,6 +12,7 @@ import { useRecoilValue } from "recoil" import { feedDataState, userListState } from "@share/recoil/recoilList" import CommentModal from "@share/Modal/comment/CommentModal" import UserListModal from "@share/Modal/userList/UserListModal" +import axios from "axios" const Style = { Wrapper: styled.div` @@ -40,14 +40,17 @@ export default function Profile({ userId }: Props) { setIsUserListModalOpen(false) if (router.query !== undefined && router.query.id !== userId) router.push(`/profile/${router.query.id}`) - const userDataRef = doc(DBService, "users", `${userId}`) - onSnapshot(userDataRef, { includeMetadataChanges: true }, (doc) => { - if (doc) { - setUserData(doc.data()) - } - }) }, [router.query, userId]) + useEffect(() => { + axios({ + method: "GET", + url: `/api/profile?userId=${userId}`, + }).then((response) => { + setUserData(response.data) + }) + }, [userId]) + useEffect(() => { setFeedData(userData?.feed) }, [userData, router.query]) diff --git a/firebase-practice/src/components/feature/followListAtMainPage/FollowCard.tsx b/firebase-practice/src/components/feature/followListAtMainPage/FollowCard.tsx index b267883..dcfb780 100644 --- a/firebase-practice/src/components/feature/followListAtMainPage/FollowCard.tsx +++ b/firebase-practice/src/components/feature/followListAtMainPage/FollowCard.tsx @@ -1,7 +1,5 @@ -import { DBService } from "@FireBase" import { darkModeState, userDataState } from "@share/recoil/recoilList" import { UserData } from "backend/dto" -import { doc, onSnapshot } from "firebase/firestore" import Image from "next/image" import { useRouter } from "next/router" import { useEffect, useState } from "react" @@ -10,6 +8,7 @@ import styled from "styled-components" import { CustomH6Light, FlexBox, Margin } from "ui" import { ProfileIcon } from "icons" import Link from "next/link" +import axios from "axios" type Props = { userId: string @@ -30,8 +29,11 @@ export default function FollowCard({ userId }: Props) { const currentUser = useRecoilValue(userDataState) const isDarkMode = useRecoilValue(darkModeState) useEffect(() => { - onSnapshot(doc(DBService, "users", userId), (data) => { - if (data) setUserData(data.data() as UserData) + axios({ + method: "GET", + url: `/api/profile?userId=${userId}`, + }).then((response) => { + setUserData(response.data) }) }, []) return ( diff --git a/firebase-practice/src/components/share/Feed/mainPage/FeedCard/LikeCommentInfo.tsx b/firebase-practice/src/components/share/Feed/mainPage/FeedCard/LikeCommentInfo.tsx index 30b6742..ddc34a1 100644 --- a/firebase-practice/src/components/share/Feed/mainPage/FeedCard/LikeCommentInfo.tsx +++ b/firebase-practice/src/components/share/Feed/mainPage/FeedCard/LikeCommentInfo.tsx @@ -1,4 +1,3 @@ -import { DBService } from "@FireBase" import { darkModeState, feedDataState, @@ -7,7 +6,6 @@ import { } from "@share/recoil/recoilList" import axios from "axios" import { Comment, FeedData } from "backend/dto" -import { doc, onSnapshot } from "firebase/firestore" import React, { SetStateAction, useEffect, useState } from "react" import { useRecoilValue, useSetRecoilState } from "recoil" import { diff --git a/firebase-practice/src/components/share/Feed/mainPage/FeedCard/index.tsx b/firebase-practice/src/components/share/Feed/mainPage/FeedCard/index.tsx index 4a04702..67e479c 100644 --- a/firebase-practice/src/components/share/Feed/mainPage/FeedCard/index.tsx +++ b/firebase-practice/src/components/share/Feed/mainPage/FeedCard/index.tsx @@ -1,7 +1,5 @@ -import { DBService } from "@FireBase" import { darkModeState, userDataState } from "@share/recoil/recoilList" import { FeedData, UserData } from "backend/dto" -import { doc, onSnapshot } from "firebase/firestore" import Image from "next/image" import { useRouter } from "next/router" import { SetStateAction, useEffect, useState } from "react" @@ -12,6 +10,7 @@ import { ProfileIcon } from "icons" import Desc from "./Desc" import LikeCommentInfo from "./LikeCommentInfo" import Link from "next/link" +import axios from "axios" type Props = { feedData: FeedData @@ -80,8 +79,11 @@ export default function FeedCard({ const isDarkMode = useRecoilValue(darkModeState) useEffect(() => { - onSnapshot(doc(DBService, "users", `${feedData.creator}`), (data) => { - setFeedCreatorData(data.data() as UserData) + axios({ + method: "GET", + url: `/api/profile?userId=${feedData.creator}`, + }).then((response) => { + setFeedCreatorData(response.data) }) }, [feedData]) diff --git a/firebase-practice/src/components/share/Feed/mypage/FeedSortingCard/LikeCommentInfo.tsx b/firebase-practice/src/components/share/Feed/mypage/FeedSortingCard/LikeCommentInfo.tsx index d0a4919..5d2614e 100644 --- a/firebase-practice/src/components/share/Feed/mypage/FeedSortingCard/LikeCommentInfo.tsx +++ b/firebase-practice/src/components/share/Feed/mypage/FeedSortingCard/LikeCommentInfo.tsx @@ -1,4 +1,3 @@ -import { DBService } from "@FireBase" import { darkModeState, feedDataState, @@ -7,7 +6,6 @@ import { } from "@share/recoil/recoilList" import axios from "axios" import { FeedData } from "backend/dto" -import { doc, onSnapshot } from "firebase/firestore" import React, { SetStateAction, useCallback, useEffect, useState } from "react" import { useRecoilValue, useSetRecoilState } from "recoil" import { diff --git a/firebase-practice/src/components/share/Feed/mypage/FeedSortingCard/index.tsx b/firebase-practice/src/components/share/Feed/mypage/FeedSortingCard/index.tsx index 7717507..a94f2e8 100644 --- a/firebase-practice/src/components/share/Feed/mypage/FeedSortingCard/index.tsx +++ b/firebase-practice/src/components/share/Feed/mypage/FeedSortingCard/index.tsx @@ -1,7 +1,6 @@ -import { DBService } from "@FireBase" import { darkModeState, userDataState } from "@share/recoil/recoilList" -import { FeedData, UserInfo } from "backend/dto" -import { doc, onSnapshot } from "firebase/firestore" +import axios from "axios" +import { FeedData, UserData, UserInfo } from "backend/dto" import { ProfileIcon } from "icons" import Image from "next/image" import { SetStateAction, useEffect, useState } from "react" @@ -79,8 +78,11 @@ export default function FeedSortingCard({ const isDarkMode = useRecoilValue(darkModeState) useEffect(() => { - onSnapshot(doc(DBService, "users", `${feedData.creator}`), (doc) => { - setCreatorInfo(doc.data()?.info) + axios({ + method: "GET", + url: `/api/profile?userId=${feedData.creator}`, + }).then((response) => { + setCreatorInfo(response.data?.info) }) }, [feedData]) diff --git a/firebase-practice/src/components/share/Feed/profilepage/FeedGridCard.tsx b/firebase-practice/src/components/share/Feed/profilepage/FeedGridCard.tsx index a81934c..93e38e5 100644 --- a/firebase-practice/src/components/share/Feed/profilepage/FeedGridCard.tsx +++ b/firebase-practice/src/components/share/Feed/profilepage/FeedGridCard.tsx @@ -1,7 +1,6 @@ -import { DBService } from "@FireBase" import { feedDataState } from "@share/recoil/recoilList" +import axios from "axios" import { Comment, FeedData } from "backend/dto" -import { doc, onSnapshot } from "firebase/firestore" import { SetStateAction, useEffect, useState } from "react" import { useSetRecoilState } from "recoil" import styled from "styled-components" @@ -54,11 +53,18 @@ export default function FeedGridCard({ const setSelectedFeedData = useSetRecoilState(feedDataState) useEffect(() => { - onSnapshot(doc(DBService, "Comments", feedData.storageId), (data) => { - if (data) setCommentData(data.data()?.AllComments as Comment[]) + axios({ + method: "GET", + url: `/api/comment?commentId=${feedData.storageId}`, + }).then((response) => { + setCommentData(response.data) }) - onSnapshot(doc(DBService, "like", feedData.storageId), (data) => { - if (data) setLikeData(data.data()?.likerList as string[]) + + axios({ + method: "GET", + url: `/api/like?storageId=${feedData.storageId}`, + }).then((response) => { + setLikeData(response.data) }) }, []) diff --git a/firebase-practice/src/components/share/Modal/comment/CommentList.tsx b/firebase-practice/src/components/share/Modal/comment/CommentList.tsx index 9e0d1e5..0984990 100644 --- a/firebase-practice/src/components/share/Modal/comment/CommentList.tsx +++ b/firebase-practice/src/components/share/Modal/comment/CommentList.tsx @@ -1,6 +1,4 @@ -import { DBService } from "@FireBase" import { FeedData, UserData, Comment } from "backend/dto" -import { doc, onSnapshot } from "firebase/firestore" import Image from "next/image" import { useRouter } from "next/router" import { useEffect, useState } from "react" @@ -12,6 +10,7 @@ import { useRecoilValue } from "recoil" import { darkModeState, userDataState } from "@share/recoil/recoilList" import { ProfileIcon } from "icons" import Link from "next/link" +import axios from "axios" type Props = { feedData: FeedData @@ -67,11 +66,18 @@ export default function CommentList({ feedData, commentAreaRef }: Props) { const isDarkMode = useRecoilValue(darkModeState) useEffect(() => { - onSnapshot(doc(DBService, "users", `${feedData.creator}`), (data) => { - if (data) setUserData(data.data() as UserData) + axios({ + method: "GET", + url: `/api/profile?userId=${feedData.creator}`, + }).then((response) => { + setUserData(response.data) }) - onSnapshot(doc(DBService, "Comments", `${feedData.storageId}`), (data) => { - if (data) setCommentData(data.data()?.AllComments) + + axios({ + method: "GET", + url: `/api/comment?commentId=${feedData.storageId}`, + }).then((response) => { + setCommentData(response.data) }) }, []) diff --git a/firebase-practice/src/components/share/Modal/comment/CommentWrapper.tsx b/firebase-practice/src/components/share/Modal/comment/CommentWrapper.tsx index 2fe2901..e05cc2d 100644 --- a/firebase-practice/src/components/share/Modal/comment/CommentWrapper.tsx +++ b/firebase-practice/src/components/share/Modal/comment/CommentWrapper.tsx @@ -1,13 +1,8 @@ import { authService, DBService } from "@FireBase" import { darkModeState, userDataState } from "@share/recoil/recoilList" +import axios from "axios" import { Comment, UserData } from "backend/dto" -import { - arrayRemove, - arrayUnion, - doc, - onSnapshot, - updateDoc, -} from "firebase/firestore" +import { arrayRemove, arrayUnion, doc, updateDoc } from "firebase/firestore" import { ProfileIcon } from "icons" import Image from "next/image" import Link from "next/link" @@ -64,11 +59,11 @@ export default function CommentWrapper({ commentData, storageId }: Props) { const isDarkMode = useRecoilValue(darkModeState) useEffect(() => { - const userInfoRef = doc(DBService, "users", commentData.userId) - onSnapshot(userInfoRef, (docData) => { - if (docData) { - setUserData(docData.data() as UserData) - } + axios({ + method: "GET", + url: `/api/profile?userId=${commentData.userId}`, + }).then((response) => { + setUserData(response.data) }) }, []) diff --git a/firebase-practice/src/components/share/Modal/comment/Icons.tsx b/firebase-practice/src/components/share/Modal/comment/Icons.tsx index 6628733..47b5516 100644 --- a/firebase-practice/src/components/share/Modal/comment/Icons.tsx +++ b/firebase-practice/src/components/share/Modal/comment/Icons.tsx @@ -1,6 +1,7 @@ -import { authService, DBService } from "@FireBase" +import { authService } from "@FireBase" import { darkModeState } from "@share/recoil/recoilList" -import { doc, onSnapshot } from "firebase/firestore" +import axios from "axios" +import { Comment } from "backend/dto" import { useEffect, useState } from "react" import { useRecoilValue } from "recoil" import styled from "styled-components" @@ -33,11 +34,18 @@ export default function Icons({ storageId, inputRef }: Props) { const [isCurrentUserLiked, setIsCurrentUserLiked] = useState(false) useEffect(() => { - onSnapshot(doc(DBService, "like", `${storageId}`), (data) => { - if (data) setLikerList(data.data()?.likerList) + axios({ + method: "GET", + url: `/api/like?storageId=${storageId}`, + }).then((response) => { + setLikerList(response.data) }) - onSnapshot(doc(DBService, "Comments", `${storageId}`), (data) => { - if (data) setCommentData(data.data()?.AllComments) + + axios({ + method: "GET", + url: `/api/like?storageId=${storageId}`, + }).then((response) => { + setCommentData(response.data) }) }, [storageId]) From f838c82682b78e10056dace533f43c24ceac3f52 Mon Sep 17 00:00:00 2001 From: kyw0716 Date: Thu, 24 Nov 2022 16:10:00 +0900 Subject: [PATCH 08/28] =?UTF-8?q?feat:=20[myPage]=20=ED=94=BC=EB=93=9C=20?= =?UTF-8?q?=EB=A1=9C=EB=94=A9=20=EC=8A=A4=EC=BC=88=EB=A0=88=ED=86=A4=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- firebase-practice/pages/mypage.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/firebase-practice/pages/mypage.tsx b/firebase-practice/pages/mypage.tsx index 0d1c9e0..9639323 100644 --- a/firebase-practice/pages/mypage.tsx +++ b/firebase-practice/pages/mypage.tsx @@ -14,6 +14,8 @@ import { import CommentModal from "@share/Modal/comment/CommentModal" import FeedUploadModal from "@share/Modal/feed/FeedUploadModal" import UserListModal from "@share/Modal/userList/UserListModal" +import { FlexBox } from "ui" +import Loading from "@share/Loading/Loading" const Style = { Wrapper: styled.div` @@ -78,13 +80,17 @@ export default function Profile() { /> - {feedData !== undefined && ( + {feedData !== undefined ? ( + ) : ( + + + )} From 10fb75dc8df21dea9bc72fc55efb0fb03faeadab Mon Sep 17 00:00:00 2001 From: kyw0716 Date: Thu, 24 Nov 2022 16:10:21 +0900 Subject: [PATCH 09/28] =?UTF-8?q?feat:=20[commentModal]=20=EB=A1=9C?= =?UTF-8?q?=EB=94=A9=20=EC=8A=A4=EC=BC=88=EB=A0=88=ED=86=A4=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../share/Modal/comment/CommentList.tsx | 138 ++++++++++-------- .../share/Modal/comment/CommentModal.tsx | 13 +- .../share/Modal/comment/CommentWrapper.tsx | 76 ++++++---- 3 files changed, 137 insertions(+), 90 deletions(-) diff --git a/firebase-practice/src/components/share/Modal/comment/CommentList.tsx b/firebase-practice/src/components/share/Modal/comment/CommentList.tsx index 0984990..a40bdef 100644 --- a/firebase-practice/src/components/share/Modal/comment/CommentList.tsx +++ b/firebase-practice/src/components/share/Modal/comment/CommentList.tsx @@ -11,6 +11,7 @@ import { darkModeState, userDataState } from "@share/recoil/recoilList" import { ProfileIcon } from "icons" import Link from "next/link" import axios from "axios" +import Loading from "@share/Loading/Loading" type Props = { feedData: FeedData @@ -85,37 +86,47 @@ export default function CommentList({ feedData, commentAreaRef }: Props) { <> - {userData?.info.profileImage ? ( - - - + ) : ( + <> + {userData.info.profileImage !== null ? ( + + + profile + + + ) : ( + - - - ) : ( - + )} + )} - - {userData?.info.name} - + {userData?.info.name === undefined ? ( + + ) : ( + + {userData?.info.name} + + )} {feedData.location} @@ -123,40 +134,47 @@ export default function CommentList({ feedData, commentAreaRef }: Props) { - {userData?.info.profileImage ? ( - - - + ) : ( + <> + {userData.info.profileImage !== null ? ( + + + profile { + if ( + userData?.info.userId === + currentUserData.info.userId + ) { + router.push(`/mypage`) + return + } + router.push(`/profile/${userData?.info.userId}`) + }} + style={{ borderRadius: "32px", cursor: "pointer" }} + priority={true} + /> + + + ) : ( + { - if ( - userData?.info.userId === currentUserData.info.userId - ) { - router.push(`/mypage`) - return - } - router.push(`/profile/${userData?.info.userId}`) - }} - style={{ borderRadius: "32px", cursor: "pointer" }} - priority={true} + userId={userData?.info.userId} /> - - - ) : ( - + )} + )} @@ -166,9 +184,13 @@ export default function CommentList({ feedData, commentAreaRef }: Props) { style={{ paddingRight: "20px", color: isDarkMode ? "white" : "" }} > - - {userData?.info.name} - + {userData?.info.name === undefined ? ( + + ) : ( + + {userData?.info.name} + + )} {feedData.desc} diff --git a/firebase-practice/src/components/share/Modal/comment/CommentModal.tsx b/firebase-practice/src/components/share/Modal/comment/CommentModal.tsx index 7d75c41..7776596 100644 --- a/firebase-practice/src/components/share/Modal/comment/CommentModal.tsx +++ b/firebase-practice/src/components/share/Modal/comment/CommentModal.tsx @@ -1,11 +1,12 @@ import { FeedData } from "backend/dto" -import React, { SetStateAction, useRef } from "react" +import React, { SetStateAction, useEffect, useRef } from "react" import styled from "styled-components" import YoungstagramModal from "../YoungstagramModal" import CommentInput from "./Input" import useWindowSize from "lib/useWindowSize" import CommentList from "./CommentList" import Icons from "./Icons" +import Loading from "@share/Loading/Loading" type Props = { isOpen: boolean @@ -51,6 +52,10 @@ export default function CommentModal({ isOpen, setIsOpen, feedData }: Props) { const commentAreaRef = useRef(null) const windowSize = useWindowSize() + useEffect(() => { + console.log("이미지: ", feedData.imageUrl) + }, [feedData]) + return ( - + {feedData.imageUrl ? ( + + ) : ( + + )} diff --git a/firebase-practice/src/components/share/Modal/comment/CommentWrapper.tsx b/firebase-practice/src/components/share/Modal/comment/CommentWrapper.tsx index e05cc2d..5894a32 100644 --- a/firebase-practice/src/components/share/Modal/comment/CommentWrapper.tsx +++ b/firebase-practice/src/components/share/Modal/comment/CommentWrapper.tsx @@ -1,4 +1,5 @@ import { authService, DBService } from "@FireBase" +import Loading from "@share/Loading/Loading" import { darkModeState, userDataState } from "@share/recoil/recoilList" import axios from "axios" import { Comment, UserData } from "backend/dto" @@ -99,39 +100,49 @@ export default function CommentWrapper({ commentData, storageId }: Props) { <> - {userData?.info.profileImage ? ( - - - + ) : ( + <> + {userData.info.profileImage !== null ? ( + + + profile + + + ) : ( + - - - ) : ( - + )} + )} - {`${userData?.info.name}`} + {userData?.info.name ? ( + {`${userData?.info.name}`} + ) : ( + + )} {isModifyMode ? ( @@ -167,12 +178,17 @@ export default function CommentWrapper({ commentData, storageId }: Props) { <> {isShowAllComment ? ( <> - - {commentData.comment} - + {commentData.comment ? ( + + {commentData.comment} + + ) : ( + + )} + Date: Fri, 25 Nov 2022 17:25:31 +0900 Subject: [PATCH 10/28] =?UTF-8?q?feat:=20[profilePage]=20=ED=94=BC?= =?UTF-8?q?=EB=93=9C=20=EB=A1=9C=EB=94=A9=20=EC=8A=A4=EC=BC=88=EB=A0=88?= =?UTF-8?q?=ED=86=A4=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- firebase-practice/pages/profile/[id].tsx | 5 +- .../feature/profile/mypage/PCHeader.tsx | 102 +++++++++--------- .../src/components/share/Loading/Loading.tsx | 10 +- .../share/Loading/ProfileLoadingGrid.tsx | 37 +++++++ .../share/Modal/comment/CommentModal.tsx | 4 - 5 files changed, 103 insertions(+), 55 deletions(-) create mode 100644 firebase-practice/src/components/share/Loading/ProfileLoadingGrid.tsx diff --git a/firebase-practice/pages/profile/[id].tsx b/firebase-practice/pages/profile/[id].tsx index dbafd16..25563f5 100644 --- a/firebase-practice/pages/profile/[id].tsx +++ b/firebase-practice/pages/profile/[id].tsx @@ -13,6 +13,7 @@ import { feedDataState, userListState } from "@share/recoil/recoilList" import CommentModal from "@share/Modal/comment/CommentModal" import UserListModal from "@share/Modal/userList/UserListModal" import axios from "axios" +import ProfileLoadingGrid from "@share/Loading/ProfileLoadingGrid" const Style = { Wrapper: styled.div` @@ -74,11 +75,13 @@ export default function Profile({ userId }: Props) { userData={userData as UserData} setIsUserListModalOpen={setIsUserListModalOpen} /> - {feedData !== undefined && ( + {feedData !== undefined ? ( + ) : ( + )} diff --git a/firebase-practice/src/components/feature/profile/mypage/PCHeader.tsx b/firebase-practice/src/components/feature/profile/mypage/PCHeader.tsx index ac1ce31..d23e7e1 100644 --- a/firebase-practice/src/components/feature/profile/mypage/PCHeader.tsx +++ b/firebase-practice/src/components/feature/profile/mypage/PCHeader.tsx @@ -132,17 +132,19 @@ export default function PCHeader({ setIsUserListModalOpen }: Props) { )} - { - setIsOpen(true) - }} - style={{ - color: isDarkMode ? "white" : "", - backgroundColor: isDarkMode ? "black" : "", - }} - > - 프로필 편집 - + {userData.info.userId !== "" && ( + { + setIsOpen(true) + }} + style={{ + color: isDarkMode ? "white" : "", + backgroundColor: isDarkMode ? "black" : "", + }} + > + 프로필 편집 + + )} @@ -205,44 +207,46 @@ export default function PCHeader({ setIsUserListModalOpen }: Props) { )} - - { - setFeedDataType("all") - }} - color={isDarkMode ? "white" : "grey"} - > - - 전체 게시물 - - - - { - setFeedDataType("public") - }} - color={isDarkMode ? "white" : "grey"} - > - - 공개 게시물 - - - - { - setFeedDataType("private") - }} - color={isDarkMode ? "white" : "grey"} - > - - 숨김 게시물 - - - - + {userData.info.userId !== "" && ( + + { + setFeedDataType("all") + }} + color={isDarkMode ? "white" : "grey"} + > + + 전체 게시물 + + + + { + setFeedDataType("public") + }} + color={isDarkMode ? "white" : "grey"} + > + + 공개 게시물 + + + + { + setFeedDataType("private") + }} + color={isDarkMode ? "white" : "grey"} + > + + 숨김 게시물 + + + + + )} ) } diff --git a/firebase-practice/src/components/share/Loading/Loading.tsx b/firebase-practice/src/components/share/Loading/Loading.tsx index 61bf339..a508de9 100644 --- a/firebase-practice/src/components/share/Loading/Loading.tsx +++ b/firebase-practice/src/components/share/Loading/Loading.tsx @@ -8,9 +8,16 @@ type Props = { height: number | string borderRadius?: number | string count?: number + paddingTop?: string } -export default function Loading({ width, height, borderRadius, count }: Props) { +export default function Loading({ + width, + height, + borderRadius, + count, + paddingTop, +}: Props) { const isDarkMode = useRecoilValue(darkModeState) return ( ) diff --git a/firebase-practice/src/components/share/Loading/ProfileLoadingGrid.tsx b/firebase-practice/src/components/share/Loading/ProfileLoadingGrid.tsx new file mode 100644 index 0000000..1428393 --- /dev/null +++ b/firebase-practice/src/components/share/Loading/ProfileLoadingGrid.tsx @@ -0,0 +1,37 @@ +import Loading from "@share/Loading/Loading" +import Layout from "components/layout" +import styled from "styled-components" +import { FlexBox } from "ui" + +const Style = { + Wrapper: styled.div` + width: 50vw; + height: fit-content; + display: grid; + gap: 10px; + grid-template-columns: repeat(3, minmax(100px, auto)); + grid-template-rows: repeat(autofill, minmax(100px, auto)); + grid-auto-flow: row; + @media (max-width: 900px) { + width: 100vw; + gap: 3px; + } + `, +} + +export default function ProfileLoadingGrid() { + return ( + + + + + + + + + + + + + ) +} diff --git a/firebase-practice/src/components/share/Modal/comment/CommentModal.tsx b/firebase-practice/src/components/share/Modal/comment/CommentModal.tsx index 7776596..6c857fc 100644 --- a/firebase-practice/src/components/share/Modal/comment/CommentModal.tsx +++ b/firebase-practice/src/components/share/Modal/comment/CommentModal.tsx @@ -52,10 +52,6 @@ export default function CommentModal({ isOpen, setIsOpen, feedData }: Props) { const commentAreaRef = useRef(null) const windowSize = useWindowSize() - useEffect(() => { - console.log("이미지: ", feedData.imageUrl) - }, [feedData]) - return ( Date: Fri, 25 Nov 2022 17:26:15 +0900 Subject: [PATCH 11/28] =?UTF-8?q?feat:=20[mainPage]=20=ED=8C=94=EB=A1=9C?= =?UTF-8?q?=EC=9A=B0=20=EB=AA=A9=EB=A1=9D=20=EB=A1=9C=EB=94=A9=20=EC=8A=A4?= =?UTF-8?q?=EC=BC=88=EB=A0=88=ED=86=A4=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../feature/followListAtMainPage/FollowCard.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/firebase-practice/src/components/feature/followListAtMainPage/FollowCard.tsx b/firebase-practice/src/components/feature/followListAtMainPage/FollowCard.tsx index dcfb780..888c876 100644 --- a/firebase-practice/src/components/feature/followListAtMainPage/FollowCard.tsx +++ b/firebase-practice/src/components/feature/followListAtMainPage/FollowCard.tsx @@ -9,6 +9,7 @@ import { CustomH6Light, FlexBox, Margin } from "ui" import { ProfileIcon } from "icons" import Link from "next/link" import axios from "axios" +import Loading from "@share/Loading/Loading" type Props = { userId: string @@ -38,7 +39,7 @@ export default function FollowCard({ userId }: Props) { }, []) return ( <> - {userData && ( + {userData ? ( + ) : ( + + + + + )} ) From 370f20d8ec3b811e575e5b6af57306cf3c257275 Mon Sep 17 00:00:00 2001 From: kyw0716 Date: Tue, 13 Jun 2023 18:05:29 +0900 Subject: [PATCH 12/28] =?UTF-8?q?fix:=20=EC=B2=AB=20=ED=9A=8C=EC=9B=90?= =?UTF-8?q?=EA=B0=80=EC=9E=85=20=EC=82=AC=EC=9A=A9=EC=9E=90=20=EB=A1=9C?= =?UTF-8?q?=EA=B7=B8=EC=9D=B8=EC=8B=9C=20=EB=B0=9C=EC=83=9D=ED=95=98?= =?UTF-8?q?=EB=8D=98=20=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- firebase-practice/pages/api/comment.ts | 1 - firebase-practice/pages/api/like.ts | 1 - firebase-practice/pages/api/profile.ts | 1 - firebase-practice/pages/auth.tsx | 206 +++--------------- firebase-practice/pages/dm.tsx | 2 +- firebase-practice/pages/index.tsx | 2 +- .../feature/profile/customerProfile/index.tsx | 2 +- .../feature/profile/mypage/index.tsx | 2 +- .../src/components/layout/Header.tsx | 6 +- .../mypage/FeedSortingCard/ThreeDotMenu.tsx | 1 - .../share/Feed/profilepage/FeedGrid.tsx | 2 +- .../share/Modal/YoungstagramModal.tsx | 2 +- .../share/Modal/comment/CommentModal.tsx | 2 +- .../share/Modal/feed/FeedUploadModal.tsx | 2 +- .../share/Modal/userList/UserListModal.tsx | 2 +- firebase-practice/src/icons.tsx | 3 + firebase-practice/src/lib/hooks/useAuth.ts | 196 +++++++++++++++++ .../useWindowSize.ts} | 2 +- 18 files changed, 249 insertions(+), 186 deletions(-) create mode 100644 firebase-practice/src/lib/hooks/useAuth.ts rename firebase-practice/src/lib/{useWindowSize.tsx => hooks/useWindowSize.ts} (91%) diff --git a/firebase-practice/pages/api/comment.ts b/firebase-practice/pages/api/comment.ts index fa898f9..b4554d7 100644 --- a/firebase-practice/pages/api/comment.ts +++ b/firebase-practice/pages/api/comment.ts @@ -38,7 +38,6 @@ 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) diff --git a/firebase-practice/pages/api/like.ts b/firebase-practice/pages/api/like.ts index 3d168b2..1048a62 100644 --- a/firebase-practice/pages/api/like.ts +++ b/firebase-practice/pages/api/like.ts @@ -31,7 +31,6 @@ export default async function getLike( ) { if (req.method === "GET") { const storageId = req.query?.storageId - console.log(storageId) const getLikeRef = doc(DBService, "like", `${storageId}`) const docSnapShot = await getDoc(getLikeRef) diff --git a/firebase-practice/pages/api/profile.ts b/firebase-practice/pages/api/profile.ts index a86ae29..5e1500b 100644 --- a/firebase-practice/pages/api/profile.ts +++ b/firebase-practice/pages/api/profile.ts @@ -20,7 +20,6 @@ export default async function profile( ) { if (req.method === "GET") { const userId = req.query?.userId - console.log(userId) const getProfileRef = doc(DBService, "users", `${userId}`) const docSnapShot = await getDoc(getProfileRef) diff --git a/firebase-practice/pages/auth.tsx b/firebase-practice/pages/auth.tsx index f77bce7..083f9f5 100644 --- a/firebase-practice/pages/auth.tsx +++ b/firebase-practice/pages/auth.tsx @@ -21,6 +21,7 @@ import { UserInfo } from "backend/dto" import { GitHubIcon, GoogleIcon } from "icons" import { useRecoilValue } from "recoil" import { darkModeState } from "@share/recoil/recoilList" +import { useAuth } from "lib/hooks/useAuth" const Style = { Wrapper: styled.div` @@ -107,159 +108,24 @@ const Style = { export default function Auth() { const router = useRouter() - const [Email, setEmail] = useState("") - const [Password, setPassword] = useState("") - const [confirmPassword, setConfirmPassword] = useState("") - const [isNewAccount, setIsNewAccount] = useState(false) - const [name, setName] = useState("") - - const [isLogin, setIsLogin] = useState(false) - const githubProvider = new GithubAuthProvider() - const googleProvider = new GoogleAuthProvider() - const isDarkMode = useRecoilValue(darkModeState) - const handleOnInputChange: React.ChangeEventHandler = ( - event, - ) => { - if (event.target.name === "Email") { - if (event.target.value === "서경") alert("사랑해") - setEmail(event.target.value) - return - } - setPassword(event.target.value) - } - const handleNameOnChange: React.ChangeEventHandler = ( - event, - ) => { - setName(event.target.value) - } - const handleOnSubmit: React.FormEventHandler = async ( - event, - ) => { - event.preventDefault() - if (Email.length === 0) return - if (Password.length < 6) return - if (isNewAccount === true) { - await createUserWithEmailAndPassword(authService, Email, Password) - .then((response) => { - if (response && authService.currentUser !== null) { - updateProfile(authService.currentUser, { - displayName: name, - }) - signOut(authService) - setIsNewAccount(false) - alert( - "회원가입에 성공 하셨습니다! 회원가입하신 정보로 로그인 바랍니다.", - ) - setEmail("") - setPassword("") - } - }) - .catch((error) => { - if (error.code === "auth/weak-password") { - alert("비밀번호는 최소 6자리 이상이어야 합니다.") - setConfirmPassword("") - setPassword("") - } else if (error.code === "auth/email-already-in-use") { - alert("이미 사용중인 이메일 입니다.") - setPassword("") - setConfirmPassword("") - setEmail("") - } else if (error.code === "auth/invalid-email") { - alert("올바른 이메일 형식을 입력해주세요") - setEmail("") - } - }) - return - } - setPersistence(authService, browserSessionPersistence) - .then(async () => { - return signInWithEmailAndPassword(authService, Email, Password) - .then(async (response) => { - if (response) { - setIsLogin(true) - CreateNewUserToFirestore(response) - } - }) - .catch((error) => { - if (error.code === "auth/wrong-password") { - alert("비밀번호가 잘못되었습니다") - setPassword("") - return - } - if (error.code === "auth/invalid-email") { - alert("이메일 똑바로 쓰세요") - } else if (error.code === "auth/user-not-found") { - alert("등록되지 않은 사용자 입니다") - } - setEmail("") - setPassword("") - }) - }) - .catch((error) => console.log(error.code)) - } - - const handleGoogleAuth = async () => { - setIsLogin(true) - await signInWithPopup(authService, googleProvider) - .then(async (response) => { - if (response) { - await CreateNewUserToFirestore(response) - } - }) - .catch((error) => { - if (error.code === "auth/cancelled-popup-request") { - alert( - "로그인 진행중에 오류가 발생하였습니다. 팝업창을 닫지 않도록 주의하시기 바랍니다.", - ) - } - if (error.code === "auth/account-exists-with-different-credential") { - alert("동일한 이메일 주소로 이미 가입된 계정이 있습니다.") - } - router.push("/auth") - }) - } - - const handleGitHubAuth = async () => { - setIsLogin(true) - await signInWithPopup(authService, githubProvider) - .then(async (response) => { - if (response) { - await CreateNewUserToFirestore(response) - } - }) - .catch((error) => { - if (error.code === "auth/cancelled-popup-request") { - alert( - "로그인 진행중에 오류가 발생하였습니다. 팝업창을 닫지 않도록 주의하시기 바랍니다.", - ) - } - if (error.code === "auth/account-exists-with-different-credential") { - alert("동일한 이메일 주소로 이미 가입된 계정이 있습니다.") - } - router.push("/auth") - }) - } - - const CreateNewUserToFirestore = async (response: UserCredential) => { - const newUserToFirestoreRef = doc(DBService, "users", response.user.uid) - const UserDataForm: UserInfo = { - userId: response.user.uid, - profileImage: response.user.photoURL, - name: response.user.displayName, - email: response.user.email, - } - await updateDoc(newUserToFirestoreRef, { info: UserDataForm }).catch( - async (error) => { - if (error.code === "not-found") { - await setDoc(newUserToFirestoreRef, { info: UserDataForm }).catch( - (error) => console.log(error.code), - ) - } - }, - ) - } + const { + isLogin, + isNewAccount, + email, + name, + password, + confirmPassword, + setIsLogin, + setConfirmPassword, + setIsNewAccount, + handleOnInputChange, + handleGitHubAuth, + handleGoogleAuth, + handleOnSubmit, + handleNameOnChange, + } = useAuth() useEffect(() => { if (isLogin) router.push("/") @@ -292,7 +158,7 @@ export default function Auth() { required onChange={handleOnInputChange} name="Email" - value={Email} + value={email} autoComplete="off" style={ isDarkMode @@ -304,7 +170,7 @@ export default function Auth() { : {} } /> - {Email.search(/\@\w+\.com|\@\w+\.net/) === -1 && Email.length > 3 ? ( + {email.search(/\@\w+\.com|\@\w+\.net/) === -1 && email.length > 3 ? ( 올바르지 않은 이메일 형식입니다. @@ -318,11 +184,11 @@ export default function Auth() { required onChange={handleOnInputChange} name="Password" - value={Password} + value={password} style={ - Password !== confirmPassword && + password !== confirmPassword && confirmPassword !== "" && - Password !== "" + password !== "" ? { backgroundColor: "red" } : { backgroundColor: isDarkMode ? "#373e47" : "white", @@ -342,16 +208,16 @@ export default function Auth() { }} type="password" style={ - Password !== confirmPassword && + password !== confirmPassword && confirmPassword !== "" && - Password !== "" + password !== "" ? { backgroundColor: "red" } : { backgroundColor: "white" } } /> - {Password !== confirmPassword && + {password !== confirmPassword && confirmPassword !== "" && - Password !== "" ? ( + password !== "" ? ( 비밀번호가 일치하지 않습니다 @@ -375,26 +241,26 @@ export default function Auth() { value={isNewAccount ? "Create Account" : "Log in"} color={ isNewAccount - ? Email.length !== 0 && - Password.length >= 6 && - Password === confirmPassword && + ? email.length !== 0 && + password.length >= 6 && + password === confirmPassword && name !== "" ? "" : "fail" - : Email.length !== 0 && Password.length >= 6 + : email.length !== 0 && password.length >= 6 ? "" : "fail" } disabled={ isNewAccount ? !( - Email.length !== 0 && - Password.length >= 6 && - Password === confirmPassword && + email.length !== 0 && + password.length >= 6 && + password === confirmPassword && confirmPassword !== "" && name !== "" ) - : !(Email.length !== 0 && Password.length >= 6) + : !(email.length !== 0 && password.length >= 6) } /> @@ -412,7 +278,7 @@ export default function Auth() { height={40} onClick={() => { setPersistence(authService, browserSessionPersistence).then( - async () => { + () => { handleGoogleAuth() }, ) @@ -424,7 +290,7 @@ export default function Auth() { height={40} onClick={() => { setPersistence(authService, browserSessionPersistence).then( - async () => { + () => { handleGitHubAuth() }, ) diff --git a/firebase-practice/pages/dm.tsx b/firebase-practice/pages/dm.tsx index 107d5ad..e796041 100644 --- a/firebase-practice/pages/dm.tsx +++ b/firebase-practice/pages/dm.tsx @@ -1,6 +1,6 @@ import Layout from "components/layout" import PCDM from "@feature/dm/PC" -import useWindowSize from "lib/useWindowSize" +import useWindowSize from "lib/hooks/useWindowSize" import MobileDM from "@feature/dm/Mobile" export default function Dm() { diff --git a/firebase-practice/pages/index.tsx b/firebase-practice/pages/index.tsx index 84e904a..572fd85 100644 --- a/firebase-practice/pages/index.tsx +++ b/firebase-practice/pages/index.tsx @@ -19,7 +19,6 @@ import UserListModal from "@share/Modal/userList/UserListModal" import Loading from "@share/Loading/Loading" const Home: NextPage = () => { - const router = useRouter() const [dataFromFirestore, setDataFromFirestore] = useState() const [feedData, setFeedData] = useState() const currentUserData = useRecoilValue(userDataState) @@ -36,6 +35,7 @@ const Home: NextPage = () => { if (doc) setDataFromFirestore(doc.data()) }) }, []) + useEffect(() => { if (dataFromFirestore !== undefined) { setFeedData(dataFromFirestore.feed) diff --git a/firebase-practice/src/components/feature/profile/customerProfile/index.tsx b/firebase-practice/src/components/feature/profile/customerProfile/index.tsx index 183f2d2..1ce235e 100644 --- a/firebase-practice/src/components/feature/profile/customerProfile/index.tsx +++ b/firebase-practice/src/components/feature/profile/customerProfile/index.tsx @@ -2,7 +2,7 @@ import MobileHeader from "./MobileHeader" import PCHeader from "./PCHeader" import { Margin } from "ui" import { UserData } from "backend/dto" -import useWindowSize from "lib/useWindowSize" +import useWindowSize from "lib/hooks/useWindowSize" import { SetStateAction } from "react" type Props = { diff --git a/firebase-practice/src/components/feature/profile/mypage/index.tsx b/firebase-practice/src/components/feature/profile/mypage/index.tsx index 14b2e51..24d3d7f 100644 --- a/firebase-practice/src/components/feature/profile/mypage/index.tsx +++ b/firebase-practice/src/components/feature/profile/mypage/index.tsx @@ -1,4 +1,4 @@ -import useWindowSize from "lib/useWindowSize" +import useWindowSize from "lib/hooks/useWindowSize" import { SetStateAction } from "react" import { Margin } from "ui" import MobileHeader from "./MobileHeader" diff --git a/firebase-practice/src/components/layout/Header.tsx b/firebase-practice/src/components/layout/Header.tsx index b62d025..1672544 100644 --- a/firebase-practice/src/components/layout/Header.tsx +++ b/firebase-practice/src/components/layout/Header.tsx @@ -148,7 +148,7 @@ export default function Header() { { - if (userData !== undefined && userData.info.userId !== "") { + if (userData !== undefined && userData?.info.userId !== "") { setIsModalOpen(true) return } @@ -160,7 +160,9 @@ export default function Header() { ) : ( <> - {userData.info.profileImage !== "" && + {/* TODO: userData에 info가 undefined일 경우 처리하기 */} + {userData && + userData.info.profileImage !== "" && userData.info.profileImage !== null ? ( (false) const setSelectedFeedData = useSetRecoilState(feedDataState) - const setCurrentUserData = useSetRecoilState(userDataState) const isDarkMode = useRecoilValue(darkModeState) const handleThreeDotMenuClick = () => { diff --git a/firebase-practice/src/components/share/Feed/profilepage/FeedGrid.tsx b/firebase-practice/src/components/share/Feed/profilepage/FeedGrid.tsx index 8c5d161..3cba996 100644 --- a/firebase-practice/src/components/share/Feed/profilepage/FeedGrid.tsx +++ b/firebase-practice/src/components/share/Feed/profilepage/FeedGrid.tsx @@ -2,7 +2,7 @@ import { FeedData } from "backend/dto" import styled from "styled-components" import FeedGridCard from "./FeedGridCard" import { v4 } from "uuid" -import useWindowSize from "lib/useWindowSize" +import useWindowSize from "lib/hooks/useWindowSize" import { SetStateAction, useEffect, useState } from "react" type Props = { diff --git a/firebase-practice/src/components/share/Modal/YoungstagramModal.tsx b/firebase-practice/src/components/share/Modal/YoungstagramModal.tsx index 3118045..2af6550 100644 --- a/firebase-practice/src/components/share/Modal/YoungstagramModal.tsx +++ b/firebase-practice/src/components/share/Modal/YoungstagramModal.tsx @@ -1,6 +1,6 @@ import { darkModeState } from "@share/recoil/recoilList" import { XIcon } from "icons" -import useWindowSize from "lib/useWindowSize" +import useWindowSize from "lib/hooks/useWindowSize" import React, { ReactNode, SetStateAction } from "react" import ReactModal from "react-modal" import { useRecoilValue } from "recoil" diff --git a/firebase-practice/src/components/share/Modal/comment/CommentModal.tsx b/firebase-practice/src/components/share/Modal/comment/CommentModal.tsx index 7d75c41..c6c2d68 100644 --- a/firebase-practice/src/components/share/Modal/comment/CommentModal.tsx +++ b/firebase-practice/src/components/share/Modal/comment/CommentModal.tsx @@ -3,7 +3,7 @@ import React, { SetStateAction, useRef } from "react" import styled from "styled-components" import YoungstagramModal from "../YoungstagramModal" import CommentInput from "./Input" -import useWindowSize from "lib/useWindowSize" +import useWindowSize from "lib/hooks/useWindowSize" import CommentList from "./CommentList" import Icons from "./Icons" diff --git a/firebase-practice/src/components/share/Modal/feed/FeedUploadModal.tsx b/firebase-practice/src/components/share/Modal/feed/FeedUploadModal.tsx index 23fbc33..22824cc 100644 --- a/firebase-practice/src/components/share/Modal/feed/FeedUploadModal.tsx +++ b/firebase-practice/src/components/share/Modal/feed/FeedUploadModal.tsx @@ -1,7 +1,7 @@ import { SetStateAction, useState } from "react" import ModalForImageUpload from "./ModalForFeedUpload" import { FeedData } from "backend/dto" -import useWindowSize from "lib/useWindowSize" +import useWindowSize from "lib/hooks/useWindowSize" import TextInput from "./TextInput" import ImageInput from "./ImageInput" diff --git a/firebase-practice/src/components/share/Modal/userList/UserListModal.tsx b/firebase-practice/src/components/share/Modal/userList/UserListModal.tsx index 0ded514..f4e22d7 100644 --- a/firebase-practice/src/components/share/Modal/userList/UserListModal.tsx +++ b/firebase-practice/src/components/share/Modal/userList/UserListModal.tsx @@ -3,7 +3,7 @@ import styled from "styled-components" import YoungstagramModal from "../YoungstagramModal" import FollowUserWrapper from "./UserWrapper" import { v4 } from "uuid" -import useWindowSize from "lib/useWindowSize" +import useWindowSize from "lib/hooks/useWindowSize" type Props = { userList: string[] diff --git a/firebase-practice/src/icons.tsx b/firebase-practice/src/icons.tsx index 84faabb..bf1660f 100644 --- a/firebase-practice/src/icons.tsx +++ b/firebase-practice/src/icons.tsx @@ -17,6 +17,9 @@ type ProfileIconProps = { export function ProfileIcon({ userId, width, height }: ProfileIconProps) { const isDarkMode = useRecoilValue(darkModeState) const currentUserData = useRecoilValue(userDataState) + + if (currentUserData === undefined) return <> + return ( { + const router = useRouter() + + const [email, setEmail] = useState("") + const [confirmPassword, setConfirmPassword] = useState("") + const [password, setPassword] = useState("") + const [name, setName] = useState("") + const [isNewAccount, setIsNewAccount] = useState(false) + const [isLogin, setIsLogin] = useState(false) + + const githubProvider = new GithubAuthProvider() + const googleProvider = new GoogleAuthProvider() + + const setCurrentUser = useSetRecoilState(userDataState) + + const handleOnInputChange: React.ChangeEventHandler = ( + event, + ) => { + if (event.target.name === "Email") { + if (event.target.value === "서경") alert("사랑해") + setEmail(event.target.value) + return + } + setPassword(event.target.value) + } + const handleNameOnChange: React.ChangeEventHandler = ( + event, + ) => { + setName(event.target.value) + } + const handleOnSubmit: React.FormEventHandler = async ( + event, + ) => { + event.preventDefault() + if (email.length === 0) return + if (password.length < 6) return + if (isNewAccount === true) { + await createUserWithEmailAndPassword(authService, email, password) + .then((response) => { + if (response && authService.currentUser !== null) { + updateProfile(authService.currentUser, { + displayName: name, + }) + signOut(authService) + setIsNewAccount(false) + alert( + "회원가입에 성공 하셨습니다! 회원가입하신 정보로 로그인 바랍니다.", + ) + setEmail("") + setPassword("") + } + }) + .catch((error) => { + if (error.code === "auth/weak-password") { + alert("비밀번호는 최소 6자리 이상이어야 합니다.") + setConfirmPassword("") + setPassword("") + } else if (error.code === "auth/email-already-in-use") { + alert("이미 사용중인 이메일 입니다.") + setPassword("") + setConfirmPassword("") + setEmail("") + } else if (error.code === "auth/invalid-email") { + alert("올바른 이메일 형식을 입력해주세요") + setEmail("") + } + }) + return + } + setPersistence(authService, browserSessionPersistence) + .then(async () => { + return signInWithEmailAndPassword(authService, email, password) + .then(async (response) => { + if (response) { + setIsLogin(true) + CreateNewUserToFirestore(response) + } + }) + .catch((error) => { + if (error.code === "auth/wrong-password") { + alert("비밀번호가 잘못되었습니다") + setPassword("") + return + } + if (error.code === "auth/invalid-email") { + alert("이메일 똑바로 쓰세요") + } else if (error.code === "auth/user-not-found") { + alert("등록되지 않은 사용자 입니다") + } + setEmail("") + setPassword("") + }) + }) + .catch((error) => console.log(error.code)) + } + + const handleGoogleAuth = async () => { + signInWithPopup(authService, googleProvider) + .then((response) => { + CreateNewUserToFirestore(response) + }) + .catch((error) => { + if (error.code === "auth/cancelled-popup-request") { + alert( + "로그인 진행중에 오류가 발생하였습니다. 팝업창을 닫지 않도록 주의하시기 바랍니다.", + ) + } + if (error.code === "auth/account-exists-with-different-credential") { + alert("동일한 이메일 주소로 이미 가입된 계정이 있습니다.") + } + router.push("/auth") + }) + } + + const handleGitHubAuth = async () => { + setIsLogin(true) + signInWithPopup(authService, githubProvider) + .then((response) => { + if (response) { + CreateNewUserToFirestore(response) + } + }) + .catch((error) => { + if (error.code === "auth/cancelled-popup-request") { + alert( + "로그인 진행중에 오류가 발생하였습니다. 팝업창을 닫지 않도록 주의하시기 바랍니다.", + ) + } + if (error.code === "auth/account-exists-with-different-credential") { + alert("동일한 이메일 주소로 이미 가입된 계정이 있습니다.") + } + router.push("/auth") + }) + } + + const CreateNewUserToFirestore = async (response: UserCredential) => { + const newUserToFirestoreRef = doc(DBService, "users", response.user.uid) + const UserDataForm: UserInfo = { + userId: response.user.uid, + profileImage: response.user.photoURL, + name: response.user.displayName, + email: response.user.email, + } + + await updateDoc(newUserToFirestoreRef, { info: UserDataForm }).catch( + (error) => { + if (error.code === "not-found") { + setDoc(newUserToFirestoreRef, { info: UserDataForm }) + .then(async () => { + const userDocument = await getDoc(newUserToFirestoreRef) + + setCurrentUser(userDocument.data() as UserData) + }) + .catch((error) => console.log(error.code)) + } + }, + ) + } + + return { + isLogin, + isNewAccount, + email, + name, + password, + confirmPassword, + setIsLogin, + setConfirmPassword, + setIsNewAccount, + handleOnInputChange, + handleOnSubmit, + handleNameOnChange, + handleGitHubAuth, + handleGoogleAuth, + } +} diff --git a/firebase-practice/src/lib/useWindowSize.tsx b/firebase-practice/src/lib/hooks/useWindowSize.ts similarity index 91% rename from firebase-practice/src/lib/useWindowSize.tsx rename to firebase-practice/src/lib/hooks/useWindowSize.ts index 818df0e..c2f8e0c 100644 --- a/firebase-practice/src/lib/useWindowSize.tsx +++ b/firebase-practice/src/lib/hooks/useWindowSize.ts @@ -1,5 +1,5 @@ import { useEffect, useState } from "react" -import debounce from "./debounce" +import debounce from "../debounce" // TODO: 전역상태로 바꿔보기 export default function useWindowSize() { From 1d5982e5576c241659bb772a4aa22f6b71a601c5 Mon Sep 17 00:00:00 2001 From: kyw0716 Date: Tue, 13 Jun 2023 18:13:15 +0900 Subject: [PATCH 13/28] =?UTF-8?q?chore:=20conflict=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- firebase-practice/pages/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/firebase-practice/pages/index.tsx b/firebase-practice/pages/index.tsx index 572fd85..84e904a 100644 --- a/firebase-practice/pages/index.tsx +++ b/firebase-practice/pages/index.tsx @@ -19,6 +19,7 @@ import UserListModal from "@share/Modal/userList/UserListModal" import Loading from "@share/Loading/Loading" const Home: NextPage = () => { + const router = useRouter() const [dataFromFirestore, setDataFromFirestore] = useState() const [feedData, setFeedData] = useState() const currentUserData = useRecoilValue(userDataState) @@ -35,7 +36,6 @@ const Home: NextPage = () => { if (doc) setDataFromFirestore(doc.data()) }) }, []) - useEffect(() => { if (dataFromFirestore !== undefined) { setFeedData(dataFromFirestore.feed) From 2f3e5ed053c930892e9f8a0d25178700da4d3d6b Mon Sep 17 00:00:00 2001 From: kyw0716 Date: Tue, 13 Jun 2023 18:32:28 +0900 Subject: [PATCH 14/28] =?UTF-8?q?fix:=20=ED=8C=94=EB=A1=9C=EC=9A=B0?= =?UTF-8?q?=ED=95=98=EB=8A=94=20=EC=82=AC=EB=9E=8C=EC=9D=B4=20=EC=97=86?= =?UTF-8?q?=EC=9D=84=20=EB=95=8C=20=EB=A9=94=EC=9D=B8=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EC=83=81=EB=8B=A8=EC=97=90=20=EB=A1=9C=EB=94=A9=20?= =?UTF-8?q?=EC=8A=A4=EC=BC=88=EB=A0=88=ED=86=A4=EC=9D=B4=20=EC=83=9D?= =?UTF-8?q?=EA=B8=B0=EB=8D=98=20=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- firebase-practice/pages/index.tsx | 14 +++++--------- firebase-practice/src/lib/hooks/useAuth.ts | 6 ++++++ 2 files changed, 11 insertions(+), 9 deletions(-) diff --git a/firebase-practice/pages/index.tsx b/firebase-practice/pages/index.tsx index 3ea7292..122cab0 100644 --- a/firebase-practice/pages/index.tsx +++ b/firebase-practice/pages/index.tsx @@ -52,15 +52,11 @@ const Home: NextPage = () => { /> {currentUserData?.follow !== undefined && - currentUserData.follow.length > 0 ? ( - - - - ) : ( - - - - )} + currentUserData.follow.length > 0 && ( + + + + )} {feedData !== undefined && currentUserData.info.userId !== "" ? ( { const CreateNewUserToFirestore = async (response: UserCredential) => { const newUserToFirestoreRef = doc(DBService, "users", response.user.uid) + const UserDataForm: UserInfo = { userId: response.user.uid, profileImage: response.user.photoURL, @@ -162,14 +163,19 @@ export const useAuth = () => { email: response.user.email, } + setIsLogin(true) + await updateDoc(newUserToFirestoreRef, { info: UserDataForm }).catch( (error) => { + setIsLogin(false) + if (error.code === "not-found") { setDoc(newUserToFirestoreRef, { info: UserDataForm }) .then(async () => { const userDocument = await getDoc(newUserToFirestoreRef) setCurrentUser(userDocument.data() as UserData) + setIsLogin(true) }) .catch((error) => console.log(error.code)) } From 1ddfaf4ac8b4929fd783b164803534dbc5fd3f62 Mon Sep 17 00:00:00 2001 From: kyw0716 Date: Tue, 13 Jun 2023 23:00:12 +0900 Subject: [PATCH 15/28] =?UTF-8?q?refactor:=20=EB=A9=94=EC=9D=B8=20?= =?UTF-8?q?=ED=94=BC=EB=93=9C=20=EC=A0=95=EB=B3=B4=20recoil=20state?= =?UTF-8?q?=EB=A1=9C=20=EA=B4=80=EB=A6=AC=ED=95=98=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- firebase-practice/pages/api/feed.ts | 22 +++++++----- firebase-practice/pages/index.tsx | 24 ++++--------- firebase-practice/pages/mypage.tsx | 4 +-- firebase-practice/pages/profile/[id].tsx | 4 +-- .../src/backend/{dto.tsx => dto.d.ts} | 5 +-- .../share/Feed/mainPage/FeedCard/Desc.tsx | 4 +-- .../share/Feed/mainPage/FeedCard/Icons.tsx | 4 +-- .../mainPage/FeedCard/LikeCommentInfo.tsx | 4 +-- .../share/Feed/mainPage/FeedCard/index.tsx | 4 +-- .../share/Feed/mainPage/FeedList.tsx | 36 ++++++++++--------- .../share/Feed/mypage/FeedSortList.tsx | 4 +-- .../Feed/mypage/FeedSortingCard/Desc.tsx | 4 +-- .../FeedSortingCard/LikeCommentInfo.tsx | 4 +-- .../mypage/FeedSortingCard/ThreeDotMenu.tsx | 10 +++--- .../Feed/mypage/FeedSortingCard/index.tsx | 4 +-- .../share/Feed/profilepage/FeedGrid.tsx | 8 ++--- .../share/Feed/profilepage/FeedGridCard.tsx | 4 +-- .../share/Modal/comment/CommentList.tsx | 4 +-- .../share/Modal/comment/CommentModal.tsx | 4 +-- .../components/share/Modal/comment/Input.tsx | 4 +-- .../share/Modal/feed/FeedUploadModal.tsx | 4 +-- .../share/Modal/feed/ImageInput.tsx | 4 +-- .../components/share/Modal/feed/TextInput.tsx | 8 ++--- .../src/components/share/recoil/feed.ts | 24 +++++++++++++ .../components/share/recoil/recoilList.tsx | 4 +-- firebase-practice/src/lib/hooks/useAuth.ts | 1 - 26 files changed, 113 insertions(+), 93 deletions(-) rename firebase-practice/src/backend/{dto.tsx => dto.d.ts} (96%) create mode 100644 firebase-practice/src/components/share/recoil/feed.ts diff --git a/firebase-practice/pages/api/feed.ts b/firebase-practice/pages/api/feed.ts index 042b53c..09c84fa 100644 --- a/firebase-practice/pages/api/feed.ts +++ b/firebase-practice/pages/api/feed.ts @@ -1,5 +1,5 @@ import { DBService } from "@FireBase" -import { FeedData } from "backend/dto" +import { FeedItems } from "backend/dto" import { arrayRemove, arrayUnion, @@ -35,17 +35,21 @@ import type { NextApiRequest, NextApiResponse } from "next" export default async function getFeed( req: NextApiRequest, - res: NextApiResponse, + res: NextApiResponse, ) { 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 FeedItems[] res .status(200) - .json(data.sort((a, b) => Number(a.uploadTime) - Number(b.uploadTime))) + .json( + data + .filter((feedItem) => !feedItem.isPrivate) + .sort((a, b) => Number(a.uploadTime) - Number(b.uploadTime)), + ) } else { res.status(500).json("Fail") } @@ -67,7 +71,7 @@ export default async function getFeed( const firestorePersonalRef = doc(DBService, "users", `${creator}`) if (!uploadTime) { - const feed: FeedData = { + const feed: FeedItems = { imageUrl: imageUrl, desc: desc, location: location, @@ -103,7 +107,7 @@ export default async function getFeed( res.status(200).json("Success") } else { - const feedToRemove: FeedData = { + const feedToRemove: FeedItems = { imageUrl: imageUrl, desc: desc, location: location, @@ -112,7 +116,7 @@ export default async function getFeed( creator: creator, uploadTime: uploadTime, } - const newFeed: FeedData = { + const newFeed: FeedItems = { imageUrl: imageUrl, desc: newDesc, location: newLocation, @@ -151,12 +155,12 @@ export default async function getFeed( storageId, creator, uploadTime, - } = req.body as FeedData + } = req.body as FeedItems const firestoreAllRef = doc(DBService, "mainPage", `userFeedDataAll`) const firestorePersonalRef = doc(DBService, "users", `${creator}`) - const feed: FeedData = { + const feed: FeedItems = { imageUrl: imageUrl, desc: desc, location: location, diff --git a/firebase-practice/pages/index.tsx b/firebase-practice/pages/index.tsx index 122cab0..b8f5a3b 100644 --- a/firebase-practice/pages/index.tsx +++ b/firebase-practice/pages/index.tsx @@ -1,9 +1,8 @@ import type { NextPage } from "next" -import { useEffect, useState } from "react" +import { useState } from "react" import { FlexBox, Margin } from "ui" import FeedList from "@share/Feed/mainPage/FeedList" import Layout from "components/layout" -import { FeedData } from "backend/dto" import FollowListAtMainPage from "@feature/followListAtMainPage" import { useRecoilValue } from "recoil" import { @@ -15,11 +14,13 @@ import { useRouter } from "next/router" import CommentModal from "@share/Modal/comment/CommentModal" import UserListModal from "@share/Modal/userList/UserListModal" import Loading from "@share/Loading/Loading" -import axios from "axios" +import { mainFeedItems } from "@share/recoil/feed" const Home: NextPage = () => { const router = useRouter() - const [feedData, setFeedData] = useState() + + const feedData = useRecoilValue(mainFeedItems) + const currentUserData = useRecoilValue(userDataState) const [isCommentModalOpen, setIsCommentModalOpen] = useState(false) @@ -28,15 +29,6 @@ const Home: NextPage = () => { const [isLikeModalOpen, setIsLikeModalOpen] = useState(false) const likerListData = useRecoilValue(userListState) - useEffect(() => { - axios({ - method: "GET", - url: `/api/feed`, - }).then((response) => { - setFeedData(response.data) - }) - }, []) - return ( { )} - {feedData !== undefined && currentUserData.info.userId !== "" ? ( + {currentUserData.info.userId !== "" ? ( !data.isPrivate) : undefined - } + feedItems={feedData} setIsCommentModalOpen={setIsCommentModalOpen} setIsLikeModalOpen={setIsLikeModalOpen} /> diff --git a/firebase-practice/pages/mypage.tsx b/firebase-practice/pages/mypage.tsx index 9639323..978f618 100644 --- a/firebase-practice/pages/mypage.tsx +++ b/firebase-practice/pages/mypage.tsx @@ -3,7 +3,7 @@ import FeedSortList from "@share/Feed/mypage/FeedSortList" import ProfileHeader from "@feature/profile/mypage" import styled from "styled-components" import Layout from "components/layout" -import { FeedData } from "backend/dto" +import { FeedItems } from "backend/dto" import { useRecoilValue } from "recoil" import { FeedDataFilter, @@ -34,7 +34,7 @@ export default function Profile() { const currentUserData = useRecoilValue(userDataState) const feedDataType = useRecoilValue(FeedDataFilter) - const [feedData, setFeedData] = useState([]) + const [feedData, setFeedData] = useState([]) const selectedFeedData = useRecoilValue(feedDataState) const [isCommentModalOpen, setIsCommentModalOpen] = useState(false) diff --git a/firebase-practice/pages/profile/[id].tsx b/firebase-practice/pages/profile/[id].tsx index 25563f5..bc7faae 100644 --- a/firebase-practice/pages/profile/[id].tsx +++ b/firebase-practice/pages/profile/[id].tsx @@ -5,7 +5,7 @@ import ProfileHeader from "@feature/profile/customerProfile" import styled from "styled-components" import { Margin } from "ui" import Layout from "components/layout" -import { FeedData, UserData } from "backend/dto" +import { FeedItems, UserData } from "backend/dto" import { useRouter } from "next/router" import FeedGrid from "@share/Feed/profilepage/FeedGrid" import { useRecoilValue } from "recoil" @@ -31,7 +31,7 @@ const Style = { export default function Profile({ userId }: Props) { const router = useRouter() const [userData, setUserData] = useState() - const [feedData, setFeedData] = useState() + const [feedData, setFeedData] = useState() const selectedFeedData = useRecoilValue(feedDataState) const [isCommentModalOpen, setIsCommentModalOpen] = useState(false) const [isUserListModalOpen, setIsUserListModalOpen] = useState(false) diff --git a/firebase-practice/src/backend/dto.tsx b/firebase-practice/src/backend/dto.d.ts similarity index 96% rename from firebase-practice/src/backend/dto.tsx rename to firebase-practice/src/backend/dto.d.ts index 5db03bf..3159ced 100644 --- a/firebase-practice/src/backend/dto.tsx +++ b/firebase-practice/src/backend/dto.d.ts @@ -8,7 +8,7 @@ * @creator 피드를 올린 사람의 userId * @uploadTime 피드의 업로드 시간 (components/lib/getCurrentTime.tsx 사용) */ -export type FeedData = { +export type FeedItems = { imageUrl: string desc: string location: string @@ -47,9 +47,10 @@ export type UserInfo = { name: string | null email: string | null } + export type UserData = { info: UserInfo follow: string[] follower: string[] - feed: FeedData[] + feed: FeedItems[] } diff --git a/firebase-practice/src/components/share/Feed/mainPage/FeedCard/Desc.tsx b/firebase-practice/src/components/share/Feed/mainPage/FeedCard/Desc.tsx index 4d40c58..b87aa7f 100644 --- a/firebase-practice/src/components/share/Feed/mainPage/FeedCard/Desc.tsx +++ b/firebase-practice/src/components/share/Feed/mainPage/FeedCard/Desc.tsx @@ -1,12 +1,12 @@ import { darkModeState, feedDataState } from "@share/recoil/recoilList" -import { FeedData } from "backend/dto" +import { FeedItems } from "backend/dto" import { SetStateAction } from "react" import { useRecoilValue, useSetRecoilState } from "recoil" import styled from "styled-components" import { CustomH5, CustomH5Light, CustomH6, FlexBox, Margin } from "ui" type Props = { - feedData: FeedData + feedData: FeedItems setIsCommentModalOpen: React.Dispatch> name: string | null } diff --git a/firebase-practice/src/components/share/Feed/mainPage/FeedCard/Icons.tsx b/firebase-practice/src/components/share/Feed/mainPage/FeedCard/Icons.tsx index 3eb5d49..2b75c56 100644 --- a/firebase-practice/src/components/share/Feed/mainPage/FeedCard/Icons.tsx +++ b/firebase-practice/src/components/share/Feed/mainPage/FeedCard/Icons.tsx @@ -1,5 +1,5 @@ import { feedDataState } from "@share/recoil/recoilList" -import { FeedData } from "backend/dto" +import { FeedItems } from "backend/dto" import React, { SetStateAction } from "react" import { useSetRecoilState } from "recoil" import { @@ -13,7 +13,7 @@ import { type Props = { isCurrentUserLike: boolean - feedData: FeedData + feedData: FeedItems setIsCommentModalOpen: React.Dispatch> } diff --git a/firebase-practice/src/components/share/Feed/mainPage/FeedCard/LikeCommentInfo.tsx b/firebase-practice/src/components/share/Feed/mainPage/FeedCard/LikeCommentInfo.tsx index ddc34a1..cd320ef 100644 --- a/firebase-practice/src/components/share/Feed/mainPage/FeedCard/LikeCommentInfo.tsx +++ b/firebase-practice/src/components/share/Feed/mainPage/FeedCard/LikeCommentInfo.tsx @@ -5,7 +5,7 @@ import { userListState, } from "@share/recoil/recoilList" import axios from "axios" -import { Comment, FeedData } from "backend/dto" +import { Comment, FeedItems } from "backend/dto" import React, { SetStateAction, useEffect, useState } from "react" import { useRecoilValue, useSetRecoilState } from "recoil" import { @@ -19,7 +19,7 @@ import { } from "ui" type Props = { - feedData: FeedData + feedData: FeedItems setIsLikeModalOpen: React.Dispatch> setIsCommentModalOpen: React.Dispatch> } diff --git a/firebase-practice/src/components/share/Feed/mainPage/FeedCard/index.tsx b/firebase-practice/src/components/share/Feed/mainPage/FeedCard/index.tsx index 67e479c..482209e 100644 --- a/firebase-practice/src/components/share/Feed/mainPage/FeedCard/index.tsx +++ b/firebase-practice/src/components/share/Feed/mainPage/FeedCard/index.tsx @@ -1,5 +1,5 @@ import { darkModeState, userDataState } from "@share/recoil/recoilList" -import { FeedData, UserData } from "backend/dto" +import { FeedItems, UserData } from "backend/dto" import Image from "next/image" import { useRouter } from "next/router" import { SetStateAction, useEffect, useState } from "react" @@ -13,7 +13,7 @@ import Link from "next/link" import axios from "axios" type Props = { - feedData: FeedData + feedData: FeedItems setIsCommentModalOpen: React.Dispatch> setIsLikeModalOpen: React.Dispatch> } diff --git a/firebase-practice/src/components/share/Feed/mainPage/FeedList.tsx b/firebase-practice/src/components/share/Feed/mainPage/FeedList.tsx index d2b4828..d9e5daa 100644 --- a/firebase-practice/src/components/share/Feed/mainPage/FeedList.tsx +++ b/firebase-practice/src/components/share/Feed/mainPage/FeedList.tsx @@ -1,4 +1,4 @@ -import { FeedData } from "backend/dto" +import { FeedItems } from "backend/dto" import { CameraIcon } from "icons" import { SetStateAction } from "react" import styled from "styled-components" @@ -6,7 +6,7 @@ import { CustomH2Light, CustomH5Light } from "ui" import FeedCard from "./FeedCard" type Props = { - FeedData: FeedData[] | undefined + feedItems: FeedItems[] setIsCommentModalOpen: React.Dispatch> setIsLikeModalOpen: React.Dispatch> } @@ -29,28 +29,30 @@ const Style = { } export default function FeedList({ - FeedData, + feedItems, setIsCommentModalOpen, setIsLikeModalOpen, }: Props) { return ( - {FeedData !== undefined && FeedData.length !== 0 ? ( - FeedData.sort(function (a, b) { - return Number(b.uploadTime) - Number(a.uploadTime) - }).map((data, index) => { - return ( - - ) - }) + {feedItems.length !== 0 ? ( + feedItems + // .sort(function (a, b) { + // return Number(b.uploadTime) - Number(a.uploadTime) + // }) + .map((data, index) => { + return ( + + ) + }) ) : ( <> - {FeedData?.length === 0 && ( + {feedItems?.length === 0 && ( <> 사진 공유 diff --git a/firebase-practice/src/components/share/Feed/mypage/FeedSortList.tsx b/firebase-practice/src/components/share/Feed/mypage/FeedSortList.tsx index f60d5ff..792bb3b 100644 --- a/firebase-practice/src/components/share/Feed/mypage/FeedSortList.tsx +++ b/firebase-practice/src/components/share/Feed/mypage/FeedSortList.tsx @@ -1,6 +1,6 @@ import Loading from "@share/Loading/Loading" import { darkModeState, userDataState } from "@share/recoil/recoilList" -import { FeedData } from "backend/dto" +import { FeedItems } from "backend/dto" import { CameraIcon } from "icons" import React, { SetStateAction } from "react" import { useRecoilValue } from "recoil" @@ -10,7 +10,7 @@ import { v4 } from "uuid" import FeedSortingCard from "./FeedSortingCard" type Props = { - feedData: FeedData[] | undefined + feedData: FeedItems[] | undefined setIsCommentModalOpen: React.Dispatch> setIsFeedUploadModalOpen: React.Dispatch> setIsUserListModalOpen: React.Dispatch> diff --git a/firebase-practice/src/components/share/Feed/mypage/FeedSortingCard/Desc.tsx b/firebase-practice/src/components/share/Feed/mypage/FeedSortingCard/Desc.tsx index 4c4df2d..67cecb2 100644 --- a/firebase-practice/src/components/share/Feed/mypage/FeedSortingCard/Desc.tsx +++ b/firebase-practice/src/components/share/Feed/mypage/FeedSortingCard/Desc.tsx @@ -1,12 +1,12 @@ import { darkModeState, feedDataState } from "@share/recoil/recoilList" -import { FeedData } from "backend/dto" +import { FeedItems } from "backend/dto" import { SetStateAction } from "react" import { useRecoilValue, useSetRecoilState } from "recoil" import styled from "styled-components" import { CustomH5, CustomH5Light, CustomH6, FlexBox, Margin } from "ui" type Props = { - feedData: FeedData + feedData: FeedItems setIsCommentModalOpen: React.Dispatch> name: string | null | undefined } diff --git a/firebase-practice/src/components/share/Feed/mypage/FeedSortingCard/LikeCommentInfo.tsx b/firebase-practice/src/components/share/Feed/mypage/FeedSortingCard/LikeCommentInfo.tsx index 5d2614e..355df7b 100644 --- a/firebase-practice/src/components/share/Feed/mypage/FeedSortingCard/LikeCommentInfo.tsx +++ b/firebase-practice/src/components/share/Feed/mypage/FeedSortingCard/LikeCommentInfo.tsx @@ -5,7 +5,7 @@ import { userListState, } from "@share/recoil/recoilList" import axios from "axios" -import { FeedData } from "backend/dto" +import { FeedItems } from "backend/dto" import React, { SetStateAction, useCallback, useEffect, useState } from "react" import { useRecoilValue, useSetRecoilState } from "recoil" import { @@ -19,7 +19,7 @@ import { } from "ui" type Props = { - feedData: FeedData + feedData: FeedItems setIsCommentModalOpen: React.Dispatch> setIsLikeModalOpen: React.Dispatch> } diff --git a/firebase-practice/src/components/share/Feed/mypage/FeedSortingCard/ThreeDotMenu.tsx b/firebase-practice/src/components/share/Feed/mypage/FeedSortingCard/ThreeDotMenu.tsx index a028a93..89d71ba 100644 --- a/firebase-practice/src/components/share/Feed/mypage/FeedSortingCard/ThreeDotMenu.tsx +++ b/firebase-practice/src/components/share/Feed/mypage/FeedSortingCard/ThreeDotMenu.tsx @@ -4,7 +4,7 @@ import { feedDataState, userDataState, } from "@share/recoil/recoilList" -import { FeedData } from "backend/dto" +import { FeedItems } from "backend/dto" import { arrayRemove, arrayUnion, @@ -26,7 +26,7 @@ import { useRecoilValue, useSetRecoilState } from "recoil" import styled from "styled-components" type Props = { - feedData: FeedData + feedData: FeedItems setIsFeedUploadModalOpen: React.Dispatch> } @@ -151,7 +151,7 @@ export default function ThreeDotMenu({ } const handleDeleteFeed = async () => { - const feed: FeedData = { + const feed: FeedItems = { creator: feedData.creator, desc: feedData.desc, imageUrl: feedData.imageUrl, @@ -189,7 +189,7 @@ export default function ThreeDotMenu({ const handlePrivateToggle = async () => { const firestoreImageAllRef = doc(DBService, "mainPage", "userFeedDataAll") const firestorePersonalRef = doc(DBService, `users`, `${feedData.creator}`) - const feed: FeedData = { + const feed: FeedItems = { creator: feedData.creator, desc: feedData.desc, imageUrl: feedData.imageUrl, @@ -198,7 +198,7 @@ export default function ThreeDotMenu({ storageId: feedData.storageId, uploadTime: feedData.uploadTime, } - const toggleFeed: FeedData = { + const toggleFeed: FeedItems = { creator: feedData.creator, desc: feedData.desc, imageUrl: feedData.imageUrl, diff --git a/firebase-practice/src/components/share/Feed/mypage/FeedSortingCard/index.tsx b/firebase-practice/src/components/share/Feed/mypage/FeedSortingCard/index.tsx index a94f2e8..ebfc019 100644 --- a/firebase-practice/src/components/share/Feed/mypage/FeedSortingCard/index.tsx +++ b/firebase-practice/src/components/share/Feed/mypage/FeedSortingCard/index.tsx @@ -1,6 +1,6 @@ import { darkModeState, userDataState } from "@share/recoil/recoilList" import axios from "axios" -import { FeedData, UserData, UserInfo } from "backend/dto" +import { FeedItems, UserData, UserInfo } from "backend/dto" import { ProfileIcon } from "icons" import Image from "next/image" import { SetStateAction, useEffect, useState } from "react" @@ -12,7 +12,7 @@ import LikeCommentInfo from "./LikeCommentInfo" import ThreeDotMenu from "./ThreeDotMenu" type Props = { - feedData: FeedData + feedData: FeedItems setIsCommentModalOpen: React.Dispatch> setIsFeedUploadModalOpen: React.Dispatch> setIsLikeModalOpen: React.Dispatch> diff --git a/firebase-practice/src/components/share/Feed/profilepage/FeedGrid.tsx b/firebase-practice/src/components/share/Feed/profilepage/FeedGrid.tsx index 3cba996..8aabf04 100644 --- a/firebase-practice/src/components/share/Feed/profilepage/FeedGrid.tsx +++ b/firebase-practice/src/components/share/Feed/profilepage/FeedGrid.tsx @@ -1,4 +1,4 @@ -import { FeedData } from "backend/dto" +import { FeedItems } from "backend/dto" import styled from "styled-components" import FeedGridCard from "./FeedGridCard" import { v4 } from "uuid" @@ -6,7 +6,7 @@ import useWindowSize from "lib/hooks/useWindowSize" import { SetStateAction, useEffect, useState } from "react" type Props = { - feedDatas: FeedData[] | undefined + feedDatas: FeedItems[] | undefined setIsCommentModalOpen: React.Dispatch> } @@ -29,13 +29,13 @@ const Style = { export default function FeedGrid({ feedDatas, setIsCommentModalOpen }: Props) { const windowSize = useWindowSize() const [feedDataSortedByUploadTime, setFeedDataSortedByUploadTime] = useState< - FeedData[] + FeedItems[] >([]) useEffect(() => { if (feedDatas === undefined) return if (feedDatas.length >= 0) setFeedDataSortedByUploadTime( - (JSON.parse(JSON.stringify(feedDatas)) as FeedData[]).sort(function ( + (JSON.parse(JSON.stringify(feedDatas)) as FeedItems[]).sort(function ( a, b, ) { diff --git a/firebase-practice/src/components/share/Feed/profilepage/FeedGridCard.tsx b/firebase-practice/src/components/share/Feed/profilepage/FeedGridCard.tsx index 93e38e5..eacc347 100644 --- a/firebase-practice/src/components/share/Feed/profilepage/FeedGridCard.tsx +++ b/firebase-practice/src/components/share/Feed/profilepage/FeedGridCard.tsx @@ -1,13 +1,13 @@ import { feedDataState } from "@share/recoil/recoilList" import axios from "axios" -import { Comment, FeedData } from "backend/dto" +import { Comment, FeedItems } from "backend/dto" import { SetStateAction, useEffect, useState } from "react" import { useSetRecoilState } from "recoil" import styled from "styled-components" import { Margin } from "ui" type Props = { - feedData: FeedData + feedData: FeedItems setIsCommentModalOpen: React.Dispatch> } diff --git a/firebase-practice/src/components/share/Modal/comment/CommentList.tsx b/firebase-practice/src/components/share/Modal/comment/CommentList.tsx index a40bdef..62eaf0e 100644 --- a/firebase-practice/src/components/share/Modal/comment/CommentList.tsx +++ b/firebase-practice/src/components/share/Modal/comment/CommentList.tsx @@ -1,4 +1,4 @@ -import { FeedData, UserData, Comment } from "backend/dto" +import { FeedItems, UserData, Comment } from "backend/dto" import Image from "next/image" import { useRouter } from "next/router" import { useEffect, useState } from "react" @@ -14,7 +14,7 @@ import axios from "axios" import Loading from "@share/Loading/Loading" type Props = { - feedData: FeedData + feedData: FeedItems commentAreaRef: React.RefObject } diff --git a/firebase-practice/src/components/share/Modal/comment/CommentModal.tsx b/firebase-practice/src/components/share/Modal/comment/CommentModal.tsx index 07a67f5..d5c5bb8 100644 --- a/firebase-practice/src/components/share/Modal/comment/CommentModal.tsx +++ b/firebase-practice/src/components/share/Modal/comment/CommentModal.tsx @@ -1,4 +1,4 @@ -import { FeedData } from "backend/dto" +import { FeedItems } from "backend/dto" import React, { SetStateAction, useEffect, useRef } from "react" import styled from "styled-components" import YoungstagramModal from "../YoungstagramModal" @@ -11,7 +11,7 @@ import Loading from "@share/Loading/Loading" type Props = { isOpen: boolean setIsOpen: React.Dispatch> - feedData: FeedData + feedData: FeedItems } const Style = { diff --git a/firebase-practice/src/components/share/Modal/comment/Input.tsx b/firebase-practice/src/components/share/Modal/comment/Input.tsx index 499aed2..015446d 100644 --- a/firebase-practice/src/components/share/Modal/comment/Input.tsx +++ b/firebase-practice/src/components/share/Modal/comment/Input.tsx @@ -1,6 +1,6 @@ import { authService, DBService } from "@FireBase" import { darkModeState } from "@share/recoil/recoilList" -import { Comment, FeedData } from "backend/dto" +import { Comment, FeedItems } from "backend/dto" import { arrayUnion, doc, setDoc, updateDoc } from "firebase/firestore" import getCurrentTime from "lib/getCurrentTime" import { useCallback, useState } from "react" @@ -9,7 +9,7 @@ import styled from "styled-components" import { v4 } from "uuid" type Props = { - feedData: FeedData + feedData: FeedItems inputRef: React.RefObject commentAreaRef: React.RefObject } diff --git a/firebase-practice/src/components/share/Modal/feed/FeedUploadModal.tsx b/firebase-practice/src/components/share/Modal/feed/FeedUploadModal.tsx index 22824cc..64aa408 100644 --- a/firebase-practice/src/components/share/Modal/feed/FeedUploadModal.tsx +++ b/firebase-practice/src/components/share/Modal/feed/FeedUploadModal.tsx @@ -1,6 +1,6 @@ import { SetStateAction, useState } from "react" import ModalForImageUpload from "./ModalForFeedUpload" -import { FeedData } from "backend/dto" +import { FeedItems } from "backend/dto" import useWindowSize from "lib/hooks/useWindowSize" import TextInput from "./TextInput" import ImageInput from "./ImageInput" @@ -8,7 +8,7 @@ import ImageInput from "./ImageInput" type Props = { isOpen: boolean setIsOpen: React.Dispatch> - feedData?: FeedData + feedData?: FeedItems } export default function FeedUploadModal({ diff --git a/firebase-practice/src/components/share/Modal/feed/ImageInput.tsx b/firebase-practice/src/components/share/Modal/feed/ImageInput.tsx index 37f6c6d..ee439fb 100644 --- a/firebase-practice/src/components/share/Modal/feed/ImageInput.tsx +++ b/firebase-practice/src/components/share/Modal/feed/ImageInput.tsx @@ -1,5 +1,5 @@ import { darkModeState } from "@share/recoil/recoilList" -import { FeedData } from "backend/dto" +import { FeedItems } from "backend/dto" import { SetStateAction, useEffect } from "react" import { useDropzone } from "react-dropzone" import { useRecoilValue } from "recoil" @@ -7,7 +7,7 @@ import styled from "styled-components" import { CustomH3, FeedUPloadModalIcon, FlexBox, Margin } from "ui" type Props = { - feedData?: FeedData + feedData?: FeedItems setIsFileExist: React.Dispatch> setImagePreviewSrc: React.Dispatch> setImageFile: React.Dispatch> diff --git a/firebase-practice/src/components/share/Modal/feed/TextInput.tsx b/firebase-practice/src/components/share/Modal/feed/TextInput.tsx index 83207e2..b737782 100644 --- a/firebase-practice/src/components/share/Modal/feed/TextInput.tsx +++ b/firebase-practice/src/components/share/Modal/feed/TextInput.tsx @@ -1,6 +1,6 @@ import { authService, DBService, storageService } from "@FireBase" import { darkModeState, userDataState } from "@share/recoil/recoilList" -import { FeedData } from "backend/dto" +import { FeedItems } from "backend/dto" import { arrayRemove, arrayUnion, @@ -19,7 +19,7 @@ import { CustomH5, FlexBox, Margin } from "ui" import { v4 } from "uuid" type Props = { - feedData?: FeedData + feedData?: FeedItems imagePreviewSrc: string setIsOpen: React.Dispatch> imageFile: File | undefined @@ -200,7 +200,7 @@ export default function TextInput({ } const uploadToFirestore = async (downloadUrl: string) => { - const feed: FeedData = { + const feed: FeedItems = { imageUrl: downloadUrl, desc: desc, location: location, @@ -255,7 +255,7 @@ export default function TextInput({ "users", `${authService.currentUser?.uid}`, ) - const feed: FeedData = { + const feed: FeedItems = { imageUrl: feedData.imageUrl, desc: feedData.desc, location: feedData.location, diff --git a/firebase-practice/src/components/share/recoil/feed.ts b/firebase-practice/src/components/share/recoil/feed.ts new file mode 100644 index 0000000..8a369e3 --- /dev/null +++ b/firebase-practice/src/components/share/recoil/feed.ts @@ -0,0 +1,24 @@ +import { FeedItems } from "backend/dto" +import { atom } from "recoil" + +export const mainFeedItems = atom({ + key: "mainFeedItemsKey", + default: [], + effects: [ + ({ setSelf, trigger }) => { + const getFeedItems = async () => { + const feedItems = await fetch("/api/feed", { + method: "GET", + }).then((response) => response.json()) + + feedItems.sort(function (a, b) { + return Number(b.uploadTime) - Number(a.uploadTime) + }) + + setSelf(feedItems) + } + + if (trigger === "get") getFeedItems() + }, + ], +}) diff --git a/firebase-practice/src/components/share/recoil/recoilList.tsx b/firebase-practice/src/components/share/recoil/recoilList.tsx index 04955b3..811e6db 100644 --- a/firebase-practice/src/components/share/recoil/recoilList.tsx +++ b/firebase-practice/src/components/share/recoil/recoilList.tsx @@ -1,5 +1,5 @@ import { atom } from "recoil" -import { FeedData, UserData } from "backend/dto" +import { FeedItems, UserData } from "backend/dto" export const userDataState = atom({ key: "USERDATAATOM", @@ -21,7 +21,7 @@ export const FeedDataFilter = atom<"all" | "public" | "private">({ default: "all", }) -export const feedDataState = atom({ +export const feedDataState = atom({ key: "FEEDDATAATOM", default: { imageUrl: "", diff --git a/firebase-practice/src/lib/hooks/useAuth.ts b/firebase-practice/src/lib/hooks/useAuth.ts index f669db7..24cf5b8 100644 --- a/firebase-practice/src/lib/hooks/useAuth.ts +++ b/firebase-practice/src/lib/hooks/useAuth.ts @@ -133,7 +133,6 @@ export const useAuth = () => { } const handleGitHubAuth = async () => { - setIsLogin(true) signInWithPopup(authService, githubProvider) .then((response) => { if (response) { From 2ee6006152274f9eef4e77f98e6b99c3b7a36552 Mon Sep 17 00:00:00 2001 From: kyw0716 Date: Tue, 13 Jun 2023 23:34:04 +0900 Subject: [PATCH 16/28] =?UTF-8?q?feat:=20=ED=94=BC=EB=93=9C=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80=20=EB=82=99=EA=B4=80=EC=A0=81=20=EC=97=85=EB=8D=B0?= =?UTF-8?q?=EC=9D=B4=ED=8A=B8=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- firebase-practice/pages/index.tsx | 4 +- .../components/share/Modal/feed/TextInput.tsx | 141 +++------------- .../src/components/share/recoil/feed.ts | 2 +- .../src/lib/hooks/useFeedUploadModal.ts | 153 ++++++++++++++++++ 4 files changed, 176 insertions(+), 124 deletions(-) create mode 100644 firebase-practice/src/lib/hooks/useFeedUploadModal.ts diff --git a/firebase-practice/pages/index.tsx b/firebase-practice/pages/index.tsx index b8f5a3b..a8c17f9 100644 --- a/firebase-practice/pages/index.tsx +++ b/firebase-practice/pages/index.tsx @@ -14,12 +14,12 @@ import { useRouter } from "next/router" import CommentModal from "@share/Modal/comment/CommentModal" import UserListModal from "@share/Modal/userList/UserListModal" import Loading from "@share/Loading/Loading" -import { mainFeedItems } from "@share/recoil/feed" +import { mainFeedItemsAtom } from "@share/recoil/feed" const Home: NextPage = () => { const router = useRouter() - const feedData = useRecoilValue(mainFeedItems) + const feedData = useRecoilValue(mainFeedItemsAtom) const currentUserData = useRecoilValue(userDataState) diff --git a/firebase-practice/src/components/share/Modal/feed/TextInput.tsx b/firebase-practice/src/components/share/Modal/feed/TextInput.tsx index b737782..2ab22a5 100644 --- a/firebase-practice/src/components/share/Modal/feed/TextInput.tsx +++ b/firebase-practice/src/components/share/Modal/feed/TextInput.tsx @@ -1,22 +1,13 @@ -import { authService, DBService, storageService } from "@FireBase" +import { authService } from "@FireBase" import { darkModeState, userDataState } from "@share/recoil/recoilList" import { FeedItems } from "backend/dto" -import { - arrayRemove, - arrayUnion, - doc, - setDoc, - updateDoc, -} from "firebase/firestore" -import { getDownloadURL, ref, uploadBytes } from "firebase/storage" import { LocationIcon, ProfileIcon } from "icons" -import getCurrentTime from "lib/getCurrentTime" +import { useFeedUploadModal } from "lib/hooks/useFeedUploadModal" import Image from "next/image" -import React, { SetStateAction, useEffect, useState } from "react" +import React, { SetStateAction } from "react" import { useRecoilValue } from "recoil" import styled from "styled-components" import { CustomH5, FlexBox, Margin } from "ui" -import { v4 } from "uuid" type Props = { feedData?: FeedItems @@ -163,118 +154,26 @@ export default function TextInput({ setIsFileExist, }: Props) { const isDarkMode = useRecoilValue(darkModeState) - const [isSubmit, setIsSubmit] = useState(false) const currentUserData = useRecoilValue(userDataState) - const [desc, setDesc] = useState(feedData ? feedData.desc : "") - const [location, setLocation] = useState( - feedData ? feedData.location : "", + const { + isPrivate, + desc, + location, + isSubmit, + setIsSubmit, + EditToFireStore, + uploadToStorage, + setIsPrivate, + setLocation, + setDesc, + } = useFeedUploadModal( + feedData, + imageFile, + setImageFile, + setIsFileExist, + setIsOpen, ) - const [isPrivate, setIsPrivate] = useState( - feedData ? feedData.isPrivate : false, - ) - const [randomId, setRandomId] = useState( - feedData ? feedData.storageId : "", - ) - - useEffect(() => { - setRandomId(v4()) - }, []) - - const uploadToStorage = async () => { - const storageRef = ref( - storageService, - `images/${authService.currentUser?.uid}/${randomId}`, - ) - if (imageFile !== undefined) - await uploadBytes(storageRef, imageFile) - .then( - async () => - await getDownloadURL(storageRef).then(async (response) => { - uploadToFirestore(response) - }), - ) - .catch((error) => { - console.log(error.code) - }) - } - - const uploadToFirestore = async (downloadUrl: string) => { - const feed: FeedItems = { - imageUrl: downloadUrl, - desc: desc, - location: location, - isPrivate: isPrivate, - storageId: feedData?.storageId ? feedData.storageId : randomId, - uploadTime: feedData?.uploadTime ? feedData.uploadTime : getCurrentTime(), - creator: `${authService.currentUser?.uid}`, - } - const firestoreAllRef = doc(DBService, "mainPage", `userFeedDataAll`) - const firestorePersonalRef = doc( - DBService, - "users", - `${authService.currentUser?.uid}`, - ) - await updateDoc(firestoreAllRef, { - feed: arrayUnion(feed), - }) - .catch(async (error) => { - if (error.code === "not-found") { - await setDoc(firestoreAllRef, { - feed: [feed], - }) - } - }) - .then(() => { - setIsOpen(false) - setIsSubmit(false) - if (feedData) return - setDesc("") - setIsPrivate(false) - setLocation("") - setRandomId(v4()) - setImageFile(undefined) - setIsFileExist(false) - }) - await updateDoc(firestorePersonalRef, { - feed: arrayUnion(feed), - }).catch(async (error) => { - if (error.code === "not-found") { - await setDoc(firestorePersonalRef, { - feed: [feed], - }) - } - }) - } - - const EditToFireStore = async () => { - if (feedData === undefined) return - const firestoreAllRef = doc(DBService, "mainPage", `userFeedDataAll`) - const firestorePersonalRef = doc( - DBService, - "users", - `${authService.currentUser?.uid}`, - ) - const feed: FeedItems = { - imageUrl: feedData.imageUrl, - desc: feedData.desc, - location: feedData.location, - isPrivate: feedData.isPrivate, - storageId: feedData.storageId, - uploadTime: feedData.uploadTime, - creator: feedData.creator, - } - await updateDoc(firestorePersonalRef, { - feed: arrayRemove(feed), - }).catch((error) => console.log(error.code)) - await updateDoc(firestoreAllRef, { - feed: arrayRemove(feed), - }) - .then(async () => { - await uploadToFirestore(feedData.imageUrl) - }) - .catch((error) => console.log(error.code)) - } return ( diff --git a/firebase-practice/src/components/share/recoil/feed.ts b/firebase-practice/src/components/share/recoil/feed.ts index 8a369e3..b3cad16 100644 --- a/firebase-practice/src/components/share/recoil/feed.ts +++ b/firebase-practice/src/components/share/recoil/feed.ts @@ -1,7 +1,7 @@ import { FeedItems } from "backend/dto" import { atom } from "recoil" -export const mainFeedItems = atom({ +export const mainFeedItemsAtom = atom({ key: "mainFeedItemsKey", default: [], effects: [ diff --git a/firebase-practice/src/lib/hooks/useFeedUploadModal.ts b/firebase-practice/src/lib/hooks/useFeedUploadModal.ts new file mode 100644 index 0000000..cedaec5 --- /dev/null +++ b/firebase-practice/src/lib/hooks/useFeedUploadModal.ts @@ -0,0 +1,153 @@ +import { DBService, authService, storageService } from "@FireBase" +import { mainFeedItemsAtom } from "@share/recoil/feed" +import { userDataState } from "@share/recoil/recoilList" +import { FeedItems } from "backend/dto" +import { + arrayRemove, + arrayUnion, + doc, + setDoc, + updateDoc, +} from "firebase/firestore" +import { getDownloadURL, ref, uploadBytes } from "firebase/storage" +import getCurrentTime from "lib/getCurrentTime" +import { SetStateAction, useState } from "react" +import { useSetRecoilState } from "recoil" +import { v4 } from "uuid" + +export const useFeedUploadModal = ( + feedData: FeedItems | undefined, + imageFile: File | undefined, + setImageFile: React.Dispatch>, + setIsFileExist: React.Dispatch>, + setIsOpen: (isOpen: boolean) => void, +) => { + const randomId = v4() + + const setMainFeedItems = useSetRecoilState(mainFeedItemsAtom) + + const [isSubmit, setIsSubmit] = useState(false) + const [desc, setDesc] = useState(feedData ? feedData.desc : "") + const [location, setLocation] = useState(feedData ? feedData.location : "") + const [isPrivate, setIsPrivate] = useState( + feedData ? feedData.isPrivate : false, + ) + + const uploadToStorage = async () => { + const storageRef = ref( + storageService, + `images/${authService.currentUser?.uid}/${randomId}`, + ) + if (imageFile !== undefined) + await uploadBytes(storageRef, imageFile) + .then( + async () => + await getDownloadURL(storageRef).then(async (response) => { + uploadToFirestore(response) + }), + ) + .catch((error) => { + console.log(error.code) + }) + } + + const uploadToFirestore = async (downloadUrl: string) => { + const feed: FeedItems = { + imageUrl: downloadUrl, + desc: desc, + location: location, + isPrivate: isPrivate, + storageId: feedData?.storageId ? feedData.storageId : randomId, + uploadTime: feedData?.uploadTime ? feedData.uploadTime : getCurrentTime(), + creator: `${authService.currentUser?.uid}`, + } + + setMainFeedItems((feedItems) => [feed, ...feedItems]) + + const firestoreAllRef = doc(DBService, "mainPage", `userFeedDataAll`) + const firestorePersonalRef = doc( + DBService, + "users", + `${authService.currentUser?.uid}`, + ) + await updateDoc(firestoreAllRef, { + feed: arrayUnion(feed), + }) + .catch(async (error) => { + if (error.code === "not-found") { + await setDoc(firestoreAllRef, { + feed: [feed], + }) + } + }) + .then(() => { + setIsOpen(false) + setIsSubmit(false) + if (feedData) return + setDesc("") + setIsPrivate(false) + setLocation("") + setImageFile(undefined) + setIsFileExist(false) + }) + await updateDoc(firestorePersonalRef, { + feed: arrayUnion(feed), + }).catch(async (error) => { + if (error.code === "not-found") { + await setDoc(firestorePersonalRef, { + feed: [feed], + }) + } + }) + } + + const EditToFireStore = async () => { + if (feedData === undefined) return + const firestoreAllRef = doc(DBService, "mainPage", `userFeedDataAll`) + const firestorePersonalRef = doc( + DBService, + "users", + `${authService.currentUser?.uid}`, + ) + const feed: FeedItems = { + imageUrl: feedData.imageUrl, + desc: feedData.desc, + location: feedData.location, + isPrivate: feedData.isPrivate, + storageId: feedData.storageId, + uploadTime: feedData.uploadTime, + creator: feedData.creator, + } + + setMainFeedItems((feedItems) => + feedItems.map((feedItem) => { + if (feedItem.storageId === feed.storageId) return feed + return feedItem + }), + ) + + await updateDoc(firestorePersonalRef, { + feed: arrayRemove(feed), + }).catch((error) => console.log(error.code)) + await updateDoc(firestoreAllRef, { + feed: arrayRemove(feed), + }) + .then(async () => { + await uploadToFirestore(feedData.imageUrl) + }) + .catch((error) => console.log(error.code)) + } + + return { + isPrivate, + desc, + location, + isSubmit, + setIsSubmit, + EditToFireStore, + uploadToStorage, + setIsPrivate, + setLocation, + setDesc, + } +} From 58d92a3d6ff63e6f57387ae23a5a0af6c0b457ff Mon Sep 17 00:00:00 2001 From: kyw0716 Date: Tue, 13 Jun 2023 23:58:38 +0900 Subject: [PATCH 17/28] =?UTF-8?q?style:=20=ED=83=80=EC=9E=85=20=EC=9D=B4?= =?UTF-8?q?=EB=A6=84=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- firebase-practice/pages/api/feed.ts | 16 ++-- firebase-practice/pages/mypage.tsx | 4 +- firebase-practice/pages/profile/[id].tsx | 4 +- firebase-practice/src/backend/dto.d.ts | 4 +- .../share/Feed/mainPage/FeedCard/Desc.tsx | 4 +- .../share/Feed/mainPage/FeedCard/Icons.tsx | 4 +- .../mainPage/FeedCard/LikeCommentInfo.tsx | 4 +- .../share/Feed/mainPage/FeedCard/index.tsx | 4 +- .../share/Feed/mainPage/FeedList.tsx | 4 +- .../share/Feed/mypage/FeedSortList.tsx | 4 +- .../Feed/mypage/FeedSortingCard/Desc.tsx | 4 +- .../FeedSortingCard/LikeCommentInfo.tsx | 4 +- .../mypage/FeedSortingCard/ThreeDotMenu.tsx | 10 +-- .../Feed/mypage/FeedSortingCard/index.tsx | 4 +- .../share/Feed/profilepage/FeedGrid.tsx | 8 +- .../share/Feed/profilepage/FeedGridCard.tsx | 4 +- .../share/Modal/comment/CommentList.tsx | 4 +- .../share/Modal/comment/CommentModal.tsx | 4 +- .../components/share/Modal/comment/Input.tsx | 4 +- .../share/Modal/feed/FeedUploadModal.tsx | 4 +- .../share/Modal/feed/ImageInput.tsx | 4 +- .../components/share/Modal/feed/TextInput.tsx | 43 +++++----- .../src/components/share/recoil/feed.ts | 6 +- .../components/share/recoil/recoilList.tsx | 4 +- .../src/lib/hooks/useFeedUploadModal.ts | 82 ++++++++++--------- 25 files changed, 126 insertions(+), 115 deletions(-) diff --git a/firebase-practice/pages/api/feed.ts b/firebase-practice/pages/api/feed.ts index 09c84fa..10440ba 100644 --- a/firebase-practice/pages/api/feed.ts +++ b/firebase-practice/pages/api/feed.ts @@ -1,5 +1,5 @@ import { DBService } from "@FireBase" -import { FeedItems } from "backend/dto" +import { FeedItem } from "backend/dto" import { arrayRemove, arrayUnion, @@ -35,14 +35,14 @@ import type { NextApiRequest, NextApiResponse } from "next" export default async function getFeed( req: NextApiRequest, - res: NextApiResponse, + res: NextApiResponse, ) { if (req.method === "GET") { const getFeedRef = doc(DBService, "mainPage", "userFeedDataAll") const docSnapShot = await getDoc(getFeedRef) if (docSnapShot.exists()) { - const data = docSnapShot.data()?.feed as FeedItems[] + const data = docSnapShot.data()?.feed as FeedItem[] res .status(200) .json( @@ -71,7 +71,7 @@ export default async function getFeed( const firestorePersonalRef = doc(DBService, "users", `${creator}`) if (!uploadTime) { - const feed: FeedItems = { + const feed: FeedItem = { imageUrl: imageUrl, desc: desc, location: location, @@ -107,7 +107,7 @@ export default async function getFeed( res.status(200).json("Success") } else { - const feedToRemove: FeedItems = { + const feedToRemove: FeedItem = { imageUrl: imageUrl, desc: desc, location: location, @@ -116,7 +116,7 @@ export default async function getFeed( creator: creator, uploadTime: uploadTime, } - const newFeed: FeedItems = { + const newFeed: FeedItem = { imageUrl: imageUrl, desc: newDesc, location: newLocation, @@ -155,12 +155,12 @@ export default async function getFeed( storageId, creator, uploadTime, - } = req.body as FeedItems + } = req.body as FeedItem const firestoreAllRef = doc(DBService, "mainPage", `userFeedDataAll`) const firestorePersonalRef = doc(DBService, "users", `${creator}`) - const feed: FeedItems = { + const feed: FeedItem = { imageUrl: imageUrl, desc: desc, location: location, diff --git a/firebase-practice/pages/mypage.tsx b/firebase-practice/pages/mypage.tsx index 978f618..6d1be44 100644 --- a/firebase-practice/pages/mypage.tsx +++ b/firebase-practice/pages/mypage.tsx @@ -3,7 +3,7 @@ import FeedSortList from "@share/Feed/mypage/FeedSortList" import ProfileHeader from "@feature/profile/mypage" import styled from "styled-components" import Layout from "components/layout" -import { FeedItems } from "backend/dto" +import { FeedItem } from "backend/dto" import { useRecoilValue } from "recoil" import { FeedDataFilter, @@ -34,7 +34,7 @@ export default function Profile() { const currentUserData = useRecoilValue(userDataState) const feedDataType = useRecoilValue(FeedDataFilter) - const [feedData, setFeedData] = useState([]) + const [feedData, setFeedData] = useState([]) const selectedFeedData = useRecoilValue(feedDataState) const [isCommentModalOpen, setIsCommentModalOpen] = useState(false) diff --git a/firebase-practice/pages/profile/[id].tsx b/firebase-practice/pages/profile/[id].tsx index bc7faae..f2f4758 100644 --- a/firebase-practice/pages/profile/[id].tsx +++ b/firebase-practice/pages/profile/[id].tsx @@ -5,7 +5,7 @@ import ProfileHeader from "@feature/profile/customerProfile" import styled from "styled-components" import { Margin } from "ui" import Layout from "components/layout" -import { FeedItems, UserData } from "backend/dto" +import { FeedItem, UserData } from "backend/dto" import { useRouter } from "next/router" import FeedGrid from "@share/Feed/profilepage/FeedGrid" import { useRecoilValue } from "recoil" @@ -31,7 +31,7 @@ const Style = { export default function Profile({ userId }: Props) { const router = useRouter() const [userData, setUserData] = useState() - const [feedData, setFeedData] = useState() + const [feedData, setFeedData] = useState() const selectedFeedData = useRecoilValue(feedDataState) const [isCommentModalOpen, setIsCommentModalOpen] = useState(false) const [isUserListModalOpen, setIsUserListModalOpen] = useState(false) diff --git a/firebase-practice/src/backend/dto.d.ts b/firebase-practice/src/backend/dto.d.ts index 3159ced..f498a84 100644 --- a/firebase-practice/src/backend/dto.d.ts +++ b/firebase-practice/src/backend/dto.d.ts @@ -8,7 +8,7 @@ * @creator 피드를 올린 사람의 userId * @uploadTime 피드의 업로드 시간 (components/lib/getCurrentTime.tsx 사용) */ -export type FeedItems = { +export type FeedItem = { imageUrl: string desc: string location: string @@ -52,5 +52,5 @@ export type UserData = { info: UserInfo follow: string[] follower: string[] - feed: FeedItems[] + feed: FeedItem[] } diff --git a/firebase-practice/src/components/share/Feed/mainPage/FeedCard/Desc.tsx b/firebase-practice/src/components/share/Feed/mainPage/FeedCard/Desc.tsx index b87aa7f..53ab304 100644 --- a/firebase-practice/src/components/share/Feed/mainPage/FeedCard/Desc.tsx +++ b/firebase-practice/src/components/share/Feed/mainPage/FeedCard/Desc.tsx @@ -1,12 +1,12 @@ import { darkModeState, feedDataState } from "@share/recoil/recoilList" -import { FeedItems } from "backend/dto" +import { FeedItem } from "backend/dto" import { SetStateAction } from "react" import { useRecoilValue, useSetRecoilState } from "recoil" import styled from "styled-components" import { CustomH5, CustomH5Light, CustomH6, FlexBox, Margin } from "ui" type Props = { - feedData: FeedItems + feedData: FeedItem setIsCommentModalOpen: React.Dispatch> name: string | null } diff --git a/firebase-practice/src/components/share/Feed/mainPage/FeedCard/Icons.tsx b/firebase-practice/src/components/share/Feed/mainPage/FeedCard/Icons.tsx index 2b75c56..bc3ffae 100644 --- a/firebase-practice/src/components/share/Feed/mainPage/FeedCard/Icons.tsx +++ b/firebase-practice/src/components/share/Feed/mainPage/FeedCard/Icons.tsx @@ -1,5 +1,5 @@ import { feedDataState } from "@share/recoil/recoilList" -import { FeedItems } from "backend/dto" +import { FeedItem } from "backend/dto" import React, { SetStateAction } from "react" import { useSetRecoilState } from "recoil" import { @@ -13,7 +13,7 @@ import { type Props = { isCurrentUserLike: boolean - feedData: FeedItems + feedData: FeedItem setIsCommentModalOpen: React.Dispatch> } diff --git a/firebase-practice/src/components/share/Feed/mainPage/FeedCard/LikeCommentInfo.tsx b/firebase-practice/src/components/share/Feed/mainPage/FeedCard/LikeCommentInfo.tsx index cd320ef..5e531f2 100644 --- a/firebase-practice/src/components/share/Feed/mainPage/FeedCard/LikeCommentInfo.tsx +++ b/firebase-practice/src/components/share/Feed/mainPage/FeedCard/LikeCommentInfo.tsx @@ -5,7 +5,7 @@ import { userListState, } from "@share/recoil/recoilList" import axios from "axios" -import { Comment, FeedItems } from "backend/dto" +import { Comment, FeedItem } from "backend/dto" import React, { SetStateAction, useEffect, useState } from "react" import { useRecoilValue, useSetRecoilState } from "recoil" import { @@ -19,7 +19,7 @@ import { } from "ui" type Props = { - feedData: FeedItems + feedData: FeedItem setIsLikeModalOpen: React.Dispatch> setIsCommentModalOpen: React.Dispatch> } diff --git a/firebase-practice/src/components/share/Feed/mainPage/FeedCard/index.tsx b/firebase-practice/src/components/share/Feed/mainPage/FeedCard/index.tsx index 482209e..aa6c33e 100644 --- a/firebase-practice/src/components/share/Feed/mainPage/FeedCard/index.tsx +++ b/firebase-practice/src/components/share/Feed/mainPage/FeedCard/index.tsx @@ -1,5 +1,5 @@ import { darkModeState, userDataState } from "@share/recoil/recoilList" -import { FeedItems, UserData } from "backend/dto" +import { FeedItem, UserData } from "backend/dto" import Image from "next/image" import { useRouter } from "next/router" import { SetStateAction, useEffect, useState } from "react" @@ -13,7 +13,7 @@ import Link from "next/link" import axios from "axios" type Props = { - feedData: FeedItems + feedData: FeedItem setIsCommentModalOpen: React.Dispatch> setIsLikeModalOpen: React.Dispatch> } diff --git a/firebase-practice/src/components/share/Feed/mainPage/FeedList.tsx b/firebase-practice/src/components/share/Feed/mainPage/FeedList.tsx index d9e5daa..e79be57 100644 --- a/firebase-practice/src/components/share/Feed/mainPage/FeedList.tsx +++ b/firebase-practice/src/components/share/Feed/mainPage/FeedList.tsx @@ -1,4 +1,4 @@ -import { FeedItems } from "backend/dto" +import { FeedItem } from "backend/dto" import { CameraIcon } from "icons" import { SetStateAction } from "react" import styled from "styled-components" @@ -6,7 +6,7 @@ import { CustomH2Light, CustomH5Light } from "ui" import FeedCard from "./FeedCard" type Props = { - feedItems: FeedItems[] + feedItems: FeedItem[] setIsCommentModalOpen: React.Dispatch> setIsLikeModalOpen: React.Dispatch> } diff --git a/firebase-practice/src/components/share/Feed/mypage/FeedSortList.tsx b/firebase-practice/src/components/share/Feed/mypage/FeedSortList.tsx index 792bb3b..c712736 100644 --- a/firebase-practice/src/components/share/Feed/mypage/FeedSortList.tsx +++ b/firebase-practice/src/components/share/Feed/mypage/FeedSortList.tsx @@ -1,6 +1,6 @@ import Loading from "@share/Loading/Loading" import { darkModeState, userDataState } from "@share/recoil/recoilList" -import { FeedItems } from "backend/dto" +import { FeedItem } from "backend/dto" import { CameraIcon } from "icons" import React, { SetStateAction } from "react" import { useRecoilValue } from "recoil" @@ -10,7 +10,7 @@ import { v4 } from "uuid" import FeedSortingCard from "./FeedSortingCard" type Props = { - feedData: FeedItems[] | undefined + feedData: FeedItem[] | undefined setIsCommentModalOpen: React.Dispatch> setIsFeedUploadModalOpen: React.Dispatch> setIsUserListModalOpen: React.Dispatch> diff --git a/firebase-practice/src/components/share/Feed/mypage/FeedSortingCard/Desc.tsx b/firebase-practice/src/components/share/Feed/mypage/FeedSortingCard/Desc.tsx index 67cecb2..d77b6c3 100644 --- a/firebase-practice/src/components/share/Feed/mypage/FeedSortingCard/Desc.tsx +++ b/firebase-practice/src/components/share/Feed/mypage/FeedSortingCard/Desc.tsx @@ -1,12 +1,12 @@ import { darkModeState, feedDataState } from "@share/recoil/recoilList" -import { FeedItems } from "backend/dto" +import { FeedItem } from "backend/dto" import { SetStateAction } from "react" import { useRecoilValue, useSetRecoilState } from "recoil" import styled from "styled-components" import { CustomH5, CustomH5Light, CustomH6, FlexBox, Margin } from "ui" type Props = { - feedData: FeedItems + feedData: FeedItem setIsCommentModalOpen: React.Dispatch> name: string | null | undefined } diff --git a/firebase-practice/src/components/share/Feed/mypage/FeedSortingCard/LikeCommentInfo.tsx b/firebase-practice/src/components/share/Feed/mypage/FeedSortingCard/LikeCommentInfo.tsx index 355df7b..6399734 100644 --- a/firebase-practice/src/components/share/Feed/mypage/FeedSortingCard/LikeCommentInfo.tsx +++ b/firebase-practice/src/components/share/Feed/mypage/FeedSortingCard/LikeCommentInfo.tsx @@ -5,7 +5,7 @@ import { userListState, } from "@share/recoil/recoilList" import axios from "axios" -import { FeedItems } from "backend/dto" +import { FeedItem } from "backend/dto" import React, { SetStateAction, useCallback, useEffect, useState } from "react" import { useRecoilValue, useSetRecoilState } from "recoil" import { @@ -19,7 +19,7 @@ import { } from "ui" type Props = { - feedData: FeedItems + feedData: FeedItem setIsCommentModalOpen: React.Dispatch> setIsLikeModalOpen: React.Dispatch> } diff --git a/firebase-practice/src/components/share/Feed/mypage/FeedSortingCard/ThreeDotMenu.tsx b/firebase-practice/src/components/share/Feed/mypage/FeedSortingCard/ThreeDotMenu.tsx index 89d71ba..e8d6609 100644 --- a/firebase-practice/src/components/share/Feed/mypage/FeedSortingCard/ThreeDotMenu.tsx +++ b/firebase-practice/src/components/share/Feed/mypage/FeedSortingCard/ThreeDotMenu.tsx @@ -4,7 +4,7 @@ import { feedDataState, userDataState, } from "@share/recoil/recoilList" -import { FeedItems } from "backend/dto" +import { FeedItem } from "backend/dto" import { arrayRemove, arrayUnion, @@ -26,7 +26,7 @@ import { useRecoilValue, useSetRecoilState } from "recoil" import styled from "styled-components" type Props = { - feedData: FeedItems + feedData: FeedItem setIsFeedUploadModalOpen: React.Dispatch> } @@ -151,7 +151,7 @@ export default function ThreeDotMenu({ } const handleDeleteFeed = async () => { - const feed: FeedItems = { + const feed: FeedItem = { creator: feedData.creator, desc: feedData.desc, imageUrl: feedData.imageUrl, @@ -189,7 +189,7 @@ export default function ThreeDotMenu({ const handlePrivateToggle = async () => { const firestoreImageAllRef = doc(DBService, "mainPage", "userFeedDataAll") const firestorePersonalRef = doc(DBService, `users`, `${feedData.creator}`) - const feed: FeedItems = { + const feed: FeedItem = { creator: feedData.creator, desc: feedData.desc, imageUrl: feedData.imageUrl, @@ -198,7 +198,7 @@ export default function ThreeDotMenu({ storageId: feedData.storageId, uploadTime: feedData.uploadTime, } - const toggleFeed: FeedItems = { + const toggleFeed: FeedItem = { creator: feedData.creator, desc: feedData.desc, imageUrl: feedData.imageUrl, diff --git a/firebase-practice/src/components/share/Feed/mypage/FeedSortingCard/index.tsx b/firebase-practice/src/components/share/Feed/mypage/FeedSortingCard/index.tsx index ebfc019..99f5714 100644 --- a/firebase-practice/src/components/share/Feed/mypage/FeedSortingCard/index.tsx +++ b/firebase-practice/src/components/share/Feed/mypage/FeedSortingCard/index.tsx @@ -1,6 +1,6 @@ import { darkModeState, userDataState } from "@share/recoil/recoilList" import axios from "axios" -import { FeedItems, UserData, UserInfo } from "backend/dto" +import { FeedItem, UserData, UserInfo } from "backend/dto" import { ProfileIcon } from "icons" import Image from "next/image" import { SetStateAction, useEffect, useState } from "react" @@ -12,7 +12,7 @@ import LikeCommentInfo from "./LikeCommentInfo" import ThreeDotMenu from "./ThreeDotMenu" type Props = { - feedData: FeedItems + feedData: FeedItem setIsCommentModalOpen: React.Dispatch> setIsFeedUploadModalOpen: React.Dispatch> setIsLikeModalOpen: React.Dispatch> diff --git a/firebase-practice/src/components/share/Feed/profilepage/FeedGrid.tsx b/firebase-practice/src/components/share/Feed/profilepage/FeedGrid.tsx index 8aabf04..aa59e5b 100644 --- a/firebase-practice/src/components/share/Feed/profilepage/FeedGrid.tsx +++ b/firebase-practice/src/components/share/Feed/profilepage/FeedGrid.tsx @@ -1,4 +1,4 @@ -import { FeedItems } from "backend/dto" +import { FeedItem } from "backend/dto" import styled from "styled-components" import FeedGridCard from "./FeedGridCard" import { v4 } from "uuid" @@ -6,7 +6,7 @@ import useWindowSize from "lib/hooks/useWindowSize" import { SetStateAction, useEffect, useState } from "react" type Props = { - feedDatas: FeedItems[] | undefined + feedDatas: FeedItem[] | undefined setIsCommentModalOpen: React.Dispatch> } @@ -29,13 +29,13 @@ const Style = { export default function FeedGrid({ feedDatas, setIsCommentModalOpen }: Props) { const windowSize = useWindowSize() const [feedDataSortedByUploadTime, setFeedDataSortedByUploadTime] = useState< - FeedItems[] + FeedItem[] >([]) useEffect(() => { if (feedDatas === undefined) return if (feedDatas.length >= 0) setFeedDataSortedByUploadTime( - (JSON.parse(JSON.stringify(feedDatas)) as FeedItems[]).sort(function ( + (JSON.parse(JSON.stringify(feedDatas)) as FeedItem[]).sort(function ( a, b, ) { diff --git a/firebase-practice/src/components/share/Feed/profilepage/FeedGridCard.tsx b/firebase-practice/src/components/share/Feed/profilepage/FeedGridCard.tsx index eacc347..39ab530 100644 --- a/firebase-practice/src/components/share/Feed/profilepage/FeedGridCard.tsx +++ b/firebase-practice/src/components/share/Feed/profilepage/FeedGridCard.tsx @@ -1,13 +1,13 @@ import { feedDataState } from "@share/recoil/recoilList" import axios from "axios" -import { Comment, FeedItems } from "backend/dto" +import { Comment, FeedItem } from "backend/dto" import { SetStateAction, useEffect, useState } from "react" import { useSetRecoilState } from "recoil" import styled from "styled-components" import { Margin } from "ui" type Props = { - feedData: FeedItems + feedData: FeedItem setIsCommentModalOpen: React.Dispatch> } diff --git a/firebase-practice/src/components/share/Modal/comment/CommentList.tsx b/firebase-practice/src/components/share/Modal/comment/CommentList.tsx index 62eaf0e..e15d417 100644 --- a/firebase-practice/src/components/share/Modal/comment/CommentList.tsx +++ b/firebase-practice/src/components/share/Modal/comment/CommentList.tsx @@ -1,4 +1,4 @@ -import { FeedItems, UserData, Comment } from "backend/dto" +import { FeedItem, UserData, Comment } from "backend/dto" import Image from "next/image" import { useRouter } from "next/router" import { useEffect, useState } from "react" @@ -14,7 +14,7 @@ import axios from "axios" import Loading from "@share/Loading/Loading" type Props = { - feedData: FeedItems + feedData: FeedItem commentAreaRef: React.RefObject } diff --git a/firebase-practice/src/components/share/Modal/comment/CommentModal.tsx b/firebase-practice/src/components/share/Modal/comment/CommentModal.tsx index d5c5bb8..661284a 100644 --- a/firebase-practice/src/components/share/Modal/comment/CommentModal.tsx +++ b/firebase-practice/src/components/share/Modal/comment/CommentModal.tsx @@ -1,4 +1,4 @@ -import { FeedItems } from "backend/dto" +import { FeedItem } from "backend/dto" import React, { SetStateAction, useEffect, useRef } from "react" import styled from "styled-components" import YoungstagramModal from "../YoungstagramModal" @@ -11,7 +11,7 @@ import Loading from "@share/Loading/Loading" type Props = { isOpen: boolean setIsOpen: React.Dispatch> - feedData: FeedItems + feedData: FeedItem } const Style = { diff --git a/firebase-practice/src/components/share/Modal/comment/Input.tsx b/firebase-practice/src/components/share/Modal/comment/Input.tsx index 015446d..22c9fb0 100644 --- a/firebase-practice/src/components/share/Modal/comment/Input.tsx +++ b/firebase-practice/src/components/share/Modal/comment/Input.tsx @@ -1,6 +1,6 @@ import { authService, DBService } from "@FireBase" import { darkModeState } from "@share/recoil/recoilList" -import { Comment, FeedItems } from "backend/dto" +import { Comment, FeedItem } from "backend/dto" import { arrayUnion, doc, setDoc, updateDoc } from "firebase/firestore" import getCurrentTime from "lib/getCurrentTime" import { useCallback, useState } from "react" @@ -9,7 +9,7 @@ import styled from "styled-components" import { v4 } from "uuid" type Props = { - feedData: FeedItems + feedData: FeedItem inputRef: React.RefObject commentAreaRef: React.RefObject } diff --git a/firebase-practice/src/components/share/Modal/feed/FeedUploadModal.tsx b/firebase-practice/src/components/share/Modal/feed/FeedUploadModal.tsx index 64aa408..cb9cd31 100644 --- a/firebase-practice/src/components/share/Modal/feed/FeedUploadModal.tsx +++ b/firebase-practice/src/components/share/Modal/feed/FeedUploadModal.tsx @@ -1,6 +1,6 @@ import { SetStateAction, useState } from "react" import ModalForImageUpload from "./ModalForFeedUpload" -import { FeedItems } from "backend/dto" +import { FeedItem } from "backend/dto" import useWindowSize from "lib/hooks/useWindowSize" import TextInput from "./TextInput" import ImageInput from "./ImageInput" @@ -8,7 +8,7 @@ import ImageInput from "./ImageInput" type Props = { isOpen: boolean setIsOpen: React.Dispatch> - feedData?: FeedItems + feedData?: FeedItem } export default function FeedUploadModal({ diff --git a/firebase-practice/src/components/share/Modal/feed/ImageInput.tsx b/firebase-practice/src/components/share/Modal/feed/ImageInput.tsx index ee439fb..de3b1d5 100644 --- a/firebase-practice/src/components/share/Modal/feed/ImageInput.tsx +++ b/firebase-practice/src/components/share/Modal/feed/ImageInput.tsx @@ -1,5 +1,5 @@ import { darkModeState } from "@share/recoil/recoilList" -import { FeedItems } from "backend/dto" +import { FeedItem } from "backend/dto" import { SetStateAction, useEffect } from "react" import { useDropzone } from "react-dropzone" import { useRecoilValue } from "recoil" @@ -7,7 +7,7 @@ import styled from "styled-components" import { CustomH3, FeedUPloadModalIcon, FlexBox, Margin } from "ui" type Props = { - feedData?: FeedItems + feedData?: FeedItem setIsFileExist: React.Dispatch> setImagePreviewSrc: React.Dispatch> setImageFile: React.Dispatch> diff --git a/firebase-practice/src/components/share/Modal/feed/TextInput.tsx b/firebase-practice/src/components/share/Modal/feed/TextInput.tsx index 2ab22a5..0dfdf7d 100644 --- a/firebase-practice/src/components/share/Modal/feed/TextInput.tsx +++ b/firebase-practice/src/components/share/Modal/feed/TextInput.tsx @@ -1,16 +1,16 @@ import { authService } from "@FireBase" import { darkModeState, userDataState } from "@share/recoil/recoilList" -import { FeedItems } from "backend/dto" +import { FeedItem } from "backend/dto" import { LocationIcon, ProfileIcon } from "icons" import { useFeedUploadModal } from "lib/hooks/useFeedUploadModal" import Image from "next/image" -import React, { SetStateAction } from "react" +import React, { SetStateAction, useState } from "react" import { useRecoilValue } from "recoil" import styled from "styled-components" import { CustomH5, FlexBox, Margin } from "ui" type Props = { - feedData?: FeedItems + feedData?: FeedItem imagePreviewSrc: string setIsOpen: React.Dispatch> imageFile: File | undefined @@ -156,23 +156,26 @@ export default function TextInput({ const isDarkMode = useRecoilValue(darkModeState) const currentUserData = useRecoilValue(userDataState) - const { - isPrivate, - desc, - location, - isSubmit, - setIsSubmit, - EditToFireStore, - uploadToStorage, - setIsPrivate, - setLocation, - setDesc, - } = useFeedUploadModal( - feedData, + const [isSubmit, setIsSubmit] = useState(false) + const [desc, setDesc] = useState(feedData ? feedData.desc : "") + const [location, setLocation] = useState(feedData ? feedData.location : "") + const [isPrivate, setIsPrivate] = useState( + feedData ? feedData.isPrivate : false, + ) + + const resetInputs = () => { + setDesc("") + setIsPrivate(false) + setLocation("") + } + + const { EditToFireStore, uploadToStorage } = useFeedUploadModal( imageFile, setImageFile, setIsFileExist, setIsOpen, + resetInputs, + setIsSubmit, ) return ( @@ -192,10 +195,10 @@ export default function TextInput({ event.preventDefault() setIsSubmit(true) if (feedData) { - EditToFireStore() + EditToFireStore(desc, location, isPrivate) return } - uploadToStorage() + uploadToStorage(desc, location, isPrivate) }} > @@ -260,10 +263,10 @@ export default function TextInput({ onClick={() => { setIsSubmit(true) if (feedData) { - EditToFireStore() + EditToFireStore(desc, location, isPrivate, feedData) return } - uploadToStorage() + uploadToStorage(desc, location, isPrivate) }} about={isSubmit ? "none" : ""} > diff --git a/firebase-practice/src/components/share/recoil/feed.ts b/firebase-practice/src/components/share/recoil/feed.ts index b3cad16..bf0bc03 100644 --- a/firebase-practice/src/components/share/recoil/feed.ts +++ b/firebase-practice/src/components/share/recoil/feed.ts @@ -1,7 +1,7 @@ -import { FeedItems } from "backend/dto" +import { FeedItem } from "backend/dto" import { atom } from "recoil" -export const mainFeedItemsAtom = atom({ +export const mainFeedItemsAtom = atom({ key: "mainFeedItemsKey", default: [], effects: [ @@ -9,7 +9,7 @@ export const mainFeedItemsAtom = atom({ const getFeedItems = async () => { const feedItems = await fetch("/api/feed", { method: "GET", - }).then((response) => response.json()) + }).then((response) => response.json()) feedItems.sort(function (a, b) { return Number(b.uploadTime) - Number(a.uploadTime) diff --git a/firebase-practice/src/components/share/recoil/recoilList.tsx b/firebase-practice/src/components/share/recoil/recoilList.tsx index 811e6db..1289b34 100644 --- a/firebase-practice/src/components/share/recoil/recoilList.tsx +++ b/firebase-practice/src/components/share/recoil/recoilList.tsx @@ -1,5 +1,5 @@ import { atom } from "recoil" -import { FeedItems, UserData } from "backend/dto" +import { FeedItem, UserData } from "backend/dto" export const userDataState = atom({ key: "USERDATAATOM", @@ -21,7 +21,7 @@ export const FeedDataFilter = atom<"all" | "public" | "private">({ default: "all", }) -export const feedDataState = atom({ +export const feedDataState = atom({ key: "FEEDDATAATOM", default: { imageUrl: "", diff --git a/firebase-practice/src/lib/hooks/useFeedUploadModal.ts b/firebase-practice/src/lib/hooks/useFeedUploadModal.ts index cedaec5..ea3d0d6 100644 --- a/firebase-practice/src/lib/hooks/useFeedUploadModal.ts +++ b/firebase-practice/src/lib/hooks/useFeedUploadModal.ts @@ -1,7 +1,7 @@ import { DBService, authService, storageService } from "@FireBase" import { mainFeedItemsAtom } from "@share/recoil/feed" import { userDataState } from "@share/recoil/recoilList" -import { FeedItems } from "backend/dto" +import { FeedItem } from "backend/dto" import { arrayRemove, arrayUnion, @@ -16,24 +16,22 @@ import { useSetRecoilState } from "recoil" import { v4 } from "uuid" export const useFeedUploadModal = ( - feedData: FeedItems | undefined, imageFile: File | undefined, - setImageFile: React.Dispatch>, - setIsFileExist: React.Dispatch>, - setIsOpen: (isOpen: boolean) => void, + setImageFile?: React.Dispatch>, + setIsFileExist?: React.Dispatch>, + setIsOpen?: (isOpen: boolean) => void, + resetInputs?: () => void, + setIsSubmit?: React.Dispatch>, ) => { const randomId = v4() const setMainFeedItems = useSetRecoilState(mainFeedItemsAtom) - const [isSubmit, setIsSubmit] = useState(false) - const [desc, setDesc] = useState(feedData ? feedData.desc : "") - const [location, setLocation] = useState(feedData ? feedData.location : "") - const [isPrivate, setIsPrivate] = useState( - feedData ? feedData.isPrivate : false, - ) - - const uploadToStorage = async () => { + const uploadToStorage = async ( + desc: string, + location: string, + isPrivate: boolean, + ) => { const storageRef = ref( storageService, `images/${authService.currentUser?.uid}/${randomId}`, @@ -43,7 +41,7 @@ export const useFeedUploadModal = ( .then( async () => await getDownloadURL(storageRef).then(async (response) => { - uploadToFirestore(response) + uploadToFirestore(response, desc, location, isPrivate) }), ) .catch((error) => { @@ -51,14 +49,21 @@ export const useFeedUploadModal = ( }) } - const uploadToFirestore = async (downloadUrl: string) => { - const feed: FeedItems = { + const uploadToFirestore = async ( + downloadUrl: string, + desc: string, + location: string, + isPrivate: boolean, + storageId?: string, + uploadTime?: string, + ) => { + const feed: FeedItem = { imageUrl: downloadUrl, desc: desc, location: location, isPrivate: isPrivate, - storageId: feedData?.storageId ? feedData.storageId : randomId, - uploadTime: feedData?.uploadTime ? feedData.uploadTime : getCurrentTime(), + storageId: storageId ?? randomId, + uploadTime: uploadTime ?? getCurrentTime(), creator: `${authService.currentUser?.uid}`, } @@ -81,14 +86,13 @@ export const useFeedUploadModal = ( } }) .then(() => { - setIsOpen(false) - setIsSubmit(false) - if (feedData) return - setDesc("") - setIsPrivate(false) - setLocation("") - setImageFile(undefined) - setIsFileExist(false) + setIsOpen?.(false) + resetInputs?.() + setIsSubmit?.(false) + if (storageId) return + resetInputs?.() + setImageFile?.(undefined) + setIsFileExist?.(false) }) await updateDoc(firestorePersonalRef, { feed: arrayUnion(feed), @@ -101,7 +105,12 @@ export const useFeedUploadModal = ( }) } - const EditToFireStore = async () => { + const EditToFireStore = async ( + desc: string, + location: string, + isPrivate: boolean, + feedData?: FeedItem, + ) => { if (feedData === undefined) return const firestoreAllRef = doc(DBService, "mainPage", `userFeedDataAll`) const firestorePersonalRef = doc( @@ -109,7 +118,7 @@ export const useFeedUploadModal = ( "users", `${authService.currentUser?.uid}`, ) - const feed: FeedItems = { + const feed: FeedItem = { imageUrl: feedData.imageUrl, desc: feedData.desc, location: feedData.location, @@ -133,21 +142,20 @@ export const useFeedUploadModal = ( feed: arrayRemove(feed), }) .then(async () => { - await uploadToFirestore(feedData.imageUrl) + await uploadToFirestore( + feedData.imageUrl, + desc, + location, + isPrivate, + feedData.storageId, + feedData.uploadTime, + ) }) .catch((error) => console.log(error.code)) } return { - isPrivate, - desc, - location, - isSubmit, - setIsSubmit, EditToFireStore, uploadToStorage, - setIsPrivate, - setLocation, - setDesc, } } From 54b916c903ccaa87acc542c5f9362c2a0f6440d5 Mon Sep 17 00:00:00 2001 From: kyw0716 Date: Wed, 14 Jun 2023 16:29:50 +0900 Subject: [PATCH 18/28] =?UTF-8?q?feat:=20=ED=94=BC=EB=93=9C=20=EC=A0=95?= =?UTF-8?q?=EB=B3=B4=20=EC=88=98=EC=A0=95=20=EB=82=99=EA=B4=80=EC=A0=81=20?= =?UTF-8?q?=EC=97=85=EB=8D=B0=EC=9D=B4=ED=8A=B8=20=EC=A0=81=EC=9A=A9=20(?= =?UTF-8?q?=EC=82=AD=EC=A0=9C,=20=EB=B9=84=EA=B3=B5=EA=B0=9C=20=EC=97=AC?= =?UTF-8?q?=EB=B6=80=20=ED=86=A0=EA=B8=80)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- firebase-practice/pages/api/feed.ts | 54 ++-- .../share/Feed/mainPage/FeedList.tsx | 4 +- .../mypage/FeedSortingCard/ThreeDotMenu.tsx | 97 +------ .../components/share/Modal/feed/TextInput.tsx | 6 +- .../src/components/share/recoil/feed.ts | 4 - .../src/lib/hooks/useFeedCRUD.ts | 273 ++++++++++++++++++ .../src/lib/hooks/useFeedUploadModal.ts | 161 ----------- 7 files changed, 309 insertions(+), 290 deletions(-) create mode 100644 firebase-practice/src/lib/hooks/useFeedCRUD.ts delete mode 100644 firebase-practice/src/lib/hooks/useFeedUploadModal.ts diff --git a/firebase-practice/pages/api/feed.ts b/firebase-practice/pages/api/feed.ts index 10440ba..67a512a 100644 --- a/firebase-practice/pages/api/feed.ts +++ b/firebase-practice/pages/api/feed.ts @@ -45,11 +45,7 @@ export default async function getFeed( const data = docSnapShot.data()?.feed as FeedItem[] res .status(200) - .json( - data - .filter((feedItem) => !feedItem.isPrivate) - .sort((a, b) => Number(a.uploadTime) - Number(b.uploadTime)), - ) + .json(data.sort((a, b) => Number(b.uploadTime) - Number(a.uploadTime))) } else { res.status(500).json("Fail") } @@ -72,12 +68,12 @@ export default async function getFeed( if (!uploadTime) { const feed: FeedItem = { - imageUrl: imageUrl, - desc: desc, - location: location, - isPrivate: isPrivate, - storageId: storageId, - creator: creator, + imageUrl, + desc, + location, + isPrivate, + storageId, + creator, uploadTime: getCurrentTime(), } @@ -108,22 +104,22 @@ export default async function getFeed( res.status(200).json("Success") } else { const feedToRemove: FeedItem = { - imageUrl: imageUrl, - desc: desc, - location: location, - isPrivate: isPrivate, - storageId: storageId, - creator: creator, - uploadTime: uploadTime, + imageUrl, + desc, + location, + isPrivate, + storageId, + creator, + uploadTime, } const newFeed: FeedItem = { - imageUrl: imageUrl, + imageUrl, desc: newDesc, location: newLocation, isPrivate: newIsPrivate, - storageId: storageId, - creator: creator, - uploadTime: uploadTime, + storageId, + creator, + uploadTime, } await updateDoc(firestoreAllRef, { @@ -161,13 +157,13 @@ export default async function getFeed( const firestorePersonalRef = doc(DBService, "users", `${creator}`) const feed: FeedItem = { - imageUrl: imageUrl, - desc: desc, - location: location, - isPrivate: isPrivate, - storageId: storageId, - creator: creator, - uploadTime: uploadTime, + imageUrl, + desc, + location, + isPrivate, + storageId, + creator, + uploadTime, } await updateDoc(firestoreAllRef, { diff --git a/firebase-practice/src/components/share/Feed/mainPage/FeedList.tsx b/firebase-practice/src/components/share/Feed/mainPage/FeedList.tsx index e79be57..5472565 100644 --- a/firebase-practice/src/components/share/Feed/mainPage/FeedList.tsx +++ b/firebase-practice/src/components/share/Feed/mainPage/FeedList.tsx @@ -37,9 +37,7 @@ export default function FeedList({ {feedItems.length !== 0 ? ( feedItems - // .sort(function (a, b) { - // return Number(b.uploadTime) - Number(a.uploadTime) - // }) + .filter((feed) => !feed.isPrivate) .map((data, index) => { return ( !current) } - const handleDeleteFeed = async () => { - const feed: FeedItem = { - creator: feedData.creator, - desc: feedData.desc, - imageUrl: feedData.imageUrl, - location: feedData.location, - isPrivate: feedData.isPrivate, - storageId: feedData.storageId, - uploadTime: feedData.uploadTime, - } - const storageImageRef = ref( - storageService, - `images/${feedData.creator}/${feedData.storageId}`, - ) - const firestoreAllRef = doc(DBService, "mainPage", "userFeedDataAll") - const firestoreCommentRef = doc(DBService, "Comments", feedData.storageId) - const firestorePersonalRef = doc(DBService, `users`, `${feedData.creator}`) - const firestoreLikeRef = doc(DBService, "like", feedData.storageId) - - handleThreeDotMenuClick() - - await updateDoc(firestorePersonalRef, { - feed: arrayRemove(feed), - }).catch((error) => console.log(error.code)) - await updateDoc(firestoreAllRef, { - feed: arrayRemove(feed), - }).catch((error) => console.log(error.code)) - - await deleteObject(storageImageRef).catch((error) => - console.log(error.code), - ) - await deleteDoc(firestoreCommentRef).catch((error) => - console.log(error.code), - ) - await deleteDoc(firestoreLikeRef).catch((error) => console.log(error.code)) - } - const handlePrivateToggle = async () => { - const firestoreImageAllRef = doc(DBService, "mainPage", "userFeedDataAll") - const firestorePersonalRef = doc(DBService, `users`, `${feedData.creator}`) - const feed: FeedItem = { - creator: feedData.creator, - desc: feedData.desc, - imageUrl: feedData.imageUrl, - location: feedData.location, - isPrivate: feedData.isPrivate, - storageId: feedData.storageId, - uploadTime: feedData.uploadTime, - } - const toggleFeed: FeedItem = { - creator: feedData.creator, - desc: feedData.desc, - imageUrl: feedData.imageUrl, - location: feedData.location, - isPrivate: !feedData.isPrivate, - storageId: feedData.storageId, - uploadTime: feedData.uploadTime, - } - - handleThreeDotMenuClick() - await updateDoc(firestorePersonalRef, { - feed: arrayRemove(feed), - }).then(async () => { - await updateDoc(firestorePersonalRef, { - feed: arrayUnion(toggleFeed), - }) - }) - await updateDoc(firestoreImageAllRef, { - feed: arrayRemove(feed), - }).then(async () => { - await updateDoc(firestoreImageAllRef, { - feed: arrayUnion(toggleFeed), - }) - }) - } + const { handleDeleteFeed, handlePrivateToggle } = useFeedCRUD({ + handleThreeDotMenuClick, + }) return ( <> @@ -249,7 +166,7 @@ export default function ThreeDotMenu({ 편집 handlePrivateToggle(feedData)} style={ isDarkMode ? { backgroundColor: "black", color: "white" } : {} } @@ -263,7 +180,7 @@ export default function ThreeDotMenu({ {feedData.isPrivate ? "공개" : "비공개"} handleDeleteFeed(feedData)} style={ isDarkMode ? { backgroundColor: "black", color: "white" } : {} } diff --git a/firebase-practice/src/components/share/Modal/feed/TextInput.tsx b/firebase-practice/src/components/share/Modal/feed/TextInput.tsx index 0dfdf7d..ef6937f 100644 --- a/firebase-practice/src/components/share/Modal/feed/TextInput.tsx +++ b/firebase-practice/src/components/share/Modal/feed/TextInput.tsx @@ -2,7 +2,7 @@ import { authService } from "@FireBase" import { darkModeState, userDataState } from "@share/recoil/recoilList" import { FeedItem } from "backend/dto" import { LocationIcon, ProfileIcon } from "icons" -import { useFeedUploadModal } from "lib/hooks/useFeedUploadModal" +import { useFeedCRUD } from "lib/hooks/useFeedCRUD" import Image from "next/image" import React, { SetStateAction, useState } from "react" import { useRecoilValue } from "recoil" @@ -169,14 +169,14 @@ export default function TextInput({ setLocation("") } - const { EditToFireStore, uploadToStorage } = useFeedUploadModal( + const { EditToFireStore, uploadToStorage } = useFeedCRUD({ imageFile, setImageFile, setIsFileExist, setIsOpen, resetInputs, setIsSubmit, - ) + }) return ( diff --git a/firebase-practice/src/components/share/recoil/feed.ts b/firebase-practice/src/components/share/recoil/feed.ts index bf0bc03..a1e3948 100644 --- a/firebase-practice/src/components/share/recoil/feed.ts +++ b/firebase-practice/src/components/share/recoil/feed.ts @@ -11,10 +11,6 @@ export const mainFeedItemsAtom = atom({ method: "GET", }).then((response) => response.json()) - feedItems.sort(function (a, b) { - return Number(b.uploadTime) - Number(a.uploadTime) - }) - setSelf(feedItems) } diff --git a/firebase-practice/src/lib/hooks/useFeedCRUD.ts b/firebase-practice/src/lib/hooks/useFeedCRUD.ts new file mode 100644 index 0000000..5082973 --- /dev/null +++ b/firebase-practice/src/lib/hooks/useFeedCRUD.ts @@ -0,0 +1,273 @@ +import { DBService, authService, storageService } from "@FireBase" +import { mainFeedItemsAtom } from "@share/recoil/feed" +import { userDataState } from "@share/recoil/recoilList" +import { FeedItem } from "backend/dto" +import { + arrayRemove, + arrayUnion, + deleteDoc, + doc, + setDoc, + updateDoc, +} from "firebase/firestore" +import { + deleteObject, + getDownloadURL, + ref, + uploadBytes, +} from "firebase/storage" +import getCurrentTime from "lib/getCurrentTime" +import { SetStateAction, useState } from "react" +import { useSetRecoilState } from "recoil" +import { v4 } from "uuid" + +interface Params { + imageFile?: File + setImageFile?: React.Dispatch> + setIsFileExist?: React.Dispatch> + setIsOpen?: (isOpen: boolean) => void + resetInputs?: () => void + setIsSubmit?: React.Dispatch> + handleThreeDotMenuClick?: () => void +} + +export const useFeedCRUD = ({ + imageFile, + setImageFile, + setIsFileExist, + setIsOpen, + resetInputs, + setIsSubmit, + handleThreeDotMenuClick, +}: Params) => { + const randomId = v4() + + const setMainFeedItems = useSetRecoilState(mainFeedItemsAtom) + const setCurrentUserData = useSetRecoilState(userDataState) + + const uploadToStorage = async ( + desc: string, + location: string, + isPrivate: boolean, + ) => { + const storageRef = ref( + storageService, + `images/${authService.currentUser?.uid}/${randomId}`, + ) + if (imageFile !== undefined) + await uploadBytes(storageRef, imageFile) + .then( + async () => + await getDownloadURL(storageRef).then(async (response) => { + uploadToFirestore(response, desc, location, isPrivate) + }), + ) + .catch((error) => { + console.log(error.code) + }) + } + + const uploadToFirestore = async ( + downloadUrl: string, + desc: string, + location: string, + isPrivate: boolean, + storageId?: string, + uploadTime?: string, + ) => { + const feed: FeedItem = { + imageUrl: downloadUrl, + desc, + location, + isPrivate, + storageId: storageId ?? randomId, + uploadTime: uploadTime ?? getCurrentTime(), + creator: `${authService.currentUser?.uid}`, + } + + setMainFeedItems((feedItems) => [feed, ...feedItems]) + setCurrentUserData((userData) => { + return { + ...userData, + feed: [feed, ...userData.feed], + } + }) + + const firestoreAllRef = doc(DBService, "mainPage", `userFeedDataAll`) + const firestorePersonalRef = doc( + DBService, + "users", + `${authService.currentUser?.uid}`, + ) + + updateDoc(firestoreAllRef, { + feed: arrayUnion(feed), + }) + .catch((error) => { + if (error.code === "not-found") { + setDoc(firestoreAllRef, { + feed: [feed], + }) + } + }) + .then(() => { + setIsOpen?.(false) + resetInputs?.() + setIsSubmit?.(false) + if (storageId) return + resetInputs?.() + setImageFile?.(undefined) + setIsFileExist?.(false) + }) + updateDoc(firestorePersonalRef, { + feed: arrayUnion(feed), + }).catch((error) => { + if (error.code === "not-found") { + setDoc(firestorePersonalRef, { + feed: [feed], + }) + } + }) + } + + const EditToFireStore = async ( + desc: string, + location: string, + isPrivate: boolean, + feedData?: FeedItem, + ) => { + if (feedData === undefined) return + const firestoreAllRef = doc(DBService, "mainPage", `userFeedDataAll`) + const firestorePersonalRef = doc( + DBService, + "users", + `${authService.currentUser?.uid}`, + ) + + setMainFeedItems((feedItems) => + feedItems.map((feedItem) => { + if (feedItem.storageId === feedData.storageId) return feedData + return feedItem + }), + ) + + setCurrentUserData((userData) => { + return { + ...userData, + feed: userData.feed.map((feedItem) => { + if (feedItem.storageId === feedData.storageId) return feedData + return feedItem + }), + } + }) + + updateDoc(firestorePersonalRef, { + feed: arrayRemove(feedData), + }).catch((error) => console.log(error.code)) + updateDoc(firestoreAllRef, { + feed: arrayRemove(feedData), + }) + .then(() => { + uploadToFirestore( + feedData.imageUrl, + desc, + location, + isPrivate, + feedData.storageId, + feedData.uploadTime, + ) + }) + .catch((error) => console.log(error.code)) + } + + const handleDeleteFeed = (feedData: FeedItem) => { + const storageImageRef = ref( + storageService, + `images/${feedData.creator}/${feedData.storageId}`, + ) + const firestoreAllRef = doc(DBService, "mainPage", "userFeedDataAll") + const firestoreCommentRef = doc(DBService, "Comments", feedData.storageId) + const firestorePersonalRef = doc(DBService, `users`, `${feedData.creator}`) + const firestoreLikeRef = doc(DBService, "like", feedData.storageId) + + setMainFeedItems((feedItems) => + feedItems.filter((feedItem) => feedItem.storageId !== feedData.storageId), + ) + + setCurrentUserData((userData) => { + return { + ...userData, + feed: userData.feed.filter( + (feedItem) => feedItem.storageId !== feedData.storageId, + ), + } + }) + + handleThreeDotMenuClick?.() + + // TODO: 이 부분을 API 요청으로 대체하고, 요청 후 response에서 새로 바뀐 리스트를 반환해 + // 해당 리스트로 다시 recoil을 set해주도록 수정하기 + updateDoc(firestorePersonalRef, { + feed: arrayRemove(feedData), + }).catch((error) => console.log(error.code)) + + updateDoc(firestoreAllRef, { + feed: arrayRemove(feedData), + }).catch((error) => console.log(error.code)) + + deleteObject(storageImageRef).catch((error) => console.log(error.code)) + deleteDoc(firestoreCommentRef).catch((error) => console.log(error.code)) + deleteDoc(firestoreLikeRef).catch((error) => console.log(error.code)) + } + + const handlePrivateToggle = (feedData: FeedItem) => { + const firestoreImageAllRef = doc(DBService, "mainPage", "userFeedDataAll") + const firestorePersonalRef = doc(DBService, `users`, `${feedData.creator}`) + + setMainFeedItems((feedItems) => + feedItems.map((feedItem) => { + if (feedItem.storageId === feedData.storageId) + return { ...feedData, isPrivate: !feedData.isPrivate } + return feedItem + }), + ) + + setCurrentUserData((userData) => { + return { + ...userData, + feed: userData.feed.map((feedItem) => { + if (feedItem.storageId === feedData.storageId) + return { ...feedData, isPrivate: !feedData.isPrivate } + return feedItem + }), + } + }) + + handleThreeDotMenuClick?.() + + // TODO: 이 부분을 API 요청으로 대체하고, 요청 후 response에서 새로 바뀐 리스트를 반환해 + // 해당 리스트로 다시 recoil을 set해주도록 수정하기 + updateDoc(firestorePersonalRef, { + feed: arrayRemove(feedData), + }).then(() => { + updateDoc(firestorePersonalRef, { + feed: arrayUnion({ ...feedData, isPrivate: !feedData.isPrivate }), + }) + }) + + updateDoc(firestoreImageAllRef, { + feed: arrayRemove(feedData), + }).then(() => { + updateDoc(firestoreImageAllRef, { + feed: arrayUnion({ ...feedData, isPrivate: !feedData.isPrivate }), + }) + }) + } + + return { + EditToFireStore, + uploadToStorage, + handleDeleteFeed, + handlePrivateToggle, + } +} diff --git a/firebase-practice/src/lib/hooks/useFeedUploadModal.ts b/firebase-practice/src/lib/hooks/useFeedUploadModal.ts deleted file mode 100644 index ea3d0d6..0000000 --- a/firebase-practice/src/lib/hooks/useFeedUploadModal.ts +++ /dev/null @@ -1,161 +0,0 @@ -import { DBService, authService, storageService } from "@FireBase" -import { mainFeedItemsAtom } from "@share/recoil/feed" -import { userDataState } from "@share/recoil/recoilList" -import { FeedItem } from "backend/dto" -import { - arrayRemove, - arrayUnion, - doc, - setDoc, - updateDoc, -} from "firebase/firestore" -import { getDownloadURL, ref, uploadBytes } from "firebase/storage" -import getCurrentTime from "lib/getCurrentTime" -import { SetStateAction, useState } from "react" -import { useSetRecoilState } from "recoil" -import { v4 } from "uuid" - -export const useFeedUploadModal = ( - imageFile: File | undefined, - setImageFile?: React.Dispatch>, - setIsFileExist?: React.Dispatch>, - setIsOpen?: (isOpen: boolean) => void, - resetInputs?: () => void, - setIsSubmit?: React.Dispatch>, -) => { - const randomId = v4() - - const setMainFeedItems = useSetRecoilState(mainFeedItemsAtom) - - const uploadToStorage = async ( - desc: string, - location: string, - isPrivate: boolean, - ) => { - const storageRef = ref( - storageService, - `images/${authService.currentUser?.uid}/${randomId}`, - ) - if (imageFile !== undefined) - await uploadBytes(storageRef, imageFile) - .then( - async () => - await getDownloadURL(storageRef).then(async (response) => { - uploadToFirestore(response, desc, location, isPrivate) - }), - ) - .catch((error) => { - console.log(error.code) - }) - } - - const uploadToFirestore = async ( - downloadUrl: string, - desc: string, - location: string, - isPrivate: boolean, - storageId?: string, - uploadTime?: string, - ) => { - const feed: FeedItem = { - imageUrl: downloadUrl, - desc: desc, - location: location, - isPrivate: isPrivate, - storageId: storageId ?? randomId, - uploadTime: uploadTime ?? getCurrentTime(), - creator: `${authService.currentUser?.uid}`, - } - - setMainFeedItems((feedItems) => [feed, ...feedItems]) - - const firestoreAllRef = doc(DBService, "mainPage", `userFeedDataAll`) - const firestorePersonalRef = doc( - DBService, - "users", - `${authService.currentUser?.uid}`, - ) - await updateDoc(firestoreAllRef, { - feed: arrayUnion(feed), - }) - .catch(async (error) => { - if (error.code === "not-found") { - await setDoc(firestoreAllRef, { - feed: [feed], - }) - } - }) - .then(() => { - setIsOpen?.(false) - resetInputs?.() - setIsSubmit?.(false) - if (storageId) return - resetInputs?.() - setImageFile?.(undefined) - setIsFileExist?.(false) - }) - await updateDoc(firestorePersonalRef, { - feed: arrayUnion(feed), - }).catch(async (error) => { - if (error.code === "not-found") { - await setDoc(firestorePersonalRef, { - feed: [feed], - }) - } - }) - } - - const EditToFireStore = async ( - desc: string, - location: string, - isPrivate: boolean, - feedData?: FeedItem, - ) => { - if (feedData === undefined) return - const firestoreAllRef = doc(DBService, "mainPage", `userFeedDataAll`) - const firestorePersonalRef = doc( - DBService, - "users", - `${authService.currentUser?.uid}`, - ) - const feed: FeedItem = { - imageUrl: feedData.imageUrl, - desc: feedData.desc, - location: feedData.location, - isPrivate: feedData.isPrivate, - storageId: feedData.storageId, - uploadTime: feedData.uploadTime, - creator: feedData.creator, - } - - setMainFeedItems((feedItems) => - feedItems.map((feedItem) => { - if (feedItem.storageId === feed.storageId) return feed - return feedItem - }), - ) - - await updateDoc(firestorePersonalRef, { - feed: arrayRemove(feed), - }).catch((error) => console.log(error.code)) - await updateDoc(firestoreAllRef, { - feed: arrayRemove(feed), - }) - .then(async () => { - await uploadToFirestore( - feedData.imageUrl, - desc, - location, - isPrivate, - feedData.storageId, - feedData.uploadTime, - ) - }) - .catch((error) => console.log(error.code)) - } - - return { - EditToFireStore, - uploadToStorage, - } -} From 67f3541203d6613d6c2d04c45199c30eb210d629 Mon Sep 17 00:00:00 2001 From: kyw0716 Date: Thu, 15 Jun 2023 00:11:42 +0900 Subject: [PATCH 19/28] =?UTF-8?q?refactor:=20=ED=94=BC=EB=93=9C=20?= =?UTF-8?q?=EC=A0=95=EB=B3=B4=20=EC=88=98=EC=A0=95=20=EB=82=99=EA=B4=80?= =?UTF-8?q?=EC=A0=81=20=EC=97=85=EB=8D=B0=EC=9D=B4=ED=8A=B8=20=EC=A0=81?= =?UTF-8?q?=EC=9A=A9=20(=EC=9C=84=EC=B9=98,=20=EB=82=B4=EC=9A=A9,=20?= =?UTF-8?q?=EB=B9=84=EA=B3=B5=EA=B0=9C=20=EC=97=AC=EB=B6=80=20=ED=86=A0?= =?UTF-8?q?=EA=B8=80)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- firebase-practice/pages/_app.tsx | 20 ++- firebase-practice/pages/api/feed.ts | 68 +++------ firebase-practice/pages/api/requireAPI.md | 2 +- firebase-practice/pages/api/userFeed.ts | 36 +++++ .../src/components/layout/Header.tsx | 1 - .../components/share/Modal/feed/TextInput.tsx | 2 +- .../src/lib/hooks/useFeedCRUD.ts | 142 +++++++++--------- 7 files changed, 137 insertions(+), 134 deletions(-) create mode 100644 firebase-practice/pages/api/userFeed.ts diff --git a/firebase-practice/pages/_app.tsx b/firebase-practice/pages/_app.tsx index b88f6ba..bb30059 100644 --- a/firebase-practice/pages/_app.tsx +++ b/firebase-practice/pages/_app.tsx @@ -6,7 +6,7 @@ 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 { FeedItem, UserData } from "backend/dto" import axios from "axios" const SetDarkMode = () => { @@ -20,14 +20,18 @@ const SetDarkMode = () => { const SetCurrnentUser = () => { const setCurrentUser = useSetRecoilState(userDataState) useEffect(() => { - onAuthStateChanged(authService, (user) => { + onAuthStateChanged(authService, async (user) => { if (user) { - axios({ - method: "", - url: `/api/profile?userId=${user.uid}`, - }).then((response) => { - setCurrentUser(response.data) - }) + const userId = user.uid + + const userInfo = await fetch(`/api/profile?userId=${userId}`).then< + Omit + >((res) => res.json()) + const userFeeds = await fetch(`/api/userFeed?userId=${userId}`).then< + FeedItem[] + >((res) => res.json()) + + setCurrentUser({ ...userInfo, feed: userFeeds }) } }) }, []) diff --git a/firebase-practice/pages/api/feed.ts b/firebase-practice/pages/api/feed.ts index 67a512a..b912295 100644 --- a/firebase-practice/pages/api/feed.ts +++ b/firebase-practice/pages/api/feed.ts @@ -16,12 +16,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} @@ -58,15 +58,13 @@ export default async function getFeed( storageId, creator, uploadTime, - newDesc, - newLocation, - newIsPrivate, - } = req.body + } = JSON.parse(req.body) - const firestoreAllRef = doc(DBService, "mainPage", `userFeedDataAll`) - const firestorePersonalRef = doc(DBService, "users", `${creator}`) + const firestoreRef = doc(DBService, "mainPage", `userFeedDataAll`) + + const isNewFeed = uploadTime === "new feed" - if (!uploadTime) { + if (isNewFeed) { const feed: FeedItem = { imageUrl, desc, @@ -77,32 +75,23 @@ export default async function getFeed( uploadTime: getCurrentTime(), } - await updateDoc(firestoreAllRef, { + await updateDoc(firestoreRef, { feed: arrayUnion(feed), }).catch(async (error) => { if (error.code === "not-found") { - await setDoc(firestoreAllRef, { + setDoc(firestoreRef, { feed: [feed], }) } else { res.status(500).json(error.code) } }) + } + if (!isNewFeed) { + const { newDesc, newLocation, newIsPrivate } = JSON.parse(req.body) - await updateDoc(firestorePersonalRef, { - feed: arrayUnion(feed), - }).catch(async (error) => { - if (error.code === "not-found") { - await setDoc(firestorePersonalRef, { - feed: [feed], - }) - } else { - res.status(500).json(error.code) - } - }) + console.log(req.body) - res.status(200).json("Success") - } else { const feedToRemove: FeedItem = { imageUrl, desc, @@ -122,25 +111,15 @@ export default async function getFeed( 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,10 +130,9 @@ export default async function getFeed( storageId, creator, uploadTime, - } = req.body as FeedItem + } = JSON.parse(req.body) as FeedItem const firestoreAllRef = doc(DBService, "mainPage", `userFeedDataAll`) - const firestorePersonalRef = doc(DBService, "users", `${creator}`) const feed: FeedItem = { imageUrl, @@ -172,12 +150,6 @@ export default async function getFeed( res.status(500).json(error.code) }) - await updateDoc(firestorePersonalRef, { - feed: arrayRemove(feed), - }).catch((error) => { - res.status(500).json(error.code) - }) - res.status(200).json("Success") } } diff --git a/firebase-practice/pages/api/requireAPI.md b/firebase-practice/pages/api/requireAPI.md index dc9895d..eb821bc 100644 --- a/firebase-practice/pages/api/requireAPI.md +++ b/firebase-practice/pages/api/requireAPI.md @@ -24,4 +24,4 @@ ## 목표 nextjs의 api기능을 통해 firebase와 상호작용하고, tsx파일에서 직접적으로 요청을 넣는 방식은 지양하자. -새로운 방식 도입 후 기능이 정상적으로 수행된다면 useSWR을 사용하여 최대한 기능 최적화해보자. +낙관적 업데이트를 적용해 사용성을 높여보자. diff --git a/firebase-practice/pages/api/userFeed.ts b/firebase-practice/pages/api/userFeed.ts new file mode 100644 index 0000000..add3b8e --- /dev/null +++ b/firebase-practice/pages/api/userFeed.ts @@ -0,0 +1,36 @@ +import { DBService } from "@FireBase" +import { FeedItem } from "backend/dto" +import { doc, getDoc } from "firebase/firestore" +import type { NextApiRequest, NextApiResponse } from "next" + +/** + * method : GET + * request url : /api/userFeed?userId={userId} + * response : userId를 가진 유저의 피드 목록 + */ + +export default async function getFeed( + req: NextApiRequest, + res: NextApiResponse, +) { + if (req.method === "GET") { + const getFeedRef = doc(DBService, "mainPage", "userFeedDataAll") + const docSnapShot = await getDoc(getFeedRef) + const userId = req.query.userId + + if (userId === undefined) res.status(400).json("userId query is missing") + + if (docSnapShot.exists()) { + const data = docSnapShot.data()?.feed as FeedItem[] + const userData = data.filter((feedItem) => feedItem.creator === userId) + + userData.sort((a, b) => Number(b.uploadTime) - Number(a.uploadTime)) + + res.status(200).json(userData) + } else { + res.status(500).json("Fail") + } + + res.status(400).json("method error") + } +} diff --git a/firebase-practice/src/components/layout/Header.tsx b/firebase-practice/src/components/layout/Header.tsx index 1672544..f9ebddf 100644 --- a/firebase-practice/src/components/layout/Header.tsx +++ b/firebase-practice/src/components/layout/Header.tsx @@ -160,7 +160,6 @@ export default function Header() { ) : ( <> - {/* TODO: userData에 info가 undefined일 경우 처리하기 */} {userData && userData.info.profileImage !== "" && userData.info.profileImage !== null ? ( diff --git a/firebase-practice/src/components/share/Modal/feed/TextInput.tsx b/firebase-practice/src/components/share/Modal/feed/TextInput.tsx index ef6937f..ed91367 100644 --- a/firebase-practice/src/components/share/Modal/feed/TextInput.tsx +++ b/firebase-practice/src/components/share/Modal/feed/TextInput.tsx @@ -195,7 +195,7 @@ export default function TextInput({ event.preventDefault() setIsSubmit(true) if (feedData) { - EditToFireStore(desc, location, isPrivate) + EditToFireStore(desc, location, isPrivate, feedData) return } uploadToStorage(desc, location, isPrivate) diff --git a/firebase-practice/src/lib/hooks/useFeedCRUD.ts b/firebase-practice/src/lib/hooks/useFeedCRUD.ts index 5082973..e0ceb3e 100644 --- a/firebase-practice/src/lib/hooks/useFeedCRUD.ts +++ b/firebase-practice/src/lib/hooks/useFeedCRUD.ts @@ -7,7 +7,6 @@ import { arrayUnion, deleteDoc, doc, - setDoc, updateDoc, } from "firebase/firestore" import { @@ -16,8 +15,7 @@ import { ref, uploadBytes, } from "firebase/storage" -import getCurrentTime from "lib/getCurrentTime" -import { SetStateAction, useState } from "react" +import { SetStateAction } from "react" import { useSetRecoilState } from "recoil" import { v4 } from "uuid" @@ -31,6 +29,15 @@ interface Params { handleThreeDotMenuClick?: () => void } +interface UploadToFirestoreParams { + downloadUrl: string + desc: string + location: string + isPrivate: boolean + storageId?: string + uploadTime?: string +} + export const useFeedCRUD = ({ imageFile, setImageFile, @@ -58,8 +65,13 @@ export const useFeedCRUD = ({ await uploadBytes(storageRef, imageFile) .then( async () => - await getDownloadURL(storageRef).then(async (response) => { - uploadToFirestore(response, desc, location, isPrivate) + await getDownloadURL(storageRef).then(async (downloadUrl) => { + uploadToFirestore({ + downloadUrl, + desc, + location, + isPrivate, + }) }), ) .catch((error) => { @@ -67,21 +79,21 @@ export const useFeedCRUD = ({ }) } - const uploadToFirestore = async ( - downloadUrl: string, - desc: string, - location: string, - isPrivate: boolean, - storageId?: string, - uploadTime?: string, - ) => { + const uploadToFirestore = async ({ + downloadUrl, + desc, + location, + isPrivate, + storageId, + uploadTime, + }: UploadToFirestoreParams) => { const feed: FeedItem = { imageUrl: downloadUrl, desc, location, isPrivate, storageId: storageId ?? randomId, - uploadTime: uploadTime ?? getCurrentTime(), + uploadTime: uploadTime ?? "new feed", creator: `${authService.currentUser?.uid}`, } @@ -93,60 +105,31 @@ export const useFeedCRUD = ({ } }) - const firestoreAllRef = doc(DBService, "mainPage", `userFeedDataAll`) - const firestorePersonalRef = doc( - DBService, - "users", - `${authService.currentUser?.uid}`, - ) - - updateDoc(firestoreAllRef, { - feed: arrayUnion(feed), - }) - .catch((error) => { - if (error.code === "not-found") { - setDoc(firestoreAllRef, { - feed: [feed], - }) - } - }) - .then(() => { - setIsOpen?.(false) - resetInputs?.() - setIsSubmit?.(false) - if (storageId) return - resetInputs?.() - setImageFile?.(undefined) - setIsFileExist?.(false) - }) - updateDoc(firestorePersonalRef, { - feed: arrayUnion(feed), - }).catch((error) => { - if (error.code === "not-found") { - setDoc(firestorePersonalRef, { - feed: [feed], - }) - } + // TODO: 여기서 서버랑 동기화 시키기 + fetch(`/api/feed`, { + method: "POST", + body: JSON.stringify(feed), }) + + setIsOpen?.(false) + resetInputs?.() + setIsSubmit?.(false) + if (storageId) return + resetInputs?.() + setImageFile?.(undefined) + setIsFileExist?.(false) } const EditToFireStore = async ( desc: string, location: string, isPrivate: boolean, - feedData?: FeedItem, + feedData: FeedItem, ) => { - if (feedData === undefined) return - const firestoreAllRef = doc(DBService, "mainPage", `userFeedDataAll`) - const firestorePersonalRef = doc( - DBService, - "users", - `${authService.currentUser?.uid}`, - ) - setMainFeedItems((feedItems) => feedItems.map((feedItem) => { - if (feedItem.storageId === feedData.storageId) return feedData + if (feedItem.storageId === feedData.storageId) + return { ...feedData, desc, location, isPrivate } return feedItem }), ) @@ -155,29 +138,38 @@ export const useFeedCRUD = ({ return { ...userData, feed: userData.feed.map((feedItem) => { - if (feedItem.storageId === feedData.storageId) return feedData + if (feedItem.storageId === feedData.storageId) + return { ...feedData, desc, location, isPrivate } return feedItem }), } }) - updateDoc(firestorePersonalRef, { - feed: arrayRemove(feedData), - }).catch((error) => console.log(error.code)) - updateDoc(firestoreAllRef, { - feed: arrayRemove(feedData), + console.log({ + ...feedData, + newDesc: desc, + newLocation: location, + newIsPrivate: isPrivate, }) - .then(() => { - uploadToFirestore( - feedData.imageUrl, - desc, - location, - isPrivate, - feedData.storageId, - feedData.uploadTime, - ) - }) - .catch((error) => console.log(error.code)) + + // TODO: 여기서 서버랑 동기화 시키기 + fetch(`/api/feed`, { + method: "POST", + body: JSON.stringify({ + ...feedData, + newDesc: desc, + newLocation: location, + newIsPrivate: isPrivate, + }), + }) + + setIsOpen?.(false) + resetInputs?.() + setIsSubmit?.(false) + if (feedData.storageId) return + resetInputs?.() + setImageFile?.(undefined) + setIsFileExist?.(false) } const handleDeleteFeed = (feedData: FeedItem) => { From da2dc773e3e6cb593091d7b3e34f515b755419a8 Mon Sep 17 00:00:00 2001 From: kyw0716 Date: Thu, 15 Jun 2023 13:17:39 +0900 Subject: [PATCH 20/28] refactor: fetch => axios --- firebase-practice/pages/_app.tsx | 8 ++++---- firebase-practice/src/components/share/recoil/feed.ts | 5 +++-- firebase-practice/src/lib/hooks/useFeedCRUD.ts | 7 +++---- 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/firebase-practice/pages/_app.tsx b/firebase-practice/pages/_app.tsx index bb30059..82e4996 100644 --- a/firebase-practice/pages/_app.tsx +++ b/firebase-practice/pages/_app.tsx @@ -24,12 +24,12 @@ const SetCurrnentUser = () => { if (user) { const userId = user.uid - const userInfo = await fetch(`/api/profile?userId=${userId}`).then< + const userInfo = await axios(`/api/profile?userId=${userId}`).then< Omit - >((res) => res.json()) - const userFeeds = await fetch(`/api/userFeed?userId=${userId}`).then< + >((res) => res.data) + const userFeeds = await axios(`/api/userFeed?userId=${userId}`).then< FeedItem[] - >((res) => res.json()) + >((res) => res.data) setCurrentUser({ ...userInfo, feed: userFeeds }) } diff --git a/firebase-practice/src/components/share/recoil/feed.ts b/firebase-practice/src/components/share/recoil/feed.ts index a1e3948..ccf5c36 100644 --- a/firebase-practice/src/components/share/recoil/feed.ts +++ b/firebase-practice/src/components/share/recoil/feed.ts @@ -1,3 +1,4 @@ +import axios from "axios" import { FeedItem } from "backend/dto" import { atom } from "recoil" @@ -7,9 +8,9 @@ export const mainFeedItemsAtom = atom({ effects: [ ({ setSelf, trigger }) => { const getFeedItems = async () => { - const feedItems = await fetch("/api/feed", { + const feedItems = await axios("/api/feed", { method: "GET", - }).then((response) => response.json()) + }).then((response) => response.data) setSelf(feedItems) } diff --git a/firebase-practice/src/lib/hooks/useFeedCRUD.ts b/firebase-practice/src/lib/hooks/useFeedCRUD.ts index e0ceb3e..23e0e7c 100644 --- a/firebase-practice/src/lib/hooks/useFeedCRUD.ts +++ b/firebase-practice/src/lib/hooks/useFeedCRUD.ts @@ -1,6 +1,7 @@ import { DBService, authService, storageService } from "@FireBase" import { mainFeedItemsAtom } from "@share/recoil/feed" import { userDataState } from "@share/recoil/recoilList" +import axios from "axios" import { FeedItem } from "backend/dto" import { arrayRemove, @@ -106,8 +107,7 @@ export const useFeedCRUD = ({ }) // TODO: 여기서 서버랑 동기화 시키기 - fetch(`/api/feed`, { - method: "POST", + axios.post(`/api/feed`, { body: JSON.stringify(feed), }) @@ -153,8 +153,7 @@ export const useFeedCRUD = ({ }) // TODO: 여기서 서버랑 동기화 시키기 - fetch(`/api/feed`, { - method: "POST", + axios.post(`/api/feed`, { body: JSON.stringify({ ...feedData, newDesc: desc, From da884ffefe1aa3a53e5225dfa928d8887f2a6025 Mon Sep 17 00:00:00 2001 From: kyw0716 Date: Thu, 15 Jun 2023 13:35:25 +0900 Subject: [PATCH 21/28] =?UTF-8?q?fix:=20=EC=9E=98=EB=AA=BB=EB=90=9C=20axio?= =?UTF-8?q?s=20=EC=82=AC=EC=9A=A9=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- firebase-practice/pages/api/feed.ts | 10 ++++------ firebase-practice/src/lib/hooks/useFeedCRUD.ts | 15 +++------------ 2 files changed, 7 insertions(+), 18 deletions(-) diff --git a/firebase-practice/pages/api/feed.ts b/firebase-practice/pages/api/feed.ts index b912295..5df5031 100644 --- a/firebase-practice/pages/api/feed.ts +++ b/firebase-practice/pages/api/feed.ts @@ -47,7 +47,7 @@ export default async function getFeed( .status(200) .json(data.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,7 +58,7 @@ export default async function getFeed( storageId, creator, uploadTime, - } = JSON.parse(req.body) + } = req.body const firestoreRef = doc(DBService, "mainPage", `userFeedDataAll`) @@ -88,9 +88,7 @@ export default async function getFeed( }) } if (!isNewFeed) { - const { newDesc, newLocation, newIsPrivate } = JSON.parse(req.body) - - console.log(req.body) + const { newDesc, newLocation, newIsPrivate } = req.body const feedToRemove: FeedItem = { imageUrl, @@ -130,7 +128,7 @@ export default async function getFeed( storageId, creator, uploadTime, - } = JSON.parse(req.body) as FeedItem + } = req.body as FeedItem const firestoreAllRef = doc(DBService, "mainPage", `userFeedDataAll`) diff --git a/firebase-practice/src/lib/hooks/useFeedCRUD.ts b/firebase-practice/src/lib/hooks/useFeedCRUD.ts index 23e0e7c..327596b 100644 --- a/firebase-practice/src/lib/hooks/useFeedCRUD.ts +++ b/firebase-practice/src/lib/hooks/useFeedCRUD.ts @@ -108,7 +108,7 @@ export const useFeedCRUD = ({ // TODO: 여기서 서버랑 동기화 시키기 axios.post(`/api/feed`, { - body: JSON.stringify(feed), + feed, }) setIsOpen?.(false) @@ -145,23 +145,14 @@ export const useFeedCRUD = ({ } }) - console.log({ + // TODO: 여기서 서버랑 동기화 시키기 + axios.post(`/api/feed`, { ...feedData, newDesc: desc, newLocation: location, newIsPrivate: isPrivate, }) - // TODO: 여기서 서버랑 동기화 시키기 - axios.post(`/api/feed`, { - body: JSON.stringify({ - ...feedData, - newDesc: desc, - newLocation: location, - newIsPrivate: isPrivate, - }), - }) - setIsOpen?.(false) resetInputs?.() setIsSubmit?.(false) From 231903e7d6b0ce8b2241bb54222c9d85aaedf2e7 Mon Sep 17 00:00:00 2001 From: kyw0716 Date: Thu, 15 Jun 2023 14:21:35 +0900 Subject: [PATCH 22/28] =?UTF-8?q?refactor:=20=ED=8C=94=EB=A1=9C=EC=9A=B0?= =?UTF-8?q?=20=ED=95=98=EB=8A=94=20=EC=9C=A0=EC=A0=80=20=EB=AA=A9=EB=A1=9D?= =?UTF-8?q?=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=B6=88=ED=95=84?= =?UTF-8?q?=EC=9A=94=ED=95=9C=20=EC=9A=94=EC=B2=AD=20=EC=A4=84=EC=9D=B4?= =?UTF-8?q?=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 기존에는 메인 페이지에 들어갈 때마다 useEffect에 의해 팔로우 하는 유저들의 목록을 불러옴. 성능을 크게 저하시킬 요소였기 때문에 recoil의 selector를 활용해 처음 유저가 로그인 했을 당시 딱 한번만 요청을 발생시켜 팔로우 하는 유저 정보를 받아오도록 수정함. --- firebase-practice/pages/index.tsx | 6 +- .../followListAtMainPage/FollowCard.tsx | 89 ++++++-------- .../feature/followListAtMainPage/index.tsx | 109 ++++++++++-------- .../components/share/Modal/feed/TextInput.tsx | 31 +++-- .../src/components/share/recoil/user.ts | 23 ++++ 5 files changed, 136 insertions(+), 122 deletions(-) create mode 100644 firebase-practice/src/components/share/recoil/user.ts diff --git a/firebase-practice/pages/index.tsx b/firebase-practice/pages/index.tsx index a8c17f9..215d653 100644 --- a/firebase-practice/pages/index.tsx +++ b/firebase-practice/pages/index.tsx @@ -1,5 +1,5 @@ import type { NextPage } from "next" -import { useState } from "react" +import { Suspense, useState } from "react" import { FlexBox, Margin } from "ui" import FeedList from "@share/Feed/mainPage/FeedList" import Layout from "components/layout" @@ -46,7 +46,9 @@ const Home: NextPage = () => { {currentUserData?.follow !== undefined && currentUserData.follow.length > 0 && ( - + }> + + )} diff --git a/firebase-practice/src/components/feature/followListAtMainPage/FollowCard.tsx b/firebase-practice/src/components/feature/followListAtMainPage/FollowCard.tsx index 888c876..26ce703 100644 --- a/firebase-practice/src/components/feature/followListAtMainPage/FollowCard.tsx +++ b/firebase-practice/src/components/feature/followListAtMainPage/FollowCard.tsx @@ -1,5 +1,5 @@ import { darkModeState, userDataState } from "@share/recoil/recoilList" -import { UserData } from "backend/dto" +import { UserData, UserInfo } from "backend/dto" import Image from "next/image" import { useRouter } from "next/router" import { useEffect, useState } from "react" @@ -12,7 +12,7 @@ import axios from "axios" import Loading from "@share/Loading/Loading" type Props = { - userId: string + followUser: UserInfo } const Style = { Wrapper: styled.div` @@ -24,60 +24,43 @@ const Style = { cursor: pointer; `, } -export default function FollowCard({ userId }: Props) { +export default function FollowCard({ followUser }: Props) { const router = useRouter() - const [userData, setUserData] = useState() + const currentUser = useRecoilValue(userDataState) const isDarkMode = useRecoilValue(darkModeState) - useEffect(() => { - axios({ - method: "GET", - url: `/api/profile?userId=${userId}`, - }).then((response) => { - setUserData(response.data) - }) - }, []) + return ( - <> - {userData ? ( - - - - {userData.info.profileImage ? ( - profile - ) : ( - - )} - - - {userData.info.name && ( - - {userData.info.name?.length > 4 - ? `${userData.info.name.slice(0, 4)}..` - : userData.info.name} - - )} - - - ) : ( - - - - - - )} - + + + + {followUser.profileImage ? ( + profile + ) : ( + + )} + + + {followUser.name && ( + + {followUser.name?.length > 4 + ? `${followUser.name.slice(0, 4)}..` + : followUser.name} + + )} + + ) } diff --git a/firebase-practice/src/components/feature/followListAtMainPage/index.tsx b/firebase-practice/src/components/feature/followListAtMainPage/index.tsx index a90109c..c15c83a 100644 --- a/firebase-practice/src/components/feature/followListAtMainPage/index.tsx +++ b/firebase-practice/src/components/feature/followListAtMainPage/index.tsx @@ -1,11 +1,13 @@ -import { useEffect, useState } from "react" +import { Suspense, useEffect, useState } from "react" import styled from "styled-components" -import { FlexBox } from "ui" +import { FlexBox, Margin } from "ui" import FollowCard from "./FollowCard" import { v4 } from "uuid" import { LeftArrowForCarouselIcon, RightArrowForCarouselIcon } from "icons" import { useRecoilValue } from "recoil" import { darkModeState, userDataState } from "@share/recoil/recoilList" +import { followUsersSelector } from "@share/recoil/user" +import Loading from "@share/Loading/Loading" const Style = { Wrapper: styled.div` @@ -35,68 +37,75 @@ const Style = { } export default function FollowListAtMainPage() { - const currentUserData = useRecoilValue(userDataState) + const followUsers = useRecoilValue(followUsersSelector) + const isDarkMode = useRecoilValue(darkModeState) + const [movingRange, setMovingRange] = useState(0) const [followNumber, setFollowNumber] = useState(0) - const isDarkMode = useRecoilValue(darkModeState) useEffect(() => { - if (currentUserData === undefined) return - if (currentUserData.follow === undefined) return if (window.innerWidth < 470) { - setFollowNumber(currentUserData.follow.length - 5) + setFollowNumber(followUsers.length - 5) return } - setFollowNumber(currentUserData.follow.length - 6) - }, [currentUserData]) + setFollowNumber(followUsers.length - 6) + }, [followUsers]) + useEffect(() => { if (followNumber < 0) setFollowNumber(0) }, [followNumber]) return ( - <> - {currentUserData !== undefined && currentUserData.follow !== undefined ? ( - + + {followUsers.map((followUser) => { + return ( + + + + + + } + > + + + ) + })} + + {movingRange === 0 || ( + { + setMovingRange((current) => current + 76) + setFollowNumber((current) => current + 1) }} > - - {currentUserData.follow.map((followUserId) => { - return - })} - - {movingRange === 0 || ( - { - setMovingRange((current) => current + 76) - setFollowNumber((current) => current + 1) - }} - > - - - )} - {followNumber === 0 || ( - { - setMovingRange((current) => current - 76) - setFollowNumber((current) => current - 1) - }} - > - - - )} - - ) : ( - <> + + + )} + {followNumber === 0 || ( + { + setMovingRange((current) => current - 76) + setFollowNumber((current) => current - 1) + }} + > + + )} - + ) } diff --git a/firebase-practice/src/components/share/Modal/feed/TextInput.tsx b/firebase-practice/src/components/share/Modal/feed/TextInput.tsx index ed91367..03ace08 100644 --- a/firebase-practice/src/components/share/Modal/feed/TextInput.tsx +++ b/firebase-practice/src/components/share/Modal/feed/TextInput.tsx @@ -178,6 +178,17 @@ export default function TextInput({ setIsSubmit, }) + const submitFeed = () => { + setIsSubmit(true) + + if (feedData) { + EditToFireStore(desc, location, isPrivate, feedData) + return + } + + uploadToStorage(desc, location, isPrivate) + } + return ( { event.preventDefault() - setIsSubmit(true) - if (feedData) { - EditToFireStore(desc, location, isPrivate, feedData) - return - } - uploadToStorage(desc, location, isPrivate) + + submitFeed() }} > @@ -259,17 +266,7 @@ export default function TextInput({ - { - setIsSubmit(true) - if (feedData) { - EditToFireStore(desc, location, isPrivate, feedData) - return - } - uploadToStorage(desc, location, isPrivate) - }} - about={isSubmit ? "none" : ""} - > + 공유하기 diff --git a/firebase-practice/src/components/share/recoil/user.ts b/firebase-practice/src/components/share/recoil/user.ts new file mode 100644 index 0000000..c8e2377 --- /dev/null +++ b/firebase-practice/src/components/share/recoil/user.ts @@ -0,0 +1,23 @@ +import { atom, selector } from "recoil" +import { userDataState } from "./recoilList" +import axios from "axios" +import { UserData, UserInfo } from "backend/dto" + +export const followUsersSelector = selector({ + key: "followUsersSelectorKey", + get: async ({ get }) => { + const currentUser = get(userDataState) + const followUserIds = currentUser.follow ?? [] + const followUsers = await Promise.all( + followUserIds.map(async (userId) => { + const followUser = await axios + .get(`/api/profile?userId=${userId}`) + .then((response) => response.data) + + return followUser.info + }), + ) + + return followUsers + }, +}) From bc803a28425ae0a8873dcf069adf7155986062c6 Mon Sep 17 00:00:00 2001 From: kyw0716 Date: Thu, 15 Jun 2023 14:47:16 +0900 Subject: [PATCH 23/28] =?UTF-8?q?refactor:=20=EB=A9=94=EC=9D=B8=20?= =?UTF-8?q?=ED=94=BC=EB=93=9C=20=EC=A0=95=EB=B3=B4=20=EB=B6=88=EB=9F=AC?= =?UTF-8?q?=EC=98=A4=EB=8A=94=20api=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 메인 피드 정보의 creator에 유저 아이디가 아닌 유저 정보를 담아서 보내주도록 api 수정 --- firebase-practice/pages/api/feed.ts | 24 ++- firebase-practice/pages/index.tsx | 7 - firebase-practice/src/backend/dto.d.ts | 2 +- .../share/Feed/mainPage/FeedCard/index.tsx | 146 ++++++++---------- .../share/Feed/mainPage/FeedList.tsx | 37 ++--- .../src/components/share/recoil/feed.ts | 6 +- .../src/lib/hooks/useFeedCRUD.ts | 12 +- 7 files changed, 114 insertions(+), 120 deletions(-) diff --git a/firebase-practice/pages/api/feed.ts b/firebase-practice/pages/api/feed.ts index 5df5031..d48019a 100644 --- a/firebase-practice/pages/api/feed.ts +++ b/firebase-practice/pages/api/feed.ts @@ -1,5 +1,5 @@ import { DBService } from "@FireBase" -import { FeedItem } from "backend/dto" +import { FeedItem, UserInfo } from "backend/dto" import { arrayRemove, arrayUnion, @@ -43,9 +43,29 @@ export default async function getFeed( if (docSnapShot.exists()) { 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(b.uploadTime) - Number(a.uploadTime))) + .json( + feedItems.sort((a, b) => Number(b.uploadTime) - Number(a.uploadTime)), + ) } else { res.status(404).json("not found") } diff --git a/firebase-practice/pages/index.tsx b/firebase-practice/pages/index.tsx index 215d653..cd4307c 100644 --- a/firebase-practice/pages/index.tsx +++ b/firebase-practice/pages/index.tsx @@ -10,17 +10,11 @@ import { userDataState, userListState, } from "@share/recoil/recoilList" -import { useRouter } from "next/router" import CommentModal from "@share/Modal/comment/CommentModal" import UserListModal from "@share/Modal/userList/UserListModal" import Loading from "@share/Loading/Loading" -import { mainFeedItemsAtom } from "@share/recoil/feed" const Home: NextPage = () => { - const router = useRouter() - - const feedData = useRecoilValue(mainFeedItemsAtom) - const currentUserData = useRecoilValue(userDataState) const [isCommentModalOpen, setIsCommentModalOpen] = useState(false) @@ -54,7 +48,6 @@ const Home: NextPage = () => { {currentUserData.info.userId !== "" ? ( diff --git a/firebase-practice/src/backend/dto.d.ts b/firebase-practice/src/backend/dto.d.ts index f498a84..61ad4aa 100644 --- a/firebase-practice/src/backend/dto.d.ts +++ b/firebase-practice/src/backend/dto.d.ts @@ -14,7 +14,7 @@ export type FeedItem = { location: string isPrivate: boolean storageId: string - creator: string + creator: UserInfo uploadTime: string } diff --git a/firebase-practice/src/components/share/Feed/mainPage/FeedCard/index.tsx b/firebase-practice/src/components/share/Feed/mainPage/FeedCard/index.tsx index aa6c33e..6d20453 100644 --- a/firebase-practice/src/components/share/Feed/mainPage/FeedCard/index.tsx +++ b/firebase-practice/src/components/share/Feed/mainPage/FeedCard/index.tsx @@ -10,7 +10,6 @@ import { ProfileIcon } from "icons" import Desc from "./Desc" import LikeCommentInfo from "./LikeCommentInfo" import Link from "next/link" -import axios from "axios" type Props = { feedData: FeedItem @@ -73,102 +72,89 @@ export default function FeedCard({ setIsLikeModalOpen, }: Props) { const router = useRouter() - const [feedCreatorData, setFeedCreatorData] = useState() + const currentUser = useRecoilValue(userDataState) const [routingPath, setRoutingPath] = useState("") const isDarkMode = useRecoilValue(darkModeState) - useEffect(() => { - axios({ - method: "GET", - url: `/api/profile?userId=${feedData.creator}`, - }).then((response) => { - setFeedCreatorData(response.data) - }) - }, [feedData]) - useEffect(() => { if (routingPath !== "") router.replace(`${routingPath}`) }, [routingPath]) return ( - <> - {feedCreatorData && ( - + + - - - {feedCreatorData?.info.profileImage ? ( - - - creator - - - ) : ( - + creator - )} - - - {feedCreatorData?.info.name} - - {feedData.location} - - - - {feedData.imageUrl ? ( - Image + + ) : ( - Image )} - - - - + + + {feedData.creator.name} + + {feedData.location} + + + + {feedData.imageUrl ? ( + Image + ) : ( + Image )} - + + + + ) } diff --git a/firebase-practice/src/components/share/Feed/mainPage/FeedList.tsx b/firebase-practice/src/components/share/Feed/mainPage/FeedList.tsx index 5472565..d7457a6 100644 --- a/firebase-practice/src/components/share/Feed/mainPage/FeedList.tsx +++ b/firebase-practice/src/components/share/Feed/mainPage/FeedList.tsx @@ -4,22 +4,16 @@ import { SetStateAction } from "react" import styled from "styled-components" import { CustomH2Light, CustomH5Light } from "ui" import FeedCard from "./FeedCard" +import { useRecoilValue } from "recoil" +import { mainFeedItemsAtom } from "@share/recoil/feed" type Props = { - feedItems: FeedItem[] setIsCommentModalOpen: React.Dispatch> setIsLikeModalOpen: React.Dispatch> } const Style = { - ImageCard: styled.div` - width: 200px; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - `, - ImageContainer: styled.div` + Container: styled.div` display: flex; align-items: center; flex-direction: column; @@ -29,19 +23,20 @@ const Style = { } export default function FeedList({ - feedItems, setIsCommentModalOpen, setIsLikeModalOpen, }: Props) { + const feedItems = useRecoilValue(mainFeedItemsAtom) + return ( - + {feedItems.length !== 0 ? ( feedItems .filter((feed) => !feed.isPrivate) - .map((data, index) => { + .map((data) => { return ( - {feedItems?.length === 0 && ( - <> - - 사진 공유 - - 상단 바에 있는 아이콘을 클릭하여 사진을 공유할 수 있습니다. - - - )} + + 사진 공유 + + 상단 바에 있는 아이콘을 클릭하여 사진을 공유할 수 있습니다. + )} - + ) } diff --git a/firebase-practice/src/components/share/recoil/feed.ts b/firebase-practice/src/components/share/recoil/feed.ts index ccf5c36..ad45328 100644 --- a/firebase-practice/src/components/share/recoil/feed.ts +++ b/firebase-practice/src/components/share/recoil/feed.ts @@ -8,9 +8,9 @@ export const mainFeedItemsAtom = atom({ effects: [ ({ setSelf, trigger }) => { const getFeedItems = async () => { - const feedItems = await axios("/api/feed", { - method: "GET", - }).then((response) => response.data) + const feedItems = await axios + .get("/api/feed") + .then((response) => response.data) setSelf(feedItems) } diff --git a/firebase-practice/src/lib/hooks/useFeedCRUD.ts b/firebase-practice/src/lib/hooks/useFeedCRUD.ts index 327596b..a9cad0a 100644 --- a/firebase-practice/src/lib/hooks/useFeedCRUD.ts +++ b/firebase-practice/src/lib/hooks/useFeedCRUD.ts @@ -17,7 +17,7 @@ import { uploadBytes, } from "firebase/storage" import { SetStateAction } from "react" -import { useSetRecoilState } from "recoil" +import { useRecoilValue, useSetRecoilState } from "recoil" import { v4 } from "uuid" interface Params { @@ -50,6 +50,7 @@ export const useFeedCRUD = ({ }: Params) => { const randomId = v4() + const currentUser = useRecoilValue(userDataState) const setMainFeedItems = useSetRecoilState(mainFeedItemsAtom) const setCurrentUserData = useSetRecoilState(userDataState) @@ -88,7 +89,7 @@ export const useFeedCRUD = ({ storageId, uploadTime, }: UploadToFirestoreParams) => { - const feed: FeedItem = { + const feed = { imageUrl: downloadUrl, desc, location, @@ -98,11 +99,14 @@ export const useFeedCRUD = ({ creator: `${authService.currentUser?.uid}`, } - setMainFeedItems((feedItems) => [feed, ...feedItems]) + setMainFeedItems((feedItems) => [ + { ...feed, creator: currentUser.info }, + ...feedItems, + ]) setCurrentUserData((userData) => { return { ...userData, - feed: [feed, ...userData.feed], + feed: [{ ...feed, creator: currentUser.info }, ...userData.feed], } }) From 171454669b6adb4f4470c44365676a91ebfc8d35 Mon Sep 17 00:00:00 2001 From: kyw0716 Date: Thu, 15 Jun 2023 15:04:23 +0900 Subject: [PATCH 24/28] =?UTF-8?q?fix:=20=ED=94=BC=EB=93=9C=20=EB=93=B1?= =?UTF-8?q?=EB=A1=9D=20=EC=9A=94=EC=B2=AD=EC=97=90=EC=84=9C=20=EB=B0=9C?= =?UTF-8?q?=EC=83=9D=ED=95=9C=20=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- firebase-practice/src/lib/hooks/useFeedCRUD.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/firebase-practice/src/lib/hooks/useFeedCRUD.ts b/firebase-practice/src/lib/hooks/useFeedCRUD.ts index a9cad0a..e047ae6 100644 --- a/firebase-practice/src/lib/hooks/useFeedCRUD.ts +++ b/firebase-practice/src/lib/hooks/useFeedCRUD.ts @@ -112,7 +112,7 @@ export const useFeedCRUD = ({ // TODO: 여기서 서버랑 동기화 시키기 axios.post(`/api/feed`, { - feed, + ...feed, }) setIsOpen?.(false) From edf9f12d23bb484aa0e04b5da8d1f1de278dac57 Mon Sep 17 00:00:00 2001 From: kyw0716 Date: Fri, 16 Jun 2023 17:38:44 +0900 Subject: [PATCH 25/28] =?UTF-8?q?refactor:=20=ED=94=BC=EB=93=9C=20?= =?UTF-8?q?=EC=A2=8B=EC=95=84=EC=9A=94=20=EA=B8=B0=EB=8A=A5=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- firebase-practice/pages/api/feed.ts | 28 +++- firebase-practice/pages/api/like.ts | 77 ++++++--- firebase-practice/pages/api/profile.ts | 7 +- firebase-practice/pages/api/userFeed.ts | 18 +- firebase-practice/pages/mypage.tsx | 11 +- firebase-practice/src/backend/dto.d.ts | 1 + .../share/Feed/mainPage/FeedCard/Icons.tsx | 4 +- .../mainPage/FeedCard/LikeCommentInfo.tsx | 32 ++-- .../share/Feed/mainPage/FeedCard/index.tsx | 18 +- .../share/Feed/mypage/FeedSortList.tsx | 17 +- .../Feed/mypage/FeedSortingCard/Desc.tsx | 84 ---------- .../FeedSortingCard/LikeCommentInfo.tsx | 111 ------------- .../Feed/mypage/FeedSortingCard/index.tsx | 154 ------------------ .../components/share/Modal/comment/Icons.tsx | 4 +- .../src/lib/hooks/useFeedCRUD.ts | 37 ++--- firebase-practice/src/ui.tsx | 49 +++--- 16 files changed, 178 insertions(+), 474 deletions(-) delete mode 100644 firebase-practice/src/components/share/Feed/mypage/FeedSortingCard/Desc.tsx delete mode 100644 firebase-practice/src/components/share/Feed/mypage/FeedSortingCard/LikeCommentInfo.tsx delete mode 100644 firebase-practice/src/components/share/Feed/mypage/FeedSortingCard/index.tsx diff --git a/firebase-practice/pages/api/feed.ts b/firebase-practice/pages/api/feed.ts index d48019a..9c39c0f 100644 --- a/firebase-practice/pages/api/feed.ts +++ b/firebase-practice/pages/api/feed.ts @@ -3,6 +3,7 @@ import { FeedItem, UserInfo } from "backend/dto" import { arrayRemove, arrayUnion, + deleteDoc, doc, getDoc, setDoc, @@ -148,26 +149,37 @@ export default async function getFeed( storageId, creator, uploadTime, - } = req.body as FeedItem + userId, + } = req.body - const firestoreAllRef = doc(DBService, "mainPage", `userFeedDataAll`) + const feedRef = doc(DBService, "mainPage", `userFeedDataAll`) + const userRef = doc(DBService, "users", `${userId}`) + const commentRef = doc(DBService, "Comments", `${storageId}`) - const feed: FeedItem = { - imageUrl, + const feed: Omit & { creator: string } = { + creator, desc, + imageUrl, + isPrivate: isPrivate === "true", location, - isPrivate, storageId, - creator, uploadTime, } - await updateDoc(firestoreAllRef, { + updateDoc(feedRef, { feed: arrayRemove(feed), }).catch((error) => { res.status(500).json(error.code) }) - res.status(200).json("Success") + updateDoc(userRef, { + likeFeedIds: arrayRemove(storageId), + }).catch((error) => { + res.status(500).json(error.code) + }) + + deleteDoc(commentRef).catch((error) => { + res.status(500).json(error.code) + }) } } diff --git a/firebase-practice/pages/api/like.ts b/firebase-practice/pages/api/like.ts index 1048a62..4f1d79d 100644 --- a/firebase-practice/pages/api/like.ts +++ b/firebase-practice/pages/api/like.ts @@ -1,9 +1,12 @@ import { DBService } from "@FireBase" +import { UserData } from "backend/dto" import { arrayRemove, arrayUnion, + collection, doc, getDoc, + getDocs, setDoc, updateDoc, } from "firebase/firestore" @@ -11,8 +14,12 @@ import { NextApiRequest, NextApiResponse } from "next" /** * method : GET - * request url : /api/like?storageId=${이미지 저장 스토리지 아이디} - * response : storageId를 가진 피드를 좋아요 한 사람들 리스트 + * request url : /api/like?userId=${userId} + * response : userId를 가진 유저가 좋아요 누른 피드 아이디 리스트 + * + * method : GET + * request url : /api/like?storageId=${storageId} + * response : storageId를 가진 피드를 좋아요 한 유저들의 아이디 리스트 * * method : PUT * requset url : /api/like @@ -30,39 +37,59 @@ export default async function getLike( res: NextApiResponse, ) { if (req.method === "GET") { - const storageId = req.query?.storageId - const getLikeRef = doc(DBService, "like", `${storageId}`) - const docSnapShot = await getDoc(getLikeRef) + const { storageId, userId } = req.query + + if (userId !== undefined) { + const getLikeFeedIdsRef = doc(DBService, "users", `${userId}`) + const docSnapShot = await getDoc(getLikeFeedIdsRef) + + if (docSnapShot.exists()) { + const likeFeedIds = docSnapShot.data().likeFeedIds + + res.status(200).json(likeFeedIds as string[]) + return + } + res.status(404).json("not-found") + return + } + if (storageId !== undefined && typeof storageId === "string") { + const querySnapShot = await getDocs(collection(DBService, "users")) + const userIds: string[] = [] + + querySnapShot.forEach((doc) => { + const user = doc.data() as Omit + + if ((user.likeFeedIds ?? []).includes(storageId)) + userIds.push(user.info.userId) + }) - if (docSnapShot.exists()) { - const data = docSnapShot.data()?.likerList - res.status(200).json(data as string[]) + res.status(200).json(userIds) } } else if (req.method === "PUT") { const { storageId, userId } = req.body - const likeRef = doc(DBService, "like", storageId) + const userLikeFeedIdsRef = doc(DBService, "users", userId) - await updateDoc(likeRef, { - likerList: arrayUnion(userId), + updateDoc(userLikeFeedIdsRef, { + likeFeedIds: arrayUnion(storageId), }) - .catch(async (error) => { - if (error.code === "not-found") { - await setDoc(likeRef, { - likerList: [userId], - }).catch((error) => res.status(500).json(error.code)) - } else { - res.status(500).json(error.code) - } - }) .then(() => { - res.status(200).json("Success") + res.status(200).json("success") + }) + .catch((error) => { + if (error === "not-found") { + setDoc(userLikeFeedIdsRef, { + likeFeedIds: [storageId], + }) + return + } + res.status(500).json(error.code) }) } else if (req.method === "DELETE") { - const { storageId, userId } = req.body - const likeRef = doc(DBService, "like", storageId) + const { storageId, userId } = req.query + const likeFeedIdsRef = doc(DBService, "users", `${userId}`) - await updateDoc(likeRef, { - likerList: arrayRemove(userId), + await updateDoc(likeFeedIdsRef, { + likeFeedIds: arrayRemove(storageId), }) .catch((error) => { res.status(500).json(error.code) diff --git a/firebase-practice/pages/api/profile.ts b/firebase-practice/pages/api/profile.ts index 5e1500b..d04cf45 100644 --- a/firebase-practice/pages/api/profile.ts +++ b/firebase-practice/pages/api/profile.ts @@ -20,6 +20,7 @@ export default async function profile( ) { if (req.method === "GET") { const userId = req.query?.userId + const getProfileRef = doc(DBService, "users", `${userId}`) const docSnapShot = await getDoc(getProfileRef) @@ -34,10 +35,10 @@ export default async function profile( const setProfileRef = doc(DBService, "users", `${userId}`) const profileForm: UserInfo = { - userId: userId, - profileImage: profileImage, + userId, + profileImage, name: userName, - email: email, + email, } await updateDoc(setProfileRef, { diff --git a/firebase-practice/pages/api/userFeed.ts b/firebase-practice/pages/api/userFeed.ts index add3b8e..8cbf045 100644 --- a/firebase-practice/pages/api/userFeed.ts +++ b/firebase-practice/pages/api/userFeed.ts @@ -1,4 +1,5 @@ import { DBService } from "@FireBase" +import axios from "axios" import { FeedItem } from "backend/dto" import { doc, getDoc } from "firebase/firestore" import type { NextApiRequest, NextApiResponse } from "next" @@ -14,15 +15,26 @@ export default async function getFeed( res: NextApiResponse, ) { if (req.method === "GET") { + const userId = req.query.userId + const getFeedRef = doc(DBService, "mainPage", "userFeedDataAll") + const getProfileRef = doc(DBService, "users", `${userId}`) + const docSnapShot = await getDoc(getFeedRef) - const userId = req.query.userId + const userInfoDocSnapShot = await getDoc(getProfileRef) if (userId === undefined) res.status(400).json("userId query is missing") if (docSnapShot.exists()) { - const data = docSnapShot.data()?.feed as FeedItem[] - const userData = data.filter((feedItem) => feedItem.creator === userId) + const data = docSnapShot.data()?.feed as (Omit & { + creator: string + })[] + const userData = data + .filter((feedItem) => feedItem.creator === userId) + .map((feedItem) => ({ + ...feedItem, + creator: userInfoDocSnapShot.data()?.info, + })) userData.sort((a, b) => Number(b.uploadTime) - Number(a.uploadTime)) diff --git a/firebase-practice/pages/mypage.tsx b/firebase-practice/pages/mypage.tsx index 6d1be44..c3455cb 100644 --- a/firebase-practice/pages/mypage.tsx +++ b/firebase-practice/pages/mypage.tsx @@ -34,19 +34,18 @@ export default function Profile() { const currentUserData = useRecoilValue(userDataState) const feedDataType = useRecoilValue(FeedDataFilter) - const [feedData, setFeedData] = useState([]) const selectedFeedData = useRecoilValue(feedDataState) + const likeUserList = useRecoilValue(userListState) + const [feedData, setFeedData] = useState([]) const [isCommentModalOpen, setIsCommentModalOpen] = useState(false) const [isUserListModalOpen, setIsUserListModalOpen] = useState(false) - const likeUserList = useRecoilValue(userListState) - const [isFeedUploadModalOpen, setIsFeedUploadModalOpen] = useState(false) useEffect(() => { - if (currentUserData === undefined || currentUserData.feed === undefined) - return + if (currentUserData.feed === undefined) return + if (feedDataType === "public") { setFeedData( currentUserData.feed.filter((eachFeed) => !eachFeed.isPrivate), @@ -82,7 +81,7 @@ export default function Profile() { {feedData !== undefined ? ( {isCurrentUserLike ? ( - + ) : ( - + )} ([]) - const [likerList, setLikerList] = useState([]) const currentUser = useRecoilValue(userDataState) const setLikeUserList = useSetRecoilState(userListState) const setSelectedFeedData = useSetRecoilState(feedDataState) const isDarkMode = useRecoilValue(darkModeState) - const [isCurrentUserLike, setIsCurrentUserLike] = useState(false) + const [likeUserIds, setLikeUserIds] = useState([]) useEffect(() => { axios({ @@ -49,24 +48,13 @@ export default function LikeCommentInfo({ }) .catch((error) => console.log(error)) - axios({ - method: "GET", - url: `/api/like?storageId=${feedData.storageId}`, - }).then((res) => { - setLikerList(res.data) + axios.get(`/api/like?storageId=${feedData.storageId}`).then((response) => { + const likeUserIdsResponse = response.data + + setLikeUserIds(likeUserIdsResponse) }) }, [feedData]) - useEffect(() => { - if (!likerList) return - if (!currentUser) return - if (currentUser.info.userId === "") return - if (likerList.includes(currentUser.info.userId)) setIsCurrentUserLike(true) - else { - setIsCurrentUserLike(false) - } - }, [likerList, currentUser]) - return ( <> - {isCurrentUserLike ? ( - + {(currentUser.likeFeedIds ?? []).includes(feedData.storageId) ? ( + ) : ( - + )} { + setLikeUserList(likeUserIds) setIsLikeModalOpen(true) - setLikeUserList(likerList) }} > - 좋아요 {likerList ? likerList.length : "0"}개 + 좋아요 {likeUserIds ? likeUserIds.length : "0"}개 댓글 {commentData ? commentData.length : "0"}개 diff --git a/firebase-practice/src/components/share/Feed/mainPage/FeedCard/index.tsx b/firebase-practice/src/components/share/Feed/mainPage/FeedCard/index.tsx index 6d20453..6a2ce43 100644 --- a/firebase-practice/src/components/share/Feed/mainPage/FeedCard/index.tsx +++ b/firebase-practice/src/components/share/Feed/mainPage/FeedCard/index.tsx @@ -10,11 +10,14 @@ import { ProfileIcon } from "icons" import Desc from "./Desc" import LikeCommentInfo from "./LikeCommentInfo" import Link from "next/link" +import ThreeDotMenu from "@share/Feed/mypage/FeedSortingCard/ThreeDotMenu" type Props = { feedData: FeedItem + isCurrentUserFeed?: boolean setIsCommentModalOpen: React.Dispatch> setIsLikeModalOpen: React.Dispatch> + setIsFeedUploadModalOpen?: React.Dispatch> } const Style = { @@ -68,19 +71,14 @@ const Style = { export default function FeedCard({ feedData, + isCurrentUserFeed, setIsCommentModalOpen, setIsLikeModalOpen, + setIsFeedUploadModalOpen, }: Props) { - const router = useRouter() - const currentUser = useRecoilValue(userDataState) - const [routingPath, setRoutingPath] = useState("") const isDarkMode = useRecoilValue(darkModeState) - useEffect(() => { - if (routingPath !== "") router.replace(`${routingPath}`) - }, [routingPath]) - return ( {feedData.location} + {isCurrentUserFeed && setIsFeedUploadModalOpen && ( + + )} {feedData.imageUrl ? ( > setIsFeedUploadModalOpen: React.Dispatch> setIsUserListModalOpen: React.Dispatch> @@ -34,7 +34,7 @@ const Style = { } export default function FeedSortList({ - feedData, + feeds, setIsCommentModalOpen, setIsFeedUploadModalOpen, setIsUserListModalOpen: setIsLikeModalOpen, @@ -48,17 +48,18 @@ export default function FeedSortList({ ) : ( <> - {feedData !== undefined && feedData.length !== 0 ? ( + {feeds !== undefined && feeds.length !== 0 ? ( <> - {[...feedData] + {[...feeds] .sort((a, b) => { return Number(b.uploadTime) - Number(a.uploadTime) }) - .map((data) => { + .map((feed) => { return ( - > - name: string | null | undefined -} - -const Style = { - CommentBox: styled.div` - width: 100%; - white-space: pre-wrap; - padding: 0px 10px; - max-height: 200px; - display: flex; - overflow-y: scroll; - ::-webkit-scrollbar { - display: none; - } - `, -} - -export default function Desc({ feedData, setIsCommentModalOpen, name }: Props) { - const setSelectedFeedData = useSetRecoilState(feedDataState) - const isDarkMode = useRecoilValue(darkModeState) - return ( - - - {feedData.desc.length > 0 ? ( - - {name} - - ) : ( - { - setSelectedFeedData(feedData) - setIsCommentModalOpen(true) - }} - > - 더보기 - - )} - - {feedData.desc.length > 10 ? ( - - {`${feedData.desc.slice(0, 10)}...`} - - { - setSelectedFeedData(feedData) - setIsCommentModalOpen(true) - }} - > - 더보기 - - - ) : ( - - {feedData.desc} - - )} - - - ) -} diff --git a/firebase-practice/src/components/share/Feed/mypage/FeedSortingCard/LikeCommentInfo.tsx b/firebase-practice/src/components/share/Feed/mypage/FeedSortingCard/LikeCommentInfo.tsx deleted file mode 100644 index 6399734..0000000 --- a/firebase-practice/src/components/share/Feed/mypage/FeedSortingCard/LikeCommentInfo.tsx +++ /dev/null @@ -1,111 +0,0 @@ -import { - darkModeState, - feedDataState, - userDataState, - userListState, -} from "@share/recoil/recoilList" -import axios from "axios" -import { FeedItem } from "backend/dto" -import React, { SetStateAction, useCallback, useEffect, useState } from "react" -import { useRecoilValue, useSetRecoilState } from "recoil" -import { - CommentIcon, - CustomH6, - FlexBox, - FullHeart, - HeartIcon, - Margin, - ShareIcon, -} from "ui" - -type Props = { - feedData: FeedItem - setIsCommentModalOpen: React.Dispatch> - setIsLikeModalOpen: React.Dispatch> -} - -export default function LikeCommentInfo({ - feedData, - setIsCommentModalOpen, - setIsLikeModalOpen, -}: Props) { - const [commentData, setCommentData] = useState([]) - const [likerList, setLikerList] = useState([]) - const [isCurrentUserLike, setIsCurrentUserLike] = useState(false) - const currentUser = useRecoilValue(userDataState) - const setLikeUserList = useSetRecoilState(userListState) - const setSelectedFeedData = useSetRecoilState(feedDataState) - const isDarkMode = useRecoilValue(darkModeState) - - useEffect(() => { - axios({ - method: "GET", - url: `/api/comment?commentId=${feedData.storageId}`, - }) - .then((res) => { - setCommentData(res.data) - }) - .catch((error) => console.log(error)) - - axios({ - method: "GET", - url: `/api/like?storageId=${feedData.storageId}`, - }).then((res) => { - setLikerList(res.data) - }) - }, []) - - const handleCurrentUserLike = useCallback((isLike: boolean) => { - setIsCurrentUserLike(isLike) - }, []) - - useEffect(() => { - if (!likerList) return - if (!currentUser) return - if (currentUser.info.userId === "") return - if (likerList.includes(currentUser.info.userId)) handleCurrentUserLike(true) - else handleCurrentUserLike(false) - }, [likerList, currentUser]) - - return ( - <> - - - {isCurrentUserLike ? ( - - ) : ( - - )} - - { - setSelectedFeedData(feedData) - setIsCommentModalOpen(true) - }} - /> - - - - - - { - setIsLikeModalOpen(true) - setLikeUserList(likerList) - }} - > - 좋아요 {likerList ? likerList.length : "0"}개 - - - 댓글 {commentData ? commentData.length : "0"}개 - - - - ) -} diff --git a/firebase-practice/src/components/share/Feed/mypage/FeedSortingCard/index.tsx b/firebase-practice/src/components/share/Feed/mypage/FeedSortingCard/index.tsx deleted file mode 100644 index 99f5714..0000000 --- a/firebase-practice/src/components/share/Feed/mypage/FeedSortingCard/index.tsx +++ /dev/null @@ -1,154 +0,0 @@ -import { darkModeState, userDataState } from "@share/recoil/recoilList" -import axios from "axios" -import { FeedItem, UserData, UserInfo } from "backend/dto" -import { ProfileIcon } from "icons" -import Image from "next/image" -import { SetStateAction, useEffect, useState } from "react" -import { useRecoilValue } from "recoil" -import styled from "styled-components" -import { FlexBox, Margin } from "ui" -import Desc from "./Desc" -import LikeCommentInfo from "./LikeCommentInfo" -import ThreeDotMenu from "./ThreeDotMenu" - -type Props = { - feedData: FeedItem - setIsCommentModalOpen: React.Dispatch> - setIsFeedUploadModalOpen: React.Dispatch> - setIsLikeModalOpen: React.Dispatch> -} - -const Style = { - ImageHeader: styled.div` - width: 470px; - height: 58px; - display: flex; - align-items: center; - padding-left: 15px; - justify-content: space-between; - border-radius: 10px; - border-bottom: none; - position: relative; - @media (max-width: 500px) { - width: 95%; - padding: 0px 5px; - } - `, - HeaderText: styled.div` - display: flex; - flex-direction: column; - height: 38px; - justify-content: center; - `, - UserName: styled.span` - font-size: 12px; - font-weight: bold; - color: black; - `, - ImageTitle: styled.span` - font-size: 7px; - font-weight: 400; - color: gray; - `, - ImageCard: styled.div` - width: 470px; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - border: 1px solid lightgrey; - border-radius: 10px; - padding-bottom: 10px; - background-color: white; - max-width: 470px; - @media (max-width: 900px) { - width: 95%; - } - `, -} - -export default function FeedSortingCard({ - feedData, - setIsCommentModalOpen, - setIsFeedUploadModalOpen, - setIsLikeModalOpen, -}: Props) { - const userData = useRecoilValue(userDataState) - const [creatorInfo, setCreatorInfo] = useState() - const isDarkMode = useRecoilValue(darkModeState) - - useEffect(() => { - axios({ - method: "GET", - url: `/api/profile?userId=${feedData.creator}`, - }).then((response) => { - setCreatorInfo(response.data?.info) - }) - }, [feedData]) - - return ( - <> - {userData && ( - - - - {userData.info.profileImage ? ( - creator - ) : ( - - )} - - - {userData?.info.name} - - {feedData.location} - - - - - {feedData.imageUrl ? ( - Image - ) : ( - Image - )} - - - - - )} - - ) -} diff --git a/firebase-practice/src/components/share/Modal/comment/Icons.tsx b/firebase-practice/src/components/share/Modal/comment/Icons.tsx index 47b5516..3509919 100644 --- a/firebase-practice/src/components/share/Modal/comment/Icons.tsx +++ b/firebase-practice/src/components/share/Modal/comment/Icons.tsx @@ -64,9 +64,9 @@ export default function Icons({ storageId, inputRef }: Props) { {isCurrentUserLiked ? ( - + ) : ( - + )} { - const storageImageRef = ref( - storageService, - `images/${feedData.creator}/${feedData.storageId}`, - ) - const firestoreAllRef = doc(DBService, "mainPage", "userFeedDataAll") - const firestoreCommentRef = doc(DBService, "Comments", feedData.storageId) - const firestorePersonalRef = doc(DBService, `users`, `${feedData.creator}`) - const firestoreLikeRef = doc(DBService, "like", feedData.storageId) - setMainFeedItems((feedItems) => feedItems.filter((feedItem) => feedItem.storageId !== feedData.storageId), ) @@ -193,22 +184,28 @@ export const useFeedCRUD = ({ // TODO: 이 부분을 API 요청으로 대체하고, 요청 후 response에서 새로 바뀐 리스트를 반환해 // 해당 리스트로 다시 recoil을 set해주도록 수정하기 - updateDoc(firestorePersonalRef, { - feed: arrayRemove(feedData), - }).catch((error) => console.log(error.code)) - updateDoc(firestoreAllRef, { - feed: arrayRemove(feedData), - }).catch((error) => console.log(error.code)) - - deleteObject(storageImageRef).catch((error) => console.log(error.code)) - deleteDoc(firestoreCommentRef).catch((error) => console.log(error.code)) - deleteDoc(firestoreLikeRef).catch((error) => console.log(error.code)) + axios.delete(`/api/feed`, { + data: { + userId: currentUser.info.userId, + storageId: feedData.storageId, + imageUrl: feedData.imageUrl, + desc: feedData.desc, + location: feedData.location, + isPrivate: feedData.isPrivate, + creator: feedData.creator.userId, + uploadTime: feedData.uploadTime, + }, + }) } const handlePrivateToggle = (feedData: FeedItem) => { const firestoreImageAllRef = doc(DBService, "mainPage", "userFeedDataAll") - const firestorePersonalRef = doc(DBService, `users`, `${feedData.creator}`) + const firestorePersonalRef = doc( + DBService, + `users`, + `${feedData.creator.userId}`, + ) setMainFeedItems((feedItems) => feedItems.map((feedItem) => { diff --git a/firebase-practice/src/ui.tsx b/firebase-practice/src/ui.tsx index 06cb6c0..addaed2 100644 --- a/firebase-practice/src/ui.tsx +++ b/firebase-practice/src/ui.tsx @@ -1,5 +1,6 @@ import { authService, DBService } from "@FireBase" import { darkModeState, userDataState } from "@share/recoil/recoilList" +import axios from "axios" import { arrayRemove, arrayUnion, @@ -8,7 +9,7 @@ import { updateDoc, } from "firebase/firestore" import Link from "next/link" -import { useRecoilValue } from "recoil" +import { useRecoilValue, useRecoilState } from "recoil" import styled from "styled-components" type FlexBoxProperty = { @@ -135,22 +136,24 @@ export const CustomH4Light = TextStyle.CustomH4Light export const CustomH5Light = TextStyle.CustomH5Light export const CustomH6Light = TextStyle.CustomH6Light -type HeartProps = { storgateId: string } +type HeartProps = { storageId: string } -export function HeartIcon({ storgateId }: HeartProps) { - const handleLike = async () => { - const likeRef = doc(DBService, "like", storgateId) - await updateDoc(likeRef, { - likerList: arrayUnion(authService.currentUser?.uid), - }).catch(async (error) => { - if (error.code === "not-found") { - await setDoc(likeRef, { - likerList: [authService.currentUser?.uid], - }) - } +export function HeartIcon({ storageId }: HeartProps) { + const [currentUser, setCurrentUser] = useRecoilState(userDataState) + + const handleLike = () => { + setCurrentUser((user) => ({ + ...user, + likeFeedIds: [...(user.likeFeedIds ?? []), storageId], + })) + + axios.put(`/api/like`, { + userId: currentUser.info.userId, + storageId, }) } const isDarkMode = useRecoilValue(darkModeState) + return ( { - await updateDoc(likeRef, { - likerList: arrayRemove(authService.currentUser?.uid), - }) + setCurrentUser((user) => ({ + ...user, + likeFeedIds: (user.likeFeedIds ?? []).filter( + (feedId) => feedId !== storageId, + ), + })) + + axios.delete( + `/api/like?userId=${currentUser.info.userId}&storageId=${storageId}`, + ) } return ( From f4059c81ecc3375854c3bf8142fbcf111bf373bb Mon Sep 17 00:00:00 2001 From: kyw0716 Date: Fri, 16 Jun 2023 17:40:14 +0900 Subject: [PATCH 26/28] =?UTF-8?q?chore:=20=EC=9E=98=EB=AA=BB=20=EC=A7=80?= =?UTF-8?q?=EC=9A=B4=20=ED=8C=8C=EC=9D=BC=20=EB=B3=B5=EA=B5=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/share/Feed/mypage/FeedSortList.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/firebase-practice/src/components/share/Feed/mypage/FeedSortList.tsx b/firebase-practice/src/components/share/Feed/mypage/FeedSortList.tsx index 39d016f..56599ea 100644 --- a/firebase-practice/src/components/share/Feed/mypage/FeedSortList.tsx +++ b/firebase-practice/src/components/share/Feed/mypage/FeedSortList.tsx @@ -10,7 +10,7 @@ import { v4 } from "uuid" import FeedCard from "../mainPage/FeedCard" type Props = { - feeds: FeedItem[] | undefined + feedData: FeedItem[] | undefined setIsCommentModalOpen: React.Dispatch> setIsFeedUploadModalOpen: React.Dispatch> setIsUserListModalOpen: React.Dispatch> @@ -34,7 +34,7 @@ const Style = { } export default function FeedSortList({ - feeds, + feedData: feeds, setIsCommentModalOpen, setIsFeedUploadModalOpen, setIsUserListModalOpen: setIsLikeModalOpen, From 4bd42817dc876b9fee49f416059035300b4ab482 Mon Sep 17 00:00:00 2001 From: kyw0716 Date: Fri, 16 Jun 2023 17:42:09 +0900 Subject: [PATCH 27/28] =?UTF-8?q?style:=20props=20=EB=84=A4=EC=9D=B4?= =?UTF-8?q?=EB=B0=8D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/share/Feed/mainPage/FeedCard/index.tsx | 3 +-- .../src/components/share/Feed/mypage/FeedSortList.tsx | 4 ++-- .../share/Feed/mypage/{FeedSortingCard => }/ThreeDotMenu.tsx | 0 3 files changed, 3 insertions(+), 4 deletions(-) rename firebase-practice/src/components/share/Feed/mypage/{FeedSortingCard => }/ThreeDotMenu.tsx (100%) diff --git a/firebase-practice/src/components/share/Feed/mainPage/FeedCard/index.tsx b/firebase-practice/src/components/share/Feed/mainPage/FeedCard/index.tsx index 6a2ce43..d66c1dc 100644 --- a/firebase-practice/src/components/share/Feed/mainPage/FeedCard/index.tsx +++ b/firebase-practice/src/components/share/Feed/mainPage/FeedCard/index.tsx @@ -1,7 +1,6 @@ import { darkModeState, userDataState } from "@share/recoil/recoilList" import { FeedItem, UserData } from "backend/dto" import Image from "next/image" -import { useRouter } from "next/router" import { SetStateAction, useEffect, useState } from "react" import { useRecoilValue } from "recoil" import styled from "styled-components" @@ -10,7 +9,7 @@ import { ProfileIcon } from "icons" import Desc from "./Desc" import LikeCommentInfo from "./LikeCommentInfo" import Link from "next/link" -import ThreeDotMenu from "@share/Feed/mypage/FeedSortingCard/ThreeDotMenu" +import ThreeDotMenu from "@share/Feed/mypage/ThreeDotMenu" type Props = { feedData: FeedItem diff --git a/firebase-practice/src/components/share/Feed/mypage/FeedSortList.tsx b/firebase-practice/src/components/share/Feed/mypage/FeedSortList.tsx index 56599ea..39d016f 100644 --- a/firebase-practice/src/components/share/Feed/mypage/FeedSortList.tsx +++ b/firebase-practice/src/components/share/Feed/mypage/FeedSortList.tsx @@ -10,7 +10,7 @@ import { v4 } from "uuid" import FeedCard from "../mainPage/FeedCard" type Props = { - feedData: FeedItem[] | undefined + feeds: FeedItem[] | undefined setIsCommentModalOpen: React.Dispatch> setIsFeedUploadModalOpen: React.Dispatch> setIsUserListModalOpen: React.Dispatch> @@ -34,7 +34,7 @@ const Style = { } export default function FeedSortList({ - feedData: feeds, + feeds, setIsCommentModalOpen, setIsFeedUploadModalOpen, setIsUserListModalOpen: setIsLikeModalOpen, diff --git a/firebase-practice/src/components/share/Feed/mypage/FeedSortingCard/ThreeDotMenu.tsx b/firebase-practice/src/components/share/Feed/mypage/ThreeDotMenu.tsx similarity index 100% rename from firebase-practice/src/components/share/Feed/mypage/FeedSortingCard/ThreeDotMenu.tsx rename to firebase-practice/src/components/share/Feed/mypage/ThreeDotMenu.tsx From f16148f3b77551cb2da01247b05ba103183a023d Mon Sep 17 00:00:00 2001 From: kyw0716 Date: Fri, 16 Jun 2023 18:29:16 +0900 Subject: [PATCH 28/28] =?UTF-8?q?chore:=20.env=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- firebase-practice/.gitignore | 3 +++ firebase-practice/pages/api/comment.ts | 1 - firebase-practice/src/FireBase.tsx | 13 +++++++------ .../share/Feed/mainPage/FeedCard/index.tsx | 4 ++-- 4 files changed, 12 insertions(+), 9 deletions(-) diff --git a/firebase-practice/.gitignore b/firebase-practice/.gitignore index d2205b7..5e62f0c 100644 --- a/firebase-practice/.gitignore +++ b/firebase-practice/.gitignore @@ -36,3 +36,6 @@ yarn-error.log* # test page test.tsx + +# env +.env \ No newline at end of file diff --git a/firebase-practice/pages/api/comment.ts b/firebase-practice/pages/api/comment.ts index f74099b..6b7ff66 100644 --- a/firebase-practice/pages/api/comment.ts +++ b/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} diff --git a/firebase-practice/src/FireBase.tsx b/firebase-practice/src/FireBase.tsx index ed9a1cf..a8fd41e 100644 --- a/firebase-practice/src/FireBase.tsx +++ b/firebase-practice/src/FireBase.tsx @@ -4,13 +4,14 @@ import { getFirestore } from "firebase/firestore" import { getStorage } from "firebase/storage" const firebaseConfig = { - apiKey: "AIzaSyC7IT7tMtvVzSI2tj7JSPfdU3tZSgXCcG4", - authDomain: "fir-practice-d0e2e.firebaseapp.com", - projectId: "fir-practice-d0e2e", - storageBucket: "fir-practice-d0e2e.appspot.com", - messagingSenderId: "116460764746", - appId: "1:116460764746:web:73f450e7b7442ff3a230b3", + apiKey: process.env.NEXT_PUBLIC_API_KEY, + authDomain: process.env.NEXT_PUBLIC_AUTH_DOMAIN, + projectId: process.env.NEXT_PUBLIC_PROJECT_ID, + storageBucket: process.env.NEXT_PUBLIC_STORAGE_BUCKET, + messagingSenderId: process.env.NEXT_PUBLIC_MESSAGING_SENDER_ID, + appId: process.env.NEXT_PUBLIC_APP_ID, } + const FireBasApp = initializeApp(firebaseConfig) export const authService = getAuth(FireBasApp) export const DBService = getFirestore(FireBasApp) diff --git a/firebase-practice/src/components/share/Feed/mainPage/FeedCard/index.tsx b/firebase-practice/src/components/share/Feed/mainPage/FeedCard/index.tsx index d66c1dc..9ad28ed 100644 --- a/firebase-practice/src/components/share/Feed/mainPage/FeedCard/index.tsx +++ b/firebase-practice/src/components/share/Feed/mainPage/FeedCard/index.tsx @@ -1,7 +1,7 @@ import { darkModeState, userDataState } from "@share/recoil/recoilList" -import { FeedItem, UserData } from "backend/dto" +import { FeedItem } from "backend/dto" import Image from "next/image" -import { SetStateAction, useEffect, useState } from "react" +import { SetStateAction } from "react" import { useRecoilValue } from "recoil" import styled from "styled-components" import { FlexBox, Margin } from "ui"