교보문고 리뷰 모달 + 장바구니 페이지, 레이아웃 끝

아래는 실제 교보문고 리뷰 등록 버튼을 누르면 나오는 모달이다.

 

 

 

 

처음에는 교보문고처럼 top : 10685px 같은 위칩값을 따라 했다.

화면에서 모달이 보이지 않아, 리뷰 작성 버튼이 안되는 줄 알고, log를 찍어 봤는데, 콘솔에선 렌더링은 되고 있었지만,

화면에서 보이지 않았다.

 

교보문고에서 왜 10685 값을 사용을 했는지 알고 싶어서, 구글링을 해보니, 이거는 jQuery 방식이라는 것을 알아버렸다.

 

모듈 만든 CSS

 

position: fixed, | display: flex , | justify-content: center | align-items: center 이 설정으로 하면 스크롤 위치와 상관없이

항상 가운데에 고정된 모달을 만들 수 있다는 것을 알아버렸당. ( ͡° ͜ʖ ͡°) 

 

아래는 완성된 리뷰작성 모달이당.

 

 

장바구니

교보문고는 비로그인 상태에서도 책과 물건을 장바구니에 담을 수 있지만, 비로그인 상태에서는 주문하기는 할 수 없다. 

하지만, 로그인을 하게 되면, 바로 장바구니에 다시 물건이 담아지고, 현재 내 배송위치까지 설정이 가능하다.

 

 

이로써 프론트 레이아웃은 다 끝났다.

 

다음 포스트에서는 기능을 추가를 할 계획이다.

 

화이팅!

 

 

모달 참고 한 사이트

https://velog.io/@bami/%EB%AA%A8%EB%8B%AC-%EC%B0%BD-Modal