CONSUPPORT

1. CONSUPPORT
• 김기현
• 손정우
• 오정현
- KH정보교육원 –
API, 크롤러 활용 빅데이터 시각화 웹 서비스 개발자 양성과정

2. 목 차
1. 프로젝트 개요
2. 팀 구성 및 개발 일정
3. 프로젝트 개발 환경
4. 프로세스 설계
5. ERD
6. 기능
7. 시연 영상

3. 프 로 젝 트 개 요
CONSUPPOR 는
콘서트(Concert) + 서포트(Support)
의 합성어로 공연과 관련된 모든 일들에
도움을 준다는 의미를 가진 단어입니다.
공연을 희망하는 Artist와
시설 대여가 가능한 Owner를 이어주고
공연의 티켓판매 까지 진행하는
멀티 플랫폼 입니다.
Artist가 등록한 공연은
관람을 희망하는 모든 이용자가
실시간으로 예매가 가능합니다.

4. 팀 구 성 및 개 발 일 정
아티스트 등록
아티스트 목록 조회
아티스트 상세 조회
아티스트 권한 부여
공연 목록 조회
공연 허가
스페셜 공연 등록 / 삭제
구매 목록 조회
공연 매출 차트 구현
-----------------------------------
PPT 제작
영상 제작
오정현
Spring Security
로그인 & 회원가입
오너 권한 부여
홀 등록
좌석 예매 및 결제 관련
할인 쿠폰 생성 & 할인율 반영
이메일 전송
접속 대기열
대기열 보상 시스템(이스터에그)
-----------------------------------
PPT 제작
영상 제작
내 정보 수정
공연 등록
홀 상세 조회
고객센터
게시판 등록/수정/삭제
게시판 페이징 처리
비밀글 기능
관리자 문의 답변
-----------------------------------
PPT 제작
영상 제작
ERD
김기현 | 조장
손정우

5. 월 화 수 목 금
11월 1주차
2주차
3주차
4주차
12월 1주차
2주차
프로젝트 주제 선정 & 테이블 설계
Spring Security 권한 설계 & 기능별 Request / Page 설계
로그인 / 회원가입
Artist, Hall, Concert 등록 시스템 구현
메인페이지 구현
Artist, Concert 목록 / 상세 조회
주요 관리자 기능
예매 & 결제 관련 기능 구현
동일 좌석 구매 방지 시스템 구현
스페셜 공연 등록 / 삭제 기능, 내 정보 수정 기능 구현
메인페이지 무한 스크롤 페이징, 고객센터 문의 게시판 구현 및 페이징
티켓 이메일 전송, 대기열 기능 및 쿠폰 발급 기능(+이스터애그) 구현, 최종 디버깅 체크

6. 프 로 젝 트 개 발 환 경

7. ERD

8. 전체
ERD

9. 유저
ERD

10. 공연
ERD

11. 홀
ERD

12. 판매
ERD

13. 프 로 세 스 설 계

14. 프로세스 설계
전체

15. 프로세스 설계
접속 & 권한

16. 프로세스 설계
공연 등록 과정
예매 & 결제

17. 기 능 소 개
1. 공통 기능
2. MEMBER 기능
3. OWNER 기능
4. ARTIST 기능
5. ADMIN 기능
6. 고객센터

18. 공 통 기 능
1. 로그인 / 회원가입
2. 공연 목록 조회
3. 일정 / 검색
4. 공연 상세보기
5. 아티스트 상세보기
6. 예매 / 결제 / 쿠폰적용

19. 로그인 및 회원가입 기능
로그인시 환영 메시지 출력
MY MENU 버튼으로 변경
회원가입 밸리데이션 처리
공통 기능
로그인 / 회원가입

20. 공통 기능
공연 목록 조회
클릭 시 한 칸씩 이
동
끝에 다다르면 사라짐
부트스트랩 카드로 구현한 메인페이지의 공연 목록 조회 기능
페이징처리는 무한스크롤로 구현.
스크롤이 최하단으로 이동 할 때마다 8개의 데이터를 Ajax 이용하여 추가적으로 불러 옴
최상단에는 관리자가 임의 등록한 스페셜공연이 노출

21. 공통 기능
일정 & 검색
최 상단으로
이동
장르 리스트에서 장르 클릭 시
해당 장르의 공연만 일괄 조회 가능
캘린더 아이콘 클릭 시
JavaScript FullCalendar 로 구현한 공연목록 페이지로 이동
돋보기 아이콘 클릭 시
공연 검색 페이지로 이동
화살표 아이콘 클릭 시
메인페이지 최상단으로 이동

22. 공통 기능
공연조회/상세보
기
카드 영역
공연 포스터
켈린더 영역
공연 명
검색 결과로 나온
공연 포스터
스페셜 공연 영역
공연 포스터
메인페이지의 카드형식의 공연 포스터 클릭 시
스페셜공연으로 등록된 공연 포스터 클릭 시
FullCalendar 로 구현한 공연 목록 페이지에서 공연 명 클릭 시
검색결과로 조회된 포스터 클릭 시
공통적으로 공연 상세 모달 호출가능

23. 공통 기능
아티스트 상세보
기
공연 상세 모달에서는 해당 공연의 가격 및 날짜 등 상세정보 조회
작은 아티스트 이미지 클릭 시
해당 공연을 주최한 아티스트의 상세정보 모달 오픈
아티스트 상세 모달에서는 해당 아티스트가 작성한 프로필 정보를 출력
아티스트가 메인으로 등록한 이미지가 좌측 상단에 크게 출력되며
그 외의 서브이미지들은 모달 하단에 액자형식으로 출력
액자형식 이미지에 마우스 호버 시
이미지가 확대 되는 CSS기능 구현

24. 공통 기능
예매 & 결제
공연 상세 모달에서 해당 공연의 상태에 따라 각기 다른 메시지 출력
해당 공연의 티켓팅 날짜가 도래하지 않은 경우 예매 불가
비회원은 연령확인이 불가능 하므로 연령제한 공연 예매 불가
회원은 가입 시 등록한 생년월일 정보를 토대로 관람 가능 여부를 판단
예매가 가능한 상태라면 ‘예매하러 가기’ 버튼 노출
예매 불가능
예매 가능
(결제 창으로 이동)

25. 공통 기능
회원
예매 & 결제
좌석 선택
좌석 확인 후 ‘지금 바로 결제’ 클
릭
QR코드 스캔
결제 완료 메시지 전송
‘결제 완료’ 버튼 클릭
1. 회원이 공연 예매 시
최대 4석까지 좌석 선택 가능. 선택한 좌석은 붉은색으로 변경됨
선택한 좌석 수, 총 가격 실시간으로 확인 가능
결제 버튼 클릭 시 카카오페이 QR창 출현
선택한 좌석들은 ‘결제진행중’ 상태로 변경되며 이때 다른 유저는 해당 좌석 결제시도
불가
카카오페이는 iamport API로 구현. 결제 완료 시 실제 카카오 알림톡을 통해 확인 가능

26. 공통 기능
비회원
예매 & 결제
좌석 선택
좌석 확인 후 ‘지금 바로 결제’ 클
릭
이메일 입력
결제 완료 버튼 클릭
QR코드 스캔
결제 완료 메시지 전송
이메일로 티켓 전송
2. 비회원이 결제 버튼 클릭 시
구매 티켓 정보를 수신 받을
이메일 입력을 추가적으로 요구
결제 완료 후 해당 이메일로
구매한 티켓 정보 수신 가능

27. 공통 기능
예매 & 결제 전
쿠폰 적용
유효하지 않은 쿠폰 입력 시 유효한 쿠폰 입력 시
할인 적용
3. 비회원과 회원 모두 결제 진행 전 적용 가능한 할인 쿠폰 기능
할인 쿠폰은 콘서포트 사이트가 대기열 발생 시 접속되는 별개의 사이트에서
발급
해당 사이트에서 발급된 유효한 쿠폰 코드를 좌석 선택 후 입력 시
총 가격에 할인율이 즉시 반영되며 할인 된 금액으로 결제 가능

28. M E M BE R 기 능
1. 예매 목록
2. 내 정보 수정
3. 아티스트 등록
4. 오너 등록
5. 고객센터

29. MEMBER
예매 목록 부트스트랩 아코디언 으로 구현
아코디언 클릭 시 상세 구매내역 출력
환불 버튼 클릭 시 confirm 띄우고
취소 클릭 시 환불 진행 취소
확인 클릭 시 환불 진행 후
환불 결과 카카오톡 메시지로 전송
MEMBER
예매 목록

30. MEMBER
불일치 일치
MY MENU 에서 내 정보 수정 클릭 시 비밀번호 확인 창 으로 이동
입력한 비밀번호 정보가
불일치 시 내 정보 수정 페이지 접근 불가
입력한 비밀번호 정보가
일치 시 내 정보 수정 페이지로 이동
인풋태그에 수정 원하는 항목 입력 후 수정하기 버튼 클릭 시
정보 수정이 완료 되고 메인페이지로 이동
MEMBER
내 정보 수정

31. MEMBER
MEMBER 가 MY MENU 에서 아티스트 등록 클릭 시
아티스트 등록페이지로 이동
정보 입력 후 신청 버튼 클릭 시
신청이 완료 되며 메인페이지로 이동
메인이미지 태그에 이미지 파일 업로드 시
좌측에 업로드 한 이미지 바로보기 구현
서브이미지 태그는 여러 개의 파일을 동시에 업로드
가능
MEMBER
아티스트 등록

32. OW N E R 기 능
1. 공연장 등록

33. OWNER
OWNER 가 MY MENU 에서 공연장 등록 클릭 시
공연장 등록페이지로 이동
공연장의 좌석 개수는 40석 70석 100석 중 선택할 수 있으며
선택에 따라 예매페이지 폼 구성이 변경 됨
공연장 대관 기간은 JavaScript datepicker 로 지정할 수 있으며
해당 기간 동안 하루에 오전 오후 두 타임 씩 예약 받을 수 있도록
빈 컬럼을 일괄 생성
OWNER
공연장 등록

34. ART I ST 기 능 1. 공연 등록
2. 공연 매출 관리

35. ARTIST
ARTIST 가 MY MENU 에서 공연 등록 클릭 시
공연 등록페이지로 이동
공연 명, 장르 등 공연 정보 입력 후
‘콘서트홀 목록’ 버튼 클릭 시
오너가 등록한 공연장 목록 중 대관이 가능한 공연장들을 조회할 수 있는 모달 오픈
ARTIST
공연 등록(1)

36. 공연장 목록 모달에서 대관 희망하는 공연장을 선택 시
해당 공연장의 상세 정보를 바로 확인 가능
해당 공연장의 대관 가능한 날짜를 선택한 후 확인 버튼 클릭 시
전 단계로 이동하여 티켓팅 날짜 등 추가 정보 기입
ARTIST
공연 등록(2)

37. 추가 정보 기입 후 공연신청 버튼 클릭
시
Confirm이 나타나고
신청에 성공하면 성공 alert이,
신청에 실패하면 실패 alert 출력
ARTIST
공연 등록(3)

38. ARTIST
공연 매출 관리(1)
ARTIST
BAR 형식의 차트 PIE 형식의 차트
대충 설명

39. ARTIST
공연 매출 관리(2)
해당 ARTIST가 등록한 공연의
좌석별로 판매된 금액과 총 수익을
한눈에 확인 가능한 차트 구현
등록한 공연에서 판매된
총 좌석 중 특정 좌석이 얼마나 판매되었는지
비율로 확인 가능한 차트 구현
ARTIST

40. ADM I N 기 능 1. 아티스트 관리
2. 공연 관리

41. ADMIN
ADMIN
아티스트 관리
MEMBER 로
권한 변경
ARTIST 로
권한 변경
ADMIN이 MY MENU 에서 아티스트 관리 클릭 시 아티스트 관리 페이지로 이동
MEMBER가 ARTIST로 권한 변경 신청한 목록이 해당 페이지에서 모두 출력
ADMIN은 우측의 라디오 버튼으로 권한 변경 가능
ARTIST 로
권한 변경

42. ADMIN
ADMIN
공연 관리
ARTIST가 신청한 공연 목록은 해당 페이지에서 모두 확인 가능
‘공연허가’ 버튼 클릭 시 내부적으로 해당 공연이 진행되는 공연장 좌석수 만큼
예매 가능한 티켓이 일괄 생성
허가된 공연은 아래의 테이블로 이동되고
ADMIN의 재량(ARTIST의 재력)으로 스페셜공연으로 등록이 가능

43. ADMIN
ADMIN
공연 관리
MEMBER <-> OWNER 간
권한 변경이 가능
OWNER는 공연장을 등록할 수 있음

44. 고 객 센 터

45. MEMBER
OWNER
ARTIST
ADMIN
MY MENU 에서 고객센터 클릭 시 고객센터 페이지로 이동
콘서포트를 이용하는 모든 회원은 고객센터 문의 가능
해당 페이지에서 ADMIN과의 1:1 소통이 가능 하고
때에 따라 다른 회원간의 소통도 가능
고객센터
고객센터(1)

46. 고객센터
고객센터(2)
체크 시 비밀글로 등록
고객센터 페이지에서
‘문의작성’ 버튼 클릭 시
문의작성 페이지로 이동
문의 사항은 회원의 편의에 따라
권한별로 다르게 출력
문항 작성 후 ‘비밀글’ 체크박스
체크 시 비밀글로 등록가능
‘등록’ 버튼 클릭 시
문의글이 등록 되고
전 단계로 이동
아티스트 권한으로 접속
시

47. 고객센터
고객센터(3)
비밀글 접근 시
게시판 검색기능 구현
페이징 처리
문의 목록 화면에서 제목과 작성자 명으로 문의 사항 검색이 가능
문의 5개 마다 페이징 처리되어 다음 페이지로 넘어감
제목을 클릭하면 문의 상세 페이지로 이동하여 문의사항 열람 가능
비밀글 설정이 되어 있는 문의의 경우 작성자, 관리자만 열람이 가능

48. 고객센터
고객센터(4)
게시글 수정 가능
비밀글로 변경 가능
게시글 삭제 가능
해당 페이지에서는
해당문의의 상세내용을
확인 가능
문의 글의 작성자만
문의 수정 페이지로 이동하
여
문의 글의 제목, 문의내용,
비밀글 여부 수정 가능
문의 글의 수정, 삭제 버튼
은
작성자에게만 노출

49. 고객센터
고객센터(5)
작성자, 관리자 권한이 있다면 문의 글의
본문
테이블 아래에 질의응답 테이블 확인 가능
응답 테이블에서 작성자와 작성일, 응답
내용
확인 가능
해당 테이블에서 관리자가
즉각적 응답이 가능하고
해당 문의글 작성자도 응답 테이블에
내용을 추가 가능

50. 대 기 열 &
이 스 터 에 그

51. 대기열
대기열 입장
백업서버로 강제 포워딩
Localhost:8088
Localhost:8082
콘서포트가 수용할 수 있는 접속 인원
을
초과하면 사이트에 접속 불가
백업서버에 접속되면 대기열에 자동 입
장
이용자는 대기열을 기다리거나
할인쿠폰을 획득할 수 있는 미니게임
가능
미니게임을 선택하면
미니게임 페이지로 이동 됨

52. 대기열
미니게임 & 쿠폰
게임이 끝나면
쿠폰이 지급 됨
게임 점수에 따라
좀 더 할인율이 높은
쿠폰이 지급

53. 시 연 영 상

54. Q & A

55. CONSUPPORT
감사합니다.