From 99e132caf1d99fb289bd260f34fc2df9e720d0a9 Mon Sep 17 00:00:00 2001 From: Chaeseungyun Date: Thu, 5 Oct 2023 17:42:08 +0900 Subject: [PATCH 01/27] =?UTF-8?q?feat:=20=EC=B9=9C=EA=B5=AC=20=EC=8B=A0?= =?UTF-8?q?=EC=B2=AD=20=EA=B1=B0=EC=A0=88=20=EB=B2=84=ED=8A=BC=20=EB=B0=8F?= =?UTF-8?q?=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Follow/components/Follower.module.scss | 38 +++++++++++++------ src/pages/Follow/components/Follower.tsx | 33 +++++++++++----- src/pages/Follow/hooks/useRejectRequest.ts | 14 +++++++ 3 files changed, 65 insertions(+), 20 deletions(-) create mode 100644 src/pages/Follow/hooks/useRejectRequest.ts diff --git a/src/pages/Follow/components/Follower.module.scss b/src/pages/Follow/components/Follower.module.scss index 68c01cd2..ec88580a 100644 --- a/src/pages/Follow/components/Follower.module.scss +++ b/src/pages/Follow/components/Follower.module.scss @@ -41,22 +41,26 @@ &__button { border: none; - width: 175px; - background-color: white; + border-radius: 200px; + width: 120px; + height: 50px; + background-color: #eeeeee; cursor: pointer; font-size: 20px; + margin: 0 10px 0 10px; @include media.media-breakpoint-down(mobile) { width: 100px; } &--cancel { - width: 175px; - height: 49px; - border-radius: 10px; + width: 120px; + height: 50px; + border-radius: 200px; background-color: white; border: 1px solid #c4c4c4; color: #c4c4c4; + font-size: 20px; cursor: pointer; @include media.media-breakpoint-down(mobile) { @@ -65,12 +69,24 @@ } &--accept { - width: 175px; - height: 49px; - border-radius: 10px; - background-color: white; - border: 1px solid #f6bf54; - color: #f6bf54; + width: 120px; + height: 50px; + border: none; + border-radius: 200px; + background-color: #f6bf54; + color: white; + font-size: 20px; + cursor: pointer; + } + + &--request { + width: 120px; + height: 50px; + border: none; + border-radius: 200px; + background-color: #ff7f23; + color: white; + font-size: 20px; cursor: pointer; } } diff --git a/src/pages/Follow/components/Follower.tsx b/src/pages/Follow/components/Follower.tsx index 17e5c310..7738a738 100644 --- a/src/pages/Follow/components/Follower.tsx +++ b/src/pages/Follow/components/Follower.tsx @@ -1,13 +1,13 @@ import defaultImage from 'assets/images/follow/default-image.png'; import cn from 'utils/ts/classNames'; -import { ReactComponent as Unfollow } from 'assets/svg/follow/user-remove.svg'; -import { ReactComponent as Follow } from 'assets/svg/follow/user-add.svg'; import { useNavigate } from 'react-router-dom'; import style from './Follower.module.scss'; import useRequestAndUpdate from '../hooks/useRequestAndUpdate'; import useAcceptFollow from '../hooks/useAcceptFollow'; import useDeleteFollow from '../hooks/useDeleteFollow'; import useCancelFollow from '../hooks/useCancelFollow'; +import useRejectRequest from '../hooks/useRejectRequest'; +import MobileUnfollow from './MobileUnfollow'; interface Props { account: string, @@ -22,9 +22,13 @@ export default function Follower({ }: Props) { const request = useRequestAndUpdate(); const accept = useAcceptFollow(); - const { del } = useDeleteFollow(); + const { + del, isMobile, mobileUnfollow, value, toggle, + } = useDeleteFollow(); const cancel = useCancelFollow(); + const reject = useRejectRequest(); const navigate = useNavigate(); + return (
default @@ -50,23 +54,34 @@ export default function Follower({
+ {followedType === 'REQUEST_RECEIVE' && requestId && ( + + )} + {value && } ); } diff --git a/src/pages/Follow/hooks/useRejectRequest.ts b/src/pages/Follow/hooks/useRejectRequest.ts new file mode 100644 index 00000000..120ca472 --- /dev/null +++ b/src/pages/Follow/hooks/useRejectRequest.ts @@ -0,0 +1,14 @@ +import { useMutation, useQueryClient } from 'react-query'; +import { rejectFollow } from 'api/follow'; + +const useRejectRequest = () => { + const queryClient = useQueryClient(); + const { mutate: reject } = useMutation(['reject'], (requestId: number) => rejectFollow({ id: requestId }), { + onSuccess: () => { + queryClient.invalidateQueries('received'); + }, + }); + return reject; +}; + +export default useRejectRequest; From 34a7528a7dad329ec1c5124f45515d1b24c9e6ba Mon Sep 17 00:00:00 2001 From: Chaeseungyun Date: Thu, 5 Oct 2023 17:42:37 +0900 Subject: [PATCH 02/27] =?UTF-8?q?feat:=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20?= =?UTF-8?q?=ED=99=94=EB=A9=B4=20=EC=B9=9C=EA=B5=AC=20=EC=B7=A8=EC=86=8C=20?= =?UTF-8?q?=EB=AA=A8=EB=8B=AC=20=EC=B0=BD=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/MobileUnfollow.module.scss | 75 +++++++++++++++++++ .../Follow/components/MobileUnfollow.tsx | 51 +++++++++++++ src/pages/Follow/hooks/useDeleteFollow.ts | 14 +++- 3 files changed, 139 insertions(+), 1 deletion(-) create mode 100644 src/pages/Follow/components/MobileUnfollow.module.scss create mode 100644 src/pages/Follow/components/MobileUnfollow.tsx diff --git a/src/pages/Follow/components/MobileUnfollow.module.scss b/src/pages/Follow/components/MobileUnfollow.module.scss new file mode 100644 index 00000000..6f7e9153 --- /dev/null +++ b/src/pages/Follow/components/MobileUnfollow.module.scss @@ -0,0 +1,75 @@ +.overay { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + background-color: rgb(0 0 0 / 35%); + height: 100vh; + width: 100vw; +} + +.modal { + position: fixed; + bottom: 0px; + width: 100vw; + height: 60vh; + background-color: white; + border-top-right-radius: 40px; + border-top-left-radius: 40px; + + &__notice { + font-weight: 600; + font-size: 25px; + width: 100vw; + margin-left: 10vw; + margin-top: 3vh; + float: left; + } + + &__nickname { + color: #ff7f23; + } + + &__image { + width: 30vw; + height: 25vh; + } + + &__delete { + color: #c60000; + font-weight: 600; + font-size: 25px; + border-top: 1px solid #eeeeee; + width: 100vw; + height: 7vh; + display: flex; + align-items: center; + justify-content: center; + background-color: white; + cursor: pointer; + } + + &__cancel { + font-weight: 600; + font-size: 25px; + border-top: 1px solid #eeeeee; + width: 100vw; + height: 7vh; + display: flex; + align-items: center; + justify-content: center; + background-color: white; + cursor: pointer; + } + + &__content { + display: flex; + flex-direction: column; + height: 60vh; + width: 100vw; + align-items: center; + justify-content: center; + gap: 5vh; + } +} \ No newline at end of file diff --git a/src/pages/Follow/components/MobileUnfollow.tsx b/src/pages/Follow/components/MobileUnfollow.tsx new file mode 100644 index 00000000..ce8dad03 --- /dev/null +++ b/src/pages/Follow/components/MobileUnfollow.tsx @@ -0,0 +1,51 @@ +import { createPortal } from 'react-dom'; +import defaultImage from 'assets/images/follow/default-image.png'; +import { UseMutateFunction } from 'react-query'; +import { AxiosResponse } from 'axios'; +import style from './MobileUnfollow.module.scss'; + +interface Props { + nickname: string; + del: UseMutateFunction, unknown, string, unknown>; + toggle: () => void; + account: string; +} + +export default function MobileUnfollow({ + nickname, del, toggle, account, +}: Props) { + const root = document.body; + return createPortal( +
+
+
+
+
+ {nickname} + 님과의 +
+ 팔로우를 취소할까요? +
+ 프로필 +
+ + +
+
+
+
, + root, + ); +} diff --git a/src/pages/Follow/hooks/useDeleteFollow.ts b/src/pages/Follow/hooks/useDeleteFollow.ts index 10ef0a80..618ead14 100644 --- a/src/pages/Follow/hooks/useDeleteFollow.ts +++ b/src/pages/Follow/hooks/useDeleteFollow.ts @@ -1,15 +1,27 @@ import { deleteFollow } from 'api/follow'; import { useMutation, useQueryClient } from 'react-query'; +import useBooleanState from 'utils/hooks/useBooleanState'; +import useMediaQuery from 'utils/hooks/useMediaQuery'; const useDeleteFollow = () => { const queryClient = useQueryClient(); + const { isMobile } = useMediaQuery(); + const [value,,,toggle] = useBooleanState(false); const { mutate: del, data } = useMutation('delete', (account: string) => deleteFollow({ userAccount: account }), { onSuccess: () => { queryClient.invalidateQueries('follower'); }, }); - return { del, data }; + const mobileUnfollow = () => { + if (isMobile) { + toggle(); + } + }; + + return { + del, data, value, mobileUnfollow, isMobile, toggle, + }; }; export default useDeleteFollow; From 859719368364126496fd93a54441a49e876a3132 Mon Sep 17 00:00:00 2001 From: Chaeseungyun Date: Thu, 5 Oct 2023 17:42:56 +0900 Subject: [PATCH 03/27] =?UTF-8?q?refactor:=20=EC=98=A4=ED=83=80=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Follow/components/EmptyFriend.tsx | 1 - src/pages/Follow/index.tsx | 8 ++++++-- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/pages/Follow/components/EmptyFriend.tsx b/src/pages/Follow/components/EmptyFriend.tsx index d56c468f..cb31cf25 100644 --- a/src/pages/Follow/components/EmptyFriend.tsx +++ b/src/pages/Follow/components/EmptyFriend.tsx @@ -10,6 +10,5 @@ export default function EmptyFriend() {
- ); } diff --git a/src/pages/Follow/index.tsx b/src/pages/Follow/index.tsx index 781659c5..5126a4d3 100644 --- a/src/pages/Follow/index.tsx +++ b/src/pages/Follow/index.tsx @@ -51,7 +51,6 @@ export default function FollowPage() { const { data: sended } = useSentOrReceivedFollow('sended', checkSentFollow); const { data: follower } = useGetFollowList(); const { data: recent } = useGetRecentlyActiveFollower(); - return (
@@ -84,7 +83,12 @@ export default function FollowPage() { ) )} {user && keyword.length > 0 && (user.content.length > 0 - ? : )} + ? ( +
+ + {follower && } +
+ ) : )}
); } From b380218331f18929a657134187135352bdd656b5 Mon Sep 17 00:00:00 2001 From: Chaeseungyun Date: Thu, 5 Oct 2023 17:43:11 +0900 Subject: [PATCH 04/27] =?UTF-8?q?refactor:=20=EA=B2=80=EC=83=89=20?= =?UTF-8?q?=ED=99=94=EB=A9=B4=20UI=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Follow/components/SearchPage.tsx | 6 ++--- yarn.lock | 28 ---------------------- 2 files changed, 2 insertions(+), 32 deletions(-) diff --git a/src/pages/Follow/components/SearchPage.tsx b/src/pages/Follow/components/SearchPage.tsx index f9ac0c93..0c169803 100644 --- a/src/pages/Follow/components/SearchPage.tsx +++ b/src/pages/Follow/components/SearchPage.tsx @@ -4,13 +4,11 @@ import FollowList from './FollowList'; export default function SearchPage({ data }: SearchPageInfo) { const auth = useAuth(); - const myFriends: FollowerInfo[] = data.filter((follower) => follower.followedType === 'FOLLOWED'); - const newFriends: FollowerInfo[] = data.filter((follower) => follower.followedType === 'NONE').filter((follower) => follower.account !== auth?.account); + const searchFriends: FollowerInfo[] = data.filter((follower) => follower.followedType !== 'REQUEST_SENT').filter((follower) => follower.followedType !== 'REQUEST_RECEIVE').filter((follower) => follower.account !== auth?.account); return (
- - +
); } diff --git a/yarn.lock b/yarn.lock index 30080dde..b5f1492b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1890,16 +1890,6 @@ "@types/qs" "*" "@types/range-parser" "*" -"@types/express-serve-static-core@^4.17.33": - version "4.17.36" - resolved "https://registry.yarnpkg.com/@types/express-serve-static-core/-/express-serve-static-core-4.17.36.tgz#baa9022119bdc05a4adfe740ffc97b5f9360e545" - integrity sha512-zbivROJ0ZqLAtMzgzIUC4oNqDG9iF0lSsAqpOD9kbs5xcIM3dTiyuHvBc7R8MtWBp3AAWGaovJa+wzWPjLYW7Q== - dependencies: - "@types/node" "*" - "@types/qs" "*" - "@types/range-parser" "*" - "@types/send" "*" - "@types/express@*", "@types/express@^4.17.13": version "4.17.13" resolved "https://registry.npmjs.org/@types/express/-/express-4.17.13.tgz" @@ -1910,16 +1900,6 @@ "@types/qs" "*" "@types/serve-static" "*" -"@types/express@^4.17.17": - version "4.17.17" - resolved "https://registry.yarnpkg.com/@types/express/-/express-4.17.17.tgz#01d5437f6ef9cfa8668e616e13c2f2ac9a491ae4" - integrity sha512-Q4FmmuLGBG58btUnfS1c1r/NQdlp3DMfGDGig8WhfpA2YRUtEkxAjkZb0yvplJGYdF1fsQ81iMDcH24sSCNC/Q== - dependencies: - "@types/body-parser" "*" - "@types/express-serve-static-core" "^4.17.33" - "@types/qs" "*" - "@types/serve-static" "*" - "@types/geojson@*": version "7946.0.10" resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-7946.0.10.tgz#6dfbf5ea17142f7f9a043809f1cd4c448cb68249" @@ -2083,14 +2063,6 @@ resolved "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz" integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew== -"@types/send@*": - version "0.17.1" - resolved "https://registry.yarnpkg.com/@types/send/-/send-0.17.1.tgz#ed4932b8a2a805f1fe362a70f4e62d0ac994e301" - integrity sha512-Cwo8LE/0rnvX7kIIa3QHCkcuF21c05Ayb0ZfxPiv0W8VRiZiNW/WuRupHKpqqGVGf7SUA44QSOUKaEd9lIrd/Q== - dependencies: - "@types/mime" "^1" - "@types/node" "*" - "@types/serve-index@^1.9.1": version "1.9.1" resolved "https://registry.npmjs.org/@types/serve-index/-/serve-index-1.9.1.tgz" From 88cc31f354d83b6d2cc57a5a0e71a9a8b6ec364f Mon Sep 17 00:00:00 2001 From: Chaeseungyun Date: Sat, 14 Oct 2023 14:19:58 +0900 Subject: [PATCH 05/27] =?UTF-8?q?fix:=20=EB=8B=A4=EB=A5=B8=20=EC=9C=A0?= =?UTF-8?q?=EC=A0=80=EC=9D=98=20=EB=A6=AC=EB=B7=B0=20=EA=B0=9C=EC=88=98=20?= =?UTF-8?q?api=EC=9D=98=20=ED=98=B8=EC=B6=9C=EC=9D=B4=20=EC=A0=95=EC=83=81?= =?UTF-8?q?=EC=A0=81=EC=9C=BC=EB=A1=9C=20=EC=9D=B4=EB=A3=A8=EC=96=B4?= =?UTF-8?q?=EC=A7=80=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Follow/hooks/useGetFollowerReviewCount.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/Follow/hooks/useGetFollowerReviewCount.ts b/src/pages/Follow/hooks/useGetFollowerReviewCount.ts index f5725b73..90647f39 100644 --- a/src/pages/Follow/hooks/useGetFollowerReviewCount.ts +++ b/src/pages/Follow/hooks/useGetFollowerReviewCount.ts @@ -2,7 +2,7 @@ import { getFollowerReviewCount } from 'api/follow'; import { useQuery } from 'react-query'; const useGetFollowerReviewCount = (followId: number) => { - const { data } = useQuery('reviewCount', () => getFollowerReviewCount({ followId })); + const { data } = useQuery(['reviewCount', followId], () => getFollowerReviewCount({ followId })); return data; }; From 053bc3228a9f2bc0811a8dde4e4e20400ef0194c Mon Sep 17 00:00:00 2001 From: Chaeseungyun Date: Sun, 15 Oct 2023 02:26:52 +0900 Subject: [PATCH 06/27] =?UTF-8?q?refactor:=20=EA=B2=8C=EC=8B=9C=EB=AC=BC,?= =?UTF-8?q?=20=ED=8C=94=EB=A1=9C=EC=9B=8C=20=EC=88=98=20=EC=B6=9C=EB=A0=A5?= =?UTF-8?q?=20=EB=B0=8F=20=EB=B2=84=ED=8A=BC=20UI=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/follow/entity.ts | 5 ++ src/pages/Follow/components/FollowList.tsx | 1 + .../components/FollowProfile.module.scss | 28 +++++---- src/pages/Follow/components/FollowProfile.tsx | 60 +++++++++---------- src/pages/Follow/components/Follower.tsx | 8 ++- src/pages/Follow/index.tsx | 1 + src/pages/Follow/static/entity.ts | 5 ++ 7 files changed, 64 insertions(+), 44 deletions(-) diff --git a/src/api/follow/entity.ts b/src/api/follow/entity.ts index bcf58154..34b92261 100644 --- a/src/api/follow/entity.ts +++ b/src/api/follow/entity.ts @@ -13,6 +13,11 @@ export interface GetFollowListResponse { id: number; nickname: string; userType: string; + userCountResponse: { + id: number; + reviewCount: number; + friendCount: number; + } }[]; empty: boolean; last: boolean; diff --git a/src/pages/Follow/components/FollowList.tsx b/src/pages/Follow/components/FollowList.tsx index a7375a4b..0d7989e1 100644 --- a/src/pages/Follow/components/FollowList.tsx +++ b/src/pages/Follow/components/FollowList.tsx @@ -50,6 +50,7 @@ export default function FollowList({ account={item.account} followedType={item.followedType} requestId={item.requestId} + userCountResponse={item.userCountResponse} /> ))} {isShow && sended && sended.map((item) => ( diff --git a/src/pages/Follow/components/FollowProfile.module.scss b/src/pages/Follow/components/FollowProfile.module.scss index 9b0d3ea3..5877ebea 100644 --- a/src/pages/Follow/components/FollowProfile.module.scss +++ b/src/pages/Follow/components/FollowProfile.module.scss @@ -21,6 +21,13 @@ @include media.media-breakpoint-down(mobile) { width: 100vw; } + + &__container { + display: flex; + width: 100%; + justify-content: space-between; + align-items: center; + } } .user { @@ -28,12 +35,9 @@ height: 200px; justify-content: center; align-items: center; - width: 100%; &__container { display: flex; - width: 100%; - justify-content: space-between; align-items: center; } @@ -49,7 +53,6 @@ &__info { margin-left: 20px; - width: 3vw; &--span { font-size: 25px; @@ -69,15 +72,20 @@ &__button { border: none; - background-color: #ffffff; + border-radius: 2em; + width: 80px; + height: 40px; + background-color: #eeeeee; } -} -.set { - display: none; + &__count { + display: flex; + gap: 10px; - @include media.media-breakpoint-down(mobile) { - display: block; + &--font { + font-weight: 600; + text-align: center; + } } } diff --git a/src/pages/Follow/components/FollowProfile.tsx b/src/pages/Follow/components/FollowProfile.tsx index 47bbea22..dc6d67ca 100644 --- a/src/pages/Follow/components/FollowProfile.tsx +++ b/src/pages/Follow/components/FollowProfile.tsx @@ -1,15 +1,7 @@ import defaultImage from 'assets/images/follow/default-image.png'; import { useEffect, useState } from 'react'; -import { ReactComponent as Remove } from 'assets/svg/follow/user-remove.svg'; import cn from 'utils/ts/classNames'; -import { ReactComponent as Checkerboard } from 'assets/svg/follow/checkerboard.svg'; -import { ReactComponent as ClickedCheckerboard } from 'assets/svg/follow/checkerboard-click.svg'; -import { ReactComponent as List } from 'assets/svg/follow/list.svg'; -import { ReactComponent as ClickedList } from 'assets/svg/follow/list-click.svg'; -import useBooleanState from 'utils/hooks/useBooleanState'; -import useMediaQuery from 'utils/hooks/useMediaQuery'; import { useLocation } from 'react-router-dom'; -import { ReactComponent as Add } from 'assets/svg/follow/user-add.svg'; import style from './FollowProfile.module.scss'; import FollowReview from './FollowReview'; import useDeleteFollow from '../hooks/useDeleteFollow'; @@ -33,33 +25,35 @@ const useDeleteState = () => { export default function FollowProfile() { const location = useLocation(); const state = location.state as { - followId: number, nickname: string, account: string, followedType: string + followId: number, + nickname: string, + account: string, + followedType: string + userCountResponse: { + id: number; + reviewCount: number; + friendCount: number; + } }; const { data } = useGetFollowerReview(state.followId); - const [isCheckerboard, setIsCheckerboard, setIsList] = useBooleanState(true); - const { isMobile } = useMediaQuery(); const { del, canDelete } = useDeleteState(); const request = useRequestAndUpdate(); const reviewCount = useGetFollowerReviewCount(state.followId); - useEffect(() => { - if (isMobile) setIsList(); - }); - return (
-
- img -
+
+
+ img
{state.nickname}
- +
@ {state.account} - +
+
+
+
{state.userCountResponse.reviewCount}
+
게시물
+
+
+
{state.userCountResponse.friendCount}
+
팔로워
+
+
리뷰
@@ -82,25 +86,15 @@ export default function FollowProfile() { {' '} 개의 리뷰
-
- - -
-
+
{data && data.content.map( (item) => ( ), )} diff --git a/src/pages/Follow/components/Follower.tsx b/src/pages/Follow/components/Follower.tsx index 7738a738..099eab64 100644 --- a/src/pages/Follow/components/Follower.tsx +++ b/src/pages/Follow/components/Follower.tsx @@ -15,10 +15,15 @@ interface Props { followedType: string, id: number, requestId?: number, + userCountResponse?: { + id: number; + reviewCount: number; + friendCount: number; + } } export default function Follower({ - nickname, account, followedType, id, requestId, + nickname, account, followedType, id, requestId, userCountResponse, }: Props) { const request = useRequestAndUpdate(); const accept = useAcceptFollow(); @@ -42,6 +47,7 @@ export default function Follower({ nickname, account, followedType, + userCountResponse, }, })} > diff --git a/src/pages/Follow/index.tsx b/src/pages/Follow/index.tsx index 5126a4d3..46de4cf1 100644 --- a/src/pages/Follow/index.tsx +++ b/src/pages/Follow/index.tsx @@ -41,6 +41,7 @@ const filterFollowInfo = (data: GetFollowListResponse): FollowerInfo[] => { nickname: item.nickname, userType: item.userType, followedType: 'FOLLOWED', + userCountResponse: item.userCountResponse, })); return filteredData; }; diff --git a/src/pages/Follow/static/entity.ts b/src/pages/Follow/static/entity.ts index b5491869..69ea27f7 100644 --- a/src/pages/Follow/static/entity.ts +++ b/src/pages/Follow/static/entity.ts @@ -8,6 +8,11 @@ export interface Follower { email: string, userType: string; requestId?: number; + userCountResponse?: { + id: number; + reviewCount: number; + friendCount: number; + } } export interface RequestUserInfo { From c175bf52431da1d1f8c935c32762cfb8ffa4d198 Mon Sep 17 00:00:00 2001 From: Chaeseungyun Date: Sun, 15 Oct 2023 02:27:20 +0900 Subject: [PATCH 07/27] =?UTF-8?q?refactor:=20=EB=B9=88=20=EB=B3=84=20svg?= =?UTF-8?q?=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/svg/follow/empty-star.svg | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 src/assets/svg/follow/empty-star.svg diff --git a/src/assets/svg/follow/empty-star.svg b/src/assets/svg/follow/empty-star.svg new file mode 100644 index 00000000..27f58f6b --- /dev/null +++ b/src/assets/svg/follow/empty-star.svg @@ -0,0 +1,4 @@ + + + + From c5bb4fd566c1e606455e4c118098c668d59e3108 Mon Sep 17 00:00:00 2001 From: Chaeseungyun Date: Sun, 15 Oct 2023 02:28:02 +0900 Subject: [PATCH 08/27] =?UTF-8?q?refactor:=20pc,=20=EB=AA=A8=EB=B0=94?= =?UTF-8?q?=EC=9D=BC=20=ED=8F=89=EC=A0=90=20UI=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Follow/components/ListReview.tsx | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) diff --git a/src/pages/Follow/components/ListReview.tsx b/src/pages/Follow/components/ListReview.tsx index 4aebf687..c722f1bc 100644 --- a/src/pages/Follow/components/ListReview.tsx +++ b/src/pages/Follow/components/ListReview.tsx @@ -1,4 +1,6 @@ import { ReactComponent as Rating } from 'assets/svg/follow/rate.svg'; +import { ReactComponent as EmptyStar } from 'assets/svg/follow/empty-star.svg'; +import useMediaQuery from 'utils/hooks/useMediaQuery'; import style from './ListReview.module.scss'; interface Props { @@ -8,15 +10,26 @@ interface Props { } export default function ListReview({ createdAt, content, rate }: Props) { + const { isMobile } = useMediaQuery(); + const rateArray = new Array(rate).fill(1); + const restArray = new Array(5 - rate).fill(1); return (
{content}
{createdAt} {' | '} - - {rate} - .0 + {isMobile ? ( + + {rate} + .0 + + ) : ( + + {rateArray.map(() => )} + {restArray.map(() => )} + + )}
); From e71211a50a2eb61e69e1ff595777e03e6a0ab352 Mon Sep 17 00:00:00 2001 From: Chaeseungyun Date: Sun, 15 Oct 2023 02:28:17 +0900 Subject: [PATCH 09/27] =?UTF-8?q?refactor:=20PC=20=EC=B9=9C=EA=B5=AC=20?= =?UTF-8?q?=ED=94=84=EB=A1=9C=ED=95=84=20UI=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Follow/components/FollowReview.tsx | 17 +++++------------ 1 file changed, 5 insertions(+), 12 deletions(-) diff --git a/src/pages/Follow/components/FollowReview.tsx b/src/pages/Follow/components/FollowReview.tsx index a448db39..e977ca78 100644 --- a/src/pages/Follow/components/FollowReview.tsx +++ b/src/pages/Follow/components/FollowReview.tsx @@ -1,4 +1,3 @@ -import useMediaQuery from 'utils/hooks/useMediaQuery'; import { useInfiniteQuery } from 'react-query'; import { getDetailReview } from 'api/follow'; import useBooleanState from 'utils/hooks/useBooleanState'; @@ -10,8 +9,6 @@ import ListReview from './ListReview'; interface Props { placeId: string; name: string; - photos: string | undefined; - isCheckerboard: boolean; category: string; } @@ -34,18 +31,15 @@ const useGetDetailReview = (placeId: string, followerId: number) => { }; export default function FollowReview({ - placeId, name, photos, isCheckerboard, category, + placeId, name, category, }: Props) { - const { isMobile } = useMediaQuery(); const { data } = useGetDetailReview(placeId, 361); const [isShow, , , toggle] = useBooleanState(false); return (
- {!isMobile && isCheckerboard && photos ? shop : isCheckerboard &&
{name}
} - {!isCheckerboard && ( -
- {data +
+ {data && ( )} - {data && !isCheckerboard && isShow + {data && isShow && data.content.map((item) => ( ))} -
- )} +
); } From 99e743e9711a1044c894c225f7bd029678f7687d Mon Sep 17 00:00:00 2001 From: Chaeseungyun Date: Sun, 15 Oct 2023 02:31:45 +0900 Subject: [PATCH 10/27] =?UTF-8?q?style:=20=ED=8C=94=EB=A1=9C=EC=9A=B0=20?= =?UTF-8?q?=EC=B7=A8=EC=86=8C=20=EB=B2=84=ED=8A=BC=20UI=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Follow/components/MobileUnfollow.module.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/pages/Follow/components/MobileUnfollow.module.scss b/src/pages/Follow/components/MobileUnfollow.module.scss index 6f7e9153..357e3063 100644 --- a/src/pages/Follow/components/MobileUnfollow.module.scss +++ b/src/pages/Follow/components/MobileUnfollow.module.scss @@ -40,6 +40,7 @@ color: #c60000; font-weight: 600; font-size: 25px; + border: none; border-top: 1px solid #eeeeee; width: 100vw; height: 7vh; @@ -53,6 +54,7 @@ &__cancel { font-weight: 600; font-size: 25px; + border: none; border-top: 1px solid #eeeeee; width: 100vw; height: 7vh; From 8a4604a38e0bd90a37208d5a53828a81c260d4ae Mon Sep 17 00:00:00 2001 From: Chaeseungyun Date: Sun, 15 Oct 2023 02:42:40 +0900 Subject: [PATCH 11/27] =?UTF-8?q?fix:=20lint=20=EC=97=90=EB=9F=AC=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Follow/components/Follower.module.scss | 2 +- src/pages/Follow/components/MobileUnfollow.module.scss | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/pages/Follow/components/Follower.module.scss b/src/pages/Follow/components/Follower.module.scss index ec88580a..c0247ea6 100644 --- a/src/pages/Follow/components/Follower.module.scss +++ b/src/pages/Follow/components/Follower.module.scss @@ -47,7 +47,7 @@ background-color: #eeeeee; cursor: pointer; font-size: 20px; - margin: 0 10px 0 10px; + margin: 0 10px; @include media.media-breakpoint-down(mobile) { width: 100px; diff --git a/src/pages/Follow/components/MobileUnfollow.module.scss b/src/pages/Follow/components/MobileUnfollow.module.scss index 357e3063..723ec3ac 100644 --- a/src/pages/Follow/components/MobileUnfollow.module.scss +++ b/src/pages/Follow/components/MobileUnfollow.module.scss @@ -11,7 +11,7 @@ .modal { position: fixed; - bottom: 0px; + bottom: 0; width: 100vw; height: 60vh; background-color: white; @@ -74,4 +74,4 @@ justify-content: center; gap: 5vh; } -} \ No newline at end of file +} From 8ffb5890dbf2cf76c1ff9d013ae94a773a2edba0 Mon Sep 17 00:00:00 2001 From: Chaeseungyun Date: Mon, 23 Oct 2023 01:00:47 +0900 Subject: [PATCH 12/27] =?UTF-8?q?refactor:=20pc=EB=B0=8F=20=EB=AA=A8?= =?UTF-8?q?=EB=B0=94=EC=9D=BC=20UI=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Follow/index.module.scss | 27 +++++++++++++---- src/pages/Follow/index.tsx | 48 ++++++++++++++++-------------- 2 files changed, 47 insertions(+), 28 deletions(-) diff --git a/src/pages/Follow/index.module.scss b/src/pages/Follow/index.module.scss index 7ceef629..0a5abd7d 100644 --- a/src/pages/Follow/index.module.scss +++ b/src/pages/Follow/index.module.scss @@ -1,27 +1,44 @@ @use "src/utils/styles/mediaQuery.scss" as media; .template { - display: flex; - flex-direction: column; - align-items: center; - height: calc(100vh - 80px); + display: grid; + grid-template-columns: 100px 1fr 100px; + height: 100vh; width: 100vw; padding-top: 60px; box-sizing: border-box; @include media.media-breakpoint-down(mobile) { padding-top: 30px; + width: 100vw; + display: flex; + flex-direction: column; + align-items: center; } } +.content { + display: flex; + flex-direction: column; + align-items: center; + grid-column-start: 2; + width: 100%; + height: 100%; +} + .top { - position: relative; + display: flex; + justify-content: center; + width: 100%; @include media.media-breakpoint-down(mobile) { position: sticky; height: 80px; top: 0; background-color: #ffffff; + flex-direction: column; + align-items: center; + justify-content: center; } &__prev { diff --git a/src/pages/Follow/index.tsx b/src/pages/Follow/index.tsx index 46de4cf1..c401f8ad 100644 --- a/src/pages/Follow/index.tsx +++ b/src/pages/Follow/index.tsx @@ -54,23 +54,24 @@ export default function FollowPage() { const { data: recent } = useGetRecentlyActiveFollower(); return (
-
-
- -

친구 목록

-
-
- - search +
+
+
+ +

친구 목록

+
+
+ + search +
-
- {keyword.length === 0 + {keyword.length === 0 && ( follower?.content.length === 0 && sended?.content.length === 0 @@ -83,13 +84,14 @@ export default function FollowPage() {
) )} - {user && keyword.length > 0 && (user.content.length > 0 - ? ( -
- - {follower && } -
- ) : )} + {user && keyword.length > 0 && (user.content.length > 0 + ? ( +
+ + {follower && } +
+ ) : )} +
); } From c364bc880c3388c8b6ce0345a73cfea281857bf9 Mon Sep 17 00:00:00 2001 From: Chaeseungyun Date: Mon, 23 Oct 2023 01:02:56 +0900 Subject: [PATCH 13/27] =?UTF-8?q?refactor:=20=EB=B2=84=ED=8A=BC=EC=97=90?= =?UTF-8?q?=20=ED=8F=AC=EC=9D=B8=ED=84=B0=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Follow/components/Follower.module.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/Follow/components/Follower.module.scss b/src/pages/Follow/components/Follower.module.scss index c0247ea6..0c6da931 100644 --- a/src/pages/Follow/components/Follower.module.scss +++ b/src/pages/Follow/components/Follower.module.scss @@ -36,6 +36,7 @@ font-size: 30px; border: none; background-color: #ffffff; + cursor: pointer; } } From 25061ff3a97f0ec37a794615d30b40e7e0e5b1ad Mon Sep 17 00:00:00 2001 From: Chaeseungyun Date: Mon, 23 Oct 2023 01:08:10 +0900 Subject: [PATCH 14/27] =?UTF-8?q?refactor:=20=EB=B3=80=EC=88=98=EB=AA=85?= =?UTF-8?q?=20=EB=B0=8F=20svg=ED=8C=8C=EC=9D=BC=EB=AA=85=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 --- src/assets/svg/follow/{rate.svg => fill-star.svg} | 0 src/pages/Follow/components/ListReview.tsx | 10 +++++----- 2 files changed, 5 insertions(+), 5 deletions(-) rename src/assets/svg/follow/{rate.svg => fill-star.svg} (100%) diff --git a/src/assets/svg/follow/rate.svg b/src/assets/svg/follow/fill-star.svg similarity index 100% rename from src/assets/svg/follow/rate.svg rename to src/assets/svg/follow/fill-star.svg diff --git a/src/pages/Follow/components/ListReview.tsx b/src/pages/Follow/components/ListReview.tsx index c722f1bc..22a88ee6 100644 --- a/src/pages/Follow/components/ListReview.tsx +++ b/src/pages/Follow/components/ListReview.tsx @@ -1,4 +1,4 @@ -import { ReactComponent as Rating } from 'assets/svg/follow/rate.svg'; +import { ReactComponent as Rating } from 'assets/svg/follow/fill-star.svg'; import { ReactComponent as EmptyStar } from 'assets/svg/follow/empty-star.svg'; import useMediaQuery from 'utils/hooks/useMediaQuery'; import style from './ListReview.module.scss'; @@ -11,8 +11,8 @@ interface Props { export default function ListReview({ createdAt, content, rate }: Props) { const { isMobile } = useMediaQuery(); - const rateArray = new Array(rate).fill(1); - const restArray = new Array(5 - rate).fill(1); + const fillStarArray = new Array(rate).fill(1); + const emptyStarArray = new Array(5 - rate).fill(1); return (
{content} @@ -26,8 +26,8 @@ export default function ListReview({ createdAt, content, rate }: Props) { ) : ( - {rateArray.map(() => )} - {restArray.map(() => )} + {fillStarArray.map(() => )} + {emptyStarArray.map(() => )} )}
From 237617633ae7e593218d46c010414de55972baeb Mon Sep 17 00:00:00 2001 From: Chaeseungyun Date: Mon, 23 Oct 2023 01:14:55 +0900 Subject: [PATCH 15/27] =?UTF-8?q?refactor:=20=ED=94=84=EB=A1=9C=ED=95=84?= =?UTF-8?q?=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20?= =?UTF-8?q?UI=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Follow/components/FollowProfile.module.scss | 2 +- src/pages/Follow/components/Follower.tsx | 3 ++- src/pages/Follow/components/MobileUnfollow.module.scss | 5 +++-- 3 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/pages/Follow/components/FollowProfile.module.scss b/src/pages/Follow/components/FollowProfile.module.scss index 5877ebea..b1a18e3c 100644 --- a/src/pages/Follow/components/FollowProfile.module.scss +++ b/src/pages/Follow/components/FollowProfile.module.scss @@ -24,7 +24,7 @@ &__container { display: flex; - width: 100%; + width: 90%; justify-content: space-between; align-items: center; } diff --git a/src/pages/Follow/components/Follower.tsx b/src/pages/Follow/components/Follower.tsx index 099eab64..f8ddf616 100644 --- a/src/pages/Follow/components/Follower.tsx +++ b/src/pages/Follow/components/Follower.tsx @@ -87,7 +87,8 @@ export default function Follower({ 거절 )} - {value && } + {value && isMobile + && }
); } diff --git a/src/pages/Follow/components/MobileUnfollow.module.scss b/src/pages/Follow/components/MobileUnfollow.module.scss index 723ec3ac..44a64685 100644 --- a/src/pages/Follow/components/MobileUnfollow.module.scss +++ b/src/pages/Follow/components/MobileUnfollow.module.scss @@ -32,8 +32,9 @@ } &__image { - width: 30vw; - height: 25vh; + width: 23vw; + height: 15vh; + margin: 3vh 0; } &__delete { From 28d1ff1614911a1f6c05dafcab64de894c3749fd Mon Sep 17 00:00:00 2001 From: Chaeseungyun Date: Mon, 23 Oct 2023 01:22:22 +0900 Subject: [PATCH 16/27] =?UTF-8?q?refactor:=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20=ED=83=80=EC=9E=85=20=EC=84=A0=EC=96=B8=20=EC=82=AD?= =?UTF-8?q?=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Follow/components/FollowProfile.tsx | 19 +++++-------------- 1 file changed, 5 insertions(+), 14 deletions(-) diff --git a/src/pages/Follow/components/FollowProfile.tsx b/src/pages/Follow/components/FollowProfile.tsx index dc6d67ca..f1a13b3c 100644 --- a/src/pages/Follow/components/FollowProfile.tsx +++ b/src/pages/Follow/components/FollowProfile.tsx @@ -2,6 +2,7 @@ import defaultImage from 'assets/images/follow/default-image.png'; import { useEffect, useState } from 'react'; import cn from 'utils/ts/classNames'; import { useLocation } from 'react-router-dom'; +import { User } from 'api/user/entity'; import style from './FollowProfile.module.scss'; import FollowReview from './FollowReview'; import useDeleteFollow from '../hooks/useDeleteFollow'; @@ -24,28 +25,18 @@ const useDeleteState = () => { export default function FollowProfile() { const location = useLocation(); - const state = location.state as { - followId: number, - nickname: string, - account: string, - followedType: string - userCountResponse: { - id: number; - reviewCount: number; - friendCount: number; - } - }; - const { data } = useGetFollowerReview(state.followId); + const state = location.state as User; + const { data } = useGetFollowerReview(state.id); const { del, canDelete } = useDeleteState(); const request = useRequestAndUpdate(); - const reviewCount = useGetFollowerReviewCount(state.followId); + const reviewCount = useGetFollowerReviewCount(state.id); return (
- img + 유저 프로필 이미지
{state.nickname} From d8cc1c216c9f766ec1b22fa999b366fb84a04dca Mon Sep 17 00:00:00 2001 From: Chaeseungyun Date: Mon, 23 Oct 2023 01:22:44 +0900 Subject: [PATCH 17/27] =?UTF-8?q?refactor:=20=EB=B3=80=EC=88=98=EB=AA=85?= =?UTF-8?q?=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Follow/components/Follower.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/Follow/components/Follower.tsx b/src/pages/Follow/components/Follower.tsx index f8ddf616..db2e73fa 100644 --- a/src/pages/Follow/components/Follower.tsx +++ b/src/pages/Follow/components/Follower.tsx @@ -43,7 +43,7 @@ export default function Follower({ className={cn({ [style['follower__content--nickname']]: true })} onClick={() => followedType === 'FOLLOWED' && navigate(`${id}`, { state: { - followId: id, + id, nickname, account, followedType, From d34bd777c467b2bc98b502520223277703c16b13 Mon Sep 17 00:00:00 2001 From: Chaeseungyun Date: Mon, 23 Oct 2023 01:25:44 +0900 Subject: [PATCH 18/27] =?UTF-8?q?refactor:=20=EC=9D=B8=EC=9E=90=EB=AA=85?= =?UTF-8?q?=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/follow/entity.ts | 2 +- src/api/follow/index.ts | 2 +- src/pages/Follow/hooks/useGetFollowerReviewCount.ts | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/api/follow/entity.ts b/src/api/follow/entity.ts index 34b92261..ad67e908 100644 --- a/src/api/follow/entity.ts +++ b/src/api/follow/entity.ts @@ -100,5 +100,5 @@ export interface GetDetailReviewResponse { } export interface GetFollowerReviewCountParam { - followId: number; + id: number; } diff --git a/src/api/follow/index.ts b/src/api/follow/index.ts index f1cbaccc..86f54821 100644 --- a/src/api/follow/index.ts +++ b/src/api/follow/index.ts @@ -41,4 +41,4 @@ export const getFollowReview = (id: number, pageParam: string) => followApi.get< export const getDetailReview = (followId: number, placeId: string, pageParam: number) => followApi.get(`/review/follower/${followId}/shop/${placeId}?${pageParam}`); -export const getFollowerReviewCount = (param: GetFollowerReviewCountParam) => followApi.get(`/review/follower/${param.followId}/count`); +export const getFollowerReviewCount = (param: GetFollowerReviewCountParam) => followApi.get(`/review/follower/${param.id}/count`); diff --git a/src/pages/Follow/hooks/useGetFollowerReviewCount.ts b/src/pages/Follow/hooks/useGetFollowerReviewCount.ts index 90647f39..21e31e84 100644 --- a/src/pages/Follow/hooks/useGetFollowerReviewCount.ts +++ b/src/pages/Follow/hooks/useGetFollowerReviewCount.ts @@ -1,8 +1,8 @@ import { getFollowerReviewCount } from 'api/follow'; import { useQuery } from 'react-query'; -const useGetFollowerReviewCount = (followId: number) => { - const { data } = useQuery(['reviewCount', followId], () => getFollowerReviewCount({ followId })); +const useGetFollowerReviewCount = (id: number) => { + const { data } = useQuery(['reviewCount', id], () => getFollowerReviewCount({ id })); return data; }; From be911a3117d31f2ca80c86de34fe8d62ee9b097d Mon Sep 17 00:00:00 2001 From: Chaeseungyun Date: Mon, 23 Oct 2023 01:32:08 +0900 Subject: [PATCH 19/27] =?UTF-8?q?refactor:=20state=EB=AA=85=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Follow/components/FollowProfile.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/pages/Follow/components/FollowProfile.tsx b/src/pages/Follow/components/FollowProfile.tsx index f1a13b3c..f377f958 100644 --- a/src/pages/Follow/components/FollowProfile.tsx +++ b/src/pages/Follow/components/FollowProfile.tsx @@ -11,23 +11,23 @@ import useGetFollowerReview from '../hooks/useGetFollowerReview'; import useGetFollowerReviewCount from '../hooks/useGetFollowerReviewCount'; const useDeleteState = () => { - const [canDelete, setCanDelete] = useState(true); + const [isFollowed, setIsFollowed] = useState(true); const { del, data: deletedUser } = useDeleteFollow(); useEffect(() => { if (deletedUser && deletedUser.status >= 200 && deletedUser.status <= 299) { - setCanDelete((prev) => !prev); + setIsFollowed((prev) => !prev); } }, [deletedUser]); - return { del, canDelete, deletedUser }; + return { del, isFollowed, deletedUser }; }; export default function FollowProfile() { const location = useLocation(); const state = location.state as User; const { data } = useGetFollowerReview(state.id); - const { del, canDelete } = useDeleteState(); + const { del, isFollowed } = useDeleteState(); const request = useRequestAndUpdate(); const reviewCount = useGetFollowerReviewCount(state.id); @@ -49,10 +49,10 @@ export default function FollowProfile() { From 06dfd4d0876c52ac1613958ded10fb9a54837097 Mon Sep 17 00:00:00 2001 From: Chaeseungyun Date: Mon, 23 Oct 2023 15:42:41 +0900 Subject: [PATCH 20/27] =?UTF-8?q?refactor:=20=EA=B0=9D=EC=B2=B4=20?= =?UTF-8?q?=EB=AC=B8=EB=B2=95=EC=9C=BC=EB=A1=9C=20=EC=BD=94=EB=93=9C=20?= =?UTF-8?q?=EA=B0=80=EB=8F=85=EC=84=B1=20=ED=96=A5=EC=83=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Follow/components/Follower.tsx | 47 +++++++++++++++++------- 1 file changed, 33 insertions(+), 14 deletions(-) diff --git a/src/pages/Follow/components/Follower.tsx b/src/pages/Follow/components/Follower.tsx index db2e73fa..cef94201 100644 --- a/src/pages/Follow/components/Follower.tsx +++ b/src/pages/Follow/components/Follower.tsx @@ -33,6 +33,36 @@ export default function Follower({ const cancel = useCancelFollow(); const reject = useRejectRequest(); const navigate = useNavigate(); + const buttonConfigs: { + [key: string]: + { + className: string; + onClick: () => void; + text: string; + } + } = { + NONE: { + className: style['follower__button--request'], + onClick: () => request(account), + text: '팔로우', + }, + REQUEST_SENT: { + className: style['follower__button--cancel'], + onClick: () => requestId && cancel(requestId), + text: '요청됨', + }, + FOLLOWED: { + className: style.follower__button, + onClick: () => (isMobile ? mobileUnfollow() : del(account)), + text: '팔로잉', + }, + REQUEST_RECEIVE: { + className: style['follower__button--accept'], + onClick: () => requestId && accept(requestId), + text: '확인', + }, + }; + const config = buttonConfigs[followedType]; return (
@@ -60,23 +90,12 @@ export default function Follower({
{followedType === 'REQUEST_RECEIVE' && requestId && (
@ - {state.account} + {state.account !== undefined ? state.account : 'SNS User'}
{`@${profile?.account}`}
From 3ffe382a7c5bde9c10de49fb9d8573942ddf342f Mon Sep 17 00:00:00 2001 From: Chaeseungyun Date: Tue, 14 Nov 2023 20:51:55 +0900 Subject: [PATCH 23/27] =?UTF-8?q?refactor:=20=EC=98=A4=ED=83=80=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Follow/components/FollowList.tsx | 20 +++++++++---------- src/pages/Follow/hooks/useCancelFollow.ts | 2 +- src/pages/Follow/hooks/useRequestAndUpdate.ts | 2 +- src/pages/Follow/index.tsx | 6 +++--- 4 files changed, 15 insertions(+), 15 deletions(-) diff --git a/src/pages/Follow/components/FollowList.tsx b/src/pages/Follow/components/FollowList.tsx index 0d7989e1..0fcd5a20 100644 --- a/src/pages/Follow/components/FollowList.tsx +++ b/src/pages/Follow/components/FollowList.tsx @@ -3,24 +3,24 @@ import cn from 'utils/ts/classNames'; import useBooleanState from 'utils/hooks/useBooleanState'; import { ReactComponent as Ellipse } from 'assets/svg/follow/Ellipse.svg'; import Follower from './Follower'; -import style from './FollowList.module.scss'; +import styles from './FollowList.module.scss'; import { FollowerInfo } from '../static/entity'; import Recent from './Recent'; export interface Props { title: string; data: FollowerInfo[]; - sended?: FollowerInfo[]; + sent?: FollowerInfo[]; } // 유저 검색 시 자신의 정보는 안보이도록 자신의 정보를 받아서 비교, 자신과의 followedType은 NONE export default function FollowList({ - title, data, sended, + title, data, sent, }: Props) { const [isShow, , , toggle] = useBooleanState(true); return ( -
- -
+
{isShow && title === '최근 접속한 친구' && data.map((item) => ( ( ))} - {isShow && sended && sended.map((item) => ( + {isShow && sent && sent.map((item) => ( { const queryClient = useQueryClient(); const { mutate: cancel } = useMutation('cancel', (id: number) => cancelFollow({ id }), { onSuccess: () => { - queryClient.invalidateQueries('sended'); + queryClient.invalidateQueries('sent'); queryClient.invalidateQueries('search'); }, }); diff --git a/src/pages/Follow/hooks/useRequestAndUpdate.ts b/src/pages/Follow/hooks/useRequestAndUpdate.ts index 84a9a699..9205b49a 100644 --- a/src/pages/Follow/hooks/useRequestAndUpdate.ts +++ b/src/pages/Follow/hooks/useRequestAndUpdate.ts @@ -7,7 +7,7 @@ const useRequestAndUpdate = () => { const queryClient = useQueryClient(); const { mutate: request } = useMutation('request', (account: string) => requestFollow({ userAccount: account }), { onSuccess: () => { - queryClient.invalidateQueries('sended'); + queryClient.invalidateQueries('sent'); queryClient.invalidateQueries('search'); }, onError: () => { diff --git a/src/pages/Follow/index.tsx b/src/pages/Follow/index.tsx index c401f8ad..11e6c110 100644 --- a/src/pages/Follow/index.tsx +++ b/src/pages/Follow/index.tsx @@ -49,7 +49,7 @@ const filterFollowInfo = (data: GetFollowListResponse): FollowerInfo[] => { export default function FollowPage() { const { keyword, handleInputChange, user } = useSearchFriend(); const { data: receive } = useSentOrReceivedFollow('received', checkReceivedFollow); - const { data: sended } = useSentOrReceivedFollow('sended', checkSentFollow); + const { data: sent } = useSentOrReceivedFollow('sent', checkSentFollow); const { data: follower } = useGetFollowList(); const { data: recent } = useGetRecentlyActiveFollower(); return ( @@ -74,13 +74,13 @@ export default function FollowPage() { {keyword.length === 0 && ( follower?.content.length === 0 - && sended?.content.length === 0 + && sent?.content.length === 0 && receive?.content.length === 0 ? : (
{recent && } {follower && } - {receive && sended && } + {receive && sent && }
) )} From c3244d2433269f47873890593170fdf95b079173 Mon Sep 17 00:00:00 2001 From: Chaeseungyun Date: Tue, 14 Nov 2023 20:52:40 +0900 Subject: [PATCH 24/27] =?UTF-8?q?refactor:=20sns=20=EC=9C=A0=EC=A0=80?= =?UTF-8?q?=EB=8A=94=20=EC=B9=9C=EA=B5=AC=20=EB=AA=A9=EB=A1=9D=EC=9C=BC?= =?UTF-8?q?=EB=A1=9C=20=EC=9D=B4=EB=8F=99=ED=95=A0=20=EC=88=98=20=EC=97=86?= =?UTF-8?q?=EB=8F=84=EB=A1=9D=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Follow/components/Follower.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/Follow/components/Follower.tsx b/src/pages/Follow/components/Follower.tsx index cef94201..7b104f2a 100644 --- a/src/pages/Follow/components/Follower.tsx +++ b/src/pages/Follow/components/Follower.tsx @@ -43,7 +43,7 @@ export default function Follower({ } = { NONE: { className: style['follower__button--request'], - onClick: () => request(account), + onClick: () => account && request(account), text: '팔로우', }, REQUEST_SENT: { From b251fd49b55d0828a3ace1f0c290cfebedb2222e Mon Sep 17 00:00:00 2001 From: Chaeseungyun Date: Tue, 14 Nov 2023 21:57:38 +0900 Subject: [PATCH 25/27] =?UTF-8?q?refactor:=20react-query=20=EB=B2=84?= =?UTF-8?q?=EC=A0=84=20=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + src/api/follow/index.ts | 2 +- src/pages/Follow/components/FollowReview.tsx | 7 +++--- src/pages/Follow/hooks/useAcceptFollow.ts | 11 +++++---- src/pages/Follow/hooks/useCancelFollow.ts | 11 +++++---- src/pages/Follow/hooks/useDeleteFollow.ts | 8 ++++--- src/pages/Follow/hooks/useGetFollowList.ts | 21 ++++++++--------- .../Follow/hooks/useGetFollowerReview.ts | 23 +++++++++---------- .../Follow/hooks/useGetFollowerReviewCount.ts | 4 ++-- .../hooks/useGetRecentlyActiveFollower.ts | 4 ++-- src/pages/Follow/hooks/useRejectRequest.ts | 9 +++++--- src/pages/Follow/hooks/useRequestAndUpdate.ts | 9 ++++---- src/pages/Follow/hooks/useSearchFriend.ts | 3 ++- .../Follow/hooks/useSentOrReceivedFollow.ts | 7 ++++-- yarn.lock | 12 ++++++++++ 15 files changed, 80 insertions(+), 52 deletions(-) diff --git a/package.json b/package.json index 8e326ac9..f9e3c87a 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,7 @@ "version": "0.1.0", "private": true, "dependencies": { + "@tanstack/react-query": "^5.8.3", "@testing-library/jest-dom": "^5.14.1", "@testing-library/react": "^13.0.0", "@testing-library/user-event": "^13.2.1", diff --git a/src/api/follow/index.ts b/src/api/follow/index.ts index 86f54821..5ae2f2c4 100644 --- a/src/api/follow/index.ts +++ b/src/api/follow/index.ts @@ -39,6 +39,6 @@ export const recentlyActiveFollow = () => followApi.get(' export const getFollowReview = (id: number, pageParam: string) => followApi.get(`/review/follower/${id}/shops?size=9&${pageParam}`); -export const getDetailReview = (followId: number, placeId: string, pageParam: number) => followApi.get(`/review/follower/${followId}/shop/${placeId}?${pageParam}`); +export const getDetailReview = (followId: number, placeId: string) => followApi.get(`/review/follower/${followId}/shop/${placeId}`); export const getFollowerReviewCount = (param: GetFollowerReviewCountParam) => followApi.get(`/review/follower/${param.id}/count`); diff --git a/src/pages/Follow/components/FollowReview.tsx b/src/pages/Follow/components/FollowReview.tsx index e977ca78..4146d435 100644 --- a/src/pages/Follow/components/FollowReview.tsx +++ b/src/pages/Follow/components/FollowReview.tsx @@ -1,4 +1,4 @@ -import { useInfiniteQuery } from 'react-query'; +import { useInfiniteQuery } from '@tanstack/react-query'; import { getDetailReview } from 'api/follow'; import useBooleanState from 'utils/hooks/useBooleanState'; import { ReactComponent as Arrow } from 'assets/svg/common/arrow.svg'; @@ -14,9 +14,10 @@ interface Props { const useGetDetailReview = (placeId: string, followerId: number) => { const { data } = useInfiniteQuery( - ['detail', placeId], - ({ pageParam = '' }) => getDetailReview(followerId, placeId, pageParam), { + queryKey: ['detail', placeId], + initialPageParam: '', + queryFn: () => getDetailReview(followerId, placeId), getNextPageParam: (last) => { const len = last.data.content.length; if (last.data.empty || last.data.last) return null; diff --git a/src/pages/Follow/hooks/useAcceptFollow.ts b/src/pages/Follow/hooks/useAcceptFollow.ts index 041d3997..1db82c42 100644 --- a/src/pages/Follow/hooks/useAcceptFollow.ts +++ b/src/pages/Follow/hooks/useAcceptFollow.ts @@ -1,13 +1,16 @@ import { acceptFollow } from 'api/follow'; -import { useMutation, useQueryClient } from 'react-query'; +import { useMutation, useQueryClient } from '@tanstack/react-query'; // 팔로우 승인 후 받은 요청 목록을 다시 받아와 갱신 const useAcceptFollow = () => { const queryClient = useQueryClient(); - const { mutate: accept } = useMutation('accept', (id: number) => acceptFollow({ id }), { + const { mutate: accept } = useMutation({ + mutationKey: ['accept'], + mutationFn: (id: number) => acceptFollow({ id }), onSuccess: () => { - queryClient.invalidateQueries('received'); - queryClient.invalidateQueries('follower'); + queryClient.invalidateQueries({ + queryKey: ['received', 'follower'], + }); }, }); return accept; diff --git a/src/pages/Follow/hooks/useCancelFollow.ts b/src/pages/Follow/hooks/useCancelFollow.ts index 5653136b..d642a60f 100644 --- a/src/pages/Follow/hooks/useCancelFollow.ts +++ b/src/pages/Follow/hooks/useCancelFollow.ts @@ -1,12 +1,15 @@ import { cancelFollow } from 'api/follow'; -import { useMutation, useQueryClient } from 'react-query'; +import { useMutation, useQueryClient } from '@tanstack/react-query'; const useCancelFollow = () => { const queryClient = useQueryClient(); - const { mutate: cancel } = useMutation('cancel', (id: number) => cancelFollow({ id }), { + const { mutate: cancel } = useMutation({ + mutationKey: ['cancel'], + mutationFn: (id: number) => cancelFollow({ id }), onSuccess: () => { - queryClient.invalidateQueries('sent'); - queryClient.invalidateQueries('search'); + queryClient.invalidateQueries({ + queryKey: ['sent', 'search'], + }); }, }); diff --git a/src/pages/Follow/hooks/useDeleteFollow.ts b/src/pages/Follow/hooks/useDeleteFollow.ts index 618ead14..644d9bd8 100644 --- a/src/pages/Follow/hooks/useDeleteFollow.ts +++ b/src/pages/Follow/hooks/useDeleteFollow.ts @@ -1,5 +1,5 @@ import { deleteFollow } from 'api/follow'; -import { useMutation, useQueryClient } from 'react-query'; +import { useMutation, useQueryClient } from '@tanstack/react-query'; import useBooleanState from 'utils/hooks/useBooleanState'; import useMediaQuery from 'utils/hooks/useMediaQuery'; @@ -7,9 +7,11 @@ const useDeleteFollow = () => { const queryClient = useQueryClient(); const { isMobile } = useMediaQuery(); const [value,,,toggle] = useBooleanState(false); - const { mutate: del, data } = useMutation('delete', (account: string) => deleteFollow({ userAccount: account }), { + const { mutate: del, data } = useMutation({ + mutationKey: ['delete'], + mutationFn: (account: string) => deleteFollow({ userAccount: account }), onSuccess: () => { - queryClient.invalidateQueries('follower'); + queryClient.invalidateQueries({ queryKey: ['follower'] }); }, }); diff --git a/src/pages/Follow/hooks/useGetFollowList.ts b/src/pages/Follow/hooks/useGetFollowList.ts index a47a1d6c..4d2b2072 100644 --- a/src/pages/Follow/hooks/useGetFollowList.ts +++ b/src/pages/Follow/hooks/useGetFollowList.ts @@ -1,21 +1,20 @@ import { followList } from 'api/follow'; import { GetFollowListResponse } from 'api/follow/entity'; import { useEffect } from 'react'; -import { useInfiniteQuery } from 'react-query'; +import { useInfiniteQuery } from '@tanstack/react-query'; // 친구 목록 가져오기 const useGetFollowList = () => { - const { data, hasNextPage, fetchNextPage } = useInfiniteQuery( - 'follower', - ({ pageParam = '' }) => followList(pageParam), - { - getNextPageParam: (last) => { - const len = last.data.content.length; - if (last.data.empty || last.data.last) return null; - return `cursor=${last.data.content[len - 1].id}`; - }, + const { data, hasNextPage, fetchNextPage } = useInfiniteQuery({ + queryKey: ['follower'], + queryFn: ({ pageParam = '' }) => followList(pageParam), + initialPageParam: 'cursor=0', + getNextPageParam: (last) => { + const len = last.data.content.length; + if (last.data.empty || last.data.last) return null; + return `cursor=${last.data.content[len - 1].id}`; }, - ); + }); const flatData: GetFollowListResponse = { content: data ? data.pages.flatMap((page) => page.data.content) : [], empty: !data || data.pages.every((page) => page.data.empty), diff --git a/src/pages/Follow/hooks/useGetFollowerReview.ts b/src/pages/Follow/hooks/useGetFollowerReview.ts index 4485d0d9..6961995f 100644 --- a/src/pages/Follow/hooks/useGetFollowerReview.ts +++ b/src/pages/Follow/hooks/useGetFollowerReview.ts @@ -1,20 +1,19 @@ import { getFollowReview } from 'api/follow'; import { useEffect } from 'react'; -import { useInfiniteQuery } from 'react-query'; +import { useInfiniteQuery } from '@tanstack/react-query'; const useGetFollowerReview = (id: number) => { - const { data, hasNextPage, fetchNextPage } = useInfiniteQuery( - ['review', id], - ({ pageParam = '' }) => getFollowReview(id, pageParam), - { - getNextPageParam: (last) => { - const len = last.data.content.length; - if (last.data.empty) return null; - // cursor: 마지막으로 조회한 상점 id - return `cursor=${last.data.content[len - 1].shopId}`; - }, + const { data, hasNextPage, fetchNextPage } = useInfiniteQuery({ + queryKey: ['review', id], + queryFn: ({ pageParam = '' }) => getFollowReview(id, pageParam), + initialPageParam: 'cursor=0', + getNextPageParam: (last) => { + const len = last.data.content.length; + if (last.data.empty) return null; + // cursor: 마지막으로 조회한 상점 id + return `cursor=${last.data.content[len - 1].shopId}`; }, - ); + }); const flatData = { content: data ? data.pages.flatMap((page) => page.data.content) : [], }; diff --git a/src/pages/Follow/hooks/useGetFollowerReviewCount.ts b/src/pages/Follow/hooks/useGetFollowerReviewCount.ts index 21e31e84..8c369cf6 100644 --- a/src/pages/Follow/hooks/useGetFollowerReviewCount.ts +++ b/src/pages/Follow/hooks/useGetFollowerReviewCount.ts @@ -1,8 +1,8 @@ import { getFollowerReviewCount } from 'api/follow'; -import { useQuery } from 'react-query'; +import { useQuery } from '@tanstack/react-query'; const useGetFollowerReviewCount = (id: number) => { - const { data } = useQuery(['reviewCount', id], () => getFollowerReviewCount({ id })); + const { data } = useQuery({ queryKey: ['reviewCount'], queryFn: () => getFollowerReviewCount({ id }) }); return data; }; diff --git a/src/pages/Follow/hooks/useGetRecentlyActiveFollower.ts b/src/pages/Follow/hooks/useGetRecentlyActiveFollower.ts index fdb99898..c8ee00d0 100644 --- a/src/pages/Follow/hooks/useGetRecentlyActiveFollower.ts +++ b/src/pages/Follow/hooks/useGetRecentlyActiveFollower.ts @@ -1,9 +1,9 @@ import { recentlyActiveFollow } from 'api/follow'; -import { useQuery } from 'react-query'; +import { useQuery } from '@tanstack/react-query'; // 최대 15명만 보임, 접속한지 24시가 지나면 사라짐 const useGetRecentlyActiveFollower = () => { - const { data, isLoading } = useQuery('recent', () => recentlyActiveFollow()); + const { data, isLoading } = useQuery({ queryKey: ['recent'], queryFn: () => recentlyActiveFollow() }); return { data, isLoading }; }; diff --git a/src/pages/Follow/hooks/useRejectRequest.ts b/src/pages/Follow/hooks/useRejectRequest.ts index 120ca472..80063f25 100644 --- a/src/pages/Follow/hooks/useRejectRequest.ts +++ b/src/pages/Follow/hooks/useRejectRequest.ts @@ -1,13 +1,16 @@ -import { useMutation, useQueryClient } from 'react-query'; +import { useMutation, useQueryClient } from '@tanstack/react-query'; import { rejectFollow } from 'api/follow'; const useRejectRequest = () => { const queryClient = useQueryClient(); - const { mutate: reject } = useMutation(['reject'], (requestId: number) => rejectFollow({ id: requestId }), { + const { mutate: reject } = useMutation({ + mutationKey: ['reject'], + mutationFn: (requestId: number) => rejectFollow({ id: requestId }), onSuccess: () => { - queryClient.invalidateQueries('received'); + queryClient.invalidateQueries({ queryKey: ['received'] }); }, }); + return reject; }; diff --git a/src/pages/Follow/hooks/useRequestAndUpdate.ts b/src/pages/Follow/hooks/useRequestAndUpdate.ts index 9205b49a..14c78591 100644 --- a/src/pages/Follow/hooks/useRequestAndUpdate.ts +++ b/src/pages/Follow/hooks/useRequestAndUpdate.ts @@ -1,14 +1,15 @@ import { requestFollow } from 'api/follow'; -import { useMutation, useQueryClient } from 'react-query'; +import { useMutation, useQueryClient } from '@tanstack/react-query'; import makeToast from 'utils/ts/makeToast'; // 팔로우 요청 후 유저 목록을 다시 받아와 요청중 상태로 변경 const useRequestAndUpdate = () => { const queryClient = useQueryClient(); - const { mutate: request } = useMutation('request', (account: string) => requestFollow({ userAccount: account }), { + const { mutate: request } = useMutation({ + mutationKey: ['request'], + mutationFn: (account: string) => requestFollow({ userAccount: account }), onSuccess: () => { - queryClient.invalidateQueries('sent'); - queryClient.invalidateQueries('search'); + queryClient.invalidateQueries({ queryKey: ['sent', 'search'] }); }, onError: () => { makeToast('error', '잘못된 친구 정보입니다.'); diff --git a/src/pages/Follow/hooks/useSearchFriend.ts b/src/pages/Follow/hooks/useSearchFriend.ts index b115587a..64f27e7c 100644 --- a/src/pages/Follow/hooks/useSearchFriend.ts +++ b/src/pages/Follow/hooks/useSearchFriend.ts @@ -1,7 +1,7 @@ import { searchUsers } from 'api/follow'; import { SearchUsersResponse } from 'api/follow/entity'; import { useState, useEffect } from 'react'; -import { useInfiniteQuery } from 'react-query'; +import { useInfiniteQuery } from '@tanstack/react-query'; // useInfinitieQuery로 무한 스크롤 구현, pageParam의 기본값은 undefined const useSearchFriend = () => { @@ -10,6 +10,7 @@ const useSearchFriend = () => { queryKey: ['search', keyword], queryFn: ({ queryKey: [, target], pageParam = '' }) => searchUsers(target, pageParam), enabled: keyword !== '', + initialPageParam: 'cursor=0', getNextPageParam: (lastPage) => { const len = lastPage.data.content.length; if (lastPage.data.empty || lastPage.data.last) return null; diff --git a/src/pages/Follow/hooks/useSentOrReceivedFollow.ts b/src/pages/Follow/hooks/useSentOrReceivedFollow.ts index a5d29cc2..1d271963 100644 --- a/src/pages/Follow/hooks/useSentOrReceivedFollow.ts +++ b/src/pages/Follow/hooks/useSentOrReceivedFollow.ts @@ -1,7 +1,7 @@ import { SentOrReceivedFollowResponse } from 'api/follow/entity'; import { AxiosResponse } from 'axios'; import { useEffect } from 'react'; -import { useInfiniteQuery } from 'react-query'; +import { useInfiniteQuery } from '@tanstack/react-query'; const useSentOrReceivedFollow = ( key: string, @@ -11,7 +11,10 @@ const useSentOrReceivedFollow = ( data, fetchNextPage, hasNextPage, - } = useInfiniteQuery(key, ({ pageParam = 0 }) => queryFn(pageParam), { + } = useInfiniteQuery({ + queryKey: [key], + queryFn: ({ pageParam = 0 }) => queryFn(pageParam), + initialPageParam: 0, // getNextPageParam은 다음 api를 요청할 때 사용될 pageParam값을 정할 수 있다. getNextPageParam: (lastPage) => { if (lastPage.data.empty || lastPage.data.last) return null; diff --git a/yarn.lock b/yarn.lock index b5f1492b..de3926b7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1706,6 +1706,18 @@ "@svgr/plugin-svgo" "^5.5.0" loader-utils "^2.0.0" +"@tanstack/query-core@5.8.3": + version "5.8.3" + resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-5.8.3.tgz#7c6d62721518223e8b27f1a0b5e9bd4e3bb7ecd8" + integrity sha512-SWFMFtcHfttLYif6pevnnMYnBvxKf3C+MHMH7bevyYfpXpTMsLB9O6nNGBdWSoPwnZRXFNyNeVZOw25Wmdasow== + +"@tanstack/react-query@^5.8.3": + version "5.8.3" + resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-5.8.3.tgz#3d5db417a4c62b0e04a9b4091ac748cac1bac06c" + integrity sha512-EDRrsMgUtKM+SjVmhDYBd4jwWWyHAw3kCaurKLIO90OfPQr/UhpwcqM2l/eQOaUYon9lfDB2ejQi1edHK7zEdA== + dependencies: + "@tanstack/query-core" "5.8.3" + "@testing-library/dom@^8.5.0": version "8.17.1" resolved "https://registry.npmjs.org/@testing-library/dom/-/dom-8.17.1.tgz" From e65e60617bab575d17ed39d9143f5b8939187b8c Mon Sep 17 00:00:00 2001 From: Chaeseungyun Date: Tue, 21 Nov 2023 15:14:35 +0900 Subject: [PATCH 26/27] =?UTF-8?q?refactor:=20=EB=A6=AC=EC=95=A1=ED=8A=B8?= =?UTF-8?q?=20=EC=BF=BC=EB=A6=AC=20=EB=B2=84=EC=A0=84=EC=97=85=20=EC=9D=B4?= =?UTF-8?q?=EC=A0=84=20=EC=BB=A4=EB=B0=8B=EC=9C=BC=EB=A1=9C=20=EC=9D=B4?= =?UTF-8?q?=EB=8F=99=20=EB=B0=8F=20=ED=91=B8=EC=8B=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + yarn.lock | 12 ++++++++++++ 2 files changed, 13 insertions(+) diff --git a/package.json b/package.json index 8e326ac9..f9e3c87a 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,7 @@ "version": "0.1.0", "private": true, "dependencies": { + "@tanstack/react-query": "^5.8.3", "@testing-library/jest-dom": "^5.14.1", "@testing-library/react": "^13.0.0", "@testing-library/user-event": "^13.2.1", diff --git a/yarn.lock b/yarn.lock index b5f1492b..de3926b7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1706,6 +1706,18 @@ "@svgr/plugin-svgo" "^5.5.0" loader-utils "^2.0.0" +"@tanstack/query-core@5.8.3": + version "5.8.3" + resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-5.8.3.tgz#7c6d62721518223e8b27f1a0b5e9bd4e3bb7ecd8" + integrity sha512-SWFMFtcHfttLYif6pevnnMYnBvxKf3C+MHMH7bevyYfpXpTMsLB9O6nNGBdWSoPwnZRXFNyNeVZOw25Wmdasow== + +"@tanstack/react-query@^5.8.3": + version "5.8.3" + resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-5.8.3.tgz#3d5db417a4c62b0e04a9b4091ac748cac1bac06c" + integrity sha512-EDRrsMgUtKM+SjVmhDYBd4jwWWyHAw3kCaurKLIO90OfPQr/UhpwcqM2l/eQOaUYon9lfDB2ejQi1edHK7zEdA== + dependencies: + "@tanstack/query-core" "5.8.3" + "@testing-library/dom@^8.5.0": version "8.17.1" resolved "https://registry.npmjs.org/@testing-library/dom/-/dom-8.17.1.tgz" From b7091f249e9e62c79249f5d52cee4f27ce1c1cc9 Mon Sep 17 00:00:00 2001 From: Chaeseungyun Date: Tue, 21 Nov 2023 15:35:17 +0900 Subject: [PATCH 27/27] =?UTF-8?q?refactor:=20lint=20=EC=97=90=EB=9F=AC=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Follow/components/MobileUnfollow.tsx | 2 +- src/pages/Follow/hooks/useGetFollowList.ts | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/pages/Follow/components/MobileUnfollow.tsx b/src/pages/Follow/components/MobileUnfollow.tsx index ce8dad03..82fbc391 100644 --- a/src/pages/Follow/components/MobileUnfollow.tsx +++ b/src/pages/Follow/components/MobileUnfollow.tsx @@ -1,6 +1,6 @@ import { createPortal } from 'react-dom'; import defaultImage from 'assets/images/follow/default-image.png'; -import { UseMutateFunction } from 'react-query'; +import { UseMutateFunction } from '@tanstack/react-query'; import { AxiosResponse } from 'axios'; import style from './MobileUnfollow.module.scss'; diff --git a/src/pages/Follow/hooks/useGetFollowList.ts b/src/pages/Follow/hooks/useGetFollowList.ts index 848f8b3c..4d2b2072 100644 --- a/src/pages/Follow/hooks/useGetFollowList.ts +++ b/src/pages/Follow/hooks/useGetFollowList.ts @@ -2,7 +2,6 @@ import { followList } from 'api/follow'; import { GetFollowListResponse } from 'api/follow/entity'; import { useEffect } from 'react'; import { useInfiniteQuery } from '@tanstack/react-query'; -import { useInfiniteQuery } from '@tanstack/react-query'; // 친구 목록 가져오기 const useGetFollowList = () => {