Skip to content

feat: 홈 앱 공유 온보딩 모달 추가 - #411

Merged
iOdiO89 merged 8 commits into
devfrom
feat/394-home-onboarding
Aug 1, 2026
Merged

feat: 홈 앱 공유 온보딩 모달 추가#411
iOdiO89 merged 8 commits into
devfrom
feat/394-home-onboarding

Conversation

@iOdiO89

@iOdiO89 iOdiO89 commented Aug 1, 2026

Copy link
Copy Markdown
Contributor

작업 요약

  • 앱 WebView 환경에서 홈 첫 진입 시 링크 공유로 위시를 담는 방법을 안내하는 온보딩 모달을 추가했습니다.

작업 내용

  • 3단 슬라이드 온보딩 모달 구현 — iOS/Android에 따라 마지막 슬라이드 일러스트 분기, 앱 환경에서만 노출
  • 닫기 버튼으로만 모달을 닫을 수 있게 하고, 닫을 때만 localStorage에 확인 기록 저장
  • 캐러셀 첫·마지막 슬라이드 바깥 방향 드래그 및 딤/Esc 닫기 차단
  • 홈 토너먼트 생성 Dialog를 Client Component로 분리해 hydration error 해결
  • 온보딩 인디케이터를 공통 컴포넌트로 이동, E2E 테스트에서 온보딩 모달 생략 처리

스크린샷

2026-08-01.10.58.01.mov

연관 이슈

closes #394

Summary by CodeRabbit

  • 새로운 기능
    • 홈 화면에 신규 사용자를 위한 단계별 온보딩 안내를 추가했습니다.
    • Android 환경에 맞춘 온보딩 콘텐츠와 슬라이드 선택 기능을 제공합니다.
    • 온보딩 확인 상태를 저장해 다시 표시되지 않도록 개선했습니다.
    • 토너먼트 생성 다이얼로그를 추가해 이름 입력 후 바로 생성할 수 있습니다.
    • 생성 중이거나 이름이 비어 있을 때 버튼이 비활성화됩니다.

@iOdiO89 iOdiO89 self-assigned this Aug 1, 2026
@iOdiO89 iOdiO89 added feature New feature or request WEB labels Aug 1, 2026
@iOdiO89 iOdiO89 linked an issue Aug 1, 2026 that may be closed by this pull request
6 tasks
@vercel

vercel Bot commented Aug 1, 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 Aug 1, 2026 2:20am

@github-actions
github-actions Bot requested a review from kanghaeun August 1, 2026 02:08
@github-actions

github-actions Bot commented Aug 1, 2026

Copy link
Copy Markdown

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

@coderabbitai

coderabbitai Bot commented Aug 1, 2026

Copy link
Copy Markdown

Review Change Stack

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: b7684875-9924-448e-81ce-a9d8fd241c3f

📥 Commits

Reviewing files that changed from the base of the PR and between 23dfa5c and fe247a7.

⛔ Files ignored due to path filters (4)
  • apps/web/src/app/home/_assets/onboarding-1.svg is excluded by !**/*.svg
  • apps/web/src/app/home/_assets/onboarding-2.svg is excluded by !**/*.svg
  • apps/web/src/app/home/_assets/onboarding-3-android.svg is excluded by !**/*.svg
  • apps/web/src/app/home/_assets/onboarding-3-ios.svg is excluded by !**/*.svg
📒 Files selected for processing (11)
  • apps/web/e2e/consts.ts
  • apps/web/e2e/setup/auth.setup.ts
  • apps/web/playwright.config.ts
  • apps/web/src/app/home/_components/CreateTournamentDialog.tsx
  • apps/web/src/app/home/_components/home-onboarding/index.tsx
  • apps/web/src/app/home/_consts/onboarding.ts
  • apps/web/src/app/home/page.tsx
  • apps/web/src/app/onboarding/_components/OnboardingClient.tsx
  • apps/web/src/components/common/onboarding-indicator/index.tsx
  • apps/web/src/consts/onboarding.ts
  • apps/web/src/consts/zIndex.ts

📝 Walkthrough

Walkthrough

홈 페이지에 토너먼트 생성 다이얼로그를 분리하고, 플랫폼별 홈 온보딩 캐러셀을 추가했습니다. 온보딩 완료 상태는 localStorage에 저장합니다. Playwright 인증 상태는 온보딩 완료 상태를 포함하도록 변경했습니다.

Changes

홈 사용자 경험

Layer / File(s) Summary
온보딩 데이터와 공통 인디케이터
apps/web/src/app/home/_consts/onboarding.ts, apps/web/src/consts/onboarding.ts, apps/web/src/components/common/onboarding-indicator/index.tsx, apps/web/src/app/onboarding/_components/OnboardingClient.tsx
플랫폼별 슬라이드 데이터와 홈 온보딩 키를 추가했습니다. 공통 OnboardingIndicator를 추가하고 기존 import 경로를 변경했습니다.
홈 온보딩 모달 동작
apps/web/src/app/home/_components/home-onboarding/index.tsx, apps/web/src/consts/zIndex.ts
웹뷰와 온보딩 완료 상태에 따라 모달을 표시합니다. 캐러셀, 플랫폼별 슬라이드, 경계 드래그 차단, 인디케이터, 닫기 상태 저장을 구현했습니다.
토너먼트 생성 다이얼로그 분리
apps/web/src/app/home/_components/CreateTournamentDialog.tsx, apps/web/src/app/home/page.tsx
토너먼트 이름 검증과 생성 mutation을 CreateTournamentDialog로 분리했습니다. 홈 페이지에서 생성 다이얼로그와 HomeOnboarding을 렌더링합니다.
Playwright 온보딩 상태 설정
apps/web/e2e/consts.ts, apps/web/e2e/setup/auth.setup.ts, apps/web/playwright.config.ts
공통 BASE_URL을 추가했습니다. 인증 storage state에 홈 온보딩 완료 localStorage 값을 포함했습니다.

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

Sequence Diagram(s)

sequenceDiagram
  participant HomePage
  participant HomeOnboarding
  participant localStorage
  participant OnboardingIndicator
  HomePage->>HomeOnboarding: render
  HomeOnboarding->>localStorage: read ONBOARDING_KEY.HOME
  HomeOnboarding->>OnboardingIndicator: pass current slide state
  OnboardingIndicator->>HomeOnboarding: select slide index
  HomeOnboarding->>localStorage: save completion on close
Loading

Possibly related PRs

  • TeamPiKi/client#319: 동일한 Playwright 설정 파일과 인증 상태를 수정합니다.
  • TeamPiKi/client#406: OnboardingClient, ONBOARDING_KEY, 공통 OnboardingIndicator를 함께 수정합니다.
  • TeamPiKi/client#365: CreateTournamentDialog와 홈 페이지의 토너먼트 생성 흐름을 함께 수정합니다.

Suggested labels: refactor

Suggested reviewers: kanghaeun

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (2 warnings)

Check name Status Explanation Resolution
Linked Issues check ⚠️ Warning 대부분의 요구사항은 구현했지만, localStorage 플래그를 노출 시점이 아닌 닫기 시점에 기록하여 이슈 요건을 충족하지 않습니다. 온보딩 노출 즉시 ONBOARDING_KEY.HOME을 저장하도록 수정하고, 제외된 SVG 자산의 적용 결과도 별도로 확인하세요.
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 (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 변경 사항은 온보딩 구현, 홈 연동, 공통 인디케이터, E2E 설정, hydration error 해결 범위에 포함됩니다.
✨ 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/394-home-onboarding

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 (1)
apps/web/src/app/home/_consts/onboarding.ts (1)

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

import 규칙을 일관되게 적용하세요.

프로젝트 모듈은 같은 디렉터리의 파일이 아닌 경우 @/ 절대 경로로 import해야 합니다. 변경한 import 선언에는 세미콜론도 추가하세요.

  • apps/web/src/app/home/_consts/onboarding.ts#L1-L4: SVG import를 @/app/home/_assets/... 절대 경로로 변경하고 세미콜론을 추가하세요.
  • apps/web/src/components/common/onboarding-indicator/index.tsx#L1-L1: import 끝에 세미콜론을 추가하세요.
  • apps/web/src/app/onboarding/_components/OnboardingClient.tsx#L9-L9: import 끝에 세미콜론을 추가하세요.
  • apps/web/src/app/home/_components/home-onboarding/index.tsx#L3-L15: getOnboardingSlides import를 @/app/home/_consts/onboarding으로 변경하고 import 선언에 세미콜론을 추가하세요.
수정 예시
-import Onboarding1 from '../_assets/onboarding-1.svg';
+import Onboarding1 from '`@/app/home/_assets/onboarding-1.svg`';

-import { getOnboardingSlides } from '../../_consts/onboarding';
+import { getOnboardingSlides } from '`@/app/home/_consts/onboarding`';

As per coding guidelines, project modules must use absolute imports outside the same directory and TypeScript files must use semicolons.

🤖 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/home/_consts/onboarding.ts` around lines 1 - 4, 일관된 import
규칙과 세미콜론을 적용하세요. apps/web/src/app/home/_consts/onboarding.ts 1-4의 SVG import를
`@/app/home/_assets/`... 절대 경로로 변경하고 세미콜론을 추가하세요.
apps/web/src/components/common/onboarding-indicator/index.tsx 1-1 및
apps/web/src/app/onboarding/_components/OnboardingClient.tsx 9-9의 import 선언에
세미콜론을 추가하세요. apps/web/src/app/home/_components/home-onboarding/index.tsx 3-15의
getOnboardingSlides import를 `@/app/home/_consts/onboarding` 절대 경로로 변경하고 세미콜론을
추가하세요.

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/components/common/onboarding-indicator/index.tsx`:
- Around line 13-21: Update the slide indicator buttons in the onboarding
indicator component to expose the selected slide to assistive technologies by
adding aria-current="step" only when i equals currentIndex; leave it unset for
inactive buttons.

---

Nitpick comments:
In `@apps/web/src/app/home/_consts/onboarding.ts`:
- Around line 1-4: 일관된 import 규칙과 세미콜론을 적용하세요.
apps/web/src/app/home/_consts/onboarding.ts 1-4의 SVG import를
`@/app/home/_assets/`... 절대 경로로 변경하고 세미콜론을 추가하세요.
apps/web/src/components/common/onboarding-indicator/index.tsx 1-1 및
apps/web/src/app/onboarding/_components/OnboardingClient.tsx 9-9의 import 선언에
세미콜론을 추가하세요. apps/web/src/app/home/_components/home-onboarding/index.tsx 3-15의
getOnboardingSlides import를 `@/app/home/_consts/onboarding` 절대 경로로 변경하고 세미콜론을
추가하세요.
🪄 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: b7684875-9924-448e-81ce-a9d8fd241c3f

📥 Commits

Reviewing files that changed from the base of the PR and between 23dfa5c and fe247a7.

⛔ Files ignored due to path filters (4)
  • apps/web/src/app/home/_assets/onboarding-1.svg is excluded by !**/*.svg
  • apps/web/src/app/home/_assets/onboarding-2.svg is excluded by !**/*.svg
  • apps/web/src/app/home/_assets/onboarding-3-android.svg is excluded by !**/*.svg
  • apps/web/src/app/home/_assets/onboarding-3-ios.svg is excluded by !**/*.svg
📒 Files selected for processing (11)
  • apps/web/e2e/consts.ts
  • apps/web/e2e/setup/auth.setup.ts
  • apps/web/playwright.config.ts
  • apps/web/src/app/home/_components/CreateTournamentDialog.tsx
  • apps/web/src/app/home/_components/home-onboarding/index.tsx
  • apps/web/src/app/home/_consts/onboarding.ts
  • apps/web/src/app/home/page.tsx
  • apps/web/src/app/onboarding/_components/OnboardingClient.tsx
  • apps/web/src/components/common/onboarding-indicator/index.tsx
  • apps/web/src/consts/onboarding.ts
  • apps/web/src/consts/zIndex.ts

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

Caution

Inline review comments failed to post. This is likely due to GitHub's internal server error or limits when posting large numbers of comments. If you are seeing this consistently it is likely a permissions issue. Please check "Moderation" -> "Code review limits" under your organization settings.

Actionable comments posted: 1

🧹 Nitpick comments (1)
apps/web/src/app/home/_consts/onboarding.ts (1)

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

import 규칙을 일관되게 적용하세요.

프로젝트 모듈은 같은 디렉터리의 파일이 아닌 경우 @/ 절대 경로로 import해야 합니다. 변경한 import 선언에는 세미콜론도 추가하세요.

  • apps/web/src/app/home/_consts/onboarding.ts#L1-L4: SVG import를 @/app/home/_assets/... 절대 경로로 변경하고 세미콜론을 추가하세요.
  • apps/web/src/components/common/onboarding-indicator/index.tsx#L1-L1: import 끝에 세미콜론을 추가하세요.
  • apps/web/src/app/onboarding/_components/OnboardingClient.tsx#L9-L9: import 끝에 세미콜론을 추가하세요.
  • apps/web/src/app/home/_components/home-onboarding/index.tsx#L3-L15: getOnboardingSlides import를 @/app/home/_consts/onboarding으로 변경하고 import 선언에 세미콜론을 추가하세요.
수정 예시
-import Onboarding1 from '../_assets/onboarding-1.svg';
+import Onboarding1 from '`@/app/home/_assets/onboarding-1.svg`';

-import { getOnboardingSlides } from '../../_consts/onboarding';
+import { getOnboardingSlides } from '`@/app/home/_consts/onboarding`';

As per coding guidelines, project modules must use absolute imports outside the same directory and TypeScript files must use semicolons.

🤖 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/home/_consts/onboarding.ts` around lines 1 - 4, 일관된 import
규칙과 세미콜론을 적용하세요. apps/web/src/app/home/_consts/onboarding.ts 1-4의 SVG import를
`@/app/home/_assets/`... 절대 경로로 변경하고 세미콜론을 추가하세요.
apps/web/src/components/common/onboarding-indicator/index.tsx 1-1 및
apps/web/src/app/onboarding/_components/OnboardingClient.tsx 9-9의 import 선언에
세미콜론을 추가하세요. apps/web/src/app/home/_components/home-onboarding/index.tsx 3-15의
getOnboardingSlides import를 `@/app/home/_consts/onboarding` 절대 경로로 변경하고 세미콜론을
추가하세요.

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/components/common/onboarding-indicator/index.tsx`:
- Around line 13-21: Update the slide indicator buttons in the onboarding
indicator component to expose the selected slide to assistive technologies by
adding aria-current="step" only when i equals currentIndex; leave it unset for
inactive buttons.

---

Nitpick comments:
In `@apps/web/src/app/home/_consts/onboarding.ts`:
- Around line 1-4: 일관된 import 규칙과 세미콜론을 적용하세요.
apps/web/src/app/home/_consts/onboarding.ts 1-4의 SVG import를
`@/app/home/_assets/`... 절대 경로로 변경하고 세미콜론을 추가하세요.
apps/web/src/components/common/onboarding-indicator/index.tsx 1-1 및
apps/web/src/app/onboarding/_components/OnboardingClient.tsx 9-9의 import 선언에
세미콜론을 추가하세요. apps/web/src/app/home/_components/home-onboarding/index.tsx 3-15의
getOnboardingSlides import를 `@/app/home/_consts/onboarding` 절대 경로로 변경하고 세미콜론을
추가하세요.
🪄 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: b7684875-9924-448e-81ce-a9d8fd241c3f

📥 Commits

Reviewing files that changed from the base of the PR and between 23dfa5c and fe247a7.

⛔ Files ignored due to path filters (4)
  • apps/web/src/app/home/_assets/onboarding-1.svg is excluded by !**/*.svg
  • apps/web/src/app/home/_assets/onboarding-2.svg is excluded by !**/*.svg
  • apps/web/src/app/home/_assets/onboarding-3-android.svg is excluded by !**/*.svg
  • apps/web/src/app/home/_assets/onboarding-3-ios.svg is excluded by !**/*.svg
📒 Files selected for processing (11)
  • apps/web/e2e/consts.ts
  • apps/web/e2e/setup/auth.setup.ts
  • apps/web/playwright.config.ts
  • apps/web/src/app/home/_components/CreateTournamentDialog.tsx
  • apps/web/src/app/home/_components/home-onboarding/index.tsx
  • apps/web/src/app/home/_consts/onboarding.ts
  • apps/web/src/app/home/page.tsx
  • apps/web/src/app/onboarding/_components/OnboardingClient.tsx
  • apps/web/src/components/common/onboarding-indicator/index.tsx
  • apps/web/src/consts/onboarding.ts
  • apps/web/src/consts/zIndex.ts
🛑 Comments failed to post (1)
apps/web/src/components/common/onboarding-indicator/index.tsx (1)

13-21: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

선택된 슬라이드를 보조기술에 표시하세요.

현재 슬라이드는 클래스명으로만 구분됩니다. 화면 읽기 사용자는 현재 슬라이드를 알 수 없습니다. 활성 버튼에 aria-current="step"을 추가하세요.

수정 예시
          aria-label={`${i + 1}번째 슬라이드`}
+         aria-current={i === currentIndex ? 'step' : undefined}
          onClick={() => onSelect(i)}
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

        <button
          key={i}
          type="button"
          aria-label={`${i + 1}번째 슬라이드`}
          aria-current={i === currentIndex ? 'step' : undefined}
          onClick={() => onSelect(i)}
          className={cn(
            'h-2 cursor-pointer rounded-full transition-all duration-300',
            i === currentIndex ? 'w-5 bg-icon-neutral-primary' : 'w-2 bg-icon-neutral-secondary'
          )}
🤖 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/components/common/onboarding-indicator/index.tsx` around lines
13 - 21, Update the slide indicator buttons in the onboarding indicator
component to expose the selected slide to assistive technologies by adding
aria-current="step" only when i equals currentIndex; leave it unset for inactive
buttons.

@iOdiO89
iOdiO89 merged commit 7570cc8 into dev Aug 1, 2026
7 checks passed
@iOdiO89
iOdiO89 deleted the feat/394-home-onboarding branch August 1, 2026 02:22
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: 홈 첫 진입 링크 담기 안내 온보딩 구현

1 participant