어제 만든 상세페이지에 기능을 구현해야한다..
일단 메인페이지의 카테고리와 검색기능은 살릴거니까
그냥 서브페이지도 메인페이지의 js파일에 연결하면 되는거 아닌가!?
라고 생각했지만! 역시 세상 쉬운게 하나 없ㄷr . . .
메인페이지에서 html양식을 가져왔다지만.. 카드양식은 지워버리고 ..
css도 추가하고.. 새로운 div들 넣다보니 .. 동작을 안했따.
문득 그런 생각이 들었다. 메인페이지에서 서브페이지에 넘어갈때
해당 영화 id를 url에 매개변수로 태워서 보내는걸 반대로
서브페이지에서 매인페이지로 넘겨주면 되는거 아닐까?
오쓑 나천재!
시도 했는데 . . 계속 잘 안됐다. 일단 먼저 서브페이지에 Popular 카테고리에 온클릭 이벤트를 만들어줬따.
const clickPopular = document.getElementById('popular-category');
clickPopular.addEventListener('click', () => clickPopularTab());clickPopularTab함수는 이렇게 작성했다.
const clickPopularTab = () =>
(window.location.href = `/main_page/main_pro8.html/Popular`);당연히 될리가 없었다. 그치만 그 당시에는 될 줄 알았다.. 껄껄 ㅋㅋ
그래서 검색도 해보고, 실제로 왓챠피디아에 가서 url이 어떻게 설정되어있는지 참고했따.
const clickPopularTab = () =>
(window.location.href = `/main_page/main_pro8.html?domain=Popular`);그래서 이렇게 수정해주었다. domain=Popular로 설정하고 메인 페이지 js 에서
const urlParamsJh = new URLSearchParams(window.location.search);
const CP = urlParamsJh.get('domain');Popular를 CP상수 안에 할당했다. CP는 Category Popular의 약자를 따서 정했다. 암튼 이렇게 서브 페이지에서 Popular카테고리를 클릭했다는 사실을
메인페이지에서도 알 수 있게 되었다!
if (CP === 'Popular') {
cardsRemove(popular);
}조건문을 사용해서 CP상수 안에 할당된 값이 Popular라면
메인페이지에 카드들을 보여주는 함수를 미리 선언해두었던 popular
API URL이 담긴 상수를 매개변수로 넣어 호출했다.
그랬더니 !!!!! 두둥 하고 미동도 없었따. 사실 없는게 아니라 내가 못 본 거다 .
왜냐면 기존에 있던 카드 밑에 붙었기 떄문에.. 20개 영화 뒤에 20개니 스크롤을 내리지 않으면 알아채기 힘들었다. 왜 안되는거지!?!??!/ 하면서
한시간을 허비한 내가 정말 밉다. . . 알아채고 난 뒤에 기존에 카드들을 붙여주는 함수 안에 movieCardBox.textContent = '';를 추가해서 기존 카드요소들을 지워주고 새로 붙이게 했더니 정상 작동했다.
팀원이 영화 설명과, 년도, 등등이 들어갈 html/css를 추가해서
두번째로 git을 사용해보았다. 충돌이 생각보다 좀 있어서 고생을 했지만 해결해냈다! 어..그래서 암튼 완성본
상세페이지이다. 버튼을 누르면 댓글을 등록할 수 있는 포스트창이 나온다.
다시 버튼을 누르게되면 포스트 창이 닫힌다.
일단 프론트에 css들은 이정도만하고.. 추가적으로 내일부터
댓글기능을 구현하려 할것 같다. 끗
껄껄껄
