Skip to content

docs: add MVP demo frames#13

Merged
rhseung merged 28 commits into
mainfrom
rhseung/ids-14
Jun 8, 2026
Merged

docs: add MVP demo frames#13
rhseung merged 28 commits into
mainfrom
rhseung/ids-14

Conversation

@rhseung

@rhseung rhseung commented Jun 6, 2026

Copy link
Copy Markdown
Member

Summary

  • Add React Storybook MVP frames for Ziggle notice detail, profile, Potg main list, and Potg create time
  • Add Flutter Widgetbook MVP Frames section with matching Ziggle/Potg frame examples
  • Keep examples focused on IDS component composition rather than pixel-copying app mocks

Test Plan

  • pnpm typecheck
  • pnpm lint
  • pnpm build
  • mise exec -- flutter test (packages/flutter)
  • mise exec -- flutter test (packages/flutter/example)
  • Storybook iframe smoke check for Ziggle notice detail and Potg main list

Summary by CodeRabbit

릴리스 노트

  • New Features

    • 새로운 UI 예시 및 화면 프레임 추가 (공지사항 상세, 프로필, 택시팟 메인 리스트 등)
  • Style

    • 카드 모서리 반경 조정 (더 둥근 모양)
    • 다이얼로그, 카드, 플로팅 버튼의 그림자 스타일 개선
    • 버튼 아이콘 크기 및 색상 렌더링 최적화
    • 빈 상태 화면의 텍스트 스타일 및 간격 조정

@coderabbitai

coderabbitai Bot commented Jun 6, 2026

Copy link
Copy Markdown

Review Change Stack

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

  • ▶️ Resume reviews
  • 🔍 Trigger review
📝 Walkthrough

Walkthrough

Flutter Widgetbook와 React Storybook에 7개의 MVP 화면 프레임(Ziggle 그룹/공지 상세/프로필, Potg 메인 리스트/검색 빈 상태/필터 다이얼로그/시간 선택)을 추가하고, 카드·버튼·다이얼로그·플로팅 버튼의 그림자 제거 및 반지름 확대, 버튼 아이콘 색상·크기 전달 메커니즘을 조정한다.

Changes

MVP 프레임과 공통 시각 스타일 정렬

Layer / File(s) Summary
공통 컴포넌트 시각 스타일 조정
packages/flutter/lib/src/components/card/ids_card.dart, packages/flutter/lib/src/components/button/ids_button.dart, packages/flutter/lib/src/components/dialog/ids_dialog.dart, packages/flutter/lib/src/components/floating_button/ids_floating_button.dart, packages/flutter/lib/src/components/empty/ids_empty.dart, packages/react/src/components/card/index.tsx, packages/react/src/components/dialog/index.tsx
카드 borderRadius를 6/8/12에서 10/16/24로 확대하고, 카드·다이얼로그·플로팅 버튼의 그림자를 제거한다. 버튼에 아이콘 크기(iconSize)를 계산하는 스위치를 추가하고 IconTheme으로 감싸 색상과 크기를 전달한다. 빈 상태 컴포넌트는 선행 위젯 타입에 따라 간격을 가변하고 설명 텍스트의 타이포그래피를 label에서 body로 변경한다.
Flutter MVP 등록 및 기본 프레임 구조
packages/flutter/example/lib/components/mvp_frames_usecase.dart, packages/flutter/example/lib/main.dart
Widgetbook use case 목록(mvpFrameUseCases)을 정의하고 knob 기반 테마 래퍼(_withTheme)와 390x760 폰 프레임(_Phone)을 제공하며, 헤더(_PhoneHeader)를 추가한다. main.dart에 MVP Frames 디렉터리를 등록한다.
Flutter Ziggle 화면 프레임
packages/flutter/example/lib/components/mvp_frames_usecase.dart
그룹 탭 화면(_ZiggleGroupsFrame)은 소개·공지·멤버 탭을 구성하고, 공지 상세(_ZiggleNoticeDetailFrame)는 헤더·포스터·본문·리액션 바를 배치한다. 프로필(_ZiggleProfileFrame)은 스크롤 카드와 섹션 리스트를 제공한다.
Flutter Potg 화면 및 네비게이션
packages/flutter/example/lib/components/mvp_frames_usecase.dart
팟 메인 리스트(_PotgMainListFrame)는 요일 상태 카드와 택시 팟 카드 리스트를 배치하고, 검색 빈 상태(_PotgSearchEmptyFrame)는 IdsEmpty 기반 화면을 제공한다. 필터 다이얼로그(_PotgFilterDialogFrame)는 상태 관리와 노선·날짜 필터를 포함하고, 시간 선택(_PotgCreateTimeFrame)은 단계 UI와 요약을 제공한다. 하단 네비게이션과 플로팅 버튼 헬퍼를 추가한다.
React 모바일 프레임 스토리 및 공통 유틸
packages/react/src/components/examples.stories.tsx
PhoneHeader, PotgNavigation, TaxiPotCard 등 재사용 헬퍼 컴포넌트를 추가하고, 신규 Storybook 스토리(ZiggleNoticeDetailWithImage, ZiggleNoticeDetailTextOnly, ZiggleProfile, PotgMainList, PotgCreateTime)를 구성한다. 기존 스토리의 하단 내비게이션을 공통 PotgNavigation 컴포넌트로 통합한다.

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

  • gsainfoteam/ids#2: Widgetbook use case 등록 흐름이 유사하여 같은 코드 경로 변경이다.
  • gsainfoteam/ids#8: 이 PR의 카드 컴포넌트 스타일 조정(borderRadius, 그림자 제거)이 #8에서 도입된 IdsCard를 직접 수정한다.
  • gsainfoteam/ids#12: 이 PR이 #12에서 도입된 네비게이션·오버레이 컴포넌트를 MVP 프레임에서 조합하고, IdsCard/IdsDialog 등 공유 컴포넌트 스타일을 수정한다.

Suggested reviewers

  • tkjftkjf
  • sleeep23

🐰 일곱 개의 화면이 프레임 안에 담기고,
그림자는 살짝 옅어지고 모서리는 반올림,
네비게이션이 공통의 옷을 입으니,
Flutter와 React이 손을 맞잡았네!
✨📱 — 코드래빗이

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed 제목이 주요 변경 사항을 명확하게 요약합니다. PR은 MVP 데모 프레임을 추가하며, 제목이 이를 정확히 반영합니다.
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 rhseung/ids-14

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.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (1)
packages/flutter/example/lib/components/mvp_frames_usecase.dart (1)

134-134: 💤 Low value

탭 바 높이를 하드코딩하지 않는 것이 좋습니다.

49IdsTabs의 탭 바 높이를 가정한 매직 넘버입니다. 탭 바 높이가 변경되면 레이아웃이 깨질 수 있습니다. 데모 코드이므로 현재 상태로도 동작하지만, 더 견고한 구현을 원한다면 LayoutBuilder 내부에서 탭 바의 실제 높이를 측정하거나 상수로 추출하는 것을 고려하세요.

🤖 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 `@packages/flutter/example/lib/components/mvp_frames_usecase.dart` at line 134,
Replace the hardcoded "49" used to compute panelHeight with a real tab-bar
height value: either extract a named constant from the IdsTabs widget (e.g.,
IdsTabs.tabBarHeight) or measure the IdsTabs actual height inside the
LayoutBuilder (assign a GlobalKey to the IdsTabs, read
key.currentContext.size.height or RenderBox.size.height) and use that measured
value in the panelHeight calculation instead of the magic number; update the
code that computes panelHeight (where constraints.maxHeight - 49 is used) to
reference the constant or measured variable.
🤖 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 `@packages/flutter/example/lib/components/mvp_frames_usecase.dart`:
- Line 134: Replace the hardcoded "49" used to compute panelHeight with a real
tab-bar height value: either extract a named constant from the IdsTabs widget
(e.g., IdsTabs.tabBarHeight) or measure the IdsTabs actual height inside the
LayoutBuilder (assign a GlobalKey to the IdsTabs, read
key.currentContext.size.height or RenderBox.size.height) and use that measured
value in the panelHeight calculation instead of the magic number; update the
code that computes panelHeight (where constraints.maxHeight - 49 is used) to
reference the constant or measured variable.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 97b99357-ec56-40c7-a5bc-ba58f3c183ac

📥 Commits

Reviewing files that changed from the base of the PR and between 7bf992c and d904bde.

📒 Files selected for processing (3)
  • packages/flutter/example/lib/components/mvp_frames_usecase.dart
  • packages/flutter/example/lib/main.dart
  • packages/flutter/lib/src/components/card/ids_card.dart
🚧 Files skipped from review as they are similar to previous changes (1)
  • packages/flutter/example/lib/main.dart

coderabbitai[bot]
coderabbitai Bot previously approved these changes Jun 6, 2026
coderabbitai[bot]
coderabbitai Bot previously approved these changes Jun 6, 2026

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (2)
packages/flutter/example/lib/components/mvp_frames_usecase.dart (2)

1311-1325: ⚡ Quick win

다크 모드를 고려한 폴백 색상 개선이 필요합니다.

IconTheme이 제공되지 않을 때 하드코딩된 검정색(Color(0xFF000000))을 폴백으로 사용하고 있습니다. 다크 모드 환경에서는 검정색 배경에 검정색 아이콘이 렌더링되어 보이지 않을 수 있습니다.

ThemeProvider.of(context)를 통해 테마 색상(예: theme.onSurface)을 폴백으로 사용하는 것이 더 안전합니다.

♻️ 테마 기반 폴백 색상 적용 제안
 class _HugeIcon extends StatelessWidget {
   const _HugeIcon(this.icon);
 
   final List<List<dynamic>> icon;
 
   `@override`
   Widget build(BuildContext context) {
     final iconTheme = IconTheme.of(context);
+    final theme = ThemeProvider.of(context);
     return HugeIcon(
       icon: icon,
-      color: iconTheme.color ?? const Color(0xFF000000),
+      color: iconTheme.color ?? theme.onSurface,
       size: iconTheme.size ?? 24,
     );
   }
 }
🤖 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 `@packages/flutter/example/lib/components/mvp_frames_usecase.dart` around lines
1311 - 1325, The current _HugeIcon.build uses IconTheme.of(context) and falls
back to a hardcoded Color(0xFF000000); change the fallback to use the app
theme's onSurface color via ThemeProvider.of(context) so icons remain visible in
dark mode: get theme = ThemeProvider.of(context) (or null-safe chain), then pass
color: iconTheme.color ?? theme?.theme?.onSurface ?? const Color(0xFF000000)
into the HugeIcon constructor (keep size fallback as-is) so IconTheme,
ThemeProvider.of(context), theme.onSurface and HugeIcon are the referenced
symbols to update.

838-847: ⚖️ Poor tradeoff

IdsText에 텍스트 오버플로우 지원 추가를 고려해보세요.

경로 레이블에서 텍스트 말줄임 처리가 필요해 Text 위젯을 직접 사용하고 있습니다. 이는 현재 작동하지만, IdsTextmaxLinesoverflow 속성을 지원한다면 컴포넌트 추상화를 일관되게 유지할 수 있습니다.

향후 IdsText에 이러한 속성을 추가하면 코드베이스 전반에서 일관된 텍스트 처리가 가능합니다.

🤖 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 `@packages/flutter/example/lib/components/mvp_frames_usecase.dart` around lines
838 - 847, The Text here is using maxLines and overflow directly; add optional
maxLines (int?) and overflow (TextOverflow?) parameters to the IdsText widget
(in its constructor and class fields), ensure they are forwarded to the internal
Text widget (preserving existing style merging and other props), and then
replace this direct Text usage with IdsText(..., maxLines: 1, overflow:
TextOverflow.ellipsis) so the component abstraction remains consistent (look for
the IdsText class and this path label usage to update).
🤖 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 `@packages/flutter/example/lib/components/mvp_frames_usecase.dart`:
- Around line 1311-1325: The current _HugeIcon.build uses IconTheme.of(context)
and falls back to a hardcoded Color(0xFF000000); change the fallback to use the
app theme's onSurface color via ThemeProvider.of(context) so icons remain
visible in dark mode: get theme = ThemeProvider.of(context) (or null-safe
chain), then pass color: iconTheme.color ?? theme?.theme?.onSurface ?? const
Color(0xFF000000) into the HugeIcon constructor (keep size fallback as-is) so
IconTheme, ThemeProvider.of(context), theme.onSurface and HugeIcon are the
referenced symbols to update.
- Around line 838-847: The Text here is using maxLines and overflow directly;
add optional maxLines (int?) and overflow (TextOverflow?) parameters to the
IdsText widget (in its constructor and class fields), ensure they are forwarded
to the internal Text widget (preserving existing style merging and other props),
and then replace this direct Text usage with IdsText(..., maxLines: 1, overflow:
TextOverflow.ellipsis) so the component abstraction remains consistent (look for
the IdsText class and this path label usage to update).

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: e9df3b3b-ff12-4e30-a999-9f9528f2a1fa

📥 Commits

Reviewing files that changed from the base of the PR and between 2fe0a16 and 12e66f2.

📒 Files selected for processing (4)
  • packages/flutter/example/lib/components/mvp_frames_usecase.dart
  • packages/flutter/example/lib/main.dart
  • packages/flutter/lib/src/components/empty/ids_empty.dart
  • packages/flutter/lib/src/components/floating_button/ids_floating_button.dart
💤 Files with no reviewable changes (1)
  • packages/flutter/example/lib/main.dart
✅ Files skipped from review due to trivial changes (1)
  • packages/flutter/lib/src/components/floating_button/ids_floating_button.dart

@rhseung rhseung merged commit 4f1672f into main Jun 8, 2026
4 checks passed
@rhseung rhseung deleted the rhseung/ids-14 branch June 8, 2026 13:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant