💄[Design] 프로필 페이지 - 나의 모임 UI 구현 #165 (#178)

src/app/profile/page.tsx

@@ -1,4 +1,4 @@
-import ProfilePage from '@/features/profile/components/ProfilePage';
+import ProfilePage from '@/features/profile/container/ProfilePage';
 import React from 'react';
 
 const Profile = () => {

src/components/card/Card.tsx

@@ -200,6 +200,7 @@ function Card(props: CardProps) {
       case 'defaultClub':
       default: {
         const {
+          clubId,
           imageUrl,
           imageAlt,
           title,
@@ -211,10 +212,11 @@ function Card(props: CardProps) {
           max,
           isPast,
           isCanceled,
-          meetingType,
+          // meetingType,
+          bookClubType,
           onClick,
           onDelete,
-          status,
+          clubStatus,
         } = props as DefaultClubCard & { variant: 'defaultClub' };
 
         return (
@@ -227,11 +229,14 @@ function Card(props: CardProps) {
               onLikeClick={onLikeClick}
             />
 
-            <Card.Box onClick={onClick} className="justify-between">
+            <Card.Box
+              onClick={() => onClick(clubId)}
+              className="justify-between"
+            >
               <div className="flex flex-col gap-0.5">
                 <div className="flex justify-between">
                   <Card.Title>{title}</Card.Title>
-                  <ClubChip variant={meetingType} isPast={isPast} />
+                  <ClubChip variant={bookClubType} isPast={isPast} />
                 </div>
                 <div className="flex items-center gap-1.5">
                   <Card.Location>{location}</Card.Location>
@@ -246,30 +251,32 @@ function Card(props: CardProps) {
                     max={max}
                     isPast={isPast}
                   />
-                  <ClubChip variant={status} isPast={isPast} />
+                  <ClubChip variant={clubStatus} isPast={isPast} />
                 </div>
                 <ProgressBar
                   percentage={(current / max) * 100}
                   isPast={isPast}
                 />
               </div>
             </Card.Box>
-            {isCanceled && <Card.Overlay onDelete={onDelete} />}
+            {isCanceled && <Card.Overlay onDelete={() => onDelete()} />}
           </div>
         );
       }
 
       case 'participatedClub': {
         const {
+          clubId,
           imageUrl,
           imageAlt,
-          isLiked,
-          onLikeClick,
+          // isLiked,
+          // onLikeClick,
           isCanceled,
           onClick,
           onDelete,
-          status,
-          meetingType,
+          clubStatus,
+          // meetingType,
+          bookClubType,
           title,
           location,
           datetime,
@@ -283,17 +290,20 @@ function Card(props: CardProps) {
             <Card.Image
               url={imageUrl}
               alt={imageAlt}
-              isLiked={isLiked}
-              onLikeClick={onLikeClick}
+              // isLiked={isLiked}
+              // onLikeClick={onLikeClick}
             />
-            <Card.Box onClick={onClick} className="justify-between">
+            <Card.Box
+              onClick={() => onClick(clubId)}
+              className="justify-between"
+            >
               <div className="flex flex-col gap-2.5">
                 <div className="flex justify-between">
                   <div className="flex gap-2">
                     <ClubChip variant={isPast ? 'completed' : 'scheduled'} />
-                    <ClubChip variant={status} />
+                    <ClubChip variant={clubStatus} />
                   </div>
-                  <ClubChip variant={meetingType} />
+                  <ClubChip variant={bookClubType} />
                 </div>
                 <div className="flex flex-col">
                   <Card.Title>{title}</Card.Title>
@@ -324,26 +334,28 @@ function Card(props: CardProps) {
                       lightColor="gray-normal-01"
                       onClick={(e) => {
                         e.stopPropagation();
-                        onCancel();
+                        onCancel(clubId);
                       }}
                       className="w-full"
                     />
                   )}
                 </div>
               </div>
             </Card.Box>
-            {isCanceled && <Card.Overlay onDelete={onDelete} />}
+            {isCanceled && <Card.Overlay onDelete={() => onDelete(clubId)} />}
           </div>
         );
       }
 
       case 'hostedClub': {
         const {
+          clubId,
           imageUrl,
           imageAlt,
           onClick,
-          status,
-          meetingType,
+          clubStatus,
+          // meetingType,
+          bookClubType,
           isPast,
           title,
           location,
@@ -355,11 +367,14 @@ function Card(props: CardProps) {
         return (
           <div className="flex flex-col gap-6 md:flex-row">
             <Card.Image url={imageUrl} alt={imageAlt} />
-            <Card.Box onClick={onClick} className="justify-between">
+            <Card.Box
+              onClick={() => onClick(clubId)}
+              className="justify-between"
+            >
               <div className="flex flex-col gap-2.5">
                 <div className="flex justify-between">
-                  <ClubChip variant={isPast ? 'completed' : status} />
-                  <ClubChip variant={meetingType} />
+                  <ClubChip variant={isPast ? 'completed' : clubStatus} />
+                  <ClubChip variant={bookClubType} />
                 </div>
                 <div className="flex flex-col">
                   <Card.Title>{title}</Card.Title>
@@ -413,19 +428,21 @@ function Card(props: CardProps) {
 
       case 'detailedClub': {
         const {
+          clubId,
           imageUrl,
           imageAlt,
           title,
           location,
           datetime,
           isLiked,
           onLikeClick,
-          meetingType,
+          // meetingType,
+          bookClubType,
           current,
           max,
           isPast,
           host,
-          status,
+          clubStatus,
           participants,
           onClick,
           isHost,
@@ -542,13 +559,13 @@ function Card(props: CardProps) {
                 />
 
                 <Card.Box
-                  onClick={onClick}
-                  className="cursor-default justify-between"
+                  onClick={() => onClick(clubId)}
+                  className="justify-between"
                 >
                   <div className="flex flex-col gap-0.5">
                     <div className="flex justify-between">
                       <Card.Title>{title}</Card.Title>
-                      <ClubChip variant={meetingType} isPast={isPast} />
+                      <ClubChip variant={bookClubType} isPast={isPast} />
                     </div>
                     <div className="flex items-center gap-1.5">
                       <Card.Location>{location}</Card.Location>
@@ -574,7 +591,7 @@ function Card(props: CardProps) {
                           ))}
                         </AvatarGroup>
                       </div>
-                      <ClubChip variant={status} isPast={isPast} />
+                      <ClubChip variant={clubStatus} isPast={isPast} />
                     </div>
                     <ProgressBar
                       percentage={(current / max) * 100}
@@ -598,7 +615,7 @@ function Card(props: CardProps) {
     >
       <article
         className={twMerge(
-          'relative flex h-full w-full min-w-[336px] flex-col',
+          'relative flex h-full min-w-[336px] flex-col md:w-full',
         )}
       >
         {renderCardContent()}

src/components/card/ClubCard.stories.tsx

@@ -13,9 +13,9 @@ const meta = {
       control: 'select',
       options: ['FREE', 'FIXED'],
     },
-    status: {
+    clubStatus: {
       control: 'select',
-      options: ['completed', 'scheduled', 'pending', 'confirmed', 'closed'],
+      options: ['pending', 'confirmed', 'closed'],
     },
   },
   tags: ['autodocs'],
@@ -28,12 +28,14 @@ const baseArgs = {
   // ClubCard 기본 인터페이스의 속성들
   imageUrl: 'https://picsum.photos/400/300',
   imageAlt: '모임 이미지',
+  clubId: 45,
   title: '을지로 독서 모임',
   location: '을지로 3가',
   datetime: '12/14(토) 오전 10:00',
-  meetingType: 'FREE' as const,
+  meetingType: 'OFFLINE' as const,
+  bookClubType: 'FREE' as const,
   isPast: false,
-  status: 'confirmed' as const,
+  clubStatus: 'confirmed' as const,
   onClick: () => alert('카드 클릭!'),
 } as const;
 

src/components/card/types/clubCard.ts

@@ -4,15 +4,17 @@ interface ClubCard {
   imageAlt?: string;
 
   // 모임 정보
+  clubId: number;
   title: string;
   location: string;
   datetime: string;
-  meetingType: 'FREE' | 'FIXED';
+  meetingType: 'ONLINE' | 'OFFLINE';
+  bookClubType: 'FREE' | 'FIXED';
   isPast: boolean; // 지난 모임인지 아닌지
-  status: 'completed' | 'scheduled' | 'pending' | 'confirmed' | 'closed'; // 개설 현황
+  clubStatus: 'pending' | 'confirmed' | 'closed'; // 개설 현황
 
   // 액션 (카드 클릭시 라우터 처리 등)
-  onClick: () => void;
+  onClick: (clubId: number) => void;
 }
 
 interface DefaultClubCard extends ClubCard {
@@ -31,16 +33,16 @@ interface DefaultClubCard extends ClubCard {
 
 interface ParticipatedClubCard extends ClubCard {
   // 찜 정보
-  isLiked: boolean;
-  onLikeClick: () => void;
+  // isLiked: boolean;
+  // onLikeClick: () => void;
 
   // 취소 정보 (블러)
   isCanceled: boolean;
-  onDelete: () => void;
+  onDelete: (clubId: number) => void;
 
   // 버튼 액션
   onWriteReview: () => void; // 리뷰 작성
-  onCancel: () => void; // 모임 취소
+  onCancel: (clubId: number) => void; // 모임 취소
 }
 
 interface HostedClubCard extends ClubCard {

src/components/pop-up-button/PopUpButton.tsx

@@ -0,0 +1,23 @@
+const THEME_COLOR = {
+  cancel: 'border border-orange-600 bg-white text-orange-600 mr-[8px]',
+  confirm: 'bg-orange-600 text-white',
+};
+
+interface PopUpButtonProps {
+  isConfirm: boolean;
+  // onClick: (
+  //   event: MouseEvent<HTMLButtonElement> | MouseEvent<HTMLDivElement>,
+  // ) => void;
+}
+
+function PopUpButton({ isConfirm }: PopUpButtonProps) {
+  return (
+    <button
+      className={`h-[44px] w-[120px] rounded-lg ${isConfirm ? THEME_COLOR.confirm : THEME_COLOR.cancel}`}
+    >
+      {isConfirm ? '확인' : '취소'}
+    </button>
+  );
+}
+
+export default PopUpButton;