CHORE(app): initial configuration

- Add initial app settings - Configure base deployment
2025-11-24 22:09:18 +09:00
parent f1fadca73e
commit 8b195378a5
70 changed files with 2694 additions and 21 deletions
--- a/services/nextjs/.gitignore
+++ b/services/nextjs/.gitignore
@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
--- a/services/nextjs/README.md
+++ b/services/nextjs/README.md
@@ -0,0 +1,146 @@
+# Todo App - Pool-C 세미나
+
+대학생을 위한 웹 개발 세미나에서 제작된 Todo 애플리케이션입니다.
+
+## 📚 세미나 소개
+
+이 프로젝트는 풀씨 동아리 분들과 함께 진행된 웹 개발 세미나의 실습 프로젝트입니다.
+웹 개발의 핵심 개념과 최신 기술 스택을 공부하기 위해 제작되었습니다.
+
+### 학습 목표
+
+- Feature-Sliced Design (FSD) 아키텍처 이해
+- Next.js와 React의 최신 기능 활용
+- TypeScript를 통한 타입 안전성 확보
+- 상태 관리 라이브러리 (Zustand) 사용법
+- 모던 CSS 프레임워크 (Tailwind CSS) 활용
+
+## ✨ 주요 기능
+
+- ✅ Todo 항목 추가, 완료, 삭제
+- 🔍 실시간 검색 기능
+- 🏷️ 상태별 필터링 (전체/활성/완료)
+- 💾 로컬 스토리지를 통한 데이터 영구 저장
+- 📱 반응형 디자인
+
+## 🛠️ 기술 스택
+
+- **Framework**: [Next.js 15](https://nextjs.org/) (App Router)
+- **Language**: TypeScript
+- **State Management**: [Zustand](https://zustand-demo.pmnd.rs/)
+- **Styling**: [Tailwind CSS](https://tailwindcss.com/)
+- **UI Components**: [shadcn/ui](https://ui.shadcn.com/)
+- **Architecture**: [Feature-Sliced Design (FSD)](https://feature-sliced.design/)
+
+## 📁 프로젝트 구조
+
+```
+src/
+├── app/                    # Next.js App Router
+├── entities/              # 비즈니스 엔티티
+│   └── todo/
+│       ├── model/         # 상태 관리 (Zustand)
+│       └── ui/            # Todo 컴포넌트
+├── features/              # 기능 모듈
+│   ├── todo-create/       # Todo 생성 기능
+│   ├── todo-filter/       # 필터링 기능
+│   └── todo-search/       # 검색 기능
+├── shared/                # 공유 리소스
+│   └── ui/                # 재사용 가능한 UI 컴포넌트
+└── widgets/               # 복합 컴포넌트
+    └── todo-app/          # Todo 앱 위젯
+```
+
+## 🚀 시작하기
+
+### 설치
+
+```bash
+npm install
+```
+
+### 개발 서버 실행
+
+```bash
+npm run dev
+```
+
+브라우저에서 [http://localhost:3000](http://localhost:3000)을 열어 확인하세요.
+
+### 빌드
+
+```bash
+npm run build
+```
+
+### 프로덕션 실행
+
+```bash
+npm start
+```
+
+## 🎯 Feature-Sliced Design (FSD)
+
+이 프로젝트는 FSD 아키텍처 원칙을 따릅니다:
+
+- **Layers**: app → widgets → features → entities → shared
+- **Slices**: 비즈니스 도메인별로 구분
+- **Segments**: ui, model, api 등으로 구성
+
+### FSD의 장점
+
+- 높은 모듈성과 재사용성
+- 명확한 의존성 방향 (단방향)
+- 쉬운 확장성과 유지보수
+- 팀 협업에 최적화
+
+## 📝 주요 컴포넌트
+
+### Entities
+- `todo/model/store.ts`: Zustand 기반 상태 관리
+- `todo/ui/TodoItem.tsx`: 개별 Todo 아이템
+- `todo/ui/TodoList.tsx`: Todo 리스트
+
+### Features
+- `todo-create`: Todo 생성 폼
+- `todo-filter`: 상태 필터 (All/Active/Completed)
+- `todo-search`: 검색 입력
+
+### Widgets
+- `todo-app`: 전체 Todo 앱을 통합하는 위젯
+
+## 🎨 UI/UX
+
+- Tailwind CSS를 사용한 모던한 디자인
+- shadcn/ui 컴포넌트로 일관된 UI
+- 반응형 레이아웃
+- 부드러운 애니메이션 효과
+
+## 📦 주요 의존성
+
+```json
+{
+  "next": "^15.1.4",
+  "react": "^19.0.0",
+  "zustand": "^5.0.2",
+  "tailwindcss": "^3.4.17",
+  "typescript": "^5"
+}
+```
+
+## 💡 세미나 참가자를 위한 팁
+
+1. **FSD 아키텍처 구조 파악하기**: `src` 폴더의 계층 구조를 먼저 이해하세요
+2. **상태 관리 흐름 추적하기**: `src/entities/todo/model/store.ts`에서 Zustand 패턴을 학습하세요
+3. **컴포넌트 재사용성 고려하기**: `shared/ui` 폴더의 공통 컴포넌트들을 참고하세요
+4. **TypeScript 타입 정의 활용하기**: 각 모듈의 `types.ts` 파일을 확인하세요
+
+## 🔗 참고 링크
+
+- [Next.js Documentation](https://nextjs.org/docs)
+- [Feature-Sliced Design](https://feature-sliced.design/)
+- [Zustand Documentation](https://zustand-demo.pmnd.rs/)
+- [Tailwind CSS](https://tailwindcss.com/docs)
+- [shadcn/ui](https://ui.shadcn.com/)
+
+---
--- a/services/nextjs/app/api/health/route.ts
+++ b/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 }
+    )
+  }
+}
+
--- a/services/nextjs/app/api/todos/[id]/route.ts
+++ b/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
+  }
+}
+
--- a/services/nextjs/app/api/todos/route.ts
+++ b/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
+  }
+}
+
--- a/services/nextjs/app/favicon.ico
+++ b/services/nextjs/app/favicon.ico
--- a/services/nextjs/app/globals.css
+++ b/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;
+  }
+}
--- a/services/nextjs/app/layout.tsx
+++ b/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>
+  );
+}
--- a/services/nextjs/app/page.tsx
+++ b/services/nextjs/app/page.tsx
@@ -0,0 +1,5 @@
+import { TodoApp } from '@/src/widgets/todo-app'
+
+export default function Home() {
+  return <TodoApp />
+}
--- a/services/nextjs/app/tailwind/page.tsx
+++ b/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>
+  );
+}
--- a/services/nextjs/components.json
+++ b/services/nextjs/components.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {}
+}
--- a/services/nextjs/eslint.config.mjs
+++ b/services/nextjs/eslint.config.mjs
@@ -0,0 +1,25 @@
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+});
+
+const eslintConfig = [
+  ...compat.extends("next/core-web-vitals", "next/typescript"),
+  {
+    ignores: [
+      "node_modules/**",
+      ".next/**",
+      "out/**",
+      "build/**",
+      "next-env.d.ts",
+    ],
+  },
+];
+
+export default eslintConfig;
--- a/services/nextjs/lib/utils.ts
+++ b/services/nextjs/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
--- a/services/nextjs/next.config.ts
+++ b/services/nextjs/next.config.ts
@@ -0,0 +1,8 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  // Enable standalone output for Docker
+  output: 'standalone',
+};
+
+export default nextConfig;
--- a/services/nextjs/package-lock.json
+++ b/services/nextjs/package-lock.json
--- a/services/nextjs/package.json
+++ b/services/nextjs/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "todo_app",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --turbopack",
+    "build": "next build --turbopack",
+    "start": "next start",
+    "lint": "eslint"
+  },
+  "dependencies": {
+    "@prisma/client": "^6.19.0",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-slot": "^1.2.3",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.544.0",
+    "next": "15.5.4",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "tailwind-merge": "^3.3.1",
+    "tailwindcss-animate": "^1.0.7",
+    "zustand": "^5.0.8"
+  },
+  "devDependencies": {
+    "@eslint/eslintrc": "^3",
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "15.5.4",
+    "prisma": "^6.19.0",
+    "tailwindcss": "^4",
+    "typescript": "^5"
+  }
+}
--- a/services/nextjs/postcss.config.mjs
+++ b/services/nextjs/postcss.config.mjs
@@ -0,0 +1,5 @@
+const config = {
+  plugins: ["@tailwindcss/postcss"],
+};
+
+export default config;
--- a/services/nextjs/prisma/schema.prisma
+++ b/services/nextjs/prisma/schema.prisma
@@ -0,0 +1,22 @@
+// This is your Prisma schema file,
+// learn more about it in the docs: https://pris.ly/d/prisma-schema
+
+generator client {
+  provider = "prisma-client-js"
+}
+
+datasource db {
+  provider = "mysql"
+  url      = env("DATABASE_URL")
+}
+
+model Todo {
+  id          Int      @id @default(autoincrement())
+  title       String
+  description String?
+  completed   Boolean  @default(false)
+  priority    String   @default("medium")
+  createdAt   DateTime @default(now())
+  updatedAt   DateTime @updatedAt
+}
+
--- a/services/nextjs/public/file.svg
+++ b/services/nextjs/public/file.svg
@@ -0,0 +1 @@
+<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>
--- a/services/nextjs/public/globe.svg
+++ b/services/nextjs/public/globe.svg
@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
--- a/services/nextjs/public/next.svg
+++ b/services/nextjs/public/next.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
--- a/services/nextjs/public/vercel.svg
+++ b/services/nextjs/public/vercel.svg
@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>
--- a/services/nextjs/public/window.svg
+++ b/services/nextjs/public/window.svg
@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>
--- a/services/nextjs/src/entities/todo/api/client.ts
+++ b/services/nextjs/src/entities/todo/api/client.ts
@@ -0,0 +1,166 @@
+import { API_ENDPOINTS } from '../../../shared/api/config'
+import type { Todo, CreateTodoData, UpdateTodoData } from '../model/types'
+
+// API 응답 타입
+interface ApiTodo {
+  id: number
+  title: string
+  description?: string | null
+  completed: boolean
+  priority: string
+  createdAt: string
+  updatedAt: string
+}
+
+interface ApiResponse<T> {
+  success: boolean
+  data?: T
+  error?: string
+}
+
+// 백엔드 Todo를 프론트엔드 Todo로 변환
+const mapApiTodoToTodo = (apiTodo: ApiTodo): Todo => {
+  return {
+    id: String(apiTodo.id),
+    title: apiTodo.title,
+    description: apiTodo.description || undefined,
+    completed: apiTodo.completed,
+    priority: (apiTodo.priority || 'medium') as 'low' | 'medium' | 'high',
+    createdAt: new Date(apiTodo.createdAt),
+    updatedAt: new Date(apiTodo.updatedAt),
+  }
+}
+
+// 프론트엔드 Todo를 백엔드 형식으로 변환
+const mapTodoToApiTodo = (todo: CreateTodoData | UpdateTodoData): Partial<ApiTodo> => {
+  const apiTodo: Partial<ApiTodo> = {
+    title: todo.title,
+    description: todo.description || null,
+  }
+  
+  if ('completed' in todo) {
+    apiTodo.completed = todo.completed
+  }
+  
+  if ('priority' in todo && todo.priority) {
+    apiTodo.priority = todo.priority
+  }
+  
+  return apiTodo
+}
+
+/**
+ * 모든 TODO 가져오기
+ */
+export const fetchTodos = async (): Promise<Todo[]> => {
+  try {
+    const response = await fetch(API_ENDPOINTS.todos, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    })
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`)
+    }
+
+    const result: ApiResponse<ApiTodo[]> = await response.json()
+    
+    if (!result.success || !result.data) {
+      throw new Error(result.error || 'Failed to fetch todos')
+    }
+
+    return result.data.map(mapApiTodoToTodo)
+  } catch (error) {
+    console.error('Error fetching todos:', error)
+    throw error
+  }
+}
+
+/**
+ * TODO 생성
+ */
+export const createTodo = async (data: CreateTodoData): Promise<Todo> => {
+  try {
+    const response = await fetch(API_ENDPOINTS.todos, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(mapTodoToApiTodo(data)),
+    })
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`)
+    }
+
+    const result: ApiResponse<ApiTodo> = await response.json()
+    
+    if (!result.success || !result.data) {
+      throw new Error(result.error || 'Failed to create todo')
+    }
+
+    return mapApiTodoToTodo(result.data)
+  } catch (error) {
+    console.error('Error creating todo:', error)
+    throw error
+  }
+}
+
+/**
+ * TODO 업데이트
+ */
+export const updateTodo = async (id: string, data: UpdateTodoData): Promise<Todo> => {
+  try {
+    const response = await fetch(`${API_ENDPOINTS.todos}/${id}`, {
+      method: 'PUT',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(mapTodoToApiTodo(data)),
+    })
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`)
+    }
+
+    const result: ApiResponse<ApiTodo> = await response.json()
+    
+    if (!result.success || !result.data) {
+      throw new Error(result.error || 'Failed to update todo')
+    }
+
+    return mapApiTodoToTodo(result.data)
+  } catch (error) {
+    console.error('Error updating todo:', error)
+    throw error
+  }
+}
+
+/**
+ * TODO 삭제
+ */
+export const deleteTodo = async (id: string): Promise<void> => {
+  try {
+    const response = await fetch(`${API_ENDPOINTS.todos}/${id}`, {
+      method: 'DELETE',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    })
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`)
+    }
+
+    const result: ApiResponse<null> = await response.json()
+    
+    if (!result.success) {
+      throw new Error(result.error || 'Failed to delete todo')
+    }
+  } catch (error) {
+    console.error('Error deleting todo:', error)
+    throw error
+  }
+}
--- a/services/nextjs/src/entities/todo/api/index.ts
+++ b/services/nextjs/src/entities/todo/api/index.ts
@@ -0,0 +1,2 @@
+export * from './client'
+
--- a/services/nextjs/src/entities/todo/index.ts
+++ b/services/nextjs/src/entities/todo/index.ts
@@ -0,0 +1,2 @@
+export * from './model'
+export * from './ui'
--- a/services/nextjs/src/entities/todo/model/constants.ts
+++ b/services/nextjs/src/entities/todo/model/constants.ts
@@ -0,0 +1,19 @@
+import { Todo } from './types'
+
+export const PRIORITY_LABELS: Record<Todo['priority'], string> = {
+  low: '낮음',
+  medium: '보통',
+  high: '높음'
+}
+
+export const PRIORITY_COLORS: Record<Todo['priority'], string> = {
+  low: 'text-green-600 bg-green-50',
+  medium: 'text-yellow-600 bg-yellow-50',
+  high: 'text-red-600 bg-red-50'
+}
+
+export const FILTER_LABELS: Record<string, string> = {
+  all: '전체',
+  active: '진행중',
+  completed: '완료'
+}
--- a/services/nextjs/src/entities/todo/model/index.ts
+++ b/services/nextjs/src/entities/todo/model/index.ts
@@ -0,0 +1,3 @@
+export * from './types'
+export * from './constants'
+export * from './store'
--- a/services/nextjs/src/entities/todo/model/store.ts
+++ b/services/nextjs/src/entities/todo/model/store.ts
@@ -0,0 +1,166 @@
+import { create } from 'zustand'
+import { CreateTodoData, UpdateTodoData, TodoStore, TodoFilter, TodoSort, PRIORITY_ORDER } from './types'
+import { fetchTodos, createTodo, updateTodo, deleteTodo } from '../api/client'
+
+export const useTodoStore = create<TodoStore>()((set, get) => ({
+  // State
+  todos: [],
+  filter: 'all',
+  sort: 'createdAt',
+  searchQuery: '',
+  isLoading: false,
+  error: null,
+
+  // Actions
+  addTodo: async (data: CreateTodoData) => {
+    if (!data.title?.trim()) {
+      console.warn('Todo title is required')
+      return
+    }
+
+    try {
+      const newTodo = await createTodo(data)
+      set((state) => ({
+        todos: [...state.todos, newTodo]
+      }))
+    } catch (error) {
+      console.error('Failed to create todo:', error)
+      set({ error: 'Failed to create todo' })
+    }
+  },
+
+  updateTodo: async (id: string, data: UpdateTodoData) => {
+    if (!id) {
+      console.warn('Todo ID is required for update')
+      return
+    }
+
+    try {
+      const updatedTodo = await updateTodo(id, data)
+      set((state) => ({
+        todos: state.todos.map((todo) =>
+          todo.id === id ? updatedTodo : todo
+        )
+      }))
+    } catch (error) {
+      console.error('Failed to update todo:', error)
+      set({ error: 'Failed to update todo' })
+    }
+  },
+
+  deleteTodo: async (id: string) => {
+    if (!id) {
+      console.warn('Todo ID is required for deletion')
+      return
+    }
+
+    try {
+      await deleteTodo(id)
+      set((state) => ({
+        todos: state.todos.filter((todo) => todo.id !== id)
+      }))
+    } catch (error) {
+      console.error('Failed to delete todo:', error)
+      set({ error: 'Failed to delete todo' })
+    }
+  },
+
+  toggleTodo: async (id: string) => {
+    if (!id) {
+      console.warn('Todo ID is required for toggle')
+      return
+    }
+
+    const todo = get().todos.find((t) => t.id === id)
+    if (!todo) return
+
+    try {
+      await get().updateTodo(id, { completed: !todo.completed })
+    } catch (error) {
+      console.error('Failed to toggle todo:', error)
+    }
+  },
+
+  loadTodos: async () => {
+    set({ isLoading: true, error: null })
+    try {
+      const todos = await fetchTodos()
+      set({ todos, isLoading: false })
+    } catch (error) {
+      console.error('Failed to load todos:', error)
+      set({ error: 'Failed to load todos', isLoading: false })
+    }
+  },
+
+  setFilter: (filter: TodoFilter) => {
+    set({ filter })
+  },
+
+  setSort: (sort: TodoSort) => {
+    set({ sort })
+  },
+
+  setSearchQuery: (query: string) => {
+    set({ searchQuery: query })
+  },
+
+  clearCompleted: async () => {
+    const completedTodos = get().todos.filter((todo) => todo.completed)
+    
+    try {
+      await Promise.all(completedTodos.map((todo) => deleteTodo(todo.id)))
+      set((state) => ({
+        todos: state.todos.filter((todo) => !todo.completed)
+      }))
+    } catch (error) {
+      console.error('Failed to clear completed todos:', error)
+      set({ error: 'Failed to clear completed todos' })
+    }
+  },
+}))
+
+// Selectors
+export const useFilteredTodos = () => {
+  const { todos, filter, sort, searchQuery } = useTodoStore()
+  
+  if (!Array.isArray(todos)) {
+    return []
+  }
+  
+  const filteredTodos = todos.filter((todo) => {
+    if (!todo || typeof todo !== 'object') {
+      return false
+    }
+    
+    const matchesFilter = 
+      filter === 'all' || 
+      (filter === 'active' && !todo.completed) ||
+      (filter === 'completed' && todo.completed)
+    
+    const matchesSearch = 
+      !searchQuery || 
+      (todo.title && todo.title.toLowerCase().includes(searchQuery.toLowerCase())) ||
+      (todo.description && todo.description.toLowerCase().includes(searchQuery.toLowerCase()))
+    
+    return matchesFilter && matchesSearch
+  })
+
+  // Sort todos
+  filteredTodos.sort((a, b) => {
+    if (!a || !b) return 0
+    
+    switch (sort) {
+      case 'title':
+        return (a.title || '').localeCompare(b.title || '')
+      case 'priority':
+        return PRIORITY_ORDER[b.priority] - PRIORITY_ORDER[a.priority]
+      case 'updatedAt':
+        return (b.updatedAt?.getTime() || 0) - (a.updatedAt?.getTime() || 0)
+      case 'createdAt':
+      default:
+        return (b.createdAt?.getTime() || 0) - (a.createdAt?.getTime() || 0)
+    }
+  })
+
+  return filteredTodos
+}
--- a/services/nextjs/src/entities/todo/model/types.ts
+++ b/services/nextjs/src/entities/todo/model/types.ts
@@ -0,0 +1,53 @@
+export interface Todo {
+  id: string
+  title: string
+  description?: string
+  completed: boolean
+  priority: 'low' | 'medium' | 'high'
+  createdAt: Date
+  updatedAt: Date
+}
+
+export interface CreateTodoData {
+  title: string
+  description?: string
+  priority?: 'low' | 'medium' | 'high'
+}
+
+export interface UpdateTodoData {
+  title?: string
+  description?: string
+  completed?: boolean
+  priority?: 'low' | 'medium' | 'high'
+}
+
+export type TodoFilter = 'all' | 'active' | 'completed'
+
+export type TodoSort = 'createdAt' | 'updatedAt' | 'priority' | 'title'
+
+// Store types
+export interface TodoState {
+  todos: Todo[]
+  filter: TodoFilter
+  sort: TodoSort
+  searchQuery: string
+  isLoading: boolean
+  error: string | null
+}
+
+export interface TodoActions {
+  addTodo: (data: CreateTodoData) => Promise<void>
+  updateTodo: (id: string, data: UpdateTodoData) => Promise<void>
+  deleteTodo: (id: string) => Promise<void>
+  toggleTodo: (id: string) => Promise<void>
+  loadTodos: () => Promise<void>
+  setFilter: (filter: TodoFilter) => void
+  setSort: (sort: TodoSort) => void
+  setSearchQuery: (query: string) => void
+  clearCompleted: () => Promise<void>
+}
+
+export type TodoStore = TodoState & TodoActions
+
+// Priority order for sorting
+export const PRIORITY_ORDER = { high: 3, medium: 2, low: 1 } as const
--- a/services/nextjs/src/entities/todo/ui/TodoItem.tsx
+++ b/services/nextjs/src/entities/todo/ui/TodoItem.tsx
@@ -0,0 +1,53 @@
+'use client'
+
+import { Todo } from '../model/types'
+import { useTodoStore } from '../model/store'
+import { Button, Checkbox } from '../../../shared/ui'
+import { PRIORITY_LABELS, PRIORITY_COLORS } from '../model'
+
+interface TodoItemProps {
+  todo: Todo
+}
+
+export default function TodoItem({ todo }: TodoItemProps) {
+  const { deleteTodo, toggleTodo } = useTodoStore()
+
+  const handleDelete = () => deleteTodo(todo.id)
+  const handleToggle = () => toggleTodo(todo.id)
+
+  return (
+    <div className="flex items-center justify-between py-3 border-b border-gray-100 last:border-b-0">
+      <div className="flex items-center gap-3 flex-1">
+        <Checkbox
+          checked={todo.completed}
+          onCheckedChange={handleToggle}
+          className="w-4 h-4"
+        />
+        <div className="flex-1 flex items-center gap-2">
+          <span
+            className={`${
+              todo.completed
+                ? 'line-through text-gray-400'
+                : 'text-gray-800'
+            }`}
+          >
+            {todo.title}
+          </span>
+          <span
+            className={`px-2 py-1 text-xs rounded-full ${PRIORITY_COLORS[todo.priority]}`}
+          >
+            {PRIORITY_LABELS[todo.priority]}
+          </span>
+        </div>
+      </div>
+      <Button
+        onClick={handleDelete}
+        variant="outline"
+        size="sm"
+        className="text-gray-600 border-gray-300 hover:bg-gray-50 hover:border-gray-400"
+      >
+        삭제
+      </Button>
+    </div>
+  )
+}
--- a/services/nextjs/src/entities/todo/ui/TodoList.tsx
+++ b/services/nextjs/src/entities/todo/ui/TodoList.tsx
@@ -0,0 +1,24 @@
+'use client'
+
+import { useFilteredTodos } from '../model/store'
+import TodoItem from './TodoItem'
+
+export default function TodoList() {
+  const todos = useFilteredTodos()
+
+  if (todos.length === 0) {
+    return (
+      <div className="text-center py-8 text-gray-500">
+        <p>할 일이 없습니다. 위에서 새로 추가해보세요.</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-0">
+      {todos.map((todo) => (
+        <TodoItem key={todo.id} todo={todo} />
+      ))}
+    </div>
+  )
+}
--- a/services/nextjs/src/entities/todo/ui/index.ts
+++ b/services/nextjs/src/entities/todo/ui/index.ts
@@ -0,0 +1,2 @@
+export { default as TodoItem } from './TodoItem'
+export { default as TodoList } from './TodoList'
--- a/services/nextjs/src/features/todo-create/index.ts
+++ b/services/nextjs/src/features/todo-create/index.ts
@@ -0,0 +1 @@
+export { default as TodoCreateForm } from './ui/TodoCreateForm'
--- a/services/nextjs/src/features/todo-create/ui/TodoCreateForm.tsx
+++ b/services/nextjs/src/features/todo-create/ui/TodoCreateForm.tsx
@@ -0,0 +1,69 @@
+'use client'
+
+import { useState } from 'react'
+import { useTodoStore } from '../../../entities/todo/model'
+import { Input, Button } from '../../../shared/ui'
+import { PRIORITY_LABELS, PRIORITY_COLORS } from '../../../entities/todo/model'
+
+export default function TodoCreateForm() {
+  const [title, setTitle] = useState('')
+  const [description, setDescription] = useState('')
+  const [priority, setPriority] = useState<'low' | 'medium' | 'high'>('medium')
+  const addTodo = useTodoStore((state) => state.addTodo)
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    if (title.trim()) {
+      addTodo({ 
+        title: title.trim(),
+        description: description.trim() || undefined,
+        priority
+      })
+      setTitle('')
+      setDescription('')
+      setPriority('medium')
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      <div className="flex gap-2">
+        <Input
+          type="text"
+          placeholder="새로운 할 일을 입력하세요"
+          value={title}
+          onChange={(e) => setTitle(e.target.value)}
+          className="flex-1 h-10 border-gray-300 focus:border-green-500 focus:ring-green-500/20"
+        />
+        <Button 
+          type="submit" 
+          disabled={!title.trim()}
+          className="bg-green-600 hover:bg-green-700 text-white px-6 py-2 rounded-md font-medium disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          추가
+        </Button>
+      </div>
+      
+      {/* 우선순위 선택 */}
+      <div className="flex gap-2">
+        <span className="text-sm text-gray-600 font-medium">우선순위:</span>
+        <div className="flex gap-1">
+          {(['low', 'medium', 'high'] as const).map((priorityOption) => (
+            <button
+              key={priorityOption}
+              type="button"
+              onClick={() => setPriority(priorityOption)}
+              className={`px-3 py-1 text-xs rounded-full border transition-colors ${
+                priority === priorityOption
+                  ? PRIORITY_COLORS[priorityOption] + ' border-current'
+                  : 'bg-gray-100 text-gray-600 border-gray-300 hover:bg-gray-200'
+              }`}
+            >
+              {PRIORITY_LABELS[priorityOption]}
+            </button>
+          ))}
+        </div>
+      </div>
+    </form>
+  )
+}
--- a/services/nextjs/src/features/todo-filter/index.ts
+++ b/services/nextjs/src/features/todo-filter/index.ts
@@ -0,0 +1 @@
+export { default as TodoFilter } from './ui/TodoFilter'
--- a/services/nextjs/src/features/todo-filter/ui/TodoFilter.tsx
+++ b/services/nextjs/src/features/todo-filter/ui/TodoFilter.tsx
@@ -0,0 +1,35 @@
+'use client'
+
+import { useTodoStore } from '../../../entities/todo/model/store'
+import type { TodoFilter } from '../../../entities/todo/model/types'
+import { Button } from '../../../shared/ui'
+
+const filterOptions: { value: TodoFilter; label: string; icon: string }[] = [
+  { value: 'all', label: 'All', icon: '📋' },
+  { value: 'active', label: 'Active', icon: '⏳' },
+  { value: 'completed', label: 'Completed', icon: '✅' },
+]
+
+export default function TodoFilter() {
+  const { filter, setFilter } = useTodoStore()
+
+  return (
+    <div className="flex gap-2">
+      {filterOptions.map((option) => (
+        <Button
+          key={option.value}
+          onClick={() => setFilter(option.value)}
+          variant={filter === option.value ? 'default' : 'outline'}
+          size="sm"
+          className={`px-3 py-1 text-sm ${
+            filter === option.value
+              ? 'bg-blue-600 text-white'
+              : 'border-gray-300 text-gray-600 hover:bg-gray-50'
+          }`}
+        >
+          {option.label}
+        </Button>
+      ))}
+    </div>
+  )
+}
--- a/services/nextjs/src/features/todo-search/index.ts
+++ b/services/nextjs/src/features/todo-search/index.ts
@@ -0,0 +1 @@
+export { default as SearchInput } from './ui/SearchInput'
--- a/services/nextjs/src/features/todo-search/ui/SearchInput.tsx
+++ b/services/nextjs/src/features/todo-search/ui/SearchInput.tsx
@@ -0,0 +1,25 @@
+'use client'
+
+import { Search } from 'lucide-react'
+import { Input } from '../../../shared/ui'
+import { useTodoStore } from '../../../entities/todo/model/store'
+
+export default function SearchInput() {
+  const { searchQuery, setSearchQuery } = useTodoStore()
+
+  const handleSearch = (query: string) => {
+    setSearchQuery(query)
+  }
+
+  return (
+    <div className="relative">
+      <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
+      <Input
+        placeholder="검색..."
+        value={searchQuery}
+        onChange={(e) => handleSearch(e.target.value)}
+        className="pl-10 h-10 border-gray-300 focus:border-blue-500 focus:ring-blue-500/20"
+      />
+    </div>
+  )
+}
--- a/services/nextjs/src/shared/api/config.ts
+++ b/services/nextjs/src/shared/api/config.ts
@@ -0,0 +1,10 @@
+// API 설정 - Next.js API Routes 사용
+export const API_CONFIG = {
+  baseURL: process.env.NEXT_PUBLIC_API_URL || '',
+  timeout: 10000,
+}
+
+export const API_ENDPOINTS = {
+  todos: '/api/todos',
+  health: '/api/health',
+} as const
--- a/services/nextjs/src/shared/lib/cors.ts
+++ b/services/nextjs/src/shared/lib/cors.ts
@@ -0,0 +1,35 @@
+import { NextResponse } from 'next/server'
+
+/**
+ * CORS 헤더를 추가하는 유틸리티 함수
+ * jotion (localhost:3001)에서 API 호출을 허용합니다
+ */
+export function corsHeaders() {
+  return {
+    'Access-Control-Allow-Origin': process.env.NEXT_PUBLIC_ALLOWED_ORIGIN || 'http://localhost:3001',
+    'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
+    'Access-Control-Allow-Headers': 'Content-Type, Authorization',
+    'Access-Control-Allow-Credentials': 'true',
+  }
+}
+
+/**
+ * CORS preflight 요청 처리
+ */
+export function handleCorsPreFlight() {
+  return new NextResponse(null, {
+    status: 204,
+    headers: corsHeaders(),
+  })
+}
+
+/**
+ * NextResponse에 CORS 헤더 추가
+ */
+export function withCors(response: NextResponse) {
+  Object.entries(corsHeaders()).forEach(([key, value]) => {
+    response.headers.set(key, value)
+  })
+  return response
+}
+
--- a/services/nextjs/src/shared/lib/prisma.ts
+++ b/services/nextjs/src/shared/lib/prisma.ts
@@ -0,0 +1,14 @@
+import { PrismaClient } from '@prisma/client'
+
+const globalForPrisma = globalThis as unknown as {
+  prisma: PrismaClient | undefined
+}
+
+export const prisma =
+  globalForPrisma.prisma ??
+  new PrismaClient({
+    log: process.env.NODE_ENV === 'development' ? ['query', 'error', 'warn'] : ['error'],
+  })
+
+if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma
+
--- a/services/nextjs/src/shared/lib/utils.ts
+++ b/services/nextjs/src/shared/lib/utils.ts
@@ -0,0 +1,10 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+
+export function generateId(): string {
+  return Math.random().toString(36).substring(2, 11)
+}
--- a/services/nextjs/src/shared/ui/button.tsx
+++ b/services/nextjs/src/shared/ui/button.tsx
@@ -0,0 +1,57 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/shared/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }
--- a/services/nextjs/src/shared/ui/card.tsx
+++ b/services/nextjs/src/shared/ui/card.tsx
@@ -0,0 +1,76 @@
+import * as React from "react"
+
+import { cn } from "@/shared/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-xl border bg-card text-card-foreground shadow",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
--- a/services/nextjs/src/shared/ui/checkbox.tsx
+++ b/services/nextjs/src/shared/ui/checkbox.tsx
@@ -0,0 +1,28 @@
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check } from "lucide-react"
+
+import { cn } from "@/shared/lib/utils"
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }
--- a/services/nextjs/src/shared/ui/index.ts
+++ b/services/nextjs/src/shared/ui/index.ts
@@ -0,0 +1,4 @@
+export { Button, buttonVariants } from "./button"
+export { Input } from "./input"
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } from "./card"
+export { Checkbox } from "./checkbox"
--- a/services/nextjs/src/shared/ui/input.tsx
+++ b/services/nextjs/src/shared/ui/input.tsx
@@ -0,0 +1,22 @@
+import * as React from "react"
+
+import { cn } from "@/shared/lib/utils"
+
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }
--- a/services/nextjs/src/widgets/todo-app/index.ts
+++ b/services/nextjs/src/widgets/todo-app/index.ts
@@ -0,0 +1 @@
+export { TodoApp } from './ui/TodoApp'
--- a/services/nextjs/src/widgets/todo-app/ui/TodoApp.tsx
+++ b/services/nextjs/src/widgets/todo-app/ui/TodoApp.tsx
@@ -0,0 +1,48 @@
+'use client'
+
+import { useEffect } from 'react'
+import { Card, CardContent } from '../../../shared/ui'
+import { TodoCreateForm } from '../../../features/todo-create'
+import { TodoList } from '../../../entities/todo'
+import { TodoFilter } from '../../../features/todo-filter'
+import { SearchInput } from '../../../features/todo-search'
+import { useTodoStore } from '../../../entities/todo/model/store'
+
+export function TodoApp() {
+  const loadTodos = useTodoStore((state) => state.loadTodos)
+
+  useEffect(() => {
+    loadTodos()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  return (
+    <div className="min-h-screen bg-gray-50 flex items-center justify-center p-4">
+      <Card className="w-full max-w-2xl shadow-lg border border-gray-200">
+        <CardContent className="p-8">
+          {/* Header */}
+          <div className="text-center mb-8">
+            <h1 className="text-3xl font-bold text-gray-800 mb-2">My Todo App</h1>
+          </div>
+
+          {/* Add Task Form */}
+          <div className="mb-8">
+            <TodoCreateForm />
+          </div>
+
+          {/* Search and Filter */}
+          <div className="mb-6 space-y-4">
+            <SearchInput />
+            <TodoFilter />
+          </div>
+
+          {/* Task List */}
+          <div className="mb-6">
+            <TodoList />
+          </div>
+
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
--- a/services/nextjs/tailwind.config.ts
+++ b/services/nextjs/tailwind.config.ts
@@ -0,0 +1,57 @@
+import type { Config } from "tailwindcss";
+
+const config: Config = {
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+    },
+  },
+  plugins: [],
+};
+
+export default config;
--- a/services/nextjs/tsconfig.json
+++ b/services/nextjs/tsconfig.json
@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"],
+      "@/shared/*": ["./src/shared/*"],
+      "@/entities/*": ["./src/entities/*"],
+      "@/features/*": ["./src/features/*"],
+      "@/widgets/*": ["./src/widgets/*"],
+      "@/pages/*": ["./src/pages/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}
				`@@ -0,0 +1 @@`
				`<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>`
				`@@ -0,0 +1 @@`
				<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
				`@@ -0,0 +1 @@`
				`<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>`
				`@@ -0,0 +1 @@`
				`export { default as TodoCreateForm } from './ui/TodoCreateForm'`
				`@@ -0,0 +1 @@`
				`export { default as TodoFilter } from './ui/TodoFilter'`
				`@@ -0,0 +1 @@`
				`export { default as SearchInput } from './ui/SearchInput'`