platform/lms-adm-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

platform/lms-adm-fe release promotion snapshot

Browse Source
This commit is contained in:
web-admin
2026-08-04 02:12:50 +00:00
parent c1d3c660c2
commit d44b235bd6
3 changed files with 166 additions and 224 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.vite/deps/_metadata.json
+8
View File
@@ -0,0 +1,8 @@
{
"hash": "c60753b8",
"configHash": "84cc1fb0",
"lockfileHash": "707b26ba",
"browserHash": "992b5a32",
"optimized": {},
"chunks": {}
}
.vite/deps/package.json
+3
View File
@@ -0,0 +1,3 @@
{
"type": "module"
}
src/pages/curriculum/CurriculumPage.tsx
+155 -224
View File
@@ -1,4 +1,5 @@
import { useEffect, useMemo, useRef, useState } from 'react';
import { createPortal } from 'react-dom';
import { CheckCircle2, CirclePlay, Clock3, FileCode2, FileText, Loader2, Map, Plus, RadioTower, Save, Target, Trash2, Upload, type LucideIcon } from 'lucide-react';
import { ConfirmDialog } from '../../components/ConfirmDialog';
import { PageHeader } from '../../components/PageHeader';
@@ -14,6 +15,21 @@ type ModuleParameterDraft = {
value: string;
};
type EditableEnvironmentProfile = CurriculumEnvironmentProfile & {
storageKey: 'local' | 'platform';
platformKeys: string[];
};
function isPlatformEnvironment(config: unknown): boolean {
if (!config || typeof config !== 'object' || Array.isArray(config)) return false;
const target = (config as Record<string, unknown>).target;
return target === 'remote-jetson' || target === 'platform';
}
function environmentStorageKey(profile: Pick<CurriculumEnvironmentProfile, 'config'>): 'local' | 'platform' {
return isPlatformEnvironment(profile.config) ? 'platform' : 'local';
}
function parseModuleParameter(parameter: string): ModuleParameterDraft {
const separatorIndex = parameter.indexOf(':=');
if (separatorIndex < 0) return { key: parameter.trim(), value: '' };
@@ -38,37 +54,56 @@ function readEnvironmentModuleIds(profile: CurriculumEnvironmentProfile, modules
));
}
function readEnvironmentModuleParameters(profile: CurriculumEnvironmentProfile): Record<string, ModuleParameterDraft[]> {
function readEnvironmentModuleParameters(
profile: CurriculumEnvironmentProfile,
modules: NonNullable<CurriculumWeek['modules']>,
): Record<string, ModuleParameterDraft[]> {
const config = profile.config;
const moduleSet = config && typeof config.moduleSet === 'object' && config.moduleSet !== null && !Array.isArray(config.moduleSet)
? config.moduleSet as Record<string, unknown>
: null;
if (!moduleSet || !Array.isArray(moduleSet.modules)) return {};
const configuredModules = new globalThis.Map<string, Record<string, unknown>>(
!moduleSet || !Array.isArray(moduleSet.modules)
? []
: moduleSet.modules.flatMap((item) => (
item && typeof item === 'object' && typeof (item as Record<string, unknown>).id === 'string'
? [[(item as Record<string, unknown>).id as string, item as Record<string, unknown>]]
: []
)),
);
const moduleDefaults = new globalThis.Map(modules.map((module) => [module.id, module.defaultParameters ?? []]));
return Object.fromEntries(moduleSet.modules.flatMap((item) => {
if (!item || typeof item !== 'object') return [];
const module = item as Record<string, unknown>;
if (typeof module.id !== 'string') return [];
const parameters = Array.isArray(module.defaultParameters)
? module.defaultParameters.filter((value): value is string => typeof value === 'string').map(parseModuleParameter)
: [];
return [[module.id, parameters]];
return Object.fromEntries(readEnvironmentModuleIds(profile, modules).map((moduleId) => {
const configured = configuredModules.get(moduleId);
const parameters = Array.isArray(configured?.defaultParameters)
? configured.defaultParameters.filter((value): value is string => typeof value === 'string')
: moduleDefaults.get(moduleId) ?? [];
return [moduleId, parameters.map(parseModuleParameter)];
}));
}
function readEnvironmentModuleDockerImages(profile: CurriculumEnvironmentProfile): Record<string, string> {
function readEnvironmentModuleDockerImages(
profile: CurriculumEnvironmentProfile,
modules: NonNullable<CurriculumWeek['modules']>,
): Record<string, string> {
const config = profile.config;
const moduleSet = config && typeof config.moduleSet === 'object' && config.moduleSet !== null && !Array.isArray(config.moduleSet)
? config.moduleSet as Record<string, unknown>
: null;
if (!moduleSet || !Array.isArray(moduleSet.modules)) return {};
const configuredModules = new globalThis.Map<string, Record<string, unknown>>(
!moduleSet || !Array.isArray(moduleSet.modules)
? []
: moduleSet.modules.flatMap((item) => (
item && typeof item === 'object' && typeof (item as Record<string, unknown>).id === 'string'
? [[(item as Record<string, unknown>).id as string, item as Record<string, unknown>]]
: []
)),
);
const moduleDefaults = new globalThis.Map(modules.map((module) => [module.id, module.dockerImage ?? '']));
return Object.fromEntries(moduleSet.modules.flatMap((item) => {
if (!item || typeof item !== 'object') return [];
const module = item as Record<string, unknown>;
return typeof module.id === 'string' && typeof module.dockerImage === 'string'
? [[module.id, module.dockerImage]]
: [];
return Object.fromEntries(readEnvironmentModuleIds(profile, modules).map((moduleId) => {
const configuredImage = configuredModules.get(moduleId)?.dockerImage;
return [moduleId, typeof configuredImage === 'string' ? configuredImage : moduleDefaults.get(moduleId) ?? ''];
}));
}
@@ -111,7 +146,7 @@ export function CurriculumPage({ session, selectedCourseId }: { session: AuthSes
const [referenceFile, setReferenceFile] = useState<File | null>(null);
const [exampleCodeTitle, setExampleCodeTitle] = useState('');
const [exampleCodeFile, setExampleCodeFile] = useState<File | null>(null);
const [activeTab, setActiveTab] = useState<'apply' | 'edit' | 'modules' | 'examples'>('apply');
const [activeTab, setActiveTab] = useState<'apply' | 'edit' | 'modules' | 'maps' | 'examples'>('apply');
const [error, setError] = useState<string | null>(null);
const [saving, setSaving] = useState(false);
const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false);
@@ -135,6 +170,42 @@ export function CurriculumPage({ session, selectedCourseId }: { session: AuthSes
() => `${CURRICULUM_SELECTED_GROUP_STORAGE_PREFIX}:${session.user.id}:${selectedCourseId || 'default'}`,
[selectedCourseId, session.user.id],
);
const editableEnvironmentProfiles = useMemo<EditableEnvironmentProfile[]>(() => {
if (!selectedWeek) return [];
const savedProfiles = new globalThis.Map((selectedWeek.environmentProfiles ?? []).map((profile) => [profile.platformKey, profile]));
const profilesByEnvironment = new globalThis.Map<'local' | 'platform', EditableEnvironmentProfile>();
visualizationPlatforms
.filter((platform) => visualizationEnabledByKey[platform.key])
.forEach((platform) => {
const profile = savedProfiles.get(platform.key) ?? {
id: `draft:${selectedWeek.week}:${platform.key}`,
platformKey: platform.key,
profileType: platform.type,
name: platform.displayName,
config: platform.config && typeof platform.config === 'object' && !Array.isArray(platform.config)
? platform.config as Record<string, unknown>
: undefined,
};
const storageKey = environmentStorageKey(profile);
const existing = profilesByEnvironment.get(storageKey);
if (existing) {
existing.platformKeys.push(platform.key);
return;
}
profilesByEnvironment.set(storageKey, {
...profile,
id: `draft:${selectedWeek.week}:${storageKey}`,
name: storageKey === 'local' ? '로컬' : '플랫폼',
profileType: storageKey === 'local' ? 'LOCAL' : 'PLATFORM',
storageKey,
platformKeys: [platform.key],
});
});
return [...profilesByEnvironment.values()];
}, [selectedWeek, visualizationEnabledByKey, visualizationPlatforms]);
const resolveProgressSelection = (nextWeeks: CurriculumWeek[], setting: InstructorCurriculumResponse['setting']) => {
const nextWeek = nextWeeks.find((week) => week.state === 'current')?.week
@@ -239,17 +310,21 @@ export function CurriculumPage({ session, selectedCourseId }: { session: AuthSes
setDraftPracticeContents(selectedWeek.detail.practiceContents?.length ? selectedWeek.detail.practiceContents : []);
setModuleEnabledById(Object.fromEntries((selectedWeek.modules ?? []).map((module) => [module.id, module.enabled !== false])));
setModuleDefaultParametersById(Object.fromEntries((selectedWeek.modules ?? []).map((module) => [module.id, (module.defaultParameters ?? []).map(parseModuleParameter)])));
setEnvironmentModuleIdsByPlatformKey(Object.fromEntries((selectedWeek.environmentProfiles ?? []).map((profile) => [
profile.platformKey,
readEnvironmentModuleIds(profile, selectedWeek.modules ?? []),
const profilesByEnvironment = (selectedWeek.environmentProfiles ?? []).reduce<Record<'local' | 'platform', CurriculumEnvironmentProfile[]>>((groups, profile) => {
groups[environmentStorageKey(profile)].push(profile);
return groups;
}, { local: [], platform: [] });
setEnvironmentModuleIdsByPlatformKey(Object.fromEntries(Object.entries(profilesByEnvironment).map(([key, profiles]) => [
key,
[...new Set(profiles.flatMap((profile) => readEnvironmentModuleIds(profile, selectedWeek.modules ?? [])))],
])));
setEnvironmentModuleParametersByPlatformKey(Object.fromEntries((selectedWeek.environmentProfiles ?? []).map((profile) => [
profile.platformKey,
readEnvironmentModuleParameters(profile),
setEnvironmentModuleParametersByPlatformKey(Object.fromEntries(Object.entries(profilesByEnvironment).map(([key, profiles]) => [
key,
Object.assign({}, ...profiles.map((profile) => readEnvironmentModuleParameters(profile, selectedWeek.modules ?? []))),
])));
setEnvironmentModuleDockerImagesByPlatformKey(Object.fromEntries((selectedWeek.environmentProfiles ?? []).map((profile) => [
profile.platformKey,
readEnvironmentModuleDockerImages(profile),
setEnvironmentModuleDockerImagesByPlatformKey(Object.fromEntries(Object.entries(profilesByEnvironment).map(([key, profiles]) => [
key,
Object.assign({}, ...profiles.map((profile) => readEnvironmentModuleDockerImages(profile, selectedWeek.modules ?? []))),
])));
setVisualizationEnabledByKey(Object.fromEntries((selectedWeek.visualizationPlatforms ?? []).map((platform) => [platform.key, true])));
setMapEnabledByKey(Object.fromEntries((selectedWeek.mapKeys ?? []).map((key) => [key, true])));
@@ -424,17 +499,20 @@ export function CurriculumPage({ session, selectedCourseId }: { session: AuthSes
.filter((parameter) => parameter.key.trim())
.map((parameter) => `${parameter.key.trim()}:=${parameter.value.trim()}`),
}));
const environmentModuleSets = (selectedWeek.environmentProfiles ?? []).map((profile) => ({
platformKey: profile.platformKey,
moduleIds: environmentModuleIdsByPlatformKey[profile.platformKey] ?? [],
modules: (environmentModuleIdsByPlatformKey[profile.platformKey] ?? []).map((id) => ({
const environmentModuleSets = editableEnvironmentProfiles.flatMap((profile) => {
const moduleIds = environmentModuleIdsByPlatformKey[profile.storageKey] ?? (selectedWeek.modules ?? []).map((module) => module.id);
return profile.platformKeys.map((platformKey) => ({
platformKey,
moduleIds,
modules: moduleIds.map((id) => ({
id,
defaultParameters: (environmentModuleParametersByPlatformKey[profile.platformKey]?.[id] ?? [])
defaultParameters: (environmentModuleParametersByPlatformKey[profile.storageKey]?.[id] ?? [])
.filter((parameter) => parameter.key.trim())
.map((parameter) => `${parameter.key.trim()}:=${parameter.value.trim()}`),
dockerImage: environmentModuleDockerImagesByPlatformKey[profile.platformKey]?.[id]?.trim() || undefined,
dockerImage: environmentModuleDockerImagesByPlatformKey[profile.storageKey]?.[id]?.trim() || undefined,
})),
}));
}));
});
const payload = await updateInstructorCurriculum(session.accessToken, {
courseId: selectedCourseId || null,
groupId: selectedGroupId || null,
@@ -444,9 +522,6 @@ export function CurriculumPage({ session, selectedCourseId }: { session: AuthSes
disabledModuleIds,
moduleDefaultParameters,
environmentModuleSets,
visualizationPlatformKeys: visualizationPlatforms
.filter((platform) => visualizationEnabledByKey[platform.key])
.map((platform) => platform.key),
mapKeys: mapOptions.filter((map) => mapEnabledByKey[map.key]).map((map) => map.key),
});
applyPayload(payload);
@@ -714,6 +789,13 @@ export function CurriculumPage({ session, selectedCourseId }: { session: AuthSes
>
모듈 관리
</button>
<button
type="button"
className={`h-8 rounded-md px-4 text-[13px] font-black transition ${activeTab === 'maps' ? 'bg-[#2563eb] text-white shadow-[0_8px_18px_rgba(37,99,235,0.18)]' : 'text-[#475569] hover:bg-[#e2e8f0] hover:text-[#111827]'}`}
onClick={() => setActiveTab('maps')}
>
맵 설정
</button>
<button
type="button"
className={`h-8 rounded-md px-4 text-[13px] font-black transition ${activeTab === 'examples' ? 'bg-[#2563eb] text-white shadow-[0_8px_18px_rgba(37,99,235,0.18)]' : 'text-[#475569] hover:bg-[#e2e8f0] hover:text-[#111827]'}`}
@@ -737,9 +819,9 @@ export function CurriculumPage({ session, selectedCourseId }: { session: AuthSes
</div>
<div className="flex items-center gap-2">
{activeTab !== 'examples' && !(activeTab === 'apply' && selectedWeekCompleted) ? (
<button className="inline-flex h-10 items-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" type="button" onClick={() => void (activeTab === 'apply' ? handleApply() : activeTab === 'modules' ? handleSaveModules() : handleSaveContent())} disabled={primaryActionDisabled}>
<button className="inline-flex h-10 items-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" type="button" onClick={() => void (activeTab === 'apply' ? handleApply() : activeTab === 'modules' || activeTab === 'maps' ? handleSaveModules() : handleSaveContent())} disabled={primaryActionDisabled}>
{saving ? <Loader2 className="animate-spin" size={15} aria-hidden="true" /> : activeTab === 'apply' ? <CirclePlay size={15} aria-hidden="true" /> : <Save size={15} aria-hidden="true" />}
{activeTab === 'apply' ? '진행하기' : activeTab === 'modules' ? '모듈 저장' : '내용 저장'}
{activeTab === 'apply' ? '진행하기' : activeTab === 'modules' ? '모듈 저장' : activeTab === 'maps' ? '맵 저장' : '내용 저장'}
</button>
) : null}
{activeTab === 'apply' ? (
@@ -880,127 +962,24 @@ export function CurriculumPage({ session, selectedCourseId }: { session: AuthSes
</section>
</div>
)
) : activeTab === 'modules' ? (
) : activeTab === 'modules' ? (
<div className="grid gap-4 p-5">
<section>
<div className="flex items-center justify-between gap-3">
<div>
<h3 className="text-[15px] font-black text-[#111827]">모듈 관리</h3>
<p className="mt-1 text-[12px] font-bold text-[#64748b]">체크된 모듈만 학생 앱의 모듈 리스트에 표시됩니다.</p>
</div>
{selectedWeek?.modules?.length ? (
<span className="rounded-md bg-[#eff6ff] px-3 py-1.5 text-[12px] font-black text-[#2563eb]">
{(selectedWeek.modules ?? []).filter((module) => moduleEnabledById[module.id] !== false).length}/{selectedWeek.modules.length}
</span>
) : null}
</div>
<div className="mt-3 grid gap-2">
{selectedWeek?.modules?.length ? selectedWeek.modules.map((module) => {
const enabled = moduleEnabledById[module.id] !== false;
return (
<div
key={module.id}
className={`rounded-lg border px-4 py-3 transition ${enabled ? 'border-[#d1d9e6] bg-white hover:bg-[#f8fafc]' : 'border-[#cbd5e1] bg-[#f8fafc] opacity-70 hover:bg-[#f1f5f9]'}`}
>
<div className="flex items-center gap-3">
<input
type="checkbox"
className="h-4 w-4 shrink-0 cursor-pointer rounded border-[#cbd5e1] text-[#2563eb] focus:ring-[#2563eb]"
checked={enabled}
onChange={(event) => {
const checked = event.target.checked;
setModuleEnabledById((current) => ({ ...current, [module.id]: checked }));
}}
/>
<span className="grid h-8 w-8 shrink-0 place-items-center rounded-md bg-[#ede9ff] text-[12px] font-black text-[#4f46e5]">{module.sortOrder}</span>
<span className="min-w-0 flex-1">
<span className="block truncate text-[14px] font-black text-[#111827]">{module.name}</span>
<span className="mt-1 block truncate text-[12px] font-bold text-[#64748b]">{module.category} · {module.folderName}</span>
</span>
<span className={`shrink-0 rounded-md px-2.5 py-1 text-[11px] font-black ${enabled ? 'bg-[#dcfce7] text-[#15803d]' : 'bg-[#e2e8f0] text-[#64748b]'}`}>
{enabled ? '사용' : '미사용'}
</span>
</div>
<div className="mt-3 border-t border-[#e2e8f0] pt-3">
<div className="flex items-center justify-between gap-3">
<span className="text-[12px] font-bold text-[#475569]">기본 파라미터</span>
<button
type="button"
className="inline-flex h-7 cursor-pointer items-center gap-1 rounded-md border border-[#bfdbfe] px-2 text-[12px] font-bold text-[#2563eb] transition hover:bg-[#eff6ff] disabled:cursor-not-allowed disabled:opacity-50"
disabled={!enabled}
onClick={() => setModuleDefaultParametersById((current) => ({
...current,
[module.id]: [...(current[module.id] ?? []), { key: '', value: '' }],
}))}
>
<Plus className="h-3.5 w-3.5" />
행 추가
</button>
</div>
<div className="mt-2 grid gap-2">
{(moduleDefaultParametersById[module.id] ?? []).map((parameter, parameterIndex) => (
<div className="grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)_28px] items-center gap-2" key={`${module.id}-${parameterIndex}`}>
<input
className="h-8 min-w-0 rounded-md border border-[#cbd5e1] bg-white px-2.5 font-mono text-[12px] text-[#111827] outline-none transition focus:border-[#2563eb] focus:ring-2 focus:ring-[#bfdbfe] disabled:cursor-not-allowed disabled:bg-[#f1f5f9]"
value={parameter.key}
placeholder="키"
disabled={!enabled}
onChange={(event) => setModuleDefaultParametersById((current) => ({
...current,
[module.id]: (current[module.id] ?? []).map((item, index) => index === parameterIndex ? { ...item, key: event.target.value } : item),
}))}
/>
<input
className="h-8 min-w-0 rounded-md border border-[#cbd5e1] bg-white px-2.5 font-mono text-[12px] text-[#111827] outline-none transition focus:border-[#2563eb] focus:ring-2 focus:ring-[#bfdbfe] disabled:cursor-not-allowed disabled:bg-[#f1f5f9]"
value={parameter.value}
placeholder="값"
disabled={!enabled}
onChange={(event) => setModuleDefaultParametersById((current) => ({
...current,
[module.id]: (current[module.id] ?? []).map((item, index) => index === parameterIndex ? { ...item, value: event.target.value } : item),
}))}
/>
<button
type="button"
title="행 삭제"
aria-label="행 삭제"
className="grid h-7 w-7 cursor-pointer place-items-center rounded-md text-[#94a3b8] transition hover:bg-[#fef2f2] hover:text-[#dc2626] disabled:cursor-not-allowed disabled:opacity-50"
disabled={!enabled}
onClick={() => setModuleDefaultParametersById((current) => ({
...current,
[module.id]: (current[module.id] ?? []).filter((_, index) => index !== parameterIndex),
}))}
>
<Trash2 className="h-3.5 w-3.5" />
</button>
</div>
))}
</div>
</div>
</div>
);
}) : (
<p className="rounded-lg border border-dashed border-[#d1d9e6] px-4 py-10 text-center text-[13px] font-bold text-[#64748b]">등록된 모듈이 없습니다.</p>
)}
</div>
</section>
{(selectedWeek?.environmentProfiles?.length ?? 0) > 0 ? (
<section className="border-t border-[#cbd5e1] pt-4">
{editableEnvironmentProfiles.length > 0 ? (
<section>
<div>
<h3 className="text-[15px] font-black text-[#111827]">환경별 모듈 구성</h3>
<p className="mt-1 text-[12px] font-bold text-[#64748b]">소스 저장소는 공통으로 유지하고, 로컬과 플랫폼에서 실행할 모듈만 다르게 선택합니다.</p>
</div>
<div className="mt-3 grid gap-3">
{(selectedWeek.environmentProfiles ?? []).map((profile) => {
const selectedModuleIds = new Set(environmentModuleIdsByPlatformKey[profile.platformKey] ?? []);
{editableEnvironmentProfiles.map((profile) => {
const selectedModuleIds = new Set(environmentModuleIdsByPlatformKey[profile.storageKey] ?? (selectedWeek.modules ?? []).map((module) => module.id));
const selectedCount = (selectedWeek.modules ?? []).filter((module) => selectedModuleIds.has(module.id)).length;
const targetLabel = profile.platformKey === 'futuredrive-local-pc' ? '로컬' : '플랫폼';
return (
<div key={profile.id} className="rounded-lg border border-[#d1d9e6] bg-[#f8fafc] p-3">
<div className="flex items-center justify-between gap-3">
<div className="min-w-0">
<span className="block truncate text-[13px] font-black text-[#111827]">{profile.name}</span>
<span className="mt-0.5 block text-[11px] font-bold text-[#64748b]">{targetLabel} · {profile.profileType}</span>
<span className="mt-0.5 block text-[11px] font-bold text-[#64748b]">{profile.storageKey === 'local' ? '로컬 실행 환경' : '플랫폼 실행 환경'}</span>
</div>
<span className="shrink-0 rounded-md bg-white px-2.5 py-1 text-[11px] font-black text-[#475569]">{selectedCount}/{selectedWeek.modules?.length ?? 0}</span>
</div>
@@ -1008,7 +987,7 @@ export function CurriculumPage({ session, selectedCourseId }: { session: AuthSes
{(selectedWeek.modules ?? []).map((module) => {
const globallyEnabled = moduleEnabledById[module.id] !== false;
const checked = selectedModuleIds.has(module.id);
const parameterRows = environmentModuleParametersByPlatformKey[profile.platformKey]?.[module.id] ?? [];
const parameterRows = environmentModuleParametersByPlatformKey[profile.storageKey]?.[module.id] ?? [];
return (
<div
key={module.id}
@@ -1023,21 +1002,21 @@ export function CurriculumPage({ session, selectedCourseId }: { session: AuthSes
onChange={(event) => {
const enabled = event.target.checked;
setEnvironmentModuleIdsByPlatformKey((current) => {
const currentIds = new Set(current[profile.platformKey] ?? []);
const currentIds = new Set(current[profile.storageKey] ?? (selectedWeek.modules ?? []).map((item) => item.id));
if (enabled) currentIds.add(module.id);
else currentIds.delete(module.id);
return { ...current, [profile.platformKey]: [...currentIds] };
return { ...current, [profile.storageKey]: [...currentIds] };
});
if (!enabled) {
setEnvironmentModuleParametersByPlatformKey((current) => {
const profileParameters = { ...(current[profile.platformKey] ?? {}) };
const profileParameters = { ...(current[profile.storageKey] ?? {}) };
delete profileParameters[module.id];
return { ...current, [profile.platformKey]: profileParameters };
return { ...current, [profile.storageKey]: profileParameters };
});
setEnvironmentModuleDockerImagesByPlatformKey((current) => {
const profileImages = { ...(current[profile.platformKey] ?? {}) };
const profileImages = { ...(current[profile.storageKey] ?? {}) };
delete profileImages[module.id];
return { ...current, [profile.platformKey]: profileImages };
return { ...current, [profile.storageKey]: profileImages };
});
}
}}
@@ -1049,13 +1028,13 @@ export function CurriculumPage({ session, selectedCourseId }: { session: AuthSes
<label className="mb-2 block text-[10px] text-[#64748b]">
<span className="mb-1 block">실행 이미지</span>
<input
value={environmentModuleDockerImagesByPlatformKey[profile.platformKey]?.[module.id] ?? ''}
value={environmentModuleDockerImagesByPlatformKey[profile.storageKey]?.[module.id] ?? ''}
placeholder={module.dockerImage ?? '기본 이미지 사용'}
className="h-7 w-full rounded border border-[#dbe3ee] px-1.5 font-mono text-[11px] font-medium outline-none focus:border-[#60a5fa]"
onChange={(event) => setEnvironmentModuleDockerImagesByPlatformKey((current) => ({
...current,
[profile.platformKey]: {
...(current[profile.platformKey] ?? {}),
[profile.storageKey]: {
...(current[profile.storageKey] ?? {}),
[module.id]: event.target.value,
},
}))}
@@ -1069,9 +1048,9 @@ export function CurriculumPage({ session, selectedCourseId }: { session: AuthSes
aria-label={`${module.name} 파라미터 추가`}
onClick={() => setEnvironmentModuleParametersByPlatformKey((current) => ({
...current,
[profile.platformKey]: {
...(current[profile.platformKey] ?? {}),
[module.id]: [...(current[profile.platformKey]?.[module.id] ?? []), { key: '', value: '' }],
[profile.storageKey]: {
...(current[profile.storageKey] ?? {}),
[module.id]: [...(current[profile.storageKey]?.[module.id] ?? []), { key: '', value: '' }],
},
}))}
>
@@ -1085,9 +1064,9 @@ export function CurriculumPage({ session, selectedCourseId }: { session: AuthSes
placeholder="키"
className="min-w-0 flex-1 rounded border border-[#dbe3ee] px-1.5 py-1 text-[11px] font-medium outline-none focus:border-[#60a5fa]"
onChange={(event) => setEnvironmentModuleParametersByPlatformKey((current) => {
const rows = [...(current[profile.platformKey]?.[module.id] ?? [])];
const rows = [...(current[profile.storageKey]?.[module.id] ?? [])];
rows[parameterIndex] = { ...rows[parameterIndex], key: event.target.value };
return { ...current, [profile.platformKey]: { ...(current[profile.platformKey] ?? {}), [module.id]: rows } };
return { ...current, [profile.storageKey]: { ...(current[profile.storageKey] ?? {}), [module.id]: rows } };
})}
/>
<input
@@ -1095,9 +1074,9 @@ export function CurriculumPage({ session, selectedCourseId }: { session: AuthSes
placeholder="값"
className="min-w-0 flex-1 rounded border border-[#dbe3ee] px-1.5 py-1 text-[11px] font-medium outline-none focus:border-[#60a5fa]"
onChange={(event) => setEnvironmentModuleParametersByPlatformKey((current) => {
const rows = [...(current[profile.platformKey]?.[module.id] ?? [])];
const rows = [...(current[profile.storageKey]?.[module.id] ?? [])];
rows[parameterIndex] = { ...rows[parameterIndex], value: event.target.value };
return { ...current, [profile.platformKey]: { ...(current[profile.platformKey] ?? {}), [module.id]: rows } };
return { ...current, [profile.storageKey]: { ...(current[profile.storageKey] ?? {}), [module.id]: rows } };
})}
/>
<button
@@ -1106,9 +1085,9 @@ export function CurriculumPage({ session, selectedCourseId }: { session: AuthSes
aria-label={`${module.name} 파라미터 삭제`}
onClick={() => setEnvironmentModuleParametersByPlatformKey((current) => ({
...current,
[profile.platformKey]: {
...(current[profile.platformKey] ?? {}),
[module.id]: (current[profile.platformKey]?.[module.id] ?? []).filter((_, index) => index !== parameterIndex),
[profile.storageKey]: {
...(current[profile.storageKey] ?? {}),
[module.id]: (current[profile.storageKey]?.[module.id] ?? []).filter((_, index) => index !== parameterIndex),
},
}))}
>
@@ -1128,63 +1107,15 @@ export function CurriculumPage({ session, selectedCourseId }: { session: AuthSes
</div>
</section>
) : null}
<section className="border-t border-[#cbd5e1] pt-4">
<div className="flex items-center justify-between gap-3">
<div>
<h3 className="text-[15px] font-black text-[#111827]">시각화 플랫폼</h3>
<p className="mt-1 text-[12px] font-bold text-[#64748b]">시각화 화면을 사용할 플랫폼을 선택하세요.</p>
</div>
{visualizationPlatforms.length ? (
<span className="rounded-md bg-[#f1f5f9] px-3 py-1.5 text-[12px] font-black text-[#475569]">
{visualizationPlatforms.filter((platform) => visualizationEnabledByKey[platform.key]).length}/{visualizationPlatforms.length}
</span>
) : null}
</div>
<div className="mt-3 grid gap-2">
{visualizationPlatforms.length ? visualizationPlatforms.map((platform) => {
const enabled = Boolean(visualizationEnabledByKey[platform.key]);
return (
<label
key={platform.key}
className={`flex cursor-pointer items-center gap-3 rounded-lg border px-4 py-3 transition ${enabled ? 'border-[#d1d9e6] bg-white hover:bg-[#f8fafc]' : 'border-[#cbd5e1] bg-[#f8fafc] opacity-75 hover:bg-[#f1f5f9]'}`}
>
<input
type="checkbox"
className="h-4 w-4 shrink-0 cursor-pointer rounded border-[#cbd5e1] text-[#2563eb] focus:ring-[#2563eb]"
checked={enabled}
onChange={(event) => {
const checked = event.target.checked;
setVisualizationEnabledByKey((current) => ({ ...current, [platform.key]: checked }));
}}
/>
<span className="min-w-0 flex-1">
<span className="block truncate text-[14px] font-black text-[#111827]">{platform.displayName}</span>
<span className="mt-1 block truncate text-[12px] font-bold text-[#64748b]">{platform.description ?? '실행 설정 정보 없음'}</span>
</span>
<span className={`shrink-0 rounded-md px-2.5 py-1 text-[11px] font-black ${enabled ? 'bg-[#dcfce7] text-[#15803d]' : 'bg-[#e2e8f0] text-[#64748b]'}`}>
{enabled ? '사용' : '미사용'}
</span>
</label>
);
}) : (
<p className="rounded-lg border border-dashed border-[#d1d9e6] px-4 py-10 text-center text-[13px] font-bold text-[#64748b]">등록된 시각화 플랫폼이 없습니다.</p>
)}
</div>
</section>
<section className="border-t border-[#cbd5e1] pt-4">
<div className="flex items-center justify-between gap-3">
</div>
) : activeTab === 'maps' ? (
<div className="grid gap-4 p-5">
<section>
<div>
<div>
<h3 className="text-[15px] font-black text-[#111827]">학습 맵</h3>
<p className="mt-1 text-[12px] font-bold text-[#64748b]">학생이 맵 선택 화면에서 사용할 NAV2 학습 환경을 선택하세요.</p>
</div>
<button
type="button"
onClick={() => setMapCreateOpen(true)}
className="inline-flex h-8 items-center gap-1.5 rounded-md border border-[#d1d9e6] bg-white px-3 text-[12px] font-black text-[#475569] transition hover:border-[#2563eb] hover:bg-[#eff6ff] hover:text-[#2563eb]"
>
<Plus size={14} aria-hidden="true" />
맵 추가
</button>
</div>
<div className="mt-3 grid gap-2">
{mapOptions.map((map) => {
@@ -1588,7 +1519,7 @@ export function CurriculumPage({ session, selectedCourseId }: { session: AuthSes
</div>
</section>
{mapCreateOpen ? (
{mapCreateOpen ? createPortal(
<div className="fixed inset-0 z-50 grid place-items-center bg-slate-950/45 p-5" role="dialog" aria-modal="true" aria-label="학습 맵 추가">
<section className="w-full max-w-[420px] rounded-lg border border-[#cbd5e1] bg-white shadow-2xl">
<header className="border-b border-[#e2e8f0] px-5 py-4">
@@ -1614,7 +1545,7 @@ export function CurriculumPage({ session, selectedCourseId }: { session: AuthSes
</footer>
</section>
</div>
) : null}
, document.body) : null}
<ConfirmDialog
open={deleteConfirmOpen && Boolean(selectedWeek)}