Skip to content

feat: 바텀탭 프레스 햅틱 피드백 추가 - #722

Merged
iOdiO89 merged 7 commits into
devfrom
feat/721-bottom-tab-haptic
Oct 1, 2026
Merged

iOdiO89 merged 7 commits into
devfrom
feat/721-bottom-tab-haptic

Conversation

@iOdiO89

@iOdiO89 iOdiO89 commented Oct 1, 2026 •

Copy link
Copy Markdown
Contributor

작업 요약

  • 바텀탭을 누르는 순간 네이티브 햅틱이 울리도록 브릿지 메시지 WEB_REQ_HAPTIC 신설
  • 토스트 노출·휠피커 칸 이동에도 같은 브릿지로 햅틱 추가
  • 앱 핸들러는 1.2.3 런타임 OTA 로 배포. 게이트 값 1.2.3

작업 세부 내용

브릿지 메시지 WEB_REQ_HAPTIC

  • HAPTIC_STYLE 허용 목록 9종. impact 5·selection 1·notification 3
    • 원인: 토너먼트 선택 등 다른 화면 재사용 전제라 payload 에 style 포함
  • BRIDGE_GATE 는 minAppVersion 1.2.3 · notifyOnBlock false
    • 원인: 앱 변경이 JS 핸들러뿐이고 expo-haptics 네이티브 모듈은 1.2.3 바이너리에 이미 포함. 1.2.3 런타임 OTA 로 배포
    • 이전: 이슈는 앱 핸들러를 최초 포함하는 app-v* 태그를 적는 계획
    • 업데이트를 아직 못 받은 1.2.3 빌드는 switch default 로 조용히 무시. 응답 대기 없음

앱 수신 핸들러

  • style 별로 expo-haptics impact·selection·notification 호출
  • 허용 목록 밖 style 은 Light impact 로 처리
    • 원인: 인바운드 payload 런타임 검증 없음

웹 발신 지점

지점 시점 style
바텀탭 프레스 pointerdown LIGHT
바텀탭 드래그 버블이 다른 탭 칸으로 넘어갈 때 SELECTION
토스트 노출 시 type 별 success SUCCESS · warning·error WARNING · info LIGHT
휠피커 스크롤 중 가운데 인덱스 변경마다 SELECTION
  • 바텀탭은 pointerdown 시점
    • 대안: pointerup 시점
      • 기각: 네이티브 탭바 대비 반 박자 늦게 느껴짐
  • 토스트는 sonner useSonner 로 활성 토스트를 구독해 새 id 마다 한 번 발신
    • 대안: Toaster icons 에 마운트 시 발신하는 래퍼 컴포넌트
      • 기각: 아이콘 렌더에 묶여 icon 을 끈 토스트에서 누락
    • 대안: toast 호출부 57곳을 래퍼 모듈로 교체
      • 기각: 호출부 전체 수정 대비 얻는 것 없음
    • promise 토스트는 loading 동안 미루고 결과 type 에서 발신
  • 에러 토스트는 WARNING
    • 원인: 실기기에서 ERROR 세 번 연타가 과하게 느껴짐
  • 발신 4곳이 utils/haptic 의 triggerHaptic 공유
  • 브라우저에서는 동작 없음
    • 원인: WebBridge.postMessage 가 RN 웹뷰 밖에서 false 반환

범위

  • 범위: 토스트·휠피커 햅틱은 이슈 밖. style 재사용 전제 확인 겸 포함
  • 범위: 드래그 selection 햅틱은 이슈의 선택 항목. 리퀴드 글래스 연출과 맞아 포함

배포

  1. 앱: development 채널(production-dev 빌드 40, 런타임 1.2.3)에 OTA 발행 완료. 업데이트 그룹 5db0fbf5
  2. 웹: dev 머지 후 dev.piki.day 배포
  • 결과: 빌드 40 실기기에서 바텀탭·토스트·휠피커 햅틱 확인
  • 후속: production 채널 OTA 발행
  • 위험: Android 는 Vibrator 로 흉내 내 iOS 와 감각 차이. 확인 전

연관 이슈

closes #721

Summary by CodeRabbit

  • 새로운 기능
    • 탭을 누르거나 탭 사이를 드래그할 때, 휠 목록을 스크롤할 때 선택 햅틱을 제공합니다.
    • 성공, 정보, 경고, 오류 토스트가 표시될 때 알림 햅틱을 제공합니다.
    • 앱에서 웹 화면의 햅틱 요청을 처리합니다.

- HAPTIC_STYLE 허용 목록 9종: impact 5·selection 1·notification 3
  - 원인: 토너먼트 선택 등 다른 화면 재사용 전제라 payload 에 style 포함
- BRIDGE_GATE 는 minAppVersion 1.2.3 · notifyOnBlock false
  - 원인: 앱 핸들러가 JS 변경뿐이라 1.2.3 런타임 OTA 로 배포
  - 원인: 햅틱은 UX 보조. 구버전 앱에서 조용히 무시
- style 별로 expo-haptics impact·selection·notification 호출
- 허용 목록 밖 style 은 Light impact 로 처리
  - 원인: 인바운드 payload 런타임 검증 없음
- pointerdown 시점에 LIGHT impact
  - 대안: pointerup 시점
    - 기각: 네이티브 탭바 대비 반 박자 늦게 느껴짐
- 드래그 중 버블이 다른 탭 칸으로 넘어갈 때 SELECTION
- 브라우저에서는 동작 없음
  - 원인: WebBridge.postMessage 가 RN 웹뷰 밖에서 false 반환
- 바텀탭 안에 인라인이던 WEB_REQ_HAPTIC postMessage 를 utils/haptic 으로 이동
  - 원인: 토스트·휠피커까지 발신 지점 4곳으로 증가
- success·warning·error 는 같은 이름의 notification 햅틱, info 는 LIGHT impact
- sonner 의 useSonner 로 활성 토스트를 구독해 새 id 마다 한 번 발신
  - 대안: Toaster icons 에 마운트 시 발신하는 래퍼 컴포넌트
    - 기각: 아이콘 렌더에 햅틱이 묶여 icon 을 끈 토스트에서 누락
  - 대안: toast 호출부 57곳을 래퍼 모듈로 교체
    - 기각: 호출부 전체 수정 대비 얻는 것 없음
- promise 토스트는 loading 동안 미루고 결과 type 에서 발신
- 스크롤 중 가운데 인덱스가 바뀔 때마다 SELECTION 발신
  - 원인: 디바운스된 onChange 는 멈춘 뒤 한 번뿐이라 네이티브 피커의 칸별 틱과 다름
- 첫 마운트의 scrollTop 초기화에서는 발신 없음
- 이전: notification ERROR
  - 원인: 실기기에서 세 번 연타가 과하게 느껴짐
@vercel

vercel Bot commented Oct 1, 2026

Copy link
Copy Markdown

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

Project Deployment Actions Updated
piki Ready Ready Preview Oct 1, 2026 6:21am UTC
1 Skipped Deployment
Project Deployment Actions Updated
piki-notify Skipped Skipped Oct 1, 2026 6:21am UTC

@github-actions github-actions Bot added APP Good for newcomers feature New feature or request WEB labels Oct 1, 2026
@github-actions
github-actions Bot requested a review from ychany October 1, 2026 06:21
@coderabbitai

coderabbitai Bot commented Oct 1, 2026 •

Copy link
Copy Markdown

Review in Change Stack →

Navigate logical layers of code changes, visualize relationships, and explore their blast radius.

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Advanced

Run ID: f93d921e-e5a8-42af-8e87-174f405617ce

📥 Commits

Reviewing files that changed from the base of the PR and between 6425eea and 1126221.

📒 Files selected for processing (12)
  • apps/app/app/index.tsx
  • apps/app/utils/handleHaptic.ts
  • apps/web/src/app/tournament/[id]/create/_components/invite-friends/WheelColumn.tsx
  • apps/web/src/components/bottom-tab-bar/index.tsx
  • apps/web/src/components/toast/index.tsx
  • apps/web/src/utils/haptic.ts
  • packages/core/src/consts/appVersion.ts
  • packages/core/src/consts/haptic.ts
  • packages/core/src/consts/webBridge.ts
  • packages/core/src/index.ts
  • packages/core/src/types/haptic.ts
  • packages/core/src/types/webBridge.ts

Included review availability: This review used your included allowance. Your plan provides up to 1 included review per hour; 0 remain after this review.


📝 Walkthrough

Walkthrough

웹과 앱 사이에 햅틱 요청 메시지와 스타일 타입을 추가했습니다. 앱은 메시지를 받아 스타일에 맞는 햅틱을 실행합니다. 웹의 휠, 하단 탭, 토스트 UI에도 햅틱 요청 처리를 추가했습니다.

Changes

웹-앱 햅틱 요청 및 실행

Layer / File(s) Summary
햅틱 스타일 및 메시지 계약
packages/core/src/consts/haptic.ts, packages/core/src/consts/webBridge.ts, packages/core/src/types/haptic.ts, packages/core/src/types/webBridge.ts, packages/core/src/consts/appVersion.ts, packages/core/src/index.ts
9개 햅틱 스타일과 햅틱 요청 메시지 타입을 정의하고 Web Bridge 메시지 유니온 및 공개 내보내기에 추가했습니다. WEB_REQ_HAPTIC에 앱 버전 게이트를 추가했습니다.
웹 요청 전달 및 앱 처리
apps/web/src/utils/haptic.ts, apps/app/app/index.tsx, apps/app/utils/handleHaptic.ts
웹은 스타일을 payload로 보내고 앱은 요청을 받아 스타일에 따른 Expo 햅틱을 실행합니다. payload가 없거나 해당 조건에 맞지 않는 스타일이면 가벼운 충격 햅틱을 실행합니다.
웹 UI 햅틱 트리거
apps/web/src/app/tournament/[id]/create/_components/invite-friends/WheelColumn.tsx, apps/web/src/components/bottom-tab-bar/index.tsx, apps/web/src/components/toast/index.tsx
휠 항목 인덱스가 바뀔 때, 하단 탭을 누르거나 드래그 중 새 탭에 진입할 때 햅틱 요청을 발생시킵니다. 활성 토스트 ID별로 유형에 맞는 햅틱 요청을 한 번 발생시킵니다.

Priority: ⬇️ Low

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

Change: Feature

Sequence Diagram(s)

sequenceDiagram
  participant WebUI
  participant triggerHaptic
  participant WebBridge
  participant Page
  participant handleHaptic
  participant ExpoHaptics
  WebUI->>triggerHaptic: 햅틱 스타일 전달
  triggerHaptic->>WebBridge: WEB_REQ_HAPTIC 메시지 전송
  WebBridge->>Page: 메시지 전달
  Page->>handleHaptic: payload 전달
  handleHaptic->>ExpoHaptics: 스타일에 따른 햅틱 호출
Loading

Suggested reviewers: ychany, soyeong0115

Merge Risk: ⚪ Minimal · up to 11262

No actionable merge-blocking issue is established. The change adds version-gated native feedback while preserving existing interaction behavior; normal checks and device validation remain appropriate.

Security Architecture Review

Security architecture risk: 🔵 Low · up to 11262

The new feedback capability is narrowly scoped. No material new security vulnerability was established, but the accompanying storage setting has an unverified effect on persisted data.

Retained concerns
No architecture-level concerns identified.

Security review details

Security Blast Radius

  • inferred — Code able to post messages from the loaded WebView can invoke the new haptic route on that device. The handler accepts no asset, tenant, service, credential, storage target, or executable operation selector; its native outcomes are haptic calls and failure telemetry. No broader authority expansion was established for this route.

Trust Boundaries and Controls

  • observed — The receiver validates only an object with a string type; it does not authenticate the sender origin or validate the haptic payload schema. These receiver checks predate the PR. Missing or ordinary unknown styles deliberately produce light feedback. The new branch does not invoke neighboring credential or navigation handlers, and the sender-side version gate is bypassable by direct message posting.
🚥 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%. Docstring coverage is scoped to functions touched by this diff. Analyzed 3 functions across 12 files. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
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.
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed 제목은 바텀 탭의 프레스 햅틱 피드백을 정확하게 설명하며, PR 변경사항의 주요 사용자 기능과 관련됩니다.
  • Fix all pre-merge checks with AI
✨ Finishing Touches 💡 1
📝 Generate docstrings 💡
  • Commit to this branch
  • Create a new PR
🧪 Generate unit tests (beta)
  • Commit to this branch
  • Create a new PR
  • Autopilot · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Autopilot is currently an internal CodeRabbit preview.


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.

@iOdiO89
iOdiO89 merged commit 916b1d0 into dev Oct 1, 2026
11 checks passed
@iOdiO89
iOdiO89 deleted the feat/721-bottom-tab-haptic branch October 1, 2026 08:46

This branch was successfully deployed

1 active and 1 inactive deployments
Preview – piki — 11262215 Deployed Oct 1, 2026 by vercel[bot]
Preview – piki-notify — 11262215 Deployed Oct 1, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

APP Good for newcomers feature New feature or request WEB

Projects

None yet

Development

Successfully merging this pull request may close these issues.

바텀탭 프레스 햅틱 피드백 추가

2 participants