Dev team repository 이곳에서 리빌딩된 프로젝트를 확인하실 수 있습니다.
최근 큰 이슈였던 지하철 시위는 사람들에게 갑작스러운 혼란이었다.
"미리 알았다면 이렇게 했을텐데.."
"이럴때 지금이라도 내려서 다른방법으로 가는게 나을까?"
이 외에 예견치 못한 대중교통 지연 이슈는 일상에 부정적인 영향을 주기 때문에 이런 상황을 알려주고 대응할 수 있도록 돕는 서비스가 필요하다 생각했다.
대중교통을 이용하면서 발생되는 다양한 이슈들의 원인과 소식을 확인하고 대응 가능하게 하며 유저 커뮤니티를 이용해서 더 다양한 정보를 공유할 수 있는 서비스
- 주변에서 지금 일어나는 교통 이슈 모아보기
현재 위치를 기반으로 발생하는 교통 이슈를 모아보고 원인을 파악할 수 있어요.- 커뮤니티에서 직접 교통 이슈 작성하기
내 주변에서 교통 이슈가 발생했다면 직집 커뮤니티에 글을 작성해서 다른 사람들에게 유용한 정보를 알려줄 수 있어요.- 관심 키워드 설정으로 내가 보고 싶은 이슈만 골라보기
나와 관련 있는 교통 이슈만을 파악하고 싶다면 관심 키워드를 설정해 원하는 이슈만 빠르게 파악할 수 있어요.- 서울시 실시간 교통 이슈 확인하기
가는길지금에서는 서울에서 발생하는 다양한 교통 이슈 정보를 즉각적으로 업데이트해 지도 위에서 빠르게 확인할 수 있어요.
- React-Native
단일 코드 베이스로 크로스 플랫폼에 대응 가능하여 선택했습니다. - TypeScript
TypeScript를 적용해 코드를 바닐라 JS보다 더 명확하게 표현하여 개발의 편의성, 에러를 추적하는 과정 등을 보다 쉽고 빠르게 다루고자 선택했습니다. - Tanstack-Query
상태관리의 과도한 로직을 줄일 수 있고 Data-Fetching에 다양한 옵션을 제공하고 있어서 선택했습니다. - Recoil
Data-Fetching과 구분되어 복잡도가 낮은 구조를 구현함으로써 유지보수성을 높이고자 선택했습니다. - Firebase-Cloud-Messaging
Firebase 기능을 적용해 서버 부담을 줄일 수 있고 개발 편의성을 높이며 크로스 플랫폼 지원이 가능해 프레임워크와 동일한 확장성을 가질 수 있어서 선택했습니다. - Patch-Package
네이티브 코드를 직접 수정하여 라이브러리 제작자의 응답을 기다리지 않고 커스텀한 라이브러리를 사용하고자 선택했습니다. - ChatGPT-Code-Review
프론트엔드 1인 개발의 단점을 줄이고자 Git-Action을 통해서 AI에게 코드리뷰를 받았으며 개발과 서비스 성장을 위해 선택했습니다.
메인 페이지 | 커뮤니티 페이지 | 마이 페이지 |
---|---|---|
지도 / 내 근처 이슈 페이지 개발
- 네이버 지도 OPEN API
- 근처 이슈 목록 조회 버튼으로 원하는 위치 조회 가능
- 확대 레벨에 따라서 근처 이슈 조회 범위 제어
- 내 근처 이슈 리스트
- 내 근처 이슈 목록 조회
- 게시글 누를 시 해당하는 내용의 답글 페이지로 전환
- 바텀시트 Full Screen 상태일때 리스트 상호작용 가능
- 게시글 누를 시 해당하는 내용의 답글 페이지로 전환
커뮤니티 페이지 개발
- 전체 게시판
- 모든 게시글 목록 조회
- 게시글 누를 시 해당하는 내용의 답글 페이지로 전환
- 관심 게시판
- 관심 키워드 조건 게시글 목록 조회
- 관심 키워드 없을 시 키워드 설정 페이지 전환 가능
- 관심 키워드 별로 게시글 목록 조회 가능
- 게시글 누를 시 해당하는 내용의 답글 페이지로 전환
- 게시글
- 답글 목록 조회
- '도움돼요' 버튼 상호작용 가능
- 답글 작성 페이지 전환 가능
- 이미지 뷰어 페이지 전환 가능
- 게시글 작성, 답글 작성
- 장소 검색 OPEN API 활용해 작성할 글의 위치 결정 가능
- 사진 / 동영상 서버 업로드 가능
알림 페이지 개발
- 푸쉬 알림
- 관심 키워드에 해당하는 게시글 작성될 시 푸쉬 알림
- 작성한 게시글에 답글 달릴 시 푸쉬 알림
- 작성한 게시글에 '도움돼요' 눌릴 시 푸쉬 알림
- 키워드 알림
- 키워드 알림 목록 조회
- 알림 목록 누를 시 해당하는 게시글 페이지로 전환
- 새 소식 알림
- 답글이 달렸거나 '도움돼요'가 눌렸을 때 알림 목록 조회
- 알림 목록 누를 시 해당하는 게시글 페이지로 전환
.
├── env
└── src
├── assets
│ └── icons
├── apis
├── navigations
├── recoil
├── constants
├── hooks
├── components
│ ├── atoms
│ ├── molecules
│ ├── organisms
│ │ ├── common
│ │ ├── cummunity
│ │ ├── home
│ │ ├── joinMember
│ │ └── myPage
│ ├── pages
│ │ ├── alarmPage
│ │ ├── community
│ │ ├── home
│ │ ├── joinMember
│ │ ├── login
│ │ └── myPage
│ └── templates
│ ├── alarmPage
│ ├── community
│ ├── home
│ ├── joinMember
│ ├── login
│ └── myPage
├── styles
│ ├── atoms
│ ├── common
│ ├── molecules
│ ├── organisms
│ └── templates
├── types
│ ├── atoms
│ ├── common
│ ├── molecules
│ ├── organisms
│ └── templates
└── utils