CodeitFESI4-Team1 · minkyung5x5 · Nov 20, 2024 · Nov 19, 2024 · Nov 19, 2024 · Nov 19, 2024
diff --git a/src/app/(crew)/crew/detail/[id]/_components/gathering-detail-modal/presenter.tsx b/src/app/(crew)/crew/detail/[id]/_components/gathering-detail-modal/presenter.tsx
@@ -6,7 +6,7 @@ import Button from '@/src/components/common/input/button';
 import { Profile } from '@/src/components/common/profile';
 import { GatheringDetailType } from '@/src/types/gathering-data';
 import IcoClock from '@/public/assets/icons/ic-clock.svg';
-import IcoUser from '@/public/assets/icons/ic-user.svg';
+import IcoPerson from '@/public/assets/icons/ic-gathering-person.svg';
 
 export interface GatheringDetailModalProps {
   opened: boolean;
@@ -60,44 +60,31 @@ export default function GatheringDetailModalPresenter({
         </figure>
         <div className="flex flex-col gap-8 p-6">
           <section>
-            <hgroup>
-              <h2 className="text-xl font-semibold text-gray-800 md:mr-2 md:inline-block">
-                {data?.title}
-              </h2>
-
-              <h3 className="text-base font-medium text-gray-700 md:inline-block">
-                <i
-                  className="mr-2 hidden text-xl font-semibold not-italic text-gray-800 md:inline-block"
-                  aria-hidden="true"
-                >
-                  |
-                </i>
-                <span>{data?.location}</span>
-              </h3>
-            </hgroup>
-            <p className="mb-6 mt-2.5 flex gap-2 text-base font-semibold">
-              <span className="rounded-[4px] bg-gray-900 px-2 py-0.5 text-white">
-                {formatDate(data?.dateTime).date}
-              </span>
-              <span className="rounded-[4px] bg-gray-900 px-2 py-0.5 text-white">
+            <div className="mb-2 flex items-center space-x-2">
+              <p className="overflow-hidden text-ellipsis whitespace-nowrap text-base font-semibold text-blue-500">
+                {`${formatDate(data?.dateTime).date} ${formatDate(data?.dateTime).dayOfWeek}`}
+              </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">
                 {formatDate(data?.dateTime).time}
-              </span>
-            </p>
-            <p className="text-base font-medium text-gray-700">{data?.introduce}</p>
+              </p>
+            </div>
+            <h2 className="text-xl font-semibold text-gray-800">{data?.title}</h2>
+            <h3 className="text-base font-medium text-gray-700">{data?.location}</h3>
+            <div className="mt-4 w-full border-gray-200">
+              <p className="text-base font-semibold text-blue-500">약속 공지사항</p>
+              <div className="overflow-y-auto text-base font-medium text-gray-700">
+                {data?.introduce || '소개 정보가 없습니다.'}
+              </div>
+            </div>
           </section>
           <section className="text-gray-700">
-            <h3 className="mb-4 flex items-center text-base font-medium">
-              <figure className="relative h-[20px] w-[20px]">
-                <Image
-                  src={IcoUser}
-                  fill
-                  alt="아이콘"
-                  style={{ width: '100%', height: '100%', objectFit: 'cover' }}
-                />
-              </figure>
-              <span>
-                참여인원 {data?.currentCount}/{data?.totalCount}
-              </span>
+            <h3 className="mb-4 flex items-center space-x-1">
+              <Image src={IcoPerson} alt="person icon" width={20} height={20} />
+              <p className="text-base font-medium text-gray-700">
+                참여인원 <span className="text-blue-500">{data?.currentCount}</span>/
+                {data?.totalCount}
+              </p>
             </h3>
             <ScrollArea h={152}>
               <ul className="grid grid-cols-2 gap-4">
@@ -135,7 +122,7 @@ export default function GatheringDetailModalPresenter({
                 onClick={onExit}
                 className="btn-filled h-11 w-29.5 text-base font-medium"
               >
-                탈퇴하기
+                약속 취소하기
               </Button>
             )}
             {data?.gatheringCaptain && (
@@ -144,7 +131,7 @@ export default function GatheringDetailModalPresenter({
                 onClick={onDelete}
                 className="btn-filled h-11 w-29.5 text-base font-medium"
               >
-                삭제하기
+                약속 삭제하기
               </Button>
             )}
           </footer>

diff --git a/src/app/(crew)/my-crew/layout.tsx b/src/app/(crew)/my-crew/layout.tsx
@@ -24,18 +24,18 @@ export default function MyCrewLayout({ children }: { children: ReactNode }) {
   }, [currentPath]);
 
   return (
-    <div className="py-8 md:py-12.5">
-      <div className="px-3 md:px-8 lg:px-11.5">
-        <Tabs
-          variant="default"
-          tabs={myCrewTabs}
-          activeTab={currentTab}
-          onTabClick={(id) => {
-            handleTabClick(id);
-          }}
-        />
-      </div>
-      <div className="mt-8 px-3 md:px-8 lg:px-11.5">{children}</div>
+    <div className="px-3 py-4 md:px-8 md:py-16 lg:px-11.5">
+      <div className="hidden pb-6 text-3xl font-bold md:block">나의 크루</div>
+      <Tabs
+        variant="default"
+        tabs={myCrewTabs}
+        activeTab={currentTab}
+        onTabClick={(id) => {
+          handleTabClick(id);
+        }}
+      />
+      <div className="mt-10 hidden w-full border-t-2 border-gray-200 md:block" />
+      <div className="mt-10">{children}</div>
     </div>
   );
 }
diff --git a/src/app/(crew)/my-favorite/page.tsx b/src/app/(crew)/my-favorite/page.tsx
@@ -2,7 +2,9 @@ import LikedList from '@/src/components/gathering-list/liked-list-container';
 
 export default function FavoritePage() {
   return (
-    <div className="mt-4 md:mt-10">
+    <div className="px-3 py-4 md:px-8 md:py-16 lg:px-11.5">
+      <div className="hidden pb-10 text-3xl font-bold md:block">찜한 약속</div>
+
       <LikedList />
     </div>
   );

diff --git a/src/app/(crew)/my-gathering/_component/gathering-list-with-date.tsx b/src/app/(crew)/my-gathering/_component/gathering-list-with-date.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { useMemo } from 'react';
-import { formatDate, getDayOfWeek } from '@/src/utils/format-date';
+import { formatDate } from '@/src/utils/format-date';
 import ScheduledGatheringCard from '@/src/components/common/gathering-card/scheduled-gathering-card/container';
 import { GatheringCardProps } from '@/src/types/gathering-data';
 
@@ -28,7 +28,7 @@ export default function GatheringListWithDate({ gatheringList }: GatheringListWi
               <div className="hidden flex-nowrap md:block">
                 <div className="text-lg font-semibold">{formatDate(gathering.dateTime).date}</div>
                 <div className="text-base font-medium text-gray-500">
-                  {getDayOfWeek(gathering.dateTime)}
+                  {formatDate(gathering.dateTime).dayOfWeek}
                 </div>
               </div>
             )}

diff --git a/src/app/(crew)/my-gathering/layout.tsx b/src/app/(crew)/my-gathering/layout.tsx
@@ -5,8 +5,8 @@ import { usePathname, useRouter } from 'next/navigation';
 import Tabs from '@/src/components/common/tab';
 
 const myGatheringTabs = [
-  { id: 'my-gathering-joined', label: '참여한 약속', route: '/my-gathering/joined' },
-  { id: 'my-gathering-hosted', label: '만든 약속', route: '/my-gathering/hosted' },
+  { id: 'my-gathering-joined', label: '내가 참여한 약속', route: '/my-gathering/joined' },
+  { id: 'my-gathering-hosted', label: '내가 만든 약속', route: '/my-gathering/hosted' },
 ];
 
 export default function MyGatheringLayout({
@@ -29,13 +29,15 @@ export default function MyGatheringLayout({
   };
 
   return (
-    <div className="px-3 py-8 md:px-8 md:py-12.5 lg:px-11.5">
+    <div className="px-3 py-4 md:px-8 md:py-16 lg:px-11.5">
+      <div className="hidden pb-6 text-3xl font-bold text-gray-900 md:block">나의 약속</div>
       <Tabs
         variant="default"
         tabs={myGatheringTabs}
         activeTab={currentTab}
         onTabClick={(id) => handleTabClick(id)}
       />
+      <div className="mt-10 hidden w-full border-t-2 border-gray-200 md:block" />
       {children}
     </div>
   );

diff --git a/src/app/(crew)/my-page/_components/review-tabs.tsx b/src/app/(crew)/my-page/_components/review-tabs.tsx
@@ -50,14 +50,7 @@ export default function ReviewTabs() {
     <div className="mt-12 flex flex-col">
       <h3 className="text-2xl font-semibold text-gray-900">나의 리뷰 모아보기</h3>
       <Divider mt={16} mb={24} size={2} />
-      <div className="flex justify-start">
-        <Tabs
-          variant="review"
-          tabs={myPageTabs}
-          activeTab={currentTab}
-          onTabClick={handleTabClick}
-        />
-      </div>
+      <Tabs variant="review" tabs={myPageTabs} activeTab={currentTab} onTabClick={handleTabClick} />
     </div>
   );
 }
diff --git a/src/components/common/gathering-card/presenter.tsx b/src/components/common/gathering-card/presenter.tsx
@@ -41,7 +41,7 @@ export default function GatheringCardPresenter({
   deadlineMessage,
   className,
 }: GatheringCardPresenterProps) {
-  const { date, time } = formatDate(dateTime);
+  const { date, dayOfWeek, time } = formatDate(dateTime);
 
   const handleLikeClick = (e: MouseEvent) => {
     e.stopPropagation();
@@ -77,7 +77,7 @@ export default function GatheringCardPresenter({
         <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}
+              {`${date} ${dayOfWeek}`}
             </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">

diff --git a/src/components/common/gathering-card/scheduled-gathering-card/presenter.tsx b/src/components/common/gathering-card/scheduled-gathering-card/presenter.tsx
@@ -1,98 +1,57 @@
 import Image from 'next/image';
 import { Badge } from '@mantine/core';
 import { formatDate } from '@/src/utils/format-date';
-import LikeBtn from '@/src/components/common/input/button/like-btn';
-import IcoPerson from '@/public/assets/icons/person.svg';
+import { GatheringCardProps } from '@/src/types/gathering-data';
+import IcoPerson from '@/public/assets/icons/ic-gathering-person.svg';
+import Button from '../../input/button';
 
 interface ScheduledGatheringCardPresenterProps {
-  data: {
-    id: number;
-    crewTitle: string;
-    crewMainLocation: string;
-    crewSubLocation: string;
-    title: string;
-    dateTime: string;
-    currentCount: number;
-    totalCount: number;
-    imageUrl: string;
-    liked: boolean;
-  };
+  data: GatheringCardProps;
   onClick: () => void;
 }
 
 export default function ScheduledGatheringCardPresenter({
   data,
   onClick,
 }: ScheduledGatheringCardPresenterProps) {
-  const {
-    id,
-    crewTitle,
-    crewMainLocation,
-    crewSubLocation,
-    title,
-    dateTime,
-    currentCount,
-    totalCount,
-    imageUrl,
-    liked,
-  } = data;
+  const { crewTitle, title, dateTime, location, currentCount, totalCount, imageUrl } = data;
 
-  const { date, time } = formatDate(dateTime);
+  const { date, dayOfWeek, time } = formatDate(dateTime);
 
   return (
     <div className="space-y-2">
-      <div className="ml-2 flex items-center">
-        <span className="text-xl font-semibold text-gray-800">{crewTitle}</span>
-        <div className="ml-2 mr-1 h-[18px] w-[2px] bg-black" />
-        <span className="text-base font-medium text-gray-700">
-          {crewMainLocation} {crewSubLocation}
-        </span>
-      </div>
+      <span className="text-xl font-semibold text-gray-800">{crewTitle}</span>
       {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
       <div
         onClick={onClick}
         role="button"
         tabIndex={0}
-        className="relative flex h-44 cursor-pointer items-center space-x-4 rounded-xl bg-white p-6 shadow-xs md:space-x-6 lg:space-x-6"
+        className="h-80 cursor-pointer items-center rounded-xl bg-white shadow-xs md:flex md:h-44"
       >
-        {/* Image Section */}
-        <div className="relative h-28 w-28 flex-shrink-0 overflow-hidden rounded-lg md:h-32 md:w-32 lg:h-32 lg:w-32">
+        <div className="relative h-1/2 w-full flex-shrink-0 overflow-hidden rounded-t-lg md:h-full md:w-1/3 md:rounded-l-lg md:rounded-r-none">
           <Image src={imageUrl} alt={title} layout="fill" className="object-cover" />
         </div>
-
-        {/* Content Section */}
-        <div className="flex h-full w-full min-w-0 flex-grow flex-col justify-between">
-          <div className="space-y-2">
-            <h3 className="w-full overflow-hidden text-ellipsis whitespace-nowrap text-xl font-semibold text-gray-800">
-              {title}
-            </h3>
-            <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 className="flex h-1/2 w-full min-w-0 flex-grow flex-col justify-between p-4 md:h-full">
+          <div className="overflow-hidden text-ellipsis whitespace-nowrap">
+            <div className="mb-2 flex items-center space-x-2 text-sm font-semibold text-blue-500 md:text-base">
+              <p>{`${date} ${dayOfWeek}`}</p>
+              <div className="h-[18px] w-[1px] bg-gray-300" />
+              <p>{time}</p>
+            </div>
+            <h3 className="text-lg font-semibold text-gray-800 md:text-xl">{title}</h3>
+            <p className="text-xm mb-2 font-normal text-gray-700">{location}</p>
+          </div>
+          <div className="flex justify-between">
+            <div className="flex items-end space-x-1 pb-2 md:pb-0">
+              <Image src={IcoPerson} alt="person icon" width={16} height={16} className="pb-0.5" />
+              <p className="text-sm font-normal text-gray-900">
+                참여인원 <span className="text-blue-500">{currentCount}</span>/{totalCount}
+              </p>
             </div>
+            <Button className="lg:w-1/ btn-filled w-40 md:w-1/2" 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>
     </div>

diff --git a/...components/common/gathering-card/scheduled-gathering-card/scheduled-gathering.stories.tsx b/...components/common/gathering-card/scheduled-gathering-card/scheduled-gathering.stories.tsx
@@ -37,6 +37,7 @@ export const LikedEvent: Story = {
       crewSubLocation: '강남구 역삼동',
       title: '가나다라마가나다라마가나다라마가',
       dateTime: '2024-10-30T00:30',
+      location: '역삼역 1번출구',
       currentCount: 8,
       totalCount: 12,
       imageUrl:
@@ -57,6 +58,7 @@ export const NotLikedEvent: Story = {
       crewSubLocation: '용산구 한강로',
       title: '등산 모임',
       dateTime: '2024-11-12T09:00',
+      location: '한강진역 1번출구',
       currentCount: 5,
       totalCount: 10,
       imageUrl: