885 lines
33 KiB
TypeScript
885 lines
33 KiB
TypeScript
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
|
import { AppShell } from "../components/shell/AppShell";
|
|
import {
|
|
Badge,
|
|
Button,
|
|
Field,
|
|
Icon,
|
|
Input,
|
|
Kicker,
|
|
Panel,
|
|
type IconName,
|
|
} from "../components/ui";
|
|
import { roleLabel, useAuth } from "../lib/auth";
|
|
import {
|
|
adminApi,
|
|
adminEngineApi,
|
|
userApi,
|
|
type AdminHealthResponse,
|
|
type AdminEngineConfigResponse,
|
|
type NotificationPreferences,
|
|
type UserPreferencesResponse,
|
|
type UserProfileResponse,
|
|
type VoicePresetResponse,
|
|
} from "../lib/api";
|
|
import { Toggle } from "./settings/Toggle";
|
|
import { useTheme } from "./settings/useTheme";
|
|
import "./settings/settings.css";
|
|
|
|
interface NavItem {
|
|
id: string;
|
|
label: string;
|
|
icon: IconName;
|
|
adminOnly?: boolean;
|
|
}
|
|
|
|
const ENGINE_MODE_LABEL: Record<string, string> = {
|
|
claude_cli: "Claude CLI 게이트웨이",
|
|
messages_api: "클라우드 연결",
|
|
claude_api: "Anthropic API",
|
|
openai: "OpenAI 호환",
|
|
solar: "Solar",
|
|
};
|
|
const ENGINE_MODES = ["claude_cli", "claude_api", "openai", "solar"] as const;
|
|
|
|
function SpeakerIcon({ size = 15 }: { size?: number }) {
|
|
return (
|
|
<svg
|
|
width={size}
|
|
height={size}
|
|
viewBox="0 0 24 24"
|
|
fill="currentColor"
|
|
stroke="none"
|
|
aria-hidden="true"
|
|
>
|
|
<polygon points="6 4 19 12 6 20" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
function healthStatusLabel(status: string | undefined): string {
|
|
if (status === "ok") return "정상";
|
|
if (status === "degraded") return "제한 운영";
|
|
if (status === "down") return "중단";
|
|
return "확인 중";
|
|
}
|
|
|
|
function SettingsLoadingState({
|
|
children,
|
|
testId,
|
|
}: {
|
|
children: string;
|
|
testId: string;
|
|
}) {
|
|
return (
|
|
<div className="vg-set__state" role="status" data-testid={testId}>
|
|
<span className="vg-set__state-dot" aria-hidden="true" />
|
|
<span>{children}</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* 로딩 스켈레톤 — 회색 박스 반복 대신 섹션 형태(라벨/행 윤곽)를 미리 그려
|
|
* 미완성·오류로 오인되지 않게 한다. 로딩 testId·role 은 그대로 유지한다.
|
|
*/
|
|
function SettingsSkeleton({
|
|
children,
|
|
testId,
|
|
variant = "lines",
|
|
}: {
|
|
children: string;
|
|
testId: string;
|
|
variant?: "lines" | "rows" | "voice";
|
|
}) {
|
|
return (
|
|
<div
|
|
className={`vg-set__skel vg-set__skel--${variant}`}
|
|
role="status"
|
|
aria-live="polite"
|
|
data-testid={testId}
|
|
>
|
|
<span className="vg-set__skel-sr">{children}</span>
|
|
{variant === "rows" ? (
|
|
<>
|
|
<span className="vg-set__skel-row" aria-hidden="true">
|
|
<span className="vg-set__skel-bar" />
|
|
<span className="vg-set__skel-pill" />
|
|
</span>
|
|
<span className="vg-set__skel-row" aria-hidden="true">
|
|
<span className="vg-set__skel-bar" />
|
|
<span className="vg-set__skel-pill" />
|
|
</span>
|
|
</>
|
|
) : variant === "voice" ? (
|
|
<>
|
|
<span className="vg-set__skel-card" aria-hidden="true" />
|
|
<span className="vg-set__skel-card" aria-hidden="true" />
|
|
</>
|
|
) : (
|
|
<>
|
|
<span className="vg-set__skel-line vg-set__skel-line--label" aria-hidden="true" />
|
|
<span className="vg-set__skel-line" aria-hidden="true" />
|
|
<span className="vg-set__skel-line vg-set__skel-line--short" aria-hidden="true" />
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const DEFAULT_NOTIFICATION_PREFERENCES: NotificationPreferences = {
|
|
session_done: true,
|
|
safety_signal: true,
|
|
learner_progress: true,
|
|
product_news: false,
|
|
};
|
|
|
|
function completeNotificationPreferences(
|
|
preferences?: NotificationPreferences | null,
|
|
): NotificationPreferences {
|
|
return {
|
|
...DEFAULT_NOTIFICATION_PREFERENCES,
|
|
...preferences,
|
|
};
|
|
}
|
|
|
|
export default function Settings() {
|
|
const { user } = useAuth();
|
|
const role = user?.role ?? "learner";
|
|
const isAdmin = role === "admin";
|
|
const [dark, setDark] = useTheme();
|
|
const [activeSection, setActiveSection] = useState("account");
|
|
|
|
const [profile, setProfile] = useState<UserProfileResponse | null>(null);
|
|
const [displayName, setDisplayName] = useState(user?.name ?? "");
|
|
const [affiliation, setAffiliation] = useState("");
|
|
const [preferences, setPreferences] = useState<UserPreferencesResponse | null>(null);
|
|
const [voicePresets, setVoicePresets] = useState<VoicePresetResponse[]>([]);
|
|
const [engineConfig, setEngineConfig] = useState<AdminEngineConfigResponse | null>(null);
|
|
const [adminHealth, setAdminHealth] = useState<AdminHealthResponse | null>(null);
|
|
const [profileReady, setProfileReady] = useState(false);
|
|
const [preferencesReady, setPreferencesReady] = useState(false);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [savedKey, setSavedKey] = useState<string | null>(null);
|
|
const savedTimer = useRef<number | null>(null);
|
|
const displayNameInputRef = useRef<HTMLInputElement | null>(null);
|
|
const affiliationInputRef = useRef<HTMLInputElement | null>(null);
|
|
const engineUrlInputRef = useRef<HTMLInputElement | null>(null);
|
|
const engineModelInputRef = useRef<HTMLInputElement | null>(null);
|
|
const displayNameValueRef = useRef(user?.name ?? "");
|
|
const affiliationValueRef = useRef("");
|
|
const displayNameDirtyRef = useRef(false);
|
|
const affiliationDirtyRef = useRef(false);
|
|
const engineConfigRef = useRef<AdminEngineConfigResponse | null>(null);
|
|
|
|
useEffect(() => {
|
|
document.body.setAttribute("data-page", "settings");
|
|
return () => {
|
|
document.body.removeAttribute("data-page");
|
|
};
|
|
}, []);
|
|
|
|
const flashSaved = (key: string) => {
|
|
setSavedKey(key);
|
|
if (savedTimer.current) window.clearTimeout(savedTimer.current);
|
|
savedTimer.current = window.setTimeout(() => setSavedKey(null), 2400);
|
|
};
|
|
|
|
const loadSettings = useCallback(async () => {
|
|
setLoading(true);
|
|
setError(null);
|
|
setProfileReady(false);
|
|
setPreferencesReady(false);
|
|
setPreferences(null);
|
|
setVoicePresets([]);
|
|
setEngineConfig(null);
|
|
engineConfigRef.current = null;
|
|
try {
|
|
const [nextProfile, nextPrefs, presets, nextEngine] = await Promise.all([
|
|
userApi.me(),
|
|
userApi.preferences(),
|
|
userApi.voicePresets(),
|
|
isAdmin ? adminEngineApi.get() : Promise.resolve(null),
|
|
]);
|
|
setProfile(nextProfile);
|
|
setProfileReady(true);
|
|
if (!displayNameDirtyRef.current) {
|
|
setDisplayName(nextProfile.display_name);
|
|
displayNameValueRef.current = nextProfile.display_name;
|
|
}
|
|
if (!affiliationDirtyRef.current) {
|
|
setAffiliation(nextProfile.affiliation);
|
|
affiliationValueRef.current = nextProfile.affiliation;
|
|
}
|
|
setPreferences(nextPrefs);
|
|
setPreferencesReady(true);
|
|
setDark(nextPrefs.theme === "dark");
|
|
setVoicePresets(presets);
|
|
if (nextEngine) {
|
|
engineConfigRef.current = nextEngine;
|
|
setEngineConfig(nextEngine);
|
|
}
|
|
if (isAdmin) {
|
|
void adminApi.health()
|
|
.then(setAdminHealth)
|
|
.catch(() => setAdminHealth(null));
|
|
}
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : "설정을 불러오지 못했습니다.");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, [isAdmin, setDark]);
|
|
|
|
useEffect(() => {
|
|
void loadSettings();
|
|
}, [loadSettings]);
|
|
|
|
const navItems: NavItem[] = useMemo(() => {
|
|
const base: NavItem[] = [
|
|
{ id: "account", label: "계정", icon: "users" },
|
|
{ id: "appearance", label: "테마", icon: "settings" },
|
|
{ id: "notify", label: "알림", icon: "info" },
|
|
{ id: "voice", label: "음성", icon: "mic" },
|
|
];
|
|
if (isAdmin) {
|
|
base.splice(1, 0, { id: "engine", label: "AI 운영", icon: "shield", adminOnly: true });
|
|
}
|
|
return base;
|
|
}, [isAdmin]);
|
|
|
|
useEffect(() => {
|
|
const observer = new IntersectionObserver(
|
|
(entries) => {
|
|
const visible = entries
|
|
.filter((entry) => entry.isIntersecting)
|
|
.sort((a, b) => b.intersectionRatio - a.intersectionRatio)[0];
|
|
if (visible?.target.id) {
|
|
setActiveSection(visible.target.id.replace(/^set-/, ""));
|
|
}
|
|
},
|
|
{
|
|
rootMargin: "-18% 0px -62% 0px",
|
|
threshold: [0.2, 0.55],
|
|
},
|
|
);
|
|
|
|
for (const item of navItems) {
|
|
const section = document.getElementById(`set-${item.id}`);
|
|
if (section) observer.observe(section);
|
|
}
|
|
|
|
return () => observer.disconnect();
|
|
}, [navItems]);
|
|
|
|
const visibleNotifications = useMemo(
|
|
() => [
|
|
{
|
|
id: "session_done",
|
|
label: "세션 완료",
|
|
hint: "학습 회기가 종료되면 알려줍니다.",
|
|
},
|
|
{
|
|
id: "safety_signal",
|
|
label: "안전 신호",
|
|
hint: "위기 신호가 감지되면 우선 알림을 표시합니다.",
|
|
},
|
|
{
|
|
id: "learner_progress",
|
|
label: "담당 학습자 진행",
|
|
hint: "교수자와 관리자에게만 표시됩니다.",
|
|
roles: ["teacher", "admin"],
|
|
},
|
|
{
|
|
id: "product_news",
|
|
label: "제품 소식",
|
|
hint: "기능 변경과 연구 운영 공지를 받습니다.",
|
|
},
|
|
].filter((item) => !item.roles || item.roles.includes(role)),
|
|
[role],
|
|
);
|
|
|
|
const goSection = (id: string) => {
|
|
setActiveSection(id);
|
|
document.getElementById(`set-${id}`)?.scrollIntoView({ behavior: "smooth", block: "start" });
|
|
};
|
|
|
|
const updateEngineConfig = (patch: Partial<AdminEngineConfigResponse>) => {
|
|
if (!engineConfigRef.current) return;
|
|
engineConfigRef.current = { ...engineConfigRef.current, ...patch };
|
|
setEngineConfig((cur) => (cur ? { ...cur, ...patch } : cur));
|
|
};
|
|
|
|
const saveProfile = async () => {
|
|
if (!profileReady) return;
|
|
const next = await userApi.updateMe({
|
|
display_name: displayNameValueRef.current,
|
|
affiliation: affiliationValueRef.current,
|
|
});
|
|
setProfile(next);
|
|
setDisplayName(next.display_name);
|
|
setAffiliation(next.affiliation);
|
|
displayNameValueRef.current = next.display_name;
|
|
affiliationValueRef.current = next.affiliation;
|
|
displayNameDirtyRef.current = false;
|
|
affiliationDirtyRef.current = false;
|
|
flashSaved("account");
|
|
};
|
|
|
|
const savePreferences = async (key: string) => {
|
|
if (!preferencesReady || !preferences) return;
|
|
const notifications = completeNotificationPreferences(preferences.notifications);
|
|
const next = await userApi.updatePreferences({
|
|
theme: dark ? "dark" : "light",
|
|
voice_preset_id: preferences.voice_preset_id,
|
|
voice_rate: preferences.voice_rate,
|
|
notifications,
|
|
});
|
|
setPreferences(next);
|
|
flashSaved(key);
|
|
};
|
|
|
|
const saveEngine = async () => {
|
|
const currentEngine = engineConfigRef.current;
|
|
if (!currentEngine) return;
|
|
const selectedMode =
|
|
document.querySelector<HTMLElement>("#set-engine [data-engine-mode][aria-checked='true']")
|
|
?.dataset.engineMode ?? currentEngine.engine_mode;
|
|
const next = await adminEngineApi.update({
|
|
engine_mode: selectedMode,
|
|
engine_url: engineUrlInputRef.current?.value ?? currentEngine.engine_url,
|
|
model: engineModelInputRef.current?.value ?? currentEngine.model,
|
|
});
|
|
engineConfigRef.current = next;
|
|
setEngineConfig(next);
|
|
try {
|
|
setAdminHealth(await adminApi.health());
|
|
} catch {
|
|
setAdminHealth(null);
|
|
}
|
|
flashSaved("engine");
|
|
};
|
|
|
|
const updateNotification = (key: keyof NotificationPreferences, value: boolean) => {
|
|
setPreferences((cur) => cur ? ({
|
|
...cur,
|
|
notifications: {
|
|
...completeNotificationPreferences(cur.notifications),
|
|
[key]: value,
|
|
},
|
|
}) : cur);
|
|
};
|
|
|
|
const accountName = displayName || profile?.email || user?.name || user?.email || "사용자";
|
|
const accountEmail = profile?.email ?? user?.email ?? "";
|
|
const initials = accountName.trim().slice(0, 1).toUpperCase();
|
|
const engineHasRequiredFields = engineConfig
|
|
? engineConfig.engine_url.trim().length > 0 && engineConfig.model.trim().length > 0
|
|
: false;
|
|
const engineStorageLabel = !engineConfig
|
|
? "확인 중"
|
|
: engineConfig.durable
|
|
? "DB 저장"
|
|
: "런타임 적용";
|
|
const engineService = adminHealth?.services.find((service) => service.key === "engine");
|
|
const engineServiceStatus = engineService?.status ?? "degraded";
|
|
const notificationPreferences = completeNotificationPreferences(preferences?.notifications);
|
|
|
|
return (
|
|
<AppShell contextLabel="설정" hideNav hideTopbar bleed>
|
|
{error ? (
|
|
<div className="vg-set__callout vg-set__callout--warn" role="alert">
|
|
<span className="vg-set__callout-ico">
|
|
<Icon name="alert" size={18} />
|
|
</span>
|
|
<span className="vg-set__callout-text">{error}</span>
|
|
</div>
|
|
) : null}
|
|
|
|
<div className="vg-set" aria-busy={loading}>
|
|
<aside className="vg-set__rail">
|
|
<div className="vg-set__rail-title">
|
|
<span className="vg-set__rail-mark" aria-hidden="true">
|
|
<Icon name="settings" size={24} strokeWidth={2} />
|
|
</span>
|
|
<div>
|
|
<h1>설정</h1>
|
|
<p>계정과 학습 환경</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="vg-set__rail-card" aria-label="계정 요약">
|
|
<div className="vg-set__rail-avatar" aria-hidden="true">
|
|
{initials}
|
|
</div>
|
|
<div className="vg-set__rail-copy">
|
|
<div className="vg-set__rail-name">{accountName}</div>
|
|
<div className="vg-set__rail-email">{accountEmail}</div>
|
|
<div className="vg-set__rail-badges">
|
|
<Badge tone="accent">{roleLabel(role)}</Badge>
|
|
{affiliation ? <Badge tone="neutral">{affiliation}</Badge> : null}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<nav className="vg-set__nav" aria-label="설정 섹션">
|
|
<div className="vg-set__nav-kicker">SECTIONS</div>
|
|
{navItems.map((item) => (
|
|
<button
|
|
key={item.id}
|
|
type="button"
|
|
className={
|
|
"vg-set__nav-item" + (activeSection === item.id ? " is-active" : "")
|
|
}
|
|
aria-current={activeSection === item.id ? "location" : undefined}
|
|
onClick={() => goSection(item.id)}
|
|
>
|
|
<Icon name={item.icon} size={17} />
|
|
<span>{item.label}</span>
|
|
</button>
|
|
))}
|
|
</nav>
|
|
|
|
<div className="vg-set__rail-status" aria-label="설정 상태">
|
|
<span className="vg-set__pill">{roleLabel(role)}</span>
|
|
{isAdmin ? (
|
|
<span className={`vg-set__pill vg-set__pill--${engineServiceStatus}`}>
|
|
AI {healthStatusLabel(engineService?.status)}
|
|
</span>
|
|
) : null}
|
|
</div>
|
|
</aside>
|
|
|
|
<div className="vg-set__forms">
|
|
<Panel id="set-account" className="vg-set__group vg-set__group--wide">
|
|
<div className="vg-set__group-head">
|
|
<div>
|
|
<div className="vg-set__group-title">계정</div>
|
|
<div className="vg-set__group-desc">로그인 계정과 표시 정보를 관리합니다.</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="vg-set__profile">
|
|
<div className="vg-set__avatar" aria-hidden="true">
|
|
{initials}
|
|
</div>
|
|
<div className="vg-set__profile-meta">
|
|
<div className="n">{accountName}</div>
|
|
<div className="e">{accountEmail}</div>
|
|
<div className="badges">
|
|
<Badge tone="accent">{roleLabel(role)}</Badge>
|
|
{affiliation ? <Badge tone="neutral">{affiliation}</Badge> : null}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="vg-set__field-grid vg-set__field-grid--account">
|
|
<div className="vg-set__field">
|
|
<div className="vg-set__field-copy">
|
|
<span className="l">표시 이름</span>
|
|
<span className="h">교수자와 운영자가 확인하는 이름입니다.</span>
|
|
</div>
|
|
<Field>
|
|
<Input
|
|
ref={displayNameInputRef}
|
|
value={displayName}
|
|
onChange={(event) => {
|
|
displayNameDirtyRef.current = true;
|
|
displayNameValueRef.current = event.target.value;
|
|
setDisplayName(event.target.value);
|
|
}}
|
|
placeholder="표시할 이름을 입력하세요"
|
|
aria-label="표시 이름"
|
|
/>
|
|
</Field>
|
|
</div>
|
|
|
|
<div className="vg-set__field">
|
|
<div className="vg-set__field-copy">
|
|
<span className="l">이메일</span>
|
|
<span className="h">로그인으로 확인된 주소입니다.</span>
|
|
</div>
|
|
<Field>
|
|
<Input
|
|
value={profile?.email ?? ""}
|
|
disabled
|
|
placeholder="로그인 계정 이메일"
|
|
aria-label="이메일"
|
|
/>
|
|
</Field>
|
|
</div>
|
|
|
|
<div className="vg-set__field vg-set__field--wide">
|
|
<div className="vg-set__field-copy">
|
|
<span className="l">소속</span>
|
|
<span className="h">강의나 연구 운영에서 표시할 소속입니다.</span>
|
|
</div>
|
|
<Field>
|
|
<Input
|
|
ref={affiliationInputRef}
|
|
value={affiliation}
|
|
onChange={(event) => {
|
|
affiliationDirtyRef.current = true;
|
|
affiliationValueRef.current = event.target.value;
|
|
setAffiliation(event.target.value);
|
|
}}
|
|
placeholder="소속을 입력하세요"
|
|
aria-label="소속"
|
|
/>
|
|
</Field>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="vg-set__foot">
|
|
{savedKey === "account" ? (
|
|
<span className="vg-set__saved">
|
|
<Icon name="check" size={15} />
|
|
저장됨
|
|
</span>
|
|
) : null}
|
|
<Button
|
|
size="sm"
|
|
leading={<Icon name="check" size={14} />}
|
|
onClick={() => void saveProfile()}
|
|
disabled={loading || !profileReady}
|
|
>
|
|
저장
|
|
</Button>
|
|
</div>
|
|
</Panel>
|
|
|
|
{isAdmin ? (
|
|
<Panel
|
|
id="set-engine"
|
|
className="vg-set__group vg-set__group--wide vg-set__group--engine"
|
|
>
|
|
<div className="vg-set__group-head vg-set__group-head--split">
|
|
<div>
|
|
<Kicker>관리자</Kicker>
|
|
<div className="vg-set__group-title vg-set__group-title--kicker">
|
|
AI 운영
|
|
</div>
|
|
<div className="vg-set__group-desc">
|
|
상담 응답 생성에 사용할 운영 연결과 기본 모델을 관리합니다.
|
|
</div>
|
|
</div>
|
|
<div className={`vg-set__ops vg-set__ops--${engineServiceStatus}`} role="status">
|
|
<span className="vg-set__ops-dot" aria-hidden="true" />
|
|
<div>
|
|
<b>응답 생성 {healthStatusLabel(engineService?.status)}</b>
|
|
<span>
|
|
{engineService
|
|
? `${engineService.detail} · ${engineService.metric}`
|
|
: "운영 상태를 확인하는 중입니다."}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{engineConfig ? (
|
|
<>
|
|
<div className="vg-set__engine-grid">
|
|
<div className="vg-set__control-block">
|
|
<div className="vg-set__field-copy">
|
|
<span className="l">운영 방식</span>
|
|
<span className="h">응답 생성 연결 방식을 선택합니다.</span>
|
|
</div>
|
|
<div className="vg-set__seg" role="radiogroup" aria-label="AI 운영 방식">
|
|
{ENGINE_MODES.map((mode) => (
|
|
<button
|
|
key={mode}
|
|
type="button"
|
|
role="radio"
|
|
aria-checked={engineConfig.engine_mode === mode}
|
|
data-engine-mode={mode}
|
|
className={
|
|
"vg-set__seg-btn" +
|
|
(engineConfig.engine_mode === mode ? " is-active" : "")
|
|
}
|
|
onClick={() => updateEngineConfig({ engine_mode: mode })}
|
|
>
|
|
{ENGINE_MODE_LABEL[mode] ?? mode}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="vg-set__field-grid vg-set__field-grid--engine">
|
|
<div className="vg-set__field">
|
|
<div className="vg-set__field-copy">
|
|
<span className="l">연결 주소</span>
|
|
<span className="h">응답 생성 서비스의 연결 주소입니다.</span>
|
|
</div>
|
|
<Field>
|
|
<Input
|
|
ref={engineUrlInputRef}
|
|
value={engineConfig.engine_url}
|
|
onChange={(event) =>
|
|
updateEngineConfig({ engine_url: event.target.value })
|
|
}
|
|
placeholder="운영 연결 주소를 입력하세요"
|
|
aria-label="AI 연결 주소"
|
|
/>
|
|
</Field>
|
|
</div>
|
|
|
|
<div className="vg-set__field">
|
|
<div className="vg-set__field-copy">
|
|
<span className="l">모델</span>
|
|
<span className="h">응답 생성에 사용할 기본 모델 이름입니다.</span>
|
|
</div>
|
|
<Field>
|
|
<Input
|
|
ref={engineModelInputRef}
|
|
value={engineConfig.model}
|
|
onChange={(event) =>
|
|
updateEngineConfig({ model: event.target.value })
|
|
}
|
|
placeholder="기본 모델 이름을 입력하세요"
|
|
aria-label="모델"
|
|
/>
|
|
</Field>
|
|
<div className="vg-set__meta">
|
|
<span>최근 변경자: {engineConfig.updated_by ?? "-"}</span>
|
|
<span>저장 상태: {engineStorageLabel}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="vg-set__foot">
|
|
{savedKey === "engine" ? (
|
|
<span className="vg-set__saved">
|
|
<Icon name="check" size={15} />
|
|
저장됨
|
|
</span>
|
|
) : null}
|
|
<Button
|
|
size="sm"
|
|
leading={<Icon name="check" size={14} />}
|
|
onClick={() => void saveEngine()}
|
|
disabled={loading || !engineHasRequiredFields}
|
|
>
|
|
운영 설정 저장
|
|
</Button>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<SettingsSkeleton testId="settings-engine-loading" variant="lines">
|
|
서버 AI 운영 설정을 불러오는 중입니다.
|
|
</SettingsSkeleton>
|
|
)}
|
|
</Panel>
|
|
) : null}
|
|
|
|
<Panel id="set-appearance" className="vg-set__group vg-set__group--compact">
|
|
<div className="vg-set__group-head">
|
|
<div>
|
|
<div className="vg-set__group-title">테마</div>
|
|
<div className="vg-set__group-desc">화면 밝기를 설정합니다.</div>
|
|
</div>
|
|
</div>
|
|
{preferences ? (
|
|
<>
|
|
<div className="vg-set__opt">
|
|
<div className="vg-set__opt-text">
|
|
<div className="l">다크 모드</div>
|
|
<div className="h">현재 기기와 브라우저에 적용됩니다.</div>
|
|
</div>
|
|
<span className="vg-set__toggle-line">
|
|
<Icon name={dark ? "moon" : "sun"} size={16} />
|
|
<Toggle checked={dark} onChange={setDark} label="다크 모드" />
|
|
</span>
|
|
</div>
|
|
<div className="vg-set__foot">
|
|
{savedKey === "appearance" ? (
|
|
<span className="vg-set__saved">
|
|
<Icon name="check" size={15} />
|
|
저장됨
|
|
</span>
|
|
) : null}
|
|
<Button
|
|
size="sm"
|
|
leading={<Icon name="check" size={14} />}
|
|
onClick={() => void savePreferences("appearance")}
|
|
disabled={loading || !preferencesReady}
|
|
>
|
|
저장
|
|
</Button>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<SettingsSkeleton testId="settings-preferences-loading" variant="rows">
|
|
서버 환경 설정을 불러오는 중입니다.
|
|
</SettingsSkeleton>
|
|
)}
|
|
</Panel>
|
|
|
|
<Panel id="set-voice" className="vg-set__group vg-set__group--wide">
|
|
<div className="vg-set__group-head">
|
|
<div>
|
|
<div className="vg-set__group-title">음성</div>
|
|
<div className="vg-set__group-desc">상담 연습에 사용할 음성 프리셋을 선택합니다.</div>
|
|
</div>
|
|
</div>
|
|
|
|
{preferences ? (
|
|
voicePresets.length > 0 ? (
|
|
<>
|
|
<div className="vg-set__voicelist" role="radiogroup" aria-label="음성 프리셋">
|
|
{voicePresets.map((preset) => {
|
|
const selected = preferences.voice_preset_id === preset.id;
|
|
return (
|
|
<button
|
|
key={preset.id}
|
|
type="button"
|
|
role="radio"
|
|
aria-checked={selected}
|
|
className={"vg-set__voice" + (selected ? " is-on" : "")}
|
|
onClick={() =>
|
|
setPreferences((cur) =>
|
|
cur ? { ...cur, voice_preset_id: preset.id } : cur,
|
|
)
|
|
}
|
|
>
|
|
<span className="vg-set__voice-rad" aria-hidden="true" />
|
|
<span className="vg-set__voice-info">
|
|
<span className="vn">
|
|
{preset.name} · {preset.voice_id}
|
|
</span>
|
|
<span className="vd">
|
|
{preset.desc} · {preset.persona_hint}
|
|
</span>
|
|
</span>
|
|
<span
|
|
className="vg-set__voice-play"
|
|
role="presentation"
|
|
aria-hidden="true"
|
|
>
|
|
<SpeakerIcon />
|
|
</span>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
<div className="vg-set__range-row">
|
|
<div className="vg-set__field-copy">
|
|
<span className="l">말하기 속도</span>
|
|
<span className="h">기본 발화 속도입니다.</span>
|
|
</div>
|
|
<div className="vg-set__range-control">
|
|
<input
|
|
type="range"
|
|
min={0.8}
|
|
max={1.2}
|
|
step={0.02}
|
|
value={preferences.voice_rate}
|
|
onChange={(event) =>
|
|
setPreferences((cur) =>
|
|
cur
|
|
? {
|
|
...cur,
|
|
voice_rate: Number(event.target.value),
|
|
}
|
|
: cur,
|
|
)
|
|
}
|
|
aria-label="말하기 속도"
|
|
/>
|
|
<div className="vg-set__meta vg-set__meta--range">
|
|
<span>0.8x</span>
|
|
<span>{preferences.voice_rate.toFixed(2)}x</span>
|
|
<span>1.2x</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="vg-set__foot">
|
|
{savedKey === "voice" ? (
|
|
<span className="vg-set__saved">
|
|
<Icon name="check" size={15} />
|
|
저장됨
|
|
</span>
|
|
) : null}
|
|
<Button
|
|
size="sm"
|
|
leading={<Icon name="check" size={14} />}
|
|
onClick={() => void savePreferences("voice")}
|
|
disabled={loading || !preferencesReady}
|
|
>
|
|
음성 저장
|
|
</Button>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<SettingsLoadingState testId="settings-voice-empty">
|
|
서버에 등록된 음성 프리셋이 없습니다.
|
|
</SettingsLoadingState>
|
|
)
|
|
) : (
|
|
<SettingsSkeleton testId="settings-voice-loading" variant="voice">
|
|
서버 음성 설정을 불러오는 중입니다.
|
|
</SettingsSkeleton>
|
|
)}
|
|
</Panel>
|
|
|
|
<Panel id="set-notify" className="vg-set__group vg-set__group--compact">
|
|
<div className="vg-set__group-head">
|
|
<div>
|
|
<div className="vg-set__group-title">알림</div>
|
|
<div className="vg-set__group-desc">역할에 맞는 알림만 표시됩니다.</div>
|
|
</div>
|
|
</div>
|
|
|
|
{preferences ? (
|
|
<>
|
|
<div className="vg-set__opt-grid">
|
|
{visibleNotifications.map((item) => (
|
|
<div className="vg-set__opt" key={item.id}>
|
|
<div className="vg-set__opt-text">
|
|
<div className="l">{item.label}</div>
|
|
<div className="h">{item.hint}</div>
|
|
</div>
|
|
<Toggle
|
|
checked={Boolean(
|
|
notificationPreferences[item.id as keyof NotificationPreferences],
|
|
)}
|
|
onChange={(next) =>
|
|
updateNotification(item.id as keyof NotificationPreferences, next)
|
|
}
|
|
label={item.label}
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="vg-set__foot">
|
|
{savedKey === "notify" ? (
|
|
<span className="vg-set__saved">
|
|
<Icon name="check" size={15} />
|
|
저장됨
|
|
</span>
|
|
) : null}
|
|
<Button
|
|
size="sm"
|
|
leading={<Icon name="check" size={14} />}
|
|
onClick={() => void savePreferences("notify")}
|
|
disabled={loading || !preferencesReady}
|
|
>
|
|
알림 저장
|
|
</Button>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<SettingsSkeleton testId="settings-notify-loading" variant="rows">
|
|
서버 알림 설정을 불러오는 중입니다.
|
|
</SettingsSkeleton>
|
|
)}
|
|
</Panel>
|
|
</div>
|
|
</div>
|
|
</AppShell>
|
|
);
|
|
}
|