오늘 팀 과제를 완성하고 발표를 마쳤다.
팀 과제에 대한 피드백도 받았다.
크게 요약한 기능은 아래와 같다.
- API로 불러온 영화 정보 출력(카드형태) 및 검색기능
- 검색은 대소문자 구분이 가능하며 내용없이 검색하면 안됨.(유효성 검사)
- 영화 카드를 클릭하면 영화 상세 정보와 리뷰를 작성할 수 있는 페이지로 이동
- 리뷰를 작성하고 제출하면 리뷰공간에 보여지게되고, 수정 및 삭제 가능
메인 페이지
영화별로 상세정보 및 리뷰 작성 페이지를 구성하기 위해
localStorage에 json형태로 클릭한 영화 카드의 정보를 담아 저장하였고,
이를 바탕으로 영화 정보와 리뷰 정보들을 담도록 구현하였다.
카드를 클릭할 때 마다 해당 영화의 정보로 localstorage안의 데이터가 바뀌어 저장되고,
localStorage에 들어있는 데이터를 기반으로 리뷰를 작성할 때 영화의 id값을 사용하고, count를 0부터 증가시키면서 영화별 리뷰를 저장하고 출력되도록 하였다.
(ex. 200review0, 200review1, 256review0 ...)
상세 페이지
리뷰 출력
리뷰는 form으로 리뷰와 작성자, 비밀번호를 받아오는데
수정과 삭제를 위해서는 이 비밀번호가 일치해야만 한다.
작성된 리뷰에서 작성자명 밑에 수정과 삭제 버튼이 있으며,
눌린 버튼에 해당하는 리뷰를 수정하거나 삭제하도록 구현해야했다.
리뷰 수정
수정의 경우는 text를 입력하고 제출하는 공간을 만들어두고 display-none을 활용해 숨겨둔 뒤
수정 버튼을 눌렀을 때 localStorage에서 눌린 버튼의 리뷰의 작성자명을 찾는다.
찾게되면 prompt로 비밀번호를 입력하는 창이 등장하고,
비밀번호를 맞게 입력하면 수정할 수 있도록 text를 입력하고 제출하는 공간이 보여진다.
수정할 내용을 작성하고 제출 버튼을 누르면 해당하는 리뷰의 localStorage에서 리뷰부분을 수정해서 다시 데이터를 넣어준다.
리뷰 삭제
삭제의 경우는 count를 사용해서 리뷰를 구분한게 독이되어 count가 진행되다가 중간에 있는 리뷰를 삭제하면 중간count가 비어버려 데이터를 불러오는데 문제가 생기게 된다.
그래서 임의의 배열을 하나 만들어두고, count 값에 맞게 localstorage에 저장된 리뷰들을 배열에 넣어주었다.
삭제 버튼을 클릭하면 해당하는 리뷰를 찾고, 배열에서 해당하는 count의 리뷰를 삭제해주고,
localstorage에서도 삭제해준 뒤, 리뷰가 삭제되고 새롭게 정렬된 배열을 그대로 localstorage에 저장해주어서 삭제된 리뷰 이후의 리뷰들이 한 칸씩 앞당겨지도록 구현했다.
해당 웹페이지의 시연 영상은 아래 유튜브 링크에 있다.
https://youtu.be/k_4UhI1G8wA?si=aWWOjMIiVxLPfK14
마치며..
팀 과제를 종료했는데 다른 팀들의 결과물이 상당하였다.
피드백은 api를 좀 더 다양하게 활용하면 좋겠다는 피드백을 받았다.
자가 진단을 조금 해보자면,
너무 localstorage에만 의존하지 않고 쿼리스트링으로 정보를 전송하는 것도 좋았겠다라는 생각이 들었다.
localstorage가 필수로 포함되어야 한다는 생각에 여기에만 꽂혀 생각하지 못했다.
다음 과제때는 좀 더 다양한 방면으로 생각해봐야겠다.
