영화 후기 사이트 - 조각별 (영화 후기를 남기는 공간)

 

 

 

 

 

📽️ 프로젝트 소개 

 

저번 미니 프로젝트를 할 때에는 mvc를 이용해서 백에서만 구현되게 만들었었다.

그때는 배운 게 한정적이라 주제를 정하는 것도 범위가 좁아서 생각보다 쉽게 골라서 할 수 있었다.

(지난 미니 프로젝트는 3일 정도였고, 커피 구매하기 프로젝트를 만들었었다.) 

하지만 이번 프로젝트에서는 프론트에서도 보여지고 백에 대해서도 더 배웠기 때문에 주제 범위가 넓어져서 정하는 데에 꽤 오랜 시간이 걸렸다. 

 

회의 끝에 여러 후보들이 나왔다.

- 항공사
- 병원 정보 오픈 api
- 사내 메신저
- 데이트 매칭 시스템
- 술 맛집 정보 사이트
- 온라인 약국

- 영화 후기 

 

공공 데이터를 다루는 수업을 받았기 때문에 이를 활용해서 프로젝트를 만들고 싶었다.

팀원들 모두 영화에 관심이 있고 api를 불러올 수 있고 영화에 대한 후기를 남겨보자는 의견이 나왔다.

그래서 영화에 대한 정보를 보여주고 후기를 남길 수 있는 웹페이지를 만들기로 결정했다. 

 

 

 

 

📅 프로젝트 기간 

2023년 4월 19일 ~ 2023년 5월 4일 (기간 : 2주)

 

4월 19일 : 주제 정하기 

4월 20일 : DB 테이블 설계, 핸들러명, 시나리오 흐름 짜기

4월 21일 : 구현 부분 나누기, DB 쿼리 작성, VO & DAO & SERVICE 만들기

4월 24~28일 : jsp, back, front 구현하기

4월 29~30일 : 디버깅

5월 1~2일 : 디버깅 및 디테일 구현

5월 3일 : 발표 준비 & 프로그램 최종 실행 

5월 4일 : 발표🌟

 

 

 

 

 

👩‍💻 팀원 역할 

우리 팀은 총 5명이었고 5개로 나눠서 진행하지 않고 크게 세 개의 파트로 나누어서 작업을 진행하였다.

 

- 유저 : 회원 관리 + 마이페이지  + 다른 유저의 홈 (나 + 연님)

- 영화 : 영화 api 불러오기 + 별점 남기기 + 예고편 재생 (현님 + 원님)

- 후기 : 한 줄 평 작성 + git (영님)

 

 

 

 

 

 

🪄 사용 언어 

JAVA, Oracle, TMDB API, HTML, CSS, JavaScript, (JQuery)  

 

깃허브 조각별 코드 보러가기

 

 

 

 

✨ 목표 기능

원하는 기능을 마인드맵으로 정리했다.

 

 

 

 

🛠️ 설계

기능을 대략 정하고 나서 설계에 들어갔다.

필요한 기능에 따른 설계가 아니라 뷰 페이지에 보일 부분(기능)을 생각하면서 설계를 하였다. 뷰 페이지에 필요한 핸들러, 어떤 테이블이 필요한지 정하고 구현에 들어갔다.

 

miro 

miro를 이용하여 프로토타입을 만들었다.

전체 흐름을 화살표 모양으로 나타내주었다.

이제 자세히 들여다보면 ... 

 

 

 

 

영화 페이지 

 

 

 

마이페이지 

 

 

 

 

한 줄 평 작성

 

 

notion

노션으로 일정이나 프로젝트에 필요한 내용들을 정리하였다. 

 

 

 

 

 

🎞️ 영화 api 

 

https://www.themoviedb.org/?language=ko 

The Movie Database (TMDB)

https://developers.themoviedb.org/3/getting-started/introduction

API Docs

영화 api로는 tmdb를 골랐다.

제일 많이 사용하고 있는 tmdb를 골라서 사용했다.

 

 

 

 

 

😎 구현 & 내가 만든 기능

① 내 정보 수정 (비동기)

② 마이페이지

    - 찜한 기록 보기 + 찜 취소 기능 (비동기)

    - 별점 기록 보기 + 별점별로 기록 보기 (비동기)

    - 코멘트 기록 보기

    - 코멘트 한 줄 넘어가면 ... 으로 보이게 만들기

    - 팔로우 추가 + 취소  

    - 한 줄 소개 추가 + 수정 + 삭제 

③ 다른 유저 페이지    

    - 팔로우 추가 + 취소  

    - 찜한 기록 보기

    - 별점 기록 보기 

    - 코멘트 기록 보기 

 

    

 

내 정보 수정

설정 버튼을 누르면 나의 닉네임을 수정할 수 있다.

수정을 할 때엔 비밀번호를 입력해야 한다.

 

 

 

 

내 정보 수정 - 한 줄 소개 추가 / 수정 / 삭제

한 줄 소개를 작성하는 공간이다.

다른 비동기보다 이 한 줄 작성하는 비동기가 제일 복잡하고 어려웠다.

계단식으로 생각하면서 작성했었다. 

 

아무 한 줄 소개가 없다면 추가 버튼이 보이고 

아무 한 줄 소개가 있다면 수정 / 삭제 버튼이 보이게 설정했다.

 

 

 

 

 

 

영화 - 찜 기능

영화 목록에서 영화 포스터를 누르면 영화의 디테일을 볼 수 있다.

그곳에서 찜을 할 수도 있고, 별점을 남길수도 있고, 후기 코멘트를 작성할 수도 있다.

 

 

 

 

영화 - 검색 / 후기 작성

작성할 때 스포일러가 있다면 스포일러 체크를 한 후 글을 작성한다.

스포일러로 후기를 작성하면 다른 사용자는 스포일러가 있는 후기를 볼 때 이중으로 확인을 해서 볼 수 있다.

스포일러를 당하지 않게 하기 위해 이 기능을 넣었다. 

 

 

 

 

 

마이페이지 - 다른 유저 페이지 보기

 

내가 팔로잉 한 다른 유저 페이지이다. 

팔로우 추가, 취소를 할 수 있으며 팔로잉 한 아이디의 별점, 위시, 후기 리스트를 다 볼 수 있다.

 

 

 

회원가입

가입을 하면 로그인 페이지로 넘어가게 구현을 했고,

아이디 중복, 비밀번호 확인 기능을 넣었다.

 

 

 

나의 위시리스트 + 별점 리스트 보기 

마이 페이지에서 나의 위시리스트, 별점리스트, 후기리스트를 볼 수 있다.

더보기 버튼을 눌러 나의 목록들을 전체 볼 수 있으며 

찜한 영화는 위시리스트에서 삭제할 수 있도록 만들었다.

 

 

 

첫 화면

첫 화면은 배너 여러개를 넣어 슬라이드 형식으로 보여줬다. 

 

 

 

 

영화 검색 - 정보 보기

영화 검색 기능을 넣었다. 

예를 들어 닥터 스트레인지 를 검색했을 때 띄어쓰기를 넣으면 닥터 만 검색되고 스트레인지는 검색이 안 됐었다.

그래서 띄어쓰기 부분을 %20으로 바꿔줘서 검색할 수 있게 변경했다. 

public class Search implements Handler {

	@Override
	public String process(HttpServletRequest request, HttpServletResponse response) {
		// TODO Auto-generated method stub
		String text = request.getParameter("query");
		String[] array=text.split("");
		String text2="";
		
		for(int i=0; i<array.length;i++) {
			if(array[i].equals(" ")) {
				text2+="%20";
			}else {
				text2+=array[i];
			}
		}
		System.out.println("받은값 :"+text);
		System.out.println("검색어 :"+text2);
		
		URL url;
		
		try {
			url = new URL(
					"https://api.themoviedb.org/3/search/movie?api_key=c8a3d049a6a74a627e4a2fa5bfd674f6&language=ko&query="
					+text2);
			// 웹 주소로 연결
			URLConnection conn = url.openConnection();
			// getInputStream(): 웹페이지에서 데이터를 읽을 수 있눈 스트림 반환
			InputStream is = conn.getInputStream();
			// json 파일 분석할 파서 생성
			JSONParser parser = new JSONParser();
			// 생성한 파서로 json 파일 분석
			JSONObject obj = (JSONObject) parser.parse(new InputStreamReader(is));
						
			JSONArray arr = (JSONArray) obj.get("results");
						
			ArrayList<movieVo> list = new ArrayList<>();
						
			for(int i=0; i<arr.size(); i++) {
				JSONObject o = (JSONObject) arr.get(i);
				String id = Long.toString((Long) o.get("id"));
				String poster = (String) o.get("poster_path");
				String title = (String) o.get("title");
				String overview = (String) o.get("overview");
				String release_date = (String) o.get("release_date");
				
				
				list.add(new movieVo(id, poster, title, overview, release_date));
			}
			request.setAttribute("searchlist", list);
			request.setAttribute("text", text);
			is.close();
			
		} catch (MalformedURLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (ParseException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return "/search/search.jsp";
	}

}

 

 

 

 

영화 목록 UI

hover시 커지게 했고 페이징 기능을 넣었다. 

 

 

 

 

 

 

 

 

 

 

🤔어려웠던 점  & 느꼈던 점

매번 프로젝트를 하면서 느끼지만 설계가 가장 중요한 것 같다.이번 프로젝트에서는 테이블명, 변수명을 다 정하고 시작해서 수월하게 진행이 된 것 같다.

 

그리고 일정을 정하는데 이상적인 목표에서 80%정도만 잡으라는 조언을 봤었는데 왜 그런 말을 했는 지 알 것 같았다.여기서 조금만 더 빡센 일정이었다면 시간과 마음의 여유가 없었을 것 같다.

 

그리고 구현에 있어서는 백기능 구현은 어렵지 않았다.

다만 구현한 걸 비동기로 보여주고 싶어서 Jquery를 이용했는데 익숙치 않아서 여러번 고쳐야 했었다.

하루에 몇 시간 동안 잡고 있었기 때문에 Jquery와 ajax에 대한 이해도가 올라가게 됐다. 

 

또한, 아쉬웠던 점은 CSS였다.팀의 테마나 글씨체나 색을 정했긴 했지만 각자 맡은 부분을 각자 프론트 구현을 했는데 사람마다 스타일이 달라서 비슷하지만 조금은 다른 느낌의 CSS가 나왔다. (다채로우니 오히려 좋은건가?)

그리고 z-index에 대해서.. 다시 알게 됐다. 그리고 부트스트랩도..!

내가 쓴 CSS코드가 제대로 작동이 안 돼서 왜 그런가하고 찾아봤더니 z-index 순위에 밀려난 것도 있었고, 부트스트랩 때문에 밀려난 것도 있었다.

그래서 CSS를 쓸 때 다시 한 번 생각하고 써야할 것 같고 팀원들이랑도 잘 상의해서 써야 할 것 같다.

 

우리 팀의 분위기는 너무 좋았다.

다들 성격이 긍정적이었고, 다들 의견을 수용할 줄 알고 고집하는 사람이 없었기 때문에 유하게 잘 흘러갔다. 

서로의 성 조합이 좋아서 마찰이 없이 좋게 프로젝트를 마무리 할 수 있었다.