[feature] 스토리가 없던 공용 컴포넌트 3개에 스토리를 추가한다 by seongwon030 · Pull Request #2269 · Moadong/moadong

seongwon030 · 2026-10-29T10:33:28Z

문제

common 컴포넌트 30개 중 9개에 스토리가 없다. 이 중 ToggleButton·ResponsiveSheet·WebviewTopBar는 여러 화면에서 쓰는데 카탈로그에서 볼 수 없다.

해결

세 컴포넌트에 스토리를 추가한다. 컴포넌트 코드는 건드리지 않았다.

컴포넌트	스토리
`ToggleButton`	Inactive·Active·LongText·Group(하나만 선택)
`ResponsiveSheet`	Default·CustomBackground. 닫힌 채 시작하고 버튼으로 연다
`WebviewTopBar`	Default·LongTitle·WithFallbackPath

ResponsiveSheet를 열린 채 시작하면 docs 페이지 전체를 오버레이가 덮고, #modal-root가 useEffect에서 생기는 탓에 첫 렌더에서 Portal이 null이 된다. 그래서 Modal 스토리처럼 닫힌 상태에서 시작한다.

검증

정적 빌드를 Playwright로 열어 확인: ResponsiveSheet docs 페이지에 오버레이 0개, "시트 열기" → 시트 렌더, ESC → body 잠금 해제
npm run typecheck·eslint 통과, 스토리에서 실서버 호출 없음

영향 범위

스토리 파일만 추가한다. 앱 코드 변경 없음. Chromatic에 새 스토리 9개가 baseline으로 추가된다.

한계와 대안(선택)

FeedbackPromptDialog는 props가 없고 상태를 채우는 유일한 경로가 실제 API를 불러서, 컴포넌트를 고치지 않고는 스토리를 만들 수 없어 뺐다
SatisfactionModal은 #2054가 수정 중이라 뺐다
열린 채 시작하는 오버레이 스토리(BottomSheet)의 첫 렌더 문제는 baseline이 바뀌는 수정이라 따로 다룬다

- ResponsiveSheet는 닫힌 채 시작해 docs 페이지를 오버레이가 덮지 않게 한다 - WebviewTopBar는 window.history.state로 이전 화면을 판단해 스토리에서는 fallbackPath 분기만 재현된다

vercel · 2026-10-29T10:33:34Z

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

Project	Deployment	Actions	Updated
moadong	Ready	Preview	Oct 29, 2026 10:54am UTC

coderabbitai · 2026-10-29T10:33:38Z

Warning

Review limit reached

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

Next included review available in 39 minutes.

Check out review usage here.

View limit details

Limit details: You’ve used the included review currently available.

Learn how review limits work.

Review configuration:

Run configuration

Source mode: Auto
Repository: Moadong/moadong
Branch: feature/&#35;2264-common-component-stories-MOA-1233
File: .coderabbit.yaml
Commit: 006c962
Layers: Repository YAML
Review profile: CHILL
Plan: Advanced
Run ID: bfbc6542-2034-4b35-a8de-7db2cb6b5551

Commits

Reviewing files that changed from the base of the PR and between 712414b and 006c962.

Files selected for processing: 3

frontend/src/components/common/ResponsiveSheet/ResponsiveSheet.stories.tsx
frontend/src/components/common/ToggleButton/ToggleButton.stories.tsx
frontend/src/components/common/WebviewTopBar/WebviewTopBar.stories.tsx

Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

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

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

reviewer-harry · 2026-10-29T10:33:43Z

Claude finished @seongwon030's task in 51s —— View job

harry 리뷰 총평

스토리 파일 3개만 추가했고 컴포넌트 코드는 건드리지 않았어요. 변경 범위가 깔끔해요. ResponsiveSheet를 닫힌 채 시작하게 한 이유(docs 페이지를 오버레이가 덮는 문제, #modal-root 생성 시점)를 PR 본문과 주석에 함께 남긴 점도 좋아요.

인라인으로 남긴 지적

ResponsiveSheet.stories.tsx에 hex 색상 두 곳(#787878, #f5f5f5)이 하드코딩돼 있어요. Toast.stories.tsx처럼 colors.gray[700]·colors.gray[100] 토큰으로 바꿔 주세요.

참고 (수정은 이 PR 범위 밖이에요)

ResponsiveSheet.tsx:11의 JSDoc은 sheetBackground가 "바텀시트로 열릴 때만 적용"된다고 적혀 있어요. 실제 코드는 데스크톱 DesktopCard에도 $background를 넘기고 있어서, 이번 스토리 주석("바텀시트·모달 카드 모두에 적용된다")이 맞고 컴포넌트 JSDoc이 틀렸어요. 나중에 컴포넌트를 손볼 때 같이 고치면 좋겠어요.
onBack: () => {}·onClose: () => {}를 args에 직접 넣으면 argTypes에 적은 action이 덮여서 Actions 패널에 로그가 안 찍혀요. 기존 Modal 스토리도 같은 방식이라 이번에 지적하지는 않지만, 스토리 전체에서 storybook/test의 fn()으로 바꾸는 걸 검토해 볼 만해요.

로컬에서 Storybook 빌드나 Chromatic은 돌리지 않았고, diff와 컴포넌트 코드만 읽고 리뷰했어요.

diboreview-e2e-bot

켜진 규칙 위반이 없어요.

지적 0개 · 버린 지적 0개 · 중복 제외 0개 · 비용 $0.0196

reviewer-harry · 2026-10-29T10:34:30Z

+      >
+        <div style={{ padding: '8px 0 40px' }}>
+          <h4 style={{ margin: '0 0 12px' }}>시트 콘텐츠</h4>
+          <p style={{ margin: 0, color: '#787878' }}>


#787878은 colors.gray[700]과 같은 값이에요. 스토리라도 Toast.stories.tsx처럼 @/styles/theme/colors 토큰을 쓰는 편이 좋아요. 토큰 값이 바뀌면 카탈로그도 같이 따라가니까요.

Suggested change

<p style={{ margin: 0, color: '#787878' }}>

<p style={{ margin: 0, color: colors.gray[700] }}>

(상단에 import { colors } from '@/styles/theme/colors'; 추가가 필요해요.)

반영했어요. colors.gray[700]으로 바꿨어요(006c962).

reviewer-harry · 2026-10-29T10:34:32Z

+    isOpen: false,
+    onClose: () => {},
+    children: null,
+    sheetBackground: '#f5f5f5',


여기도 #f5f5f5는 colors.gray[100]이에요. 위와 같이 토큰으로 맞춰 주세요.

Suggested change

sheetBackground: '#f5f5f5',

sheetBackground: colors.gray[100],

반영했어요. colors.gray[100]으로 바꿨어요(006c962).

github-actions · 2026-10-29T10:34:44Z

✅ UI 변경사항 없음

구분	링크
📖 Storybook	https://67904e61c16daa99a63b44a7-ynpvmcckhz.chromatic.com/

전체 202개 스토리 · 70개 컴포넌트

seongwon030 self-assigned this Oct 29, 2026

github-actions Bot added the 💻 FE Frontend label Oct 29, 2026

diboreview-e2e-bot Bot reviewed Oct 29, 2026

View reviewed changes

reviewer-harry Bot reviewed Oct 29, 2026

View reviewed changes

vercel Bot deployed to Preview October 29, 2026 10:35

View deployment

fix: ResponsiveSheet 스토리의 하드코딩 색을 gray 토큰으로 바꾼다

006c962

vercel Bot deployed to Preview October 29, 2026 10:54

View deployment

seongwon030 merged commit 7516315 into develop-fe Oct 29, 2026
16 checks passed

Navigation Menu

Repository navigation

[feature] 스토리가 없던 공용 컴포넌트 3개에 스토리를 추가한다 - #2269

[feature] 스토리가 없던 공용 컴포넌트 3개에 스토리를 추가한다#2269
seongwon030 merged 2 commits into
develop-fefrom
feature/#2264-common-component-stories-MOA-1233

seongwon030 commented Oct 29, 2026

Uh oh!

vercel Bot commented Oct 29, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Oct 29, 2026 •

edited

Loading

Review limit reached

Uh oh!

reviewer-harry Bot commented Oct 29, 2026 •

edited

Loading

Uh oh!

diboreview-e2e-bot Bot left a comment

Uh oh!

reviewer-harry Bot Oct 29, 2026

Uh oh!

seongwon030 Oct 29, 2026

Uh oh!

reviewer-harry Bot Oct 29, 2026

Uh oh!

seongwon030 Oct 29, 2026

Uh oh!

github-actions Bot commented Oct 29, 2026 •

edited

Loading

Uh oh!

Uh oh!

This branch was successfully deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

	<p style={{ margin: 0, color: '#787878' }}>
	<p style={{ margin: 0, color: colors.gray[700] }}>

	sheetBackground: '#f5f5f5',
	sheetBackground: colors.gray[100],

Conversation

seongwon030 commented Oct 29, 2026

문제

해결

검증

영향 범위

한계와 대안(선택)

Uh oh!

vercel Bot commented Oct 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot commented Oct 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review limit reached

Uh oh!

reviewer-harry Bot commented Oct 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

harry 리뷰 총평

Uh oh!

diboreview-e2e-bot Bot left a comment

Choose a reason for hiding this comment

Uh oh!

reviewer-harry Bot Oct 29, 2026

Choose a reason for hiding this comment

Uh oh!

seongwon030 Oct 29, 2026

Choose a reason for hiding this comment

Uh oh!

reviewer-harry Bot Oct 29, 2026

Choose a reason for hiding this comment

Uh oh!

seongwon030 Oct 29, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Oct 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ UI 변경사항 없음

Uh oh!

Uh oh!

This branch was successfully deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

vercel Bot commented Oct 29, 2026 •

edited

Loading

coderabbitai Bot commented Oct 29, 2026 •

edited

Loading

reviewer-harry Bot commented Oct 29, 2026 •

edited

Loading

github-actions Bot commented Oct 29, 2026 •

edited

Loading