Fix: 상세페이지 코드리뷰 반영 ( 에러처리 보완, 댓글 개수 수정 , 카운트 보정 로직 유틸화)

[youdaeng2]

📌 개요

• 자유게시판 상세 페이지 에러 처리 개선 (ErrorFallback + ErrorBoundary 도입)
• 댓글/게시글 좋아요 카운트 보정 로직 공통 유틸로 분리 및 적용
• 댓글 헤더 카운트를 서버 total 기준으로 통일
• 세부 UI/가독성 정리 (ErrorFallback 여백, VirtualList data-attribute 등)

---

🗒 상세 설명

1. 자유게시판 상세 페이지 에러 처리 개선

ClientPage에서 에러 처리 방식을 정리하고, Fallback 컴포넌트를 활용하도록 개선했습니다.

핵심 기술 및 구현사항

• useGetFreeboardPost 결과에서 error/post를 판단해, 상단에서 API 에러를 우선 처리하도록 분기

  • error || !post 인 경우:

    • 헤더는 그대로 노출
    • 본문 영역에 ErrorFallback 렌더링
    • onRetry에서 refetch() 호출해 재시도 가능하도록 처리

• FreeboardDetail 렌더링 중 발생하는 런타임 에러는 react-error-boundary의 ErrorBoundary로 감싸서 처리

  • FallbackComponent에서 ErrorFallback을 사용해 일관된 에러 UI 유지
  • resetErrorBoundary를 onRetry로 넘겨 재렌더링 트리거

사용 예시

// ClientPage.tsx 내 사용 예시

if (error || !post) {
  return (
    <main className="space-y-6 pt-12">
      <Header ... />
      <div className="px-5 pt-16">
        <ErrorFallback
          message="게시글을 불러오는 중 오류가 발생했습니다."
          onRetry={() => {
            refetch();
          }}
        />
      </div>
    </main>
  );
}

<ErrorBoundary
  FallbackComponent={({ error, resetErrorBoundary }) => (
    <ErrorFallback
      message={error?.message}
      onRetry={resetErrorBoundary}
    />
  )}
>
  <FreeboardDetail post={post} />
</ErrorBoundary>

🖼 적용 이미지 혹은 영상

• 에러 화면 캡처(데이터 로딩 실패 시 ErrorFallback 노출 화면)가 있다면 첨부 예정

---

2. 상세 페이지 서버 사이드 에러 처리 보완

page.tsx에서 SSR 단계의 에러 분기를 명확히 했습니다.

핵심 기술 및 구현사항

• queryClient.fetchQuery 호출 시 발생하는 에러를 axios 에러 기준으로 분기
• status === 404인 경우에만 notFound() 호출 → 나머지는 모두 다시 throw
• TODO로 401 처리 방식을 주석으로 남겨 추후 공통 처리/개별 처리 협의 가능하도록 표시

사용 예시

try {
  const queryOptions = getGetFreeboardPostQueryOptions(postId);
  await queryClient.fetchQuery(queryOptions);
} catch (error: unknown) {
  if (isAxiosError(error)) {
    const status = error.response?.status;

    if (status === 404) {
      notFound();
    }

    //TODO: 401 에러 처리 협의 필요 (공통 OR 개별)
  }

  throw error;
}

---

3. 댓글 헤더 카운트 및 좋아요 카운트 보정 로직 정리

댓글/게시글 좋아요와 헤더 카운트 계산 방식을 통일하고, 공통 유틸로 분리했습니다.

핵심 기술 및 구현사항

• CommentList

  • 헤더에 표시되는 댓글 개수를 latestTotal 기준이 아닌, 항상 첫 페이지의 total 기준으로 계산 (firstPageTotal)
  • fallback 순서: firstPageTotal ?? initialCount ?? 0

• clampCount 유틸 추가 (utils/clampCount.ts)

  • Math.max(n, min) 기반으로 카운트가 지정된 최소값 아래로 내려가지 않도록 보정

• LikeButtonComment, LikeButtonPost

  • 기존의 inline clampMin0 헬퍼 제거
  • clampCount 유틸을 사용해 좋아요 카운트 보정
  • 인증 복원 UI(isRestoring 분기) 제거로 로직 단순화 및 버튼 상태 정리
  • 비로그인 시 title tooltip 제거 (로그인 가드/토스트로 충분하다고 판단)

사용 예시

// utils/clampCount.ts
export const clampCount = (n: number, min = 0) => {
  return Math.max(n, min);
};

// LikeButtonPost.tsx 내 사용
setLikeCount((count) => clampCount(count + delta));

const nextCount = clampCount(
  old.likeCount + (nextLiked ? 1 : -1),
);

---

4. 공통 컴포넌트 및 UI 디테일 정리

핵심 기술 및 구현사항

• ErrorFallback

  • 컨테이너 패딩을 p-6 → p-12로 확장해 에러 화면이 더 안정적으로 보이도록 여백 조정

• VirtualList

  • data-index에 달려있던 주석 제거 (// ✅ 경고 해결: ... → 실제 data attribute만 남김)
  • 코드/DOM 속성이 더 깔끔하게 보이도록 정리

---

📸 스크린샷

AS-IS

• ErrorBoundary 미사용으로, 렌더링 중 에러 발생 시 전체 화면이 깨질 위험 존재

TO-BE

---

🔗 이슈

closes #74

---

✅ 체크리스트

• 코드가 스타일 가이드를 따릅니다
• 자체 코드 리뷰를 완료했습니다
• 복잡/핵심 로직에 주석을 추가했습니다
• 관심사 분리를 확인했습니다
• 잠재적 사이드이펙트를 점검했습니다
• Vercel Preview로 테스트를 완료했습니다

---

🧪 테스트 방법

변경 사항을 검증한 방법을 간단히 적어주세요!

• 정상 게시글 상세 진입 시 기존과 동일하게 렌더링되는지 수동 확인
• FreeboardDetail 내부에서 임의로 에러를 발생시켜 ErrorBoundary + ErrorFallback 동작 확인
• 댓글/게시글 좋아요 토글 시 카운트가 0 이하로 내려가지 않는지 확인
• 댓글 페이징 이후 헤더 댓글 수가 서버 total과 일관되게 유지되는지 확인

---

📝 추가 노트

401 처리 방식은 이전 회의에서 공통으로 처리한다는 얘기가 나와서 TODO로 남겨뒀습니다.

• 공통 레벨에서 로그인 페이지로 리다이렉트 할지
• 상세 페이지 단위에서 메시지/가드로 처리할지
  추가 의견 주시면 그 방향에 맞춰 후속 PR로 정리하겠습니다.

후속 작업

• 401 응답에 대한 공통 처리 방식 정의 (ex. 글로벌 Auth Guard, 전역 에러 핸들러 등)

[github-actions]

✅ PREVIEW https://soso-front-end-p8qnxhtg3-dreampastes-projects.vercel.app

[github-actions]

📦 번들 분석 결과

📊 번들 크기 요약

항목	값
📦 전체 번들 크기	3.7M
📄 JavaScript 크기	1.5M
🗂️ JavaScript 파일 수	58개

🔍 주요 청크 파일 (크기순)

fe98bb7c-75056deddb8826d9.js - 169K
framework-69e0f7d37422957b.js - 137K
main-ef574bfa9cb78477.js - 130K
7147-4b792b1c613a0a9e.js - 122K
1762-0e7232d83dcb3887.js - 121K
polyfills-42372ed130431b0a.js - 110K
3920-f5a845f8074e2bd5.js - 85K
6086-65069d4634f32053.js - 76K
page-3026af1cfd56a766.js - 31K
2906-230d0473dd8a9533.js - 28K

---

🤖 자동 생성된 번들 분석 리포트

[github-actions]

⚡ Lighthouse 성능 분석 결과

📊 전체 평균 점수

지표	점수
🚀 Performance	74점
♿ Accessibility	86점
✅ Best Practices	100점
🔍 SEO	100점

📈 측정 현황

• 측정 성공: 15/16 페이지
• 상태: success

📄 페이지별 상세 분석

🏠 커뮤니티 페이지: /main/community

지표	점수
🚀 Performance	70점
♿ Accessibility	78점
✅ Best Practices	100점
🔍 SEO	100점

📊 상세 분석 보기

👥 창업자 페이지: /main/founder

지표	점수
🚀 Performance	75점
♿ Accessibility	87점
✅ Best Practices	100점
🔍 SEO	100점

📊 상세 분석 보기

🏡 홈 페이지: /main/home

지표	점수
🚀 Performance	75점
♿ Accessibility	91점
✅ Best Practices	100점
🔍 SEO	100점

📊 상세 분석 보기

🗺️ 지도 페이지: /main/maps

지표	점수
🚀 Performance	75점
♿ Accessibility	87점
✅ Best Practices	100점
🔍 SEO	100점

📊 상세 분석 보기

👤 프로필 페이지: /main/profile

지표	점수
🚀 Performance	75점
♿ Accessibility	88점
✅ Best Practices	100점
🔍 SEO	100점

📊 상세 분석 보기

🔗 전체 상세 분석 결과

📊 전체 상세 Lighthouse 분석 결과 보기

📄 측정된 페이지

• /main/community
• /main/founder
• /main/home
• /main/maps
• /main/profile

모든 페이지에서 성능 측정이 완료되었습니다.

---

🤖 자동 생성된 Lighthouse 성능 리포트

[DreamPaste]

고생하셨습니다.

[DreamPaste]

401 처리는 인터셉터가 대신 하기 때문에 따로 처리할 필요 없을 듯 합니다.

[github-actions]

✅ PREVIEW https://soso-front-end-4eqf0xeey-dreampastes-projects.vercel.app

[github-actions]

✅ PREVIEW https://soso-front-end-rn4khifot-dreampastes-projects.vercel.app