BOOK_MAKER 개발기 #2 — 아카이브 목록과 기록 상세 흐름 구현

프론트엔드 환경에서 사용자가 저장한 기록을 모아보고 상세 내용을 확인할 수 있도록 아카이브 목록(/app/archive)과 상세 화면(/app/entries/[id])을 백엔드 API와 성공적으로 연동했습니다.

목표

사용자가 생성한 기록을 아카이브 목록 화면에서 조회할 수 있도록 구성
로딩 중, 데이터 없음(Empty), 에러 발생 등 다양한 뷰 상태에 대한 UI 대응
작성(Write) 흐름에서 아카이브를 거쳐 상세(Detail) 페이지로 진입하는 전체적인 사이클 연결

핵심 구현 포인트

1) useEntriesArchive 컴포저블 구현

목록 조회 및 상태 관리를 UI 렌더링 영역과 분리하기 위해 useEntriesArchive 컴포저블을 도입했습니다. 테스트 코드를 작성해 목록이 비어있을 때와 데이터를 성공적으로 불러왔을 때의 경계를 명확히 했습니다.

// apps/web/app/composables/useEntriesArchive.ts
export const useEntriesArchive = () => {
  const entries = ref([]);
  const isLoading = ref(false);
  const error = ref(null);

  const fetchEntries = async () => {
    isLoading.value = true;
    error.value = null;
    try {
      const response = await api.get('/entries');
      entries.value = response;
    } catch (e) {
      error.value = e;
    } finally {
      isLoading.value = false;
    }
  };

  return { entries, isLoading, error, fetchEntries };
};

2) 상세 화면 동적 라우팅 및 연동

아카이브 목록에서 특정 기록을 선택할 때 /app/entries/[id] 경로로 진입하도록 Nuxt 동적 라우팅을 구성했습니다. 해당 화면 진입 시 GET /entries/:id API를 통해 상세 데이터를 호출하여 표시합니다.

트러블슈팅 / 고민 포인트

API 조회 중 에러/빈 상태 처리

원인: 백엔드에서 빈 배열이 내려오거나 인증이 풀려 401이 반환되었을 때, 단순히 화면이 멈춘 것처럼 보이면 사용자 경험이 크게 저하될 수 있습니다.
해결: useEntriesArchive 내부에서 상태값을 isLoading, error, entries.length === 0 등으로 세분화하여 각 상황에 맞는 Fallback UI를 화면에 노출하도록 구성했습니다.

결과

API(GET /entries, GET /entries/:id)를 기반으로 한 아카이브 및 기록 상세 조회 화면 기능 반영 완료
Write -> Archive -> Detail -> Write 로 자연스럽게 순환하는 프론트엔드-백엔드 연동 사이클 구축 완료
UI 흐름을 뒷받침하는 상태 로직의 Vitest 단위 테스트 보강 (useEntriesArchive.spec.ts 등)

다음 개선 아이디어

/login 및 /signup 등 전용 인증 화면 추가와 App 전반을 아우르는 Auth Middleware 적용
기록 작성 시 Draft(초안) 상태를 명확히 분리하고, Draft를 선택해 이어서 작성하는 흐름 추가
아카이브/상세 페이지를 포괄하는 Page 레벨의 통합 테스트 도입

# BOOK_MAKER 개발기 #2 — 아카이브 목록과 기록 상세 흐름 구현