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

[hoxey2Front]

변경 사항

마이페이지 내 나의 모임 부분에서 기존 달램 API 사용하던 부분을 supabase로 변경하면서 supabase의 Join 기능이 있는 걸 알게 되었고, 이를 적용해 getMySocialList , getMyLikedSocialList api를 중점으로 리팩토링 하였습니다.

• 내가 참여한, 내가 만든 모임 부분은 role만 바뀌는 부분이 있어 getMySocialList 에서 role로 filter 하는 부분을 추가하여 getMyJoinedSocialList, getMyCreatedSocialList로 분리
• 내가 참여한, 내가 만든 모임은 joined_at으로 날짜를 표시, 좋아요한 모임은 liked_at의 날짜를 표시하여 ListCard에 endDateTitle 속성을 추가하여 참여한 날짜, 좋아요한 날짜로 구분
• 기존에 'MySocialListCardItemGeneral' 과 'MySocialListCardItemLiked'로 분리되있던 부분을 'MySocialListCardItem'으로 통합하고 activeTab으로 조건부 처리
• 전체 탭에 useInfinteQuery로 무한 스크롤 적용
• cover_image 없는 경우 no image 처리 다시 적용 (전에 적용했었는데 없어져서;;)
• 기존 getStoryCollaborators가 단일 storyId만 받아서 처리할 수 있어, 여러 storyId를 받을 수도 있게 수정

// getStoryCollaborators 변경전

export const getStoryCollaborators = async (storyId: string) => {
  const { data } = await instanceBaaS
    .from(DB_PATH.STORY_COLLABORATORS)
    .select('*')
    .eq('story_id', storyId);

  return data;
};

// getStoryCollaborators 변경후

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

구현결과(사진첨부 선택)

[내가 참여한 모임]

[내가 만든 모임]

[좋아요한 모임]

[netlify]

✅ Deploy Preview for we-write ready!

Name	Link
🔨 Latest commit	d8c79f3
🔍 Latest deploy log	https://app.netlify.com/projects/we-write/deploys/68679daa5b6dd800085e9411
😎 Deploy Preview	https://deploy-preview-188--we-write.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[juyesu]

supabase 타입과 함수 요청 방식이 리팩토링되어서 지난번에 말씀드린 것처럼 lib/supabase/내에서 요청 함수를 선언하고, 타입을 가져오시는 것이 좋을 것 같습니다!
새롭게 바뀐 내용 중에 이해가 안되는 부분이 있으시다면 편하게 질문해주세요!

// 변경된 supabase 요청 함수 구조
// lib/supabase/repositories/content_approval.ts

export const getContentApproveUser = async (
  contentId: Contents['content_id']
) => {
  const data = await throwOnSupabaseError(async () => {
    return await instanceBaaS
      .from(TABLE_NAMES.CONTENT_APPROVAL)
      .select('*')
      .eq(COLUMN_NAMES.CONTENT_APPROVAL.CONTENT_ID, contentId);
  });
  return data;
};

(현재 lib/supabase/repositories/에는 테이블별로 파일이 구분되어 있는데 여러 테이블에서 동시에 요청을 하는 경우 별도의 파일을 생성하신 다음에 그 내부에 함수를 선언해주시면 될 것 같습니다.)

[juyesu]

'내가 참여한 모임' 탭에서는 '모임 탈퇴하기'버튼만 보여지고,
'내가 만든 모임'과 '좋아요한 모임'에서는 '스토리 보러가기' 버튼만 출력되도록 의도하신 것이
맞을까요?

[hoxey2Front]

'내가 참여한 모임' 탭에서는 '모임 탈퇴하기'버튼만 보여지고, '내가 만든 모임'과 '좋아요한 모임'에서는 '스토리 보러가기' 버튼만 출력되도록 의도하신 것이 맞을까요?

네 맞습니다. 좋아요 목록이 조금 애매한 부분이 있더라고요;
다른 탭은 모임에 가입되있는게 확실한데, 좋아요 탭은 모임에 가입을 했을수도 있고 안했을수도 있어서 저도 이부분을 어떻게 처리해야 좋을지 고민을 해봐야 될거같아요

[hoxey2Front]

supabase 타입과 함수 요청 방식이 리팩토링되어서 지난번에 말씀드린 것처럼 lib/supabase/내에서 요청 함수를 선언하고, 타입을 가져오시는 것이 좋을 것 같습니다! 새롭게 바뀐 내용 중에 이해가 안되는 부분이 있으시다면 편하게 질문해주세요!

// 변경된 supabase 요청 함수 구조
// lib/supabase/repositories/content_approval.ts

export const getContentApproveUser = async (
  contentId: Contents['content_id']
) => {
  const data = await throwOnSupabaseError(async () => {
    return await instanceBaaS
      .from(TABLE_NAMES.CONTENT_APPROVAL)
      .select('*')
      .eq(COLUMN_NAMES.CONTENT_APPROVAL.CONTENT_ID, contentId);
  });
  return data;
};

(현재 lib/supabase/repositories/에는 테이블별로 파일이 구분되어 있는데 여러 테이블에서 동시에 요청을 하는 경우 별도의 파일을 생성하신 다음에 그 내부에 함수를 선언해주시면 될 것 같습니다.)

그러면 select 기준 테이블로 코드 옮기도록 하겠습니다~! 이 부분은 까먹고 있었네요