Skip to content

feat: 로그인 진입 온보딩 슬라이드 구현 - #406

Merged
iOdiO89 merged 5 commits into
devfrom
feat/393-onboarding-slide
Jul 31, 2026
Merged

feat: 로그인 진입 온보딩 슬라이드 구현#406
iOdiO89 merged 5 commits into
devfrom
feat/393-onboarding-slide

Conversation

@iOdiO89

@iOdiO89 iOdiO89 commented Jul 31, 2026

Copy link
Copy Markdown
Contributor

작업 요약

  • 스플래시 이후 최초 진입 유저에게 온보딩 슬라이드 2장을 노출합니다. 이미 본 유저는 기존대로 로그인 화면으로 바로 진입합니다.

작업 내용

  • /onboarding 라우트 추가 — 슬라이드 2장 캐러셀(좌우 스와이프 + 다음 버튼), 인디케이터와 다음 버튼은 공통 BottomCta 로 감쌌습니다.
  • 스플래시 분기 — 기기 단위 localStorage 플래그로 미열람이면 온보딩, 열람했으면 로그인으로 보냅니다. 온보딩으로 갈 때는 로그인 로고 자리로 착지하는 축소 연출이 의미가 없어 생략합니다.
  • 온보딩 플래그를 consts/onboarding.ts(키) + utils/onboarding.ts(read/mark)로 분리했습니다. 홈 온보딩 등은 키만 추가해 재사용할 수 있습니다.
  • SVGO 가 SVG id 를 a, b 로 축약해 한 페이지에 인라인된 SVG 끼리 url(#...) 참조가 충돌하던 문제를 next.config.mjs 에서 함께 수정했습니다. 온보딩 외에 defs 를 가진 SVG 전반에 해당합니다.

스크린샷

2026-07-31.12.34.59.mov

연관 이슈

closes #393

Summary by CodeRabbit

  • 새 기능

    • 신규 온보딩 화면과 2개의 소개 슬라이드를 추가했습니다.
    • 슬라이드 인디케이터와 다음 단계 이동을 지원합니다.
    • 온보딩 완료 후 로그인 화면으로 이동합니다.
    • 온보딩 확인 여부를 저장해 재방문 시 적절한 화면으로 안내합니다.
  • 개선

    • 모션 감소 설정에서도 동일한 이동 경로를 제공합니다.
    • SVG 이미지의 식별자가 불필요하게 축약되지 않도록 개선했습니다.

iOdiO89 added 2 commits July 31, 2026 12:14
- 인디케이터/다음 버튼을 BottomCta(hasGradient)로 감쌈 — 시안의 36px Top Gradient와 동일
- main을 min-h-dvh -> h-dvh로 변경. 상한이 없어 페이지가 늘어나면서 flex-1이 축소되지 않던 문제
- 일러스트 max-h-full은 부모 높이를 순환 참조해 클램프되지 않아, h-full + preserveAspectRatio 기반으로 교체
@iOdiO89 iOdiO89 self-assigned this Jul 31, 2026
@iOdiO89 iOdiO89 added the feature New feature or request label Jul 31, 2026
@iOdiO89 iOdiO89 linked an issue Jul 31, 2026 that may be closed by this pull request
7 tasks
@iOdiO89 iOdiO89 added the WEB label Jul 31, 2026
@vercel

vercel Bot commented Jul 31, 2026

Copy link
Copy Markdown

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

Project Deployment Actions Updated (UTC)
piki Ready Ready Preview Jul 31, 2026 4:23am

@github-actions

Copy link
Copy Markdown

Discord 스레드 연동용 메타데이터입니다. discord-pr-bot 워크플로가 자동 생성하며, 수정·삭제하면 PR 과 Discord 알림 연동이 끊깁니다.

@coderabbitai

coderabbitai Bot commented Jul 31, 2026

Copy link
Copy Markdown

Review Change Stack

Warning

Review limit reached

@iOdiO89, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 17 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

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 configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: c89c6a41-e0ce-4fa0-8574-bfa59afd6cb6

📥 Commits

Reviewing files that changed from the base of the PR and between 27a4eab and 9fd0053.

📒 Files selected for processing (1)
  • apps/web/src/app/onboarding/_components/OnboardingIndicator.tsx
📝 Walkthrough

Walkthrough

스플래시 이후 온보딩 열람 여부에 따라 /onboarding 또는 /login으로 이동합니다. 온보딩 페이지는 두 개의 캐러셀 슬라이드, 인디케이터, 다음 버튼을 제공합니다. 완료 시 localStorage에 상태를 저장하고 로그인으로 이동합니다. SVG ID 축약도 비활성화했습니다.

Changes

로그인 진입 온보딩 흐름

Layer / File(s) Summary
온보딩 상태와 라우트 계약
apps/web/src/consts/onboarding.ts, apps/web/src/consts/route.ts, apps/web/src/utils/getRouteType.ts, apps/web/src/utils/onboarding.ts
온보딩 키와 /onboarding 공개 라우트를 추가했습니다. hasSeenOnboardingmarkOnboardingSeen은 브라우저 localStorage를 사용합니다.
온보딩 슬라이드 화면
apps/web/src/app/onboarding/..., apps/web/next.config.mjs
두 개의 슬라이드 데이터와 일러스트를 추가했습니다. OnboardingClient는 캐러셀, 인디케이터, 다음 버튼, 완료 후 로그인 이동을 관리합니다. SVGR 설정은 SVG ID 축약을 비활성화합니다.
스플래시 이동 분기
apps/web/src/app/_components/SplashClient.tsx
온보딩 열람 여부에 따라 다음 경로를 계산합니다. 계산한 경로를 프리페치하고 일반 이동, 모션 감소 이동, 애니메이션 종료 이동에 적용합니다.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Sequence Diagram(s)

sequenceDiagram
  participant SplashClient
  participant OnboardingStorage
  participant OnboardingClient
  participant LoginPage

  SplashClient->>OnboardingStorage: hasSeenOnboarding()
  alt 미열람
    SplashClient->>OnboardingClient: /onboarding 프리페치 및 이동
    OnboardingClient->>OnboardingStorage: markOnboardingSeen()
    OnboardingClient->>LoginPage: 마지막 슬라이드에서 /login 이동
  else 열람 완료
    SplashClient->>LoginPage: /login 프리페치 및 이동
  end
Loading

Possibly related PRs

  • TeamPiKi/client#348: SplashClient의 스플래시 이동 및 모션 감소 처리를 수정했습니다.
  • TeamPiKi/client#360: SplashClient의 라우트 프리페치와 전환 동작을 수정했습니다.
  • TeamPiKi/client#354: next.config.mjs의 SVGR/SVGO 설정을 수정했습니다.
🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

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.
Linked Issues check ❓ Inconclusive 라우트, 분기, 캐러셀, 플래그 처리는 확인되지만 두 SVG 파일은 경로 필터로 제외되어 요구 사항을 완전히 검증할 수 없습니다. 제외된 onboarding-1.svg와 onboarding-2.svg의 내용 및 export 상태를 확인하세요.
✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed 제목은 로그인 진입 온보딩 슬라이드 구현이라는 주요 변경 사항을 정확하고 간결하게 설명합니다.
Out of Scope Changes check ✅ Passed 모든 변경 사항은 로그인 전 온보딩, 라우팅, 플래그 관리 또는 SVG 참조 충돌 수정과 직접 관련됩니다.
✨ Finishing Touches 💡 1
📝 Generate docstrings 💡
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feat/393-onboarding-slide

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.

@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

🧹 Nitpick comments (2)
apps/web/src/app/onboarding/_components/OnboardingClient.tsx (2)

8-8: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

CarouselApiimport type으로 분리하세요.

CarouselApi는 타입 위치에서만 사용됩니다. 값 import와 분리해 타입 전용 import 규칙을 따르세요.

수정 예시
-import { Carousel, type CarouselApi, CarouselContent, CarouselItem } from '`@/components/carousel`';
+import { Carousel, CarouselContent, CarouselItem } from '`@/components/carousel`';
+import type { CarouselApi } from '`@/components/carousel`';

As per coding guidelines, “use type-only imports via import type.”

🤖 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 `@apps/web/src/app/onboarding/_components/OnboardingClient.tsx` at line 8,
Separate the CarouselApi type from the runtime Carousel import in the
OnboardingClient imports, using an import type declaration for CarouselApi while
keeping Carousel, CarouselContent, and CarouselItem as value imports.

Source: Coding guidelines


13-13: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

교차 디렉터리 import를 @/ 절대 경로로 변경하세요.

같은 디렉터리가 아닌 프로젝트 모듈에 상대 import를 사용하고 있습니다.

  • apps/web/src/app/onboarding/_components/OnboardingClient.tsx#L13-L13: ONBOARDING_SLIDES import를 @/app/onboarding/_consts/onboardingSlide로 변경하세요.
  • apps/web/src/app/onboarding/_consts/onboardingSlide.ts#L1-L2: SVG import를 @/app/onboarding/_assets/... 절대 경로로 변경하세요.
  • apps/web/src/app/onboarding/page.tsx#L1-L1: OnboardingClient import를 @/app/onboarding/_components/OnboardingClient로 변경하세요.

As per coding guidelines, “Use @/* absolute imports for project modules and relative imports only for files in the same directory.”

🤖 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 `@apps/web/src/app/onboarding/_components/OnboardingClient.tsx` at line 13,
Replace the cross-directory relative imports with `@/`* absolute imports: update
ONBOARDING_SLIDES in
apps/web/src/app/onboarding/_components/OnboardingClient.tsx#L13-L13 to
`@/app/onboarding/_consts/onboardingSlide`, update the SVG imports in
apps/web/src/app/onboarding/_consts/onboardingSlide.ts#L1-L2 to
`@/app/onboarding/_assets/`... paths, and update the OnboardingClient import in
apps/web/src/app/onboarding/page.tsx#L1-L1 to
`@/app/onboarding/_components/OnboardingClient`.

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 `@apps/web/src/app/onboarding/_components/OnboardingIndicator.tsx`:
- Around line 19-21: On the indicator button class construction in
OnboardingIndicator, add the cursor-pointer utility to indicate the element is
clickable. Keep the existing size, color, and transition classes unchanged.

---

Nitpick comments:
In `@apps/web/src/app/onboarding/_components/OnboardingClient.tsx`:
- Line 8: Separate the CarouselApi type from the runtime Carousel import in the
OnboardingClient imports, using an import type declaration for CarouselApi while
keeping Carousel, CarouselContent, and CarouselItem as value imports.
- Line 13: Replace the cross-directory relative imports with `@/`* absolute
imports: update ONBOARDING_SLIDES in
apps/web/src/app/onboarding/_components/OnboardingClient.tsx#L13-L13 to
`@/app/onboarding/_consts/onboardingSlide`, update the SVG imports in
apps/web/src/app/onboarding/_consts/onboardingSlide.ts#L1-L2 to
`@/app/onboarding/_assets/`... paths, and update the OnboardingClient import in
apps/web/src/app/onboarding/page.tsx#L1-L1 to
`@/app/onboarding/_components/OnboardingClient`.
🪄 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: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 1d157862-c6b4-47a9-837e-202df80b942a

📥 Commits

Reviewing files that changed from the base of the PR and between 8a395f5 and 27a4eab.

⛔ Files ignored due to path filters (2)
  • apps/web/src/app/onboarding/_assets/onboarding-1.svg is excluded by !**/*.svg
  • apps/web/src/app/onboarding/_assets/onboarding-2.svg is excluded by !**/*.svg
📒 Files selected for processing (10)
  • apps/web/next.config.mjs
  • apps/web/src/app/_components/SplashClient.tsx
  • apps/web/src/app/onboarding/_components/OnboardingClient.tsx
  • apps/web/src/app/onboarding/_components/OnboardingIndicator.tsx
  • apps/web/src/app/onboarding/_consts/onboardingSlide.ts
  • apps/web/src/app/onboarding/page.tsx
  • apps/web/src/consts/onboarding.ts
  • apps/web/src/consts/route.ts
  • apps/web/src/utils/getRouteType.ts
  • apps/web/src/utils/onboarding.ts

Comment thread apps/web/src/app/onboarding/_components/OnboardingIndicator.tsx Outdated
kanghaeun and others added 3 commits July 31, 2026 13:21
* chore: E2E 목 데이터·fixture 확장 (토너먼트 상태별·위시·회원)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

* test: 솔로 토너먼트 생성·아이템 담기 E2E 추가

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

* test: 솔로 토너먼트 매치 진행 E2E 추가

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

* test: 솔로 토너먼트 결과 영수증 E2E 추가

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

* fix: 결승 진출 목 데이터를 실제 승자(11·13) 기준으로 수정

* test: 토너먼트 생성·위시 담기 요청 payload 검증 추가

* fix: test에서 사용하는 타입 export로 변경

---------

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
Co-authored-by: Jung Sun A <amber0809@naver.com>
Co-authored-by: iOdiO89 <117376841+iOdiO89@users.noreply.github.com>
@iOdiO89
iOdiO89 merged commit aa21c6d into dev Jul 31, 2026
7 checks passed
@iOdiO89
iOdiO89 deleted the feat/393-onboarding-slide branch July 31, 2026 04:26
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

feature New feature or request WEB

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feat: 로그인 진입 온보딩 슬라이드 구현

2 participants