feat: follower, following list 마크업 및 데이터 연동

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<Response<MemberInfo>>(
+    `/member/${params.id}`,
+    'GET',
+  );
 
+  if (!data) return null;
   return (
     <>
       <HeaderBar>
         <HeaderBar.LeftContent>
           <DynamicBackButton />
         </HeaderBar.LeftContent>
-        <HeaderBar.Title>수영왕 정지영</HeaderBar.Title>
+        <HeaderBar.Title>{data.nickname}</HeaderBar.Title>
       </HeaderBar>
       <DynamicTabSection tab={tab} />
       <article className={containerStyle}>
-        <ProfileListItem isFollow={false} />
-        <ProfileListItem isFollow={false} />
-        <ProfileListItem isFollow={false} />
-        <ProfileListItem isFollow={true} />
-        <ProfileListItem isFollow={true} />
-        <ProfileListItem isFollow={false} />
-        <ProfileListItem isFollow={false} />
-        <ProfileListItem isFollow={false} />
+        {tab === 'follow' ? (
+          <DynamicFollowerSection id={Number(params.id)} />
+        ) : (
+          <DynamicFollowingSection id={Number(params.id)} />
+        )}
       </article>
     </>
   );

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),
   {

components/molecules/profile-list-item/profile-list-item.tsx

@@ -1,43 +1,55 @@
+import Link from 'next/link';
+
 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;
-};
-export const ProfileListItem = ({ isFollow }: FollowListItem) => {
+} & ProfileFollowContent;
+export const ProfileListItem = ({
+  memberId,
+  name,
+  introduction,
+  profileImageUrl,
+  isFollow,
+}: FollowListItem) => {
   return (
     <div className={containerStyle}>
-      <div className={profileImageStyle}>
-        <Image
-          src={''}
-          alt="profile image"
-          width={40}
-          height={40}
-          style={{ objectFit: 'cover' }}
-        />
-      </div>
-      <div className={text.wrapperStyle}>
-        <h1 className={text.nicknameStyle}>수영왕 정지영</h1>
-        <p className={text.summaryStyle}>맞팔/좋아요/좋아요반사</p>
-      </div>
+      <Link href={`/profile/${memberId}`} className={linkStyle}>
+        <div className={profileImageStyle}>
+          <Image
+            src={profileImageUrl}
+            alt="profile image"
+            width={40}
+            height={40}
+            style={{ objectFit: 'cover' }}
+          />
+        </div>
+        <div className={text.wrapperStyle}>
+          <h1 className={text.nicknameStyle}>{name}</h1>
+          <p className={text.summaryStyle}>{introduction}</p>
+        </div>
+      </Link>
+
       {isFollow ? (
         <Button
           size="small"
           label="팔로잉"
           variant="outlined"
           buttonType="assistive"
+          className={followButtonStyle}
         />
       ) : (
-        <Button size="small" label="팔로우" variant="outlined" />
+        <Button
+          size="small"
+          label="팔로우"
+          variant="outlined"
+          className={followButtonStyle}
+        />
       )}
     </div>
   );
@@ -53,11 +65,21 @@ const containerStyle = flex({
 const profileImageStyle = flex({
   width: '40px',
   height: '40px',
-  align: 'center',
+  align: 'stretch',
   rounded: 'full',
   overflow: 'hidden',
 });
 
+const linkStyle = flex({
+  gap: '16px',
+  align: 'center',
+  width: '100%',
+});
+
+const followButtonStyle = css({
+  flexShrink: 0,
+});
+
 const text = {
   wrapperStyle: flex({
     gap: '2px',

features/follow/apis/use-follower-list.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useInfiniteQuery } from '@tanstack/react-query';
+import { keepPreviousData, useInfiniteQuery } from '@tanstack/react-query';
 
 import { ProfileFollow } from '../types';
 
@@ -26,10 +26,11 @@ export const useFollowerList = (memberId: number) => {
     getNextPageParam: (lastPage) =>
       lastPage?.data?.hasNext ? lastPage?.data?.cursorId : undefined,
     enabled: !!memberId,
+    placeholderData: keepPreviousData,
   });
 
   const flattenData =
-    query.data?.pages.flatMap(({ data }) => data?.contents) ?? [];
+    query.data?.pages.flatMap(({ data }) => data?.contents ?? []) ?? [];
 
   return {
     ...query,

features/follow/apis/use-following-list.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useInfiniteQuery } from '@tanstack/react-query';
+import { keepPreviousData, useInfiniteQuery } from '@tanstack/react-query';
 
 import { ProfileFollow } from '../types';
 
@@ -26,10 +26,11 @@ export const useFollowingList = (memberId: number) => {
     getNextPageParam: (lastPage) =>
       lastPage?.data?.hasNext ? lastPage?.data?.cursorId : undefined,
     enabled: !!memberId,
+    placeholderData: keepPreviousData,
   });
 
   const flattenData =
-    query.data?.pages.flatMap(({ data }) => data?.contents) ?? [];
+    query.data?.pages.flatMap(({ data }) => data?.contents ?? []) ?? [];
 
   return {
     ...query,

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 (
+    <Virtuoso
+      data={data}
+      overscan={500}
+      useWindowScroll
+      rangeChanged={handleRangeChanged}
+      itemContent={(_, item) => <ProfileListItem isFollow={true} {...item} />}
+      style={{
+        width: '100%',
+        height: '100%',
+      }}
+    />
+  );
+};

features/follow/components/index.ts

@@ -0,0 +1 @@
+export * from './follow-virtual-list';

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 <FollowVirtualList data={flattenData} fetchNextData={fetchNextData} />;
+};

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 <FollowVirtualList data={flattenData} fetchNextData={fetchNextData} />;
+};

features/follow/sections/index.ts

@@ -1 +1,3 @@
 export * from './follow-tab';
+export * from './follower-section';
+export * from './following-section';

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 {