[feat] 고속충전 인터랙션 추가 (resolve #20)

[lybell-art]

#️⃣ 연관 이슈

• [feat] 인터랙션-고속충전 #20
• [design] 폰트, 색상 재정의 #4

📝 작업 내용

고속충전 인터랙션을 구현했습니다.

• 고속충전 인터랙션의 스타일 및 기능을 추가했습니다.
• 다이얼을 드래그로 돌릴 수 있으며, 다이얼이 0도 이하이거나 360도 초과이면 자동으로 0도/360도로 이동하는 트랜지션이 구현되어 있습니다.
• 실제 다이얼처럼 원형으로 드래그해야 합니다. (인터랙션 프로토파이에 그렇게 구현되어 있음)
• 반응형 웹을 고려했습니다.

인터랙션별 리셋 인터페이스의 기초를 추가했습니다.

function MyInteraction({ $ref }) {
  const [angle, setAngle] = useState(0);
  useImperativeHandle(
    $ref,
    () => ({
      reset() {setAngle(0);},
    }),
    [setAngle],
  );

• ref + useImperativeHandle 기반으로 구현했습니다.
• ref를 전달할 때에는 $ref라는 이름의 props를 전달하도록 우회해서 구현했습니다. 이렇게 구현한 이유는...
  • $ref라는 props의 이름이 ref를 가리킨다고 확실히 인지할 수 있어요.
  • 향후, react 19로 마이그레이션할 때 $ref를 ref로 문자열 일괄 변경으로 쉽게 마이그레이션할 수 있어요.
    • forwardRef를 사용하면 forwardRef 방식과 react 19의 ref 직접전달하는 방식의 코드 구조가 달라서 개발자가 할 일이 늘어납니다.
  • 코드가 깔끔해져요.

한글 폰트가 적용되지 않던 버그를 수정했습니다.

• 해당 버그는 저희가 기존에 사용하던 폰트가 한글 데이터가 없어서, 한국어가 기본 폰트인 맑은 고딕으로 나오는 버그였습니다.
• 프로젝트 공지방에 배포된 otf 폰트 파일을 적용해서 해결했습니다.

폰트 크기 관련 속성을 추가했습니다.

• text-head-l처럼, 저희 피그마 타이포 시스템에서 적어놓은 명칭을 사용하시면 됩니다.
• 저기 없는 크기의 폰트의 경우는... 최대한 가까운 크기의 폰트를 쓰시고, 없다면 tailwind 자체 정의한 폰트 크기를 쓰시거나 text-[4.375rem] 같이 직접 정의해서 쓰십시오.

참고 이미지 및 자료

💬 리뷰 요구사항

저희가 tailwind의 밖에 있는 custom css 파일을 짜야 할 일이 많이 생길 겁니다. 지금은 아무렇게나 알아볼 수만 있게 파일명을 구성했는데, 파일명 규약에 대해서는 논의가 필요해 보입니다.

[darkdulgi]

고생하셨습니다

[lybell-art]

테스트 방법

App.jsx에 다음과 같이 작성하세요.

import FastChargeInteraction from "./interactions/fastCharge/FastChargeInteraction.jsx";
function App() {
  return (
    <div className="w-full h-dvh bg-black">
      <FastChargeInteraction />
    </div>

해당 인터랙션 컴포넌트가 상위 컴포넌트의 width, height값을 따르고 있기 때문에 div로 따로 묶어줘야 합니다.