Feat/131/design gatherings

src/_queries/liked/liked-queries.ts

@@ -4,6 +4,6 @@ import { getLikedList } from '@/src/_apis/liked/liked-apis';
 export function useGetLikedListQuery(page: number) {
   return useQuery({
     queryKey: ['likedList', page],
-    queryFn: () => getLikedList(page),
+    queryFn: () => getLikedList(page - 1), // 1 -> 0 기반으로 변환
   });
 }

src/app/(crew)/crew/detail/[id]/_components/gathering-list-section.tsx

@@ -7,7 +7,7 @@ import { addLike, removeLike } from '@/src/_apis/liked/liked-apis';
 import { useGetGatheringListQuery } from '@/src/_queries/crew/gathering-list-queries';
 import { ApiError } from '@/src/utils/api';
 import ConfirmModal from '@/src/components/common/modal/confirm-modal';
-import GatheringCardCarousel from '@/src/components/gathering-list/gathering-card-carousel';
+import CrewGatheringList from '@/src/components/gathering-list/crew-gathering-list';
 
 interface GatheringListSectionProps {
   id: number;
@@ -50,7 +50,7 @@ export default function GatheringListSection({ id }: GatheringListSectionProps)
 
   return (
     <>
-      <GatheringCardCarousel
+      <CrewGatheringList
         gatheringData={gatheringList}
         crewId={id}
         onLike={handleLike}

src/app/(crew)/crew/detail/[id]/page.tsx

@@ -13,31 +13,35 @@ export default async function CrewDetailPage({ params }: CrewDetailPageProps) {
 
   return (
     <div className="mx-auto min-h-screen w-full max-w-full overflow-x-hidden">
-      <div className="mx-3 my-7 space-y-10 md:mx-7 md:my-11 lg:mx-11 lg:my-16">
-        <section className="w-full">
-          <article>
-            <DetailCrew id={id} />
-          </article>
-        </section>
-        <section className="w-full space-y-6">
-          <article className="space-y-6">
-            <div className="flex items-center justify-between">
-              <h2 className="text-2xl font-semibold">크루 약속</h2>
-              <CreateGathering crewId={Number(params.id)} />
-            </div>
-            <div className="flex w-full">
+      {/* Detail Section */}
+      <section className="mx-3 my-7 md:mx-7 md:my-11 lg:mx-11 lg:my-16">
+        <article>
+          <DetailCrew id={id} />
+        </article>
+      </section>
+
+      {/* Gathering Section */}
+      <section className="w-full space-y-6">
+        <article className="space-y-6">
+          <div className="flex items-center justify-between px-3 md:px-7 lg:px-11">
+            <h2 className="text-2xl font-semibold">크루 약속</h2>
+            <CreateGathering crewId={Number(params.id)} />
+          </div>
+          <div className="flex w-full overflow-hidden px-3 md:px-7 lg:px-0">
+            <div className="relative -mx-3 w-[calc(100%+1.5rem)] px-3 md:-mx-7 md:w-[calc(100%+3.5rem)] md:px-7 lg:-mx-6 lg:w-[calc(100%+3rem)] lg:px-0">
               <GatheringListSection id={id} />
             </div>
-          </article>
-        </section>
-        {/* // TODO: 리뷰 완성되면 수정 */}
-        {/* <section className="w-full">
-          <article className="space-y-6">
-            <h2 className="text-2xl font-semibold">크루 리뷰</h2>
-            <CrewReviewSection />
-          </article>
-        </section> */}
-      </div>
+          </div>
+        </article>
+      </section>
+
+      {/* Crew Review Section */}
+      {/* <section className="w-full mx-3 md:mx-7 lg:mx-11 space-y-6">
+        <article className="space-y-6">
+          <h2 className="text-2xl font-semibold">크루 리뷰</h2>
+          <CrewReviewSection />
+        </article>
+      </section> */}
     </div>
   );
 }

src/components/common/gathering-card/presenter.tsx

@@ -5,11 +5,9 @@ import { cn } from '@/src/utils/cn';
 import { formatDate } from '@/src/utils/format-date';
 import Button from '@/src/components/common/input/button';
 import LikeBtn from '@/src/components/common/input/button/like-btn';
-import IcoPerson from '@/public/assets/icons/person.svg';
+import IcoPerson from '@/public/assets/icons/ic-gathering-person.svg';
 import IcoTimer from '@/public/assets/icons/timer.svg';
 
-// TODO: 스케레톤UI 적용(처음 로딩시 카드가 늘어나는 현상)
-
 export interface GatheringCardPresenterProps {
   id: number;
   imageUrl: string;
@@ -45,24 +43,16 @@ export default function GatheringCardPresenter({
 }: GatheringCardPresenterProps) {
   const { date, time } = formatDate(dateTime);
 
-  const handleClick = (e: MouseEvent) => {
+  const handleLikeClick = (e: MouseEvent) => {
     e.stopPropagation();
     onLikeToggle();
   };
 
   return (
     <div
-      role="button"
-      tabIndex={0}
-      onClick={isPast ? undefined : onClick}
-      onKeyDown={(e) => {
-        if (!isPast && (e.key === 'Enter' || e.key === ' ')) {
-          onClick();
-        }
-      }}
       className={cn(
         className,
-        'relative h-[310px] w-full overflow-hidden rounded-lg border-white bg-white shadow-sm',
+        'relative h-[344px] w-full overflow-hidden rounded-lg border-white bg-white shadow-sm',
         isPast ? 'pointer-events-none cursor-default' : 'cursor-pointer',
       )}
     >
@@ -85,53 +75,46 @@ export default function GatheringCardPresenter({
 
       <div className="flex min-h-[150px] flex-col justify-between p-4">
         <div>
+          <div className="flex items-center space-x-2">
+            <p className="overflow-hidden text-ellipsis whitespace-nowrap text-base font-semibold text-blue-500">
+              {date}
+            </p>
+            <div className="h-[18px] w-[1px] bg-gray-300" />
+            <p className="overflow-hidden text-ellipsis whitespace-nowrap text-base font-semibold text-blue-500">
+              {time}
+            </p>
+          </div>
           <h3 className="overflow-hidden text-ellipsis whitespace-nowrap text-xl font-semibold text-gray-800">
             {title}
           </h3>
-          <div className="mb-2 flex items-center space-x-1 text-base font-medium text-gray-700">
-            <span className="-translate-y-[2px] leading-none tracking-tighter">|</span>
+          <div className="text-xm mb-2 flex items-center space-x-1 font-normal text-gray-700">
             <p className="overflow-hidden text-ellipsis whitespace-nowrap">{location}</p>
           </div>
-          <div className="space-x-2">
-            <Badge
-              size="lg"
-              color="#111827"
-              radius="sm"
-              classNames={{
-                label: 'font-pretendard, gathering-badge',
-              }}
-            >
-              {date}
-            </Badge>
-            <Badge
-              size="lg"
-              color="#111827"
-              radius="sm"
-              classNames={{
-                label: 'font-pretendard, gathering-badge',
-              }}
-            >
-              {time}
-            </Badge>
+        </div>
+        <div className="flex flex-col space-y-2">
+          <div className="flex items-center space-x-1">
+            <Image src={IcoPerson} alt="person icon" width={16} height={16} />
+            <p className="text-sm font-normal text-gray-900">
+              참여인원 <span className="text-blue-500">{currentCount}</span>/{totalCount}
+            </p>
           </div>
+          <Button className="btn-filled w-full" onClick={onClick}>
+            약속 자세히 보기
+          </Button>
         </div>
-        <p className="flex items-center text-base font-medium text-gray-700">
-          <Image src={IcoPerson} alt="person icon" width={16} height={16} />
-          참여인원 {currentCount}/{totalCount}
-        </p>
       </div>
 
-      <div className="absolute bottom-4 right-4">
-        <LikeBtn id={id} isLiked={isLiked} onLikeToggle={onLikeToggle} size={40} />
+      <div className="absolute right-4 top-[172px]">
+        <LikeBtn id={id} isLiked={isLiked} onLikeToggle={onLikeToggle} size={32} />
       </div>
 
       {isPast && (
         <div className="pointer-events-auto absolute inset-0 flex items-center justify-center rounded-md bg-black bg-opacity-70 text-white">
           <div className="text-center">
-            <p className="mb-2 text-lg font-semibold">마감된 모임입니다</p>
+            <p className="mb-2 text-lg font-semibold">마감된 약속입니다</p>
             <p className="mb-4 text-sm">다음 기회에 만나요 🙏</p>
-            <Button type="button" className="btn-filled px-4" onClick={handleClick}>
-              모임 보내주기
+            <Button type="button" className="btn-filled px-4" onClick={handleLikeClick}>
+              약속 보내주기
             </Button>
           </div>
         </div>

src/components/gathering-list/gathering-carousel.stories.tsx → src/components/gathering-list/crew-gathering-list.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import GatheringCardCarousel from './gathering-card-carousel';
+import CrewGatheringList from './crew-gathering-list';
 
 // 더미 데이터 정의
 const mockGatheringData = [
@@ -37,25 +37,41 @@ const mockGatheringData = [
       'https://images.unsplash.com/photo-1516978101789-720eacb59e79?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NjV8fGNhdHxlbnwwfHwwfHx8Mg%3D%3D',
     liked: true,
   },
+  {
+    id: 4,
+    title: '러닝 모임',
+    dateTime: '2024-11-15T09:00',
+    location: '서울 영등포구 여의동로 330',
+    currentCount: 10,
+    totalCount: 20,
+    imageUrl:
+      'https://images.unsplash.com/photo-1516978101789-720eacb59e79?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NjV8fGNhdHxlbnwwfHwwfHx8Mg%3D%3D',
+    liked: true,
+  },
 ];
 
 const queryClient = new QueryClient();
 
-const meta: Meta<typeof GatheringCardCarousel> = {
-  title: 'Components/GatheringCardCarousel',
-  component: GatheringCardCarousel,
+const meta: Meta<typeof CrewGatheringList> = {
+  title: 'Components/CrewGatheringList',
+  component: CrewGatheringList,
   parameters: {
-    layout: 'fullscreen',
+    layout: 'fulled', // layout 변경
   },
   tags: ['autodocs'],
   decorators: [
     (Story) => (
       <QueryClientProvider client={queryClient}>
-        <Story />
+        {/* 부모 컨테이너 추가 */}
+        <div className="flex w-full justify-center bg-gray-100">
+          <div className="relative -mx-6 w-[calc(100%+3rem)]">
+            <Story />
+          </div>
+        </div>
       </QueryClientProvider>
     ),
   ],
-} satisfies Meta<typeof GatheringCardCarousel>;
+} satisfies Meta<typeof CrewGatheringList>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;