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

---