[URECA] 독서 목표 설정 및 챌린지 달성 지원 웹사이트 구현을 통한 웹 아키텍처 이해 #2

오늘 이렇게 외곽은 만들었다.. 외곽만드는데도 하루.. 어제 오늘 총 2일이 걸렸다.

조금한 디자인에도 신경이 많이 쓰인다.

 

웹 api를 어디꺼를 해야되나 찾다가 국립중앙도서관으로 정했다.

너무 늦게 신청한 탓일까 바로 승인이 나질 않는다.

네이버 도서 api는 전체 페이지 수를 알 수 없기에 제외되었다.

 

front 윤곽을 잡고 나서 다시 한번 더 어떤 api를 사용할지 구글링했다.

알라딘 api가 그나마 원하는 조건에 부합해서 일단 api는 만들어놨다.

 

어떻게 구현을 해야할지,, 어떤걸 우선순위로 둬야할지 머리가 복잡해졌다.

차근차근 해야할 기능들을 써 내려갔는는데 과연 다음주 목요일까지 구현할 수 있을지에 대한 의문이 커져가지만 

내스스로를 믿고 해보기로 했다.

 

페어 프로젝트라 뒤쳐지면 안된다.. 열심히 시간을 관리하면서 해야된다.

 

오늘 구현하면서 어려웠던 점을 작성하라고 한다면 

chart.js 프레임 워크를 이용해 목표 독서 진행률을 표시하려고 한다. 

이런식으로 만드려고 하는데 chart.js에서는 오른쪽 사진처럼 만들어진다..

chart.js도 버전이 달라 현재 버전에서는 내가 원하는 가로 바형이 잘 안만들어진다.

(이거는 알라딘 api를 다시 연동해본 다음 시도해볼 예정이다.)

위에서도 작성했듯이 사소한 거에 시간을 할애했다.

예를 들면 검색바 모형이다. 

사락 25 독서 노트 페이지가 클론하면서 참고하는 대표적인 사이트이다.

왼쪽 검색 바 모형이 맘에 들지 않는다. 

 

밑에 사진과 같이 검색바를 만들었지만 

지금(api 적용전) 들은 생각인데 

yes24가 그렇게 디자인을 한 이유가 있을거라고 생각한다.

나도 저 읽고 싶어요 밑에와 같이 정렬 아이콘을 추가한다면 yes24와 같이 디자인을 해야 사용자들이 편리할거라는 생각이 든다.

 

 

 

또 내가 어디서 시간을 뺐겼냐

dropdown으로 정렬할 수 있게하는 구조에서 시간을 뺐겼다.

 

down아이콘을 중앙으로 옮기려고 해도 안옮겨졌다.

페어의 도움으로 중앙에 올 수 있게 만들었으나 

회의가 끝나고 html을 다시 보니.. 아.. class에 -가 빠져있어.. 적용이 안된것이었다.

그러니 오른쪽 사진처럼 가운데에 이중으로 border가 생기는 문제를 또.. 없애기 위해 시간을 할애했다.. 이 부분 역시 -를 추가해 ㅋㅋ 해결할 수 있었다.

다시 -를 추가해 중앙에 올 수 있게 만들었다.

 

드롭다운 디자인이 맘에 들지 않았다. 각각의 모서리를 있게 하고 싶으나 

드롭다운을 접으면 모양이 안맞고.. 피면 디자인이 괜찮고 

드롭다운이니까 접을 수 있어야한다. 

예시 사이트

타 사이트에 가봤더니 border-radious를 추가를 안하거나 각각 border-radious를 넣었다.

둥근느낌의 사이트여서 예시 사이트를 참고해 만들었다. 

 

내일은 api 호출을 해야겠다!