Storybook을 사용해보자(4) - public 폴더를 인식하라!

📌문제상황

chromatic을 이용해 storybook을 배포했다! 그런데 storybook에서는 제대로 보이던 이미지가, chromatic의 Snapshot에서는 제대로 보여지지 않는 문제가 발생했다!😣

현재 스토리가 어떻게 만들어졌는지 살펴보자면 아래와 같다.

1. mockData.ts에 객체 형식의 더미데이터를 두었다.
2. 더미데이터에 {webformatImage: http:www.test.com/12345~} 처럼 외부 url의 이미지를 넣어두었다.
3. next.js에서 해당 이미지 url을 인식할 수 있도록 next.config.js를 수정했다.
4. 이를 이용해 Story를 구성했다.

npm run storybook 을 이용해 localhost:6006번에 띄우는 storybook은 문제가 없었고, chromatic에서 배포된 storybook에서도 문제가 없었고, chromatic의 snapshot test에서만 문제가 되었다.

일단 해당 snapshot의 alt가 표시되고 있는 이미지 태그의 url을 확인해보니 어라?😲 url이 내가 생각하던 그 url이 아니었다.

https://snapshots.chromatic.com/snapshots/~

즉 사용자인 나에게 보여지기 전에 서버에서 snapshot을 만들어 이미지화 한 다음 보여지는 것인 만큼, http 주소로 시작되는 이미지를 클라이언트 단에서 불러오기 어렵겠다는 판단이 들었고, 이를 해결하기 위해 storybook에 필요한 mockdata 이미지를 public에서 관리하는 것으로 방향을 잡았다.

✅public에 이미지를 넣었더니..

public 폴더에 필요한 example.jpg와 example_profile.jpg를 넣었고 위에 mockData.ts 작성한 더미데이터의 경로를 /example.jpg와 /example_profile.jpg를 넣어두었더니..! 이번엔 storybook에서 이미지를 제대로 띄우지 못하는 문제가 발생했다! 😥

경로 자체에는 큰 문제가 없는 듯 해서, storybook에서 public의 이미지를 못찾아오는 듯 해, 방법을 찾다가, storybook의 config라 할 수 있는 main.ts에 아래와 같은 구문을 추가해주었다.

import type { StorybookConfig } from "@storybook/nextjs"

const config: StorybookConfig = {
  staticDirs: ["../public/"], // 👈Storybook에서 public을 참조할 수 있도록 한다.
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
  addons: [
    "@storybook/addon-onboarding",
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@chromatic-com/storybook",
    "@storybook/addon-interactions",
  ],
  framework: {
    name: "@storybook/nextjs",
    options: {
      cssLoaderOptions: {
        importLoaders: 1,
      },
      postcssLoaderOptions: {
        implementation: require("postcss"),
      },
    },
  },
}
export default config

이후 다시 한 번 storybook을 테스트 하니 아주 잘 나온다! 🤗

✅chromatic에선?

저번에 storybook이 변경되면 chromatic에 자동 배포 되도록 CI/CD를 작성해두었더니 storybook 배포와 함께 chromatic이 새로 배포되어있는 것을 확인했고, 새로 배포된 chromatic에서는 snapshot에서도 이미지가 제대로 표시되었다. 😎

이번 과정을 통해 test에서는 일관성을 유지하는 것이 중요한데, 온라인 상에 업로드되어있는 이미지들의 경우 안정성을 보장하기 어려운 만큼, public에서 더미 이미지를 관리하는게 낫지 않을까 하는 생각했다. 🤔

또 chromatic에 대해 찾아보면서 Figma, Slack연결 플러그인이 있는 것도 알게 되었는데, 둘다 현재 사내에서 사용하고 있는 만큼 시도해보면 좋지 않을까 한다. 새로운 기술을 사내에 도입하려면 도입을 요청하는 사람이 해야할일이 참 많다는걸 오늘도 다시 한 번 느끼게 된다..

🗂️참고 사이트

• https://stackoverflow.com/questions/64016896/cant-serve-static-files-in-nextjs-storybook