깃허브 참조
https://github.com/YuJeong-Yun/Movie
개발환경
OS : Windows 10
Toos/DB : Eclipse, VS Code, Apache Tomcat 8.5, MySQL, JDK1.8
언어 : JAVA, JSP/Servlet(Model2), HTML, CSS, JavaScript
API : Kakao Map API / Daum Postcode API / Java Mail API / IMPORT Payment API / Youtube Iframe API
ER DIAGRAM
* movie_board (id) -> movie_member(id) 참조 - Delete on cascade 속성 (탈퇴하면 게시글도 지워짐)
* movie_board_reply (bno) -> movie_board(num) 참조 - Delete on cascade 속성 (게시글 지우면 댓글도 지워짐)
* movie_board_reply (id) -> movie_member(id) 참조 - Delete on set null 속성 (탈퇴해도 댓글 정보 놔둠. '탈퇴한 회원입니다.' 표시)
* movie_ticketing (member_id) -> movie_member(id) 참조 - Delete on set null 속성 (탈퇴해도 결제정보 남아잇음)
기능구현
1. 메인 화면
대체로 UI는 CGV의 화면을 참조해서 만들었다. 전에 들은 스타벅스 클론코딩을 응용해서 만들긴 했는데 HTML구조를 어떻게 구성해야 할지, css는 어떻게 하는게 효율적인지 잘 판단이 서지 않았다.... 강의 들을 땐 이런 식으로 하면 되는구나 하면서 봤는데 역시 직접 만들어 보는거랑은 또 엄청 다르다. 프론트엔드도 어느정도 할 수 있겠다 싶어서 템플릿 갖다 쓰지 않고 직접 만들어서 하긴 했는데 한 페이지 하나하나 만드는데 생각보다 시간이 정말... 오래 걸렸다...
어쨌든!! 아래 사진은 메인 화면이다.
상단의 헤더는 CGV의 메뉴를 구현했다. 아이콘은 구글 material icon을 사용해서 모양이 조금 다르다.
가운데에는 Youtube Iframe API를 이용해 영상 하나를 출력시켰다.
Youtube Iframe API 참조
https://yunyj99.tistory.com/203
상단 메뉴에 마우스를 올리면 리스트 형식으로 아래에 나타난다.
스크롤 위치를 계산해 일정 이상 내려가면 상단에 메뉴가 고정되고 색도 변경되도록 해주었다. 이 때 lodash 라이브러리의 throttle 함수를 이용해 스크롤 할 때 함수가 너무 많이 실행되지 않도록 0.1초 텀을 줬다.
그리고 아래쪽에는 CGV에서 크롤링해온 영화차트를 세션에 담아, 10위까지 출력되도록 해주었다.
swiper 라이브러리를 이용해 슬라이드 형식으로 출려시켰다.
크롤링 참조
https://yunyj99.tistory.com/197
Swiper 사용 참조
https://yunyj99.tistory.com/200
2. 로그인
로그인 페이지에서는 로그인 결과를 (비회원/비밀번호 오류) 상단에 출력되도록 했다.
아래쪽에 아이디 저장을 클릭하고 로그인을 클릭하면 쿠키를 생성해서 아이디칸에 불러오도록 했다. 아이디 저장을 해제하고 로그인 하면 쿠키의 기간을 0으로 설정해 아이디값 쿠키가 삭제되도록 했다.
아이디 저장 쿠키 참조
https://yunyj99.tistory.com/212
3. 회원가입
회원가입페이지 에서는 필수 정보를 모두 입력하고, 아이디 / 이메일 / 전화번호에 중복된 값이 없어야 회원가입이 동작한다.
정규식을 이용해 아이디는 영어, 숫자 / 이름은 한글, 영어만 입력되도록 설정했으며 주소는 Daum POST API를 이용해서 입력하도록 했다.
회원가입 중복체크
https://yunyj99.tistory.com/213
다음 주소 API
https://yunyj99.tistory.com/231
4. 마이 페이지
마이 페이지에서는 회원 정보 수정 / 비밀번호 변경 / 예매 내역 조회 / 회원 탈퇴가 가능하다.
프로필도 등록할 수 있다. 프로필은 JAI 라이브러리를 이용해 100*100 크기로 저장하도록 했다.
그리고 게시글에서 프로필 사진 출력을 편리하게 하기 위해, 사진을 업로드하면 profile 폴더에 th_’회원 Id’ 의 이름으로 파일을 저장시켜서 프로필 사진을 불러오기 편하게 했다. 프로필 삭제 체크 후 수정하면 프로필을 삭제한다. (DB에서 파일 경로와 실제 업로드 파일 모두 삭제)
이미지 썸네일 참조
https://yunyj99.tistory.com/223
다음으로 사용 가능한 메뉴이다.
5. 무비 차트
먼저 무비 차트에서는 CGV에서 크롤링해온 영화 차트를 19위까지 출력시켰다.
6. 영화 리뷰 게시판
영화 리뷰 게시판에서는 회원들의 글쓰기가 가능하다. 왼쪽에는 글넘버를 출력시켰는데, DB에서 불러올 때 rownum을 계산해서 출력시켰다. 따라서 글을 삭제하거나 해도 글넘버가 비지않고 연속되게 출력된다.
아래쪽엔 페이징 처리를 통해 이동이 가능하도록 했다.
조회수는 본인이 쓴 글을 확인했을 경우에는 증가하지 않도록 했다.
rownum 생성 참조
https://yunyj99.tistory.com/221
본인 글의 경우엔 수정 삭제가 가능하고, 목록 / 이전글 / 다음글 이동이 가능하도록 했다.
본인이 쓴 글에 댓글을 쓰면 오른쪽에 글쓴이가 표시되고, 본인 댓글에서는 수정 삭제가 가능하도록 했다.
댓글은 AJAX를 이용해서 등록/수정/삭제가 되도록 했다. 나는 모델 2형식으로 프로젝트를 진행했는데 구글링해보니 대부분 Spring을 이용한 작업물이 대부분이었고, 댓글도 Spring을 이용해서 구현한게 대부분이어서 참고하기가 어려웠다. 그래서 어떻게 어떻게 구현을 하긴 했는데 이렇게 하는게 맞는지.. 의문이 들긴 한다..
우선 댓글 쓰기는 AJAX를 통해 DB에 댓글을 저장하고, 댓글 내용을 li 태그안에 담아 본문에 추가되어 화면에 보이도록 했다.
댓글 수정은 AJAX를 통해 DB에서 수정시키고, 수정하려는 댓글 li 태그의 인덱스를 가져와 해당 댓글의 내용이 수정되어 화면에 보이도록 했다.
댓글 삭제는 마찬가지로 AJAX를 통해 DB에서 삭제되도록 했고, 해당 댓글 li태그의 display를 none으로 변경해 화면에서 삭제되도록 했다.
댓글 옆에는 프로필이 출력되도록 했다. 프로필을 등록한 경우(=profile 폴더에 th_'회원 id' 파일 존재할 경우) 프로필 사진만 출력되도록 했고, 프로필이 없는 경우 (=profile 폴더에 th_'회원 id' 파일 존재하지 않는 경우) Onerror 이벤트 이용해 익명 아이콘(기본 none으로 설정해놨음) display를 block으로 설정해서 화면에 표시되도록 했다.
7. 이벤트 게시판
이벤트 게시판에서는 카테고리를 선택해서 이동 가능하다. 선택한 카테고리 글만 출력되며 현재 위치가 카테고리에 빨간 글씨로 표시된다.
JAI 라이브러리 이용해 업로드한 사진의 윗부분부터 가로세로 10.664의 비율로 사진을 자른 후, 282*190 크기로 썸네일 출력시켰다. admin 계정만 이벤트 게시판에서 글쓰기 수정/삭제가 가능하다.
글을 클릭하면 해당 카테고리 안에서 다음글/이전글/목록으로 이동할 수 있는 버튼이 있고 사진은 가로 960px로 꽉 차도록 출력시켰다. 하단에는 최상단으로 이동 가능한 Top 버튼이 있다.
8. 검색
상단 메뉴에서는 전체 게시판의 검색이 가능하다. 총 3개의 게시판(공지사항, 영화 리뷰, 이벤트) 검색 결과에서 최신글 10개를 출력시키도록 했다.
검색 결과가 하나도 없으면 검색결과 없음이 출력되고, 검색 결과가 있으면 아래처럼 게시글이 출력된다.
9. 영화 예매
영화 예매 화면이다. 영화는 크롤링해온 영화의 1~19위가 출력되도록 했고, 날짜는 JS를 이용해 오늘부터 14일간 출력되도록 했다.
영화, 극장, 날짜를 모두 선택하면 시간이 출력된다. 각 항목을 클릭하면 active 클래스가 추가되도록 했다. 선택한 항목의 값은 hidden 태그의 value에 넣어서 전달되도록 했다.
JS 오늘부터 14일 날짜 출력
https://yunyj99.tistory.com/237
다음으로 좌석 선택 화면이다. 좌석은 JS에서 button태그를 뿌려주도록 했으며, 가격은 일반은 100원 청소년은 70원으로 설정했다.
여기서 선택한 인원만큼 좌석 선택해야 결제가 가능하다.
JS 좌석 만들기
https://yunyj99.tistory.com/241
결제하기를 클릭하면 결제 창이 뜬다. 결제는 아임포트 결제 API를 이용했다. 카드 결제 후 뜨는 구매자 정보(회원 정보)는 AJAX를 이용해 받아온 회원 정보이다.(주문번호는 '날짜-예매 정보 테이블 num 6자리' 로 계산 ex. 20220530-000005 해서 AJAX로 넘겨줬다.)
결제를 완료하면 마이페이지의 예매 내역 페이지로 이동하고 방금 결제한 영화 정보를 확인할 수 있게 했다. 테스트 API라서 자정쯤에 결제내역은 자정쯤에 취소된다.
10. 주변 극장 찾기
주변 극장 찾기 메뉴이다. getCurrentPosition 이용해서 유저의 현재 위치 받아오도록 했고, 처음 지도의 중심은 현재 위치를 차단했을 경우엔 서면 롯데백화점이, 허용했을 경우엔 현재 유저의 위치가 뜬다.
(2021.10.13 기준)국내 영화관 시설 빅데이터 csv 파일에서 D3 라이브러리를 이용해 CGV만 파싱하고,
주소, 도로명 주소, 경도, 위도를 추출해서 모두 지도에 마커로 표시되도록 했다. (183개)
빅데이터는 요기 이용!
https://www.culture.go.kr/bigdata/user/data_market/detail.do?id=54331f17-d090-4b91-bc8c-95ccb134303f
문화 빅데이터 - 포털- 전체 상품
www.culture.go.kr
CSV 파일 파싱 참조
https://yunyj99.tistory.com/244?category=949415
마우스를 올리면 해당 지점의 지점명, 주소, 도로명 주소를 오버레이로 띄우도록 했다.
프로젝트는 1달의 기간 동안 진행했다. 평일 9 to 6 에는 학원 다니면서 저녁이랑 주말에 프로젝트 진행하면서 병행하려니 힘들긴 했지만 이렇게 직접 만들어 보는게 그동안 배웠던 것들을 정리하고 익히는 데 정말 도움이 많이 된 것 같다.
특히 비동기 함수에 애 먹은 부분이 많았는데, 지금 와서 생각해보면 시행 착오를 겪고 애 먹은 만큼 비동기 함수에 조금 더 친숙해지지 않았나 싶다. 처음에 AJAX 쓸 땐 비동기로 실행되는걸 생각 못하고 대체 값이 왜 안 뜨나 한참 고민했던 적도 있다,,^^
마지막 주말 쯔음엔 시간이 조금 남아서 전국 cgv 위치를 지도에 표시하려고 했는데, 하나하나 표시하는건 좀 아닌 것 같고 찾아보니 보통은 csv파일을 이용해 자동화하는 방법을 쓴다고 했다. 정확히 어떤 식으로 하는지는 아직 모르겠지만, 찾아보니 다행히도 cgv 좌표를 담은 빅데이터 csv파일이 있었다. js에서 csv 파일을 불러올 때 D3 라이브러리를 이용해서 했는데, 여기서도 함수가 비동기로 실행되는데 그걸 몰라서 대체 왜 안뜨는지.. 한참을 헤맸다.^ㅜ 그래도 이렇게 헤매고 고생한게 언젠가 다 도움이 되겠지...
곧 있으면 팀플 시작할텐데 그때까지 또.. 열심히 공부 해놔야지.... 특히 git 사용법.. 열심히 익혀놔야지....
'프로젝트 > 프로젝트 기록' 카테고리의 다른 글
| 투게덕 - [ MVVM 패턴 안드로이드 프로젝트 ] (2) | 2024.03.26 |
|---|---|
| 부캉스 - [ 스프링 프레임워크 부산 여행 프로젝트 ] (0) | 2023.01.29 |