Merge remote-tracking branch 'origin' into feat/homin/KAN-105-dark-mode

src/app/(auth)/loading.tsx

@@ -4,7 +4,7 @@ import Loader from '@/app/components/Loader/Loader';
 
 const Loading = () => {
   return (
-    <div className='flex min-h-screen items-center justify-center'>
+    <div className='flex min-h-360 items-center justify-center'>
       <Loader />;
     </div>
   );

src/app/(main)/gatherings/_component/ClientSideGatherings.tsx

@@ -8,7 +8,7 @@ import MakeGatheringModal from '@/app/components/Modal/MakeGatheringModal';
 import Tabs from '@/app/components/Tabs/Tabs';
 import useGatherings from '@/hooks/useGatherings';
 import usePreventScroll from '@/hooks/usePreventScroll';
-import { GatheringsListData } from '@/types/data.type';
+import { GatheringType } from '@/types/data.type';
 import CreateGatheringButton from './CreateGatheringButton';
 import Filters from '@/app/components/Filters/Filters';
 import GatheringCardList from './GatheringCardList';
@@ -20,7 +20,7 @@ import { useInView } from 'react-intersection-observer';
 import { SORT_OPTIONS } from '@/constants/common';
 
 interface ClientSideGatheringsProps {
-  gatherings: GatheringsListData[];
+  gatherings: GatheringType[];
   user: UserData | null;
 }
 

src/app/(main)/gatherings/_component/GatheringCardList.tsx

@@ -2,13 +2,13 @@ import { useEffect, useState } from 'react';
 import Link from 'next/link';
 
 import CardList from '@/app/components/CardList/CardList';
-import { GatheringsListData } from '@/types/data.type';
+import { GatheringType } from '@/types/data.type';
 import { useSavedGatheringList } from '@/context/SavedGatheringContext';
 
 import { useInView } from 'react-intersection-observer';
 
 interface GatheringCardListProps {
-  gatherings: GatheringsListData[];
+  gatherings: GatheringType[];
 }
 
 const GatheringCardList = ({ gatherings }: GatheringCardListProps) => {

src/app/(main)/gatherings/loading.tsx

@@ -5,7 +5,7 @@ import Loader from '@/app/components/Loader/Loader';
 const Loading = () => {
   return (
     <div className='flex min-h-screen items-center justify-center'>
-      <Loader />;
+      <Loader />
     </div>
   );
 };

src/app/(main)/mypage/_component/EmptyReviewPage.tsx

@@ -0,0 +1,11 @@
+const EmptyReviewPage = () => {
+  return (
+    <div className='flex h-full items-center justify-center'>
+      <p className='text-center text-14 font-medium text-var-gray-500 dark:text-neutral-200'>
+        아직 작성한 리뷰가 없어요.
+      </p>
+    </div>
+  );
+};
+
+export default EmptyReviewPage;

src/app/(main)/mypage/_component/ReviewFilterTab.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+import Chip from '@/app/components/Chip/Chip';
+import { useRouter, usePathname } from 'next/navigation';
+import { useEffect, useState } from 'react';
+
+type filterType = 'writable' | 'written';
+
+const ReviewFilterTab = () => {
+  const filterTypeButtons = [
+    { name: '작성 가능한 리뷰', type: 'writable' },
+    { name: '작성한 리뷰', type: 'written' },
+  ];
+
+  const [currentFilterType, setCurrentFilterType] = useState<filterType | null>(
+    null,
+  );
+
+  const router = useRouter();
+  const pathname = usePathname();
+
+  useEffect(() => {
+    const path = pathname.replace('/mypage/review/', '') as filterType;
+    setCurrentFilterType(path);
+  }, [pathname]);
+
+  const handleChangeFilterType = (filterType: filterType) => {
+    router.push(`/mypage/review/${filterType}`);
+  };
+
+  return (
+    <div className='flex items-center gap-8'>
+      {filterTypeButtons.map((filterType) => (
+        <button
+          key={filterType.name}
+          onClick={() => handleChangeFilterType(filterType.type as filterType)}
+          className='transition-all duration-200 ease-in-out'
+        >
+          <Chip
+            state={currentFilterType === filterType.type ? 'active' : 'default'}
+          >
+            {filterType.name}
+          </Chip>
+        </button>
+      ))}
+    </div>
+  );
+};
+
+export default ReviewFilterTab;

src/app/(main)/mypage/_component/Tab.tsx

@@ -6,15 +6,15 @@ import { usePathname } from 'next/navigation';
 const tabList = [
   {
     name: '나의 모임',
-    link: '/mypage',
+    link: ['/mypage'],
   },
   {
     name: '나의 리뷰',
-    link: '/mypage/review',
+    link: ['/mypage/review/writable', '/mypage/review/written'],
   },
   {
     name: '내가 만든 모임',
-    link: '/mypage/created',
+    link: ['/mypage/created'],
   },
 ];
 
@@ -27,8 +27,11 @@ const Tab = () => {
   return (
     <ul className='flex items-start gap-12 text-18 font-semibold text-var-gray-400 dark:text-neutral-500'>
       {tabList.map((item, index) => (
-        <li key={index} className={pathname === item.link ? activeClass : ''}>
-          <Link href={item.link}>{item.name}</Link>
+        <li
+          key={index}
+          className={item.link.includes(pathname) ? activeClass : ''}
+        >
+          <Link href={item.link[0]}>{item.name}</Link>
         </li>
       ))}
     </ul>

src/app/(main)/mypage/created/_component/ClientSideGatherings.tsx

@@ -5,11 +5,11 @@ import { useUserCreated } from '@/hooks/useUserCreated';
 import GatheringList from './GatheringList';
 import { useInView } from 'react-intersection-observer';
 import { useEffect } from 'react';
-import { GatheringsListData } from '@/types/data.type';
+import { GatheringType } from '@/types/data.type';
 import Loader from '@/app/components/Loader/Loader';
 
 interface ClientSideGatheringsProps {
-  initialGatheringList: GatheringsListData[];
+  initialGatheringList: GatheringType[];
   createdBy: string;
 }
 

src/app/(main)/mypage/created/_component/GatheringList.tsx

@@ -1,11 +1,11 @@
 'use client';
 
 import Card from '@/app/components/Card/Card';
-import { GatheringsListData } from '@/types/data.type';
+import { GatheringType } from '@/types/data.type';
 import Link from 'next/link';
 
 interface GatheringListProps {
-  dataList: GatheringsListData[];
+  dataList: GatheringType[];
 }
 
 const GatheringList = ({ dataList }: GatheringListProps) => {