도서상세페이지
도서 상세 화면 요구 사항
- 각 도서 상세 정보를 노출
- 좋아요 버튼을 클릭시 좋아요 또는 취소 기능
- 수량을 입력하여 장바구니 담기
날짜 포맷팅 해주는 외부모듈
dayjs
다른 라이브러리들에 비해 많은 기능을 포함하고 있고 가벼워 많이 사용한다.
yarn add dayjs
| 💢💢 |
BookDetail.tsx
여기 코드에서, dl태그 아래로는 styled-components에서 모든 style이 먹지 않는다.
!important를 해도 css코드 자체를 웹에서 읽어오지를 못한다.
찾아봐도 이유를 알 수가 없다.
그래서 일단 inline에다 다 넣었다.
| 💢dl의 위치가 잘못되어 css가 먹지 않았다.. 위치를 수정하고 dl 이하로 설정한 css가 모두 잘 먹는 것을 확인했다. |
상세설명 더보기
지금 코드에서 expanded의 상태를 전달하는데, styled에 boolean타입으로 전달하니
다음과 같은 오류가 난다.
엄밀히 말하면 지금 styled는 div인데 div가 받아올 수 있는 attribute는 string밖에 없다.
그래서 boolean 타입으로 설정된 부분에서 에러를 내는 것이고, 이를 해결하기 위하여
expanded 앞에 $를 붙여준다.
| 💢Transient Props는 styled-components에서 제공하는 기능으로, props 이름 앞에 $를 붙이면 해당 props는 DOM 요소로 전달되지 않고, 오직 스타일링에만 사용된다. |
