💭 멘토님 리뷰

[eunjju2]

🛠️ 서비스 요약

• 사용자와 사업자가 하나의 플랫폼에서 연결되는 스터디룸 예약 서비스
• 사용자는 위치 및 장소 검색을 통해 스터디룸을 찾고 예약 및 결제를 할 수 있으며, 사업자는 본인의 스터디룸과 예약자를 관리할 수 있습니다.

📝 요구 사항과 구현 내용

1. 로그인 및 회원가입, 사업장 등록 및 스터디룸 상세 보기 - 최성령
2. 지도 및 장소 검색, 예약 및 결제, 1:1 문의 - 이은수
3. 사용자 & 사업자 회원 관리, 사업장 및 예약 관리, 실시간 알림 - 조현진

📝 작업 현황

• 프론트측 페이지별 마크업은 마무리된 상태입니다. api 연결하면서 자잘한 부분만 수정이 이루어지면 될 것 같습니다.

• 백엔드쪽 서버 배포가 돼서 현재 가능한 api를 연결해서 테스트해보고 있습니다. 다만 완벽히 배포된 것은 아니어서 테스트에 시간이 조금 소요되고 있습니다.

  지금 테스트해보고 있는 페이지는

  • 사업자 / 사용자 회원가입 페이지
  • 사업자 / 사용자 로그인 페이지
  • 사업자 / 사용자 마이페이지(로그아웃 포함)
  • 메인페이지
  • 사업장 상세페이지

  정도입니다. 중간발표때까지 해당 페이지들은 최대한 구현을 끝낼 예정입니다.

💬 리뷰 시에 참고사항

• 로컬 구동 시 npm install 실행하셔야 합니다.
• .env 파일에 각 키값을 넣어야 하는데 DM으로 요청해주시면 바로 알려드리겠습니다.
• 지도 이용 시 브라우저에서 현재 위치 수집에 관한 권한이 동의되어야 합니다.
• 각 페이지 경로는 Rounter.tsx 참고하시면 됩니다.

💬 작업내역에 대한 설명 & 궁금한 점

• typings 폴더에는 공통으로 사용하는 타입을 정리해두고, constants 폴더에는 공통으로 사용하는 에러 문구나 placeholder를 정리해두었습니다.
• 공통으로 사용될만한 유틸리티 함수들은 따로 utils 폴더로 빼서, 중복 코드를 줄이고 최대한 같이 활용하는 방식으로 진행했습니다.
• api를 각 페이지별로 생성하지 않고 기능별로 분리했습니다.
• axios를 모듈화해서, 중복 코드를 방지하고자 했습니다.

  • 지난 프로젝트에서 axios 관련 코드를 작성할 때, 동일한 역할을 하는 인스턴스를 각각 따로 만들고 인증이 필요한 요청에는 헤더에 토큰 넣는 코드를 매번 작성하는 등 중복 코드가 많이 발생했습니다. 그래서 이번에 모듈화를 시도해봤습니다!

  • AxiosInstance를 생성하여 같이 사용

  • 인증이 필요 없는 경우에는 defaultInstance를 사용하고, 인증이 필요한 경우엔 authInstance를 사용합니다.

  • authInstance 응답 인터셉터에서는 401에러가 발생할 경우 refresh 토큰을 갱신하는 요청을 보냅니다.

    POST /reissue 는 쿠키에 있는 refresh 토큰으로 리프레시가 맞는지, 유효한지, DB에 저장되어 있는지를 검사한 후 accessToken과 refreshToken을 재생성합니다.

    refresh 토큰이 유효하면(200) 새로 발급된 accessToken을 다시 localStorage에 저장하고 기존 요청을 재시도합니다.

    유효하지 않으면 로그아웃 처리됩니다.

  • authInstance 요청 인터셉터에는 요청이 서버에 전송되기 전에 accessToken을 가져와 헤더에 인증 권한을 추가합니다. 이후 수정된 config를 반환해서 이 설정대로 요청이 이루어집니다.

  • errorInterceptor 를 통해 에러를 쉽게 관리할 수 있도록 했습니다. api 요청 함수에 적힐 try-catch문을 생략할 수 있어 api 함수도 간결하게 작성할 수 있었습니다.

개인적으로 궁금한 점

• 조현진

data가 undefined일 수 있다는 에러가 뜰 때 그걸 어떤 식으로 해결해야 좋을지 잘 모르겠습니다.

// 제가 사용한 방식
{
  data?.businessName || (
    <p className="text-2xl">닉네임을 불러올 수 없습니다.</p>
  );
}

// 조건문 사용
if (!data) {
  return <p>조회 실패</p>;
}

// 논리연산자 사용
{
	data && ~~
}

저는 HostInfo.tsx, UserInfo.tsx 등의 파일에서 undefined일 수 있다는 에러가 발생하면 첫 번째 방식이나 세 번째 방식을 주로 사용했습니다.
undefined를 제거할 수 있는 방법이 여러 개가 있는데 어떤 방식이 가장 적절한지,
그리고 undefined를 보통 컴포넌트쪽에서 걸러내는지, 아니면 api 함수나 hook에서 먼저 걸러낸 데이터를 컴포넌트에서 사용하는지 궁금합니다!

• 이은수

API 통신 시, 서버에서 보내주는 에러 status code를 기반으로 errorInterceptor에서 분리해 처리하고 있는데, 각 에러를 어떻게 처리해야 할지 아직 감이 안 옵니다. 공통으로 에러 처리를 한 번에 하는 방식이 나을지, 아니면 각 API 요청 로직에서 에러를 개별적으로 핸들링하는 게 더 나은 방법인지 고민입니다!

[devpang20]

👍 잘된 점

• 규모 맞춰서 적절히 나눈 폴더 구조
• axios 인터셉터를 통한 모듈화
• 공통 컴포넌트 분리, 유틸 함수 재사용

🛠️ 개선할 점

1. 에러처리 강화, 공통 에러와 개별 에러를 사용할 수 있는 구조로 변경(코드 코멘트 1-n 참고)

• 대부분의 에러는 공통 처리로 해결
• 특별한 처리가 필요한 경우만 개별 API에서 처리
• 코드 중복을 최소화하면서도 유연한 에러 처리 가능

2. 커스텀 훅을 통한 데이터 처리 로직 분리(코드 코멘트 2-n 참고)

데이터 흐름이 명확해짐

• API → 커스텀 훅 → 컴포넌트
• undefined 처리가 커스텀 훅에서 이루어짐

컴포넌트 책임이 분리됨

• 데이터 fetching은 커스텀 훅에서
• UI 렌더링은 컴포넌트에서

에러 처리가 체계적

• 로딩/에러/빈 상태 처리가 명확함
• 사용자에게 적절한 피드백 제공

타입 안정성 확보

• 컴포넌트에서는 이미 타입이 보장된 데이터 사용
• undefined 체크 불필요
  이런 방식으로 구현하면 코드가 더 안정적이고 유지보수하기 쉬워질 것 같습니다.

추가적인 추천

• .prettierrc 설정파일과 에디터 autosave 를 통한 코드 컨벤션 자동 적용
  참고
  https://velog.io/@kcs0702/VSC-%EC%9E%90%EB%8F%99%EC%A0%95%EB%A0%AC-auto-save-prettier-%EC%84%A4%EC%A0%95%EB%B2%95

• API 타입 추가

export interface ApiResponse<T> {
  data: T;
  status: number;
  message: string;
}

export interface ApiError {
  code: string;
  message: string;
  status: number;
}

// API 상태 코드 상수화
export const API_STATUS = {
  SUCCESS: 200,
  UNAUTHORIZED: 401,
  FORBIDDEN: 403,
  NOT_FOUND: 404,
  SERVER_ERROR: 500,
} as const;

// 에러처리 상수키워드 이용
switch (status) {
  case API_STATUS.UNAUTHORIZED:
    return '로그인이 필요합니다.';
  case API_STATUS.FORBIDDEN:
    return '접근 권한이 없습니다.';
  case API_STATUS.NOT_FOUND:
    return '요청하신 정보를 찾을 수 없습니다.';
  case API_STATUS.SERVER_ERROR:
    return '서버 오류가 발생했습니다.';
  default:
    return '알 수 없는 오류가 발생했습니다.';

폴더구조 참고 자료

• FSD 라는 구조가 있다는 것도 참고, 현재 유명한 디렉토리 분류 기준이라 참고정도 해보면 좋음. 영상에도 나오지만 디렉토리 구조 분류에 정답은 없음. 불편할때 개선을 위해 나누는게 정답.
  https://www.youtube.com/watch?v=64Fx5Y1gEOA

[devpang20]

• 1-2 개별 에러 처리의 경우 아래와 같이 처리하면 됩니다.

export const postReview = async (data: ReviewData): Promise<Review> => {
  try {
    const response = await authInstance.post('/api/v1/review', data);
    return response.data;
  } catch (error) {
    // 리뷰 작성 시 특별히 처리해야 하는 에러만 여기서 처리
    if (error.response?.status === 400) {
      throw new Error('리뷰 내용을 확인해주세요.');
    }
    // 나머지는 공통 에러 처리로 전파
    throw error;
  }
};

[devpang20]

2. data undefined 에러 처리
   2-1 커스텀 hooks 도입

• src/hooks/useWorkplaceReview.ts 생성

import { useQuery } from '@tanstack/react-query';
import { ReviewData } from '../types';

export const useWorkplaceReview = (workplaceId: string) => {
  const { data, isLoading, error } = useQuery({
    queryKey: ['workplaceReview', workplaceId],
    queryFn: () => getWorkplaceReview(workplaceId),
    retry: 1,
  });

  return {
    reviews: data ?? [], // undefined일 경우 빈 배열 반환
    isLoading,
    error: error as Error | null,
  };
};

• 2-2 hooks 도입 후 WorkPlaceReview 수정

import { useWorkplaceReview } from '@/hooks/useWorkplaceReview';

const WorkPlaceReview = ({ workplaceId }: { workplaceId: string }) => {
  const { reviews, isLoading, error } = useWorkplaceReview(workplaceId);

  if (isLoading) {
    return (
      <div className='w-custom flex justify-center'>
        <p>리뷰를 불러오는 중...</p>
      </div>
    );
  }

  if (error) {
    return (
      <div className='w-custom flex justify-center'>
        <p className='text-subfont'>리뷰를 불러올 수 없습니다.</p>
      </div>
    );
  }

  if (reviews.length === 0) {
    return (
      <div className='w-custom flex justify-center'>
        <p className='text-subfont'>작성된 리뷰가 없습니다.</p>
      </div>
    );
  }

  return (
    <div className='w-custom'>
      {reviews.map((item) => (
        <div
          key={item.reviewId}
          className='border-b border-subfont py-[16px] last:border-none'
        >
          <ReviewComponent review={item} />
        </div>
      ))}
    </div>
  );
};

[devpang20]

• 2-3 ReviewComponent에서의 데이터 처리

interface ReviewComponentProps {
  review: ReviewData;
}

const ReviewComponent = ({ review }: ReviewComponentProps) => {
  // review는 이미 타입이 보장된 상태
  const { userName, reviewRating, content, createdAt } = review;

  return (
    <div>
      <h3>{userName}</h3>
      <div>{reviewRating}</div>
      <p>{content}</p>
      <span>{createdAt}</span>
    </div>
  );
};

[devpang20]

tanstack-query 에 대해서 추가적으로 리뷰 달았습니다.

[devpang20]

useGetPossibleTime의 경우 데이터 조회가 목적으로 보임. 목적에 맞는 메서드 사용으로 코드 간소화

• 현재 useMutation에서 GET 요청을 사용하고 있어 역할이 맞지 않습니다.
• useMutation은 주로 데이터 생성(POST), 수정(PUT/PATCH), 삭제(DELETE)와 같은 서버의 상태를 변경하는 작업에 사용됩니다.
• 필터링 조건이 변경될 때는 useQuery의 queryKey를 변경하여 자동으로 데이터를 조회하게 하는 것이 더 효율적입니다. 그렇게 되면 invalidateQueries 역시 사용할 필요가 없습니다.

import { getPossibleTime } from '@apis/workplace';
import { useQuery } from '@tanstack/react-query';
import { PossibleTime } from '@typings/types';

export const useGetPossibleTime = (studyRoomId: number, checkDate: Date) => {
  const { data, isLoading, isError } = useQuery<PossibleTime>({
    queryKey: ['studyroomDetail', studyRoomId, checkDate],
    queryFn: () => getPossibleTime(studyRoomId, checkDate),
    enabled: !!studyRoomId && !!checkDate,
  });

  return { 
    data: (data ?? {}) as PossibleTime, 
    isLoading, 
    isError 
  };
};

변경 추천로직 설명

• useMutation, 불필요한 invalidateQueries 제거
• queryKey에 studyRoomId와 checkDate를 포함시켜서 이 값들이 변경될 때마다 자동으로 새로운 데이터를 조회합니다.

useQuery, useMutation 사용 정리

useQuery 사용 시점

• 데이터 조회 (GET)
• 필터링된 데이터 조회
• 페이지네이션
• 실시간 데이터 폴링

useMutation 사용 시점

• 데이터 생성 (POST)
• 데이터 수정 (PUT/PATCH)
• 데이터 삭제 (DELETE)
• 서버의 상태를 변경하는 작업

[eunjju2]

궁금증이 명확하게 해결됐습니다, 감사합니다!! 리팩토링에 반영해보겠습니다 :)