100 lines
3.4 KiB
TypeScript
100 lines
3.4 KiB
TypeScript
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: "괄호 안에 미지수 x가 들어간 식의 부호 변화를 연습합니다.",
|
|
href: "/variable-parentheses",
|
|
disabled: false,
|
|
},
|
|
];
|
|
|
|
export default function Home() {
|
|
return (
|
|
<main className="flex min-h-screen items-center bg-slate-50 px-6 py-12 text-slate-950">
|
|
<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학년 수학 - 학습 내용 선택
|
|
</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>
|
|
|
|
<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>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
);
|
|
}
|