축구 모임 만들기 Application

개발 동기

매주 토요일 저녁 마다 축구 모임이 있다. 축구를 사랑하기 때문에, 축구하는 그 시간은 나에게는 정말 소중한 시간이다. 보통 그 시간에 함께 축구하기 위해서 모이는 인원은 14명정도 되는데, 매번 할 때 마다 모이는 인원이 비슷한데도, 어김없이 금요일이되면 한 사람이 축구하는 인원들한테 각각 연락을 하여 축구인원을 모은다. 이러한 불편함을 없애고자 축구 모임 만들기 Application을 만들어보고자 한다.

 

목표

• 간단하지만 Application이지만 deploy까지 해서 사용자들에게 사용해보게 하기
• 새롭게 배운 React를 통해서 React에 대한 더 깊은 공부하기
• 뭐가 될 지는 모르겠지만 한단계 성장하기

사용 스킬

 

애플리케이션 구조

구현 기능

• 회원가입
• 로그인
• 축구방 리스트
• 축구방 만들기
• 축구방 별로 참가할 수 있는 기능 구현

화면 UI

• 로그인 / 회원가입

• 방 개설 목록 / 방 상세

 

 

 

Back-end 설계

firebase에서 제공해주는 Authentication, Realtime Database, Storage API를 이용하여 서버단 구현

 

Application 구성

common ⇒ colors.css 공동적으로 사용되어지는 색상, 사이즈 등 css 속성을 모아두었음.

components ⇒ application에 사용되어지는 component (login, register, meetingList)가 있다.

service ⇒ 서버와 연결되는 환경설정과 API를 이용하는 구문이 있다.

완성된 프로젝트 화면

• 데스크탑

 

 

• mobile

 

 

Git-hub

https://github.com/DaeseongLee/football-app

Hoisting

https://react-football-5b51f.web.app/