Final Project - 풋살 팀 매칭 사이트(Match-Up)

프로젝트 소개

🔎 개발 목적

• 풋살 경기할 팀과 경기장을 찾고 경기 결과를 토대로 팀 순위도 확인할 수 있습니다.

 

🗓️ 진행기간

• 2023년 05월10일~2023년06월12일

• 2023.05.10 ~ 2023.05.14 : 회원가입 페이지 UI 구현, 로그인페이지 UI 구현, 회원가입 페이지 백엔드 구현, Jquery로 만든 프론트 vue로 교체, 회원가입 페이지 프로필 이미지 추가, 회원가입 페이지 이메일 인증 추가
• 2023.05.15 ~ 2023.05.21 : 회원가입 페이지 중복검사 구현, 마이페이지 UI 구현, 마이페이지 회원정보 수정 백엔드 구현, 마이페이지 아이디 및 비밀번호 찾기 백엔드 구현
• 2023.05.22 ~ 2023.05.28 : 회원탈퇴, 아이디 및 비밀번호 찾기 UI 구현, 비밀번호 암호화 하기, 관리자 기능 회원 목록,회원정보 수정하기
• 2023.05.29 ~ 2023.06.04 : 회원 검색 기능 구현, 관리자 권한-회원탈퇴 구현, 회원 탈퇴 후 페이지 만들기, 구장 이용 통계 구현
• 2023.06.05 ~ 2023.06.12 : 메인페이지 광고 이미지 슬라이드 만들기, 고객센터 페이지 백엔드 및 ui 구현

 

📌 구현기능

• 팀 관련 기능
• 매칭 게시판 및 웹소켓 채팅 기능
• 회원 및 관리자(회원목록,수정,삭제) 기능
• 매칭 페이지 
• 구장 예약 시스템 및 결제 기능
• 관리자페이지(구장 등록,수정,삭제)기능

 

📌 개발환경

• 운영체제: Window 10
• 개발도구: Spring Tool Suit4
• DB: ORACLE
• Language: JAVA17 / HTML / CSS / JSP / JavaScript / jQuery / Vue JS
• 형상관리 툴: GitHub
• API: KAKAO 결제 API / 지도 API
• 디자인 툴 : bootStrap

 

유스케이스 다이어그램

 

🙋🏻 내가 구현한 페이지들

관리자페이지

관리자 페이지에서 회원목록, 수정, 삭제, 검색과 메인 이미지 리스트, 구장별 결제 통계 구현했습니다.

1. 회원 관리:

이 페이지에서는 회원들의 상세 정보를 확인하고, 회원 정보를 수정하거나 탈퇴시킬 수 있습니다. 또한 아이디, 등급, 이름 등을 기준으로 회원을 검색하여 찾을 수도 있습니다. 회원 관리 페이지를 통해 회원들의 정보를 효율적으로 관리할 수 있습니다.

 

2. 메인 이미지 슬라이드 관리 :

이 기능은 메인 페이지에 표시되는 이미지 슬라이드를 관리하는 페이지입니다. 이 페이지에서는 이미지를 등록하고 삭제할 수 있습니다. 이미지 등록은 무제한으로 가능하며, 새로운 이미지를 추가할 수 있습니다. 이미지 삭제는 최소한 1개의 이미지는 남겨두어야 하며, 그 외의 이미지들은 삭제할 수 있습니다. 이를 통해 메인 페이지의 이미지 슬라이드를 다양하게 구성하고 필요에 따라 업데이트할 수 있습니다.

 

3. 통계 관리 :

이 페이지에서는 두 가지 통계를 제공합니다. 첫 번째는 지역별 및 구장별로 총 결제 금액과 순위를 나타내는 통계입니다. 이 통계는 각 지역 및 구장에서의 결제 금액을 종합하여 순위를 매겨 표시합니다. 이를 통해 어떤 지역이나 구장에서 많은 결제가 이루어지고 있는지를 파악할 수 있습니다.

 

두 번째 통계는 팀의 승패를 나타냅니다. 이 통계에서는 각 팀이 얼마나 많은 승리와 패배를 기록했는지를 나타냅니다. 일반적으로 1등부터 5등까지의 순위만을 표시하며, 팀의 승패 여부를 나타내어 어떤 팀이 우수하게 활동하고 있는지를 파악할 수 있습니다. 이를 통해 경기 결과와 팀의 성과를 관리하고 분석할 수 있습니다.

 

회원페이지

 

회원가입, 로그인, 아이디 및 비밀번호 찾기 페이지를 구현했습니다.

 

1. 회원가입 :

이름, 아이디, 비밀번호, 성별, 이메일, 생년월일, 프로필 이미지, 약관 동의를 하면 회원가입이 완료됩니다. 아이디와 이메일은 중복검사를 위해 비동기 통신을 사용하여 확인합니다. 이는 실시간으로 입력한 아이디와 이메일이 이미 사용 중인지 확인하는 과정을 의미합니다. 이를 통해 중복된 아이디나 이메일을 방지할 수 있습니다

 

2. 로그인 :

사용자가 아이디와 비밀번호를 입력하여 로그인을 시도합니다.

서버는 입력된 아이디가 존재하는지 확인하기 위해 데이터베이스에서 해당 아이디를 검색합니다.

아이디가 존재한다면, 해당 아이디에 대한 암호화된 비밀번호를 가져옵니다.

사용자가 입력한 비밀번호를 암호화하여, 데이터베이스에 저장된 암호화된 비밀번호와 일치하는지 확인합니다.

입력한 비밀번호와 암호화된 비밀번호가 일치한다면, 로그인이 성공적으로 완료됩니다.

 

3. 아이디 찾기 :

아이디 찾기를 동기 통신으로 구현한 이유가 보안과 악의적인 사용자로부터의 공격 방지를 위해서입니다. 비동기 통신은 클라이언트가 요청을 보낸 후 서버로부터 독립적인 응답을 기다리지 않고 다른 작업을 수행할 수 있기 때문에, 악의를 가진 사용자가 여러 개의 요청을 동시에 보내거나 임의의 입력을 시도하여 아이디를 알아낼 수 있는 가능성이 있습니다.

 

동기 통신은 클라이언트가 요청을 보낸 후 서버로부터 응답이 도착할 때까지 기다리는 방식이므로, 요청과 응답이 직렬적으로 처리되어 보안에 좀 더 안전한 방법으로 아이디를 찾을 수 있습니다.

 

4. 비밀번호 찾기 :

사용자는 비밀번호를 잊어버렸을 때, 아이디와 등록된 이메일 주소를 입력하여 비밀번호 찾기 요청을 합니다.

서버는 입력된 아이디와 이메일 주소를 검증합니다. 아이디와 이메일 주소가 일치하는 회원 정보를 찾습니다.

일치하는 회원 정보가 있는 경우, 임시 비밀번호를 생성하고 이메일로 발송합니다. 임시 비밀번호는 보안을 위해 랜덤한 문자열로 생성됩니다.

사용자는 이메일로 받은 임시 비밀번호를 사용하여 로그인할 수 있습니다.

 

 

회원전용 마이페이지

회원전용 마이페이지입니다.

1. 프로필 수정 :

이미지와 이름 수정이 가능합니다.

 

2. 비밀번호 변경 :

사용자는 현재 비밀번호와 새로운 비밀번호를 입력하여 비밀번호 변경 요청을 합니다.

서버는 사용자가 입력한 현재 비밀번호와 세션에 저장된 아이디의 암호화된 비밀번호를 비교하여 일치 여부를 확인합니다.

현재 비밀번호가 일치하는 경우, 새로운 비밀번호를 입력 받습니다.

입력된 새로운 비밀번호를 암호화하여 회원 정보에 저장합니다.

 

3. 회원 탈퇴 :

비밀번호를 입력받아 회원의 탈퇴를 처리합니다. 비밀번호를 일치 여부에 따라 회원 정보를 삭제하고 세션에서 해당 회원의 정보를 제거합니다. 이를 통해 회원 탈퇴 후 사용자는 로그아웃되며, exitFinish 페이지를 통해 탈퇴 완료 안내를 받게 됩니다.

 

📝 마무리

이번 프로젝트에서는 회원 및 관리자 관련 기능을 맡아서 진행했습니다.
처음에는 가장 많이 배운 부분이라서 쉽게 끝낼 수 있다고 생각했지만, 기존에 있던 로직들을 mybatis로 변경하고 새로운 기술인 Vue.js와 Bootstrap을 적용하려니 시간이 많이 걸렸습니다.
하지만 이런 새로운 기술을 접함으로써 다양한 라이브러리에 대한 매력을 느꼈습니다.

가장 아쉬운점은 카카오 로그인 api를 구현해보고 싶었지만 점점 수정하는 부분도 많아지고 추가되는 기능도 많아졌기에 구현해보지 못한 것이 가장 아쉬웠습니다.

나중에 사이드 프로젝트를 진행하게 되면 소셜 로그인 api 기능을 꼭 구현해보고 싶습니다.

 

📌 Git Hub 주소 

https://github.com/ChaeW00/FINAL-KH11

GitHub - ChaeW00/FINAL-KH11