Skip to content

binder-binFinder/binder-front-end

Repository files navigation

🗑️ 주변 쓰레기통을 찾아보자 Binder 🚮

Group 34158

프로젝트 소개

  • 주변 쓰레기통 찾아주는 사이트

팀원 구성

Front

| 박지원 | 김윤수 |


1. 개발 환경

  • Front : Next, SASS, React Query, Axios, React hook form, Jotai
  • 버전 및 이슈관리 : Github, Github Issues, Github Project
  • 협업 툴 : 뤼이도, Notion, Figma, 카카오톡
  • 서비스 배포 환경 : Vercel

2. 브랜치 전략

  • Github-flow 전략을 기반으로 main, dev 브랜치와 feature , fix 브랜치를 운용했습니다.
  • main, dev, feat , fix 브랜치로 나누어 개발을 하였습니다.
    • main 브랜치는 배포 단계에서만 사용하는 브랜치입니다.
    • develop 브랜치는 개발 단계에서 github-flow의 master 역할을 하는 브랜치입니다.
    • Feat 브랜치는 기능 단위로 독립적인 개발 환경을 위하여 사용하고 merge 후 각 브랜치를 삭제해주었습니다.
    • Fix 브랜치는 Feat 브랜치로 기능 구현 후 수정 사항이 생겼을 때 사용하고 merge 후 각 브랜치를 삭제해주었습니다.

3. 프로젝트 구조

src
  ├─components
  │  ├─common
  │  |  ├─Modal
  │  |  └─index.tsx
  │  ├─domain
  │  |  ├─signin
  │  |  |─SigninBtn
  │  |  └─index.tsx
  │	...
  ├─pages
  │  ├─signin
  │  | └─index.tsx
  │	...
  ├─lib
  │  ├─apis
  │  | └─axios.ts
  │  ├─atoms
  │  ├─constants
  │  ├─hooks
  │  └─mapUtils
  |
  └─styles
	
public
  ├─images
  └─fonts

4. 역할 분담

👻김윤수

  • UI
    • 페이지 : gnb, 검색, 마이페이지, 어드민페이지
    • 공통 컴포넌트 : 모달(하단, 안내문구), 스플래쉬, 튜토리얼, 카드
  • 기능
    • 현위치 좌표 따라오기
    • 검색 키워드 입력시 자동완성
    • 최근검색
    • 즐겨찾기
    • 무한 스크롤(최근 검색, 알림 등)
    • 알림
    • 프로필 등록 수정
    • 공유하기
    • 다크모드
    • 관리자 페이지 처리 상태 별 리스트
    • ga 연결과 이벤트 생성

👀 박지원

  • UI
    • 페이지 : 홈 페이지, 로그인 페이지, 내 쓰레기통 상세 페이지(수정 / 등록), 관리자 - 쓰레기통 심사(등록 / 수정 / 신고)페이지
    • 공통 컴포넌트 : 버튼, 맵, confilm 모달, 토스트
  • 기능
    • 카카오 맵 API 연결 및 맵 관련 세부 기능 구현
    • 쓰레기통 등록/수정
    • 쓰레기통 추천 카드 구현
    • 쓰레기통 상세 보기 구현 - 즐겨찾기, 좋아요, 싫어요, 신고 기능
    • 댓글 구현 - 리스트 무한 스크롤, 등록, 수정, 삭제, 좋아요, 싫어요 기능
    • 관리자 페이지 쓰레기통 등록 심사 (거절 / 승인) 구현
    • 관리자 페이지 쓰레기통 신고 심사 (거절 / 승인 / 수정) 구현
    • 관리자 페이지 쓰레기통 수정 심사 (거절 / 승인 / 수정) 구현
    • 드래그 훅 구현 - 드래그 사용하는 부분에서 모바일 브라우저 새로고침 막기
    • 토글 훅 구현

5. 개발 기간 및 작업 관리

개발 기간

  • 전체 개발 기간 : 2024-08-27 ~ 2024-10-12

작업 관리

  • GitHub Projects와 Issues를 사용하여 진행 상황을 공유했습니다.
  • 6주간 주 3회 전체 회의를 진행하며 작업 순서와 방향성에 대한 고민을 나누고 노션에 회의 내용을 기록했습니다.
  • 카카오톡과 노션으로 당일 진행 상황을 공유 했습니다.

6. 개선 목표

  • 더욱 사용자의 입장에서 좋은 웹이 될 수 있도록 속도 향상 및 효율적인 코드 작성.
  • 실 사용자의 피드백을 받아 사용자 경험을 향상시킬 기능 추가.
  • 테스트 코드 작성을 통해 신뢰성 향상.

About

Resources

Stars

0 stars

Watchers

1 watching

Forks

Releases

No releases published

Packages

 
 
 

Contributors