24.10.01 트러블 슈팅

<ul className="rounded-[20px] flex flex-row justify-center items-end gap-[30px] bg-[rgba(0,0,0,0.4)] w-[350px] p-[20px]">
    {Object.entries(cham.info).map(([key, value]) => {
        return <ChampionInfo key={`${key}-${value}`} info={[key, value]} />;
    })}
</ul>

코드가 너무 길어져 직관성을 높이기위해 info관련 부분은 분리하였다.

const ChampionInfo = ({ info: [key, value] }: Props) => {
    return (
        <div>
            <li className="flex flex-col justify-end items-center h-[100px]">
                <div className="w-[20px] bg-[#d0e3ff]" style={{ height: `calc(100px*(${value}/10))` }} />
                <p>{INFO_MATCHER[key]}</p>
            </li>
        </div>
    );
};

export default ChampionInfo;

이렇게 데이터를 뿌려주고있었는데 분리된 컴포넌트의 calc부분이 작동하지 않았다.

이유가 뭘지 생각해봤는데 INFO_MATCHER[key]부분이 들어오기 전에 style부분이 작동하고 그에따라 무슨 버그가 있었던거 같다...

정확한 원인은 오늘 아침에 튜터님께 질문해볼 생각이다.