Refactor/#293: 마이페이지 나의 모임 api 부분 supabase로 리팩토링

src/api/story-collaborators/api.ts

@@ -30,11 +30,18 @@ export const createCollaborator = async (params: CreateCollaboratorRequest) => {
   }
 };
 
-export const getStoryCollaborators = async (storyId: string) => {
-  const { data } = await instanceBaaS
-    .from(DB_PATH.STORY_COLLABORATORS)
-    .select('*')
-    .eq('story_id', storyId);
+export const getStoryCollaborators = async <T extends string | string[]>(
+  storyId: T
+) => {
+  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;
 };

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 {

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';
 

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 (

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}

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}
+        />
+      ))}
     </>
   );
 };