[WIP]환경변수(API/WS) 분리 및 영어 버전 다국어 처리 작업 #2

.env

@@ -0,0 +1,6 @@
+# 1. API 주소 (http/https)
+VITE_API_BASE_URL=https://dilemmai-idl.com
+
+# 2. 웹소켓 주소 (ws/wss)
+# 주소 뒤에 /ws/voice 등을 붙여서 쓰기 위해 도메인만 관리
+VITE_WS_BASE_URL=wss://dilemmai-idl.com

.github/workflows/build-check.yml

@@ -0,0 +1,28 @@
+# 본 워크플로우는 GitHub Actions를 사용하여 코드 푸시 및 풀 리퀘스트 시 자동으로 빌드 체크를 수행함
+#빌드 과정에서 발생하는 에러는 로그에 기록되어 깃헙 레포지토리-Actions 탭-워크플로우의 푸시 내역에서 확인 가능
+name: Build Check
+
+on:
+  push:
+    branches: [ "main", "feature/*" ] # 푸시할 때마다 실행
+  pull_request:
+    branches: [ "main" ]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20' # 프로젝트 Node 버전과 맞춤
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Run build check
+        run: npm run build # 여기서 에러가 나면 로그가 기록됩니다.

src/WebRTCProvider.jsx

@@ -1100,6 +1100,11 @@ function maskIceServersForLog(iceServers) {
 // WebRTC Context 생성
 const WebRTCContext = createContext();
 
+/**
+ *  시그널링용 웹소켓 베이스 주소를 환경변수에서 가져옵니다.
+ */
+const WS_BASE = import.meta.env.VITE_WS_BASE_URL || 'wss://dilemmai-idl.com';
+
 // 재연결 그레이스 상수 (ms)
 const RECONNECT_GRACE_MS = 20000; // 20초
 
@@ -1292,7 +1297,7 @@ const WebRTCProvider = ({ children }) => {
 
   // ----------------------------
   // Offer 충돌(글레어) 처리용 유틸 (Perfect Negotiation - 간소화)
-  // - 서버가 peers/join을 누구에게 어떻게 브로드캐스트하든, 양쪽이 offer를 만들어도 안전하게 수렴하게 함
+  // - 서버가 peers/join을 누구에게 어떻게 브로드캐스트하든, 양쪽이 offer를 만들어도 안전하게 수락하게 함
   // - user_id가 숫자일 가능성이 높으니 숫자 비교 우선, 아니면 문자열 비교
   // ----------------------------
   function comparePeerIds(a, b) {
@@ -1409,9 +1414,14 @@ const WebRTCProvider = ({ children }) => {
     };
 
     pc.onconnectionstatechange = () => {
-      console.log(`PC(${key}) connectionState=`, pc.connectionState);
+      console.log(`[${providerId}] PC(${key}) connectionState=`, pc.connectionState);
+
+  // ✅ 추가: 상태가 변할 때마다 리액트의 peerConnections 상태를 갱신합니다.
+  // 이 코드가 있어야 GameIntro의 peerCount가 0에서 2로 올라갑니다.
+      setPeerConnections(new Map(pcsRef.current));
+
       if (['disconnected', 'failed', 'closed'].includes(pc.connectionState)) {
-        // 필요시 정리
+    // 필요 시 정리 로직 유지
       }
     };
 
@@ -1574,8 +1584,11 @@ const WebRTCProvider = ({ children }) => {
 
       connectionAttemptedRef.current = true;
 
+      /**
+       *  하드코딩된 주소를 환경변수(VITE_WS_BASE_URL) 기반으로 변경
+       */
       const urlsToTry = [
-        `wss://dilemmai-idl.com/ws/signaling?room_code=${roomCode}&token=${token}`,
+        `${WS_BASE}/ws/signaling?room_code=${roomCode}&token=${token}`,
       ];
 
       console.log(`🔌 [${providerId}] 시그널링 WebSocket 연결 시작 (User 토큰 기반)`);
@@ -1598,7 +1611,7 @@ const WebRTCProvider = ({ children }) => {
             ws.close();
             tryConnection(urlIndex + 1);
           }
-        }, 3000);
+        }, 5000);
         ws.onopen = () => {
           clearTimeout(connectionTimeout);
           console.log(`✅ [${providerId}] WebSocket 연결 성공 (signaling)`);
@@ -1635,15 +1648,15 @@ const WebRTCProvider = ({ children }) => {
             if (msg.type === 'peers' && Array.isArray(msg.peers)) {
               console.log('👥 [signaling] peers list:', msg.peers);
               for (const otherId of msg.peers) {
-                if (!otherId) continue;
+                if (!otherId || String(otherId) === SELF()) continue;
                 // 레이스로 myPeerIdRef.current가 아직 null일 수 있으니 SELF() 기준으로 자기 자신 제외
                 if (String(otherId) === SELF()) continue;
                 // ✅ 원칙 (3): 글레어 방지 - userId 비교로 offer initiator 제한
                 // 🚨 임시 비활성화: 연결 테스트를 위해 글레어 방지를 우선 꺼둠
-                // if (!shouldInitiate(String(otherId))) {
-                //   console.log(`⏭️ [signaling] 글레어 방지: ${SELF()} < ${otherId}, offer 스킵`);
-                //   continue;
-                // }
+                if (!shouldInitiate(String(otherId))) {
+                  console.log(`⏭️ [signaling] 글레어 방지: ${SELF()} < ${otherId}, offer 스킵`);
+                  continue;
+                 }
                 console.log(`📤 [signaling] peers → offer 생성 시작: ${SELF()} → ${otherId}`);
                 await createOfferTo(String(otherId));
               }
@@ -1656,10 +1669,10 @@ const WebRTCProvider = ({ children }) => {
               if (otherId === SELF()) return;
               // ✅ 원칙 (3): 글레어 방지 - userId 비교로 offer initiator 제한
               // 🚨 임시 비활성화: 연결 테스트를 위해 글레어 방지를 우선 꺼둠
-              // if (!shouldInitiate(otherId)) {
-              //   console.log(`⏭️ [signaling] 글레어 방지: ${SELF()} < ${otherId}, offer 스킵 (join/joined)`);
-              //   return;
-              // }
+              if (!shouldInitiate(otherId)) {
+                 console.log(`⏭️ [signaling] 글레어 방지: ${SELF()} < ${otherId}, offer 스킵 (join/joined)`);
+                 return;
+               }
               console.log(`📤 [signaling] join/joined → offer 생성 시작: ${SELF()} → ${otherId}`);
               await createOfferTo(otherId);
               return;
@@ -2273,7 +2286,9 @@ const WebRTCProvider = ({ children }) => {
       if (cancelled) return;
       // 퇴장/종료 진행 중이면 절대 자동으로 녹음/초기화 재시작하지 않음 (레이스 방지)
       if (voiceManager?.exitInProgress) return;
-
+      if (isInitialized || initializationPromiseRef.current) {
+        return;
+      }
       // ✅ 0) WebRTC/세션 준비 전이라도 "로컬 녹음"은 먼저 켜서 시작점을 앞으로 당김
       // - user가 말한 증상(마지막 1~2초만 녹음)은 보통 초반 init 실패로 발생
       try {
@@ -2391,7 +2406,9 @@ const WebRTCProvider = ({ children }) => {
       if (!(roomCode && nickname)) return;
 
       if (!isReloadingGraceLocal()) return;
-
+      if (isInitialized || signalingConnected || initializationPromiseRef.current) {
+        return;
+      }
       console.log(`♻️ [${providerId}] 페이지 새로고침 감지 — WebRTC 자동 재연결 시도 (grace)`);
       const MAX_WAIT_MS = RECONNECT_GRACE_MS;
       const RETRY_INTERVAL_MS = 2000;
@@ -2625,20 +2642,24 @@ const WebRTCProvider = ({ children }) => {
   // 정리 useEffect (언마운트)
   useEffect(() => {
     return () => {
-      console.log(`🧹 [${providerId}] WebRTC Provider 정리 시작`);
-      peerConnections.forEach(pc => { pc.close(); });
-      if (signalingWsRef.current) {
-        signalingWsRef.current.close();
-        signalingWsRef.current = null;
+      if (voiceManager.exitInProgress) {
+        console.log(`🧹 [${providerId}] WebRTC Provider 정리 시작`);
+        peerConnections.forEach(pc => { pc.close(); });
+        if (signalingWsRef.current) {
+          signalingWsRef.current.close();
+          signalingWsRef.current = null;
+        }
+        const audioElements = document.querySelectorAll('audio[data-user-id]');
+        audioElements.forEach(audio => { audio.remove(); });
+        offerSentToRoles.current.clear();
+        offerReceivedFromRoles.current.clear();
+        pendingCandidates.current.clear();
+        console.log(`✅ [${providerId}] WebRTC Provider 정리 완료`);
+      } else {
+        console.log(`ℹ️ [${providerId}] WebRTC Provider 소프트 정리 (인스턴스 교체) - 연결 유지`);
       }
-      const audioElements = document.querySelectorAll('audio[data-user-id]');
-      audioElements.forEach(audio => { audio.remove(); });
-      offerSentToRoles.current.clear();
-      offerReceivedFromRoles.current.clear();
-      pendingCandidates.current.clear();
-      console.log(`✅ [${providerId}] WebRTC Provider 정리 완료`);
-    };
-  }, []); // 마운트 시 한 번
+    }
+  }, [providerId, peerConnections]); // 마운트 시 한 번
 // ----------------------------
 // 디버그 유틸리티
 // ----------------------------
@@ -2726,3 +2747,22 @@ useEffect(() => {
 };
 
 export default WebRTCProvider;
+
+// 유틸함수
+export function disconnectWebRTCVoice(peerConnectionsMap) {
+  if (!peerConnectionsMap) return;
+  const iterable = peerConnectionsMap instanceof Map 
+    ? peerConnectionsMap.values() 
+    : Object.values(peerConnectionsMap);
+  for (const pc of iterable) {
+    try {
+      pc.getSenders().forEach(s => { if (s.track?.kind === 'audio') s.track.stop(); });
+      pc.close();
+    } catch (e) { console.error(e); }
+  }
+}
+
+/**
+ * 1. 상단에 WS_BASE 상수를 선언하고 VITE_WS_BASE_URL 환경변수를 적용함.
+ * 2. connectSignalingWebSocket 함수 내 하드코딩된 'wss://dilemmai-idl.com' 주소를 WS_BASE 변수로 대체함.
+ */