2차 프로젝트 (리디북스)

결과

Position

• Books Detail Page

기능구현

• Img 클릭하면 모달창으로 Zoom-In 기능구현블로그
• 백엔드에서 별점 평균 받아와서 별 아이콘 색깔넣고, 점수 나타냄 기능구현블로그
• 표지에 대여/할인 딱지가 붙어있으면 해당 가격만 나오고, 둘다 아닐때는 정가로 나타냄 기능구현블로그
• 작품소개 -> 펼쳐보기, 접기 버튼 토글 기능구현블로그
• 저자프로필 -> 작가 신간알림/소식 버튼 클릭하면 해당 작가를 구독한다는 알림이 뜨고 백엔드로 userId를 통해 id를 넘겨줌 기능구현블로그
• 저자프로필 -> 작가 신간알림/소실 받는 중을 클릭하면 알림이 삭제되었다는 알림이 뜨고 백엔드로 저장 돼 있는 id가 삭제됨
• 대표저서 -> 백엔드에서 이미지, 제목, 별 평균점수 받아와서 별 아이콘으로 나타냄
• 별점리뷰 -> 별 아이콘을 호버하면 처음부터 해당 아이콘까지 색깔이 나타나고, 아이콘 마다 해당 별점텍스트가 나타남 기능구현블로그
• 별점리뷰 -> 아이콘을 클릭하면 해당 별 순번까지 색깔이 유지됨

느낀점

리디북스 홈페이지를 프론트엔드 4명과 백엔드 2명이 리디북슬북슬 이라는 팀명으로 작업

1차때의 부족했던점 들을 보완해서 2차때는 하나하나 사소한것부터 큰것까지 서로 소통하며 첫 미팅에 아주 긴 시간을 쏟았다.
그 결과 매일 하는 스탠드업 미팅에서 원활하게 소통했고 10분이면 끝났다.
우리는 팀원 한분 한분이 어떤 업무를, 얼만큼 진행하고 있는지 미팅을 통해 파악할 수 있었고.
얼마만큼의 속도가 필요한지의 여부도 알 수 있었다.

나는 도서상세페이지를 담당했다.
1차 프로젝트때는 너무 레이아웃 위주로 작업을 해서 기능구현을 위주로 작업하고 싶었다.
그래서 이것저것 기능이 있고 내가 할 수 있는 수준에서 조금 욕심을 내서 상세페이지를 선택했다
사실 처음에는 내가 할 수 있을까 제 시간에 못 끝내진 않을까 걱정하며 고른 페이지지만,
해냈다! 나는 할 수 있었다.

배운점

모달창 만들기

처음으로 만들어본 모달창.
이미지를 호버했을때 zoom-in/zoom-out 돋보기커서가 나타나고,
이미지클릭시 해당 이미지가 확대되고, 배경색이 어둡게 만드는 기능이었다.
처음에는 배경색에 opacity를 적용했는데, 이미지까지 함께 투명도가 적용돼서 애를먹었다
나라사랑 동기사랑.
동기에게 도움요청을 하니, 본인도 나와 같은 경험을 하고 시간을 많이 잡아먹었지만 나의 시간을 벌어주겠다며 흔쾌히 코드를 공유해줬다. 역시 함께해서 위코드..
동기에게 도움 받은 내용은 배경색에 rgba로 색깔과 투명도를 주는 것이었다.
원래 rgba를 알고는 있었는데 코드를 짤땐 전혀 생각이 나지않았다 ..
복습을 많이 하자는 다짐과 함께 다음기능으로 넘어갔다

백엔드와의 통신

한번도 데이터통신을 해보지 않았고, 주변에서 항상 통신에러를 잡고 끙끙대고 있어서 겁을 많이 먹었다.
레이아웃을 끝낸 후에 백엔드 포스트맨에서 키값을 토대로 mock data를 작성했고,
fetch함수에 IP주소를 받아서 실행을 했더니 1초만에 됐다.
너무 쉽게돼서 황당했다.

펼쳐보기/접기 토글

처음에는 펼쳐보기 하고 나오는 문단 <p>에 접기 버튼을 넣어서 한꺼번에 보여졌다가 숨겼다
멘토님이 보시고 따로 빼는게 나을것 같다고 하셔서 코드를 수정했다
on/off버튼을 각각 따로 만들고 height를 조건부 스타일링으로 줬다.
true면 190px로 늘려줘서 본문내용이 보이게, false면 100%로 화면에 맞게 줄어들게 하였다.