Upgrade Storybook to v10

[hyoseong1994]

Summary

Upgrades Storybook from 8.6.12 to 9.0.0 as requested in issue #239.

Changes

• Updated all @storybook/* packages to 9.0.0
• Updated @chromatic-com/storybook to 3.2.2
• Updated @storybook/test-runner to 0.21.0
• No configuration changes required - existing configs are compatible

---

• @storybook/addon-queryparams가 더 이상 업데이트되지 않아서 decorator로 변경
• 스토리북에서 ts 검증이 엄격하게 변경되었기 때문에 tsconfig.node.json에 추가
• 각 스토리의 아폴로가 캐시하여 스토리를 변경하더라도 동일한 API 결과를 사용하는 문제가 있어 apollo cache clear 추가
• 로컬 스토리지북을 타겟으로 스토리지북 테스트 수정

issue

유효한 URL임에도 불구하고 "Are you sure it's running?" 오류가 발생

302 로그인 페이지로 리디렉션

storybook-test.yml 에서
storybook build -> 로컬 serve -> 로컬 타켓 테스트
로 변경하였습니다.

Closes #239

---

Generated with Claude Code

[DaleSeo]

storybook-test.yml 에서
storybook build -> 로컬 serve -> 로컬 타켓 테스트
로 변경하였습니다.

조치는 이해가 되는데 이슈가 왜 발생하는지 잘 이해가 안 되는데 원인 분석을 해보셨을까요? 혹시 현재 이번달 Chromatic 무료 사용량을 다 소진해서 그런 걸까요?

[DaleSeo]

@hyoseong1994 제가 위에 코멘트에 멘션을 하지 않아서 혹시 못 보셨을까봐 리마인드 드립니다!

[hyoseong1994]

조치는 이해가 되는데 이슈가 왜 발생하는지 잘 이해가 안 되는데 원인 분석을 해보셨을까요? 혹시 현재 이번달 Chromatic 무료 사용량을 다 소진해서 그런 걸까요?

설명이 빈약했네요
크로매틱 공식문서에 보면 기본적으로는 비공개 설정으로 storybook 배포된다고 되어있습니다. (기존에는 공개였다가 변경된건지는 확인못했어요)
해서 detail에 있는 스크린샷과 같이 curl명령어로 해당 url 접근결과 302 리다이렉트하여 https://www.chromatic.com/login 로 보내는 현상을 확인하였고 github action같이 외부 환경에서 인증정보없이는 안될거라고 판단되어 로컬 타켓 테스트로 변경하였습니다.

Every time you trigger a Chromatic build, your Storybook is published on our secure CDN. Published Storybooks are private by default with access restricted to logged in collaborators. Visibility can be set to public if desired.

https://www.chromatic.com/docs/publish/#direct-access-to-your-storybook

[hyoseong1994]

@DaleSeo 안녕하세요 달레님
문서를 제대로 안 읽어서 놓친 부분이 있네요

Published Storybooks are private by default with access restricted to logged in collaborators.

이 문구만 보고 기본값이 비공개구나 지금 현상과 맞네라고 오판했습니다.

공개 설정이가능하며, 기본적으로 github 공개여부와 일치하는게 맞네요
leaderboard는 open source임으로 공개되어야 맞습니다.

다만 아래 스크린샷과 같은 문제가 있어서 sync가 되지 않고 기본값인 비공개로 되었던것으로 예상됩니다.

sync 해도 될까요?

일부러 비공개 유지하시는거라면 지금처럼 로컬 테스트로 진행해야하며
sync해도 문제없다면 기존 스크립트로 롤백하도록하겠습니다.

[DaleSeo]

sync 해도 될까요?

넵넵!

[DaleSeo]

피드백 반영해주셔서 감사합니다. 수고하셨어용 🫶

[hyoseong1994]

@DaleSeo 안녕하세요 달레님,
크로매틱 사용량 초과로 UI Tests 실행이 불가한데, 해당 체크를 선택 사항으로 변경 가능할지 문의드립니다.

sync 이후 storybook-test.yml을 롤백했으며, 현재 UI Tests가 필수로 설정되어 있어 merge를 진행하지 못하고 있는 상황입니다.

만약 변경이 어렵다면, 사용량이 초기화된 이후에 merge 진행하겠습니다.

[DaleSeo]

@hyoseong1994 UI Tests 체크를 선택으로 변경하였습니다. 4일 후에 사용량이 리셋되니 안전하게 기다렸다가 병합하셔도 나쁘지 않을 것 같은데 효성님의 판단에 맡기겠습니다.

[hyoseong1994]

@hyoseong1994 UI Tests 체크를 선택으로 변경하였습니다. 4일 후에 사용량이 리셋되니 안전하게 기다렸다가 병합하셔도 나쁘지 않을 것 같은데 효성님의 판단에 맡기겠습니다.

넵 안정성을 위해서 초기화되고 테스트 후 병합하도록하겠습니다. 감사합니다.