학습 내용 선택 화면 추가

app/page.tsx

@@ -1,4 +1,41 @@
-import StartControls from "./StartControls";
+import Link from "next/link";
+
+type Subject =
+  | {
+      label: string;
+      description: string;
+      href: string;
+      disabled: false;
+    }
+  | {
+      label: string;
+      description: string;
+      disabled: true;
+    };
+
+const subjects: Subject[] = [
+  {
+    label: "숫자 괄호 풀기",
+    description: "정수로 이루어진 괄호식을 풀며 부호 변화를 연습합니다.",
+    href: "/number-parentheses",
+    disabled: false,
+  },
+  {
+    label: "분수 괄호 풀기",
+    description: "분수가 들어간 괄호식은 이후 단계에서 추가됩니다.",
+    disabled: true,
+  },
+  {
+    label: "실수 괄호 풀기",
+    description: "실수가 들어간 괄호식은 이후 단계에서 추가됩니다.",
+    disabled: true,
+  },
+  {
+    label: "미지수 괄호 풀기",
+    description: "미지수가 들어간 괄호식은 이후 단계에서 추가됩니다.",
+    disabled: true,
+  },
+];
 
 export default function Home() {
   return (
@@ -6,21 +43,54 @@ export default function Home() {
       <section className="mx-auto flex w-full max-w-3xl flex-col gap-8">
         <div className="space-y-4">
           <p className="text-sm font-semibold text-emerald-700">
-            중학교 2학년 수학 - 괄호 풀기 연습
+            중학교 2학년 수학 - 학습 내용 선택
           </p>
           <h1 className="text-4xl font-bold tracking-normal sm:text-5xl">
-            괄호 음수 분배 연습
+            오늘 연습할 괄호 유형을 고르세요
           </h1>
           <p className="max-w-2xl text-lg leading-8 text-slate-700">
-            괄호 앞의 음수를 분배할 때 부호가 어떻게 바뀌는지 차근차근
-            연습합니다.
+            괄호 앞의 음수를 분배할 때 부호가 어떻게 바뀌는지 학습
+            내용별로 차근차근 연습합니다.
           </p>
         </div>
 
-        <StartControls />
+        <div className="grid gap-3 sm:grid-cols-2">
+          {subjects.map((subject) => {
+            if (!subject.disabled) {
+              return (
+                <Link
+                  key={subject.label}
+                  href={subject.href}
+                  className="flex min-h-32 flex-col justify-between rounded-md bg-white p-5 text-left shadow-sm ring-1 ring-slate-200 transition hover:-translate-y-0.5 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2"
+                >
+                  <span className="text-xl font-bold text-slate-950">
+                    {subject.label}
+                  </span>
+                  <span className="mt-4 text-sm leading-6 text-slate-600">
+                    {subject.description}
+                  </span>
+                </Link>
+              );
+            }
+
+            return (
+              <button
+                key={subject.label}
+                type="button"
+                disabled
+                className="flex min-h-32 cursor-not-allowed flex-col justify-between rounded-md bg-slate-100 p-5 text-left text-slate-400 ring-1 ring-slate-200"
+              >
+                <span className="text-xl font-bold">{subject.label}</span>
+                <span className="mt-4 text-sm leading-6">
+                  {subject.description}
+                </span>
+              </button>
+            );
+          })}
+        </div>
 
         <div className="border-l-4 border-emerald-700 pl-4 text-sm leading-6 text-slate-600">
-          <p>반복할 문제 수를 선택한 뒤, [연습 시작] 버튼을 클릭하세요.</p>
+          <p>지금은 숫자 괄호 학습만 사용할 수 있습니다.</p>
         </div>
       </section>
     </main>