타이밍 이슈로 인한 랜더링이 올바르게 되지 않아 잘 나오던 UI가 안나오게 되었다.
const getTitle = () => {
if (data[0].category === '탁주') {
return '술담화 전통주 소믈리에의 이번 탁주 P.I.C.K!';
} else if (data[0].category === '약주') {
return '술담화 약주약주 소믈리에의 이번 약주 P.I.C.K!';
} else if (data[0].category === '청주') {
return '술담화 청주청주 소믈리에의 이번 청주 P.I.C.K!';
} else if (data[0].category === '증류주') {
return '술담화 증류주 소믈리에의 이번 증류주 P.I.C.K!';
}
};
return (
<section ref={ref} className="mainSojuRecommend">
<div className="sectionContent">
"어떤 술을 마실지 고민이라면, 이 술은 어때요?"
</div>
<div className="sectionSubContent">{getTitle()}</div>
<div className="viewMore">더보기 </div>
<div className="sojuCarouselOuter">
<div className={`sojuCarouselSet${productCardNum}`}>
{data.map(value => (
<ProductBoxCard key={value.id} data={value} />
))}
</div>
</div>
<button
className={
data[0]?.category === '탁주' ? 'arrowLeftBtnTak' : 'arrowLeftBtn'
}
>
<i className="fa-solid fa-angle-left" onClick={moveCardLeft} />
</button>
<button
className={
data[0]?.category === '탁주' ? 'arrowRightBtnTak' : 'arrowRightBtn'
}
>
<i className="fa-solid fa-angle-right" onClick={moveCardRight} />
</button>
{data[0]?.category === '탁주' && <SpecialPriceCard />}
</section>
);
});
ui가 랜더링 되기 전에 data가 넘어오는 바람에 타입에러가 발생되었다.
const getTitle = () => {
if (data[0]?.category === '탁주') {
return '술담화 전통주 소믈리에의 이번 탁주 P.I.C.K!';
} else if (data[0]?.category === '약주') {
return '술담화 약주약주 소믈리에의 이번 약주 P.I.C.K!';
} else if (data[0]?.category === '청주') {
return '술담화 청주청주 소믈리에의 이번 청주 P.I.C.K!';
} else if (data[0]?.category === '증류주') {
return '술담화 증류주 소믈리에의 이번 증류주 P.I.C.K!';
}
return null;
};