| 페이지 종류 | 메인페이지 | 랭킹페이지 | 검색페이지 |
|---|---|---|---|
| 페이지 기능 | 헤더 | 1~3위 공연은 마우스 hover시 포스터 이미지 확대 | |
| (색칠한 섹션= 각 섹션의 제목) | 메뉴 호버시 밑줄 생성 | 1위 공연은 background 영역 애니메이션(그라데이션) 효과 | |
| 스크롤이 특정 높이까지 내려갔을 때 헤더 따라다님 | |||
| 메인 슬라이드 | |||
| 화살표 클릭하면 다음 콘텐츠 보여주기 ( 각 콘텐츠에 맞는 배경색, 포스터 인티케이터, 글자 변경) | |||
| 콘텐츠 영역에 마우스 호버시 슬라이드 기능 멈춤 마우스 떼면 다시 시작 | |||
| 각 포스터에 맞는 인디케이터 동적으로 넣어주기 | |||
| 인디케이터 클릭하면 맞는 포스터 화면에 보여주고 인디케이터 상승 | |||
| New open | |||
| 마우스 호버시 공연 개봉 날짜 사라지고 공연 정보 보여주기 | |||
| Arton’s pick | |||
| 마우스 hover시 공연 소개 글 포스터 아래에서 상승해서 나타남 | |||
| 서브 슬라이드 | |||
| 화살표 클릭시 다음 콘텐츠 보여주기(각 콘텐츠에 맞는 포스터 인티케이터, 글자 변경) | |||
| 동적으로 인디케이터 넣어주기 | |||
| 인디케이터 클릭시 맞는 방향으로 포스터 보여주기 | |||
| Rank | |||
| 메뉴에 있는 글자 호버시 색깔 교체, 선택된 것 색깔 활성화 | |||
| 메뉴 글자 탭에 맞는 공연 정보 클릭 시 해당 카테고리에 맞는 공연들 보여줌 | |||
| 포스터 호버시 감싸고 있던 배경 커짐 | |||
| Rank | |||
| foucus on 글자 호버하면 해당 글자 밑에 선 왼쪽에서 오른쪽으로 글자 길이만큼 생성됨 | |||
| Review 슬라이드 | |||
| 해당 화살표 클릭하면 각 방향으로 이동 | |||
| 포스터 hover시 관객이 썼던 리뷰 포스터 아래에서 상승해서 나타남 |
| 페이지 종류 | 상세페이지 | 마이페이지 | 회원정보 수정페이지 |
|---|---|---|---|
| 페이지 기능 | 공연 포스터 섹션 | 상단에 각 메뉴 마우스 hover 시 밑줄 생성 | 해당 칸 공백이라면 ‘필수 입력항목입니다’ 메세지 띄우기 |
| (색칠한 섹션= 각 섹션의 제목) | ‘좋아요’ 기능 – 하트 아이콘 클릭 시 아이콘 색상 바뀌면서 숫자 + 1 되게 구현 | 예매 확인, 취소 | 수신동의 두 라디오버튼 중 하나만 선택 가능하며, 클릭시 다른 항목은 자동 해제 |
| 예매하기 섹션 | 예매 확인, 예매 취소 탭 버튼 마우스 hover 시 테두리 생성 | ||
| 날짜리스트 처음에는 선택이 안되어 있는 상태지만 다 보이게 구현 | 3, 6, 12 개월 탭 버튼 마우스 hover 시 배경색 변경 | ||
| 날짜리스트에서 하나의 옵션 선택 시 그에 맞는 회차리스트 나오게 구현 | 하단 페이징 버튼 마우스 오버 시 폰트 굵기 굵어짐 | ||
| 회차리스트에서 하나의 옵션 선택 시 남은 좌석수 보이게 구현 | 하단 <<,>> 버튼 클릭 시 5페이지씩 전 후로 이동 | ||
| 남은 좌석수가 보이게 되면서 ‘예매하기’버튼 활성화되게 구현 | 하단 <,> 버튼 클릭 시 1페이지씩 전 후로 이동 | ||
| 공연상세정보 섹션 (공연정보/ 리뷰 / 예매,취소 안내) | |||
| 1. 탭 | 찜 목록 | ||
| 공연상세정보/ 리뷰 / 예매,취소 안내 => 이렇게 3개의 탭 구현 | 하트부분 클릭 시 색 변경(찜 해제) | ||
| 각 섹션 클릭 시 그에 맞는 섹션 보여주게 구현 | |||
| (각 탭의 섹션들은 display: none, block으로 페이지 전환되는 것처럼? 보이게 할 예정) | |||
| 탭바가 헤더랑 맞닿게 되면 헤더 대신 탭바가 스크롤 따라다니게 구현 | |||
| 2. 공연정보 | |||
| 공지사항, 공연안내는 이미지로 데이터 가져오기 | |||
| 기획사정보, 상품정보제공고시는 테이블로 구현 | |||
| 스크롤 상단 이동 버튼 만들어서 스크롤에 맞춰 따라다니게 구현 | |||
| 3. 리뷰 | |||
| 리뷰작성은 회원가입한 회원이고, 공연 예매 내역이 있는 회원 한해서 가능하게 구현 | |||
| 별점은 1단위로 5점까지 가능하며 별 아이콘을 이용해서 구현 | |||
| 내용작성은 최소 20byte, 최대 500byte 까지 작성할 수 있게 구현 | |||
| 후기 등록하기 버튼 클릭 시 해당 리뷰가 최상단으로 들어가게 구현 | |||
| 작성자 아이디는 앞 4글자만 보이게 구현 | |||
| 로그인 되어 있는 상태라면 작성자는 자신의 리뷰를 수정/삭제 가능하게 구현 | |||
| 전체 리뷰는 최신순 또는 별점순으로 볼 수 있게 구현 | |||
| 리뷰는 한 페이지에 총 10개씩만 보이게 하고 페이징네이션도 구현 |
| 페이지 종류 | 회원가입/약관동의 페이지 | 로그인 페이지 | 카테고리 페이지 |
|---|---|---|---|
| 페이지 기능 | 약관동의 | 메인 슬라이드 | |
| (색칠한 섹션= 각 섹션의 제목) | 필수 체크 항목이 체크되지 않았다면 메세지 띄우기 | 회원가입, 아이디 찾기, 비밀번호 찾기 마우스 hover 시 폰트 굵기 굵어짐 | 왼쪽 오른쪽 버튼 클릭시 방향 이동(버튼 클릭후 이벤트 실행중에는 다른 버튼 클릭해도 막혀있음) |
| 취소시 새로고침 / 필수 입력 항목 체크 후 확인 버튼 누르면 회원가입 화면으로 넘어가기 | 아이디/ 패스워드 미 잆력시 메세지 띄워주기 | 3초 지나면 자동으로 슬라이드 오른쪽에서 왼쪽으로 이동 / 중앙 이미지 scale | |
| 회원가입 | What’s hot | ||
| 입력된 아이디가 조건에 맞지않으면 메세지 띄우기 | 각 포스터 hover시 이미지 scale | ||
| 입력된 비밀번호가 조건에 맞지 않으면 메세지 띄우기 | Weekly Ranking | ||
| 비밀번호와 재확인 비밀번호가 일치하지않으면 메세지 띄우기( | 순위 hover시 각 순위를 차지하는 공간 세로길이 커짐 | ||
| 비밀번호 재확인 항목이 키다운 또는, 키업 되서 한글자라도 바뀌었을때, 비밀번호 항목과 일치 하지 않으면 하단에 다시 경고창 띄워주기 | What about this 슬라이드 | ||
| 공백이라면 해당항목 하단에 경고창 띄우기 | 공연제목 list 중 하나 hover시 밑줄 그어짐 | ||
| 클릭시 조건에 맞게 입력했다면, | |||
| 회원가입 완료(alert)후 메인페이지 이동 | hover 할때마다 공연제목, 포스터이미지, 배경색 바뀜 | ||
| Aarton’s pick | |||
| 공연 포스터 hover시 아래에서 위로 홍보문구 올라옴 |
| 작업 목록 | DB 검증 | DTO , DAO , TDD 관련 |
|---|---|---|
| 주요 기능 | DB 생성 | Controller 생성 |
| (색칠한 섹션= 각 섹션의 제목) | 가데이터 입력 | Service 생성 |
| 쿼리문 생성/ 테스트 | ||
| 크롤링한 데이터 입력(실제 데이터) |
| 페이지 종류 | 메인 | 상세페이지 | 랭킹페이지 |
|---|---|---|---|
| 페이지 기능 | DB가서 데이터 가져온 뒤 출력 | DB가서 데이터 가져온 뒤 출력 | 랭킹 １～15위 까지 출력 |
| (색칠한 섹션= 각 섹션의 제목) | 메인 슬라이드 | 좋아요 | 다음 상황에 DB가서 데이터 가져온 뒤 출력 |
| New open | 예매하기 | 1. 탭 변경(전체, 콘서트, 뮤지컬 등) | |
| Rank | 리뷰 | 2. 집계 기간 변경 (일간, 주간, 월간 등) | |
| 리뷰 슬라이드 | 3. 집계 기간 변경2 (날짜, 몇 주차, 몇 월 등 | ||
| Header Area | |||
| 1. 검색 기능 | |||
| 2. 로그인/로그아웃, 마이페이지 연결 | |||
| 카테고리 페이지 | 검색페이지 | 마이페이지 | 회원정보 수정페이지 |
| DB가서 데이터 가져온 뒤 출력 | DB가서 데이터 가져온 뒤 출력 | DB가서 데이터 가져온 뒤 출력 | DB가서 데이터 가져온 뒤 출력 |
| What’s hot | 검색 후 나온 데이터 | 예매 확인, 취소 | 회원정보 데이터 |
| Weekly Ranking | 찜 목록 | ||