바이브 코딩: 프로젝트 시작 화면과 라우팅

2026-05-21 23:02:25 +09:00
parent 1039b7b03c
commit 582c03a985
16 changed files with 4067 additions and 1 deletions
@@ -0,0 +1,30 @@
+import Link from "next/link";
+
+export default function PlayPage() {
+  return (
+    <main className="flex min-h-screen items-center bg-white 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">
+            괄호 음수 분배
+          </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>
+          <Link
+            href="/"
+            className="inline-flex h-11 items-center justify-center rounded-md border border-slate-300 px-5 text-base font-semibold text-slate-800 transition hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2"
+          >
+            처음으로
+          </Link>
+        </div>
+      </section>
+    </main>
+  );
+}
@@ -0,0 +1,27 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+body {
+  color: var(--foreground);
+  background: var(--background);
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+}
@@ -0,0 +1,35 @@
+import type { Metadata } from "next";
+import localFont from "next/font/local";
+import "./globals.css";
+
+const geistSans = localFont({
+  src: "./fonts/GeistVF.woff",
+  variable: "--font-geist-sans",
+  weight: "100 900",
+});
+const geistMono = localFont({
+  src: "./fonts/GeistMonoVF.woff",
+  variable: "--font-geist-mono",
+  weight: "100 900",
+});
+
+export const metadata: Metadata = {
+  title: "괄호 음수 분배 연습",
+  description: "중학교 2학년 수학 실수 유형 반복 연습",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="ko">
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        {children}
+      </body>
+    </html>
+  );
+}
@@ -0,0 +1,36 @@
+import Link from "next/link";
+
+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>
+          <Link
+            href="/play"
+            className="inline-flex h-12 items-center justify-center rounded-md bg-emerald-700 px-6 text-base font-semibold text-white transition hover:bg-emerald-800 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2"
+          >
+            연습 시작
+          </Link>
+        </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>
+  );
+}