mini project2 / 04 / 마무리 후 추가 작업

마무리 후, 추가 작업 요청이 들어왔다.

1) 데스크톱의 경우, 결제상세내역이 마우스 스크롤에 따라 움직이게
2) 모바일의 경우, 기존의 토글 약관 형식이 아닌, 팝업형식으로

동영상 첨부가 안 되는데, 결제상세내역이 주문자 / 배송지 와 수평라인 (고정)
에서, 마우스 스크롤을 아래로 내리면 결제수단(하단) 까지 스크롤이 이동한다.

처음에 CSS 로만 작업을 해보려 했는데, 이게 오래 된 코드에 table 이 엄청 서로 꼬아져있고,
불러오는 영역도 있어서, JS 로 픽스값과 스크롤을 이용하여, 적당하게 매치해줬다.

그랬는데, 생각해보니까 모니터나 해상도에 따라 또 다르니까
뷰포트 기반 방식으로 수정해줬다.

기존에는 '내용보기'를 누르면, 아래 토글형식으로 약관이 나타나고
'내용닫기'를 누르면, 약관이 사라지는 방식이였는데,

그 부분을 지우고,

내용보기 눌렀을 경우, 팝업 형식으로 위의 형식 처럼 약관이 뜨게 바꿨다.
기본적으로 네이버st 약관을 참고해서 만들어보았다.

처음에는 확인 버튼을 누르면, submit 부분과 연결이 되어,
주문 접수가 자동으로 진행 되어버렸는데, 그 부분을
event.preventDefault(); 를 사용해서, 동작을 막아주고,
그냥 창만 닫히게 해주었다.

이쪽 파일을 자주 보다 보니까,
이제 수정 작업에 속도가 좀 더 오르는 느낌이다.