[FEAT] 회원/비회원 통합 유저플로우를 위한 데이터 패칭 훅 개선

[jaeml06]

🚩 연관 이슈

closed #268

📝 작업 내용

회원/비회원 통합 타임테이블 관리 기능 리팩터링

기존에는 회원 플로우만 존재했으나 서비스에 대한 사용자 접근성을 높이기 위해 비회원 플로우를 추가하고 자 한다. 이때 회원/비회원 플로우를 분리해서 구현하면 UI/비즈니스 로직의 복잡도가 증가하고, 기능 추가/유지보수에 어려움이 있다고 판단되어 통합하여 구현하고자 한다.

Repository 패턴 적용

• DebateTableRepository 인터페이스 정의

  → 데이터 소스가 바뀌더라도 동일한 인터페이스만 지키면 어디서든 사용 가능

• API 저장소 (회원), SessionStorage 저장소 (비회원)

  → 각각 ApiDebateTableRepository, SessionDebateTableRepository로 구현

export interface DebateTableRepository {
  getTable(tableId?: number): Promise<GetDebateTableResponseType>;
  saveTable(data: DebateTableData): Promise<PostDebateTableResponseType>;
  editTable(
    data: PutDebateTableResponseType,
  ): Promise<PutDebateTableResponseType>;
}

동적 저장소 선택 함수

• getRepository()

  → 현재 플로우(회원/비회원)에 따라 적절한 저장소 구현체를 반환(현재는 스토리지에 table데이터가 있는 경우, 비회원 반환)

  → getRepository()만 호출하면 내부 분기는 자동

export function getRepository(): DebateTableRepository {
  if (isGuestFlow()) return new SessionDebateTableRepository();
  return new ApiDebateTableRepository();
}

비회원 플로우 세션스토리지 관리

• sessionStorage에서 직접 CRUD
• 데이터는 JSON으로 저장, id는 -1 등으로 가짜값 할당

export const setSessionCustomizeTableData = (
  data: DebateTableData | PostDebateTableResponseType,
) => {
  sessionStorage.setItem(
    STORAGE_KEY_PREFIX,
    JSON.stringify({ id: -1, ...data }),
  );
  return { id: -1, ...data };
};

커스텀 훅에 통합

• React Query 기반

  → 회원/비회원 상관 없이 항상 동일한 훅(useGetDebateTableData, useAddDebateTable, usePutDebateTable)으로 CRUD 처리

import { useQuery } from '@tanstack/react-query';
import { getRepository } from '../../repositories/DebateTableRepository';
import { GetDebateTableResponseType } from '../../apis/responses/customize';

export function useGetDebateTableData(tableId: number, enabled?: boolean) {
  return useQuery<GetDebateTableResponseType>({
    queryKey: ['DebateTableData', tableId],
    queryFn: async () => {
      const repo = getRepository();
      return repo.getTable(tableId);
    },
    enabled,
  });
}

🗣️ 리뷰 요구사항 (선택)

이번 작업을 진행하면서 레포지터리 패턴을 적용해보려고 시도했습니다. 회원/비회원 유저플로우 구현을 위한 기반 기능이 필요하다면 말해주세요.
테스트는 스토리북에서 session storage에 DebateTableData을 키값으로 데이터를 넣어주면 테스트 가능합니다.

[i-meant-to-be]

개인적으로는 요거 제안드릴 때 리포지토리 패턴을 그대로 적용하기보다는 대충 분기 처리로 때우는 정도만 생각했었는데, 정말 리포지토리 패턴 그대로 구현해주셨네요 ㄷㄷ... 덕분에 코드 보기가 좋아요. 고생하셨습니다!

새로 작성해주신 리포지토리 관련 코드들에 댓글 4건 남겨두었습니다. 확인해주시면 감사하겠습니다!

[katie424]

저는 사실 레포지토리 패턴을 처음 보는데 깔끔하게 구현해 주셔서 코드 읽기도 이해하기도 정말 편하네요!!! 코드는 따로 코멘트할 부분 없이 잘 봤습니다. 수고하셨습니다~!

[i-meant-to-be]

추가 변경 사항 확인했습니다! 고생하셨어용