[Feature/#373] 최초 로그인 온보딩 투어 구현 - #378
Conversation
|
Warning Review limit reached
Next review available in: 31 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (3)
📝 WalkthroughWalkthrough로그인 완료 후 Changes온보딩 투어
Estimated code review effort: 3 (Moderate) | ~25 minutes Sequence Diagram(s)sequenceDiagram
participant Login
participant MainLayout
participant OnboardingTour
participant useOnboardingTour
participant OnboardingTooltip
participant localStorage
Login->>MainLayout: 로그인 후 /workspace 또는 안전한 returnUrl 이동
MainLayout->>OnboardingTour: 역할과 autoStart 전달
OnboardingTour->>useOnboardingTour: steps와 handleEvent 연결
useOnboardingTour->>OnboardingTooltip: 현재 단계 데이터 전달
OnboardingTooltip->>useOnboardingTour: 다음, 이전, 완료 또는 건너뛰기 실행
useOnboardingTour->>localStorage: hasSeenOnboarding 저장
Possibly related issues
Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches 💡 1📝 Generate docstrings 💡
🧪 Generate unit tests (beta)
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. Comment |
📚 Storybook 배포 완료
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 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/hooks/common/useOnboardingTour.ts`:
- Line 5: 사용자별 온보딩 완료 상태를 저장하도록 useOnboardingTour.ts의 ONBOARDING_KEY와 관련 조회/저장
로직을 사용자 ID 기반 키로 변경하세요. Login.tsx와 RedirectPage.tsx의 로그인·소셜 인증 응답에 사용자 ID를 포함해
useAuthStore.login이 현재 사용자 ID를 저장하도록 수정하고, PlatformIntegrationsPage.tsx를 포함한 모든
온보딩 키 사용 지점에서 동일한 사용자별 키 생성 기준을 재사용하세요. 대상 파일:
src/hooks/common/useOnboardingTour.ts(5-5), src/pages/auth/Login.tsx(38-41),
src/pages/auth/RedirectPage.tsx(34-37),
src/pages/integration/PlatformIntegrationsPage.tsx(186-186).
- Around line 93-102: Update the isFinished condition in handleEvent to also
treat EVENTS.TARGET_NOT_FOUND as a completed tour event, while preserving the
existing FINISHED and SKIPPED handling so setRun(false) and the onboarding flag
update still execute.
In `@src/styles/utilities.css`:
- Around line 133-137: Replace the hard-coded black shadow colors in
.shadow-tooltip with the existing design-system shadow/color tokens or
established token-based shadow pattern. Also update overlayColor in
OnboardingTour to use the appropriate Joyride-compatible design token, ensuring
both sites remain consistent with dark-mode and branding support.
🪄 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 Plus
Run ID: 6082a90d-8ef0-4113-a1e1-5ad44d961f53
⛔ Files ignored due to path filters (2)
package.jsonis excluded by none and included by nonepnpm-lock.yamlis excluded by!**/pnpm-lock.yaml,!pnpm-lock.yamland included by none
📒 Files selected for processing (8)
src/components/common/OnboardingTooltip.tsxsrc/components/common/OnboardingTour.tsxsrc/components/sidebar/Sidebar.tsxsrc/hooks/common/useOnboardingTour.tssrc/pages/auth/Login.tsxsrc/pages/auth/RedirectPage.tsxsrc/pages/integration/PlatformIntegrationsPage.tsxsrc/styles/utilities.css
|
P2: 워크스페이스를 생성해야 플랫폼 연동이 가능해서, 최초 로그인 시 워크스페이스 화면으로 이동하는 것이 좋을 것 같습니다. |
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/components/common/OnboardingTour.tsx (1)
49-51: 📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win오버레이 색상을 기존 디자인 토큰으로 연결하세요.
Line 50의
rgba(0, 0, 0, 0.5)는 TSX의 임의 색상입니다. 하드코드 색상을 제거하고,src/styles/tokens.css의 기존 오버레이 색상 토큰을 Joyride 설정에 적용하세요.As per coding guidelines, "Use only
@themetokens fromsrc/styles/tokens.cssfor colors" and "Ensure external libraries (charts, etc.) colors align with@themetokens."🤖 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 `@src/components/common/OnboardingTour.tsx` around lines 49 - 51, Update the overlayColor value in the OnboardingTour Joyride options to use the existing overlay color token from tokens.css instead of the hardcoded rgba value. Reuse the established `@theme` token through the project’s supported CSS variable pattern, while leaving the zIndex and other options unchanged.Source: Coding guidelines
🤖 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/layout/main/MainLayout.tsx`:
- Around line 161-165: Update the MainLayout onboarding flow so users without a
workspace receive a dedicated workspace-creation tour even when myRole is null.
Render that tour based on the empty-workspace state independently of the
role-based OnboardingTour, and do not coerce null myRole to ADMIN; preserve
role-specific content only for users with an actual role.
---
Outside diff comments:
In `@src/components/common/OnboardingTour.tsx`:
- Around line 49-51: Update the overlayColor value in the OnboardingTour Joyride
options to use the existing overlay color token from tokens.css instead of the
hardcoded rgba value. Reuse the established `@theme` token through the project’s
supported CSS variable pattern, while leaving the zIndex and other options
unchanged.
🪄 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 Plus
Run ID: 8c67fa0a-97a6-464f-9d04-a79ba86e5835
📒 Files selected for processing (10)
src/components/common/OnboardingTooltip.tsxsrc/components/common/OnboardingTour.tsxsrc/components/sidebar/Sidebar.tsxsrc/hooks/common/useOnboardingTour.tssrc/layout/main/MainLayout.tsxsrc/pages/auth/Login.tsxsrc/pages/auth/RedirectPage.tsxsrc/pages/integration/PlatformIntegrationsPage.tsxsrc/pages/workspace/Workspace.tsxsrc/styles/utilities.css
💤 Files with no reviewable changes (1)
- src/pages/integration/PlatformIntegrationsPage.tsx
🚧 Files skipped from review as they are similar to previous changes (4)
- src/components/sidebar/Sidebar.tsx
- src/components/common/OnboardingTooltip.tsx
- src/styles/utilities.css
- src/pages/auth/RedirectPage.tsx
3 participants
🚨 관련 이슈
#373
✨ 변경사항
✏️ 1차 작업 내용
최초 로그인 사용자에게 주요 기능을 안내하는 온보딩 투어를 구현했습니다.
리다이렉트 로직
최초 로그인(일반/소셜) 시/integrations로 자동 이동재로그인 시 기존대로/dashboard로 이동hasSeenOnboardinglocalStorage 플래그로 최초 여부 판단온보딩 투어 (react-joyride)
10단계 투어: 워크스페이스 switcher → 대시보드 → 캠페인 → 워크스페이스 관리 → 플랫폼 연동 → Meta/Google/Naver 카드 → 완료hasSeenOnboarding저장 → 이후 로그인부터 투어 미노출커스텀 툴팁 디자인
bg-surface-100,rounded-3xl,shadow-tooltip)1 / 10)UX 개선
d 280ms cubic-bezier)opacity 200ms ease-out)data-tour타겟을 버튼 요소로 이동 → 화살표 정렬 정확도 개선✏️ 2차 작업 내용
역할별 온보딩 투어 분기
useOnboardingTour훅에서myRole기반으로ADMIN_STEPS/MEMBER_STEPS반환/workspace진입 후 투어 시작, 마지막 스텝을 워크스페이스 생성 버튼에 포커스/dashboard진입 후 투어 시작, 플랫폼 연동 관련 스텝 제거투어 마운트 위치 변경
PlatformIntegrationsPage(ADMIN만 접근 가능한 페이지)MainLayout(역할 무관 공통 마운트,myRole확정 후 자동 시작)툴팁 UX 개선
whitespace-pre-line적용으로 문구 줄바꿈 제어w-full추가 → 스포트라이트 크기 통일flip비활성화returnUrl 처리
returnUrl처리 구현📋 ADMIN 온보딩 투어 순서 (7 Steps)
tour_admin.mov
📋 MEMBER 온보딩 투어 순서 (6 Steps)
tour_member.mov
😅 미완성 작업
N/A
📢 논의 사항 및 참고 사항
WhereYouAd는 RBAC 기반 서비스로 ADMIN과 MEMBER의 경험이 달라 피드백 기반으로 온보딩 투어에서부터 분리해 구현하였습니다.
ADMIN: 워크스페이스를 직접 생성한 사용자입니다. 최초 로그인 시 아직 워크스페이스가 없는 상태이므로, 워크스페이스 생성이 모든 기능의 선행 조건입니다. 광고 계정 연동도, 멤버 초대도 워크스페이스 없이는 불가능하기 때문에 온보딩을 /workspace에서 시작하고 마지막 스텝에서 워크스페이스 생성 버튼을 직접 안내합니다.
MEMBER: 이미 ADMIN에게 초대받아 워크스페이스에 소속된 사용자입니다. 별도의 설정 없이 바로 서비스를 사용할 수 있는 상태이므로, 온보딩을 /dashboard에서 시작해 통합 대시보드에서 광고 성과를 바로 확인할 수 있도록 안내합니다. 플랫폼 연동 등 ADMIN 전용 기능 스텝은 제거했습니다.
Summary by CodeRabbit
새로운 기능
스타일