[feature] 메인화면 컴포넌트 스토리북 추가 by seongwon030 · Pull Request #1128 · Moadong/moadong

seongwon030 · 2026-01-31T08:26:45Z

#️⃣연관된 이슈

ex) #1126

📝작업 내용

chromatic 배포주소

MainPage 하위 컴포넌트들의 Storybook 스토리를 추가하고, 공통 테마/스타일 적용을 보완했습니다.

변경 사항

MainPage 컴포넌트 스토리 파일 추가 (SearchBox, Banner, ClubCard, ClubLogo, Popup, CategoryButtonList,
StatusRadioButton)
각 스토리에 Docs 설명 및 필요 시 argTypes 보강
Storybook preview에 ThemeProvider/GlobalStyles 적용으로 styled-components 테마 오류 해결
Popup 스토리 렌더링 안정화를 위해 mixpanel 초기화/disable 처리
dotenv-cli 추가 (npm run dotenv chromatic 실행을 위해)

테스트

Storybook 실행 및 스토리 렌더 확인

중점적으로 리뷰받고 싶은 부분(선택)

리뷰어가 특별히 봐주었으면 하는 부분이 있다면 작성해주세요

ex) 메서드 XXX의 이름을 더 잘 짓고 싶은데 혹시 좋은 명칭이 있을까요?

논의하고 싶은 부분(선택)

논의하고 싶은 부분이 있다면 작성해주세요.

🫡 참고사항

Summary by CodeRabbit

릴리스 노트

Chores
- Storybook 프리뷰에 분석 초기화 및 글로벌 테마/스타일 적용 추가
- 여러 UI 컴포넌트(배너, 카테고리 버튼 목록, 클럽 카드, 클럽 로고, 팝업, 검색 상자, 상태 라디오 등)의 Storybook 스토리 및 문서 구성 추가
- 개발/런타임 도구(dotenv-cli) 설정 추가

_{✏️ Tip: You can customize this high-level summary in your review settings.}

- ThemeProvider와 GlobalStyles로 styled-components 의존 컴포넌트 오류 해결 - 스토리북에서 공통 스타일을 동일하게 적용

- 모바일 조건과 AB 테스트 스토리지 값 세팅으로 팝업 노출 보장 - Docs 설명 추가

vercel · 2026-01-31T08:26:49Z

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

Project	Deployment	Actions	Updated (UTC)
moadong	Ready	Preview, Comment	Jan 31, 2026 9:30am

coderabbitai · 2026-01-31T08:27:11Z

Warning

`.coderabbit.yaml` has a parsing error

The CodeRabbit configuration file in this repository has a parsing error and default settings were used instead. Please fix the error(s) in the configuration file. You can initialize chat with CodeRabbit to get help with the configuration file.

💥 Parsing errors (1)

Validation error: Invalid regex pattern for base branch. Received: "**" at "reviews.auto_review.base_branches[0]"

⚙️ Configuration instructions

Please see the configuration documentation for more information.
You can also validate your configuration using the online YAML validator.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Walkthrough

Storybook 전역 설정에 Mixpanel 초기화와 ThemeProvider 래퍼를 추가하고, MainPage 하위 컴포넌트들(Banner, CategoryButtonList, ClubCard, ClubLogo, Popup, SearchBox, StatusRadioButton)에 대한 Storybook 스토리 파일들을 추가했습니다.

Changes

Cohort / File(s)	Summary
Storybook 설정 `frontend/.storybook/preview.tsx`	Mixpanel 초기화(try-catch 보호) 및 mixpanel.disable 호출 추가, ThemeProvider와 GlobalStyles로 Story를 감싸 전역 테마/스타일 적용, 기존 modal-root 생성 로직 유지
MainPage 컴포넌트 스토리 `frontend/src/pages/MainPage/components/Banner/Banner.stories.tsx`, `frontend/src/pages/MainPage/components/CategoryButtonList/CategoryButtonList.stories.tsx`, `frontend/src/pages/MainPage/components/ClubCard/ClubCard.stories.tsx`, `frontend/src/pages/MainPage/components/ClubLogo/ClubLogo.stories.tsx`, `frontend/src/pages/MainPage/components/Popup/Popup.stories.tsx`, `frontend/src/pages/MainPage/components/SearchBox/SearchBox.stories.tsx`, `frontend/src/pages/MainPage/components/StatusRadioButton/StatusRadioButton.stories.tsx`	각 컴포넌트용 Storybook 메타·데코레이터·예제 스토리 추가(라우터 데코레이터, 뷰포트 시뮬레이션, 스토어 리셋 등 포함)
패키지 변경 `frontend/package.json`	`dotenv-cli`를 `dependencies` 및 `devDependencies`에 추가

Sequence Diagram(s)

sequenceDiagram
    participant Storybook as Storybook Preview
    participant Mixpanel as Mixpanel SDK
    participant Theme as ThemeProvider
    participant DOM as Browser DOM

    Storybook->>DOM: preview decorator 실행
    Note over Storybook, Mixpanel: useEffect 트리거
    Storybook->>Mixpanel: mixpanel.init(...) (try)
    Mixpanel-->>Storybook: init 성공/예외
    Storybook->>Theme: ThemeProvider 래퍼로 Story 렌더링
    Storybook->>DOM: modal-root 존재 확인/생성
    Theme->>DOM: 전역 스타일 주입 (GlobalStyles)
    Storybook->>DOM: Story 컴포넌트 렌더

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related issues

[feature] MOA-589 메인페이지 컴포넌트 스토리북 파일 추가 #1126: MainPage 컴포넌트용 Storybook 파일 추가 작업과 일치하여 이 PR에서 추가된 다수의 .stories.tsx 파일이 해당 이슈 목표를 충족합니다.

Possibly related PRs

[feature] 공통 컴포넌트 스토리 파일을 제작한다 #889: Storybook 전역 설정(.storybook/preview) 및 스토리 파일 변경과 겹치는 수정이 있어 연관됩니다.
[release] v1.1.10 #1006: Mixpanel 초기화 관련 코드 변경이 겹치므로 preview의 mixpanel 초기화 로직과 상호작용할 가능성이 큽니다.
[feature] 메인화면에 앱 출시 팝업을 추가한다 #1010: Popup 컴포넌트 구현 및 추적 이벤트 변경과 Popup.stories.tsx가 관련되어 있습니다.

Suggested labels

✨ Feature

Suggested reviewers

lepitaaar
oesnuj
suhyun113

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Out of Scope Changes check	⚠️ Warning	dotenv-cli 의존성 추가는 Storybook 스토리 추가 목표와 직접적인 관련이 없어 범위를 벗어난 변경으로 보입니다.	dotenv-cli 추가의 필요성을 명확히 하거나 별도 PR으로 분리하십시오. 현재 스토리 파일들과의 연관성이 불명확합니다.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Linked Issues check	✅ Passed	PR은 메인페이지 컴포넌트들의 Storybook 파일 추가라는 MOA-589의 목표를 충족합니다. 7개 컴포넌트 스토리 추가 및 preview.tsx 업데이트가 포함되어 있습니다.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Title check	✅ Passed	PR 제목이 변경 사항의 핵심을 명확하게 요약하고 있으며, 메인화면 컴포넌트 스토리북 추가라는 주요 변경 사항을 직관적으로 전달합니다.

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

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch feature/#1126-main-page-storybook-MOA-589

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 and usage tips.}

suhyun113

수고하셨으여~

suhyun113 · 2026-02-03T08:22:18Z

frontend/src/pages/MainPage/components/Banner/Banner.stories.tsx

+const setViewportWidth = (width: number) => {
+  window.innerWidth = width;
+  window.dispatchEvent(new Event('resize'));
+};


함수 만들어서 데스크탑과 모바일 환경 각각 스토리로 분리해주셔서 확인하기 편하네요!

frontend/src/pages/MainPage/components/ClubLogo/ClubLogo.stories.tsx

seongwon030 added 8 commits January 31, 2026 17:21

fix: preview에 테마/전역 스타일 적용

49b0f46

- ThemeProvider와 GlobalStyles로 styled-components 의존 컴포넌트 오류 해결 - 스토리북에서 공통 스타일을 동일하게 적용

feat: 모집상태 버튼 스토리북 추가

b3b8134

feat: 검색창 스토리북 추가

99627a8

feat: 메인 팝업 스토리 추가

2d93cec

- 모바일 조건과 AB 테스트 스토리지 값 세팅으로 팝업 노출 보장 - Docs 설명 추가

feat: 카테고리버튼 스토리 추가

70dd24d

feat: 클럽로고 스토리 추가

76c98be

feat: 클럽카드 스토리 추가

494b551

feat: 배너 스토리 추가

8285cc9

seongwon030 self-assigned this Jan 31, 2026

seongwon030 added 🎨 Design 마크업 & 스타일링 💻 FE Frontend labels Jan 31, 2026

seongwon030 requested review from lepitaaar, oesnuj and suhyun113 January 31, 2026 08:27

chore: dotenv-cli 추가

58f0add

vercel bot deployed to Preview January 31, 2026 09:30 View deployment

seongwon030 changed the title ~~[Feature] 메인화면 컴포넌트 스토리북 추가~~ [feature] 메인화면 컴포넌트 스토리북 추가 Feb 3, 2026

suhyun113 approved these changes Feb 3, 2026

View reviewed changes

seongwon030 merged commit 5fc78e5 into develop-fe Feb 3, 2026
3 checks passed

seongwon030 deleted the feature/#1126-main-page-storybook-MOA-589 branch February 3, 2026 15:03

seongwon030 linked an issue Feb 4, 2026 that may be closed by this pull request

[feature] MOA-589 메인페이지 컴포넌트 스토리북 파일 추가 #1126

Closed

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[feature] 메인화면 컴포넌트 스토리북 추가#1128

[feature] 메인화면 컴포넌트 스토리북 추가#1128
seongwon030 merged 9 commits intodevelop-fefrom
feature/#1126-main-page-storybook-MOA-589

seongwon030 commented Jan 31, 2026 •

edited by coderabbitai bot

Loading

Uh oh!

vercel bot commented Jan 31, 2026 •

edited

Loading

Uh oh!

coderabbitai bot commented Jan 31, 2026 •

edited

Loading

`.coderabbit.yaml` has a parsing error

Uh oh!

suhyun113 left a comment

Uh oh!

suhyun113 Feb 3, 2026

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Comments

Conversation

seongwon030 commented Jan 31, 2026 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

#️⃣연관된 이슈

📝작업 내용

변경 사항

테스트

관련 파일

중점적으로 리뷰받고 싶은 부분(선택)

논의하고 싶은 부분(선택)

🫡 참고사항

Summary by CodeRabbit

릴리스 노트

Uh oh!

vercel bot commented Jan 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai bot commented Jan 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

.coderabbit.yaml has a parsing error

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Possibly related issues

Possibly related PRs

Suggested labels

Suggested reviewers

Uh oh!

suhyun113 left a comment

Choose a reason for hiding this comment

Uh oh!

suhyun113 Feb 3, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Comments

seongwon030 commented Jan 31, 2026 •

edited by coderabbitai bot

Loading

vercel bot commented Jan 31, 2026 •

edited

Loading

coderabbitai bot commented Jan 31, 2026 •

edited

Loading

`.coderabbit.yaml` has a parsing error