A community that graphs politician evaluations and issues

기술 스택

1. 기획 의도

목표

정치인의 과거부터 현재까지의 이슈들을 돌이켜보며 정치인의 스토리, 잠재력, 가치를 깊게 이해할 수 있는 프로덕트를 제공하고자 합니다.

• 정치인 일대기 시각화: 논란, 이슈였던 정치인을 둘러싼 사건들을 시간 순 그래프로 살펴볼 수 있습니다.
• 유저의 평가: 각 사건마다 사용자들이 직접 긍정적, 부정적 평가를 추가할 수 있습니다. 정치인의 인생 여정에서 여론의 평가를 확인할 수 있고, 사용자들 또한 여론을 살펴볼 수 있습니다.

문제 인식

🧐 정치계는 매일 새로운 이슈와 함께 빠르게 변화하고 있습니다. 정치인을 둘러싼 여론은 시시각각 변화하며, 과거의 사건에 대한 재평가 또한 종종 이루어집니다. 정치발자국은 우리가 정치인을 제대로 평가하고 있을까라는 문제 의식에서 시작했습니다.

페르소나

• 정치인들의 역사를 확인하여 그들을 이해하고자 하는 사용자
• 정치인을 이해하고 싶지만, 뉴스, 위키 등 긴 텍스트에 피로를 느끼는 사용자
• 나와 다른 의견, 여론이 궁금한 사용자

2. 서비스 기능

⚛ 로그인

• 사용자의 편의성을 고려하여 소셜 로그인으로 회원가입과 동시에 로그인이 됩니다.
• 쿠키로 access-token을 보관해 브라우저를 닫은 뒤에도 로그인이 되어있도록 했습니다.
• 토큰으로 백엔드에서 db와 비교해 중복투표 방지를 구현했습니다.

⚛ 메인 페이지

• 정치인의 전체 이슈를 가져와 인생 전체에 대한 그래프를 볼 수 있습니다.

⚛ 정치인 그래프

• 페이지네이션으로 등록된 이슈를 가져와 날짜를 x축에 여론 투표 결과를 Y축에 나타내 선 그래프로 나타내었습니다.
• 부족 별 그래프를 체크박스로 선택할 수 있어 나타내 같은 이슈, 정치인이더라도 부족 간 반응의 차이를 확인 할 수 있습니다.
• 포인트에 마우스를 올리면 O△X 값과 이슈 제목을 나타내는 툴팁을 보여줍니다.
• 포인트 클릭 시 해당 이슈에 투표를 할 수 있는 모달을 띄워 이슈에 대한 평가를 수집합니다.

⚛ 대기 중 이슈

• 모달을 통해 날짜와 이슈 내용을 입력하고 대기 중 이슈로 등록 가능합니다.
• 무한스크롤으로 대기 중 이슈를 가져오도록 구현했습니다.
• 마감이 임박한 top3 이슈가 상위에 고정되어 보여집니다.

3. 프로젝트 구성도

1. 와이어프레임

2. API 문서

3. 아키텍쳐

4. 백엔드 데이터처리 구조

5. 폴더구조

client

📦src
 ┣ 📂api
 ┣ 📂assets
 ┣ 📂components
 ┃ ┣ 📂base
 ┃ ┣ 📂home
 ┃ ┣ 📂layout
 ┃ ┣ 📂politician
 ┃ ┣ 📂politicianList
 ┃ ┗ 📂system
 ┣ 📂pages
 ┣ 📂router
 ┣ 📂store
 ┣ 📂styles
 ┣ 📂types
 ┃ ┣ 📂chart.js
 ┃ ┣ 📂react-full-page
 ┃ ┣ 📂react-slick
 ┣ 📂utils
 ┣ 📜App.tsx
 ┣ 📜main.tsx
 ┗ 📜vite-env.d.ts

server

📦src
 ┣ 📂auth
 ┃ ┣ 📂dto
 ┃ ┣ 📂guard
 ┃ ┣ 📂strategy
 ┣ 📂common
 ┣ 📂issue
 ┃ ┣ 📂dto
 ┣ 📂politician
 ┣ 📂schemas
 ┣ 📂user
 ┃ ┣ 📂dto
 ┣ 📜app.controller.spec.ts
 ┣ 📜app.controller.ts
 ┣ 📜app.module.ts
 ┣ 📜app.service.ts
 ┗ 📜main.ts

4. 팀원 소개 및 역할

이름	역할	담당 부분
배장한	BE	1. Issue API 설계 및 작성 2. 이슈, 정치인 조회 로직 구현 - pagination, aggregate
장소영	BE	1. Issue API 설계 및 작성 2. 이슈 부족별 투표 로직 구현 3. 이슈 등록 투표 로직 구현 4. 정치인 목록 로직 구현
권필주	BE	1. 카카오 소셜로그인 및 토큰 인증 로직 구현 2. 로그인한 유저의 이슈에 대한 투표 결과 반영 로직 구현 3. 유저의 투표 중복 방지 로직 구현 4. aws 배포 및 github action 활용한 CI&CD 구현
황채림	FE	1. chartjs를 통한 메인페이지 정치인목록 그래프 작성 2. Recoil을 통한 전역 상태관리 및 정치인 페이지 이슈 구현 3. 3. emotion을 이용한 전체 css 및 디자인
홍주완	FE	1.chartjs를 통한 정치인 상세페이지 구현 2.chartjs tooltip 직접 구현 3.chartjs로 페이지네이션 적용 4.모달 팝업 구현
김하영	FE	1. vite와 prettier, tsconfig 등 프론트엔드 개발환경 셋팅 2. 메인페이지 및 헤더 등 레이아웃 구현 3. 로그인 구현 4. 이슈 등록 구현