PromleeBlog
sitemapaboutMe

Map: 2 Zero

1. Intro

Map 2 Zero는 지속가능한 삶을 위한 ESG 서비스 입니다.

서울 내 다양한 지역에서 운영되고 있는
제로 웨이스트 샵
의 위치와 리뷰, 판매 제품 정보, 매장 이용 방법, 다양한 이벤트를 한눈에 확인할 수 있는 플랫폼 입니다.

Stack

ho
ho
ho
ho
ho

Tools

ho
ho
ho
ho
ho
logo

2. Project Detail

개발 기간📅: 2024.01.05 ~ 2024.02.25
Github 🔗: map2zero-frontend

인원 구성

PM1
디자이너2
프론트엔드4
백엔드4
프론트엔드와 백엔드 개발자, 디자이너, PM으로 구성된 팀으로 진행되었으며
프론트엔드 팀장
으로 참여
Neordinary Demoday 출품 및 실 사용자 100여명 유치

logo

3. My Role - 1

Kakao 로그인 구현 🔗

Kakao에서 지원하는 Rest api 방식의 Oauth 로그인을 구현
  1. 1차적으로 서버에 로그인을 하겠다는 요청을 보내 가짜 토큰을 발급받음
  2. 사용자가 Kakao 로그인에 성공 시 받은 accessToken과 이전에 가지고 있던 가짜 토큰을 함께 서버로 전송(
    CSRF 방지
    )
  3. 서버에서 받은 로그인 토큰을 이용해 localstorage에 저장하고 로그인

Naver map 활용 데이터 표시 🔗

Naver map Api를 활용하여 매장 상세 정보를 지도에 표시
  1. 현재 위치 권한
    을 받아 사용자의 위치를 기준으로 가까운 매장을 표시
  2. 최적화를 위해 화면에 보이는 매장만 표시하고 이외의 마커는 숨김
  3. 줌앤 아웃, 드래그, 클릭 등의 이벤트를 활용해 사용자가 편리하게 매장 정보를 확인할 수 있도록 구현
logo

4. My Role - 2

기타 주요 페이지 구현 및 배포

매장 정보와 리뷰를 확인할 수 있는 페이지 구현 🔗

  1. 스와이프 이벤트로 매장의 주요 이미지를 확인 가능하도록 구현
  2. 리뷰 작성, 수정, 삭제 기능을 구현
  3. 매장 리뷰 열람 시
    페이지네이션
    제공

점주가 직접 매장 정보를 등록하고 수정할 수 있는 페이지 구현 🔗

  1. 매장 판매 제품과 이벤트를 등록, 수정, 삭제 가능하도록 구현
  2. 매장 정보 등록 시 Naver map api를 활용한 위치 등록 기능 구현

S3, Cloudfront를 이용한 정적 배포와 CI/CD 파이프라인 구축

  1. 커스텀 도메인을 활용하여 Route53등록 및 Cloudfront 배포
  2. Github Actions를 활용하여 배포 브랜치에서 S3로의 자동 Push 설정

관련 UI

logologologo

관련 UI

logologologo

5. 결과 및 느낀 점

팀장으로써..

코드 컨벤션 관리, 일정 관리, 소통 등을 주도
  • 개발 규모는 꽤 컸지만 출품까지 개발 기간이 두 달 정도밖에 되지 않았고 디자인 속도 부진 등의 문제가 생겼지만 정교한 역할 분배와 지속적인 소통으로 잘 마무리했음
  • 데모 출품을 하며 자체 QA에서 발견하지 못한 기능적 문제점도 발견하였고 반응형을 목표로 했지만 모든 기기에 대응하지 못했던 부분도 찾았음
  • 소규모 프로젝트의 한계라고 생각하고 다음 기회에는 어떻게 대응해야 할지 생각하게 된 소중한 경험

개발자로써..

프론트엔드 개발자로서의 성장
  • React, Typescript 를 이용하여 규모 있는 첫 프로젝트를 진행
  • QA 과정에서 예상치 못한 사용자들의 행동을 발견하고 이에 대응하는 법을 배움
  • 유지 보수를 위한 코딩 방법, 컴포넌트 구조 등을 고민하게 되었음
logo