From bba56dbc84afb8e2e1a5d8f3df5506e32cb24ee9 Mon Sep 17 00:00:00 2001
From: hoxey2react <hoxey2react@gmail.com>
Date: Mon, 30 Jun 2025 17:19:54 +0900
Subject: [PATCH 1/9] =?UTF-8?q?refactor:=20=EC=83=81=EC=9C=84=EC=9A=94?=
 =?UTF-8?q?=EC=86=8C=EC=97=90=EB=A7=8C=20use=20client,=20=EB=82=98?=
 =?UTF-8?q?=EB=A8=B8=EC=A7=80=EB=8A=94=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mypage/_components/my-profile/EditMyProfileForm.tsx   | 2 --
 src/app/mypage/_components/my-profile/InputController.tsx | 2 --
 src/app/mypage/_components/my-profile/MyProfile.tsx       | 6 ++++--
 .../my-social-list/MySocialListCardItemGeneral.tsx        | 2 --
 .../_components/my-social-list/MySocialListItemLiked.tsx  | 2 --
 src/app/mypage/page.tsx                                   | 8 --------
 6 files changed, 4 insertions(+), 18 deletions(-)

diff --git a/src/app/mypage/_components/my-profile/EditMyProfileForm.tsx b/src/app/mypage/_components/my-profile/EditMyProfileForm.tsx
index 93091f98..d4f4de5a 100644
--- a/src/app/mypage/_components/my-profile/EditMyProfileForm.tsx
+++ b/src/app/mypage/_components/my-profile/EditMyProfileForm.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import Button from '@/components/common/Button/Button';
 import { MyInfoRequest } from '@/api/auth/type';
 import {
diff --git a/src/app/mypage/_components/my-profile/InputController.tsx b/src/app/mypage/_components/my-profile/InputController.tsx
index 77b26950..238abcd0 100644
--- a/src/app/mypage/_components/my-profile/InputController.tsx
+++ b/src/app/mypage/_components/my-profile/InputController.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import InputForm from '@/components/common/Form/InputForm';
 import { Control, Controller, FieldValues, Path } from 'react-hook-form';
 
diff --git a/src/app/mypage/_components/my-profile/MyProfile.tsx b/src/app/mypage/_components/my-profile/MyProfile.tsx
index 80901433..67222ed5 100644
--- a/src/app/mypage/_components/my-profile/MyProfile.tsx
+++ b/src/app/mypage/_components/my-profile/MyProfile.tsx
@@ -3,9 +3,11 @@
 import Image from 'next/image';
 import useBoolean from '@/hooks/useBoolean';
 import { BtnEditLarge, DefaultProfileImage } from '@public/assets/icons';
-import { useAuth } from '@/providers/auth-provider/AuthProvider.client';
 import EditMyProfileForm from './EditMyProfileForm';
 import MyProfileSkeleton from './MyProfileSkeleton';
+import { useAuth } from '@/providers/auth-provider/AuthProvider.client';
+import { redirect } from 'next/navigation';
+import { APP_ROUTES } from '@/constants/appRoutes';
 
 const MyProfile = () => {
   const {
@@ -15,8 +17,8 @@ const MyProfile = () => {
   } = useBoolean();
 
   const { myInfo, isSignIn, queryMethods } = useAuth();
+  if (!isSignIn || !myInfo) return redirect(APP_ROUTES.signin);
 
-  if (!isSignIn || !myInfo) return;
   if (queryMethods.isLoading) return <MyProfileSkeleton />;
 
   return (
diff --git a/src/app/mypage/_components/my-social-list/MySocialListCardItemGeneral.tsx b/src/app/mypage/_components/my-social-list/MySocialListCardItemGeneral.tsx
index 10048071..81166127 100644
--- a/src/app/mypage/_components/my-social-list/MySocialListCardItemGeneral.tsx
+++ b/src/app/mypage/_components/my-social-list/MySocialListCardItemGeneral.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import {
   deleteCollaboratorFromSocial,
   leaveJoinSocial,
diff --git a/src/app/mypage/_components/my-social-list/MySocialListItemLiked.tsx b/src/app/mypage/_components/my-social-list/MySocialListItemLiked.tsx
index 0e6af6df..0ab42ab2 100644
--- a/src/app/mypage/_components/my-social-list/MySocialListItemLiked.tsx
+++ b/src/app/mypage/_components/my-social-list/MySocialListItemLiked.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import { useRouter } from 'next/navigation';
 import ListCard from '@/components/common/Card/ListCard';
 import { MySocialListCardItemLikedProps } from '@/app/mypage/_components/my-social-list/type';
diff --git a/src/app/mypage/page.tsx b/src/app/mypage/page.tsx
index 86c27f69..5657e90a 100644
--- a/src/app/mypage/page.tsx
+++ b/src/app/mypage/page.tsx
@@ -1,15 +1,7 @@
-'use client';
-
-import { redirect } from 'next/navigation';
-import { useAuth } from '@/providers/auth-provider/AuthProvider.client';
-import { APP_ROUTES } from '@/constants/appRoutes';
 import MyProfile from './_components/my-profile/MyProfile';
 import MySocialList from './_components/my-social-list/MySocialList';
 
 const MyPage = () => {
-  const { isSignIn } = useAuth();
-  if (!isSignIn) return redirect(APP_ROUTES.signin);
-
   return (
     <section className="mx-auto mt-4 w-full md:w-[696px] lg:w-[996px]">
       <h1 className="text-write-main text-2xl font-semibold">마이 페이지</h1>

From f05a0b5e16d4cff03fd617709c5ea643d50e4de7 Mon Sep 17 00:00:00 2001
From: hoxey2react <hoxey2react@gmail.com>
Date: Wed, 2 Jul 2025 21:08:54 +0900
Subject: [PATCH 2/9] =?UTF-8?q?refactor:=20end=5Fdate=5Ftitle=20=EC=86=8D?=
 =?UTF-8?q?=EC=84=B1=20=EC=B6=94=EA=B0=80,=20no=5Fimage=20=EC=B2=98?=
 =?UTF-8?q?=EB=A6=AC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/Card/ListCard.tsx | 13 +++++++++++--
 src/components/common/Card/type.ts      |  1 +
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/common/Card/ListCard.tsx b/src/components/common/Card/ListCard.tsx
index b44514e8..a73097ad 100644
--- a/src/components/common/Card/ListCard.tsx
+++ b/src/components/common/Card/ListCard.tsx
@@ -15,6 +15,7 @@ const ListCard = ({
   chip,
   textContent,
   endDate,
+  endDateTitle,
   isCardDataLoading,
   isCompletedStory,
   isCanceled,
@@ -44,7 +45,7 @@ const ListCard = ({
         {!isImageLoaded || isImageLoadError || isCardDataLoading ? (
           <div className="absolute h-full w-full animate-pulse rounded-xl bg-gray-300" />
         ) : null}
-        {image.src && image.alt && !isCardDataLoading && (
+        {image.src && image.alt && !isCardDataLoading ? (
           <Image
             src={image.src}
             alt={image.alt ? image.alt : '이미지를 불러올 수 없습니다'}
@@ -53,6 +54,10 @@ const ListCard = ({
             fill
             className={`rounded-3xl object-cover ${isImageLoaded ? 'opacity-100' : 'opacity-0'}`}
           />
+        ) : (
+          <div className="flex h-full w-full items-center justify-center rounded-3xl bg-gray-400 text-base text-white">
+            No Image
+          </div>
         )}
       </figure>
       <div className="flex w-full flex-col gap-3 px-1.5 sm:p-0">
@@ -87,7 +92,11 @@ const ListCard = ({
         <div className="mb-1.5 flex flex-row items-center gap-3 text-sm text-gray-700">
           {!isCardDataLoading ? (
             <>
-              {endDate && <p>종료 : {format(endDate, 'yyyy-MM-dd')}</p>}
+              {endDate && (
+                <p>
+                  {endDateTitle} : {format(endDate, 'yyyy-MM-dd')}
+                </p>
+              )}
               <div className="flex items-center gap-0.5">
                 <Person className="h-4 w-4 text-gray-300" aria-hidden="true" />
                 <p className="text-sm font-medium text-gray-700">
diff --git a/src/components/common/Card/type.ts b/src/components/common/Card/type.ts
index 5e2ccf6b..c5bf63be 100644
--- a/src/components/common/Card/type.ts
+++ b/src/components/common/Card/type.ts
@@ -57,6 +57,7 @@ export interface ListCardProps {
   chip: ReactNode;
   textContent: ListCardTextContentProps;
   endDate: string | null;
+  endDateTitle: string;
   isCardDataLoading: boolean;
   isCompletedStory: boolean;
   isCanceled: boolean;

From fd2445068458c2df2cb919c3794581554606dffb Mon Sep 17 00:00:00 2001
From: hoxey2react <hoxey2react@gmail.com>
Date: Wed, 2 Jul 2025 21:10:17 +0900
Subject: [PATCH 3/9] =?UTF-8?q?refactor:=20my=5Fsocial=5Flist=5Fcard=5Fite?=
 =?UTF-8?q?m=20=ED=95=98=EB=82=98=EB=A1=9C=20=ED=86=B5=ED=95=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../my-social-list/MySocialListCardItem.tsx   | 109 ++++++++++++++++++
 .../MySocialListCardItemGeneral.tsx           |  91 ---------------
 .../my-social-list/MySocialListItemLiked.tsx  |  75 ------------
 3 files changed, 109 insertions(+), 166 deletions(-)
 create mode 100644 src/app/mypage/_components/my-social-list/MySocialListCardItem.tsx
 delete mode 100644 src/app/mypage/_components/my-social-list/MySocialListCardItemGeneral.tsx
 delete mode 100644 src/app/mypage/_components/my-social-list/MySocialListItemLiked.tsx

diff --git a/src/app/mypage/_components/my-social-list/MySocialListCardItem.tsx b/src/app/mypage/_components/my-social-list/MySocialListCardItem.tsx
new file mode 100644
index 00000000..da371656
--- /dev/null
+++ b/src/app/mypage/_components/my-social-list/MySocialListCardItem.tsx
@@ -0,0 +1,109 @@
+'use client';
+
+import { deleteCollaboratorFromSocial } from '@/api/mypage/api';
+import {
+  LikedStoryResponse,
+  MySocialListCardItemProps,
+  MySocialResponse,
+} from './type';
+import ListCard from '@/components/common/Card/ListCard';
+import { useAuth } from '@/providers/auth-provider/AuthProvider.client';
+import { useRouter } from 'next/navigation';
+import getSocialActionMessage from '@/utils/getSocialActionMessage';
+import { APP_ROUTES } from '@/constants/appRoutes';
+import { Heart } from 'lucide-react';
+import useLikeStory from '@/hooks/api/library/useLikeStory';
+import toast from '@/utils/toast';
+
+const MySocialListCardItem = ({
+  item,
+  activeTab,
+  refetch,
+}: MySocialListCardItemProps) => {
+  const router = useRouter();
+  const { myInfo } = useAuth();
+
+  const userId = myInfo?.id;
+  const isJoinedTab = activeTab === 'joined';
+  const isLikedTab = activeTab === 'liked';
+
+  const { handleLikeStory, isLiked, isPending } = useLikeStory({
+    story_id: item.story_id,
+    user_id: myInfo?.id as number,
+  });
+
+  const handleClickLike = () => {
+    if (isPending) return;
+    handleLikeStory();
+  };
+
+  const handleMySocial = async (storyId: string) => {
+    try {
+      const messages = {
+        confirm: getSocialActionMessage('모임').confirm('exit'),
+        success: getSocialActionMessage('모임').success('exit'),
+      };
+
+      if (isJoinedTab) {
+        const confirmed = window.confirm(messages.confirm);
+        if (!confirmed) return;
+        if (userId) {
+          await deleteCollaboratorFromSocial(userId, storyId);
+          toast.success(messages.success);
+          refetch();
+        }
+      } else {
+        router.push(`${APP_ROUTES.libraryDetail}/${storyId}/?page=0`);
+      }
+    } catch (error) {
+      console.error(error);
+      alert('모임 취소에 실패했습니다.');
+    }
+  };
+
+  return (
+    <div className="flex items-center justify-between truncate py-6">
+      <ListCard
+        teamUserRole={(item as MySocialResponse).role}
+        pageId={item.story_id}
+        image={{
+          src: item.cover_image_url,
+          alt: item.title || '섬네일 이미지',
+        }}
+        chip
+        textContent={{
+          title: item.title || '제목 없음',
+          genre: item.genre,
+          participantCount: item.collaborator_count,
+          capacity: item.capacity,
+        }}
+        endDate={
+          isLikedTab
+            ? (item as LikedStoryResponse).liked_at
+            : (item as MySocialResponse).joined_at
+        }
+        endDateTitle={isLikedTab ? '좋아요한 날짜' : '참여한 날짜'}
+        isCardDataLoading={false}
+        isCompletedStory={
+          (item as MySocialResponse).role === 'LEADER' || isLikedTab
+        }
+        isCanceled={false}
+        handleButtonClick={() => handleMySocial(item.story_id)}
+      />
+      {isLikedTab && (
+        <button
+          type="button"
+          onClick={handleClickLike}
+          aria-label={`${isLiked}`}
+        >
+          <Heart
+            className="text-write-main h-6 w-6"
+            fill={isLiked ? 'currentColor' : 'none'}
+          />
+        </button>
+      )}
+    </div>
+  );
+};
+
+export default MySocialListCardItem;
diff --git a/src/app/mypage/_components/my-social-list/MySocialListCardItemGeneral.tsx b/src/app/mypage/_components/my-social-list/MySocialListCardItemGeneral.tsx
deleted file mode 100644
index 81166127..00000000
--- a/src/app/mypage/_components/my-social-list/MySocialListCardItemGeneral.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import {
-  deleteCollaboratorFromSocial,
-  leaveJoinSocial,
-} from '@/api/mypage/api';
-import { MySocialListItemProps } from './type';
-import ListCard from '@/components/common/Card/ListCard';
-import useCollaboratorList from '@/hooks/api/mypage/useCollaboratorList';
-import { useAuth } from '@/providers/auth-provider/AuthProvider.client';
-import convertLocationToGenre from '@/utils/convertLocationToGenre';
-import { useRouter } from 'next/navigation';
-import getSocialActionMessage from '@/utils/getSocialActionMessage';
-import { useStoryIdBySocialId } from '@/hooks/api/supabase/useStoryIdBySocialId';
-import { LocationType } from '@/api/social/type';
-import { APP_ROUTES } from '@/constants/appRoutes';
-
-const MySocialListCardItemGeneral = ({
-  item,
-  activeTab,
-  refetch,
-}: MySocialListItemProps) => {
-  const router = useRouter();
-  const nowDate = new Date().toISOString();
-  const { data: collaborator } = useCollaboratorList(Number(item.id));
-  const collaboratorCount = collaborator?.length || 0;
-  const { myInfo } = useAuth();
-  const userId = myInfo?.id;
-  const isJoined = activeTab === 'joined';
-
-  const { data: storyId, isLoading: isStoryLoading } = useStoryIdBySocialId(
-    item.id
-  );
-
-  const handleMySocial = async (id: number) => {
-    if (!storyId) return;
-
-    try {
-      const messages = {
-        confirm: getSocialActionMessage('모임').confirm('exit'),
-        success: getSocialActionMessage('모임').success('exit'),
-      };
-
-      if (isJoined) {
-        const confirmed = window.confirm(messages.confirm);
-        if (!confirmed) return;
-        await leaveJoinSocial({ id });
-        if (userId) {
-          await deleteCollaboratorFromSocial(userId, storyId);
-          alert(messages.success);
-          refetch();
-        }
-      } else {
-        router.push(`${APP_ROUTES.socialDetail}/${storyId}/?page=0`);
-      }
-    } catch (error) {
-      console.error(error);
-      alert('모임 취소에 실패했습니다.');
-    }
-  };
-
-  return (
-    <div className="truncate py-6">
-      <ListCard
-        teamUserRole={activeTab === 'created' ? 'LEADER' : 'MEMBER'}
-        pageId={storyId?.toString() || undefined}
-        image={{
-          src:
-            item.image ||
-            'https://inabooth.io/_next/image?url=https%3A%2F%2Fd19bi7owzxc0m2.cloudfront.net%2Fprod%2Fcharacter_files%2FRwH7fLwSHwA4_e2s354f2.webp&w=3840&q=75',
-          alt: item.name || '섬네일 이미지',
-        }}
-        chip
-        textContent={{
-          title: item.name || '제목 없음',
-          genre:
-            convertLocationToGenre({
-              location: item.location as LocationType,
-            }) || '장르 없음',
-          participantCount: collaboratorCount,
-          capacity: item.capacity || 0,
-        }}
-        endDate={item.registrationEnd}
-        isCardDataLoading={!storyId || isStoryLoading}
-        isCompletedStory={isJoined ? item.registrationEnd < nowDate : true}
-        isCanceled={false}
-        handleButtonClick={() => handleMySocial(item.id)}
-      />
-    </div>
-  );
-};
-
-export default MySocialListCardItemGeneral;
diff --git a/src/app/mypage/_components/my-social-list/MySocialListItemLiked.tsx b/src/app/mypage/_components/my-social-list/MySocialListItemLiked.tsx
deleted file mode 100644
index 0ab42ab2..00000000
--- a/src/app/mypage/_components/my-social-list/MySocialListItemLiked.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import { useRouter } from 'next/navigation';
-import ListCard from '@/components/common/Card/ListCard';
-import { MySocialListCardItemLikedProps } from '@/app/mypage/_components/my-social-list/type';
-import useCollaboratorList from '@/hooks/api/mypage/useCollaboratorList';
-import { Heart } from 'lucide-react';
-import useLikeStory from '@/hooks/api/library/useLikeStory';
-import { useAuth } from '@/providers/auth-provider/AuthProvider.client';
-import toast from '@/utils/toast';
-import { APP_ROUTES } from '@/constants/appRoutes';
-
-const MySocialListCardItemLiked = ({
-  item,
-}: MySocialListCardItemLikedProps) => {
-  const { isSignIn, myInfo } = useAuth();
-  const router = useRouter();
-  const { data: collaborator } = useCollaboratorList(Number(item.social_id));
-  const collaboratorCount = collaborator?.length || 0;
-  const { handleLikeStory, isLiked, isPending } = useLikeStory({
-    story_id: item.story_id as string,
-    user_id: myInfo?.id as number,
-  });
-  const handleClickLike = () => {
-    if (isPending) return;
-    handleLikeStory();
-    if (!isSignIn) {
-      toast({
-        message:
-          '로그인이 필요합니다. 로그인 페이지로 이동합니다.',
-        type: 'error',
-        duration: 5,
-      });
-      router.push('/signin');
-    }
-  };
-  return (
-    <div className="py-6">
-      <div className="flex items-center justify-between">
-        <ListCard
-          teamUserRole="MEMBER"
-          pageId={item.story_id}
-          image={{
-            src: item.cover_image_url,
-            alt: item.title,
-          }}
-          chip
-          textContent={{
-            title: item.title || '제목 없음',
-            genre: item.genre || '장르 없음',
-            participantCount: collaboratorCount,
-            capacity: item.capacity || null,
-          }}
-          endDate={''}
-          isCardDataLoading={false}
-          isCompletedStory={true}
-          isCanceled={false}
-          handleButtonClick={() =>
-            router.push(`${APP_ROUTES.libraryDetail}/${item.story_id}/?page=0`)
-          }
-        />
-        <button
-          type="button"
-          onClick={handleClickLike}
-          aria-label={`${isLiked}`}
-        >
-          <Heart
-            className="text-write-main h-6 w-6"
-            fill={!!isLiked ? 'currentColor' : 'none'}
-          />
-        </button>
-      </div>
-    </div>
-  );
-};
-
-export default MySocialListCardItemLiked;

From b110d29b21ff742c6f7d71d8a0f9b6a439d412c0 Mon Sep 17 00:00:00 2001
From: hoxey2react <hoxey2react@gmail.com>
Date: Wed, 2 Jul 2025 21:13:54 +0900
Subject: [PATCH 4/9] =?UTF-8?q?refactor:=20get=5Fmy=5Fsocial=5Flist=20?=
 =?UTF-8?q?=EA=B4=80=EB=A0=A8=20api=20=EC=B6=94=EA=B0=80=20=EB=B0=8F=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/mypage/api.ts                   | 199 +++++++++++++-----------
 src/api/story-collaborators/api.ts      |  17 +-
 src/hooks/api/mypage/useMySocialList.ts |  43 +++--
 3 files changed, 146 insertions(+), 113 deletions(-)

diff --git a/src/api/mypage/api.ts b/src/api/mypage/api.ts
index d36d915b..06bf73dd 100644
--- a/src/api/mypage/api.ts
+++ b/src/api/mypage/api.ts
@@ -1,59 +1,15 @@
-import { API_PATH } from '@/constants/apiPath';
-import {
-  LeaveJoinSocialRequest,
-  GetJoinedSocialListParams,
-  JoinedSocialResponse,
-} from './type';
-import instance from '@/api/instance';
-import { getFilterParams } from '@/utils/getFilterParams';
 import instanceBaaS from '@/api/instanceBaaS';
-
-export const getJoinedSocialList = async ({
-  limit = 12,
-  offset = 0,
-  ...restParams
-}: GetJoinedSocialListParams) => {
-  try {
-    const response = await instance.get<JoinedSocialResponse[]>(
-      `${API_PATH.SOCIAL}/joined?${getFilterParams({
-        limit,
-        offset,
-        ...restParams,
-      })}`
-    );
-    return response.data;
-  } catch (error) {
-    throw error;
-  }
-};
-
-export const getStoryBySocialId = async (
-  socialId: number
-): Promise<string | null> => {
-  const { data, error } = await instanceBaaS
-    .from('Stories')
-    .select('story_id')
-    .eq('social_id', socialId)
-    .maybeSingle();
-
-  if (error) throw new Error(error.message);
-  return data!.story_id;
-};
-
-export const getCollaboratorsByStoryId = async (storyId: string) => {
-  const { data, error } = await instanceBaaS
-    .from('story_collaborators')
-    .select('*')
-    .eq('story_id', storyId);
-
-  if (error) throw new Error(error.message);
-  return data;
-};
-
-export const deleteCollaboratorFromSocial = async (
-  userId: number,
-  storyId: string
-) => {
+import {
+  DeleteCollaboratorFromSocialParams,
+  GetCollaboratorCountMapParams,
+  GetMySocialListParams,
+} from '@/api/mypage/type';
+import { getStoryCollaborators } from '@/api/story-collaborators/api';
+
+export const deleteCollaboratorFromSocial = async ({
+  userId,
+  storyId,
+}: DeleteCollaboratorFromSocialParams) => {
   const { data, error } = await instanceBaaS
     .from('story_collaborators')
     .delete()
@@ -63,52 +19,115 @@ export const deleteCollaboratorFromSocial = async (
   return data;
 };
 
-export const getLikedStories = async (userId: number) => {
-  const { data, error } = await instanceBaaS
-    .from('story_likes')
-    .select('story_id')
-    .eq('user_id', userId);
-
-  if (error) throw new Error(error.message);
-  return data;
+export const getCollaboratorCountMap = async ({
+  storyIds,
+}: GetCollaboratorCountMapParams) => {
+  const collaboratorData = await getStoryCollaborators(storyIds);
+
+  return collaboratorData?.reduce(
+    (acc, cur) => {
+      acc[cur.story_id] = (acc[cur.story_id] || 0) + 1;
+      return acc;
+    },
+    {} as Record<string, number>
+  );
 };
 
-export const getStoriesByIds = async (storyIds: string[]) => {
-  if (storyIds.length === 0) return [];
+export const getMyLikedSocialList = async ({
+  userId,
+  offset,
+  limit,
+}: GetMySocialListParams) => {
+  if (!userId) return [];
+  const from = offset * limit;
+  const to = from + limit - 1;
 
   const { data, error } = await instanceBaaS
-    .from('Stories')
-    .select('*')
-    .in('story_id', storyIds)
-    .order('created_at', { ascending: false }); // 필요시 정렬
+    .from('story_likes')
+    .select(
+      `
+    story_id,
+    liked_at,
+    Stories (
+    capacity,
+    cover_image_url,
+    genre,
+    title
+    )
+    `
+    )
+    .eq('user_id', userId)
+    .range(from, to);
 
   if (error) throw new Error(error.message);
-  return data;
+
+  const storyIds = data.map((item) => item.story_id);
+  const collaboratorCountMap = await getCollaboratorCountMap({ storyIds });
+
+  return data.map((item) => {
+    const { Stories, ...rest } = item;
+    return {
+      ...rest,
+      ...Stories,
+      collaborator_count: collaboratorCountMap?.[item.story_id] ?? 0,
+    };
+  });
 };
 
-export const getLikedStoryList = async (userId: number) => {
-  const liked = await getLikedStories(userId);
+export const getMySocialList = async ({
+  userId,
+  offset,
+  limit,
+}: GetMySocialListParams) => {
+  if (!userId) return [];
+  const from = offset * limit;
+  const to = from + limit - 1;
+  const { data, error } = await instanceBaaS
+    .from('story_collaborators')
+    .select(
+      `
+    joined_at,
+    role,
+    story_id,
+    Stories (
+    capacity,
+    cover_image_url,
+    genre,
+    title
+    )
+    `
+    )
+    .eq('user_id', userId)
+    .range(from, to);
+  if (error) throw new Error(error.message);
 
-  const storyIds = liked.map((item) => item.story_id);
-  const stories = await getStoriesByIds(storyIds);
-  return stories;
+  const storyIds = data.map((item) => item.story_id);
+  const collaboratorCountMap = await getCollaboratorCountMap({ storyIds });
+
+  return data.map((item) => {
+    const { Stories, ...rest } = item;
+    return {
+      ...rest,
+      ...Stories,
+      collaborator_count: collaboratorCountMap?.[item.story_id] ?? 0,
+    };
+  });
 };
 
-export const leaveJoinSocial = async ({ id }: LeaveJoinSocialRequest) => {
-  try {
-    const response = await instance.delete(API_PATH.SOCIAL + `/${id}/leave`);
-    return response.data;
-  } catch (error) {
-    throw error;
-  }
+export const getMyJoinedSocialList = async ({
+  userId,
+  offset,
+  limit,
+}: GetMySocialListParams) => {
+  const mySocialList = await getMySocialList({ userId, offset, limit });
+  return mySocialList.filter((item) => item.role === 'MEMBER');
 };
 
-// TODO: 달램 api 모임장의 모임 삭제 기능 (필요 없을시 지워도됨)
-export const cancelJoinSocial = async ({ id }: LeaveJoinSocialRequest) => {
-  try {
-    const response = await instance.put(API_PATH.SOCIAL + `/${id}/cancel`);
-    return response.data;
-  } catch (error) {
-    throw error;
-  }
+export const getMyCreatedSocialList = async ({
+  userId,
+  offset,
+  limit,
+}: GetMySocialListParams) => {
+  const mySocialList = await getMySocialList({ userId, offset, limit });
+  return mySocialList.filter((item) => item.role === 'LEADER');
 };
diff --git a/src/api/story-collaborators/api.ts b/src/api/story-collaborators/api.ts
index cbe09364..427523c5 100644
--- a/src/api/story-collaborators/api.ts
+++ b/src/api/story-collaborators/api.ts
@@ -30,13 +30,18 @@ export const createCollaborator = async (params: CreateCollaboratorRequest) => {
   }
 };
 
-export const getStoryCollaborators = async (
-  storyId: string
+export const getStoryCollaborators = async <T extends string | string[]>(
+  storyId: T
 ) => {
-  const { data } = await instanceBaaS
-    .from(DB_PATH.STORY_COLLABORATORS)
-    .select('*')
-    .eq('story_id', storyId);
+  const query = instanceBaaS.from(DB_PATH.STORY_COLLABORATORS).select('*');
+
+  if (Array.isArray(storyId)) {
+    query.in('story_id', storyId);
+  } else {
+    query.eq('story_id', storyId);
+  }
+
+  const { data } = await query;
 
   return data;
 };
diff --git a/src/hooks/api/mypage/useMySocialList.ts b/src/hooks/api/mypage/useMySocialList.ts
index 5e69fc2f..8ec64529 100644
--- a/src/hooks/api/mypage/useMySocialList.ts
+++ b/src/hooks/api/mypage/useMySocialList.ts
@@ -1,32 +1,41 @@
-import { getJoinedSocialList, getLikedStoryList } from '@/api/mypage/api';
-import { getSocialList } from '@/api/social/api';
+import {
+  getMyCreatedSocialList,
+  getMyJoinedSocialList,
+  getMyLikedSocialList,
+} from '@/api/mypage/api';
 import { TabType } from '@/app/mypage/_components/my-social-list/type';
 import { useInfiniteQuery } from '@tanstack/react-query';
 
-const FETCH_LIMIT = 12;
+const FETCH_GET_ITEM_LIMIT = 12;
 
-export const useMySocialList = (activeTab: TabType, userId?: number) => {
+export const useMySocialList = (activeTab: TabType, userId: number) => {
   return useInfiniteQuery({
     queryKey: ['mySocialList', activeTab, userId],
     enabled: !!userId,
     queryFn: async ({ pageParam = 0 }) => {
-      const filter = {
-        limit: FETCH_LIMIT,
-        offset: pageParam,
-        ...(activeTab === 'created' && { createdBy: Number(userId) }),
-      };
-
       return activeTab === 'joined'
-        ? await getJoinedSocialList(filter)
+        ? await getMyJoinedSocialList({
+            userId,
+            offset: pageParam,
+            limit: FETCH_GET_ITEM_LIMIT,
+          })
         : activeTab === 'created'
-          ? await getSocialList(filter)
-          : await getLikedStoryList(Number(userId));
+          ? await getMyCreatedSocialList({
+              userId,
+              offset: pageParam,
+              limit: FETCH_GET_ITEM_LIMIT,
+            })
+          : await getMyLikedSocialList({
+              userId,
+              offset: pageParam,
+              limit: FETCH_GET_ITEM_LIMIT,
+            });
     },
 
-    getNextPageParam: (lastPage, allPages) =>
-      lastPage.length === FETCH_LIMIT
-        ? allPages.length * FETCH_LIMIT
-        : undefined,
+    getNextPageParam: (lastPage, allPages) => {
+      if (lastPage.length < FETCH_GET_ITEM_LIMIT) return undefined;
+      return allPages.length;
+    },
     initialPageParam: 0,
   });
 };

From 1b98b7aa496b2821670ebd9ab86d42a754839262 Mon Sep 17 00:00:00 2001
From: hoxey2react <hoxey2react@gmail.com>
Date: Wed, 2 Jul 2025 21:54:54 +0900
Subject: [PATCH 5/9] =?UTF-8?q?refactor:=20my=5Fsocial=5Flist=20=ED=95=98?=
 =?UTF-8?q?=EC=9C=84=20=EC=9A=94=EC=86=8C=EB=93=A4=20=EB=A6=AC=ED=8C=A9?=
 =?UTF-8?q?=ED=86=A0=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../my-social-list/MySocialList.tsx           | 13 +++---
 .../my-social-list/MySocialListCard.tsx       | 28 +++++--------
 .../my-social-list/MySocialListCardItem.tsx   | 40 ++++++++-----------
 3 files changed, 33 insertions(+), 48 deletions(-)

diff --git a/src/app/mypage/_components/my-social-list/MySocialList.tsx b/src/app/mypage/_components/my-social-list/MySocialList.tsx
index bbde5832..2efa2493 100644
--- a/src/app/mypage/_components/my-social-list/MySocialList.tsx
+++ b/src/app/mypage/_components/my-social-list/MySocialList.tsx
@@ -4,7 +4,7 @@ import Observer from '@/components/common/Observer/Observer';
 import { useEffect, useState } from 'react';
 import { useMySocialList } from '@/hooks/api/mypage/useMySocialList';
 import { useAuth } from '@/providers/auth-provider/AuthProvider.client';
-import { LikedStoryItem, SocialItem, TabType } from './type';
+import { LikedStoryResponse, MySocialResponse, TabType } from './type';
 import TabMenu from './TabMenu';
 import MySocialListCard from './MySocialListCard';
 
@@ -14,7 +14,7 @@ const MySocialList = () => {
   const userId = myInfo?.id;
 
   const { data, fetchNextPage, hasNextPage, isFetching, isLoading, refetch } =
-    useMySocialList(activeTab, userId);
+    useMySocialList(activeTab, userId as number);
 
   useEffect(() => {
     if (data) {
@@ -27,14 +27,13 @@ const MySocialList = () => {
   };
 
   const flattenedList = data?.pages.flat() || [];
-  const filteredList = flattenedList;
 
   return (
     <div className="mt-[30px] w-full border-t-2 border-gray-900 p-6">
       <TabMenu activeTab={activeTab} onTabChange={handleTabChange} />
 
       <div className="min-h-[50vh] w-full">
-        {!isLoading && filteredList.length === 0 && (
+        {!isLoading && flattenedList.length === 0 && (
           <p className="py-6 pt-[20vh] text-center text-gray-500">
             {activeTab === 'joined'
               ? '내가 참여한 모임이 아직 없어요'
@@ -44,12 +43,12 @@ const MySocialList = () => {
           </p>
         )}
 
-        {!isLoading && filteredList.length > 0 && (
+        {!isLoading && flattenedList.length > 0 && (
           <MySocialListCard
             list={
               activeTab === 'liked'
-                ? (filteredList as LikedStoryItem[])
-                : (filteredList as SocialItem[])
+                ? (flattenedList as LikedStoryResponse[])
+                : (flattenedList as MySocialResponse[])
             }
             activeTab={activeTab}
             refetch={refetch}
diff --git a/src/app/mypage/_components/my-social-list/MySocialListCard.tsx b/src/app/mypage/_components/my-social-list/MySocialListCard.tsx
index 542eb70c..004820f9 100644
--- a/src/app/mypage/_components/my-social-list/MySocialListCard.tsx
+++ b/src/app/mypage/_components/my-social-list/MySocialListCard.tsx
@@ -1,6 +1,5 @@
-import MySocialListCardItemLiked from '@/app/mypage/_components/my-social-list/MySocialListItemLiked';
-import MySocialListCardItemGeneral from './MySocialListCardItemGeneral';
-import { LikedStoryItem, MySocialListCardProps, SocialItem } from './type';
+import { MySocialListCardProps } from './type';
+import MySocialListCardItem from '@/app/mypage/_components/my-social-list/MySocialListCardItem';
 
 const MySocialListCard = ({
   list,
@@ -9,21 +8,14 @@ const MySocialListCard = ({
 }: MySocialListCardProps) => {
   return (
     <>
-      {list.map((item, index) =>
-        activeTab === 'liked' ? (
-          <MySocialListCardItemLiked
-            key={`liked-${(item as LikedStoryItem).story_id}`}
-            item={item as LikedStoryItem}
-          />
-        ) : (
-          <MySocialListCardItemGeneral
-            key={`social-${(item as SocialItem).id ?? index}`}
-            item={item as SocialItem}
-            activeTab={activeTab}
-            refetch={refetch}
-          />
-        )
-      )}
+      {list.map((item, index) => (
+        <MySocialListCardItem
+          key={`${item.story_id}-${index}`}
+          item={item}
+          activeTab={activeTab}
+          refetch={refetch}
+        />
+      ))}
     </>
   );
 };
diff --git a/src/app/mypage/_components/my-social-list/MySocialListCardItem.tsx b/src/app/mypage/_components/my-social-list/MySocialListCardItem.tsx
index da371656..1c3eba47 100644
--- a/src/app/mypage/_components/my-social-list/MySocialListCardItem.tsx
+++ b/src/app/mypage/_components/my-social-list/MySocialListCardItem.tsx
@@ -27,6 +27,11 @@ const MySocialListCardItem = ({
   const isJoinedTab = activeTab === 'joined';
   const isLikedTab = activeTab === 'liked';
 
+  const messages = {
+    confirm: getSocialActionMessage('모임').confirm('exit'),
+    success: getSocialActionMessage('모임').success('exit'),
+  };
+
   const { handleLikeStory, isLiked, isPending } = useLikeStory({
     story_id: item.story_id,
     user_id: myInfo?.id as number,
@@ -37,28 +42,17 @@ const MySocialListCardItem = ({
     handleLikeStory();
   };
 
-  const handleMySocial = async (storyId: string) => {
-    try {
-      const messages = {
-        confirm: getSocialActionMessage('모임').confirm('exit'),
-        success: getSocialActionMessage('모임').success('exit'),
-      };
+  const handleExitSocial = async (storyId: string) => {
+    const confirmed = window.confirm(messages.confirm);
+    if (!confirmed || !userId) return;
+    await deleteCollaboratorFromSocial({ userId, storyId });
+    toast.success(messages.success);
+    refetch();
+  };
 
-      if (isJoinedTab) {
-        const confirmed = window.confirm(messages.confirm);
-        if (!confirmed) return;
-        if (userId) {
-          await deleteCollaboratorFromSocial(userId, storyId);
-          toast.success(messages.success);
-          refetch();
-        }
-      } else {
-        router.push(`${APP_ROUTES.libraryDetail}/${storyId}/?page=0`);
-      }
-    } catch (error) {
-      console.error(error);
-      alert('모임 취소에 실패했습니다.');
-    }
+  const handleSocialAction = (storyId: string) => {
+    if (isJoinedTab) handleExitSocial(storyId);
+    else router.push(`${APP_ROUTES.libraryDetail}/${storyId}/?page=0`);
   };
 
   return (
@@ -88,13 +82,13 @@ const MySocialListCardItem = ({
           (item as MySocialResponse).role === 'LEADER' || isLikedTab
         }
         isCanceled={false}
-        handleButtonClick={() => handleMySocial(item.story_id)}
+        handleButtonClick={() => handleSocialAction(item.story_id)}
       />
       {isLikedTab && (
         <button
           type="button"
           onClick={handleClickLike}
-          aria-label={`${isLiked}`}
+          aria-label={`${isLiked ? '좋아요' : '좋아요 취소'}`}
         >
           <Heart
             className="text-write-main h-6 w-6"

From 54a1c0e14aff47962c611371cda6c0e7a44d4cba Mon Sep 17 00:00:00 2001
From: hoxey2react <hoxey2react@gmail.com>
Date: Wed, 2 Jul 2025 21:56:10 +0900
Subject: [PATCH 6/9] =?UTF-8?q?refactor:=20type=20interface=EB=A1=9C=20?=
 =?UTF-8?q?=ED=86=B5=EC=9D=BC=20=EB=B0=8F=20=EC=9E=AC=EC=A0=95=EC=9D=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/mypage/type.ts                        | 35 ++++-----------
 .../mypage/_components/my-social-list/type.ts | 44 ++++++++-----------
 2 files changed, 28 insertions(+), 51 deletions(-)

diff --git a/src/api/mypage/type.ts b/src/api/mypage/type.ts
index 7d041893..5dcf9da0 100644
--- a/src/api/mypage/type.ts
+++ b/src/api/mypage/type.ts
@@ -1,31 +1,14 @@
-import { LocationType, SocialType } from '@/api/social/type';
-
-export interface GetJoinedSocialListParams {
-  completed?: boolean;
-  reviewed?: boolean;
-  limit?: number;
-  offset?: number;
-  sortBy?: 'dateTime' | 'registrationEnd' | 'joinedAt';
-  sortOrder?: 'asc' | 'desc';
+export interface DeleteCollaboratorFromSocialParams {
+  userId: number;
+  storyId: string;
 }
 
-export interface JoinedSocialResponse {
-  id: number;
-  type: SocialType | 'DALLAEMFIT';
-  name: string;
-  dateTime: string;
-  registrationEnd: string;
-  location: LocationType;
-  participantCount: number;
-  capacity: number;
-  image: string;
-  createdBy: number;
-  canceledAt: string | null;
-  joinedAt: string;
-  isCompleted: boolean;
-  isReviewed: boolean;
+export interface GetCollaboratorCountMapParams {
+  storyIds: string[];
 }
 
-export interface LeaveJoinSocialRequest {
-  id: number;
+export interface GetMySocialListParams {
+  userId: number;
+  offset: number;
+  limit: number;
 }
diff --git a/src/app/mypage/_components/my-social-list/type.ts b/src/app/mypage/_components/my-social-list/type.ts
index 374853c2..3aac28c8 100644
--- a/src/app/mypage/_components/my-social-list/type.ts
+++ b/src/app/mypage/_components/my-social-list/type.ts
@@ -1,43 +1,37 @@
-export const TAB_TYPES = ['joined', 'created', 'liked'] as const;
+import { GenreType } from '@/api/social/type';
 
+export const TAB_TYPES = ['joined', 'created', 'liked'] as const;
 export type TabType = (typeof TAB_TYPES)[number];
-export interface TabMenuProps {
-  activeTab: TabType;
-  onTabChange: (tab: TabType) => void;
-}
 
-export interface SocialItem {
-  id: number;
-  name: string;
-  image: string;
-  location: string;
-  registrationEnd: string;
+export interface LikedStoryResponse {
   capacity: number;
-  canceledAt: string | null;
-}
-
-export interface LikedStoryItem {
+  collaborator_count: number;
+  cover_image_url: string;
+  genre: string;
+  liked_at: string;
   story_id: string;
-  social_id: number;
   title: string;
-  genre: string;
-  cover_image_url: string;
-  approved_count: number;
-  capacity?: number;
 }
 
-export interface MySocialListCardItemLikedProps {
-  item: LikedStoryItem;
+export interface MySocialResponse {
+  capacity: number;
+  cover_image_url: string;
+  genre: GenreType;
+  title: string;
+  collaborator_count: number;
+  joined_at: string;
+  role: 'LEADER' | 'MEMBER' | 'GUEST';
+  story_id: string;
 }
 
-export interface MySocialListItemProps {
-  item: SocialItem;
+export interface MySocialListCardItemProps {
+  item: MySocialResponse | LikedStoryResponse;
   activeTab: TabType;
   refetch: () => void;
 }
 
 export interface MySocialListCardProps {
-  list: LikedStoryItem[] | SocialItem[];
+  list: (LikedStoryResponse | MySocialResponse)[];
   activeTab: TabType;
   refetch: () => void;
 }

From ff69154c5306e91251095457d67cadee3c52e11b Mon Sep 17 00:00:00 2001
From: hoxey2react <hoxey2react@gmail.com>
Date: Wed, 2 Jul 2025 23:55:35 +0900
Subject: [PATCH 7/9] =?UTF-8?q?fix:=20tab=5Fmenu=5Fprops=20=EC=A0=9C?=
 =?UTF-8?q?=EA=B1=B0=EB=90=98=EC=84=9C=20=EB=8B=A4=EC=8B=9C=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/mypage/_components/my-social-list/type.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/app/mypage/_components/my-social-list/type.ts b/src/app/mypage/_components/my-social-list/type.ts
index 3aac28c8..ff628dbe 100644
--- a/src/app/mypage/_components/my-social-list/type.ts
+++ b/src/app/mypage/_components/my-social-list/type.ts
@@ -3,6 +3,11 @@ import { GenreType } from '@/api/social/type';
 export const TAB_TYPES = ['joined', 'created', 'liked'] as const;
 export type TabType = (typeof TAB_TYPES)[number];
 
+export interface TabMenuProps {
+  activeTab: TabType;
+  onTabChange: (tab: TabType) => void;
+}
+
 export interface LikedStoryResponse {
   capacity: number;
   collaborator_count: number;

From ac26d4affdacbfa3740ae5b2648b8042628fc8f8 Mon Sep 17 00:00:00 2001
From: hoxey2react <hoxey2react@gmail.com>
Date: Thu, 3 Jul 2025 00:07:36 +0900
Subject: [PATCH 8/9] =?UTF-8?q?refactor:=20=EC=A0=84=EC=97=90=20=EC=82=AC?=
 =?UTF-8?q?=EC=9A=A9=ED=95=98=EB=8D=98=20=EC=BD=94=EB=93=9C=20=EC=A0=9C?=
 =?UTF-8?q?=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/api/mypage/useCollaboratorList.ts   | 22 -------------------
 .../api/supabase/useStoryIdBySocialId.ts      | 10 ---------
 2 files changed, 32 deletions(-)
 delete mode 100644 src/hooks/api/mypage/useCollaboratorList.ts
 delete mode 100644 src/hooks/api/supabase/useStoryIdBySocialId.ts

diff --git a/src/hooks/api/mypage/useCollaboratorList.ts b/src/hooks/api/mypage/useCollaboratorList.ts
deleted file mode 100644
index 104a39b2..00000000
--- a/src/hooks/api/mypage/useCollaboratorList.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { useQuery } from '@tanstack/react-query';
-import {
-  getStoryBySocialId,
-  getCollaboratorsByStoryId,
-} from '@/api/mypage/api';
-import { QUERY_KEY } from '@/constants/queryKey';
-
-const useCollaboratorList = (socialId: number) => {
-  return useQuery({
-    queryKey: [QUERY_KEY.COLLABORATOR_LIST, socialId],
-    queryFn: async () => {
-      const storyId = await getStoryBySocialId(socialId);
-      if (!storyId) return [];
-
-      const collaborators = await getCollaboratorsByStoryId(storyId);
-
-      return collaborators;
-    },
-  });
-};
-
-export default useCollaboratorList;
diff --git a/src/hooks/api/supabase/useStoryIdBySocialId.ts b/src/hooks/api/supabase/useStoryIdBySocialId.ts
deleted file mode 100644
index 70ec518c..00000000
--- a/src/hooks/api/supabase/useStoryIdBySocialId.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { useQuery } from '@tanstack/react-query';
-import { getStoryBySocialId } from '@/api/mypage/api';
-
-export const useStoryIdBySocialId = (socialId: number) => {
-  return useQuery<string | null>({
-    queryKey: ['storyId', socialId],
-    queryFn: () => getStoryBySocialId(socialId),
-    enabled: !!socialId,
-  });
-};

From d8c79f33c0805e45e8451022e6cf436bb6d99cbc Mon Sep 17 00:00:00 2001
From: hoxey2react <hoxey2react@gmail.com>
Date: Fri, 4 Jul 2025 18:22:47 +0900
Subject: [PATCH 9/9] =?UTF-8?q?refactor:=20supabase=20api=20=ED=98=B8?=
 =?UTF-8?q?=EC=B6=9C=20=EB=B0=A9=EC=8B=9D=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/mypage/api.ts                         | 133 ------------------
 src/api/mypage/type.ts                        |  14 --
 .../my-social-list/MySocialListCardItem.tsx   |  16 ++-
 src/constants/supabase.ts                     |   7 +
 src/hooks/api/mypage/useMySocialList.ts       |  43 +++---
 .../repositories/story_collaborators.ts       |  84 +++++++++++
 .../repositories/story_collaborators.type.ts  |   7 +
 src/lib/supabase/repositories/story_likes.ts  |  50 +++++++
 .../supabase/repositories/story_likes.type.ts |   7 +
 src/utils/getCollaboratorCountMap.ts          |  13 ++
 10 files changed, 197 insertions(+), 177 deletions(-)
 delete mode 100644 src/api/mypage/api.ts
 delete mode 100644 src/api/mypage/type.ts
 create mode 100644 src/lib/supabase/repositories/story_collaborators.type.ts
 create mode 100644 src/lib/supabase/repositories/story_likes.ts
 create mode 100644 src/lib/supabase/repositories/story_likes.type.ts
 create mode 100644 src/utils/getCollaboratorCountMap.ts

diff --git a/src/api/mypage/api.ts b/src/api/mypage/api.ts
deleted file mode 100644
index 06bf73dd..00000000
--- a/src/api/mypage/api.ts
+++ /dev/null
@@ -1,133 +0,0 @@
-import instanceBaaS from '@/api/instanceBaaS';
-import {
-  DeleteCollaboratorFromSocialParams,
-  GetCollaboratorCountMapParams,
-  GetMySocialListParams,
-} from '@/api/mypage/type';
-import { getStoryCollaborators } from '@/api/story-collaborators/api';
-
-export const deleteCollaboratorFromSocial = async ({
-  userId,
-  storyId,
-}: DeleteCollaboratorFromSocialParams) => {
-  const { data, error } = await instanceBaaS
-    .from('story_collaborators')
-    .delete()
-    .match({ user_id: userId, story_id: storyId });
-
-  if (error) throw new Error(error.message);
-  return data;
-};
-
-export const getCollaboratorCountMap = async ({
-  storyIds,
-}: GetCollaboratorCountMapParams) => {
-  const collaboratorData = await getStoryCollaborators(storyIds);
-
-  return collaboratorData?.reduce(
-    (acc, cur) => {
-      acc[cur.story_id] = (acc[cur.story_id] || 0) + 1;
-      return acc;
-    },
-    {} as Record<string, number>
-  );
-};
-
-export const getMyLikedSocialList = async ({
-  userId,
-  offset,
-  limit,
-}: GetMySocialListParams) => {
-  if (!userId) return [];
-  const from = offset * limit;
-  const to = from + limit - 1;
-
-  const { data, error } = await instanceBaaS
-    .from('story_likes')
-    .select(
-      `
-    story_id,
-    liked_at,
-    Stories (
-    capacity,
-    cover_image_url,
-    genre,
-    title
-    )
-    `
-    )
-    .eq('user_id', userId)
-    .range(from, to);
-
-  if (error) throw new Error(error.message);
-
-  const storyIds = data.map((item) => item.story_id);
-  const collaboratorCountMap = await getCollaboratorCountMap({ storyIds });
-
-  return data.map((item) => {
-    const { Stories, ...rest } = item;
-    return {
-      ...rest,
-      ...Stories,
-      collaborator_count: collaboratorCountMap?.[item.story_id] ?? 0,
-    };
-  });
-};
-
-export const getMySocialList = async ({
-  userId,
-  offset,
-  limit,
-}: GetMySocialListParams) => {
-  if (!userId) return [];
-  const from = offset * limit;
-  const to = from + limit - 1;
-  const { data, error } = await instanceBaaS
-    .from('story_collaborators')
-    .select(
-      `
-    joined_at,
-    role,
-    story_id,
-    Stories (
-    capacity,
-    cover_image_url,
-    genre,
-    title
-    )
-    `
-    )
-    .eq('user_id', userId)
-    .range(from, to);
-  if (error) throw new Error(error.message);
-
-  const storyIds = data.map((item) => item.story_id);
-  const collaboratorCountMap = await getCollaboratorCountMap({ storyIds });
-
-  return data.map((item) => {
-    const { Stories, ...rest } = item;
-    return {
-      ...rest,
-      ...Stories,
-      collaborator_count: collaboratorCountMap?.[item.story_id] ?? 0,
-    };
-  });
-};
-
-export const getMyJoinedSocialList = async ({
-  userId,
-  offset,
-  limit,
-}: GetMySocialListParams) => {
-  const mySocialList = await getMySocialList({ userId, offset, limit });
-  return mySocialList.filter((item) => item.role === 'MEMBER');
-};
-
-export const getMyCreatedSocialList = async ({
-  userId,
-  offset,
-  limit,
-}: GetMySocialListParams) => {
-  const mySocialList = await getMySocialList({ userId, offset, limit });
-  return mySocialList.filter((item) => item.role === 'LEADER');
-};
diff --git a/src/api/mypage/type.ts b/src/api/mypage/type.ts
deleted file mode 100644
index 5dcf9da0..00000000
--- a/src/api/mypage/type.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-export interface DeleteCollaboratorFromSocialParams {
-  userId: number;
-  storyId: string;
-}
-
-export interface GetCollaboratorCountMapParams {
-  storyIds: string[];
-}
-
-export interface GetMySocialListParams {
-  userId: number;
-  offset: number;
-  limit: number;
-}
diff --git a/src/app/mypage/_components/my-social-list/MySocialListCardItem.tsx b/src/app/mypage/_components/my-social-list/MySocialListCardItem.tsx
index 1c3eba47..917d2229 100644
--- a/src/app/mypage/_components/my-social-list/MySocialListCardItem.tsx
+++ b/src/app/mypage/_components/my-social-list/MySocialListCardItem.tsx
@@ -1,6 +1,5 @@
 'use client';
 
-import { deleteCollaboratorFromSocial } from '@/api/mypage/api';
 import {
   LikedStoryResponse,
   MySocialListCardItemProps,
@@ -14,6 +13,7 @@ import { APP_ROUTES } from '@/constants/appRoutes';
 import { Heart } from 'lucide-react';
 import useLikeStory from '@/hooks/api/library/useLikeStory';
 import toast from '@/utils/toast';
+import { deleteCollaboratorFromSocial } from '@/lib/supabase/repositories/story_collaborators';
 
 const MySocialListCardItem = ({
   item,
@@ -22,8 +22,8 @@ const MySocialListCardItem = ({
 }: MySocialListCardItemProps) => {
   const router = useRouter();
   const { myInfo } = useAuth();
+  const userId = myInfo?.id ?? 0;
 
-  const userId = myInfo?.id;
   const isJoinedTab = activeTab === 'joined';
   const isLikedTab = activeTab === 'liked';
 
@@ -34,7 +34,7 @@ const MySocialListCardItem = ({
 
   const { handleLikeStory, isLiked, isPending } = useLikeStory({
     story_id: item.story_id,
-    user_id: myInfo?.id as number,
+    user_id: userId,
   });
 
   const handleClickLike = () => {
@@ -42,10 +42,16 @@ const MySocialListCardItem = ({
     handleLikeStory();
   };
 
+  if (!myInfo || !userId) {
+    toast.error('사용자 정보를 확인할 수 없습니다.');
+    router.push(APP_ROUTES.signin);
+    return null;
+  }
+
   const handleExitSocial = async (storyId: string) => {
     const confirmed = window.confirm(messages.confirm);
-    if (!confirmed || !userId) return;
-    await deleteCollaboratorFromSocial({ userId, storyId });
+    if (!confirmed) return;
+    await deleteCollaboratorFromSocial(userId, storyId);
     toast.success(messages.success);
     refetch();
   };
diff --git a/src/constants/supabase.ts b/src/constants/supabase.ts
index e5d41a21..909c8c48 100644
--- a/src/constants/supabase.ts
+++ b/src/constants/supabase.ts
@@ -14,6 +14,7 @@ export const TABLE_NAMES = {
   STORY_COLLABORATORS: 'story_collaborators',
   CONTENT_APPROVAL: 'ContentApproval',
   CONTENTS_DELETED_LOG: 'contents_deleted_log',
+  STORY_LIKES: 'story_likes',
 } as const;
 
 // ===== 컬럼명 상수 =====
@@ -61,4 +62,10 @@ export const COLUMN_NAMES = {
     CREATED_AT: 'created_at',
     DELETED_AT: 'deleted_at',
   },
+  STORY_LIKES: {
+    USER_ID: 'user_id',
+    STORY_ID: 'story_id',
+    LIKED_AT: 'liked_at',
+    ID: 'id',
+  },
 } as const;
diff --git a/src/hooks/api/mypage/useMySocialList.ts b/src/hooks/api/mypage/useMySocialList.ts
index 8ec64529..c240860d 100644
--- a/src/hooks/api/mypage/useMySocialList.ts
+++ b/src/hooks/api/mypage/useMySocialList.ts
@@ -1,41 +1,34 @@
+import { TabType } from '@/app/mypage/_components/my-social-list/type';
 import {
   getMyCreatedSocialList,
   getMyJoinedSocialList,
-  getMyLikedSocialList,
-} from '@/api/mypage/api';
-import { TabType } from '@/app/mypage/_components/my-social-list/type';
+} from '@/lib/supabase/repositories/story_collaborators';
+import { getMyLikedSocialList } from '@/lib/supabase/repositories/story_likes';
 import { useInfiniteQuery } from '@tanstack/react-query';
 
 const FETCH_GET_ITEM_LIMIT = 12;
 
-export const useMySocialList = (activeTab: TabType, userId: number) => {
+export const useMySocialList = (activeTab: TabType, userId?: number) => {
   return useInfiniteQuery({
     queryKey: ['mySocialList', activeTab, userId],
     enabled: !!userId,
     queryFn: async ({ pageParam = 0 }) => {
-      return activeTab === 'joined'
-        ? await getMyJoinedSocialList({
-            userId,
-            offset: pageParam,
-            limit: FETCH_GET_ITEM_LIMIT,
-          })
-        : activeTab === 'created'
-          ? await getMyCreatedSocialList({
-              userId,
-              offset: pageParam,
-              limit: FETCH_GET_ITEM_LIMIT,
-            })
-          : await getMyLikedSocialList({
-              userId,
-              offset: pageParam,
-              limit: FETCH_GET_ITEM_LIMIT,
-            });
-    },
+      if (!userId) return [];
+
+      const params = { userId, offset: pageParam, limit: FETCH_GET_ITEM_LIMIT };
 
-    getNextPageParam: (lastPage, allPages) => {
-      if (lastPage.length < FETCH_GET_ITEM_LIMIT) return undefined;
-      return allPages.length;
+      switch (activeTab) {
+        case 'joined':
+          return await getMyJoinedSocialList(params);
+        case 'created':
+          return await getMyCreatedSocialList(params);
+        case 'liked':
+        default:
+          return await getMyLikedSocialList(params);
+      }
     },
+    getNextPageParam: (lastPage, allPages) =>
+      lastPage.length < FETCH_GET_ITEM_LIMIT ? undefined : allPages.length,
     initialPageParam: 0,
   });
 };
diff --git a/src/lib/supabase/repositories/story_collaborators.ts b/src/lib/supabase/repositories/story_collaborators.ts
index a8e496db..cfa52c52 100644
--- a/src/lib/supabase/repositories/story_collaborators.ts
+++ b/src/lib/supabase/repositories/story_collaborators.ts
@@ -2,6 +2,8 @@ import instanceBaaS from '@/api/instanceBaaS';
 import throwOnSupabaseError from '@/lib/supabase/throwOnSupabaseError';
 import { StoryCollaborators, UserRole } from '@/lib/supabase/custom-types';
 import { TABLE_NAMES, COLUMN_NAMES } from '@/constants/supabase';
+import { GetMySocialListParams } from '@/lib/supabase/repositories/story_collaborators.type';
+import { getCollaboratorCountMap } from '@/utils/getCollaboratorCountMap';
 
 /**
  * 사용자 역할 조회
@@ -39,3 +41,85 @@ export const getUserRole = async (
   });
   return data;
 };
+
+/**
+ * 유저가 모임에서 탈퇴
+ */
+export const deleteCollaboratorFromSocial = async (
+  userId: StoryCollaborators['user_id'],
+  storyId: StoryCollaborators['story_id']
+) => {
+  const data = await throwOnSupabaseError(async () => {
+    return await instanceBaaS
+      .from('story_collaborators')
+      .delete()
+      .match({ user_id: userId, story_id: storyId });
+  });
+  return data;
+};
+
+/**
+ * 유저가 가입한 모임 조회(전체)
+ */
+export const getMySocialList = async ({
+  userId,
+  offset,
+  limit,
+}: GetMySocialListParams) => {
+  if (!userId) return [];
+
+  const from = offset * limit;
+  const to = from + limit - 1;
+
+  const data = await throwOnSupabaseError(async () => {
+    return await instanceBaaS
+      .from('story_collaborators')
+      .select(
+        `
+        joined_at,
+        role,
+        story_id,
+        Stories (
+          capacity,
+          cover_image_url,
+          genre,
+          title
+        )
+        `
+      )
+      .eq('user_id', userId)
+      .range(from, to);
+  });
+
+  const storyIds = data?.map((item) => item.story_id) ?? [];
+  const collaboratorCountMap = await getCollaboratorCountMap(storyIds);
+
+  return (
+    data?.map((item) => {
+      const { Stories, ...rest } = item;
+      return {
+        ...rest,
+        ...Stories,
+        collaborator_count: collaboratorCountMap?.[item.story_id] ?? 0,
+      };
+    }) ?? []
+  );
+};
+
+export const getMyJoinedSocialList = async ({
+  userId,
+  offset,
+  limit,
+}: GetMySocialListParams) => {
+  const mySocialList = await getMySocialList({ userId, offset, limit });
+  return mySocialList.filter((item) => item.role === 'MEMBER');
+};
+
+export const getMyCreatedSocialList = async ({
+  userId,
+  offset,
+  limit,
+}: GetMySocialListParams) => {
+  const mySocialList = await getMySocialList({ userId, offset, limit });
+  return mySocialList.filter((item) => item.role === 'LEADER');
+};
diff --git a/src/lib/supabase/repositories/story_collaborators.type.ts b/src/lib/supabase/repositories/story_collaborators.type.ts
new file mode 100644
index 00000000..4358f09c
--- /dev/null
+++ b/src/lib/supabase/repositories/story_collaborators.type.ts
@@ -0,0 +1,7 @@
+import { StoryCollaborators } from '@/lib/supabase/custom-types';
+
+export interface GetMySocialListParams {
+  userId: StoryCollaborators['user_id'];
+  offset: number;
+  limit: number;
+}
diff --git a/src/lib/supabase/repositories/story_likes.ts b/src/lib/supabase/repositories/story_likes.ts
new file mode 100644
index 00000000..be7e0b14
--- /dev/null
+++ b/src/lib/supabase/repositories/story_likes.ts
@@ -0,0 +1,50 @@
+import instanceBaaS from '@/api/instanceBaaS';
+import { COLUMN_NAMES, TABLE_NAMES } from '@/constants/supabase';
+import { getMyLikedSocialListParams } from '@/lib/supabase/repositories/story_likes.type';
+import throwOnSupabaseError from '@/lib/supabase/throwOnSupabaseError';
+import { getCollaboratorCountMap } from '@/utils/getCollaboratorCountMap';
+
+/**
+ * 유저의 좋아요한 모임 목록 조회
+ */
+export const getMyLikedSocialList = async ({
+  userId,
+  offset,
+  limit,
+}: getMyLikedSocialListParams) => {
+  const from = offset * limit;
+  const to = from + limit - 1;
+
+  const data = await throwOnSupabaseError(async () => {
+    return await instanceBaaS
+      .from(TABLE_NAMES.STORY_LIKES)
+      .select(
+        `
+        story_id,
+        liked_at,
+        Stories (
+        capacity,
+        cover_image_url,
+        genre,
+        title
+        )
+        `
+      )
+      .eq(COLUMN_NAMES.STORY_LIKES.USER_ID, userId)
+      .range(from, to);
+  });
+
+  const storyIds = data?.map((item) => item.story_id) ?? [];
+  const collaboratorCountMap = await getCollaboratorCountMap(storyIds);
+
+  return (
+    data?.map((item) => {
+      const { Stories, ...rest } = item;
+      return {
+        ...rest,
+        ...Stories,
+        collaborator_count: collaboratorCountMap?.[item.story_id] ?? 0,
+      };
+    }) ?? []
+  );
+};
diff --git a/src/lib/supabase/repositories/story_likes.type.ts b/src/lib/supabase/repositories/story_likes.type.ts
new file mode 100644
index 00000000..72883daa
--- /dev/null
+++ b/src/lib/supabase/repositories/story_likes.type.ts
@@ -0,0 +1,7 @@
+import { StoryLikes } from '@/lib/supabase/custom-types';
+
+export interface getMyLikedSocialListParams {
+  userId: StoryLikes['user_id'];
+  offset: number;
+  limit: number;
+}
diff --git a/src/utils/getCollaboratorCountMap.ts b/src/utils/getCollaboratorCountMap.ts
new file mode 100644
index 00000000..8728ca16
--- /dev/null
+++ b/src/utils/getCollaboratorCountMap.ts
@@ -0,0 +1,13 @@
+import { getStoryCollaborators } from '@/api/story-collaborators/api';
+
+export const getCollaboratorCountMap = async (storyIds: string[]) => {
+  const collaboratorData = await getStoryCollaborators(storyIds);
+
+  return collaboratorData?.reduce(
+    (acc, cur) => {
+      acc[cur.story_id] = (acc[cur.story_id] || 0) + 1;
+      return acc;
+    },
+    {} as Record<string, number>
+  );
+};