[chore] 스토리북 import 오류 수정 및 addon-ally 추가

[dohy-eon]

ID

• ALT-221

변경 내용

• Storybook 접근성 점검을 위해 @storybook/addon-a11y를 추가하고, storybook/main.ts에 애드온을 등록했습니다.
• Storybook 실행/테스트 환경의 의존성 불일치로 발생하던 모듈 로딩 오류를 해결하기 위해 Storybook 관련 패키지 버전을 10.3.6으로 통일했습니다.
• Storybook 테스트 실패 원인이던 스토리 파일 내 컴포넌트 import 경로를 현재 프로젝트 구조(features/user/home, features/manager/home)에 맞게 정정했습니다.
• 결과적으로 test:storybook 기준 전체 스토리 테스트가 정상 통과하도록 복구했습니다.

구현 사항

• 접근성 애드온 도입

  • @storybook/addon-a11y를 devDependencies에 추가하고 storybook/main.ts의 addons 배열에 등록해, Storybook UI에서 WCAG 기반 접근성 검사(contrast/axe rule)를 수행할 수 있도록 구성했습니다.

• Storybook 의존성 정합성 확보

  • storybook, @storybook/react-vite, @storybook/addon-docs, @storybook/addon-vitest, @storybook/addon-a11y를 모두 10.3.6으로 고정했습니다.
  • package.json의 overrides에 storybook: 10.3.6을 추가해 하위 의존성까지 동일 버전을 사용하도록 강제했습니다.

• 스토리 import 경로 정리

  • 테스트 에러로 확인된 스토리 파일들의 import 경로를 실제 소스 구조와 일치하도록 수정했습니다.
  • 기존 features/home/user, features/home/manager 경로를 현재 구조인 features/user/home, features/manager/home 기준으로 일괄 정리했습니다.
  • 상대경로/alias가 혼재된 파일도 각각 실제 파일 위치 기준으로 맞춰 동적 import 실패를 제거했습니다.

• 검증

  • npm run test:storybook -- --run 실행 결과:
  • Test Files: 28 passed
  • Tests: 66 passed

참고 사항

Summary by CodeRabbit

릴리스 노트

• Chores

  • Storybook 의존성을 버전 10.3.6으로 업그레이드했습니다.

• New Features

  • Storybook에 접근성 검사 애드온을 추가했습니다.

• Refactor

  • 내부 코드 구조를 재정렬했습니다.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
alter-client	Ready	Preview, Comment	May 13, 2026 8:52am

[coderabbitai]

📝 Walkthrough

전체 변경사항

Storybook을 10.3.6으로 업그레이드하고 접근성 애드온(@storybook/addon-a11y)을 추가하는 한편, 프로젝트 전체 스토리 파일의 임포트 경로를 디렉토리 구조 변경(features/home/{user|manager} → features/{user|manager}/home)에 맞춰 업데이트합니다.

변경 사항

Storybook 구성 업그레이드

레이어 / 파일	요약
버전 업그레이드 및 애드온 활성화 package.json, storybook/main.ts	Storybook 버전을 10.3.6으로 통일하고 @storybook/addon-a11y 접근성 애드온을 활성화합니다.

사용자 기능 경로 마이그레이션

레이어 / 파일	요약
사용자 홈 스토리 경로 업데이트 storybook/stories/AppliedStoreCard.stories.tsx, storybook/stories/AppliedStoreList.stories.tsx, storybook/stories/HomeScheduleCalendar.stories.tsx, storybook/stories/MonthlyDateCell.stories.tsx, storybook/stories/WorkingStoresCard.stories.tsx	AppliedStoreCard, AppliedStoreList, HomeScheduleCalendar, MonthlyDateCell, WorkingStoresCard의 임포트 경로를 새로운 디렉토리 구조(features/user/home/…)로 마이그레이션합니다.

매니저 기능 경로 마이그레이션

레이어 / 파일	요약
매니저 홈 스토리 경로 업데이트 storybook/stories/StoreWorkerListItem.stories.tsx, storybook/stories/TodayWorkerList.stories.tsx, storybook/stories/WorkspaceChangeList.stories.tsx	StoreWorkerListItem, TodayWorkerList, WorkspaceChangeList의 임포트 경로를 새로운 디렉토리 구조(features/manager/home/…)로 마이그레이션합니다.

추정 코드 리뷰 난이도

🎯 2 (Simple) | ⏱️ ~10 분

관련 PR

• alter-app/alter-client#8: Storybook 메인 설정(storybook/main.ts)과 의존성 관리(package.json)에서 동일한 Storybook 초기화 작업을 수행합니다.
• alter-app/alter-client#12: storybook/main.ts에서 @storybook/addon-vitest 애드온을 추가하는 동일한 Storybook 설정 변경을 포함합니다.

제안 검토자

• kim3360
• limtjdghks

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	제목이 PR의 주요 변경사항을 명확하게 반영하고 있습니다. Storybook import 오류 수정과 addon-a11y 추가라는 두 가지 핵심 항목을 간결하게 표현했습니다.
Description check	✅ Passed	템플릿의 모든 필수 섹션(ID, 변경 내용, 구현 사항)을 포함하고 있으며, 구현 세부사항이 명확하고 검증 결과까지 제시되어 있습니다.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch chore/ALT-221

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (1)

storybook/stories/StoreWorkerListItem.stories.tsx (1)

13-13: ⚡ Quick win

하드코딩된 색상을 Tailwind 토큰으로 변경하세요.

bg-[#efefef] 대신 프로젝트에 등록된 bg-bg-dark 토큰을 사용해야 합니다.

♻️ 제안하는 수정

-      <div className="w-[320px] bg-[`#efefef`] p-3">
+      <div className="w-[320px] bg-bg-dark p-3">

Based on learnings: 프로젝트에서는 TSX 파일에 색상을 하드코딩하지 않고 tailwind.config.js에 등록된 토큰을 사용합니다. #efefef는 bg-bg-dark 토큰으로 대체해야 합니다.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@storybook/stories/StoreWorkerListItem.stories.tsx` at line 13, 하드코딩된 색상
bg-[`#efefef`]이 사용되고 있으니 StoreWorkerListItem.stories.tsx의 해당 div 클래스에서
bg-[`#efefef`]을 프로젝트 토큰 bg-bg-dark로 교체하세요; 즉 JSX의 <div className="w-[320px]
bg-[`#efefef`] p-3"> (찾기 기준: 클래스 문자열에 bg-[`#efefef`] 포함)에서 bg-[`#efefef`] 항목만 제거하고
bg-bg-dark를 추가해 Tailwind 토큰을 사용하도록 변경하면 됩니다.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@storybook/stories/StoreWorkerListItem.stories.tsx`:
- Line 13: 하드코딩된 색상 bg-[`#efefef`]이 사용되고 있으니 StoreWorkerListItem.stories.tsx의 해당
div 클래스에서 bg-[`#efefef`]을 프로젝트 토큰 bg-bg-dark로 교체하세요; 즉 JSX의 <div
className="w-[320px] bg-[`#efefef`] p-3"> (찾기 기준: 클래스 문자열에 bg-[`#efefef`] 포함)에서
bg-[`#efefef`] 항목만 제거하고 bg-bg-dark를 추가해 Tailwind 토큰을 사용하도록 변경하면 됩니다.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 0b9735ab-10ca-45b5-a69f-c5bc37b54db6

📥 Commits

Reviewing files that changed from the base of the PR and between f13663e and fb5bf2e.

⛔ Files ignored due to path filters (1)

• package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (10)

• package.json
• storybook/main.ts
• storybook/stories/AppliedStoreCard.stories.tsx
• storybook/stories/AppliedStoreList.stories.tsx
• storybook/stories/HomeScheduleCalendar.stories.tsx
• storybook/stories/MonthlyDateCell.stories.tsx
• storybook/stories/StoreWorkerListItem.stories.tsx
• storybook/stories/TodayWorkerList.stories.tsx
• storybook/stories/WorkingStoresCard.stories.tsx
• storybook/stories/WorkspaceChangeList.stories.tsx

[dohy-eon]

커버리지 빨간맛
레드벨벳보다 진한거 같아요

[limtjdghks]

storybook import 수정하는걸 까먹었습니다. 죄송합니닷...