feat: add LMS web client

2026-07-15 13:41:00 +09:00
commit 05ff2644e8
308 changed files with 487923 additions and 0 deletions
@@ -0,0 +1,80 @@
+import { ChevronLeft, X } from 'lucide-react'
+import type React from 'react'
+import PlatformLoadingOverlay from '../../components/PlatformLoadingOverlay'
+
+type PlatformSelectModalProps = {
+  mode: 'select' | 'settings'
+  weekLabel: string
+  loading: boolean
+  loadingTitle: string
+  loadingDescription: string
+  onBack: () => void
+  onClose: () => void
+  children: React.ReactNode
+}
+
+export default function PlatformSelectModal({
+  mode,
+  weekLabel,
+  loading,
+  loadingTitle,
+  loadingDescription,
+  onBack,
+  onClose,
+  children
+}: PlatformSelectModalProps): React.JSX.Element {
+  return (
+    <div className="fixed bottom-0 left-0 right-0 top-[38px] z-50 grid place-items-center bg-[#080a10]/35 p-6 backdrop-blur-[2px]">
+      <section className="flex h-[660px] w-full max-w-[560px] flex-col overflow-hidden rounded-xl border border-[#dfe3ed] bg-white shadow-[0_28px_80px_rgba(8,10,16,0.28)]">
+        <header className="flex items-start justify-between gap-4 border-b border-[#e5e8ef] px-6 pb-4 pt-5">
+          <div>
+            <span className="text-[12px] font-medium text-[#6f4df6]">{weekLabel}</span>
+            <h2 data-help="platform-modal-title" className="mt-1 flex items-center gap-2 text-[22px] font-bold leading-tight text-[#111520]">
+              {mode === 'settings' && (
+                <button
+                  type="button"
+                  aria-label="플랫폼 선택으로 돌아가기"
+                  onClick={onBack}
+                  className="grid h-7 w-7 cursor-pointer place-items-center rounded-md text-[#697386] transition hover:bg-[#f0f2f7] hover:text-[#111520]"
+                >
+                  <ChevronLeft size={18} />
+                </button>
+              )}
+              {mode === 'settings' ? '플랫폼 설정' : '플랫폼 선택'}
+            </h2>
+            <p className="mt-2 text-[13px] font-medium text-[#5f6878]">
+              {mode === 'settings'
+                ? '플랫폼별 개발 환경 설정을 관리하세요.'
+                : '실습을 진행할 플랫폼을 선택하고 제어권을 요청하세요.'}
+            </p>
+          </div>
+          <button
+            type="button"
+            aria-label="닫기"
+            onClick={onClose}
+            className="grid h-8 w-8 shrink-0 cursor-pointer place-items-center rounded-md text-[#697386] transition hover:bg-[#f0f2f7] hover:text-[#111520]"
+          >
+            <X size={17} />
+          </button>
+        </header>
+
+        <div className="relative min-h-0 flex-1 overflow-hidden">
+          <div
+            className={[
+              'flex h-full w-[200%] transition-[transform,opacity] duration-300 ease-out',
+              mode === 'settings' ? '-translate-x-1/2' : 'translate-x-0'
+            ].join(' ')}
+          >
+            {children}
+          </div>
+        </div>
+        {loading && (
+          <PlatformLoadingOverlay
+            title={loadingTitle}
+            description={loadingDescription}
+          />
+        )}
+      </section>
+    </div>
+  )
+}