[Dev-Log] 박진현 2021-12-09


오늘은 작가상세페이지를 구현하였다.
구현하면서 재밌었던것들 몇가지를 적어보려고한다.

### 반응형에서 이미지 정사각형으로 만들기
반응형에 따라 이미지를 정사각형으로 표현하는걸 어떻게 할 지 몰라 굉장히 고민 했었는데 [이렇게](https://velog.io/@developerjhp/%EB%B0%98%EC%9D%91%ED%98%95%EC%97%90%EC%84%9C-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%A0%95%EC%82%AC%EA%B0%81%ED%98%95%EC%9C%BC%EB%A1%9C-%EC%9E%90%EB%A5%B4%EB%8A%94-%EB%B0%A9%EB%B2%95) 해결하면 되는 거 였다.

### 배열필터링
판매 중인 작품 우선 보기를 구현하기 위해서 판매작품은 가장 뒤로 보내는 방법을 생각했었다.
```js
const clickCheckboxHandler = () => {
setIsClickCheckbox(!isClickCheckbox);
setProductFilter(
artistInfo[0].products
.filter((el) => el.inStock)
.concat(artistInfo[0].products.filter((el) => !el.inStock)),
);
};
```
버튼을 누르면 checkbox를 체크하고 맵핑해줄 배열을 위와 같이 새로 set해줬다.

### 좋아요 표시


먼저, 서버에서 받아온 likes(해당 작품을 좋아요 누른 유저들의 고유아이디가 적혀있는 배열)에 있는 요소 중 로그인한 유저가 있는지 확인하고 있으면 boolean값으로 스테이트를 준다.
그리고 ,
로그인 중인지 확인하고 로그인한 유저가 아니라면 로그인을 해달라는 모달을 뛰우고, 로그인 중인 유저라면 하트버튼 클릭시 위 핸들러가 실행되어서 patch 요청을 보내게된다. 성공하면 isLiked의 스테이트가 변경되면서 아래 로직에따라 해당컴포넌트가 재랜더링 되게된다.

내일은 각종 오류를 좀 고치고, 작품상세페이지/작품목록 좋아요 기능 구현하고.. 또 시간남으면 다른 기능도 구현해야겠다.