From 93cca1a1e3cbb5a6585cea294ae88f06395d2c87 Mon Sep 17 00:00:00 2001 From: chogyejin Date: Sun, 10 Jul 2022 15:20:07 +0900 Subject: [PATCH 1/5] =?UTF-8?q?style:=20=EC=82=AC=EC=9A=A9=EC=9E=90=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=EC=97=90=EC=84=9C=20=ED=8C=94?= =?UTF-8?q?=EB=A1=9C=EC=9B=8C/=ED=8C=94=EB=A1=9C=EC=9E=89=20=EC=88=AB?= =?UTF-8?q?=EC=9E=90=20cursor:pointer=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/domain/ProfilePage/MySummary.tsx | 8 ++++++-- src/components/domain/ProfilePage/OtherSummary.tsx | 8 ++++++-- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/src/components/domain/ProfilePage/MySummary.tsx b/src/components/domain/ProfilePage/MySummary.tsx index e8ded5b..2614848 100644 --- a/src/components/domain/ProfilePage/MySummary.tsx +++ b/src/components/domain/ProfilePage/MySummary.tsx @@ -57,11 +57,15 @@ const MySummary = ({ {introduce}
- {followerCount} + + {followerCount} +
팔로워
- {followingCount} + + {followingCount} +
팔로잉
 diff --git a/src/components/domain/ProfilePage/OtherSummary.tsx b/src/components/domain/ProfilePage/OtherSummary.tsx index dbe05e1..1edf53b 100644 --- a/src/components/domain/ProfilePage/OtherSummary.tsx +++ b/src/components/domain/ProfilePage/OtherSummary.tsx @@ -64,11 +64,15 @@ const OtherSummary = ({ {introduce}
- {followerCount} + + {followerCount} +
팔로워
- {followingCount} + + {followingCount} +
팔로잉
 From 755eb7c70715364aeea77785f25d8d5d736e214c Mon Sep 17 00:00:00 2001 From: chogyejin Date: Sun, 10 Jul 2022 15:38:09 +0900 Subject: [PATCH 2/5] =?UTF-8?q?fix:=20PageTab=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20prop=EB=AA=85=20=EC=88=98=EC=A0=95,=20?= =?UTF-8?q?=ED=8C=94=EB=A1=9C=EC=9B=8C/=ED=8C=94=EB=A1=9C=EC=9E=89=20?= =?UTF-8?q?=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=EC=88=9C=EC=84=9C=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 --- .../domain/FollowPage/FollowPageTab.tsx | 18 +++++++++--------- src/pages/FollowPage.tsx | 2 +- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/components/domain/FollowPage/FollowPageTab.tsx b/src/components/domain/FollowPage/FollowPageTab.tsx index 67ae177..141c3e6 100644 --- a/src/components/domain/FollowPage/FollowPageTab.tsx +++ b/src/components/domain/FollowPage/FollowPageTab.tsx @@ -23,10 +23,10 @@ const TabsContainer = styled.div` type FollowPageProp = { followingList: User[]; - followersList: User[]; + followerList: User[]; }; -const FollowPageTab = ({ followingList, followersList }: FollowPageProp) => { +const FollowPageTab = ({ followingList, followerList }: FollowPageProp) => { const [selectedTab, setSelectedTab] = useState(0); const navigate = useNavigate(); const handleClickUser = (userId: string): void => { @@ -64,16 +64,15 @@ const FollowPageTab = ({ followingList, followersList }: FollowPageProp) => { - {followingList.length ? ( + {followerList.length ? ( - {followingList.map((user) => { + {followerList.map((user) => { return ( { handleClickUser(user._id); }} @@ -83,19 +82,20 @@ const FollowPageTab = ({ followingList, followersList }: FollowPageProp) => { })} ) : ( - 아직 팔로잉이 없어요! + 아직 팔로워가 없어요! )} - {followersList.length ? ( + {followingList.length ? ( - {followersList.map((user) => { + {followingList.map((user) => { return ( { handleClickUser(user._id); }} @@ -105,7 +105,7 @@ const FollowPageTab = ({ followingList, followersList }: FollowPageProp) => { })} ) : ( - 아직 팔로워가 없어요! + 아직 팔로잉이 없어요! )} diff --git a/src/pages/FollowPage.tsx b/src/pages/FollowPage.tsx index c08e059..3630fb8 100644 --- a/src/pages/FollowPage.tsx +++ b/src/pages/FollowPage.tsx @@ -46,7 +46,7 @@ const FollowPage = () => { return ( ); }; From 5ec704bbeed1a13385baf8700ba0d4c94cea0dc2 Mon Sep 17 00:00:00 2001 From: chogyejin Date: Tue, 12 Jul 2022 14:00:28 +0900 Subject: [PATCH 3/5] =?UTF-8?q?feat:=20=EB=8B=A4=EB=A5=B8=20=EC=82=AC?= =?UTF-8?q?=EC=9A=A9=EC=9E=90=20=ED=8E=98=EC=9D=B4=EC=A7=80=EC=97=90?= =?UTF-8?q?=EC=84=9C=20=ED=8C=94=EB=A1=9C=EC=9A=B0=20/=20=ED=8C=94?= =?UTF-8?q?=EB=A1=9C=EC=9A=B0=20=EC=B7=A8=EC=86=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/follow.ts | 22 ++- .../domain/ProfilePage/OtherSummary.tsx | 137 ++++++++++++------ src/pages/OtherProfilePage.tsx | 4 +- 3 files changed, 110 insertions(+), 53 deletions(-) diff --git a/src/api/follow.ts b/src/api/follow.ts index d1a7817..edd7a7c 100644 --- a/src/api/follow.ts +++ b/src/api/follow.ts @@ -1,11 +1,25 @@ import axios from "@lib/axios"; +import { Follow } from "src/types"; -export const fetchPostFollowByUserId = (userId: string) => - axios.post("/follow/create", { +export const fetchPostFollowByUserId = async (userId: string) => { + const { data } = await axios.post("/follow/create", { userId, }); -export const fetchDeleteFollowByUserId = (id: string) => - axios.delete("/follow/delete", { + return data; +}; + +export const fetchDeleteFollowByUserId = async (id: string) => { + const { data } = await axios.delete("/follow/delete", { data: { id }, }); + + return data; +}; + +// createdAt: "2022-07-11T09:42:24.894Z" +// follower: "62b0afd5671b1a50e2eb6cbb" +// updatedAt: "2022-07-11T09:42:24.894Z" +// user: "62aeb801f9b8ca611c46650b" +// __v: 0 +// _id: "62cbf080cf52f92bfbddb2fa" diff --git a/src/components/domain/ProfilePage/OtherSummary.tsx b/src/components/domain/ProfilePage/OtherSummary.tsx index 1edf53b..0f6e194 100644 --- a/src/components/domain/ProfilePage/OtherSummary.tsx +++ b/src/components/domain/ProfilePage/OtherSummary.tsx @@ -1,86 +1,129 @@ -import { fetchPostFollowByUserId } from "@api/follow"; +import { + fetchDeleteFollowByUserId, + fetchPostFollowByUserId, +} from "@api/follow"; import { Button, Text } from "@chakra-ui/react"; import styled from "@emotion/styled"; +import userAtom from "@store/user"; +import { useAtom } from "jotai"; +import { useEffect, useState } from "react"; +import { useMutation } from "react-query"; import { useNavigate } from "react-router-dom"; +import { Follow } from "src/types"; interface UserSummaryProps { introduce: string; - followerCount: number; - followingCount: number; + followerList: Follow[]; + followingList: Follow[]; id: string; } -const IntroduceText = styled(Text)` - padding-top: 32px; -`; - -const UserSummaryContainer = styled.div` - width: 50%; - display: block; - text-align: center; -`; - -const FollowContainer = styled.div` - display: flex; - justify-content: space-evenly; - margin-top: 40px; - - & p { - font-weight: 700; - } -`; - -const CButton = styled(Button)` - width: 100%; - color: white; - background-color: #ffaa6d; - margin-top: 12px; - - &:hover { - background-color: #ff7900; - } -`; - const OtherSummary = ({ introduce, - followerCount, - followingCount, + followerList, + followingList, id, }: UserSummaryProps) => { const navigate = useNavigate(); + const [me] = useAtom(userAtom); + const [followerListLength, setFollowerListLength] = useState( + followerList.length + ); + const [isFollowing, setIsFollowing] = useState(false); + const { mutate: createFollowMutate } = useMutation(fetchPostFollowByUserId, { + onMutate: () => { + setFollowerListLength((state) => state + 1); + }, + }); + const { mutate: deleteFollowMutate } = useMutation( + fetchDeleteFollowByUserId, + { + onMutate: () => { + setFollowerListLength((state) => state - 1); + }, + } + ); - const handleFollowingClick = () => { + useEffect(() => { + followerList.forEach(({ follower }) => { + if (follower === me._id) { + setIsFollowing(true); + } + }); + }, []); + + const handleFollowCountClick = () => { navigate(`/follow/${id}`); }; - const handleFollowClick = () => { - void (async () => { - await fetchPostFollowByUserId(id); - })(); + const handleFollowButtonClick = () => { + // 팔로잉 중일 때 + if (isFollowing === true) { + if (confirm("팔로잉을 취소하실래요?")) { + followerList.forEach((item) => { + if (item.follower === me._id) { + setIsFollowing(false); + deleteFollowMutate(item._id); + } + }); + } + return; + } + + // 팔로잉 중이지 않을 때 + setIsFollowing(true); + createFollowMutate(id); }; return ( - {introduce} + + {introduce} +
- - {followerCount} + + {followerListLength}
팔로워
- - {followingCount} + + {followingList.length}
팔로잉
- 팔로우 +
); }; export default OtherSummary; + +const UserSummaryContainer = styled.div` + width: 50%; + display: block; + text-align: center; +`; + +const FollowContainer = styled.div` + display: flex; + justify-content: space-evenly; + margin-top: 40px; + + & p { + font-weight: 700; + } +`; diff --git a/src/pages/OtherProfilePage.tsx b/src/pages/OtherProfilePage.tsx index e95a722..7b576b1 100644 --- a/src/pages/OtherProfilePage.tsx +++ b/src/pages/OtherProfilePage.tsx @@ -36,8 +36,8 @@ const OtherProfilePage = () => { From c443600c7115d5b2ec89c83a6a7613a4e380e1bd Mon Sep 17 00:00:00 2001 From: chogyejin Date: Wed, 13 Jul 2022 13:13:43 +0900 Subject: [PATCH 4/5] =?UTF-8?q?feat:=20=ED=8C=94=EB=A1=9C=EC=9E=89/?= =?UTF-8?q?=ED=8C=94=EB=A1=9C=EC=9A=B0=20=EC=B7=A8=EC=86=8C=20=EA=B8=B0?= =?UTF-8?q?=EB=8A=A5=20=EC=B6=94=EA=B0=80,=20=ED=99=94=EB=A9=B4=20?= =?UTF-8?q?=EB=B0=94=EB=A1=9C=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../domain/FollowPage/FollowPageTab.tsx | 7 +++-- .../domain/ProfilePage/OtherSummary.tsx | 27 ++++++++++--------- src/pages/OtherProfilePage.tsx | 4 +-- 3 files changed, 21 insertions(+), 17 deletions(-) diff --git a/src/components/domain/FollowPage/FollowPageTab.tsx b/src/components/domain/FollowPage/FollowPageTab.tsx index 6111a09..96b042a 100644 --- a/src/components/domain/FollowPage/FollowPageTab.tsx +++ b/src/components/domain/FollowPage/FollowPageTab.tsx @@ -20,8 +20,11 @@ interface Props { } const FollowPageTab = ({ followingList, followerList }: Props) => { + console.log("팔로잉", followingList); + console.log("파로워", followerList); const [selectedTab, setSelectedTab] = useState(0); const navigate = useNavigate(); + const handleClickUser = (userId: string) => { navigate(`/profile/${userId}`); }; @@ -55,11 +58,11 @@ const FollowPageTab = ({ followingList, followerList }: Props) => { 팔로잉 - + {followerList.length ? ( - {followingList.map((user) => ( + {followerList.map((user) => ( { const navigate = useNavigate(); const [me] = useAtom(userAtom); - const [followerListLength, setFollowerListLength] = useState( - followerList.length - ); + const [followerList, setFollowerList] = useState(followers); + const [isFollowing, setIsFollowing] = useState(false); const { mutate: createFollowMutate } = useMutation(fetchPostFollowByUserId, { - onMutate: () => { - setFollowerListLength((state) => state + 1); + onSuccess: (data) => { + setFollowerList((state) => [...state, data]); }, }); const { mutate: deleteFollowMutate } = useMutation( fetchDeleteFollowByUserId, { - onMutate: () => { - setFollowerListLength((state) => state - 1); + onSuccess: (data) => { + setFollowerList((state) => + state.filter((item) => item._id !== data._id) + ); }, } ); @@ -83,13 +84,13 @@ const OtherSummary = ({
- {followerListLength} + {followerList.length}
팔로워
- {followingList.length} + {following.length}
팔로잉
diff --git a/src/pages/OtherProfilePage.tsx b/src/pages/OtherProfilePage.tsx index 38afe63..008c1ba 100644 --- a/src/pages/OtherProfilePage.tsx +++ b/src/pages/OtherProfilePage.tsx @@ -23,8 +23,8 @@ const OtherProfilePage = () => { From 8f9d503aa7751b71c386ded986be72713814d62c Mon Sep 17 00:00:00 2001 From: chogyejin Date: Wed, 13 Jul 2022 19:43:38 +0900 Subject: [PATCH 5/5] =?UTF-8?q?refactor:=20emotion=20=EC=A0=81=EC=9A=A9,?= =?UTF-8?q?=20console.log=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../domain/FollowPage/FollowPageTab.tsx | 51 +++++++++---------- 1 file changed, 24 insertions(+), 27 deletions(-) diff --git a/src/components/domain/FollowPage/FollowPageTab.tsx b/src/components/domain/FollowPage/FollowPageTab.tsx index 96b042a..c7028c6 100644 --- a/src/components/domain/FollowPage/FollowPageTab.tsx +++ b/src/components/domain/FollowPage/FollowPageTab.tsx @@ -20,9 +20,7 @@ interface Props { } const FollowPageTab = ({ followingList, followerList }: Props) => { - console.log("팔로잉", followingList); - console.log("파로워", followerList); - const [selectedTab, setSelectedTab] = useState(0); + const [tabIndex, setTabIndex] = useState(0); const navigate = useNavigate(); const handleClickUser = (userId: string) => { @@ -31,32 +29,25 @@ const FollowPageTab = ({ followingList, followerList }: Props) => { return ( - - - setSelectedTab(0)} + + + setTabIndex(0)} > 팔로워 - - setSelectedTab(1)} + + setTabIndex(1)} > 팔로잉 - + @@ -114,6 +105,12 @@ export default FollowPageTab; const TabsContainer = styled.div` margin-top: 40px; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); - border: none; - border-radius: 6px 0; + background-color: none; +`; + +const CTab = styled(Tab)<{ isSelectedTab: boolean }>` + background-color: ${({ isSelectedTab }) => + isSelectedTab ? "#ffffff" : "#E2E8F0"}; + color: ${({ isSelectedTab }) => (isSelectedTab ? "#ff7900" : "#ffffff")}; + font-weight: ${({ isSelectedTab }) => (isSelectedTab ? "700" : "")}; `;