feat: 유저 페이지 구현

Author: kangsuyeong

src/pages/userpage/UserPage.tsx

@@ -0,0 +1,20 @@
+import { Loading } from '@/components/loading';
+import { Outlet, useParams } from 'react-router';
+import { useInfiniteUserEmotionRecords, useUserProfileInfo } from '@/pages/userpage/hooks';
+import { UserEmotionRecordSection, UserProfileSection } from '@/pages/userpage/components';
+
+export default function UserPage() {
+  const userId = useParams().userId!;
+  const { isLoading: isProfileLoading } = useUserProfileInfo(userId); // 유저 정보 가져오기
+  const { isLoading: isEmotionRecordsLoading } = useInfiniteUserEmotionRecords(userId);
+  return (
+    <>
+      <div className="flex flex-col items-center w-full h-full gap-5 py-4">
+        <UserProfileSection userId={userId} />
+        <UserEmotionRecordSection userId={userId} />
+      </div>
+      {(isProfileLoading || isEmotionRecordsLoading) && <Loading />}
+      <Outlet />
+    </>
+  );
+}

src/pages/userpage/components/UserEmotionRecordSection.tsx

@@ -0,0 +1,28 @@
+import { EmotionRecordSection } from '@/components';
+import { useInfiniteUserEmotionRecords } from '@/pages/userpage/hooks';
+
+interface UserEmotionRecordSectionProps {
+  userId: string;
+}
+
+const UserEmotionRecordSection = ({ userId }: UserEmotionRecordSectionProps) => {
+  const {
+    data, // 불러온 감정 기록 페이지 데이터
+    fetchNextPage, // 다음 페이지 데이터를 불러오는 함수
+    hasNextPage, // 다음 페이지가 존재하는지 여부 (boolean)
+    isFetchingNextPage, // 다음 페이지를 현재 불러오고 있는 중인지 여부 (boolean)
+  } = useInfiniteUserEmotionRecords(userId);
+
+  const records = data?.pages.flatMap((page) => page.data.records) ?? [];
+
+  return (
+    <EmotionRecordSection
+      records={records}
+      fetchNextPage={fetchNextPage}
+      hasNextPage={hasNextPage}
+      isFetchingNextPage={isFetchingNextPage}
+    />
+  );
+};
+
+export default UserEmotionRecordSection;

src/pages/userpage/components/UserProfileSection.tsx

@@ -0,0 +1,15 @@
+import { UserProfileCard } from '@/components';
+import { useUserProfileInfo } from '@/pages/userpage/hooks';
+
+interface UserProfileSectionProps {
+  userId: string;
+}
+
+const UserProfileSection = ({ userId }: UserProfileSectionProps) => {
+  // 유저 정보 가져오기
+  const { data: userData } = useUserProfileInfo(userId);
+
+  return <UserProfileCard userData={userData} />;
+};
+
+export default UserProfileSection;

src/pages/userpage/components/index.ts

@@ -0,0 +1,4 @@
+import UserEmotionRecordSection from './UserEmotionRecordSection';
+import UserProfileSection from './UserProfileSection';
+
+export { UserProfileSection, UserEmotionRecordSection };

src/pages/userpage/hooks/index.ts

@@ -0,0 +1,4 @@
+import { useInfiniteUserEmotionRecords } from './useInfiniteUserEmotionRecords';
+import { useUserProfileInfo } from './useUserProfileInfo';
+
+export { useUserProfileInfo, useInfiniteUserEmotionRecords };

src/pages/userpage/hooks/useInfiniteUserEmotionRecords.ts

@@ -0,0 +1,17 @@
+import { getUserEmotionRecords } from '@/apis/emotionRecord';
+import { useInfiniteQuery } from '@tanstack/react-query';
+
+export const useInfiniteUserEmotionRecords = (userId: string) => {
+  return useInfiniteQuery({
+    queryKey: ['userPosts', userId],
+    queryFn: ({ pageParam = 1 }) => getUserEmotionRecords(userId, pageParam),
+    getNextPageParam: (last) => {
+      if (last.data.currentPage < last.data.totalPages) {
+        return last.data.currentPage + 1;
+      }
+      return undefined;
+    },
+    initialPageParam: 1,
+    staleTime: 5 * 60 * 1000,
+  });
+};