24/2/05 트러블 슈팅

아래는 브라우저 상에 보이는 화면이다. 바 끝에 오른쪽에 숫자의 비율에 맞춰 분홍색으로 
바가 차올라야 되는 로직을 짰는데 제대로 적용이 안되는 문제가 발생했다.

 

import React from "react";

export default function ResultBar({ text, number, numbers }: { text: string; number: number; numbers: number }) {

  const tagCSS =

    "w-full h-[48px] rounded-[8px] mt-1 flex justify-between items-center bg-[#FAFAFA] relative overflow-hidden ";

  const numberCSS = "text-[#FF8145]";

  const textCSS = "absolute px-5 w-full h-full flex items-center justify-between";

  // console.log(number / numbers, "이거나 보자");

  const colorBarCSS = "absolute bg-pink-100 h-full w-1/3 ";

  return (

    <div className={tagCSS}>

      <p

        className={`absolute bg-[#FF8145] bg-opacity-10 h-full w-${

          number === 0 ? "" : number / numbers === 1 ? "full" : number + "/" + numbers

        }`}

      ></p>

      <div className={textCSS}>

        <p>{text}</p> <p className={numberCSS}>{number} </p>

      </div>

    </div>

  );

}

 

 

해당 컴포넌트로 받은 number와 numbers로 넘겨받은 type이 number인 값들의 변화가 tailwind에 적용되도록
className에 인라인으로 로직을 적용 시켜 줬다.  실제로  0이나 1 또는 1/2정도의 width값은 제대로 적용 되었지만
numbers가 많아지면 적용이 안되는 문제가 발생했다.

 

 

아래는 변경사항

import React from "react";

export default function ResultBar({ text, number, numbers }: { text: string; number: number; numbers: number }) {

  const tagCSS =

    "w-full h-[48px] rounded-[8px] mt-1 flex justify-between items-center bg-[#FAFAFA] relative overflow-hidden ";

  const numberCSS = "text-[#FF8145]";

  const textCSS = "absolute px-5 w-full h-full flex items-center justify-between";

  // console.log(number / numbers, "이거나 보자");

  const colorBarCSS = "absolute bg-pink-100 h-full w-1/3 ";

  return (

    <div className={tagCSS}>

      <p

        style={{

          width: `${number === 0 ? "0" : number / numbers === 1 ? "100" : (number / numbers) * 100}%`

        }}

        className={`absolute bg-[#FF8145] bg-opacity-10 h-full `}

      ></p>

      <div className={textCSS}>

        <p>{text}</p> <p className={numberCSS}>{number} </p>

      </div>

    </div>

  );

}

className에서 tailwind로 줬던 css값을 style속성으로 대체하여 해결했다.
style속성에서 width값은 %수치로 할당할수 있기 때문에 정확하게 작동하리라 판단했다.
실제로 className에서는 작동안되던 동적인 width의 변화가 style속성에서는 적용이 잘되었다.