[Enhancement] 조건부 렌더링 패턴 통일 및 에러 처리 공통 핸들러 도입

[seorinn]

배경

조건부 렌더링 방식과 에러 처리 방식이 파일마다 제각각으로 코드 일관성이 없습니다.

문제 1: 조건부 렌더링 패턴 혼재

// 패턴 1: 삼항 연산자로 요소 표시/숨김
{showModal ? <Modal /> : null}

// 패턴 2: && 연산자
{showModal && <Modal />}

// 패턴 3: early return
if (!data) return <></>;  // 빈 Fragment 반환 (null 권장)

// 패턴 4: 복잡한 삼항
{type === "promotion" ? (
  <PromotionList />
) : type === "photographer" ? (
  <PhotographerList />
) : (
  <Empty />
)}

문제 2: 에러 처리 패턴 혼재

// 패턴 1: 완전 무시
try {
  await getUserInfo();
} catch (e: any) {
} // 아무것도 안 함

// 패턴 2: console.log만
} catch (e) {
  console.log(e);
}

// 패턴 3: 일부만 처리
} catch (e: any) {
  setIsClipped(false);
  setShowLoginModal(true);
}

개선 방향

조건부 렌더링 가이드

// 1. 전체 컴포넌트 조건 → early return (null 사용)
if (!data) return null;

// 2. 단일 요소 표시/숨김 → &&
{isVisible && <Element />}

// 3. A/B 선택 → 삼항 (단순한 경우만)
<img src={isOn ? iconOn : iconOff} alt="" />

// 4. 다중 분기 → switch 또는 Map 객체
const contentMap = {
  promotion: <PromotionList />,
  photographer: <PhotographerList />,
} as const;
{contentMap[type] ?? <Empty />}

에러 처리 공통 핸들러

// src/utils/errorHandler.ts
export function handleApiError(error: unknown, options?: {
  onUnauthorized?: () => void;
  onNotFound?: () => void;
}) {
  if (!axios.isAxiosError(error)) {
    console.error("[Unknown Error]", error);
    return;
  }
  switch (error.response?.status) {
    case 401: options?.onUnauthorized?.(); break;
    case 404: options?.onNotFound?.(); break;
    default:  console.error("[API Error]", error.response?.data);
  }
}

관련 파일

• 전체 프로젝트