Skip to content

Release/3 - #103

Merged
hamlsy merged 42 commits into
mainfrom
release/3
Mar 11, 2026
Merged

Release/3#103
hamlsy merged 42 commits into
mainfrom
release/3

Conversation

@hamlsy

@hamlsy hamlsy commented Mar 11, 2026

Copy link
Copy Markdown
Owner

Summary by CodeRabbit

  • New Features

    • Added comprehensive notification system with WebSocket support and toast notifications
    • Added friend system with user search, friend requests, and one-to-one chat
    • Added shop navigation link and color scheme updates
    • Enhanced multiplayer game with improved player state synchronization
  • Bug Fixes

    • Fixed player submission status reflection in solo player list
    • Fixed FinalResults auto-exit timer display with progress indicators
  • Refactoring

    • Restructured API endpoints to support expanded features
    • Improved WebSocket connection lifecycle management
    • Enhanced navigation bar with notifications and friend interactions
    • Cleaned up legacy multiplayer design variants
    • Added room title presets for lobby creation
  • Documentation

    • Added multiplayer state synchronization implementation plan
    • Added room joining gate flow documentation
    • Added multiplayer bugfix verification plan
  • Chores

    • Updated environment API paths to include /api route prefix
    • Updated submodule references

…wn UI, and add new shop features including purchase modals and a shop view.
…dicated dropdown, toast, store, API, and WebSocket service. #90
…pping capabilities, along with new shop and user services. #90
[Feat/90] 상점 페이지 구현 및 기타 버그 수정
…ew services for multiplayer game room management.
…ation bar, user search modal, and game lobby. #82
…luding new UI components and an updated navigation bar.
…tionToast and NotificationDropdown components. #82
[Feat/82] 친구 및 알림 컴포넌트 구현
…and add new single-player game views and components. #97
[Feat/94] 게임 시간 측정 표시 구현, 기타 버그 수정
[Feat/88] Implement Daily Mvp Componenet
@coderabbitai

coderabbitai Bot commented Mar 11, 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: 2d4d627b-95a0-45d7-a2b6-20e796d4e0ae

📥 Commits

Reviewing files that changed from the base of the PR and between fda6aca and 065238f.

📒 Files selected for processing (97)
  • .env
  • .env.development
  • KoSpot-frontend-private
  • docs/multiplayer-result-screen-state-sync-plan.md
  • docs/multiplayer-room-joining-gate-plan.md
  • docs/roadview-multiplayer-bugfix-plan.md
  • src/App.vue
  • src/core/api/endPoint.js
  • src/core/api/notification.api.js
  • src/core/components/NavigationBar.vue
  • src/core/components/NotificationDropdown.vue
  • src/core/components/NotificationToast.vue
  • src/core/components/TheHeader.vue
  • src/core/constants/colors.js
  • src/core/constants/notificationTypes.js
  • src/core/services/appWebSocket.service.js
  • src/core/services/notificationWebSocket.service.js
  • src/features/friend/components/FriendChatWindow.vue
  • src/features/friend/components/FriendPanel.vue
  • src/features/friend/components/FriendToggleButton.vue
  • src/features/friend/components/UserSearchModal.vue
  • src/features/friend/composables/useDraggable.js
  • src/features/friend/services/friend.service.js
  • src/features/friend/services/friendWebSocket.service.js
  • src/features/friend/stores/friend.store.js
  • src/features/friend/view/FriendSystem.vue
  • src/features/game/multiplayer/chat/components/Lobby/ChatWindow.vue
  • src/features/game/multiplayer/lobby/components/CreateRoomModal.vue
  • src/features/game/multiplayer/lobby/composables/useLobbyRoom.js
  • src/features/game/multiplayer/lobby/constants/roomTitlePresets.js
  • src/features/game/multiplayer/lobby/views/LobbyView.vue
  • src/features/game/multiplayer/lobby/views/LobbyViewDesignF.vue
  • src/features/game/multiplayer/lobby/views/LobbyViewHUD.vue
  • src/features/game/multiplayer/lobby/views/RoomCardDesignTest.vue
  • src/features/game/multiplayer/roadview/components/playerlist/SoloPlayerList.vue
  • src/features/game/multiplayer/roadview/components/results/FinalResults.vue
  • src/features/game/multiplayer/roadview/components/results/RoundResultsDesignA.vue
  • src/features/game/multiplayer/roadview/components/results/RoundResultsDesignB.vue
  • src/features/game/multiplayer/roadview/components/results/RoundResultsDesignB2.vue
  • src/features/game/multiplayer/roadview/components/results/RoundResultsDesignC.vue
  • src/features/game/multiplayer/roadview/components/results/RoundResultsDesignD.vue
  • src/features/game/multiplayer/roadview/composables/useSoloGameFlow.js
  • src/features/game/multiplayer/roadview/services/soloGameFlowCallbacks.js
  • src/features/game/multiplayer/roadview/services/soloGamePlayerMapper.js
  • src/features/game/multiplayer/roadview/services/soloGameRuntimeService.js
  • src/features/game/multiplayer/roadview/views/BaseGameLayout.vue
  • src/features/game/multiplayer/roadview/views/BaseGameView.vue
  • src/features/game/multiplayer/roadview/views/DesignTestView.vue
  • src/features/game/multiplayer/roadview/views/SoloGameView.vue
  • src/features/game/multiplayer/roadview/views/TeamGameView.vue
  • src/features/game/multiplayer/roadview/views/TestFinalResultsView.vue
  • src/features/game/multiplayer/room/components/header/RoomHeader.vue
  • src/features/game/multiplayer/room/components/list/SoloWaitingList.vue
  • src/features/game/multiplayer/room/components/settings/RoomSettingsModal.vue
  • src/features/game/multiplayer/room/composables/useRoom.js
  • src/features/game/multiplayer/room/constants/webSocketChannels.js
  • src/features/game/multiplayer/room/services/member.service.js
  • src/features/game/multiplayer/room/services/roomApi.service.js
  • src/features/game/multiplayer/room/services/roomWebSocket.service.js
  • src/features/game/multiplayer/room/services/screenStateSync.service.js
  • src/features/game/multiplayer/room/views/RoomView.vue
  • src/features/game/multiplayer/shared/components/results/TeamGameResults.vue
  • src/features/game/multiplayer/shared/services/websocket/composables/chat.js
  • src/features/game/multiplayer/shared/services/websocket/composables/core.js
  • src/features/game/shared/components/Common/CountdownOverlay.vue
  • src/features/game/shared/components/Common/GameModeCard.vue
  • src/features/game/shared/components/Common/IntroOverlay.vue
  • src/features/game/shared/components/Phone/PhoneFrame.vue
  • src/features/game/shared/components/Player/Card.vue
  • src/features/game/single/main/components/DailyMvpCard.vue
  • src/features/game/single/main/components/HistoryModal.vue
  • src/features/game/single/main/components/PracticeTutorialModal.vue
  • src/features/game/single/main/components/RankingModal.vue
  • src/features/game/single/main/components/Theme/ThemeModePopup.vue
  • src/features/game/single/main/services/dailyMvp.service.js
  • src/features/game/single/main/views/RoadViewMainView.vue
  • src/features/game/single/roadview/components/Result/PracticeResultOverlay.vue
  • src/features/game/single/roadview/components/Result/ResultMapSection.vue
  • src/features/game/single/roadview/components/Result/ResultOverlay.vue
  • src/features/game/single/roadview/components/Result/SharedPracticeResultOverlay.vue
  • src/features/game/single/roadview/views/PracticeView.vue
  • src/features/game/single/roadview/views/RankView.vue
  • src/features/main/views/MainView.vue
  • src/features/shop/components/PurchaseCompleteModal.vue
  • src/features/shop/components/PurchaseModal.vue
  • src/features/shop/services/shop.service.js
  • src/features/shop/views/ShopView.vue
  • src/features/user/components/FriendsList.vue
  • src/features/user/services/user.service.js
  • src/main.js
  • src/router/devRoutes.js
  • src/router/index.js
  • src/router/multiplayerRoutes.js
  • src/router/userRoutes.js
  • src/shared/assets/styles/common/slide-menu/slide-menu.css
  • src/shared/assets/styles/game/roadView/roadview-main.css
  • src/store/modules/notificationStore.js

📝 Walkthrough

Walkthrough

This PR introduces a comprehensive overhaul of the frontend with significant new features and restructuring: updates API/WebSocket URLs to include /api path, expands API endpoints across multiple domains (notifications, friends, game rooms), implements a complete real-time notification system with WebSocket support, introduces a full friend/chat feature set with dedicated services and UI components, adds extensive multiplayer game improvements with new planning documentation, and redesigns the navigation bar and multiplayer UI with new color theming and game flow orchestration.

Changes

Cohort / File(s) Summary
Environment Configuration
.env, .env.development
Updated API and WebSocket base URLs from http://localhost:8080 to http://localhost:8080/api to route requests through API path.
API Endpoints Expansion
src/core/api/endPoint.js
Restructured and significantly expanded API_ENDPOINTS with new categories: MAIN, MEMBER (profile, friends, search), GAME (photo, roadview, multiplayer, history, statistics), NOTIFICATION, ADMIN, UPLOAD, and GAME_ROOM. Added createEndpoint() helper for templated paths.
Notification System
src/core/api/notification.api.js, src/core/constants/notificationTypes.js, src/core/services/notificationWebSocket.service.js, src/core/components/NotificationDropdown.vue, src/core/components/NotificationToast.vue
New notification service with dummy-mode fallback, WebSocket integration via STOMP, type metadata, and UI components for dropdown and toast notifications with mark-as-read and navigation support.
Friend System Core Services
src/features/friend/services/friend.service.js, src/features/friend/services/friendWebSocket.service.js, src/features/friend/stores/friend.store.js
Complete friend management API service with CRUD operations, Pinia store for state management, and STOMP-based WebSocket service for real-time chat room subscriptions and messaging.
Friend System UI Components
src/features/friend/components/FriendPanel.vue, src/features/friend/components/FriendChatWindow.vue, src/features/friend/components/FriendToggleButton.vue, src/features/friend/components/UserSearchModal.vue, src/features/friend/composables/useDraggable.js
Draggable chat windows, collapsible friend panel with search, user search modal, toggle button with notification badge, and draggable composable for floating windows.
App-Level WebSocket & Navigation
src/App.vue, src/core/services/appWebSocket.service.js, src/core/components/NavigationBar.vue, src/core/components/TheHeader.vue
Centralized WebSocket connection management on app mount/unmount, integration with notification and friend systems, updated NavigationBar with notification dropdown, friend button, shop link, and mobile navigation overhaul; refactored TheHeader shop route links.
Multiplayer Planning & Documentation
docs/multiplayer-result-screen-state-sync-plan.md, docs/multiplayer-room-joining-gate-plan.md, docs/roadview-multiplayer-bugfix-plan.md
Comprehensive planning documents for screen state synchronization, JOINING state integration in room flow, and bugfix procedures for submission status, timer display, and overlay termination.
Multiplayer Chat & Game Flow
src/features/game/multiplayer/chat/components/Lobby/ChatWindow.vue, src/features/game/multiplayer/roadview/composables/useSoloGameFlow.js, src/features/game/multiplayer/roadview/services/soloGameFlowCallbacks.js
Enhanced IME-aware input, dynamic color theming for chat, improved message grouping/time display; extended game flow composable and new callbacks service for lifecycle management, state synchronization, and server communication.
Multiplayer Game Players & Runtime
src/features/game/multiplayer/roadview/services/soloGamePlayerMapper.js, src/features/game/multiplayer/roadview/services/soloGameRuntimeService.js
New utilities for mapping server player data, tracking submission status, enriching guesses with markers, and managing dummy runtime state including scoring, ranking, and distance calculations.
Multiplayer Lobby
src/features/game/multiplayer/lobby/components/CreateRoomModal.vue, src/features/game/multiplayer/lobby/composables/useLobbyRoom.js, src/features/game/multiplayer/lobby/constants/roomTitlePresets.js, src/features/game/multiplayer/lobby/views/LobbyView.vue
Added color theming via CSS variables to CreateRoomModal, random room title presets, expanded lobby room composable with state reset and STOMP subscription logic, refactored LobbyView with NavigationBar integration and CSS variable-driven theming.
Multiplayer Result Screens
src/features/game/multiplayer/roadview/components/results/FinalResults.vue
Complete redesign from ranking list to podium-based TOP 3 display with opponent status section, auto-exit progress bar, enhanced props for screen state tracking, and new helper methods for state resolution and formatting.
Multiplayer Game Layout
src/features/game/multiplayer/roadview/views/BaseGameLayout.vue
Comprehensive new component orchestrating multiplayer game with WebSocket integration, round/timer management, responsive mobile/desktop layout, map and chat panels, overlays for intro/next-round/results, and extensive event handling for game lifecycle.
Removed Components
src/features/game/multiplayer/lobby/views/LobbyViewDesignF.vue, src/features/game/multiplayer/lobby/views/LobbyViewHUD.vue, src/features/game/multiplayer/lobby/views/RoomCardDesignTest.vue, src/features/game/multiplayer/roadview/components/results/RoundResultsDesignA/B/B2/C/D.vue, src/features/friend/view/FriendSystem.vue
Removed deprecated design variants and old implementations; friend system components integrated into NavigationBar; multiplayer results consolidated into single FinalResults component.
Color & Theme Constants
src/core/constants/colors.js
Updated BRAND.PRIMARY (#33fbe8#52DEE5), BRAND.SECONDARY (#f59e0b#EEE5E9), and corresponding gradients to new color scheme.
Submodule Reference
KoSpot-frontend-private
Updated submodule pointer to latest commit.

Sequence Diagram(s)

sequenceDiagram
    participant App
    participant AppWS as appWebSocket
    participant NotifWS as notificationWebSocket
    participant NotifService as notificationService
    participant NotifStore as notificationStore
    participant UI as UI Components
    
    App->>AppWS: connectAll() on mount
    AppWS->>NotifWS: connectNotificationSocket(callback)
    NotifWS->>NotifWS: STOMP connection established
    NotifWS->>NotifWS: Subscribe to channels
    Note over NotifWS: GLOBAL & PERSONAL<br/>notification channels
    
    Note over NotifWS: Incoming notification
    NotifWS->>NotifService: onNotification(message)
    NotifService->>NotifStore: addToast(notification)
    NotifStore->>UI: Toast appears
    
    UI->>NotifService: markAsRead(notificationId)
    NotifService->>NotifStore: Update state
    NotifStore->>UI: Toast updated
Loading
sequenceDiagram
    participant NavigationBar
    participant FriendPanel
    participant FriendService
    participant FriendWS as friendWebSocket
    participant ChatWindow
    participant FriendStore
    
    NavigationBar->>FriendStore: togglePanel()
    FriendStore->>FriendPanel: isOpen = true
    
    NavigationBar->>FriendService: getAllFriends()
    FriendService->>FriendStore: Load friends
    
    FriendPanel->>FriendPanel: User clicks friend
    FriendPanel->>FriendStore: openChatRoom(friendId)
    FriendStore->>FriendService: getOrCreateChatRoom()
    FriendService->>FriendStore: roomId retrieved
    FriendStore->>FriendWS: subscribeToChatRoom(roomId)
    FriendWS->>ChatWindow: Messages streamed
    
    ChatWindow->>ChatWindow: User sends message
    ChatWindow->>FriendWS: sendChatMessage(roomId, content)
    FriendWS->>FriendWS: Publish to /app/chat-rooms
    Note over FriendWS: Message received<br/>by other client
Loading
sequenceDiagram
    participant Game as BaseGameLayout
    participant GameWS as WebSocket
    participant RoadView as RoadView Component
    participant PlayerList as SoloPlayerList
    participant Results as FinalResults
    participant GameStore
    
    Game->>GameWS: setupGameSubscriptions()
    GameWS->>GameWS: Subscribe to game/round/submission channels
    
    Note over GameWS: Game starts
    GameWS->>Game: handleGameStart()
    Game->>Game: startNextRound()
    
    Note over GameWS: Player submits guess
    GameWS->>Game: handlePlayerSubmission()
    Game->>GameStore: applySubmissionStatus()
    GameStore->>PlayerList: Update player state
    
    Note over GameWS: Round ends
    GameWS->>Game: handleRoundEnd()
    Game->>GameStore: calculatePlayerScores()
    
    Note over GameWS: Game finishes
    GameWS->>Game: handleGameEnd()
    Game->>Results: Show final results
    Results->>Results: Display podium + opponent states
    Game->>Game: Start auto-exit countdown
Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~75 minutes

Possibly related PRs

Poem

🐰 Hops through the frontend with glee,
Notifications popping, friends now chat free,
Multiplayer dreams in podium's embrace,
WebSockets dancing across cyberspace,
Colors refreshed, the roadview's a sight—
KoSpot's reborn, shining oh-so-bright!

✨ 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 release/3

@hamlsy
hamlsy merged commit 2e5ec5f into main Mar 11, 2026
1 of 2 checks passed
@hamlsy
hamlsy deleted the release/3 branch March 11, 2026 02:16
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.

1 participant