REFACTOR(repo): simplify project structure

- Move services/nextjs/ to nextjs/
- Move Dockerfile.prod to Dockerfile at root
- Remove deploy/ folder (K8s manifests moved to K3S-HOME/web-apps)
- Remove .gitea/ workflows
- Update GitHub Actions for new structure
- Remove develop branch triggers

nextjs/app/api/auth/password/route.ts

@@ -0,0 +1,84 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { corsHeaders, handleCorsPreFlight } from '@/shared/lib/cors'
+
+const PASSWORD = '5364'
+const SESSION_COOKIE_NAME = 'todo-auth-session'
+
+// OPTIONS - CORS preflight 처리
+export async function OPTIONS() {
+  return handleCorsPreFlight()
+}
+
+// POST - 비밀번호 인증
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json()
+    const { password } = body
+
+    if (!password) {
+      const response = NextResponse.json(
+        { success: false, error: '비밀번호를 입력해주세요' },
+        { status: 400 }
+      )
+      Object.entries(corsHeaders()).forEach(([key, value]) => {
+        response.headers.set(key, value)
+      })
+      return response
+    }
+
+    if (password === PASSWORD) {
+      // 인증 성공 - 세션 쿠키 설정
+      const response = NextResponse.json(
+        { success: true, message: '인증 성공' },
+        { status: 200 }
+      )
+      
+      // HttpOnly 쿠키로 세션 저장 (보안 강화)
+      response.cookies.set(SESSION_COOKIE_NAME, 'authenticated', {
+        httpOnly: true,
+        secure: process.env.NODE_ENV === 'production',
+        sameSite: 'lax',
+        maxAge: 60 * 60 * 24, // 24시간
+        path: '/',
+      })
+
+      Object.entries(corsHeaders()).forEach(([key, value]) => {
+        response.headers.set(key, value)
+      })
+      return response
+    } else {
+      const response = NextResponse.json(
+        { success: false, error: '비밀번호가 일치하지 않습니다' },
+        { status: 401 }
+      )
+      Object.entries(corsHeaders()).forEach(([key, value]) => {
+        response.headers.set(key, value)
+      })
+      return response
+    }
+  } catch (error) {
+    console.error('Password auth error:', error)
+    const response = NextResponse.json(
+      { success: false, error: '서버 오류가 발생했습니다' },
+      { status: 500 }
+    )
+    Object.entries(corsHeaders()).forEach(([key, value]) => {
+      response.headers.set(key, value)
+    })
+    return response
+  }
+}
+
+// GET - 인증 상태 확인
+export async function GET(request: NextRequest) {
+  const session = request.cookies.get(SESSION_COOKIE_NAME)?.value
+  
+  const response = NextResponse.json(
+    { success: true, authenticated: session === 'authenticated' },
+    { status: 200 }
+  )
+  Object.entries(corsHeaders()).forEach(([key, value]) => {
+    response.headers.set(key, value)
+  })
+  return response
+}

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 }
+    )
+  }
+}
+

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
+  }
+}
+

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
+  }
+}
+

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;
+  }
+}

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>
+  );
+}

nextjs/app/page.tsx

@@ -0,0 +1,11 @@
+import { TodoApp } from '@/src/widgets/todo-app'
+import PasswordModal from '@/src/features/password-auth/ui/PasswordModal'
+
+export default function Home() {
+  return (
+    <PasswordModal>
+      <TodoApp />
+    </PasswordModal>
+  )
+}
+

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": {}
+}

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;

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))
+}

nextjs/middleware.ts

@@ -0,0 +1,51 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { isAuthenticated, createUnauthorizedResponse } from '@/shared/lib/auth'
+
+export function middleware(request: NextRequest) {
+  const { pathname } = request.nextUrl
+
+  // 공개 경로 (인증 불필요)
+  const publicPaths = [
+    '/api/auth/password', // 비밀번호 인증 API
+    '/api/health', // 헬스체크
+  ]
+
+  // 공개 경로는 통과
+  if (publicPaths.some(path => pathname.startsWith(path))) {
+    return NextResponse.next()
+  }
+
+  // API 라우트 보호
+  if (pathname.startsWith('/api/')) {
+    if (!isAuthenticated(request)) {
+      return createUnauthorizedResponse()
+    }
+    return NextResponse.next()
+  }
+
+  // 페이지 라우트 보호
+  if (pathname === '/' || pathname.startsWith('/app')) {
+    if (!isAuthenticated(request)) {
+      // 인증되지 않은 경우, 클라이언트에서 처리하도록 그대로 진행
+      // (PasswordModal이 표시됨)
+      return NextResponse.next()
+    }
+    return NextResponse.next()
+  }
+
+  return NextResponse.next()
+}
+
+export const config = {
+  matcher: [
+    /*
+     * Match all request paths except for the ones starting with:
+     * - _next/static (static files)
+     * - _next/image (image optimization files)
+     * - favicon.ico (favicon file)
+     * - public folder
+     */
+    '/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)',
+  ],
+}
+

nextjs/next.config.ts

@@ -0,0 +1,12 @@
+import type { NextConfig } from "next";
+import { config } from "dotenv";
+import { resolve } from "path";
+
+// Load .env file from the parent directory (todo folder)
+config({ path: resolve(__dirname, "../../.env") });
+
+const nextConfig: NextConfig = {
+  output: 'standalone',
+};
+
+export default nextConfig;

nextjs/package.json

@@ -0,0 +1,39 @@
+{
+  "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",
+    "dotenv": "^17.2.3",
+    "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"
+  }
+}

nextjs/postcss.config.mjs

@@ -0,0 +1,5 @@
+const config = {
+  plugins: ["@tailwindcss/postcss"],
+};
+
+export default config;

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 = "postgresql"
+  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
+}
+

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>

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>

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>

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>

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>

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
+  }
+}

nextjs/src/entities/todo/api/index.ts

@@ -0,0 +1,2 @@
+export * from './client'
+

nextjs/src/entities/todo/index.ts

@@ -0,0 +1,2 @@
+export * from './model'
+export * from './ui'

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: '완료'
+}

nextjs/src/entities/todo/model/index.ts

@@ -0,0 +1,3 @@
+export * from './types'
+export * from './constants'
+export * from './store'

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
+}

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

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>
+  )
+}

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>
+  )
+}

nextjs/src/entities/todo/ui/index.ts

@@ -0,0 +1,2 @@
+export { default as TodoItem } from './TodoItem'
+export { default as TodoList } from './TodoList'

nextjs/src/features/password-auth/index.ts

@@ -0,0 +1,2 @@
+export { default as PasswordModal } from './ui/PasswordModal'
+

nextjs/src/features/password-auth/ui/PasswordModal.tsx

@@ -0,0 +1,119 @@
+'use client'
+
+import { useState, ReactNode, useEffect } from 'react'
+import { Input, Button } from '../../../shared/ui'
+
+interface PasswordModalProps {
+  children: ReactNode
+}
+
+export default function PasswordModal({ children }: PasswordModalProps) {
+  const [password, setPassword] = useState('')
+  const [error, setError] = useState('')
+  const [isAuthenticated, setIsAuthenticated] = useState(false)
+  const [isChecking, setIsChecking] = useState(true)
+
+  // 컴포넌트 마운트 시 인증 상태 확인
+  useEffect(() => {
+    checkAuthStatus()
+  }, [])
+
+  const checkAuthStatus = async () => {
+    try {
+      const response = await fetch('/api/auth/password', {
+        method: 'GET',
+        credentials: 'include',
+      })
+      const data = await response.json()
+      
+      if (data.success && data.authenticated) {
+        setIsAuthenticated(true)
+      }
+    } catch (error) {
+      console.error('인증 상태 확인 실패:', error)
+    } finally {
+      setIsChecking(false)
+    }
+  }
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setError('')
+    
+    try {
+      const response = await fetch('/api/auth/password', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        credentials: 'include',
+        body: JSON.stringify({ password }),
+      })
+      
+      const data = await response.json()
+      
+      if (data.success) {
+        setIsAuthenticated(true)
+        setPassword('')
+      } else {
+        setError(data.error || '비밀번호가 일치하지 않습니다.')
+        setPassword('')
+      }
+    } catch (error) {
+      console.error('인증 요청 실패:', error)
+      setError('서버 오류가 발생했습니다. 다시 시도해주세요.')
+      setPassword('')
+    }
+  }
+
+  // 인증 상태 확인 중일 때 로딩 표시
+  if (isChecking) {
+    return (
+      <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
+        <div className="bg-white rounded-lg shadow-xl p-8">
+          <p className="text-gray-600">확인 중...</p>
+        </div>
+      </div>
+    )
+  }
+
+  if (isAuthenticated) {
+    return <>{children}</>
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
+      <div className="bg-white rounded-lg shadow-xl p-8 w-full max-w-md mx-4">
+        <h2 className="text-2xl font-bold text-gray-800 mb-4 text-center">
+          비밀번호 입력
+        </h2>
+        <p className="text-gray-600 mb-6 text-center">
+          Todo 앱에 접근하려면 비밀번호를 입력하세요.
+        </p>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <Input
+            type="password"
+            placeholder="비밀번호를 입력하세요"
+            value={password}
+            onChange={(e) => {
+              setPassword(e.target.value)
+              setError('')
+            }}
+            className="w-full h-12 border-gray-300 focus:border-green-500 focus:ring-green-500/20"
+            autoFocus
+          />
+          {error && (
+            <p className="text-red-500 text-sm text-center">{error}</p>
+          )}
+          <Button
+            type="submit"
+            className="w-full bg-green-600 hover:bg-green-700 text-white h-12 rounded-md font-medium"
+          >
+            확인
+          </Button>
+        </form>
+      </div>
+    </div>
+  )
+}
+

nextjs/src/features/todo-create/index.ts

@@ -0,0 +1 @@
+export { default as TodoCreateForm } from './ui/TodoCreateForm'

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>
+  )
+}

nextjs/src/features/todo-filter/index.ts

@@ -0,0 +1 @@
+export { default as TodoFilter } from './ui/TodoFilter'

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>
+  )
+}

nextjs/src/features/todo-search/index.ts

@@ -0,0 +1 @@
+export { default as SearchInput } from './ui/SearchInput'

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>
+  )
+}

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

nextjs/src/shared/lib/auth.ts

@@ -0,0 +1,27 @@
+import { NextRequest } from 'next/server'
+
+export const SESSION_COOKIE_NAME = 'todo-auth-session'
+
+/**
+ * 요청이 인증되었는지 확인
+ */
+export function isAuthenticated(request: NextRequest): boolean {
+  const session = request.cookies.get(SESSION_COOKIE_NAME)?.value
+  return session === 'authenticated'
+}
+
+/**
+ * 인증되지 않은 요청에 대한 응답 생성
+ */
+export function createUnauthorizedResponse() {
+  return new Response(
+    JSON.stringify({ success: false, error: '인증이 필요합니다' }),
+    {
+      status: 401,
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    }
+  )
+}
+

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
+}
+

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
+

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)
+}

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 }

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 }

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 }

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"

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 }

nextjs/src/widgets/todo-app/index.ts

@@ -0,0 +1 @@
+export { TodoApp } from './ui/TodoApp'

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>
+  )
+}

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;

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"]
+}