Merge pull request #70 from hamlsy/release/roadview-rank

Release/roadview rank

Author: hamlsy

.env.development

@@ -121,7 +121,14 @@ jobs:
         
         echo "Deployment completed successfully!"
         echo "Application URL: https://$BUCKET.s3-website.ap-northeast-2.amazonaws.com$DEPLOY_PATH"
-    
+        
+    - name: CloudFront Invalidation
+      env:
+        CLOUD_FRONT_ID: ${{ secrets.AWS_CLOUDFRONT_ID}}
+      run: |
+       aws cloudfront create-invalidation \
+         --distribution-id $CLOUD_FRONT_ID --paths "/*"
+
     - name: Notify deployment
       if: always()
       run: |

.github/workflows/deploy.yml

@@ -1,7 +1,7 @@
 <template>
   <div class="chat-window">
     <div class="chat-header">
-      <h3 class="chat-title">로비 채팅</h3>
+      <h3 class="chat-title">채팅방</h3>
       <!-- <div class="online-users">
         <span class="online-indicator"></span>
         <span>{{ onlineUsers }}명 접속중</span>

src/features/game/multiplayer/chat/components/Lobby/ChatWindow.vue

@@ -26,14 +26,19 @@ const props = defineProps({
     required: true
   },
   currentUserId: {
-    type: String,
+    type: [String, Number],
     required: true
   }
 });
 
 // Computed properties
 const isOwnMessage = computed(() => {
-  return props.message.senderId === props.currentUserId;
+  const sender = props.message?.senderId;
+  if (sender === undefined || sender === null) {
+    return false;
+  }
+
+  return String(sender) === String(props.currentUserId);
 });
 
 const isSystemMessage = computed(() => {
@@ -60,47 +65,64 @@ const formattedTime = computed(() => {
   max-width: 80%;
   align-self: flex-start;
   margin-bottom: 0.75rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
 }
 
 .chat-message.own-message {
   align-self: flex-end;
+  text-align: right;
 }
 
 .message-sender {
   font-size: 0.8rem;
   color: #6b7280;
-  margin-bottom: 0.25rem;
+  margin-bottom: 0.1rem;
+}
+
+.chat-message.own-message .message-sender {
+  display: none;
 }
 
 .message-content {
+  display: inline-flex;
+  align-items: flex-start;
   background: #f3f4f6;
   padding: 0.75rem 1rem;
-  border-radius: 16px 16px 16px 0;
-  color: black;
-  font-size: 0.9rem;
+  border-radius: 16px 16px 16px 4px;
+  color: #111827;
+  font-size: 0.92rem;
+  line-height: 1.45;
   word-break: break-word;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+  max-width: 100%;
 }
 
 .chat-message.own-message .message-content {
-  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
-  color: #1e40af;
-  border-radius: 16px 16px 0 16px;
+  margin-left: auto;
+  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
+  color: white;
+  border-radius: 16px 16px 4px 16px;
+  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
 }
 
 .message-time {
   font-size: 0.7rem;
   color: #9ca3af;
-  margin-top: 0.25rem;
   text-align: right;
 }
 
-/* Add subtle hover effect */
+.chat-message.own-message .message-time {
+  text-align: left;
+  margin-left: auto;
+  color: rgba(255, 255, 255, 0.75);
+}
+
 .chat-message:hover .message-content {
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
 }
 
-/* Add subtle transition */
 .chat-message .message-content {
   transition: all 0.2s ease;
 }

src/features/game/multiplayer/chat/components/Room/ChatMessage.vue

@@ -154,10 +154,10 @@ export default {
   data() {
     return {
       roomName: "",
-      gameMode: "로드뷰",
-      region: "전국",
+      gameMode: "roadview",
       maxPlayers: 4,
       gameType: "solo",
+      timeLimit: 180,
       password: "",
       gameSettings: {
         isPrivate: false,
@@ -182,6 +182,7 @@ export default {
         title: this.roomName,
         password: this.password || null,
         gameModeKey: this.gameMode,
+        timeLimit: this.timeLimit,
         playerMatchTypeKey: playerMatchTypeKey,
         maxPlayers: this.maxPlayers,
         privateRoom: this.gameSettings.isPrivate,

src/features/game/multiplayer/lobby/components/CreateRoomModal.vue

@@ -22,13 +22,17 @@ import {
 
 // 글로벌 로비 구독 정보
 const globalLobbySubscriptions = ref(new Map());
+const LOBBY_TOPIC = '/topic/chat/lobby';
 
 /**
  * 글로벌 로비 WebSocket 서비스를 초기화하고 제공하는 컴포저블 함수
  * 
  * @returns {Object} 글로벌 로비 WebSocket 서비스 관련 함수와 데이터를 포함하는 객체
  */
 export function useGlobalLobbyWebSocketService() {
+    const isTeardownInProgress = ref(false);
+    const isLobbyActive = ref(false);
+
     // 인증 컴포저블에서 사용자 정보 가져오기
     const { user: authUser, isAuthenticated } = useAuth();
 
@@ -38,44 +42,75 @@ export function useGlobalLobbyWebSocketService() {
      * 
      * @param {String} [endpoint='/ws'] - WebSocket 서버의 엔드포인트 URL
      */
-    const connectWebSocket = (endpoint = '/api/ws') => {
-        // 이미 연결된 경우에는 글로벌 로비 채널만 구독
-        if (webSocketManager.isConnected.value) {
-            subscribeToGlobalLobbyChat();
-            return;
-        }
-        
-        // 연결 성공 시 호출될 콜백 함수
-        const onConnectCallback = () => {
-            // 로비 전용 구독 설정 (게임 채팅, 플레이어 상태, 게임 상태 구독 제외)
+    const connectWebSocket = (endpoint = '/ws') => {
+        const bootstrapLobby = () => {
             webSocketManager.setupLobbySubscriptions();
-            
             subscribeToGlobalLobbyChat();
             joinGlobalLobby();
-            // 연결 성공 메시지 표시
+            isLobbyActive.value = true;
             createSystemMessage('채팅 서버에 연결되었습니다.', 'lobby');
         };
-        
-        // WebSocketManager를 통해 연결
-        webSocketManager.connect(endpoint, onConnectCallback);
+
+        if (webSocketManager.isConnected.value) {
+            bootstrapLobby();
+            return;
+        }
+
+        const onConnectCallback = () => {
+            bootstrapLobby();
+        };
+
+        try {
+            webSocketManager.connect(endpoint, onConnectCallback);
+        } catch (error) {
+            console.error('글로벌 로비 WebSocket 연결 중 오류:', error);
+        }
     };
 
     /**
      * 글로벌 로비 관련 WebSocket 구독을 해제합니다.
      * 컴포넌트가 언마운트되기 전에 호출되어야 합니다.
      */
-    const disconnectWebSocket = () => {
-        // 글로벌 로비 구독 해제
-        globalLobbySubscriptions.value.forEach((_, topic) => {
+    const unsubscribeFromGlobalLobbyChat = () => {
+        const topics = Array.from(globalLobbySubscriptions.value.keys());
+        topics.forEach((topic) => {
             try {
                 webSocketManager.unsubscribe(topic);
             } catch (error) {
                 console.error(`글로벌 로비 구독 해제 중 오류 (${topic}):`, error);
+            } finally {
+                globalLobbySubscriptions.value.delete(topic);
             }
         });
-        
-        // 구독 목록 초기화
-        globalLobbySubscriptions.value.clear();
+    };
+
+    const disconnectWebSocket = async ({ force = false } = {}) => {
+        if (isTeardownInProgress.value) {
+            return;
+        }
+
+        isTeardownInProgress.value = true;
+
+        try {
+            unsubscribeFromGlobalLobbyChat();
+
+            if (isLobbyActive.value) {
+                leaveGlobalLobby();
+            }
+
+            if (force) {
+                if (typeof webSocketManager.deactivate === 'function') {
+                    await webSocketManager.deactivate();
+                } else {
+                    webSocketManager.disconnect();
+                }
+            }
+        } catch (error) {
+            console.error('글로벌 로비 WebSocket 종료 처리 중 오류:', error);
+        } finally {
+            isLobbyActive.value = false;
+            isTeardownInProgress.value = false;
+        }
     };
 
     /**
@@ -90,10 +125,8 @@ export function useGlobalLobbyWebSocketService() {
         }
 
         try {
-            
-            // API 명세서에 따른 로비 채팅 구독 경로: /topic/lobby
-            const topic = '/topic/chat/lobby';
-            
+            const topic = LOBBY_TOPIC;
+
             // 이미 구독 중인지 확인
             if (globalLobbySubscriptions.value.has(topic)) {
                 return;
@@ -202,8 +235,8 @@ export function useGlobalLobbyWebSocketService() {
      * beforeunload 이벤트 핸들러
      * 브라우저 창 닫기 시에만 로비 퇴장 메시지 전송
      */
-    const handleBeforeUnload = () => {
-        leaveGlobalLobby();
+    const handleBeforeUnload = async () => {
+        await disconnectWebSocket({ force: true });
     };
 
     // 컴포넌트 마운트 시 이벤트 리스너 등록
@@ -213,12 +246,12 @@ export function useGlobalLobbyWebSocketService() {
     });
 
     // 컴포넌트 언마운트 시 정리 작업
-    onBeforeUnmount(() => {
+    onBeforeUnmount(async () => {
         // 이벤트 리스너 제거
         window.removeEventListener('beforeunload', handleBeforeUnload);
 
         // 구독 해제 (연결은 유지)
-        disconnectWebSocket();
+        await disconnectWebSocket();
     });
 
     // 반환할 객체

src/features/game/multiplayer/lobby/services/useGlobalLobbyWebSocketService.js

@@ -113,7 +113,7 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
+import { ref, computed, onMounted, onBeforeUnmount, nextTick } from 'vue';
 import { useRouter } from 'vue-router';
 import { useAuth } from '@/core/composables/useAuth.js';
 import useGlobalLobbyWebSocketService from '../services/useGlobalLobbyWebSocketService';
@@ -225,16 +225,15 @@ const initializeData = async () => {
 
 const connectToChat = async () => {
   try {
-    // WebSocket 서비스 연결
     lobbyService.connectWebSocket();
   } catch (error) {
     console.error('채팅 서비스 연결 실패:', error);
   }
 };
 
-const disconnectFromChat = () => {
+const disconnectFromChat = async () => {
   try {
-    lobbyService.disconnectWebSocket();
+    await lobbyService.disconnectWebSocket();
   } catch (error) {
     console.error('채팅 연결 해제 중 오류:', error);
   }
@@ -294,7 +293,6 @@ const createRoom = async (roomData) => {
       await router.push({
         name: 'RoomView',
         params: { roomId: newRoom.gameRoomId.toString() },
-        // 방 정보를 state로 전달하여 RoomView에서 즉시 사용 가능
         state: {
           roomData: {
             id: newRoom.gameRoomId,
@@ -304,7 +302,7 @@ const createRoom = async (roomData) => {
             maxPlayers: newRoom.maxPlayers,
             isPrivate: newRoom.privateRoom || false,
             hostId: getCurrentUserId(),
-            currentPlayerCount: 1 // 방장 혼자
+            currentPlayerCount: 1
           }
         }
       });
@@ -326,26 +324,29 @@ const handleDisableDummyData = async () => {
   }
 };
 
-// 개발 모드 토글 메서드
 const toggleDevMode = async () => {
   if (useDummyData.value) {
-    // 개발 모드에서 API 모드로 전환
     console.log('🌐 API 모드로 전환');
     try {
       await disableDummyData();
     } catch (error) {
       console.error('❌ API 모드 전환 실패:', error);
     }
   } else {
-    // API 모드에서 개발 모드로 전환
     console.log('🧪 개발 모드로 전환');
-    clearError(); // 기존 에러 클리어
+    clearError();
     enableDummyData(true);
   }
 };
 
 // 라이프사이클 훅
-onMounted(() => {
+onMounted(async () => {
+  // DOM이 완전히 렌더링된 후 페이지 상단으로 스크롤
+  await nextTick();
+  window.scrollTo({ top: 0, left: 0, behavior: 'instant' });
+  document.documentElement.scrollTop = 0;
+  document.body.scrollTop = 0;
+  
   // 로그인 여부 확인
   const isLoggedIn = !!localStorage.getItem('accessToken');
   
@@ -362,12 +363,12 @@ onMounted(() => {
   window.addEventListener('resize', checkMobileView);
 });
 
-onBeforeUnmount(() => {
+onBeforeUnmount(async () => {
   // 정리 작업
   if (refreshInterval.value) {
     clearInterval(refreshInterval.value);
   }
-  disconnectFromChat();
+  await disconnectFromChat();
   window.removeEventListener('resize', checkMobileView);
 });
 </script>