Skip to content

[Feature/#176] 임시 안내 화면 및 알림 구현 - #177

Merged
Seojegyeong merged 2 commits into
developfrom
feature/#176
May 5, 2026
Merged

[Feature/#176] 임시 안내 화면 및 알림 구현#177
Seojegyeong merged 2 commits into
developfrom
feature/#176

Conversation

@Seojegyeong

@Seojegyeong Seojegyeong commented May 5, 2026

Copy link
Copy Markdown
Collaborator

🚨 관련 이슈

#176

✨ 변경사항

  • 🐞 BugFix Something isn't working
  • 💻 CrossBrowsing Browser compatibility
  • 🌏 Deploy Deploy
  • 🎨 Design Markup & styling
  • 📃 Docs Documentation writing and editing (README.md, etc.)
  • ✨ Feature Feature
  • 🔨 Refactor Code refactoring
  • ⚙️ Setting Development environment setup
  • ✅ Test Test related (storybook, jest, etc.)

✏️ 작업 내용

  • 임시 안내 화면 구현(타임라인, 플랜·결제)
  • ComingSoonPlaceholder: 타임라인·플랜/결제 등 공통 UI
  • 사이드 알림은 sonner toast 알림 적용(useComingSoon)
스크린샷 2026-05-05 오후 12 51 09 스크린샷 2026-05-05 오후 12 50 34

😅 미완성 작업

N/A

📢 논의 사항 및 참고 사항

N/A

💬 리뷰어 가이드 (P-Rules)
P1: 필수 반영 (Critical) - 버그 가능성, 컨벤션 위반. 해결 전 머지 불가.
P2: 적극 권장 (Recommended) - 더 나은 대안 제시. 가급적 반영 권장.
P3: 제안 (Suggestion) - 아이디어 공유. 반영 여부는 드라이버 자율.
P4: 단순 확인/칭찬 (Nit) - 사소한 오타, 칭찬 등 피드백.

Summary by CodeRabbit

새 기능

  • Timeline 및 Billing 페이지에 "준비 중" 안내 화면 추가
  • 준비 중인 기능에 접근할 때 토스트 알림으로 사용자에게 상태 안내
  • 플레이스홀더에 부드러운 애니메이션 효과 적용
  • 사이드바에서 준비 중인 기능 접근 시 알림 표시

@Seojegyeong
Seojegyeong requested review from YermIm and jjjsun May 5, 2026 03:52
@Seojegyeong Seojegyeong self-assigned this May 5, 2026
@Seojegyeong Seojegyeong linked an issue May 5, 2026 that may be closed by this pull request
4 tasks
@vercel

vercel Bot commented May 5, 2026

Copy link
Copy Markdown

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

Project Deployment Actions Updated (UTC)
where-you-ad Ready Ready Preview, Comment May 5, 2026 3:54am

@coderabbitai

coderabbitai Bot commented May 5, 2026

Copy link
Copy Markdown

Important

Review skipped

Review was skipped due to path filters

⛔ Files ignored due to path filters (1)
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml, !pnpm-lock.yaml and included by none

CodeRabbit blocks several paths by default. You can override this behavior by explicitly including those paths in the path filters. For example, including **/dist/** will override the default block on the dist directory, by removing the pattern from both the lists.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 320e20f4-3a56-4e1e-a2d4-61a75c715ab3

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review
📝 Walkthrough

Walkthrough

"Coming Soon" 기능을 추가합니다. 새로운 ComingSoonPlaceholder 컴포넌트와 useComingSoon 훅을 작성하고, Timeline 및 Billing 페이지와 Sidebar의 알림 항목에서 이를 활용하여 준비 중인 기능을 사용자에게 안내합니다.

Changes

Coming Soon 기능 구현

Layer / File(s) Summary
컴포넌트 및 훅 기초
src/components/common/ComingSoonPlaceholder.tsx, src/hooks/common/useComingSoon.ts
IComingSoonPlaceholderProps 인터페이스와 memoized ComingSoonPlaceholder 컴포넌트를 정의. useComingSoon 훅은 기본 한국어 메시지와 함께 toast.info를 호출하는 showComingSoon 콜백을 반환합니다.
스타일링 및 애니메이션
src/index.css
coming-soon-stagger 유틸리티를 추가. 자식 요소들에 slide-fade-up 애니메이션을 적용하고, 첫 4개 자식에 순차적 지연(0/50/100/150ms)을 설정. 감소된 모션 모드에서는 애니메이션을 비활성화합니다.
페이지 통합
src/pages/dashboard/timeline/Timeline.tsx, src/pages/workspace/Billing.tsx
기존 정적 플레이스홀더를 ComingSoonPlaceholder로 교체. 로컬라이즈된 제목, 설명, 푸터 콘텐츠를 JSX로 작성합니다.
상호작용 로직
src/components/sidebar/Sidebar.tsx
useComingSoon 훅을 추가하고 handleFooterItemClick 콜백을 구현. "notifications" 푸터 항목 클릭 시 showComingSoon을 트리거하고, 다른 항목은 기존 handleItemClick로 위임합니다.

Sequence Diagram

sequenceDiagram
    participant User
    participant Sidebar
    participant useComingSoon as useComingSoon<br/>(Hook)
    participant Toast
    
    User->>Sidebar: 푸터 알림 항목 클릭
    Sidebar->>Sidebar: handleFooterItemClick 실행
    alt id === "notifications"
        Sidebar->>useComingSoon: showComingSoon() 호출
        useComingSoon->>Toast: toast.info(DEFAULT_MESSAGE,<br/>{ id: "coming-soon", duration: 4000 })
        Toast->>User: "Coming Soon" 메시지 표시 (4초)
    else 다른 항목
        Sidebar->>Sidebar: handleItemClick(id, hasChildren) 위임
    end
Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

Suggested labels

✨ Feature, 🎨 Html&css

Suggested reviewers

  • jjjsun
  • YermIm

검토 의견

이 PR은 구조와 접근성 측면에서 잘 작성된 기능 추가입니다. 몇 가지 확인할 점들을 제시합니다:

✅ 잘된 점

  1. 컴포넌트 재사용성: ComingSoonPlaceholder를 충분히 제너릭하게 설계하여 여러 페이지에서 재활용 가능합니다.
  2. 접근성 고려: role="status", aria-live="polite", aria-hidden 속성으로 스크린 리더를 지원합니다.
  3. 모션 감소 지원: prefers-reduced-motion: reduce 쿼리에서 애니메이션을 적절히 비활성화합니다.
  4. 일관된 스타일링: twMerge를 활용하여 클래스 충돌을 방지합니다.

⚠️ 검토 사항

  1. 토스트 알림 ID 고정값: useComingSoon에서 id: "coming-soon"으로 고정되어 있습니다. 향후 여러 Coming Soon 알림이 동시에 표시되어야 하면, 더 구체적인 ID 전략을 고려하세요.

  2. 메시지 커스터마이징: Sidebar의 "notifications" 항목에서만 한국어 메시지를 전달하고 있는데, 다른 Coming Soon 항목들도 일관된 메시지 관리 체계가 있으면 좋습니다.

  3. 스타일링 확장성: Timeline과 Billing 페이지에서 ComingSoonPlaceholder를 사용할 때 추가 커스터마이징이 필요하면, props 확장을 미리 고려해두세요.

  4. 애니메이션 성능: coming-soon-stagger의 순차 지연(0/50/100/150ms)이 의도된 디자인인지, 실제 사용자 체감 성능을 테스트해 보세요.

전반적으로 기능 완성도와 코드 품질이 우수합니다. 위의 확인 사항들이 현재 요구사항 범위 내에서 필요하다면 반영하고, 향후 확장을 염두에 두는 것이 좋겠습니다.

🚥 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
Title check ✅ Passed PR 제목이 핵심 변경사항인 임시 안내 화면(ComingSoonPlaceholder) 구현과 알림 기능(useComingSoon)을 명확하게 반영하고 있으며, 이슈 번호 #176도 포함되어 있습니다.
Description check ✅ Passed PR 설명이 필수 섹션들(관련 이슈, 변경사항 체크, 작업 내용, 미완성 작업, 논의 사항)을 모두 작성했으며, 구체적인 구현 내용과 스크린샷으로 변경사항을 명확하게 전달하고 있습니다.
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 feature/#176

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.

Actionable comments posted: 1

🤖 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.

Inline comments:
In `@src/components/common/ComingSoonPlaceholder.tsx`:
- Around line 27-31: The container div in ComingSoonPlaceholder has
role="status" and aria-live which cause unnecessary live-region announcements
for static content; remove role="status" and any aria-live attributes from the
div (the element with className "coming-soon-stagger") and instead connect the
container to its heading using aria-labelledby (add an id to the existing
heading element and set aria-labelledby on the container to that id) so
assistive tech can reference the title semantically without live announcements;
ensure the heading element (inside ComingSoonPlaceholder) has a stable id and
update tests/usage accordingly.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 474a8b83-489e-47dd-963f-258e4463c868

📥 Commits

Reviewing files that changed from the base of the PR and between 5072cc2 and e2fb548.

⛔ Files ignored due to path filters (1)
  • src/assets/icon/ai/warning.svg is excluded by !**/*.svg and included by src/**
📒 Files selected for processing (6)
  • src/components/common/ComingSoonPlaceholder.tsx
  • src/components/sidebar/Sidebar.tsx
  • src/hooks/common/useComingSoon.ts
  • src/index.css
  • src/pages/dashboard/timeline/Timeline.tsx
  • src/pages/workspace/Billing.tsx

Comment thread src/components/common/ComingSoonPlaceholder.tsx
@github-actions

github-actions Bot commented May 5, 2026

Copy link
Copy Markdown

📚 Storybook 배포 완료

항목 링크
📖 Storybook https://69a147b60a56365d9e2185ef-abeanwilzt.chromatic.com/
🔍 Chromatic https://www.chromatic.com/build?appId=69a147b60a56365d9e2185ef&number=234

@YermIm YermIm left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

P4: 확인했습니다!

@Seojegyeong
Seojegyeong merged commit fdec228 into develop May 5, 2026
4 checks passed
@Seojegyeong
Seojegyeong deleted the feature/#176 branch May 5, 2026 04:16
@Seojegyeong Seojegyeong added the ✨ Feature 기능 개발 label May 5, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

✨ Feature 기능 개발

Projects

None yet

Development

Successfully merging this pull request may close these issues.

✨ [Feature] 준비 중 Toast 알림 추가

2 participants