2024. 5. 8. 두 번째 팀 과제 (최종)

• 한 줄 정리 : 최신 영화 리스트와 각 영화의 상세정보, 리뷰 등을 확인하고 작성할 수 있는 웹사이트
• 내용
  • 메인페이지
    • 메인페이지 반응형
      • @media screen으로 화면의 단위를 3개로 나눔
        • 1300px 이상 : 영화카드 4개 보임
        • 1000px 이상 : 영화카드 3개 보임
        • 700px 이상 : 영화카드 2개 보임
        • 그 이하 : 영화 카드 1개 보임
    • 영화 검색
      • addEventListener를 input으로 설정하여 입력 이벤트를 실시간으로 반영하여 검색결과 보여줌
      • .
    • 영화 카드
      • 카드를 마우스 hover하면 영화 줄거리를 보여줌
      • 카드를 클릭하면 해당 영화의 상세 페이지로 이동
    • .
    • .
  • 상세페이지 (영화 설명)
    • 헤더바 : 메인페이지로 돌아가는 홈버튼과 라이트/다크 모드로 바꿀 수 있는 버튼이 있음
    • 영화 정보
      • 영화 제목, 런타임, 개봉일, 장르, 평점 등의 정보가 있음
      • 영화 포스터와 영화 줄거리 정보를 제공
      • ➡️ 각 영화의 id와 detail API를 이용해 정보 제공
      • 배경으로는 영화의 메인 장면을 흐리게
    • 반응형
      • 화면의 크기가 630px 이하일 때,
        • 배경의 투명도를 50으로 변경(transition으로 부드러운 전환 효과)
        • 영화 줄거리 정보를 영화 포스터 하단으로 이동
  • 상세페이지 (영화 리뷰 작성)
    • 각 영화 상세페이지별 id값을 받아와 댓글을 생성 시 필요한 정보가 여러 객체 형태로 들어있는 배열 LocalStorage에 저장
    • 댓글 작성 (C) : username과 password를 입력해야 댓글 작성 가능
    • 댓글 읽기 (R) : 댓글 생성 시 남긴 username, 만들어진 시간, 리뷰 내용, 별점을 확인할 수 있음
    • 댓글 수정 (U) : 수정 버튼 클릭 시, 비밀번호와 수정할 내용 작성할 모달 창 띄우기
    • 댓글 삭제 (D) : 삭제 버튼 클릭 시, 비밀번호 입력할 수 있는 모달 창 띄우고 비밀번호 일치 시 삭제 가능
    • 영화 평점 : 별 5개를 기준으로 영화 평점을 줄 수 있도록 구현 ( + 리뷰와 함께 영화 평점 정보 업로드 )
    • 리뷰창 상단에 총 댓글 수 확인 가능
  • UX 고려한 유효성 검사
    • 메인페이지 영화 검색 인풋 창에 한글 기입 시 "영문으로 검색해주세요" swal.fire 유효성 검사 -> 알럿 닫힐 시 인풋 초기화, 페이지 리로드
    • 상세페이지 댓글 작성 username 기입 시 capsLock keyup 여부로 유효성 검사 (capsLock 활성화 시 인풋 상단에 innerhtml -> 경고문 출력)
  • 부가 기능
    • 라이트/다크 모드 : 버튼 클릭 시 모드 전환
      • LocalStorage를 이용하여 사용자의 현재 모드를 기억할 수 있도록 함
    • 스크롤 업 : 버튼 클릭 시 상단으로 이동
    • 반응형 웹
• 어려웠던 점 (간단하게 적어주세요!)
  • 상세페이지 배경 이미지의 왼쪽과 아랫쪽을 검은색 그림자처럼 보이게하는 부분 css가 어려웠음
    • mask-image를 사용해서 이미지 위에(position: absolute;) 2개의 요소를 위치시켜 각각 왼쪽에서→오른쪽으로 / 아래쪽에서→위쪽으로 linear-gradient를 줘서 구현함
  • 댓글 삭제하는 기능 구현
    • 우선 선택된 댓글을 삭제하기 위해 기존에 API를 통해 받아온 데이터를 활용하는게 아니라, LocalStrage 저장할 객체에 id key를 추가로 만들어 새롭게 id값을 부여해 저장해야했음.
    • 선택된 버튼의 id값이 아닌 나머지를 push를 사용해 새로운 배열에 넣어주고, 이걸 다시 setItem으로 LocalStrage에 넣으려고 했지만 push를 하는 과정에서 배열에 들어가는 순서 때문에 원하지 않는 결과값이 자꾸 생겼음.
    • push 대신 filter를 사용해 삭제된 버튼의 값이 없는 새로운 배열을 만들어주고, 마찬가지 방법으로 LocalStrage에 수정된 배열을 넣어주어 화면에 다시 그리는 방식으로 구현함
  • git과 github를 사용한 협업
    • 각자 한 페이지씩 맡아서 기능을 구현하는 것이 아니라 같은 기능을 나누어서 하나의 페이지를 구성하다 보니, 기능 구현 후 하나로 합치는 과정이 조금 복잡하게 느껴졌다. 어떤 식으로 합쳐야 할지 처음엔 막막했지만, 팀원들끼리 적극적으로 소통하고 질문하는 과정을 통해서 수월하게 해결할 수 있었던 것 같다.

---

 

내가 구현한 것 

 

• 메인페이지 검색창에 한글 기입 시 "영문으로 검색해주세요" swal.fire 유효성 검사 -> 알럿 닫힐 시 검색창 초기화, 페이지 리로드

 

• username 기입 시 capsLock keyup 여부로 유효성 검사 (capsLock 활성화 시 인풋 상단에 innerhtml  -> 경고문 출력)

 

• 상세페이지 댓글 수정 -> 모달창 구현

 

• 상세페이지 댓글 삭제 -> 모달창 구현

 

---

 

부족한 점, 후기

 

스크립트 쪽은 해도 해도 감이 안 잡히지만, CSS 쪽은 그래도 기본적인 정도는 다룰 수 있을 줄 알았는데 새로운 기능들이 너무 많았다.

 

구글링에 너무 의존하지 말아야 하나? 그렇다고 해서 외울수도 없는 노릇이고,, 코드를 짜다 막히면 구글링부터 하는 버릇이 들다 보니 코드를 짠 후 나만의 언어로 해석하는데도 시간이 좀 걸리고, 더군다나 금방 잊혀진다..

 

확실하게 내것으로 바꾼다거나, 설명? 해독? 할 수 있는 능력을 길러야겠다.

 

팀 프로젝트를 하며 느끼고 있는건데, 같은 캠프 과정을 거치고 있어도 사람마다 코드 짜는 방식이 다른 것 같다.
이게 또 어떻게 보면 조금 재밌기도 하고?

코드는 다른데 같은 기능을 구현하고 있으니! 팀원분들 코드 참고하고 읽어보는 재미도 쏠쏠하다.