Feature: 커뮤니티 페이지 구현

[jeongsarang-0701]

📌 PR 종류 (PR Type)

• 🐛 버그 수정 (Bugfix)
• ✨ 기능 추가 (Feature)
• 🎨 UI 스타일 변경 (Style) - CSS, 클래스명, 레이아웃 등 UI 변경
• ♻️ 코드 리팩토링 (Refactor) - 기능 변화 없이 코드 구조 개선
• 📦 패키지/빌드 관련 변경 (Build) - 설정 파일 수정, 의존성 추가 등
• 🧱 테스트 코드 추가/수정 (Test)
• 📝 문서 수정 (Docs)
• 🚧 WIP (작업 중 PR)
• 기타 (Other):

---

📝 요약 (Summary)

커뮤니티 기능 구현 및 api 연동

---

🔍 상세 내용 (Describe your changes)

PostDetailPage.tsx - 게시글 영역 전체 관리하는 컴포넌트
PostHeader.tsx - 뒤로가기, 북마크 버튼 기능 영역
PostContent.tsx - 게시글의 제목과 내용, 작성자 정보, 좋아요 버튼 영역
CommentSection.tsx - 댓글 영역 전체를 관리
CommentItem.tsx - 개별 댓글 영역
CommentForm.tsx - 댓글을 입력하세요(입력창) 영역

---

📸 스크린샷 (필수)

✅ 확인 사항 (CheckList)

• 브라우저에서 정상 동작 확인
• 기존 기능에 영향 없음
• 반응형 UI 대응 확인
• 코드 컨벤션에 맞게 작성됨 (eslint, prettier 등)
• 테스트 코드 추가/수정 또는 테스트 통과 확인

---

💬 기타 참고사항 (Optional)

테스트용 텍스트로는 정상 구동 확인했으나(스크린샷) api 연동 이후는 확인하지 못했습니다!

[gemini-code-assist]

Summary of Changes

Hello @jeongsarang-0701, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request delivers the core functionality for a community post detail page, allowing users to view specific posts and their comments. It establishes the necessary routing, integrates with backend APIs for dynamic content, and leverages a modern data fetching library to manage application state efficiently. The changes also include the addition of new UI components to support the page's design.

Highlights

• New Feature: Community Post Detail Page: Implemented a dedicated page for viewing individual community posts, including their content, author information, and associated comments.
• API Integration and Data Management: Integrated API calls for fetching post and comment data, and enabled user interactions such as liking posts and adding new comments. This is powered by the introduction of @tanstack/react-query for efficient data fetching, caching, and state management.
• New UI Components: Added new reusable UI components, including Avatar and Separator, built upon Radix UI primitives to enhance the visual presentation and consistency of the community page.
• Modular Component Design: Structured the community page into modular components like PostHeader, PostContent, CommentSection, CommentItem, and CommentForm for better organization and maintainability.
• Type Safety: Defined clear TypeScript interfaces for Post and Comment data structures, improving type safety and code clarity across the new feature.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in issue comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments or fill out our survey to provide feedback.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

커뮤니티 게시글 상세 페이지 기능 구현을 위한 PR 잘 보았습니다. 전반적으로 React Query를 사용한 데이터 관리와 컴포넌트 구조화가 잘 되어 있습니다. 다만 몇 가지 구조적, 안정성 및 접근성 측면에서 개선할 점이 있어 리뷰를 남깁니다.

주요 제안 사항은 다음과 같습니다:

• App.tsx에서 react-router-dom을 활용한 선언적 라우팅으로 변경하여 코드의 안정성과 확장성을 높이는 것이 시급합니다.
• PostDetailPage.tsx에서 postId의 null 가능성에 대한 방어 코드를 추가하여 런타임 에러를 방지해야 합니다.
• 일부 컴포넌트에서 접근성 향상을 위해 div 대신 button 태그 사용을 권장합니다.
• 사용되지 않는 prop을 정리하여 코드 명확성을 높일 필요가 있습니다.

또한, 프로젝트 스타일 가이드(12번째 줄)에서는 모든 코드의 자동화 테스트를 요구하고 있으나, 이번 PR에는 테스트 코드가 포함되지 않았습니다. 기능의 안정성을 위해 테스트 코드를 추가하는 것을 고려해주세요.

[Monixc]

pr 전에 develop pull 해서 올려주세요.

[Monixc]

커밋 컨벤션 맞춰주세요. feat:, style:, chore: 등 사용합니다.

[woo-dev-log]

👍

[Monixc]

전체 GlobalLayout 적용 중인데 일부 페이지에서 최상위 래퍼로 GloabalLayout을 사용하여 레이아웃이 중첩 표시되는 문제가 있었습니다.

// 문제가 되었던 구조
<GlobalLayout>  // App.tsx에서 적용
  <GlobalLayout showHeader={false}>  // 개별 페이지에서 중복 적용
    <PageContent />
  </GlobalLayout>
</GlobalLayout>

App.tsx에서 페이지 그룹 별 레이아웃을 관리하게 해 중첩 문제를 해결했습니다.

const layoutGroups = {
  full: ["/", "/board", "/explore", "/my"], // header + bottom nav
  headerOnly: ["/developer", "/community", "/onboarding"], // only header
  none: ["/login", "/search"], // no header and bottom nav
};