CHORE(app): initial configuration

- Add initial app settings
- Configure base deployment

services/nextjs/app/api/health/route.ts

@@ -0,0 +1,25 @@
+import { NextResponse } from 'next/server'
+import { prisma } from '@/shared/lib/prisma'
+
+export async function GET() {
+  try {
+    // 데이터베이스 연결 확인
+    await prisma.$queryRaw`SELECT 1`
+    
+    return NextResponse.json({
+      status: 'ok',
+      timestamp: new Date().toISOString(),
+      database: 'connected'
+    })
+  } catch {
+    return NextResponse.json(
+      {
+        status: 'error',
+        timestamp: new Date().toISOString(),
+        error: 'Database connection failed'
+      },
+      { status: 503 }
+    )
+  }
+}
+

services/nextjs/app/api/todos/[id]/route.ts

@@ -0,0 +1,79 @@
+import { NextResponse } from 'next/server'
+import { prisma } from '@/shared/lib/prisma'
+import { corsHeaders, handleCorsPreFlight } from '@/shared/lib/cors'
+import type { Prisma } from '@prisma/client'
+
+// OPTIONS - CORS preflight 처리
+export async function OPTIONS() {
+  return handleCorsPreFlight()
+}
+
+// PUT - TODO 업데이트
+export async function PUT(
+  request: Request,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  try {
+    const { id: idParam } = await params
+    const id = parseInt(idParam)
+    const body = await request.json()
+
+    const updateData: Prisma.TodoUpdateInput = {}
+    if (body.title !== undefined) updateData.title = body.title
+    if (body.description !== undefined) updateData.description = body.description
+    if (body.completed !== undefined) updateData.completed = body.completed
+    if (body.priority !== undefined) updateData.priority = body.priority
+
+    const todo = await prisma.todo.update({
+      where: { id },
+      data: updateData,
+    })
+
+    const response = NextResponse.json({ success: true, data: todo })
+    Object.entries(corsHeaders()).forEach(([key, value]) => {
+      response.headers.set(key, value)
+    })
+    return response
+  } catch (error) {
+    console.error('Error updating todo:', error)
+    const response = NextResponse.json(
+      { success: false, error: 'Failed to update todo' },
+      { status: 500 }
+    )
+    Object.entries(corsHeaders()).forEach(([key, value]) => {
+      response.headers.set(key, value)
+    })
+    return response
+  }
+}
+
+// DELETE - TODO 삭제
+export async function DELETE(
+  request: Request,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  try {
+    const { id: idParam } = await params
+    const id = parseInt(idParam)
+    await prisma.todo.delete({
+      where: { id },
+    })
+
+    const response = NextResponse.json({ success: true, message: 'Todo deleted' })
+    Object.entries(corsHeaders()).forEach(([key, value]) => {
+      response.headers.set(key, value)
+    })
+    return response
+  } catch (error) {
+    console.error('Error deleting todo:', error)
+    const response = NextResponse.json(
+      { success: false, error: 'Failed to delete todo' },
+      { status: 500 }
+    )
+    Object.entries(corsHeaders()).forEach(([key, value]) => {
+      response.headers.set(key, value)
+    })
+    return response
+  }
+}
+

services/nextjs/app/api/todos/route.ts

@@ -0,0 +1,65 @@
+import { NextResponse } from 'next/server'
+import { prisma } from '@/shared/lib/prisma'
+import { corsHeaders, handleCorsPreFlight } from '@/shared/lib/cors'
+
+// OPTIONS - CORS preflight 처리
+export async function OPTIONS() {
+  return handleCorsPreFlight()
+}
+
+// GET - 모든 TODO 가져오기
+export async function GET() {
+  try {
+    const todos = await prisma.todo.findMany({
+      orderBy: { createdAt: 'desc' },
+    })
+    const response = NextResponse.json({ success: true, data: todos })
+    Object.entries(corsHeaders()).forEach(([key, value]) => {
+      response.headers.set(key, value)
+    })
+    return response
+  } catch (error) {
+    console.error('Error fetching todos:', error)
+    const response = NextResponse.json(
+      { success: false, error: 'Failed to fetch todos' },
+      { status: 500 }
+    )
+    Object.entries(corsHeaders()).forEach(([key, value]) => {
+      response.headers.set(key, value)
+    })
+    return response
+  }
+}
+
+// POST - TODO 생성
+export async function POST(request: Request) {
+  try {
+    const body = await request.json()
+    
+    const todo = await prisma.todo.create({
+      data: {
+        title: body.title,
+        description: body.description || null,
+        completed: body.completed || false,
+        priority: body.priority || 'medium',
+      },
+    })
+
+    const response = NextResponse.json({ success: true, data: todo }, { status: 201 })
+    Object.entries(corsHeaders()).forEach(([key, value]) => {
+      response.headers.set(key, value)
+    })
+    return response
+  } catch (error) {
+    console.error('Error creating todo:', error)
+    const response = NextResponse.json(
+      { success: false, error: 'Failed to create todo' },
+      { status: 500 }
+    )
+    Object.entries(corsHeaders()).forEach(([key, value]) => {
+      response.headers.set(key, value)
+    })
+    return response
+  }
+}
+

services/nextjs/app/globals.css

@@ -0,0 +1,172 @@
+@import "tailwindcss";
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 221.2 83.2% 53.3%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96%;
+    --secondary-foreground: 222.2 84% 4.9%;
+    --muted: 210 40% 96%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96%;
+    --accent-foreground: 222.2 84% 4.9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 221.2 83.2% 53.3%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 217.2 91.2% 59.8%;
+    --primary-foreground: 222.2 84% 4.9%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 224.3 76.3% 94.1%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-gray-200;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

services/nextjs/app/layout.tsx

@@ -0,0 +1,34 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "Todo App - 할 일 관리",
+  description: "효율적으로 할 일을 관리하고 생산성을 높여보세요",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        {children}
+      </body>
+    </html>
+  );
+}

services/nextjs/app/page.tsx

@@ -0,0 +1,5 @@
+import { TodoApp } from '@/src/widgets/todo-app'
+
+export default function Home() {
+  return <TodoApp />
+}

services/nextjs/app/tailwind/page.tsx

@@ -0,0 +1,184 @@
+export default function Home() {
+  return (
+    <div className="min-h-screen bg-gray-100 p-8">
+      <h1 className="text-3xl font-bold text-center mb-8">Tailwind CSS 학습 자료</h1>
+
+      <div className="max-w-4xl mx-auto space-y-12">
+
+        {/* 색상 학습 */}
+        <section className="bg-white p-6 rounded-lg shadow-md">
+          <h2 className="text-xl font-semibold mb-4">1. 글씨 색상 (Text Color)</h2>
+          <div className="space-y-2">
+            {/* 여기에는 빨간색 글씨가 와야합니다 */}
+            <p className="fillout">이 텍스트는 빨간색이어야 합니다</p>
+
+            {/* 여기에는 파란색 글씨가 와야합니다 */}
+            <p className="fillout">이 텍스트는 파란색이어야 합니다</p>
+
+            {/* 여기에는 초록색 글씨가 와야합니다 */}
+            <p className="fillout">이 텍스트는 초록색이어야 합니다</p>
+          </div>
+        </section>
+
+        {/* 넓이와 높이 학습 */}
+        <section className="bg-white p-6 rounded-lg shadow-md">
+          <h2 className="text-xl font-semibold mb-4">2. 넓이와 높이 (Width & Height)</h2>
+          <div className="space-y-4">
+            {/* 여기에는 넓이 200px, 높이 100px이 와야합니다 */}
+            <div className="fillout bg-blue-200"></div>
+
+            {/* 여기에는 넓이는 전체의 50%, 높이 150px이 와야합니다 */}
+            <div className="fillout bg-green-200"></div>
+
+            {/* 여기에는 넓이와 높이가 모두 80px인 정사각형이 와야합니다 */}
+            <div className="fillout bg-purple-200"></div>
+          </div>
+        </section>
+
+        {/* 그림자 학습 */}
+        <section className="bg-white p-6 rounded-lg shadow-md">
+          <h2 className="text-xl font-semibold mb-4">3. 그림자 (Shadow)</h2>
+          <div className="flex gap-4">
+            {/* 여기에는 작은 그림자가 와야합니다 */}
+            <div className="fillout bg-white p-4">작은 그림자</div>
+
+            {/* 여기에는 중간 크기 그림자가 와야합니다 */}
+            <div className="fillout bg-white p-4">중간 그림자</div>
+
+            {/* 여기에는 큰 그림자가 와야합니다 */}
+            <div className="fillout bg-white p-4">큰 그림자</div>
+          </div>
+        </section>
+
+        {/* 글씨 크기 학습 */}
+        <section className="bg-white p-6 rounded-lg shadow-md">
+          <h2 className="text-xl font-semibold mb-4">4. 글씨 크기 (Text Size)</h2>
+          <div className="space-y-2">
+            {/* 여기에는 매우 작은 글씨(12px)가 와야합니다 */}
+            <p className="fillout">작은 글씨</p>
+
+            {/* 여기에는 기본 글씨 크기가 와야합니다 */}
+            <p className="fillout">기본 글씨</p>
+
+            {/* 여기에는 큰 글씨(24px)가 와야합니다 */}
+            <p className="fillout">큰 글씨</p>
+
+            {/* 여기에는 매우 큰 글씨(36px)가 와야합니다 */}
+            <p className="fillout">매우 큰 글씨</p>
+          </div>
+        </section>
+
+        {/* Flex 학습 */}
+        <section className="bg-white p-6 rounded-lg shadow-md">
+          <h2 className="text-xl font-semibold mb-4">5. Flex</h2>
+          <div className="space-y-6">
+            {/* 여기에는 가로로 배치되는 flex container가 와야합니다 */}
+            <div className="fillout gap-4">
+              <div className="bg-blue-300 p-3">Item 1</div>
+              <div className="bg-blue-300 p-3">Item 2</div>
+              <div className="bg-blue-300 p-3">Item 3</div>
+            </div>
+
+            {/* 여기에는 세로로 배치되는 flex container가 와야합니다 */}
+            <div className="fillout gap-4">
+              <div className="bg-green-300 p-3">Item A</div>
+              <div className="bg-green-300 p-3">Item B</div>
+              <div className="bg-green-300 p-3">Item C</div>
+            </div>
+
+            {/* 여기에는 가로로 배치되면서 아이템들이 가운데 정렬되는 flex container가 와야합니다 */}
+            <div className="fillout gap-4">
+              <div className="bg-purple-300 p-3">중앙</div>
+              <div className="bg-purple-300 p-3">정렬</div>
+            </div>
+          </div>
+        </section>
+
+        {/* 정렬 학습 */}
+        <section className="bg-white p-6 rounded-lg shadow-md">
+          <h2 className="text-xl font-semibold mb-4">6. 정렬 (Alignment)</h2>
+          <div className="space-y-6">
+            {/* 여기에는 텍스트가 왼쪽 정렬되어야 합니다 */}
+            <p className="fillout bg-gray-200 p-3">왼쪽 정렬된 텍스트입니다</p>
+
+            {/* 여기에는 텍스트가 가운데 정렬되어야 합니다 */}
+            <p className="fillout bg-gray-200 p-3">가운데 정렬된 텍스트입니다</p>
+
+            {/* 여기에는 텍스트가 오른쪽 정렬되어야 합니다 */}
+            <p className="fillout bg-gray-200 p-3">오른쪽 정렬된 텍스트입니다</p>
+          </div>
+        </section>
+
+        {/* 둥근 모서리 학습 */}
+        <section className="bg-white p-6 rounded-lg shadow-md">
+          <h2 className="text-xl font-semibold mb-4">7. 둥근 모서리 (Rounded Corners)</h2>
+          <div className="flex gap-4 items-center">
+            {/* 여기에는 약간 둥근 모서리가 와야합니다 */}
+            <div className="fillout bg-blue-400 p-6">약간 둥근 모서리</div>
+
+            {/* 여기에는 중간 정도 둥근 모서리가 와야합니다 */}
+            <div className="fillout bg-green-400 p-6">중간 둥근 모서리</div>
+
+            {/* 여기에는 매우 둥근 모서리(원에 가까운)가 와야합니다 */}
+            <div className="fillout bg-purple-400 p-6">매우 둥근 모서리</div>
+
+            {/* 여기에는 완전한 원이 와야합니다 (넓이와 높이가 같고 매우 둥근 모서리) */}
+            <div className="fillout bg-pink-400"></div>
+          </div>
+        </section>
+
+        {/* 마진 학습 */}
+        <section className="bg-white p-6 rounded-lg shadow-md">
+          <h2 className="text-xl font-semibold mb-4">8. 마진 (Margin)</h2>
+          <div>
+            {/* 여기에는 위쪽에 마진이 4단위(16px) 와야합니다 */}
+            <div className="fillout bg-yellow-300 p-4">위쪽 마진 16px</div>
+
+            {/* 여기에는 좌우에 마진이 각각 8단위(32px) 와야합니다 */}
+            <div className="fillout bg-orange-300 p-4">좌우 마진 32px</div>
+
+            {/* 여기에는 모든 방향에 마진이 12단위(48px) 와야합니다 */}
+            <div className="fillout bg-red-300 p-4">모든 방향 마진 48px</div>
+          </div>
+        </section>
+
+        {/* 패딩 학습 */}
+        <section className="bg-white p-6 rounded-lg shadow-md">
+          <h2 className="text-xl font-semibold mb-4">9. 패딩 (Padding)</h2>
+          <div className="space-y-4">
+            {/* 여기에는 패딩이 2단위(8px) 와야합니다 */}
+            <div className="fillout bg-blue-200">작은 패딩 (8px)</div>
+
+            {/* 여기에는 패딩이 6단위(24px) 와야합니다 */}
+            <div className="fillout bg-green-200">중간 패딩 (24px)</div>
+
+            {/* 여기에는 패딩이 12단위(48px) 와야합니다 */}
+            <div className="fillout bg-purple-200">큰 패딩 (48px)</div>
+
+            {/* 여기에는 위아래 패딩 4단위, 좌우 패딩 8단위가 와야합니다 */}
+            <div className="fillout bg-pink-200">세로 16px, 가로 32px 패딩</div>
+          </div>
+        </section>
+
+        {/* 종합 예제 */}
+        <section className="bg-white p-6 rounded-lg shadow-md">
+          <h2 className="text-xl font-semibold mb-4">10. 종합 예제 (모든 개념 사용)</h2>
+          {/* 여기에는 다음 조건들이 모두 적용되어야 합니다:
+              - 넓이 300px, 높이 200px
+              - 파란색 배경
+              - 가운데 정렬된 텍스트(행,열 전부 정렬되어있어야 합니다.)
+              - 큰 그림자
+              - 둥근 모서리
+              - 모든 방향 패딩 24px
+              - 위쪽 마진 16px
+              - 흰색 텍스트, 큰 글씨
+          */}
+          <div className="fillout">
+            종합 예제 박스
+          </div>
+        </section>
+
+      </div>
+    </div>
+  );
+}