Slam Talk (슬램톡)

농구할 장소와 함께 할 친구를 찾을 수 있는 플랫폼

배포 사이트 바로가기 ⛹️‍♀️⛹️‍♂️

🏀 슬램톡 서비스 소개

🗺 주변의 농구장을 찾을 수 있는 지도 서비스

• 가까운 농구장을 쉽게 찾을 수 있습니다.
• 지도에 없는 농구장이라면 제보하기를 통해 농구장에 대해 제보할 수 있습니다.

👨‍👩‍👧‍👦 농구장 시설마다 연결된 채팅방을 통해 이용할 수 있는 채팅 서비스

• 근처 농구장을 이용하는 사람들과 편하게 약속을 잡을 수 있습니다.
• 지금 이용하는 사람이 있는지 채팅방에 물어보세요!

🤼‍♂️ 시합을 할 상대팀 혹은 용병을 구할 수 있는 매칭 서비스

• 상대팀 찾기 기능을 이용해서 시합할 상대팀을 찾을 수 있습니다.
• 메이트 찾기 기능을 이용해서 조건에 맞는 용병을 구할 수 있습니다.

💬 기능별 용도에 맞는 다양한 채팅 서비스

• 농구장 시설 채팅, 팀 채팅, 메이트 채팅, 1:1 채팅 종류별 채팅 리스트를 한 눈에 확인할 수 있습니다.

📋 카테고리별 게시판

• 중고거래, 질문, 대관양도, 자유게시판 등 목적에 맞는 게시판을 이용할 수 있습니다.

😄 동기와 비동기 프론트엔드 팀원 소개

Pictures
Name	임동기	문총미	강수영
Role	프로젝트 팀장 메인페이지 개발 농구메이트 찾기 개발 상대팀 매칭 개발 관리자 페이지 개발	프론트엔드 팀장 농구장 지도, 제보 기능 개발 회원가입 및 로그인 개발 마이페이지 및 유저 관리 기능 개발(프로필 표시 및 수정, 탈퇴, 비밀번호 재설정 등) 인앱 알림 기능 개발 개발 전반 환경설정(Next.js, GitHub Actions, 테마 등)	채팅 기능 개발 나의 채팅 목록 개발 채팅 룸 타입별 채팅 페이지 개발 게시판 crud 개발 게시글 페이지 개발 게시판 검색, 태그 필터링 구현 개발
GitHub

팀 구성: 프론트엔드 3명, 백엔드 4명
👉 백엔드 팀원 소개 바로가기

📌 프로젝트 아키텍처

농구 앱 특성상 모바일 유저가 많을 것으로 예상되어 반응형 웹앱으로 구현했습니다.

📌 기술 스택

⭐️ 기술 스택 선정 이유

📌 주요 기능 소개

🔗 로그인	🔗 회원가입	🔗 유저 관리	🔗 메인 페이지

🔗 농구장 지도	🔗 농구장 제보	🔗 상대 팀 찾기	🔗 농구 메이트 찾기

🔗 커뮤니티	🔗 1:1 채팅	🔗 농구장 시설 채팅	🔗 관리자 페이지

🕹 프로젝트 구동 방식

우선 Repository clone 후, slam-talk-frontend 폴더에 들어간다.
폴더 바로 밑에 .env 파일을 생성하고 다음과 같은 환경변수를 설정한다.

NEXT_PUBLIC_MAP_KEY=[카카오 개발자 JavaScript 키]
NEXT_PUBLIC_BASE_URL=[프론트 서버 주소 (ex. https://)]
NEXT_PUBLIC_BACKEND_URL=[백엑드 서버 주소 (ex. https://)]
NEXT_PUBLIC_SOCKET_URL=[소켓 주소 (ex. wss://)]

• 실행

cd slam-talk-frontend
npm install
npm run dev

🗄 문서

🌟 기획서 & 기능 명세서 | Figma Wireframe

🌟 Swagger | API 문서 | ERD

📑 동기와 비동기 팀 노션 | 프론트 노션 | 백엔드 노션

🤝 협업 방식

🌟 깃 컨벤션

프로젝트 관리: Github Projects 활용

소통: Slack, KakaoTalk 활용
프론트엔드 팀 규칙

개발 기간: 24/01/11 ~ 24/2/22(프로젝트 발표) 이후 유지보수 중

기타

• 구름 풀스택 2회차 최종 프로젝트 인기상 수상 - 발표(24/02/22) PPT