좋아요 TIL

2023.08.11

오늘의 회고

좋아요 기능을 구현해 보자.

좋아요

좋아요 DB 구조

처음 기획한 DB

"likes": [
  {
    "id": string,
  	"crsId": string,
  	"userList": [유저이메일1, 유저이메일2, ...]
  },
]

좋아요 하나 당 객체 하나로 DB를 만들어 보자.

"likes": [
  {
    "id": string,
  	"crsId": string,
  	"userEmail": string 
  },
  {
    "id": string,
  	"crsId": string,
  	"userEmail": string 
  },
]

하트 하트 색상 문제

antd의 하트 아이콘의 색상을 inline css로 바꿔보려고 했다. 그러나 색상이 바뀌지 않는 오류가 생겼다. 하트아이콘이 svg이미지여서 문제가 생긴 것 같다.

<HeartFilled style={{ color: 'red' }} onClick={this.onClick}/>

inline css를 지우고, 하트 아이콘을 감싸고 있는 div에 svg를 작성해보니 정상적으로 색이 바꼈다.

export const likeContainer = styled.div`
  svg {
    filter: invert(74%) sepia(26%) saturate(656%) hue-rotate(143deg) brightness(90%) contrast(87%);
    position: relative;
    top: 3px;
  }
`;

filter 속성은 흐림 효과나 색상 변형 등 그래픽 효과를 요소에 적용하며, 보통 이미지, 배경, 테두리 렌더링을 조정하는 데 쓰입니다.
참고: 야, SVG도 CSS로...
원하는 filter 값을 찾을 때는: CSS filter generator to convert from black to target hex color