fix(frontend) : Chromatic 불안정 스냅샷 수정

[zhwltlr]

fix(frontend) : Chromatic 불안정 스냅샷 수정

요약

HomeHeroSection의 Loading 스토리에서 발생한 Chromatic 불안정 스냅샷 문제를 parameters.chromatic.disableSnapshot: true 설정으로 해결했습니다.

목적

Loading 스토리에서 Chromatic이 불안정한 스냅샷 감지

• 원인: DaisyUI loading-spinner의 CSS 애니메이션이 스냅샷 찍는 순간의 프레임에 따라 다르게 렌더링 됨

예: 기존 템플릿이 복잡하여 팀원들이 작성에 어려움을 겪는 문제를 해결합니다.

변경 사항

Chromatic 공식 문서 권장사항을 토대로 스냅샷 비활성화를 합니다.
→ 애니메이션은 의도적으로 예측 불가능한 렌더링
→ 스토리를 무시하는 것이 권장됨

• parameters.chromatic.disableSnapshot: true 설정

테스트

[gemini-code-assist]

Code Review

PR의 목적은 명확하며, Chromatic에서 애니메이션으로 인해 발생하는 불안정한 스냅샷 문제를 해결하기 위해 disableSnapshot 옵션을 사용한 것은 타당한 접근입니다. 하지만 이로 인해 해당 스토리의 시각적 테스트 커버리지가 사라지는 단점이 있습니다. 아래 댓글에서 테스트 커버리지를 유지하면서 문제를 해결할 수 있는 대안을 제시했습니다. 검토 후 더 나은 방향으로 개선하는 것을 고려해 보시기 바랍니다.

[gemini-code-assist]

스냅샷을 비활성화하면 Loading 상태에 대한 시각적 회귀 테스트가 완전히 제외되어, 향후 로딩 스피너의 스타일이 깨지더라도 감지할 수 없게 됩니다.

더 나은 대안은 스냅샷을 비활성화하는 대신, Chromatic 환경에서만 CSS 애니메이션을 중지시키는 것입니다. 이렇게 하면 스냅샷을 안정적으로 유지하면서 시각적 테스트의 이점을 계속 누릴 수 있습니다.

이 스토리 파일에 데코레이터를 추가하여 이 문제를 해결할 수 있습니다.

import isChromatic from "chromatic/isChromatic";

// ...

export const Loading: Story = {
  args: {
    ...defaultArgs,
    value:
      "I'm selling a MacBook Pro 2021 for $1,200. Contact me at email@example.com",
    isLoading: true,
  },
  decorators: [
    (Story) => (
      <>
        {isChromatic() && <style>{`.loading { animation: none !important; }`}</style>}
        <Story />
      </>
    ),
  ],
};

이 방법을 적용하기 위해 현재 추가하신 parameters를 제거하고 위와 같이 decorators를 추가하는 것을 고려해 보세요. 이렇게 하면 테스트 커버리지를 유지하면서 Chromatic 빌드를 안정시킬 수 있습니다.