emotion의 styled-comonents에 props를 넘겨주어야 할 상황이 왔다.
가끔 검색하는 방법이므로 블로그에 기록.
'styled.엘리먼트' 뒤에 <{prop:타입}>을 지정할 수 있고,
스타일 값에 props인자가 담긴 함수를 넣어 조건을 달 수 있다.
https://emotion.sh/docs/typescript#passing-props
const [mood, setMood] = useState('보통');
const onClickMood = (e: React.MouseEvent<HTMLButtonElement>) => {
e.preventDefault()
setMood(e.currentTarget.id)
}
const Mood = styled.button<{mood:string}>`
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
background-color: ${(props) => props.mood === props.id ? "#1677ff" : "#fff"} ;
color: ${(props) => props.mood === props.id ? "#fff" : "default"};
border: 1px solid ${(props) => props.mood === props.id ? "#1677ff" : "#dae1e6"} ;
font-size: 11px;
cursor: pointer;
border-radius: 3px;
`
<C.Mood onClick={onClickMood} id="보통" mood={mood}>
<C.Imoge>😑</C.Imoge>
보통
</C.Mood>
버튼을 클릭하면, 무드 버튼의 스타일이 바뀐다.(라디오 버튼과 동일한 효과)
사전에 디자인을 하지 않고 라이브러리를 통해서 스타일을 잡아가고 있다. 지금은 기능에 집중하고 있지만, 포트폴리오에 싣기 위해서는 차후에 디자인 컨셉을 전체적으로 다시 잡아서 적용이 필요할 것같다.
여기까지는 스타일링과 라우팅을 구축하였고, 이제 정말 데이터를 CRUD할 수 있게 파이어베이스를 통해서 통신을 구현하는 일이 남았다.