Skip to content

[Feat/75] UI/UX 개선 및 버그 수정 - #76

Merged
hamlsy merged 6 commits into
mainfrom
feat/75
Nov 18, 2025
Merged

[Feat/75] UI/UX 개선 및 버그 수정#76
hamlsy merged 6 commits into
mainfrom
feat/75

Conversation

@hamlsy

@hamlsy hamlsy commented Nov 18, 2025

Copy link
Copy Markdown
Owner

🔗 Related Issues

Closes #75

Summary by CodeRabbit

Release Notes

New Features

  • POI name visibility toggle in game settings
  • Auto-exit countdown to lobby after game completion
  • Map reload button in game interface
  • Road view reset button to return to initial position
  • Rank change indicators with upgrade/downgrade visual distinction

Improvements

  • Enhanced mobile viewport scrolling support
  • Logout functionality in navigation
  • Removed unnecessary mobile action buttons

Bug Fixes

  • Distance formatting correction
  • Mobile overlay z-index adjustment

@hamlsy
hamlsy merged commit 7b155d2 into main Nov 18, 2025
1 of 2 checks passed
@hamlsy
hamlsy deleted the feat/75 branch November 18, 2025 11:22
@coderabbitai

coderabbitai Bot commented Nov 18, 2025

Copy link
Copy Markdown

Caution

Review failed

The pull request is closed.

Walkthrough

This PR introduces UI/UX improvements and bug fixes across the frontend application. It adds a POI name visibility toggle throughout the multiplayer room creation and game flow, implements auto-exit countdown after game completion, adds a map reload button to the shared PhoneFrame component, removes mobile-specific action buttons from round results, fixes mobile viewport and scrolling issues, and introduces rank downgrade visualization in single-player modes.

Changes

Cohort / File(s) Summary
Multiplayer room/lobby — POI name visibility
src/features/game/multiplayer/lobby/components/CreateRoomModal.vue, src/features/game/multiplayer/room/components/settings/RoomSettingsModal.vue, src/features/game/multiplayer/room/views/RoomView.vue
Added checkbox UI and data binding for "지명 공개" (isPoiNameVisible) across room creation and settings modals; propagates isPoiNameVisible through roomData navigation state with default true fallback
Multiplayer game flow — Round handling and callbacks
src/features/game/multiplayer/roadview/composables/useSoloGameFlow.js, src/features/game/multiplayer/roadview/views/BaseGameView.vue, src/features/game/multiplayer/roadview/views/SoloGameView.vue
Introduced onNextRound UI callback with isReIssue flag; added isPoiNameVisible and poiName props to BaseMultiRoadViewGame; implemented processRoundData unified handler and auto-exit countdown (30 seconds) after game finish in SoloGameView
Shared game UI — Map reload and reset
src/features/game/shared/components/Phone/PhoneFrame.vue, src/features/game/shared/components/roadview/RoadView.vue
Added showReloadButton prop and reloadMap() method to PhoneFrame; added initialPosition tracking and resetToInitial() method to RoadView for position reset functionality
Multiplayer roadview — Mobile UI cleanup
src/features/game/multiplayer/roadview/components/results/RoundResults.vue
Removed mobile-specific action buttons and their CSS declarations; adjusted mobile overlay z-index from 9999 to 2000
Single-player views — POI display and reload integration
src/features/game/single/roadview/views/PracticeView.vue, src/features/game/single/roadview/views/RankView.vue, src/features/game/single/roadview/components/Result/ResultOverlay.vue
Added POI header display in PracticeView; moved reload button into PhoneFrame via showReloadButton prop in both views; introduced isDowngrade computed property and downgrade styling in ResultOverlay for rank change visualization
Layout and scrolling fixes
src/features/admin/views/DashboardView.vue, src/features/main/views/MainView.vue, src/features/user/view/ProfileView.vue
Updated min-height to 100dvh and overflow-y to auto across components to fix mobile viewport and scrolling; added padding-top to admin-content for fixed header compensation
Distance formatting
src/features/game/single/main/components/HistoryModal.vue
Modified formatDistance to scale input distance by 1000 before conditional logic, adjusting meter/kilometer display thresholds
Auth and navigation
src/features/notice/views/NoticeListView.vue
Added logout event handling via useAuth composable; integrated handleLogout() method and @logout listener on NavigationBar

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant SoloGameView
    participant useSoloGameFlow
    participant GameServer
    
    User->>GameServer: Complete final round
    GameServer->>useSoloGameFlow: handleNextRound (final round)
    useSoloGameFlow->>SoloGameView: onNextRound callback
    SoloGameView->>SoloGameView: startAutoExitCountdown(30)
    
    rect rgba(100, 150, 200, 0.1)
        note right of SoloGameView: Auto-exit timer running
        SoloGameView->>SoloGameView: Decrement autoExitRemaining each second
    end
    
    alt User action
        User->>SoloGameView: User clicks exit or navigates
        SoloGameView->>SoloGameView: cancelAutoExitCountdown()
        SoloGameView->>SoloGameView: redirectToLobby()
    else Timer expires
        SoloGameView->>SoloGameView: Timer reaches 0
        SoloGameView->>SoloGameView: redirectToLobby()
    end
Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

  • SoloGameView.vue: Multiple interrelated changes including new auto-exit countdown logic, processRoundData handler, onNextRound integration, and state initialization from roomData—requires careful tracing of control flow and callback ordering
  • useSoloGameFlow.js: Enhanced round handling with poiName fallback resolution, new onNextRound emission, and message parameter passing—logic density and callback chain complexity warrant extra attention
  • Feature propagation: isPoiNameVisible and poiName properties propagate through CreateRoomModal → RoomView → SoloGameView → BaseGameView hierarchy; verify correct default values and prop binding at each layer
  • PhoneFrame and RoadView: New methods (reloadMap, resetToInitial) and prop additions; confirm proper delegation to child components and event emission handling
  • Mobile UI removal in RoundResults.vue: Verify no functional regressions from removing mobile action buttons and confirm z-index adjustment does not cause stacking context issues

Possibly related PRs

  • PR #69 — Overlaps with multiplayer roadview components and shared props (isPoiNameVisible, poiName, showReloadButton); modifies BaseGameView/SoloGameView and PhoneFrame with similar architectural changes
  • PR #26 — Modifies the same multiplayer roadview and room components (CreateRoomModal, RoundResults, BaseGameView, RoadView); likely parallel feature or refactor integration
  • PR #20 — Related to room data shape changes and isPoiNameVisible initialization logic; affects RoomView navigation state and room creation flow

Poem

🐰 A fresh coat of paint, a button to reload,
POI names dancing, auto-exits foretold,
Rank downgrades shimmer, the mobile scrolls free,
Countdown to lobby—the roadview decree! ✨

✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch feat/75

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 58d7ee0 and aa62326.

📒 Files selected for processing (17)
  • src/features/admin/views/DashboardView.vue (2 hunks)
  • src/features/game/multiplayer/lobby/components/CreateRoomModal.vue (3 hunks)
  • src/features/game/multiplayer/roadview/components/results/RoundResults.vue (3 hunks)
  • src/features/game/multiplayer/roadview/composables/useSoloGameFlow.js (9 hunks)
  • src/features/game/multiplayer/roadview/views/BaseGameView.vue (16 hunks)
  • src/features/game/multiplayer/roadview/views/SoloGameView.vue (14 hunks)
  • src/features/game/multiplayer/room/components/settings/RoomSettingsModal.vue (3 hunks)
  • src/features/game/multiplayer/room/views/RoomView.vue (1 hunks)
  • src/features/game/shared/components/Phone/PhoneFrame.vue (10 hunks)
  • src/features/game/shared/components/roadview/RoadView.vue (5 hunks)
  • src/features/game/single/main/components/HistoryModal.vue (1 hunks)
  • src/features/game/single/roadview/components/Result/ResultOverlay.vue (3 hunks)
  • src/features/game/single/roadview/views/PracticeView.vue (6 hunks)
  • src/features/game/single/roadview/views/RankView.vue (1 hunks)
  • src/features/main/views/MainView.vue (1 hunks)
  • src/features/notice/views/NoticeListView.vue (3 hunks)
  • src/features/user/view/ProfileView.vue (1 hunks)

Tip

📝 Customizable high-level summaries are now available in beta!

You can now customize how CodeRabbit generates the high-level summary in your pull requests — including its content, structure, tone, and formatting.

  • Provide your own instructions using the high_level_summary_instructions setting.
  • Format the summary however you like (bullet lists, tables, multi-section layouts, contributor stats, etc.).
  • Use high_level_summary_in_walkthrough to move the summary from the description to the walkthrough section.

Example instruction:

"Divide the high-level summary into five sections:

  1. 📝 Description — Summarize the main change in 50–60 words, explaining what was done.
  2. 📓 References — List relevant issues, discussions, documentation, or related PRs.
  3. 📦 Dependencies & Requirements — Mention any new/updated dependencies, environment variable changes, or configuration updates.
  4. 📊 Contributor Summary — Include a Markdown table showing contributions:
    | Contributor | Lines Added | Lines Removed | Files Changed |
  5. ✔️ Additional Notes — Add any extra reviewer context.
    Keep each section concise (under 200 words) and use bullet or numbered lists for clarity."

Note: This feature is currently in beta for Pro-tier users, and pricing will be announced later.


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.

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] UI/UX 개선 및 버그 수정

1 participant