구현 화면
게시판 목록 페이지
- 게시판 목록 조회
- 게시글 좋아요, 조회수
- 게시글 수정/삭제/신고
- 카테고리 분류
- 검색 및 최근 검색어 확인
게시글 상세 페이지
- 게시글 상세 조회
- 댓글 및 답댓글 조회 및 작성
- 게시글, 댓글 좋아요, 공유, 수정/삭제/신고
게시글 작성 페이지
- 카테고리, 제목, 내용, 이미지 작성
PR
개요
커뮤니티 게시판 기능을 전체적으로 구현했습니다. 사용자들이 자유롭게 게시글을 작성하고, 댓글을 달고, 상호작용할 수 있는 완성된 게시판 시스템을 개발했습니다.
변경 사항
🔸 게시판 핵심 기능 구현- 게시글 CRUD (작성/조회/수정/삭제) 기능 완성
- 댓글 및 대댓글 시스템 구현
- 좋아요 기능 (게시글/댓글)
- 게시글 신고 기능 (중복 신고 방지)
- 카테고리별 필터링 (자유/QnA/동행 메이트)
- 검색 기능
- 이미지 업로드 및 관리
- Bottom Sheet 활용한 모바일 친화적 UI
- 카테고리 선택 Bottom Sheet 적용
- 댓글 페이지 분리 및 페이지네이션
- 상대 시간 표시 (dayjs 활용)
- 스켈레톤 UI 로딩 상태
- 플로팅 작성 버튼
- 비로그인 사용자 리다이렉트 처리
- 작성자 본인만 수정/삭제 가능
- 중복 신고 방지 토스트 메시지
- 폼 데이터 초기화 처리
주요 신규 기능
- 커뮤니티 게시판 전체 시스템: 52개 파일 추가/수정, 3,318줄의 코드 추가
- 댓글 시스템: 답글 기능 포함한 계층적 댓글 구조
- 이미지 업로드: 게시글 작성/수정 시 이미지 첨부 및 삭제
- 실시간 좋아요: 게시글과 댓글에 대한 좋아요 기능
- 공유 기능: 게시글 링크 공유
아키텍처 개선사항
- 컴포넌트 구조화: Sheet 패턴을 활용한 모듈화된 컴포넌트 설계
- 상태 관리: Atom 패턴으로 게시판 상태 중앙 관리 (boardAtom.ts)
- Custom Hooks: useLike, useCommentLike 등 재사용 가능한 훅 구현
- 타입 안정성: BoardType.ts에 모든 게시판 관련 타입 정의
처리 플로우
- 게시글 목록 조회 → PostsSheet 컴포넌트에서 카테고리별 필터링
- 게시글 상세 조회 → DetailSheet에서 게시글 및 댓글 표시
- 게시글 작성/수정 → CreateSheet/EditSheet에서 폼 처리 및 이미지 업로드
- 댓글 작성 → CommentSheet에서 댓글/답글 처리
- 좋아요/신고 → API 호출 후 즉시 UI 업데이트
관련 이슈
- 비로그인 사용자 접근 제한
- 이미지 업로드 및 삭제 처리
- 댓글 페이지네이션 구현
- Bottom Sheet z-index 이슈 해결
데이터 스키마 변경
- Post 엔티티: 카테고리, 이미지, 좋아요 수 필드 추가
- Comment 엔티티: 부모 댓글 참조, 좋아요 기능 추가
- User 관계: 작성자 정보 연결
기대 효과
- 사용자 간 활발한 커뮤니티 활동 증진
- 모바일 환경에서의 최적화된 사용자 경험
- 카테고리별 정보 공유 및 소통 활성화
- 직관적인 UI/UX로 사용자 참여도 향상
👾