팀 프로젝트 1일차
파트 분배
part 1 (전체적인 틀 개발)
- 카드 클릭 시 페이지 이동
- detail 안에 전체적인 UI 구현 (html, css)
part 2 (영화 세부 정보 및 아이콘 디자인)
- 카드 정보 불러오고 세부 ui 정하기(영화 제목, 감독, 배우, 개봉년도, 개봉일, 평점 등등 )
- 로고(초승달), 별점 아이콘 디자인
part 3 (리뷰 create 부분)
- 별에 마우스 호버 시 이 얼마나 채워지는지 보이게
- 호버 한 부분만큼 클릭 시 아이콘 색 채워짐
- 작성자, 별점, 리뷰 내용 작성 후 버튼 등록 시 패쓰워드 modal창
- 예외 처리 해 주셔야 됨(빈칸있을 시 빈칸 작성 해달라는 alert창)
- input에 글자 수 제한. (닉네임이 1000자가 되면 곤란..)
- localStorage.setItem
- 작성한 영화 id, 작성자, 별점, 리뷰, password 저장 > key값을 뭐로 하실지 정하셔야 됨(수정, 삭제할 때 겹치지 않는 key값 필요)
part 4 (리뷰 read)
- 해당 영화에 대한 리뷰만 불러오기(ui 만들기)
- Review 옆에 몇 개의 리뷰가 있는 지 숫자로 표시
- 리뷰가 없을 시 ‘리뷰가 없습니다 text’
- 리뷰 보이는 것을 3개로 제한하고 리뷰 더보기 버튼
part 5(리뷰 update, delete)
- password 확인하는 모달 창 UI 구현
- 수정/삭제 버튼 클릭 시 password를 입력 창 모달뜨게
- password가 맞다면
- localStorage.remove로 삭제
- 수정 : text가 input창으로 변하고 이 전 내용이 적혀져있게.
- password가 틀리다면
- 비밀번호가 일치하지 않습니다 alert창
- 내용을 수정하고 확인 버튼 클릭 시 수정된 내용 업데이트
part6(랜딩페이지 영화 배너)
- 전체 영화를 슬라이드 형식으로 n초마다 넘어가게 애니메이션 넣기
- 버튼 클릭시 하나 하나 넘어가게 하기 or 클릭 후 옆으로 넘기면 슬라이드 되게하기
회고
오늘은 팀 프로젝트 발제하고 진행한 첫 날이다.
팀 프로젝트 주제로는... 전에 한 개인 프로젝트를 디벨롭하는 것이었다!
그렇게 팀원 6명의 개인 프로젝트 중에 투표를 통해 한명의 개인 프로젝트를 선발했는데
정말 뿌듯하고 감사하게도 나의 프로젝트가 선발되었다.
그러면서 스쳐지나가는 나의 스파게티 코드들..
너무 머리아파졌지만, 그래도 아예 페이지 이동을 통해 div를 나눠서 개발을 진행하기로 해서 좀 .. 다행인것같다.
개발 일기장