Skip to content

Post System Files

Jump to bottom
Hyunseok Ryu edited this page May 18, 2025 · 2 revisions

📄 Resource Files

📁 게시물 생성 단계별 파일 구조

각 파일은 게시물 생성 과정의 특정 단계를 담당하며, 순차적으로 진행됩니다:

단계 파일명 기능
1️⃣ posting1.tsx 위치 입력
2️⃣ posting2.tsx 날짜 선택
3️⃣ posting3.tsx 시작 시간 선택
4️⃣ posting4.tsx 활동 소요시간 입력
5️⃣ posting5.tsx 필요한 인원 입력
6️⃣ posting6.tsx 활동 유형(카테고리) 선택
7️⃣ posting7.tsx 활동 제목 입력
8️⃣ posting8.tsx 활동 내용 입력
9️⃣ posting9.tsx 게시물 생성 완료 확인

🧱 공통 구조

모든 posting*.tsx 파일들은 비슷한 구조를 따릅니다:

  • 🔄 상태 관리:
    Recoil의 postingState 아톰으로 상태 공유
    → 예: posting1.tsx:14-16

  • 🧩 공통 컴포넌트 사용:

    • PostingAppBar : 상단 네비게이션 바
    • PostingBoldText : 단계별 안내 텍스트
      → 예: posting-bold-text.tsx:3-8
    • BottomFixed : 하단 고정 버튼 영역

  • 💾 상태 저장 함수:
    각 페이지는 handleSave 함수를 통해 입력 데이터를 저장
    → 예: posting1.tsx:20-25

  • ✅ 유효성 검사:
    입력 데이터가 올바른지 검사
    → 예: posting1.tsx:48-51

🔍 각 파일별 세부 기능

1️⃣ posting1.tsx - 위치 입력

  • InputBox.InputMap 컴포넌트로 위치 입력
  • 위치가 비어있을 경우 오류 메시지 표시
    → posting1.tsx:35-43

2️⃣ posting2.tsx - 날짜 선택

  • 캘린더 인터페이스 제공
  • 선택된 날짜 포맷팅 후 표시
    → posting2.tsx:37-40

3️⃣ posting3.tsx - 시작 시간 선택

  • 시간 선택 컴포넌트 사용
  • 유효한 시간 형식인지 검증

4️⃣ posting4.tsx - 소요시간 입력

  • 숫자 입력 컴포넌트로 분 단위 소요시간 입력
  • 30분 이상 유효성 검사
  • 10분 단위 자동 조정
    → posting4.tsx:26-33

5️⃣ posting5.tsx - 인원 수 입력

  • 숫자 입력으로 인원 수 입력
  • 사용 가능한 예산(시간)과 비교하여 유효성 검사
  • 총 비용 계산 및 잔액 미리보기 표시
    → posting5.tsx:91-97

6️⃣ posting6.tsx - 활동 유형 선택

  • 카테고리 버튼 그리드 제공
  • 하나의 카테고리만 선택 가능
    → posting6.tsx:78-81

7️⃣ posting7.tsx - 제목 입력

  • PostingInput.InputTitle 사용
  • 20자 제한, 공백 방지
    → posting7.tsx:57-60

8️⃣ posting8.tsx - 내용 입력

  • PostingInput.InputContent 사용
  • 100자 이내 상세 설명 입력
  • API 호출을 위한 데이터 포맷팅
    → posting8.tsx:26-42

9️⃣ posting9.tsx - 완료 확인

  • 게시물 생성 성공 메시지
  • 게시물 보기 버튼
  • 상태 초기화
    → posting9.tsx:16-48

🔄 데이터 흐름

flowchart LR
A[사용자 입력] --> B[Recoil postingState 저장]
B --> C[다음 단계로 이동]
C --> D[모든 단계 완료]
D --> E[API 전송 형식으로 변환] --> F[서버에 데이터 전송]
Loading
  • 각 단계는 사용자 입력을 받아 postingState에 저장합니다.
  • 최종 단계에서 모든 입력 데이터를 모아 API 형식으로 변환한 뒤, 서버에 전송합니다.
    → posting8.tsx:57-60

🗺️ 라우팅 구성

  • 모든 posting 페이지는 라우터에 등록되어 있으며, 인증이 필요한 경로로 설정되어 있습니다.
    → index.tsx:87-126
Clone this wiki locally