Skip to content

[Feat/95] 게임 결과 창 캡쳐 기능 추가 - #104

Merged
hamlsy merged 4 commits into
deployfrom
feat/95
Mar 12, 2026
Merged

[Feat/95] 게임 결과 창 캡쳐 기능 추가#104
hamlsy merged 4 commits into
deployfrom
feat/95

Conversation

@hamlsy

@hamlsy hamlsy commented Mar 12, 2026

Copy link
Copy Markdown
Owner

closes #95

Summary by CodeRabbit

  • New Features

    • Added image capture and sharing functionality for game results with social media options.
    • Added display of hints used during gameplay in result screens.
  • Bug Fixes

    • Resolved chat user ID initialization to prevent duplicate operations.
  • Style

    • Updated brand primary color for visual refresh.
    • Redesigned result overlay layout with improved information hierarchy.
    • Updated share button iconography and rank mode styling.

@hamlsy
hamlsy changed the base branch from main to deploy March 12, 2026 08:13
@coderabbitai

coderabbitai Bot commented Mar 12, 2026

Copy link
Copy Markdown

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 75a9e99e-c257-4205-9c7a-1e3b00c5b67a

📥 Commits

Reviewing files that changed from the base of the PR and between 2e5ec5f and 1ae9623.

⛔ Files ignored due to path filters (1)
  • package-lock.json is excluded by !**/package-lock.json
📒 Files selected for processing (14)
  • package.json
  • public/index.html
  • src/core/components/NavigationBar.vue
  • src/core/constants/colors.js
  • src/features/friend/stores/friend.store.js
  • src/features/game/single/main/components/DailyMvpCard.vue
  • src/features/game/single/roadview/components/Result/PracticeResultOverlay.vue
  • src/features/game/single/roadview/components/Result/ResultImageActions.vue
  • src/features/game/single/roadview/components/Result/ResultOverlay.vue
  • src/features/game/single/roadview/components/Result/ShareGameButton.vue
  • src/features/game/single/roadview/components/Result/SharedPracticeResultOverlay.vue
  • src/features/game/single/roadview/views/PracticeView.vue
  • src/main.js
  • src/shared/assets/styles/game/roadView/roadview-main.css

📝 Walkthrough

Walkthrough

This change introduces a game result capture and sharing feature. It adds the html2canvas dependency and Kakao SDK for social sharing, implements a new ResultImageActions component for client-side image generation and sharing, enhances result overlays with location display and hint tracking, redesigns the result layout, and updates styling with new CSS variables.

Changes

Cohort / File(s) Summary
Dependencies & SDK Integration
package.json, public/index.html, src/main.js
Added html2canvas dependency (^1.4.1) for canvas-based image generation. Added Kakao JavaScript SDK script and initialization logic to support social sharing via Kakao APIs.
Result Image Sharing Feature
src/features/game/single/roadview/components/Result/ResultImageActions.vue (new)
New comprehensive component providing off-screen card rendering via html2canvas, image capture to PNG blob, clipboard copy, save functionality, and multi-platform sharing (Web Share API, Twitter, KakaoTalk, Instagram, Facebook, link copy) with dedicated sharing panel UI.
Result Overlay Enhancements
src/features/game/single/roadview/components/Result/PracticeResultOverlay.vue, src/features/game/single/roadview/components/Result/SharedPracticeResultOverlay.vue
Integrated ResultImageActions component with props and toast event forwarding. Added hintsUsed prop to PracticeResultOverlay, poiName and fullAddress props to SharedPracticeResultOverlay for location display. Extended emits to include toast event.
Result Layout Redesign
src/features/game/single/roadview/components/Result/ResultOverlay.vue, src/features/game/single/game/single/main/components/DailyMvpCard.vue
Redesigned ResultOverlay with new compact header, circular score-hero section, streamlined stats-row, rank-change-section with badges, dedicated location section, and action-row layout. DailyMvpCard underwent formatting and minor styling adjustments with no functional changes.
Data Flow & Integration
src/features/game/single/roadview/views/PracticeView.vue, src/features/friend/stores/friend.store.js, src/core/components/NavigationBar.vue
Updated PracticeView to pass hintsUsed, poiName, fullAddress props to result overlays and wire toast event handlers. Consolidated memberId resolution logic in friend store's openChatRoom flow. Removed duplicate unread notification fetch in NavigationBar.
Visual & Styling Updates
src/core/constants/colors.js, src/features/game/single/roadview/components/Result/ShareGameButton.vue, src/shared/assets/styles/game/roadView/roadview-main.css
Updated brand primary color from '#52DEE5' to '#4cc9cfff'. Changed ShareGameButton icon from share-alt to swords. Introduced --rv-rank CSS variable and refactored rank/practice-mode styling to use new color tokens while simplifying legacy color definitions.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant UI as PracticeResultOverlay
    participant Capture as ResultImageActions
    participant Canvas as html2canvas
    participant Share as Share APIs
    participant Feedback as Toast

    User->>UI: Result displayed
    User->>Capture: Trigger image action
    Capture->>Capture: Build off-screen styled card
    Capture->>Canvas: Render card to canvas
    Canvas-->>Capture: PNG blob
    Capture->>Capture: Cache blob for reuse
    alt Copy to Clipboard
        Capture->>Share: ClipboardAPI.write()
        Share-->>Capture: Success/failure
        Capture->>Feedback: Show copy feedback
    else Save Image
        Capture->>Share: Download blob
        Share-->>Capture: File saved
        Capture->>Feedback: Show save feedback
    else Share Socially
        Capture->>Share: Web Share API / Twitter / Kakao / etc.
        Share-->>Capture: Share initiated
        Capture->>Feedback: Show share confirmation
    end
    Feedback-->>User: Toast notification
    Capture->>UI: Emit toast event
    UI-->>User: Display message
Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Possibly related PRs

  • PR #91: Extends the Roadview sharing UI by introducing ResultImageActions, html2canvas dependency, Kakao SDK initialization, and updating PracticeResultOverlay/SharedPracticeResultOverlay with sharing components.
  • PR #69: Modifies roadview result modal and sharing UI components (ResultOverlay, PracticeResultOverlay, SharedPracticeResultOverlay) with updated props and sharing integration.
  • PR #39: Updates roadview result and practice components with props like poiName and enhanced map/result UI and sharing behaviors.

Poem

🐰✨ A curious rabbit with brush in paw,
Paints game results in canvas raw—
To share with friends, a swordsman's might,
Screenshots captured, shared just right!
Hop, snap, and send with joy so true! 📸🎮

✨ Finishing Touches
  • 📝 Generate docstrings (stacked PR)
  • 📝 Generate docstrings (commit on current branch)
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch feat/95

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.

@hamlsy
hamlsy merged commit ee8f89a into deploy Mar 12, 2026
1 of 2 checks passed
@hamlsy
hamlsy deleted the feat/95 branch March 12, 2026 08:13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feat] 게임 결과 창 캡쳐 기능 추가

1 participant