Skip to content

Post System

Jump to bottom
Hyunseok Ryu edited this page May 14, 2025 · 7 revisions

📮 게시글 시스템 (Post System)

타임페이의 핵심 기능으로, 활동 게시글을 생성, 조회, 관리할 수 있는 시스템입니다.

Relevant Source Files

1. 시스템 개요

Post 시스템은 다음 네 가지 주요 컴포넌트로 구성됩니다:

  • Post Listing
  • Post Details
  • Post Creation Flow
  • Applicant Management

2. Post 데이터 모델

Post의 주요 데이터 구조는 다음에서 확인할 수 있습니다.

3. Post 목록 (Post Listing)

사용자가 게시글을 검색하고, 필터링하며, 무한 스크롤로 더 많은 게시글을 불러올 수 있도록 지원합니다.

주요 기능

  • 검색
  • 카테고리 필터
  • 무한 스크롤
  • FCM 푸시 알림 연동
  • 게시글 생성 버튼 고정

Sources:

4. 게시글 상세 (Post Detail)

특정 게시글에 대한 상세 정보를 보여주고, 사용자 역할(작성자/지원자)에 따라 다른 기능을 제공합니다.

주요 기능

  • Post 정보 표시(ActivityBox)
  • 참여 신청/취소
  • 작성자용 관리 기능 (수정, 삭제, 끌어올리기, 신청자 관리)
  • 신고

Sources:

5. Post API 연동

Post 관련 백엔드 API와 통신하여 게시글 조회, 생성, 수정, 삭제 등의 기능을 제공합니다.

제공 메서드

메서드명 설명
getPostList 게시글 목록 조회
getPostDetail 게시글 상세 조회
postPosting 게시글 생성
editPost 게시글 수정
deletePost 게시글 삭제
reportPosting 게시글 신고
pullUp 게시글 끌어올리기
getUserActivity 사용자의 활동 내역 조회

Sources:

6. 게시글 표시 컴포넌트

ActivityBox

  • 상태, 인원 수, 급여, 제목, 내용, 시간, 위치, 예상 소요 시간, 조회수 등 표시
export const ActivityBox = ({ data, editMode = false }: ActivityBoxType) => {
  // Component code
  return (
    <>
      <Progress>
        <Status $status={data.status}>
          {data.status === "RECRUITING" ? "모집중" : "모집완료"}
        </Status>
        <HeadCount>
          {data.currentApplicant}/{data.maxNumOfPeople}명
        </HeadCount>
        <KnotPay>{data.pay} 타임</KnotPay>
      </Progress>

      <PostInfo>
        {!editMode ? (
          <>
            <Title>{data.title}</Title>
            <Content>{data.content}</Content>
          </>
        ) : (
          // Edit mode UI
        )}
      </PostInfo>

      <MoreInfoContainer>
        <PromiseInfoList>
          <PromiseInfoItem $icon={DateSVG}>
            <span>{BackdateToItemtype(data.startDate)}</span>
          </PromiseInfoItem>
          <PromiseInfoItem $icon={LocationSVG}>
            <span>{data.location}</span>
          </PromiseInfoItem>
          <PromiseInfoItem $icon={TimeSVG}>
            <span>예상 소요 시간 {data.volunteerTime}분</span>
          </PromiseInfoItem>
        </PromiseInfoList>

        <span>조회수 {data.viewsCount}회</span>
      </MoreInfoContainer>
    </>
  );
};

Sources:

7. 요약

게시글 시스템은 다음 기능들을 중심으로 구성됩니다:

  • 📋 게시글 목록: 검색, 필터링, 무한 스크롤
  • 📝 게시글 상세: 역할 기반 액션
  • 🔌 Post API 연동
  • 🔔 FCM 알림 기능
  • 💡 공통 UI 컴포넌트: ActivityBox, BottomFixed 등
Clone this wiki locally