[#467] 내가 가입한 모임 상세 페이지

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;

src/v1/base/BackButton.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { IconArrowLeft } from '@public/icons';
 import { useRouter } from 'next/navigation';
 

src/v1/base/TopNavigation.tsx

@@ -16,7 +16,7 @@ const TopNavigation = ({ children }: TopNavigationProps) => {
 
 const LeftItem = ({ children }: ItemProps) => {
   return (
-    <div className="absolute left-[0rem] [&_svg]:h-[2rem] [&_svg]:w-[2rem] [&_svg]:cursor-pointer">
+    <div className="absolute left-[0rem] flex [&_svg]:h-[2rem] [&_svg]:w-[2rem] [&_svg]:cursor-pointer">
       {children}
     </div>
   );

src/v1/bookGroup/BookGroupStatus.tsx

@@ -51,7 +51,11 @@ const BookGroupStatus = ({ start, end }: { start: string; end: string }) => {
 
   const { text, ...badgeProps } = getBadgeProps(ddayStatus, ddayByStart);
 
-  return <Badge {...badgeProps}>{text}</Badge>;
+  return (
+    <Badge fontWeight="bold" {...badgeProps}>
+      {text}
+    </Badge>
+  );
 };
 
 export default BookGroupStatus;

src/v1/bookGroup/DetailBookGroupCard.tsx

@@ -29,14 +29,14 @@ const DetailBookGroupCard = ({
   bookGroupId,
 }: DetailBookGroupCardProps) => {
   return (
-    <Link className="w-full" href={`/group/${bookGroupId}`}>
-      <div className="min-h-[16.142rem] w-full rounded-[0.4rem] px-[1.6rem] py-[0.9rem] shadow-[0_0_0.6rem_rgba(180,180,180,0.25)]">
-        <div className="mb-[1rem] flex gap-[0.5rem]">
+    <Link href={`/group/${bookGroupId}`}>
+      <div className="w-full rounded-[0.4rem] p-[1.5rem] shadow-[0_0_0.6rem_rgba(180,180,180,0.25)]">
+        <div className="flex gap-[0.5rem]">
           <BookGroupStatus start={date.start} end={date.end} />
           <Public isPublic={isPublic} />
         </div>
-        <div className="flex justify-between gap-[1.5rem]">
-          <div className="flex flex-grow flex-col gap-[0.63rem]">
+        <div className="flex justify-between gap-[1.5rem] pt-[1rem]">
+          <div className="flex flex-grow flex-col justify-between ">
             <Title title={title} />
             <Description description={description} />
             <Duration start={date.start} end={date.end} />
@@ -67,30 +67,29 @@ const Public = ({ isPublic }: { isPublic: boolean }) => (
 );
 
 const Title = ({ title }: { title: string }) => {
-  return (
-    <div>
-      <span className="text-md font-bold">{title}</span>
-    </div>
-  );
+  return <div className="w-[22rem] truncate text-md font-bold">{title}</div>;
 };
 
 const Description = ({ description }: { description: string }) => {
-  return (
-    <div className="w-[22rem] truncate text-sm">
-      <span>{description}</span>
-    </div>
-  );
+  return <div className="w-[22rem] truncate text-sm">{description}</div>;
 };
 
 const Duration = ({ start, end }: { start: string; end: string }) => {
+  const formatDateTime = (dateString: string) =>
+    new Intl.DateTimeFormat('ko-KR', {
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit',
+    }).format(new Date(dateString));
+
   return (
     <div className="flex items-center gap-[0.5rem]">
       <div>
         <IconCalendar className="h-[1.161rem] w-[1.1rem] fill-placeholder" />
       </div>
       <div className="text-xs text-placeholder">
         <span className="pt-[0.1rem]">
-          {start} - {end}
+          {formatDateTime(start)} - {formatDateTime(end)}
         </span>
       </div>
     </div>

src/v1/bookGroup/SimpleBookGroupCard.tsx

@@ -16,18 +16,18 @@ const SimpleBookGroupCard = ({
 }: SimpleBookGroupCardProps) => {
   return (
     <Link href={`/group/${bookGroupId}`}>
-      <div className="flex h-[15rem] w-[10rem] flex-col gap-[0.5rem]">
-        <div className="h-[11.6rem] w-[10rem] rounded-[0.534rem] bg-orange-100 px-[1.8rem] py-[1.6rem]">
+      <div className="flex w-[10rem] flex-col gap-[0.5rem]">
+        <div className="bg-orange-100 px-[1.8rem] py-[1.6rem]">
           <Image
             src={imageSource}
             alt="bookgroup"
-            width={64}
-            height={84}
-            className="h-[8.4rem] w-[6.4rem] rounded-[0.412rem]"
+            width={65}
+            height={90}
+            className="rounded-[0.5rem]"
           />
         </div>
         <div>
-          <p className="break-keep text-center">
+          <p className="break-keep text-center text-xs leading-6">
             {isOwner ? `👑 ${title}` : title}
           </p>
         </div>