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

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={300}
+      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';