Feat/92/my gathering page edit

src/app/(crew)/my-gathering/favorite/page.tsx → src/app/(crew)/my-favorite/page.tsx

@@ -3,7 +3,7 @@ import { gatheringData } from '@/src/mock/gathering-data';
 
 export default function FavoritePage() {
   return (
-    <div className="md:mt-[45px]">
+    <div className="mt-4 md:mt-10">
       <GatheringList gatheringData={gatheringData} />
     </div>
   );

src/app/(crew)/my-gathering/_component/gathering-list-with-date.tsx

@@ -20,21 +20,21 @@ export default function GatheringListWithDate({ gatheringList }: GatheringListWi
   }, [gatheringList]);
 
   return (
-    <div className="m-4 md:mt-[32.5px]">
+    <div>
       {gatheringListWithDateInfo.map((gathering) => (
         <div key={gathering.id} className="md:flex">
-          <div className="relative w-1/6 md:border-r-2 md:border-gray-200">
+          <div className="w-1/6">
             {gathering.isNewDate && (
-              <div>
-                <div className="md:corner-dot" />
-                <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">월요일</div>
-                </div>
+              <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">월요일</div>
               </div>
             )}
           </div>
-          <div className={`${gathering.isNewDate ? 'pb-' : 'p-'} flex-1 pb-6 md:pl-8`}>
+          <div className={`${gathering.isNewDate && 'mt-3.5'} relative -mb-3.5 w-0.5 bg-gray-200`}>
+            {gathering.isNewDate && <div className="md:corner-dot" />}
+          </div>
+          <div className="flex-1 pb-6 md:pl-8">
             <ScheduledGatheringCard key={gathering.id} data={gathering} />
           </div>
         </div>

src/app/(crew)/my-gathering/creation/page.tsx

@@ -65,8 +65,8 @@ export default function CreationPage() {
   ];
 
   return (
-    <div className="">
-      <div className="pl-4 md:pt-2">
+    <div>
+      <div className="py-4 md:py-6">
         <PopOverCalendar value={selectedDate} onChange={(d) => setSelectedDate(d)} />
       </div>
       <GatheringListWithDate gatheringList={creationGatheringList} />

src/app/(crew)/my-gathering/layout.tsx

@@ -1,47 +1,41 @@
 'use client';
 
 import { useEffect, useState } from 'react';
-import Link from 'next/link';
-import { usePathname } from 'next/navigation';
-import { Button } from '@mantine/core';
+import { usePathname, useRouter } from 'next/navigation';
+import Tabs from '@/src/components/common/tab';
 
-const buttonData = [
-  { id: 1, label: '참여한 약속', route: '/my-gathering/participation' },
-  { id: 2, label: '만든 약속', route: '/my-gathering/creation' },
-  { id: 3, label: '찜한 약속', route: '/my-gathering/favorite' },
+const myGatheringTabs = [
+  { id: 'my-gathering-participation', label: '참여한 약속', route: '/my-gathering/participation' },
+  { id: 'my-gathering-creation', label: '만든 약속', route: '/my-gathering/creation' },
 ];
 
-const getSelectedButtonIndex = (currentPath: string) => {
-  return buttonData.findIndex(({ route }) => currentPath.endsWith(route.split('/').pop()!)) + 1;
-};
-
 export default function MyGatheringLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
+  const router = useRouter();
   const currentPath = usePathname();
-
-  const [selectedButton, setSelectedButton] = useState(getSelectedButtonIndex(currentPath));
+  const [currentTab, setCurrentTab] = useState('');
 
   useEffect(() => {
-    const newIdx = getSelectedButtonIndex(currentPath);
-    setSelectedButton(newIdx);
+    const activeTabId = myGatheringTabs.find((tab) => tab.route === currentPath)?.id;
+    if (activeTabId) setCurrentTab(activeTabId);
   }, [currentPath]);
 
+  const handleTabClick = (id: string) => {
+    const targetRoute = myGatheringTabs.find((tab) => tab.id === id)?.route;
+    if (targetRoute) router.push(targetRoute);
+  };
+
   return (
-    <div className="mt-4 md:mx-[46px] md:mt-[45px]">
-      <div className="m-4 grid grid-cols-3 gap-2 md:gap-4">
-        {buttonData.map(({ id, label, route }) => (
-          <Link key={id} href={route}>
-            <Button
-              className={`${id === selectedButton ? 'btn-filled' : 'btn-outlined'} w-full text-sm font-bold md:text-lg`}
-            >
-              {label}
-            </Button>
-          </Link>
-        ))}
-      </div>
+    <div className="px-3 py-8 md:px-8 md:py-12.5 lg:px-11.5">
+      <Tabs
+        variant="default"
+        tabs={myGatheringTabs}
+        activeTab={currentTab}
+        onTabClick={(id) => handleTabClick(id)}
+      />
       {children}
     </div>
   );

src/app/(crew)/my-gathering/participation/page.tsx

@@ -52,8 +52,8 @@ export default function ParticipationPage() {
   ];
 
   return (
-    <div className="">
-      <div className="pl-4 md:pt-2">
+    <div>
+      <div className="py-4 md:py-6">
         <PopOverCalendar value={selectedDate} onChange={(d) => setSelectedDate(d)} />
       </div>
       <GatheringListWithDate gatheringList={creationGatheringList} />

src/components/common/tab/index.tsx

@@ -1,6 +1,7 @@
 interface Tab {
   label: string;
   id: string;
+  route?: string;
 }
 
 export interface TabsProps {
@@ -13,7 +14,7 @@ export interface TabsProps {
 /**
  * Tabs
  *
- * @param tabs - 탭 목록 데이터 배열로, 각 탭은 label과 id로 구성
+ * @param tabs - 탭 목록 데이터 배열로, 각 탭은 label, id, route로 구성
  * @param activeTab - 현재 활성화된 탭의 ID
  * @param onTabClick - 탭 클릭 시 호출되는 함수, 탭 ID를 매개변수로 받음
  * @param variant - 탭 스타일 유형, 기본 값은 'default'이며 'review'로 전환 가능

src/styles/globals.css

@@ -36,7 +36,7 @@
 }
 @layer utilities {
   .corner-dot {
-    @apply absolute right-[-7px] top-[-6px] rounded-full bg-gray-300;
+    @apply absolute right-[-5px] top-[-6px] rounded-full bg-gray-300;
     width: 12px;
     height: 12px;
   }