HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
🧚
[1기]최종 프로젝트 데브코스
/
🏀
[팀14] 슬램 - 우리 주변 농구장 예약
/
📝
README.md (프론트)
📝

README.md (프론트)

 

우리 동네 농구장 예약 서비스 slam

프론트엔드 개발자
  • 고종현
  • 권정희
  • 박세림
  • 임경희
백엔드 개발자
  • 권예경
  • 류윤정
  • 서동성
 

프로젝트 명

slam 🏀
 

프로젝트 주제

우리 주변 농구장 현황을 빠르게 찾아볼 수 있는 길거리 농구인을 위한 커뮤니티 웹앱 서비스
  • 길거리 농구인들이 보다 편하게 게임을 즐길 수 있도록 농구장별 커뮤니티를 제공하는 서비스
  • 동네 주변의 농구 코트 정보를 확인할 수 있고, 일자별, 시간별로 해당 코트 이용 예정인 플레이어 수를 확인할 수 있는 서비스
  • 즉흥으로 코트를 찾아가도 게임을 진행할 수 있는 코트를 확인할 수 있는 서비스
  • 특정 농구 코트를 이용하는 플레이어들끼리 소통할 수 있는 공간을 마련해주는 서비스
 

프로젝트 타겟

동네 기반으로 길거리 농구를 즐기고 싶은 사람
쉽고 빠르게 농구 예약을 하고 싶은 사람
 

프로젝트 제안 배경

  • 즉흥으로 함께 플레이할 사람들을 구하는 일이 많은 길거리 농구인들에게 꼭 필요한 서비스
  • 동네 기반으로 길거리 농구인들 간 커뮤니티를 형성하고자 하는 길거리 농구인들의 높은 니즈
  • 해당 컨셉으로 개발된 서비스가 몇몇 있을 정도로 수요층이 확보된 컨셉이나 성공을 거둔 서비스가 없는 아쉬움
  • 기존 서비스에 없는 미리 농구장 방문 예약을 하고 현황을 확인할 수 있는 기능을 도입함으로써 코트에 있는 사람들 현황을 유의미하게 잘 보여줄 수 있다면 길거리 농구인들의 필수 앱으로 자리매김할 수 있는 가능성
 

프로젝트 디테일

  • 익명 사용자가 처음 페이지에 들어왔을 때 농구장 위치와 예약을 미리볼 수 있다.
  • 카카오 로그인을 하면 즐겨찾기, 예약, 농구장 추가 등 서비스를 이용할 수 있다.
  • 지도 뷰에서 현재 위치 기반으로 농구장 코트의 정보와 해당 일자에 예약된 현황을 확인할 수 있다.
  • 사용자는 농구 코트를 방문하고 싶은 날짜와 시간을 선택하고 농구공 유무를 선택해 예약할 수 있다.
  • 자주 가는 코트를 즐겨찾기 할 수 있다.
  • 추가
  • 추가
 
 

프로젝트 기대 효과

  • 길거리 농구인들이 편하게 소통할 수 있는 플랫폼으로 성장할 수 있다
  • 같이 농구할 사람을 쉽게 구할 수 있어 길거리 농구를 활성화시킬 수 있다
 
 

와이어프레임, 디자인

  • figma 링크
 

기술 스택

  • 커뮤니케이션
    • Notion
  • 디자인
    • Figma
  • 개발
    • UI: React
    • SSR / SSG: Next
    • Style: Emotion
    • 정적 타입: TypeScript
    • Fetcher: Axios
    • 상태 관리: Context API + Reducer
    • 실시간: Sockjs + Stomp (웹 소켓)
    • 시간: Dayjs
    • 애니메이션: Lottie
    • 코드: ESLint + Prettier
    • 배포: Netlify
    • 위치 정보: : Geolocation API
    •  

GIT

  • GIT Branch
    • main : 배포용
    • develop : 배포 전 모든 브랜치 병합 및 테스트용
    • feat/ : 개발용
  • Commit message
    • ? build
    • ? ci
    • 📝 docs : Add or update documents
    • ✨ feat : Introduce new features
    • 🐛 fix : Fix a Bug
    • 🚑 hotfix : Critical hotfix
    • ⚡ perf : Improve performance
    • ♻️ refactor : Refactor code
    • ⏪ revert : Revert chages
    • 💄 style : Add or update UI and style files
    • ✅ test : Add, update, or pass tests
    • ? chore
    • 🚧 wip : Work in progress
    • 🔧 config : Add or update configuration files
    • 🚸 improve : Improve performance
  • Branch name convention
    • 종류/페이지명/기능이름
    • (ex) [ hotfix / refactor / feat ] / [페이지명] / [기능이름]
    •  

Server Repo