From 387fd9cfc832466504cd69f3d98cecb857160df2 Mon Sep 17 00:00:00 2001 From: Jiyoung Jung <72294509+Jungjjeong@users.noreply.github.com> Date: Tue, 27 Aug 2024 23:51:17 +0900 Subject: [PATCH 1/6] =?UTF-8?q?feat:=20profile=20follower,=20following=20l?= =?UTF-8?q?ist=20=EB=A7=88=ED=81=AC=EC=97=85=20=EB=B0=8F=20=EB=8D=B0?= =?UTF-8?q?=EC=9D=B4=ED=84=B0=20=EC=97=B0=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../follow/components/follow-virtual-list.tsx | 36 +++++++++++++++++++ features/follow/components/index.ts | 1 + features/follow/sections/follower-section.tsx | 17 +++++++++ .../follow/sections/following-section.tsx | 17 +++++++++ features/follow/sections/index.ts | 2 ++ 5 files changed, 73 insertions(+) create mode 100644 features/follow/components/follow-virtual-list.tsx create mode 100644 features/follow/components/index.ts create mode 100644 features/follow/sections/follower-section.tsx create mode 100644 features/follow/sections/following-section.tsx diff --git a/features/follow/components/follow-virtual-list.tsx b/features/follow/components/follow-virtual-list.tsx new file mode 100644 index 00000000..2d2f2143 --- /dev/null +++ b/features/follow/components/follow-virtual-list.tsx @@ -0,0 +1,36 @@ +import React from 'react'; +import { Virtuoso } from 'react-virtuoso'; + +import { ProfileListItem } from '@/components/molecules'; + +import { ProfileFollowContent } from '../types'; + +type FollowVirtualList = { + data: ProfileFollowContent[]; + fetchNextData: () => void; +}; +export const FollowVirtualList = ({ + data, + fetchNextData, +}: FollowVirtualList) => { + const handleRangeChanged = (range: { endIndex: number }) => { + const currentContentsLastIndex = data.length - 1; + if (range.endIndex >= currentContentsLastIndex - 3) { + void fetchNextData(); + } + }; + + return ( + } + style={{ + width: '100%', + height: '100%', + }} + /> + ); +}; diff --git a/features/follow/components/index.ts b/features/follow/components/index.ts new file mode 100644 index 00000000..49cad4d9 --- /dev/null +++ b/features/follow/components/index.ts @@ -0,0 +1 @@ +export * from './follow-virtual-list'; diff --git a/features/follow/sections/follower-section.tsx b/features/follow/sections/follower-section.tsx new file mode 100644 index 00000000..48416091 --- /dev/null +++ b/features/follow/sections/follower-section.tsx @@ -0,0 +1,17 @@ +'use client'; + +import { useFollowerList } from '../apis'; +import { FollowVirtualList } from '../components'; + +export const FollowerSection = ({ id }: { id: number }) => { + const { flattenData, hasNextPage, isFetchingNextPage, fetchNextPage } = + useFollowerList(id); + + const fetchNextData = () => { + if (hasNextPage && !isFetchingNextPage) { + void fetchNextPage(); + } + }; + + return ; +}; diff --git a/features/follow/sections/following-section.tsx b/features/follow/sections/following-section.tsx new file mode 100644 index 00000000..d588b31b --- /dev/null +++ b/features/follow/sections/following-section.tsx @@ -0,0 +1,17 @@ +'use client'; + +import { useFollowingList } from '../apis'; +import { FollowVirtualList } from '../components'; + +export const FollowingSection = ({ id }: { id: number }) => { + const { flattenData, hasNextPage, isFetchingNextPage, fetchNextPage } = + useFollowingList(id); + + const fetchNextData = () => { + if (hasNextPage && !isFetchingNextPage) { + void fetchNextPage(); + } + }; + + return ; +}; diff --git a/features/follow/sections/index.ts b/features/follow/sections/index.ts index c20b4d8a..ae3494f5 100644 --- a/features/follow/sections/index.ts +++ b/features/follow/sections/index.ts @@ -1 +1,3 @@ export * from './follow-tab'; +export * from './follower-section'; +export * from './following-section'; From 00897e0865600fdb070721fd81be8ecf6aa43fc9 Mon Sep 17 00:00:00 2001 From: Jiyoung Jung <72294509+Jungjjeong@users.noreply.github.com> Date: Tue, 27 Aug 2024 23:52:59 +0900 Subject: [PATCH 2/6] =?UTF-8?q?feat:=20profile=20list=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=A0=81?= =?UTF-8?q?=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/profile/[id]/follow/page.tsx | 48 ++++++++++++++----- app/record-detail/[id]/page.tsx | 1 + .../profile-list-item/profile-list-item.tsx | 9 +--- 3 files changed, 40 insertions(+), 18 deletions(-) diff --git a/app/profile/[id]/follow/page.tsx b/app/profile/[id]/follow/page.tsx index 92414cca..78dbc450 100644 --- a/app/profile/[id]/follow/page.tsx +++ b/app/profile/[id]/follow/page.tsx @@ -1,9 +1,13 @@ import dynamic from 'next/dynamic'; +import { Response } from '@/apis'; +import { fetchData } from '@/apis/fetch-data'; import { LeftArrowIcon } from '@/components/atoms'; -import { HeaderBar, ProfileListItem } from '@/components/molecules'; +import { HeaderBar } from '@/components/molecules'; import { type FollowTab } from '@/features/follow'; +import { MemberInfo } from '@/features/main/types'; import { flex } from '@/styled-system/patterns'; + const DynamicBackButton = dynamic( () => import('@/components/molecules').then(({ BackButton }) => BackButton), { @@ -22,31 +26,53 @@ const DynamicTabSection = dynamic( }, ); -export default function ProfileFollow({ +const DynamicFollowingSection = dynamic( + () => + import('@/features/follow').then( + ({ FollowingSection }) => FollowingSection, + ), + { + ssr: false, + }, +); + +const DynamicFollowerSection = dynamic( + () => + import('@/features/follow').then(({ FollowerSection }) => FollowerSection), + { + ssr: false, + }, +); + +export default async function ProfileFollow({ + params, searchParams, }: { + params: { id: string }; searchParams: { tab: FollowTab }; }) { const { tab = 'follow' } = searchParams; + const { data } = await fetchData>( + `/member/${params.id}`, + 'GET', + ); + if (!data) return null; return ( <> - 수영왕 정지영 + {data.nickname}
- - - - - - - - + {tab === 'follow' ? ( + + ) : ( + + )}
); diff --git a/app/record-detail/[id]/page.tsx b/app/record-detail/[id]/page.tsx index a4c3e8e1..927069cf 100644 --- a/app/record-detail/[id]/page.tsx +++ b/app/record-detail/[id]/page.tsx @@ -12,6 +12,7 @@ import { import { EditButton } from '@/features/record-detail/components'; import { css } from '@/styled-system/css'; import { flex } from '@/styled-system/patterns'; + const DynamicBackButton = dynamic( () => import('@/components/molecules').then(({ BackButton }) => BackButton), { diff --git a/components/molecules/profile-list-item/profile-list-item.tsx b/components/molecules/profile-list-item/profile-list-item.tsx index d86dd3e9..845fab0e 100644 --- a/components/molecules/profile-list-item/profile-list-item.tsx +++ b/components/molecules/profile-list-item/profile-list-item.tsx @@ -1,18 +1,13 @@ import { Button, Image } from '@/components/atoms'; +import { ProfileFollowContent } from '@/features/follow'; import { css } from '@/styled-system/css'; import { flex } from '@/styled-system/patterns'; type FollowListItem = { - // TODO: Profile type 수정 (required) - profile?: { - id: string; - nickname: string; - summary: string; - }; isFollow: boolean; onClick?: () => void; onClickFollow?: () => void; -}; +} & ProfileFollowContent; export const ProfileListItem = ({ isFollow }: FollowListItem) => { return (
From c43ff5bee43b5d80d1cb50f1fb2d5308884e0ea9 Mon Sep 17 00:00:00 2001 From: Jiyoung Jung <72294509+Jungjjeong@users.noreply.github.com> Date: Wed, 28 Aug 2024 00:02:53 +0900 Subject: [PATCH 3/6] =?UTF-8?q?fix:=20contents,=20reactions=20=EB=B9=84?= =?UTF-8?q?=EC=96=B4=EC=9E=88=EC=9D=84=20=EB=95=8C=20=EC=98=88=EC=99=B8?= =?UTF-8?q?=EC=B2=98=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- features/follow/apis/use-follower-list.tsx | 2 +- features/follow/apis/use-following-list.tsx | 2 +- features/record-detail/apis/use-cheer-list.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/features/follow/apis/use-follower-list.tsx b/features/follow/apis/use-follower-list.tsx index fd091100..c317b014 100644 --- a/features/follow/apis/use-follower-list.tsx +++ b/features/follow/apis/use-follower-list.tsx @@ -29,7 +29,7 @@ export const useFollowerList = (memberId: number) => { }); const flattenData = - query.data?.pages.flatMap(({ data }) => data?.contents) ?? []; + query.data?.pages.flatMap(({ data }) => data?.contents ?? []) ?? []; return { ...query, diff --git a/features/follow/apis/use-following-list.tsx b/features/follow/apis/use-following-list.tsx index 902f2e5a..f0287dae 100644 --- a/features/follow/apis/use-following-list.tsx +++ b/features/follow/apis/use-following-list.tsx @@ -29,7 +29,7 @@ export const useFollowingList = (memberId: number) => { }); const flattenData = - query.data?.pages.flatMap(({ data }) => data?.contents) ?? []; + query.data?.pages.flatMap(({ data }) => data?.contents ?? []) ?? []; return { ...query, diff --git a/features/record-detail/apis/use-cheer-list.tsx b/features/record-detail/apis/use-cheer-list.tsx index a4355149..e78dbe78 100644 --- a/features/record-detail/apis/use-cheer-list.tsx +++ b/features/record-detail/apis/use-cheer-list.tsx @@ -34,7 +34,7 @@ export const useCheerList = (memoryId: number) => { }); const flattenData = - query.data?.pages.flatMap(({ data }) => data?.reactions) ?? []; + query.data?.pages.flatMap(({ data }) => data?.reactions ?? []) ?? []; const totalCount = query.data?.pages?.[0].data?.totalCount; return { From 7317da9dabe96e787f1b0aa240e0ba5773b975ba Mon Sep 17 00:00:00 2001 From: Jiyoung Jung <72294509+Jungjjeong@users.noreply.github.com> Date: Wed, 28 Aug 2024 00:15:59 +0900 Subject: [PATCH 4/6] =?UTF-8?q?feat:=20profile=20list=20item=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 --- .../profile-list-item/profile-list-item.tsx | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/components/molecules/profile-list-item/profile-list-item.tsx b/components/molecules/profile-list-item/profile-list-item.tsx index 845fab0e..a88ffddb 100644 --- a/components/molecules/profile-list-item/profile-list-item.tsx +++ b/components/molecules/profile-list-item/profile-list-item.tsx @@ -8,12 +8,17 @@ type FollowListItem = { onClick?: () => void; onClickFollow?: () => void; } & ProfileFollowContent; -export const ProfileListItem = ({ isFollow }: FollowListItem) => { +export const ProfileListItem = ({ + name, + introduction, + profileImageUrl, + isFollow, +}: FollowListItem) => { return (
profile image { />
-

수영왕 정지영

-

맞팔/좋아요/좋아요반사

+

{name}

+

{introduction}

{isFollow ? (
); @@ -58,6 +70,16 @@ const profileImageStyle = flex({ overflow: 'hidden', }); +const linkStyle = flex({ + gap: '16px', + align: 'center', + width: '100%', +}); + +const followButtonStyle = css({ + flexShrink: 0, +}); + const text = { wrapperStyle: flex({ gap: '2px',