return (
<StyledRecommendCard>
{restaurantList.map((value, i) => (
<div key={i} style={{ width: '25%' }}>
<RecommendFoodCard key={i} value={value} />
</div>
))}
</StyledRecommendCard>
);
map을 tag로 상위에서 감싸는 바람에 원치않는 사이즈가 계속 활성화 되었다.
const StyledRecommendCard = styled.div`
display: flex;
flex-wrap: wrap;
`;
상위 요소에서 포지션속성을 줘야 한다.
Bookmark 버튼 만들기
처음에는 바탕이 있는 버튼으로 컬러만 바꾸는 방식으로 했으나 ui에서 가독성이 떨어지는 바람에
테두리만 있는 버튼에서 바탕이 있는 버튼으로 바꾸는 디자인으로 변경하였다.
{isBookMark ? (
<i
onClick={() => setIsBookMark(!isBookMark)}
className="fa-solid fa-bookmark"
/>
) : (
<i
onClick={() => setIsBookMark(!isBookMark)}
className="fa-regular fa-bookmark"
/>
)}
const StyledRecommendCard = styled.div`
position: relative;
margin: 0 10px;
.fa-bookmark {
position: absolute;
bottom: 15px;
right: 15px;
font-size: 20px;
cursor: pointer;
}
.fa-regular {
color: white;
}
.fa-solid {
color: #36c5ef;
}
`;
내가 만들기 편한코드보다 사용자 입장에서 한번더 생각해 볼 필요가 있다고 생각했다.