feat: 내가 참여한 모임 페이지 구현

src/app/profile/me/group/page.tsx

@@ -1,5 +1,88 @@
+'use client';
+
+import useMyGroupsQuery from '@/queries/group/useMyGroupQuery';
+import BackButton from '@/v1/base/BackButton';
+import TopNavigation from '@/v1/base/TopNavigation';
+import DetailBookGroupCard from '@/v1/bookGroup/DetailBookGroupCard';
+
 const UserGroupPage = () => {
-  return '준비중입니다.';
+  return (
+    <>
+      <TopNavigation>
+        <TopNavigation.LeftItem>
+          <BackButton />
+        </TopNavigation.LeftItem>
+        <TopNavigation.CenterItem>내가 참여한 모임</TopNavigation.CenterItem>
+      </TopNavigation>
+      <UserGroupContent />
+    </>
+  );
+};
+
+const UserGroupContent = () => {
+  const { data, isSuccess } = useMyGroupsQuery();
+
+  if (!isSuccess) {
+    return (
+      <ul className="flex animate-pulse flex-col gap-[1rem] pt-[2rem]">
+        {Array.from({ length: 4 }).map((_, index) => (
+          <li
+            key={index}
+            className="border-placeholder px-[1.6rem] py-[0.9rem] shadow-[0_0_0.6rem_rgba(180,180,180,0.25)]"
+          >
+            <div className="flex gap-[0.5rem] [&>*]:rounded-[0.5rem]">
+              <div className="h-[1.9rem] w-[4.34rem] bg-placeholder" />
+              <div className="h-[1.9rem] w-[4.34rem] bg-placeholder" />
+            </div>
+
+            <div className="flex justify-between gap-[1.5rem] pt-[1rem]">
+              <div className="flex flex-col justify-between [&>*]:rounded-[0.5rem]">
+                <div className="h-[2.15rem] w-[23rem] bg-placeholder" />
+                <div className="h-[2rem] w-[10rem] bg-placeholder" />
+              </div>
+              <div className="h-[10.5rem] w-[7.5rem] rounded-[0.5rem] bg-placeholder" />
+            </div>
+          </li>
+        ))}
+      </ul>
+    );
+  }
+
+  return (
+    <ul className="flex flex-col gap-[1rem] pt-[2rem]">
+      {data.bookGroups.map(
+        ({
+          title,
+          introduce,
+          book,
+          startDate,
+          endDate,
+          owner,
+          currentMemberCount,
+          commentCount,
+          isPublic,
+          bookGroupId,
+        }) => (
+          <li key={bookGroupId}>
+            <DetailBookGroupCard
+              title={title}
+              description={introduce}
+              bookImageSrc={book.imageUrl}
+              date={{ start: startDate, end: endDate }}
+              owner={{
+                name: owner.nickname,
+                profileImageSrc: owner.profileUrl,
+              }}
+              memberCount={currentMemberCount}
+              commentCount={commentCount}
+              isPublic={isPublic}
+              bookGroupId={bookGroupId}
+            />
+          </li>
+        )
+      )}
+    </ul>
+  );
 };
 
 export default UserGroupPage;