커밋.

2026-06-24 11:22:52 +09:00
parent 895b86d204
commit 1b3df4e85c
292 changed files with 497812 additions and 0 deletions
@@ -0,0 +1,63 @@
+import { CheckCircle2, Clock3, Gauge, TrendingUp } from 'lucide-react'
+import type { LucideIcon } from 'lucide-react'
+import type React from 'react'
+
+export type LearningStatItem = {
+  key: string
+  value: string
+  label: string
+  iconKey: string
+}
+
+const STAT_ICONS: Record<string, LucideIcon> = {
+  check: CheckCircle2,
+  clock: Clock3,
+  trending: TrendingUp,
+  gauge: Gauge
+}
+
+type LearningStatsCardProps = {
+  stats: LearningStatItem[]
+}
+
+export default function LearningStatsCard({ stats }: LearningStatsCardProps): React.JSX.Element {
+  return (
+    <section className="rounded-lg border border-[#d6dce8] bg-white/95 p-4 shadow-[0_16px_36px_rgba(20,27,44,0.10)]">
+      <div>
+        <div>
+          <strong className="block font-bold">내 학습 현황</strong>
+          <span className="mt-1 block text-[12px] font-medium text-[#5f6878]">전체 진행 상황 및 통계</span>
+        </div>
+      </div>
+
+      <div className="mt-4 overflow-hidden rounded-lg border border-[#dfe3ed] bg-[#fbfcff] shadow-[0_10px_24px_rgba(20,27,44,0.06)]">
+        {stats.length ? (
+          stats.map(({ value, label, iconKey }, index) => {
+            const Icon = STAT_ICONS[iconKey] ?? Gauge
+            return (
+              <div
+                key={label}
+                className={[
+                  'flex min-h-[52px] items-center justify-between gap-3 px-3.5',
+                  index > 0 ? 'border-t border-[#edf0f5]' : ''
+                ].join(' ')}
+              >
+                <div className="flex min-w-0 items-center gap-1.5">
+                  <span className="grid h-8 w-8 shrink-0 place-items-center rounded-full bg-[#e9e3ff] text-[#5b48c9]">
+                    <Icon size={15} strokeWidth={2.4} />
+                  </span>
+                  <span className="truncate text-[12px] font-medium text-[#4f596b]">{label}</span>
+                </div>
+                <strong className="shrink-0 text-right text-[15px] font-bold text-[#151827]">{value}</strong>
+              </div>
+            )
+          })
+        ) : (
+          <div className="px-4 py-6 text-center text-[12px] font-semibold text-[#687284]">
+            학습 현황 데이터가 없습니다.
+          </div>
+        )}
+      </div>
+    </section>
+  )
+}