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

어제까지 이제 검색을 하면 책을 서버와 DB에 저장하도록 구현했다.

이제 저장 책을 HOME화면에 불러와야한다.

progress코드를 짰는데 

이렇게 책을 저장하면 오류가 나타난다. 

 

progress코드들을 삭제하고 book코드만 있을때는 저장이 잘된다..

아

500에러가 뜨는데 이것저것 방법을 실행해도 안된다...

 

 

 

기존의 문제점이 progress branch를 만들어서 book에 있는 정보들을 가져와 홈 화면-읽고 싶어요에서 읽고 있어요, 다 읽었어요, 읽고 싶어요를 분류하려고 했다. 

 

위에 적힌 내용처럼 이제 충돌이 일어나 POST 500 오류가 나타났다. 

 

또한 progress branch는 progress table과 연동되어 book table에서 정보를 다 가져와야했다.

하나의 progress 브랜치가 책의 상태를 변경하거나 추가정보를 업데이트 하면서 다른 book branch에 있는 데이터 상태와 달라져서 오류가 났었던거 같다. 근데 참고로 자바 큰솔에서는 오류가 보이진 않았고 

브라우저에서만 오류가 났던것이다.

 

위의 방법을 해결하게 위해서 결국엔 progress branch를 삭제하는 방버을 택했다. 

progress branch를 삭제하고 상태 변경을 book table에서 가능하게 구현했다. 또한 book table에서 status(읽고 싶어요, 다 읽었어요, 읽고 싶어요)의 기본 키는 읽고 싶어요로 설정했다. 

이렇게 이제 book branch에서 상태를 변경하면 구분이 가능하게 로직을 구현했다.

 

각 권수마다 카운트가 되어야한다. count 변수를 선언하고 하나씩 추가될때마다 count++로 하려다가

배열의 길이를 통해 카

운트를 세는 방식으로 변경했다. 

 

 

 

 

 

또 하나의 문제는 책을 많이 추가 하면 화면에서 벗어나는 오류가 생겼는데

보다 간편하게 해결할 수 있었다. 

overflow-y:auto를 통해서 스크롤 기능을 추가했다.

 

해결하지 못한 문제는 목표 설정을 하기 전에 접었다 폈다 토글 기능을 추가하는 것이다.

이 기능은 나머지 기능들을 다 구현하면 다시 해볼 예정이다. 

사진 오른쪽 구석을 보면 + 보튼이 있다. 이 기능을 이제 책을 추가할 수 있는 페이지로 넘어간다. 즉, 검색페이지로 넘어가는 것이다 .

 

원래는 position:absoulte를 했는데

화면 스크롤이 밑으로 될때 버튼이 고정되지 않고 위로 움직인 다는 점때문에 

고민을 하고 여러가지 방법을 써봤다. 그렇지만 해결되지 않았다. 

위의 사진에서는 position:fixed로 구현했다. margin-right를 이용해서 위치를 옮기는 방법을 찾았는데 그렇게 구현을 해도 되는것인지 궁금하긴 한다. 반응형으로 하면 위치가 달라지는데 

반응형으로 될때마다 미디어쿼리를 통해 위치를 변경해보려고 한다!! (<- 쓰다보니까 생각난 아이디어이다)

 

 

 

 

토글 상태를 변경할대마다 밑에 토스트 문구가 나타난다. ㅎㅅㅎ

 

 

여기 토글은 js에서 select으로 설정했기 때문에 css를 적용못한다..!