@kmgeon/taskflow 0.1.3

package/src/app/globals.css

@@ -0,0 +1,168 @@
+@import "tailwindcss";
+
+@plugin "@tailwindcss/typography";
+@plugin "tailwindcss-animate";
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+@utility container {
+  margin-inline: auto;
+  width: 100%;
+  padding-inline: 2rem;
+  @media (width >= 1400px) {
+    max-width: 1400px;
+  }
+}
+
+@theme {
+  --font-sans: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
+  --font-mono: var(--font-jetbrains-mono), ui-monospace, monospace;
+
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 4px);
+
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+  --animate-accordion-up: accordion-up 0.2s ease-out;
+
+  @keyframes accordion-down {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(--radix-accordion-content-height);
+    }
+  }
+  @keyframes accordion-up {
+    from {
+      height: var(--radix-accordion-content-height);
+    }
+    to {
+      height: 0;
+    }
+  }
+}
+
+/*
+  The default border color has changed to `currentcolor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
+  }
+}
+
+@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: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 172.2 50% 48.5%;
+    --accent-foreground: 210 40% 98%;
+    --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: 222.2 84% 4.9%;
+    --radius: 0.5rem;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+  }
+
+  .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: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --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: 172.2 50% 48.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: 212.7 26.8% 83.9%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+  h1 {
+    @apply text-4xl font-bold;
+  }
+  h2 {
+    @apply text-3xl font-semibold;
+  }
+  h3 {
+    @apply text-2xl font-semibold;
+  }
+  pre,
+  code {
+    font-family: var(--font-mono);
+  }
+}

package/src/app/layout.tsx

@@ -0,0 +1,35 @@
+import type { Metadata } from "next";
+import { Inter, JetBrains_Mono } from "next/font/google";
+import "./globals.css";
+import Providers from "./providers";
+
+const inter = Inter({
+  subsets: ["latin"],
+  variable: "--font-inter",
+});
+
+const jetbrainsMono = JetBrains_Mono({
+  subsets: ["latin"],
+  variable: "--font-jetbrains-mono",
+});
+
+export const metadata: Metadata = {
+  title: "TaskFlow",
+  description: "AI-powered task management dashboard",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="ko" suppressHydrationWarning>
+      <body
+        className={`${inter.variable} ${jetbrainsMono.variable} antialiased font-sans`}
+      >
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  );
+}

package/src/app/page.tsx

@@ -0,0 +1,5 @@
+import { redirect } from "next/navigation";
+
+export default function Home() {
+  redirect("/dashboard");
+}

package/src/app/providers.tsx

@@ -0,0 +1,57 @@
+// In Next.js, this file would be called: app/providers.tsx
+"use client";
+
+// Since QueryClientProvider relies on useContext under the hood, we have to put 'use client' on top
+import {
+  isServer,
+  QueryClient,
+  QueryClientProvider,
+} from "@tanstack/react-query";
+import { ThemeProvider } from "next-themes";
+
+function makeQueryClient() {
+  return new QueryClient({
+    defaultOptions: {
+      queries: {
+        // With SSR, we usually want to set some default staleTime
+        // above 0 to avoid refetching immediately on the client
+        staleTime: 60 * 1000,
+      },
+    },
+  });
+}
+
+let browserQueryClient: QueryClient | undefined = undefined;
+
+function getQueryClient() {
+  if (isServer) {
+    // Server: always make a new query client
+    return makeQueryClient();
+  } else {
+    // Browser: make a new query client if we don't already have one
+    // This is very important, so we don't re-make a new client if React
+    // suspends during the initial render. This may not be needed if we
+    // have a suspense boundary BELOW the creation of the query client
+    if (!browserQueryClient) browserQueryClient = makeQueryClient();
+    return browserQueryClient;
+  }
+}
+
+export default function Providers({ children }: { children: React.ReactNode }) {
+  // NOTE: Avoid useState when initializing the query client if you don't
+  //       have a suspense boundary between this and the code that may
+  //       suspend because React will throw away the client on the initial
+  //       render if it suspends and there is no boundary
+  const queryClient = getQueryClient();
+
+  return (
+    <ThemeProvider
+      attribute="class"
+      defaultTheme="system"
+      enableSystem
+      disableTransitionOnChange
+    >
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    </ThemeProvider>
+  );
+}

package/src/backend/config/index.ts

@@ -0,0 +1,36 @@
+import { z } from 'zod';
+import type { AppConfig } from '@/backend/hono/context';
+
+const envSchema = z.object({
+  SUPABASE_URL: z.string().url(),
+  SUPABASE_SERVICE_ROLE_KEY: z.string().min(1),
+});
+
+let cachedConfig: AppConfig | null = null;
+
+export const getAppConfig = (): AppConfig => {
+  if (cachedConfig) {
+    return cachedConfig;
+  }
+
+  const parsed = envSchema.safeParse({
+    SUPABASE_URL: process.env.SUPABASE_URL,
+    SUPABASE_SERVICE_ROLE_KEY: process.env.SUPABASE_SERVICE_ROLE_KEY,
+  });
+
+  if (!parsed.success) {
+    const messages = parsed.error.issues
+      .map((issue) => `${issue.path.join('.') || 'config'}: ${issue.message}`)
+      .join('; ');
+    throw new Error(`Invalid backend configuration: ${messages}`);
+  }
+
+  cachedConfig = {
+    supabase: {
+      url: parsed.data.SUPABASE_URL,
+      serviceRoleKey: parsed.data.SUPABASE_SERVICE_ROLE_KEY,
+    },
+  } satisfies AppConfig;
+
+  return cachedConfig;
+};

package/src/backend/hono/app.ts

@@ -0,0 +1,32 @@
+import { Hono } from 'hono';
+import { errorBoundary } from '@/backend/middleware/error';
+import { withAppContext } from '@/backend/middleware/context';
+import { withSupabase } from '@/backend/middleware/supabase';
+import { registerExampleRoutes } from '@/features/example/backend/route';
+import { registerTaskRoutes } from '@/features/kanban/backend/route';
+import { registerSseRoute } from '@/features/kanban/backend/sse-route';
+import type { AppEnv } from '@/backend/hono/context';
+
+let singletonApp: Hono<AppEnv> | null = null;
+
+export const createHonoApp = () => {
+  if (singletonApp) {
+    return singletonApp;
+  }
+
+  const app = new Hono<AppEnv>();
+
+  // Task routes: file-based, no Supabase required
+  registerTaskRoutes(app);
+  registerSseRoute(app);
+
+  // Supabase-dependent routes (scoped middleware)
+  app.use('/example/*', errorBoundary());
+  app.use('/example/*', withAppContext());
+  app.use('/example/*', withSupabase());
+  registerExampleRoutes(app);
+
+  singletonApp = app;
+
+  return app;
+};

package/src/backend/hono/context.ts

@@ -0,0 +1,38 @@
+import type { Context } from 'hono';
+import type { SupabaseClient } from '@supabase/supabase-js';
+
+export type AppLogger = Pick<Console, 'info' | 'error' | 'warn' | 'debug'>;
+
+export type AppConfig = {
+  supabase: {
+    url: string;
+    serviceRoleKey: string;
+  };
+};
+
+export type AppVariables = {
+  supabase: SupabaseClient;
+  logger: AppLogger;
+  config: AppConfig;
+};
+
+export type AppEnv = {
+  Variables: AppVariables;
+};
+
+export type AppContext = Context<AppEnv>;
+
+export const contextKeys = {
+  supabase: 'supabase',
+  logger: 'logger',
+  config: 'config',
+} as const satisfies Record<keyof AppVariables, keyof AppVariables>;
+
+export const getSupabase = (c: AppContext) =>
+  c.get(contextKeys.supabase) as SupabaseClient;
+
+export const getLogger = (c: AppContext) =>
+  c.get(contextKeys.logger) as AppLogger;
+
+export const getConfig = (c: AppContext) =>
+  c.get(contextKeys.config) as AppConfig;

package/src/backend/http/response.ts

@@ -0,0 +1,64 @@
+import type { ContentfulStatusCode } from 'hono/utils/http-status';
+import type { AppContext } from '@/backend/hono/context';
+
+export type SuccessResult<TData> = {
+  ok: true;
+  status: ContentfulStatusCode;
+  data: TData;
+};
+
+export type ErrorResult<TCode extends string, TDetails = unknown> = {
+  ok: false;
+  status: ContentfulStatusCode;
+  error: {
+    code: TCode;
+    message: string;
+    details?: TDetails;
+  };
+};
+
+export type HandlerResult<TData, TCode extends string, TDetails = unknown> =
+  | SuccessResult<TData>
+  | ErrorResult<TCode, TDetails>;
+
+export const success = <TData>(
+  data: TData,
+  status: ContentfulStatusCode = 200,
+): SuccessResult<TData> => ({
+  ok: true,
+  status,
+  data,
+});
+
+export const failure = <TCode extends string, TDetails = unknown>(
+  status: ContentfulStatusCode,
+  code: TCode,
+  message: string,
+  details?: TDetails,
+): ErrorResult<TCode, TDetails> => ({
+  ok: false,
+  status,
+  error: {
+    code,
+    message,
+    ...(details === undefined ? {} : { details }),
+  },
+});
+
+export const respond = <TData, TCode extends string, TDetails = unknown>(
+  c: AppContext,
+  result: HandlerResult<TData, TCode, TDetails>,
+) => {
+  if (result.ok) {
+    return c.json(result.data, result.status);
+  }
+
+  const errorResult = result as ErrorResult<TCode, TDetails>;
+
+  return c.json(
+    {
+      error: errorResult.error,
+    },
+    errorResult.status,
+  );
+};

package/src/backend/middleware/context.ts

@@ -0,0 +1,23 @@
+import { createMiddleware } from 'hono/factory';
+import { getAppConfig } from '@/backend/config';
+import {
+  contextKeys,
+  type AppEnv,
+  type AppLogger,
+} from '@/backend/hono/context';
+
+const logger: AppLogger = {
+  info: (...args) => console.info(...args),
+  error: (...args) => console.error(...args),
+  warn: (...args) => console.warn(...args),
+  debug: (...args) => console.debug(...args),
+};
+
+export const withAppContext = () =>
+  createMiddleware<AppEnv>(async (c, next) => {
+    const config = getAppConfig();
+    c.set(contextKeys.logger, logger);
+    c.set(contextKeys.config, config);
+
+    await next();
+  });

package/src/backend/middleware/error.ts

@@ -0,0 +1,31 @@
+import { createMiddleware } from 'hono/factory';
+import { match, P } from 'ts-pattern';
+import {
+  contextKeys,
+  type AppEnv,
+  type AppLogger,
+} from '@/backend/hono/context';
+
+export const errorBoundary = () =>
+  createMiddleware<AppEnv>(async (c, next) => {
+    try {
+      await next();
+    } catch (error) {
+      const logger = c.get(contextKeys.logger) as AppLogger | undefined;
+      const message = match(error)
+        .with(P.instanceOf(Error), (err) => err.message)
+        .otherwise(() => 'Unexpected error');
+
+      logger?.error?.(error);
+
+      return c.json(
+        {
+          error: {
+            code: 'INTERNAL_SERVER_ERROR',
+            message,
+          },
+        },
+        500,
+      );
+    }
+  });

package/src/backend/middleware/supabase.ts

@@ -0,0 +1,23 @@
+import { createMiddleware } from 'hono/factory';
+import {
+  contextKeys,
+  type AppEnv,
+} from '@/backend/hono/context';
+import { createServiceClient } from '@/backend/supabase/client';
+
+export const withSupabase = () =>
+  createMiddleware<AppEnv>(async (c, next) => {
+    const config = c.get(
+      contextKeys.config,
+    ) as AppEnv['Variables']['config'] | undefined;
+
+    if (!config) {
+      throw new Error('Application configuration is not available.');
+    }
+
+    const client = createServiceClient(config.supabase);
+
+    c.set(contextKeys.supabase, client);
+
+    await next();
+  });

package/src/backend/supabase/client.ts

@@ -0,0 +1,17 @@
+import { createClient } from '@supabase/supabase-js';
+import type { SupabaseClient } from '@supabase/supabase-js';
+
+export type ServiceClientConfig = {
+  url: string;
+  serviceRoleKey: string;
+};
+
+export const createServiceClient = ({
+  url,
+  serviceRoleKey,
+}: ServiceClientConfig): SupabaseClient =>
+  createClient(url, serviceRoleKey, {
+    auth: {
+      persistSession: false,
+    },
+  });