- {typedText}
+ {/* 3. 실제 보이는 텍스트 */}
+ {visibleText}
+
+ {/* 4. 투명한 상태로 자리를 미리 차지하는 텍스트 (깜빡임 방지 핵심) */}
+
+ {hiddenText}
+
);
}
+
diff --git a/src/components/ContentBox3.jsx b/src/components/ContentBox3.jsx
index 740c033..4925472 100644
--- a/src/components/ContentBox3.jsx
+++ b/src/components/ContentBox3.jsx
@@ -1,11 +1,18 @@
import React from 'react';
-import useTypingEffect from '../hooks/useTypingEffect';
+import useTypingEffect from '../hooks/useTypingEffect';
import contentBoxFrame from '../assets/contentBox2.svg';
import { Colors, FontStyles } from './styleConstants';
-export default function ContentBox2({ text, typingSpeed = 70 }) {
-
-const typedText = useTypingEffect(text, typingSpeed);
+
+export default function ContentBox2({ text, typingSpeed = 45 }) {
+ // 타이핑 중인 텍스트 데이터 로드
+ const typedText = useTypingEffect(text, typingSpeed);
+ // 전체 텍스트 길이 측정 및 투명 텍스트 영역 계산
+ const fullText = text || '';
+ const typedLen = (typedText || '').length;
+ const visibleText = fullText.slice(0, typedLen);
+ const hiddenText = fullText.slice(typedLen);
+
return (
언어팩 UiElements.next > 기본값 "다음"
+ const finalLabel = label || t.next || "다음";
+ const interactive = !disabled;
+ const scale = interactive ? (isActive ? 0.989 : isHovered ? 1.01 : 1) : 1;
const textColor = interactive ? Colors.grey01 : Colors.grey04;
-
+ const textStyle = {
+ ...FontStyles.headlineSmall,
+ color: textColor,
+ ...(lang !== 'ko' && {
+ fontSize: '22px', // 글자 크기 축소 (필요시 조절)
+ lineHeight: '1.2', // 줄 간격 좁힘
+ whiteSpace: 'nowrap' // 줄바꿈 방지 (혹은 필요시 'normal')
+ })
+ };
return (
setIsHovered(true) : undefined}
+ onMouseEnter={interactive ? () => setIsHovered(true) : undefined}
onMouseLeave={interactive ? () => { setIsHovered(false); setIsActive(false); } : undefined}
- onMouseDown={interactive ? () => setIsActive(true) : undefined}
- onMouseUp ={interactive ? () => setIsActive(false) : undefined}
-
+ onMouseDown={interactive ? () => setIsActive(true) : undefined}
+ onMouseUp={interactive ? () => setIsActive(false) : undefined}
style={{
- width,
- height,
- position: 'relative',
- cursor: interactive ? 'pointer' : 'default',
- userSelect: 'none',
- transform: `scale(${scale})`,
- transition: 'transform 0.15s ease-out',
+ width, height, position: 'relative', cursor: interactive ? 'pointer' : 'default',
+ userSelect: 'none', transform: `scale(${scale})`, transition: 'transform 0.15s ease-out',
opacity: interactive ? 1 : 0.4,
}}
>
-
-
-
- {label}
-
-
+
+
+ {finalLabel}
);
-}
+}
\ No newline at end of file
diff --git a/src/components/Continue2.jsx b/src/components/Continue2.jsx
index e0c2f9f..aedb94e 100644
--- a/src/components/Continue2.jsx
+++ b/src/components/Continue2.jsx
@@ -2,11 +2,12 @@ import React, { useState } from 'react';
import nextFrame from '../assets/contentBox3.svg';
import { FontStyles, Colors } from './styleConstants';
-export default function Continue({
+export default function Continue2({
width = 264,
height = 72,
onClick,
- disabled = false,
+ disabled = false,
+ label, // label props 추가
}) {
const [isHovered, setIsHovered] = useState(false);
const [isActive, setIsActive] = useState(false);
@@ -27,12 +28,10 @@ export default function Continue({
return (
setIsHovered(true) : undefined}
onMouseLeave={interactive ? () => { setIsHovered(false); setIsActive(false); } : undefined}
onMouseDown={interactive ? () => setIsActive(true) : undefined}
onMouseUp ={interactive ? () => setIsActive(false) : undefined}
-
style={{
width,
height,
@@ -69,10 +68,11 @@ export default function Continue({
}}
>
- 다음
+ {/* 하드코딩 '다음' 제거하고 label 출력 */}
+ {label || "다음"}
);
-}
+}
\ No newline at end of file
diff --git a/src/components/CreateRoom2.jsx b/src/components/CreateRoom2.jsx
index c8b3821..223c7ae 100644
--- a/src/components/CreateRoom2.jsx
+++ b/src/components/CreateRoom2.jsx
@@ -1,3 +1,5 @@
+//SelectRoom.jsx에서 방 유형 선택과 주제 선택을 하나의 컴포넌트로 통합한 CreateRoom2.jsx
+
import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import closeIcon from '../assets/close.svg';
@@ -9,10 +11,12 @@ import mainTopicDefault from '../assets/maintopicframedefault.svg';
import mainTopicHover from '../assets/maintopicframehover.svg';
import mainTopicActive from '../assets/maintopicframe.svg';
import axiosInstance from '../api/axiosInstance';
-
-const topics = ['안드로이드','자율 무기 시스템'];
+import { translations } from '../utils/language/index';
export default function CreateRoom2({ onClose }) {
+ const lang = localStorage.getItem('app_lang') || 'ko';
+ const t = translations?.[lang]?.CreateRoom || {};
+
const [isPublic, setIsPublic] = useState(false); // 기본은 비공개
const [selectedTopic, setSelectedTopic] = useState(null);
@@ -29,14 +33,6 @@ export default function CreateRoom2({ onClose }) {
try {
setLoading(true);
-
- // 1단계: 방 생성
- // const response = await axiosInstance.post('/rooms/create/private', {
- // title,
- // description,
- // topic,
- // allow_random_matching: true
- // });
const endpoint = isPublic ? '/rooms/create/public' : '/rooms/create/private';
const response = await axiosInstance.post(endpoint, {
@@ -51,14 +47,13 @@ export default function CreateRoom2({ onClose }) {
localStorage.setItem('category', topic);
console.log(" 방 생성 성공 room_code:", roomCode);
- // 3단계: 대기방으로 이동
navigate('/waitingroom', { state: { topic } });
} catch (err) {
console.error(' 방 생성 또는 입장 실패:', err);
- console.error('응답 메시지:', err.response?.data); // <-- 여기에 오류 메시지 나옴
+ console.error('응답 메시지:', err.response?.data);
- alert('방 생성 또는 입장 중 오류가 발생했습니다.');
+ alert(t.errorAlert || '방 생성 또는 입장 중 오류가 발생했습니다.');
} finally {
setLoading(false);
}
@@ -70,6 +65,8 @@ export default function CreateRoom2({ onClose }) {
return mainTopicDefault;
};
+ if (!t.title) return null;
+
return (
- 방 만들기
+ {t.title}
- 이번 게임에서 플레이할 주제를 선택해 주세요.
+ {t.subtitle}
- {/*
*/}
-
- {topics.map((topic) => (
+
+ {(t.topics || []).map((topicObj) => (
setSelectedTopic(topic)}
- onMouseEnter={() => setHoveredTopic(topic)}
+ key={topicObj.value}
+ onClick={() => setSelectedTopic(topicObj.value)}
+ onMouseEnter={() => setHoveredTopic(topicObj.value)}
onMouseLeave={() => setHoveredTopic(null)}
style={{
width: 360,
@@ -127,17 +123,31 @@ export default function CreateRoom2({ onClose }) {
}}
>
})
-
- {topic}
+
+ {topicObj.label}
))}
+ {/* [추가] 시나리오 버튼과 방 만들기 버튼 사이의 안내 문구 */}
+
+ {t.guidance}
+
+
- {loading ? '로딩 중...' : '입장하기'}
+ {loading ? t.loading : t.entering}
);
-}
+}
\ No newline at end of file
diff --git a/src/components/FindIdModal.jsx b/src/components/FindIdModal.jsx
index 3e68c81..529acf3 100644
--- a/src/components/FindIdModal.jsx
+++ b/src/components/FindIdModal.jsx
@@ -2,6 +2,9 @@ import React, { useMemo, useState } from 'react';
import axiosInstance from '../api/axiosInstance';
import { Colors, FontStyles } from './styleConstants';
import PrimaryButton from './PrimaryButton';
+// Localization 연동
+import { translations } from '../utils/language/index';
+
// TODO: 백엔드와 정확한 엔드포인트가 다르면 여기만 바꾸면 됩니다.
const FIND_ID_ENDPOINT = '/auth/find-username';
@@ -9,7 +12,6 @@ function buildBirthdate(y, m) {
const yy = (y || '').trim();
const mm = (m || '').trim();
if (!yy || !mm) return '';
- // 화면/에러 문구와 동일하게 YYYY-MM 형태로 전송
const mm2 = String(Number(mm)).padStart(2, '0');
return `${yy}/${mm2}`;
}
@@ -18,10 +20,12 @@ function onlyDigits(s) {
return String(s ?? '').replace(/\D/g, '');
}
-function isEmailComFormat(email) {
+/**
+ * .com 외의 다양한 도메인을 허용하도록 일반적인 이메일 정규식으로 수정
+ */
+function isEmailFormat(email) {
const v = String(email ?? '').trim();
- // "user@domain.com" 형태를 의도한 요구사항으로 해석 (대소문자 무관)
- return /^[^\s@]+@[^\s@]+\.com$/i.test(v);
+ return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v);
}
function inRangeInt(value, min, max) {
@@ -31,18 +35,19 @@ function inRangeInt(value, min, max) {
}
function preventNonDigitKeyDown(e) {
- // 조합/단축키는 그대로 통과
if (e.isComposing || e.ctrlKey || e.metaKey || e.altKey) return;
const allowed = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab', 'Home', 'End'];
if (allowed.includes(e.key)) return;
if (!/^\d$/.test(e.key)) e.preventDefault();
}
+/**
+ * 불필요한 width 프롭 제거 및 flex 기반 레이아웃 최적화
+ */
function BirthField({
value,
onChange,
placeholder,
- width = 104,
maxLength = 4,
onKeyDown,
onPaste,
@@ -59,7 +64,7 @@ function BirthField({
onKeyDown={onKeyDown}
onPaste={onPaste}
style={{
- ...(width ? { width } : {}),
+ flex: 1,
height: 56,
background: Colors.grey01,
border: 'none',
@@ -77,33 +82,38 @@ function BirthField({
}
export default function FindIdModal({ onClose }) {
+ // 다국어 설정 가져오기
+ const lang = localStorage.getItem('app_lang') || 'ko';
+ const t = translations?.[lang]?.FindIdModal || {};
+
const [email, setEmail] = useState('');
const [birthY, setBirthY] = useState('');
const [birthM, setBirthM] = useState('');
- const [gender, setGender] = useState(''); // '남' | '여'
+ const [gender, setGender] = useState(''); // 'male' | 'female' (언어 독립적 키값 사용)
const [loading, setLoading] = useState(false);
const [resultText, setResultText] = useState('');
const [errorText, setErrorText] = useState('');
const birthdate = useMemo(() => buildBirthdate(birthY, birthM), [birthY, birthM]);
- const emailOk = useMemo(() => isEmailComFormat(email), [email]);
+ const emailOk = useMemo(() => isEmailFormat(email), [email]);
const birthOk = useMemo(() => {
- const yOk = /^\d{4}$/.test(birthY) && inRangeInt(birthY, 1900, 2025);
+ const yOk = /^\d{4}$/.test(birthY) && inRangeInt(birthY, 1900, 2030); // 2025 -> 2030 확장
const mOk = /^\d{1,2}$/.test(birthM) && inRangeInt(birthM, 1, 12);
return yOk && mOk;
}, [birthY, birthM]);
const emailError = useMemo(() => {
if (!email.trim()) return '';
- return emailOk ? '' : '유효한 이메일 주소를 입력하세요';
- }, [email, emailOk]);
+ return emailOk ? '' : (t.errorEmailInvalid || '유효한 이메일 주소를 입력하세요');
+ }, [email, emailOk, t]);
+
const birthError = useMemo(() => {
if (!birthY && !birthM) return '';
- return birthOk ? '' : '올바른 형식은 2001-01 입니다.';
- }, [birthY, birthM, birthOk]);
+ return birthOk ? '' : (t.errorBirthInvalid || '올바른 형식은 2001-01 입니다.');
+ }, [birthY, birthM, birthOk, t]);
const canSubmit = useMemo(() => {
- return emailOk && birthOk && birthdate && (gender === '남' || gender === '여') && !loading;
+ return emailOk && birthOk && birthdate && (gender === 'male' || gender === 'female') && !loading;
}, [emailOk, birthOk, birthdate, gender, loading]);
const submit = async () => {
@@ -112,47 +122,46 @@ export default function FindIdModal({ onClose }) {
setErrorText('');
setResultText('');
try {
- const body = { email: email.trim(), birthdate, gender };
+ // API 전송 시에는 서버가 기대하는 값('남'/'여' 혹은 키값)으로 변환하여 전송
+ const genderValue = gender === 'male' ? '남' : '여';
+ const body = { email: email.trim(), birthdate, gender: genderValue };
const { data } = await axiosInstance.post(FIND_ID_ENDPOINT, body);
- // 응답 형태가 확정되지 않아서 최대한 유연하게 처리
- const msg =
- data?.message ||
- data?.detail ||
- (typeof data === 'string' ? data : null);
- const found =
- data?.username ||
- data?.user_id ||
- data?.email ||
- data?.result ||
- null;
+ const msg = data?.message || data?.detail || (typeof data === 'string' ? data : null);
+ const found = data?.username || data?.user_id || data?.email || data?.result || null;
if (found) {
- setResultText(`사용자의 아이디(이메일)은 ${found} 입니다.`);
+ // prefix와 suffix 사이에 불필요한 공백 발생 방지
+ const prefix = t.resultFoundPrefix || '사용자의 아이디(이메일)은';
+ const suffix = t.resultFoundSuffix || '입니다.';
+ setResultText(`${prefix} ${found} ${suffix}`);
} else if (msg) {
setResultText(String(msg));
} else {
- setResultText('요청이 완료되었습니다.');
+ setResultText(t.resultComplete || '요청이 완료되었습니다.');
}
} catch (e) {
const status = e?.response?.status;
const detail = e?.response?.data?.detail || e?.response?.data?.message;
setErrorText(
status === 404
- ? `아이디 찾기 API 경로가 달라서 실패했습니다. (${FIND_ID_ENDPOINT})`
- : (detail ? String(detail) : '아이디 찾기에 실패했습니다.')
+ ? `${t.errorApiMismatch || '아이디 찾기 API 경로가 달라서 실패했습니다.'} (${FIND_ID_ENDPOINT})`
+ : (detail ? String(detail) : (t.errorFail || '아이디 찾기에 실패했습니다.'))
);
} finally {
setLoading(false);
}
};
- const GenderButton = ({ label }) => {
- const selected = gender === label;
+ /**
+ * 내부 상태값(type)과 표시용 텍스트(label) 분리
+ */
+ const GenderButton = ({ type, label }) => {
+ const selected = gender === type;
return (
);
};
@@ -184,32 +193,21 @@ export default function FindIdModal({ onClose }) {
type="button"
onClick={onClose}
style={{
- position: 'absolute',
- top: 18,
- right: 18,
- width: 30,
- height: 30,
- border: 'none',
- background: Colors.brandPrimary,
- cursor: 'pointer',
- padding: 0,
- display: 'flex',
- alignItems: 'center',
- justifyContent: 'center',
+ position: 'absolute', top: 18, right: 18, width: 30, height: 30,
+ border: 'none', background: Colors.brandPrimary, cursor: 'pointer',
+ padding: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
}}
>
×
- 아이디 찾기
+ {t.title || '아이디 찾기'}
- {/* 입력 섹션: 공통 폭을 맞춰 좌/우 라인이 딱 맞도록 */}
- {/* 이메일 */}
- 이메일을 입력해 주세요.
+ {t.labelEmail || '이메일을 입력해 주세요.'}
@@ -236,9 +227,8 @@ export default function FindIdModal({ onClose }) {
)}
- {/* 생년월일 */}
- 생년월일을 입력해 주세요.
+ {t.labelBirth || '생년월일을 입력해 주세요.'}
@@ -274,31 +261,26 @@ export default function FindIdModal({ onClose }) {
)}
- {/* 성별 */}
- 성별을 선택해 주세요.
+ {t.labelGender || '성별을 선택해 주세요.'}
-
-
+
+
-
- 아이디 찾기
-
+ style={{
+ width: 'min(216px, 63%)', height: 48, padding: '0 20px',
+ display: 'block', margin: '24px auto 0',
+ fontSize: 'clamp(0.95rem, 1.6vw, 1.05rem)',
+ }}
+ onClick={submit}
+ disabled={!canSubmit}
+ >
+ {t.btnSubmit || '아이디 찾기'}
+
{!!resultText && (
@@ -312,6 +294,4 @@ export default function FindIdModal({ onClose }) {
)}
);
-}
-
-
+}
\ No newline at end of file
diff --git a/src/components/GameFrame.jsx b/src/components/GameFrame.jsx
index fe7fcfe..1def1cb 100644
--- a/src/components/GameFrame.jsx
+++ b/src/components/GameFrame.jsx
@@ -1,5 +1,6 @@
-import React from 'react';
-import gameFrame from '../assets/gameframe2.svg';
+//텍스트 길이에 따라 subtopic을 담는 프레임의 유동적 크기 전환을 구현하기 위하여 기존의 이미지 에셋 import방식이 아닌
+//SVG 태그를 활용한 커스텀 컴포넌트로 대체
+import React, { useState, useRef, useLayoutEffect } from 'react';
import arrowLeft from '../assets/arrowLhover.svg';
import arrowRight from '../assets/arrowRhover.svg';
import { FontStyles, Colors } from './styleConstants';
@@ -10,75 +11,79 @@ export default function GameFrame({
onRightClick = () => {},
disableLeft = false,
disableRight = false,
- hideArrows = false,
- width = 512,
- height = 64,
+ hideArrows = false,
+ width = 512,
+ height = 80,
}) {
+ const textRef = useRef(null);
+ const [dynamicWidth, setDynamicWidth] = useState(width);
+
+ useLayoutEffect(() => {
+ if (textRef.current) {
+ const textW = textRef.current.offsetWidth;
+ // [조정] 영문 등 긴 텍스트 대응을 위해 패딩 버퍼를 100으로 상향 조정하여 여유 공간 확보
+ const paddingBuffer = 100;
+ const newWidth = Math.max(width, Math.ceil(textW + paddingBuffer));
+ setDynamicWidth(newWidth);
+ }
+ }, [topic, width]);
+
+ const W = dynamicWidth;
+ // W값에 따라 동적으로 계산되는 경로 (중앙 대칭 유지)
+ const outerPath = `M ${W} 48 L ${W - 32} 80 H 0 V 32 L 32 0 H ${W} V 48 Z`;
+ const innerPath = `M ${W - 8.5} 44 L ${W - 36.5} 72 H 8.5 V 36 L 36.5 8 H ${W - 8.5} V 44 Z`;
+
return (
-
-
+
+
{!hideArrows && (
<>
-
-
-
+
+
)}
{topic}
+
+ {/* 너비 계산용 숨겨진 div */}
+
+ {topic}
+
);
-}
+}
\ No newline at end of file
diff --git a/src/components/GameMapFrame.jsx b/src/components/GameMapFrame.jsx
index f02fbc2..265a3b2 100644
--- a/src/components/GameMapFrame.jsx
+++ b/src/components/GameMapFrame.jsx
@@ -127,7 +127,7 @@ export default function GameMapFrame({
marginBottom: 15,
}}
/>
-
+
{title}
diff --git a/src/components/GameMapOptionBox.jsx b/src/components/GameMapOptionBox.jsx
index db40ca5..4e831f6 100644
--- a/src/components/GameMapOptionBox.jsx
+++ b/src/components/GameMapOptionBox.jsx
@@ -57,70 +57,142 @@
// );
// }
import React from 'react';
-import frame from '../assets/gameoptionbox1.svg';
-import frameDisabled from '../assets/gameoptionboxdisable.svg';
-import frameLocked from '../assets/gameoptionboxlocked.svg'; // 🔒 추가
+// Assets - Normal
+import frameT from '../assets/gameoptionbox_T.svg';
+import frameL from '../assets/gameoptionbox_L.svg';
+import frameM from '../assets/gameoptionbox_M.svg';
+import frameR from '../assets/gameoptionbox_R.svg';
+
+// Assets - Disabled
+import frameDisableT from '../assets/gameoptionbox_disable_T.svg';
+import frameDisableL from '../assets/gameoptionbox_disable_L.svg';
+import frameDisableM from '../assets/gameoptionbox_disable_M.svg';
+import frameDisableR from '../assets/gameoptionbox_disable_R.svg';
+
+// Assets - Locked
+import frameLockedT from '../assets/gameoptionbox_locked_T.svg';
+import frameLockedL from '../assets/gameoptionbox_locked_L.svg';
+import frameLockedM from '../assets/gameoptionbox_locked_M.svg';
+import frameLockedR from '../assets/gameoptionbox_locked_R.svg';
+
import { FontStyles, Colors } from './styleConstants';
export default function GameMapOptionBox({
option1 = null,
option2 = null,
}) {
+ const lang = localStorage.getItem('app_lang') || 'ko';
+ const isKo = lang === 'ko';
+
const renderBox = (option, isSecond = false) => {
if (!option || !option.text) return null;
- // 🔧 우선순위: locked > disabled > normal
- let frameSrc = frame;
+ // 1) 상태별 이미지 세트 선택
+ let parts;
if (option.locked) {
- frameSrc = frameLocked;
+ parts = { T: frameLockedT, L: frameLockedL, M: frameLockedM, R: frameLockedR };
} else if (option.disabled) {
- frameSrc = frameDisabled;
+ parts = { T: frameDisableT, L: frameDisableL, M: frameDisableM, R: frameDisableR };
+ } else {
+ parts = { T: frameT, L: frameL, M: frameM, R: frameR };
}
const isInteractive = !option.locked && !option.disabled;
+ // 2) 텍스트 길이에 따른 폰트 크기 조절
+ const dynamicFontSize = isKo ? '1.5vw' : '1.3vw';
+
return (
-
-
+
+
+
+ {/* [B] 박스 그룹 파츠 (L + M + R) */}
+
+ {/* 배경 조각들 */}
+
+
+
+
+ {/* 중앙 파츠: 투명한 텍스트로 너비를 확보하여 이미지를 늘림 */}
+
+ {/* 박스 확장을 위한 Hidden Text (부피 확보용) */}
+
+ {option.text}
+
+
+
+
+
+
+
+ {/* [C] 실제 텍스트 레이어 - L+M+R 전체 기준 완벽한 정중앙 */}
+
- {option.text}
+ inset: 0,
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ pointerEvents: 'none'
+ }}>
+
+ {option.text}
+
+
);
};
return (
-
+
{renderBox(option1)}
{renderBox(option2, true)}
);
-}
+}
\ No newline at end of file
diff --git a/src/components/GuestLogin.jsx b/src/components/GuestLogin.jsx
index 0289d20..4fdac25 100644
--- a/src/components/GuestLogin.jsx
+++ b/src/components/GuestLogin.jsx
@@ -1,10 +1,16 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import closeIcon from '../assets/close.svg';
import PrimaryButton from './PrimaryButton';
import { Colors, FontStyles } from './styleConstants';
import axiosInstance from "../api/axiosInstance";
+import { translations } from '../utils/language/index';
+
export default function GuestLogin({ onClose }) {
+ // 언어 설정 상태 관리 (로그인 화면과 동일하게 로컬스토리지 참조)
+ const [lang] = useState(localStorage.getItem('app_lang') || 'ko');
+ const t = translations[lang].GuestLogin;
+
const [guestId, setGuestId] = useState('');
const navigate = useNavigate();
const isValid = guestId.trim().length > 0;
@@ -12,7 +18,6 @@ export default function GuestLogin({ onClose }) {
const handleJoin = async () => {
if (!isValid) return;
try {
- // axiosInstance 기준 (baseURL이 dilemmai-idl.com로 설정되어 있다고 가정)
const { data } = await axiosInstance.post('/auth/guest', {
guest_id: guestId.trim(),
});
@@ -59,7 +64,8 @@ export default function GuestLogin({ onClose }) {
navigate('/selectroom');
} catch (err) {
console.error('게스트 로그인 실패:', err?.response?.data || err);
- alert('게스트 로그인에 실패했습니다. 잠시 후 다시 시도해주세요.');
+ // 언어팩의 실패 메시지 적용
+ alert(t.loginFail);
}
};
@@ -98,11 +104,11 @@ export default function GuestLogin({ onClose }) {
}}
/>
- 게스트 로그인
+ {t.title}
setGuestId(e.target.value)}
onKeyDown={onKeyDown}
@@ -128,8 +134,8 @@ export default function GuestLogin({ onClose }) {
opacity: isValid ? 1 : 0.4,
}}
>
- 시작하기
+ {t.startBtn}
);
-}
+}
\ No newline at end of file
diff --git a/src/components/InputBoxSmall.jsx b/src/components/InputBoxSmall.jsx
index bc0d988..77b0e4a 100644
--- a/src/components/InputBoxSmall.jsx
+++ b/src/components/InputBoxSmall.jsx
@@ -11,6 +11,7 @@ export default function InputBoxSmall({
height = 56,
value = '',
onChange = () => {},
+ style = {}, // ✅ 외부에서 스타일을 넘겨받을 수 있도록 props 추가
}) {
const [isFocused, setIsFocused] = useState(false);
const [isHovered, setIsHovered] = useState(false);
@@ -83,8 +84,17 @@ export default function InputBoxSmall({
border: 'none',
outline: 'none',
background: 'transparent',
- ...FontStyles.body,
- color: Colors.grey05,
+ ...FontStyles.body, // 기본 폰트 스타일
+ color: value.length > 0 ? '#000000' : Colors.grey05,
+ // 값이 없을 때(placeholder 상태)만 외부에서 넘겨준 작은 사이즈 사용,
+ // 사용자가 입력한 값이 있을 때는 원래의 사이즈 유지.
+ fontSize: (value.length === 0 && !isFocused)
+ ? (style.fontSize || 'inherit')
+ : '20px',
+ ...Object.entries(style).reduce((acc, [k, v]) => {
+ if (k !== 'fontSize') acc[k] = v; // fontSize는 위에서 조건부로 처리했으므로 제외
+ return acc;
+ }, {}),
}}
/>
@@ -97,4 +107,4 @@ export default function InputBoxSmall({
)}
);
-}
+}
\ No newline at end of file
diff --git a/src/components/IntroductionPopup.jsx b/src/components/IntroductionPopup.jsx
new file mode 100644
index 0000000..e02f10f
--- /dev/null
+++ b/src/components/IntroductionPopup.jsx
@@ -0,0 +1,176 @@
+import React from 'react';
+import logo from '../assets/logo.svg';
+import crownIcon from '../assets/crown.svg';
+import peopleIcon from '../assets/PeopleIcon.svg';
+// 기존 텍스트 포함 이미지를 프레임 이미지로 교체
+import buttonFrameImg from '../assets/ButtonFrame.svg';
+import { Colors, FontStyles } from './styleConstants';
+import { translations } from '../utils/language/index';
+
+export default function IntroductionPopup({ isOpen, onClose }) {
+ const lang = localStorage.getItem('app_lang') || 'ko';
+
+ if (!isOpen) return null;
+
+ // 언어팩에서 현재 언어에 맞는 데이터 가져오기
+ const t = translations?.[lang]?.IntroductionPopup || {};
+
+ /**
+ * {{키워드}} 감지 및 포인트 컬러 적용 함수
+ */
+ const renderStyledText = (text) => {
+ if (!text) return "";
+ const parts = text.split(/(\{\{.*?\}\})/g);
+ return parts.map((part, index) => {
+ if (part.startsWith('{{') && part.endsWith('}}')) {
+ const contentText = part.slice(2, -2);
+ return (
+
+ {contentText}
+
+ );
+ }
+ return part;
+ });
+ };
+
+ /**
+ * 청록색 구분선 컴포넌트
+ */
+ const Divider = () => (
+
+ );
+
+ return (
+
e.stopPropagation()}
+ >
+ {/* 상단 텍스트 및 로고 */}
+
+
+ {t.title}
+
+
+
+
+ {/* 메인 설명 텍스트 */}
+
+ {renderStyledText(t.description)}
+
+
+
+
+ {/* 역할 설명 영역 */}
+
+ {/* 방장 영역 */}
+
+
+
+
+ {t.hostTitle}
+
+
+ {t.hostDesc}
+
+
+
+
+ {/* 참여자 영역 */}
+
+
+
+
+ {t.playerTitle}
+
+
+ {t.playerDesc}
+
+
+
+
+
+
+
+ {/* 푸터 문구 */}
+
+ {t.footer}
+
+
+ {/* 하단 닫기 버튼: 프레임 이미지 위에 언어팩 텍스트 렌더링 */}
+
e.currentTarget.style.transform = 'scale(0.96)'}
+ onMouseUp={(e) => e.currentTarget.style.transform = 'scale(1)'}
+ onMouseLeave={(e) => e.currentTarget.style.transform = 'scale(1)'}
+ >
+
+
+ {t.close || (lang === 'ko' ? '닫기' : 'Close')}
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/JoinRoom.jsx b/src/components/JoinRoom.jsx
index efe6333..f769493 100644
--- a/src/components/JoinRoom.jsx
+++ b/src/components/JoinRoom.jsx
@@ -4,8 +4,13 @@ import closeIcon from '../assets/close.svg';
import PrimaryButton from './PrimaryButton';
import { Colors, FontStyles } from './styleConstants';
import axiosInstance from '../api/axiosInstance';
+import { translations } from '../utils/language/index'; // 언어 파일 임포트
export default function JoinRoom({ onClose }) {
+ // --- 시스템 설정된 언어(app_lang)를 로드하는 로직 ---
+ const lang = localStorage.getItem('app_lang') || 'ko';
+ const t = translations?.[lang]?.JoinRoom || {};
+
const [roomCode, setRoomCode] = useState('');
const [nickname, setNickname] = useState('');
const navigate = useNavigate();
@@ -65,6 +70,8 @@ useEffect(() => {
localStorage.setItem('nickname', 'nickname');
}
} catch (err) {
+ // 번역된 loadFail 메시지 사용
+ console.error(t.loadFail || '❌ 유저 정보 로드 실패:', err);
console.error('❌ 유저 정보 로드 실패:', err);
// API 호출 실패 시에도 기본값 설정
if (!nickname) {
@@ -73,7 +80,7 @@ useEffect(() => {
}
}
})();
-}, []);
+}, [t.loadFail]);
const isValidCode = roomCode.length === 6;
@@ -100,11 +107,17 @@ useEffect(() => {
localStorage.setItem('room_code', roomCode);
navigate('/waitingroom');
} catch (error) {
- console.error('방 입장 실패:', error.response?.data || error.message);
- alert(`방 입장 오류: ${JSON.stringify(error.response?.data?.detail || '')}`);
+ // 언어 설정에 따른 콘솔 로그 구분 - 언어팩 변수(t.consoleFail) 활용
+ console.error(t.consoleFail || '방 입장 실패:', error.response?.data || error.message);
+
+ // 언어 설정에 따른 alert 문구 보정 (t.errorPrefix 활용)
+ alert(`${t.errorPrefix || '방 입장 오류: '}${JSON.stringify(error.response?.data?.detail || '')}`);
}
};
+ // 데이터 로드 확인용 방어 코드
+ if (!t.title) return null;
+
return (
{
}}
/>
- 방 참여하기
+ {t.title}
{
opacity: isValidCode ? 1 : 0.4,
}}
>
- 입장하기
+ {t.enter}
);
-}
+}
\ No newline at end of file
diff --git a/src/components/Layout.jsx b/src/components/Layout.jsx
index c07556a..c900681 100644
--- a/src/components/Layout.jsx
+++ b/src/components/Layout.jsx
@@ -1,71 +1,127 @@
import React, { useEffect, useState } from 'react';
+import { useLocation } from 'react-router-dom'; // 페이지 이동 감지를 위해 추가
import Background from '../components/Background';
import UserProfile from '../components/Userprofile';
import GameFrame from '../components/GameFrame';
import { useVoiceRoleStates } from '../hooks/useVoiceRoleStates';
import voiceManager from '../utils/voiceManager';
import BackButton from './BackButton';
-import hostInfoSvg from '../assets/host_info.svg'; // 상단 import 필요
+import hostInfoSvg from '../assets/host_info.svg';
+import hostInfoSvg_en from '../assets/en/host_info_en.svg'; // 영문용 에셋 추가
import HostInfoBadge from '../components/HostInfoBadge';
+// 서버 데이터 동기화를 위한 axios 인스턴스 임포트
+import axiosInstance from '../api/axiosInstance';
+
// Character popup components
import CharacterPopup1 from '../components/CharacterPopUp';
import CharacterPopup2 from '../components/CharacterPopUp';
import CharacterPopup3 from '../components/CharacterPopUp';
import closeIcon from "../assets/close.svg";
-import { FontStyles,Colors } from './styleConstants';
-import ExtraPopup from '../components/ExtraPopup1'; // ✅ 여기 import 필요
-
-export default function Layout({
- subtopic ,
- onProfileClick,
- children,
- round,
- nodescription = false,
- onBackClick,
- showBackButton = true,
- allowScroll = false,
- hostmessage = false,
+import { FontStyles, Colors } from './styleConstants';
+import ExtraPopup from '../components/ExtraPopup1';
- popupStep = null, // ✅ 추가
- sidebarExtra = null,
+// 다국어 지원 임포트
+import { translations } from '../utils/language';
+export default function Layout({
+ subtopic, onProfileClick, children, round, nodescription = false,
+ onBackClick, showBackButton = true, allowScroll = false, hostmessage = false,
+ popupStep = null, sidebarExtra = null,
+ showSidebar = true, // ✅ 사이드바 표시 여부 제어 프롭 추가 (기본값 true)
}) {
- // Zoom for responsive scaling
const [zoom, setZoom] = useState(1);
+ const location = useLocation(); // 현재 경로 감지
+
+ // [다국어 확장 설계] 현재 언어 로드 및 폴백(Fallback) 처리
+ const lang = localStorage.getItem('app_lang') || localStorage.getItem('language') || 'ko';
+ const currentLangData = translations[lang] || translations['en'] || translations['ko'];
+
+ const t_small = currentLangData.SmallDescription || {};
+ const t_map = currentLangData.GameMap || {};
+ const t_ko_map = translations['ko']?.GameMap || {};
- // Room-specific roles
const [hostId, setHostId] = useState(null);
const [myRoleId, setMyRoleId] = useState(null);
-
- // 역할별 사용자 ID 매핑
const [roleUserMapping, setRoleUserMapping] = useState({
- role1_user_id: null,
- role2_user_id: null,
- role3_user_id: null,
+ role1_user_id: null, role2_user_id: null, role3_user_id: null,
});
- // 음성 상태 관리 (다른 사용자들의 상태) - WebSocket으로 받는 데이터
const { voiceStates, getVoiceStateForRole } = useVoiceRoleStates(roleUserMapping);
-
- // 내 음성 세션 상태 (실시간 로컬 상태)
const [myVoiceSessionStatus, setMyVoiceSessionStatus] = useState({
- isConnected: false,
- isSpeaking: false,
- sessionId: null,
- nickname: null,
- participantId: null,
- micLevel: 0,
- speakingThreshold: 30,
-
+ isConnected: false, isSpeaking: false, sessionId: null, nickname: null, participantId: null, micLevel: 0, speakingThreshold: 30,
});
- // 팝업 상태
const [openProfile, setOpenProfile] = useState(null);
const roleIdMap = { '1P': 1, '2P': 2, '3P': 3 };
- const mateName = localStorage.getItem('mateName') || 'HomeMate';
+
+ // mateName을 상태(State)로 관리하여 서버 응답 시 즉시 UI 반영
+ const [mateName, setMateName] = useState(localStorage.getItem('mateName') || 'HomeMate');
+
+ // [선제적 동기화 로직]
+ const syncMateName = async () => {
+ const roomCode = localStorage.getItem('room_code');
+ if (!roomCode) return;
+
+ try {
+ const { data } = await axiosInstance.get('/rooms/ai-name', {
+ params: { room_code: roomCode },
+ });
+
+ if (data) {
+ const finalMateName = data.ai_name || data.mate_name;
+ if (finalMateName) {
+ localStorage.setItem('mateName', finalMateName);
+ if (mateName !== finalMateName) setMateName(finalMateName);
+ }
+
+ if (data.category) localStorage.setItem('category', data.category);
+ if (data.title) localStorage.setItem('title', data.title);
+ if (data.subtopic) localStorage.setItem('subtopic', data.subtopic);
+
+ console.log('✅ [Layout Sync] 데이터 동기화 완료:', { mateName: finalMateName, category: data.category });
+ }
+ } catch (err) {
+ console.error('❌ [Layout Sync] 서버 동기화 실패:', err);
+ }
+ };
+
+ useEffect(() => {
+ syncMateName();
+ }, [location.pathname]);
+
+ const getTranslatedValue = (raw) => {
+ if (!raw) return '';
+ const foundKey = Object.keys(t_ko_map).find(k => t_ko_map[k] === raw);
+ let resultText = (foundKey && t_map[foundKey]) ? t_map[foundKey] : raw;
+ return resultText.replaceAll('{{mateName}}', mateName);
+ };
+
+ const getSidebarRoleName = (player) => {
+ const roleId = roleIdMap[player];
+ const category = (localStorage.getItem('category') || '').trim();
+ const title = (localStorage.getItem('title') || '').trim();
+ const subtopic = (localStorage.getItem('subtopic') || '').trim();
+
+ const isAndroid = category === '안드로이드';
+ const isAWS = category === '자율 무기 시스템';
+
+ if (isAndroid) {
+ if (title === '가정') return roleId === 1 ? t_small.title_caregiver_k : roleId === 2 ? t_small.title_mother_l : t_small.title_child_j;
+ if (title === '국가 인공지능 위원회') return roleId === 1 ? t_small.title_industry_rep : roleId === 2 ? t_small.title_consumer_rep : t_small.title_council_rep;
+ if (title === '국제 인류 발전 위원회') return roleId === 1 ? t_small.title_industry_rep : roleId === 2 ? t_small.title_env_rep : t_small.title_consumer_rep;
+ }
+
+ if (isAWS) {
+ if (subtopic === 'AI 알고리즘 공개') return roleId === 1 ? t_small.title_resident : roleId === 2 ? t_small.title_soldier_j : t_small.title_ethics_expert;
+ if (subtopic === 'AWS의 권한') return roleId === 1 ? t_small.title_new_soldier : roleId === 2 ? t_small.title_veteran_soldier : t_small.title_commander;
+ if (subtopic === '사람이 죽지 않는 전쟁') return roleId === 1 ? t_small.title_developer : roleId === 2 ? t_small.title_minister : t_small.title_council_rep;
+ if (subtopic === 'AWS 규제') return roleId === 1 ? t_small.title_advisor : roleId === 2 ? t_small.title_diplomat : t_small.title_ngo_activist;
+ }
+ return '';
+ };
+
useEffect(() => {
- // 로컬스토리지에서 데이터 불러오기
const storedHost = localStorage.getItem('host_id');
const storedMyRole = localStorage.getItem('myrole_id');
const role1UserId = localStorage.getItem('role1_user_id');
@@ -75,377 +131,113 @@ export default function Layout({
setHostId(storedHost);
setMyRoleId(storedMyRole);
setRoleUserMapping({
- role1_user_id: role1UserId,
- role2_user_id: role2UserId,
- role3_user_id: role3UserId,
- });
-
- console.log('📋 Layout 초기화:', {
- hostId: storedHost,
- myRoleId: storedMyRole,
- roleMapping: {
- role1: role1UserId,
- role2: role2UserId,
- role3: role3UserId,
- }
+ role1_user_id: role1UserId, role2_user_id: role2UserId, role3_user_id: role3UserId,
});
- // 윈도우 크기에 따라 zoom 계산 (최소 0.6 보장)
const onResize = () => {
- const widthRatio = window.innerWidth / 1480; // 좌측 사이드바 고려 (220 + 1060 + 여백)
- const heightRatio = window.innerHeight / 800; // 상하 여백 고려
+ const widthRatio = window.innerWidth / 1480;
+ const heightRatio = window.innerHeight / 800;
const scale = Math.min(widthRatio, heightRatio, 1);
- setZoom(Math.max(scale, 0.6)); // 최소 60% 크기 보장
+ setZoom(Math.max(scale, 0.6));
};
onResize();
window.addEventListener('resize', onResize);
return () => window.removeEventListener('resize', onResize);
}, []);
- // 내 음성 세션 상태 업데이트 (실시간)
useEffect(() => {
- const statusInterval = setInterval(() => {
- const currentStatus = voiceManager.getStatus();
- setMyVoiceSessionStatus(currentStatus);
- }, 100); // 100ms마다 업데이트 (빠른 반응)
-
+ const statusInterval = setInterval(() => setMyVoiceSessionStatus(voiceManager.getStatus()), 100);
return () => clearInterval(statusInterval);
}, []);
- // 특정 역할의 음성 상태 가져오기 (내 것은 실시간, 다른 사람은 WebSocket)
const getVoiceStateForRoleWithMyStatus = (roleId) => {
const roleIdStr = String(roleId);
-
- // 내 역할이면 실시간 상태 반환
- if (roleIdStr === myRoleId) {
- return {
- is_speaking: myVoiceSessionStatus.isSpeaking,
- is_mic_on: myVoiceSessionStatus.isConnected,
- nickname: myVoiceSessionStatus.nickname || ''
- };
- }
-
- // 다른 사람 역할이면 WebSocket 상태 반환
+ if (roleIdStr === myRoleId) return { is_speaking: myVoiceSessionStatus.isSpeaking, is_mic_on: myVoiceSessionStatus.isConnected, nickname: myVoiceSessionStatus.nickname || '' };
return getVoiceStateForRole(roleId);
};
- // allowScroll 페이지(Game09 등): 화면 상단부터 자연스럽게 스크롤되도록 viewport 정렬만 조정
- // (position/inset/transform을 덮어써서 레이아웃이 깨지지 않게 최소 override만 적용)
- const viewportOverride = allowScroll
- ? {
- overflowY: "auto",
- alignItems: "flex-start",
- justifyContent: "center",
- paddingTop: 24,
- paddingBottom: 24,
- }
- : {};
- // allowScroll 페이지: width는 반응형(100% + maxWidth)로 두고, transform은 건드리지 않음(zoom scale 유지)
- const stageOverride = allowScroll
- ? {
- width: "100%",
- maxWidth: "1060px",
- minHeight: "720px",
- }
- : {};
+ const viewportOverride = allowScroll ? { overflowY: "auto", alignItems: "flex-start", justifyContent: "center", paddingTop: 24, paddingBottom: 24 } : {};
+ const stageOverride = allowScroll ? { width: "100%", maxWidth: "1060px", minHeight: "720px" } : {};
+
return (
<>
- {/* Profile Popup as Component */}
{!nodescription && openProfile && (
-
setOpenProfile(null)}
- >
-
e.stopPropagation()}
- >
- {openProfile === '1P' &&
-
}
- {openProfile === '2P' &&
-
}
- {openProfile === '3P' &&
-
}
- 
setOpenProfile(null)}
- />
+ setOpenProfile(null)}>
+
e.stopPropagation()}>
+ {openProfile === '1P' &&
}
+ {openProfile === '2P' &&
}
+ {openProfile === '3P' &&
}
+
setOpenProfile(null)} />
+ {showBackButton && (
+
)}
- {hostmessage && hostId === myRoleId && (
-
)}
-{/* {popupStep && (
-
-
-
-)} */}
- {!nodescription && (
-
-
- )}
-