가는 길 지금

프로젝트 리빌딩

Dev team repository 이곳에서 리빌딩된 프로젝트를 확인하실 수 있습니다.

기획 이유

최근 큰 이슈였던 지하철 시위는 사람들에게 갑작스러운 혼란이었다.

"미리 알았다면 이렇게 했을텐데.."
"이럴때 지금이라도 내려서 다른방법으로 가는게 나을까?"

이 외에 예견치 못한 대중교통 지연 이슈는 일상에 부정적인 영향을 주기 때문에 이런 상황을 알려주고 대응할 수 있도록 돕는 서비스가 필요하다 생각했다.

가는 길 지금은?

대중교통을 이용하면서 발생되는 다양한 이슈들의 원인과 소식을 확인하고 대응 가능하게 하며 유저 커뮤니티를 이용해서 더 다양한 정보를 공유할 수 있는 서비스

• 주변에서 지금 일어나는 교통 이슈 모아보기
  현재 위치를 기반으로 발생하는 교통 이슈를 모아보고 원인을 파악할 수 있어요.
• 커뮤니티에서 직접 교통 이슈 작성하기
  내 주변에서 교통 이슈가 발생했다면 직집 커뮤니티에 글을 작성해서 다른 사람들에게 유용한 정보를 알려줄 수 있어요.
• 관심 키워드 설정으로 내가 보고 싶은 이슈만 골라보기
  나와 관련 있는 교통 이슈만을 파악하고 싶다면 관심 키워드를 설정해 원하는 이슈만 빠르게 파악할 수 있어요.
• 서울시 실시간 교통 이슈 확인하기
  가는길지금에서는 서울에서 발생하는 다양한 교통 이슈 정보를 즉각적으로 업데이트해 지도 위에서 빠르게 확인할 수 있어요.

기술 스택 선정

1. React-Native
   단일 코드 베이스로 크로스 플랫폼에 대응 가능하여 선택했습니다.
2. TypeScript
   TypeScript를 적용해 코드를 바닐라 JS보다 더 명확하게 표현하여 개발의 편의성, 에러를 추적하는 과정 등을 보다 쉽고 빠르게 다루고자 선택했습니다.
3. Tanstack-Query
   상태관리의 과도한 로직을 줄일 수 있고 Data-Fetching에 다양한 옵션을 제공하고 있어서 선택했습니다.
4. Recoil
   Data-Fetching과 구분되어 복잡도가 낮은 구조를 구현함으로써 유지보수성을 높이고자 선택했습니다.
5. Firebase-Cloud-Messaging
   Firebase 기능을 적용해 서버 부담을 줄일 수 있고 개발 편의성을 높이며 크로스 플랫폼 지원이 가능해 프레임워크와 동일한 확장성을 가질 수 있어서 선택했습니다.
6. Patch-Package
   네이티브 코드를 직접 수정하여 라이브러리 제작자의 응답을 기다리지 않고 커스텀한 라이브러리를 사용하고자 선택했습니다.
7. 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