- 팀 소개
- 프로젝트 개요
- 설계의 주안점
- 개발환경
- 주요기능
- Document
개발배경
✔️ 알뜰폰의 가입자수와 이동통신 시장 점유율이 높아지면서 소비자의 알뜰폰 요금제 관심사 또한 높아짐.
✔️ 수요에 따른 알뜰폰 요금제 상품 공급량이 증가.
✔️ 이에 따라 소비자는 수많은 요금제들 중에서 본인에게 적합한 요금제를 선택해야하는 문제에 직면함.
프로젝트 목표
✔️ 가격, 데이터 용량 등 사용자의 취향에 맞는 적합한 요금제를 추천하는 주요 기능 구현.
✔️ 통신사와 관리자 입장에서 사이트 이용방식을 파악함.
✔️ 사용자의 요금제 관련 정보 습득과 편의를 고려한 기능 구현
벤치마킹 사이트
모요 사이트 (https://www.moyoplan.com/)
주안점
✔️ 벤치마킹 사이트를 참고하여 사용자의 편의를 생각한 UI 직접 구현
✔️ 알뜰폰 요금제 open api를 이용하여 데이터 확보/맞춤 요금제 추천 기능 구현
✔️ Spring MVC를 통한 게시판 구성
✔️ 벤치마킹 사이트에서 확인할 수 없었던 통신사/관리자 입장에서의 유효한 기능 구현
✔️ 스프링 시큐리티를 이용한 로그인으로 유저 인증과 권한 감사, 비밀번호 암호화, 보안성 강화
✔️ Lombok을 이용하여 어노테이션 설정으로 간단하게 vo의 메소드를 생성, 작성 코드 단순화
✔️ AJAX를 통해 비동기 처리 구현
목표 기능
🙍♀️ 사용자
- 요금제 조회
- 맞춤 요금제 조회
- 통신사 리뷰
- 문의 게시판
- 요금제 가입 신청
- 최근 본 요금제
- 찜하기
📱 통신사
- 자사 요금제 관리
- 요금제 가입 신청 관리
- 자사 리뷰 관리
- 챗봇 운영
- 요금제 이용 통계 조회
👨🏭 관리자
- 대시보드
- 회원 관리
- 문의,리뷰,신고 내역관리
- 사이트 이용, 요금제 총괄 통계 조회
- 자주 묻는 질문 관리
✅ 시큐리티 로그인 및 회원
Spring Security를 활용하여 로그인 기능을 구현, 비밀번호의 경우 bcrypt 암호화를 적용
- security-context.xml 시큐리티 설정
- jdbc-user-service 에서 로그인 폼에 입력한 내용을 DB와 비교하여 로그인이 된다.
- 로그인 한 유저의 정보를 가져와서 유저이름과 권한을 저장한다.
- KakaoService에서 토큰값을 받아온다.
- kakaoService에서 토큰값으로 현재 로그인 한 유저의 정보를 받아온다.
- kakaoController에서 받은 정보를 데이터베이스와 비교하여 유저 정보가 없으면 회원가입을 하고 해당 정보로 Security Authentication을 생성해 권한을 만들고 로그인한다.
- kakaoController에서 받은 정보를 데이터베이스와 비교하여 유저 정보가 있으면 해당 정보로 Security Authentication을 생성해 권한을 만들고 로그인한다.
- 로그인 페이지 하단의 아이디 찾기 클릭
- 이름, 이메일 인증 후 데이터베이스 조회
- 해당하는 정보와 일치하는 ID 화면에 출력
- 휴면계정이라면 휴면풀기 버튼 생성
- 휴면계정이 아니라면 로그인하기, 비밀번호 찾기 버튼 생성
- 로그인 페이지 하단의 비밀번호 찾기 클릭
- 아이디 이메일 인증 후 데이터베이스 조회
- 해당하는 정보와 일치하면 비밀번호 재설정
- 로그인 페이지로 이동
- 사용자, 통신사를 선택하면 해당하는 회원가입 폼이 생성
- 회원가입에 필요한 정보를 모두 적지 않으면 에러 메시지 생성
- 이메일 인증 버튼을 누르면 해당 이메일로 인증번호를 보내고 입력한 인증번호와 같은지 확인
- 아이디 중복확인 버튼을 누르면 입력한 아이디를 사용할 수 있는지 데이터베이스와 비교
4-1. 아이디 생성이 가능하다면 '사용 가능한 아이디입니다' 메시지 출력
4-2. 아이디 생성이 불가하다면 '사용 불가능한 아이디입니다' 메시지 출력 - 비밀번호 정규식 체크를 통해 사용 가능한 비밀번호인지 확인
5-1. 비밀번호와 비밀번호 확인에 입력한 문자열이 동일한지 확인 - 주민등록번호, 전화번호, 법인등록번호, 사업자등록번호는 정규식을 통해 확인
✅ 마이페이지
- 비밀번호 확인을 통해 정보 수정 폼 생성
- 이름과 아이디는 유저 정보로 작성
- 비밀번호 정규식 체크를 통해 사용 가능한 비밀번호인지 확인
5-1. 비밀번호와 비밀번호 확인에 입력한 문자열이 동일한지 확인 - 이메일 인증 버튼을 누르면 해당 이메일로 인증번호를 보내고 입력한 인증번호와 같은지 확인
- 전화번호는 정규식을 통해 확인
- 정보 변경 후 로그아웃 처리
- 상단 리뷰 작성을 누르면 작성할 수 있는 리뷰 폼 생성
- 리뷰 작성 버튼을 누르면 글 작성 폼과 별점 선택 폼 생성
2-1. 작성 버튼 누르면 리뷰 저장 - 상단 작성한 리뷰 누르면 작성된 리뷰 리스트 생성
- 수정 버튼 누르면 수정 폼으로 변경
4-1. 수정 버튼 누르면 수정한 내용으로 변경 - 삭제 버튼 누르면 해당 리뷰 삭제
- 상단 신청완료, 승인완료, 승인보류 선택시 해당 요금제 리스트 생성
- 각 리스트 상세 조회 누를시 상세 조회 페이지로 이동
- 찜한 요금제 리스트 생성
- 각 리스트 하트 누르면 찜 삭제
- 자세히 보기 누르면 해당 요금제 페이지로 이동
- 요금제 페이지 이동시 최근 본 요금제 추가
- 자세히 보기 누르면 해당 요금제 페이지로 이동
✅ 요금제 검색 / 맞춤형 요금제
✅ 공지사항 / 통신사 페이지
✅ 요금제 신청하기
- 약관에 모두 동의하지 않고 다음 버튼 클릭하면 메시지 출력
- '약관에 모두 동의' 체크하면 모든 항목에 체크 표시
- 모든 동의 항목에 체크하면 모두 동의에 체크 표시
- 한 항목이라도 체크하지 않으면 모두 동의에 체크 취소
- 가입 조건을 모두 선택하지 않고 구매신청 버튼 클릭하면 메시지 출력
- 선택한 조건 정보를 세션에 담아서 신청서 작성 페이지로 이동
- 사용자의 고객 정보가 입력되어 있고 수정 가능
- 다음 우편번호 API 사용
2-1. 입력한 정보와 우편번호 찾기 결과, 상세주소에 입력한 정보를 더하여 주소 저장 - input마다 입력할 수 있는 문자 혹은 길이 제한
- 카드납부 혹은 계좌납부를 선택하면 신청한 납부 수단의 정보를 작성할 수 있는 입력폼이 나타남
3-1. '고객정보와 동일' 체크하면 사용자 정보 자동완성 - '룬 알고리즘'으로 유효한 카드번호인지 확인
- 모든 항목을 입력하지 않았을 경우 신청하기 클릭 시 alert
- 신청 성공하면 가입 정보 담은 메일 전송, '마이페이지-신청한 요금제'로 이동
✅ 요금제 상세페이지
✅ 문의게시판
- 제목 혹은 내용을 선택하여 원하는 키워드로 검색 가능
- 질문 목록을 한 페이지당 5개로 페이징
- 질문 상세보기 페이지로 이동하면 조회수 증가
- 질문 제목 혹은 내용 모두 입력하지 않으면 alert
- 답변, 댓글 작성 시 내용이 없으면 alert
- 답변, 댓글 수정 시 비어있거나 수정할 내용이 없으면 alert
- 수정 버튼을 클릭하면 기존 답변/댓글 자리에 수정 input이 나타남.
3-1. 다시 수정 버튼 클릭하면 돌아옴
- 내가 작성한 질문의 제목과 답변수 목록 출력
- 제목 클릭하면 해당 질문 상세보기 페이지로 이동
- 내가 작성한 답변 목록 출력
- 내가 작성한 질문/답변의 수정 및 삭제 가능
✅ 통신사 대시보드
- 통신사가 로그인하고 마이페이지로 이동
- 페이지 진입한 시스템 시간 표시
- 해당 통신사 로고 출력 3-1. 로고 옆 세팅 아이콘 클릭시 내 정보수정하기 페이지 즉시 이동
- 리뷰/가입자 수, 등록 요금제 수 통계 텍스트로 표시
- 최근 7일간 가입자 수 차트
- 인기 상위 5개의 요금제 간단 정보
6-1. 제목 클릭시 해당 요금제 상세정보페이지 연결 - 가장 최신 리뷰 3개 전시, 더 보기 링크
7-1. 리뷰 내용이 25자 이상일 경우 그 이상 텍스트는 ··· 으로 대체
✅ 통신사 정보
- 통신사의 기본정보/상세정보 조회 가능
- 이전 정보가 입력되어있는 상태로 수정 진행
- 우편번호 찾기 api 이용
- 각 input 마다 입력 양식 제한
- 지원통신망의 경우, 특정 통신망 체크 시 해당 통신망의 고객센터번호 입력칸 생성
5-1. 미체크 시 입력칸 숨김 처리
5-2. 숨김 처리 상태로 등록할 경우 고객센터번호 미운영으로 처리 - 로고 이미지 파일 수정하지 않는 경우 이전 로고 이미지로 자동 저장
✅ 자사 요금제 관리
- 해당 요금제 삭제 버튼 클릭 시 모달창 발생
- 체크박스 미체크 상태에서 선택 삭제 버튼 클릭시 alert 창 발생
- 체크박스 체크 후 선택 삭제 버튼 클릭 시 모달창 발생
- 체크박스를 통해 체크한 데이터는 ajax를 통해 전달
- 삭제 상태가 삭제로 변경
5-1. 삭제 상태일 경우 수정/삭제 버튼 비활성화 - 요금제가 삭제될 시 해당 요금제에 대한 찜하기, 최근 본 요금제 기록에서 삭제하기 위해 트리거 작동
✅ 자사 요금제 가입 신청 관리
- 해당 통신사의 가입 신청서 목록 조회 가능
- 한 페이지의 목록 출력 개수 선택 가능
- 조건별 검색 기능
3-1. 검색키워드(요금제명 / 신청자) 검색 가능
3-2. 가입신청상태(전체/신청완료/승인완료/승인보류) 검색 가능
3-3. 기간으로 조회 가능
3-4 키워드와 신청상태 , 기간 동시 검색 가능 - 결과에 따른 출력 개수 텍스트로 표시
- 페이징 처리
- 신청일자 활용하여 신청번호 생성
6-1. 하이픈 뒷 자리는 총 6자리 숫자로 고정 - 가입신청상태 별로 텍스트 색상 다르게 함
- 상세보기 버튼 클릭시 요금제 가입 신청서 상세정보 페이지로 이동
- 가입신청서 없을 시 문구 출력
- 가입 신청 상세조회 페이지에서 가입 신청 상태 변경 가능
10-1. 신청 상태에 따른 텍스트 색상 변경
10-2. 승인/보류 버튼 클릭시 확인 alert 창 표시
10-3. ajax를 사용하여 상태 변경 시 화면 즉시 반영
✅ 자사 리뷰 관리
- 해당 통신사에 대한 모든 리뷰 조회 가능
1-1. 사용자에게 보여지지 않는 숨김 처리된 리뷰 또한 조회 가능 (상태 : 삭제) - 한 페이지의 목록 출력 개수 선택 가능
- 결과에 따른 출력 개수 텍스트로 표시
- 페이징 처리
- 사용자 아이디, 리뷰 작성일자, 리뷰 내용, 별점 확인 가능
5-1. 리뷰 내용 길이에 따라 리뷰 박스 길이 또한 자동으로 증가 - 신고처리상태(전체/신고처리중/삭제/반려)에 따른 조회 가능
6-1. 해당 상태 라디오버튼 체크 시 화면 즉시 반영 - 등록된 리뷰 없을 시 문구 출력
- 특정 라디오버튼 체크된 상태일 경우 페이지 이동시에도 체크 상태 유지
✅ 자사 통계 조회
- 구글 차트 이용
- 해당 통신사의 요금제 별 가입자 수
1-1. 두 개의 열로 누적 / 일일 가입 자수 표시
1-2. 가입자 수가 0인 경우에도 표시 - 시스템 시각 기준 최근 일주일 간 해당 통신사의 모든 요금제 가입자 수에 대한 열 차트
- 현재 기준 가장 많은 가입자 수를 가진 요금제의 연령대 비율에 대한 원형 차트
- 현재 기준 가장 많은 가입자 수를 가진 요금제의 성별 비율에 대한 원형 차트
- 해당 통신사의 요금제를 가입한 사용자들의 연령대 비율에 대한 원형 차트
- 해당 통신사의 요금제를 가입한 사용자들의 성별 비율에 대한 원형 차트
✅ 대시보드
- ajax를 사용하여 차트 데이터를 받아옴
- 리뷰, 질문/답변, 신고글은 최신글 3개까지만 보여짐.
- 게시글의 제목이 23자보다 긴 경우의 조건을 <c:when>태그를 사용하였고 참일 때, fn:substring() 함수를 사용하여 게시글 제목의 일부분만 출력하도록함.
✅ 관리자 신고 관리
- 신고리뷰 목록에서 미확인/삭제/반려 버튼을 누르면 해당 상태의 목록만 따로 조회 가능
- '미확인', '삭제', '반려' 버튼 클릭 시 reportStatus 값(0,1,2)을 설정하고, reportStatusForm을 제출
- 각각의 버튼은 활성화된 상태와 비활성화된 상태가 있으며, 활성화된 상태일 때 해당 버튼에 'active'가 추가되어 표시
- 3일 이내에 신고된 리뷰는 새로운 리뷰로 간주되어, 목록에서 해당 리뷰 옆에 new 아이콘이 표시
- 상태 처리가 '미확인'인 리뷰는 목록에서 빨간색 글자로 표시
- 검색 옵션을 사용하여 특정 키워드와 일치하는 리뷰를 검색. 검색어를 입력하면 해당 검색어가 포함된 리뷰가 목록에서 필터링
- ajax를 활용하여 신고 리뷰를 삭제/반려 처리
- 삭제/반려 처리 시 "반려(삭제)처리 하시겠습니까?"라는 확인창(confirm) 표시
- 확인을 누르면 처리상태가 '반려' 또는 '삭제'로 바뀐다.
✅ 관리자 문의내역 관리
- 등록된 문의내역 목록을 조회
- 3일 이내에 등록된 문의는 새로운 문의로 간주되어, 목록에서 해당 제목 옆에 new 아이콘이 표시
- 쿠키를 이용한 조회수 무한증가 방지.
- 쿠키 만료 시간을 10초로 설정하여 해당 Q&A 글을 본 이후 10초 이내에 다시 조회하면 중복 조회로 처리되지 않고 조회수가 증가하지 않음.
- 트리거와 ajax를 활용하여 답변 등록, 삭제 시 답변수가 자동으로 증감됨.
- collection을 활용하여 한 게시글의 답변과 답변의 답글 데이터 목록을 받아옴.
- ajax를 사용한 답변 등록
- 답변 등록에 성공하면 ajax로 답변 목록과, 답변 수를 데이터를 받아와 .html()로 초기화하고 새로 받아온 답변 목록과 답변수로 변경
- 등록시 답변 내용이 비어있으면 "댓글 내용을 입력하지 않았습니다."라는 경고창이 표시
- ajax를 사용한 답변 수정
- 답변 수정에 성공하면 ajax로 답변 목록 데이터를 받아와 .html()로 초기화하고 새로 받아온 답변 목록으로 변경
- 관리자(admin)계정의 답변만 수정 버튼이 활성화
- 수정 버튼 클릭 시 해당 답변 내용이 수정할 수 있는 수정폼으로 변경
- 답변마다 고유id를 부여하여 해당 답변만 수정폼으로 변경될수있게 구현
- ajax를 사용한 답변 삭제
- 답변 삭제에 성공하면 ajax로 답변 목록 데이터를 받아와 .html()로 초기화하고 새로 받아온 답변 목록으로 변경
- 관리자(admin)계정의 답변만 삭제 버튼이 활성화
- 삭제를 클릭하면 "삭제하시겠습니까?" 확인창(confirm) 표시
- 답글버튼을 누르면 ajax로 답글목록을 데이터를 받아와 해당 답변의 답글목록이 보여짐.
- ajax를 사용하여 답글 등록
- 답글 등록에 성공하면 ajax로 답글 목록 데이터를 받아와 .html()로 초기화하고 새로 받아온 답글 목록으로 변경
- 등록시 답글 내용이 비어있으면 "댓글 내용을 입력하지 않았습니다."라는 경고창이 표시
- ajax를 사용하여 답글 수정
- 답글 수정에 성공하면 ajax로 답글 목록 데이터를 받아와 .html()로 초기화하고 새로 받아온 답글 목록으로 변경
- 관리자(admin)계정의 답글만 수정 버튼이 활성화
- 수정 버튼 클릭 시 해당 답글 내용이 수정할 수 있는 수정폼으로 변경
- 답글마다 고유id를 부여하여 해당 답글만 수정폼으로 변경될수있게 구현
- 저장을 클릭하면 수정 완료되고, 수정한 내용이 바로 반영되어 보여진다.
- 수정시 답글 내용이 비어있으면 "댓글 내용을 입력하지 않았습니다."라는 경고창이 표시
- ajax를 사용하여 답글 삭제
- 답글 삭제에 성공하면 ajax로 답글 목록 데이터를 받아와 .html()로 초기화하고 새로 받아온 답글 목록으로 변경
- 관리자(admin)계정의 답글만 삭제 버튼이 활성화
- 삭제를 클릭하면 "삭제하시겠습니까?"라는 확인창(confirm) 표시
✅ 통신사 관리
- 통신사 관리 리스트에서 업체명/대표자명을 클릭하여 상세 페이지로 이동
- 가입상태에 따라 페이지 분기 (신청중,반려,탈퇴 - 신청 페이지(applyDetail) / 승인완료- 상세정보 페이지(bizDetail)
2-1. case문 사용하여 화면으로 이동할 때 가져가는 값 다르게 설정) - 신청 중인 통신사 클릭 시 신청페이지로 이동하여 검토 결과(승인,보류) 선택
- 메일 전송 및 신청상태 변동 - 선택한 검토 결과에 따라 전송되는 메일 메시지가 달라진다.
4-1. 보류 - 보류 메일이 보내지며 페이지 이동 없음
4-2. 승인 - 승인 메일이 보내지며 상세 정보 페이지로 자동 이동
- 관리자는 승인완료된 통신사의 정보 조회 및 수정 가능
- 조회/수정 상태에 따라 페이지 분기
2-1. <c:if test="${cmd eq 'read' }">readonly</c:if>를 붙여 하나의 jsp가 두 가지 기능(조회/수정)을 하도록 구성 - 통신사의 상세 정보 수정
3-1. 기본정보 - readonly로 수정 불가
3-2. 팩스번호, 연락처 - jQuery로 유효성 체크(자동으로 하이픈이 들어가면 숫자만 입력할 수 있도록 설정)
3-3. 주소 - 우편번호 API 사용
3-4. 지원통신망, 고객센터 번호
- 체크박스로 지원통신망 선택
- 통신망으로 sk,kt 체크 후 고객센터번호 입력란엔 sk,LG의 고객센터 번호를 기입할 경우 LG의 번호는 자동 삭제, sk번호만 저장되도록 설정
3-5. 요금제 정보- ajax를 이용하여 화면 이동없이 요금제 정보 조회
- 통신사 관리 상세 페이지에서 탈퇴확정을 클릭하여 탈퇴 페이지로 이동
- 탈퇴 메일 전송, 가입상태 탈퇴로 전환
✅ 사용자 관리
✅ 공지사항 관리
- 공지사항 관리 리스트에서 제목 클릭 시 상세 페이지로 이동
- 조회/수정 상태에 따라 페이지 분기
2-1. <c:if test="${cmd eq 'read' }">readonly</c:if> 이용 - 공지사항 관리 리스트에서 작성 클릭 시 작성 페이지로 이동
3-1. 제목,내용 입력해야만 작성 가능 - 삭제 클릭시 글 삭제, 공지사항 관리 리스트로 자동 이동













































































