Compare commits
34 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 644e1b23b9 | |||
| 0d3cdfbe0c | |||
| 53c6ada470 | |||
| 662b64afb1 | |||
| b674f92a41 | |||
| 8e82e10234 | |||
| d42f07ec6f | |||
| 8bbcb35998 | |||
| f1f6df8b1c | |||
| 57923d7463 | |||
| a88c82fd96 | |||
| 25099fb5de | |||
| 4d55d2f950 | |||
| 73a0820b1d | |||
| c813325b54 | |||
| d5d15acf5f | |||
| 2a3e2ead65 | |||
| 4869dbe4c1 | |||
| 5d2c93dd40 | |||
| 4c37717483 | |||
| 604da5d6e1 | |||
| 4b2e25d385 | |||
| def692a28b | |||
| ab40abf5b3 | |||
| 97a780f661 | |||
| 4925adc07b | |||
| f67ddb7bec | |||
| e63b1c6f43 | |||
| 6d64337467 | |||
| b581ee59d3 | |||
| 705ffeb490 | |||
| 21952d2fd6 | |||
| a940e02f75 | |||
| d682e9a382 |
@@ -1,164 +0,0 @@
|
|||||||
const { test } = require('node:test');
|
|
||||||
const assert = require('node:assert/strict');
|
|
||||||
const fs = require('node:fs');
|
|
||||||
const vm = require('node:vm');
|
|
||||||
const ts = require('typescript');
|
|
||||||
const React = require('react');
|
|
||||||
|
|
||||||
const source = ts.createSourceFile('SettingsPage.tsx', fs.readFileSync(require.resolve('../src/pages/settings/SettingsPage.tsx'), 'utf8'), ts.ScriptTarget.Latest, true, ts.ScriptKind.TSX);
|
|
||||||
const constants = source.statements.filter(node => ts.isVariableStatement(node) && ['AI_MODEL_DEFAULTS', 'AI_MODEL_OPTIONS', 'CUSTOM_AI_MODEL', 'AI_PROVIDER_LABELS', 'DEFAULT_QWEN_ENDPOINT'].includes(node.declarationList.declarations[0].name.getText(source)));
|
|
||||||
function compile(code, globals = {}) {
|
|
||||||
const exports = {};
|
|
||||||
vm.runInNewContext(ts.transpileModule(code, { compilerOptions: { module: ts.ModuleKind.CommonJS, target: ts.ScriptTarget.ES2022, jsx: ts.JsxEmit.ReactJSX } }).outputText, { exports, require, ...globals });
|
|
||||||
return exports;
|
|
||||||
}
|
|
||||||
const helpers = source.statements.filter(node => ts.isFunctionDeclaration(node) && ['aiSettingDraft', 'aiSettingDrafts'].includes(node.name?.text));
|
|
||||||
const catalogs = [...constants, ...helpers].map(node => `export ${node.getText(source)}`).join('\n');
|
|
||||||
const { AI_MODEL_OPTIONS, AI_MODEL_DEFAULTS, CUSTOM_AI_MODEL, aiSettingDrafts } = compile(catalogs);
|
|
||||||
function find(node, predicate) {
|
|
||||||
if (predicate(node)) return node;
|
|
||||||
return ts.forEachChild(node, child => find(child, predicate));
|
|
||||||
}
|
|
||||||
const section = find(source, node => ts.isJsxElement(node) && node.openingElement.tagName.getText(source) === 'section' && node.openingElement.attributes.getText(source).includes('border-t border-[#e2e8f0] pt-5') && node.getText(source).includes('AI 공급자'));
|
|
||||||
function controls(provider, model, custom = false, configured = true) {
|
|
||||||
const state = { aiProvider: provider, drafts: aiSettingDrafts() };
|
|
||||||
Object.assign(state.drafts[provider], { model, customModel: custom });
|
|
||||||
for (const [name, field] of [['aiModel', 'model'], ['aiCustomModel', 'customModel'], ['aiApiKey', 'apiKey'], ['aiEndpointUrl', 'endpointUrl']]) {
|
|
||||||
Object.defineProperty(state, name, { enumerable: true, get: () => state.drafts[state.aiProvider][field] });
|
|
||||||
}
|
|
||||||
const context = {
|
|
||||||
aiSettingLoading: false, saving: false, aiEndpointUrl: 'https://example.test', aiApiKey: '', aiHasApiKey: false, aiConfiguredProvider: null,
|
|
||||||
aiCopilotConfigured: configured,
|
|
||||||
DEFAULT_QWEN_ENDPOINT: 'https://example.test', KeyRound: () => null,
|
|
||||||
setAiProvider(value) { state.aiProvider = value; }, setAiModel(value) { state.drafts[state.aiProvider].model = value; },
|
|
||||||
setAiCustomModel(value) { state.drafts[state.aiProvider].customModel = value; },
|
|
||||||
setAiApiKey(value) { state.drafts[state.aiProvider].apiKey = value; },
|
|
||||||
setAiEndpointUrl(value) { state.drafts[state.aiProvider].endpointUrl = value; }, setError() {},
|
|
||||||
};
|
|
||||||
const render = () => compile(`${catalogs}\nexport const tree = (${section.getText(source)});`, { ...context, ...state }).tree;
|
|
||||||
return { state, render };
|
|
||||||
}
|
|
||||||
function elements(root, predicate) {
|
|
||||||
if (!React.isValidElement(root)) return [];
|
|
||||||
return [...(predicate(root) ? [root] : []), ...React.Children.toArray(root.props.children).flatMap(child => elements(child, predicate))];
|
|
||||||
}
|
|
||||||
|
|
||||||
for (const provider of Object.keys(AI_MODEL_OPTIONS)) {
|
|
||||||
test(`${provider} offers current models and a custom model field`, () => {
|
|
||||||
const h = controls(provider, AI_MODEL_DEFAULTS[provider]);
|
|
||||||
let tree = h.render();
|
|
||||||
const select = elements(tree, node => node.type === 'select')[0];
|
|
||||||
assert.equal(select.props.value, AI_MODEL_DEFAULTS[provider]);
|
|
||||||
assert.equal(elements(select, node => node.type === 'option' && node.props.value === CUSTOM_AI_MODEL).length, 1);
|
|
||||||
assert.equal(elements(tree, node => node.type === 'input' && node.props.type === 'text').length, 0);
|
|
||||||
select.props.onChange({ target: { value: CUSTOM_AI_MODEL } });
|
|
||||||
assert.equal(h.state.aiCustomModel, true);
|
|
||||||
assert.equal(h.state.aiModel, '');
|
|
||||||
tree = h.render();
|
|
||||||
const input = elements(tree, node => node.type === 'input' && node.props.type === 'text')[0];
|
|
||||||
assert.equal(input.props.maxLength, 120);
|
|
||||||
input.props.onChange({ target: { value: 'custom-model-2026' } });
|
|
||||||
assert.equal(h.state.aiModel, 'custom-model-2026');
|
|
||||||
assert.equal(elements(h.render(), node => node.type === 'select')[0].props.value, CUSTOM_AI_MODEL);
|
|
||||||
elements(h.render(), node => node.type === 'select')[0].props.onChange({ target: { value: AI_MODEL_OPTIONS[provider][0].value } });
|
|
||||||
assert.equal(h.state.aiCustomModel, false);
|
|
||||||
assert.equal(h.state.aiModel, AI_MODEL_OPTIONS[provider][0].value);
|
|
||||||
assert.equal(new Set(AI_MODEL_OPTIONS[provider].map(option => option.value)).size, AI_MODEL_OPTIONS[provider].length);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
test('provider defaults select the highest-tier current models at the top of each list', () => {
|
|
||||||
const expected = { OPENAI: 'gpt-6-astra', ANTHROPIC: 'claude-fable-5-1', GEMINI: 'gemini-4-argon', QWEN: 'qwen3.8-max' };
|
|
||||||
for (const [provider, model] of Object.entries(expected)) {
|
|
||||||
assert.equal(AI_MODEL_DEFAULTS[provider], model);
|
|
||||||
assert.equal(AI_MODEL_OPTIONS[provider][0].value, model);
|
|
||||||
const h = controls('A_COPILOT', 'a-copilot');
|
|
||||||
elements(h.render(), node => node.props.role === 'radio' && node.props['aria-label'] === ({ OPENAI: 'OpenAI', ANTHROPIC: 'Claude', GEMINI: 'Gemini', QWEN: 'Qwen' })[provider])[0].props.onClick();
|
|
||||||
assert.equal(h.state.aiModel, model);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
test('saved unknown model IDs remain visible in custom mode', () => {
|
|
||||||
const model = 'provider/private-model:revision-10';
|
|
||||||
const h = controls('QWEN', model, true);
|
|
||||||
const tree = h.render();
|
|
||||||
assert.equal(elements(tree, node => node.type === 'select')[0].props.value, CUSTOM_AI_MODEL);
|
|
||||||
assert.equal(elements(tree, node => node.type === 'input' && node.props.type === 'text')[0].props.value, model);
|
|
||||||
assert.equal(AI_MODEL_OPTIONS.QWEN.some(option => option.value === model), false);
|
|
||||||
});
|
|
||||||
|
|
||||||
test('Qwen Max 0902 is selectable and saved selections restore without custom mode', () => {
|
|
||||||
const model = 'qwen3.8-max-0902';
|
|
||||||
const h = controls('QWEN', AI_MODEL_DEFAULTS.QWEN);
|
|
||||||
const select = elements(h.render(), node => node.type === 'select')[0];
|
|
||||||
const option = elements(select, node => node.type === 'option' && node.props.value === model);
|
|
||||||
assert.equal(option.length, 1);
|
|
||||||
assert.equal(option[0].props.children, 'Qwen 3.8 Max (0902)');
|
|
||||||
select.props.onChange({ target: { value: model } });
|
|
||||||
assert.equal(h.state.aiModel, model);
|
|
||||||
assert.equal(h.state.aiCustomModel, false);
|
|
||||||
const restored = aiSettingDrafts([{ provider: 'QWEN', enabled: true, model, hasApiKey: true }]);
|
|
||||||
assert.equal(restored.QWEN.model, model);
|
|
||||||
assert.equal(restored.QWEN.customModel, false);
|
|
||||||
assert.equal(AI_MODEL_DEFAULTS.QWEN, 'qwen3.8-max');
|
|
||||||
});
|
|
||||||
|
|
||||||
test('the selected provider button preserves a custom draft', () => {
|
|
||||||
const h = controls('OPENAI', 'custom-gpt', true);
|
|
||||||
const providers = elements(h.render(), node => node.props.role === 'radio');
|
|
||||||
providers.find(node => node.props['aria-label'] === 'OpenAI').props.onClick();
|
|
||||||
assert.equal(h.state.aiModel, 'custom-gpt');
|
|
||||||
assert.equal(h.state.aiCustomModel, true);
|
|
||||||
providers.find(node => node.props['aria-label'] === 'Claude').props.onClick();
|
|
||||||
assert.equal(h.state.aiProvider, 'ANTHROPIC');
|
|
||||||
assert.equal(h.state.aiModel, AI_MODEL_DEFAULTS.ANTHROPIC);
|
|
||||||
assert.equal(h.state.aiCustomModel, false);
|
|
||||||
});
|
|
||||||
|
|
||||||
test('A-Copilot is first and exposes only fixed read-only fields without a model picker', () => {
|
|
||||||
const tree = controls('A_COPILOT', 'a-copilot').render();
|
|
||||||
assert.equal(elements(tree, node => node.props.role === 'radio')[0].props['aria-label'], 'A-Copilot');
|
|
||||||
assert.equal(elements(tree, node => node.type === 'select').length, 0);
|
|
||||||
const inputs = elements(tree, node => node.type === 'input');
|
|
||||||
assert.deepEqual(inputs.map(node => node.props.value), ['A-Copilot', '서버에서 관리']);
|
|
||||||
assert.ok(inputs.every(node => node.props.readOnly && !node.props.onChange));
|
|
||||||
assert.equal(AI_MODEL_DEFAULTS.A_COPILOT, 'a-copilot');
|
|
||||||
assert.equal(elements(controls('A_COPILOT', 'a-copilot', false, false).render(), node => node.props.role === 'alert').length, 1);
|
|
||||||
});
|
|
||||||
|
|
||||||
test('official current API IDs are present', () => {
|
|
||||||
for (const [provider, ids] of Object.entries({
|
|
||||||
OPENAI: ['gpt-6.1-sol', 'gpt-6-astra', 'gpt-6-luna'],
|
|
||||||
ANTHROPIC: ['claude-sonnet-5-5', 'claude-opus-5-5', 'claude-haiku-5-5', 'claude-fable-5-1'],
|
|
||||||
GEMINI: ['gemini-4-argon', 'gemini-3.8-flash', 'gemini-3.5-flash-lite'],
|
|
||||||
QWEN: ['qwen3.8-max', 'qwen3.8-flash'],
|
|
||||||
})) for (const id of ids) assert.ok(AI_MODEL_OPTIONS[provider].some(option => option.value === id), id);
|
|
||||||
});
|
|
||||||
|
|
||||||
test('all new providers default to disabled while saved settings stay intact', () => {
|
|
||||||
assert.ok(Object.values(aiSettingDrafts()).every(draft => !draft.enabled && !draft.hasApiKey && draft.apiKey === ''));
|
|
||||||
const drafts = aiSettingDrafts([{ provider: 'QWEN', enabled: true, model: 'custom-qwen', hasApiKey: true, endpointUrl: 'https://qwen.test/v1' }]);
|
|
||||||
assert.equal(drafts.QWEN.enabled, true);
|
|
||||||
assert.equal(drafts.QWEN.model, 'custom-qwen');
|
|
||||||
assert.equal(drafts.QWEN.customModel, true);
|
|
||||||
assert.equal(drafts.OPENAI.enabled, false);
|
|
||||||
assert.equal(drafts.OPENAI.hasApiKey, false);
|
|
||||||
});
|
|
||||||
|
|
||||||
test('switching providers preserves separate unsaved models, keys and availability', () => {
|
|
||||||
const h = controls('OPENAI', 'private-model', true);
|
|
||||||
Object.assign(h.state.drafts.OPENAI, { enabled: true, apiKey: 'openai-draft' });
|
|
||||||
const provider = name => elements(h.render(), node => node.props.role === 'radio' && node.props['aria-label'] === name)[0];
|
|
||||||
provider('Qwen').props.onClick();
|
|
||||||
assert.equal(h.state.aiApiKey, '');
|
|
||||||
Object.assign(h.state.drafts.QWEN, { model: 'qwen3.8-flash', enabled: false, apiKey: 'qwen-draft' });
|
|
||||||
provider('OpenAI').props.onClick();
|
|
||||||
assert.equal(h.state.aiModel, 'private-model');
|
|
||||||
assert.equal(h.state.aiCustomModel, true);
|
|
||||||
assert.equal(h.state.aiApiKey, 'openai-draft');
|
|
||||||
assert.equal(h.state.drafts.OPENAI.enabled, true);
|
|
||||||
provider('Qwen').props.onClick();
|
|
||||||
assert.equal(h.state.aiModel, 'qwen3.8-flash');
|
|
||||||
assert.equal(h.state.aiApiKey, 'qwen-draft');
|
|
||||||
assert.equal(h.state.drafts.QWEN.enabled, false);
|
|
||||||
});
|
|
||||||
@@ -1,64 +0,0 @@
|
|||||||
const { test } = require('node:test');
|
|
||||||
const assert = require('node:assert/strict');
|
|
||||||
const fs = require('node:fs');
|
|
||||||
const vm = require('node:vm');
|
|
||||||
const ts = require('typescript');
|
|
||||||
const React = require('react');
|
|
||||||
|
|
||||||
const read = path => fs.readFileSync(require.resolve(`../src/${path}`), 'utf8');
|
|
||||||
function compile(source, globals = {}) {
|
|
||||||
const exports = {};
|
|
||||||
const code = ts.transpileModule(source, { compilerOptions: { module: ts.ModuleKind.CommonJS, target: ts.ScriptTarget.ES2022, jsx: ts.JsxEmit.ReactJSX } }).outputText;
|
|
||||||
vm.runInNewContext(code, { exports, require, ...globals });
|
|
||||||
return exports;
|
|
||||||
}
|
|
||||||
function elements(root, predicate) {
|
|
||||||
if (!React.isValidElement(root)) return [];
|
|
||||||
return [...(predicate(root) ? [root] : []), ...React.Children.toArray(root.props.children).flatMap(child => elements(child, predicate))];
|
|
||||||
}
|
|
||||||
const source = ts.createSourceFile('SettingsPage.tsx', read('pages/settings/SettingsPage.tsx'), ts.ScriptTarget.Latest, true, ts.ScriptKind.TSX);
|
|
||||||
const page = source.statements.find(node => ts.isFunctionDeclaration(node) && node.name?.text === 'SettingsPage');
|
|
||||||
const CourseAiSettings = () => null;
|
|
||||||
const { SettingsPage } = compile(page.getText(source), { CourseAiSettings, PageHeader: () => null, Bot: () => null });
|
|
||||||
const props = {
|
|
||||||
session: { accessToken: 'test-token', user: { id: 'teacher' } },
|
|
||||||
selectedCourseId: 'course-a',
|
|
||||||
courses: [{ id: 'course-a', title: 'A' }, { id: 'course-b', title: 'B' }],
|
|
||||||
};
|
|
||||||
|
|
||||||
test('settings remounts the credential draft when course or session changes', () => {
|
|
||||||
const form = input => elements(SettingsPage(input), node => node.type === CourseAiSettings)[0];
|
|
||||||
const initial = form(props);
|
|
||||||
assert.equal(initial.props.selectedCourseId, 'course-a');
|
|
||||||
assert.notEqual(initial.key, form({ ...props, selectedCourseId: 'course-b' }).key);
|
|
||||||
assert.notEqual(initial.key, form({ ...props, session: { ...props.session, accessToken: 'new-token' } }).key);
|
|
||||||
});
|
|
||||||
|
|
||||||
test('settings is width-constrained and centered without a duplicate course selector', () => {
|
|
||||||
const tree = SettingsPage(props);
|
|
||||||
assert.match(tree.props.className, /mx-auto.*w-full.*max-w-\[920px\]/);
|
|
||||||
const header = React.Children.toArray(tree.props.children)[0];
|
|
||||||
assert.equal(header.props.action, undefined);
|
|
||||||
assert.equal(elements(tree, node => node.type === 'select').length, 0);
|
|
||||||
assert.equal(elements(SettingsPage({ ...props, selectedCourseId: '', courses: [] }), node => node.type === CourseAiSettings).length, 0);
|
|
||||||
});
|
|
||||||
|
|
||||||
test('curriculum no longer loads AI settings or offers an agent tab', () => {
|
|
||||||
const curriculum = read('pages/curriculum/CurriculumPage.tsx');
|
|
||||||
assert.doesNotMatch(curriculum, /getCourseAiSetting|updateCourseAiSetting|handleSaveAiSetting|setActiveTab\('ai'\)/);
|
|
||||||
assert.match(read('App.tsx'), /<SettingsPage session=\{session\} selectedCourseId=\{selectedCourseId\} courses=\{courses\} \/>/);
|
|
||||||
assert.match(read('App.tsx'), /<InstructorLayout[\s\S]*?onSelectCourse=\{handleSelectCourse\}/);
|
|
||||||
});
|
|
||||||
|
|
||||||
test('analytics is hidden from the menu without deleting its existing route', () => {
|
|
||||||
const routes = compile(read('routes.ts').replace('import.meta.env.BASE_URL', JSON.stringify('/lms-adm/')));
|
|
||||||
assert.equal(routes.navItems.some(item => item.id === 'analytics'), false);
|
|
||||||
assert.equal(routes.navItems.some(item => item.id === 'settings'), true);
|
|
||||||
assert.equal(routes.isAppRoute('analytics'), true);
|
|
||||||
assert.equal(routes.getRouteFromPathname('/lms-adm/analytics'), 'analytics');
|
|
||||||
});
|
|
||||||
|
|
||||||
test('settings has a general-purpose noun phrase rather than an AI-only sentence', () => {
|
|
||||||
const { pageMeta } = compile(read('pageMeta.ts'));
|
|
||||||
assert.equal(pageMeta.settings.description, '강좌 및 서비스 환경 설정');
|
|
||||||
});
|
|
||||||
+2
-3
@@ -231,7 +231,6 @@ function App() {
|
|||||||
route={visibleRoute}
|
route={visibleRoute}
|
||||||
session={session}
|
session={session}
|
||||||
selectedCourseId={selectedCourseId}
|
selectedCourseId={selectedCourseId}
|
||||||
courses={courses}
|
|
||||||
onNavigate={setRoute}
|
onNavigate={setRoute}
|
||||||
onOpenChatThread={(threadId) => setChatThreadOpenRequest({ threadId, requestId: Date.now() })}
|
onOpenChatThread={(threadId) => setChatThreadOpenRequest({ threadId, requestId: Date.now() })}
|
||||||
/>
|
/>
|
||||||
@@ -295,7 +294,7 @@ function SessionExpiredPage({ onLogin }: { onLogin: () => void }) {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function RoutePage({ route, session, selectedCourseId, courses, onNavigate, onOpenChatThread }: { route: AppRoute; session: AuthSession; selectedCourseId: string; courses: InstructorCourse[]; onNavigate: (route: AppRoute) => void; onOpenChatThread: (threadId: string) => void }) {
|
function RoutePage({ route, session, selectedCourseId, onNavigate, onOpenChatThread }: { route: AppRoute; session: AuthSession; selectedCourseId: string; onNavigate: (route: AppRoute) => void; onOpenChatThread: (threadId: string) => void }) {
|
||||||
switch (route) {
|
switch (route) {
|
||||||
case 'dashboard':
|
case 'dashboard':
|
||||||
return <DashboardPage session={session} selectedCourseId={selectedCourseId} onNavigate={onNavigate} onOpenChatThread={onOpenChatThread} />;
|
return <DashboardPage session={session} selectedCourseId={selectedCourseId} onNavigate={onNavigate} onOpenChatThread={onOpenChatThread} />;
|
||||||
@@ -312,7 +311,7 @@ function RoutePage({ route, session, selectedCourseId, courses, onNavigate, onOp
|
|||||||
case 'analytics':
|
case 'analytics':
|
||||||
return <AnalyticsPage />;
|
return <AnalyticsPage />;
|
||||||
case 'settings':
|
case 'settings':
|
||||||
return <SettingsPage session={session} selectedCourseId={selectedCourseId} courses={courses} />;
|
return <SettingsPage />;
|
||||||
case 'profile':
|
case 'profile':
|
||||||
return <ProfilePage session={session} />;
|
return <ProfilePage session={session} />;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -112,19 +112,6 @@ export type InstructorCurriculumResponse = {
|
|||||||
mapOptions?: CurriculumMap[];
|
mapOptions?: CurriculumMap[];
|
||||||
};
|
};
|
||||||
|
|
||||||
export type CourseAiSetting = {
|
|
||||||
courseId: string;
|
|
||||||
enabled: boolean;
|
|
||||||
provider: 'A_COPILOT' | 'OPENAI' | 'ANTHROPIC' | 'GEMINI' | 'QWEN';
|
|
||||||
model: string;
|
|
||||||
endpointUrl?: string | null;
|
|
||||||
hasApiKey: boolean;
|
|
||||||
copilotConfigured?: boolean;
|
|
||||||
updatedAt?: string | null;
|
|
||||||
};
|
|
||||||
|
|
||||||
export type CourseAiSettings = CourseAiSetting & { settings: CourseAiSetting[] };
|
|
||||||
|
|
||||||
const LMS_API_BASE_URL = (import.meta.env.VITE_API_BASE_URL ?? 'https://workspace.autonomystudio.net/lms-api/api').replace(/\/+$/, '');
|
const LMS_API_BASE_URL = (import.meta.env.VITE_API_BASE_URL ?? 'https://workspace.autonomystudio.net/lms-api/api').replace(/\/+$/, '');
|
||||||
|
|
||||||
function uploadErrorMessage(status: number, fallback: string) {
|
function uploadErrorMessage(status: number, fallback: string) {
|
||||||
@@ -147,33 +134,6 @@ export async function getInstructorCurriculum(accessToken: string, groupId?: str
|
|||||||
return response.json() as Promise<InstructorCurriculumResponse>;
|
return response.json() as Promise<InstructorCurriculumResponse>;
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function getCourseAiSetting(accessToken: string, courseId: string): Promise<CourseAiSettings> {
|
|
||||||
const response = await fetch(`${LMS_API_BASE_URL}/instructor/courses/${encodeURIComponent(courseId)}/ai-setting`, {
|
|
||||||
headers: { Authorization: `Bearer ${accessToken}` },
|
|
||||||
});
|
|
||||||
if (!response.ok) throw new Error(`AI 에이전트 설정을 불러오지 못했습니다. (${response.status})`);
|
|
||||||
return response.json() as Promise<CourseAiSettings>;
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function updateCourseAiSetting(
|
|
||||||
accessToken: string,
|
|
||||||
courseId: string,
|
|
||||||
input: Pick<CourseAiSetting, 'enabled' | 'provider'> & { model?: string; apiKey?: string; endpointUrl?: string },
|
|
||||||
): Promise<CourseAiSetting> {
|
|
||||||
const response = await fetch(`${LMS_API_BASE_URL}/instructor/courses/${encodeURIComponent(courseId)}/ai-setting`, {
|
|
||||||
method: 'PUT',
|
|
||||||
headers: { Authorization: `Bearer ${accessToken}`, 'content-type': 'application/json' },
|
|
||||||
body: JSON.stringify(input),
|
|
||||||
});
|
|
||||||
if (!response.ok) {
|
|
||||||
const payload = await response.json().catch((): null => null);
|
|
||||||
throw new Error(payload && typeof payload === 'object' && 'message' in payload
|
|
||||||
? String(payload.message)
|
|
||||||
: `AI 에이전트 설정을 저장하지 못했습니다. (${response.status})`);
|
|
||||||
}
|
|
||||||
return response.json() as Promise<CourseAiSetting>;
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function updateInstructorCurriculum(
|
export async function updateInstructorCurriculum(
|
||||||
accessToken: string,
|
accessToken: string,
|
||||||
input: {
|
input: {
|
||||||
|
|||||||
+1
-1
@@ -36,7 +36,7 @@ export const pageMeta: Record<AppRoute, PageMeta> = {
|
|||||||
},
|
},
|
||||||
settings: {
|
settings: {
|
||||||
title: '설정',
|
title: '설정',
|
||||||
description: '강좌 및 서비스 환경 설정'
|
description: '강사 포털의 운영 정책과 계정 설정을 관리합니다.'
|
||||||
},
|
},
|
||||||
profile: {
|
profile: {
|
||||||
title: '프로필',
|
title: '프로필',
|
||||||
|
|||||||
@@ -10,6 +10,7 @@ import { listInstructorGroups, type InstructorGroup } from '../../lib/groups';
|
|||||||
import type { AuthSession } from '../../types/auth';
|
import type { AuthSession } from '../../types/auth';
|
||||||
|
|
||||||
const CURRICULUM_SELECTED_GROUP_STORAGE_PREFIX = 'lms-admin-curriculum-selected-group-id';
|
const CURRICULUM_SELECTED_GROUP_STORAGE_PREFIX = 'lms-admin-curriculum-selected-group-id';
|
||||||
|
|
||||||
type ModuleParameterDraft = {
|
type ModuleParameterDraft = {
|
||||||
key: string;
|
key: string;
|
||||||
value: string;
|
value: string;
|
||||||
|
|||||||
@@ -1,344 +1,6 @@
|
|||||||
import { useEffect, useRef, useState } from 'react';
|
import { Settings } from 'lucide-react';
|
||||||
import { Bot, KeyRound, Loader2, RefreshCw, Save } from 'lucide-react';
|
import { PlaceholderPage } from '../common/PlaceholderPage';
|
||||||
import { PageHeader } from '../../components/PageHeader';
|
|
||||||
import { useToast } from '../../components/ToastProvider';
|
|
||||||
import { getCourseAiSetting, updateCourseAiSetting, type CourseAiSetting } from '../../lib/curriculum';
|
|
||||||
import type { InstructorCourse } from '../../lib/courses';
|
|
||||||
import type { AuthSession } from '../../types/auth';
|
|
||||||
|
|
||||||
const AI_MODEL_DEFAULTS: Record<CourseAiSetting['provider'], string> = {
|
export function SettingsPage() {
|
||||||
A_COPILOT: 'a-copilot',
|
return <PlaceholderPage icon={Settings} route="settings" items={['권한 정책', '알림 설정', '서비스 연결']} />;
|
||||||
OPENAI: 'gpt-6-astra',
|
|
||||||
ANTHROPIC: 'claude-fable-5-1',
|
|
||||||
GEMINI: 'gemini-4-argon',
|
|
||||||
QWEN: 'qwen3.8-max',
|
|
||||||
};
|
|
||||||
|
|
||||||
const DEFAULT_QWEN_ENDPOINT = 'https://dashscope-intl.aliyuncs.com/compatible-mode/v1';
|
|
||||||
const CUSTOM_AI_MODEL = '__custom__';
|
|
||||||
|
|
||||||
const AI_PROVIDER_LABELS: Record<CourseAiSetting['provider'], string> = {
|
|
||||||
A_COPILOT: 'A-Copilot',
|
|
||||||
OPENAI: 'OpenAI',
|
|
||||||
ANTHROPIC: 'Claude',
|
|
||||||
GEMINI: 'Gemini',
|
|
||||||
QWEN: 'Qwen',
|
|
||||||
};
|
|
||||||
|
|
||||||
const AI_MODEL_OPTIONS: Record<Exclude<CourseAiSetting['provider'], 'A_COPILOT'>, Array<{ value: string; label: string }>> = {
|
|
||||||
// Official provider model catalogs checked on 2026-10-19; keep existing selections intact.
|
|
||||||
OPENAI: [
|
|
||||||
{ value: 'gpt-6-astra', label: 'GPT-6 Astra' },
|
|
||||||
{ value: 'gpt-6.1-sol', label: 'GPT-6.1 Sol' },
|
|
||||||
{ value: 'gpt-6-luna', label: 'GPT-6 Luna' },
|
|
||||||
{ value: 'gpt-4.1-mini', label: 'GPT-4.1 Mini' },
|
|
||||||
{ value: 'gpt-4.1', label: 'GPT-4.1' },
|
|
||||||
{ value: 'gpt-4o-mini', label: 'GPT-4o Mini' },
|
|
||||||
],
|
|
||||||
ANTHROPIC: [
|
|
||||||
{ value: 'claude-fable-5-1', label: 'Claude Fable 5.1' },
|
|
||||||
{ value: 'claude-opus-5-5', label: 'Claude Opus 5.5' },
|
|
||||||
{ value: 'claude-sonnet-5-5', label: 'Claude Sonnet 5.5' },
|
|
||||||
{ value: 'claude-haiku-5-5', label: 'Claude Haiku 5.5' },
|
|
||||||
{ value: 'claude-sonnet-4-5', label: 'Claude Sonnet 4.5' },
|
|
||||||
{ value: 'claude-haiku-4-5', label: 'Claude Haiku 4.5' },
|
|
||||||
{ value: 'claude-opus-4-1', label: 'Claude Opus 4.1' },
|
|
||||||
],
|
|
||||||
GEMINI: [
|
|
||||||
{ value: 'gemini-4-argon', label: 'Gemini 4 Argon' },
|
|
||||||
{ value: 'gemini-3.8-flash', label: 'Gemini 3.8 Flash' },
|
|
||||||
{ value: 'gemini-3.5-flash-lite', label: 'Gemini 3.5 Flash-Lite' },
|
|
||||||
{ value: 'gemini-3.1-pro-preview', label: 'Gemini 3.1 Pro (Preview)' },
|
|
||||||
{ value: 'gemini-2.5-flash', label: 'Gemini 2.5 Flash' },
|
|
||||||
{ value: 'gemini-2.5-pro', label: 'Gemini 2.5 Pro' },
|
|
||||||
{ value: 'gemini-2.0-flash', label: 'Gemini 2.0 Flash' },
|
|
||||||
],
|
|
||||||
QWEN: [
|
|
||||||
{ value: 'qwen3.8-max', label: 'Qwen 3.8 Max' },
|
|
||||||
{ value: 'qwen3.8-max-0902', label: 'Qwen 3.8 Max (0902)' },
|
|
||||||
{ value: 'qwen3.8-flash', label: 'Qwen 3.8 Flash' },
|
|
||||||
{ value: 'qwen3.7-plus', label: 'Qwen 3.7 Plus' },
|
|
||||||
{ value: 'qwen3.7-flash', label: 'Qwen 3.7 Flash' },
|
|
||||||
{ value: 'qwen-vl-plus', label: 'Qwen VL Plus' },
|
|
||||||
{ value: 'qwen-vl-max', label: 'Qwen VL Max' },
|
|
||||||
{ value: 'qwen-plus', label: 'Qwen Plus (text)' },
|
|
||||||
],
|
|
||||||
};
|
|
||||||
|
|
||||||
type AiSettingDraft = {
|
|
||||||
enabled: boolean;
|
|
||||||
model: string;
|
|
||||||
customModel: boolean;
|
|
||||||
endpointUrl: string;
|
|
||||||
apiKey: string;
|
|
||||||
hasApiKey: boolean;
|
|
||||||
};
|
|
||||||
|
|
||||||
function aiSettingDraft(provider: CourseAiSetting['provider'], setting?: CourseAiSetting): AiSettingDraft {
|
|
||||||
const model = provider === 'A_COPILOT' ? AI_MODEL_DEFAULTS.A_COPILOT : setting?.model ?? AI_MODEL_DEFAULTS[provider];
|
|
||||||
return {
|
|
||||||
enabled: setting?.enabled ?? false,
|
|
||||||
model,
|
|
||||||
customModel: provider !== 'A_COPILOT' && !AI_MODEL_OPTIONS[provider].some(option => option.value === model),
|
|
||||||
endpointUrl: setting?.endpointUrl || DEFAULT_QWEN_ENDPOINT,
|
|
||||||
apiKey: '',
|
|
||||||
hasApiKey: setting?.hasApiKey ?? false,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
function aiSettingDrafts(settings: CourseAiSetting[] = []) {
|
|
||||||
return Object.fromEntries((Object.keys(AI_PROVIDER_LABELS) as CourseAiSetting['provider'][])
|
|
||||||
.map(provider => [provider, aiSettingDraft(provider, settings.find(setting => setting.provider === provider))])) as Record<CourseAiSetting['provider'], AiSettingDraft>;
|
|
||||||
}
|
|
||||||
|
|
||||||
type SettingsPageProps = {
|
|
||||||
session: AuthSession;
|
|
||||||
selectedCourseId: string;
|
|
||||||
courses: InstructorCourse[];
|
|
||||||
};
|
|
||||||
|
|
||||||
export function SettingsPage({ session, selectedCourseId, courses }: SettingsPageProps) {
|
|
||||||
const selectedCourse = courses.find(course => course.id === selectedCourseId);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="mx-auto w-full max-w-[920px]">
|
|
||||||
<PageHeader route="settings" />
|
|
||||||
{selectedCourse ? (
|
|
||||||
<CourseAiSettings key={`${session.user.id}:${session.accessToken}:${selectedCourseId}`} session={session} selectedCourseId={selectedCourseId} />
|
|
||||||
) : (
|
|
||||||
<section className="border-y border-[#d1d9e6] bg-white px-5 py-8">
|
|
||||||
<h2 className="flex items-center gap-2 text-[15px] font-black text-[#111827]"><Bot size={17} className="text-[#2563eb]" aria-hidden="true" />AI 에이전트</h2>
|
|
||||||
<p className="mt-3 text-[13px] font-semibold text-[#64748b]">설정할 강좌가 없습니다.</p>
|
|
||||||
</section>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function CourseAiSettings({ session, selectedCourseId }: Pick<SettingsPageProps, 'session' | 'selectedCourseId'>) {
|
|
||||||
const { showToast } = useToast();
|
|
||||||
const [aiProvider, setAiProvider] = useState<CourseAiSetting['provider']>('A_COPILOT');
|
|
||||||
const [drafts, setDrafts] = useState(aiSettingDrafts);
|
|
||||||
const [aiCopilotConfigured, setAiCopilotConfigured] = useState(false);
|
|
||||||
const [aiSettingLoading, setAiSettingLoading] = useState(true);
|
|
||||||
const [saving, setSaving] = useState(false);
|
|
||||||
const [loaded, setLoaded] = useState(false);
|
|
||||||
const [loadAttempt, setLoadAttempt] = useState(0);
|
|
||||||
const [error, setError] = useState<string | null>(null);
|
|
||||||
const mounted = useRef(false);
|
|
||||||
const draft = drafts[aiProvider];
|
|
||||||
const aiEnabled = draft.enabled;
|
|
||||||
const aiModel = draft.model;
|
|
||||||
const aiCustomModel = draft.customModel;
|
|
||||||
const aiEndpointUrl = draft.endpointUrl;
|
|
||||||
const aiApiKey = draft.apiKey;
|
|
||||||
const aiHasApiKey = draft.hasApiKey;
|
|
||||||
const aiConfiguredProvider = aiHasApiKey ? aiProvider : null;
|
|
||||||
const updateDraft = (update: Partial<AiSettingDraft>) => setDrafts(current => ({ ...current, [aiProvider]: { ...current[aiProvider], ...update } }));
|
|
||||||
const setAiEnabled = (enabled: boolean) => updateDraft({ enabled });
|
|
||||||
const setAiModel = (model: string) => updateDraft({ model });
|
|
||||||
const setAiCustomModel = (customModel: boolean) => updateDraft({ customModel });
|
|
||||||
const setAiEndpointUrl = (endpointUrl: string) => updateDraft({ endpointUrl });
|
|
||||||
const setAiApiKey = (apiKey: string) => updateDraft({ apiKey });
|
|
||||||
|
|
||||||
const applySetting = (setting: CourseAiSetting) => {
|
|
||||||
setDrafts(current => ({ ...current, [setting.provider]: aiSettingDraft(setting.provider, setting) }));
|
|
||||||
setAiCopilotConfigured(setting.copilotConfigured === true);
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
mounted.current = true;
|
|
||||||
return () => { mounted.current = false; };
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
let cancelled = false;
|
|
||||||
setAiSettingLoading(true);
|
|
||||||
setLoaded(false);
|
|
||||||
setError(null);
|
|
||||||
getCourseAiSetting(session.accessToken, selectedCourseId)
|
|
||||||
.then(setting => {
|
|
||||||
if (cancelled) return;
|
|
||||||
setDrafts(aiSettingDrafts(setting.settings ?? [setting]));
|
|
||||||
setAiProvider(setting.provider);
|
|
||||||
setAiCopilotConfigured(setting.copilotConfigured === true);
|
|
||||||
setLoaded(true);
|
|
||||||
})
|
|
||||||
.catch((reason: Error) => {
|
|
||||||
if (!cancelled) setError(reason.message);
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
if (!cancelled) setAiSettingLoading(false);
|
|
||||||
});
|
|
||||||
return () => { cancelled = true; };
|
|
||||||
}, [session.accessToken, selectedCourseId, loadAttempt]);
|
|
||||||
|
|
||||||
const handleSaveAiSetting = async () => {
|
|
||||||
if (!loaded || aiSettingLoading || saving) return;
|
|
||||||
if (aiProvider !== 'A_COPILOT' && (!aiModel.trim() || aiModel.trim().length > 120)) {
|
|
||||||
setError('모델 ID는 1~120자로 입력해주세요.');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
setSaving(true);
|
|
||||||
setError(null);
|
|
||||||
try {
|
|
||||||
const setting = await updateCourseAiSetting(session.accessToken, selectedCourseId, {
|
|
||||||
enabled: aiEnabled,
|
|
||||||
provider: aiProvider,
|
|
||||||
...(aiProvider !== 'A_COPILOT' ? { model: aiModel.trim() } : {}),
|
|
||||||
...(aiProvider === 'QWEN' ? { endpointUrl: aiEndpointUrl.trim() } : {}),
|
|
||||||
...(aiProvider !== 'A_COPILOT' && aiApiKey.trim() ? { apiKey: aiApiKey.trim() } : {}),
|
|
||||||
});
|
|
||||||
if (!mounted.current) return;
|
|
||||||
applySetting(setting);
|
|
||||||
showToast({ title: 'AI 에이전트 설정이 저장되었습니다.', message: setting.enabled ? setting.provider === 'A_COPILOT' ? 'A-Copilot' : `${AI_PROVIDER_LABELS[setting.provider]} · ${setting.model}` : '사용 안 함' });
|
|
||||||
} catch (reason) {
|
|
||||||
if (mounted.current) setError(reason instanceof Error ? reason.message : 'AI 에이전트 설정을 저장하지 못했습니다.');
|
|
||||||
} finally {
|
|
||||||
if (mounted.current) setSaving(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<form
|
|
||||||
className="border-y border-[#d1d9e6] bg-white"
|
|
||||||
onSubmit={event => { event.preventDefault(); void handleSaveAiSetting(); }}
|
|
||||||
>
|
|
||||||
<fieldset disabled={!loaded || aiSettingLoading || saving} className="min-w-0 px-5 py-5">
|
|
||||||
<legend className="sr-only">AI 에이전트</legend>
|
|
||||||
<div className="flex items-center justify-between gap-4 pb-5">
|
|
||||||
<h2 className="flex items-center gap-2 text-[15px] font-black text-[#111827]"><Bot size={17} className="text-[#2563eb]" aria-hidden="true" />AI 에이전트</h2>
|
|
||||||
<label className="inline-flex shrink-0 cursor-pointer items-center gap-2 text-[12px] font-black text-[#475569]">
|
|
||||||
<input type="checkbox" aria-label={`${AI_PROVIDER_LABELS[aiProvider]} 사용`} checked={aiEnabled} onChange={event => setAiEnabled(event.target.checked)} className="h-4 w-4 rounded border-[#cbd5e1] text-[#2563eb] focus:ring-[#2563eb]" />
|
|
||||||
{AI_PROVIDER_LABELS[aiProvider]} 사용
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
{aiSettingLoading ? (
|
|
||||||
<p role="status" className="flex items-center gap-2 border-t border-[#e2e8f0] py-8 text-[13px] font-semibold text-[#64748b]"><Loader2 size={16} className="animate-spin" aria-hidden="true" />불러오는 중</p>
|
|
||||||
) : loaded ? (
|
|
||||||
<section className="border-t border-[#e2e8f0] pt-5">
|
|
||||||
<div>
|
|
||||||
<span className="text-[12px] font-black text-[#475569]">AI 공급자</span>
|
|
||||||
<div className="mt-2 grid grid-cols-2 gap-2 sm:grid-cols-5" role="radiogroup" aria-label="AI 공급자">
|
|
||||||
{(Object.keys(AI_PROVIDER_LABELS) as CourseAiSetting['provider'][]).map((provider) => (
|
|
||||||
<button
|
|
||||||
key={provider}
|
|
||||||
type="button"
|
|
||||||
role="radio"
|
|
||||||
aria-label={AI_PROVIDER_LABELS[provider]}
|
|
||||||
aria-checked={aiProvider === provider}
|
|
||||||
disabled={aiSettingLoading || saving}
|
|
||||||
onClick={() => {
|
|
||||||
if (provider === aiProvider) return;
|
|
||||||
setAiProvider(provider);
|
|
||||||
setError(null);
|
|
||||||
}}
|
|
||||||
className={`h-10 rounded-md border text-[13px] font-black transition disabled:cursor-not-allowed disabled:opacity-60 ${
|
|
||||||
aiProvider === provider
|
|
||||||
? 'border-[#2563eb] bg-[#eff6ff] text-[#1d4ed8] shadow-[0_0_0_1px_rgba(37,99,235,0.12)]'
|
|
||||||
: 'border-[#cbd5e1] bg-white text-[#475569] hover:border-[#94a3b8] hover:bg-[#f8fafc]'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<span>{AI_PROVIDER_LABELS[provider]}</span>
|
|
||||||
<span className="mt-0.5 flex items-center justify-center gap-1 text-[10px] font-semibold">
|
|
||||||
<span className={`size-1.5 rounded-full ${drafts[provider].enabled ? 'bg-[#16a34a]' : 'bg-[#94a3b8]'}`} aria-hidden="true" />
|
|
||||||
{drafts[provider].enabled ? '사용' : '미사용'}
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{aiProvider === 'A_COPILOT' ? (
|
|
||||||
<div className="mt-4 grid gap-4">
|
|
||||||
<label className="block">
|
|
||||||
<span className="text-[12px] font-black text-[#475569]">모델</span>
|
|
||||||
<input type="text" aria-label="모델" readOnly value="A-Copilot" className="mt-1.5 h-10 w-full cursor-default rounded-md border border-[#d1d9e6] bg-[#f8fafc] px-3 text-[13px] font-bold text-[#64748b] outline-none" />
|
|
||||||
</label>
|
|
||||||
<label className="block">
|
|
||||||
<span className="flex items-center gap-1.5 text-[12px] font-black text-[#475569]"><KeyRound size={13} aria-hidden="true" />API 키</span>
|
|
||||||
<input type="text" aria-label="API 키" readOnly value={aiCopilotConfigured ? '서버에서 관리' : '서버 미설정'} className="mt-1.5 h-10 w-full cursor-default rounded-md border border-[#d1d9e6] bg-[#f8fafc] px-3 text-[13px] font-bold text-[#64748b] outline-none" />
|
|
||||||
</label>
|
|
||||||
{!aiCopilotConfigured ? <p role="alert" className="text-[12px] font-semibold text-[#be123c]">A-Copilot 서버 연결이 설정되어 있지 않습니다.</p> : null}
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<label className="mt-4 block">
|
|
||||||
<span className="text-[12px] font-black text-[#475569]">모델</span>
|
|
||||||
<select
|
|
||||||
aria-label="모델"
|
|
||||||
value={aiCustomModel ? CUSTOM_AI_MODEL : aiModel}
|
|
||||||
disabled={aiSettingLoading || saving}
|
|
||||||
onChange={(event) => {
|
|
||||||
const custom = event.target.value === CUSTOM_AI_MODEL;
|
|
||||||
setAiCustomModel(custom);
|
|
||||||
setAiModel(custom ? '' : event.target.value);
|
|
||||||
}}
|
|
||||||
className="mt-1.5 h-10 w-full rounded-md border border-[#d1d9e6] bg-white px-3 text-[13px] font-bold text-[#111827] outline-none focus:border-[#2563eb]"
|
|
||||||
>
|
|
||||||
{AI_MODEL_OPTIONS[aiProvider].map((option) => (
|
|
||||||
<option key={option.value} value={option.value}>{option.label}</option>
|
|
||||||
))}
|
|
||||||
<option value={CUSTOM_AI_MODEL}>직접 입력</option>
|
|
||||||
</select>
|
|
||||||
</label>
|
|
||||||
{aiCustomModel ? (
|
|
||||||
<label className="mt-3 block">
|
|
||||||
<span className="text-[12px] font-black text-[#475569]">모델 ID</span>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
value={aiModel}
|
|
||||||
disabled={aiSettingLoading || saving}
|
|
||||||
onChange={(event) => setAiModel(event.target.value)}
|
|
||||||
maxLength={120}
|
|
||||||
autoComplete="off"
|
|
||||||
spellCheck={false}
|
|
||||||
placeholder={AI_MODEL_OPTIONS[aiProvider][0].value}
|
|
||||||
className="mt-1.5 h-10 w-full rounded-md border border-[#d1d9e6] bg-white px-3 font-mono text-[12px] font-bold text-[#111827] outline-none focus:border-[#2563eb] disabled:opacity-60"
|
|
||||||
/>
|
|
||||||
</label>
|
|
||||||
) : null}
|
|
||||||
{aiProvider === 'QWEN' ? (
|
|
||||||
<label className="mt-4 block">
|
|
||||||
<span className="text-[12px] font-black text-[#475569]">엔드포인트 주소</span>
|
|
||||||
<input
|
|
||||||
type="url"
|
|
||||||
value={aiEndpointUrl}
|
|
||||||
onChange={(event) => setAiEndpointUrl(event.target.value)}
|
|
||||||
placeholder={DEFAULT_QWEN_ENDPOINT}
|
|
||||||
className="mt-1.5 h-10 w-full rounded-md border border-[#d1d9e6] bg-white px-3 font-mono text-[12px] font-bold text-[#111827] outline-none focus:border-[#2563eb]"
|
|
||||||
/>
|
|
||||||
<span className="mt-1.5 block text-[11px] font-semibold text-[#64748b]">OpenAI 호환 API의 기본 주소를 입력하세요. HTTPS 주소만 사용할 수 있습니다.</span>
|
|
||||||
</label>
|
|
||||||
) : null}
|
|
||||||
<label className="mt-4 block">
|
|
||||||
<span className="flex items-center gap-1.5 text-[12px] font-black text-[#475569]"><KeyRound size={13} aria-hidden="true" />API 키</span>
|
|
||||||
<input
|
|
||||||
type="password"
|
|
||||||
autoComplete="new-password"
|
|
||||||
value={aiApiKey}
|
|
||||||
onChange={(event) => setAiApiKey(event.target.value)}
|
|
||||||
placeholder={aiHasApiKey && aiConfiguredProvider === aiProvider ? '설정됨 · 변경할 때만 새 키 입력' : 'API 키 입력'}
|
|
||||||
className="mt-1.5 h-10 w-full rounded-md border border-[#d1d9e6] bg-white px-3 text-[13px] font-bold text-[#111827] outline-none focus:border-[#2563eb]"
|
|
||||||
/>
|
|
||||||
<span className="mt-1.5 block text-[11px] font-semibold text-[#64748b]">키는 서버에서 암호화되어 저장되며 학생 앱으로 전달되지 않습니다.</span>
|
|
||||||
</label>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</section>
|
|
||||||
) : null}
|
|
||||||
</fieldset>
|
|
||||||
{error ? (
|
|
||||||
<div role="alert" className="mx-5 mb-5 flex flex-wrap items-center justify-between gap-3 rounded-md border border-[#fecdd3] bg-[#fff1f2] px-4 py-3 text-[13px] font-semibold text-[#be123c]">
|
|
||||||
<span className="min-w-0 break-words">{error}</span>
|
|
||||||
{!loaded ? <button type="button" onClick={() => setLoadAttempt(attempt => attempt + 1)} className="inline-flex h-8 shrink-0 cursor-pointer items-center gap-1.5 rounded-md border border-[#fda4af] px-3"><RefreshCw size={14} aria-hidden="true" />다시 시도</button> : null}
|
|
||||||
</div>
|
|
||||||
) : null}
|
|
||||||
<div className="flex justify-end border-t border-[#e2e8f0] px-5 py-4">
|
|
||||||
<button type="submit" disabled={!loaded || aiSettingLoading || saving || (aiProvider === 'A_COPILOT' ? aiEnabled && !aiCopilotConfigured : !aiModel.trim() || aiModel.trim().length > 120)} className="inline-flex h-10 cursor-pointer items-center justify-center gap-2 rounded-md bg-[#2563eb] px-4 text-[13px] font-bold text-white hover:bg-[#1d4ed8] disabled:cursor-not-allowed disabled:opacity-60">
|
|
||||||
{saving ? <Loader2 size={15} className="animate-spin" aria-hidden="true" /> : <Save size={15} aria-hidden="true" />}
|
|
||||||
{AI_PROVIDER_LABELS[aiProvider]} 설정 저장
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|||||||
+3
-2
@@ -1,4 +1,4 @@
|
|||||||
import { Activity, BookOpen, Car, ClipboardList, GitPullRequest, Settings, Users, type LucideIcon } from 'lucide-react';
|
import { Activity, BarChart3, BookOpen, Car, ClipboardList, GitPullRequest, Settings, Users, type LucideIcon } from 'lucide-react';
|
||||||
|
|
||||||
export type AppRoute = 'dashboard' | 'curriculum' | 'groups' | 'platforms' | 'students' | 'submissions' | 'analytics' | 'settings' | 'profile';
|
export type AppRoute = 'dashboard' | 'curriculum' | 'groups' | 'platforms' | 'students' | 'submissions' | 'analytics' | 'settings' | 'profile';
|
||||||
|
|
||||||
@@ -30,6 +30,7 @@ export const navItems: NavItem[] = [
|
|||||||
{ id: 'platforms', label: '플랫폼 관리', icon: Car },
|
{ id: 'platforms', label: '플랫폼 관리', icon: Car },
|
||||||
{ id: 'students', label: '수강생 현황', icon: BookOpen },
|
{ id: 'students', label: '수강생 현황', icon: BookOpen },
|
||||||
{ id: 'submissions', label: '제출 현황', icon: GitPullRequest },
|
{ id: 'submissions', label: '제출 현황', icon: GitPullRequest },
|
||||||
|
{ id: 'analytics', label: '통계 분석', icon: BarChart3 },
|
||||||
{ id: 'settings', label: '설정', icon: Settings }
|
{ id: 'settings', label: '설정', icon: Settings }
|
||||||
];
|
];
|
||||||
|
|
||||||
@@ -43,7 +44,7 @@ export const navItems: NavItem[] = [
|
|||||||
// settings: ['권한 정책', '알림 설정', '서비스 연결']
|
// settings: ['권한 정책', '알림 설정', '서비스 연결']
|
||||||
// };
|
// };
|
||||||
|
|
||||||
const appRoutes = Object.keys(routePaths) as AppRoute[];
|
const appRoutes: AppRoute[] = [...navItems.map((item) => item.id), 'profile'];
|
||||||
const publicBasePath = import.meta.env.BASE_URL.replace(/\/+$/, '');
|
const publicBasePath = import.meta.env.BASE_URL.replace(/\/+$/, '');
|
||||||
|
|
||||||
const stripPublicBasePath = (pathname: string): string => {
|
const stripPublicBasePath = (pathname: string): string => {
|
||||||
|
|||||||
Reference in New Issue
Block a user