refactor: introduce Hono RPC and Zod validation

feat(api): add Zod validation for subscriptions
feat(api): add db middleware
refactor(web): use Hono RPC client in AuthProvider
chore: add missing types dependencies

Co-authored-by: Gemini <noreply@google.com>

Author: arkjun

apps/api/package.json

@@ -19,13 +19,15 @@
     "db:seed:prod": "tsx scripts/seed.ts > scripts/seed.sql && wrangler d1 execute sublistme-db --file=scripts/seed.sql"
   },
   "dependencies": {
+    "@hono/zod-validator": "^0.7.6",
     "@lucia-auth/adapter-sqlite": "^3.0.2",
     "@sublistme/db": "workspace:*",
     "arctic": "^3.7.0",
     "drizzle-orm": "^0.38.3",
     "hono": "^4.11.4",
     "lucia": "^3.2.2",
-    "oslo": "^1.2.1"
+    "oslo": "^1.2.1",
+    "zod": "^4.3.6"
   },
   "devDependencies": {
     "@cloudflare/vitest-pool-workers": "^0.11.1",

apps/api/src/index.ts

@@ -6,6 +6,8 @@ import { auth } from './routes/auth';
 import { subscriptions } from './routes/subscriptions';
 import { users } from './routes/users';
 
+import { dbMiddleware, type DbVariables } from './middleware/db';
+
 export type Env = {
   DB: D1Database;
   GOOGLE_CLIENT_ID: string;
@@ -17,7 +19,7 @@ export type Env = {
 type Variables = {
   user: User | null;
   session: Session | null;
-};
+} & DbVariables;
 
 const app = new Hono<{ Bindings: Env; Variables: Variables }>();
 
@@ -34,6 +36,7 @@ app.use(
   }),
 );
 app.use('/*', sessionMiddleware);
+app.use('/*', dbMiddleware);
 
 // Routes
 app.route('/auth', auth);

apps/api/src/middleware/db.ts

@@ -0,0 +1,16 @@
+import { drizzle, type DrizzleD1Database } from 'drizzle-orm/d1';
+import { createMiddleware } from 'hono/factory';
+import type { Env } from '../index';
+
+export type DbVariables = {
+  db: DrizzleD1Database;
+};
+
+export const dbMiddleware = createMiddleware<{
+  Bindings: Env;
+  Variables: DbVariables;
+}>(async (c, next) => {
+  const db = drizzle(c.env.DB);
+  c.set('db', db);
+  await next();
+});

apps/api/src/routes/subscriptions.ts

@@ -1,16 +1,40 @@
+import { zValidator } from '@hono/zod-validator';
 import { subscriptions as subscriptionsTable } from '@sublistme/db/schema';
-import type { SubscriptionInput } from '@sublistme/db/types';
 import { and, eq } from 'drizzle-orm';
-import { drizzle } from 'drizzle-orm/d1';
 import { Hono } from 'hono';
 import type { Session, User } from 'lucia';
+import { z } from 'zod';
 import type { Env } from '../index';
 import { requireAuth } from '../middleware/auth';
+import type { DbVariables } from '../middleware/db';
 
 type Variables = {
   user: User | null;
   session: Session | null;
-};
+} & DbVariables;
+
+const subscriptionSchema = z.object({
+  name: z.string().min(1),
+  description: z.string().optional(),
+  price: z.number().nonnegative(),
+  originalPrice: z.number().nonnegative().optional(),
+  currency: z.enum(['KRW', 'USD', 'JPY', 'EUR']).default('KRW'),
+  billingCycle: z.enum(['monthly', 'yearly', 'weekly', 'quarterly']).default('monthly'),
+  nextBillingDate: z.string().optional(),
+  startDate: z.string().optional(),
+  country: z.string().default('KR'),
+  category: z.enum(['ott', 'music', 'gaming', 'shopping', 'productivity', 'cloud', 'news', 'fitness', 'education', 'finance', 'food', 'security', 'other']).optional(),
+  url: z.string().optional(),
+  logoUrl: z.string().optional(),
+  memo: z.string().optional(),
+  isActive: z.boolean().default(true),
+});
+
+const updateSubscriptionSchema = subscriptionSchema.partial();
+
+const bulkSubscriptionSchema = z.object({
+  subscriptions: z.array(subscriptionSchema),
+});
 
 export const subscriptions = new Hono<{ Bindings: Env; Variables: Variables }>()
   // 모든 구독 라우트에 인증 필수
@@ -19,7 +43,7 @@ export const subscriptions = new Hono<{ Bindings: Env; Variables: Variables }>()
   // 구독 목록 조회 (사용자별)
   .get('/', async (c) => {
     const user = c.get('user')!;
-    const db = drizzle(c.env.DB);
+    const db = c.get('db');
     const result = await db
       .select()
       .from(subscriptionsTable)
@@ -30,7 +54,7 @@ export const subscriptions = new Hono<{ Bindings: Env; Variables: Variables }>()
   // 구독 상세 조회 (사용자별)
   .get('/:id', async (c) => {
     const user = c.get('user')!;
-    const db = drizzle(c.env.DB);
+    const db = c.get('db');
     const id = c.req.param('id');
     const result = await db
       .select()
@@ -49,10 +73,10 @@ export const subscriptions = new Hono<{ Bindings: Env; Variables: Variables }>()
   })
 
   // 구독 생성 (사용자 ID 자동 추가)
-  .post('/', async (c) => {
+  .post('/', zValidator('json', subscriptionSchema), async (c) => {
     const user = c.get('user')!;
-    const db = drizzle(c.env.DB);
-    const body = await c.req.json();
+    const db = c.get('db');
+    const body = c.req.valid('json');
     const result = await db
       .insert(subscriptionsTable)
       .values({ ...body, userId: user.id })
@@ -61,20 +85,16 @@ export const subscriptions = new Hono<{ Bindings: Env; Variables: Variables }>()
   })
 
   // 구독 일괄 생성 (다건)
-  .post('/bulk', async (c) => {
+  .post('/bulk', zValidator('json', bulkSubscriptionSchema), async (c) => {
     const user = c.get('user')!;
-    const db = drizzle(c.env.DB);
-    const body = await c.req.json<{ subscriptions: SubscriptionInput[] }>();
+    const db = c.get('db');
+    const { subscriptions } = c.req.valid('json');
 
-    if (!body.subscriptions || !Array.isArray(body.subscriptions)) {
-      return c.json({ error: 'Invalid request body' }, 400);
-    }
-
-    if (body.subscriptions.length === 0) {
+    if (subscriptions.length === 0) {
       return c.json({ error: 'No subscriptions provided' }, 400);
     }
 
-    const subscriptionsToInsert = body.subscriptions.map((s) => ({
+    const subscriptionsToInsert = subscriptions.map((s) => ({
       ...s,
       userId: user.id,
     }));
@@ -88,11 +108,11 @@ export const subscriptions = new Hono<{ Bindings: Env; Variables: Variables }>()
   })
 
   // 구독 수정 (사용자별)
-  .put('/:id', async (c) => {
+  .put('/:id', zValidator('json', updateSubscriptionSchema), async (c) => {
     const user = c.get('user')!;
-    const db = drizzle(c.env.DB);
+    const db = c.get('db');
     const id = c.req.param('id');
-    const body = await c.req.json();
+    const body = c.req.valid('json');
     const result = await db
       .update(subscriptionsTable)
       .set(body)
@@ -113,7 +133,7 @@ export const subscriptions = new Hono<{ Bindings: Env; Variables: Variables }>()
   // 구독 삭제 (사용자별)
   .delete('/:id', async (c) => {
     const user = c.get('user')!;
-    const db = drizzle(c.env.DB);
+    const db = c.get('db');
     const id = c.req.param('id');
     const result = await db
       .delete(subscriptionsTable)

apps/web/package.json

@@ -33,6 +33,8 @@
     "@types/react": "^19.0.2",
     "@types/react-dom": "^19.0.2",
     "autoprefixer": "^10.4.20",
+    "drizzle-orm": "^0.38.3",
+    "lucia": "^3.2.2",
     "postcss": "^8.4.49",
     "tailwindcss": "^3.4.17",
     "typescript": "^5.7.2",

apps/web/src/components/auth/auth-provider.tsx

@@ -9,7 +9,7 @@ import {
   useState,
 } from 'react';
 
-const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8787';
+import { api } from '@/lib/api';
 
 type User = {
   id: string;
@@ -44,10 +44,8 @@ export function AuthProvider({ children }: { children: ReactNode }) {
 
   const fetchUser = useCallback(async () => {
     try {
-      const res = await fetch(`${API_URL}/auth/me`, {
-        credentials: 'include',
-      });
-      const data: { user: User | null } = await res.json();
+      const res = await api.auth.me.$get();
+      const data = await res.json();
       setUser(data.user);
     } catch (error) {
       console.error('Failed to fetch user:', error);
@@ -63,19 +61,17 @@ export function AuthProvider({ children }: { children: ReactNode }) {
 
   /* Existing logic */
   const login = () => {
-    window.location.href = `${API_URL}/auth/login/google`;
+    window.location.href = api.auth.login.google.$url().toString();
   };
 
+
   const loginWithEmail = async (email: string, password: string) => {
-    const res = await fetch(`${API_URL}/auth/login/email`, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ email, password }),
-      credentials: 'include',
+    const res = await api.auth.login.email.$post({
+      json: { email, password },
     });
 
     if (!res.ok) {
-      const error = (await res.json()) as { error?: string };
+      const error = await res.json();
       throw new Error(error.error || 'Login failed');
     }
     await fetchUser();
@@ -86,26 +82,21 @@ export function AuthProvider({ children }: { children: ReactNode }) {
     password: string,
     name: string,
   ) => {
-    const res = await fetch(`${API_URL}/auth/signup/email`, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ email, password, name }),
-      credentials: 'include',
+    const res = await api.auth.signup.email.$post({
+      json: { email, password, name },
     });
 
     if (!res.ok) {
-      const error = (await res.json()) as { error?: string };
+      const error = await res.json();
       throw new Error(error.error || 'Signup failed');
     }
     await fetchUser();
   };
 
   const logout = async () => {
     try {
-      await fetch(`${API_URL}/auth/logout`, {
-        method: 'POST',
-        credentials: 'include',
-      });
+      await api.auth.logout.$post();
+
       setUser(null);
     } catch (error) {
       console.error('Failed to logout:', error);

apps/web/src/lib/api.ts

@@ -4,7 +4,14 @@ import { hc } from 'hono/client';
 
 const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8787';
 
-export const api = hc<AppType>(API_URL);
+export const api = hc<AppType>(API_URL, {
+  fetch: (input: RequestInfo | URL, init?: RequestInit) => {
+    return fetch(input, {
+      ...init,
+      credentials: 'include',
+    });
+  },
+});
 
 export type UserPreferences = {
   locale: Locale;