productDetail 페이지 구현

api 연동을 위한 json-server 데이터 추가

detail.json goods에서 user 등 조인된 형태의 데이터들이 필요하여 swagger-ui에 적힌 내용과 동일한 api 데이터를 json-server 안에 detail.json이라는 파일로 넣어주었다. 또한 wishlist 테이블에 추가하는 작업이 필요하여 현재 백엔드에는 이 내용이 반영되어 있지 않아 임의로 데이터를 추가해주었다.

api 함수 추가

api 문서에 적힌 내용과 비슷한 작명으로 getGoodsDetail이라는 함수를 만들어 get 방식으로 api 데이터를 받아온다 wish리스트에 데이터를 추가하기 위하여 위와 같이 wish.js를 만들어주고 위와 같은 함수들을 넣어주었다

jquery 오류로 인한 ui 변경

이전 ui의 경우 jquery를 통한 애니메이션 작업과 기타 작업들이 들어가 있어 이 부분을 bootstrap 기반으로 동작할 수 있게 수정하는 작업을 진행하였다. carousel이라는 bootstrap component를 이용하였으며, ui의 형태는 아래와 같다

productdetail 구현

!주의사항 bootstrap 기반으로 만든 carousel에 동적으로 v-for를 이용하여 image파일들을 넣어주게 되면 active가 제대로 동작하지 않는 오류가 발생한다. 이는 active가 옮겨갈 때 v-for로 동적으로 계속해서 호출하게 되면 발생하는 오류인 듯하다(자세한 것은 알지 못함) 데이터를 위와 같이 받아와주고 image 데이터들은 정적으로 데이터에 바인딩해준다 wishlist의 경우 중복성에 대한 유효성 체크를 해주고 wishlist에 데이터를 넣어준다. 현재는 alert 기반으로 작성하였으나 추후, 깔끔한 ui느낌으로 변경해야할 듯하다

sns 공유 기능을 위해 twitter api와 facebook api를 연동하였다.

신고 modal api 연동하여 데이터 넘겨주기

json-server 안에 위와 같은 구조로 데이터를 넣어준 후, blame.js 라는 api 안에 함수들을 정의해준다. 앞선 구조와 유사하게 modal 내에서 ok 버튼을 클릭하게 되면 handleSubmit이라는 함수를 호출하여 신고 테이블 내에 추가될 수 있도록 하였다. 이 때 유효성 검사의 경우, 내용이 비어 있지 않은 경우 추가할 수 있도록 구현하였다.

완성본

완성하였으나 위의 time 부분을 보면 상당히 지저분해 보인다 따라서 이를 백엔드에서 날짜 (월,일,시간,분)을 받아와서 계산하는 computed를 구현해주거나 혹은 백엔드에서 데이터를 나누어 주지 않는다면 문자열 처리 로직 알고리즘을 작성하여 computed를 구현해주어야 할 것 같다

DaengDaengMarket / DaengDaengClient