💙KBS 시청자 센터💙

KBS 시청자 센터의 [ 시청자 청원 기능 ]을 개발하였습니다!

🖥 화면 소개

1️⃣ 최근 청원 page

최근 청원

• 이슈 청원 확인
• 최근 청원 리스트 확인 (본인이 동의한 청원은 동의 수 파란색, 본인이 방문한 청원은 청원 제목 회색 )
• 최근 청원 리스트 검색기능
• 나의 청원 routing
• 청원 리스트 클릭시 상세페이지 routing

2️⃣ 청원 상세보기 page

• 청원 진행중 여부, 마감날짜 확인
• 청원 동의 기능
• 청원 인원 수 확인
• 청원 인원 리스트 확인

3️⃣ 나의 청원 page

• 나의 청원 리스트 확인 (본인이 동의한 청원은 동의 수 파란색, 본인이 방문한 청원은 청원 제목 회색 )
• 나의 청원 리스트 검색가능
• 페이지네이션 적용

4️⃣ 청원 작성 page

• 청원 글 작성을 위한 폼 구현
• 내용 확인 체크
• 필수 입력 사항 미입력시 버튼 기능 비활성화

✨ OUR TEAM

현수	재훈	지민
@borimong	@ljh0608	@urjimyu

현수

초기 세팅, 청원 작성 페이지, 나의 청원 페이지, 페이지네이션 전체, 나의 청원 GET API, 청원 작성 POST API, vercel 배포

재훈

메인 페이지, 청원 동의 POST API, 최근 청원 GET API, README 작성

지민

청원 상세 페이지 청원 내용, 청원 상세 내용 GET API, 청원 동의 리스트 GET API, 헤더, 푸터, README 작성

🛠 기술스택

역할	종류
Library
Programming Language
Styling
State Management
Formatting
Version Control
Deployment

💡 주요 라이브러리

    "axios": "^1.4.0",
    "react-router-dom": "^6.11.1",
    "recoil": "^0.7.7",
    "styled-components": "^6.0.0-rc.1",
    "vite-plugin-svgr": "^3.2.0"

📄 컨벤션 및 브랜치 전략

🔽💙3조 웨비들의 팀노션💙🔽

1️⃣ Commit 컨벤션

• 기본적인것 (feat, fix, chore, ..) 위주로만 지키기!

제목	내용
init	브랜치 첫 커밋
feat	새로운 기능을 추가할 경우
fix	버그를 고친 경우
chore	그 외 자잘한 수정에 대한 커밋(주석추가 문서 수정)
docs	문서 수정에 대한 커밋
style	style: 코드 스타일 혹은 포맷 등에 관한 커밋
refactor	코드 리팩토링에 대한 커밋

브랜치 전략

feat/#이슈번호

브랜치 운영

• main: 최종 Merge를 하는 곳 ❗️
• feat/#이슈번호: 기능을 개발하면서 각자가 사용한 브랜치

📁 폴더 구조

└── 📁 src
  ├── 📁 assets
  │   └── 📁 icons
  ├─── 📁atoms
  ├── 📁components 
  │   └── 📁 common
  │   └── 📁 createPetition
  │   └── 📁 CurrentPetition
  │   └── 📁 myPetition
  │   └── 📁 petitionDetail
  ├── 📁constants
  ├── 📁hooks
  ├── 📁pages
  ├── 📁recoils
  ├── 📁styles
  └── 📁utils