transColor 유틸함수 관련 오류수정

[Cupcakes33]

💁 issue

• transColor 의 rgb 값이 정상적으로 적용되지 않음

📑 원인

• 콘솔 확인 결과 색상 HEX 코드로 부터 String.slice로 추출해낸 rgb 값에 amount(가중치)를 곱하는 과정에서
  정상적인 HEX 값 범위인 0~255를 초과하여 비정상적인 HEX 코드값이 리턴되는 경우를 확인

🚧 해결

// 기존의 로직
lighten: (color, amount) => {
  if (!color) return;
    const r = Math.round(parseInt(color.slice(1, 3), 16) * (1 + amount));
    const g = Math.round(parseInt(color.slice(3, 5), 16) * (1 + amount));
    const b = Math.round(parseInt(color.slice(5, 7), 16) * (1 + amount));
  return `#${r.toString(16)}${g.toString(16)}${b.toString(16)}`;

// 변경된 로직

  lighten: (color, amount) => {
    if (!color) return;
    const r = Math.min(
      255,
      Math.round(parseInt(color.slice(1, 3), 16) * (1 + amount))
    );
    const g = Math.min(
      255,
      Math.round(parseInt(color.slice(3, 5), 16) * (1 + amount))
    );
    const b = Math.min(
      255,
      Math.round(parseInt(color.slice(5, 7), 16) * (1 + amount))
    );

    const rHex = r.toString(16).padStart(2, "0");
    const gHex = g.toString(16).padStart(2, "0");
    const bHex = b.toString(16).padStart(2, "0");

    return `#${rHex}${gHex}${bHex}`;
  },

• Math.min(255, _) : amount(가중치)를 곱한 값이 255를 초과한다면 최대값을 255로 적용
• padStart(2,'0') : 조절된 rgb 값을 16진수로 변환하고 해당 숫자의 자릿수를 2 자리로 고정

🚧 개선해야 할 점

• 위의 경우를 polished 라이브러리와 비교했을 때 색상에 유의미한 차이가 있는 것 같아서
  관련 레퍼런스를 찾아보고 있습니다.

[Cupcakes33]

polished 같은 경우, HSL (색상, 채도, 명도)를 변경하는 로직을 사용하기 때문에 조금 더 정확하게 밝기를 조절할 수 있다고 합니다.
HSL 을 직접 변경하는 로직에 대한 레퍼런스를 찾아봤는데 이해할 수 없는 수학적인 계산이 많고 시간적 여유가 부족하다고 판단해서
로직을 더 수정하지는 않겠습니다.