initial commit

245 files changed, 46874 insertions, 0 deletions

diff --git a/lib/admin-users/repository.ts b/lib/admin-users/repository.ts
new file mode 100644
index 00000000..aff2da28
--- /dev/null
+++ b/lib/admin-users/repository.ts
@@ -0,0 +1,171 @@
+import db from "@/db/db"; 
+import { users, userRoles,userView,roles, type User, type UserRole, type UserView, Role  } from "@/db/schema/users";
+import { companies, type Company } from "@/db/schema/companies";
+import {
+  eq,
+  inArray,
+  asc,
+  desc,
+  and,
+  count,
+  gt,
+  sql,
+  SQL,
+} from "drizzle-orm";
+import { PgTransaction } from "drizzle-orm/pg-core";
+import { Vendor, vendors } from "@/db/schema/vendors";
+
+// ============================================================
+// 타입
+// ============================================================
+
+export type NewUser = typeof users.$inferInsert;       // User insert 시 필요한 타입
+export type NewUserRole = typeof userRoles.$inferInsert; // UserRole insert 시 필요한 타입
+export type NewCompany = typeof companies.$inferInsert;   // Company insert 시 필요한 타입
+
+
+
+export async function selectUsersWithCompanyAndRoles(
+  tx: PgTransaction<any, any, any>,
+  params: {
+    where?: any
+    orderBy?: (ReturnType<typeof asc> | ReturnType<typeof desc>)[]
+    offset?: number
+    limit?: number
+  }
+) {
+  const { where, orderBy, offset = 0, limit = 10 } = params
+
+  // 1) 쿼리 빌더 생성
+  const queryBuilder = tx
+    .select()
+    .from(userView)
+    .where(where)
+    .orderBy(...(orderBy ?? []))
+    .offset(offset)
+    .limit(limit)
+
+  const rows = await queryBuilder
+  return rows
+}
+
+
+/** 총 개수 count */
+export async function countUsers(
+  tx: PgTransaction<any, any, any>,
+  where?: any
+) {
+  const res = await tx.select({ count: count() }).from(userView).where(where);
+  return res[0]?.count ?? 0;
+}
+
+export async function groupByCompany(
+  tx: PgTransaction<any, any, any>,
+) {
+  return tx
+    .select({
+      companyId: users.companyId,
+      count: count(),
+    })
+    .from(users)
+    .groupBy(users.companyId)
+    .having(gt(count(), 0));
+}
+
+export async function groupByRole(tx: PgTransaction<any, any, any>) {
+  return tx
+    .select({
+      roleId: userRoles.roleId, 
+      count: sql<number>`COUNT(*)`.as("count"),
+    })
+    .from(users)
+    .leftJoin(userRoles, eq(userRoles.userId, users.id))
+    .leftJoin(roles, eq(roles.id, userRoles.roleId))
+    .groupBy(userRoles.roleId, roles.id, roles.name)
+    .having(gt(sql<number>`COUNT(*)` /* 또는 count()와 동일 */, 0));
+}
+
+export async function insertUser(
+  tx: PgTransaction<any, any, any>,
+  data: NewUser
+) {
+  return tx.insert(users).values(data).returning();
+}
+
+export async function insertUserRole(
+  tx: PgTransaction<any, any, any>,
+  data: NewUserRole
+) {
+  return tx.insert(userRoles).values(data).returning();
+}
+
+export async function updateUser(
+  tx: PgTransaction<any, any, any>,
+  userId: number,
+  data: Partial<User>
+) {
+  return tx
+    .update(users)
+    .set(data)
+    .where(eq(users.id, userId))
+    .returning();
+}
+
+/** 복수 업데이트 */
+export async function updateUsers(
+  tx: PgTransaction<any, any, any>,
+ids: number[],
+data: Partial<User>
+) {
+return tx
+  .update(users)
+  .set(data)
+  .where(inArray(users.id, ids))
+  .returning({ companyId: users.companyId });
+}
+
+export async function deleteRolesByUserId(
+  tx: PgTransaction<any, any, any>,
+  userId: number
+) {
+  return tx.delete(userRoles).where(eq(userRoles.userId, userId));
+}
+
+
+export async function deleteRolesByUserIds(
+  tx: PgTransaction<any, any, any>,
+  ids: number[]
+) {
+  return tx.delete(userRoles).where(inArray(userRoles.userId, ids));
+}
+
+export async function deleteUserById(
+  tx: PgTransaction<any, any, any>,
+  userId: number
+) {
+  return tx.delete(users).where(eq(users.id, userId));
+}
+
+
+export async function deleteUsersByIds(
+  tx: PgTransaction<any, any, any>,
+  ids: number[]
+) {
+  return tx.delete(users).where(inArray(users.id, ids));
+}
+
+export async function findAllCompanies(): Promise<Vendor[]> {
+  return db.select().from(vendors).orderBy(asc(vendors.vendorName));
+}
+
+export async function findAllRoles(): Promise<Role[]> {
+  return db.select().from(roles).where(eq(roles.domain ,'partners')).orderBy(asc(roles.name));
+}
+
+export const getUserById = async (id: number): Promise<UserView | null> => {
+  const userFouned = await db.select().from(userView).where(eq(userView.user_id, id)).execute();
+  if (userFouned.length === 0) return null;
+
+  const user = userFouned[0];
+  return user
+};
diff --git a/lib/admin-users/service.ts b/lib/admin-users/service.ts
new file mode 100644
index 00000000..5d738d38
--- /dev/null
+++ b/lib/admin-users/service.ts
@@ -0,0 +1,531 @@
+"use server";
+
+import { revalidateTag, unstable_noStore } from "next/cache";
+import db from "@/db/db";
+import logger from '@/lib/logger';
+
+import { Role, roles, users, userView, type User, type UserView } from "@/db/schema/users"; // User 테이블
+import { type Company } from "@/db/schema/companies"; // User 테이블
+import { asc, desc, ilike, inArray, and, gte, lte, not, or, eq } from "drizzle-orm";
+
+// 레포지토리 함수들 (예시) - 아래처럼 작성했다고 가정
+import {
+  selectUsersWithCompanyAndRoles,
+  countUsers,
+  insertUser,
+  insertUserRole,
+  updateUser, deleteRolesByUserId, deleteRolesByUserIds,
+  deleteUserById,
+  deleteUsersByIds,
+  groupByCompany,
+  groupByRole,
+  findAllCompanies, getUserById, updateUsers,
+  findAllRoles
+} from "./repository";
+
+import { filterColumns } from "@/lib/filter-columns";
+import { unstable_cache } from "@/lib/unstable-cache";
+import { getErrorMessage } from "@/lib/handle-error";
+
+// types
+import type { CreateUserSchema, UpdateUserSchema, GetUsersSchema } from "./validations";
+
+import { sendEmail } from "@/lib//mail/sendEmail";
+import { Vendor } from "@/db/schema/vendors";
+
+/**
+ * 복잡한 조건으로 User 목록을 조회 (+ pagination) 하고,
+ * 총 개수에 따라 pageCount를 계산해서 리턴.
+ * Next.js의 unstable_cache를 사용해 일정 시간 캐시.
+ */
+
+
+export async function getUsers(input: GetUsersSchema) {
+  return unstable_cache(
+    async () => {
+      try {
+        const offset = (input.page - 1) * input.perPage;
+
+        // (1) advancedWhere
+        const advancedWhere = filterColumns({
+          table: userView,
+          filters: input.filters,
+          joinOperator: input.joinOperator,
+        });
+
+        // (2) globalWhere
+        let globalWhere;
+        if (input.search) {
+          const s = `%${input.search}%`;
+          globalWhere = or(
+            ilike(userView.user_name, s),
+            ilike(userView.user_email, s),
+            ilike(userView.company_name, s)
+          );
+        }
+
+        // (3) 디폴트 domainWhere = eq(userView.domain, "partners")
+        //     다만, 사용자가 이미 domain 필터를 줬다면 적용 X
+        let domainWhere;
+        const hasDomainFilter = input.filters?.some((f) => f.id === "user_domain");
+        if (!hasDomainFilter) {
+          domainWhere = eq(userView.user_domain, "partners");
+        }
+
+        // (4) 최종 where
+        const finalWhere = and(advancedWhere, globalWhere, domainWhere);
+
+        // (5) 정렬
+        const orderBy =
+          input.sort.length > 0
+            ? input.sort.map((item) =>
+                item.desc ? desc(userView[item.id]) : asc(userView[item.id])
+              )
+            : [desc(users.createdAt)];
+
+        // ...
+        const { data, total } = await db.transaction(async (tx) => {
+          const data = await selectUsersWithCompanyAndRoles(tx, {
+            where: finalWhere,
+            orderBy,
+            offset,
+            limit: input.perPage,
+          });
+
+          const total = await countUsers(tx, finalWhere);
+          return { data, total };
+        });
+
+        const pageCount = Math.ceil(total / input.perPage);
+        return { data, pageCount };
+      } catch (err) {
+        return { data: [], pageCount: 0 };
+      }
+    },
+    [JSON.stringify(input)],
+    {
+      revalidate: 3600,
+      tags: ["users"],
+    }
+  )();
+}
+
+export async function findUserById(id: number) {
+  try {
+    logger.info({ id }, 'Fetching user by ID');
+    const user = await getUserById(id);
+    if (!user) {
+      logger.warn({ id }, 'User not found');
+    } else {
+      logger.debug({ user }, 'User fetched successfully');
+    }
+    return user;
+  } catch (error) {
+    logger.error({ error }, 'Error fetching user by ID');
+    throw new Error('Failed to fetch user');
+  }
+};
+
+/**
+ * User 생성
+ * 필요 시 companyId, roles, etc. 함께 처리
+ */
+// export async function createUser(input: CreateUserSchema & { language?: string }) {
+//   unstable_noStore(); // 캐싱 방지(Next.js 서버 액션용)
+//   try {
+//       const userLang = input.language || "en"; // 클라이언트가 안 주면 기본 "en"
+//       // 예시 subject 분기
+//       const subject =
+//         userLang === "ko"
+//           ? "[eVCP] 어드민 계정이 생성되었습니다."
+//           : "[eVCP] Admin Account Created";
+
+//       const loginUrl =
+//         userLang === "ko"
+//           ? "http://3.36.56.124:3000/ko/login"
+//           : "http://3.36.56.124:3000/en/login";
+
+//       // 실제 sendEmail
+//       await sendEmail({
+//         to: input.email,
+//         subject,
+//         template: "admin-created",
+//         context: {
+//           name: input.name,
+//           loginUrl, // 위에서 분기한 URL
+//           language: userLang, // 템플릿에서 {{t ... lng=language}} 처럼 쓸 수도
+//         },
+//       });
+
+//     await db.transaction(async (tx) => {
+//       // insertUser는 단건 생성
+//       const [newUser] = await insertUser(tx, {
+//         name: input.name,
+//         email: input.email,
+//         domain: input.domain,
+//         companyId: input.companyId ?? null,
+//         // 기타 필요한 필드
+//       });
+
+//       // 만약 roles를 함께 생성하려면,
+//         await insertUserRole(tx, { userId: newUser.id, roleId: Number(r) });
+//       }
+//     });
+
+//     // 캐시 무효화
+//     revalidateTag("users");
+//     revalidateTag("user-company-counts");
+
+
+
+//     return { data: null, error: null };
+//   } catch (err) {
+//     return { data: null, error: getErrorMessage(err) };
+//   }
+// }
+
+export async function createAdminUser(input: CreateUserSchema & { language?: string }) {
+  unstable_noStore(); // Next.js 캐싱 방지
+
+  try {
+    // 예) 관리자 메일 알림 로직
+    // roles에 'Vendor Admin'을 넣을 거라면, 사실상 input.roles.includes("admin") 체크 대신
+    // 아래에서 직접 메일 보내도 됨. 질문 예시대로 유지하겠습니다.
+    const userLang = input.language || "en"; 
+    const subject = userLang === "ko"
+      ? "[eVCP] 어드민 계정이 생성되었습니다."
+      : "[eVCP] Admin Account Created";
+
+      const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || 'http://3.36.56.124:3000'
+
+    const loginUrl = userLang === "ko"
+      ? `${baseUrl}/ko/partners`
+      : `${baseUrl}/en/partners`;
+
+    await sendEmail({
+      to: input.email,
+      subject,
+      template: "admin-created", // 예: nodemailer + handlebars 등
+      context: {
+        name: input.name,
+        loginUrl,
+        language: userLang,
+      },
+    });
+
+    // 트랜잭션 시작
+    await db.transaction(async (tx) => {
+      // 1. 먼저 roles 테이블에서 name = "Vendor Admin" AND domain = input.domain 인 것을 찾는다.
+      let [vendorAdminRole] = await tx
+        .select()
+        .from(roles)
+        .where(
+          and(
+            eq(roles.name, "Vendor Admin"),
+            eq(roles.domain, input.domain),
+            eq(roles.companyId, input.companyId as number),
+          )
+        )
+        .limit(1);
+
+      // 2. 만약 없다면, 새롭게 생성한다.
+      if (!vendorAdminRole) {
+        // companyId나 description 등은 필요에 따라 조정
+        const insertedRoles = await tx
+          .insert(roles)
+          .values({
+            name: "Vendor Admin",
+            domain: input.domain,
+            companyId: input.companyId ?? null,
+            description: "Auto created Vendor Admin role",
+          })
+          .returning();
+        vendorAdminRole = insertedRoles[0]; // 방금 insert한 row
+      }
+
+      // 3. 유저 생성
+      const [newUser] = await insertUser(tx, {
+        name: input.name,
+        email: input.email,
+        domain: input.domain,
+        companyId: input.companyId ?? null,
+        // 기타 필요한 필드 추가
+      });
+
+      // 4. Vendor Admin role을 user_roles 에 할당 (반복문 없이 단일 insert)
+      await insertUserRole(tx, {
+        userId: newUser.id,
+        roleId: vendorAdminRole.id, // Number()로 캐스팅할 필요 없이 정수로 관리한다고 가정
+      });
+    });
+
+    // 캐시 무효화
+    revalidateTag("users");
+    revalidateTag("user-company-counts");
+
+    return { data: null, error: null };
+  } catch (err) {
+    return { data: null, error: getErrorMessage(err) };
+  }
+}
+
+/**
+ * 회사별 유저 개수 groupBy
+ */
+export async function getUserCountGroupByCompany() {
+  return unstable_cache(
+    async () => {
+      try {
+        // 예: { [companyId: number]: number }
+        const result = await db.transaction(async (tx) => {
+          const rows = await groupByCompany(tx);
+          // groupByCompany(tx): SELECT companyId, COUNT(*) FROM users GROUP BY companyId HAVING COUNT(*) > 0
+          // 예: [{ companyId: 1, count: 10 }, { companyId: 2, count: 3 }, ...]
+
+          // reduce해서 {1: 10, 2: 3, ...} 형태로 만들거나 그대로 반환할 수 있음
+          const obj: Record<number, number> = {};
+          for (const row of rows) {
+            if (row.companyId !== null) {
+              obj[row.companyId] = row.count;
+            } else {
+              // companyId가 null인 유저 수
+              obj[-1] = (obj[-1] ?? 0) + row.count;
+            }
+          }
+          return obj;
+        });
+        return result;
+      } catch (err) {
+        return {};
+      }
+    },
+    ["user-company-counts"],
+    {
+      revalidate: 3600,
+    }
+  )();
+}
+
+/**
+ * 롤별 유저 개수 groupBy
+ */
+export async function getUserCountGroupByRole() {
+  return unstable_cache(
+    async () => {
+      try {
+        const result = await db.transaction(async (tx) => {
+          const rows = await groupByRole(tx);
+
+          const obj: Record<number, number> = {};
+          for (const row of rows) {
+            if (row.roleId !== null) {
+              obj[row.roleId] = row.count;
+            } else {
+              // roleId가 null인 유저 수
+              obj[-1] = (obj[-1] ?? 0) + row.count;
+            }
+          }
+          return obj;
+        });
+
+        // 여기서 result를 반환해 줘야 함!
+        return result;
+      } catch (err) {
+        console.error("getUserCountGroupByRole error:", err);
+        return {};
+      }
+    },
+    ["user-role-counts"],
+    {
+      revalidate: 3600,
+    }
+  )();
+}
+/**
+ * 단건 업데이트
+ */
+export async function modifiUser(input: UpdateUserSchema & { id: number } & { language?: string }) {
+  unstable_noStore();
+
+  try {
+
+    const oldUser = await getUserById(input.id)
+    const oldEmail = oldUser?.user_email ?? null;
+
+    const data = await db.transaction(async (tx) => {
+      // 1) 먼저 User 테이블 업데이트
+      const [res] = await updateUser(tx, input.id, {
+        name: input.name,
+        companyId: input.companyId,
+        email: input.email,
+      });
+
+      // 2) roles가 함께 왔다면, 기존 roles 삭제 → 새 roles 삽입
+      if (input.roles) {
+        // 기존 roles 삭제
+        await deleteRolesByUserId(tx, input.id);
+
+        // 새 roles 삽입
+        for (const r of input.roles) {
+          await insertUserRole(tx, {
+            userId: input.id,
+            roleId: Number(r),
+          });
+        }
+      }
+
+      return res;
+    });
+
+    // 3) 캐시 무효화
+    revalidateTag("users");
+
+    // 4) 이메일이 변경되었고, roles 중에 "admin"이 있다면 → 메일 발송
+    const isEmailChanged = oldEmail && input.email && oldEmail !== input.email;
+    const hasAdminRole = input.roles?.includes("admin") ?? false;
+
+    if (isEmailChanged && hasAdminRole && input.email) {
+      await sendEmail({
+        to: input.email,
+        subject: "[EVCP] Admin Email Changed",
+        template: "admin-email-changed",
+        context: {
+          name: input.name,
+          oldEmail,
+          newEmail: input.email,
+          language: input.language ?? "en",
+        },
+      });
+    }
+
+    // 예: companyId 변경 시 회사별 count도 다시 계산해야 하는 경우
+    if (data.companyId === input.companyId) {
+      revalidateTag("user-company-counts");
+    }
+
+
+    return { data: null, error: null };
+  } catch (err) {
+    return { data: null, error: getErrorMessage(err) };
+  }
+}
+
+
+/** 복수 업데이트 */
+export async function modifiUsers(input: {
+  ids: number[];                   // 업데이트 대상 유저 ID 배열
+  companyId?: User["companyId"];   // 회사 ID (있으면 업데이트)
+  roles?: UserView["roles"];       // 새 roles 배열 (있으면 업데이트)
+}) {
+  unstable_noStore() // Next.js 서버 액션 캐싱 방지
+
+  try {
+    await db.transaction(async (tx) => {
+      // 1) 회사 정보 업데이트
+      if (typeof input.companyId !== "undefined") {
+        // companyId가 주어졌으면, 해당 사용자들의 companyId 변경
+        await updateUsers(tx, input.ids, { companyId: input.companyId })
+      }
+
+      // 2) roles 업데이트
+      //    (있으면 기존 roles 삭제 → 새 roles 삽입)
+      if (Array.isArray(input.roles)) {
+        // (a) 기존 roles 전부 삭제
+        await deleteRolesByUserIds(tx, input.ids)
+
+        // (b) 새 roles 삽입
+        for (const userId of input.ids) {
+          for (const r of input.roles) {
+            await insertUserRole(tx, {
+              userId,
+              roleId: Number(r),
+            })
+          }
+        }
+      }
+    })
+
+    // 캐시 무효화
+    revalidateTag("users")
+
+    return { data: null, error: null }
+  } catch (err) {
+    return { data: null, error: getErrorMessage(err) }
+  }
+}
+/**
+ * 단건 삭제
+ */
+export async function removeUser(input: { id: number }) {
+  unstable_noStore();
+
+  try {
+    await db.transaction(async (tx) => {
+      // 유저 삭제
+      await deleteRolesByUserId(tx, input.id);
+      await deleteUserById(tx, input.id);
+      // roles, otps 등도 함께 삭제해야 하면 여기서 처리
+    });
+
+    // 캐시 무효화
+    revalidateTag("users");
+    revalidateTag("user-company-counts");
+
+    return { data: null, error: null };
+  } catch (err) {
+    return { data: null, error: getErrorMessage(err) };
+  }
+}
+
+/**
+ * 복수 삭제
+ */
+export async function removeUsers(input: { ids: number[] }) {
+  unstable_noStore();
+
+  try {
+    await db.transaction(async (tx) => {
+      // user_roles도 있으면 먼저 삭제해야 할 수 있음
+      await deleteRolesByUserIds(tx, input.ids);
+      await deleteUsersByIds(tx, input.ids);
+    });
+
+    revalidateTag("users");
+    revalidateTag("user-company-counts");
+
+    return { data: null, error: null };
+  } catch (err) {
+    return { data: null, error: getErrorMessage(err) };
+  }
+}
+
+export async function getAllCompanies(): Promise<Vendor[]> {
+  try {
+    return await findAllCompanies(); // Company[]
+  } catch (err) {
+    throw new Error("Failed to get companies");
+  }
+}
+
+export async function getAllRoles(): Promise<Role[]> {
+  try {
+    return await findAllRoles(); 
+  } catch (err) {
+    throw new Error("Failed to get roles");
+  }
+}
+
+/**
+ * 이미 해당 이메일이 users 테이블에 존재하는지 확인하는 함수
+ * @param email 확인할 이메일
+ * @returns boolean - 존재하면 true, 없으면 false
+ */
+export async function checkEmailExists(email: string): Promise<boolean> {
+  const result = await db
+    .select({ id: users.id }) // 굳이 모든 컬럼 필요 없으니 id만
+    .from(users)
+    .where(eq(users.email, email))
+    .limit(1);
+
+  return result.length > 0; // 1건 이상 있으면 true
+}
diff --git a/lib/admin-users/table/add-ausers-dialog.tsx b/lib/admin-users/table/add-ausers-dialog.tsx
new file mode 100644
index 00000000..dd29c190
--- /dev/null
+++ b/lib/admin-users/table/add-ausers-dialog.tsx
@@ -0,0 +1,348 @@
+"use client"
+
+import * as React from "react"
+import { useForm } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+
+// react-hook-form + shadcn/ui Form
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { Role, userRoles } from "@/db/schema/users"
+import { createUserSchema, type CreateUserSchema } from "@/lib/admin-users/validations"
+import { createAdminUser, getAllCompanies, getAllRoles } from "@/lib/admin-users/service"
+import { type Company } from "@/db/schema/companies"
+import { MultiSelect } from "@/components/ui/multi-select"
+import {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+} from "@/components/ui/popover"
+import {
+  Command,
+  CommandInput,
+  CommandList,
+  CommandGroup,
+  CommandItem,
+  CommandEmpty,
+} from "@/components/ui/command"
+import { Check, ChevronsUpDown, Loader } from "lucide-react"
+import { cn } from "@/lib/utils"
+import { toast } from "sonner"
+import { Vendor } from "@/db/schema/vendors"
+
+const languageOptions = [
+  { value: "ko", label: "한국어" },
+  { value: "en", label: "English" },
+]
+
+
+export function AddUserDialog() {
+  const [open, setOpen] = React.useState(false)
+  const [companies, setCompanies] = React.useState<Vendor[]>([])  // 회사 목록
+  const [roles, setRoles] = React.useState<Role[]>([]) 
+  const [isAddPending, startAddTransition] = React.useTransition()
+
+
+  
+  React.useEffect(() => {
+    // 회사 목록 불러오기 (예시)
+    getAllCompanies().then((res) => {
+      setCompanies(res)
+    })
+
+    getAllRoles().then((res) => {
+      setRoles(res)
+    })
+  }, [])
+
+  // react-hook-form 세팅
+  const form = useForm<CreateUserSchema & { language?: string }>({
+    resolver: zodResolver(createUserSchema),
+    defaultValues: {
+      name: "",
+      email: "",
+      companyId: null,
+      language:'en',
+      // roles는 array<string>, 여기서는 단일 선택 시 [role]로 담음
+      roles: [],
+      domain:'partners'
+      // domain, etc. 필요하다면 추가
+    },
+  })
+
+
+  async function onSubmit(data: CreateUserSchema & { language?: string }) {
+      data.domain = "partners"
+
+    // 만약 단일 Select로 role을 정했다면, data.roles = ["manager"] 이런 식
+    startAddTransition(async ()=> {
+      const result = await createAdminUser(data)
+      if (result.error) {
+        toast.error(`에러: ${result.error}`)
+        return
+      }
+      form.reset()
+      setOpen(false)
+      toast.success("User added")
+    })
+
+  }
+
+  function handleDialogOpenChange(nextOpen: boolean) {
+    if (!nextOpen) {
+      form.reset()
+    }
+    setOpen(nextOpen)
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={handleDialogOpenChange}>
+      {/* 모달을 열기 위한 버튼 */}
+      <DialogTrigger asChild>
+        <Button variant="default" size="sm">
+          Add User
+        </Button>
+      </DialogTrigger>
+
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Create New User</DialogTitle>
+          <DialogDescription>
+            새 User 정보를 입력하고 <b>Create</b> 버튼을 누르세요.
+          </DialogDescription>
+        </DialogHeader>
+
+        {/* shadcn/ui Form을 이용해 react-hook-form과 연결 */}
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)}>
+            <div className="space-y-4 py-4">
+              {/* 사용자 이름 */}
+              <FormField
+                control={form.control}
+                name="name"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>User Name</FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder="e.g. dujin"
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              {/* 이메일 */}
+              <FormField
+                control={form.control}
+                name="email"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Email</FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder="e.g. user@example.com"
+                        type="email"
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              {/* 회사 선택 (companyId) */}
+              <FormField
+                control={form.control}
+                name="companyId"
+                render={({ field }) => {
+                  // 현재 선택된 회사 ID (number) → 문자열
+                  const valueString = field.value ? String(field.value) : ""
+
+
+                  // 현재 선택된 회사
+                  const selectedCompany = companies.find(
+                    (c) => String(c.id) === valueString
+                  )
+
+                  const selectedCompanyLabel = selectedCompany && `${selectedCompany.vendorName} ${selectedCompany.taxId}`
+
+                  const [popoverOpen, setPopoverOpen] = React.useState(false)
+
+
+                  return (
+                    <FormItem>
+                      <FormLabel>Company</FormLabel>
+                      <FormControl>
+                        <Popover
+                          open={popoverOpen}
+                          onOpenChange={setPopoverOpen}
+                          modal={true}
+                        >
+                          <PopoverTrigger asChild>
+                            <Button
+                              variant="outline"
+                              role="combobox"
+                              aria-expanded={popoverOpen}
+                              className="w-full justify-between"
+                            >
+                              {selectedCompany
+                                ? `${selectedCompany.vendorName} ${selectedCompany.taxId}`
+                                : "Select company..."}
+                              <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                            </Button>
+                          </PopoverTrigger>
+
+                          <PopoverContent className="w-full p-0">
+                            <Command>
+                              <CommandInput
+                                placeholder="Search company..."
+                                className="h-9"
+
+                              />
+                              <CommandList>
+                                <CommandEmpty>No company found.</CommandEmpty>
+                                <CommandGroup>
+                                  {companies.map((comp) => {
+                                    // string(comp.id)
+                                    const compIdStr = String(comp.id)
+                                    const label = `${comp.vendorName}${comp.taxId}`
+                                    const label2 = `${comp.vendorName} ${comp.taxId}`
+                                    return (
+                                      <CommandItem
+                                        key={comp.id}
+                                        value={label2}
+                                        onSelect={() => {
+                                          // 회사 ID를 number로
+                                          field.onChange(Number(comp.id))
+                                          setPopoverOpen(false)
+
+                                        }}
+                                      >
+                                        {label2}
+                                        <Check
+                                          className={cn(
+                                            "ml-auto h-4 w-4",
+                                            selectedCompanyLabel === label2
+                                              ? "opacity-100"
+                                              : "opacity-0"
+                                          )}
+                                        />
+                                      </CommandItem>
+                                    )
+                                  })}
+                                </CommandGroup>
+                              </CommandList>
+                            </Command>
+                          </PopoverContent>
+                        </Popover>
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )
+                }}
+              />
+              {/* Role (Vendor Admin) - 읽기 전용 */}
+              <FormField
+                control={form.control}
+                name="roles" // 실제 필드: z.array(z.string())
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Role</FormLabel>
+                    {/* UI에선 그냥 Vendor Admin이라고 표시만 (disabled) */}
+                    <FormControl>
+                      <Input
+                        readOnly
+                        disabled
+                        value="Vendor Admin"
+                        className="bg-gray-50 text-gray-500"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              {/* language Select */}
+              <FormField
+                control={form.control}
+                name="language"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Language</FormLabel>
+                    <FormControl>
+                      <Select
+                        onValueChange={field.onChange}
+                        // 'value'로 현재 값 연결. defaultValue 대신 Controlled 컴포넌트로
+                        value={field.value}
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select language" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {languageOptions.map((v, index) => (
+                            <SelectItem key={index} value={v.value}>
+                              {v.label}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+            </div>
+
+            <DialogFooter>
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => setOpen(false)}
+                disabled={isAddPending}
+              >
+              {isAddPending && (
+                <Loader
+                  className="mr-2 size-4 animate-spin"
+                  aria-hidden="true"
+                />
+              )}
+                Cancel
+              </Button>
+              <Button type="submit" disabled={form.formState.isSubmitting || isAddPending}>
+              {isAddPending && (
+                <Loader
+                  className="mr-2 size-4 animate-spin"
+                  aria-hidden="true"
+                />
+              )}
+                Create
+              </Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  )
+}
\ No newline at end of file
diff --git a/lib/admin-users/table/ausers-table-columns.tsx b/lib/admin-users/table/ausers-table-columns.tsx
new file mode 100644
index 00000000..38281c7e
--- /dev/null
+++ b/lib/admin-users/table/ausers-table-columns.tsx
@@ -0,0 +1,228 @@
+"use client"
+
+import * as React from "react"
+import { type DataTableRowAction } from "@/types/table"
+import { type ColumnDef } from "@tanstack/react-table"
+import { Ellipsis } from "lucide-react"
+import { userRoles, type UserView } from "@/db/schema/users"
+
+import { formatDate } from "@/lib/utils"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Checkbox } from "@/components/ui/checkbox"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { DataTableColumnHeader } from "@/components/data-table/data-table-column-header"
+import { UserWithCompanyAndRoles } from "@/types/user"
+import { getErrorMessage } from "@/lib/handle-error"
+
+import { modifiUser } from "@/lib/admin-users/service"
+import { toast } from "sonner"
+
+import { userColumnsConfig } from "@/config/userColumnsConfig"
+import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header"
+import { MultiSelect } from "@/components/ui/multi-select"
+
+interface GetColumnsProps {
+  setRowAction: React.Dispatch<React.SetStateAction<DataTableRowAction<UserView> | null>>
+}
+
+/**
+ * tanstack table 컬럼 정의 (중첩 헤더 버전)
+ */
+export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<UserView>[] {
+  // ----------------------------------------------------------------
+  // 1) select 컬럼 (체크박스)
+  // ----------------------------------------------------------------
+  const selectColumn: ColumnDef<UserView> = {
+    id: "select",
+    header: ({ table }) => (
+      <Checkbox
+        checked={
+          table.getIsAllPageRowsSelected() ||
+          (table.getIsSomePageRowsSelected() && "indeterminate")
+        }
+        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+        aria-label="Select all"
+        className="translate-y-0.5"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={(value) => row.toggleSelected(!!value)}
+        aria-label="Select row"
+        className="translate-y-0.5"
+      />
+    ),
+    size:40,
+    enableSorting: false,
+    enableHiding: false,
+  }
+
+  // ----------------------------------------------------------------
+  // 2) actions 컬럼 (Dropdown 메뉴)
+  // ----------------------------------------------------------------
+  const actionsColumn: ColumnDef<UserView> = {
+    id: "actions",
+    enableHiding: false,
+    cell: function Cell({ row }) {
+      const [isUpdatePending, startUpdateTransition] = React.useTransition()
+
+      return (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              aria-label="Open menu"
+              variant="ghost"
+              className="flex size-8 p-0 data-[state=open]:bg-muted"
+            >
+              <Ellipsis className="size-4" aria-hidden="true" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-40">
+            <DropdownMenuItem
+              onSelect={() => setRowAction({ row, type: "update" })}
+            >
+              Edit
+            </DropdownMenuItem>
+
+            {/* <DropdownMenuSub>
+              <DropdownMenuSubTrigger>Roles</DropdownMenuSubTrigger>
+              <DropdownMenuSubContent>
+                <MultiSelect 
+                  defaultValue={row.original.roles}
+                  options={userRoles.role.enumValues.map((role) => ({
+                    value: role,
+                    label: role,
+                  }))}
+                  value={row.original.roles}
+                  onValueChange={(value) => {
+                    startUpdateTransition(() => {
+                  
+                      toast.promise(
+                        modifiUser({
+                          id: row.original.user_id,
+                          roles: value as ("admin"|"normal")[],
+                        }),
+                        {
+                          loading: "Updating...",
+                          success: "Roles updated",
+                          error: (err) => getErrorMessage(err),
+                        }
+                      );
+                    });
+                  }}
+
+                />
+              </DropdownMenuSubContent>
+            </DropdownMenuSub> */}
+
+            <DropdownMenuSeparator />
+            <DropdownMenuItem
+              onSelect={() => setRowAction({ row, type: "delete" })}
+            >
+              Delete
+              <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      )
+    },
+    size: 40,
+  }
+
+  // ----------------------------------------------------------------
+  // 3) 일반 컬럼들을 "그룹"별로 묶어 중첩 columns 생성
+  // ----------------------------------------------------------------
+  // 3-1) groupMap: { [groupName]: ColumnDef<User>[] }
+  const groupMap: Record<string, ColumnDef<UserView>[]> = {}
+
+  userColumnsConfig.forEach((cfg) => {
+    // 만약 group가 없으면 "_noGroup" 처리
+    const groupName = cfg.group || "_noGroup"
+
+    if (!groupMap[groupName]) {
+      groupMap[groupName] = []
+    }
+
+    // child column 정의
+    const childCol: ColumnDef<UserView> = {
+      accessorKey: cfg.id,
+      enableResizing: true,
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title={cfg.label} />
+      ),
+      meta: {
+        excelHeader: cfg.excelHeader,
+        group: cfg.group,
+        type: cfg.type,
+      },
+      cell: ({ row, cell }) => {
+
+        if (cfg.id === "created_at") {
+          const dateVal = cell.getValue() as Date
+          return formatDate(dateVal)
+        }
+
+        if (cfg.id === "roles") {
+          const roleValues = row.original.roles;
+          return (
+            <div className="flex flex-wrap gap-1">
+              {roleValues.map((v) => (
+                <Badge key={v} variant="outline">
+                  {v}
+                </Badge>
+              ))}
+            </div>
+          );
+        }
+
+        return row.getValue(cfg.id) ?? ""
+      },
+    }
+
+    groupMap[groupName].push(childCol)
+  })
+
+  // ----------------------------------------------------------------
+  // 3-2) groupMap에서 실제 상위 컬럼(그룹)을 만들기
+  // ----------------------------------------------------------------
+  const nestedColumns: ColumnDef<UserView>[] = []
+
+  // 순서를 고정하고 싶다면 group 순서를 미리 정의하거나 sort해야 함
+  // 여기서는 그냥 Object.entries 순서
+  Object.entries(groupMap).forEach(([groupName, colDefs]) => {
+    if (groupName === "_noGroup") {
+      // 그룹 없음 → 그냥 최상위 레벨 컬럼
+      nestedColumns.push(...colDefs)
+    } else {
+      // 상위 컬럼
+      nestedColumns.push({
+        id: groupName,
+        header: groupName, // "Basic Info", "Metadata" 등
+        columns: colDefs,
+      })
+    }
+  })
+
+  // ----------------------------------------------------------------
+  // 4) 최종 컬럼 배열: select, nestedColumns, actions
+  // ----------------------------------------------------------------
+  return [
+    selectColumn,
+    ...nestedColumns,
+    actionsColumn,
+  ]
+}
\ No newline at end of file
diff --git a/lib/admin-users/table/ausers-table-floating-bar.tsx b/lib/admin-users/table/ausers-table-floating-bar.tsx
new file mode 100644
index 00000000..ae950252
--- /dev/null
+++ b/lib/admin-users/table/ausers-table-floating-bar.tsx
@@ -0,0 +1,389 @@
+"use client"
+
+import * as React from "react"
+import { userRoles, users, UserView, type User } from "@/db/schema/users"
+import { SelectTrigger } from "@radix-ui/react-select"
+import { type Table } from "@tanstack/react-table"
+import {
+  ArrowUp,
+  CheckCircle2,
+  Download,
+  Loader,
+  Trash2,
+  X, Check
+} from "lucide-react"
+import { toast } from "sonner"
+
+import { exportTableToExcel } from "@/lib/export"
+import { Button } from "@/components/ui/button"
+import { Portal } from "@/components/ui/portal"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+} from "@/components/ui/select"
+import { Separator } from "@/components/ui/separator"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+import { Kbd } from "@/components/kbd"
+
+import { modifiUsers, getAllCompanies, removeUsers } from "@/lib//admin-users/service"
+import { type Company } from "@/db/schema/companies"
+import {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+} from "@/components/ui/popover"
+import {
+  Command,
+  CommandInput,
+  CommandList,
+  CommandGroup,
+  CommandItem,
+  CommandEmpty,
+} from "@/components/ui/command"
+import { cn } from "@/lib/utils"
+import { MultiSelect } from "@/components/ui/multi-select"
+import { ActionConfirmDialog } from "@/components/ui/action-dialog"
+
+interface AusersTableFloatingBarProps {
+  table: Table<UserView>
+}
+
+
+export function AusersTableFloatingBar({ table }: AusersTableFloatingBarProps) {
+  const rows = table.getFilteredSelectedRowModel().rows
+
+  const [isPending, startTransition] = React.useTransition()
+  const [action, setAction] = React.useState<
+    "update-company" | "update-roles" | "export" | "delete"
+  >()
+  const [companies, setCompanies] = React.useState<Company[]>([])  // 회사 목록
+
+  // Clear selection on Escape key press
+  React.useEffect(() => {
+    function handleKeyDown(event: KeyboardEvent) {
+      if (event.key === "Escape") {
+        table.toggleAllRowsSelected(false)
+      }
+    }
+
+    window.addEventListener("keydown", handleKeyDown)
+    return () => window.removeEventListener("keydown", handleKeyDown)
+  }, [table])
+
+  React.useEffect(() => {
+    // 회사 목록 불러오기 (예시)
+    getAllCompanies().then((res) => {
+      setCompanies(res)
+    })
+  }, [])
+
+  const [popoverOpen, setPopoverOpen] = React.useState(false)
+  const [rolesPopoverOpen, setRolesPopoverOpen] = React.useState(false)
+
+
+  // 공용 confirm dialog state
+  const [confirmDialogOpen, setConfirmDialogOpen] = React.useState(false)
+  const [confirmProps, setConfirmProps] = React.useState<{
+    title: string
+    description?: string
+    onConfirm: () => Promise<void> | void
+  }>({
+    title: "",
+    description: "",
+    onConfirm: () => { },
+  })
+
+  // 1) "삭제" Confirm 열기
+  function handleDeleteConfirm() {
+    setAction("delete")
+    setConfirmProps({
+      title: `Delete ${rows.length} user${rows.length > 1 ? "s" : ""}?`,
+      description: "This action cannot be undone.",
+      onConfirm: async () => {
+        startTransition(async () => {
+          const { error } = await removeUsers({
+            ids: rows.map((row) => row.original.user_id),
+          })
+          if (error) {
+            toast.error(error)
+            return
+          }
+          toast.success("Users deleted")
+          table.toggleAllRowsSelected(false)
+          setConfirmDialogOpen(false)
+        })
+      },
+    })
+    setConfirmDialogOpen(true)
+  }
+
+  // 2) "회사 업데이트"에서 회사 선택 시 → Confirm Dialog
+  function handleSelectCompany(comp: Company) {
+    setAction("update-company")
+    setPopoverOpen(false)
+
+    // Confirm Dialog에 전달할 내용
+    setConfirmProps({
+      title: `Update ${rows.length} user${rows.length > 1 ? "s" : ""} to "${comp.name}"?`,
+      description: `TaxID: ${comp.taxID}. This action will overwrite their current company.`,
+      onConfirm: async () => {
+        startTransition(async () => {
+          const { error } = await modifiUsers({
+            ids: rows.map((row) => row.original.user_id),
+            companyId: comp.id,
+          })
+          if (error) {
+            toast.error(error)
+            return
+          }
+          toast.success("Users updated")
+          setConfirmDialogOpen(false)
+        })
+      },
+    })
+    setConfirmDialogOpen(true)
+  }
+
+  // 3) "역할 업데이트" MultiSelect 후 → Confirm Dialog
+  function handleSelectRoles(newRoles: string[]) {
+    setAction("update-roles")
+    setRolesPopoverOpen(false)
+
+    setConfirmProps({
+      title: `Update ${rows.length} user${rows.length > 1 ? "s" : ""} with roles: ${newRoles.join(", ")}?`,
+      description: "This action will override their current roles.",
+      onConfirm: async () => {
+        startTransition(async () => {
+          const { error } = await modifiUsers({
+            ids: rows.map((row) => row.original.user_id),
+            roles: newRoles as ("admin" | "normal")[],
+          })
+          if (error) {
+            toast.error(error)
+            return
+          }
+          toast.success("Users updated")
+          setConfirmDialogOpen(false)
+        })
+      },
+    })
+    setConfirmDialogOpen(true)
+  }
+
+  return (
+    <Portal >
+      <div className="fixed inset-x-0 bottom-10 z-50 mx-auto w-fit px-2.5" style={{ bottom: '1.5rem' }}>
+        <div className="w-full overflow-x-auto">
+          <div className="mx-auto flex w-fit items-center gap-2 rounded-md border bg-background p-2 text-foreground shadow">
+            <div className="flex h-7 items-center rounded-md border border-dashed pl-2.5 pr-1">
+              <span className="whitespace-nowrap text-xs">
+                {rows.length} selected
+              </span>
+              <Separator orientation="vertical" className="ml-2 mr-1" />
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="size-5 hover:border"
+                    onClick={() => table.toggleAllRowsSelected(false)}
+                  >
+                    <X className="size-3.5 shrink-0" aria-hidden="true" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent className="flex items-center border bg-accent px-2 py-1 font-semibold text-foreground dark:bg-zinc-900">
+                  <p className="mr-2">Clear selection</p>
+                  <Kbd abbrTitle="Escape" variant="outline">
+                    Esc
+                  </Kbd>
+                </TooltipContent>
+              </Tooltip>
+            </div>
+            <Separator orientation="vertical" className="hidden h-5 sm:block" />
+            <div className="flex items-center gap-1.5">
+              <Popover open={popoverOpen} onOpenChange={setPopoverOpen}>
+
+                <Tooltip>
+                  <PopoverTrigger asChild>
+                    <TooltipTrigger asChild>
+                      <Button
+                        variant="secondary"
+                        size="icon"
+                        className="size-7 border data-[state=open]:bg-accent data-[state=open]:text-accent-foreground"
+                        disabled={isPending}
+                      >
+                        {isPending && action === "update-company" ? (
+                          <Loader
+                            className="size-3.5 animate-spin"
+                            aria-hidden="true"
+                          />
+                        ) : (
+                          <CheckCircle2
+                            className="size-3.5"
+                            aria-hidden="true"
+                          />
+                        )}
+                      </Button>
+                    </TooltipTrigger>
+                  </PopoverTrigger>
+                  <TooltipContent className="border bg-accent font-semibold text-foreground dark:bg-zinc-900">
+                    <p>Update company</p>
+                  </TooltipContent>
+                </Tooltip>
+
+                <PopoverContent className="w-80 p-0">
+                  <Command>
+                    <CommandInput placeholder="Search company..." className="h-9" />
+                    <CommandList>
+                      <CommandEmpty>No company found.</CommandEmpty>
+                      <CommandGroup>
+                      {companies.map((comp) => {
+                        const label = `${comp.name} (${comp.taxID})`
+                        return (
+                          <CommandItem
+                            key={comp.id}
+                            value={label}
+                            onSelect={() => handleSelectCompany(comp)}
+                          >
+                            {label}
+                          </CommandItem>
+                        )
+                      })}
+                    </CommandGroup>
+                    </CommandList>
+                  </Command>
+                </PopoverContent>
+              </Popover>
+
+              <Popover open={rolesPopoverOpen} onOpenChange={setRolesPopoverOpen}>
+
+                <Tooltip>
+                  <PopoverTrigger asChild>
+                    <TooltipTrigger asChild>
+                      <Button
+                        variant="secondary"
+                        size="icon"
+                        className="size-7 border data-[state=open]:bg-accent data-[state=open]:text-accent-foreground"
+                        disabled={isPending}
+                      >
+                        {isPending && action === "update-roles" ? (
+                          <Loader
+                            className="size-3.5 animate-spin"
+                            aria-hidden="true"
+                          />
+                        ) : (
+                          <ArrowUp className="size-3.5" aria-hidden="true" />
+
+                        )}
+                      </Button>
+                    </TooltipTrigger>
+                  </PopoverTrigger>
+                  <TooltipContent className="border bg-accent font-semibold text-foreground dark:bg-zinc-900">
+                    <p>Update roles</p>
+                  </TooltipContent>
+                </Tooltip>
+                <PopoverContent>
+                  <MultiSelect
+                         defaultValue={["999999999"]}
+                         options={[ 
+                          /* ... */
+                          { value: "999999999", label: "admin" } 
+                        ]}
+                    onValueChange={(newRoles) => {
+                      handleSelectRoles(newRoles)
+                    }}
+                  />
+                </PopoverContent>
+
+              </Popover>
+
+
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="secondary"
+                    size="icon"
+                    className="size-7 border"
+                    onClick={() => {
+                      setAction("export")
+
+                      startTransition(() => {
+                        exportTableToExcel(table, {
+                          excludeColumns: ["select", "actions"],
+                          onlySelected: true,
+                        })
+                      })
+                    }}
+                    disabled={isPending}
+                  >
+                    {isPending && action === "export" ? (
+                      <Loader
+                        className="size-3.5 animate-spin"
+                        aria-hidden="true"
+                      />
+                    ) : (
+                      <Download className="size-3.5" aria-hidden="true" />
+                    )}
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent className="border bg-accent font-semibold text-foreground dark:bg-zinc-900">
+                  <p>Export users</p>
+                </TooltipContent>
+              </Tooltip>
+
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="secondary"
+                    size="icon"
+                    className="size-7 border"
+                    onClick={handleDeleteConfirm}
+                    disabled={isPending}
+                  >
+                    {isPending && action === "delete" ? (
+                      <Loader
+                        className="size-3.5 animate-spin"
+                        aria-hidden="true"
+                      />
+                    ) : (
+                      <Trash2 className="size-3.5" aria-hidden="true" />
+                    )}
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent className="border bg-accent font-semibold text-foreground dark:bg-zinc-900">
+                  <p>Delete users</p>
+                </TooltipContent>
+              </Tooltip>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* 공용 Confirm Dialog */}
+      <ActionConfirmDialog
+        open={confirmDialogOpen}
+        onOpenChange={setConfirmDialogOpen}
+        title={confirmProps.title}
+        description={confirmProps.description}
+        onConfirm={confirmProps.onConfirm}
+        isLoading={isPending && (action === "delete" || action === "update-company" || action === "update-roles")}
+        confirmLabel={
+          action === "delete"
+            ? "Delete"
+            : action === "update-company" || action === "update-roles"
+            ? "Update"
+            : "Confirm"
+        }
+        confirmVariant={
+          action === "delete" ? "destructive" : "default"
+        }
+      />
+    </Portal>
+  )
+}
diff --git a/lib/admin-users/table/ausers-table-toolbar-actions.tsx b/lib/admin-users/table/ausers-table-toolbar-actions.tsx
new file mode 100644
index 00000000..5472c3ac
--- /dev/null
+++ b/lib/admin-users/table/ausers-table-toolbar-actions.tsx
@@ -0,0 +1,118 @@
+"use client"
+
+import * as React from "react"
+import { type Task } from "@/db/schema/tasks"
+import { type Table } from "@tanstack/react-table"
+import { Download, Upload } from "lucide-react"
+import { toast } from "sonner"
+
+import { exportTableToExcel } from "@/lib/export"
+import { Button } from "@/components/ui/button"
+
+// 삭제, 추가 다이얼로그
+import { DeleteUsersDialog } from "./delete-ausers-dialog"
+import { AddUserDialog } from "./add-ausers-dialog"
+
+// 만약 서버 액션이나 API 라우트를 이용해 업로드 처리한다면 import
+import { importTasksExcel } from "@/lib/tasks/service" // 예시
+import { type UserView } from "@/db/schema/users"
+
+interface AdmUserTableToolbarActionsProps {
+  table: Table<UserView>
+}
+
+export function AdmUserTableToolbarActions({ table }: AdmUserTableToolbarActionsProps) {
+  // 파일 input을 숨기고, 버튼 클릭 시 참조해 클릭하는 방식
+  const fileInputRef = React.useRef<HTMLInputElement>(null)
+
+  // 파일이 선택되었을 때 처리
+  async function onFileChange(event: React.ChangeEvent<HTMLInputElement>) {
+    const file = event.target.files?.[0]
+    if (!file) return
+
+    // 파일 초기화 (동일 파일 재업로드 시에도 onChange가 트리거되도록)
+    event.target.value = ""
+
+    // 서버 액션 or API 호출
+    try {
+      // 예: 서버 액션 호출
+      const { errorFile, errorMessage } = await importTasksExcel(file)
+
+      if (errorMessage) {
+        toast.error(errorMessage)
+      }
+      if (errorFile) {
+        // 에러 엑셀을 다운로드
+        const url = URL.createObjectURL(errorFile)
+        const link = document.createElement("a")
+        link.href = url
+        link.download = "errors.xlsx"
+        link.click()
+        URL.revokeObjectURL(url)
+      } else {
+        // 성공
+        toast.success("Import success")
+        // 필요 시 revalidateTag("tasks") 등
+      }
+
+    } catch (err) {
+      toast.error("파일 업로드 중 오류가 발생했습니다.")
+      
+    }
+  }
+
+  function handleImportClick() {
+    // 숨겨진 <input type="file" /> 요소를 클릭
+    fileInputRef.current?.click()
+  }
+
+  return (
+    <div className="flex items-center gap-2">
+      {/** 1) 선택된 로우가 있으면 삭제 다이얼로그 */}
+      {table.getFilteredSelectedRowModel().rows.length > 0 ? (
+        <DeleteUsersDialog
+          users={table
+            .getFilteredSelectedRowModel()
+            .rows.map((row) => row.original)}
+          onSuccess={() => table.toggleAllRowsSelected(false)}
+        />
+      ) : null}
+
+      {/** 2) 새 Task 추가 다이얼로그 */}
+      <AddUserDialog />
+
+      {/** 3) Import 버튼 (파일 업로드) */}
+      <Button variant="outline" size="sm" className="gap-2" onClick={handleImportClick}>
+        <Upload className="size-4" aria-hidden="true" />
+        <span className="hidden sm:inline">Import</span>
+      </Button>
+      {/*
+        실제로는 숨겨진 input과 연결:
+        - accept=".xlsx,.xls" 등으로 Excel 파일만 업로드 허용
+      */}
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept=".xlsx,.xls"
+        className="hidden"
+        onChange={onFileChange}
+      />
+
+      {/** 4) Export 버튼 */}
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={() =>
+          exportTableToExcel(table, {
+            filename: "tasks",
+            excludeColumns: ["select", "actions"],
+          })
+        }
+        className="gap-2"
+      >
+        <Download className="size-4" aria-hidden="true" />
+        <span className="hidden sm:inline">Export</span>
+      </Button>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/lib/admin-users/table/ausers-table.tsx b/lib/admin-users/table/ausers-table.tsx
new file mode 100644
index 00000000..ed575e75
--- /dev/null
+++ b/lib/admin-users/table/ausers-table.tsx
@@ -0,0 +1,180 @@
+"use client"
+
+import * as React from "react"
+import { userRoles ,  type UserView} from "@/db/schema/users"
+import type {
+  DataTableAdvancedFilterField,
+  DataTableFilterField,
+  DataTableRowAction,
+} from "@/types/table"
+
+import { toSentenceCase } from "@/lib/utils"
+import { useDataTable } from "@/hooks/use-data-table"
+import { DataTable } from "@/components/data-table/data-table"
+import { DataTableAdvancedToolbar } from "@/components/data-table/data-table-advanced-toolbar"
+import { DataTableToolbar } from "@/components/data-table/data-table-toolbar"
+
+import type {
+  getUserCountGroupByCompany,
+  getUserCountGroupByRole,
+  getUsers, getAllCompanies,
+  getAllRoles
+} from "@/lib//admin-users/service"
+import { getColumns } from "./ausers-table-columns"
+import { AdmUserTableToolbarActions } from "./ausers-table-toolbar-actions"
+import { DeleteUsersDialog } from "./delete-ausers-dialog"
+import { AusersTableFloatingBar } from "./ausers-table-floating-bar"
+import { UpdateAuserSheet } from "./update-auser-sheet"
+
+interface UsersTableProps {
+  promises: Promise<
+    [
+      Awaited<ReturnType<typeof getUsers>>,
+      Record<number, number>,
+      Record<number, number>,
+      Awaited<ReturnType<typeof getAllCompanies>>,
+      Awaited<ReturnType<typeof getAllRoles>>
+    ]
+  >
+}
+type RoleCounts = Record<string, number>
+
+export function AdmUserTable({ promises }: UsersTableProps) {
+
+  const [{ data, pageCount }, companyCounts,roleCountsRaw,  companies, roles] =
+    React.use(promises)
+
+
+  const [rowAction, setRowAction] =
+    React.useState<DataTableRowAction<UserView> | null>(null)
+
+  const columns = React.useMemo(
+    () => getColumns({ setRowAction }),
+    [setRowAction]
+  )
+
+  const roleCounts = roleCountsRaw as RoleCounts
+
+
+  /**
+   * This component can render either a faceted filter or a search filter based on the `options` prop.
+   *
+   * @prop options - An array of objects, each representing a filter option. If provided, a faceted filter is rendered. If not, a search filter is rendered.
+   *
+   * Each `option` object has the following properties:
+   * @prop {string} label - The label for the filter option.
+   * @prop {string} value - The value for the filter option.
+   * @prop {React.ReactNode} [icon] - An optional icon to display next to the label.
+   * @prop {boolean} [withCount] - An optional boolean to display the count of the filter option.
+   */
+  const filterFields: DataTableFilterField<UserView>[] = [
+    {
+      id: "user_email",
+      label: "Email",
+      placeholder: "Filter email...",
+    },
+
+  ]
+
+  /**
+   * Advanced filter fields for the data table.
+   * These fields provide more complex filtering options compared to the regular filterFields.
+   *
+   * Key differences from regular filterFields:
+   * 1. More field types: Includes 'text', 'multi-select', 'date', and 'boolean'.
+   * 2. Enhanced flexibility: Allows for more precise and varied filtering options.
+   * 3. Used with DataTableAdvancedToolbar: Enables a more sophisticated filtering UI.
+   * 4. Date and boolean types: Adds support for filtering by date ranges and boolean values.
+   */
+  const advancedFilterFields: DataTableAdvancedFilterField<UserView>[] = [
+    {
+      id: "user_name",
+      label: "User Name",
+      type: "text",
+    },
+    {
+      id: "user_email",
+      label: "Email",
+      type: "text",
+    },
+    {
+      id: "company_name",
+      label: "Company",
+      type: "multi-select",
+      options: companies.map((comp) => ({
+        label: comp.vendorName,
+        value: comp.vendorName,
+        count: companyCounts[comp.id]
+      })),
+    },
+
+    {
+      id: "roles",
+      label: "Roles",
+      type: "multi-select",
+      options: roles.map((role) => {
+        return {
+          label: toSentenceCase(role.name),
+          value: role.id,
+          count: roleCounts[role.id], // 이 값이 undefined인지 확인
+        };
+      }),
+    },
+    {
+      id: "created_at",
+      label: "Created at",
+      type: "date",
+    },
+  ]
+
+
+  const { table } = useDataTable({
+    data,
+    columns,
+    pageCount,
+    filterFields,
+    enablePinning: true,
+    enableAdvancedFilter: true,
+    initialState: {
+      sorting: [{ id: "created_at", desc: true }],
+      columnPinning: { right: ["actions"] },
+    },
+    getRowId: (originalRow) => `${originalRow.user_id}`,
+    shallow: false,
+    clearOnDefault: true,
+  })
+
+  return (
+    <>
+      <DataTable
+        table={table}
+        floatingBar={<AusersTableFloatingBar table={table}/>}
+
+      >
+        <DataTableAdvancedToolbar
+          table={table}
+          filterFields={advancedFilterFields}
+          shallow={false}
+        >
+          <AdmUserTableToolbarActions table={table} />
+        </DataTableAdvancedToolbar>
+
+      </DataTable>
+
+      <DeleteUsersDialog
+        open={rowAction?.type === "delete"}
+        onOpenChange={() => setRowAction(null)}
+        users={rowAction?.row.original ? [rowAction?.row.original] : []}
+        showTrigger={false}
+        onSuccess={() => rowAction?.row.toggleSelected(false)}
+      />
+
+      <UpdateAuserSheet
+        open={rowAction?.type === "update"}
+        onOpenChange={() => setRowAction(null)}
+        user={rowAction?.row.original ?? null}
+      />
+
+    </>
+  )
+}
diff --git a/lib/admin-users/table/delete-ausers-dialog.tsx b/lib/admin-users/table/delete-ausers-dialog.tsx
new file mode 100644
index 00000000..0699bb95
--- /dev/null
+++ b/lib/admin-users/table/delete-ausers-dialog.tsx
@@ -0,0 +1,149 @@
+"use client"
+
+import * as React from "react"
+import { type Row } from "@tanstack/react-table"
+import { Loader, Trash } from "lucide-react"
+import { toast } from "sonner"
+
+import { useMediaQuery } from "@/hooks/use-media-query"
+import { Button } from "@/components/ui/button"
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/components/ui/drawer"
+
+import { removeUsers } from "@/lib//admin-users/service"
+import { type UserView } from "@/db/schema/users"
+
+interface DeleteUsersDialogProps
+  extends React.ComponentPropsWithoutRef<typeof Dialog> {
+  users: Row<UserView>["original"][]
+  showTrigger?: boolean
+  onSuccess?: () => void
+}
+
+export function DeleteUsersDialog({
+  users,
+  showTrigger = true,
+  onSuccess,
+  ...props
+}: DeleteUsersDialogProps) {
+  const [isDeletePending, startDeleteTransition] = React.useTransition()
+  const isDesktop = useMediaQuery("(min-width: 640px)")
+
+  function onDelete() {
+    startDeleteTransition(async () => {
+      const { error } = await removeUsers({
+        ids: users.map((user) => Number(user.user_id)),
+      })
+
+      if (error) {
+        toast.error(error)
+        return
+      }
+
+      props.onOpenChange?.(false)
+      toast.success("Users deleted")
+      onSuccess?.()
+    })
+  }
+
+  if (isDesktop) {
+    return (
+      <Dialog {...props}>
+        {showTrigger ? (
+          <DialogTrigger asChild>
+            <Button variant="outline" size="sm">
+              <Trash className="mr-2 size-4" aria-hidden="true" />
+              Delete ({users.length})
+            </Button>
+          </DialogTrigger>
+        ) : null}
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Are you absolutely sure?</DialogTitle>
+            <DialogDescription>
+              This action cannot be undone. This will permanently delete your{" "}
+              <span className="font-medium">{users.length}</span>
+              {users.length === 1 ? " user" : " users"} from our servers.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter className="gap-2 sm:space-x-0">
+            <DialogClose asChild>
+              <Button variant="outline">Cancel</Button>
+            </DialogClose>
+            <Button
+              aria-label="Delete selected rows"
+              variant="destructive"
+              onClick={onDelete}
+              disabled={isDeletePending}
+            >
+              {isDeletePending && (
+                <Loader
+                  className="mr-2 size-4 animate-spin"
+                  aria-hidden="true"
+                />
+              )}
+              Delete
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    )
+  }
+
+  return (
+    <Drawer {...props}>
+      {showTrigger ? (
+        <DrawerTrigger asChild>
+          <Button variant="outline" size="sm">
+            <Trash className="mr-2 size-4" aria-hidden="true" />
+            Delete ({users.length})
+          </Button>
+        </DrawerTrigger>
+      ) : null}
+      <DrawerContent>
+        <DrawerHeader>
+          <DrawerTitle>Are you absolutely sure?</DrawerTitle>
+          <DrawerDescription>
+            This action cannot be undone. This will permanently delete your{" "}
+            <span className="font-medium">{users.length}</span>
+            {users.length === 1 ? " user" : " users"} from our servers.
+          </DrawerDescription>
+        </DrawerHeader>
+        <DrawerFooter className="gap-2 sm:space-x-0">
+          <DrawerClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </DrawerClose>
+          <Button
+            aria-label="Delete selected rows"
+            variant="destructive"
+            onClick={onDelete}
+            disabled={isDeletePending}
+          >
+            {isDeletePending && (
+              <Loader className="mr-2 size-4 animate-spin" aria-hidden="true" />
+            )}
+            Delete
+          </Button>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  )
+}
diff --git a/lib/admin-users/table/update-auser-sheet.tsx b/lib/admin-users/table/update-auser-sheet.tsx
new file mode 100644
index 00000000..ddf1f932
--- /dev/null
+++ b/lib/admin-users/table/update-auser-sheet.tsx
@@ -0,0 +1,225 @@
+"use client"
+
+import * as React from "react"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Loader } from "lucide-react"
+import { useForm } from "react-hook-form"
+import { toast } from "sonner"
+
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet"
+import { Button } from "@/components/ui/button"
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form"
+import { Input } from "@/components/ui/input"
+import {
+  Select,
+  SelectTrigger,
+  SelectContent,
+  SelectItem,
+  SelectValue,
+  SelectGroup,
+} from "@/components/ui/select"
+// import your MultiSelect or other role selection
+import { MultiSelect } from "@/components/ui/multi-select"
+
+import { userRoles, type UserView } from "@/db/schema/users"
+import { updateUserSchema, type UpdateUserSchema } from "@/lib/admin-users/validations"
+import { modifiUser } from "@/lib/admin-users/service"
+
+export interface UpdateAuserSheetProps
+  extends React.ComponentPropsWithRef<typeof Sheet> {
+  user: UserView | null
+}
+
+const languageOptions = [
+  { value: "ko", label: "한국어" },
+  { value: "en", label: "English" },
+]
+
+
+export function UpdateAuserSheet({ user, ...props }: UpdateAuserSheetProps) {
+  const [isUpdatePending, startUpdateTransition] = React.useTransition()
+  
+  // 1) RHF 설정
+  const form = useForm<UpdateUserSchema & { language?: string }>({
+    resolver: zodResolver(updateUserSchema),
+    defaultValues: {
+      name: user?.user_name ?? "",
+      email: user?.user_email ?? "",
+      companyId: user?.company_id ?? null,
+      roles: user?.roles ?? [],
+      language:'en',
+    },
+  })
+
+  // 2) user prop 바뀔 때마다 form.reset
+  React.useEffect(() => {
+    if (user) {
+      form.reset({
+        name: user.user_name,
+        email: user.user_email,
+        companyId: user.company_id,
+        roles: user.roles,
+      })
+    }
+  }, [user, form])
+
+
+  // 3) onSubmit
+  async function onSubmit(input: UpdateUserSchema & { language?: string }) {
+    startUpdateTransition(async () => {
+      if (!user) return
+
+      const { error } = await modifiUser({
+        id: user.user_id, // user.userId
+        ...input,
+      })
+
+      if (error) {
+        toast.error(error)
+        return
+      }
+
+      // 성공 시
+      form.reset()
+      props.onOpenChange?.(false)
+      toast.success("User updated successfully!")
+    })
+  }
+
+  return (
+    <Sheet {...props}>
+      <SheetContent className="flex flex-col gap-6 sm:max-w-md">
+        <SheetHeader className="text-left">
+          <SheetTitle>Update user</SheetTitle>
+          <SheetDescription>
+            Update the user details and save the changes
+          </SheetDescription>
+        </SheetHeader>
+
+        {/* 4) RHF Form */}
+        <Form {...form}>
+          <form
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="flex flex-col gap-4"
+          >
+            {/* name */}
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>User Name</FormLabel>
+                  <FormControl>
+                    <Input placeholder="e.g. dujin" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {/* email */}
+            <FormField
+              control={form.control}
+              name="email"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Email</FormLabel>
+                  <FormControl>
+                    <Input type="email" placeholder="user@example.com" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {/* roles */}
+            <FormField
+              control={form.control}
+              name="roles"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Roles</FormLabel>
+                  <FormControl>
+                    <MultiSelect
+                      // 예: userRoles.role.enumValues = ["admin","normal"]
+                      defaultValue={form?.getValues().roles}
+                      options={[ 
+                        { value: "999999999", label: "admin" } 
+                      ]}
+                      value={field.value}
+                      onValueChange={(vals) => field.onChange(vals)}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="language"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Language</FormLabel>
+                  <FormControl>
+                    <Select
+                      onValueChange={field.onChange}
+                      // 'value'로 현재 값 연결. defaultValue 대신 Controlled 컴포넌트로
+                      value={field.value}
+                    >
+                      <SelectTrigger>
+                        <SelectValue placeholder="Select language" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {languageOptions.map((v, index) => (
+                          <SelectItem key={index} value={v.value}>
+                            {v.label}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {/* 5) Footer: Cancel, Save */}
+            <SheetFooter className="gap-2 pt-2 sm:space-x-0">
+              <SheetClose asChild>
+                <Button type="button" variant="outline">
+                  Cancel
+                </Button>
+              </SheetClose>
+
+              <Button type="submit" disabled={isUpdatePending}>
+                {isUpdatePending && (
+                  <Loader
+                    className="mr-2 size-4 animate-spin"
+                    aria-hidden="true"
+                  />
+                )}
+                Save
+              </Button>
+            </SheetFooter>
+          </form>
+        </Form>
+      </SheetContent>
+    </Sheet>
+  )
+}
\ No newline at end of file
diff --git a/lib/admin-users/validations.ts b/lib/admin-users/validations.ts
new file mode 100644
index 00000000..e505067d
--- /dev/null
+++ b/lib/admin-users/validations.ts
@@ -0,0 +1,65 @@
+import { userRoles, users, type UserView } from "@/db/schema/users";
+import {
+  createSearchParamsCache,
+  parseAsArrayOf,
+  parseAsInteger,
+  parseAsString,
+  parseAsStringEnum,
+} from "nuqs/server"
+import * as z from "zod"
+import { getFiltersStateParser, getSortingStateParser } from "@/lib/parsers"
+import { checkEmailExists } from "./service";
+
+
+
+export const searchParamsCache = createSearchParamsCache({
+  flags: parseAsArrayOf(z.enum(["advancedTable", "floatingBar"])).withDefault(
+    []
+  ),
+  page: parseAsInteger.withDefault(1),
+  perPage: parseAsInteger.withDefault(10),
+  sort: getSortingStateParser<UserView>().withDefault([
+    { id: "created_at", desc: true },
+  ]),
+  email: parseAsString.withDefault(""),
+  // advanced filter
+  filters: getFiltersStateParser().withDefault([]),
+  joinOperator: parseAsStringEnum(["and", "or"]).withDefault("and"),
+  search: parseAsString.withDefault(""),
+
+})
+
+export const createUserSchema = z.object({
+  email: z
+    .string()
+    .email()
+    .refine(
+      async (email) => {
+        // 1) DB 조회해서 이미 같은 email이 있으면 false 반환
+        const isUsed = await checkEmailExists(email); 
+        return !isUsed;
+      },
+      {
+        message: "This email is already in use",
+      }
+    ),
+  name: z.string().min(1),                           // 최소 길이 1
+  domain: z.enum(users.domain.enumValues),           // "evcp" | "partners"
+  companyId: z.number().nullable().optional(),       // number | null | undefined
+  roles:z.array(z.string()).min(1, "At least one role must be selected"),
+  language: z.enum(["ko", "en"]).optional(), 
+  
+});
+
+export const updateUserSchema = z.object({
+  name: z.string().optional(),
+  email: z.string().email().optional(),
+  domain: z.enum(users.domain.enumValues).optional(),
+  companyId: z.number().nullable().optional(),
+  roles: z.array(z.string()).optional(),
+  language: z.enum(["ko", "en"]).optional(), 
+
+});
+export type GetUsersSchema = Awaited<ReturnType<typeof searchParamsCache.parse>>
+export type CreateUserSchema = z.infer<typeof createUserSchema>
+export type UpdateUserSchema = z.infer<typeof updateUserSchema>
diff --git a/lib/compose-refs.ts b/lib/compose-refs.ts
new file mode 100644
index 00000000..bed48a40
--- /dev/null
+++ b/lib/compose-refs.ts
@@ -0,0 +1,38 @@
+/**
+ * @see https://github.com/radix-ui/primitives/blob/main/packages/react/compose-refs/src/composeRefs.tsx
+ */
+
+import * as React from "react"
+
+type PossibleRef<T> = React.Ref<T> | undefined
+
+/**
+ * Set a given ref to a given value
+ * This utility takes care of different types of refs: callback refs and RefObject(s)
+ */
+function setRef<T>(ref: PossibleRef<T>, value: T) {
+  if (typeof ref === "function") {
+    ref(value)
+  } else if (ref !== null && ref !== undefined) {
+    ;(ref as React.MutableRefObject<T>).current = value
+  }
+}
+
+/**
+ * A utility to compose multiple refs together
+ * Accepts callback refs and RefObject(s)
+ */
+function composeRefs<T>(...refs: PossibleRef<T>[]) {
+  return (node: T) => refs.forEach((ref) => setRef(ref, node))
+}
+
+/**
+ * A custom hook that composes multiple refs
+ * Accepts callback refs and RefObject(s)
+ */
+function useComposedRefs<T>(...refs: PossibleRef<T>[]) {
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  return React.useCallback(composeRefs(...refs), refs)
+}
+
+export { composeRefs, useComposedRefs }
diff --git a/lib/constants.ts b/lib/constants.ts
new file mode 100644
index 00000000..c95834ad
--- /dev/null
+++ b/lib/constants.ts
@@ -0,0 +1,3 @@
+export const unknownError = "An unknown error occurred. Please try again later."
+
+export const databasePrefix = "shadcn"
diff --git a/lib/data-table.ts b/lib/data-table.ts
new file mode 100644
index 00000000..4fed7b9b
--- /dev/null
+++ b/lib/data-table.ts
@@ -0,0 +1,181 @@
+import type { ColumnType, Filter, FilterOperator, } from "@/types/table"
+import { type Column } from "@tanstack/react-table"
+
+import { dataTableConfig } from "@/config/data-table"
+import { FilterFn, Row  } from "@tanstack/react-table"
+
+/**
+ * Generate common pinning styles for a table column.
+ *
+ * This function calculates and returns CSS properties for pinned columns in a data table.
+ * It handles both left and right pinning, applying appropriate styles for positioning,
+ * shadows, and z-index. The function also considers whether the column is the last left-pinned
+ * or first right-pinned column to apply specific shadow effects.
+ *
+ * @param options - The options for generating pinning styles.
+ * @param options.column - The column object for which to generate styles.
+ * @param options.withBorder - Whether to show a box shadow between pinned and scrollable columns.
+ * @returns A React.CSSProperties object containing the calculated styles.
+ */
+export function getCommonPinningStyles<TData>({
+  column,
+  withBorder = false,
+}: {
+  column: Column<TData>
+  /**
+   * Show box shadow between pinned and scrollable columns.
+   * @default false
+   */
+  withBorder?: boolean
+}): React.CSSProperties {
+  const isPinned = column.getIsPinned()
+  const isLastLeftPinnedColumn =
+    isPinned === "left" && column.getIsLastColumn("left")
+  const isFirstRightPinnedColumn =
+    isPinned === "right" && column.getIsFirstColumn("right")
+
+  return {
+    boxShadow: withBorder
+      ? isLastLeftPinnedColumn
+        ? "-4px 0 4px -4px hsl(var(--border)) inset"
+        : isFirstRightPinnedColumn
+          ? "4px 0 4px -4px hsl(var(--border)) inset"
+          : undefined
+      : undefined,
+    left: isPinned === "left" ? `${column.getStart("left")}px` : undefined,
+    right: isPinned === "right" ? `${column.getAfter("right")}px` : undefined,
+    opacity: isPinned ? 0.97 : 1,
+    position: isPinned ? "sticky" : "relative",
+    background: isPinned ? "hsl(var(--background))" : "hsl(var(--background))",
+    width: column.getSize(),
+    zIndex: isPinned ? 1 : 0,
+  }
+}
+
+/**
+ * Determine the default filter operator for a given column type.
+ *
+ * This function returns the most appropriate default filter operator based on the
+ * column's data type. For text columns, it returns 'iLike' (case-insensitive like),
+ * while for all other types, it returns 'eq' (equality).
+ *
+ * @param columnType - The type of the column (e.g., 'text', 'number', 'date', etc.).
+ * @returns The default FilterOperator for the given column type.
+ */
+export function getDefaultFilterOperator(
+  columnType: ColumnType
+): FilterOperator {
+  if (columnType === "text") {
+    return "iLike"
+  }
+
+  return "eq"
+}
+
+/**
+ * Retrieve the list of applicable filter operators for a given column type.
+ *
+ * This function returns an array of filter operators that are relevant and applicable
+ * to the specified column type. It uses a predefined mapping of column types to
+ * operator lists, falling back to text operators if an unknown column type is provided.
+ *
+ * @param columnType - The type of the column for which to get filter operators.
+ * @returns An array of objects, each containing a label and value for a filter operator.
+ */
+export function getFilterOperators(columnType: ColumnType) {
+  const operatorMap: Record<
+    ColumnType,
+    { label: string; value: FilterOperator }[]
+  > = {
+    text: dataTableConfig.textOperators,
+    number: dataTableConfig.numericOperators,
+    select: dataTableConfig.selectOperators,
+    "multi-select": dataTableConfig.selectOperators,
+    boolean: dataTableConfig.booleanOperators,
+    date: dataTableConfig.dateOperators,
+  }
+
+  return operatorMap[columnType] ?? dataTableConfig.textOperators
+}
+
+/**
+ * Filters out invalid or empty filters from an array of filters.
+ *
+ * This function processes an array of filters and returns a new array
+ * containing only the valid filters. A filter is considered valid if:
+ * - It has an 'isEmpty' or 'isNotEmpty' operator, or
+ * - Its value is not empty (for array values, at least one element must be present;
+ *   for other types, the value must not be an empty string, null, or undefined)
+ *
+ * @param filters - An array of Filter objects to be validated.
+ * @returns A new array containing only the valid filters.
+ */
+export function getValidFilters<TData>(
+  filters: Filter<TData>[]
+): Filter<TData>[] {
+  return filters?.filter(
+    (filter) =>
+      filter.operator === "isEmpty" ||
+      filter.operator === "isNotEmpty" ||
+      (Array.isArray(filter.value)
+        ? filter.value.length > 0
+        : filter.value !== "" &&
+          filter.value !== null &&
+          filter.value !== undefined)
+  )
+}
+
+interface NumericFilterValue {
+  operator: string
+  inputValue?: number
+}
+
+
+export const numericFilter: FilterFn<any> = (
+  row: Row<any>,
+  columnId: string,
+  filterValue: NumericFilterValue
+) => {
+  const rowValue = row.getValue(columnId)
+
+  // handle "isEmpty" / "isNotEmpty"
+  if (filterValue.operator === "isEmpty") {
+    return rowValue == null || rowValue === ""
+  } else if (filterValue.operator === "isNotEmpty") {
+    return !(rowValue == null || rowValue === "")
+  }
+
+  // parse rowValue → numeric
+  const numericRowVal =
+    typeof rowValue === "number" ? rowValue : parseFloat(String(rowValue))
+
+  if (isNaN(numericRowVal)) {
+    // rowValue not a number
+    return false
+  }
+
+  // parse filterValue.inputValue
+  const filterNum = filterValue.inputValue
+  if (filterNum == null || isNaN(filterNum)) {
+    // if user didn’t actually type a number, match everything or nothing (your choice)
+    return true
+  }
+
+  // compare based on operator
+  switch (filterValue.operator) {
+    case "eq":
+      return numericRowVal === filterNum
+    case "ne":
+      return numericRowVal !== filterNum
+    case "lt":
+      return numericRowVal < filterNum
+    case "lte":
+      return numericRowVal <= filterNum
+    case "gt":
+      return numericRowVal > filterNum
+    case "gte":
+      return numericRowVal >= filterNum
+    default:
+      return true
+  }
+}
\ No newline at end of file
diff --git a/lib/docuSign/docuSignFns.ts b/lib/docuSign/docuSignFns.ts
new file mode 100644
index 00000000..87977a0b
--- /dev/null
+++ b/lib/docuSign/docuSignFns.ts
@@ -0,0 +1,383 @@
+"use server";
+
+import docusign from "docusign-esign";
+import fs from "fs";
+import path from "path";
+import jwtConfig from "./jwtConfig/jwtConfig.json";
+import dayjs from "dayjs";
+import { ContractInfo, ContractorInfo } from "./types";
+
+const SCOPES = ["signature", "impersonation"];
+
+//DocuSign 인증 정보
+async function authenticate(): Promise<
+  | undefined
+  | {
+      accessToken: string;
+      apiAccountId: string;
+      basePath: string;
+    }
+> {
+  const jwtLifeSec = 10 * 60;
+  const dsApi = new docusign.ApiClient();
+  dsApi.setOAuthBasePath(jwtConfig.dsOauthServer.replace("https://", ""));
+  const privateKeyPath = path.resolve(
+    process.cwd(),
+    jwtConfig.privateKeyLocation
+  );
+
+  let rsaKey: Buffer = fs.readFileSync(privateKeyPath);
+
+  try {
+    const results = await dsApi.requestJWTUserToken(
+      jwtConfig.dsJWTClientId,
+      jwtConfig.impersonatedUserGuid,
+      SCOPES,
+      rsaKey,
+      jwtLifeSec
+    );
+    const accessToken = results.body.access_token;
+
+    const userInfoResults = await dsApi.getUserInfo(accessToken);
+    let userInfo = userInfoResults.accounts.find(
+      (account: Partial<{ isDefault: string }>) => account.isDefault === "true"
+    );
+
+    return {
+      accessToken: results.body.access_token,
+      apiAccountId: userInfo.accountId,
+      basePath: `${userInfo.baseUri}/restapi`,
+    };
+  } catch (e) {
+    console.error("❌ 인증 실패:", e);
+  }
+}
+
+async function getSignerId(
+  basePath: string,
+  accountId: string,
+  accessToken: string,
+  envelopeId: string,
+  roleName: string
+): Promise<string | null> {
+  const apiClient = new docusign.ApiClient();
+  apiClient.setBasePath(basePath);
+  apiClient.addDefaultHeader("Authorization", "Bearer " + accessToken);
+
+  const envelopesApi = new docusign.EnvelopesApi(apiClient);
+
+  try {
+    const recipients = await envelopesApi.listRecipients(accountId, envelopeId);
+
+    const singers = recipients?.signers ?? [];
+
+    // 🔹 특정 서명자(Role Name 기준)의 Recipient ID 찾기
+    const signer = singers.find((s) => s.roleName === roleName);
+    if (!signer) {
+      console.error("❌ 해당 Role Name을 가진 서명자를 찾을 수 없습니다.");
+      return null;
+    }
+
+    return signer.recipientId as string;
+  } catch (error) {
+    console.error("❌ 서명자 ID 조회 실패:", error);
+    return null;
+  }
+}
+
+//계약서 서명 요청
+export async function requestContractSign(
+  contractTemplateId: string,
+  contractInfo: ContractInfo[],
+  subcontractorinfo: ContractorInfo,
+  contractorInfo: ContractorInfo,
+  ccInfo: ContractorInfo[],
+  brandId: string | undefined = undefined
+): Promise<
+  Partial<{
+    result: boolean;
+    envelopeId: string;
+    error: any;
+  }>
+> {
+  let accountInfo = await authenticate();
+  if (accountInfo) {
+    const { accessToken, basePath, apiAccountId } = accountInfo;
+    const {
+      email: subEmail,
+      name: subConName,
+      roleName: subRoleName,
+    } = subcontractorinfo;
+
+    const {
+      email: conEmail,
+      name: conName,
+      roleName: roleName,
+    } = contractorInfo;
+
+    const apiClient = new docusign.ApiClient();
+    apiClient.setBasePath(basePath);
+    apiClient.addDefaultHeader("Authorization", "Bearer " + accessToken);
+    const envelopesApi = new docusign.EnvelopesApi(apiClient);
+
+    const signer1: docusign.TemplateRole = {
+      email: subEmail,
+      name: subConName,
+      roleName: subRoleName,
+    };
+
+    const signer1Tabs: docusign.Tabs = {
+      textTabs: [
+        ...contractInfo.map((c): docusign.Text => {
+          const textField: docusign.Text = {
+            tabLabel: c.tabLabel,
+            value: c.value,
+            locked: "true",
+          };
+          return textField;
+        }),
+      ],
+    };
+
+    const signer2: docusign.TemplateRole = {
+      email: conEmail,
+      name: conName,
+      roleName: roleName,
+    };
+
+    const signer2Tabs: docusign.Tabs = {
+      dateSignedTabs: [
+        {
+          tabLabel: "contract_complete_date",
+        },
+      ],
+    };
+
+    signer1.tabs = signer1Tabs;
+    signer2.tabs = signer2Tabs;
+
+    const envelopeDefinition: docusign.EnvelopeDefinition = {
+      templateId: contractTemplateId,
+      templateRoles: [signer1, signer2, ...ccInfo], // 두 명의 서명자 추가
+      status: "sent", // 즉시 발송
+    };
+
+    if (brandId) {
+      envelopeDefinition.brandId = brandId;
+    }
+
+    try {
+      let envelopeSummary = await envelopesApi.createEnvelope(apiAccountId, {
+        envelopeDefinition,
+      });
+
+      // console.log("✅ 서명 요청 완료, Envelope ID:", envelopeSummary);
+      return {
+        result: true,
+        envelopeId: envelopeSummary.envelopeId,
+      };
+    } catch (error) {
+      console.dir(error);
+      return {
+        result: false,
+        error,
+      };
+    }
+  } else {
+    return {
+      result: false,
+    };
+  }
+}
+
+//서명된 계약서 다운로드
+export async function downloadContractFile(envelopeId: string): Promise<
+  Partial<{
+    result: boolean;
+    fileName: string;
+    buffer: Buffer;
+    envelopeId: string;
+    error: any;
+  }>
+> {
+  let accountInfo = await authenticate();
+
+  if (accountInfo) {
+    const { accessToken, apiAccountId, basePath } = accountInfo;
+
+    const apiClient = new docusign.ApiClient();
+    apiClient.setBasePath(basePath);
+    apiClient.addDefaultHeader("Authorization", "Bearer " + accessToken);
+
+    const envelopesApi = new docusign.EnvelopesApi(apiClient);
+
+    try {
+      //Document ID 등 파일 정보를 호출
+      const response = await envelopesApi.listDocuments(
+        apiAccountId,
+        envelopeId,
+        null
+      );
+
+      const { envelopeDocuments } = response || { envelopeDocuments: [] };
+
+      if (Array.isArray(envelopeDocuments) && envelopeDocuments.length > 0) {
+        const { documentId, name } = envelopeDocuments[0] as {
+          documentId: string;
+          name: string;
+        };
+
+        //Document Buffer 호출
+        const downloadFile = await envelopesApi.getDocument(
+          apiAccountId,
+          envelopeId,
+          documentId,
+          {}
+        );
+
+        if (documentId && documentId !== "certificate") {
+          const bufferData: Buffer = downloadFile as unknown as Buffer;
+          return {
+            result: true,
+            fileName: name,
+            buffer: bufferData,
+            envelopeId,
+          };
+        }
+      }
+
+      return {
+        result: false,
+      };
+    } catch (error) {
+      return {
+        result: false,
+        error,
+      };
+    }
+  } else {
+    return {
+      result: false,
+    };
+  }
+}
+
+//최종 서명 날짜 찾기
+export async function findContractCompleteTime(
+  envelopeId: string,
+  lastSignerRoleName: string
+): Promise<{
+  completedDateTime: string;
+  year: string;
+  month: string;
+  day: string;
+  time: string;
+} | null> {
+  let accountInfo = await authenticate();
+
+  if (!accountInfo) {
+    console.error("❌ 인증 실패: API 요청을 중단합니다.");
+    return null;
+  }
+
+  const { accessToken, apiAccountId: accountId, basePath } = accountInfo;
+
+  const apiClient = new docusign.ApiClient();
+  apiClient.setBasePath(basePath);
+  apiClient.addDefaultHeader("Authorization", "Bearer " + accessToken);
+
+  const envelopesApi = new docusign.EnvelopesApi(apiClient);
+
+  try {
+    const envelope = await envelopesApi.getEnvelope(accountId, envelopeId);
+    if (!envelope.completedDateTime) {
+      console.error("❌ 서명 완료 날짜가 없습니다.");
+      return null;
+    }
+
+    // 🔹 `SIGNER_ID` 가져오기
+    const signerId = await getSignerId(
+      basePath,
+      accountId,
+      accessToken,
+      envelopeId,
+      lastSignerRoleName
+    );
+    if (!signerId) {
+      console.error("❌ 서명자 ID를 찾을 수 없습니다.");
+      return null;
+    }
+
+    const completedDate = dayjs(envelope.completedDateTime);
+    const year = completedDate.format("YYYY").toString();
+    const month = completedDate.format("MM").toString();
+    const day = completedDate.format("DD").toString();
+    const time = completedDate.format("HH:mm").toString();
+
+    return {
+      completedDateTime: envelope.completedDateTime,
+      year,
+      month,
+      day,
+      time,
+    };
+  } catch (error) {
+    console.error("❌ 서명 완료 후 날짜 추가 실패:", error);
+    return null;
+  }
+}
+
+export async function getRecipients(
+  envelopeId: string,
+  recipientId: string
+): Promise<{ result: boolean; message?: string }> {
+  try {
+    let accountInfo = await authenticate();
+
+    if (!accountInfo) {
+      console.error("❌ 인증 실패: API 요청을 중단합니다.");
+      return {
+        result: false,
+        message: "인증 실패: API 요청을 중단합니다.",
+      };
+    }
+
+    const { accessToken, apiAccountId: accountId, basePath } = accountInfo;
+
+    const apiClient = new docusign.ApiClient();
+    apiClient.setBasePath(basePath);
+    apiClient.addDefaultHeader("Authorization", "Bearer " + accessToken);
+
+    const envelopesApi = new docusign.EnvelopesApi(apiClient);
+
+    const response = await envelopesApi.listRecipients(accountId, envelopeId);
+
+    const singers: { [key: string]: any }[] = response?.signers ?? [];
+
+    // 🔹 특정 서명자(Role Name 기준)의 Recipient ID 찾기
+    const signer = singers.find((s) => s.recipientId === recipientId);
+    if (!signer) {
+      console.error("❌ 해당 Role Name을 가진 서명자를 찾을 수 없습니다.");
+      return {
+        result: false,
+        message: "해당 Recipient id를 가진 서명자를 찾을 수 없습니다.",
+      };
+    }    
+
+    const { autoRespondedReason, status } = signer;
+
+    if (autoRespondedReason || status === "status") {
+      return {
+        result: false,
+        message: autoRespondedReason,
+      };
+    }
+
+    return {
+      result: true,
+    };
+  } catch (error) {
+    console.error("Error retrieving recipients:", error);
+    return { result: false, message: (error as Error).message };
+  }
+}
diff --git a/lib/docuSign/jwtConfig/README.md b/lib/docuSign/jwtConfig/README.md
new file mode 100644
index 00000000..7c997d07
--- /dev/null
+++ b/lib/docuSign/jwtConfig/README.md
@@ -0,0 +1,54 @@
+# DocuSign
+
+## DocuSign Contract Template
+
+### DocuSign Delveloper Account
+
+1. ID: kiman.kim@dtsolution.co.kr
+2. PW: rlaks!153
+
+### jwtConfig.json
+
+1. DocuSign Developer 로그인
+2. DocuSign Developer Admin 메뉴 이동
+3. DocuSign 좌측 메뉴 바에서 INTERGRATIONS > Apps and Keys 이동
+
+```jwtConfig.json
+{
+  //Add App and Intergraion Key 시 private.key 파일 생성 (처음 key를 만들때만 저장 가능함.)
+  "privateKeyLocation": private.key 파일 경로,
+  "dsJWTClientId": Apps and Intergration Keys 내 Intergration Kzey,
+  "impersonatedUserGuid": My Account Information 내 User ID,
+  //개발환경: https://account-d.docusign.com
+  //운영환경: https://account.docusign.com
+  "dsOauthServer": "https://account-d.docusign.com"
+}
+```
+
+### DocuSign Web Hook
+
+1. DocuSign Developer 로그인
+2. DocuSign Developer Admin 메뉴 이동
+3. DocuSign 좌측 메뉴 바에서 INTERGRATIONS > Connect 이동
+4. Add Configuration > Custom
+5. Web Hook Url 입력
+6. Trigger Events
+   6.1. Envelope Signed/Completed - Check
+   6.2. Envelope Declined - Check
+   6.3. Recipient Sent - Check
+   6.4. Recipient Delivered - Check
+   6.5. Recipient Signed/Completed - Check
+   6.6. Recipient Declined - Check
+
+### DocuSign Mail Sender Info Change
+
+1. DocuSign Developer 로그인
+2. 우측 상단 유저 아이콘 클릭 후 Manage Profile Menu로 이동
+3. My Profile에서 Name 변경
+
+### DocuSign Mail Templete Change
+
+1. DocuSign Developer 로그인
+2. DocuSign Developer Admin 메뉴 이동
+3. DocuSign 좌측 메뉴 바에서 ACCOUNT > Brands 이동
+4. 사용하고자 하는 Brand 제작 후 BrandId 사용
diff --git a/lib/docuSign/jwtConfig/jwtConfig.json b/lib/docuSign/jwtConfig/jwtConfig.json
new file mode 100644
index 00000000..756ca9dd
--- /dev/null
+++ b/lib/docuSign/jwtConfig/jwtConfig.json
@@ -0,0 +1,6 @@
+{
+  "dsJWTClientId": "4ecf089f-9134-4c6c-9657-d8f8c41b5965",
+  "impersonatedUserGuid": "de8ef3a2-9498-4855-a571-249a774a3905",
+  "privateKeyLocation": "./lib/docuSign/jwtConfig/private.key",
+  "dsOauthServer": "https://account-d.docusign.com"
+}
diff --git a/lib/docuSign/jwtConfig/private.key b/lib/docuSign/jwtConfig/private.key
new file mode 100644
index 00000000..73c4291a
--- /dev/null
+++ b/lib/docuSign/jwtConfig/private.key
@@ -0,0 +1,29 @@
+-----BEGIN RSA PRIVATE KEY-----
+MIIEowIBAAKCAQEAnnjspqTabuuPLPi9Iga8U/chJRNmyr1PTbJC/Il0jse4ps/C
+KGQdmVOsDzPW//dopMLVc5OmJ7I3y7lw2+TuJ0G7Ip7s6epV2dzqH9aA/yvHDwvj
+2W9ZRH8pNx5AjNDCscwBF3NCK8CoGqK3+ukvuErVK8XQHnzOtAF2uyd2JLodT0fE
+I+uyvIL1E5pzU5zHzxHoWCsrjKAVaHhWUiTP0migFYrMBMVWC30slvhrNg1qc4uT
+Of3rkOGAUK+MFqCbaUm4qKBest9hDgSSw1h8Wv3cKD90KlRgZRSLSRxFwxzhj0ft
+1ip+JIc8dLcax1+xhX0dKBW2GARchojxEAzhDQIDAQABAoIBABvVuyF5JsnhU7xv
+M09Q9g7cg0SfIAi/0DhiNYxke2Xh1D/ukZilHyLRlND1xs+ebhG0jCf5GO/ziIPe
+3mEtWJxqGfvWhOAAUlSKTlBJzc4kKxpsOPj16yzSFhPxmx5ww6XVoqJzEv4a4JwP
+FTg78a8R69f8rpXQT8FD2Y49e+2uwVZVJfCjyaLcS2jh0wfaf7YiztSfyeAZNU2z
+YIL05wDm6Kw8fsdgZ5tF+tEEx0xBelNh+g4fNVVYdQmUhTM0GHePH5KvLc7LQyxD
+z/8ymU5fxikJGFmSS4ncI8ZpmCjV36tkUfZ03n5fW+76Q+gncc+ZKtXRZLgqBdsK
+q9ZDTuECgYEAzXMpmOnZh6Mzw6js5WZ2jSw1vuHjEDBOxpKon9UXZD5wZh9bcuxr
+ARQy+9/UETppumIW8L+zpmrpZISyriywEkleIjQhDqA9HJGR1lSukhMTyt4bj6ER
+f3uyJUzFun5c/QTJEBEJneTFY/Zc4pB+KIdTf3EosVGbtBfkfUXvyyECgYEAxXbA
+lg6gmo7ZpGZuPdhMrGiSI8rmGsvIo8Bw7jqdb6E/ksl5nBIxsLcM2lJw8Qe/fvei
+g+4Zmc5NOzyOKO1L84ekOC6jfvnGR2jzS2hF/qcNLUEEOKEyzBeniWrAqt80fgeK
+cH3zSAXCyLaGJPfdPPqEDYtVBN+zTwNJvHDK5G0CgYEAq1Lcnlpr/vL2iLQGkKno
+NINocjw2OFrAZlEIcvik4AA9hLuja+uAs86fUXDujEtUvYtsq+iArEc9R4hs5Ff5
+n9Y0vHsSEftH2tn9bmkBhmiIOcUL4LMlP1TsUrR5srILYycpb891YIjUni5keL6b
+pbprw7uefneaSw0dieXXOGECgYBrnmsb3WD+m3hWt1TB9A7lsCBlzYFXfVUemhVy
+YRPI8TL6xz+2JdxbGYixvFi9pKFji4dRLAVb5CoHbNt1xs6sLXL9A74rx+mepb5j
+jLMJNPZjgZnRW1maDhJLPJlBB2FOhsGWya47xJgCWCgIIea8AzTRROzTOTA6keov
+/7E0iQKBgFUWjpHIC0wkBFQFAV1uji3P0Bp6/hCOq9hZNxiaS41AlrhrPDRcIqss
+rMrW0Wf0OGDv0+aQXdMkk+nKBjQO3uS6EIj2oDUY/hTFXAKqvDPbHEx3rbtR7NdJ
+Sx9/raUX3YoYSNbPwwKcIWiHVnqY/hI8zIb+RFZgwt+mEoLS9/a2
+-----END RSA PRIVATE KEY-----
+
+
diff --git a/lib/docuSign/types.ts b/lib/docuSign/types.ts
new file mode 100644
index 00000000..450199ce
--- /dev/null
+++ b/lib/docuSign/types.ts
@@ -0,0 +1,37 @@
+export interface ContractInfo {
+  tabLabel: string;
+  value: string;
+}
+
+export interface ContractorInfo {
+  email: string;
+  name: string;
+  roleName: string;
+}
+
+export type poTabLabes =
+  | "po_no"
+  | "vendor_name"
+  | "po_date"
+  | "project_name"
+  | "vendor_location"
+  | "shi_email"
+  | "vendor_email"
+  | "po_desc"
+  | "qty"
+  | "unit_price"
+  | "total"
+  | "grand_total_amount"
+  | "tax_rate"
+  | "tax_total"
+  | "payment_amount"
+  | "remark";
+
+type ContentMap<T extends string> = {
+  [K in T]: {
+    tabLabel: K;
+    value: string;
+  };
+};
+
+export type POContent = ContentMap<poTabLabes>[poTabLabes][];
diff --git a/lib/downloadFile.ts b/lib/downloadFile.ts
new file mode 100644
index 00000000..e2777976
--- /dev/null
+++ b/lib/downloadFile.ts
@@ -0,0 +1,81 @@
+'use server'
+
+import fs from 'fs/promises'
+import path from 'path'
+import { NextResponse } from 'next/server'
+
+/**
+ * 첨부 파일 다운로드를 위한 서버 액션
+ * 
+ * @param filePath 파일의 상대 경로
+ * @returns 파일 내용(Base64 인코딩) 및 메타데이터를 포함한 객체
+ */
+export async function downloadFileAction(filePath: string) {
+  try {
+    // 보안: 파일 경로가 uploads 디렉토리 내에 있는지 확인
+    if (!filePath.startsWith('/uploads/') && !filePath.startsWith('uploads/')) {
+      return { 
+        ok: false, 
+        error: 'Invalid file path. Only files in the uploads directory can be downloaded.' 
+      };
+    }
+
+    // 실제 서버 파일 시스템에서의 전체 경로 계산
+    // 참고: process.cwd()는 현재 실행 중인 프로세스의 작업 디렉토리를 반환합니다.
+    // 환경에 따라 public 폴더나 다른 위치를 기준으로 할 수도 있습니다.
+    const normalizedPath = filePath.startsWith('/') ? filePath.slice(1) : filePath;
+    const fullPath = path.join(process.cwd(), 'public', normalizedPath);
+
+    // 파일 존재 여부 확인
+    try {
+      await fs.access(fullPath);
+    } catch {
+      return { ok: false, error: 'File not found' };
+    }
+
+    // 파일 읽기
+    const fileBuffer = await fs.readFile(fullPath);
+    
+    // 파일 통계 정보 가져오기
+    const stats = await fs.stat(fullPath);
+    
+    // MIME 타입 추측
+    const extension = path.extname(fullPath).toLowerCase();
+    let mimeType = 'application/octet-stream'; // 기본값
+    
+    // 일반적인 파일 타입에 대한 MIME 타입 매핑
+    const mimeTypes = {
+      '.pdf': 'application/pdf',
+      '.doc': 'application/msword',
+      '.docx': 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+      '.xls': 'application/vnd.ms-excel',
+      '.xlsx': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+      '.png': 'image/png',
+      '.jpg': 'image/jpeg',
+      '.jpeg': 'image/jpeg',
+      '.gif': 'image/gif',
+      '.txt': 'text/plain',
+    };
+    
+    if (extension in mimeTypes) {
+      mimeType = mimeTypes[extension];
+    }
+    
+    // Base64로 인코딩하여 반환
+    return {
+      ok: true,
+      data: {
+        content: fileBuffer.toString('base64'),
+        fileName: path.basename(fullPath),
+        size: stats.size,
+        mimeType,
+      },
+    };
+  } catch (error) {
+    console.error('Download error:', error);
+    return { 
+      ok: false, 
+      error: error instanceof Error ? error.message : 'An unknown error occurred' 
+    };
+  }
+}
\ No newline at end of file
diff --git a/lib/equip-class/repository.ts b/lib/equip-class/repository.ts
new file mode 100644
index 00000000..ddf98dd2
--- /dev/null
+++ b/lib/equip-class/repository.ts
@@ -0,0 +1,45 @@
+import db from "@/db/db";
+import { Item, items } from "@/db/schema/items";
+import { tagClasses } from "@/db/schema/vendorData";
+import {
+  eq,
+  inArray,
+  not,
+  asc,
+  desc,
+  and,
+  ilike,
+  gte,
+  lte,
+  count,
+  gt,
+} from "drizzle-orm";
+import { PgTransaction } from "drizzle-orm/pg-core";
+
+export async function selectTagClassLists(
+    tx: PgTransaction<any, any, any>,
+    params: {
+      where?: any; // drizzle-orm의 조건식 (and, eq...) 등
+      orderBy?: (ReturnType<typeof asc> | ReturnType<typeof desc>)[];
+      offset?: number;
+      limit?: number;
+    }
+  ) {
+    const { where, orderBy, offset = 0, limit = 10 } = params;
+  
+    return tx
+      .select()
+      .from(tagClasses)
+      .where(where)
+      .orderBy(...(orderBy ?? []))
+      .offset(offset)
+      .limit(limit);
+  }
+  /** 총 개수 count */
+  export async function countTagClassLists(
+    tx: PgTransaction<any, any, any>,
+    where?: any
+  ) {
+    const res = await tx.select({ count: count() }).from(tagClasses).where(where);
+    return res[0]?.count ?? 0;
+  }
\ No newline at end of file
diff --git a/lib/equip-class/service.ts b/lib/equip-class/service.ts
new file mode 100644
index 00000000..c35f4fbe
--- /dev/null
+++ b/lib/equip-class/service.ts
@@ -0,0 +1,85 @@
+"use server"; // Next.js 서버 액션에서 직접 import하려면 (선택)
+
+import { revalidateTag, unstable_noStore } from "next/cache";
+import  db  from "@/db/db";
+import { unstable_cache } from "@/lib/unstable-cache";
+import { filterColumns } from "@/lib/filter-columns";
+import { tagClasses } from "@/db/schema/vendorData";
+import { asc, desc, ilike, inArray, and, gte, lte, not, or } from "drizzle-orm";
+import { GetTagClassesSchema } from "./validation";
+import { countTagClassLists, selectTagClassLists } from "./repository";
+
+export async function getTagClassists(input: GetTagClassesSchema) {
+
+    return unstable_cache(
+      async () => {
+        try {
+          const offset = (input.page - 1) * input.perPage;
+  
+          // const advancedTable = input.flags.includes("advancedTable");
+          const advancedTable = true;
+  
+          // advancedTable 모드면 filterColumns()로 where 절 구성
+          const advancedWhere = filterColumns({
+            table: tagClasses,
+            filters: input.filters,
+            joinOperator: input.joinOperator,
+          });
+  
+  
+          let globalWhere
+          if (input.search) {
+            const s = `%${input.search}%`
+            globalWhere = or(ilike(tagClasses.code, s), ilike(tagClasses.label, s)
+                 )
+            // 필요시 여러 칼럼 OR조건 (status, priority, etc)
+          }
+  
+          const conditions = [];
+          if (advancedWhere) conditions.push(advancedWhere);
+          if (globalWhere) conditions.push(globalWhere);
+          
+          let finalWhere;
+          if (conditions.length > 0) {
+            finalWhere = conditions.length > 1 ? and(...conditions) : conditions[0];
+          }
+  
+          // 아니면 ilike, inArray, gte 등으로 where 절 구성
+          const where = finalWhere
+          
+  
+          const orderBy =
+            input.sort.length > 0
+              ? input.sort.map((item) =>
+                  item.desc ? desc(tagClasses[item.id]) : asc(tagClasses[item.id])
+                )
+              : [asc(tagClasses.createdAt)];
+  
+          // 트랜잭션 내부에서 Repository 호출
+          const { data, total } = await db.transaction(async (tx) => {
+            const data = await selectTagClassLists(tx, {
+              where,
+              orderBy,
+              offset,
+              limit: input.perPage,
+            });
+  
+            const total = await countTagClassLists(tx, where);
+            return { data, total };
+          });
+  
+          const pageCount = Math.ceil(total / input.perPage);
+
+          return { data, pageCount };
+        } catch (err) {
+          // 에러 발생 시 디폴트
+          return { data: [], pageCount: 0 };
+        }
+      },
+      [JSON.stringify(input)], // 캐싱 키
+      {
+        revalidate: 3600,
+        tags: ["equip-class"], // revalidateTag("items") 호출 시 무효화
+      }
+    )();
+  }
\ No newline at end of file
diff --git a/lib/equip-class/table/equipClass-table-columns.tsx b/lib/equip-class/table/equipClass-table-columns.tsx
new file mode 100644
index 00000000..1255abf3
--- /dev/null
+++ b/lib/equip-class/table/equipClass-table-columns.tsx
@@ -0,0 +1,99 @@
+"use client"
+
+import * as React from "react"
+import { type DataTableRowAction } from "@/types/table"
+import { type ColumnDef } from "@tanstack/react-table"
+import { InfoIcon } from "lucide-react"
+
+import { formatDate } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Checkbox } from "@/components/ui/checkbox"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+
+import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header"
+import { TagClasses } from "@/db/schema/vendorData"
+import { equipclassColumnsConfig } from "@/config/equipClassColumnsConfig"
+
+interface GetColumnsProps {
+  setRowAction: React.Dispatch<React.SetStateAction<DataTableRowAction<TagClasses> | null>>
+}
+
+/**
+ * tanstack table 컬럼 정의 (중첩 헤더 버전)
+ */
+export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<TagClasses>[] {
+
+
+  // ----------------------------------------------------------------
+  // 3) 일반 컬럼들을 "그룹"별로 묶어 중첩 columns 생성
+  // ----------------------------------------------------------------
+  // 3-1) groupMap: { [groupName]: ColumnDef<TagClasses>[] }
+  const groupMap: Record<string, ColumnDef<TagClasses>[]> = {}
+
+  equipclassColumnsConfig.forEach((cfg) => {
+    // 만약 group가 없으면 "_noGroup" 처리
+    const groupName = cfg.group || "_noGroup"
+
+    if (!groupMap[groupName]) {
+      groupMap[groupName] = []
+    }
+
+    // child column 정의
+    const childCol: ColumnDef<TagClasses> = {
+      accessorKey: cfg.id,
+      enableResizing: true,
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title={cfg.label} />
+      ),
+      meta: {
+        excelHeader: cfg.excelHeader,
+        group: cfg.group,
+        type: cfg.type,
+      },
+      cell: ({ row, cell }) => {
+ 
+        if (cfg.id === "createdAt"||cfg.id === "updatedAt") {
+          const dateVal = cell.getValue() as Date
+          return formatDate(dateVal)
+        }
+
+        return row.getValue(cfg.id) ?? ""
+      },
+    }
+
+    groupMap[groupName].push(childCol)
+  })
+
+  // ----------------------------------------------------------------
+  // 3-2) groupMap에서 실제 상위 컬럼(그룹)을 만들기
+  // ----------------------------------------------------------------
+  const nestedColumns: ColumnDef<TagClasses>[] = []
+
+  // 순서를 고정하고 싶다면 group 순서를 미리 정의하거나 sort해야 함
+  // 여기서는 그냥 Object.entries 순서
+  Object.entries(groupMap).forEach(([groupName, colDefs]) => {
+    if (groupName === "_noGroup") {
+      // 그룹 없음 → 그냥 최상위 레벨 컬럼
+      nestedColumns.push(...colDefs)
+    } else {
+      // 상위 컬럼
+      nestedColumns.push({
+        id: groupName,
+        header: groupName, // "Basic Info", "Metadata" 등
+        columns: colDefs,
+      })
+    }
+  })
+
+  // ----------------------------------------------------------------
+  // 4) 최종 컬럼 배열: select, nestedColumns, actions
+  // ----------------------------------------------------------------
+  return [
+    ...nestedColumns,
+  ]
+}
\ No newline at end of file
diff --git a/lib/equip-class/table/equipClass-table-toolbar-actions.tsx b/lib/equip-class/table/equipClass-table-toolbar-actions.tsx
new file mode 100644
index 00000000..5e03d800
--- /dev/null
+++ b/lib/equip-class/table/equipClass-table-toolbar-actions.tsx
@@ -0,0 +1,53 @@
+"use client"
+
+import * as React from "react"
+import { type Table } from "@tanstack/react-table"
+import { Download, RefreshCcw, Upload } from "lucide-react"
+import { toast } from "sonner"
+
+import { exportTableToExcel } from "@/lib/export"
+import { Button } from "@/components/ui/button"
+import { TagClasses } from "@/db/schema/vendorData"
+
+
+
+interface ItemsTableToolbarActionsProps {
+  table: Table<TagClasses>
+}
+
+export function EquipClassTableToolbarActions({ table }: ItemsTableToolbarActionsProps) {
+  // 파일 input을 숨기고, 버튼 클릭 시 참조해 클릭하는 방식
+  const fileInputRef = React.useRef<HTMLInputElement>(null)
+
+
+
+  return (
+    <div className="flex items-center gap-2">
+      {/** 4) Export 버튼 */}
+      <Button
+        variant="samsung"
+        size="sm"
+        className="gap-2"
+      >
+        <RefreshCcw className="size-4" aria-hidden="true" />
+        <span className="hidden sm:inline">Get Equip Class</span>
+      </Button>
+
+      {/** 4) Export 버튼 */}
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={() =>
+          exportTableToExcel(table, {
+            filename: "tasks",
+            excludeColumns: ["select", "actions"],
+          })
+        }
+        className="gap-2"
+      >
+        <Download className="size-4" aria-hidden="true" />
+        <span className="hidden sm:inline">Export</span>
+      </Button>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/lib/equip-class/table/equipClass-table.tsx b/lib/equip-class/table/equipClass-table.tsx
new file mode 100644
index 00000000..56fd42aa
--- /dev/null
+++ b/lib/equip-class/table/equipClass-table.tsx
@@ -0,0 +1,133 @@
+"use client"
+
+import * as React from "react"
+import type {
+  DataTableAdvancedFilterField,
+  DataTableFilterField,
+  DataTableRowAction,
+} from "@/types/table"
+
+import { useDataTable } from "@/hooks/use-data-table"
+import { DataTable } from "@/components/data-table/data-table"
+import { DataTableAdvancedToolbar } from "@/components/data-table/data-table-advanced-toolbar"
+import { useFeatureFlags } from "./feature-flags-provider"
+
+import { TagClasses } from "@/db/schema/vendorData"
+import { getTagClassists } from "../service"
+import { EquipClassTableToolbarActions } from "./equipClass-table-toolbar-actions"
+import { getColumns } from "./equipClass-table-columns"
+
+interface ItemsTableProps {
+  promises: Promise<
+    [
+      Awaited<ReturnType<typeof getTagClassists>>,
+    ]
+  >
+}
+
+export function EquipClassTable({ promises }: ItemsTableProps) {
+  const { featureFlags } = useFeatureFlags()
+
+  const [{ data, pageCount }] =
+    React.use(promises)
+
+
+console.log(data)
+
+  const [rowAction, setRowAction] =
+    React.useState<DataTableRowAction<TagClasses> | null>(null)
+
+  const columns = React.useMemo(
+    () => getColumns({ setRowAction }),
+    [setRowAction]
+  )
+
+  /**
+   * This component can render either a faceted filter or a search filter based on the `options` prop.
+   *
+   * @prop options - An array of objects, each representing a filter option. If provided, a faceted filter is rendered. If not, a search filter is rendered.
+   *
+   * Each `option` object has the following properties:
+   * @prop {string} label - The label for the filter option.
+   * @prop {string} value - The value for the filter option.
+   * @prop {React.ReactNode} [icon] - An optional icon to display next to the label.
+   * @prop {boolean} [withCount] - An optional boolean to display the count of the filter option.
+   */
+  const filterFields: DataTableFilterField<TagClasses>[] = [
+
+  ]
+
+  /**
+   * Advanced filter fields for the data table.
+   * These fields provide more complex filtering options compared to the regular filterFields.
+   *
+   * Key differences from regular filterFields:
+   * 1. More field types: Includes 'text', 'multi-select', 'date', and 'boolean'.
+   * 2. Enhanced flexibility: Allows for more precise and varied filtering options.
+   * 3. Used with DataTableAdvancedToolbar: Enables a more sophisticated filtering UI.
+   * 4. Date and boolean types: Adds support for filtering by date ranges and boolean values.
+   */
+  const advancedFilterFields: DataTableAdvancedFilterField<TagClasses>[] = [
+    {
+      id: "code",
+      label: "Code",
+      type: "text",
+      // group: "Basic Info",
+    },
+    {
+      id: "label",
+      label: "Label",
+      type: "text",
+      // group: "Basic Info",
+    },
+   
+  
+    {
+      id: "createdAt",
+      label: "Created At",
+      type: "date",
+      // group: "Metadata",a
+    },
+    {
+      id: "updatedAt",
+      label: "Updated At",
+      type: "date",
+      // group: "Metadata",
+    },
+  ]
+
+
+  const { table } = useDataTable({
+    data,
+    columns,
+    pageCount,
+    filterFields,
+    enablePinning: true,
+    enableAdvancedFilter: true,
+    initialState: {
+      sorting: [{ id: "createdAt", desc: true }],
+      columnPinning: { right: ["actions"] },
+    },
+    getRowId: (originalRow) => String(originalRow.id),
+    shallow: false,
+    clearOnDefault: true,
+  })
+
+  return (
+    <>
+      <DataTable
+        table={table}
+      >
+        <DataTableAdvancedToolbar
+          table={table}
+          filterFields={advancedFilterFields}
+          shallow={false}
+        >
+          <EquipClassTableToolbarActions table={table} />
+        </DataTableAdvancedToolbar>
+
+      </DataTable>
+
+    </>
+  )
+}
diff --git a/lib/equip-class/table/feature-flags-provider.tsx b/lib/equip-class/table/feature-flags-provider.tsx
new file mode 100644
index 00000000..81131894
--- /dev/null
+++ b/lib/equip-class/table/feature-flags-provider.tsx
@@ -0,0 +1,108 @@
+"use client"
+
+import * as React from "react"
+import { useQueryState } from "nuqs"
+
+import { dataTableConfig, type DataTableConfig } from "@/config/data-table"
+import { cn } from "@/lib/utils"
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+
+type FeatureFlagValue = DataTableConfig["featureFlags"][number]["value"]
+
+interface FeatureFlagsContextProps {
+  featureFlags: FeatureFlagValue[]
+  setFeatureFlags: (value: FeatureFlagValue[]) => void
+}
+
+const FeatureFlagsContext = React.createContext<FeatureFlagsContextProps>({
+  featureFlags: [],
+  setFeatureFlags: () => {},
+})
+
+export function useFeatureFlags() {
+  const context = React.useContext(FeatureFlagsContext)
+  if (!context) {
+    throw new Error(
+      "useFeatureFlags must be used within a FeatureFlagsProvider"
+    )
+  }
+  return context
+}
+
+interface FeatureFlagsProviderProps {
+  children: React.ReactNode
+}
+
+export function FeatureFlagsProvider({ children }: FeatureFlagsProviderProps) {
+  const [featureFlags, setFeatureFlags] = useQueryState<FeatureFlagValue[]>(
+    "flags",
+    {
+      defaultValue: [],
+      parse: (value) => value.split(",") as FeatureFlagValue[],
+      serialize: (value) => value.join(","),
+      eq: (a, b) =>
+        a.length === b.length && a.every((value, index) => value === b[index]),
+      clearOnDefault: true,
+      shallow: false,
+    }
+  )
+
+  return (
+    <FeatureFlagsContext.Provider
+      value={{
+        featureFlags,
+        setFeatureFlags: (value) => void setFeatureFlags(value),
+      }}
+    >
+      <div className="w-full overflow-x-auto">
+        <ToggleGroup
+          type="multiple"
+          variant="outline"
+          size="sm"
+          value={featureFlags}
+          onValueChange={(value: FeatureFlagValue[]) => setFeatureFlags(value)}
+          className="w-fit gap-0"
+        >
+          {dataTableConfig.featureFlags.map((flag, index) => (
+            <Tooltip key={flag.value}>
+              <ToggleGroupItem
+                value={flag.value}
+                className={cn(
+                  "gap-2 whitespace-nowrap rounded-none px-3 text-xs data-[state=on]:bg-accent/70 data-[state=on]:hover:bg-accent/90",
+                  {
+                    "rounded-l-sm border-r-0": index === 0,
+                    "rounded-r-sm":
+                      index === dataTableConfig.featureFlags.length - 1,
+                  }
+                )}
+                asChild
+              >
+                <TooltipTrigger>
+                  <flag.icon className="size-3.5 shrink-0" aria-hidden="true" />
+                  {flag.label}
+                </TooltipTrigger>
+              </ToggleGroupItem>
+              <TooltipContent
+                align="start"
+                side="bottom"
+                sideOffset={6}
+                className="flex max-w-60 flex-col space-y-1.5 border bg-background py-2 font-semibold text-foreground"
+              >
+                <div>{flag.tooltipTitle}</div>
+                <div className="text-xs text-muted-foreground">
+                  {flag.tooltipDescription}
+                </div>
+              </TooltipContent>
+            </Tooltip>
+          ))}
+        </ToggleGroup>
+      </div>
+      {children}
+    </FeatureFlagsContext.Provider>
+  )
+}
diff --git a/lib/equip-class/validation.ts b/lib/equip-class/validation.ts
new file mode 100644
index 00000000..48698ac4
--- /dev/null
+++ b/lib/equip-class/validation.ts
@@ -0,0 +1,34 @@
+import {
+    createSearchParamsCache,
+    parseAsArrayOf,
+    parseAsInteger,
+    parseAsString,
+    parseAsStringEnum,
+} from "nuqs/server"
+import * as z from "zod"
+
+import { getFiltersStateParser, getSortingStateParser } from "@/lib/parsers"
+import { TagClasses } from "@/db/schema/vendorData";
+
+export const searchParamsCache = createSearchParamsCache({
+    flags: parseAsArrayOf(z.enum(["advancedTable", "floatingBar"])).withDefault(
+        []
+    ),
+    page: parseAsInteger.withDefault(1),
+    perPage: parseAsInteger.withDefault(10),
+    sort: getSortingStateParser<TagClasses>().withDefault([
+        { id: "createdAt", desc: true },
+    ]),
+    code: parseAsString.withDefault(""),
+    label: parseAsString.withDefault(""),
+ 
+    // advanced filter
+    filters: getFiltersStateParser().withDefault([]),
+    joinOperator: parseAsStringEnum(["and", "or"]).withDefault("and"),
+    search: parseAsString.withDefault(""),
+
+})
+
+
+
+export type GetTagClassesSchema = Awaited<ReturnType<typeof searchParamsCache.parse>>
diff --git a/lib/export.ts b/lib/export.ts
new file mode 100644
index 00000000..d910ef6a
--- /dev/null
+++ b/lib/export.ts
@@ -0,0 +1,198 @@
+import { type Table } from "@tanstack/react-table"
+import ExcelJS from "exceljs"
+
+/**
+ * `exportTableToExcel`:
+ * - filename: 다운로드할 엑셀 파일 이름(확장자 제외)
+ * - onlySelected: 선택된 행만 내보낼지 여부
+ * - excludeColumns: 제외할 column id들의 배열 (e.g. ["select", "actions"])
+ * - useGroupHeader: 그룹화 헤더를 사용할지 여부 (기본 false)
+ */
+export async function exportTableToExcel<TData>(
+  table: Table<TData>,
+  {
+    filename = "table",
+    onlySelected = false,
+    excludeColumns = [],
+    useGroupHeader = true,
+  }: {
+    filename?: string
+    onlySelected?: boolean
+    excludeColumns?: string[]
+    useGroupHeader?: boolean
+  } = {}
+): Promise<void> {
+  // 1) tanstack에서 실제 사용 중인 leaf columns 가져오기
+  const allColumns = table.getAllLeafColumns()
+
+  // 2) excludeColumns 목록에 들어있는 col.id 제거
+  const columns = allColumns.filter(
+    (col) => !excludeColumns.includes(col.id)
+  )
+
+  let sheetData: any[][]
+
+  if (useGroupHeader) {
+    // ────────────── 2줄 헤더 (row1 = 그룹명, row2 = 컬럼헤더) ──────────────
+    const row1: string[] = []
+    const row2: string[] = []
+
+    columns.forEach((col) => {
+      // group
+      const maybeGroup = (col.columnDef.meta as any)?.group
+      row1.push(maybeGroup ?? "")
+
+      // excelHeader
+      const maybeExcelHeader = (col.columnDef.meta as any)?.excelHeader
+      if (typeof maybeExcelHeader === "string") {
+        row2.push(maybeExcelHeader)
+      } else {
+        row2.push(col.id)
+      }
+    })
+
+    // 데이터
+    const rowModel = onlySelected
+      ? table.getFilteredSelectedRowModel()
+      : table.getRowModel()
+
+    const dataRows = rowModel.rows.map((row) =>
+      columns.map((col) => {
+        const val = row.getValue(col.id)
+        if (val == null) return ""
+        return typeof val === "object" ? JSON.stringify(val) : val
+      })
+    )
+
+    // 최종 sheetData: [ [그룹들...], [헤더들...], ...데이터들 ]
+    sheetData = [row1, row2, ...dataRows]
+  } else {
+    // ────────────── 기존 1줄 헤더 ──────────────
+    const headerRow = columns.map((col) => {
+      const maybeExcelHeader = (col.columnDef.meta as any)?.excelHeader
+      return typeof maybeExcelHeader === "string" ? maybeExcelHeader : col.id
+    })
+
+    // 데이터
+    const rowModel = onlySelected
+      ? table.getFilteredSelectedRowModel()
+      : table.getRowModel()
+
+    const dataRows = rowModel.rows.map((row) =>
+      columns.map((col) => {
+        const val = row.getValue(col.id)
+        if (val == null) return ""
+        return typeof val === "object" ? JSON.stringify(val) : val
+      })
+    )
+
+    sheetData = [headerRow, ...dataRows]
+  }
+
+  // ────────────── ExcelJS 워크북/시트 생성 ──────────────
+  const workbook = new ExcelJS.Workbook()
+  const worksheet = workbook.addWorksheet("Sheet1")
+
+  // (추가) 칼럼별 최대 길이 추적
+  const maxColumnLengths = columns.map(() => 0)
+  sheetData.forEach((row) => {
+    row.forEach((cellValue, colIdx) => {
+      const cellText = cellValue?.toString() ?? ""
+      if (cellText.length > maxColumnLengths[colIdx]) {
+        maxColumnLengths[colIdx] = cellText.length
+      }
+    })
+  })
+
+  // 시트에 데이터 추가 + 헤더 스타일
+  sheetData.forEach((arr, idx) => {
+    const row = worksheet.addRow(arr)
+
+    // 헤더 스타일 적용
+    if (useGroupHeader) {
+      // 2줄 헤더
+      if (idx < 2) {
+        row.font = { bold: true }
+        row.alignment = { horizontal: "center" }
+        row.eachCell((cell) => {
+          cell.fill = {
+            type: "pattern",
+            pattern: "solid",
+            fgColor: { argb: "FFCCCCCC" },
+          }
+        })
+      }
+    } else {
+      // 1줄 헤더
+      if (idx === 0) {
+        row.font = { bold: true }
+        row.alignment = { horizontal: "center" }
+        row.eachCell((cell) => {
+          cell.fill = {
+            type: "pattern",
+            pattern: "solid",
+            fgColor: { argb: "FFCCCCCC" },
+          }
+        })
+      }
+    }
+  })
+
+  // ────────────── (핵심) 그룹 헤더 병합 로직 ──────────────
+  if (useGroupHeader) {
+    // row1 (인덱스 1) = 그룹명 행
+    // row2 (인덱스 2) = 실제 컬럼 헤더 행
+    const groupRowIndex = 1
+    const groupRow = worksheet.getRow(groupRowIndex)
+
+    // 같은 값이 연속되는 열을 병합
+    let start = 1 // 시작 열 인덱스 (1-based)
+    let prevValue = groupRow.getCell(start).value
+
+    for (let c = 2; c <= columns.length; c++) {
+      const cellVal = groupRow.getCell(c).value
+      if (cellVal !== prevValue) {
+        // 이전 그룹명이 빈 문자열이 아니면 병합
+        if (prevValue && prevValue.toString().trim() !== "") {
+          worksheet.mergeCells(
+            groupRowIndex,
+            start,
+            groupRowIndex,
+            c - 1
+          )
+        }
+        // 다음 구간 시작
+        start = c
+        prevValue = cellVal
+      }
+    }
+
+    // 마지막 구간까지 병합
+    if (prevValue && prevValue.toString().trim() !== "") {
+      worksheet.mergeCells(
+        groupRowIndex,
+        start,
+        groupRowIndex,
+        columns.length
+      )
+    }
+  }
+
+  // ────────────── (추가) 칼럼 너비 자동 조정 ──────────────
+  maxColumnLengths.forEach((len, idx) => {
+    // 최소 너비 10, +2 여백
+    worksheet.getColumn(idx + 1).width = Math.max(len + 2, 10)
+  })
+
+  // ────────────── 최종 파일 다운로드 ──────────────
+  const buffer = await workbook.xlsx.writeBuffer()
+  const blob = new Blob([buffer], {
+    type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+  })
+  const url = URL.createObjectURL(blob)
+  const link = document.createElement("a")
+  link.href = url
+  link.download = `${filename}.xlsx`
+  link.click()
+  URL.revokeObjectURL(url)
+}
\ No newline at end of file
diff --git a/lib/export_all.ts b/lib/export_all.ts
new file mode 100644
index 00000000..6f925fbc
--- /dev/null
+++ b/lib/export_all.ts
@@ -0,0 +1,251 @@
+import { type Table } from "@tanstack/react-table"
+import ExcelJS from "exceljs"
+
+/**
+ * `exportTableToExcel`:
+ * - filename: 다운로드할 엑셀 파일 이름(확장자 제외)
+ * - onlySelected: 선택된 행만 내보낼지 여부
+ * - excludeColumns: 제외할 column id들의 배열 (e.g. ["select", "actions"])
+ * - useGroupHeader: 그룹화 헤더를 사용할지 여부 (기본 false)
+ * - allPages: true일 경우, 페이징 상관없이 모든 행을 내보냄
+ *
+ * 추가:
+ * - i18n: (key: string) => string | undefined
+ *    => excelHeader나 group 값이 'myKey'처럼 i18n 키라면 이 함수를 통해 번역 문자열 반환
+ * - customHeaders: { [colId: string]: string }
+ *    => 특정 col.id에 대해 강제로 헤더를 지정하고 싶을 때 사용
+ */
+export async function exportTableToExcel<TData>(
+  table: Table<TData>,
+  {
+    filename = "table",
+    onlySelected = false,
+    excludeColumns = [],
+    useGroupHeader = true,
+    allPages = false,
+    /** 아래 2개가 새로 추가된 옵션 */
+    i18n,
+    customHeaders = {},
+  }: {
+    filename?: string
+    onlySelected?: boolean
+    excludeColumns?: string[]
+    useGroupHeader?: boolean
+    allPages?: boolean
+    /** excelHeader나 group 값이 i18n 키일 경우, 해당 함수를 통해 번역 */
+    i18n?: (key: string) => string
+    /** 특정 col.id에 대한 강제 헤더 지정 */
+    customHeaders?: Record<string, string>
+  } = {}
+): Promise<void> {
+  // 1) tanstack에서 실제 사용 중인 leaf columns 가져오기
+  const allColumns = table.getAllLeafColumns()
+
+  // 2) excludeColumns 목록에 들어있는 col.id 제거
+  const columns = allColumns.filter(
+    (col) => !excludeColumns.includes(col.id)
+  )
+
+  // 실제로 기록할 sheetData(배열 형식)
+  let sheetData: any[][]
+
+  // ────────────── 2줄 헤더 (group + excelHeader) vs 1줄 헤더 ──────────────
+  if (useGroupHeader) {
+    // 2줄 헤더 (row1 = 그룹명, row2 = 컬럼헤더)
+    const row1: string[] = []
+    const row2: string[] = []
+
+    columns.forEach((col) => {
+      const meta = col.columnDef.meta as any
+      // 1) group (그룹헤더)
+      const groupKey = meta?.group
+      let groupLabel = groupKey ?? ""
+      if (groupLabel && i18n) {
+        // groupKey가 i18n 키라면 번역 적용
+        const maybeTranslated = i18n(groupLabel)
+        if (maybeTranslated) {
+          groupLabel = maybeTranslated
+        }
+      }
+      row1.push(groupLabel)
+
+      // 2) excelHeader (실제 컬럼 헤더)
+      // (a) customHeaders[col.id]가 우선
+      if (customHeaders[col.id]) {
+        row2.push(customHeaders[col.id])
+      } else {
+        // (b) meta?.excelHeader가 있으면 그것을 사용
+        const maybeExcelHeader = meta?.excelHeader
+        if (typeof maybeExcelHeader === "string") {
+          // i18n 함수가 있다면 i18n 키로 가정하고 번역 시도
+          if (i18n) {
+            const maybeTranslated = i18n(maybeExcelHeader)
+            row2.push(maybeTranslated || maybeExcelHeader)
+          } else {
+            row2.push(maybeExcelHeader)
+          }
+        } else {
+          // 모두 없으면 col.id 사용
+          row2.push(col.id)
+        }
+      }
+    })
+
+    // ─────────────────────────────────────────────────
+    // 필요한 데이터 행 추출
+    const rowModel = onlySelected
+      ? table.getFilteredSelectedRowModel()
+      : allPages
+      ? table.getPrePaginationRowModel()
+      : table.getRowModel()
+
+    const dataRows = rowModel.rows.map((row) =>
+      columns.map((col) => {
+        const val = row.getValue(col.id)
+        if (val == null) return ""
+        return typeof val === "object" ? JSON.stringify(val) : val
+      })
+    )
+
+    // 최종 sheetData: [ [그룹들...], [헤더들...], ...데이터들 ]
+    sheetData = [row1, row2, ...dataRows]
+
+  } else {
+    // ────────────── 기존 1줄 헤더 ──────────────
+    const headerRow = columns.map((col) => {
+      const meta = col.columnDef.meta as any
+
+      // 1) customHeaders[col.id]가 우선
+      if (customHeaders[col.id]) {
+        return customHeaders[col.id]
+      }
+
+      // 2) meta?.excelHeader가 문자열이면
+      if (typeof meta?.excelHeader === "string") {
+        if (i18n) {
+          const maybeTranslated = i18n(meta.excelHeader)
+          return maybeTranslated || meta.excelHeader
+        } else {
+          return meta.excelHeader
+        }
+      }
+
+      // 3) 모든 것이 없으면 col.id
+      return col.id
+    })
+
+    // 데이터
+    const rowModel = onlySelected
+      ? table.getFilteredSelectedRowModel()
+      : allPages
+      ? table.getPrePaginationRowModel()
+      : table.getRowModel()
+
+    const dataRows = rowModel.rows.map((row) =>
+      columns.map((col) => {
+        const val = row.getValue(col.id)
+        if (val == null) return ""
+        return typeof val === "object" ? JSON.stringify(val) : val
+      })
+    )
+
+    sheetData = [headerRow, ...dataRows]
+  }
+
+  // ────────────── ExcelJS 워크북/시트 생성 ──────────────
+  const workbook = new ExcelJS.Workbook()
+  const worksheet = workbook.addWorksheet("Sheet1")
+
+  // (추가) 칼럼별 최대 길이 추적
+  const maxColumnLengths = columns.map(() => 0)
+  sheetData.forEach((row) => {
+    row.forEach((cellValue, colIdx) => {
+      const cellText = cellValue?.toString() ?? ""
+      if (cellText.length > maxColumnLengths[colIdx]) {
+        maxColumnLengths[colIdx] = cellText.length
+      }
+    })
+  })
+
+  // 시트에 데이터 추가 + 헤더 스타일
+  sheetData.forEach((arr, idx) => {
+    const row = worksheet.addRow(arr)
+
+    // 헤더 스타일 적용
+    if (useGroupHeader) {
+      // 2줄 헤더
+      if (idx < 2) {
+        row.font = { bold: true }
+        row.alignment = { horizontal: "center" }
+        row.eachCell((cell) => {
+          cell.fill = {
+            type: "pattern",
+            pattern: "solid",
+            fgColor: { argb: "FFCCCCCC" },
+          }
+        })
+      }
+    } else {
+      // 1줄 헤더
+      if (idx === 0) {
+        row.font = { bold: true }
+        row.alignment = { horizontal: "center" }
+        row.eachCell((cell) => {
+          cell.fill = {
+            type: "pattern",
+            pattern: "solid",
+            fgColor: { argb: "FFCCCCCC" },
+          }
+        })
+      }
+    }
+  })
+
+  // ────────────── (핵심) 그룹 헤더 병합 로직 ──────────────
+  if (useGroupHeader) {
+    // row1 (인덱스 1) = 그룹명 행
+    // row2 (인덱스 2) = 실제 컬럼 헤더 행
+    const groupRowIndex = 1
+    const groupRow = worksheet.getRow(groupRowIndex)
+
+    // 같은 값이 연속되는 열을 병합
+    let start = 1 // 시작 열 인덱스 (1-based)
+    let prevValue = groupRow.getCell(start).value
+
+    for (let c = 2; c <= columns.length; c++) {
+      const cellVal = groupRow.getCell(c).value
+      if (cellVal !== prevValue) {
+        // 이전 그룹명이 빈 문자열이 아니면 병합
+        if (prevValue && prevValue.toString().trim() !== "") {
+          worksheet.mergeCells(groupRowIndex, start, groupRowIndex, c - 1)
+        }
+        // 다음 구간 시작
+        start = c
+        prevValue = cellVal
+      }
+    }
+
+    // 마지막 구간까지 병합
+    if (prevValue && prevValue.toString().trim() !== "") {
+      worksheet.mergeCells(groupRowIndex, start, groupRowIndex, columns.length)
+    }
+  }
+
+  // ────────────── (추가) 칼럼 너비 자동 조정 ──────────────
+  maxColumnLengths.forEach((len, idx) => {
+    // 최소 너비 10, +2 여백
+    worksheet.getColumn(idx + 1).width = Math.max(len + 2, 10)
+  })
+
+  // ────────────── 최종 파일 다운로드 ──────────────
+  const buffer = await workbook.xlsx.writeBuffer()
+  const blob = new Blob([buffer], {
+    type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+  })
+  const url = URL.createObjectURL(blob)
+  const link = document.createElement("a")
+  link.href = url
+  link.download = `${filename}.xlsx`
+  link.click()
+  URL.revokeObjectURL(url)
+}
\ No newline at end of file
diff --git a/lib/filter-columns.ts b/lib/filter-columns.ts
new file mode 100644
index 00000000..4b995925
--- /dev/null
+++ b/lib/filter-columns.ts
@@ -0,0 +1,193 @@
+import { isEmpty, isNotEmpty } from "@/db/utils"
+import type { Filter, JoinOperator } from "@/types/table"
+import { addDays, endOfDay, startOfDay } from "date-fns"
+import {
+  and,
+  eq,
+  gt,
+  gte,
+  ilike,
+  inArray,
+  lt,
+  lte,
+  ne,
+  notIlike,
+  notInArray,
+  or,
+  type AnyColumn,
+  type SQL,
+  type Table,
+} from "drizzle-orm"
+import type { PgTable, PgView } from "drizzle-orm/pg-core"
+
+type TableOrView = PgTable | PgView<any>
+
+/**
+ * Construct SQL conditions based on the provided filters for a specific table.
+ *
+ * This function takes a table and an array of filters, and returns a SQL
+ * expression that represents the logical combination of these conditions. The conditions
+ * are combined using the specified join operator (either 'AND' or 'OR'), which is determined
+ * by the first filter's joinOperator property.
+ *
+ * Each filter can specify various operators (e.g., equality, inequality,
+ * comparison for numbers and dates, etc.) and the function will generate the appropriate
+ * SQL expressions based on the filter's type and value.
+ *
+ * @param table - The table to apply the filters on.
+ * @param filters - An array of filters to be applied to the table.
+ * @param joinOperator - The join operator to use for combining the filters.
+ * @returns A SQL expression representing the combined filters, or undefined if no valid
+ * filters are found.
+ */
+
+export function filterColumns<T extends TableOrView>({
+  table,
+  filters,
+  joinOperator,
+}: {
+  table: T
+  filters: Filter<T>[]
+  joinOperator: JoinOperator
+}): SQL | undefined {
+
+  const joinFn = joinOperator === "and" ? and : or
+
+  const conditions = filters.map((filter) => {
+    const column = getColumn(table, filter.id)
+
+    switch (filter.operator) {
+      case "eq":
+        if (Array.isArray(filter.value)) {
+          return inArray(column, filter.value)
+        } else if (
+          column.dataType === "boolean" &&
+          typeof filter.value === "string"
+        ) {
+          return eq(column, filter.value === "true")
+        } else if (filter.type === "date") {
+          const date = new Date(filter.value)
+          const start = startOfDay(date)
+          const end = endOfDay(date)
+          return and(gte(column, start), lte(column, end))
+        } else {
+          return eq(column, filter.value)
+        }
+      case "ne":
+        if (Array.isArray(filter.value)) {
+          return notInArray(column, filter.value)
+        } else if (column.dataType === "boolean") {
+          return ne(column, filter.value === "true")
+        } else if (filter.type === "date") {
+          const date = new Date(filter.value)
+          const start = startOfDay(date)
+          const end = endOfDay(date)
+          return or(lt(column, start), gt(column, end))
+        } else {
+          return ne(column, filter.value)
+        }
+      case "iLike":
+        return filter.type === "text" && typeof filter.value === "string"
+          ? ilike(column, `%${filter.value}%`)
+          : undefined
+      case "notILike":
+        return filter.type === "text" && typeof filter.value === "string"
+          ? notIlike(column, `%${filter.value}%`)
+          : undefined
+      case "lt":
+        return filter.type === "number"
+          ? lt(column, filter.value)
+          : filter.type === "date" && typeof filter.value === "string"
+            ? lt(column, endOfDay(new Date(filter.value)))
+            : undefined
+      case "lte":
+        return filter.type === "number"
+          ? lte(column, filter.value)
+          : filter.type === "date" && typeof filter.value === "string"
+            ? lte(column, endOfDay(new Date(filter.value)))
+            : undefined
+      case "gt":
+        return filter.type === "number"
+          ? gt(column, filter.value)
+          : filter.type === "date" && typeof filter.value === "string"
+            ? gt(column, startOfDay(new Date(filter.value)))
+            : undefined
+      case "gte":
+        return filter.type === "number"
+          ? gte(column, filter.value)
+          : filter.type === "date" && typeof filter.value === "string"
+            ? gte(column, startOfDay(new Date(filter.value)))
+            : undefined
+      case "isBetween":
+        return filter.type === "date" &&
+          Array.isArray(filter.value) &&
+          filter.value.length === 2
+          ? and(
+              filter.value[0]
+                ? gte(column, startOfDay(new Date(filter.value[0])))
+                : undefined,
+              filter.value[1]
+                ? lte(column, endOfDay(new Date(filter.value[1])))
+                : undefined
+            )
+          : undefined
+      case "isRelativeToToday":
+        if (filter.type === "date" && typeof filter.value === "string") {
+          const today = new Date()
+          const [amount, unit] = filter.value.split(" ") ?? []
+          let startDate: Date
+          let endDate: Date
+
+          if (!amount || !unit) return undefined
+
+          switch (unit) {
+            case "days":
+              startDate = startOfDay(addDays(today, parseInt(amount)))
+              endDate = endOfDay(startDate)
+              break
+            case "weeks":
+              startDate = startOfDay(addDays(today, parseInt(amount) * 7))
+              endDate = endOfDay(addDays(startDate, 6))
+              break
+            case "months":
+              startDate = startOfDay(addDays(today, parseInt(amount) * 30))
+              endDate = endOfDay(addDays(startDate, 29))
+              break
+            default:
+              return undefined
+          }
+
+          return and(gte(column, startDate), lte(column, endDate))
+        }
+        return undefined
+      case "isEmpty":
+        return isEmpty(column)
+      case "isNotEmpty":
+        return isNotEmpty(column)
+
+      default:
+        throw new Error(`Unsupported operator: ${filter.operator}`)
+    }
+  })
+
+  const validConditions = conditions.filter(
+    (condition) => condition !== undefined
+  )
+
+
+  return validConditions.length > 0 ? joinFn(...validConditions) : undefined
+}
+
+/**
+ * Get table column.
+ * @param table The table to get the column from.
+ * @param columnKey The key of the column to retrieve from the table.
+ * @returns The column corresponding to the provided key.
+ */
+
+export function getColumn<T extends TableOrView>(
+  table: T,
+  columnKey: keyof T
+): AnyColumn {
+  return table[columnKey] as AnyColumn
+}
\ No newline at end of file
diff --git a/lib/fonts.ts b/lib/fonts.ts
new file mode 100644
index 00000000..c5e8958d
--- /dev/null
+++ b/lib/fonts.ts
@@ -0,0 +1,5 @@
+import { GeistMono } from "geist/font/mono"
+import { GeistSans } from "geist/font/sans"
+
+export const fontSans = GeistSans
+export const fontMono = GeistMono
diff --git a/lib/form-list/repository.ts b/lib/form-list/repository.ts
new file mode 100644
index 00000000..ced320db
--- /dev/null
+++ b/lib/form-list/repository.ts
@@ -0,0 +1,46 @@
+import db from "@/db/db";
+import { Item, items } from "@/db/schema/items";
+import { tagTypeClassFormMappings } from "@/db/schema/vendorData";
+import {
+  eq,
+  inArray,
+  not,
+  asc,
+  desc,
+  and,
+  ilike,
+  gte,
+  lte,
+  count,
+  gt,
+} from "drizzle-orm";
+import { PgTransaction } from "drizzle-orm/pg-core";
+
+export async function selectFormLists(
+    tx: PgTransaction<any, any, any>,
+    params: {
+      where?: any; // drizzle-orm의 조건식 (and, eq...) 등
+      orderBy?: (ReturnType<typeof asc> | ReturnType<typeof desc>)[];
+      offset?: number;
+      limit?: number;
+    }
+  ) {
+    const { where, orderBy, offset = 0, limit = 10 } = params;
+  
+    return tx
+      .select()
+      .from(tagTypeClassFormMappings)
+      .where(where)
+      .orderBy(...(orderBy ?? []))
+      .offset(offset)
+      .limit(limit);
+  }
+  /** 총 개수 count */
+  export async function countFormLists(
+    tx: PgTransaction<any, any, any>,
+    where?: any
+  ) {
+    const res = await tx.select({ count: count() }).from(tagTypeClassFormMappings).where(where);
+    return res[0]?.count ?? 0;
+  }
+  
\ No newline at end of file
diff --git a/lib/form-list/service.ts b/lib/form-list/service.ts
new file mode 100644
index 00000000..64156cf4
--- /dev/null
+++ b/lib/form-list/service.ts
@@ -0,0 +1,84 @@
+"use server"; // Next.js 서버 액션에서 직접 import하려면 (선택)
+
+import { revalidateTag, unstable_noStore } from "next/cache";
+import  db  from "@/db/db";
+import { unstable_cache } from "@/lib/unstable-cache";
+import { GetFormListsSchema } from "./validation";
+import { filterColumns } from "@/lib/filter-columns";
+import { tagTypeClassFormMappings } from "@/db/schema/vendorData";
+import { asc, desc, ilike, inArray, and, gte, lte, not, or } from "drizzle-orm";
+import { countFormLists, selectFormLists } from "./repository";
+
+export async function getFormLists(input: GetFormListsSchema) {
+
+    return unstable_cache(
+      async () => {
+        try {
+          const offset = (input.page - 1) * input.perPage;
+  
+          // const advancedTable = input.flags.includes("advancedTable");
+          const advancedTable = true;
+  
+          // advancedTable 모드면 filterColumns()로 where 절 구성
+          const advancedWhere = filterColumns({
+            table: tagTypeClassFormMappings,
+            filters: input.filters,
+            joinOperator: input.joinOperator,
+          });
+  
+  
+          let globalWhere
+          if (input.search) {
+            const s = `%${input.search}%`
+            globalWhere = or(ilike(tagTypeClassFormMappings.formCode, s), ilike(tagTypeClassFormMappings.formName, s)
+            , ilike(tagTypeClassFormMappings.tagTypeLabel, s) , ilike(tagTypeClassFormMappings.classLabel, s)
+          )
+            // 필요시 여러 칼럼 OR조건 (status, priority, etc)
+          }
+  
+          const finalWhere = and(
+            // advancedWhere or your existing conditions
+            advancedWhere,
+            globalWhere // and()함수로 결합 or or() 등으로 결합
+          )
+  
+  
+          // 아니면 ilike, inArray, gte 등으로 where 절 구성
+          const where = finalWhere
+          
+  
+          const orderBy =
+            input.sort.length > 0
+              ? input.sort.map((item) =>
+                  item.desc ? desc(tagTypeClassFormMappings[item.id]) : asc(tagTypeClassFormMappings[item.id])
+                )
+              : [asc(tagTypeClassFormMappings.createdAt)];
+  
+          // 트랜잭션 내부에서 Repository 호출
+          const { data, total } = await db.transaction(async (tx) => {
+            const data = await selectFormLists(tx, {
+              where,
+              orderBy,
+              offset,
+              limit: input.perPage,
+            });
+  
+            const total = await countFormLists(tx, where);
+            return { data, total };
+          });
+  
+          const pageCount = Math.ceil(total / input.perPage);
+  
+          return { data, pageCount };
+        } catch (err) {
+          // 에러 발생 시 디폴트
+          return { data: [], pageCount: 0 };
+        }
+      },
+      [JSON.stringify(input)], // 캐싱 키
+      {
+        revalidate: 3600,
+        tags: ["form-lists"], // revalidateTag("items") 호출 시 무효화
+      }
+    )();
+  }
\ No newline at end of file
diff --git a/lib/form-list/table/feature-flags-provider.tsx b/lib/form-list/table/feature-flags-provider.tsx
new file mode 100644
index 00000000..81131894
--- /dev/null
+++ b/lib/form-list/table/feature-flags-provider.tsx
@@ -0,0 +1,108 @@
+"use client"
+
+import * as React from "react"
+import { useQueryState } from "nuqs"
+
+import { dataTableConfig, type DataTableConfig } from "@/config/data-table"
+import { cn } from "@/lib/utils"
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+
+type FeatureFlagValue = DataTableConfig["featureFlags"][number]["value"]
+
+interface FeatureFlagsContextProps {
+  featureFlags: FeatureFlagValue[]
+  setFeatureFlags: (value: FeatureFlagValue[]) => void
+}
+
+const FeatureFlagsContext = React.createContext<FeatureFlagsContextProps>({
+  featureFlags: [],
+  setFeatureFlags: () => {},
+})
+
+export function useFeatureFlags() {
+  const context = React.useContext(FeatureFlagsContext)
+  if (!context) {
+    throw new Error(
+      "useFeatureFlags must be used within a FeatureFlagsProvider"
+    )
+  }
+  return context
+}
+
+interface FeatureFlagsProviderProps {
+  children: React.ReactNode
+}
+
+export function FeatureFlagsProvider({ children }: FeatureFlagsProviderProps) {
+  const [featureFlags, setFeatureFlags] = useQueryState<FeatureFlagValue[]>(
+    "flags",
+    {
+      defaultValue: [],
+      parse: (value) => value.split(",") as FeatureFlagValue[],
+      serialize: (value) => value.join(","),
+      eq: (a, b) =>
+        a.length === b.length && a.every((value, index) => value === b[index]),
+      clearOnDefault: true,
+      shallow: false,
+    }
+  )
+
+  return (
+    <FeatureFlagsContext.Provider
+      value={{
+        featureFlags,
+        setFeatureFlags: (value) => void setFeatureFlags(value),
+      }}
+    >
+      <div className="w-full overflow-x-auto">
+        <ToggleGroup
+          type="multiple"
+          variant="outline"
+          size="sm"
+          value={featureFlags}
+          onValueChange={(value: FeatureFlagValue[]) => setFeatureFlags(value)}
+          className="w-fit gap-0"
+        >
+          {dataTableConfig.featureFlags.map((flag, index) => (
+            <Tooltip key={flag.value}>
+              <ToggleGroupItem
+                value={flag.value}
+                className={cn(
+                  "gap-2 whitespace-nowrap rounded-none px-3 text-xs data-[state=on]:bg-accent/70 data-[state=on]:hover:bg-accent/90",
+                  {
+                    "rounded-l-sm border-r-0": index === 0,
+                    "rounded-r-sm":
+                      index === dataTableConfig.featureFlags.length - 1,
+                  }
+                )}
+                asChild
+              >
+                <TooltipTrigger>
+                  <flag.icon className="size-3.5 shrink-0" aria-hidden="true" />
+                  {flag.label}
+                </TooltipTrigger>
+              </ToggleGroupItem>
+              <TooltipContent
+                align="start"
+                side="bottom"
+                sideOffset={6}
+                className="flex max-w-60 flex-col space-y-1.5 border bg-background py-2 font-semibold text-foreground"
+              >
+                <div>{flag.tooltipTitle}</div>
+                <div className="text-xs text-muted-foreground">
+                  {flag.tooltipDescription}
+                </div>
+              </TooltipContent>
+            </Tooltip>
+          ))}
+        </ToggleGroup>
+      </div>
+      {children}
+    </FeatureFlagsContext.Provider>
+  )
+}
diff --git a/lib/form-list/table/formLists-table-columns.tsx b/lib/form-list/table/formLists-table-columns.tsx
new file mode 100644
index 00000000..f638c4df
--- /dev/null
+++ b/lib/form-list/table/formLists-table-columns.tsx
@@ -0,0 +1,132 @@
+"use client"
+
+import * as React from "react"
+import { type DataTableRowAction } from "@/types/table"
+import { type ColumnDef } from "@tanstack/react-table"
+import { InfoIcon } from "lucide-react"
+
+import { formatDate } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Checkbox } from "@/components/ui/checkbox"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+
+import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header"
+import { formListsColumnsConfig } from "@/config/formListsColumnsConfig"
+import { TagTypeClassFormMappings } from "@/db/schema/vendorData"
+
+interface GetColumnsProps {
+  setRowAction: React.Dispatch<React.SetStateAction<DataTableRowAction<TagTypeClassFormMappings> | null>>
+}
+
+/**
+ * tanstack table 컬럼 정의 (중첩 헤더 버전)
+ */
+export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<TagTypeClassFormMappings>[] {
+  // ----------------------------------------------------------------
+  // 1) select 컬럼 (체크박스)
+  // ----------------------------------------------------------------
+
+
+  // ----------------------------------------------------------------
+  // 2) actions 컬럼 (단일 버튼 - Meta Info 바로 보기)
+  // ----------------------------------------------------------------
+  const actionsColumn: ColumnDef<TagTypeClassFormMappings> = {
+    id: "actions",
+    enableHiding: false,
+    cell: function Cell({ row }) {
+      return (
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={() => setRowAction({ row, type: "items" })}
+              >
+                <InfoIcon className="h-4 w-4" aria-hidden="true" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>
+              View Meta Info
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      )
+    },
+    size: 40,
+  }
+
+  // ----------------------------------------------------------------
+  // 3) 일반 컬럼들을 "그룹"별로 묶어 중첩 columns 생성
+  // ----------------------------------------------------------------
+  // 3-1) groupMap: { [groupName]: ColumnDef<TagTypeClassFormMappings>[] }
+  const groupMap: Record<string, ColumnDef<TagTypeClassFormMappings>[]> = {}
+
+  formListsColumnsConfig.forEach((cfg) => {
+    // 만약 group가 없으면 "_noGroup" 처리
+    const groupName = cfg.group || "_noGroup"
+
+    if (!groupMap[groupName]) {
+      groupMap[groupName] = []
+    }
+
+    // child column 정의
+    const childCol: ColumnDef<TagTypeClassFormMappings> = {
+      accessorKey: cfg.id,
+      enableResizing: true,
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title={cfg.label} />
+      ),
+      meta: {
+        excelHeader: cfg.excelHeader,
+        group: cfg.group,
+        type: cfg.type,
+      },
+      cell: ({ row, cell }) => {
+ 
+        if (cfg.id === "createdAt"||cfg.id === "updatedAt") {
+          const dateVal = cell.getValue() as Date
+          return formatDate(dateVal)
+        }
+
+        return row.getValue(cfg.id) ?? ""
+      },
+    }
+
+    groupMap[groupName].push(childCol)
+  })
+
+  // ----------------------------------------------------------------
+  // 3-2) groupMap에서 실제 상위 컬럼(그룹)을 만들기
+  // ----------------------------------------------------------------
+  const nestedColumns: ColumnDef<TagTypeClassFormMappings>[] = []
+
+  // 순서를 고정하고 싶다면 group 순서를 미리 정의하거나 sort해야 함
+  // 여기서는 그냥 Object.entries 순서
+  Object.entries(groupMap).forEach(([groupName, colDefs]) => {
+    if (groupName === "_noGroup") {
+      // 그룹 없음 → 그냥 최상위 레벨 컬럼
+      nestedColumns.push(...colDefs)
+    } else {
+      // 상위 컬럼
+      nestedColumns.push({
+        id: groupName,
+        header: groupName, // "Basic Info", "Metadata" 등
+        columns: colDefs,
+      })
+    }
+  })
+
+  // ----------------------------------------------------------------
+  // 4) 최종 컬럼 배열: select, nestedColumns, actions
+  // ----------------------------------------------------------------
+  return [
+    ...nestedColumns,
+    actionsColumn,
+  ]
+}
\ No newline at end of file
diff --git a/lib/form-list/table/formLists-table-toolbar-actions.tsx b/lib/form-list/table/formLists-table-toolbar-actions.tsx
new file mode 100644
index 00000000..346a3980
--- /dev/null
+++ b/lib/form-list/table/formLists-table-toolbar-actions.tsx
@@ -0,0 +1,53 @@
+"use client"
+
+import * as React from "react"
+import { type Table } from "@tanstack/react-table"
+import { Download, RefreshCcw, Upload } from "lucide-react"
+import { toast } from "sonner"
+
+import { exportTableToExcel } from "@/lib/export"
+import { Button } from "@/components/ui/button"
+import { TagTypeClassFormMappings } from "@/db/schema/vendorData"
+
+
+
+interface ItemsTableToolbarActionsProps {
+  table: Table<TagTypeClassFormMappings>
+}
+
+export function FormListsTableToolbarActions({ table }: ItemsTableToolbarActionsProps) {
+  // 파일 input을 숨기고, 버튼 클릭 시 참조해 클릭하는 방식
+  const fileInputRef = React.useRef<HTMLInputElement>(null)
+
+
+
+  return (
+    <div className="flex items-center gap-2">
+      {/** 4) Export 버튼 */}
+      <Button
+        variant="samsung"
+        size="sm"
+        className="gap-2"
+      >
+        <RefreshCcw className="size-4" aria-hidden="true" />
+        <span className="hidden sm:inline">Get Forms</span>
+      </Button>
+
+      {/** 4) Export 버튼 */}
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={() =>
+          exportTableToExcel(table, {
+            filename: "tasks",
+            excludeColumns: ["select", "actions"],
+          })
+        }
+        className="gap-2"
+      >
+        <Download className="size-4" aria-hidden="true" />
+        <span className="hidden sm:inline">Export</span>
+      </Button>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/lib/form-list/table/formLists-table.tsx b/lib/form-list/table/formLists-table.tsx
new file mode 100644
index 00000000..be252655
--- /dev/null
+++ b/lib/form-list/table/formLists-table.tsx
@@ -0,0 +1,151 @@
+"use client"
+
+import * as React from "react"
+import type {
+  DataTableAdvancedFilterField,
+  DataTableFilterField,
+  DataTableRowAction,
+} from "@/types/table"
+
+import { useDataTable } from "@/hooks/use-data-table"
+import { DataTable } from "@/components/data-table/data-table"
+import { DataTableAdvancedToolbar } from "@/components/data-table/data-table-advanced-toolbar"
+import { useFeatureFlags } from "./feature-flags-provider"
+
+import { TagTypeClassFormMappings } from "@/db/schema/vendorData"
+import { getFormLists } from "../service"
+import { getColumns } from "./formLists-table-columns"
+import { FormListsTableToolbarActions } from "./formLists-table-toolbar-actions"
+import { ViewMetas } from "./meta-sheet"
+
+interface ItemsTableProps {
+  promises: Promise<
+    [
+      Awaited<ReturnType<typeof getFormLists>>,
+    ]
+  >
+}
+
+export function FormListsTable({ promises }: ItemsTableProps) {
+  const { featureFlags } = useFeatureFlags()
+
+  const [{ data, pageCount }] =
+    React.use(promises)
+
+
+  const [rowAction, setRowAction] =
+    React.useState<DataTableRowAction<TagTypeClassFormMappings> | null>(null)
+
+  const columns = React.useMemo(
+    () => getColumns({ setRowAction }),
+    [setRowAction]
+  )
+
+  /**
+   * This component can render either a faceted filter or a search filter based on the `options` prop.
+   *
+   * @prop options - An array of objects, each representing a filter option. If provided, a faceted filter is rendered. If not, a search filter is rendered.
+   *
+   * Each `option` object has the following properties:
+   * @prop {string} label - The label for the filter option.
+   * @prop {string} value - The value for the filter option.
+   * @prop {React.ReactNode} [icon] - An optional icon to display next to the label.
+   * @prop {boolean} [withCount] - An optional boolean to display the count of the filter option.
+   */
+  const filterFields: DataTableFilterField<TagTypeClassFormMappings>[] = [
+
+   
+  ]
+
+  /**
+   * Advanced filter fields for the data table.
+   * These fields provide more complex filtering options compared to the regular filterFields.
+   *
+   * Key differences from regular filterFields:
+   * 1. More field types: Includes 'text', 'multi-select', 'date', and 'boolean'.
+   * 2. Enhanced flexibility: Allows for more precise and varied filtering options.
+   * 3. Used with DataTableAdvancedToolbar: Enables a more sophisticated filtering UI.
+   * 4. Date and boolean types: Adds support for filtering by date ranges and boolean values.
+   */
+  const advancedFilterFields: DataTableAdvancedFilterField<TagTypeClassFormMappings>[] = [
+    {
+      id: "formCode",
+      label: "Form Code",
+      type: "text",
+
+    },
+    {
+      id: "formName",
+      label: "Form Name",
+      type: "text",
+     
+    },
+    {
+      id: "tagTypeLabel",
+      label: "Tag Type",
+      type: "text",
+  
+    },
+    {
+      id: "classLabel",
+      label: "Class",
+      type: "text",
+ 
+    },
+  
+    {
+      id: "createdAt",
+      label: "Created At",
+      type: "date",
+
+    },
+    {
+      id: "updatedAt",
+      label: "Updated At",
+      type: "date",
+
+    },
+  ]
+
+
+  const { table } = useDataTable({
+    data,
+    columns,
+    pageCount,
+    filterFields,
+    enablePinning: true,
+    enableAdvancedFilter: true,
+    initialState: {
+      sorting: [{ id: "createdAt", desc: true }],
+      columnPinning: { right: ["actions"] },
+    },
+    getRowId: (originalRow) => String(originalRow.id),
+    shallow: false,
+    clearOnDefault: true,
+  })
+
+  return (
+    <>
+      <DataTable
+        table={table}
+
+      >
+
+        <DataTableAdvancedToolbar
+          table={table}
+          filterFields={advancedFilterFields}
+          shallow={false}
+        >
+          <FormListsTableToolbarActions table={table} />
+        </DataTableAdvancedToolbar>
+
+      </DataTable>
+      <ViewMetas
+        open={rowAction?.type === "items"}
+        onOpenChange={() => setRowAction(null)}
+        form={rowAction?.row.original ?? null}
+      />
+
+    </>
+  )
+}
diff --git a/lib/form-list/table/meta-sheet.tsx b/lib/form-list/table/meta-sheet.tsx
new file mode 100644
index 00000000..155e4f5a
--- /dev/null
+++ b/lib/form-list/table/meta-sheet.tsx
@@ -0,0 +1,245 @@
+"use client"
+
+import * as React from "react"
+import { useMemo } from "react"
+import { Badge } from "@/components/ui/badge"
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle
+} from "@/components/ui/sheet"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow
+} from "@/components/ui/table"
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger
+} from "@/components/ui/tabs"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle
+} from "@/components/ui/card"
+import type { TagTypeClassFormMappings } from "@/db/schema/vendorData" // or your actual type
+import { fetchFormMetadata, FormColumn } from "@/lib/forms/services"
+
+
+interface ViewMetasProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  form: TagTypeClassFormMappings | null
+}
+
+export function ViewMetas({ open, onOpenChange, form }: ViewMetasProps) {
+  // metadata & loading
+  const [metadata, setMetadata] = React.useState<{
+    formName: string
+    formCode: string
+    columns: FormColumn[]
+  } | null>(null)
+  const [loading, setLoading] = React.useState(false)
+
+  // Group columns by type for better organization
+  const groupedColumns = useMemo(() => {
+    if (!metadata?.columns) return {}
+    
+    return metadata.columns.reduce((acc, column) => {
+      const type = column.type
+      if (!acc[type]) {
+        acc[type] = []
+      }
+      acc[type].push(column)
+      return acc
+    }, {} as Record<string, FormColumn[]>)
+  }, [metadata])
+
+  // Types for the tabs
+  const columnTypes = useMemo(() => {
+    return Object.keys(groupedColumns)
+  }, [groupedColumns])
+
+  // Fetch metadata when form changes and dialog is opened
+  React.useEffect(() => {
+    async function fetchMeta() {
+      if (!form || !open) return
+      
+      setLoading(true)
+      try {
+        // 서버 액션 호출
+        const metaData = await fetchFormMetadata(form.formCode)
+        if (metaData) {
+          setMetadata(metaData)
+        } else {
+          setMetadata(null)
+        }
+      } catch (error) {
+        console.error("Error fetching form metadata:", error)
+        setMetadata(null)
+      } finally {
+        setLoading(false)
+      }
+    }
+    
+    fetchMeta()
+  }, [form, open])
+
+  if (!form) return null
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent className="sm:max-w-xl md:max-w-3xl lg:max-w-4xl xl:max-w-5xl overflow-y-auto">
+
+          <SheetHeader className="mb-4">
+            <SheetTitle>Form Metadata</SheetTitle>
+            <SheetDescription>
+            </SheetDescription>
+              {loading ? (
+                <div className="text-muted-foreground">Loading metadata...</div>
+              ) : metadata ? (
+                <div className="flex flex-col gap-1">
+                  <div className="flex gap-2 items-center">
+                    <span className="font-semibold">Form Code:</span>
+                    <Badge variant="outline">{metadata.formCode}</Badge>
+                  </div>
+                  <div className="flex gap-2 items-center">
+                    <span className="font-semibold">Form Name:</span>
+                    <span>{metadata.formName}</span>
+                  </div>
+                </div>
+              ) : (
+                <div className="text-sm text-muted-foreground">
+                  No metadata found for form code: {form.formCode}
+                </div>
+              )}
+
+          </SheetHeader>
+
+          {loading ? (
+            <div className="flex items-center justify-center h-40">
+              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
+            </div>
+          ) : metadata ? (
+            <Tabs defaultValue="all" className="mt-4">
+              <TabsList className="mb-4 flex-wrap">
+                <TabsTrigger value="all">All ({metadata.columns.length})</TabsTrigger>
+                {columnTypes.map((type) => (
+                  <TabsTrigger key={type} value={type}>
+                    {type} ({groupedColumns[type].length})
+                  </TabsTrigger>
+                ))}
+              </TabsList>
+
+              <TabsContent value="all">
+                <Card>
+                  <CardHeader>
+                    <CardTitle>All Fields</CardTitle>
+                    <CardDescription>All form fields and their properties</CardDescription>
+                  </CardHeader>
+                  <CardContent>
+                    <Table>
+                      <TableHeader>
+                        <TableRow>
+                          <TableHead>Key</TableHead>
+                          <TableHead>Label</TableHead>
+                          <TableHead>Type</TableHead>
+                          <TableHead>Options</TableHead>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {metadata.columns.map((column) => (
+                          <TableRow key={column.key}>
+                            <TableCell className="font-mono text-sm">{column.key}</TableCell>
+                            <TableCell>{column.label}</TableCell>
+                            <TableCell>
+                              <Badge variant="secondary">{column.type}</Badge>
+                            </TableCell>
+                            <TableCell>
+                              {column.options ? (
+                                <div className="flex flex-wrap gap-1">
+                                  {column.options.map((option) => (
+                                    <Badge key={option} variant="outline" className="text-xs">
+                                      {option}
+                                    </Badge>
+                                  ))}
+                                </div>
+                              ) : (
+                                "-"
+                              )}
+                            </TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  </CardContent>
+                </Card>
+              </TabsContent>
+
+              {columnTypes.map((type) => (
+                <TabsContent key={type} value={type}>
+                  <Card>
+                    <CardHeader>
+                      <CardTitle>{type.charAt(0).toUpperCase() + type.slice(1)} Fields</CardTitle>
+                      <CardDescription>Fields with type "{type}"</CardDescription>
+                    </CardHeader>
+                    <CardContent>
+                      <Table>
+                        <TableHeader>
+                          <TableRow>
+                            <TableHead>Key</TableHead>
+                            <TableHead>Label</TableHead>
+                            {type === "select" && <TableHead>Options</TableHead>}
+                          </TableRow>
+                        </TableHeader>
+                        <TableBody>
+                          {groupedColumns[type].map((column) => (
+                            <TableRow key={column.key}>
+                              <TableCell className="font-mono text-sm">{column.key}</TableCell>
+                              <TableCell>{column.label}</TableCell>
+                              {type === "select" && (
+                                <TableCell>
+                                  {column.options ? (
+                                    <div className="flex flex-wrap gap-1">
+                                      {column.options.map((option) => (
+                                        <Badge key={option} variant="outline" className="text-xs">
+                                          {option}
+                                        </Badge>
+                                      ))}
+                                    </div>
+                                  ) : (
+                                    "-"
+                                  )}
+                                </TableCell>
+                              )}
+                            </TableRow>
+                          ))}
+                        </TableBody>
+                      </Table>
+                    </CardContent>
+                  </Card>
+                </TabsContent>
+              ))}
+            </Tabs>
+          ) : (
+            <div className="text-center py-8">
+              <div className="text-lg font-medium">No metadata found</div>
+              <p className="text-muted-foreground mt-2">
+                Could not find metadata for form code: {form.formCode}
+              </p>
+            </div>
+          )}
+    
+      </SheetContent>
+    </Sheet>
+  )
+}
\ No newline at end of file
diff --git a/lib/form-list/validation.ts b/lib/form-list/validation.ts
new file mode 100644
index 00000000..c8baf960
--- /dev/null
+++ b/lib/form-list/validation.ts
@@ -0,0 +1,36 @@
+import {
+    createSearchParamsCache,
+    parseAsArrayOf,
+    parseAsInteger,
+    parseAsString,
+    parseAsStringEnum,
+} from "nuqs/server"
+import * as z from "zod"
+
+import { getFiltersStateParser, getSortingStateParser } from "@/lib/parsers"
+import { TagTypeClassFormMappings } from "@/db/schema/vendorData";
+
+export const searchParamsCache = createSearchParamsCache({
+    flags: parseAsArrayOf(z.enum(["advancedTable", "floatingBar"])).withDefault(
+        []
+    ),
+    page: parseAsInteger.withDefault(1),
+    perPage: parseAsInteger.withDefault(10),
+    sort: getSortingStateParser<TagTypeClassFormMappings>().withDefault([
+        { id: "createdAt", desc: true },
+    ]),
+    tagTypeLabel: parseAsString.withDefault(""),
+    classLabel: parseAsString.withDefault(""),
+    formCode: parseAsString.withDefault(""),
+    formName: parseAsString.withDefault(""),
+
+    // advanced filter
+    filters: getFiltersStateParser().withDefault([]),
+    joinOperator: parseAsStringEnum(["and", "or"]).withDefault("and"),
+    search: parseAsString.withDefault(""),
+
+})
+
+
+
+export type GetFormListsSchema = Awaited<ReturnType<typeof searchParamsCache.parse>>
diff --git a/lib/forms/services.ts b/lib/forms/services.ts
new file mode 100644
index 00000000..e5fc8666
--- /dev/null
+++ b/lib/forms/services.ts
@@ -0,0 +1,645 @@
+// lib/forms/services.ts
+"use server"
+
+import db from "@/db/db";
+import { formEntries, formMetas, forms, tags, tagTypeClassFormMappings } from "@/db/schema/vendorData"
+import { eq, and, desc, sql, DrizzleError, or } from "drizzle-orm"
+import { unstable_cache } from "next/cache"
+import { revalidateTag } from "next/cache"
+import { getErrorMessage } from "../handle-error";
+import { DataTableColumnJSON } from "@/components/form-data/form-data-table-columns";
+
+export interface FormInfo {
+  id: number
+  formCode: string
+  formName: string
+  // tagType: string
+}
+
+export async function getFormsByContractItemId(contractItemId: number | null) {
+  // 유효성 검사
+  if (!contractItemId || contractItemId <= 0) {
+    console.warn(`Invalid contractItemId: ${contractItemId}`);
+    return { forms: [] };
+  }
+
+  // 고유 캐시 키
+  const cacheKey = `forms-${contractItemId}`;
+
+  try {
+    return unstable_cache(
+      async () => {
+        console.log(`[Forms Service] Fetching forms for contractItemId: ${contractItemId}`);
+
+        try {
+          // 데이터베이스에서 폼 조회
+          const formRecords = await db
+            .select({
+              id: forms.id,
+              formCode: forms.formCode,
+              formName: forms.formName,
+                // tagType: forms.tagType,
+            })
+            .from(forms)
+            .where(eq(forms.contractItemId, contractItemId));
+
+          console.log(`[Forms Service] Found ${formRecords.length} forms for contractItemId: ${contractItemId}`);
+
+          // 결과가 배열인지 확인
+          if (!Array.isArray(formRecords)) {
+            getErrorMessage(`Unexpected result format for contractItemId ${contractItemId} ${formRecords}`);
+            return { forms: [] };
+          }
+
+          return { forms: formRecords };
+        } catch (error) {
+          getErrorMessage(`Database error for contractItemId ${contractItemId}: ${error}`);
+          throw error; // 캐시 함수에서 에러를 던져 캐싱이 발생하지 않도록 함
+        }
+      },
+      [cacheKey],
+      {
+        // 캐시 시간 단축
+        revalidate: 60, // 1분으로 줄임 
+        tags: [cacheKey]
+      }
+    )();
+  } catch (error) {
+    getErrorMessage(`Cache operation failed for contractItemId ${contractItemId}: ${error}`);
+
+    // 캐시 문제 시 직접 쿼리 시도
+    try {
+      console.log(`[Forms Service] Fallback: Direct query for contractItemId: ${contractItemId}`);
+
+      const formRecords = await db
+        .select({
+          id: forms.id,
+          formCode: forms.formCode,
+          formName: forms.formName,
+          // tagType: forms.tagType,
+        })
+        .from(forms)
+        .where(eq(forms.contractItemId, contractItemId));
+
+      return { forms: formRecords };
+    } catch (dbError) {
+      getErrorMessage(`Fallback query failed for contractItemId ${contractItemId}:${dbError}`);
+      return { forms: [] };
+    }
+  }
+}
+
+/**
+ * 폼 캐시를 갱신하는 서버 액션
+ */
+export async function revalidateForms(contractItemId: number) {
+  if (!contractItemId) return;
+
+  const cacheKey = `forms-${contractItemId}`;
+  console.log(`[Forms Service] Invalidating cache for ${cacheKey}`);
+
+  try {
+    revalidateTag(cacheKey);
+    console.log(`[Forms Service] Cache invalidated for ${cacheKey}`);
+  } catch (error) {
+    getErrorMessage(`Failed to invalidate cache for ${cacheKey}: ${error}`);
+  }
+}
+
+/**
+ * "가장 최신 1개 row"를 가져오고,
+ * data가 배열이면 그 배열을 반환,
+ * 그리고 이 로직 전체를 unstable_cache로 감싸 캐싱.
+ */
+export async function getFormData(formCode: string, contractItemId: number) {
+  // 고유 캐시 키 (formCode + contractItemId)
+  const cacheKey = `form-data-${formCode}-${contractItemId}`
+
+  try {
+    // 1) unstable_cache로 전체 로직을 감싼다
+    const result = await unstable_cache(
+      async () => {
+        // --- 기존 로직 시작 ---
+        // (1) form_metas 조회 (가정상 1개만 존재)
+        const metaRows = await db
+          .select()
+          .from(formMetas)
+          .where(eq(formMetas.formCode, formCode))
+          .orderBy(desc(formMetas.updatedAt))
+          .limit(1)
+
+        const meta = metaRows[0] ?? null
+        if (!meta) {
+          return { columns: null, data: [] }
+        }
+        // (2) form_entries에서 (formCode, contractItemId)에 해당하는 "가장 최신" 한 행
+        const entryRows = await db
+          .select()
+          .from(formEntries)
+          .where(and(eq(formEntries.formCode, formCode), eq(formEntries.contractItemId, contractItemId)))
+          .orderBy(desc(formEntries.updatedAt))
+          .limit(1)
+
+        const entry = entryRows[0] ?? null
+
+        // columns: DB에 저장된 JSON (DataTableColumnJSON[])
+        const columns = meta.columns as DataTableColumnJSON[]
+
+        columns.forEach((col) => {
+          // 이미 displayLabel이 있으면 그대로 두고,
+          // 없으면 uom이 있으면 "label (uom)" 형태,
+          // 둘 다 없으면 label만 쓴다.
+          if (!col.displayLabel) {
+            if (col.uom) {
+              col.displayLabel = `${col.label} (${col.uom})`
+            } else {
+              col.displayLabel = col.label
+            }
+          }
+        })
+        
+        // data: 만약 entry가 없거나, data가 아닌 형태면 빈 배열
+        let data: Array<Record<string, any>> = []
+        if (entry) {
+          if (Array.isArray(entry.data)) {
+            data = entry.data
+          } else {
+            console.warn("formEntries data was not an array. Using empty array.")
+          }
+        }
+
+        return { columns, data }
+        // --- 기존 로직 끝 ---
+      },
+      [cacheKey], // 캐시 키 의존성
+      {
+        revalidate: 60,    // 1분 캐시
+        tags: [cacheKey],  // 캐시 태그
+      }
+    )()
+
+    return result
+  } catch (cacheError) {
+    console.error(`[getFormData] Cache operation failed:`, cacheError)
+
+    // --- fallback: 캐시 문제 시 직접 쿼리 시도 ---
+    try {
+      console.log(`[getFormData] Fallback DB query for (${formCode}, ${contractItemId})`)
+
+      // (1) form_metas
+      const metaRows = await db
+        .select()
+        .from(formMetas)
+        .where(eq(formMetas.formCode, formCode))
+        .orderBy(desc(formMetas.updatedAt))
+        .limit(1)
+
+      const meta = metaRows[0] ?? null
+      if (!meta) {
+        return { columns: null, data: [] }
+      }
+
+      // (2) form_entries
+      const entryRows = await db
+        .select()
+        .from(formEntries)
+        .where(and(eq(formEntries.formCode, formCode), eq(formEntries.contractItemId, contractItemId)))
+        .orderBy(desc(formEntries.updatedAt))
+        .limit(1)
+
+      const entry = entryRows[0] ?? null
+
+      const columns = meta.columns as DataTableColumnJSON[]
+
+      columns.forEach((col) => {
+        // 이미 displayLabel이 있으면 그대로 두고,
+        // 없으면 uom이 있으면 "label (uom)" 형태,
+        // 둘 다 없으면 label만 쓴다.
+        if (!col.displayLabel) {
+          if (col.uom) {
+            col.displayLabel = `${col.label} (${col.uom})`
+          } else {
+            col.displayLabel = col.label
+          }
+        }
+      })
+
+      let data: Array<Record<string, any>> = []
+      if (entry) {
+        if (Array.isArray(entry.data)) {
+          data = entry.data
+        } else {
+          console.warn("formEntries data was not an array. Using empty array (fallback).")
+        }
+      }
+
+      return { columns, data }
+    } catch (dbError) {
+      console.error(`[getFormData] Fallback DB query failed:`, dbError)
+      return { columns: null, data: [] }
+    }
+  }
+}
+
+// export async function syncMissingTags(contractItemId: number, formCode: string) {
+
+
+//   // (1) forms 테이블에서 (contractItemId, formCode) 찾기
+//   const [formRow] = await db
+//     .select()
+//     .from(forms)
+//     .where(and(eq(forms.contractItemId, contractItemId), eq(forms.formCode, formCode)))
+//     .limit(1)
+
+//   if (!formRow) {
+//     throw new Error(`Form not found for contractItemId=${contractItemId}, formCode=${formCode}`)
+//   }
+
+//   const { tagType, class: className } = formRow
+
+//   // (2) tags 테이블에서 (contractItemId, tagType, class)인 태그 찾기
+//   const tagRows = await db
+//     .select()
+//     .from(tags)
+//     .where(
+//       and(
+//         eq(tags.contractItemId, contractItemId),
+//         eq(tags.tagType, tagType),
+//         eq(tags.class, className),
+//       )
+//     )
+
+//   if (tagRows.length === 0) {
+//     console.log("No matching tags found.")
+//     return { createdCount: 0 }
+//   }
+
+//   // (3) formEntries에서 (contractItemId, formCode)인 row 1개 조회
+//   let [entry] = await db
+//     .select()
+//     .from(formEntries)
+//     .where(
+//       and(
+//         eq(formEntries.contractItemId, contractItemId),
+//         eq(formEntries.formCode, formCode)
+//       )
+//     )
+//     .limit(1)
+
+//   // (4) 만약 없다면 새로 insert: data = []
+//   if (!entry) {
+//     const [inserted] = await db.insert(formEntries).values({
+//       contractItemId,
+//       formCode,
+//       data: [], // 초기 상태는 빈 배열
+//     }).returning()
+//     entry = inserted
+//   }
+
+//   // entry.data는 배열이라고 가정
+//   // Drizzle에서 jsonb는 JS object로 파싱되어 들어오므로, 타입 캐스팅
+//   const existingData = entry.data as Array<{ tagNumber: string }>
+//   let createdCount = 0
+
+//   // (5) tagRows 각각에 대해, 이미 배열에 존재하는지 확인 후 없으면 push
+//   const updatedArray = [...existingData]
+//   for (const tagRow of tagRows) {
+//     const tagNo = tagRow.tagNo
+//     const found = updatedArray.some(item => item.tagNumber === tagNo)
+//     if (!found) {
+//       updatedArray.push({ tagNumber: tagNo })
+//       createdCount++
+//     }
+//   }
+
+//   // (6) 변경이 있으면 UPDATE
+//   if (createdCount > 0) {
+//     await db
+//       .update(formEntries)
+//       .set({ data: updatedArray })
+//       .where(eq(formEntries.id, entry.id))
+//   }
+
+
+//   revalidateTag(`form-data-${formCode}-${contractItemId}`);
+
+//   return { createdCount }
+// }
+
+export async function syncMissingTags(contractItemId: number, formCode: string) {
+  // (1) Ensure there's a row in `forms` matching (contractItemId, formCode).
+  const [formRow] = await db
+    .select()
+    .from(forms)
+    .where(
+      and(eq(forms.contractItemId, contractItemId), eq(forms.formCode, formCode))
+    )
+    .limit(1)
+
+  if (!formRow) {
+    throw new Error(
+      `Form not found for contractItemId=${contractItemId}, formCode=${formCode}`
+    )
+  }
+
+  // (2) Get all mappings from `tagTypeClassFormMappings` for this formCode.
+  const formMappings = await db
+    .select()
+    .from(tagTypeClassFormMappings)
+    .where(eq(tagTypeClassFormMappings.formCode, formCode))
+
+  // If no mappings are found, there's nothing to sync.
+  if (formMappings.length === 0) {
+    console.log(`No mappings found for formCode=${formCode}`)
+    return { createdCount: 0, updatedCount: 0, deletedCount: 0 }
+  }
+
+  // Build a dynamic OR clause to match (tagType, class) pairs from the mappings.
+  const orConditions = formMappings.map((m) =>
+    and(eq(tags.tagType, m.tagTypeLabel), eq(tags.class, m.classLabel))
+  )
+
+  // (3) Fetch all matching `tags` for the contractItemId + any of the (tagType, class) pairs.
+  const tagRows = await db
+    .select()
+    .from(tags)
+    .where(and(eq(tags.contractItemId, contractItemId), or(...orConditions)))
+
+  // (4) Fetch (or create) a single `formEntries` row for (contractItemId, formCode).
+  let [entry] = await db
+    .select()
+    .from(formEntries)
+    .where(
+      and(
+        eq(formEntries.contractItemId, contractItemId),
+        eq(formEntries.formCode, formCode)
+      )
+    )
+    .limit(1)
+
+  if (!entry) {
+    const [inserted] = await db
+      .insert(formEntries)
+      .values({
+        contractItemId,
+        formCode,
+        data: [], // Initialize with empty array
+      })
+      .returning()
+    entry = inserted
+  }
+
+  // entry.data는 [{ tagNumber: string, tagDescription?: string }, ...] 형태라고 가정
+  const existingData = entry.data as Array<{
+    tagNumber: string
+    tagDescription?: string
+  }>
+
+  // Create a Set of valid tagNumbers from tagRows for efficient lookup
+  const validTagNumbers = new Set(tagRows.map(tag => tag.tagNo))
+
+  // Copy existing data to work with
+  let updatedData: Array<{
+    tagNumber: string
+    tagDescription?: string
+  }> = []
+  
+  let createdCount = 0
+  let updatedCount = 0
+  let deletedCount = 0
+
+  // First, filter out items that should be deleted (not in validTagNumbers)
+  for (const item of existingData) {
+    if (validTagNumbers.has(item.tagNumber)) {
+      updatedData.push(item)
+    } else {
+      deletedCount++
+    }
+  }
+
+  // (5) For each tagRow, if it's missing in updatedData, push it in.
+  //     이미 있는 경우에도 description이 달라지면 업데이트할 수 있음.
+  for (const tagRow of tagRows) {
+    const { tagNo, description } = tagRow
+    
+    // 5-1. 기존 데이터에서 tagNumber 매칭
+    const existingIndex = updatedData.findIndex(
+      (item) => item.tagNumber === tagNo
+    )
+    
+    // 5-2. 없다면 새로 추가
+    if (existingIndex === -1) {
+      updatedData.push({
+        tagNumber: tagNo,
+        tagDescription: description ?? "",
+      })
+      createdCount++
+    } else {
+      // 5-3. 이미 있으면, description이 다를 때만 업데이트(선택 사항)
+      const existingItem = updatedData[existingIndex]
+      if (existingItem.tagDescription !== description) {
+        updatedData[existingIndex] = {
+          ...existingItem,
+          tagDescription: description ?? "",
+        }
+        updatedCount++
+      }
+    }
+  }
+
+  // (6) 실제로 추가되거나 수정되거나 삭제된 게 있다면 DB에 반영
+  if (createdCount > 0 || updatedCount > 0 || deletedCount > 0) {
+    await db
+      .update(formEntries)
+      .set({ data: updatedData })
+      .where(eq(formEntries.id, entry.id))
+  }
+
+  // 캐시 무효화 등 후처리
+  revalidateTag(`form-data-${formCode}-${contractItemId}`)
+
+  return { createdCount, updatedCount, deletedCount }
+}
+
+/**
+ * updateFormDataInDB:
+ * (formCode, contractItemId)에 해당하는 "단 하나의" formEntries row를 가져와,
+ * data: [{ tagNumber, ...}, ...] 배열에서 tagNumber 매칭되는 항목을 업데이트
+ * 업데이트 후, revalidateTag()로 캐시 무효화.
+ */
+type UpdateResponse = {
+  success: boolean
+  message: string
+  data?: any
+}
+
+export async function updateFormDataInDB(
+  formCode: string,
+  contractItemId: number,
+  newData: Record<string, any>
+): Promise<UpdateResponse> {
+  try {
+    // 1) tagNumber로 식별
+    const tagNumber = newData.tagNumber
+    if (!tagNumber) {
+      return {
+        success: false,
+        message: "tagNumber는 필수 항목입니다."
+      }
+    }
+
+    // 2) row 찾기 (단 하나)
+    const entries = await db
+      .select()
+      .from(formEntries)
+      .where(
+        and(
+          eq(formEntries.formCode, formCode),
+          eq(formEntries.contractItemId, contractItemId)
+        )
+      )
+      .limit(1)
+
+    if (!entries || entries.length === 0) {
+      return {
+        success: false,
+        message: `폼 데이터를 찾을 수 없습니다. (formCode=${formCode}, contractItemId=${contractItemId})`
+      }
+    }
+
+    const entry = entries[0]
+
+    // 3) data가 배열인지 확인
+    if (!entry.data) {
+      return {
+        success: false,
+        message: "폼 데이터가 없습니다."
+      }
+    }
+
+    const dataArray = entry.data as Array<Record<string, any>>
+    if (!Array.isArray(dataArray)) {
+      return {
+        success: false,
+        message: "폼 데이터가 올바른 형식이 아닙니다. 배열 형식이어야 합니다."
+      }
+    }
+
+    // 4) tagNumber = newData.tagNumber 항목 찾기
+    const idx = dataArray.findIndex((item) => item.tagNumber === tagNumber)
+    if (idx < 0) {
+      return {
+        success: false,
+        message: `태그 번호 "${tagNumber}"를 가진 항목을 찾을 수 없습니다.`
+      }
+    }
+
+    // 5) 병합
+    const oldItem = dataArray[idx]
+    const updatedItem = {
+      ...oldItem,
+      ...newData,
+      tagNumber: oldItem.tagNumber, // tagNumber 변경 불가 시 유지
+    }
+
+    const updatedArray = [...dataArray]
+    updatedArray[idx] = updatedItem
+
+    // 6) DB UPDATE
+    try {
+      await db
+        .update(formEntries)
+        .set({
+          data: updatedArray,
+          updatedAt: new Date() // 업데이트 시간도 갱신
+        })
+        .where(eq(formEntries.id, entry.id))
+    } catch (dbError) {
+      console.error("Database update error:", dbError)
+
+      if (dbError instanceof DrizzleError) {
+        return {
+          success: false,
+          message: `데이터베이스 업데이트 오류: ${dbError.message}`
+        }
+      }
+
+      return {
+        success: false,
+        message: "데이터베이스 업데이트 중 오류가 발생했습니다."
+      }
+    }
+
+    // 7) Cache 무효화
+    try {
+      // 캐시 태그를 form-data-${formCode}-${contractItemId} 형태로 가정
+      const cacheTag = `form-data-${formCode}-${contractItemId}`
+      revalidateTag(cacheTag)
+    } catch (cacheError) {
+      console.warn("Cache revalidation warning:", cacheError)
+      // 캐시 무효화는 실패해도 업데이트 자체는 성공했으므로 경고만 로그로 남김
+    }
+
+    return {
+      success: true,
+      message: '데이터가 성공적으로 업데이트되었습니다.',
+      data: {
+        tagNumber,
+        updatedFields: Object.keys(newData).filter(key => key !== 'tagNumber')
+      }
+    }
+  } catch (error) {
+    // 예상치 못한 오류 처리
+    console.error("Unexpected error in updateFormDataInDB:", error)
+    return {
+      success: false,
+      message: error instanceof Error
+        ? `예상치 못한 오류가 발생했습니다: ${error.message}`
+        : "알 수 없는 오류가 발생했습니다."
+    }
+  }
+}
+
+// FormColumn Type (동일)
+export interface FormColumn {
+  key: string
+  type: string
+  label: string
+  options?: string[]
+}
+
+interface MetadataResult {
+  formName: string
+  formCode: string
+  columns: FormColumn[]
+}
+
+/**
+ * 서버 액션:
+ * 주어진 formCode에 해당하는 form_metas 레코드 1개를 찾아서
+ * { formName, formCode, columns } 형태로 반환.
+ * 없으면 null.
+ */
+export async function fetchFormMetadata(formCode: string): Promise<MetadataResult | null> {
+  try {
+    // 기존 방식: select().from().where()
+    const rows = await db
+      .select()
+      .from(formMetas)
+      .where(eq(formMetas.formCode, formCode))
+      .limit(1)
+
+    // rows는 배열
+    const metaData = rows[0]
+    if (!metaData) return null
+
+    return {
+      formCode: metaData.formCode,
+      formName: metaData.formName,
+      columns: metaData.columns as FormColumn[]
+    }
+  } catch (err) {
+    console.error("Error in fetchFormMetadata:", err)
+    return null
+  }
+}
\ No newline at end of file
diff --git a/lib/handle-error.ts b/lib/handle-error.ts
new file mode 100644
index 00000000..1f608723
--- /dev/null
+++ b/lib/handle-error.ts
@@ -0,0 +1,22 @@
+import { toast } from "sonner"
+import { z } from "zod"
+
+export function getErrorMessage(err: unknown) {
+  const unknownError = "Something went wrong, please try again later."
+
+  if (err instanceof z.ZodError) {
+    const errors = err.issues.map((issue) => {
+      return issue.message
+    })
+    return errors.join("\n")
+  } else if (err instanceof Error) {
+    return err.message
+  }  else {
+    return unknownError
+  }
+}
+
+export function showErrorToast(err: unknown) {
+  const errorMessage = getErrorMessage(err)
+  return toast.error(errorMessage)
+}
diff --git a/lib/id.ts b/lib/id.ts
new file mode 100644
index 00000000..e6e44cbd
--- /dev/null
+++ b/lib/id.ts
@@ -0,0 +1,43 @@
+import { customAlphabet } from "nanoid"
+
+const prefixes = {
+  task: "tsk",
+}
+
+interface GenerateIdOptions {
+  /**
+   * The length of the generated ID.
+   * @default 12
+   * @example 12 => "abc123def456"
+   * */
+  length?: number
+  /**
+   * The separator to use between the prefix and the generated ID.
+   * @default "_"
+   * @example "_" => "str_abc123"
+   * */
+  separator?: string
+}
+
+/**
+ * Generates a unique ID with optional prefix and configuration.
+ * @param prefixOrOptions The prefix string or options object
+ * @param options The options for generating the ID
+ */
+export function generateId(
+  prefixOrOptions?: keyof typeof prefixes | GenerateIdOptions,
+  options: GenerateIdOptions = {}
+) {
+  if (typeof prefixOrOptions === "object") {
+    options = prefixOrOptions
+    prefixOrOptions = undefined
+  }
+
+  const { length = 12, separator = "_" } = options
+  const id = customAlphabet(
+    "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz",
+    length
+  )()
+
+  return prefixOrOptions ? `${prefixes[prefixOrOptions]}${separator}${id}` : id
+}
diff --git a/lib/items/repository.ts b/lib/items/repository.ts
new file mode 100644
index 00000000..550e6b1d
--- /dev/null
+++ b/lib/items/repository.ts
@@ -0,0 +1,125 @@
+// src/lib/items/repository.ts
+import db from "@/db/db";
+import { Item, items } from "@/db/schema/items";
+import {
+  eq,
+  inArray,
+  not,
+  asc,
+  desc,
+  and,
+  ilike,
+  gte,
+  lte,
+  count,
+  gt,
+} from "drizzle-orm";
+import { PgTransaction } from "drizzle-orm/pg-core";
+export type NewItem = typeof items.$inferInsert
+
+/**
+ * 단건/복수 조회 시 공통으로 사용 가능한 SELECT 함수 예시
+ *  - 트랜잭션(tx)을 받아서 사용하도록 구현
+ */
+export async function selectItems(
+  tx: PgTransaction<any, any, any>,
+  params: {
+    where?: any; // drizzle-orm의 조건식 (and, eq...) 등
+    orderBy?: (ReturnType<typeof asc> | ReturnType<typeof desc>)[];
+    offset?: number;
+    limit?: number;
+  }
+) {
+  const { where, orderBy, offset = 0, limit = 10 } = params;
+
+  return tx
+    .select()
+    .from(items)
+    .where(where)
+    .orderBy(...(orderBy ?? []))
+    .offset(offset)
+    .limit(limit);
+}
+/** 총 개수 count */
+export async function countItems(
+  tx: PgTransaction<any, any, any>,
+  where?: any
+) {
+  const res = await tx.select({ count: count() }).from(items).where(where);
+  return res[0]?.count ?? 0;
+}
+
+/** 단건 Insert 예시 */
+export async function insertItem(
+  tx: PgTransaction<any, any, any>,
+  data: NewItem // DB와 동일한 insert 가능한 타입
+) {
+  // returning() 사용 시 배열로 돌아오므로 [0]만 리턴
+  return tx
+    .insert(items)
+    .values(data)
+    .returning({ id: items.id, createdAt: items.createdAt });
+}
+
+/** 복수 Insert 예시 */
+export async function insertItems(
+  tx: PgTransaction<any, any, any>,
+  data: Item[]
+) {
+  return tx.insert(items).values(data).onConflictDoNothing();
+}
+
+
+
+/** 단건 삭제 */
+export async function deleteItemById(
+  tx: PgTransaction<any, any, any>,
+  itemId: number
+) {
+  return tx.delete(items).where(eq(items.id, itemId));
+}
+
+/** 복수 삭제 */
+export async function deleteItemsByIds(
+  tx: PgTransaction<any, any, any>,
+  ids: number[]
+) {
+  return tx.delete(items).where(inArray(items.id, ids));
+}
+
+/** 전체 삭제 */
+export async function deleteAllItems(
+  tx: PgTransaction<any, any, any>,
+) {
+  return tx.delete(items);
+}
+
+/** 단건 업데이트 */
+export async function updateItem(
+  tx: PgTransaction<any, any, any>,
+  itemId: number,
+  data: Partial<Item>
+) {
+  return tx
+    .update(items)
+    .set(data)
+    .where(eq(items.id, itemId))
+    .returning({ id: items.id, createdAt: items.createdAt });
+}
+
+/** 복수 업데이트 */
+export async function updateItems(
+  tx: PgTransaction<any, any, any>,
+  ids: number[],
+  data: Partial<Item>
+) {
+  return tx
+    .update(items)
+    .set(data)
+    .where(inArray(items.id, ids))
+    .returning({ id: items.id, createdAt: items.createdAt });
+}
+
+export async function findAllItems(): Promise<Item[]> {
+  return db.select().from(items).orderBy(asc(items.itemCode));
+}
diff --git a/lib/items/service.ts b/lib/items/service.ts
new file mode 100644
index 00000000..ef14a5f0
--- /dev/null
+++ b/lib/items/service.ts
@@ -0,0 +1,201 @@
+// src/lib/items/service.ts
+"use server"; // Next.js 서버 액션에서 직접 import하려면 (선택)
+
+import { revalidateTag, unstable_noStore } from "next/cache";
+import  db  from "@/db/db";
+import { customAlphabet } from "nanoid";
+
+import { filterColumns } from "@/lib/filter-columns";
+import { unstable_cache } from "@/lib/unstable-cache";
+import { getErrorMessage } from "@/lib/handle-error";
+
+import { asc, desc, ilike, inArray, and, gte, lte, not, or } from "drizzle-orm";
+import { CreateItemSchema, GetItemsSchema, UpdateItemSchema } from "./validations";
+import { Item, items } from "@/db/schema/items";
+import { countItems, deleteItemById, deleteItemsByIds, findAllItems, insertItem, selectItems, updateItem } from "./repository";
+
+
+/* -----------------------------------------------------
+   1) 조회 관련 
+----------------------------------------------------- */
+
+/**
+ * 복잡한 조건으로 Item 목록을 조회 (+ pagination) 하고,
+ * 총 개수에 따라 pageCount를 계산해서 리턴.
+ * Next.js의 unstable_cache를 사용해 일정 시간 캐시.
+ */
+export async function getItems(input: GetItemsSchema) {
+
+  return unstable_cache(
+    async () => {
+      try {
+        const offset = (input.page - 1) * input.perPage;
+
+        // const advancedTable = input.flags.includes("advancedTable");
+        const advancedTable = true;
+
+        // advancedTable 모드면 filterColumns()로 where 절 구성
+        const advancedWhere = filterColumns({
+          table: items,
+          filters: input.filters,
+          joinOperator: input.joinOperator,
+        });
+
+
+        let globalWhere
+        if (input.search) {
+          const s = `%${input.search}%`
+          globalWhere = or(ilike(items.itemCode, s), ilike(items.itemName, s)
+          , ilike(items.description, s)
+        )
+          // 필요시 여러 칼럼 OR조건 (status, priority, etc)
+        }
+
+        const finalWhere = and(
+          // advancedWhere or your existing conditions
+          advancedWhere,
+          globalWhere // and()함수로 결합 or or() 등으로 결합
+        )
+
+
+        // 아니면 ilike, inArray, gte 등으로 where 절 구성
+        const where = finalWhere
+        
+
+        const orderBy =
+          input.sort.length > 0
+            ? input.sort.map((item) =>
+                item.desc ? desc(items[item.id]) : asc(items[item.id])
+              )
+            : [asc(items.createdAt)];
+
+        // 트랜잭션 내부에서 Repository 호출
+        const { data, total } = await db.transaction(async (tx) => {
+          const data = await selectItems(tx, {
+            where,
+            orderBy,
+            offset,
+            limit: input.perPage,
+          });
+
+          const total = await countItems(tx, where);
+          return { data, total };
+        });
+
+        const pageCount = Math.ceil(total / input.perPage);
+
+        return { data, pageCount };
+      } catch (err) {
+        // 에러 발생 시 디폴트
+        return { data: [], pageCount: 0 };
+      }
+    },
+    [JSON.stringify(input)], // 캐싱 키
+    {
+      revalidate: 3600,
+      tags: ["items"], // revalidateTag("items") 호출 시 무효화
+    }
+  )();
+}
+
+
+/* -----------------------------------------------------
+   2) 생성(Create) 
+----------------------------------------------------- */
+
+
+/**
+ * Item 생성 후, (가장 오래된 Item 1개) 삭제로
+ * 전체 Item 개수를 고정
+ */
+export async function createItem(input: CreateItemSchema) {
+  unstable_noStore(); // Next.js 서버 액션 캐싱 방지
+  try {
+    await db.transaction(async (tx) => {
+      // 새 Item 생성
+      const [newTask] = await insertItem(tx, {
+        itemCode: input.itemCode,
+        itemName: input.itemName,
+        description: input.description,
+      });
+      return newTask;
+
+    });
+
+    // 캐시 무효화
+    revalidateTag("items");
+
+    return { data: null, error: null };
+  } catch (err) {
+    return { data: null, error: getErrorMessage(err) };
+  }
+}
+
+/* -----------------------------------------------------
+   3) 업데이트
+----------------------------------------------------- */
+
+/** 단건 업데이트 */
+export async function modifyItem(input: UpdateItemSchema & { id: number }) {
+  unstable_noStore();
+  try {
+    const data = await db.transaction(async (tx) => {
+      const [res] = await updateItem(tx, input.id, {
+        itemCode: input.itemCode,
+        itemName: input.itemName,
+        description: input.description,
+      });
+      return res;
+    });
+
+    revalidateTag("items");
+    return { data: null, error: null };
+  } catch (err) {
+    return { data: null, error: getErrorMessage(err) };
+  }
+}
+
+
+
+/** 단건 삭제  */
+export async function removeItem(input: { id: number }) {
+  unstable_noStore();
+  try {
+    await db.transaction(async (tx) => {
+      // 삭제
+      await deleteItemById(tx, input.id);
+      // 바로 새 Item 생성
+    });
+
+    revalidateTag("items");
+
+    return { data: null, error: null };
+  } catch (err) {
+    return { data: null, error: getErrorMessage(err) };
+  }
+}
+
+/** 복수 삭제  */
+export async function removeItems(input: { ids: number[] }) {
+  unstable_noStore();
+  try {
+    await db.transaction(async (tx) => {
+      // 삭제
+      await deleteItemsByIds(tx, input.ids);
+    });
+
+    revalidateTag("items");
+
+    return { data: null, error: null };
+  } catch (err) {
+    return { data: null, error: getErrorMessage(err) };
+  }
+}
+
+export async function getAllItems(): Promise<Item[]> {
+  try {
+    return await findAllItems(); 
+  } catch (err) {
+    throw new Error("Failed to get roles");
+  }
+}
diff --git a/lib/items/table/add-items-dialog.tsx b/lib/items/table/add-items-dialog.tsx
new file mode 100644
index 00000000..2224444c
--- /dev/null
+++ b/lib/items/table/add-items-dialog.tsx
@@ -0,0 +1,156 @@
+"use client"
+
+import * as React from "react"
+import { useForm } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+
+import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+// react-hook-form + shadcn/ui Form
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form"
+// shadcn/ui Select
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { createItemSchema, CreateItemSchema } from "../validations"
+import { createItem } from "../service"
+import { Textarea } from "@/components/ui/textarea"
+
+
+
+export function AddItemDialog() {
+  const [open, setOpen] = React.useState(false)
+
+  // react-hook-form 세팅
+  const form = useForm<CreateItemSchema>({
+    resolver: zodResolver(createItemSchema),
+    defaultValues: {
+      itemCode: "",
+      itemName: "",
+      description: "",
+    },
+  })
+
+  async function onSubmit(data: CreateItemSchema) {
+    const result = await createItem(data)
+    if (result.error) {
+      alert(`에러: ${result.error}`)
+      return
+    }
+    // 성공 시 모달 닫고 폼 리셋
+    form.reset()
+    setOpen(false)
+  }
+
+  function handleDialogOpenChange(nextOpen: boolean) {
+    if (!nextOpen) {
+      form.reset()
+    }
+    setOpen(nextOpen)
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={handleDialogOpenChange}>
+      {/* 모달을 열기 위한 버튼 */}
+      <DialogTrigger asChild>
+        <Button variant="default" size="sm">
+          Add Item
+        </Button>
+      </DialogTrigger>
+
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Create New Item</DialogTitle>
+          <DialogDescription>
+            새 Item 정보를 입력하고 <b>Create</b> 버튼을 누르세요.
+          </DialogDescription>
+        </DialogHeader>
+
+        {/* shadcn/ui Form을 이용해 react-hook-form과 연결 */}
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)}>
+            <div className="space-y-4 py-4">
+
+              <FormField
+                control={form.control}
+                name="itemCode"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Item Code</FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder="e.g."
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="itemName"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Item Name</FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder="e.g."
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="description"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Description</FormLabel>
+                    <FormControl>
+                      <Textarea
+                        placeholder="e.g."
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+            </div>
+
+            <DialogFooter>
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => setOpen(false)}
+              >
+                Cancel
+              </Button>
+              <Button type="submit" disabled={form.formState.isSubmitting}>
+                Create
+              </Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  )
+}
\ No newline at end of file
diff --git a/lib/items/table/delete-items-dialog.tsx b/lib/items/table/delete-items-dialog.tsx
new file mode 100644
index 00000000..25ae265b
--- /dev/null
+++ b/lib/items/table/delete-items-dialog.tsx
@@ -0,0 +1,149 @@
+"use client"
+
+import * as React from "react"
+import { type Row } from "@tanstack/react-table"
+import { Loader, Trash } from "lucide-react"
+import { toast } from "sonner"
+
+import { useMediaQuery } from "@/hooks/use-media-query"
+import { Button } from "@/components/ui/button"
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/components/ui/drawer"
+
+import { Item } from "@/db/schema/items"
+import { removeItems } from "../service"
+
+interface DeleteItemsDialogProps
+  extends React.ComponentPropsWithoutRef<typeof Dialog> {
+    items: Row<Item>["original"][]
+  showTrigger?: boolean
+  onSuccess?: () => void
+}
+
+export function DeleteItemsDialog({
+  items,
+  showTrigger = true,
+  onSuccess,
+  ...props
+}: DeleteItemsDialogProps) {
+  const [isDeletePending, startDeleteTransition] = React.useTransition()
+  const isDesktop = useMediaQuery("(min-width: 640px)")
+
+  function onDelete() {
+    startDeleteTransition(async () => {
+      const { error } = await removeItems({
+        ids: items.map((item) => item.id),
+      })
+
+      if (error) {
+        toast.error(error)
+        return
+      }
+
+      props.onOpenChange?.(false)
+      toast.success("Tasks deleted")
+      onSuccess?.()
+    })
+  }
+
+  if (isDesktop) {
+    return (
+      <Dialog {...props}>
+        {showTrigger ? (
+          <DialogTrigger asChild>
+            <Button variant="outline" size="sm">
+              <Trash className="mr-2 size-4" aria-hidden="true" />
+              Delete ({items.length})
+            </Button>
+          </DialogTrigger>
+        ) : null}
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Are you absolutely sure?</DialogTitle>
+            <DialogDescription>
+              This action cannot be undone. This will permanently delete your{" "}
+              <span className="font-medium">{items.length}</span>
+              {items.length === 1 ? " task" : " tasks"} from our servers.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter className="gap-2 sm:space-x-0">
+            <DialogClose asChild>
+              <Button variant="outline">Cancel</Button>
+            </DialogClose>
+            <Button
+              aria-label="Delete selected rows"
+              variant="destructive"
+              onClick={onDelete}
+              disabled={isDeletePending}
+            >
+              {isDeletePending && (
+                <Loader
+                  className="mr-2 size-4 animate-spin"
+                  aria-hidden="true"
+                />
+              )}
+              Delete
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    )
+  }
+
+  return (
+    <Drawer {...props}>
+      {showTrigger ? (
+        <DrawerTrigger asChild>
+          <Button variant="outline" size="sm">
+            <Trash className="mr-2 size-4" aria-hidden="true" />
+            Delete ({items.length})
+          </Button>
+        </DrawerTrigger>
+      ) : null}
+      <DrawerContent>
+        <DrawerHeader>
+          <DrawerTitle>Are you absolutely sure?</DrawerTitle>
+          <DrawerDescription>
+            This action cannot be undone. This will permanently delete your{" "}
+            <span className="font-medium">{items.length}</span>
+            {items.length === 1 ? " item" : " items"} from our servers.
+          </DrawerDescription>
+        </DrawerHeader>
+        <DrawerFooter className="gap-2 sm:space-x-0">
+          <DrawerClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </DrawerClose>
+          <Button
+            aria-label="Delete selected rows"
+            variant="destructive"
+            onClick={onDelete}
+            disabled={isDeletePending}
+          >
+            {isDeletePending && (
+              <Loader className="mr-2 size-4 animate-spin" aria-hidden="true" />
+            )}
+            Delete
+          </Button>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  )
+}
diff --git a/lib/items/table/feature-flags-provider.tsx b/lib/items/table/feature-flags-provider.tsx
new file mode 100644
index 00000000..81131894
--- /dev/null
+++ b/lib/items/table/feature-flags-provider.tsx
@@ -0,0 +1,108 @@
+"use client"
+
+import * as React from "react"
+import { useQueryState } from "nuqs"
+
+import { dataTableConfig, type DataTableConfig } from "@/config/data-table"
+import { cn } from "@/lib/utils"
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+
+type FeatureFlagValue = DataTableConfig["featureFlags"][number]["value"]
+
+interface FeatureFlagsContextProps {
+  featureFlags: FeatureFlagValue[]
+  setFeatureFlags: (value: FeatureFlagValue[]) => void
+}
+
+const FeatureFlagsContext = React.createContext<FeatureFlagsContextProps>({
+  featureFlags: [],
+  setFeatureFlags: () => {},
+})
+
+export function useFeatureFlags() {
+  const context = React.useContext(FeatureFlagsContext)
+  if (!context) {
+    throw new Error(
+      "useFeatureFlags must be used within a FeatureFlagsProvider"
+    )
+  }
+  return context
+}
+
+interface FeatureFlagsProviderProps {
+  children: React.ReactNode
+}
+
+export function FeatureFlagsProvider({ children }: FeatureFlagsProviderProps) {
+  const [featureFlags, setFeatureFlags] = useQueryState<FeatureFlagValue[]>(
+    "flags",
+    {
+      defaultValue: [],
+      parse: (value) => value.split(",") as FeatureFlagValue[],
+      serialize: (value) => value.join(","),
+      eq: (a, b) =>
+        a.length === b.length && a.every((value, index) => value === b[index]),
+      clearOnDefault: true,
+      shallow: false,
+    }
+  )
+
+  return (
+    <FeatureFlagsContext.Provider
+      value={{
+        featureFlags,
+        setFeatureFlags: (value) => void setFeatureFlags(value),
+      }}
+    >
+      <div className="w-full overflow-x-auto">
+        <ToggleGroup
+          type="multiple"
+          variant="outline"
+          size="sm"
+          value={featureFlags}
+          onValueChange={(value: FeatureFlagValue[]) => setFeatureFlags(value)}
+          className="w-fit gap-0"
+        >
+          {dataTableConfig.featureFlags.map((flag, index) => (
+            <Tooltip key={flag.value}>
+              <ToggleGroupItem
+                value={flag.value}
+                className={cn(
+                  "gap-2 whitespace-nowrap rounded-none px-3 text-xs data-[state=on]:bg-accent/70 data-[state=on]:hover:bg-accent/90",
+                  {
+                    "rounded-l-sm border-r-0": index === 0,
+                    "rounded-r-sm":
+                      index === dataTableConfig.featureFlags.length - 1,
+                  }
+                )}
+                asChild
+              >
+                <TooltipTrigger>
+                  <flag.icon className="size-3.5 shrink-0" aria-hidden="true" />
+                  {flag.label}
+                </TooltipTrigger>
+              </ToggleGroupItem>
+              <TooltipContent
+                align="start"
+                side="bottom"
+                sideOffset={6}
+                className="flex max-w-60 flex-col space-y-1.5 border bg-background py-2 font-semibold text-foreground"
+              >
+                <div>{flag.tooltipTitle}</div>
+                <div className="text-xs text-muted-foreground">
+                  {flag.tooltipDescription}
+                </div>
+              </TooltipContent>
+            </Tooltip>
+          ))}
+        </ToggleGroup>
+      </div>
+      {children}
+    </FeatureFlagsContext.Provider>
+  )
+}
diff --git a/lib/items/table/feature-flags.tsx b/lib/items/table/feature-flags.tsx
new file mode 100644
index 00000000..aaae6af2
--- /dev/null
+++ b/lib/items/table/feature-flags.tsx
@@ -0,0 +1,96 @@
+"use client"
+
+import * as React from "react"
+import { useQueryState } from "nuqs"
+
+import { dataTableConfig, type DataTableConfig } from "@/config/data-table"
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+
+type FeatureFlagValue = DataTableConfig["featureFlags"][number]["value"]
+
+interface TasksTableContextProps {
+  featureFlags: FeatureFlagValue[]
+  setFeatureFlags: (value: FeatureFlagValue[]) => void
+}
+
+const TasksTableContext = React.createContext<TasksTableContextProps>({
+  featureFlags: [],
+  setFeatureFlags: () => {},
+})
+
+export function useTasksTable() {
+  const context = React.useContext(TasksTableContext)
+  if (!context) {
+    throw new Error("useTasksTable must be used within a TasksTableProvider")
+  }
+  return context
+}
+
+export function TasksTableProvider({ children }: React.PropsWithChildren) {
+  const [featureFlags, setFeatureFlags] = useQueryState<FeatureFlagValue[]>(
+    "featureFlags",
+    {
+      defaultValue: [],
+      parse: (value) => value.split(",") as FeatureFlagValue[],
+      serialize: (value) => value.join(","),
+      eq: (a, b) =>
+        a.length === b.length && a.every((value, index) => value === b[index]),
+      clearOnDefault: true,
+    }
+  )
+
+  return (
+    <TasksTableContext.Provider
+      value={{
+        featureFlags,
+        setFeatureFlags: (value) => void setFeatureFlags(value),
+      }}
+    >
+      <div className="w-full overflow-x-auto">
+        <ToggleGroup
+          type="multiple"
+          variant="outline"
+          size="sm"
+          value={featureFlags}
+          onValueChange={(value: FeatureFlagValue[]) => setFeatureFlags(value)}
+          className="w-fit"
+        >
+          {dataTableConfig.featureFlags.map((flag) => (
+            <Tooltip key={flag.value}>
+              <ToggleGroupItem
+                value={flag.value}
+                className="whitespace-nowrap px-3 text-xs"
+                asChild
+              >
+                <TooltipTrigger>
+                  <flag.icon
+                    className="mr-2 size-3.5 shrink-0"
+                    aria-hidden="true"
+                  />
+                  {flag.label}
+                </TooltipTrigger>
+              </ToggleGroupItem>
+              <TooltipContent
+                align="start"
+                side="bottom"
+                sideOffset={6}
+                className="flex max-w-60 flex-col space-y-1.5 border bg-background py-2 font-semibold text-foreground"
+              >
+                <div>{flag.tooltipTitle}</div>
+                <div className="text-xs text-muted-foreground">
+                  {flag.tooltipDescription}
+                </div>
+              </TooltipContent>
+            </Tooltip>
+          ))}
+        </ToggleGroup>
+      </div>
+      {children}
+    </TasksTableContext.Provider>
+  )
+}
diff --git a/lib/items/table/items-table-columns.tsx b/lib/items/table/items-table-columns.tsx
new file mode 100644
index 00000000..60043e8e
--- /dev/null
+++ b/lib/items/table/items-table-columns.tsx
@@ -0,0 +1,183 @@
+"use client"
+
+import * as React from "react"
+import { type DataTableRowAction } from "@/types/table"
+import { type ColumnDef } from "@tanstack/react-table"
+import { Ellipsis } from "lucide-react"
+import { toast } from "sonner"
+
+import { getErrorMessage } from "@/lib/handle-error"
+import { formatDate } from "@/lib/utils"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Checkbox } from "@/components/ui/checkbox"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { DataTableColumnHeader } from "@/components/data-table/data-table-column-header"
+
+import { modifiTask } from "@/lib/tasks/service"
+
+
+import { itemsColumnsConfig } from "@/config/itemsColumnsConfig"
+import { Item } from "@/db/schema/items"
+import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header"
+
+interface GetColumnsProps {
+  setRowAction: React.Dispatch<React.SetStateAction<DataTableRowAction<Item> | null>>
+}
+
+/**
+ * tanstack table 컬럼 정의 (중첩 헤더 버전)
+ */
+export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<Item>[] {
+  // ----------------------------------------------------------------
+  // 1) select 컬럼 (체크박스)
+  // ----------------------------------------------------------------
+  const selectColumn: ColumnDef<Item> = {
+    id: "select",
+    header: ({ table }) => (
+      <Checkbox
+        checked={
+          table.getIsAllPageRowsSelected() ||
+          (table.getIsSomePageRowsSelected() && "indeterminate")
+        }
+        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+        aria-label="Select all"
+        className="translate-y-0.5"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={(value) => row.toggleSelected(!!value)}
+        aria-label="Select row"
+        className="translate-y-0.5"
+      />
+    ),
+    size:40,
+    enableSorting: false,
+    enableHiding: false,
+  }
+
+  // ----------------------------------------------------------------
+  // 2) actions 컬럼 (Dropdown 메뉴)
+  // ----------------------------------------------------------------
+  const actionsColumn: ColumnDef<Item> = {
+    id: "actions",
+    enableHiding: false,
+    cell: function Cell({ row }) {
+      const [isUpdatePending, startUpdateTransition] = React.useTransition()
+
+      return (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              aria-label="Open menu"
+              variant="ghost"
+              className="flex size-8 p-0 data-[state=open]:bg-muted"
+            >
+              <Ellipsis className="size-4" aria-hidden="true" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-40">
+            <DropdownMenuItem
+              onSelect={() => setRowAction({ row, type: "update" })}
+            >
+              Edit
+            </DropdownMenuItem>
+
+            <DropdownMenuSeparator />
+            <DropdownMenuItem
+              onSelect={() => setRowAction({ row, type: "delete" })}
+            >
+              Delete
+              <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      )
+    },
+    size: 40,
+  }
+
+  // ----------------------------------------------------------------
+  // 3) 일반 컬럼들을 "그룹"별로 묶어 중첩 columns 생성
+  // ----------------------------------------------------------------
+  // 3-1) groupMap: { [groupName]: ColumnDef<Item>[] }
+  const groupMap: Record<string, ColumnDef<Item>[]> = {}
+
+  itemsColumnsConfig.forEach((cfg) => {
+    // 만약 group가 없으면 "_noGroup" 처리
+    const groupName = cfg.group || "_noGroup"
+
+    if (!groupMap[groupName]) {
+      groupMap[groupName] = []
+    }
+
+    // child column 정의
+    const childCol: ColumnDef<Item> = {
+      accessorKey: cfg.id,
+      enableResizing: true,
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title={cfg.label} />
+      ),
+      meta: {
+        excelHeader: cfg.excelHeader,
+        group: cfg.group,
+        type: cfg.type,
+      },
+      cell: ({ row, cell }) => {
+ 
+        if (cfg.id === "createdAt"||cfg.id === "updatedAt") {
+          const dateVal = cell.getValue() as Date
+          return formatDate(dateVal)
+        }
+
+        return row.getValue(cfg.id) ?? ""
+      },
+    }
+
+    groupMap[groupName].push(childCol)
+  })
+
+  // ----------------------------------------------------------------
+  // 3-2) groupMap에서 실제 상위 컬럼(그룹)을 만들기
+  // ----------------------------------------------------------------
+  const nestedColumns: ColumnDef<Item>[] = []
+
+  // 순서를 고정하고 싶다면 group 순서를 미리 정의하거나 sort해야 함
+  // 여기서는 그냥 Object.entries 순서
+  Object.entries(groupMap).forEach(([groupName, colDefs]) => {
+    if (groupName === "_noGroup") {
+      // 그룹 없음 → 그냥 최상위 레벨 컬럼
+      nestedColumns.push(...colDefs)
+    } else {
+      // 상위 컬럼
+      nestedColumns.push({
+        id: groupName,
+        header: groupName, // "Basic Info", "Metadata" 등
+        columns: colDefs,
+      })
+    }
+  })
+
+  // ----------------------------------------------------------------
+  // 4) 최종 컬럼 배열: select, nestedColumns, actions
+  // ----------------------------------------------------------------
+  return [
+    selectColumn,
+    ...nestedColumns,
+    actionsColumn,
+  ]
+}
\ No newline at end of file
diff --git a/lib/items/table/items-table-toolbar-actions.tsx b/lib/items/table/items-table-toolbar-actions.tsx
new file mode 100644
index 00000000..3444daab
--- /dev/null
+++ b/lib/items/table/items-table-toolbar-actions.tsx
@@ -0,0 +1,67 @@
+"use client"
+
+import * as React from "react"
+import { type Table } from "@tanstack/react-table"
+import { Download, Upload } from "lucide-react"
+import { toast } from "sonner"
+
+import { exportTableToExcel } from "@/lib/export"
+import { Button } from "@/components/ui/button"
+
+
+// 만약 서버 액션이나 API 라우트를 이용해 업로드 처리한다면 import
+import { importTasksExcel } from "@/lib/tasks/service" // 예시
+import { Item } from "@/db/schema/items"
+import { DeleteItemsDialog } from "./delete-items-dialog"
+import { AddItemDialog } from "./add-items-dialog"
+
+interface ItemsTableToolbarActionsProps {
+  table: Table<Item>
+}
+
+export function ItemsTableToolbarActions({ table }: ItemsTableToolbarActionsProps) {
+  // 파일 input을 숨기고, 버튼 클릭 시 참조해 클릭하는 방식
+  const fileInputRef = React.useRef<HTMLInputElement>(null)
+
+
+
+  function handleImportClick() {
+    // 숨겨진 <input type="file" /> 요소를 클릭
+    fileInputRef.current?.click()
+  }
+
+  return (
+    <div className="flex items-center gap-2">
+      {/** 1) 선택된 로우가 있으면 삭제 다이얼로그 */}
+      {table.getFilteredSelectedRowModel().rows.length > 0 ? (
+        <DeleteItemsDialog
+          items={table
+            .getFilteredSelectedRowModel()
+            .rows.map((row) => row.original)}
+          onSuccess={() => table.toggleAllRowsSelected(false)}
+        />
+      ) : null}
+
+      {/** 2) 새 Task 추가 다이얼로그 */}
+      <AddItemDialog />
+
+    
+
+      {/** 4) Export 버튼 */}
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={() =>
+          exportTableToExcel(table, {
+            filename: "tasks",
+            excludeColumns: ["select", "actions"],
+          })
+        }
+        className="gap-2"
+      >
+        <Download className="size-4" aria-hidden="true" />
+        <span className="hidden sm:inline">Export</span>
+      </Button>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/lib/items/table/items-table.tsx b/lib/items/table/items-table.tsx
new file mode 100644
index 00000000..bbbafc2f
--- /dev/null
+++ b/lib/items/table/items-table.tsx
@@ -0,0 +1,139 @@
+"use client"
+
+import * as React from "react"
+import type {
+  DataTableAdvancedFilterField,
+  DataTableFilterField,
+  DataTableRowAction,
+} from "@/types/table"
+
+import { useDataTable } from "@/hooks/use-data-table"
+import { DataTable } from "@/components/data-table/data-table"
+import { DataTableAdvancedToolbar } from "@/components/data-table/data-table-advanced-toolbar"
+import { useFeatureFlags } from "./feature-flags-provider"
+
+import { getItems } from "../service"
+import { Item } from "@/db/schema/items"
+import { getColumns } from "./items-table-columns"
+import { ItemsTableToolbarActions } from "./items-table-toolbar-actions"
+import { UpdateItemSheet } from "./update-item-sheet"
+import { DeleteItemsDialog } from "./delete-items-dialog"
+
+interface ItemsTableProps {
+  promises: Promise<
+    [
+      Awaited<ReturnType<typeof getItems>>,
+    ]
+  >
+}
+
+export function ItemsTable({ promises }: ItemsTableProps) {
+  const { featureFlags } = useFeatureFlags()
+
+  const [{ data, pageCount }] =
+    React.use(promises)
+
+    console.log(data)
+
+
+  const [rowAction, setRowAction] =
+    React.useState<DataTableRowAction<Item> | null>(null)
+
+  const columns = React.useMemo(
+    () => getColumns({ setRowAction }),
+    [setRowAction]
+  )
+
+  /**
+   * This component can render either a faceted filter or a search filter based on the `options` prop.
+   *
+   * @prop options - An array of objects, each representing a filter option. If provided, a faceted filter is rendered. If not, a search filter is rendered.
+   *
+   * Each `option` object has the following properties:
+   * @prop {string} label - The label for the filter option.
+   * @prop {string} value - The value for the filter option.
+   * @prop {React.ReactNode} [icon] - An optional icon to display next to the label.
+   * @prop {boolean} [withCount] - An optional boolean to display the count of the filter option.
+   */
+  const filterFields: DataTableFilterField<Item>[] = [
+    {
+      id: "itemCode",
+      label: "Item Code",
+    },
+  ]
+
+  /**
+   * Advanced filter fields for the data table.
+   * These fields provide more complex filtering options compared to the regular filterFields.
+   *
+   * Key differences from regular filterFields:
+   * 1. More field types: Includes 'text', 'multi-select', 'date', and 'boolean'.
+   * 2. Enhanced flexibility: Allows for more precise and varied filtering options.
+   * 3. Used with DataTableAdvancedToolbar: Enables a more sophisticated filtering UI.
+   * 4. Date and boolean types: Adds support for filtering by date ranges and boolean values.
+   */
+  const advancedFilterFields: DataTableAdvancedFilterField<Item>[] = [
+    {
+      id: "itemCode",
+      label: "Item Code",
+      type: "text",
+    },
+    {
+      id: "itemName",
+      label: "Item Name",
+      type: "text",
+    }, {
+      id: "description",
+      label: "Description",
+      type: "text",
+    },
+  ]
+
+
+  const { table } = useDataTable({
+    data,
+    columns,
+    pageCount,
+    filterFields,
+    enablePinning: true,
+    enableAdvancedFilter: true,
+    initialState: {
+      sorting: [{ id: "createdAt", desc: true }],
+      columnPinning: { right: ["actions"] },
+    },
+    getRowId: (originalRow) => String(originalRow.id),
+    shallow: false,
+    clearOnDefault: true,
+  })
+
+  return (
+    <>
+      <DataTable
+        table={table}
+
+      >
+
+        <DataTableAdvancedToolbar
+          table={table}
+          filterFields={advancedFilterFields}
+          shallow={false}
+        >
+          <ItemsTableToolbarActions table={table} />
+        </DataTableAdvancedToolbar>
+
+      </DataTable>
+      <UpdateItemSheet
+        open={rowAction?.type === "update"}
+        onOpenChange={() => setRowAction(null)}
+        item={rowAction?.row.original ?? null}
+      />
+      <DeleteItemsDialog
+        open={rowAction?.type === "delete"}
+        onOpenChange={() => setRowAction(null)}
+        items={rowAction?.row.original ? [rowAction?.row.original] : []}
+        showTrigger={false}
+        onSuccess={() => rowAction?.row.toggleSelected(false)}
+      />
+    </>
+  )
+}
diff --git a/lib/items/table/update-item-sheet.tsx b/lib/items/table/update-item-sheet.tsx
new file mode 100644
index 00000000..4bcdbfcb
--- /dev/null
+++ b/lib/items/table/update-item-sheet.tsx
@@ -0,0 +1,178 @@
+"use client"
+
+import * as React from "react"
+import { tasks, type Task } from "@/db/schema/tasks"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Loader } from "lucide-react"
+import { useForm } from "react-hook-form"
+import { toast } from "sonner"
+
+import { Button } from "@/components/ui/button"
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet"
+import { Textarea } from "@/components/ui/textarea"
+
+import { modifiTask } from "@/lib//tasks/service"
+import { updateTaskSchema, type UpdateTaskSchema } from "@/lib/tasks/validations"
+import { Item } from "@/db/schema/items"
+import { updateItemSchema, UpdateItemSchema } from "../validations"
+import { modifyItem } from "../service"
+import { Input } from "@/components/ui/input"
+
+interface UpdateItemSheetProps
+  extends React.ComponentPropsWithRef<typeof Sheet> {
+  item: Item | null
+}
+
+export function UpdateItemSheet({ item, ...props }: UpdateItemSheetProps) {
+  const [isUpdatePending, startUpdateTransition] = React.useTransition()
+
+  console.log(item)
+  const form = useForm<UpdateItemSchema>({
+    resolver: zodResolver(updateItemSchema),
+    defaultValues: {
+      itemCode: item?.itemCode ?? "",
+      itemName: item?.itemName ?? "",
+      description: item?.description ?? "",
+
+    },
+  })
+
+
+  React.useEffect(() => {
+    if (item) {
+      form.reset({
+        itemCode: item.itemCode ?? "",
+        itemName: item.itemName ?? "",
+        description: item.description ?? "",
+      });
+    }
+  }, [item, form]);
+
+  function onSubmit(input: UpdateItemSchema) {
+    startUpdateTransition(async () => {
+      if (!item) return
+
+      const { error } = await modifyItem({
+        id: item.id,
+        ...input,
+      })
+
+      if (error) {
+        toast.error(error)
+        return
+      }
+
+      form.reset()
+      props.onOpenChange?.(false)
+      toast.success("Item updated")
+    })
+  }
+
+  return (
+    <Sheet {...props}>
+      <SheetContent className="flex flex-col gap-6 sm:max-w-md">
+        <SheetHeader className="text-left">
+          <SheetTitle>Update item</SheetTitle>
+          <SheetDescription>
+            Update the item details and save the changes
+          </SheetDescription>
+        </SheetHeader>
+        <Form {...form}>
+          <form
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="flex flex-col gap-4"
+          >
+            <FormField
+              control={form.control}
+              name="itemCode"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Item Code</FormLabel>
+                  <FormControl>
+                    <Input   placeholder="e.g." {...field} />
+
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="itemName"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Item Name</FormLabel>
+                  <FormControl>
+                    <Input
+                      placeholder="e.g."
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="description"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Description</FormLabel>
+                  <FormControl>
+                    <Textarea
+                      placeholder="e.g."
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <SheetFooter className="gap-2 pt-2 sm:space-x-0">
+              <SheetClose asChild>
+                <Button type="button" variant="outline">
+                  Cancel
+                </Button>
+              </SheetClose>
+              <Button disabled={isUpdatePending}>
+                {isUpdatePending && (
+                  <Loader
+                    className="mr-2 size-4 animate-spin"
+                    aria-hidden="true"
+                  />
+                )}
+                Save
+              </Button>
+            </SheetFooter>
+          </form>
+        </Form>
+      </SheetContent>
+    </Sheet>
+  )
+}
diff --git a/lib/items/validations.ts b/lib/items/validations.ts
new file mode 100644
index 00000000..d299959c
--- /dev/null
+++ b/lib/items/validations.ts
@@ -0,0 +1,47 @@
+import {
+  createSearchParamsCache,
+  parseAsArrayOf,
+  parseAsInteger,
+  parseAsString,
+  parseAsStringEnum,
+} from "nuqs/server"
+import * as z from "zod"
+
+import { getFiltersStateParser, getSortingStateParser } from "@/lib/parsers"
+import { Item } from "@/db/schema/items";
+
+export const searchParamsCache = createSearchParamsCache({
+  flags: parseAsArrayOf(z.enum(["advancedTable", "floatingBar"])).withDefault(
+    []
+  ),
+  page: parseAsInteger.withDefault(1),
+  perPage: parseAsInteger.withDefault(10),
+  sort: getSortingStateParser<Item>().withDefault([
+    { id: "createdAt", desc: true },
+  ]),
+  itemCode: parseAsString.withDefault(""),
+  itemName: parseAsString.withDefault(""),
+  description: parseAsString.withDefault(""),
+
+  // advanced filter
+  filters: getFiltersStateParser().withDefault([]),
+  joinOperator: parseAsStringEnum(["and", "or"]).withDefault("and"),
+  search: parseAsString.withDefault(""),
+
+})
+
+export const createItemSchema = z.object({
+  itemCode: z.string(),
+  itemName: z.string(),
+  description: z.string(),
+})
+
+export const updateItemSchema = z.object({
+  itemCode: z.string().optional(),
+  itemName: z.string().optional(),
+  description: z.string().optional(),
+})
+
+export type GetItemsSchema = Awaited<ReturnType<typeof searchParamsCache.parse>>
+export type CreateItemSchema = z.infer<typeof createItemSchema>
+export type UpdateItemSchema = z.infer<typeof updateItemSchema>
diff --git a/lib/logger.ts b/lib/logger.ts
new file mode 100644
index 00000000..f49f52c2
--- /dev/null
+++ b/lib/logger.ts
@@ -0,0 +1,26 @@
+// lib/logger.ts
+import pino from 'pino';
+import fs from 'fs';
+
+// 로그 디렉토리 생성
+const logDirectory = './logs';
+if (!fs.existsSync(logDirectory)) {
+  fs.mkdirSync(logDirectory);
+}
+
+// 파일 스트림 설정
+const fileStream = fs.createWriteStream('./logs/app.log', { flags: 'a' });
+
+// Pino의 multistream을 사용한 멀티 스트림 설정
+const streams: pino.StreamEntry[] = [
+  { level: 'info', stream: fileStream }, // 파일에 로그 기록
+  process.env.NODE_ENV !== 'production' ? { level: 'debug', stream: pino.destination(1) } : null, // 콘솔에 로그 기록 (개발 환경)
+].filter(Boolean) as pino.StreamEntry[];
+
+// Pino 로거 생성
+const logger = pino({
+  timestamp: pino.stdTimeFunctions.isoTime,
+  level: process.env.LOG_LEVEL || 'info',
+}, pino.multistream(streams));
+
+export default logger;
\ No newline at end of file
diff --git a/lib/mail/mailer.ts b/lib/mail/mailer.ts
new file mode 100644
index 00000000..e0a90f1e
--- /dev/null
+++ b/lib/mail/mailer.ts
@@ -0,0 +1,31 @@
+import nodemailer from 'nodemailer';
+import handlebars from 'handlebars';
+import fs from 'fs';
+import path from 'path';
+import i18next from 'i18next';
+
+// Nodemailer Transporter 생성
+const transporter = nodemailer.createTransport({
+  host: process.env.Email_Host,
+  port: 465,
+  secure: true,
+  auth: {
+    user: process.env.Email_User_Name,
+    pass: process.env.Email_Password,
+  },
+});
+
+// Handlebars 템플릿 로더 함수
+function loadTemplate(templateName: string, data: Record<string, any>) {
+  const templatePath = path.join(process.cwd(), 'lib', 'mail', 'templates', `${templateName}.hbs`);
+  const source = fs.readFileSync(templatePath, 'utf8');
+  const template = handlebars.compile(source);
+  return template(data);
+}
+
+handlebars.registerHelper('t', function(key: string, options: any) {
+    // options.hash에는 Handlebars에서 넘긴 named parameter들(location=location 등)이 들어있음
+    return i18next.t(key, options.hash || {});
+  });
+
+export { transporter, loadTemplate };
\ No newline at end of file
diff --git a/lib/mail/sendEmail.ts b/lib/mail/sendEmail.ts
new file mode 100644
index 00000000..48cc1fbc
--- /dev/null
+++ b/lib/mail/sendEmail.ts
@@ -0,0 +1,36 @@
+import { useTranslation } from '@/i18n';
+import { transporter, loadTemplate } from './mailer';
+import handlebars from 'handlebars';
+
+interface SendEmailOptions {
+  to: string;
+  subject: string;
+  template: string; // 템플릿 파일명(확장자 제외)
+  context: Record<string, any>; // 템플릿에 주입할 데이터
+  attachments?: {   // NodeMailer "Attachment" 타입
+    filename?: string
+    path?: string
+    content?: Buffer | string
+    // ...
+  }[]
+}
+
+export async function sendEmail({ to, subject, template, context,  attachments = []}: SendEmailOptions) {
+  const { t, i18n } = await useTranslation(context.language ?? "en", "translation");
+
+  handlebars.registerHelper("t", function (key: string, options: any) {
+    // 여기서 i18n은 로컬 인스턴스
+    return i18n.t(key, options.hash || {});
+  });
+
+  const html = loadTemplate(template, context);
+
+  await transporter.sendMail({
+    from: 'EVCP" <dujin.kim@dtsolution.co.kr>',
+    to,
+    subject,
+    html,
+    attachments
+  });
+}
+
diff --git a/lib/mail/templates/admin-created.hbs b/lib/mail/templates/admin-created.hbs
new file mode 100644
index 00000000..7be7f15d
--- /dev/null
+++ b/lib/mail/templates/admin-created.hbs
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>{{t "adminCreated.title" lng=language}}</title>
+    <style>
+      /* 간단한 스타일 예시 */
+      body {
+        font-family: Arial, sans-serif;
+        margin: 0;
+        padding: 16px;
+        background-color: #f5f5f5;
+      }
+      .container {
+        max-width: 600px;
+        margin: 0 auto;
+        background-color: #ffffff;
+        padding: 24px;
+        border-radius: 8px;
+      }
+      h1 {
+        font-size: 20px;
+        margin-bottom: 16px;
+      }
+      p {
+        font-size: 14px;
+        line-height: 1.6;
+      }
+      .btn {
+        display: inline-block;
+        margin-top: 16px;
+        padding: 12px 24px;
+        background-color: #1D4ED8;
+        color: #ffffff !important;
+        text-decoration: none;
+        border-radius: 4px;
+      }
+      .footer {
+        margin-top: 24px;
+        font-size: 12px;
+        color: #888888;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <!-- 상단 로고/타이틀 영역 -->
+      <div style="text-align: center;">
+        <!-- 필요 시 로고 이미지 -->
+        <!-- <img src="https://your-logo-url.com/logo.png" alt="EVCP" width="120" /> -->
+      </div>
+
+      <h1>{{t "adminCreated.title" lng=language}}</h1>
+
+      <p>
+        {{t "adminCreated.greeting" lng=language}}, <strong>{{name}}</strong>.
+      </p>
+
+      <p>
+        {{t "adminCreated.body1" lng=language}}
+      </p>
+
+      <p>
+        <a class="btn" href="{{loginUrl}}" target="_blank">{{t "adminCreated.loginCTA" lng=language}}</a>
+      </p>
+
+      <p>
+        {{t "adminCreated.supportMsg" lng=language}}
+      </p>
+
+      <div class="footer">
+        <p>
+          {{t "adminCreated.footerDisclaimer" lng=language}}
+        </p>
+      </div>
+    </div>
+  </body>
+</html>
\ No newline at end of file
diff --git a/lib/mail/templates/admin-email-changed.hbs b/lib/mail/templates/admin-email-changed.hbs
new file mode 100644
index 00000000..7b8ca473
--- /dev/null
+++ b/lib/mail/templates/admin-email-changed.hbs
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>{{t "adminEmailChanged.title" lng=language}}</title>
+    <style>
+      /* 간단한 스타일 예시 */
+      body {
+        font-family: Arial, sans-serif;
+        margin: 0;
+        padding: 16px;
+        background-color: #f5f5f5;
+      }
+      .container {
+        max-width: 600px;
+        margin: 0 auto;
+        background-color: #ffffff;
+        padding: 24px;
+        border-radius: 8px;
+      }
+      h1 {
+        font-size: 20px;
+        margin-bottom: 16px;
+      }
+      p {
+        font-size: 14px;
+        line-height: 1.6;
+      }
+      .btn {
+        display: inline-block;
+        margin-top: 16px;
+        padding: 12px 24px;
+        background-color: #1D4ED8;
+        color: #ffffff !important;
+        text-decoration: none;
+        border-radius: 4px;
+      }
+      .footer {
+        margin-top: 24px;
+        font-size: 12px;
+        color: #888888;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <!-- 상단 로고/타이틀 영역 -->
+      <div style="text-align: center;">
+        <!-- 필요 시 로고 이미지 -->
+        <!-- <img src="https://your-logo-url.com/logo.png" alt="EVCP" width="120" /> -->
+      </div>
+
+      <!-- 메일 제목 -->
+      <h1>{{t "adminEmailChanged.title" lng=language}}</h1>
+
+      <!-- 인사말 -->
+      <p>
+        {{t "adminEmailChanged.greeting" lng=language}}, <strong>{{name}}</strong>.
+      </p>
+
+      <!-- 이전 이메일 / 새 이메일 안내 -->
+      <p>
+        {{t "adminEmailChanged.body.intro" lng=language}}
+      </p>
+      <p>
+        <strong>{{t "adminEmailChanged.body.oldEmail" lng=language}}:</strong> {{oldEmail}}<br />
+        <strong>{{t "adminEmailChanged.body.newEmail" lng=language}}:</strong> {{newEmail}}
+      </p>
+
+      <!-- 버튼(로그인 / 대시보드 등) -->
+      <p>
+        <a class="btn" href="{{loginUrl}}" target="_blank">
+          {{t "adminEmailChanged.loginCTA" lng=language}}
+        </a>
+      </p>
+
+      <!-- 도움 요청 문구 -->
+      <p>
+        {{t "adminEmailChanged.supportMsg" lng=language}}
+      </p>
+
+      <!-- 푸터 -->
+      <div class="footer">
+        <p>
+          {{t "adminEmailChanged.footerDisclaimer" lng=language}}
+        </p>
+      </div>
+    </div>
+  </body>
+</html>
\ No newline at end of file
diff --git a/lib/mail/templates/otp.hbs b/lib/mail/templates/otp.hbs
new file mode 100644
index 00000000..adeda416
--- /dev/null
+++ b/lib/mail/templates/otp.hbs
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <title>{{subject}}</title>
+    <style>
+      body {
+        font-family: Arial, sans-serif;
+        background: #f9fafb;
+        color: #111827;
+        padding: 20px;
+      }
+      .container {
+        max-width: 480px;
+        margin: 0 auto;
+        background: #ffffff;
+        border: 1px solid #e5e7eb;
+        border-radius: 6px;
+        padding: 24px;
+      }
+      h1 {
+        font-size: 20px;
+        margin-bottom: 8px;
+        color: #111827;
+      }
+      p {
+        line-height: 1.5;
+        margin-bottom: 16px;
+      }
+      .code {
+        display: inline-block;
+        font-size: 24px;
+        font-weight: bold;
+        letter-spacing: 2px;
+        margin: 12px 0;
+        background: #f3f4f6;
+        padding: 8px 16px;
+        border-radius: 4px;
+      }
+      a {
+        color: #3b82f6;
+        text-decoration: none;
+      }
+      .footer {
+        font-size: 12px;
+        color: #6b7280;
+        margin-top: 24px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <h1>{{t "verifyYourEmailTitle"}}</h1>
+      <p>{{t "greeting"}}, {{name}}</p>
+
+      <p>
+        {{t "receivedSignInAttempt" location=location}}
+      </p>
+
+      <p>
+        {{t "enterCodeInstruction"}}
+      </p>
+
+      <p class="code">{{otp}}</p>
+
+      <p>
+        <a href="{{verificationUrl}}">{{verificationUrl}}</a>
+      </p>
+
+
+      <div class="footer">
+        {{t "securityWarning"}}
+      </div>
+    </div>
+  </body>
+</html>
\ No newline at end of file
diff --git a/lib/mail/templates/rfq-invite.hbs b/lib/mail/templates/rfq-invite.hbs
new file mode 100644
index 00000000..25bd96eb
--- /dev/null
+++ b/lib/mail/templates/rfq-invite.hbs
@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>{{t "rfqInvite.title" lng=language}} #{{rfqCode}}</title>
+    <style>
+      /* 간단한 스타일 예시 */
+      body {
+        font-family: Arial, sans-serif;
+        margin: 0;
+        padding: 16px;
+        background-color: #f5f5f5;
+      }
+      .container {
+        max-width: 600px;
+        margin: 0 auto;
+        background-color: #ffffff;
+        padding: 24px;
+        border-radius: 8px;
+      }
+      h1 {
+        font-size: 20px;
+        margin-bottom: 16px;
+      }
+      p {
+        font-size: 14px;
+        line-height: 1.6;
+      }
+      ul {
+        margin-left: 20px;
+      }
+      li {
+        font-size: 14px;
+        line-height: 1.6;
+      }
+      .btn {
+        display: inline-block;
+        margin-top: 16px;
+        padding: 12px 24px;
+        background-color: #1D4ED8;
+        color: #ffffff !important;
+        text-decoration: none;
+        border-radius: 4px;
+      }
+      .footer {
+        margin-top: 24px;
+        font-size: 12px;
+        color: #888888;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <!-- 상단 로고/타이틀 영역 -->
+      <div style="text-align: center;">
+        <!-- 필요 시 로고 이미지 -->
+        <!-- <img src="https://your-logo-url.com/logo.png" alt="EVCP" width="120" /> -->
+      </div>
+
+      <!-- 메인 타이틀: RFQ 초대 -->
+      <h1>
+        {{t "rfqInvite.heading" lng=language}}
+        #{{rfqCode}}
+      </h1>
+
+      <!-- 벤더에게 인사말 -->
+      <p>
+        {{t "rfqInvite.greeting" lng=language}}, <strong>Vendor #{{vendorId}}</strong>.
+      </p>
+
+      <!-- 프로젝트/RFQ 정보 -->
+      <p>
+        {{t "rfqInvite.bodyIntro" lng=language}}
+        <br />
+        <strong>{{t "rfqInvite.projectName" lng=language}}:</strong> {{projectName}}<br />
+        <strong>{{t "rfqInvite.projectCode" lng=language}}:</strong> {{projectCode}}<br />
+        <strong>{{t "rfqInvite.dueDate" lng=language}}:</strong> {{dueDate}}<br />
+        <strong>{{t "rfqInvite.description" lng=language}}:</strong> {{description}}
+      </p>
+
+      <!-- 아이템 목록 -->
+      <p>
+        {{t "rfqInvite.itemListTitle" lng=language}}
+      </p>
+      <ul>
+        {{#each items}}
+          <li>
+            <strong>{{this.itemCode}}</strong>
+            ({{this.quantity}} {{this.uom}})
+            - {{this.description}}
+          </li>
+        {{/each}}
+      </ul>
+
+      <!-- 로그인/접속 안내 -->
+      <p>
+        {{t "rfqInvite.moreDetail" lng=language}}
+      </p>
+      <a class="btn" href="{{loginUrl}}" target="_blank">
+        {{t "rfqInvite.viewButton" lng=language}}
+      </a>
+
+      <!-- 기타 안내 문구 -->
+      <p>
+        {{t "rfqInvite.supportMsg" lng=language}}
+      </p>
+
+      <!-- 푸터 -->
+      <div class="footer">
+        <p>
+          {{t "rfqInvite.footerDisclaimer" lng=language}}
+        </p>
+      </div>
+    </div>
+  </body>
+</html>
\ No newline at end of file
diff --git a/lib/mail/templates/vendor-active.hbs b/lib/mail/templates/vendor-active.hbs
new file mode 100644
index 00000000..6458e2fb
--- /dev/null
+++ b/lib/mail/templates/vendor-active.hbs
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>벤더 등록이 완료되었습니다</title>
+  <style>
+    body { font-family: 'Malgun Gothic', sans-serif; line-height: 1.6; }
+    .container { max-width: 600px; margin: 0 auto; padding: 20px; }
+    .header { background-color: #f5f5f5; padding: 10px; text-align: center; }
+    .content { padding: 20px 0; }
+    .vendor-code { font-size: 18px; font-weight: bold; background-color: #f0f0f0; 
+                  padding: 10px; margin: 15px 0; text-align: center; }
+    .button { display: inline-block; background-color: #28a745; color: white; 
+              padding: 10px 20px; text-decoration: none; border-radius: 4px; }
+    .footer { margin-top: 20px; font-size: 12px; color: #777; }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div class="header">
+      <h2>벤더 등록이 완료되었습니다</h2>
+    </div>
+    
+    <div class="content">
+      <p>{{vendorName}} 귀하,</p>
+      
+      <p>축하합니다! 귀사의 벤더 등록이 완료되었으며 벤더 정보가 당사 시스템에 성공적으로 등록되었습니다.</p>
+      
+      <p>귀사의 벤더 코드는 다음과 같습니다:</p>
+      <div class="vendor-code">{{vendorCode}}</div>
+      
+      <p>향후 모든 의사소통 및 거래 시 이 벤더 코드를 사용해 주십시오. 이제 벤더 포털에 접속하여 계정 관리, 발주서 확인 및 인보이스 제출을 할 수 있습니다.</p>
+      
+      <p style="text-align: center; margin: 25px 0;">
+        <a href="{{portalUrl}}" class="button">벤더 포털 접속</a>
+      </p>
+      
+      <p>벤더 계정에 관한 질문이나 도움이 필요하시면 당사 벤더 관리팀에 문의해 주십시오.</p>
+      
+      <p>파트너십에 감사드립니다.</p>
+      
+      <p>감사합니다.<br>
+      eVCP 팀</p>
+    </div>
+    
+    <div class="footer">
+      <p>이 메시지는 자동으로 발송되었습니다. 이 이메일에 회신하지 마십시오.</p>
+    </div>
+  </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/lib/mail/templates/vendor-pq-comment.hbs b/lib/mail/templates/vendor-pq-comment.hbs
new file mode 100644
index 00000000..b60deedc
--- /dev/null
+++ b/lib/mail/templates/vendor-pq-comment.hbs
@@ -0,0 +1,128 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>PQ Review Comments</title>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      line-height: 1.6;
+      color: #333;
+      margin: 0;
+      padding: 0;
+    }
+    .container {
+      max-width: 600px;
+      margin: 0 auto;
+      padding: 20px;
+    }
+    .header {
+      text-align: center;
+      padding: 20px 0;
+      border-bottom: 1px solid #eee;
+    }
+    .content {
+      padding: 20px 0;
+    }
+    .footer {
+      text-align: center;
+      padding: 20px 0;
+      font-size: 12px;
+      color: #999;
+      border-top: 1px solid #eee;
+    }
+    .btn {
+      display: inline-block;
+      padding: 10px 20px;
+      font-size: 16px;
+      color: #fff;
+      background-color: #0071bc;
+      text-decoration: none;
+      border-radius: 4px;
+      margin: 20px 0;
+    }
+    .comment-section {
+      margin: 20px 0;
+      padding: 15px;
+      background-color: #f9f9f9;
+      border-left: 4px solid #0071bc;
+    }
+    .comment-item {
+      margin-bottom: 15px;
+      padding-bottom: 15px;
+      border-bottom: 1px solid #eee;
+    }
+    .comment-item:last-child {
+      border-bottom: none;
+    }
+    .comment-code {
+      font-weight: bold;
+      color: #0071bc;
+      display: inline-block;
+      min-width: 60px;
+    }
+    .comment-title {
+      font-weight: bold;
+      color: #333;
+    }
+    .important {
+      color: #d14;
+      font-weight: bold;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div class="header">
+      <h1>PQ Review Comments</h1>
+    </div>
+    
+    <div class="content">
+      <p>Dear {{name}} ({{vendorCode}}),</p>
+      
+      <p>Thank you for submitting your PQ information. Our review team has completed the initial review and has requested some changes or additional information.</p>
+      
+      <p><span class="important">Action Required:</span> Please log in to your account and update your PQ submission based on the comments below.</p>
+      
+      {{#if hasGeneralComment}}
+      <div class="comment-section">
+        <h3>General Comments:</h3>
+        <p>{{generalComment}}</p>
+      </div>
+      {{/if}}
+      
+      <div class="comment-section">
+        <h3>Specific Item Comments ({{commentCount}}):</h3>
+        {{#each comments}}
+        <div class="comment-item">
+          <div>
+            <span class="comment-code">{{code}}</span>
+            <span class="comment-title">{{checkPoint}}</span>
+          </div>
+          <p>{{text}}</p>
+        </div>
+        {{/each}}
+      </div>
+      
+      <p>Please review these comments and make the necessary updates to your PQ submission. Once you have made the requested changes, you can resubmit your PQ for further review.</p>
+      
+      <div style="text-align: center;">
+        <a href="{{loginUrl}}" class="btn">Log in to update your PQ</a>
+      </div>
+      
+      <p>If you have any questions or need assistance, please contact our support team.</p>
+      
+      <p>Thank you for your cooperation.</p>
+      
+      <p>Best regards,<br>
+      PQ Review Team</p>
+    </div>
+    
+    <div class="footer">
+      <p>This is an automated email. Please do not reply to this message.</p>
+      <p>&copy; {{currentYear}} Your Company Name. All rights reserved.</p>
+    </div>
+  </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/lib/mail/templates/vendor-pq-status.hbs b/lib/mail/templates/vendor-pq-status.hbs
new file mode 100644
index 00000000..541a6137
--- /dev/null
+++ b/lib/mail/templates/vendor-pq-status.hbs
@@ -0,0 +1,48 @@
+<!-- file: templates/vendor-pq-status.hbs -->
+
+<html>
+  <body style="font-family: sans-serif; margin: 0; padding: 0;">
+    <table width="100%" cellspacing="0" cellpadding="20" style="background-color: #f7f7f7;">
+      <tr>
+        <td>
+          <table width="600" cellspacing="0" cellpadding="20" style="background-color: #ffffff; margin: 0 auto;">
+            <tr>
+              <td style="text-align: center;">
+                <h1 style="margin-bottom: 0.5rem;">Vendor PQ Status Update</h1>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <p>Hello {{name}},</p>
+                <p>
+                  Your vendor status has been updated to 
+                  <strong>{{status}}</strong>.
+                </p>
+                <p>
+                  You can log in to see details and take further action:
+                  <br />
+                  <a href="{{loginUrl}}" style="color: #007bff; text-decoration: underline;">
+                    Go to Portal
+                  </a>
+                </p>
+                <p>
+                  If you have any questions, feel free to contact us.
+                </p>
+                <p>Thank you,<br/>
+                   The PQ Team
+                </p>
+              </td>
+            </tr>
+            <tr>
+              <td style="text-align: center; border-top: 1px solid #eee;">
+                <small style="color: #999;">
+                  &copy; 2023 MyCompany
+                </small>
+              </td>
+            </tr>
+          </table>
+        </td>
+      </tr>
+    </table>
+  </body>
+</html>
\ No newline at end of file
diff --git a/lib/parsers.ts b/lib/parsers.ts
new file mode 100644
index 00000000..20f3107b
--- /dev/null
+++ b/lib/parsers.ts
@@ -0,0 +1,94 @@
+import type { ExtendedSortingState, Filter } from "@/types/table"
+import { type Row } from "@tanstack/react-table"
+import { createParser } from "nuqs/server"
+import { z } from "zod"
+
+import { dataTableConfig } from "@/config/data-table"
+
+export const sortingItemSchema = z.object({
+  id: z.string(),
+  desc: z.boolean(),
+})
+
+/**
+ * Creates a parser for TanStack Table sorting state.
+ * @param originalRow The original row data to validate sorting keys against.
+ * @returns A parser for TanStack Table sorting state.
+ */
+export const getSortingStateParser = <TData>(
+  originalRow?: Row<TData>["original"]
+) => {
+  const validKeys = originalRow ? new Set(Object.keys(originalRow)) : null
+
+  return createParser<ExtendedSortingState<TData>>({
+    parse: (value) => {
+      try {
+        const parsed = JSON.parse(value)
+        const result = z.array(sortingItemSchema).safeParse(parsed)
+
+        if (!result.success) return null
+
+        if (validKeys && result.data.some((item) => !validKeys.has(item.id))) {
+          return null
+        }
+
+        return result.data as ExtendedSortingState<TData>
+      } catch {
+        return null
+      }
+    },
+    serialize: (value) => JSON.stringify(value),
+    eq: (a, b) =>
+      a.length === b.length &&
+      a.every(
+        (item, index) =>
+          item.id === b[index]?.id && item.desc === b[index]?.desc
+      ),
+  })
+}
+
+export const filterSchema = z.object({
+  id: z.string(),
+  value: z.union([z.string(), z.array(z.string())]),
+  type: z.enum(dataTableConfig.columnTypes),
+  operator: z.enum(dataTableConfig.globalOperators),
+  rowId: z.string(),
+})
+
+/**
+ * Create a parser for data table filters.
+ * @param originalRow The original row data to create the parser for.
+ * @returns A parser for data table filters state.
+ */
+export const getFiltersStateParser = <T>(originalRow?: Row<T>["original"]) => {
+  const validKeys = originalRow ? new Set(Object.keys(originalRow)) : null
+
+  return createParser<Filter<T>[]>({
+    parse: (value) => {
+      try {
+        const parsed = JSON.parse(value)
+        const result = z.array(filterSchema).safeParse(parsed)
+
+        if (!result.success) return null
+
+        if (validKeys && result.data.some((item) => !validKeys.has(item.id))) {
+          return null
+        }
+
+        return result.data as Filter<T>[]
+      } catch {
+        return null
+      }
+    },
+    serialize: (value) => JSON.stringify(value),
+    eq: (a, b) =>
+      a.length === b.length &&
+      a.every(
+        (filter, index) =>
+          filter.id === b[index]?.id &&
+          filter.value === b[index]?.value &&
+          filter.type === b[index]?.type &&
+          filter.operator === b[index]?.operator
+      ),
+  })
+}
diff --git a/lib/po/repository.ts b/lib/po/repository.ts
new file mode 100644
index 00000000..78d90ba7
--- /dev/null
+++ b/lib/po/repository.ts
@@ -0,0 +1,44 @@
+import db from "@/db/db";
+import { contractsDetailView } from "@/db/schema/contract";
+import {
+    eq,
+    inArray,
+    not,
+    asc,
+    desc,
+    and,
+    ilike,
+    gte,
+    lte,
+    count,
+    gt,
+} from "drizzle-orm";
+import { PgTransaction } from "drizzle-orm/pg-core";
+
+export async function selectPos(
+    tx: PgTransaction<any, any, any>,
+    params: {
+        where?: any; // drizzle-orm의 조건식 (and, eq...) 등
+        orderBy?: (ReturnType<typeof asc> | ReturnType<typeof desc>)[];
+        offset?: number;
+        limit?: number;
+    }
+) {
+    const { where, orderBy, offset = 0, limit = 10 } = params;
+
+    return tx
+        .select()
+        .from(contractsDetailView)
+        .where(where)
+        .orderBy(...(orderBy ?? []))
+        .offset(offset)
+        .limit(limit);
+}
+/** 총 개수 count */
+export async function countPos(
+    tx: PgTransaction<any, any, any>,
+    where?: any
+) {
+    const res = await tx.select({ count: count() }).from(contractsDetailView).where(where);
+    return res[0]?.count ?? 0;
+}
diff --git a/lib/po/service.ts b/lib/po/service.ts
new file mode 100644
index 00000000..dc398201
--- /dev/null
+++ b/lib/po/service.ts
@@ -0,0 +1,431 @@
+"use server";
+
+import { headers } from "next/headers";
+import db from "@/db/db";
+import { GetPOSchema } from "./validations";
+import { unstable_cache } from "@/lib/unstable-cache";
+import { filterColumns } from "@/lib/filter-columns";
+import {
+  asc,
+  desc,
+  ilike,
+  inArray,
+  and,
+  gte,
+  lte,
+  not,
+  or,
+  eq,
+  count,
+} from "drizzle-orm";
+import { countPos, selectPos } from "./repository";
+
+import {
+  contractEnvelopes,
+  contractsDetailView,
+  contractSigners,
+  contracts,
+} from "@/db/schema/contract";
+import { vendors, vendorContacts } from "@/db/schema/vendors";
+import { revalidatePath } from "next/cache";
+import * as z from "zod";
+import { POContent } from "@/lib/docuSign/types";
+
+/**
+ * PQ 목록 조회
+ */
+export async function getPOs(input: GetPOSchema) {
+  return unstable_cache(
+    async () => {
+      try {
+        const offset = (input.page - 1) * input.perPage;
+
+        // 1. Try a simple query first to make sure the view works at all
+        try {
+          const testQuery = await db
+            .select({ count: count() })
+            .from(contractsDetailView);
+          console.log("Test query result:", testQuery);
+        } catch (testErr) {
+          console.error("Test query failed:", testErr);
+        }
+
+        // 2. Build where clause with more careful handling
+        let advancedWhere;
+        try {
+          advancedWhere = filterColumns({
+            table: contractsDetailView,
+            filters: input.filters,
+            joinOperator: input.joinOperator,
+          });
+          console.log("Advanced where clause built successfully");
+        } catch (whereErr) {
+          console.error("Error building advanced where:", whereErr);
+          advancedWhere = undefined;
+        }
+
+        let globalWhere;
+        if (input.search) {
+          try {
+            const s = `%${input.search}%`;
+            globalWhere = or(
+              ilike(contractsDetailView.contractNo, s),
+              ilike(contractsDetailView.contractName, s)
+            );
+            console.log("Global where clause built successfully");
+          } catch (searchErr) {
+            console.error("Error building search where:", searchErr);
+            globalWhere = undefined;
+          }
+        }
+
+        // 3. Combine where clauses safely
+        let finalWhere;
+        if (advancedWhere && globalWhere) {
+          finalWhere = and(advancedWhere, globalWhere);
+        } else {
+          finalWhere = advancedWhere || globalWhere;
+        }
+
+        // 4. Build order by
+        let orderBy;
+        try {
+          orderBy =
+            input.sort.length > 0
+              ? input.sort.map((item) =>
+                  item.desc
+                    ? desc(contractsDetailView[item.id])
+                    : asc(contractsDetailView[item.id])
+                )
+              : [asc(contractsDetailView.createdAt)];
+        } catch (orderErr) {
+          console.error("Error building order by:", orderErr);
+          orderBy = [asc(contractsDetailView.createdAt)];
+        }
+
+        // 5. Execute queries with proper error handling
+        let data = [];
+        let total = 0;
+
+        try {
+          // Try without transaction first for better error visibility
+          const queryBuilder = db.select().from(contractsDetailView);
+
+          // Add where clause if it exists
+          if (finalWhere) {
+            queryBuilder.where(finalWhere);
+          }
+
+          // Add ordering
+          queryBuilder.orderBy(...orderBy);
+
+          // Add pagination
+          queryBuilder.offset(offset).limit(input.perPage);
+
+          // Execute query
+          data = await queryBuilder;
+
+          // Get total count
+          const countBuilder = db
+            .select({ count: count() })
+            .from(contractsDetailView);
+
+          if (finalWhere) {
+            countBuilder.where(finalWhere);
+          }
+
+          const countResult = await countBuilder;
+          total = countResult[0]?.count || 0;
+        } catch (queryErr) {
+          console.error("Query execution failed:", queryErr);
+          throw queryErr; // Rethrow to be caught by the outer try/catch
+        }
+
+        const pageCount = Math.ceil(total / input.perPage);
+
+        return { data, pageCount };
+      } catch (err) {
+        // More detailed error logging
+        console.error("Error in getPOs:", err);
+        if (err instanceof Error) {
+          console.error("Error message:", err.message);
+          console.error("Error stack:", err.stack);
+        }
+        return { data: [], pageCount: 0 };
+      }
+    },
+    [JSON.stringify(input)],
+    {
+      revalidate: 3600,
+      tags: [`po`],
+    }
+  )();
+}
+
+// Schema for a single signer
+const signerSchema = z.object({
+  signerEmail: z.string().email(),
+  signerName: z.string().min(1),
+  signerPosition: z.string(),
+  signerType: z.enum(["REQUESTER", "VENDOR"]),
+  vendorContactId: z.number().optional(),
+});
+
+// Schema for the entire request
+const signatureRequestSchema = z.object({
+  contractId: z.number(),
+  signers: z.array(signerSchema).min(1, "At least one signer is required"),
+});
+
+/**
+ * Server action to request electronic signatures for a contract from multiple parties
+ */
+export async function requestSignatures(
+  input: z.infer<typeof signatureRequestSchema>
+): Promise<{ success: boolean; message: string }> {
+  try {
+    // Validate the input
+    const validatedData = signatureRequestSchema.parse(input);
+
+    const headersList = await headers();
+    const host = headersList.get("host");
+    const proto = headersList.get("x-forwarded-proto") || "http"; // 기본값은 http
+    const origin = `${proto}://${host}`;
+
+    // Use a transaction to ensure data consistency
+    return await db.transaction(async (tx) => {
+      // Get contract details using standard select
+      const [contract] = await tx
+        .select()
+        .from(contracts)
+        .where(eq(contracts.id, validatedData.contractId))
+        .limit(1);
+
+      if (!contract) {
+        throw new Error(
+          `Contract with ID ${validatedData.contractId} not found`
+        );
+      }
+
+      // Generate unique envelope ID
+      // const envelopeId = `env-${Date.now()}-${Math.floor(
+      //   Math.random() * 1000
+      // )}`;
+
+      // Get contract number or fallback
+      const contractNo =
+        contract.contractNo || `contract-${validatedData.contractId}`;
+
+      const signer = validatedData.signers.find(
+        (c) => c.signerType === "REQUESTER"
+      );
+
+      const vendor = validatedData.signers.find(
+        (c) => c.signerType === "VENDOR"
+      );
+
+      if (!vendor || !signer) {
+        return {
+          success: true,
+          message: `협력업체 서명자를 확인할 수 없습니다.`,
+        };
+      }
+
+      const { vendorContactId } = vendor;
+
+      if (!vendorContactId) {
+        return {
+          success: true,
+          message: `계약 번호를 확인할 수 없습니다.`,
+        };
+      }
+
+      const [vendorInfoData] = await tx
+        .select({
+          vendorContract: vendorContacts,
+          vendorInfo: vendors,
+        })
+        .from(vendorContacts)
+        .leftJoin(vendors, eq(vendorContacts.vendorId, vendors.id))
+        .where(eq(vendorContacts.id, vendorContactId))
+        .limit(1);
+
+      const { vendorContract, vendorInfo } = vendorInfoData;
+
+      const docuSignTempId = "73b04617-477c-4ec8-8a32-c8da701f6b0c";
+
+      const { totalAmount = "0", tax = "0" } = contract;
+
+      const totalAmountNum = Number(totalAmount);
+      const taxNum = Number(tax);
+      const taxRate = ((taxNum / totalAmountNum) * 100).toFixed(2);
+
+      const contractInfo: POContent = [
+        { tabLabel: "po_no", value: contractNo },
+        { tabLabel: "vendor_name", value: vendorInfo?.vendorName ?? "" },
+        { tabLabel: "po_date", value: contract?.startDate ?? "" },
+        { tabLabel: "project_name", value: contract.contractName },
+        { tabLabel: "vendor_location", value: vendorInfo?.address ?? "" },
+        { tabLabel: "shi_email", value: signer.signerEmail },
+        { tabLabel: "vendor_email", value: vendorContract.contactEmail },
+        { tabLabel: "po_desc", value: contract.contractName },
+        { tabLabel: "qty", value: "1" },
+        { tabLabel: "unit_price", value: totalAmountNum.toLocaleString() },
+        { tabLabel: "total", value: totalAmountNum.toLocaleString() },
+        {
+          tabLabel: "grand_total_amount",
+          value: totalAmountNum.toLocaleString(),
+        },
+        { tabLabel: "tax_rate", value: taxRate },
+        { tabLabel: "tax_total", value: taxNum.toLocaleString() },
+        {
+          tabLabel: "payment_amount",
+          value: (totalAmountNum + taxNum).toLocaleString(),
+        },
+        {
+          tabLabel: "remark",
+          value: `결제 조건: ${contract.paymentTerms}
+납품 조건: ${contract.deliveryTerms}
+납품 기한: ${contract.deliveryDate}
+납품 장소: ${contract.deliveryLocation}     
+계약 종료일/유효 기간: ${contract.endDate}          
+Remarks:${contract.remarks}`,
+        },
+      ];
+
+      const sendDocuSign = await fetch(`${origin}/api/po/sendDocuSign`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json", // ✅ 이거 꼭 있어야 함!
+        },
+        body: JSON.stringify({
+          docuSignTempId,
+          contractInfo,
+          contractorInfo: {
+            email: "dts@dtsolution.co.kr",
+            name: "삼성중공업",
+            roleName: "shi",
+          },
+          subcontractorinfo: {
+            email: vendorContract.contactEmail,
+            name: vendorInfo?.vendorName,
+            roleName: "vendor",
+          },
+          ccInfo: [
+            // {
+            //   email: "kiman.kim@dtsolution.io",
+            //   name: "김기만",
+            //   roleName: "cc",
+            // },
+          ],
+        }),
+      }).then((data) => data.json());
+
+      const { success: sendDocuSignResult, envelopeId } = sendDocuSign;
+
+      if (!sendDocuSignResult) {
+        return {
+          success: false,
+          message: "DocuSign 전자 서명 발송에 실패하였습니다.",
+        };
+      }
+
+      // Create a single envelope for all signers
+      const [newEnvelope] = await tx
+        .insert(contractEnvelopes)
+        .values({
+          contractId: validatedData.contractId,
+          envelopeId: envelopeId,
+          envelopeStatus: "sent",
+          fileName: `${contractNo}-signature.pdf`, // Required field
+          filePath: `/contracts/${validatedData.contractId}/signatures`, // Required field
+          // Add any other required fields based on your schema
+        })
+        .returning();
+
+      // // Check for duplicate emails
+      const signerEmails = new Set();
+      for (const signer of validatedData.signers) {
+        if (signerEmails.has(signer.signerEmail)) {
+          throw new Error(`Duplicate signer email: ${signer.signerEmail}`);
+        }
+        signerEmails.add(signer.signerEmail);
+      }
+
+      // Create signer records for each signer
+      for (const signer of validatedData.signers) {
+        await tx.insert(contractSigners).values({
+          envelopeId: newEnvelope.id,
+          signerEmail: signer.signerEmail,
+          signerName: signer.signerName,
+          signerPosition: signer.signerPosition,
+          signerStatus: "sent",
+          signerType: signer.signerType,
+          // Only include vendorContactId if it's provided and the signer is a vendor
+          ...(signer.vendorContactId && signer.signerType === "VENDOR"
+            ? { vendorContactId: signer.vendorContactId }
+            : {}),
+        });
+      }
+
+      // Update contract status to indicate pending signatures
+      await tx
+        .update(contracts)
+        .set({ status: "PENDING_SIGNATURE" })
+        .where(eq(contracts.id, validatedData.contractId));
+
+      // In a real implementation, you would send the envelope to DocuSign or similar service
+      // For example:
+      // const docusignResult = await docusignClient.createEnvelope({
+      //   recipients: validatedData.signers.map(signer => ({
+      //     email: signer.signerEmail,
+      //     name: signer.signerName,
+      //     recipientType: signer.signerType === "REQUESTER" ? "signer" : "cc",
+      //     routingOrder: signer.signerType === "REQUESTER" ? 1 : 2,
+      //   })),
+      //   documentId: `contract-${validatedData.contractId}`,
+      //   // other DocuSign-specific parameters
+      // });
+
+      // Revalidate the path to refresh the data
+      revalidatePath("/po");
+
+      // Return success response
+      return {
+        success: true,
+        message: `Signature requests sent to ${validatedData.signers.length} recipient(s)`,
+      };
+    });
+  } catch (error) {
+    console.error("Error requesting electronic signatures:", error);
+    return {
+      success: false,
+      message:
+        error instanceof Error
+          ? error.message
+          : "Failed to send signature requests",
+    };
+  }
+}
+
+export async function getVendorContacts(vendorId: number) {
+  try {
+    const contacts = await db
+      .select({
+        id: vendorContacts.id,
+        contactName: vendorContacts.contactName,
+        contactEmail: vendorContacts.contactEmail,
+        contactPosition: vendorContacts.contactPosition,
+        contactPhone: vendorContacts.contactPhone,
+        isPrimary: vendorContacts.isPrimary,
+      })
+      .from(vendorContacts)
+      .where(eq(vendorContacts.vendorId, vendorId))
+      .orderBy(vendorContacts.isPrimary, vendorContacts.contactName);
+
+    return contacts;
+  } catch (error) {
+    console.error("Error fetching vendor contacts:", error);
+    throw new Error("Failed to fetch vendor contacts");
+  }
+}
diff --git a/lib/po/service_r1.ts b/lib/po/service_r1.ts
new file mode 100644
index 00000000..64af73c4
--- /dev/null
+++ b/lib/po/service_r1.ts
@@ -0,0 +1,282 @@
+"use server"
+
+import db from "@/db/db"
+import { GetPOSchema } from "./validations"
+import { unstable_cache } from "@/lib/unstable-cache";
+import { filterColumns } from "@/lib/filter-columns";
+import { asc, desc, ilike, inArray, and, gte, lte, not, or, eq, count} from "drizzle-orm";
+import { countPos, selectPos } from "./repository";
+
+import { contractEnvelopes, contractsDetailView, contractSigners,contracts  } from "@/db/schema/contract";
+import { revalidatePath } from "next/cache";
+import * as z from "zod"
+import { vendorContacts } from "@/db/schema/vendors";
+
+/**
+ * PQ 목록 조회
+ */
+export async function getPOs(input: GetPOSchema) {
+    return unstable_cache(
+        async () => {
+            try {
+                const offset = (input.page - 1) * input.perPage;
+                
+                // 1. Try a simple query first to make sure the view works at all
+                try {
+                    const testQuery = await db.select({ count: count() })
+                        .from(contractsDetailView);
+                    console.log("Test query result:", testQuery);
+                } catch (testErr) {
+                    console.error("Test query failed:", testErr);
+                }
+                
+                // 2. Build where clause with more careful handling
+                let advancedWhere;
+                try {
+                    advancedWhere = filterColumns({
+                        table: contractsDetailView,
+                        filters: input.filters,
+                        joinOperator: input.joinOperator,
+                    });
+                    console.log("Advanced where clause built successfully");
+                } catch (whereErr) {
+                    console.error("Error building advanced where:", whereErr);
+                    advancedWhere = undefined;
+                }
+                
+                let globalWhere;
+                if (input.search) {
+                    try {
+                        const s = `%${input.search}%`;
+                        globalWhere = or(
+                            ilike(contractsDetailView.contractNo, s),
+                            ilike(contractsDetailView.contractName, s),
+                        );
+                        console.log("Global where clause built successfully");
+                    } catch (searchErr) {
+                        console.error("Error building search where:", searchErr);
+                        globalWhere = undefined;
+                    }
+                }
+                
+                // 3. Combine where clauses safely
+                let finalWhere;
+                if (advancedWhere && globalWhere) {
+                    finalWhere = and(advancedWhere, globalWhere);
+                } else {
+                    finalWhere = advancedWhere || globalWhere;
+                }
+                
+                
+                // 4. Build order by
+                let orderBy;
+                try {
+                    orderBy = input.sort.length > 0
+                        ? input.sort.map((item) =>
+                            item.desc ? desc(contractsDetailView[item.id]) : asc(contractsDetailView[item.id])
+                        )
+                        : [asc(contractsDetailView.createdAt)];
+                } catch (orderErr) {
+                    console.error("Error building order by:", orderErr);
+                    orderBy = [asc(contractsDetailView.createdAt)];
+                }
+                
+                // 5. Execute queries with proper error handling
+                let data = [];
+                let total = 0;
+                
+                try {
+                    // Try without transaction first for better error visibility
+                    const queryBuilder = db.select()
+                        .from(contractsDetailView);
+                    
+                    // Add where clause if it exists
+                    if (finalWhere) {
+                        queryBuilder.where(finalWhere);
+                    }
+                    
+                    // Add ordering
+                    queryBuilder.orderBy(...orderBy);
+                    
+                    // Add pagination
+                    queryBuilder.offset(offset).limit(input.perPage);
+                    
+                    // Execute query
+                    data = await queryBuilder;
+                    
+                    // Get total count
+                    const countBuilder = db.select({ count: count() })
+                        .from(contractsDetailView);
+                    
+                    if (finalWhere) {
+                        countBuilder.where(finalWhere);
+                    }
+                    
+                    const countResult = await countBuilder;
+                    total = countResult[0]?.count || 0;
+                    
+                } catch (queryErr) {
+                    console.error("Query execution failed:", queryErr);
+                    throw queryErr; // Rethrow to be caught by the outer try/catch
+                }
+                
+                const pageCount = Math.ceil(total / input.perPage);
+                
+                return { data, pageCount };
+            } catch (err) {
+                // More detailed error logging
+                console.error("Error in getPOs:", err);
+                if (err instanceof Error) {
+                    console.error("Error message:", err.message);
+                    console.error("Error stack:", err.stack);
+                }
+                return { data: [], pageCount: 0 };
+            }
+        },
+        [JSON.stringify(input)],
+        {
+            revalidate: 3600,
+            tags: [`po`],
+        }
+    )();
+}
+
+// Schema for a single signer
+const signerSchema = z.object({
+    signerEmail: z.string().email(),
+    signerName: z.string().min(1),
+    signerPosition: z.string(),
+    signerType: z.enum(["REQUESTER", "VENDOR"]),
+    vendorContactId: z.number().optional(),
+  });
+  
+  // Schema for the entire request
+  const signatureRequestSchema = z.object({
+    contractId: z.number(),
+    signers: z.array(signerSchema).min(1, "At least one signer is required")
+  });
+  
+  /**
+   * Server action to request electronic signatures for a contract from multiple parties
+   */
+  export async function requestSignatures(
+    input: z.infer<typeof signatureRequestSchema>
+  ): Promise<{ success: boolean; message: string }> {
+    try {
+      // Validate the input
+      const validatedData = signatureRequestSchema.parse(input);
+      
+      // Use a transaction to ensure data consistency
+      return await db.transaction(async (tx) => {
+        // Get contract details using standard select
+        const [contract] = await tx
+          .select()
+          .from(contracts)
+          .where(eq(contracts.id, validatedData.contractId))
+          .limit(1);
+        
+        if (!contract) {
+          throw new Error(`Contract with ID ${validatedData.contractId} not found`);
+        }
+        
+        // Generate unique envelope ID
+        const envelopeId = `env-${Date.now()}-${Math.floor(Math.random() * 1000)}`;
+        
+        // Get contract number or fallback
+        const contractNo = contract.contractNo || `contract-${validatedData.contractId}`;
+        
+        // Create a single envelope for all signers
+        const [newEnvelope] = await tx.insert(contractEnvelopes)
+          .values({
+            contractId: validatedData.contractId,
+            envelopeId: envelopeId,
+            envelopeStatus: "sent",
+            fileName: `${contractNo}-signature.pdf`, // Required field
+            filePath: `/contracts/${validatedData.contractId}/signatures/${envelopeId}.pdf`, // Required field
+            // Add any other required fields based on your schema
+          })
+          .returning();
+        
+        // Check for duplicate emails
+        const signerEmails = new Set();
+        for (const signer of validatedData.signers) {
+          if (signerEmails.has(signer.signerEmail)) {
+            throw new Error(`Duplicate signer email: ${signer.signerEmail}`);
+          }
+          signerEmails.add(signer.signerEmail);
+        }
+        
+        // Create signer records for each signer
+        for (const signer of validatedData.signers) {
+          await tx.insert(contractSigners)
+            .values({
+              envelopeId: newEnvelope.id,
+              signerEmail: signer.signerEmail,
+              signerName: signer.signerName,
+              signerPosition: signer.signerPosition,
+              signerStatus: "sent",
+              signerType: signer.signerType,
+              // Only include vendorContactId if it's provided and the signer is a vendor
+              ...(signer.vendorContactId && signer.signerType === "VENDOR" 
+                ? { vendorContactId: signer.vendorContactId } 
+                : {})
+            });
+        }
+        
+        // Update contract status to indicate pending signatures
+        await tx.update(contracts)
+          .set({ status: "PENDING_SIGNATURE" })
+          .where(eq(contracts.id, validatedData.contractId));
+        
+        // In a real implementation, you would send the envelope to DocuSign or similar service
+        // For example:
+        // const docusignResult = await docusignClient.createEnvelope({
+        //   recipients: validatedData.signers.map(signer => ({
+        //     email: signer.signerEmail,
+        //     name: signer.signerName,
+        //     recipientType: signer.signerType === "REQUESTER" ? "signer" : "cc",
+        //     routingOrder: signer.signerType === "REQUESTER" ? 1 : 2,
+        //   })),
+        //   documentId: `contract-${validatedData.contractId}`,
+        //   // other DocuSign-specific parameters
+        // });
+        
+        // Revalidate the path to refresh the data
+        revalidatePath("/po");
+        
+        // Return success response
+        return { 
+          success: true, 
+          message: `Signature requests sent to ${validatedData.signers.length} recipient(s)` 
+        };
+      });
+    } catch (error) {
+      console.error("Error requesting electronic signatures:", error);
+      return { 
+        success: false, 
+        message: error instanceof Error ? error.message : "Failed to send signature requests" 
+      };
+    }
+  }
+
+  export async function getVendorContacts(vendorId: number) {
+    try {
+      const contacts = await db
+        .select({
+          id: vendorContacts.id,
+          contactName: vendorContacts.contactName,
+          contactEmail: vendorContacts.contactEmail,
+          contactPosition: vendorContacts.contactPosition,
+          contactPhone: vendorContacts.contactPhone,
+          isPrimary: vendorContacts.isPrimary,
+        })
+        .from(vendorContacts)
+        .where(eq(vendorContacts.vendorId, vendorId))
+        .orderBy(vendorContacts.isPrimary, vendorContacts.contactName);
+      
+      return contacts;
+    } catch (error) {
+      console.error("Error fetching vendor contacts:", error);
+      throw new Error("Failed to fetch vendor contacts");
+    }
+  }
\ No newline at end of file
diff --git a/lib/po/table/feature-flags-provider.tsx b/lib/po/table/feature-flags-provider.tsx
new file mode 100644
index 00000000..81131894
--- /dev/null
+++ b/lib/po/table/feature-flags-provider.tsx
@@ -0,0 +1,108 @@
+"use client"
+
+import * as React from "react"
+import { useQueryState } from "nuqs"
+
+import { dataTableConfig, type DataTableConfig } from "@/config/data-table"
+import { cn } from "@/lib/utils"
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+
+type FeatureFlagValue = DataTableConfig["featureFlags"][number]["value"]
+
+interface FeatureFlagsContextProps {
+  featureFlags: FeatureFlagValue[]
+  setFeatureFlags: (value: FeatureFlagValue[]) => void
+}
+
+const FeatureFlagsContext = React.createContext<FeatureFlagsContextProps>({
+  featureFlags: [],
+  setFeatureFlags: () => {},
+})
+
+export function useFeatureFlags() {
+  const context = React.useContext(FeatureFlagsContext)
+  if (!context) {
+    throw new Error(
+      "useFeatureFlags must be used within a FeatureFlagsProvider"
+    )
+  }
+  return context
+}
+
+interface FeatureFlagsProviderProps {
+  children: React.ReactNode
+}
+
+export function FeatureFlagsProvider({ children }: FeatureFlagsProviderProps) {
+  const [featureFlags, setFeatureFlags] = useQueryState<FeatureFlagValue[]>(
+    "flags",
+    {
+      defaultValue: [],
+      parse: (value) => value.split(",") as FeatureFlagValue[],
+      serialize: (value) => value.join(","),
+      eq: (a, b) =>
+        a.length === b.length && a.every((value, index) => value === b[index]),
+      clearOnDefault: true,
+      shallow: false,
+    }
+  )
+
+  return (
+    <FeatureFlagsContext.Provider
+      value={{
+        featureFlags,
+        setFeatureFlags: (value) => void setFeatureFlags(value),
+      }}
+    >
+      <div className="w-full overflow-x-auto">
+        <ToggleGroup
+          type="multiple"
+          variant="outline"
+          size="sm"
+          value={featureFlags}
+          onValueChange={(value: FeatureFlagValue[]) => setFeatureFlags(value)}
+          className="w-fit gap-0"
+        >
+          {dataTableConfig.featureFlags.map((flag, index) => (
+            <Tooltip key={flag.value}>
+              <ToggleGroupItem
+                value={flag.value}
+                className={cn(
+                  "gap-2 whitespace-nowrap rounded-none px-3 text-xs data-[state=on]:bg-accent/70 data-[state=on]:hover:bg-accent/90",
+                  {
+                    "rounded-l-sm border-r-0": index === 0,
+                    "rounded-r-sm":
+                      index === dataTableConfig.featureFlags.length - 1,
+                  }
+                )}
+                asChild
+              >
+                <TooltipTrigger>
+                  <flag.icon className="size-3.5 shrink-0" aria-hidden="true" />
+                  {flag.label}
+                </TooltipTrigger>
+              </ToggleGroupItem>
+              <TooltipContent
+                align="start"
+                side="bottom"
+                sideOffset={6}
+                className="flex max-w-60 flex-col space-y-1.5 border bg-background py-2 font-semibold text-foreground"
+              >
+                <div>{flag.tooltipTitle}</div>
+                <div className="text-xs text-muted-foreground">
+                  {flag.tooltipDescription}
+                </div>
+              </TooltipContent>
+            </Tooltip>
+          ))}
+        </ToggleGroup>
+      </div>
+      {children}
+    </FeatureFlagsContext.Provider>
+  )
+}
diff --git a/lib/po/table/po-table-columns.tsx b/lib/po/table/po-table-columns.tsx
new file mode 100644
index 00000000..c2c01136
--- /dev/null
+++ b/lib/po/table/po-table-columns.tsx
@@ -0,0 +1,155 @@
+"use client"
+
+import * as React from "react"
+import { type DataTableRowAction } from "@/types/table"
+import { type ColumnDef } from "@tanstack/react-table"
+import { InfoIcon, PenIcon } from "lucide-react"
+
+import { formatDate } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+
+import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header"
+import { poColumnsConfig } from "@/config/poColumnsConfig"
+import { ContractDetail } from "@/db/schema/contract"
+
+interface GetColumnsProps {
+  setRowAction: React.Dispatch<React.SetStateAction<DataTableRowAction<ContractDetail> | null>>
+}
+
+/**
+ * tanstack table column definitions with nested headers
+ */
+export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<ContractDetail>[] {
+  // ----------------------------------------------------------------
+  // 1) select column (checkbox) - if needed
+  // ----------------------------------------------------------------
+
+  // ----------------------------------------------------------------
+  // 2) actions column (buttons for item info and signature request)
+  // ----------------------------------------------------------------
+  const actionsColumn: ColumnDef<ContractDetail> = {
+    id: "actions",
+    enableHiding: false,
+    cell: function Cell({ row }) {
+      // Check if this contract already has a signature envelope
+      const hasSignature = row.original.hasSignature;
+      
+      return (
+        <div className="flex items-center space-x-1">
+          {/* Item Info Button */}
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={() => setRowAction({ row, type: "items" })}
+                >
+                  <InfoIcon className="h-4 w-4" aria-hidden="true" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                View Item Info
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+          
+          {/* Signature Request Button - only show if no signature exists */}
+          {!hasSignature && (
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    onClick={() => setRowAction({ row, type: "signature" })}
+                  >
+                    <PenIcon className="h-4 w-4" aria-hidden="true" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  Request Electronic Signature
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          )}
+        </div>
+      );
+    },
+    size: 80, // Increased width to accommodate both buttons
+  };
+
+  // ----------------------------------------------------------------
+  // 3) Regular columns grouped by group name
+  // ----------------------------------------------------------------
+  // 3-1) groupMap: { [groupName]: ColumnDef<ContractDetail>[] }
+  const groupMap: Record<string, ColumnDef<ContractDetail>[]> = {};
+
+  poColumnsConfig.forEach((cfg) => {
+    // Use "_noGroup" if no group is specified
+    const groupName = cfg.group || "_noGroup";
+
+    if (!groupMap[groupName]) {
+      groupMap[groupName] = [];
+    }
+
+    // Child column definition
+    const childCol: ColumnDef<ContractDetail> = {
+      accessorKey: cfg.id,
+      enableResizing: true,
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title={cfg.label} />
+      ),
+      meta: {
+        excelHeader: cfg.excelHeader,
+        group: cfg.group,
+        type: cfg.type,
+      },
+      cell: ({ row, cell }) => {
+        if (cfg.id === "createdAt" || cfg.id === "updatedAt") {
+          const dateVal = cell.getValue() as Date;
+          return formatDate(dateVal);
+        }
+
+        return row.getValue(cfg.id) ?? "";
+      },
+    };
+
+    groupMap[groupName].push(childCol);
+  });
+
+  // ----------------------------------------------------------------
+  // 3-2) Create actual parent columns (groups) from the groupMap
+  // ----------------------------------------------------------------
+  const nestedColumns: ColumnDef<ContractDetail>[] = [];
+
+  // Order can be fixed by pre-defining group order or sorting
+  // Here we just use Object.entries order
+  Object.entries(groupMap).forEach(([groupName, colDefs]) => {
+    if (groupName === "_noGroup") {
+      // No group → Add as top-level columns
+      nestedColumns.push(...colDefs);
+    } else {
+      // Parent column
+      nestedColumns.push({
+        id: groupName,
+        header: groupName, // "Basic Info", "Metadata", etc.
+        columns: colDefs,
+      });
+    }
+  });
+
+  // ----------------------------------------------------------------
+  // 4) Final column array: nestedColumns + actionsColumn
+  // ----------------------------------------------------------------
+  return [
+    ...nestedColumns,
+    actionsColumn,
+  ];
+}
\ No newline at end of file
diff --git a/lib/po/table/po-table-toolbar-actions.tsx b/lib/po/table/po-table-toolbar-actions.tsx
new file mode 100644
index 00000000..e6c8e79a
--- /dev/null
+++ b/lib/po/table/po-table-toolbar-actions.tsx
@@ -0,0 +1,53 @@
+"use client"
+
+import * as React from "react"
+import { type Table } from "@tanstack/react-table"
+import { Download, RefreshCcw, Upload } from "lucide-react"
+import { toast } from "sonner"
+
+import { exportTableToExcel } from "@/lib/export"
+import { Button } from "@/components/ui/button"
+import { ContractDetail } from "@/db/schema/contract"
+
+
+
+interface ItemsTableToolbarActionsProps {
+  table: Table<ContractDetail>
+}
+
+export function PoTableToolbarActions({ table }: ItemsTableToolbarActionsProps) {
+  // 파일 input을 숨기고, 버튼 클릭 시 참조해 클릭하는 방식
+  const fileInputRef = React.useRef<HTMLInputElement>(null)
+
+
+
+  return (
+    <div className="flex items-center gap-2">
+      {/** 4) Export 버튼 */}
+      <Button
+        variant="samsung"
+        size="sm"
+        className="gap-2"
+      >
+        <RefreshCcw className="size-4" aria-hidden="true" />
+        <span className="hidden sm:inline">Get POs</span>
+      </Button>
+
+      {/** 4) Export 버튼 */}
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={() =>
+          exportTableToExcel(table, {
+            filename: "tasks",
+            excludeColumns: ["select", "actions"],
+          })
+        }
+        className="gap-2"
+      >
+        <Download className="size-4" aria-hidden="true" />
+        <span className="hidden sm:inline">Export</span>
+      </Button>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/lib/po/table/po-table.tsx b/lib/po/table/po-table.tsx
new file mode 100644
index 00000000..49fbdda4
--- /dev/null
+++ b/lib/po/table/po-table.tsx
@@ -0,0 +1,164 @@
+"use client"
+
+import * as React from "react"
+import type {
+  DataTableAdvancedFilterField,
+  DataTableFilterField,
+  DataTableRowAction,
+} from "@/types/table"
+
+import { useDataTable } from "@/hooks/use-data-table"
+import { DataTable } from "@/components/data-table/data-table"
+import { DataTableAdvancedToolbar } from "@/components/data-table/data-table-advanced-toolbar"
+import { useFeatureFlags } from "./feature-flags-provider"
+import { toast } from "sonner"
+
+import { getPOs, requestSignatures } from "../service"
+import { getColumns } from "./po-table-columns"
+import { ContractDetail } from "@/db/schema/contract"
+import { PoTableToolbarActions } from "./po-table-toolbar-actions"
+import { SignatureRequestModal } from "./sign-request-dialog"
+
+interface ItemsTableProps {
+  promises: Promise<
+    [
+      Awaited<ReturnType<typeof getPOs>>,
+    ]
+  >
+}
+
+// Interface for signing party
+interface SigningParty {
+  signerEmail: string;
+  signerName: string;
+  signerPosition: string;
+  signerType: "REQUESTER" | "VENDOR";
+  vendorContactId?: number;
+}
+
+export function PoListsTable({ promises }: ItemsTableProps) {
+  const { featureFlags } = useFeatureFlags()
+  
+  const [{ data, pageCount }] = 
+    React.use(promises)
+    
+  const [rowAction, setRowAction] = 
+    React.useState<DataTableRowAction<ContractDetail> | null>(null)
+    
+  // State for signature request modal
+  const [signatureModalOpen, setSignatureModalOpen] = React.useState(false)
+  const [selectedContract, setSelectedContract] = React.useState<ContractDetail | null>(null)
+  
+  // Handle row actions
+  React.useEffect(() => {
+    if (!rowAction) return
+    
+    if (rowAction.type === "signature") {
+      // Open signature request modal with the selected contract
+      setSelectedContract(rowAction.row.original)
+      setSignatureModalOpen(true)
+      setRowAction(null)
+    } else if (rowAction.type === "items") {
+      // Existing handler for "items" action type
+      // Your existing code here
+      setRowAction(null)
+    }
+  }, [rowAction])
+  
+  const columns = React.useMemo(
+    () => getColumns({ setRowAction }),
+    [setRowAction]
+  )
+  
+  // Updated handler to work with multiple signers
+  const handleSignatureRequest = async (
+    values: { signers: SigningParty[] },
+    contractId: number
+  ): Promise<void> => {
+    try {
+      const result = await requestSignatures({
+        contractId,
+        signers: values.signers
+      });
+      
+      // Handle the result
+      if (result.success) {
+        toast.success(result.message || "Signature requests sent successfully");
+      } else {
+        toast.error(result.message || "Failed to send signature requests");
+      }
+    } catch (error) {
+      console.error("Error sending signature requests:", error);
+      toast.error("An error occurred while sending the signature requests");
+    }
+  }
+
+  const filterFields: DataTableFilterField<ContractDetail>[] = [
+    // Your existing filter fields
+  ]
+
+  const advancedFilterFields: DataTableAdvancedFilterField<ContractDetail>[] = [
+    {
+      id: "contractNo",
+      label: "Contract No",
+      type: "text",
+    },
+    {
+      id: "contractName",
+      label: "Contract Name",
+      type: "text",
+    },
+    {
+      id: "createdAt",
+      label: "Created At",
+      type: "date",
+    },
+    {
+      id: "updatedAt",
+      label: "Updated At",
+      type: "date",
+    },
+  ]
+  
+  const { table } = useDataTable({
+    data,
+    columns,
+    pageCount,
+    filterFields,
+    enablePinning: true,
+    enableAdvancedFilter: true,
+    initialState: {
+      sorting: [{ id: "createdAt", desc: true }],
+      columnPinning: { right: ["actions"] },
+    },
+    getRowId: (originalRow) => String(originalRow.id),
+    shallow: false,
+    clearOnDefault: true,
+  })
+
+  return (
+    <>
+      <DataTable
+        table={table}
+      >
+        <DataTableAdvancedToolbar
+          table={table}
+          filterFields={advancedFilterFields}
+          shallow={false}
+        >
+          <PoTableToolbarActions table={table} />
+        </DataTableAdvancedToolbar>
+      </DataTable>
+      
+      {/* Enhanced Dual Signature Request Modal */}
+      {selectedContract && (
+        <SignatureRequestModal
+          contract={selectedContract}
+          open={signatureModalOpen}
+          onOpenChange={setSignatureModalOpen}
+          onSubmit={handleSignatureRequest}
+        />
+      )}
+    </>
+  )
+}
\ No newline at end of file
diff --git a/lib/po/table/sign-request-dialog.tsx b/lib/po/table/sign-request-dialog.tsx
new file mode 100644
index 00000000..f70e5e33
--- /dev/null
+++ b/lib/po/table/sign-request-dialog.tsx
@@ -0,0 +1,410 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { z } from "zod"
+import { useForm } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { toast } from "sonner"
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form"
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { Input } from "@/components/ui/input"
+import { Button } from "@/components/ui/button"
+import { Checkbox } from "@/components/ui/checkbox"
+import { ContractDetail } from "@/db/schema/contract"
+import { getVendorContacts } from "../service"
+
+// Type for vendor contact
+interface VendorContact {
+  id: number
+  contactName: string
+  contactEmail: string
+  contactPosition: string | null
+  isPrimary: boolean
+}
+
+// Form schema for signature request
+const signatureRequestSchema = z.object({
+  // Requester signer information
+  includeRequesterSigner: z.boolean().default(true),
+  requesterEmail: z.string().email("Please enter a valid email address").optional(),
+  requesterName: z.string().min(1, "Please enter the signer's name").optional(),
+  requesterPosition: z.string().optional(),
+  
+  // Vendor signer information
+  includeVendorSigner: z.boolean().default(true),
+  vendorContactId: z.number().optional(),
+}).refine(data => data.includeRequesterSigner || data.includeVendorSigner, {
+  message: "At least one signer must be included",
+  path: ["includeRequesterSigner"]
+}).refine(data => !data.includeRequesterSigner || (data.requesterEmail && data.requesterName), {
+  message: "Requester email and name are required",
+  path: ["requesterEmail"]
+}).refine(data => !data.includeVendorSigner || data.vendorContactId, {
+  message: "Please select a vendor contact",
+  path: ["vendorContactId"]
+});
+
+type SignatureRequestFormValues = z.infer<typeof signatureRequestSchema>
+
+// Interface for signing parties
+interface SigningParty {
+  signerEmail: string;
+  signerName: string;
+  signerPosition: string;
+  signerType: "REQUESTER" | "VENDOR";
+  vendorContactId?: number;
+}
+
+// Updated interface to accept multiple signers
+interface SignatureRequestModalProps {
+  contract: ContractDetail
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  onSubmit: (
+    values: {
+      signers: SigningParty[]
+    }, 
+    contractId: number
+  ) => Promise<{ success: boolean; message: string } | void>
+}
+
+export function SignatureRequestModal({
+  contract,
+  open,
+  onOpenChange,
+  onSubmit,
+}: SignatureRequestModalProps) {
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [vendorContacts, setVendorContacts] = useState<VendorContact[]>([])
+  const [selectedVendorContact, setSelectedVendorContact] = useState<VendorContact | null>(null)
+
+  const form = useForm<SignatureRequestFormValues>({
+    resolver: zodResolver(signatureRequestSchema),
+    defaultValues: {
+      includeRequesterSigner: true,
+      requesterEmail: "",
+      requesterName: "",
+      requesterPosition: "",
+      includeVendorSigner: true,
+      vendorContactId: undefined,
+    },
+  })
+
+  // Load vendor contacts when the modal opens
+  useEffect(() => {
+    if (open && contract?.vendorId) {
+      const loadVendorContacts = async () => {
+        try {
+          const contacts = await getVendorContacts(contract.vendorId);
+          setVendorContacts(contacts);
+          
+          // Auto-select primary contact if available
+          const primaryContact = contacts.find(c => c.isPrimary);
+          if (primaryContact) {
+            handleVendorContactSelect(primaryContact.id.toString());
+          }
+        } catch (error) {
+          console.error("Error loading vendor contacts:", error);
+          toast.error("Failed to load vendor contacts");
+        }
+      };
+      
+      loadVendorContacts();
+    }
+  }, [open, contract]);
+
+  // Handle selection of a vendor contact
+  const handleVendorContactSelect = (contactId: string) => {
+    const id = Number(contactId);
+    form.setValue("vendorContactId", id);
+    
+    // Find the selected contact to show details
+    const contact = vendorContacts.find(c => c.id === id);
+    if (contact) {
+      setSelectedVendorContact(contact);
+    }
+  };
+
+  async function handleSubmit(values: SignatureRequestFormValues) {
+    setIsSubmitting(true);
+    
+    try {
+      const signers: SigningParty[] = [];
+      
+      // Add requester signer if included
+      if (values.includeRequesterSigner && values.requesterEmail && values.requesterName) {
+        signers.push({
+          signerEmail: values.requesterEmail,
+          signerName: values.requesterName,
+          signerPosition: values.requesterPosition || "",
+          signerType: "REQUESTER"
+        });
+      }
+      
+      // Add vendor signer if included
+      if (values.includeVendorSigner && values.vendorContactId && selectedVendorContact) {
+        signers.push({
+          signerEmail: selectedVendorContact.contactEmail,
+          signerName: selectedVendorContact.contactName,
+          signerPosition: selectedVendorContact.contactPosition || "",
+          vendorContactId: values.vendorContactId,
+          signerType: "VENDOR"
+        });
+      }
+      
+      if (signers.length === 0) {
+        throw new Error("At least one signer must be included");
+      }
+      
+      const result = await onSubmit({ signers }, contract.id);
+      
+      // Handle the result if it exists
+      if (result && typeof result === 'object') {
+        if (result.success) {
+          toast.success(result.message || "Signature requests sent successfully");
+        } else {
+          toast.error(result.message || "Failed to send signature requests");
+        }
+      } else {
+        // If no result is returned, assume success
+        toast.success("Electronic signature requests sent successfully");
+      }
+      
+      form.reset();
+      onOpenChange(false);
+    } catch (error) {
+      console.error("Error sending signature requests:", error);
+      toast.error(error instanceof Error ? error.message : "Failed to send signature requests. Please try again.");
+    } finally {
+      setIsSubmitting(false);
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[600px]">
+        <DialogHeader>
+          <DialogTitle>Request Electronic Signatures</DialogTitle>
+          <DialogDescription>
+            Send signature requests for contract: {contract?.contractName || ""}
+          </DialogDescription>
+        </DialogHeader>
+        
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-6">
+            <Accordion type="multiple" defaultValue={["requester", "vendor"]} className="w-full">
+              {/* Requester Signature Section */}
+              <AccordionItem value="requester">
+                <div className="flex items-center space-x-2">
+                  <FormField
+                    control={form.control}
+                    name="includeRequesterSigner"
+                    render={({ field }) => (
+                      <FormItem className="flex flex-row items-center space-x-3 space-y-0 my-2">
+                        <FormControl>
+                          <Checkbox
+                            checked={field.value}
+                            onCheckedChange={field.onChange}
+                          />
+                        </FormControl>
+                        <AccordionTrigger className="hover:no-underline ml-2">
+                          <div className="text-sm font-medium">Requester Signature</div>
+                        </AccordionTrigger>
+                      </FormItem>
+                    )}
+                  />
+                </div>
+                <AccordionContent>
+                  {form.watch("includeRequesterSigner") && (
+                    <Card className="border-none shadow-none">
+                      <CardContent className="p-0 space-y-4">
+                        <FormField
+                          control={form.control}
+                          name="requesterEmail"
+                          render={({ field }) => (
+                            <FormItem>
+                              <FormLabel>Signer Email</FormLabel>
+                              <FormControl>
+                                <Input placeholder="email@example.com" {...field} />
+                              </FormControl>
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
+                        
+                        <FormField
+                          control={form.control}
+                          name="requesterName"
+                          render={({ field }) => (
+                            <FormItem>
+                              <FormLabel>Signer Name</FormLabel>
+                              <FormControl>
+                                <Input placeholder="Full Name" {...field} />
+                              </FormControl>
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
+                        
+                        <FormField
+                          control={form.control}
+                          name="requesterPosition"
+                          render={({ field }) => (
+                            <FormItem>
+                              <FormLabel>Signer Position</FormLabel>
+                              <FormControl>
+                                <Input placeholder="e.g. CEO, Manager" {...field} />
+                              </FormControl>
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
+                      </CardContent>
+                    </Card>
+                  )}
+                </AccordionContent>
+              </AccordionItem>
+              
+              {/* Vendor Signature Section */}
+              <AccordionItem value="vendor">
+                <div className="flex items-center space-x-2">
+                  <FormField
+                    control={form.control}
+                    name="includeVendorSigner"
+                    render={({ field }) => (
+                      <FormItem className="flex flex-row items-center space-x-3 space-y-0 my-2">
+                        <FormControl>
+                          <Checkbox
+                            checked={field.value}
+                            onCheckedChange={field.onChange}
+                          />
+                        </FormControl>
+                        <AccordionTrigger className="hover:no-underline ml-2">
+                          <div className="text-sm font-medium">Vendor Signature</div>
+                        </AccordionTrigger>
+                      </FormItem>
+                    )}
+                  />
+                </div>
+                <AccordionContent>
+                  {form.watch("includeVendorSigner") && (
+                    <Card className="border-none shadow-none">
+                      <CardContent className="p-0 space-y-4">
+                        <FormField
+                          control={form.control}
+                          name="vendorContactId"
+                          render={({ field }) => (
+                            <FormItem>
+                              <FormLabel>Select Vendor Contact</FormLabel>
+                              <Select 
+                                onValueChange={handleVendorContactSelect}
+                                defaultValue={field.value?.toString()}
+                              >
+                                <FormControl>
+                                  <SelectTrigger>
+                                    <SelectValue placeholder="Select a contact" />
+                                  </SelectTrigger>
+                                </FormControl>
+                                <SelectContent>
+                                  {vendorContacts.length > 0 ? (
+                                    vendorContacts.map((contact) => (
+                                      <SelectItem 
+                                        key={contact.id} 
+                                        value={contact.id.toString()}
+                                      >
+                                        {contact.contactName} {contact.isPrimary ? "(Primary)" : ""}
+                                      </SelectItem>
+                                    ))
+                                  ) : (
+                                    <SelectItem value="none" disabled>
+                                      No contacts available
+                                    </SelectItem>
+                                  )}
+                                </SelectContent>
+                              </Select>
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
+                        
+                        {/* Display selected contact info (read-only) */}
+                        {selectedVendorContact && (
+                          <>
+                            <FormItem className="pb-2">
+                              <FormLabel>Contact Email</FormLabel>
+                              <div className="p-2 border rounded-md bg-muted">
+                                {selectedVendorContact.contactEmail}
+                              </div>
+                            </FormItem>
+                            
+                            <FormItem className="pb-2">
+                              <FormLabel>Contact Name</FormLabel>
+                              <div className="p-2 border rounded-md bg-muted">
+                                {selectedVendorContact.contactName}
+                              </div>
+                            </FormItem>
+                            
+                            <FormItem className="pb-2">
+                              <FormLabel>Contact Position</FormLabel>
+                              <div className="p-2 border rounded-md bg-muted">
+                                {selectedVendorContact.contactPosition || "N/A"}
+                              </div>
+                            </FormItem>
+                          </>
+                        )}
+                      </CardContent>
+                    </Card>
+                  )}
+                </AccordionContent>
+              </AccordionItem>
+            </Accordion>
+            
+            <DialogFooter>
+              <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
+                Cancel
+              </Button>
+              <Button type="submit" disabled={isSubmitting}>
+                {isSubmitting ? "Sending..." : "Send Requests"}
+              </Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  )
+}
\ No newline at end of file
diff --git a/lib/po/validations.ts b/lib/po/validations.ts
new file mode 100644
index 00000000..c96d7277
--- /dev/null
+++ b/lib/po/validations.ts
@@ -0,0 +1,67 @@
+import {
+  createSearchParamsCache,
+  parseAsArrayOf,
+  parseAsInteger,
+  parseAsString,
+  parseAsStringEnum,
+} from "nuqs/server"
+import * as z from "zod"
+
+import { getFiltersStateParser, getSortingStateParser } from "@/lib/parsers"
+import {  ContractDetail } from "@/db/schema/contract"
+
+// nuqs/server 에 parseAsBoolean, parseAsNumber 등이 없다면 
+// 숫자/불리언으로 처리해야 할 필드도 우선 parseAsString / parseAsStringEnum 으로 받습니다.
+// 실제 사용 시에는 후속 로직에서 변환(예: parseFloat 등)하세요.
+
+export const searchParamsCache = createSearchParamsCache({
+  // UI 모드나 플래그 관련
+  flags: parseAsArrayOf(z.enum(["advancedTable", "floatingBar"])).withDefault([]),
+
+  // 페이징
+  page: parseAsInteger.withDefault(1),
+  perPage: parseAsInteger.withDefault(10),
+
+  // 정렬 (createdAt 기준 내림차순)
+  sort: getSortingStateParser<ContractDetail>().withDefault([
+    { id: "createdAt", desc: true },
+  ]),
+  projectCode: parseAsString.withDefault(""),
+  projectName: parseAsString.withDefault(""),
+
+  // 기존 필드
+  contractNo: parseAsString.withDefault(""),
+  contractName: parseAsString.withDefault(""),
+  status: parseAsString.withDefault(""),
+  startDate: parseAsString.withDefault(""),  // 문자열 "YYYY-MM-DD" 형태
+  endDate: parseAsString.withDefault(""),    // 마찬가지
+
+  // 추가된 PO 관련 필드
+  paymentTerms: parseAsString.withDefault(""),       
+  deliveryTerms: parseAsString.withDefault(""),
+  deliveryDate: parseAsString.withDefault(""),       // "YYYY-MM-DD"
+  deliveryLocation: parseAsString.withDefault(""),
+
+  // 금액 관련 (문자열로 받고 후처리에서 parseFloat 권장)
+  currency: parseAsString.withDefault("KRW"),
+  totalAmount: parseAsString.withDefault(""),
+  discount: parseAsString.withDefault(""),
+  tax: parseAsString.withDefault(""),
+  shippingFee: parseAsString.withDefault(""),
+  netTotal: parseAsString.withDefault(""),
+
+  // 부분 납품/결제 허용 여부 (문자열 "true"/"false")
+  partialShippingAllowed: parseAsStringEnum(["true", "false"]).withDefault("false"),
+  partialPaymentAllowed: parseAsStringEnum(["true", "false"]).withDefault("false"),
+
+  remarks: parseAsString.withDefault(""),
+  version: parseAsString.withDefault(""),
+
+  // 고급 필터(Advanced) & 검색
+  filters: getFiltersStateParser().withDefault([]),
+  joinOperator: parseAsStringEnum(["and", "or"]).withDefault("and"),
+  search: parseAsString.withDefault(""),
+})
+
+// 최종 타입
+export type GetPOSchema = Awaited<ReturnType<typeof searchParamsCache.parse>>
\ No newline at end of file
diff --git a/lib/pq/pq-review-table/feature-flags-provider.tsx b/lib/pq/pq-review-table/feature-flags-provider.tsx
new file mode 100644
index 00000000..81131894
--- /dev/null
+++ b/lib/pq/pq-review-table/feature-flags-provider.tsx
@@ -0,0 +1,108 @@
+"use client"
+
+import * as React from "react"
+import { useQueryState } from "nuqs"
+
+import { dataTableConfig, type DataTableConfig } from "@/config/data-table"
+import { cn } from "@/lib/utils"
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+
+type FeatureFlagValue = DataTableConfig["featureFlags"][number]["value"]
+
+interface FeatureFlagsContextProps {
+  featureFlags: FeatureFlagValue[]
+  setFeatureFlags: (value: FeatureFlagValue[]) => void
+}
+
+const FeatureFlagsContext = React.createContext<FeatureFlagsContextProps>({
+  featureFlags: [],
+  setFeatureFlags: () => {},
+})
+
+export function useFeatureFlags() {
+  const context = React.useContext(FeatureFlagsContext)
+  if (!context) {
+    throw new Error(
+      "useFeatureFlags must be used within a FeatureFlagsProvider"
+    )
+  }
+  return context
+}
+
+interface FeatureFlagsProviderProps {
+  children: React.ReactNode
+}
+
+export function FeatureFlagsProvider({ children }: FeatureFlagsProviderProps) {
+  const [featureFlags, setFeatureFlags] = useQueryState<FeatureFlagValue[]>(
+    "flags",
+    {
+      defaultValue: [],
+      parse: (value) => value.split(",") as FeatureFlagValue[],
+      serialize: (value) => value.join(","),
+      eq: (a, b) =>
+        a.length === b.length && a.every((value, index) => value === b[index]),
+      clearOnDefault: true,
+      shallow: false,
+    }
+  )
+
+  return (
+    <FeatureFlagsContext.Provider
+      value={{
+        featureFlags,
+        setFeatureFlags: (value) => void setFeatureFlags(value),
+      }}
+    >
+      <div className="w-full overflow-x-auto">
+        <ToggleGroup
+          type="multiple"
+          variant="outline"
+          size="sm"
+          value={featureFlags}
+          onValueChange={(value: FeatureFlagValue[]) => setFeatureFlags(value)}
+          className="w-fit gap-0"
+        >
+          {dataTableConfig.featureFlags.map((flag, index) => (
+            <Tooltip key={flag.value}>
+              <ToggleGroupItem
+                value={flag.value}
+                className={cn(
+                  "gap-2 whitespace-nowrap rounded-none px-3 text-xs data-[state=on]:bg-accent/70 data-[state=on]:hover:bg-accent/90",
+                  {
+                    "rounded-l-sm border-r-0": index === 0,
+                    "rounded-r-sm":
+                      index === dataTableConfig.featureFlags.length - 1,
+                  }
+                )}
+                asChild
+              >
+                <TooltipTrigger>
+                  <flag.icon className="size-3.5 shrink-0" aria-hidden="true" />
+                  {flag.label}
+                </TooltipTrigger>
+              </ToggleGroupItem>
+              <TooltipContent
+                align="start"
+                side="bottom"
+                sideOffset={6}
+                className="flex max-w-60 flex-col space-y-1.5 border bg-background py-2 font-semibold text-foreground"
+              >
+                <div>{flag.tooltipTitle}</div>
+                <div className="text-xs text-muted-foreground">
+                  {flag.tooltipDescription}
+                </div>
+              </TooltipContent>
+            </Tooltip>
+          ))}
+        </ToggleGroup>
+      </div>
+      {children}
+    </FeatureFlagsContext.Provider>
+  )
+}
diff --git a/lib/pq/pq-review-table/vendors-table-columns.tsx b/lib/pq/pq-review-table/vendors-table-columns.tsx
new file mode 100644
index 00000000..8673443f
--- /dev/null
+++ b/lib/pq/pq-review-table/vendors-table-columns.tsx
@@ -0,0 +1,212 @@
+"use client"
+
+import * as React from "react"
+import { type DataTableRowAction } from "@/types/table"
+import { type ColumnDef } from "@tanstack/react-table"
+import { Ellipsis, PaperclipIcon } from "lucide-react"
+import { toast } from "sonner"
+
+import { getErrorMessage } from "@/lib/handle-error"
+import { formatDate } from "@/lib/utils"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Checkbox } from "@/components/ui/checkbox"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { DataTableColumnHeader } from "@/components/data-table/data-table-column-header"
+import { useRouter } from "next/navigation"
+
+import { Vendor, vendors, VendorWithAttachments } from "@/db/schema/vendors"
+import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header"
+import { vendorColumnsConfig } from "@/config/vendorColumnsConfig"
+import { Separator } from "@/components/ui/separator"
+
+
+type NextRouter = ReturnType<typeof useRouter>;
+
+
+interface GetColumnsProps {
+  setRowAction: React.Dispatch<React.SetStateAction<DataTableRowAction<Vendor> | null>>;
+  router: NextRouter;
+}
+
+/**
+ * tanstack table 컬럼 정의 (중첩 헤더 버전)
+ */
+export function getColumns({ setRowAction, router }: GetColumnsProps): ColumnDef<Vendor>[] {
+  // ----------------------------------------------------------------
+  // 1) select 컬럼 (체크박스)
+  // ----------------------------------------------------------------
+  const selectColumn: ColumnDef<Vendor> = {
+    id: "select",
+    header: ({ table }) => (
+      <Checkbox
+        checked={
+          table.getIsAllPageRowsSelected() ||
+          (table.getIsSomePageRowsSelected() && "indeterminate")
+        }
+        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+        aria-label="Select all"
+        className="translate-y-0.5"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={(value) => row.toggleSelected(!!value)}
+        aria-label="Select row"
+        className="translate-y-0.5"
+      />
+    ),
+    size: 40,
+    enableSorting: false,
+    enableHiding: false,
+  }
+
+  // ----------------------------------------------------------------
+  // 2) actions 컬럼 (Dropdown 메뉴)
+  // ----------------------------------------------------------------
+  const actionsColumn: ColumnDef<Vendor> = {
+    id: "actions",
+    enableHiding: false,
+    cell: function Cell({ row }) {
+      const [isUpdatePending, startUpdateTransition] = React.useTransition()
+
+      return (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              aria-label="Open menu"
+              variant="ghost"
+              className="flex size-8 p-0 data-[state=open]:bg-muted"
+            >
+              <Ellipsis className="size-4" aria-hidden="true" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-40">
+
+            <DropdownMenuItem
+              onSelect={() => {
+                // 1) 만약 rowAction을 열고 싶다면
+                // setRowAction({ row, type: "update" })
+
+                // 2) 자세히 보기 페이지로 클라이언트 라우팅
+                router.push(`/evcp/pq/${row.original.id}`);
+              }}
+            >
+              Details
+            </DropdownMenuItem>
+   
+
+          </DropdownMenuContent>
+        </DropdownMenu>
+      )
+    },
+    size: 40,
+  }
+
+  // ----------------------------------------------------------------
+  // 3) 일반 컬럼들을 "그룹"별로 묶어 중첩 columns 생성
+  // ----------------------------------------------------------------
+  // 3-1) groupMap: { [groupName]: ColumnDef<Vendor>[] }
+  const groupMap: Record<string, ColumnDef<Vendor>[]> = {}
+
+  vendorColumnsConfig.forEach((cfg) => {
+    // 만약 group가 없으면 "_noGroup" 처리
+    const groupName = cfg.group || "_noGroup"
+
+    if (!groupMap[groupName]) {
+      groupMap[groupName] = []
+    }
+
+    // child column 정의
+    const childCol: ColumnDef<Vendor> = {
+      accessorKey: cfg.id,
+      enableResizing: true,
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title={cfg.label} />
+      ),
+      meta: {
+        excelHeader: cfg.excelHeader,
+        group: cfg.group,
+        type: cfg.type,
+      },
+      cell: ({ row, cell }) => {
+
+
+        if (cfg.id === "status") {
+          const statusVal = row.original.status
+          if (!statusVal) return null
+          // const Icon = getStatusIcon(statusVal)
+          return (
+            <div className="flex w-[6.25rem] items-center">
+              {/* <Icon className="mr-2 size-4 text-muted-foreground" aria-hidden="true" /> */}
+              <span className="capitalize">{statusVal}</span>
+            </div>
+          )
+        }
+
+
+        if (cfg.id === "createdAt") {
+          const dateVal = cell.getValue() as Date
+          return formatDate(dateVal)
+        }
+
+        if (cfg.id === "updatedAt") {
+          const dateVal = cell.getValue() as Date
+          return formatDate(dateVal)
+        }
+
+
+        // code etc...
+        return row.getValue(cfg.id) ?? ""
+      },
+    }
+
+    groupMap[groupName].push(childCol)
+  })
+
+  // ----------------------------------------------------------------
+  // 3-2) groupMap에서 실제 상위 컬럼(그룹)을 만들기
+  // ----------------------------------------------------------------
+  const nestedColumns: ColumnDef<Vendor>[] = []
+
+  // 순서를 고정하고 싶다면 group 순서를 미리 정의하거나 sort해야 함
+  // 여기서는 그냥 Object.entries 순서
+  Object.entries(groupMap).forEach(([groupName, colDefs]) => {
+    if (groupName === "_noGroup") {
+      // 그룹 없음 → 그냥 최상위 레벨 컬럼
+      nestedColumns.push(...colDefs)
+    } else {
+      // 상위 컬럼
+      nestedColumns.push({
+        id: groupName,
+        header: groupName, // "Basic Info", "Metadata" 등
+        columns: colDefs,
+      })
+    }
+  })
+
+
+  
+
+  // ----------------------------------------------------------------
+  // 4) 최종 컬럼 배열: select, nestedColumns, actions
+  // ----------------------------------------------------------------
+  return [
+    selectColumn,
+    ...nestedColumns,
+    actionsColumn,
+  ]
+}
\ No newline at end of file
diff --git a/lib/pq/pq-review-table/vendors-table-toolbar-actions.tsx b/lib/pq/pq-review-table/vendors-table-toolbar-actions.tsx
new file mode 100644
index 00000000..98fef170
--- /dev/null
+++ b/lib/pq/pq-review-table/vendors-table-toolbar-actions.tsx
@@ -0,0 +1,41 @@
+"use client"
+
+import * as React from "react"
+import { type Table } from "@tanstack/react-table"
+import { Download, Upload, Check } from "lucide-react"
+import { toast } from "sonner"
+
+import { exportTableToExcel } from "@/lib/export"
+import { Button } from "@/components/ui/button"
+import { Vendor } from "@/db/schema/vendors"
+
+interface VendorsTableToolbarActionsProps {
+  table: Table<Vendor>
+}
+
+export function VendorsTableToolbarActions({ table }: VendorsTableToolbarActionsProps) {
+  // 파일 input을 숨기고, 버튼 클릭 시 참조해 클릭하는 방식
+ 
+
+  return (
+    <div className="flex items-center gap-2">
+
+
+      {/** 4) Export 버튼 */}
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={() =>
+          exportTableToExcel(table, {
+            filename: "vendors",
+            excludeColumns: ["select", "actions"],
+          })
+        }
+        className="gap-2"
+      >
+        <Download className="size-4" aria-hidden="true" />
+        <span className="hidden sm:inline">Export</span>
+      </Button>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/lib/pq/pq-review-table/vendors-table.tsx b/lib/pq/pq-review-table/vendors-table.tsx
new file mode 100644
index 00000000..7eb8f7de
--- /dev/null
+++ b/lib/pq/pq-review-table/vendors-table.tsx
@@ -0,0 +1,97 @@
+"use client"
+
+import * as React from "react"
+import { useRouter } from "next/navigation"
+import type {
+  DataTableAdvancedFilterField,
+  DataTableFilterField,
+  DataTableRowAction,
+} from "@/types/table"
+
+import { toSentenceCase } from "@/lib/utils"
+import { useDataTable } from "@/hooks/use-data-table"
+import { DataTable } from "@/components/data-table/data-table"
+import { DataTableAdvancedToolbar } from "@/components/data-table/data-table-advanced-toolbar"
+import { useFeatureFlags } from "./feature-flags-provider"
+import { getColumns } from "./vendors-table-columns"
+import { Vendor, vendors } from "@/db/schema/vendors"
+import { VendorsTableToolbarActions } from "./vendors-table-toolbar-actions"
+import { getVendorsInPQ } from "../service"
+
+
+interface VendorsTableProps {
+  promises: Promise<
+    [
+      Awaited<ReturnType<typeof getVendorsInPQ>>,
+    ]
+  >
+}
+
+export function VendorsPQReviewTable({ promises }: VendorsTableProps) {
+  const { featureFlags } = useFeatureFlags()
+
+  // Suspense로 받아온 데이터
+  const [{ data, pageCount }] = React.use(promises)
+
+  const [rowAction, setRowAction] = React.useState<DataTableRowAction<Vendor> | null>(null)
+
+  // **router** 획득
+  const router = useRouter()
+
+  // getColumns() 호출 시, router를 주입
+  const columns = React.useMemo(
+    () => getColumns({ setRowAction, router }),
+    [setRowAction, router]
+  )
+
+  const filterFields: DataTableFilterField<Vendor>[] = [
+
+
+    { id: "vendorCode", label: "Vendor Code" },
+
+  ]
+
+  const advancedFilterFields: DataTableAdvancedFilterField<Vendor>[] = [
+    { id: "vendorName", label: "Vendor Name", type: "text" },
+    { id: "vendorCode", label: "Vendor Code", type: "text" },
+    { id: "email", label: "Email", type: "text" },
+    { id: "country", label: "Country", type: "text" },
+
+    { id: "createdAt", label: "Created at", type: "date" },
+    { id: "updatedAt", label: "Updated at", type: "date" },
+  ]
+
+  const { table } = useDataTable({
+    data,
+    columns,
+    pageCount,
+    filterFields,
+    enablePinning: true,
+    enableAdvancedFilter: true,
+    initialState: {
+      sorting: [{ id: "createdAt", desc: true }],
+      columnPinning: { right: ["actions"] },
+    },
+    getRowId: (originalRow) => String(originalRow.id),
+    shallow: false,
+    clearOnDefault: true,
+  })
+
+  return (
+    <>
+      <DataTable
+        table={table}
+        // floatingBar={<VendorsTableFloatingBar table={table} />}
+      >
+        <DataTableAdvancedToolbar
+          table={table}
+          filterFields={advancedFilterFields}
+          shallow={false}
+        >
+          <VendorsTableToolbarActions table={table} />
+        </DataTableAdvancedToolbar>
+      </DataTable>
+
+    </>
+  )
+}
\ No newline at end of file
diff --git a/lib/pq/repository.ts b/lib/pq/repository.ts
new file mode 100644
index 00000000..95daf9a3
--- /dev/null
+++ b/lib/pq/repository.ts
@@ -0,0 +1,44 @@
+import db from "@/db/db";
+import { pqCriterias } from "@/db/schema/pq";
+import {
+    eq,
+    inArray,
+    not,
+    asc,
+    desc,
+    and,
+    ilike,
+    gte,
+    lte,
+    count,
+    gt,
+} from "drizzle-orm";
+import { PgTransaction } from "drizzle-orm/pg-core";
+
+export async function selectPqs(
+    tx: PgTransaction<any, any, any>,
+    params: {
+        where?: any; // drizzle-orm의 조건식 (and, eq...) 등
+        orderBy?: (ReturnType<typeof asc> | ReturnType<typeof desc>)[];
+        offset?: number;
+        limit?: number;
+    }
+) {
+    const { where, orderBy, offset = 0, limit = 10 } = params;
+
+    return tx
+        .select()
+        .from(pqCriterias)
+        .where(where)
+        .orderBy(...(orderBy ?? []))
+        .offset(offset)
+        .limit(limit);
+}
+/** 총 개수 count */
+export async function countPqs(
+    tx: PgTransaction<any, any, any>,
+    where?: any
+) {
+    const res = await tx.select({ count: count() }).from(pqCriterias).where(where);
+    return res[0]?.count ?? 0;
+}
diff --git a/lib/pq/service.ts b/lib/pq/service.ts
new file mode 100644
index 00000000..a1373dae
--- /dev/null
+++ b/lib/pq/service.ts
@@ -0,0 +1,987 @@
+"use server"
+
+import db from "@/db/db"
+import { GetPQSchema } from "./validations"
+import { unstable_cache } from "@/lib/unstable-cache";
+import { filterColumns } from "@/lib/filter-columns";
+import { getErrorMessage } from "@/lib/handle-error";
+import { asc, desc, ilike, inArray, and, gte, lte, not, or, eq, count} from "drizzle-orm";
+import { z } from "zod"
+import { revalidateTag, unstable_noStore, revalidatePath} from "next/cache";
+import { pqCriterias, vendorCriteriaAttachments, vendorPqCriteriaAnswers, vendorPqReviewLogs } from "@/db/schema/pq"
+import { countPqs, selectPqs } from "./repository";
+import { sendEmail } from "../mail/sendEmail";
+import { vendorAttachments, vendors } from "@/db/schema/vendors";
+import path from 'path';
+import fs from 'fs/promises';
+import { randomUUID } from 'crypto';
+import { writeFile, mkdir } from 'fs/promises';
+import { GetVendorsSchema } from "../vendors/validations";
+import { countVendors, selectVendors } from "../vendors/repository";
+
+/**
+ * PQ 목록 조회
+ */
+export async function getPQs(input: GetPQSchema) {
+    return unstable_cache(
+        async () => {
+            try {
+                const offset = (input.page - 1) * input.perPage;
+
+                // advancedTable 모드면 filterColumns()로 where 절 구성
+                const advancedWhere = filterColumns({
+                    table: pqCriterias,
+                    filters: input.filters,
+                    joinOperator: input.joinOperator,
+                });
+
+                let globalWhere
+                if (input.search) {
+                    const s = `%${input.search}%`
+                    globalWhere = or(ilike(pqCriterias.code, s), ilike(pqCriterias.groupName, s), ilike(pqCriterias.remarks, s), ilike(pqCriterias.checkPoint, s), ilike(pqCriterias.description, s)
+                    )
+                }
+
+                const finalWhere = and(advancedWhere, globalWhere);
+                const orderBy =
+                    input.sort.length > 0
+                        ? input.sort.map((item) =>
+                            item.desc ? desc(pqCriterias[item.id]) : asc(pqCriterias[item.id])
+                        )
+                        : [asc(pqCriterias.createdAt)];
+
+                const { data, total } = await db.transaction(async (tx) => {
+                    const data = await selectPqs(tx, {
+                        where: finalWhere,
+                        orderBy,
+                        offset,
+                        limit: input.perPage,
+                    });
+                    const total = await countPqs(tx, finalWhere);
+                    return { data, total };
+                });
+
+                const pageCount = Math.ceil(total / input.perPage);
+
+
+                return { data, pageCount };
+            } catch (err) {
+                return { data: [], pageCount: 0 };
+            }
+        },
+        [JSON.stringify(input)],
+        {
+            revalidate: 3600,
+            tags: [`pq`],
+        }
+    )();
+}
+
+// PQ 생성을 위한 입력 스키마 정의
+const createPqSchema = z.object({
+    code: z.string().min(1, "Code is required"),
+    checkPoint: z.string().min(1, "Check point is required"),
+    description: z.string().optional(),
+    remarks: z.string().optional(),
+    groupName: z.string().optional()
+});
+
+export type CreatePqInputType = z.infer<typeof createPqSchema>;
+
+/**
+ * PQ 기준 생성
+ */
+export async function createPq(input: CreatePqInputType) {
+  try {
+    // 입력 유효성 검증
+    const validatedData = createPqSchema.parse(input);
+
+    // 트랜잭션 사용하여 PQ 기준 생성
+    return await db.transaction(async (tx) => {
+      // PQ 기준 생성
+      const [newPqCriteria] = await tx
+        .insert(pqCriterias)
+        .values({
+          code: validatedData.code,
+          checkPoint: validatedData.checkPoint,
+          description: validatedData.description || null,
+          remarks: validatedData.remarks || null,
+          groupName: validatedData.groupName || null,
+        })
+        .returning({ id: pqCriterias.id });
+
+      // 성공 결과 반환
+      return { 
+        success: true, 
+        pqId: newPqCriteria.id,
+        message: "PQ criteria created successfully" 
+      };
+    });
+  } catch (error) {
+    console.error("Error creating PQ criteria:", error);
+    
+    // Zod 유효성 검사 에러 처리
+    if (error instanceof z.ZodError) {
+      return { 
+        success: false, 
+        message: "Validation failed", 
+        errors: error.errors 
+      };
+    }
+    
+    // 기타 에러 처리
+    return { 
+      success: false, 
+      message: "Failed to create PQ criteria" 
+    };
+  }
+}
+
+// PQ 캐시 무효화 함수
+export async function invalidatePqCache() {
+  revalidatePath(`/evcp/pq-criteria`);
+  revalidateTag(`pq`);
+}
+
+// PQ 삭제를 위한 스키마 정의
+const removePqsSchema = z.object({
+  ids: z.array(z.number()).min(1, "At least one PQ ID is required")
+});
+
+export type RemovePqsInputType = z.infer<typeof removePqsSchema>;
+
+/**
+ * PQ 기준 삭제
+ */
+export async function removePqs(input: RemovePqsInputType) {
+  try {
+    // 입력 유효성 검증
+    const validatedData = removePqsSchema.parse(input);
+    
+    // 트랜잭션 사용하여 PQ 기준 삭제
+    await db.transaction(async (tx) => {
+      // PQ 기준 테이블에서 삭제
+      await tx
+        .delete(pqCriterias)
+        .where(inArray(pqCriterias.id, validatedData.ids));
+    });
+    
+    // 캐시 무효화
+    await invalidatePqCache();
+
+    return { success: true };
+  } catch (error) {
+    console.error("Error removing PQ criteria:", error);
+    
+    // Zod 유효성 검사 에러 처리
+    if (error instanceof z.ZodError) {
+      return { 
+        success: false, 
+        error: "Validation failed: " + error.errors.map(e => e.message).join(', ')
+      };
+    }
+    
+    // 기타 에러 처리
+    return { 
+      success: false, 
+      error: "Failed to remove PQ criteria"
+    };
+  }
+}
+
+// PQ 수정을 위한 스키마 정의
+const modifyPqSchema = z.object({
+  id: z.number().positive("ID is required"),
+  code: z.string().min(1, "Code is required"),
+  checkPoint: z.string().min(1, "Check point is required"),
+  groupName: z.string().min(1, "Group is required"),
+  description: z.string().optional(),
+  remarks: z.string().optional()
+});
+
+export type ModifyPqInputType = z.infer<typeof modifyPqSchema>;
+
+
+export async function modifyPq(input: ModifyPqInputType) {
+  try {
+    // 입력 유효성 검증
+    const validatedData = modifyPqSchema.parse(input);
+
+    // 트랜잭션 사용하여 PQ 기준 수정
+    return await db.transaction(async (tx) => {
+      // PQ 기준 수정
+      await tx
+        .update(pqCriterias)
+        .set({
+          code: validatedData.code,
+          checkPoint: validatedData.checkPoint,
+          description: validatedData.description || null,
+          remarks: validatedData.remarks || null,
+          groupName: validatedData.groupName,
+          updatedAt: new Date(),
+        })
+        .where(eq(pqCriterias.id, validatedData.id));
+
+      // 성공 결과 반환
+      return { 
+        success: true, 
+        message: "PQ criteria updated successfully" 
+      };
+    });
+  } catch (error) {
+    console.error("Error updating PQ criteria:", error);
+    
+    // Zod 유효성 검사 에러 처리
+    if (error instanceof z.ZodError) {
+      return { 
+        success: false, 
+        error: "Validation failed: " + error.errors.map(e => e.message).join(', ')
+      };
+    }
+    
+    // 기타 에러 처리
+    return { 
+      success: false, 
+      error: "Failed to update PQ criteria" 
+    };
+  } finally {
+    // 캐시 무효화
+    revalidatePath(`/partners/pq`);
+    revalidateTag(`pq`);
+  }
+}
+
+export interface PQAttachment {
+  attachId: number
+  fileName: string
+  filePath: string
+  fileSize?: number
+}
+
+export interface PQItem {
+  answerId: number | null; // null도 허용하도록 변경
+  criteriaId: number
+  code: string
+  checkPoint: string
+  description: string | null
+  answer: string // or null
+  attachments: PQAttachment[]
+}
+
+export interface PQGroupData {
+  groupName: string
+  items: PQItem[]
+}
+
+ 
+export async function getPQDataByVendorId(vendorId: number): Promise<PQGroupData[]> {
+  // 1) Query: pqCriterias
+  //    LEFT JOIN vendorPqCriteriaAnswers (to get `answer`)
+  //    LEFT JOIN vendorCriteriaAttachments (to get each attachment row)
+  const rows = await db
+    .select({
+      criteriaId: pqCriterias.id,
+      groupName: pqCriterias.groupName,
+      code: pqCriterias.code,
+      checkPoint: pqCriterias.checkPoint,
+      description: pqCriterias.description,
+
+      // From vendorPqCriteriaAnswers
+      answer: vendorPqCriteriaAnswers.answer,     // can be null if no row exists
+      answerId: vendorPqCriteriaAnswers.id,       // internal PK if needed
+
+      // From vendorCriteriaAttachments
+      attachId: vendorCriteriaAttachments.id,
+      fileName: vendorCriteriaAttachments.fileName,
+      filePath: vendorCriteriaAttachments.filePath,
+      fileSize: vendorCriteriaAttachments.fileSize,
+    })
+    .from(pqCriterias)
+    .leftJoin(
+      vendorPqCriteriaAnswers,
+      and(
+        eq(pqCriterias.id, vendorPqCriteriaAnswers.criteriaId),
+        eq(vendorPqCriteriaAnswers.vendorId, vendorId)
+      )
+    )
+    .leftJoin(
+      vendorCriteriaAttachments,
+      eq(vendorPqCriteriaAnswers.id, vendorCriteriaAttachments.vendorCriteriaAnswerId)
+    )
+    .orderBy(pqCriterias.groupName, pqCriterias.code)
+
+  // 2) Group by groupName => each group has a map of criteriaId => PQItem
+  //    so we can gather attachments properly.
+  const groupMap = new Map<string, Record<number, PQItem>>()
+
+  for (const row of rows) {
+    const g = row.groupName || "Others"
+
+    // Ensure we have an object for this group
+    if (!groupMap.has(g)) {
+      groupMap.set(g, {})
+    }
+
+    const groupItems = groupMap.get(g)!
+    // If we haven't seen this criteriaId yet, create a PQItem
+    if (!groupItems[row.criteriaId]) {
+      groupItems[row.criteriaId] = {
+        answerId: row.answerId,
+        criteriaId: row.criteriaId,
+        code: row.code,
+        checkPoint: row.checkPoint,
+        description: row.description,
+        answer: row.answer || "",    // if row.answer is null, just empty string
+        attachments: [],
+      }
+    }
+
+    // If there's an attachment row (attachId not null), push it onto `attachments`
+    if (row.attachId) {
+      groupItems[row.criteriaId].attachments.push({
+        attachId: row.attachId,
+        fileName: row.fileName || "",
+        filePath: row.filePath || "",
+        fileSize: row.fileSize || undefined,
+      })
+    }
+  }
+
+  // 3) Convert groupMap into an array of { groupName, items[] }
+  const data: PQGroupData[] = []
+  for (const [groupName, itemsMap] of groupMap.entries()) {
+    // Convert the itemsMap (key=criteriaId => PQItem) into an array
+    const items = Object.values(itemsMap)
+    data.push({ groupName, items })
+  }
+
+  return data
+}
+
+
+interface PQAttachmentInput {
+  fileName: string      // original user-friendly file name
+  url: string           // the UUID-based path stored on server
+  size?: number         // optional file size
+}
+
+interface SavePQAnswer {
+  criteriaId: number
+  answer: string
+  attachments: PQAttachmentInput[]
+}
+
+interface SavePQInput {
+  vendorId: number
+  answers: SavePQAnswer[]
+}
+
+/**
+ * 여러 항목을 한 번에 Upsert
+ */
+export async function savePQAnswersAction(input: SavePQInput) {
+  const { vendorId, answers } = input
+
+  try {
+    for (const ans of answers) {
+      // 1) Check if a row already exists for (vendorId, criteriaId)
+      const existing = await db
+        .select()
+        .from(vendorPqCriteriaAnswers)
+        .where(
+          and(
+            eq(vendorPqCriteriaAnswers.vendorId, vendorId),
+            eq(vendorPqCriteriaAnswers.criteriaId, ans.criteriaId)
+          )
+        )
+
+      let answerId: number
+
+      // 2) If it exists, update the row; otherwise insert
+      if (existing.length === 0) {
+        // Insert new
+        const inserted = await db
+          .insert(vendorPqCriteriaAnswers)
+          .values({
+            vendorId,
+            criteriaId: ans.criteriaId,
+            answer: ans.answer,
+            // no attachmentPaths column anymore
+          })
+          .returning({ id: vendorPqCriteriaAnswers.id })
+        
+        answerId = inserted[0].id
+      } else {
+        // Update existing
+        answerId = existing[0].id
+
+        await db
+          .update(vendorPqCriteriaAnswers)
+          .set({
+            answer: ans.answer,
+            updatedAt: new Date(),
+          })
+          .where(eq(vendorPqCriteriaAnswers.id, answerId))
+      }
+
+      // 3) Now manage attachments in vendorCriteriaAttachments
+      //    We'll do a "diff": remove old ones not in the new list, insert new ones not in DB.
+
+      // 3a) Load old attachments from DB
+      const oldAttachments = await db
+        .select({
+          id: vendorCriteriaAttachments.id,
+          filePath: vendorCriteriaAttachments.filePath,
+        })
+        .from(vendorCriteriaAttachments)
+        .where(eq(vendorCriteriaAttachments.vendorCriteriaAnswerId, answerId))
+
+      // 3b) Gather the new filePaths (urls) from the client
+      const newPaths = ans.attachments.map(a => a.url)
+
+      // 3c) Find attachments to remove
+      const toRemove = oldAttachments.filter(old => !newPaths.includes(old.filePath))
+      if (toRemove.length > 0) {
+        const removeIds = toRemove.map(r => r.id)
+        await db
+          .delete(vendorCriteriaAttachments)
+          .where(inArray(vendorCriteriaAttachments.id, removeIds))
+      }
+
+      // 3d) Insert new attachments that aren’t in DB
+      const oldPaths = oldAttachments.map(o => o.filePath)
+      const toAdd = ans.attachments.filter(a => !oldPaths.includes(a.url))
+
+      for (const attach of toAdd) {
+        await db.insert(vendorCriteriaAttachments).values({
+          vendorCriteriaAnswerId: answerId,
+          fileName: attach.fileName,   // original filename
+          filePath: attach.url,        // random/UUID path on server
+          fileSize: attach.size ?? null,
+          // fileType if you have it, etc.
+        })
+      }
+    }
+
+    return { ok: true }
+  } catch (error) {
+    console.error("savePQAnswersAction error:", error)
+    return { ok: false, error: String(error) }
+  }
+}
+
+
+
+/**
+ * PQ 제출 서버 액션 - 벤더 상태를 PQ_SUBMITTED로 업데이트
+ * @param vendorId 벤더 ID
+ */
+export async function submitPQAction(vendorId: number) {
+  unstable_noStore();
+  
+  try {
+    // 1. 모든 PQ 항목에 대한 응답이 있는지 검증
+    const pqCriteriaCount = await db
+      .select({ count: count() })
+      .from(vendorPqCriteriaAnswers)
+      .where(eq(vendorPqCriteriaAnswers.vendorId, vendorId));
+    
+    const totalPqCriteriaCount = pqCriteriaCount[0]?.count || 0;
+    
+    // 응답 데이터 검증
+    if (totalPqCriteriaCount === 0) {
+      return { ok: false, error: "No PQ answers found" };
+    }
+    
+    // 2. 벤더 정보 조회
+    const vendor = await db
+      .select({
+        id: vendors.id,
+        vendorName: vendors.vendorName,
+        email: vendors.email,
+        status: vendors.status,
+      })
+      .from(vendors)
+      .where(eq(vendors.id, vendorId))
+      .then(rows => rows[0]);
+    
+    if (!vendor) {
+      return { ok: false, error: "Vendor not found" };
+    }
+    
+    // 3. 벤더 상태가 제출 가능한 상태인지 확인
+    const allowedStatuses = ["IN_PQ", "PENDING_REVIEW", "IN_REVIEW", "REJECTED", "PQ_FAILED"];
+    if (!allowedStatuses.includes(vendor.status)) {
+      return { 
+        ok: false, 
+        error: `Cannot submit PQ in current status: ${vendor.status}` 
+      };
+    }
+    
+    // 4. 벤더 상태 업데이트
+    await db
+      .update(vendors)
+      .set({
+        status: "PQ_SUBMITTED",
+        updatedAt: new Date(),
+      })
+      .where(eq(vendors.id, vendorId));
+    
+    // 5. 관리자에게 이메일 알림 발송
+    if (process.env.ADMIN_EMAIL) {
+      try {
+        await sendEmail({
+          to: process.env.ADMIN_EMAIL,
+          subject: `[eVCP] PQ Submitted: ${vendor.vendorName}`,
+          template: "pq-submitted-admin",
+          context: {
+            vendorName: vendor.vendorName,
+            vendorId: vendor.id,
+            submittedDate: new Date().toLocaleString(),
+            adminUrl: `${process.env.NEXT_PUBLIC_APP_URL}/admin/vendors/${vendorId}/pq`,
+          }
+        });
+      } catch (emailError) {
+        console.error("Failed to send admin notification:", emailError);
+        // 이메일 실패는 전체 프로세스를 중단하지 않음
+      }
+    }
+    
+    // 6. 벤더에게 확인 이메일 발송
+    if (vendor.email) {
+      try {
+        await sendEmail({
+          to: vendor.email,
+          subject: "[eVCP] PQ Submission Confirmation",
+          template: "pq-submitted-vendor",
+          context: {
+            vendorName: vendor.vendorName,
+            submittedDate: new Date().toLocaleString(),
+            portalUrl: `${process.env.NEXT_PUBLIC_APP_URL}/dashboard`,
+          }
+        });
+      } catch (emailError) {
+        console.error("Failed to send vendor confirmation:", emailError);
+        // 이메일 실패는 전체 프로세스를 중단하지 않음
+      }
+    }
+    
+    // 7. 캐시 무효화
+    revalidateTag("vendors");
+    revalidateTag("vendor-status-counts");
+    
+    return { ok: true };
+  } catch (error) {
+    console.error("PQ submit error:", error);
+    return { ok: false, error: getErrorMessage(error) };
+  }
+}
+
+/**
+ * 향상된 파일 업로드 서버 액션
+ * - 직접 파일 처리 (file 객체로 받음)
+ * - 디렉토리 자동 생성
+ * - 중복 방지를 위한 UUID 적용
+ */
+export async function uploadFileAction(file: File) {
+  unstable_noStore();
+  
+  try {
+    // 파일 유효성 검사
+    if (!file || file.size === 0) {
+      throw new Error("Invalid file");
+    }
+    
+    const maxSize = 6e8;
+    if (file.size > maxSize) {
+      throw new Error(`File size exceeds limit (${Math.round(maxSize / 1024 / 1024)}MB)`);
+    }
+    
+    // 파일 확장자 가져오기
+    const originalFilename = file.name;
+    const fileExt = path.extname(originalFilename);
+    const fileNameWithoutExt = path.basename(originalFilename, fileExt);
+    
+    // 저장 경로 설정
+    const uploadDir = process.env.UPLOAD_DIR 
+    ? process.env.UPLOAD_DIR 
+    : path.join(process.cwd(), "public", "uploads")
+    const datePrefix = new Date().toISOString().slice(0, 10).replace(/-/g, ''); // YYYYMMDD
+    const targetDir = path.join(uploadDir, 'pq', datePrefix);
+    
+    // UUID로 고유 파일명 생성
+    const uuid = randomUUID();
+    const sanitizedFilename = fileNameWithoutExt
+      .replace(/[^a-zA-Z0-9-_]/g, '_') // 안전한 문자만 허용
+      .slice(0, 50); // 이름 길이 제한
+    
+    const filename = `${sanitizedFilename}-${uuid}${fileExt}`;
+    const filePath = path.join(targetDir, filename);
+    const relativeFilePath = path.join('pq', datePrefix, filename);
+    
+    // 디렉토리 생성 (없는 경우)
+    try {
+      await mkdir(targetDir, { recursive: true });
+    } catch (err) {
+      console.error("Error creating directory:", err);
+      throw new Error("Failed to create upload directory");
+    }
+    
+    // 파일 저장
+    const buffer = await file.arrayBuffer();
+    await writeFile(filePath, Buffer.from(buffer));
+    
+    // 상대 경로를 반환 (DB에 저장하기 용이함)
+    const publicUrl = `/uploads/${relativeFilePath.replace(/\\/g, '/')}`;
+    
+    return {
+      fileName: originalFilename,
+      url: publicUrl,
+      size: file.size,
+    };
+  } catch (error) {
+    console.error("File upload error:", error);
+    throw new Error(`Upload failed: ${getErrorMessage(error)}`);
+  }
+}
+
+/**
+ * 여러 파일 일괄 업로드
+ */
+export async function uploadMultipleFilesAction(files: File[]) {
+  unstable_noStore();
+  
+  try {
+    const results = [];
+    
+    for (const file of files) {
+      try {
+        const result = await uploadFileAction(file);
+        results.push({
+          success: true,
+          ...result
+        });
+      } catch (error) {
+        results.push({
+          success: false,
+          fileName: file.name,
+          error: getErrorMessage(error)
+        });
+      }
+    }
+    
+    return {
+      ok: true,
+      results
+    };
+  } catch (error) {
+    console.error("Batch upload error:", error);
+    return {
+      ok: false,
+      error: getErrorMessage(error)
+    };
+  }
+}
+
+export async function getVendorsInPQ(input: GetVendorsSchema) {
+  return unstable_cache(
+    async () => {
+      try {
+        const offset = (input.page - 1) * input.perPage;
+
+        // 1) 고급 필터
+        const advancedWhere = filterColumns({
+          table: vendors,
+          filters: input.filters,
+          joinOperator: input.joinOperator,
+        });
+
+        // 2) 글로벌 검색
+        let globalWhere;
+        if (input.search) {
+          const s = `%${input.search}%`;
+          globalWhere = or(
+            ilike(vendors.vendorName, s),
+            ilike(vendors.vendorCode, s),
+            ilike(vendors.email, s),
+            ilike(vendors.status, s)
+          );
+        }
+
+        // 최종 where 결합
+        const finalWhere = and(advancedWhere, globalWhere, eq(vendors.status ,"PQ_SUBMITTED"));
+
+        // 간단 검색 (advancedTable=false) 시 예시
+        const simpleWhere = and(
+          input.vendorName
+            ? ilike(vendors.vendorName, `%${input.vendorName}%`)
+            : undefined,
+          input.status ? ilike(vendors.status, input.status) : undefined,
+          input.country
+            ? ilike(vendors.country, `%${input.country}%`)
+            : undefined
+        );
+
+        // 실제 사용될 where
+        const where = finalWhere;
+        
+        // 정렬
+        const orderBy =
+          input.sort.length > 0
+            ? input.sort.map((item) =>
+                item.desc ? desc(vendors[item.id]) : asc(vendors[item.id])
+              )
+            : [asc(vendors.createdAt)];
+
+        // 트랜잭션 내에서 데이터 조회
+        const { data, total } = await db.transaction(async (tx) => {
+          // 1) vendor 목록 조회
+          const vendorsData = await selectVendors(tx, {
+            where,
+            orderBy,
+            offset,
+            limit: input.perPage,
+          });
+
+          // 2) 각 vendor의 attachments 조회
+          const vendorsWithAttachments = await Promise.all(
+            vendorsData.map(async (vendor) => {
+              const attachments = await tx
+                .select({
+                  id: vendorAttachments.id,
+                  fileName: vendorAttachments.fileName,
+                  filePath: vendorAttachments.filePath,
+                })
+                .from(vendorAttachments)
+                .where(eq(vendorAttachments.vendorId, vendor.id));
+
+              return {
+                ...vendor,
+                hasAttachments: attachments.length > 0,
+                attachmentsList: attachments,
+              };
+            })
+          );
+
+          // 3) 전체 개수
+          const total = await countVendors(tx, where);
+          return { data: vendorsWithAttachments, total };
+        });
+
+        // 페이지 수
+        const pageCount = Math.ceil(total / input.perPage);
+
+        return { data, pageCount };
+      } catch (err) {
+        // 에러 발생 시
+        return { data: [], pageCount: 0 };
+      }
+    },
+    [JSON.stringify(input)], // 캐싱 키
+    {
+      revalidate: 3600,
+      tags: ["vendors-in-pq"], // revalidateTag("vendors") 호출 시 무효화
+    }
+  )();
+}
+
+
+export type VendorStatus =
+  | "PENDING_REVIEW"
+  | "IN_REVIEW"
+  | "REJECTED"
+  | "IN_PQ"
+  | "PQ_SUBMITTED"
+  | "PQ_FAILED"
+  | "APPROVED"
+  | "ACTIVE"
+  | "INACTIVE"
+  | "BLACKLISTED"
+
+  export async function updateVendorStatusAction(
+    vendorId: number,
+    newStatus: VendorStatus
+  ) {
+    try {
+      // 1) Update DB
+      await db.update(vendors)
+        .set({ status: newStatus })
+        .where(eq(vendors.id, vendorId))
+  
+      // 2) Load vendor’s email & name
+      const vendor = await db.select().from(vendors).where(eq(vendors.id, vendorId)).then(r => r[0])
+      if (!vendor) {
+        return { ok: false, error: "Vendor not found" }
+      }
+  
+      // 3) Send email
+      await sendEmail({
+        to: vendor.email || "",
+        subject: `Your PQ Status is now ${newStatus}`,
+        template: "vendor-pq-status",  // matches .hbs file
+        context: {
+          name: vendor.vendorName,
+          status: newStatus,
+          loginUrl: `${process.env.NEXT_PUBLIC_URL}/partners/pq`,  // etc.
+        },
+      })
+      revalidateTag("vendors")
+      revalidateTag("vendors-in-pq")
+      return { ok: true }
+    } catch (error) {
+      console.error("updateVendorStatusAction error:", error)
+      return { ok: false, error: String(error) }
+    }
+  }
+// 코멘트 타입 정의
+interface ItemComment {
+  answerId: number;
+  checkPoint: string; // 체크포인트 정보 추가
+  code: string;      // 코드 정보 추가
+  comment: string;
+}
+
+/**
+ * PQ 변경 요청 처리 서버 액션
+ * 
+ * @param vendorId 벤더 ID
+ * @param comment 항목별 코멘트 배열 (answerId, checkPoint, code, comment로 구성)
+ * @param generalComment 전체 PQ에 대한 일반 코멘트 (선택사항)
+ */
+export async function requestPqChangesAction({
+  vendorId,
+  comment,
+  generalComment,
+}: {
+  vendorId: number;
+  comment: ItemComment[];
+  generalComment?: string;
+}) {
+  try {
+    // 1) 벤더 상태 업데이트
+    await db.update(vendors)
+      .set({
+        status: "IN_PQ", // 변경 요청 상태로 설정
+        updatedAt: new Date(),
+      })
+      .where(eq(vendors.id, vendorId));
+
+    // 2) 벤더 정보 가져오기
+    const vendor = await db.select()
+      .from(vendors)
+      .where(eq(vendors.id, vendorId))
+      .then(r => r[0]);
+
+    if (!vendor) {
+      return { ok: false, error: "Vendor not found" };
+    }
+
+    // 3) 각 항목별 코멘트 저장
+    const currentDate = new Date();
+    const reviewerId = 1; // 관리자 ID (실제 구현에서는 세션에서 가져옵니다)
+    const reviewerName = "AdminUser"; // 실제 구현에서는 세션에서 가져옵니다
+
+    // 병렬로 모든 코멘트 저장
+    if (comment && comment.length > 0) {
+      const insertPromises = comment.map(item => 
+        db.insert(vendorPqReviewLogs)
+          .values({
+            vendorPqCriteriaAnswerId: item.answerId,
+            // reviewerId: reviewerId,
+            reviewerName: reviewerName,
+            reviewerComment: item.comment,
+            createdAt: currentDate,
+            // 추가 메타데이터 필드가 있다면 저장
+            // 이런 메타데이터는 DB 스키마에 해당 필드가 있어야 함
+            // meta: JSON.stringify({ checkPoint: item.checkPoint, code: item.code })
+          })
+      );
+
+      // 모든 삽입 기다리기
+      await Promise.all(insertPromises);
+    }
+
+    // 4) 변경 요청 이메일 보내기
+    // 코멘트 목록 준비
+    const commentItems = comment.map(item => ({
+      id: item.answerId,
+      code: item.code,
+      checkPoint: item.checkPoint,
+      text: item.comment
+    }));
+
+    await sendEmail({
+      to: vendor.email || "",
+      subject: `[IMPORTANT] Your PQ submission requires changes`,
+      template: "vendor-pq-comment", // matches .hbs file
+      context: {
+        name: vendor.vendorName,
+        vendorCode: vendor.vendorCode,
+        loginUrl: `${process.env.NEXT_PUBLIC_URL}/partners/pq`,
+        comments: commentItems,
+        generalComment: generalComment || "",
+        hasGeneralComment: !!generalComment,
+        commentCount: commentItems.length,
+      },
+    });
+
+    revalidateTag("vendors")
+    revalidateTag("vendors-in-pq")
+
+    return { ok: true };
+  } catch (error) {
+    console.error("requestPqChangesAction error:", error);
+    return { ok: false, error: String(error) };
+  }
+}
+interface AddReviewCommentInput {
+  answerId: number // vendorPqCriteriaAnswers.id
+  comment: string
+  reviewerName?: string
+}
+
+export async function addReviewCommentAction(input: AddReviewCommentInput) {
+  try {
+    // 1) Check that the answer row actually exists
+    const existing = await db
+      .select({ id: vendorPqCriteriaAnswers.id })
+      .from(vendorPqCriteriaAnswers)
+      .where(eq(vendorPqCriteriaAnswers.id, input.answerId))
+
+    if (existing.length === 0) {
+      return { ok: false, error: "Item not found" }
+    }
+
+    // 2) Insert the log
+    await db.insert(vendorPqReviewLogs).values({
+      vendorPqCriteriaAnswerId: input.answerId,
+      reviewerComment: input.comment,
+      reviewerName: input.reviewerName ?? "AdminUser",
+    })
+
+    return { ok: true }
+  } catch (error) {
+    console.error("addReviewCommentAction error:", error)
+    return { ok: false, error: String(error) }
+  }
+}
+
+interface GetItemReviewLogsInput {
+  answerId: number
+}
+
+export async function getItemReviewLogsAction(input: GetItemReviewLogsInput) {
+  try {
+    
+    const logs = await db
+      .select()
+      .from(vendorPqReviewLogs)
+      .where(eq(vendorPqReviewLogs.vendorPqCriteriaAnswerId, input.answerId))
+      .orderBy(desc(vendorPqReviewLogs.createdAt));
+      
+    return { ok: true, data: logs };
+  } catch (error) {
+    console.error("getItemReviewLogsAction error:", error);
+    return { ok: false, error: String(error) };
+  }
+}
\ No newline at end of file
diff --git a/lib/pq/table/add-pq-dialog.tsx b/lib/pq/table/add-pq-dialog.tsx
new file mode 100644
index 00000000..8164dbaf
--- /dev/null
+++ b/lib/pq/table/add-pq-dialog.tsx
@@ -0,0 +1,299 @@
+"use client"
+
+import * as React from "react"
+import { useForm } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { z } from "zod"
+import { Plus } from "lucide-react"
+import { useRouter } from "next/navigation"
+
+import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { useToast } from "@/hooks/use-toast"
+import { createPq, invalidatePqCache } from "../service"
+
+// PQ 생성을 위한 Zod 스키마 정의
+const createPqSchema = z.object({
+  code: z.string().min(1, "Code is required"),
+  checkPoint: z.string().min(1, "Check point is required"),
+  groupName: z.string().min(1, "Group is required"),
+  description: z.string().optional(),
+  remarks: z.string().optional()
+});
+
+type CreatePqInputType = z.infer<typeof createPqSchema>;
+
+// 그룹 이름 옵션
+const groupOptions = [
+  "GENERAL",
+  "Quality Management System",
+  "Workshop & Environment",
+  "Warranty",
+];
+
+// 설명 예시 텍스트
+const descriptionExample = `Address :
+Tel. / Fax :
+e-mail :`;
+
+export function AddPqDialog() {
+  const [open, setOpen] = React.useState(false)
+  const [isSubmitting, setIsSubmitting] = React.useState(false)
+  const router = useRouter()
+  const { toast } = useToast()
+
+  // react-hook-form 설정
+  const form = useForm<CreatePqInputType>({
+    resolver: zodResolver(createPqSchema),
+    defaultValues: {
+      code: "",
+      checkPoint: "",
+      groupName: groupOptions[0],
+      description: "",
+      remarks: ""
+    },
+  })
+
+  // 예시 텍스트를 description 필드에 채우는 함수
+  const fillExampleText = () => {
+    form.setValue("description", descriptionExample);
+  };
+
+  async function onSubmit(data: CreatePqInputType) {
+    try {
+      setIsSubmitting(true)
+      
+      // 서버 액션 호출
+      const result = await createPq(data)
+      
+      if (!result.success) {
+        toast({
+          title: "Error",
+          description: result.message || "Failed to create PQ criteria",
+          variant: "destructive",
+        })
+        return
+      }
+
+      await invalidatePqCache();
+      
+      // 성공 시 처리
+      toast({
+        title: "Success",
+        description: "PQ criteria created successfully",
+      })
+      
+      // 모달 닫고 폼 리셋
+      form.reset()
+      setOpen(false)
+      
+      // 페이지 새로고침
+      router.refresh()
+      
+    } catch (error) {
+      console.error('Error creating PQ criteria:', error)
+      toast({
+        title: "Error",
+        description: "An unexpected error occurred",
+        variant: "destructive",
+      })
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  function handleDialogOpenChange(nextOpen: boolean) {
+    if (!nextOpen) {
+      form.reset()
+    }
+    setOpen(nextOpen)
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={handleDialogOpenChange}>
+      {/* 모달을 열기 위한 버튼 */}
+      <DialogTrigger asChild>
+        <Button variant="default" size="sm">
+          <Plus className="size-4" />
+          Add PQ
+        </Button>
+      </DialogTrigger>
+
+      <DialogContent className="sm:max-w-[550px]">
+        <DialogHeader>
+          <DialogTitle>Create New PQ Criteria</DialogTitle>
+          <DialogDescription>
+            새 PQ 기준 정보를 입력하고 <b>Create</b> 버튼을 누르세요.
+          </DialogDescription>
+        </DialogHeader>
+
+        {/* shadcn/ui Form을 이용해 react-hook-form과 연결 */}
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4 py-2">
+            {/* Code 필드 */}
+            <FormField
+              control={form.control}
+              name="code"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Code <span className="text-destructive">*</span></FormLabel>
+                  <FormControl>
+                    <Input
+                      placeholder="예: 1-1, A.2.3"
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormDescription>
+                    PQ 항목의 고유 코드를 입력하세요 (예: "1-1", "A.2.3")
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {/* Check Point 필드 */}
+            <FormField
+              control={form.control}
+              name="checkPoint"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Check Point <span className="text-destructive">*</span></FormLabel>
+                  <FormControl>
+                    <Input
+                      placeholder="검증 항목을 입력하세요"
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {/* Group Name 필드 (Select) */}
+            <FormField
+              control={form.control}
+              name="groupName"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Group <span className="text-destructive">*</span></FormLabel>
+                  <Select 
+                    onValueChange={field.onChange} 
+                    defaultValue={field.value}
+                    value={field.value}
+                  >
+                    <FormControl>
+                      <SelectTrigger>
+                        <SelectValue placeholder="그룹을 선택하세요" />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent>
+                      {groupOptions.map((group) => (
+                        <SelectItem key={group} value={group}>
+                          {group}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                  <FormDescription>
+                    PQ 항목의 분류 그룹을 선택하세요
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {/* Description 필드 - 예시 템플릿 버튼 추가 */}
+            <FormField
+              control={form.control}
+              name="description"
+              render={({ field }) => (
+                <FormItem>
+                  <div className="flex items-center justify-between">
+                    <FormLabel>Description</FormLabel>
+                    <Button 
+                      type="button" 
+                      variant="outline" 
+                      size="sm" 
+                      onClick={fillExampleText}
+                    >
+                      예시 채우기
+                    </Button>
+                  </div>
+                  <FormControl>
+                    <Textarea
+                      placeholder={`줄바꿈을 포함한 상세 설명을 입력하세요\n예:\n${descriptionExample}`}
+                      className="min-h-[120px] font-mono"
+                      {...field}
+                      value={field.value || ""}
+                    />
+                  </FormControl>
+                  <FormDescription>
+                    줄바꿈이 필요한 경우 Enter 키를 누르세요. 입력한 대로 저장됩니다.
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {/* Remarks 필드 */}
+            <FormField
+              control={form.control}
+              name="remarks"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Remarks</FormLabel>
+                  <FormControl>
+                    <Textarea
+                      placeholder="비고 사항을 입력하세요"
+                      className="min-h-[80px]"
+                      {...field}
+                      value={field.value || ""}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <DialogFooter>
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => {
+                    form.reset(); 
+                    setOpen(false);
+                  }}
+              >
+                Cancel
+              </Button>
+              <Button 
+                type="submit" 
+                disabled={isSubmitting}
+              >
+                {isSubmitting ? "Creating..." : "Create"}
+              </Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  )
+}
\ No newline at end of file
diff --git a/lib/pq/table/delete-pqs-dialog.tsx b/lib/pq/table/delete-pqs-dialog.tsx
new file mode 100644
index 00000000..c6a2ce82
--- /dev/null
+++ b/lib/pq/table/delete-pqs-dialog.tsx
@@ -0,0 +1,149 @@
+"use client"
+
+import * as React from "react"
+import { type Row } from "@tanstack/react-table"
+import { Loader, Trash } from "lucide-react"
+import { toast } from "sonner"
+
+import { useMediaQuery } from "@/hooks/use-media-query"
+import { Button } from "@/components/ui/button"
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/components/ui/drawer"
+import { PqCriterias } from "@/db/schema/pq"
+import { removePqs } from "../service"
+
+
+interface DeleteTasksDialogProps
+  extends React.ComponentPropsWithoutRef<typeof Dialog> {
+    pqs: Row<PqCriterias>["original"][]
+  showTrigger?: boolean
+  onSuccess?: () => void
+}
+
+export function DeletePqsDialog({
+  pqs,
+  showTrigger = true,
+  onSuccess,
+  ...props
+}: DeleteTasksDialogProps) {
+  const [isDeletePending, startDeleteTransition] = React.useTransition()
+  const isDesktop = useMediaQuery("(min-width: 640px)")
+
+  function onDelete() {
+    startDeleteTransition(async () => {
+      const { error } = await removePqs({
+        ids: pqs.map((pq) => pq.id),
+      })
+
+      if (error) {
+        toast.error(error)
+        return
+      }
+
+      props.onOpenChange?.(false)
+      toast.success("Tasks deleted")
+      onSuccess?.()
+    })
+  }
+
+  if (isDesktop) {
+    return (
+      <Dialog {...props}>
+        {showTrigger ? (
+          <DialogTrigger asChild>
+            <Button variant="outline" size="sm">
+              <Trash className="mr-2 size-4" aria-hidden="true" />
+              Delete ({pqs.length})
+            </Button>
+          </DialogTrigger>
+        ) : null}
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Are you absolutely sure?</DialogTitle>
+            <DialogDescription>
+              This action cannot be undone. This will permanently delete your{" "}
+              <span className="font-medium">{pqs.length}</span>
+              {pqs.length === 1 ? " PQ" : " PQs"} from our servers.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter className="gap-2 sm:space-x-0">
+            <DialogClose asChild>
+              <Button variant="outline">Cancel</Button>
+            </DialogClose>
+            <Button
+              aria-label="Delete selected rows"
+              variant="destructive"
+              onClick={onDelete}
+              disabled={isDeletePending}
+            >
+              {isDeletePending && (
+                <Loader
+                  className="mr-2 size-4 animate-spin"
+                  aria-hidden="true"
+                />
+              )}
+              Delete
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    )
+  }
+
+  return (
+    <Drawer {...props}>
+      {showTrigger ? (
+        <DrawerTrigger asChild>
+          <Button variant="outline" size="sm">
+            <Trash className="mr-2 size-4" aria-hidden="true" />
+            Delete ({pqs.length})
+          </Button>
+        </DrawerTrigger>
+      ) : null}
+      <DrawerContent>
+        <DrawerHeader>
+          <DrawerTitle>Are you absolutely sure?</DrawerTitle>
+          <DrawerDescription>
+            This action cannot be undone. This will permanently delete your{" "}
+            <span className="font-medium">{pqs.length}</span>
+            {pqs.length === 1 ? " task" : " pqs"} from our servers.
+          </DrawerDescription>
+        </DrawerHeader>
+        <DrawerFooter className="gap-2 sm:space-x-0">
+          <DrawerClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </DrawerClose>
+          <Button
+            aria-label="Delete selected rows"
+            variant="destructive"
+            onClick={onDelete}
+            disabled={isDeletePending}
+          >
+            {isDeletePending && (
+              <Loader className="mr-2 size-4 animate-spin" aria-hidden="true" />
+            )}
+            Delete
+          </Button>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  )
+}
diff --git a/lib/pq/table/pq-table-column.tsx b/lib/pq/table/pq-table-column.tsx
new file mode 100644
index 00000000..7efed645
--- /dev/null
+++ b/lib/pq/table/pq-table-column.tsx
@@ -0,0 +1,185 @@
+"use client"
+
+import * as React from "react"
+import { ColumnDef } from "@tanstack/react-table"
+import { formatDate, formatDateTime } from "@/lib/utils"
+import { Checkbox } from "@/components/ui/checkbox"
+import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header"
+import { DataTableRowAction } from "@/types/table"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { Button } from "@/components/ui/button"
+import { Ellipsis } from "lucide-react"
+import { Badge } from "@/components/ui/badge"
+import { PqCriterias } from "@/db/schema/pq"
+
+interface GetColumnsProps {
+  setRowAction: React.Dispatch<React.SetStateAction<DataTableRowAction<PqCriterias> | null>>
+}
+
+export function getColumns({
+  setRowAction,
+}: GetColumnsProps): ColumnDef<PqCriterias>[] {
+  return [
+ {
+    id: "select",
+    header: ({ table }) => (
+      <Checkbox
+        checked={
+          table.getIsAllPageRowsSelected() ||
+          (table.getIsSomePageRowsSelected() && "indeterminate")
+        }
+        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+        aria-label="Select all"
+        className="translate-y-0.5"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={(value) => row.toggleSelected(!!value)}
+        aria-label="Select row"
+        className="translate-y-0.5"
+      />
+    ),
+    size:40,
+    enableSorting: false,
+    enableHiding: false,
+  },
+
+  {
+    accessorKey: "groupName",
+    header: ({ column }) => (
+      <DataTableColumnHeaderSimple column={column} title="Group Name" />
+    ),
+    cell: ({ row }) => <div>{row.getValue("groupName")}</div>,
+    meta: {
+      excelHeader: "Group Name"
+    },
+    enableResizing: true,
+    minSize: 60,
+    size: 100,
+  },
+    {
+      accessorKey: "code",
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title="Code" />
+      ),
+      cell: ({ row }) => <div>{row.getValue("code")}</div>,
+      meta: {
+        excelHeader: "Code"
+      },
+      enableResizing: true,
+      minSize: 50,
+      size: 100,
+    },
+    {
+      accessorKey: "checkPoint",
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title="Check Point" />
+      ),
+      cell: ({ row }) => <div>{row.getValue("checkPoint")}</div>,
+      meta: {
+        excelHeader: "Check Point"
+      },
+      enableResizing: true,
+      minSize: 180,
+      size: 180,
+    },
+
+    {
+      accessorKey: "description",
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title="Description" />
+      ),
+      cell: ({ row }) => {
+        const text = row.getValue("description") as string
+        return (
+          <div style={{ whiteSpace: "pre-wrap" }}>
+            {text}
+          </div>
+        )
+      },
+      meta: {
+        excelHeader: "Description"
+      },
+      enableResizing: true,
+      minSize: 180,
+      size: 180,
+    },
+
+    {
+      accessorKey: "createdAt",
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title="Created At" />
+      ),
+      cell: ({ cell }) => formatDateTime(cell.getValue() as Date),
+      meta: {
+        excelHeader: "created At"
+      },
+      enableResizing: true,
+      minSize: 180,
+      size: 180,
+    },
+    {
+      accessorKey: "updatedAt",
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title="Updated At" />
+      ),
+      cell: ({ cell }) => formatDateTime(cell.getValue() as Date),
+      meta: {
+        excelHeader: "updated At"
+      },
+      enableResizing: true,
+      minSize: 180,
+      size: 180,
+    },
+    {
+      id: "actions",
+      enableHiding: false,
+      cell: function Cell({ row }) {
+        const [isUpdatePending, startUpdateTransition] = React.useTransition()
+  
+        return (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                aria-label="Open menu"
+                variant="ghost"
+                className="flex size-7 p-0 data-[state=open]:bg-muted"
+              >
+                <Ellipsis className="size-4" aria-hidden="true" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="w-40">
+              <DropdownMenuItem
+                onSelect={() => setRowAction({ row, type: "update" })}
+              >
+                Edit
+              </DropdownMenuItem>
+
+              <DropdownMenuItem
+                onSelect={() => setRowAction({ row, type: "delete" })}
+              >
+                Delete
+                <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        )
+      },
+      size: 40,
+    }
+  ]
+}
\ No newline at end of file
diff --git a/lib/pq/table/pq-table-toolbar-actions.tsx b/lib/pq/table/pq-table-toolbar-actions.tsx
new file mode 100644
index 00000000..1d151520
--- /dev/null
+++ b/lib/pq/table/pq-table-toolbar-actions.tsx
@@ -0,0 +1,55 @@
+"use client"
+
+import * as React from "react"
+import { type Table } from "@tanstack/react-table"
+import { Download, Send, Upload } from "lucide-react"
+import { toast } from "sonner"
+
+import { exportTableToExcel } from "@/lib/export"
+import { Button } from "@/components/ui/button"
+import { DeletePqsDialog } from "./delete-pqs-dialog"
+import { AddPqDialog } from "./add-pq-dialog"
+import { PqCriterias } from "@/db/schema/pq"
+
+
+interface DocTableToolbarActionsProps {
+  table: Table<PqCriterias>
+}
+
+export function PqTableToolbarActions({ table}: DocTableToolbarActionsProps) {
+
+
+  return (
+    <div className="flex items-center gap-2">
+      {table.getFilteredSelectedRowModel().rows.length > 0 ? (
+        <DeletePqsDialog
+          pqs={table
+            .getFilteredSelectedRowModel()
+            .rows.map((row) => row.original)}
+          onSuccess={() => table.toggleAllRowsSelected(false)}
+        />
+      ) : null}
+
+
+      <AddPqDialog />
+
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={() =>
+          exportTableToExcel(table, {
+            filename: "Document-list",
+            excludeColumns: ["select", "actions"],
+          })
+        }
+        className="gap-2"
+      >
+        <Download className="size-4" aria-hidden="true" />
+        <span className="hidden sm:inline">Export</span>
+      </Button>
+
+
+
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/lib/pq/table/pq-table.tsx b/lib/pq/table/pq-table.tsx
new file mode 100644
index 00000000..73876c72
--- /dev/null
+++ b/lib/pq/table/pq-table.tsx
@@ -0,0 +1,125 @@
+"use client"
+
+import * as React from "react"
+import type {
+  DataTableAdvancedFilterField,
+  DataTableFilterField,
+  DataTableRowAction,
+} from "@/types/table"
+
+import { useDataTable } from "@/hooks/use-data-table"
+import { DataTable } from "@/components/data-table/data-table"
+import { getPQs } from "../service"
+import { DataTableAdvancedToolbar } from "@/components/data-table/data-table-advanced-toolbar"
+import { PqCriterias } from "@/db/schema/pq"
+import { DeletePqsDialog } from "./delete-pqs-dialog"
+import { PqTableToolbarActions } from "./pq-table-toolbar-actions"
+import { getColumns } from "./pq-table-column"
+import { UpdatePqSheet } from "./update-pq-sheet"
+
+interface DocumentListTableProps {
+  promises: Promise<[Awaited<ReturnType<typeof getPQs>>]>
+}
+
+export function PqsTable({
+  promises,
+}: DocumentListTableProps) {
+  // 1) 데이터를 가져옴 (server component -> use(...) pattern)
+  const [{ data, pageCount }] = React.use(promises)
+
+  const [rowAction, setRowAction] = React.useState<DataTableRowAction<PqCriterias> | null>(null)
+
+
+  const columns = React.useMemo(
+    () => getColumns({ setRowAction }),
+    [setRowAction]
+  )
+
+  // Filter fields
+  const filterFields: DataTableFilterField<PqCriterias>[] = []
+
+  const advancedFilterFields: DataTableAdvancedFilterField<PqCriterias>[] = [
+    {
+      id: "code",
+      label: "Code",
+      type: "text",
+    },
+    {
+      id: "checkPoint",
+      label: "Check Point",
+      type: "text",
+    },
+    {
+      id: "description",
+      label: "Description",
+      type: "text",
+    },
+    {
+      id: "remarks",
+      label: "Remarks",
+      type: "text",
+    },
+    {
+      id: "groupName",
+      label: "Group Name",
+      type: "text",
+    },
+    {
+      id: "createdAt",
+      label: "Created at",
+      type: "date",
+    },
+    {
+      id: "updatedAt",
+      label: "Updated at",
+      type: "date",
+    },
+  ]
+
+  // useDataTable 훅으로 react-table 구성
+  const { table } = useDataTable({
+    data: data,      // <-- 여기서 tableData 사용
+    columns,
+    pageCount,
+    filterFields,
+    enablePinning: true,
+    enableAdvancedFilter: true,
+    initialState: {
+      sorting: [{ id: "createdAt", desc: true }],
+      columnPinning: { right: ["actions"] },
+      // grouping:['groupName']
+    },
+    getRowId: (originalRow) => String(originalRow.id),
+    shallow: false,
+    clearOnDefault: true,
+    columnResizeMode: "onEnd",
+
+  })
+  return (
+    <>
+      <DataTable table={table} >
+        <DataTableAdvancedToolbar
+          table={table}
+          filterFields={advancedFilterFields}
+          shallow={false}
+        >
+          <PqTableToolbarActions table={table} />
+        </DataTableAdvancedToolbar>
+      </DataTable>
+
+      <UpdatePqSheet
+        open={rowAction?.type === "update"}
+        onOpenChange={() => setRowAction(null)}
+        pq={rowAction?.row.original ?? null}
+      />
+
+      <DeletePqsDialog
+        open={rowAction?.type === "delete"}
+        onOpenChange={() => setRowAction(null)}
+        pqs={rowAction?.row.original ? [rowAction?.row.original] : []}
+        showTrigger={false}
+        onSuccess={() => rowAction?.row.toggleSelected(false)}
+      />
+    </>
+  )
+}
\ No newline at end of file
diff --git a/lib/pq/table/update-pq-sheet.tsx b/lib/pq/table/update-pq-sheet.tsx
new file mode 100644
index 00000000..3bac3558
--- /dev/null
+++ b/lib/pq/table/update-pq-sheet.tsx
@@ -0,0 +1,272 @@
+"use client"
+
+import * as React from "react"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Loader, Save } from "lucide-react"
+import { useForm } from "react-hook-form"
+import { toast } from "sonner"
+import { z } from "zod"
+import { useRouter } from "next/navigation"
+
+import { Button } from "@/components/ui/button"
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet"
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
+
+import { modifyPq } from "../service"
+
+// PQ 수정을 위한 Zod 스키마 정의
+const updatePqSchema = z.object({
+  code: z.string().min(1, "Code is required"),
+  checkPoint: z.string().min(1, "Check point is required"),
+  groupName: z.string().min(1, "Group is required"),
+  description: z.string().optional(),
+  remarks: z.string().optional()
+});
+
+type UpdatePqSchema = z.infer<typeof updatePqSchema>;
+
+// 그룹 이름 옵션
+const groupOptions = [
+  "GENERAL",
+  "Quality Management System",
+  "Organization",
+  "Resource Management",
+  "Other"
+];
+
+interface UpdatePqSheetProps
+  extends React.ComponentPropsWithRef<typeof Sheet> {
+  pq: {
+    id: number;
+    code: string;
+    checkPoint: string;
+    description: string | null;
+    remarks: string | null;
+    groupName: string | null;
+  } | null
+}
+
+export function UpdatePqSheet({ pq, ...props }: UpdatePqSheetProps) {
+  const [isUpdatePending, startUpdateTransition] = React.useTransition()
+  const router = useRouter()
+
+  const form = useForm<UpdatePqSchema>({
+    resolver: zodResolver(updatePqSchema),
+    defaultValues: {
+      code: pq?.code ?? "",
+      checkPoint: pq?.checkPoint ?? "",
+      groupName: pq?.groupName ?? groupOptions[0],
+      description: pq?.description ?? "",
+      remarks: pq?.remarks ?? "",
+    },
+  })
+
+  // 폼 초기화 (pq가 변경될 때)
+  React.useEffect(() => {
+    if (pq) {
+      form.reset({
+        code: pq.code,
+        checkPoint: pq.checkPoint,
+        groupName: pq.groupName ?? groupOptions[0],
+        description: pq.description ?? "",
+        remarks: pq.remarks ?? "",
+      });
+    }
+  }, [pq, form]);
+
+  function onSubmit(input: UpdatePqSchema) {
+    startUpdateTransition(async () => {
+      if (!pq) return
+  
+      const result = await modifyPq({
+        id: pq.id,
+        ...input,
+      })
+  
+      if (!result.success && 'error' in result) {
+        toast.error(result.error)
+      } else {
+        toast.error("Failed to update PQ criteria")
+      }
+  
+      form.reset()
+      props.onOpenChange?.(false)
+      toast.success("PQ criteria updated successfully")
+      router.refresh()
+    })
+  }
+  return (
+    <Sheet {...props}>
+      <SheetContent className="flex flex-col gap-6 sm:max-w-md">
+        <SheetHeader className="text-left">
+          <SheetTitle>Update PQ Criteria</SheetTitle>
+          <SheetDescription>
+            Update the PQ criteria details and save the changes
+          </SheetDescription>
+        </SheetHeader>
+        <Form {...form}>
+          <form
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="flex flex-col gap-4"
+          >
+            {/* Code 필드 */}
+            <FormField
+              control={form.control}
+              name="code"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Code <span className="text-destructive">*</span></FormLabel>
+                  <FormControl>
+                    <Input
+                      placeholder="예: 1-1, A.2.3"
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {/* Check Point 필드 */}
+            <FormField
+              control={form.control}
+              name="checkPoint"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Check Point <span className="text-destructive">*</span></FormLabel>
+                  <FormControl>
+                    <Input
+                      placeholder="검증 항목을 입력하세요"
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {/* Group Name 필드 (Select) */}
+            <FormField
+              control={form.control}
+              name="groupName"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Group <span className="text-destructive">*</span></FormLabel>
+                  <Select 
+                    onValueChange={field.onChange} 
+                    defaultValue={field.value}
+                    value={field.value}
+                  >
+                    <FormControl>
+                      <SelectTrigger>
+                        <SelectValue placeholder="그룹을 선택하세요" />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent>
+                      {groupOptions.map((group) => (
+                        <SelectItem key={group} value={group}>
+                          {group}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {/* Description 필드 */}
+            <FormField
+              control={form.control}
+              name="description"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Description</FormLabel>
+                  <FormControl>
+                    <Textarea
+                      placeholder="상세 설명을 입력하세요"
+                      className="min-h-[120px] whitespace-pre-wrap"
+                      {...field}
+                      value={field.value || ""}
+                    />
+                  </FormControl>
+                  <FormDescription>
+                    줄바꿈이 필요한 경우 Enter 키를 누르세요. 입력한 대로 저장됩니다.
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {/* Remarks 필드 */}
+            <FormField
+              control={form.control}
+              name="remarks"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Remarks</FormLabel>
+                  <FormControl>
+                    <Textarea
+                      placeholder="비고 사항을 입력하세요"
+                      className="min-h-[80px]"
+                      {...field}
+                      value={field.value || ""}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <SheetFooter className="gap-2 pt-2 sm:space-x-0">
+              <SheetClose asChild>
+                <Button 
+                  type="button" 
+                  variant="outline"
+                  onClick={() => form.reset()}
+                >
+                  Cancel
+                </Button>
+              </SheetClose>
+              <Button disabled={isUpdatePending}>
+                {isUpdatePending && (
+                  <Loader
+                    className="mr-2 size-4 animate-spin"
+                    aria-hidden="true"
+                  />
+                )}
+                <Save className="mr-2 size-4" /> Save
+              </Button>
+            </SheetFooter>
+          </form>
+        </Form>
+      </SheetContent>
+    </Sheet>
+  )
+}
\ No newline at end of file
diff --git a/lib/pq/validations.ts b/lib/pq/validations.ts
new file mode 100644
index 00000000..27e065ba
--- /dev/null
+++ b/lib/pq/validations.ts
@@ -0,0 +1,36 @@
+import {
+  createSearchParamsCache,
+  parseAsArrayOf,
+  parseAsInteger,
+  parseAsString,
+  parseAsStringEnum,
+} from "nuqs/server"
+import * as z from "zod"
+
+import { getFiltersStateParser, getSortingStateParser } from "@/lib/parsers"
+import { PqCriterias } from "@/db/schema/pq"
+
+export const searchParamsCache = createSearchParamsCache({
+  flags: parseAsArrayOf(z.enum(["advancedTable", "floatingBar"])).withDefault(
+    []
+  ),
+  page: parseAsInteger.withDefault(1),
+  perPage: parseAsInteger.withDefault(10),
+  sort: getSortingStateParser<PqCriterias>().withDefault([
+    { id: "createdAt", desc: true },
+  ]),
+  code: parseAsString.withDefault(""),
+  checkPoint: parseAsString.withDefault(""),
+  description: parseAsString.withDefault(""),
+  remarks: parseAsString.withDefault(""),
+  groupName: parseAsString.withDefault(""),
+
+  // advanced filter
+  filters: getFiltersStateParser().withDefault([]),
+  joinOperator: parseAsStringEnum(["and", "or"]).withDefault("and"),
+  search: parseAsString.withDefault(""),
+
+})
+
+
+export type GetPQSchema = Awaited<ReturnType<typeof searchParamsCache.parse>>
diff --git a/lib/rfqs/cbe-table/cbe-table-columns.tsx b/lib/rfqs/cbe-table/cbe-table-columns.tsx
new file mode 100644
index 00000000..325b0465
--- /dev/null
+++ b/lib/rfqs/cbe-table/cbe-table-columns.tsx
@@ -0,0 +1,227 @@
+"use client"
+
+import * as React from "react"
+import { type DataTableRowAction } from "@/types/table"
+import { type ColumnDef } from "@tanstack/react-table"
+import { Download, Ellipsis, MessageSquare } from "lucide-react"
+import { toast } from "sonner"
+
+import { getErrorMessage } from "@/lib/handle-error"
+import { formatDate } from "@/lib/utils"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Checkbox } from "@/components/ui/checkbox"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header"
+import { useRouter } from "next/navigation"
+
+
+import { VendorWithCbeFields,vendorCbeColumnsConfig } from "@/config/vendorCbeColumnsConfig"
+
+type NextRouter = ReturnType<typeof useRouter>
+
+interface GetColumnsProps {
+  setRowAction: React.Dispatch<
+    React.SetStateAction<DataTableRowAction<VendorWithCbeFields> | null>
+  >
+  router: NextRouter
+  openCommentSheet: (vendorId: number) => void
+  openFilesDialog: (cbeId:number , vendorId: number) => void
+}
+
+/**
+ * tanstack table 컬럼 정의 (중첩 헤더 버전)
+ */
+export function getColumns({
+  setRowAction,
+  router,
+  openCommentSheet,
+  openFilesDialog
+}: GetColumnsProps): ColumnDef<VendorWithCbeFields>[] {
+  // ----------------------------------------------------------------
+  // 1) Select 컬럼 (체크박스)
+  // ----------------------------------------------------------------
+  const selectColumn: ColumnDef<VendorWithCbeFields> = {
+    id: "select",
+    header: ({ table }) => (
+      <Checkbox
+        checked={
+          table.getIsAllPageRowsSelected() ||
+          (table.getIsSomePageRowsSelected() && "indeterminate")
+        }
+        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+        aria-label="Select all"
+        className="translate-y-0.5"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={(value) => row.toggleSelected(!!value)}
+        aria-label="Select row"
+        className="translate-y-0.5"
+      />
+    ),
+    size: 40,
+    enableSorting: false,
+    enableHiding: false,
+  }
+
+  // ----------------------------------------------------------------
+  // 2) 그룹화(Nested) 컬럼 구성
+  // ----------------------------------------------------------------
+  const groupMap: Record<string, ColumnDef<VendorWithCbeFields>[]> = {}
+
+  vendorCbeColumnsConfig.forEach((cfg) => {
+    const groupName = cfg.group || "_noGroup"
+    if (!groupMap[groupName]) {
+      groupMap[groupName] = []
+    }
+
+    // childCol: ColumnDef<VendorWithCbeFields>
+    const childCol: ColumnDef<VendorWithCbeFields> = {
+      accessorKey: cfg.id,
+      enableResizing: true,
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title={cfg.label} />
+      ),
+      meta: {
+        excelHeader: cfg.excelHeader,
+        group: cfg.group,
+        type: cfg.type,
+      },
+      // 셀 렌더링
+      cell: ({ row, getValue }) => {
+        // 1) 필드값 가져오기
+        const val = getValue()
+
+        if (cfg.id === "vendorStatus") {
+          const statusVal = row.original.vendorStatus
+          if (!statusVal) return null
+          // const Icon = getStatusIcon(statusVal)
+          return (
+            <Badge variant="outline">
+              {statusVal}
+            </Badge>
+          )
+        }
+
+
+        if (cfg.id === "rfqVendorStatus") {
+          const statusVal = row.original.rfqVendorStatus
+          if (!statusVal) return null
+          // const Icon = getStatusIcon(statusVal)
+          const variant = statusVal ==="INVITED"?"default" :statusVal ==="DECLINED"?"destructive":statusVal ==="ACCEPTED"?"secondary":"outline"
+          return (
+            <Badge variant={variant}>
+              {statusVal}
+            </Badge>
+          )
+        }
+
+        // 예) TBE Updated (날짜)
+        if (cfg.id === "cbeUpdated") {
+          const dateVal = val as Date | undefined
+          if (!dateVal) return null
+          return formatDate(dateVal)
+        }
+
+        // 그 외 필드는 기본 값 표시
+        return val ?? ""
+      },
+    }
+
+    groupMap[groupName].push(childCol)
+  })
+
+  // groupMap → nestedColumns
+  const nestedColumns: ColumnDef<VendorWithCbeFields>[] = []
+  Object.entries(groupMap).forEach(([groupName, colDefs]) => {
+    if (groupName === "_noGroup") {
+      nestedColumns.push(...colDefs)
+    } else {
+      nestedColumns.push({
+        id: groupName,
+        header: groupName,
+        columns: colDefs,
+      })
+    }
+  })
+
+// ----------------------------------------------------------------
+// 3) Comments 컬럼
+// ----------------------------------------------------------------
+const commentsColumn: ColumnDef<VendorWithCbeFields> = {
+  id: "comments",
+  header: ({ column }) => (
+    <DataTableColumnHeaderSimple column={column} title="Comments" />
+  ),
+  cell: ({ row }) => {
+    const vendor = row.original
+    const commCount = vendor.comments?.length ?? 0
+
+    function handleClick() {
+      // rowAction + openCommentSheet
+      setRowAction({ row, type: "comments" })
+      openCommentSheet(vendor.cbeId ?? 0)
+    }
+
+    return (
+      <div className="flex items-center justify-center">
+        <Button
+          variant="ghost"
+          size="sm"
+          className="h-8 w-8 p-0 group relative"
+          onClick={handleClick}
+          aria-label={commCount > 0 ? `View ${commCount} comments` : "Add comment"}
+        >
+          <div className="flex items-center justify-center relative">
+            {commCount > 0 ? (
+              <>
+                <MessageSquare className="h-4 w-4 text-muted-foreground group-hover:text-primary transition-colors" />
+                <Badge 
+                  variant="secondary" 
+                  className="absolute -top-2 -right-2 h-4 min-w-4 text-xs px-1 flex items-center justify-center"
+                >
+                  {commCount}
+                </Badge>
+              </>
+            ) : (
+              <MessageSquare className="h-4 w-4 text-muted-foreground group-hover:text-primary transition-colors" />
+            )}
+          </div>
+          <span className="sr-only">{commCount > 0 ? `${commCount} Comments` : "Add Comment"}</span>
+        </Button>
+        {/* <span className="ml-2 text-sm text-muted-foreground hover:text-foreground transition-colors cursor-pointer" onClick={handleClick}>
+          {commCount > 0 ? `${commCount} Comments` : "Add Comment"}
+        </span> */}
+      </div>
+    )
+  },
+  enableSorting: false,
+  maxSize:80
+}
+
+
+
+
+// ----------------------------------------------------------------
+// 5) 최종 컬럼 배열 - Update to include the files column
+// ----------------------------------------------------------------
+return [
+  selectColumn,
+  ...nestedColumns,
+  commentsColumn,
+  // actionsColumn,
+]
+
+}
\ No newline at end of file
diff --git a/lib/rfqs/cbe-table/cbe-table.tsx b/lib/rfqs/cbe-table/cbe-table.tsx
new file mode 100644
index 00000000..243b91ed
--- /dev/null
+++ b/lib/rfqs/cbe-table/cbe-table.tsx
@@ -0,0 +1,161 @@
+"use client"
+
+import * as React from "react"
+import { useRouter } from "next/navigation"
+import type {
+  DataTableAdvancedFilterField,
+  DataTableFilterField,
+  DataTableRowAction,
+} from "@/types/table"
+
+import { toSentenceCase } from "@/lib/utils"
+import { useDataTable } from "@/hooks/use-data-table"
+import { DataTable } from "@/components/data-table/data-table"
+import { DataTableAdvancedToolbar } from "@/components/data-table/data-table-advanced-toolbar"
+import { useFeatureFlags } from "./feature-flags-provider"
+import { Vendor, vendors } from "@/db/schema/vendors"
+import { fetchRfqAttachmentsbyCommentId, getCBE } from "../service"
+import { TbeComment } from "../tbe-table/comments-sheet"
+import { getColumns } from "./cbe-table-columns"
+import { VendorWithCbeFields } from "@/config/vendorCbeColumnsConfig"
+
+interface VendorsTableProps {
+  promises: Promise<
+    [
+      Awaited<ReturnType<typeof getCBE>>,
+    ]
+  >
+  rfqId: number
+}
+
+
+export function CbeTable({ promises, rfqId }: VendorsTableProps) {
+  const { featureFlags } = useFeatureFlags()
+
+  // Suspense로 받아온 데이터
+  const [{ data, pageCount }] = React.use(promises)
+
+  console.log(data, "data")
+
+  const [rowAction, setRowAction] = React.useState<DataTableRowAction<VendorWithCbeFields> | null>(null)
+
+  // **router** 획득
+  const router = useRouter()
+
+  const [initialComments, setInitialComments] = React.useState<TbeComment[]>([])
+  const [commentSheetOpen, setCommentSheetOpen] = React.useState(false)
+  const [selectedRfqIdForComments, setSelectedRfqIdForComments] = React.useState<number | null>(null)
+  
+  const [isFileDialogOpen, setIsFileDialogOpen] = React.useState(false)
+  const [selectedVendorId, setSelectedVendorId] = React.useState<number | null>(null)
+  const [selectedTbeId, setSelectedTbeId] = React.useState<number | null>(null)
+
+  // Add handleRefresh function
+  const handleRefresh = React.useCallback(() => {
+    router.refresh();
+  }, [router]);
+
+  React.useEffect(() => {
+    if (rowAction?.type === "comments") {
+      // rowAction가 새로 세팅된 뒤 여기서 openCommentSheet 실행
+      openCommentSheet(Number(rowAction.row.original.id))
+    } else if (rowAction?.type === "files") {
+      // Handle files action
+      const vendorId = rowAction.row.original.vendorId;
+      const cbeId = rowAction.row.original.cbeId ?? 0;
+      openFilesDialog(cbeId, vendorId);
+    }
+  }, [rowAction])
+
+  async function openCommentSheet(vendorId: number) {
+    setInitialComments([])
+
+    const comments = rowAction?.row.original.comments
+
+    if (comments && comments.length > 0) {
+      const commentWithAttachments: TbeComment[] = await Promise.all(
+        comments.map(async (c) => {
+          const attachments = await fetchRfqAttachmentsbyCommentId(c.id)
+
+          return {
+            ...c,
+            commentedBy: 1, // DB나 API 응답에 있다고 가정
+            attachments,
+          }
+        })
+      )
+      // 3) state에 저장 -> CommentSheet에서 initialComments로 사용
+      setInitialComments(commentWithAttachments)
+    }
+
+    setSelectedRfqIdForComments(vendorId)
+    setCommentSheetOpen(true)
+  }
+
+  const openFilesDialog = (cbeId: number, vendorId: number) => {
+    setSelectedTbeId(cbeId)
+    setSelectedVendorId(vendorId)
+    setIsFileDialogOpen(true)
+  }
+
+
+  // getColumns() 호출 시, router를 주입
+  const columns = React.useMemo(
+    () => getColumns({ setRowAction, router, openCommentSheet, openFilesDialog }),
+    [setRowAction, router]
+  )
+
+  const filterFields: DataTableFilterField<VendorWithCbeFields>[] = [
+  ]
+
+  const advancedFilterFields: DataTableAdvancedFilterField<VendorWithCbeFields>[] = [
+    { id: "vendorName", label: "Vendor Name", type: "text" },
+    { id: "vendorCode", label: "Vendor Code", type: "text" },
+    { id: "email", label: "Email", type: "text" },
+    { id: "country", label: "Country", type: "text" },
+    {
+      id: "vendorStatus",
+      label: "Vendor Status",
+      type: "multi-select",
+      options: vendors.status.enumValues.map((status) => ({
+        label: toSentenceCase(status),
+        value: status,
+      })),
+    },
+    { id: "rfqVendorUpdated", label: "Updated at", type: "date" },
+  ]
+
+
+  const { table } = useDataTable({
+    data,
+    columns,
+    pageCount,
+    filterFields,
+    enablePinning: true,
+    enableAdvancedFilter: true,
+    initialState: {
+      sorting: [{ id: "rfqVendorUpdated", desc: true }],
+      columnPinning: { right: ["actions"] },
+    },
+    getRowId: (originalRow) => String(originalRow.id),
+    shallow: false,
+    clearOnDefault: true,
+  })
+
+  return (
+    <>
+      <DataTable
+        table={table}
+      >
+        <DataTableAdvancedToolbar
+          table={table}
+          filterFields={advancedFilterFields}
+          shallow={false}
+        >
+          {/* <VendorsTableToolbarActions table={table} rfqId={rfqId} /> */}
+        </DataTableAdvancedToolbar>
+      </DataTable>
+     
+    </>
+  )
+}
\ No newline at end of file
diff --git a/lib/rfqs/cbe-table/feature-flags-provider.tsx b/lib/rfqs/cbe-table/feature-flags-provider.tsx
new file mode 100644
index 00000000..81131894
--- /dev/null
+++ b/lib/rfqs/cbe-table/feature-flags-provider.tsx
@@ -0,0 +1,108 @@
+"use client"
+
+import * as React from "react"
+import { useQueryState } from "nuqs"
+
+import { dataTableConfig, type DataTableConfig } from "@/config/data-table"
+import { cn } from "@/lib/utils"
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+
+type FeatureFlagValue = DataTableConfig["featureFlags"][number]["value"]
+
+interface FeatureFlagsContextProps {
+  featureFlags: FeatureFlagValue[]
+  setFeatureFlags: (value: FeatureFlagValue[]) => void
+}
+
+const FeatureFlagsContext = React.createContext<FeatureFlagsContextProps>({
+  featureFlags: [],
+  setFeatureFlags: () => {},
+})
+
+export function useFeatureFlags() {
+  const context = React.useContext(FeatureFlagsContext)
+  if (!context) {
+    throw new Error(
+      "useFeatureFlags must be used within a FeatureFlagsProvider"
+    )
+  }
+  return context
+}
+
+interface FeatureFlagsProviderProps {
+  children: React.ReactNode
+}
+
+export function FeatureFlagsProvider({ children }: FeatureFlagsProviderProps) {
+  const [featureFlags, setFeatureFlags] = useQueryState<FeatureFlagValue[]>(
+    "flags",
+    {
+      defaultValue: [],
+      parse: (value) => value.split(",") as FeatureFlagValue[],
+      serialize: (value) => value.join(","),
+      eq: (a, b) =>
+        a.length === b.length && a.every((value, index) => value === b[index]),
+      clearOnDefault: true,
+      shallow: false,
+    }
+  )
+
+  return (
+    <FeatureFlagsContext.Provider
+      value={{
+        featureFlags,
+        setFeatureFlags: (value) => void setFeatureFlags(value),
+      }}
+    >
+      <div className="w-full overflow-x-auto">
+        <ToggleGroup
+          type="multiple"
+          variant="outline"
+          size="sm"
+          value={featureFlags}
+          onValueChange={(value: FeatureFlagValue[]) => setFeatureFlags(value)}
+          className="w-fit gap-0"
+        >
+          {dataTableConfig.featureFlags.map((flag, index) => (
+            <Tooltip key={flag.value}>
+              <ToggleGroupItem
+                value={flag.value}
+                className={cn(
+                  "gap-2 whitespace-nowrap rounded-none px-3 text-xs data-[state=on]:bg-accent/70 data-[state=on]:hover:bg-accent/90",
+                  {
+                    "rounded-l-sm border-r-0": index === 0,
+                    "rounded-r-sm":
+                      index === dataTableConfig.featureFlags.length - 1,
+                  }
+                )}
+                asChild
+              >
+                <TooltipTrigger>
+                  <flag.icon className="size-3.5 shrink-0" aria-hidden="true" />
+                  {flag.label}
+                </TooltipTrigger>
+              </ToggleGroupItem>
+              <TooltipContent
+                align="start"
+                side="bottom"
+                sideOffset={6}
+                className="flex max-w-60 flex-col space-y-1.5 border bg-background py-2 font-semibold text-foreground"
+              >
+                <div>{flag.tooltipTitle}</div>
+                <div className="text-xs text-muted-foreground">
+                  {flag.tooltipDescription}
+                </div>
+              </TooltipContent>
+            </Tooltip>
+          ))}
+        </ToggleGroup>
+      </div>
+      {children}
+    </FeatureFlagsContext.Provider>
+  )
+}
diff --git a/lib/rfqs/repository.ts b/lib/rfqs/repository.ts
new file mode 100644
index 00000000..ad44cf07
--- /dev/null
+++ b/lib/rfqs/repository.ts
@@ -0,0 +1,232 @@
+// src/lib/tasks/repository.ts
+import db from "@/db/db";
+import { items } from "@/db/schema/items";
+import { rfqItems, rfqs, RfqWithItems, rfqsView, type Rfq,VendorResponse, vendorResponses } from "@/db/schema/rfq";
+import { users } from "@/db/schema/users";
+import {
+  eq,
+  inArray,
+  not,
+  asc,
+  desc,
+  and,
+  ilike,
+  gte,
+  lte,
+  count,
+  gt, sql
+} from "drizzle-orm";
+import { PgTransaction } from "drizzle-orm/pg-core";
+import { RfqType } from "./validations";
+export type NewRfq = typeof rfqs.$inferInsert
+export type NewRfqItem = typeof rfqItems.$inferInsert
+
+/**
+ * 단건/복수 조회 시 공통으로 사용 가능한 SELECT 함수 예시
+ *  - 트랜잭션(tx)을 받아서 사용하도록 구현
+ */
+export async function selectRfqs(
+  tx: PgTransaction<any, any, any>,
+  params: {
+    where?: any;
+    orderBy?: (ReturnType<typeof asc> | ReturnType<typeof desc>)[];
+    offset?: number;
+    limit?: number;
+  }
+) {
+  const { where, orderBy, offset = 0, limit = 10 } = params;
+
+  return tx
+    .select({
+      rfqId: rfqsView.id,
+      id: rfqsView.id,
+      rfqCode: rfqsView.rfqCode,
+      description: rfqsView.description,
+      projectCode: rfqsView.projectCode,
+      projectName: rfqsView.projectName,
+      dueDate: rfqsView.dueDate,
+      status: rfqsView.status,
+      // createdBy → user 이메일
+      createdBy: rfqsView.createdBy,          // still the numeric user ID
+      createdByEmail: rfqsView.userEmail,        // string
+
+      createdAt: rfqsView.createdAt,
+      updatedAt: rfqsView.updatedAt,
+      // ====================
+      // 1) itemCount via subselect
+      // ====================
+      itemCount:rfqsView.itemCount,
+      attachCount: rfqsView.attachmentCount,
+
+      // user info
+      // userId: users.id,
+      userEmail: rfqsView.userEmail,
+      userName: rfqsView.userName,
+    })
+    .from(rfqsView)
+    .where(where ?? undefined)
+    .orderBy(...(orderBy ?? []))
+    .offset(offset)
+    .limit(limit);
+}
+/** 총 개수 count */
+export async function countRfqs(
+  tx: PgTransaction<any, any, any>,
+  where?: any
+) {
+  const res = await tx.select({ count: count() }).from(rfqsView).where(where);
+  return res[0]?.count ?? 0;
+}
+
+/** 단건 Insert 예시 */
+export async function insertRfq(
+  tx: PgTransaction<any, any, any>,
+  data: NewRfq // DB와 동일한 insert 가능한 타입
+) {
+  // returning() 사용 시 배열로 돌아오므로 [0]만 리턴
+  return tx
+    .insert(rfqs)
+    .values(data)
+    .returning({ id: rfqs.id, createdAt: rfqs.createdAt });
+}
+
+/** 복수 Insert 예시 */
+export async function insertRfqs(
+  tx: PgTransaction<any, any, any>,
+  data: Rfq[]
+) {
+  return tx.insert(rfqs).values(data).onConflictDoNothing();
+}
+
+/** 단건 삭제 */
+export async function deleteRfqById(
+  tx: PgTransaction<any, any, any>,
+  rfqId: number
+) {
+  return tx.delete(rfqs).where(eq(rfqs.id, rfqId));
+}
+
+/** 복수 삭제 */
+export async function deleteRfqsByIds(
+  tx: PgTransaction<any, any, any>,
+  ids: number[]
+) {
+  return tx.delete(rfqs).where(inArray(rfqs.id, ids));
+}
+
+/** 전체 삭제 */
+export async function deleteAllRfqs(
+  tx: PgTransaction<any, any, any>,
+) {
+  return tx.delete(rfqs);
+}
+
+/** 단건 업데이트 */
+export async function updateRfq(
+  tx: PgTransaction<any, any, any>,
+  rfqId: number,
+  data: Partial<Rfq>
+) {
+  return tx
+    .update(rfqs)
+    .set(data)
+    .where(eq(rfqs.id, rfqId))
+    .returning({ status: rfqs.status });
+}
+
+// /** 복수 업데이트 */
+export async function updateRfqs(
+  tx: PgTransaction<any, any, any>,
+  ids: number[],
+  data: Partial<Rfq>
+) {
+  return tx
+    .update(rfqs)
+    .set(data)
+    .where(inArray(rfqs.id, ids))
+    .returning({ status: rfqs.status, dueDate: rfqs.dueDate });
+}
+
+
+// 모든 task 조회
+export const getAllRfqs = async (): Promise<Rfq[]> => {
+  const datas = await db.select().from(rfqs).execute();
+  return datas
+};
+
+
+export async function groupByStatus(
+  tx: PgTransaction<any, any, any>,
+  rfqType: RfqType = RfqType.PURCHASE
+) {
+  return tx
+    .select({
+      status: rfqs.status,
+      count: count(),
+    })
+    .from(rfqs)
+    .where(eq(rfqs.rfqType, rfqType)) // rfqType으로 필터링 추가
+    .groupBy(rfqs.status)
+    .having(gt(count(), 0));
+}
+
+export async function insertRfqItem(
+  tx: PgTransaction<any, any, any>,
+  data: NewRfqItem
+) {
+  return tx.insert(rfqItems).values(data).returning();
+}
+
+export const getRfqById = async (id: number): Promise<RfqWithItems | null> => {
+  // 1) RFQ 단건 조회
+  const rfqsRes = await db
+    .select()
+    .from(rfqs)
+    .where(eq(rfqs.id, id))
+    .limit(1);
+
+  if (rfqsRes.length === 0) return null;
+  const rfqRow = rfqsRes[0];
+
+  // 2) 해당 RFQ 아이템 목록 조회
+  const itemsRes = await db
+    .select()
+    .from(rfqItems)
+    .where(eq(rfqItems.rfqId, id));
+
+  // itemsRes: RfqItem[]
+
+  // 3) RfqWithItems 형태로 반환
+  const result: RfqWithItems = {
+    ...rfqRow,
+    lines: itemsRes,
+  };
+
+  return result;
+};
+
+/** 단건 업데이트 */
+export async function updateRfqVendor(
+  tx: PgTransaction<any, any, any>,
+  rfqVendorId: number,
+  data: Partial<VendorResponse>
+) {
+  return tx
+    .update(vendorResponses)
+    .set(data)
+    .where(eq(vendorResponses.id, rfqVendorId))
+    .returning({ status: vendorResponses.responseStatus });
+}
+
+/** 복수 업데이트 */
+export async function updateRfqVendors(
+  tx: PgTransaction<any, any, any>,
+  ids: number[],
+  data: Partial<VendorResponse>
+) {
+  return tx
+    .update(vendorResponses)
+    .set(data)
+    .where(inArray(vendorResponses.id, ids))
+    .returning({ status: vendorResponses.responseStatus });
+}
diff --git a/lib/rfqs/service.ts b/lib/rfqs/service.ts
new file mode 100644
index 00000000..b1e02cd0
--- /dev/null
+++ b/lib/rfqs/service.ts
@@ -0,0 +1,2783 @@
+// src/lib/tasks/service.ts
+"use server"; // Next.js 서버 액션에서 직접 import하려면 (선택)
+
+import { revalidatePath, revalidateTag, unstable_noStore } from "next/cache";
+import db from "@/db/db";
+
+import { filterColumns } from "@/lib/filter-columns";
+import { unstable_cache } from "@/lib/unstable-cache";
+import { getErrorMessage } from "@/lib/handle-error";
+
+import { GetRfqsSchema, CreateRfqSchema, UpdateRfqSchema, CreateRfqItemSchema, GetMatchedVendorsSchema, GetRfqsForVendorsSchema, UpdateRfqVendorSchema, GetTBESchema, RfqType, GetCBESchema } from "./validations";
+import { asc, desc, ilike, inArray, and, gte, lte, not, or, sql, eq, isNull, ne, isNotNull, count } from "drizzle-orm";
+import path from "path";
+import fs from "fs/promises";
+import { randomUUID } from "crypto";
+import { writeFile, mkdir } from 'fs/promises'
+import { join } from 'path'
+
+import { vendorResponses, vendorResponsesView, Rfq, rfqs, rfqAttachments, rfqItems, RfqWithItems, rfqComments, rfqEvaluations, vendorRfqView, vendorTbeView, rfqsView, vendorResponseAttachments, vendorTechnicalResponses, vendorCbeView, cbeEvaluations, vendorCommercialResponses } from "@/db/schema/rfq";
+import { countRfqs, deleteRfqById, deleteRfqsByIds, getRfqById, groupByStatus, insertRfq, insertRfqItem, selectRfqs, updateRfq, updateRfqs, updateRfqVendor } from "./repository";
+import logger from '@/lib/logger';
+import { vendorPossibleItems, vendors } from "@/db/schema/vendors";
+import { sendEmail } from "../mail/sendEmail";
+import { projects } from "@/db/schema/projects";
+import { items } from "@/db/schema/items";
+import * as z from "zod"
+
+
+interface InviteVendorsInput {
+  rfqId: number
+  vendorIds: number[]
+  rfqType: RfqType
+}
+
+/* -----------------------------------------------------
+   1) 조회 관련 
+----------------------------------------------------- */
+
+/**
+ * 복잡한 조건으로 Rfq 목록을 조회 (+ pagination) 하고,
+ * 총 개수에 따라 pageCount를 계산해서 리턴.
+ * Next.js의 unstable_cache를 사용해 일정 시간 캐시.
+ */
+export async function getRfqs(input: GetRfqsSchema) {
+  return unstable_cache(
+    async () => {
+      try {
+        const offset = (input.page - 1) * input.perPage;
+        // const advancedTable = input.flags.includes("advancedTable");
+        const advancedTable = true;
+
+        // advancedTable 모드면 filterColumns()로 where 절 구성
+        const advancedWhere = filterColumns({
+          table: rfqsView,
+          filters: input.filters,
+          joinOperator: input.joinOperator,
+        });
+
+
+        let globalWhere
+        if (input.search) {
+          const s = `%${input.search}%`
+          globalWhere = or(ilike(rfqsView.rfqCode, s), ilike(rfqsView.projectCode, s)
+            , ilike(rfqsView.projectName, s), ilike(rfqsView.dueDate, s), ilike(rfqsView.status, s)
+          )
+          // 필요시 여러 칼럼 OR조건 (status, priority, etc)
+        }
+
+        let rfqTypeWhere;
+        if (input.rfqType) {
+          rfqTypeWhere = eq(rfqsView.rfqType, input.rfqType);
+        }
+
+        let whereConditions = [];
+        if (advancedWhere) whereConditions.push(advancedWhere);
+        if (globalWhere) whereConditions.push(globalWhere);
+        if (rfqTypeWhere) whereConditions.push(rfqTypeWhere);
+
+        // 조건이 있을 때만 and() 사용
+        const finalWhere = whereConditions.length > 0
+          ? and(...whereConditions)
+          : undefined;
+
+        const orderBy =
+          input.sort.length > 0
+            ? input.sort.map((item) =>
+              item.desc ? desc(rfqsView[item.id]) : asc(rfqsView[item.id])
+            )
+            : [asc(rfqsView.createdAt)];
+
+        // 트랜잭션 내부에서 Repository 호출
+        const { data, total } = await db.transaction(async (tx) => {
+          const data = await selectRfqs(tx, {
+            where: finalWhere,
+            orderBy,
+            offset,
+            limit: input.perPage,
+          });
+
+          const total = await countRfqs(tx, finalWhere);
+          return { data, total };
+        });
+
+
+        const pageCount = Math.ceil(total / input.perPage);
+
+
+        return { data, pageCount };
+      } catch (err) {
+        console.error("getRfqs 에러:", err); // 자세한 에러 로깅
+
+        // 에러 발생 시 디폴트
+        return { data: [], pageCount: 0 };
+      }
+    },
+    [JSON.stringify(input)],
+    {
+      revalidate: 3600,
+      tags: [`rfqs-${input.rfqType}`], 
+    }
+  )();
+}
+
+/** Status별 개수 */
+export async function getRfqStatusCounts(rfqType: RfqType = RfqType.PURCHASE) {
+  return unstable_cache(
+    async () => {
+      try {
+        const initial: Record<Rfq["status"], number> = {
+          DRAFT: 0,
+          PUBLISHED: 0,
+          EVALUATION: 0,
+          AWARDED: 0,
+        };
+
+        const result = await db.transaction(async (tx) => {
+          // rfqType을 기준으로 필터링 추가
+          const rows = await groupByStatus(tx, rfqType);
+          return rows.reduce<Record<Rfq["status"], number>>((acc, { status, count }) => {
+            acc[status] = count;
+            return acc;
+          }, initial);
+        });
+
+        return result;
+      } catch (err) {
+        return {} as Record<Rfq["status"], number>;
+      }
+    },
+    [`rfq-status-counts-${rfqType}`], // 캐싱 키에 rfqType 추가
+    {
+      revalidate: 3600,
+    }
+  )();
+}
+
+
+
+/* -----------------------------------------------------
+   2) 생성(Create) 
+----------------------------------------------------- */
+
+/**
+ * Rfq 생성 후, (가장 오래된 Rfq 1개) 삭제로
+ * 전체 Rfq 개수를 고정
+ */
+export async function createRfq(input: CreateRfqSchema) {
+
+  console.log(input.createdBy, "input.createdBy")
+
+  unstable_noStore(); // Next.js 서버 액션 캐싱 방지
+  try {
+    await db.transaction(async (tx) => {
+      // 새 Rfq 생성
+      const [newTask] = await insertRfq(tx, {
+        rfqCode: input.rfqCode,
+        projectId: input.projectId || null,
+        description: input.description || null,
+        dueDate: input.dueDate,
+        status: input.status,
+        rfqType: input.rfqType, // rfqType 추가
+        createdBy: input.createdBy,
+      });
+      return newTask;
+    });
+
+    // 캐시 무효화
+    revalidateTag(`rfqs-${input.rfqType}`);
+    revalidateTag(`rfq-status-counts-${input.rfqType}`);
+
+    return { data: null, error: null };
+  } catch (err) {
+    return { data: null, error: getErrorMessage(err) };
+  }
+}
+
+/* -----------------------------------------------------
+   3) 업데이트
+----------------------------------------------------- */
+
+/** 단건 업데이트 */
+export async function modifyRfq(input: UpdateRfqSchema & { id: number }) {
+  unstable_noStore();
+  try {
+    const data = await db.transaction(async (tx) => {
+      const [res] = await updateRfq(tx, input.id, {
+        rfqCode: input.rfqCode,
+        projectId: input.projectId || null,
+        dueDate: input.dueDate,
+        status: input.status as "DRAFT" | "PUBLISHED" | "EVALUATION" | "AWARDED",
+        createdBy: input.createdBy,
+      });
+      return res;
+    });
+
+    revalidateTag("rfqs");
+    if (data.status === input.status) {
+      revalidateTag("rfqs-status-counts");
+    }
+
+
+    return { data: null, error: null };
+  } catch (err) {
+    return { data: null, error: getErrorMessage(err) };
+  }
+}
+
+export async function modifyRfqs(input: {
+  ids: number[];
+  status?: Rfq["status"];
+  dueDate?: Date
+}) {
+  unstable_noStore();
+  try {
+    const data = await db.transaction(async (tx) => {
+      const [res] = await updateRfqs(tx, input.ids, {
+        status: input.status,
+        dueDate: input.dueDate,
+      });
+      return res;
+    });
+
+    revalidateTag("rfqs");
+    if (data.status === input.status) {
+      revalidateTag("rfq-status-counts");
+    }
+
+
+    return { data: null, error: null };
+  } catch (err) {
+    return { data: null, error: getErrorMessage(err) };
+  }
+}
+
+
+/* -----------------------------------------------------
+   4) 삭제
+----------------------------------------------------- */
+
+/** 단건 삭제  */
+export async function removeRfq(input: { id: number }) {
+  unstable_noStore();
+  try {
+    await db.transaction(async (tx) => {
+      // 삭제
+      await deleteRfqById(tx, input.id);
+      // 바로 새 Rfq 생성
+    });
+
+    revalidateTag("rfqs");
+    revalidateTag("rfq-status-counts");
+
+
+    return { data: null, error: null };
+  } catch (err) {
+    return { data: null, error: getErrorMessage(err) };
+  }
+}
+
+/** 복수 삭제  */
+export async function removeRfqs(input: { ids: number[] }) {
+  unstable_noStore();
+  try {
+    await db.transaction(async (tx) => {
+      // 삭제
+      await deleteRfqsByIds(tx, input.ids);
+    });
+
+    revalidateTag("rfqs");
+    revalidateTag("rfq-status-counts");
+
+    return { data: null, error: null };
+  } catch (err) {
+    return { data: null, error: getErrorMessage(err) };
+  }
+}
+
+// 삭제를 위한 입력 스키마
+const deleteRfqItemSchema = z.object({
+  id: z.number().int(),
+  rfqId: z.number().int(),
+  rfqType: z.nativeEnum(RfqType).default(RfqType.PURCHASE),
+});
+
+type DeleteRfqItemSchema = z.infer<typeof deleteRfqItemSchema>;
+
+/**
+ * RFQ 아이템 삭제 함수
+ */
+export async function deleteRfqItem(input: DeleteRfqItemSchema) {
+  unstable_noStore(); // Next.js 서버 액션 캐싱 방지
+
+  try {
+    // 삭제 작업 수행
+    await db
+      .delete(rfqItems)
+      .where(
+        and(
+          eq(rfqItems.id, input.id),
+          eq(rfqItems.rfqId, input.rfqId)
+        )
+      );
+
+    console.log(`Deleted RFQ item: ${input.id} for RFQ ${input.rfqId}`);
+
+    // 캐시 무효화
+    revalidateTag("rfq-items");
+    revalidateTag(`rfqs-${input.rfqType}`);
+    revalidateTag(`rfq-${input.rfqId}`);
+
+    return { data: null, error: null };
+  } catch (err) {
+    console.error("Error in deleteRfqItem:", err);
+    return { data: null, error: getErrorMessage(err) };
+  }
+}
+
+// createRfqItem 함수 수정 (id 파라미터 추가)
+export async function createRfqItem(input: CreateRfqItemSchema & { id?: number }) {
+  unstable_noStore();
+
+  try {
+    // DB 트랜잭션
+    await db.transaction(async (tx) => {
+      // id가 전달되었으면 해당 id로 업데이트, 그렇지 않으면 기존 로직대로 진행
+      if (input.id) {
+        // 기존 아이템 업데이트
+        await tx
+          .update(rfqItems)
+          .set({
+            description: input.description ?? null,
+            quantity: input.quantity ?? 1,
+            uom: input.uom ?? "",
+            updatedAt: new Date(),
+          })
+          .where(eq(rfqItems.id, input.id));
+
+        console.log(`Updated RFQ item with id: ${input.id}`);
+      } else {
+        // 기존 로직: 같은 itemCode로 이미 존재하는지 확인 후 업데이트/생성
+        const existingItems = await tx
+          .select()
+          .from(rfqItems)
+          .where(
+            and(
+              eq(rfqItems.rfqId, input.rfqId),
+              eq(rfqItems.itemCode, input.itemCode)
+            )
+          );
+
+        if (existingItems.length > 0) {
+          // 이미 존재하는 경우 업데이트
+          const existingItem = existingItems[0];
+          await tx
+            .update(rfqItems)
+            .set({
+              description: input.description ?? null,
+              quantity: input.quantity ?? 1,
+              uom: input.uom ?? "",
+              updatedAt: new Date(),
+            })
+            .where(eq(rfqItems.id, existingItem.id));
+
+          console.log(`Updated existing RFQ item: ${existingItem.id} for RFQ ${input.rfqId}, Item ${input.itemCode}`);
+        } else {
+          // 존재하지 않는 경우 새로 생성
+          const [newItem] = await insertRfqItem(tx, {
+            rfqId: input.rfqId,
+            itemCode: input.itemCode,
+            description: input.description ?? null,
+            quantity: input.quantity ?? 1,
+            uom: input.uom ?? "",
+          });
+
+          console.log(`Created new RFQ item for RFQ ${input.rfqId}, Item ${input.itemCode}`);
+        }
+      }
+    });
+
+    // 캐시 무효화
+    revalidateTag("rfq-items");
+    revalidateTag(`rfqs-${input.rfqType}`);
+    revalidateTag(`rfq-${input.rfqId}`);
+
+    return { data: null, error: null };
+  } catch (err) {
+    console.error("Error in createRfqItem:", err);
+    return { data: null, error: getErrorMessage(err) };
+  }
+}
+/**
+ * 서버 액션: 파일 첨부/삭제 처리
+ * @param rfqId                RFQ ID
+ * @param removedExistingIds   기존 첨부 중 삭제된 record ID 배열
+ * @param newFiles             새로 업로드된 파일 (File[]) - Next.js server action에서
+ * @param vendorId             (optional) 업로더가 vendor인지 구분
+ */
+export async function processRfqAttachments(args: {
+  rfqId: number;
+  removedExistingIds?: number[];
+  newFiles?: File[];
+  vendorId?: number | null;
+  rfqType?: RfqType | null;
+}) {
+  const { rfqId, removedExistingIds = [], newFiles = [], vendorId = null } = args;
+
+  try {
+    // 1) 삭제된 기존 첨부: DB + 파일시스템에서 제거
+    if (removedExistingIds.length > 0) {
+      // 1-1) DB에서 filePath 조회
+      const rows = await db
+        .select({
+          id: rfqAttachments.id,
+          filePath: rfqAttachments.filePath
+        })
+        .from(rfqAttachments)
+        .where(inArray(rfqAttachments.id, removedExistingIds));
+
+      // 1-2) DB 삭제
+      await db
+        .delete(rfqAttachments)
+        .where(inArray(rfqAttachments.id, removedExistingIds));
+
+      // 1-3) 파일 삭제
+      for (const row of rows) {
+        // filePath: 예) "/rfq/123/...xyz"
+        const absolutePath = path.join(
+          process.cwd(),
+          "public",
+          row.filePath.replace(/^\/+/, "") // 슬래시 제거
+        );
+        try {
+          await fs.unlink(absolutePath);
+        } catch (err) {
+          console.error("File remove error:", err);
+        }
+      }
+    }
+
+    // 2) 새 파일 업로드
+    if (newFiles.length > 0) {
+      const rfqDir = path.join("public", "rfq", String(rfqId));
+      // 폴더 없으면 생성
+      await fs.mkdir(rfqDir, { recursive: true });
+
+      for (const file of newFiles) {
+        // 2-1) File -> Buffer
+        const ab = await file.arrayBuffer();
+        const buffer = Buffer.from(ab);
+
+        // 2-2) 고유 파일명
+        const uniqueName = `${randomUUID()}-${file.name}`;
+        // 예) "rfq/123/xxx"
+        const relativePath = path.join("rfq", String(rfqId), uniqueName);
+        const absolutePath = path.join("public", relativePath);
+
+        // 2-3) 파일 저장
+        await fs.writeFile(absolutePath, buffer);
+
+        // 2-4) DB Insert
+        await db.insert(rfqAttachments).values({
+          rfqId,
+          vendorId,
+          fileName: file.name,
+          filePath: "/" + relativePath.replace(/\\/g, "/"),
+          // (Windows 경로 대비)
+        });
+      }
+    }
+
+    const [countRow] = await db
+      .select({ cnt: sql<number>`count(*)`.as("cnt") })
+      .from(rfqAttachments)
+      .where(eq(rfqAttachments.rfqId, rfqId));
+
+    const newCount = countRow?.cnt ?? 0;
+
+    // 3) revalidateTag 등 캐시 무효화
+    revalidateTag("rfq-attachments");
+    revalidateTag(`rfqs-${args.rfqType}`)
+
+    return { ok: true, updatedItemCount: newCount };
+  } catch (error) {
+    console.error("processRfqAttachments error:", error);
+    return { ok: false, error: String(error) };
+  }
+}
+
+
+
+export async function fetchRfqAttachments(rfqId: number) {
+  // DB select
+  const rows = await db
+    .select()
+    .from(rfqAttachments)
+    .where(eq(rfqAttachments.rfqId, rfqId))
+
+  // rows: { id, fileName, filePath, createdAt, vendorId, ... }
+  // 필요 없는 필드는 omit하거나 transform 가능
+  return rows.map((row) => ({
+    id: row.id,
+    fileName: row.fileName,
+    filePath: row.filePath,
+    createdAt: row.createdAt, // or string
+    vendorId: row.vendorId,
+    size: undefined, // size를 DB에 저장하지 않았다면
+  }))
+}
+
+export async function fetchRfqItems(rfqId: number) {
+  // DB select
+  const rows = await db
+    .select()
+    .from(rfqItems)
+    .where(eq(rfqItems.rfqId, rfqId))
+
+  // rows: { id, fileName, filePath, createdAt, vendorId, ... }
+  // 필요 없는 필드는 omit하거나 transform 가능
+  return rows.map((row) => ({
+    // id: row.id,
+    itemCode: row.itemCode,
+    description: row.description,
+    quantity: row.quantity,
+    uom: row.uom,
+  }))
+}
+
+export const findRfqById = async (id: number): Promise<RfqWithItems | null> => {
+  try {
+    logger.info({ id }, 'Fetching user by ID');
+    const rfq = await getRfqById(id);
+    if (!rfq) {
+      logger.warn({ id }, 'User not found');
+    } else {
+      logger.debug({ rfq }, 'User fetched successfully');
+    }
+    return rfq;
+  } catch (error) {
+    logger.error({ error }, 'Error fetching user by ID');
+    throw new Error('Failed to fetch user');
+  }
+};
+
+export async function getMatchedVendors(input: GetMatchedVendorsSchema, rfqId: number) {
+  return unstable_cache(
+    async () => {
+      // ─────────────────────────────────────────────────────
+      // 1) rfq_items에서 distinct itemCode
+      // ─────────────────────────────────────────────────────
+      const itemRows = await db
+        .select({ code: rfqItems.itemCode })
+        .from(rfqItems)
+        .where(eq(rfqItems.rfqId, rfqId))
+        .groupBy(rfqItems.itemCode)
+
+      const itemCodes = itemRows.map((r) => r.code)
+      const itemCount = itemCodes.length
+      if (itemCount === 0) {
+        return { data: [], pageCount: 0 }
+      }
+
+      // ─────────────────────────────────────────────────────
+      // 2) vendorPossibleItems에서 모든 itemCodes를 보유한 vendor
+      // ─────────────────────────────────────────────────────
+      const inList = itemCodes.map((c) => `'${c}'`).join(",")
+      const sqlVendorIds = await db.execute(
+        sql`
+          SELECT vpi.vendor_id AS "vendorId"
+          FROM ${vendorPossibleItems} vpi
+          WHERE vpi.item_code IN (${sql.raw(inList)})
+          GROUP BY vpi.vendor_id
+          HAVING COUNT(DISTINCT vpi.item_code) = ${itemCount}
+        `
+      )
+      const vendorIdList = sqlVendorIds.rows.map((row: any) => +row.vendorId)
+      if (vendorIdList.length === 0) {
+        return { data: [], pageCount: 0 }
+      }
+
+      console.log(vendorIdList,"vendorIdList")
+
+      // ─────────────────────────────────────────────────────
+      // 3) 필터/검색/정렬
+      // ─────────────────────────────────────────────────────
+      const offset = ((input.page ?? 1) - 1) * (input.perPage ?? 10)
+      const limit = input.perPage ?? 10
+
+      // (가) 커스텀 필터
+      // 여기서는 "뷰(vendorRfqView)"의 컬럼들에 대해 필터합니다.
+      const advancedWhere = filterColumns({
+        // 테이블이 아니라 "뷰"를 넘길 수도 있고,
+        // 혹은 columns 객체(연결된 모든 컬럼)로 넘겨도 됩니다.
+        table: vendorRfqView,
+        filters: input.filters ?? [],
+        joinOperator: input.joinOperator ?? "and",
+      })
+
+      // (나) 글로벌 검색
+      let globalWhere
+      if (input.search) {
+        const s = `%${input.search}%`
+        globalWhere = or(
+          sql`${vendorRfqView.vendorName} ILIKE ${s}`,
+          sql`${vendorRfqView.vendorCode} ILIKE ${s}`,
+          sql`${vendorRfqView.email} ILIKE ${s}`
+        )
+      }
+
+      // (다) 최종 where
+      // vendorId가 vendorIdList 내에 있어야 하고,
+      // 특정 rfqId(뷰에 담긴 값)도 일치해야 함.
+      const finalWhere = and(
+        inArray(vendorRfqView.vendorId, vendorIdList),
+        eq(vendorRfqView.rfqId, rfqId),
+        advancedWhere,
+        globalWhere
+      )
+
+      // (라) 정렬
+      const orderBy = input.sort?.length
+        ? input.sort.map((s) => {
+          // "column id" -> vendorRfqView.* 중 하나
+          const col = (vendorRfqView as any)[s.id]
+          return s.desc ? desc(col) : asc(col)
+        })
+        : [asc(vendorRfqView.vendorId)]
+
+      // ─────────────────────────────────────────────────────
+      // 4) View에서 데이터 SELECT
+      // ─────────────────────────────────────────────────────
+      const [rows, total] = await db.transaction(async (tx) => {
+        const data = await tx
+          .select({
+            id: vendorRfqView.vendorId,
+            vendorID: vendorRfqView.vendorId,
+            vendorName: vendorRfqView.vendorName,
+            vendorCode: vendorRfqView.vendorCode,
+            address: vendorRfqView.address,
+            country: vendorRfqView.country,
+            email: vendorRfqView.email,
+            website: vendorRfqView.website,
+            vendorStatus: vendorRfqView.vendorStatus,
+            // rfqVendorStatus와 rfqVendorUpdated는 나중에 정확한 데이터로 교체할 예정
+            rfqVendorStatus: vendorRfqView.rfqVendorStatus,
+            rfqVendorUpdated: vendorRfqView.rfqVendorUpdated,
+          })
+          .from(vendorRfqView)
+          .where(finalWhere)
+          .orderBy(...orderBy)
+          .offset(offset)
+          .limit(limit)
+
+        // 총 개수
+        const [{ count }] = await tx
+          .select({ count: sql<number>`count(*)`.as("count") })
+          .from(vendorRfqView)
+          .where(finalWhere)
+
+        return [data, Number(count)]
+      })
+
+
+      console.log(rows)
+      console.log(total)
+      // ─────────────────────────────────────────────────────
+      // 4-1) 정확한 rfqVendorStatus와 rfqVendorUpdated 조회
+      // ─────────────────────────────────────────────────────
+      const distinctVendorIds = [...new Set(rows.map((r) => r.id))]
+
+      // vendorResponses 테이블에서 정확한 상태와 업데이트 시간 조회
+      const vendorStatuses = await db
+        .select({
+          vendorId: vendorResponses.vendorId,
+          status: vendorResponses.responseStatus,
+          updatedAt: vendorResponses.updatedAt
+        })
+        .from(vendorResponses)
+        .where(
+          and(
+            inArray(vendorResponses.vendorId, distinctVendorIds),
+            eq(vendorResponses.rfqId, rfqId)
+          )
+        )
+
+      // vendorId별 상태정보 맵 생성
+      const statusMap = new Map<number, { status: string, updatedAt: Date }>()
+      for (const vs of vendorStatuses) {
+        statusMap.set(vs.vendorId, {
+          status: vs.status,
+          updatedAt: vs.updatedAt
+        })
+      }
+
+      // 정확한 상태 정보로 업데이트된 rows 생성
+      const updatedRows = rows.map(row => ({
+        ...row,
+        rfqVendorStatus: statusMap.get(row.id)?.status || null,
+        rfqVendorUpdated: statusMap.get(row.id)?.updatedAt || null
+      }))
+
+      // ─────────────────────────────────────────────────────
+      // 5) 코멘트 조회: 기존과 동일
+      // ─────────────────────────────────────────────────────
+      const commAll = await db
+        .select()
+        .from(rfqComments)
+        .where(
+          and(
+            inArray(rfqComments.vendorId, distinctVendorIds),
+            eq(rfqComments.rfqId, rfqId)
+          )
+        )
+
+      const commByVendorId = new Map<number, any[]>()
+      for (const c of commAll) {
+        const vid = c.vendorId!
+        if (!commByVendorId.has(vid)) {
+          commByVendorId.set(vid, [])
+        }
+        commByVendorId.get(vid)!.push({
+          id: c.id,
+          commentText: c.commentText,
+          vendorId: c.vendorId,
+          evaluationId: c.evaluationId,
+          createdAt: c.createdAt,
+          commentedBy: c.commentedBy,
+        })
+      }
+
+      // ─────────────────────────────────────────────────────
+      // 6) rows에 comments 병합
+      // ─────────────────────────────────────────────────────
+      const final = updatedRows.map((row) => ({
+        ...row,
+        comments: commByVendorId.get(row.id) ?? [],
+      }))
+
+      // ─────────────────────────────────────────────────────
+      // 7) 반환
+      // ─────────────────────────────────────────────────────
+      const pageCount = Math.ceil(total / limit)
+      return { data: final, pageCount }
+    },
+    [JSON.stringify({ input, rfqId })],
+    { revalidate: 3600, tags: ["rfq-vendors"] }
+  )()
+}
+
+export async function inviteVendors(input: InviteVendorsInput) {
+  unstable_noStore() // 서버 액션 캐싱 방지
+  try {
+    const { rfqId, vendorIds } = input
+    if (!rfqId || !Array.isArray(vendorIds) || vendorIds.length === 0) {
+      throw new Error("Invalid input")
+    }
+
+    // DB 데이터 준비 및 첨부파일 처리를 위한 트랜잭션
+    const rfqData = await db.transaction(async (tx) => {
+      // 2-A) RFQ 기본 정보 조회
+      const [rfqRow] = await tx
+        .select({
+          rfqCode: rfqsView.rfqCode,
+          description: rfqsView.description,
+          projectCode: rfqsView.projectCode,
+          projectName: rfqsView.projectName,
+          dueDate: rfqsView.dueDate,
+          createdBy: rfqsView.createdBy,
+        })
+        .from(rfqsView)
+        .where(eq(rfqsView.id, rfqId))
+
+      if (!rfqRow) {
+        throw new Error(`RFQ #${rfqId} not found`)
+      }
+
+      // 2-B) 아이템 목록 조회
+      const items = await tx
+        .select({
+          itemCode: rfqItems.itemCode,
+          description: rfqItems.description,
+          quantity: rfqItems.quantity,
+          uom: rfqItems.uom,
+        })
+        .from(rfqItems)
+        .where(eq(rfqItems.rfqId, rfqId))
+
+      // 2-C) 첨부파일 목록 조회
+      const attachRows = await tx
+        .select({
+          id: rfqAttachments.id,
+          fileName: rfqAttachments.fileName,
+          filePath: rfqAttachments.filePath,
+        })
+        .from(rfqAttachments)
+        .where(
+          and(
+            eq(rfqAttachments.rfqId, rfqId),
+            isNull(rfqAttachments.vendorId),
+            isNull(rfqAttachments.evaluationId)
+          )
+        )
+
+      const vendorRows = await tx
+        .select({ id: vendors.id, email: vendors.email })
+        .from(vendors)
+        .where(inArray(vendors.id, vendorIds))
+
+      // NodeMailer attachments 형식 맞추기
+      const attachments = []
+      for (const att of attachRows) {
+        const absolutePath = path.join(process.cwd(), "public", att.filePath.replace(/^\/+/, ""))
+        attachments.push({
+          path: absolutePath,
+          filename: att.fileName,
+        })
+      }
+
+      return { rfqRow, items, vendorRows, attachments }
+    })
+
+    const { rfqRow, items, vendorRows, attachments } = rfqData
+    const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || 'http://3.36.56.124:3000'
+    const loginUrl = `${baseUrl}/en/partners/rfq`
+
+    // 이메일 전송 오류를 기록할 배열
+    const emailErrors = []
+
+    // 각 벤더에 대해 처리
+    for (const v of vendorRows) {
+      if (!v.email) {
+        continue // 이메일 없는 벤더 무시
+      }
+
+      try {
+        // DB 업데이트: 각 벤더 상태 별도 트랜잭션
+        await db.transaction(async (tx) => {
+          // rfq_vendors upsert
+          const existing = await tx
+            .select()
+            .from(vendorResponses)
+            .where(and(eq(vendorResponses.rfqId, rfqId), eq(vendorResponses.vendorId, v.id)))
+
+          if (existing.length > 0) {
+            await tx
+              .update(vendorResponses)
+              .set({
+                responseStatus: "INVITED",
+                updatedAt: new Date(),
+              })
+              .where(eq(vendorResponses.id, existing[0].id))
+          } else {
+            await tx.insert(vendorResponses).values({
+              rfqId,
+              vendorId: v.id,
+              responseStatus: "INVITED",
+            })
+          }
+        })
+
+        // 이메일 발송 (트랜잭션 외부)
+        await sendEmail({
+          to: v.email,
+          subject: `[RFQ ${rfqRow.rfqCode}] You are invited from Samgsung Heavy Industries!`,
+          template: "rfq-invite",
+          context: {
+            language: "en",
+            rfqId,
+            vendorId: v.id,
+            rfqCode: rfqRow.rfqCode,
+            projectCode: rfqRow.projectCode,
+            projectName: rfqRow.projectName,
+            dueDate: rfqRow.dueDate,
+            description: rfqRow.description,
+            items: items.map((it) => ({
+              itemCode: it.itemCode,
+              description: it.description,
+              quantity: it.quantity,
+              uom: it.uom,
+            })),
+            loginUrl
+          },
+          attachments,
+        })
+      } catch (err) {
+        // 개별 벤더 처리 실패 로깅
+        console.error(`Failed to process vendor ${v.id}: ${getErrorMessage(err)}`)
+        emailErrors.push({ vendorId: v.id, error: getErrorMessage(err) })
+        // 계속 진행 (다른 벤더 처리)
+      }
+    }
+
+    // 최종적으로 RFQ 상태 업데이트 (별도 트랜잭션)
+    try {
+      await db.transaction(async (tx) => {
+        await tx
+          .update(rfqs)
+          .set({
+            status: "PUBLISHED",
+            updatedAt: new Date(),
+          })
+          .where(eq(rfqs.id, rfqId))
+
+        console.log(`Updated RFQ #${rfqId} status to PUBLISHED`)
+      })
+
+      // 캐시 무효화
+      revalidateTag("rfq-vendors")
+      revalidateTag("cbe-vendors")
+      revalidateTag("rfqs")
+      revalidateTag(`rfqs-${input.rfqType}`)
+      revalidateTag(`rfq-${rfqId}`)
+
+      // 이메일 오류가 있었는지 확인
+      if (emailErrors.length > 0) {
+        return {
+          error: `일부 벤더에게 이메일 발송 실패 (${emailErrors.length}/${vendorRows.length}), RFQ 상태는 업데이트됨`,
+          emailErrors
+        }
+      }
+
+      return { error: null }
+    } catch (err) {
+      return { error: `RFQ 상태 업데이트 실패: ${getErrorMessage(err)}` }
+    }
+  } catch (err) {
+    return { error: getErrorMessage(err) }
+  }
+}
+
+
+/**
+ * TBE용 평가 데이터 목록 조회
+ */
+export async function getTBE(input: GetTBESchema, rfqId: number) {
+  return unstable_cache(
+    async () => {
+      // 1) 페이징
+      const offset = ((input.page ?? 1) - 1) * (input.perPage ?? 10)
+      const limit = input.perPage ?? 10
+
+      // 2) 고급 필터
+      const advancedWhere = filterColumns({
+        table: vendorTbeView,
+        filters: input.filters ?? [],
+        joinOperator: input.joinOperator ?? "and",
+      })
+
+      // 3) 글로벌 검색
+      let globalWhere
+      if (input.search) {
+        const s = `%${input.search}%`
+        globalWhere = or(
+          sql`${vendorTbeView.vendorName} ILIKE ${s}`,
+          sql`${vendorTbeView.vendorCode} ILIKE ${s}`,
+          sql`${vendorTbeView.email} ILIKE ${s}`
+        )
+      }
+
+      // 4) REJECTED 아니거나 NULL
+      const notRejected = or(
+        ne(vendorTbeView.rfqVendorStatus, "REJECTED"),
+        isNull(vendorTbeView.rfqVendorStatus)
+      )
+
+      // 5) finalWhere
+      const finalWhere = and(
+        eq(vendorTbeView.rfqId, rfqId),
+        notRejected,
+        advancedWhere,
+        globalWhere
+      )
+
+      // 6) 정렬
+      const orderBy = input.sort?.length
+        ? input.sort.map((s) => {
+          const col = (vendorTbeView as any)[s.id]
+          return s.desc ? desc(col) : asc(col)
+        })
+        : [asc(vendorTbeView.vendorId)]
+
+      // 7) 메인 SELECT
+      const [rows, total] = await db.transaction(async (tx) => {
+        const data = await tx
+          .select({
+            // 원하는 컬럼들
+            id: vendorTbeView.vendorId,
+            tbeId: vendorTbeView.tbeId,
+            vendorId: vendorTbeView.vendorId,
+            vendorName: vendorTbeView.vendorName,
+            vendorCode: vendorTbeView.vendorCode,
+            address: vendorTbeView.address,
+            country: vendorTbeView.country,
+            email: vendorTbeView.email,
+            website: vendorTbeView.website,
+            vendorStatus: vendorTbeView.vendorStatus,
+
+            rfqId: vendorTbeView.rfqId,
+            rfqCode: vendorTbeView.rfqCode,
+            projectCode: vendorTbeView.projectCode,
+            projectName: vendorTbeView.projectName,
+            description: vendorTbeView.description,
+            dueDate: vendorTbeView.dueDate,
+
+            rfqVendorStatus: vendorTbeView.rfqVendorStatus,
+            rfqVendorUpdated: vendorTbeView.rfqVendorUpdated,
+
+            tbeResult: vendorTbeView.tbeResult,
+            tbeNote: vendorTbeView.tbeNote,
+            tbeUpdated: vendorTbeView.tbeUpdated,
+          })
+          .from(vendorTbeView)
+          .where(finalWhere)
+          .orderBy(...orderBy)
+          .offset(offset)
+          .limit(limit)
+
+        const [{ count }] = await tx
+          .select({ count: sql<number>`count(*)`.as("count") })
+          .from(vendorTbeView)
+          .where(finalWhere)
+
+        return [data, Number(count)]
+      })
+
+      if (!rows.length) {
+        return { data: [], pageCount: 0 }
+      }
+
+      // 8) Comments 조회
+      const distinctVendorIds = [...new Set(rows.map((r) => r.vendorId))]
+
+      const commAll = await db
+        .select({
+          id: rfqComments.id,
+          commentText: rfqComments.commentText,
+          vendorId: rfqComments.vendorId,
+          evaluationId: rfqComments.evaluationId,
+          createdAt: rfqComments.createdAt,
+          commentedBy: rfqComments.commentedBy,
+          evalType: rfqEvaluations.evalType,
+        })
+        .from(rfqComments)
+        .innerJoin(
+          rfqEvaluations,
+          and(
+            eq(rfqEvaluations.id, rfqComments.evaluationId),
+            eq(rfqEvaluations.evalType, "TBE")
+          )
+        )
+        .where(
+          and(
+            isNotNull(rfqComments.evaluationId),
+            eq(rfqComments.rfqId, rfqId),
+            inArray(rfqComments.vendorId, distinctVendorIds)
+          )
+        )
+
+      // 8-A) vendorId -> comments grouping
+      const commByVendorId = new Map<number, any[]>()
+      for (const c of commAll) {
+        const vid = c.vendorId!
+        if (!commByVendorId.has(vid)) {
+          commByVendorId.set(vid, [])
+        }
+        commByVendorId.get(vid)!.push({
+          id: c.id,
+          commentText: c.commentText,
+          vendorId: c.vendorId,
+          evaluationId: c.evaluationId,
+          createdAt: c.createdAt,
+          commentedBy: c.commentedBy,
+        })
+      }
+
+      // 9) TBE 파일 조회 - vendorResponseAttachments로 대체
+      // Step 1: Get vendorResponses for the rfqId and vendorIds
+      const responsesAll = await db
+        .select({
+          id: vendorResponses.id,
+          vendorId: vendorResponses.vendorId
+        })
+        .from(vendorResponses)
+        .where(
+          and(
+            eq(vendorResponses.rfqId, rfqId),
+            inArray(vendorResponses.vendorId, distinctVendorIds)
+          )
+        );
+
+      // Group responses by vendorId for later lookup
+      const responsesByVendorId = new Map<number, number[]>();
+      for (const resp of responsesAll) {
+        if (!responsesByVendorId.has(resp.vendorId)) {
+          responsesByVendorId.set(resp.vendorId, []);
+        }
+        responsesByVendorId.get(resp.vendorId)!.push(resp.id);
+      }
+
+      // Step 2: Get all responseIds
+      const allResponseIds = responsesAll.map(r => r.id);
+
+      // Step 3: Get technicalResponses for these responseIds
+      const technicalResponsesAll = await db
+        .select({
+          id: vendorTechnicalResponses.id,
+          responseId: vendorTechnicalResponses.responseId
+        })
+        .from(vendorTechnicalResponses)
+        .where(inArray(vendorTechnicalResponses.responseId, allResponseIds));
+
+      // Create mapping from responseId to technicalResponseIds
+      const technicalResponseIdsByResponseId = new Map<number, number[]>();
+      for (const tr of technicalResponsesAll) {
+        if (!technicalResponseIdsByResponseId.has(tr.responseId)) {
+          technicalResponseIdsByResponseId.set(tr.responseId, []);
+        }
+        technicalResponseIdsByResponseId.get(tr.responseId)!.push(tr.id);
+      }
+
+      // Step 4: Get all technicalResponseIds
+      const allTechnicalResponseIds = technicalResponsesAll.map(tr => tr.id);
+
+      // Step 5: Get attachments for these technicalResponseIds
+      const filesAll = await db
+        .select({
+          id: vendorResponseAttachments.id,
+          fileName: vendorResponseAttachments.fileName,
+          filePath: vendorResponseAttachments.filePath,
+          technicalResponseId: vendorResponseAttachments.technicalResponseId,
+          fileType: vendorResponseAttachments.fileType,
+          attachmentType: vendorResponseAttachments.attachmentType,
+          description: vendorResponseAttachments.description,
+          uploadedAt: vendorResponseAttachments.uploadedAt,
+          uploadedBy: vendorResponseAttachments.uploadedBy
+        })
+        .from(vendorResponseAttachments)
+        .where(
+          and(
+            inArray(vendorResponseAttachments.technicalResponseId, allTechnicalResponseIds),
+            isNotNull(vendorResponseAttachments.technicalResponseId)
+          )
+        );
+
+      // Step 6: Create mapping from technicalResponseId to attachments
+      const filesByTechnicalResponseId = new Map<number, any[]>();
+      for (const file of filesAll) {
+        // Skip if technicalResponseId is null (should never happen due to our filter above)
+        if (file.technicalResponseId === null) continue;
+
+        if (!filesByTechnicalResponseId.has(file.technicalResponseId)) {
+          filesByTechnicalResponseId.set(file.technicalResponseId, []);
+        }
+        filesByTechnicalResponseId.get(file.technicalResponseId)!.push({
+          id: file.id,
+          fileName: file.fileName,
+          filePath: file.filePath,
+          fileType: file.fileType,
+          attachmentType: file.attachmentType,
+          description: file.description,
+          uploadedAt: file.uploadedAt,
+          uploadedBy: file.uploadedBy
+        });
+      }
+
+      // Step 7: Create the final filesByVendorId map
+      const filesByVendorId = new Map<number, any[]>();
+      for (const [vendorId, responseIds] of responsesByVendorId.entries()) {
+        filesByVendorId.set(vendorId, []);
+
+        for (const responseId of responseIds) {
+          const technicalResponseIds = technicalResponseIdsByResponseId.get(responseId) || [];
+
+          for (const technicalResponseId of technicalResponseIds) {
+            const files = filesByTechnicalResponseId.get(technicalResponseId) || [];
+            filesByVendorId.get(vendorId)!.push(...files);
+          }
+        }
+      }
+
+      // 10) 최종 합치기
+      const final = rows.map((row) => ({
+        ...row,
+        dueDate: row.dueDate ? new Date(row.dueDate) : null,
+        comments: commByVendorId.get(row.vendorId) ?? [],
+        files: filesByVendorId.get(row.vendorId) ?? [],
+      }))
+
+      const pageCount = Math.ceil(total / limit)
+      return { data: final, pageCount }
+    },
+    [JSON.stringify({ input, rfqId })],
+    {
+      revalidate: 3600,
+      tags: ["tbe-vendors"],
+    }
+  )()
+}
+
+export async function getTBEforVendor(input: GetTBESchema, vendorId: number) {
+  return unstable_cache(
+    async () => {
+      // 1) 페이징
+      const offset = ((input.page ?? 1) - 1) * (input.perPage ?? 10)
+      const limit = input.perPage ?? 10
+
+      // 2) 고급 필터
+      const advancedWhere = filterColumns({
+        table: vendorTbeView,
+        filters: input.filters ?? [],
+        joinOperator: input.joinOperator ?? "and",
+      })
+
+      // 3) 글로벌 검색
+      let globalWhere
+      if (input.search) {
+        const s = `%${input.search}%`
+        globalWhere = or(
+          sql`${vendorTbeView.vendorName} ILIKE ${s}`,
+          sql`${vendorTbeView.vendorCode} ILIKE ${s}`,
+          sql`${vendorTbeView.email} ILIKE ${s}`
+        )
+      }
+
+      // 4) REJECTED 아니거나 NULL
+      const notRejected = or(
+        ne(vendorTbeView.rfqVendorStatus, "REJECTED"),
+        isNull(vendorTbeView.rfqVendorStatus)
+      )
+
+      // 5) finalWhere
+      const finalWhere = and(
+        isNotNull(vendorTbeView.tbeId),
+        eq(vendorTbeView.vendorId, vendorId),
+
+        notRejected,
+        advancedWhere,
+        globalWhere
+      )
+
+      // 6) 정렬
+      const orderBy = input.sort?.length
+        ? input.sort.map((s) => {
+          const col = (vendorTbeView as any)[s.id]
+          return s.desc ? desc(col) : asc(col)
+        })
+        : [asc(vendorTbeView.vendorId)]
+
+      // 7) 메인 SELECT
+      const [rows, total] = await db.transaction(async (tx) => {
+        const data = await tx
+          .select({
+            // 원하는 컬럼들
+            id: vendorTbeView.vendorId,
+            tbeId: vendorTbeView.tbeId,
+            vendorId: vendorTbeView.vendorId,
+            vendorName: vendorTbeView.vendorName,
+            vendorCode: vendorTbeView.vendorCode,
+            address: vendorTbeView.address,
+            country: vendorTbeView.country,
+            email: vendorTbeView.email,
+            website: vendorTbeView.website,
+            vendorStatus: vendorTbeView.vendorStatus,
+
+            rfqId: vendorTbeView.rfqId,
+            rfqCode: vendorTbeView.rfqCode,
+            projectCode: vendorTbeView.projectCode,
+            projectName: vendorTbeView.projectName,
+            description: vendorTbeView.description,
+            dueDate: vendorTbeView.dueDate,
+
+            vendorResponseId: vendorTbeView.vendorResponseId,
+            rfqVendorStatus: vendorTbeView.rfqVendorStatus,
+            rfqVendorUpdated: vendorTbeView.rfqVendorUpdated,
+
+            tbeResult: vendorTbeView.tbeResult,
+            tbeNote: vendorTbeView.tbeNote,
+            tbeUpdated: vendorTbeView.tbeUpdated,
+          })
+          .from(vendorTbeView)
+          .where(finalWhere)
+          .orderBy(...orderBy)
+          .offset(offset)
+          .limit(limit)
+
+        const [{ count }] = await tx
+          .select({ count: sql<number>`count(*)`.as("count") })
+          .from(vendorTbeView)
+          .where(finalWhere)
+
+        return [data, Number(count)]
+      })
+
+      if (!rows.length) {
+        return { data: [], pageCount: 0 }
+      }
+
+      // 8) Comments 조회
+      //    - evaluationId != null && evalType = "TBE"
+      //    - => leftJoin(rfqEvaluations) or innerJoin
+      const distinctVendorIds = [...new Set(rows.map((r) => r.vendorId))]
+      const distinctTbeIds = [...new Set(rows.map((r) => r.tbeId).filter(Boolean))]
+
+      // (A) 조인 방식
+      const commAll = await db
+        .select({
+          id: rfqComments.id,
+          commentText: rfqComments.commentText,
+          vendorId: rfqComments.vendorId,
+          evaluationId: rfqComments.evaluationId,
+          createdAt: rfqComments.createdAt,
+          commentedBy: rfqComments.commentedBy,
+          evalType: rfqEvaluations.evalType, // (optional)
+        })
+        .from(rfqComments)
+        // evalType = 'TBE'
+        .innerJoin(
+          rfqEvaluations,
+          and(
+            eq(rfqEvaluations.id, rfqComments.evaluationId),
+            eq(rfqEvaluations.evalType, "TBE") // ★ TBE만
+          )
+        )
+        .where(
+          and(
+            isNotNull(rfqComments.evaluationId),
+            inArray(rfqComments.vendorId, distinctVendorIds)
+          )
+        )
+
+      // 8-A) vendorId -> comments grouping
+      const commByVendorId = new Map<number, any[]>()
+      for (const c of commAll) {
+        const vid = c.vendorId!
+        if (!commByVendorId.has(vid)) {
+          commByVendorId.set(vid, [])
+        }
+        commByVendorId.get(vid)!.push({
+          id: c.id,
+          commentText: c.commentText,
+          vendorId: c.vendorId,
+          evaluationId: c.evaluationId,
+          createdAt: c.createdAt,
+          commentedBy: c.commentedBy,
+        })
+      }
+
+      // 9) TBE 템플릿 파일 수 조회
+      const templateFiles = await db
+        .select({
+          tbeId: rfqAttachments.evaluationId,
+          fileCount: sql<number>`count(*)`.as("file_count"),
+        })
+        .from(rfqAttachments)
+        .where(
+          and(
+            inArray(rfqAttachments.evaluationId, distinctTbeIds),
+            isNull(rfqAttachments.vendorId),
+            isNull(rfqAttachments.commentId)
+          )
+        )
+        .groupBy(rfqAttachments.evaluationId)
+
+      // tbeId -> fileCount 매핑 - null 체크 추가
+      const templateFileCountMap = new Map<number, number>()
+      for (const tf of templateFiles) {
+        if (tf.tbeId !== null) {
+          templateFileCountMap.set(tf.tbeId, Number(tf.fileCount))
+        }
+      }
+
+      // 10) TBE 응답 파일 확인 (각 tbeId + vendorId 조합에 대해)
+      const tbeResponseFiles = await db
+        .select({
+          tbeId: rfqAttachments.evaluationId,
+          vendorId: rfqAttachments.vendorId,
+          responseFileCount: sql<number>`count(*)`.as("response_file_count"),
+        })
+        .from(rfqAttachments)
+        .where(
+          and(
+            inArray(rfqAttachments.evaluationId, distinctTbeIds),
+            inArray(rfqAttachments.vendorId, distinctVendorIds),
+            isNull(rfqAttachments.commentId)
+          )
+        )
+        .groupBy(rfqAttachments.evaluationId, rfqAttachments.vendorId)
+
+      // tbeId_vendorId -> hasResponse 매핑 - null 체크 추가
+      const tbeResponseMap = new Map<string, number>()
+      for (const rf of tbeResponseFiles) {
+        if (rf.tbeId !== null && rf.vendorId !== null) {
+          const key = `${rf.tbeId}_${rf.vendorId}`
+          tbeResponseMap.set(key, Number(rf.responseFileCount))
+        }
+      }
+
+      // 11) 최종 합치기
+      const final = rows.map((row) => {
+        const tbeId = row.tbeId
+        const vendorId = row.vendorId
+
+        // 템플릿 파일 수
+        const templateFileCount = tbeId !== null ? templateFileCountMap.get(tbeId) || 0 : 0
+
+        // 응답 파일 여부
+        const responseKey = tbeId !== null ? `${tbeId}_${vendorId}` : ""
+        const responseFileCount = responseKey ? tbeResponseMap.get(responseKey) || 0 : 0
+
+        return {
+          ...row,
+          dueDate: row.dueDate ? new Date(row.dueDate) : null,
+          comments: commByVendorId.get(row.vendorId) ?? [],
+          templateFileCount,  // 추가: 템플릿 파일 수
+          hasResponse: responseFileCount > 0,  // 추가: 응답 파일 제출 여부
+        }
+      })
+
+      const pageCount = Math.ceil(total / limit)
+      return { data: final, pageCount }
+    },
+    [JSON.stringify(input), String(vendorId)], // 캐싱 키에 packagesId 추가
+    {
+      revalidate: 3600,
+      tags: [`tbe-vendors-${vendorId}`],
+    }
+  )()
+}
+
+export async function inviteTbeVendorsAction(formData: FormData) {
+  // 캐싱 방지
+  unstable_noStore()
+
+  try {
+    // 1) FormData에서 기본 필드 추출
+    const rfqId = Number(formData.get("rfqId"))
+    const vendorIdsRaw = formData.getAll("vendorIds[]")
+    const vendorIds = vendorIdsRaw.map((id) => Number(id))
+
+
+    // 2) FormData에서 파일들 추출 (multiple)
+    const tbeFiles = formData.getAll("tbeFiles") as File[]
+    if (!rfqId || !vendorIds.length || !tbeFiles.length) {
+      throw new Error("Invalid input or no files attached.")
+    }
+
+    // /public/rfq/[rfqId] 경로
+    const uploadDir = path.join(process.cwd(), "public", "rfq", String(rfqId))
+
+
+    // DB 트랜잭션
+    await db.transaction(async (tx) => {
+      // (A) RFQ 기본 정보 조회
+      const [rfqRow] = await tx
+        .select({
+          rfqCode: vendorResponsesView.rfqCode,
+          description: vendorResponsesView.rfqDescription,
+          projectCode: vendorResponsesView.projectCode,
+          projectName: vendorResponsesView.projectName,
+          dueDate: vendorResponsesView.rfqDueDate,
+          createdBy: vendorResponsesView.rfqCreatedBy,
+        })
+        .from(vendorResponsesView)
+        .where(eq(vendorResponsesView.rfqId, rfqId))
+
+      if (!rfqRow) {
+        throw new Error(`RFQ #${rfqId} not found`)
+      }
+
+      // (B) RFQ 아이템 목록
+      const items = await tx
+        .select({
+          itemCode: rfqItems.itemCode,
+          description: rfqItems.description,
+          quantity: rfqItems.quantity,
+          uom: rfqItems.uom,
+        })
+        .from(rfqItems)
+        .where(eq(rfqItems.rfqId, rfqId))
+
+      // (C) 대상 벤더들
+      const vendorRows = await tx
+        .select({ id: vendors.id, email: vendors.email })
+        .from(vendors)
+        .where(sql`${vendors.id} in (${vendorIds})`)
+
+      // (D) 모든 TBE 파일 저장 & 이후 벤더 초대 처리
+      //     파일은 한 번만 저장해도 되지만, 각 벤더별로 따로 저장/첨부가 필요하다면 루프를 돌려도 됨.
+      //     여기서는 "모든 파일"을 RFQ-DIR에 저장 + "각 벤더"에는 동일 파일 목록을 첨부한다는 예시.
+      const savedFiles = []
+      for (const file of tbeFiles) {
+        const originalName = file.name || "tbe-sheet.xlsx"
+        const savePath = path.join(uploadDir, originalName)
+
+        // 파일 ArrayBuffer → Buffer 변환 후 저장
+        const arrayBuffer = await file.arrayBuffer()
+        fs.writeFile(savePath, Buffer.from(arrayBuffer))
+
+        // 저장 경로 & 파일명 기록
+        savedFiles.push({
+          fileName: originalName,
+          filePath: `/rfq/${rfqId}/${originalName}`, // public 이하 경로
+          absolutePath: savePath,
+        })
+      }
+
+      // (E) 각 벤더별로 TBE 평가 레코드, 초대 처리, 메일 발송
+      for (const v of vendorRows) {
+        if (!v.email) {
+          // 이메일 없는 경우 로직 (스킵 or throw)
+          continue
+        }
+
+        // 1) TBE 평가 레코드 생성
+        const [evalRow] = await tx
+          .insert(rfqEvaluations)
+          .values({
+            rfqId,
+            vendorId: v.id,
+            evalType: "TBE",
+          })
+          .returning({ id: rfqEvaluations.id })
+
+        // 2) rfqAttachments에 저장한 파일들을 기록
+        for (const sf of savedFiles) {
+          await tx.insert(rfqAttachments).values({
+            rfqId,
+            // vendorId: v.id,
+            evaluationId: evalRow.id,
+            fileName: sf.fileName,
+            filePath: sf.filePath,
+          })
+        }
+
+        // 4) 메일 발송
+        const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || 'http://3.36.56.124:3000'
+        const loginUrl = `${baseUrl}/ko/partners/rfq`
+        await sendEmail({
+          to: v.email,
+          subject: `[RFQ ${rfqRow.rfqCode}] You are invited for TBE!`,
+          template: "rfq-invite",
+          context: {
+            language: "en",
+            rfqId,
+            vendorId: v.id,
+
+            rfqCode: rfqRow.rfqCode,
+            projectCode: rfqRow.projectCode,
+            projectName: rfqRow.projectName,
+            dueDate: rfqRow.dueDate,
+            description: rfqRow.description,
+
+            items: items.map((it) => ({
+              itemCode: it.itemCode,
+              description: it.description,
+              quantity: it.quantity,
+              uom: it.uom,
+            })),
+            loginUrl,
+          },
+          attachments: savedFiles.map((sf) => ({
+            path: sf.absolutePath,
+            filename: sf.fileName,
+          })),
+        })
+      }
+
+      // 5) 캐시 무효화
+      revalidateTag("tbe-vendors")
+    })
+
+    // 성공
+    return { error: null }
+  } catch (err) {
+    console.error("[inviteTbeVendorsAction] Error:", err)
+    return { error: getErrorMessage(err) }
+  }
+}
+////partners
+
+
+export async function modifyRfqVendor(input: UpdateRfqVendorSchema) {
+  unstable_noStore();
+  try {
+    const data = await db.transaction(async (tx) => {
+      const [res] = await updateRfqVendor(tx, input.id, {
+        responseStatus: input.status,
+      });
+      return res;
+    });
+
+    revalidateTag("rfqs-vendor");
+    revalidateTag("rfq-vendors");
+
+    return { data: null, error: null };
+  } catch (err) {
+    return { data: null, error: getErrorMessage(err) };
+  }
+}
+
+export async function createRfqCommentWithAttachments(params: {
+  rfqId: number
+  vendorId?: number | null
+  commentText: string
+  commentedBy: number
+  evaluationId?: number | null
+  files?: File[]
+}) {
+  const { rfqId, vendorId, commentText, commentedBy, evaluationId, files } = params
+
+
+  // 1) 새로운 코멘트 생성
+  const [insertedComment] = await db
+    .insert(rfqComments)
+    .values({
+      rfqId,
+      vendorId: vendorId || null,
+      commentText,
+      commentedBy,
+      evaluationId: evaluationId || null,
+    })
+    .returning({ id: rfqComments.id, createdAt: rfqComments.createdAt }) // id만 반환하도록
+
+  if (!insertedComment) {
+    throw new Error("Failed to create comment")
+  }
+
+  // 2) 첨부파일 처리 (S3 업로드 등은 프로젝트 상황에 따라)
+  if (files && files.length > 0) {
+
+    const rfqDir = path.join(process.cwd(), "public", "rfq", String(rfqId));
+    // 폴더 없으면 생성
+    await fs.mkdir(rfqDir, { recursive: true });
+
+    for (const file of files) {
+      const ab = await file.arrayBuffer();
+      const buffer = Buffer.from(ab);
+
+      // 2-2) 고유 파일명
+      const uniqueName = `${randomUUID()}-${file.name}`;
+      // 예) "rfq/123/xxx"
+      const relativePath = path.join("rfq", String(rfqId), uniqueName);
+      const absolutePath = path.join(process.cwd(), "public", relativePath);
+
+      // 2-3) 파일 저장
+      await fs.writeFile(absolutePath, buffer);
+
+      // DB에 첨부파일 row 생성
+      await db.insert(rfqAttachments).values({
+        rfqId,
+        vendorId: vendorId || null,
+        evaluationId: evaluationId || null,
+        commentId: insertedComment.id, // 새 코멘트와 연결
+        fileName: file.name,
+        filePath: "/" + relativePath.replace(/\\/g, "/"),
+      })
+    }
+  }
+
+  revalidateTag("rfq-vendors");
+
+  return { ok: true, commentId: insertedComment.id, createdAt: insertedComment.createdAt }
+}
+
+export async function fetchRfqAttachmentsbyCommentId(commentId: number) {
+  // DB select
+  const rows = await db
+    .select()
+    .from(rfqAttachments)
+    .where(eq(rfqAttachments.commentId, commentId))
+
+  // rows: { id, fileName, filePath, createdAt, vendorId, ... }
+  // 필요 없는 필드는 omit하거나 transform 가능
+  return rows.map((row) => ({
+    id: row.id,
+    fileName: row.fileName,
+    filePath: row.filePath,
+    createdAt: row.createdAt, // or string
+    vendorId: row.vendorId,
+    evaluationId: row.evaluationId,
+    size: undefined, // size를 DB에 저장하지 않았다면
+  }))
+}
+
+export async function updateRfqComment(params: {
+  commentId: number
+  commentText: string
+}) {
+  const { commentId, commentText } = params
+
+  // 예: 간단한 길이 체크 등 유효성 검사
+  if (!commentText || commentText.trim().length === 0) {
+    throw new Error("Comment text must not be empty.")
+  }
+
+  // DB 업데이트
+  const updatedRows = await db
+    .update(rfqComments)
+    .set({ commentText }) // 필요한 컬럼만 set
+    .where(eq(rfqComments.id, commentId))
+    .returning({ id: rfqComments.id })
+
+  // 혹은 returning 전체(row)를 받아서 확인할 수도 있음
+  if (updatedRows.length === 0) {
+    // 해당 id가 없으면 예외
+    throw new Error("Comment not found or already deleted.")
+  }
+  revalidateTag("rfq-vendors");
+  return { ok: true }
+}
+
+export type Project = {
+  id: number;
+  projectCode: string;
+  projectName: string;
+}
+
+export async function getProjects(): Promise<Project[]> {
+  try {
+    // 트랜잭션을 사용하여 프로젝트 데이터 조회
+    const projectList = await db.transaction(async (tx) => {
+      // 모든 프로젝트 조회
+      const results = await tx
+        .select({
+          id: projects.id,
+          projectCode: projects.code, // 테이블의 실제 컬럼명에 맞게 조정
+          projectName: projects.name, // 테이블의 실제 컬럼명에 맞게 조정
+        })
+        .from(projects)
+        .orderBy(projects.code);
+
+      return results;
+    });
+
+    return projectList;
+  } catch (error) {
+    console.error("프로젝트 목록 가져오기 실패:", error);
+    return []; // 오류 발생 시 빈 배열 반환
+  }
+}
+
+
+// 반환 타입 명시적 정의 - rfqCode가 null일 수 있음을 반영
+export interface BudgetaryRfq {
+  id: number;
+  rfqCode: string | null; // null 허용으로 변경
+  description: string | null;
+  projectId: number | null;
+  projectCode: string | null;
+  projectName: string | null;
+}
+
+interface GetBudgetaryRfqsParams {
+  search?: string;
+  projectId?: number;
+  limit?: number;
+  offset?: number;
+}
+
+type GetBudgetaryRfqsResponse =
+  | { rfqs: BudgetaryRfq[]; totalCount: number; error?: never }
+  | { error: string; rfqs?: never; totalCount: number }
+/**
+ * Budgetary 타입의 RFQ 목록을 가져오는 서버 액션
+ * Purchase RFQ 생성 시 부모 RFQ로 선택할 수 있도록 함
+ * 페이징 및 필터링 기능 포함
+ */
+export async function getBudgetaryRfqs(params: GetBudgetaryRfqsParams = {}): Promise<GetBudgetaryRfqsResponse> {
+  const { search, projectId, limit = 50, offset = 0 } = params;
+  const cacheKey = `budgetary-rfqs-${JSON.stringify(params)}`;
+  return unstable_cache(
+    async () => {
+      try {
+
+        const baseCondition = eq(rfqs.rfqType, RfqType.BUDGETARY);
+
+        let where1
+        // 검색어 조건 추가 (있을 경우)
+        if (search && search.trim()) {
+          const searchTerm = `%${search.trim()}%`;
+          const searchCondition = or(
+            ilike(rfqs.rfqCode, searchTerm),
+            ilike(rfqs.description, searchTerm),
+            ilike(projects.code, searchTerm),
+            ilike(projects.name, searchTerm)
+          );
+          where1 = searchCondition
+        }
+
+        let where2
+        // 프로젝트 ID 조건 추가 (있을 경우)
+        if (projectId) {
+          where2 = eq(rfqs.projectId, projectId);
+        }
+
+        const finalWhere = and(where1, where2, baseCondition)
+
+        // 총 개수 조회
+        const [countResult] = await db
+          .select({ count: count() })
+          .from(rfqs)
+          .leftJoin(projects, eq(rfqs.projectId, projects.id))
+          .where(finalWhere);
+
+        // 실제 데이터 조회
+        const budgetaryRfqs = await db
+          .select({
+            id: rfqs.id,
+            rfqCode: rfqs.rfqCode,
+            description: rfqs.description,
+            projectId: rfqs.projectId,
+            projectCode: projects.code,
+            projectName: projects.name,
+          })
+          .from(rfqs)
+          .leftJoin(projects, eq(rfqs.projectId, projects.id))
+          .where(finalWhere)
+          .orderBy(desc(rfqs.createdAt))
+          .limit(limit)
+          .offset(offset);
+
+        return {
+          rfqs: budgetaryRfqs as BudgetaryRfq[],  // 타입 단언으로 호환성 보장
+          totalCount: Number(countResult?.count) || 0
+        };
+      } catch (error) {
+        console.error("Error fetching budgetary RFQs:", error);
+        return {
+          error: "Failed to fetch budgetary RFQs",
+          totalCount: 0
+        };
+      }
+    },
+    [cacheKey],
+    {
+      revalidate: 60,  // 1분 캐시
+      tags: ["rfqs-budgetary"],
+    }
+  )();
+}
+
+export async function getAllVendors() {
+  // Adjust the query as needed (add WHERE, ORDER, etc.)
+  const allVendors = await db.select().from(vendors)
+  return allVendors
+}
+
+/**
+ * Server action to associate items from an RFQ with a vendor
+ * 
+ * @param rfqId - The ID of the RFQ containing items to associate
+ * @param vendorId - The ID of the vendor to associate items with
+ * @returns Object indicating success or failure
+ */
+export async function addItemToVendors(rfqId: number, vendorIds: number[]) {
+  try {
+    // Input validation
+    if (!vendorIds.length) {
+      return {
+        success: false,
+        error: "No vendors selected"
+      };
+    }
+
+    // 1. Find all itemCodes associated with the given rfqId using select
+    const rfqItemResults = await db
+      .select({ itemCode: rfqItems.itemCode })
+      .from(rfqItems)
+      .where(eq(rfqItems.rfqId, rfqId));
+
+    // Extract itemCodes
+    const itemCodes = rfqItemResults.map(item => item.itemCode);
+
+    if (itemCodes.length === 0) {
+      return {
+        success: false,
+        error: "No items found for this RFQ"
+      };
+    }
+
+    // 2. Find existing vendor-item combinations to avoid duplicates
+    const existingCombinations = await db
+      .select({
+        vendorId: vendorPossibleItems.vendorId,
+        itemCode: vendorPossibleItems.itemCode
+      })
+      .from(vendorPossibleItems)
+      .where(
+        and(
+          inArray(vendorPossibleItems.vendorId, vendorIds),
+          inArray(vendorPossibleItems.itemCode, itemCodes)
+        )
+      );
+
+    // Create a Set of existing combinations for easy lookups
+    const existingSet = new Set();
+    existingCombinations.forEach(combo => {
+      existingSet.add(`${combo.vendorId}-${combo.itemCode}`);
+    });
+
+    // 3. Prepare records to insert (only non-existing combinations)
+    const recordsToInsert = [];
+
+    for (const vendorId of vendorIds) {
+      for (const itemCode of itemCodes) {
+        const key = `${vendorId}-${itemCode}`;
+        if (!existingSet.has(key)) {
+          recordsToInsert.push({
+            vendorId,
+            itemCode,
+            // createdAt and updatedAt will be set by defaultNow()
+          });
+        }
+      }
+    }
+
+    // 4. Bulk insert if there are records to insert
+    let insertedCount = 0;
+    if (recordsToInsert.length > 0) {
+      const result = await db.insert(vendorPossibleItems).values(recordsToInsert);
+      insertedCount = recordsToInsert.length;
+    }
+
+    // 5. Revalidate to refresh data
+    revalidateTag("rfq-vendors");
+
+    // 6. Return success with counts
+    return {
+      success: true,
+      insertedCount,
+      totalPossibleItems: vendorIds.length * itemCodes.length,
+      vendorCount: vendorIds.length,
+      itemCount: itemCodes.length
+    };
+  } catch (error) {
+    console.error("Error adding items to vendors:", error);
+    return {
+      success: false,
+      error: error instanceof Error ? error.message : "Unknown error"
+    };
+  }
+}
+
+/**
+ * 특정 평가에 대한 TBE 템플릿 파일 목록 조회
+ * evaluationId가 일치하고 vendorId가 null인 파일 목록
+ */
+export async function fetchTbeTemplateFiles(evaluationId: number) {
+
+  console.log(evaluationId, "evaluationId")
+  try {
+    const files = await db
+      .select({
+        id: rfqAttachments.id,
+        fileName: rfqAttachments.fileName,
+        filePath: rfqAttachments.filePath,
+        createdAt: rfqAttachments.createdAt,
+      })
+      .from(rfqAttachments)
+      .where(
+        and(
+          isNull(rfqAttachments.commentId),
+          isNull(rfqAttachments.vendorId),
+          eq(rfqAttachments.evaluationId, evaluationId),
+          // eq(rfqAttachments.vendorId, vendorId),
+
+        )
+      )
+
+    return { files, error: null }
+  } catch (error) {
+    console.error("Error fetching TBE template files:", error)
+    return {
+      files: [],
+      error: "템플릿 파일을 가져오는 중 오류가 발생했습니다."
+    }
+  }
+}
+
+/**
+ * 특정 TBE 템플릿 파일 다운로드를 위한 정보 조회
+ */
+export async function getTbeTemplateFileInfo(fileId: number) {
+  try {
+    const file = await db
+      .select({
+        fileName: rfqAttachments.fileName,
+        filePath: rfqAttachments.filePath,
+      })
+      .from(rfqAttachments)
+      .where(eq(rfqAttachments.id, fileId))
+      .limit(1)
+
+    if (!file.length) {
+      return { file: null, error: "파일을 찾을 수 없습니다." }
+    }
+
+    return { file: file[0], error: null }
+  } catch (error) {
+    console.error("Error getting TBE template file info:", error)
+    return {
+      file: null,
+      error: "파일 정보를 가져오는 중 오류가 발생했습니다."
+    }
+  }
+}
+
+/**
+ * TBE 응답 파일 업로드 처리
+ */
+export async function uploadTbeResponseFile(formData: FormData) {
+  try {
+    const file = formData.get("file") as File
+    const rfqId = parseInt(formData.get("rfqId") as string)
+    const vendorId = parseInt(formData.get("vendorId") as string)
+    const evaluationId = parseInt(formData.get("evaluationId") as string)
+    const vendorResponseId = parseInt(formData.get("vendorResponseId") as string)
+
+    if (!file || !rfqId || !vendorId || !evaluationId) {
+      return {
+        success: false,
+        error: "필수 필드가 누락되었습니다."
+      }
+    }
+
+    // 타임스탬프 기반 고유 파일명 생성
+    const timestamp = Date.now()
+    const originalName = file.name
+    const fileExtension = originalName.split(".").pop()
+    const fileName = `${originalName.split(".")[0]}-${timestamp}.${fileExtension}`
+
+    // 업로드 디렉토리 및 경로 정의
+    const uploadDir = join(process.cwd(), "rfq", "tbe-responses")
+
+    // 디렉토리가 없으면 생성
+    try {
+      await mkdir(uploadDir, { recursive: true })
+    } catch (error) {
+      // 이미 존재하면 무시
+    }
+
+    const filePath = join(uploadDir, fileName)
+
+    // 파일을 버퍼로 변환
+    const bytes = await file.arrayBuffer()
+    const buffer = Buffer.from(bytes)
+
+    // 파일을 서버에 저장
+    await writeFile(filePath, buffer)
+
+    // 먼저 vendorTechnicalResponses 테이블에 엔트리 생성
+    const technicalResponse = await db.insert(vendorTechnicalResponses)
+      .values({
+        responseId: vendorResponseId,
+        summary: "TBE 응답 파일 업로드", // 필요에 따라 수정
+        notes: `파일명: ${originalName}`,
+      })
+      .returning({ id: vendorTechnicalResponses.id });
+
+    // 생성된 기술 응답 ID 가져오기
+    const technicalResponseId = technicalResponse[0].id;
+
+    // 파일 정보를 데이터베이스에 저장
+    const dbFilePath = `/rfq/tbe-responses/${fileName}`
+
+    // vendorResponseAttachments 테이블 스키마에 맞게 데이터 삽입
+    await db.insert(vendorResponseAttachments)
+      .values({
+        // 오류 메시지를 기반으로 올바른 필드 이름 사용
+        // 테이블 스키마에 정의된 필드만 포함해야 함
+        responseId: vendorResponseId,
+        technicalResponseId: technicalResponseId,
+        // vendorId와 evaluationId 필드가 테이블에 있다면 포함, 없다면 제거
+        // vendorId: vendorId,
+        // evaluationId: evaluationId,
+        fileName: originalName,
+        filePath: dbFilePath,
+        uploadedAt: new Date(),
+      });
+
+    // 경로 재검증 (캐시된 데이터 새로고침)
+    revalidatePath(`/rfq/${rfqId}/tbe`)
+    revalidateTag(`tbe-vendors-${vendorId}`)
+
+    return {
+      success: true,
+      message: "파일이 성공적으로 업로드되었습니다."
+    }
+  } catch (error) {
+    console.error("Error uploading file:", error)
+    return {
+      success: false,
+      error: "파일 업로드에 실패했습니다."
+    }
+  }
+}
+
+export async function getTbeSubmittedFiles(responseId: number) {
+  try {
+    // First, get the technical response IDs where vendorResponseId matches responseId
+    const technicalResponses = await db
+      .select({
+        id: vendorTechnicalResponses.id,
+      })
+      .from(vendorTechnicalResponses)
+      .where(
+        eq(vendorTechnicalResponses.responseId, responseId)
+      )
+
+    if (technicalResponses.length === 0) {
+      return { files: [], error: null }
+    }
+
+    // Extract the IDs from the result
+    const technicalResponseIds = technicalResponses.map(tr => tr.id)
+
+    // Then get attachments where technicalResponseId matches any of the IDs we found
+    const files = await db
+      .select({
+        id: vendorResponseAttachments.id,
+        fileName: vendorResponseAttachments.fileName,
+        filePath: vendorResponseAttachments.filePath,
+        uploadedAt: vendorResponseAttachments.uploadedAt,
+        fileType: vendorResponseAttachments.fileType,
+        attachmentType: vendorResponseAttachments.attachmentType,
+        description: vendorResponseAttachments.description,
+      })
+      .from(vendorResponseAttachments)
+      .where(
+        inArray(vendorResponseAttachments.technicalResponseId, technicalResponseIds)
+      )
+      .orderBy(vendorResponseAttachments.uploadedAt)
+
+    return { files, error: null }
+  } catch (error) {
+    return { files: [], error: 'Failed to fetch TBE submitted files' }
+  }
+}
+
+
+
+export async function getTbeFilesForVendor(rfqId: number, vendorId: number) {
+  try {
+    // Step 1: Get responseId from vendor_responses table
+    const response = await db
+      .select({
+        id: vendorResponses.id,
+      })
+      .from(vendorResponses)
+      .where(
+        and(
+          eq(vendorResponses.rfqId, rfqId),
+          eq(vendorResponses.vendorId, vendorId)
+        )
+      )
+      .limit(1);
+
+    if (!response || response.length === 0) {
+      return { files: [], error: 'No vendor response found' };
+    }
+
+    const responseId = response[0].id;
+
+    // Step 2: Get the technical response IDs
+    const technicalResponses = await db
+      .select({
+        id: vendorTechnicalResponses.id,
+      })
+      .from(vendorTechnicalResponses)
+      .where(
+        eq(vendorTechnicalResponses.responseId, responseId)
+      );
+
+    if (technicalResponses.length === 0) {
+      return { files: [], error: null };
+    }
+
+    // Extract the IDs from the result
+    const technicalResponseIds = technicalResponses.map(tr => tr.id);
+
+    // Step 3: Get attachments where technicalResponseId matches any of the IDs
+    const files = await db
+      .select({
+        id: vendorResponseAttachments.id,
+        fileName: vendorResponseAttachments.fileName,
+        filePath: vendorResponseAttachments.filePath,
+        uploadedAt: vendorResponseAttachments.uploadedAt,
+        fileType: vendorResponseAttachments.fileType,
+        attachmentType: vendorResponseAttachments.attachmentType,
+        description: vendorResponseAttachments.description,
+      })
+      .from(vendorResponseAttachments)
+      .where(
+        inArray(vendorResponseAttachments.technicalResponseId, technicalResponseIds)
+      )
+      .orderBy(vendorResponseAttachments.uploadedAt);
+
+    return { files, error: null };
+  } catch (error) {
+    return { files: [], error: 'Failed to fetch vendor files' };
+  }
+}
+
+export async function getAllTBE(input: GetTBESchema) {
+  return unstable_cache(
+    async () => {
+      // 1) 페이징
+      const offset = ((input.page ?? 1) - 1) * (input.perPage ?? 10)
+      const limit = input.perPage ?? 10
+
+      // 2) 고급 필터
+      const advancedWhere = filterColumns({
+        table: vendorTbeView,
+        filters: input.filters ?? [],
+        joinOperator: input.joinOperator ?? "and",
+      })
+
+      // 3) 글로벌 검색
+      let globalWhere
+      if (input.search) {
+        const s = `%${input.search}%`
+        globalWhere = or(
+          sql`${vendorTbeView.vendorName} ILIKE ${s}`,
+          sql`${vendorTbeView.vendorCode} ILIKE ${s}`,
+          sql`${vendorTbeView.email} ILIKE ${s}`,
+          sql`${vendorTbeView.rfqCode} ILIKE ${s}`,
+          sql`${vendorTbeView.projectCode} ILIKE ${s}`,
+          sql`${vendorTbeView.projectName} ILIKE ${s}`
+        )
+      }
+
+      // 4) REJECTED 아니거나 NULL
+      const notRejected = or(
+        ne(vendorTbeView.rfqVendorStatus, "REJECTED"),
+        isNull(vendorTbeView.rfqVendorStatus)
+      )
+
+      // 5) rfqType 필터 추가
+      const rfqTypeFilter = input.rfqType ? eq(vendorTbeView.rfqType, input.rfqType) : undefined
+
+      // 6) finalWhere - rfqType 필터 추가
+      const finalWhere = and(
+        notRejected,
+        advancedWhere,
+        globalWhere,
+        rfqTypeFilter // 새로 추가된 rfqType 필터
+      )
+
+      // 6) 정렬
+      const orderBy = input.sort?.length
+        ? input.sort.map((s) => {
+          const col = (vendorTbeView as any)[s.id]
+          return s.desc ? desc(col) : asc(col)
+        })
+        : [desc(vendorTbeView.rfqId), asc(vendorTbeView.vendorId)] // Default sort by newest RFQ first
+
+      // 7) 메인 SELECT
+      const [rows, total] = await db.transaction(async (tx) => {
+        const data = await tx
+          .select({
+            // 원하는 컬럼들
+            id: vendorTbeView.vendorId,
+            tbeId: vendorTbeView.tbeId,
+            vendorId: vendorTbeView.vendorId,
+            vendorName: vendorTbeView.vendorName,
+            vendorCode: vendorTbeView.vendorCode,
+            address: vendorTbeView.address,
+            country: vendorTbeView.country,
+            email: vendorTbeView.email,
+            website: vendorTbeView.website,
+            vendorStatus: vendorTbeView.vendorStatus,
+
+            rfqId: vendorTbeView.rfqId,
+            rfqCode: vendorTbeView.rfqCode,
+            projectCode: vendorTbeView.projectCode,
+            projectName: vendorTbeView.projectName,
+            description: vendorTbeView.description,
+            dueDate: vendorTbeView.dueDate,
+
+            rfqVendorStatus: vendorTbeView.rfqVendorStatus,
+            rfqVendorUpdated: vendorTbeView.rfqVendorUpdated,
+
+            tbeResult: vendorTbeView.tbeResult,
+            tbeNote: vendorTbeView.tbeNote,
+            tbeUpdated: vendorTbeView.tbeUpdated,
+          })
+          .from(vendorTbeView)
+          .where(finalWhere)
+          .orderBy(...orderBy)
+          .offset(offset)
+          .limit(limit)
+
+        const [{ count }] = await tx
+          .select({ count: sql<number>`count(*)`.as("count") })
+          .from(vendorTbeView)
+          .where(finalWhere)
+
+        return [data, Number(count)]
+      })
+
+      if (!rows.length) {
+        return { data: [], pageCount: 0 }
+      }
+
+      // 8) Get distinct rfqIds and vendorIds - filter out nulls
+      const distinctVendorIds = [...new Set(rows.map((r) => r.vendorId).filter(Boolean))] as number[];
+      const distinctRfqIds = [...new Set(rows.map((r) => r.rfqId).filter(Boolean))] as number[];
+
+      // 9) Comments 조회
+      const commentsConditions = [isNotNull(rfqComments.evaluationId)];
+
+      // 배열이 비어있지 않을 때만 조건 추가
+      if (distinctRfqIds.length > 0) {
+        commentsConditions.push(inArray(rfqComments.rfqId, distinctRfqIds));
+      }
+
+      if (distinctVendorIds.length > 0) {
+        commentsConditions.push(inArray(rfqComments.vendorId, distinctVendorIds));
+      }
+
+      const commAll = await db
+        .select({
+          id: rfqComments.id,
+          commentText: rfqComments.commentText,
+          vendorId: rfqComments.vendorId,
+          rfqId: rfqComments.rfqId,
+          evaluationId: rfqComments.evaluationId,
+          createdAt: rfqComments.createdAt,
+          commentedBy: rfqComments.commentedBy,
+          evalType: rfqEvaluations.evalType,
+        })
+        .from(rfqComments)
+        .innerJoin(
+          rfqEvaluations,
+          and(
+            eq(rfqEvaluations.id, rfqComments.evaluationId),
+            eq(rfqEvaluations.evalType, "TBE")
+          )
+        )
+        .where(and(...commentsConditions));
+
+      // 9-A) Create a composite key (rfqId-vendorId) -> comments mapping
+      const commByCompositeKey = new Map<string, any[]>()
+      for (const c of commAll) {
+        if (!c.rfqId || !c.vendorId) continue;
+
+        const compositeKey = `${c.rfqId}-${c.vendorId}`;
+        if (!commByCompositeKey.has(compositeKey)) {
+          commByCompositeKey.set(compositeKey, [])
+        }
+        commByCompositeKey.get(compositeKey)!.push({
+          id: c.id,
+          commentText: c.commentText,
+          vendorId: c.vendorId,
+          evaluationId: c.evaluationId,
+          createdAt: c.createdAt,
+          commentedBy: c.commentedBy,
+        })
+      }
+
+      // 10) Responses 조회
+      const responsesAll = await db
+        .select({
+          id: vendorResponses.id,
+          rfqId: vendorResponses.rfqId,
+          vendorId: vendorResponses.vendorId
+        })
+        .from(vendorResponses)
+        .where(
+          and(
+            inArray(vendorResponses.rfqId, distinctRfqIds),
+            inArray(vendorResponses.vendorId, distinctVendorIds)
+          )
+        );
+
+      // Group responses by rfqId-vendorId composite key
+      const responsesByCompositeKey = new Map<string, number[]>();
+      for (const resp of responsesAll) {
+        const compositeKey = `${resp.rfqId}-${resp.vendorId}`;
+        if (!responsesByCompositeKey.has(compositeKey)) {
+          responsesByCompositeKey.set(compositeKey, []);
+        }
+        responsesByCompositeKey.get(compositeKey)!.push(resp.id);
+      }
+
+      // Get all responseIds
+      const allResponseIds = responsesAll.map(r => r.id);
+
+      // 11) Get technicalResponses for these responseIds
+      const technicalResponsesAll = await db
+        .select({
+          id: vendorTechnicalResponses.id,
+          responseId: vendorTechnicalResponses.responseId
+        })
+        .from(vendorTechnicalResponses)
+        .where(inArray(vendorTechnicalResponses.responseId, allResponseIds));
+
+      // Create mapping from responseId to technicalResponseIds
+      const technicalResponseIdsByResponseId = new Map<number, number[]>();
+      for (const tr of technicalResponsesAll) {
+        if (!technicalResponseIdsByResponseId.has(tr.responseId)) {
+          technicalResponseIdsByResponseId.set(tr.responseId, []);
+        }
+        technicalResponseIdsByResponseId.get(tr.responseId)!.push(tr.id);
+      }
+
+      // Get all technicalResponseIds
+      const allTechnicalResponseIds = technicalResponsesAll.map(tr => tr.id);
+
+      // 12) Get attachments for these technicalResponseIds
+      const filesAll = await db
+        .select({
+          id: vendorResponseAttachments.id,
+          fileName: vendorResponseAttachments.fileName,
+          filePath: vendorResponseAttachments.filePath,
+          technicalResponseId: vendorResponseAttachments.technicalResponseId,
+          fileType: vendorResponseAttachments.fileType,
+          attachmentType: vendorResponseAttachments.attachmentType,
+          description: vendorResponseAttachments.description,
+          uploadedAt: vendorResponseAttachments.uploadedAt,
+          uploadedBy: vendorResponseAttachments.uploadedBy
+        })
+        .from(vendorResponseAttachments)
+        .where(
+          and(
+            inArray(vendorResponseAttachments.technicalResponseId, allTechnicalResponseIds),
+            isNotNull(vendorResponseAttachments.technicalResponseId)
+          )
+        );
+
+      // Create mapping from technicalResponseId to attachments
+      const filesByTechnicalResponseId = new Map<number, any[]>();
+      for (const file of filesAll) {
+        if (file.technicalResponseId === null) continue;
+
+        if (!filesByTechnicalResponseId.has(file.technicalResponseId)) {
+          filesByTechnicalResponseId.set(file.technicalResponseId, []);
+        }
+        filesByTechnicalResponseId.get(file.technicalResponseId)!.push({
+          id: file.id,
+          fileName: file.fileName,
+          filePath: file.filePath,
+          fileType: file.fileType,
+          attachmentType: file.attachmentType,
+          description: file.description,
+          uploadedAt: file.uploadedAt,
+          uploadedBy: file.uploadedBy
+        });
+      }
+
+      // 13) Create the final filesByCompositeKey map
+      const filesByCompositeKey = new Map<string, any[]>();
+
+      for (const [compositeKey, responseIds] of responsesByCompositeKey.entries()) {
+        filesByCompositeKey.set(compositeKey, []);
+
+        for (const responseId of responseIds) {
+          const technicalResponseIds = technicalResponseIdsByResponseId.get(responseId) || [];
+
+          for (const technicalResponseId of technicalResponseIds) {
+            const files = filesByTechnicalResponseId.get(technicalResponseId) || [];
+            filesByCompositeKey.get(compositeKey)!.push(...files);
+          }
+        }
+      }
+
+      // 14) 최종 합치기
+      const final = rows.map((row) => {
+        const compositeKey = `${row.rfqId}-${row.vendorId}`;
+
+        return {
+          ...row,
+          dueDate: row.dueDate ? new Date(row.dueDate) : null,
+          comments: commByCompositeKey.get(compositeKey) ?? [],
+          files: filesByCompositeKey.get(compositeKey) ?? [],
+        };
+      })
+
+      const pageCount = Math.ceil(total / limit)
+      return { data: final, pageCount }
+    },
+    [JSON.stringify(input)],
+    {
+      revalidate: 3600,
+      tags: ["all-tbe-vendors"],
+    }
+  )()
+}
+
+
+
+
+
+export async function getCBE(input: GetCBESchema, rfqId: number) {
+  return unstable_cache(
+    async () => {
+      // [1] 페이징
+      const offset = ((input.page ?? 1) - 1) * (input.perPage ?? 10);
+      const limit = input.perPage ?? 10;
+
+      // [2] 고급 필터
+      const advancedWhere = filterColumns({
+        table: vendorCbeView,
+        filters: input.filters ?? [],
+        joinOperator: input.joinOperator ?? "and",
+      });
+
+      // [3] 글로벌 검색
+      let globalWhere;
+      if (input.search) {
+        const s = `%${input.search}%`;
+        globalWhere = or(
+          sql`${vendorCbeView.vendorName} ILIKE ${s}`,
+          sql`${vendorCbeView.vendorCode} ILIKE ${s}`,
+          sql`${vendorCbeView.email} ILIKE ${s}`
+        );
+      }
+
+      // [4] REJECTED 아니거나 NULL
+      const notRejected = or(
+        ne(vendorCbeView.rfqVendorStatus, "REJECTED"),
+        isNull(vendorCbeView.rfqVendorStatus)
+      );
+
+      // [5] 최종 where
+      const finalWhere = and(
+        eq(vendorCbeView.rfqId, rfqId),
+        notRejected,
+        advancedWhere,
+        globalWhere
+      );
+
+      // [6] 정렬
+      const orderBy = input.sort?.length
+        ? input.sort.map((s) => {
+            // vendor_cbe_view 컬럼 중 정렬 대상이 되는 것만 매핑
+            const col = (vendorCbeView as any)[s.id];
+            return s.desc ? desc(col) : asc(col);
+          })
+        : [asc(vendorCbeView.vendorId)];
+
+      // [7] 메인 SELECT
+      const [rows, total] = await db.transaction(async (tx) => {
+        const data = await tx
+          .select({
+            // 필요한 컬럼만 추출
+            id: vendorCbeView.vendorId,
+            cbeId: vendorCbeView.cbeId,
+            vendorId: vendorCbeView.vendorId,
+            vendorName: vendorCbeView.vendorName,
+            vendorCode: vendorCbeView.vendorCode,
+            address: vendorCbeView.address,
+            country: vendorCbeView.country,
+            email: vendorCbeView.email,
+            website: vendorCbeView.website,
+            vendorStatus: vendorCbeView.vendorStatus,
+
+            rfqId: vendorCbeView.rfqId,
+            rfqCode: vendorCbeView.rfqCode,
+            projectCode: vendorCbeView.projectCode,
+            projectName: vendorCbeView.projectName,
+            description: vendorCbeView.description,
+            dueDate: vendorCbeView.dueDate,
+
+            rfqVendorStatus: vendorCbeView.rfqVendorStatus,
+            rfqVendorUpdated: vendorCbeView.rfqVendorUpdated,
+
+            cbeResult: vendorCbeView.cbeResult,
+            cbeNote: vendorCbeView.cbeNote,
+            cbeUpdated: vendorCbeView.cbeUpdated,
+
+            // 상업평가 정보
+            totalCost: vendorCbeView.totalCost,
+            currency: vendorCbeView.currency,
+            paymentTerms: vendorCbeView.paymentTerms,
+            incoterms: vendorCbeView.incoterms,
+            deliverySchedule: vendorCbeView.deliverySchedule,
+          })
+          .from(vendorCbeView)
+          .where(finalWhere)
+          .orderBy(...orderBy)
+          .offset(offset)
+          .limit(limit);
+
+        const [{ count }] = await tx
+          .select({ count: sql<number>`count(*)`.as("count") })
+          .from(vendorCbeView)
+          .where(finalWhere);
+
+        return [data, Number(count)];
+      });
+
+      if (!rows.length) {
+        return { data: [], pageCount: 0 };
+      }
+
+      // [8] Comments 조회
+      // TBE 에서는 rfqComments + rfqEvaluations(evalType="TBE") 를 조인했지만,
+      // CBE는 cbeEvaluations 또는 evalType="CBE"를 기준으로 바꾸면 됩니다.
+      // 만약 cbeEvaluations.id 를 evaluationId 로 참조한다면 아래와 같이 innerJoin:
+      const distinctVendorIds = [...new Set(rows.map((r) => r.vendorId))];
+
+      const commAll = await db
+        .select({
+          id: rfqComments.id,
+          commentText: rfqComments.commentText,
+          vendorId: rfqComments.vendorId,
+          evaluationId: rfqComments.evaluationId,
+          createdAt: rfqComments.createdAt,
+          commentedBy: rfqComments.commentedBy,
+          // cbeEvaluations에는 evalType 컬럼이 별도로 없을 수도 있음(프로젝트 구조에 맞게 수정)
+          // evalType: cbeEvaluations.evalType,
+        })
+        .from(rfqComments)
+        .innerJoin(
+          cbeEvaluations,
+          eq(cbeEvaluations.id, rfqComments.evaluationId)
+        )
+        .where(
+          and(
+            isNotNull(rfqComments.evaluationId),
+            eq(rfqComments.rfqId, rfqId),
+            inArray(rfqComments.vendorId, distinctVendorIds)
+          )
+        );
+
+      // vendorId -> comments grouping
+      const commByVendorId = new Map<number, any[]>();
+      for (const c of commAll) {
+        const vid = c.vendorId!;
+        if (!commByVendorId.has(vid)) {
+          commByVendorId.set(vid, []);
+        }
+        commByVendorId.get(vid)!.push({
+          id: c.id,
+          commentText: c.commentText,
+          vendorId: c.vendorId,
+          evaluationId: c.evaluationId,
+          createdAt: c.createdAt,
+          commentedBy: c.commentedBy,
+        });
+      }
+
+      // [9] CBE 파일 조회 (프로젝트에 따라 구조가 달라질 수 있음)
+      //   - TBE는 vendorTechnicalResponses 기준
+      //   - CBE는 vendorCommercialResponses(가정) 등이 있을 수 있음
+      //   - 여기서는 예시로 "동일한 vendorResponses + vendorResponseAttachments" 라고 가정
+      // Step 1: vendorResponses 가져오기 (rfqId + vendorIds)
+      const responsesAll = await db
+        .select({
+          id: vendorResponses.id,
+          vendorId: vendorResponses.vendorId,
+        })
+        .from(vendorResponses)
+        .where(
+          and(
+            eq(vendorResponses.rfqId, rfqId),
+            inArray(vendorResponses.vendorId, distinctVendorIds)
+          )
+        );
+
+      // Group responses by vendorId
+      const responsesByVendorId = new Map<number, number[]>();
+      for (const resp of responsesAll) {
+        if (!responsesByVendorId.has(resp.vendorId)) {
+          responsesByVendorId.set(resp.vendorId, []);
+        }
+        responsesByVendorId.get(resp.vendorId)!.push(resp.id);
+      }
+
+      // Step 2: responseIds
+      const allResponseIds = responsesAll.map((r) => r.id);
+
+ 
+      const commercialResponsesAll = await db
+        .select({
+          id: vendorCommercialResponses.id,
+          responseId: vendorCommercialResponses.responseId,
+        })
+        .from(vendorCommercialResponses)
+        .where(inArray(vendorCommercialResponses.responseId, allResponseIds));
+
+      const commercialResponseIdsByResponseId = new Map<number, number[]>();
+      for (const cr of commercialResponsesAll) {
+        if (!commercialResponseIdsByResponseId.has(cr.responseId)) {
+          commercialResponseIdsByResponseId.set(cr.responseId, []);
+        }
+        commercialResponseIdsByResponseId.get(cr.responseId)!.push(cr.id);
+      }
+
+      const allCommercialResponseIds = commercialResponsesAll.map((cr) => cr.id);
+      
+
+      // 여기서는 예시로 TBE와 마찬가지로 vendorResponseAttachments를
+      // 직접 responseId로 관리한다고 가정(혹은 commercialResponseId로 연결)
+      // Step 3: vendorResponseAttachments 조회
+      const filesAll = await db
+        .select({
+          id: vendorResponseAttachments.id,
+          fileName: vendorResponseAttachments.fileName,
+          filePath: vendorResponseAttachments.filePath,
+          responseId: vendorResponseAttachments.responseId,
+          fileType: vendorResponseAttachments.fileType,
+          attachmentType: vendorResponseAttachments.attachmentType,
+          description: vendorResponseAttachments.description,
+          uploadedAt: vendorResponseAttachments.uploadedAt,
+          uploadedBy: vendorResponseAttachments.uploadedBy,
+        })
+        .from(vendorResponseAttachments)
+        .where(
+          and(
+            inArray(vendorResponseAttachments.responseId, allCommercialResponseIds),
+            isNotNull(vendorResponseAttachments.responseId)
+          )
+        );
+
+      // Step 4: responseId -> files
+      const filesByResponseId = new Map<number, any[]>();
+      for (const file of filesAll) {
+        const rid = file.responseId!;
+        if (!filesByResponseId.has(rid)) {
+          filesByResponseId.set(rid, []);
+        }
+        filesByResponseId.get(rid)!.push({
+          id: file.id,
+          fileName: file.fileName,
+          filePath: file.filePath,
+          fileType: file.fileType,
+          attachmentType: file.attachmentType,
+          description: file.description,
+          uploadedAt: file.uploadedAt,
+          uploadedBy: file.uploadedBy,
+        });
+      }
+
+      // Step 5: vendorId -> files
+      const filesByVendorId = new Map<number, any[]>();
+      for (const [vendorId, responseIds] of responsesByVendorId.entries()) {
+        filesByVendorId.set(vendorId, []);
+        for (const responseId of responseIds) {
+          const files = filesByResponseId.get(responseId) || [];
+          filesByVendorId.get(vendorId)!.push(...files);
+        }
+      }
+
+      // [10] 최종 데이터 합치기
+      const final = rows.map((row) => ({
+        ...row,
+        dueDate: row.dueDate ? new Date(row.dueDate) : null,
+        comments: commByVendorId.get(row.vendorId) ?? [],
+        files: filesByVendorId.get(row.vendorId) ?? [],
+      }));
+
+      const pageCount = Math.ceil(total / limit);
+      return { data: final, pageCount };
+    },
+    // 캐싱 키 & 옵션
+    [JSON.stringify({ input, rfqId })],
+    {
+      revalidate: 3600,
+      tags: ["cbe-vendors"],
+    }
+  )();
+}
\ No newline at end of file
diff --git a/lib/rfqs/table/BudgetaryRfqSelector.tsx b/lib/rfqs/table/BudgetaryRfqSelector.tsx
new file mode 100644
index 00000000..cea53c1d
--- /dev/null
+++ b/lib/rfqs/table/BudgetaryRfqSelector.tsx
@@ -0,0 +1,261 @@
+"use client"
+
+import * as React from "react"
+import { Check, ChevronsUpDown, Loader } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from "@/components/ui/command"
+import { Popover, PopoverTrigger, PopoverContent } from "@/components/ui/popover"
+import { cn } from "@/lib/utils"
+import { useDebounce } from "@/hooks/use-debounce"
+import { getBudgetaryRfqs, type BudgetaryRfq } from "../service"
+
+interface BudgetaryRfqSelectorProps {
+  selectedRfqId?: number;
+  onRfqSelect: (rfq: BudgetaryRfq | null) => void;
+  placeholder?: string;
+}
+
+export function BudgetaryRfqSelector({
+  selectedRfqId,
+  onRfqSelect,
+  placeholder = "Budgetary RFQ 선택..."
+}: BudgetaryRfqSelectorProps) {
+  const [searchTerm, setSearchTerm] = React.useState("");
+  const debouncedSearchTerm = useDebounce(searchTerm, 300);
+  
+  const [open, setOpen] = React.useState(false);
+  const [loading, setLoading] = React.useState(false);
+  const [budgetaryRfqs, setBudgetaryRfqs] = React.useState<BudgetaryRfq[]>([]);
+  const [selectedRfq, setSelectedRfq] = React.useState<BudgetaryRfq | null>(null);
+  const [page, setPage] = React.useState(1);
+  const [hasMore, setHasMore] = React.useState(true);
+  const [totalCount, setTotalCount] = React.useState(0);
+  
+  const listRef = React.useRef<HTMLDivElement>(null);
+  
+  // 초기 선택된 RFQ가 있을 경우 로드
+  React.useEffect(() => {
+    if (selectedRfqId && open) {
+      const loadSelectedRfq = async () => {
+        try {
+          const result = await getBudgetaryRfqs({ 
+            limit: 1,
+            // null을 undefined로 변환하여 타입 오류 해결
+            projectId: selectedRfq?.projectId ?? undefined
+          });
+          
+          if ('rfqs' in result && result.rfqs) {
+            // 옵셔널 체이닝 또는 조건부 검사로 undefined 체크
+            const foundRfq = result.rfqs.find(rfq => rfq.id === selectedRfqId);
+            if (foundRfq) {
+              setSelectedRfq(foundRfq);
+            }
+          }
+        } catch (error) {
+          console.error("선택된 RFQ 로드 오류:", error);
+        }
+      };
+      
+      if (!selectedRfq || selectedRfq.id !== selectedRfqId) {
+        loadSelectedRfq();
+      }
+    }
+  }, [selectedRfqId, open, selectedRfq]);
+  
+  // 검색어 변경 시 데이터 리셋 및 재로드
+  React.useEffect(() => {
+    if (open) {
+      setPage(1);
+      setHasMore(true);
+      setBudgetaryRfqs([]);
+      loadBudgetaryRfqs(1, true);
+    }
+  }, [debouncedSearchTerm, open]);
+  
+  // 데이터 로드 함수
+  const loadBudgetaryRfqs = async (pageToLoad: number, reset = false) => {
+    if (!open) return;
+    
+    setLoading(true);
+    try {
+      const limit = 20; // 한 번에 로드할 항목 수
+      const result = await getBudgetaryRfqs({
+        search: debouncedSearchTerm,
+        limit,
+        offset: (pageToLoad - 1) * limit,
+      });
+      
+      if ('rfqs' in result && result.rfqs) {
+        if (reset) {
+          setBudgetaryRfqs(result.rfqs);
+        } else {
+          setBudgetaryRfqs(prev => [...prev, ...result.rfqs]);
+        }
+        
+        setTotalCount(result.totalCount);
+        setHasMore(result.rfqs.length === limit && (pageToLoad * limit) < result.totalCount);
+        setPage(pageToLoad);
+      }
+    } catch (error) {
+      console.error("Budgetary RFQs 로드 오류:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+  
+  // 무한 스크롤 처리
+  const handleScroll = () => {
+    if (listRef.current) {
+      const { scrollTop, scrollHeight, clientHeight } = listRef.current;
+      
+      // 스크롤이 90% 이상 내려갔을 때 다음 페이지 로드
+      if (scrollTop + clientHeight >= scrollHeight * 0.9 && !loading && hasMore) {
+        loadBudgetaryRfqs(page + 1);
+      }
+    }
+  };
+  
+  // RFQ를 프로젝트별로 그룹화하는 함수
+  const groupRfqsByProject = (rfqs: BudgetaryRfq[]) => {
+    const groups: Record<string, {
+      projectId: number | null;
+      projectCode: string | null; 
+      projectName: string | null;
+      rfqs: BudgetaryRfq[];
+    }> = {};
+
+    // 'No Project' 그룹 기본 생성
+    groups['no-project'] = {
+      projectId: null,
+      projectCode: null,
+      projectName: null,
+      rfqs: []
+    };
+
+    // 프로젝트별로 RFQ 그룹화
+    rfqs.forEach(rfq => {
+      const key = rfq.projectId ? `project-${rfq.projectId}` : 'no-project';
+      
+      if (!groups[key] && rfq.projectId) {
+        groups[key] = {
+          projectId: rfq.projectId,
+          projectCode: rfq.projectCode,
+          projectName: rfq.projectName,
+          rfqs: []
+        };
+      }
+      
+      groups[key].rfqs.push(rfq);
+    });
+
+    // 필터링된 결과가 있는 그룹만 남기기
+    return Object.values(groups).filter(group => group.rfqs.length > 0);
+  };
+  
+  // 그룹화된 RFQ 목록
+  const groupedRfqs = React.useMemo(() => {
+    return groupRfqsByProject(budgetaryRfqs);
+  }, [budgetaryRfqs]);
+  
+  // RFQ 선택 처리
+  const handleRfqSelect = (rfq: BudgetaryRfq | null) => {
+    setSelectedRfq(rfq);
+    onRfqSelect(rfq);
+    setOpen(false);
+  };
+  
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className="w-full justify-between"
+        >
+          {selectedRfq
+            ? `${selectedRfq.rfqCode || ""} - ${selectedRfq.description || ""}`
+            : placeholder}
+          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[400px] p-0">
+        <Command>
+          <CommandInput
+            placeholder="Budgetary RFQ 코드/설명/프로젝트 검색..."
+            value={searchTerm}
+            onValueChange={setSearchTerm}
+          />
+          <CommandList 
+            className="max-h-[300px]" 
+            ref={listRef} 
+            onScroll={handleScroll}
+          >
+            <CommandEmpty>검색 결과가 없습니다</CommandEmpty>
+            
+            <CommandGroup>
+              <CommandItem
+                value="none"
+                onSelect={() => handleRfqSelect(null)}
+              >
+                <Check
+                  className={cn(
+                    "mr-2 h-4 w-4",
+                    !selectedRfq
+                      ? "opacity-100"
+                      : "opacity-0"
+                  )}
+                />
+                <span className="font-medium">선택 안함</span>
+              </CommandItem>
+            </CommandGroup>
+            
+            {groupedRfqs.map((group, index) => (
+              <CommandGroup
+                key={`group-${group.projectId || index}`}
+                heading={
+                  group.projectId 
+                    ? `${group.projectCode || ""} - ${group.projectName || ""}` 
+                    : "프로젝트 없음"
+                }
+              >
+                {group.rfqs.map((rfq) => (
+                  <CommandItem
+                    key={rfq.id}
+                    value={`${rfq.rfqCode || ""} ${rfq.description || ""}`}
+                    onSelect={() => handleRfqSelect(rfq)}
+                  >
+                    <Check
+                      className={cn(
+                        "mr-2 h-4 w-4",
+                        selectedRfq?.id === rfq.id
+                          ? "opacity-100"
+                          : "opacity-0"
+                      )}
+                    />
+                    <span className="font-medium">{rfq.rfqCode || ""}</span>
+                    <span className="ml-2 text-gray-500 truncate">
+                      - {rfq.description || ""}
+                    </span>
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            ))}
+            
+            {loading && (
+              <div className="py-2 text-center">
+                <Loader className="h-4 w-4 animate-spin mx-auto" />
+              </div>
+            )}
+            
+            {!loading && !hasMore && budgetaryRfqs.length > 0 && (
+              <div className="py-2 text-center text-sm text-muted-foreground">
+                총 {totalCount}개 중 {budgetaryRfqs.length}개 표시됨
+              </div>
+            )}
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
\ No newline at end of file
diff --git a/lib/rfqs/table/ItemsDialog.tsx b/lib/rfqs/table/ItemsDialog.tsx
new file mode 100644
index 00000000..f1dbf90e
--- /dev/null
+++ b/lib/rfqs/table/ItemsDialog.tsx
@@ -0,0 +1,744 @@
+"use client"
+
+import * as React from "react"
+import { useForm, useFieldArray, useWatch } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { z } from "zod"
+
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage
+} from "@/components/ui/form"
+import { Popover, PopoverTrigger, PopoverContent } from "@/components/ui/popover"
+import {
+  Command,
+  CommandInput,
+  CommandList,
+  CommandItem,
+  CommandGroup,
+  CommandEmpty
+} from "@/components/ui/command"
+import { Check, ChevronsUpDown, Plus, Trash2, Save, X, AlertCircle, Eye } from "lucide-react"
+import { toast } from "sonner"
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+import { Badge } from "@/components/ui/badge"
+
+import { createRfqItem, deleteRfqItem } from "../service"
+import { RfqWithItemCount } from "@/db/schema/rfq"
+import { RfqType } from "../validations"
+
+// Zod 스키마 - 수량은 string으로 받아서 나중에 변환
+const itemSchema = z.object({
+  id: z.number().optional(),
+  itemCode: z.string().nonempty({ message: "아이템 코드를 선택해주세요" }),
+  description: z.string().optional(),
+  quantity: z.coerce.number().min(1, { message: "최소 수량은 1입니다" }).default(1),
+  uom: z.string().default("each"),
+});
+
+const itemsFormSchema = z.object({
+  rfqId: z.number().int(),
+  items: z.array(itemSchema).min(1, { message: "최소 1개 이상의 아이템을 추가해주세요" }),
+});
+
+type ItemsFormSchema = z.infer<typeof itemsFormSchema>;
+
+interface RfqsItemsDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  rfq: RfqWithItemCount | null;
+  defaultItems?: {
+    id?: number;
+    itemCode: string;
+    quantity?: number | null;
+    description?: string | null;
+    uom?: string | null;
+  }[];
+  itemsList: { code: string | null; name: string }[];
+  rfqType?: RfqType;
+}
+
+export function RfqsItemsDialog({
+  open,
+  onOpenChange,
+  rfq,
+  defaultItems = [],
+  itemsList,
+  rfqType
+}: RfqsItemsDialogProps) {
+  const rfqId = rfq?.rfqId ?? 0;
+  
+  // 편집 가능 여부 확인 - DRAFT 상태일 때만 편집 가능
+  const isEditable = rfq?.status === "DRAFT";
+  
+  // 초기 아이템 ID 목록을 추적하기 위한 상태 추가
+  const [initialItemIds, setInitialItemIds] = React.useState<(number | undefined)[]>([]);
+  
+  // 삭제된 아이템 ID를 저장하는 상태 추가
+  const [deletedItemIds, setDeletedItemIds] = React.useState<number[]>([]);
+  
+  // 1) form
+  const form = useForm<ItemsFormSchema>({
+    resolver: zodResolver(itemsFormSchema),
+    defaultValues: {
+      rfqId,
+      items: defaultItems.length > 0 ? defaultItems.map((it) => ({
+        id: it.id,
+        quantity: it.quantity ?? 1,
+        uom: it.uom ?? "each",
+        itemCode: it.itemCode ?? "",
+        description: it.description ?? "",
+      })) : [{ itemCode: "", description: "", quantity: 1, uom: "each" }],
+    },
+    mode: "onChange", // 입력 필드가 변경될 때마다 유효성 검사
+  });
+
+  // 다이얼로그가 열릴 때마다 폼 초기화 및 초기 아이템 ID 저장
+  React.useEffect(() => {
+    if (open) {
+      const initialItems = defaultItems.length > 0 
+        ? defaultItems.map((it) => ({
+            id: it.id,
+            quantity: it.quantity ?? 1,
+            uom: it.uom ?? "each",
+            itemCode: it.itemCode ?? "",
+            description: it.description ?? "",
+          }))
+        : [{ itemCode: "", description: "", quantity: 1, uom: "each" }];
+      
+      form.reset({
+        rfqId,
+        items: initialItems,
+      });
+      
+      // 초기 아이템 ID 목록 저장
+      setInitialItemIds(defaultItems.map(item => item.id));
+      
+      // 삭제된 아이템 목록 초기화
+      setDeletedItemIds([]);
+      setHasUnsavedChanges(false);
+    }
+  }, [open, defaultItems, rfqId, form]);
+
+  // 새로운 요소에 대한 ref 배열
+  const inputRefs = React.useRef<Array<HTMLButtonElement | null>>([]);
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
+  const [hasUnsavedChanges, setHasUnsavedChanges] = React.useState(false);
+  const [isExitDialogOpen, setIsExitDialogOpen] = React.useState(false);
+
+  // 폼 변경 감지 - 편집 가능한 경우에만 변경 감지
+  React.useEffect(() => {
+    if (!isEditable) return;
+    
+    const subscription = form.watch(() => {
+      setHasUnsavedChanges(true);
+    });
+    return () => subscription.unsubscribe();
+  }, [form, isEditable]);
+
+  // 2) field array
+  const { fields, append, remove } = useFieldArray({
+    control: form.control,
+    name: "items",
+  });
+
+  // 3) watch items array
+  const watchItems = form.watch("items");
+
+  // 4) Add item row with auto-focus
+  function handleAddItem() {
+    if (!isEditable) return;
+    
+    // 명시적으로 숫자 타입으로 지정
+    append({ 
+      itemCode: "", 
+      description: "", 
+      quantity: 1, 
+      uom: "each" 
+    });
+    setHasUnsavedChanges(true);
+    
+    // 다음 렌더링 사이클에서 새로 추가된 항목에 포커스
+    setTimeout(() => {
+      const newIndex = fields.length;
+      const button = inputRefs.current[newIndex];
+      if (button) {
+        button.click();
+      }
+    }, 100);
+  }
+
+  // 항목 직접 삭제 - 기존 ID가 있을 경우 삭제 목록에 추가
+  const handleRemoveItem = (index: number) => {
+    if (!isEditable) return;
+    
+    const itemToRemove = form.getValues().items[index];
+    
+    // 기존 ID가 있는 아이템이라면 삭제 목록에 추가
+    if (itemToRemove.id !== undefined) {
+      setDeletedItemIds(prev => [...prev, itemToRemove.id as number]);
+    }
+    
+    remove(index);
+    setHasUnsavedChanges(true);
+    
+    // 포커스 처리: 다음 항목이 있으면 다음 항목으로, 없으면 마지막 항목으로
+    setTimeout(() => {
+      const nextIndex = Math.min(index, fields.length - 1);
+      if (nextIndex >= 0 && inputRefs.current[nextIndex]) {
+        inputRefs.current[nextIndex]?.click();
+      }
+    }, 50);
+  };
+
+  // 다이얼로그 닫기 전 확인
+  const handleDialogClose = (open: boolean) => {
+    if (!open && hasUnsavedChanges && isEditable) {
+      setIsExitDialogOpen(true);
+    } else {
+      onOpenChange(open);
+    }
+  };
+
+  // 필드 포커스 유틸리티 함수
+  const focusField = (selector: string) => {
+    if (!isEditable) return;
+    
+    setTimeout(() => {
+      const element = document.querySelector(selector) as HTMLInputElement | null;
+      if (element) {
+        element.focus();
+      }
+    }, 10);
+  };
+
+  // 5) Submit - 업데이트된 제출 로직 (생성/수정 + 삭제 처리)
+  async function onSubmit(data: ItemsFormSchema) {
+    if (!isEditable) return;
+    
+    try {
+      setIsSubmitting(true);
+      
+      // 각 아이템이 유효한지 확인 
+      const anyInvalidItems = data.items.some(item => !item.itemCode || item.quantity < 1);
+      
+      if (anyInvalidItems) {
+        toast.error("유효하지 않은 아이템이 있습니다. 모든 필드를 확인해주세요.");
+        setIsSubmitting(false);
+        return;
+      }
+      
+      // 1. 삭제 처리 - 삭제된 아이템 ID가 있으면 삭제 요청 
+      const deletePromises = deletedItemIds.map(id => 
+        deleteRfqItem({
+          id: id,
+          rfqId: rfqId,
+          rfqType: rfqType ?? RfqType.PURCHASE
+        })
+      );
+      
+      // 2. 생성/수정 처리 - 폼에 남아있는 아이템들
+      const upsertPromises = data.items.map((item) =>
+        createRfqItem({
+          rfqId: rfqId,
+          itemCode: item.itemCode,
+          description: item.description,
+          // 명시적으로 숫자로 변환
+          quantity: Number(item.quantity), 
+          uom: item.uom,
+          rfqType: rfqType ?? RfqType.PURCHASE,
+          id: item.id // 기존 ID가 있으면 업데이트, 없으면 생성
+        })
+      );
+      
+      // 모든 요청 병렬 처리
+      await Promise.all([...deletePromises, ...upsertPromises]);
+
+      toast.success("RFQ 아이템이 성공적으로 저장되었습니다!");
+      setHasUnsavedChanges(false);
+      onOpenChange(false);
+    } catch (err) {
+      toast.error(`오류가 발생했습니다: ${String(err)}`);
+    } finally {
+      setIsSubmitting(false);
+    }
+  }
+
+  // 단축키 처리 - 편집 가능한 경우에만 단축키 활성화
+  React.useEffect(() => {
+    if (!isEditable) return;
+    
+    const handleKeyDown = (e: KeyboardEvent) => {
+      // Alt+N: 새 항목 추가
+      if (e.altKey && e.key === 'n') {
+        e.preventDefault();
+        handleAddItem();
+      }
+      // Ctrl+S: 저장
+      if ((e.ctrlKey || e.metaKey) && e.key === 's') {
+        e.preventDefault();
+        form.handleSubmit(onSubmit)();
+      }
+      // Esc: 포커스된 팝오버 닫기
+      if (e.key === 'Escape') {
+        document.querySelectorAll('[role="combobox"][aria-expanded="true"]').forEach(
+          (el) => (el as HTMLButtonElement).click()
+        );
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [form, isEditable]);
+
+  return (
+    <>
+      <Dialog open={open} onOpenChange={handleDialogClose}>
+        <DialogContent className="max-w-none w-[1200px]">
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2">
+              {isEditable ? "RFQ 아이템 관리" : "RFQ 아이템 조회"}
+              <Badge variant="outline" className="ml-2">
+                {rfq?.rfqCode || `RFQ #${rfqId}`}
+              </Badge>
+              {rfqType && (
+                <Badge variant={rfqType === RfqType.PURCHASE ? "default" : "secondary"} className="ml-1">
+                  {rfqType === RfqType.PURCHASE ? "구매 RFQ" : "예산 RFQ"}
+                </Badge>
+              )}
+              {rfq?.status && (
+                <Badge 
+                  variant={rfq.status === "DRAFT" ? "outline" : "secondary"} 
+                  className="ml-1"
+                >
+                  {rfq.status}
+                </Badge>
+              )}
+            </DialogTitle>
+            <DialogDescription>
+              {isEditable 
+                ? (rfq?.description || '아이템을 각 행에 하나씩 추가할 수 있습니다.') 
+                : '드래프트 상태가 아닌 RFQ는 아이템을 편집할 수 없습니다.'}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="overflow-x-auto w-full">
+            <Form {...form}>
+              <form onSubmit={form.handleSubmit(onSubmit)}>
+                <div className="space-y-4">
+                  {/* 헤더 행 (라벨) */}
+                  <div className="flex items-center gap-2 border-b pb-2 font-medium text-sm">
+                    <div className="w-[250px] pl-3">아이템</div>
+                    <div className="w-[400px] pl-2">설명</div>
+                    <div className="w-[80px] pl-2 text-center">수량</div>
+                    <div className="w-[80px] pl-2 text-center">단위</div>
+                    {isEditable && <div className="w-[42px]"></div>}
+                  </div>
+
+                  {/* 아이템 행들 */}
+                  <div className="max-h-[50vh] overflow-y-auto pr-1 space-y-3">
+                    {fields.map((field, index) => {
+                      // 현재 row의 itemCode
+                      const codeValue = watchItems[index]?.itemCode || "";
+                      // "이미" 사용된 코드를 모두 구함
+                      const usedCodes = watchItems
+                        .map((it, i) => i === index ? null : it.itemCode)
+                        .filter(Boolean) as string[];
+
+                      // itemsList에서 "현재 선택한 code"만 예외적으로 허용하고,
+                      // 다른 행에서 이미 사용한 code는 제거
+                      const filteredItems = (itemsList || [])
+                        .filter((it) => {
+                          if (!it.code) return false;
+                          if (it.code === codeValue) return true;
+                          return !usedCodes.includes(it.code);
+                        })
+                        .map((it) => ({
+                          code: it.code ?? "",   // fallback
+                          name: it.name,
+                        }));
+
+                      // 선택된 아이템 찾기
+                      const selected = filteredItems.find(it => it.code === codeValue);
+
+                      return (
+                        <div key={field.id} className="flex items-center gap-2 group hover:bg-gray-50 p-1 rounded-md transition-colors">
+                          {/* -- itemCode + Popover(Select) -- */}
+                          {isEditable ? (
+                            <FormField
+                              control={form.control}
+                              name={`items.${index}.itemCode`}
+                              render={({ field }) => {
+                                const [popoverOpen, setPopoverOpen] = React.useState(false);
+                                const selected = filteredItems.find(it => it.code === field.value);
+
+                                return (
+                                  <FormItem className="flex items-center gap-2 w-[250px]">
+                                    <FormControl>
+                                      <Popover open={popoverOpen} onOpenChange={setPopoverOpen}>
+                                        <PopoverTrigger asChild>
+                                          <Button
+                                            // 컴포넌트에 ref 전달
+                                            ref={el => {
+                                              inputRefs.current[index] = el;
+                                            }}
+                                            variant="outline"
+                                            role="combobox"
+                                            aria-expanded={popoverOpen}
+                                            className="w-full justify-between"
+                                            data-error={!!form.formState.errors.items?.[index]?.itemCode}
+                                            data-state={selected ? "filled" : "empty"}
+                                          >
+                                            {selected ? `${selected.code} - ${selected.name}` : "아이템 선택..."}
+                                            <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                                          </Button>
+                                        </PopoverTrigger>
+                                        <PopoverContent className="w-[400px] p-0">
+                                          <Command>
+                                            <CommandInput placeholder="아이템 검색..." className="h-9" autoFocus />
+                                            <CommandList>
+                                              <CommandEmpty>아이템을 찾을 수 없습니다.</CommandEmpty>
+                                              <CommandGroup>
+                                                {filteredItems.map((it) => {
+                                                  const label = `${it.code} - ${it.name}`;
+                                                  return (
+                                                    <CommandItem
+                                                      key={it.code}
+                                                      value={label}
+                                                      onSelect={() => {
+                                                        field.onChange(it.code);
+                                                        setPopoverOpen(false);
+                                                        // 자동으로 다음 필드로 포커스 이동
+                                                        focusField(`input[name="items.${index}.description"]`);
+                                                      }}
+                                                    >
+                                                      {label}
+                                                      <Check
+                                                        className={
+                                                          "ml-auto h-4 w-4" +
+                                                          (it.code === field.value ? " opacity-100" : " opacity-0")
+                                                        }
+                                                      />
+                                                    </CommandItem>
+                                                  );
+                                                })}
+                                              </CommandGroup>
+                                            </CommandList>
+                                          </Command>
+                                        </PopoverContent>
+                                      </Popover>
+                                    </FormControl>
+                                    {form.formState.errors.items?.[index]?.itemCode && (
+                                      <AlertCircle className="h-4 w-4 text-destructive" />
+                                    )}
+                                  </FormItem>
+                                );
+                              }}
+                            />
+                          ) : (
+                            <div className="flex items-center w-[250px] pl-3">
+                              {selected ? `${selected.code} - ${selected.name}` : codeValue}
+                            </div>
+                          )}
+
+                          {/* ID 필드 추가 (숨김) */}
+                          <FormField
+                            control={form.control}
+                            name={`items.${index}.id`}
+                            render={({ field }) => (
+                              <input type="hidden" {...field} />
+                            )}
+                          />
+
+                          {/* description */}
+                          {isEditable ? (
+                            <FormField
+                              control={form.control}
+                              name={`items.${index}.description`}
+                              render={({ field }) => (
+                                <FormItem className="w-[400px]">
+                                  <FormControl>
+                                    <Input 
+                                      className="w-full" 
+                                      placeholder="아이템 상세 정보" 
+                                      {...field}
+                                      onKeyDown={(e) => {
+                                        if (e.key === 'Enter') {
+                                          e.preventDefault();
+                                          focusField(`input[name="items.${index}.quantity"]`);
+                                        }
+                                      }}
+                                    />
+                                  </FormControl>
+                                  <FormMessage />
+                                </FormItem>
+                              )}
+                            />
+                          ) : (
+                            <div className="w-[400px] pl-2">
+                              {watchItems[index]?.description || ""}
+                            </div>
+                          )}
+
+                          {/* quantity */}
+                          {isEditable ? (
+                            <FormField
+                              control={form.control}
+                              name={`items.${index}.quantity`}
+                              render={({ field }) => (
+                                <FormItem className="w-[80px] relative">
+                                  <FormControl>
+                                    <Input
+                                      type="number"
+                                      className="w-full text-center"
+                                      min="1"
+                                      {...field}
+                                      // 값 변경 핸들러 개선
+                                      onChange={(e) => {
+                                        const value = e.target.value === '' ? 1 : parseInt(e.target.value, 10);
+                                        field.onChange(isNaN(value) ? 1 : value);
+                                      }}
+                                      // 최소값 보장 (빈 문자열 방지)
+                                      onBlur={(e) => {
+                                        if (e.target.value === '' || parseInt(e.target.value, 10) < 1) {
+                                          field.onChange(1);
+                                        }
+                                      }}
+                                      onKeyDown={(e) => {
+                                        if (e.key === 'Enter') {
+                                          e.preventDefault();
+                                          focusField(`input[name="items.${index}.uom"]`);
+                                        }
+                                      }}
+                                    />
+                                  </FormControl>
+                                  {form.formState.errors.items?.[index]?.quantity && (
+                                    <AlertCircle className="h-4 w-4 text-destructive absolute right-2 top-2" />
+                                  )}
+                                </FormItem>
+                              )}
+                            />
+                          ) : (
+                            <div className="w-[80px] text-center">
+                              {watchItems[index]?.quantity}
+                            </div>
+                          )}
+
+                          {/* uom */}
+                          {isEditable ? (
+                            <FormField
+                              control={form.control}
+                              name={`items.${index}.uom`}
+                              render={({ field }) => (
+                                <FormItem className="w-[80px]">
+                                  <FormControl>
+                                    <Input
+                                      placeholder="each"
+                                      className="w-full text-center"
+                                      {...field}
+                                      onKeyDown={(e) => {
+                                        if (e.key === 'Enter') {
+                                          e.preventDefault();
+                                          // 마지막 행이면 새로운 행 추가
+                                          if (index === fields.length - 1) {
+                                            handleAddItem();
+                                          } else {
+                                            // 아니면 다음 행의 아이템 선택으로 이동
+                                            const button = inputRefs.current[index + 1];
+                                            if (button) {
+                                              setTimeout(() => button.click(), 10);
+                                            }
+                                          }
+                                        }
+                                      }}
+                                    />
+                                  </FormControl>
+                                  <FormMessage />
+                                </FormItem>
+                              )}
+                            />
+                          ) : (
+                            <div className="w-[80px] text-center">
+                              {watchItems[index]?.uom || "each"}
+                            </div>
+                          )}
+
+                          {/* remove row - 편집 모드에서만 표시 */}
+                          {isEditable && (
+                            <TooltipProvider>
+                              <Tooltip>
+                                <TooltipTrigger asChild>
+                                  <Button
+                                    type="button"
+                                    variant="ghost"
+                                    size="icon"
+                                    onClick={() => handleRemoveItem(index)}
+                                    className="group-hover:opacity-100 transition-opacity"
+                                    aria-label="아이템 삭제"
+                                  >
+                                    <Trash2 className="h-4 w-4 text-destructive" />
+                                  </Button>
+                                </TooltipTrigger>
+                                <TooltipContent>
+                                  <p>아이템 삭제</p>
+                                </TooltipContent>
+                              </Tooltip>
+                            </TooltipProvider>
+                          )}
+                        </div>
+                      );
+                    })}
+                  </div>
+
+                  <div className="flex justify-between items-center pt-2 border-t">
+                    <div className="flex items-center gap-2">
+                      {isEditable ? (
+                        <>
+                          <TooltipProvider>
+                            <Tooltip>
+                              <TooltipTrigger asChild>
+                                <Button type="button" variant="outline" onClick={handleAddItem} className="gap-1">
+                                  <Plus className="h-4 w-4" />
+                                  아이템 추가
+                                </Button>
+                              </TooltipTrigger>
+                              <TooltipContent side="bottom">
+                                <p>단축키: Alt+N</p>
+                              </TooltipContent>
+                            </Tooltip>
+                          </TooltipProvider>
+                          <span className="text-sm text-muted-foreground">
+                            {fields.length}개 아이템
+                          </span>
+                          {deletedItemIds.length > 0 && (
+                            <span className="text-sm text-destructive">
+                              ({deletedItemIds.length}개 아이템 삭제 예정)
+                            </span>
+                          )}
+                        </>
+                      ) : (
+                        <span className="text-sm text-muted-foreground">
+                          {fields.length}개 아이템
+                        </span>
+                      )}
+                    </div>
+                    
+                    {isEditable && (
+                      <div className="text-xs text-muted-foreground">
+                        <span className="inline-flex items-center gap-1 mr-2">
+                          <kbd className="px-1 py-0.5 bg-gray-100 rounded text-xs">Tab</kbd>
+                          <span>필드 간 이동</span>
+                        </span>
+                        <span className="inline-flex items-center gap-1">
+                          <kbd className="px-1 py-0.5 bg-gray-100 rounded text-xs">Enter</kbd>
+                          <span>다음 필드로 이동</span>
+                        </span>
+                      </div>
+                    )}
+                  </div>
+                </div>
+
+                <DialogFooter className="mt-6 gap-2">
+                  {isEditable ? (
+                    <>
+                      <TooltipProvider>
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <Button type="button" variant="outline" onClick={() => handleDialogClose(false)}>
+                              <X className="mr-2 h-4 w-4" />
+                              취소
+                            </Button>
+                          </TooltipTrigger>
+                          <TooltipContent>변경사항을 저장하지 않고 나가기</TooltipContent>
+                        </Tooltip>
+                      </TooltipProvider>
+                      
+                      <TooltipProvider>
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <Button 
+                              type="submit" 
+                              disabled={isSubmitting || (!form.formState.isDirty && deletedItemIds.length === 0) || !form.formState.isValid}
+                            >
+                              {isSubmitting ? (
+                                <>처리 중...</>
+                              ) : (
+                                <>
+                                  <Save className="mr-2 h-4 w-4" />
+                                  저장
+                                </>
+                              )}
+                            </Button>
+                          </TooltipTrigger>
+                          <TooltipContent>
+                            <p>단축키: Ctrl+S</p>
+                          </TooltipContent>
+                        </Tooltip>
+                      </TooltipProvider>
+                    </>
+                  ) : (
+                    <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
+                      <X className="mr-2 h-4 w-4" />
+                      닫기
+                    </Button>
+                  )}
+                </DialogFooter>
+              </form>
+            </Form>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      {/* 저장하지 않고 나가기 확인 다이얼로그 - 편집 모드에서만 활성화 */}
+      {isEditable && (
+        <AlertDialog open={isExitDialogOpen} onOpenChange={setIsExitDialogOpen}>
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogTitle>저장되지 않은 변경사항</AlertDialogTitle>
+              <AlertDialogDescription>
+                저장되지 않은 변경사항이 있습니다. 그래도 나가시겠습니까?
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogCancel>취소</AlertDialogCancel>
+              <AlertDialogAction onClick={() => {
+                setIsExitDialogOpen(false);
+                onOpenChange(false);
+              }}>
+                저장하지 않고 나가기
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
+      )}
+    </>
+  );
+}
\ No newline at end of file
diff --git a/lib/rfqs/table/add-rfq-dialog.tsx b/lib/rfqs/table/add-rfq-dialog.tsx
new file mode 100644
index 00000000..1d824bc0
--- /dev/null
+++ b/lib/rfqs/table/add-rfq-dialog.tsx
@@ -0,0 +1,349 @@
+"use client"
+
+import * as React from "react"
+import { useForm } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Check, ChevronsUpDown } from "lucide-react"
+import { toast } from "sonner"
+
+import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { Popover, PopoverTrigger, PopoverContent } from "@/components/ui/popover"
+import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from "@/components/ui/command"
+
+import { useSession } from "next-auth/react"
+import { createRfqSchema, type CreateRfqSchema, RfqType } from "../validations"
+import { createRfq, getBudgetaryRfqs } from "../service"
+import { ProjectSelector } from "@/components/ProjectSelector"
+import { type Project } from "../service"
+import { cn } from "@/lib/utils"
+import { BudgetaryRfqSelector } from "./BudgetaryRfqSelector"
+import { type BudgetaryRfq as ServiceBudgetaryRfq } from "../service";
+
+// 부모 RFQ 정보 타입 정의
+interface BudgetaryRfq {
+  id: number;
+  rfqCode: string;
+  description: string | null;
+}
+
+interface AddRfqDialogProps {
+  rfqType?: RfqType;
+}
+
+export function AddRfqDialog({ rfqType = RfqType.PURCHASE }: AddRfqDialogProps) {
+  const [open, setOpen] = React.useState(false)
+  const { data: session, status } = useSession()
+  const [budgetaryRfqs, setBudgetaryRfqs] = React.useState<BudgetaryRfq[]>([])
+  const [isLoadingBudgetary, setIsLoadingBudgetary] = React.useState(false)
+  const [budgetarySearchOpen, setBudgetarySearchOpen] = React.useState(false)
+  const [budgetarySearchTerm, setBudgetarySearchTerm] = React.useState("")
+  const [selectedBudgetaryRfq, setSelectedBudgetaryRfq] = React.useState<BudgetaryRfq | null>(null)
+
+  // Get the user ID safely, ensuring it's a valid number
+  const userId = React.useMemo(() => {
+    const id = session?.user?.id ? Number(session.user.id) : null;
+    
+    // Debug logging - remove in production
+    console.log("Session status:", status);
+    console.log("Session data:", session);
+    console.log("User ID:", id);
+    
+    return id;
+  }, [session, status]);
+
+  // RfqType에 따른 타이틀 생성
+  const getTitle = () => {
+    return rfqType === RfqType.PURCHASE
+      ? "Purchase RFQ"
+      : "Budgetary RFQ";
+  };
+
+  // RHF + Zod
+  const form = useForm<CreateRfqSchema>({
+    resolver: zodResolver(createRfqSchema),
+    defaultValues: {
+      rfqCode: "",
+      description: "",
+      projectId: undefined,
+      parentRfqId: undefined,
+      dueDate: new Date(),
+      status: "DRAFT",
+      rfqType: rfqType,
+      // Don't set createdBy yet - we'll set it when the form is submitted
+      createdBy: undefined,
+    },
+  });
+
+  // Update form values when session loads
+  React.useEffect(() => {
+    if (status === "authenticated" && userId) {
+      form.setValue("createdBy", userId);
+    }
+  }, [status, userId, form]);
+
+  // Budgetary RFQ 목록 로드 (Purchase RFQ 생성 시만)
+  React.useEffect(() => {
+    if (rfqType === RfqType.PURCHASE && open) {
+      const loadBudgetaryRfqs = async () => {
+        setIsLoadingBudgetary(true);
+        try {
+          const result = await getBudgetaryRfqs();
+          if ('rfqs' in result) {
+            setBudgetaryRfqs(result.rfqs as unknown as BudgetaryRfq[]);
+          } else if ('error' in result) {
+            console.error("Budgetary RFQs 로드 오류:", result.error);
+          }
+        } catch (error) {
+          console.error("Budgetary RFQs 로드 오류:", error);
+        } finally {
+          setIsLoadingBudgetary(false);
+        }
+      };
+
+      loadBudgetaryRfqs();
+    }
+  }, [rfqType, open]);
+
+  // 검색어로 필터링된 Budgetary RFQ 목록
+  const filteredBudgetaryRfqs = React.useMemo(() => {
+    if (!budgetarySearchTerm.trim()) return budgetaryRfqs;
+
+    const lowerSearch = budgetarySearchTerm.toLowerCase();
+    return budgetaryRfqs.filter(
+      rfq =>
+        rfq.rfqCode.toLowerCase().includes(lowerSearch) ||
+        (rfq.description && rfq.description.toLowerCase().includes(lowerSearch))
+    );
+  }, [budgetaryRfqs, budgetarySearchTerm]);
+
+  // 프로젝트 선택 처리
+  const handleProjectSelect = (project: Project) => {
+    form.setValue("projectId", project.id);
+  };
+
+  // Budgetary RFQ 선택 처리
+  const handleBudgetaryRfqSelect = (rfq: BudgetaryRfq) => {
+    setSelectedBudgetaryRfq(rfq);
+    form.setValue("parentRfqId", rfq.id);
+    setBudgetarySearchOpen(false);
+  };
+
+  async function onSubmit(data: CreateRfqSchema) {
+    // Check if user is authenticated before submitting
+    if (status !== "authenticated" || !userId) {
+      toast.error("사용자 인증이 필요합니다. 다시 로그인해주세요.");
+      return;
+    }
+
+    // Make sure createdBy is set with the current user ID
+    const submitData = {
+      ...data,
+      createdBy: userId
+    };
+
+    console.log("Submitting form data:", submitData);
+
+    const result = await createRfq(submitData);
+    if (result.error) {
+      toast.error(`에러: ${result.error}`);
+      return;
+    }
+    
+    toast.success("RFQ가 성공적으로 생성되었습니다.");
+    form.reset();
+    setSelectedBudgetaryRfq(null);
+    setOpen(false);
+  }
+
+  function handleDialogOpenChange(nextOpen: boolean) {
+    if (!nextOpen) {
+      form.reset();
+      setSelectedBudgetaryRfq(null);
+    }
+    setOpen(nextOpen);
+  }
+
+  // Return a message or disabled state if user is not authenticated
+  if (status === "loading") {
+    return <Button variant="outline" size="sm" disabled>Loading...</Button>;
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={handleDialogOpenChange}>
+      {/* 모달을 열기 위한 버튼 */}
+      <DialogTrigger asChild>
+        <Button variant="default" size="sm">
+          Add {getTitle()}
+        </Button>
+      </DialogTrigger>
+
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Create New {getTitle()}</DialogTitle>
+          <DialogDescription>
+            새 {getTitle()} 정보를 입력하고 <b>Create</b> 버튼을 누르세요.
+          </DialogDescription>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)}>
+            <div className="space-y-4 py-4">
+              {/* rfqType - hidden field */}
+              <FormField
+                control={form.control}
+                name="rfqType"
+                render={({ field }) => (
+                  <input type="hidden" {...field} />
+                )}
+              />
+
+              {/* Project Selector */}
+              <FormField
+                control={form.control}
+                name="projectId"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Project</FormLabel>
+                    <FormControl>
+                      <ProjectSelector
+                        selectedProjectId={field.value}
+                        onProjectSelect={handleProjectSelect}
+                        placeholder="프로젝트 선택..."
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              {/* Budgetary RFQ Selector - 구매용 RFQ 생성 시에만 표시 */}
+              {rfqType === RfqType.PURCHASE && (
+                <FormField
+                  control={form.control}
+                  name="parentRfqId"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Budgetary RFQ (Optional)</FormLabel>
+                      <FormControl>
+                        <BudgetaryRfqSelector
+                          selectedRfqId={field.value as number | undefined}
+                          onRfqSelect={(rfq) => {
+                            setSelectedBudgetaryRfq(rfq as any);
+                            form.setValue("parentRfqId", rfq?.id);
+                          }}
+                          placeholder="Budgetary RFQ 선택..."
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              )}
+
+              {/* rfqCode */}
+              <FormField
+                control={form.control}
+                name="rfqCode"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>RFQ Code</FormLabel>
+                    <FormControl>
+                      <Input placeholder="e.g. RFQ-2025-001" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              {/* description */}
+              <FormField
+                control={form.control}
+                name="description"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>RFQ Description</FormLabel>
+                    <FormControl>
+                      <Input placeholder="e.g. 설명을 입력하세요" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              {/* dueDate */}
+              <FormField
+                control={form.control}
+                name="dueDate"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Due Date</FormLabel>
+                    <FormControl>
+                      <Input
+                        type="date"
+                        value={field.value ? field.value.toISOString().slice(0, 10) : ""}
+                        onChange={(e) => {
+                          const val = e.target.value
+                          if (val) {
+                            field.onChange(new Date(val + "T00:00:00"))
+                          }
+                        }}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              {/* status (Read-only) */}
+              <FormField
+                control={form.control}
+                name="status"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Status</FormLabel>
+                    <FormControl>
+                      <Input
+                        disabled
+                        className="capitalize"
+                        {...field}
+                        onChange={() => {}} // Prevent changes
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            <DialogFooter>
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => setOpen(false)}
+              >
+                Cancel
+              </Button>
+              <Button 
+                type="submit" 
+                disabled={form.formState.isSubmitting || status !== "authenticated"}
+              >
+                Create
+              </Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  )
+}
\ No newline at end of file
diff --git a/lib/rfqs/table/attachment-rfq-sheet.tsx b/lib/rfqs/table/attachment-rfq-sheet.tsx
new file mode 100644
index 00000000..57a170e1
--- /dev/null
+++ b/lib/rfqs/table/attachment-rfq-sheet.tsx
@@ -0,0 +1,430 @@
+"use client"
+
+import * as React from "react"
+import { z } from "zod"
+import { useForm, useFieldArray } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetDescription,
+  SheetFooter,
+  SheetClose,
+} from "@/components/ui/sheet"
+import { Button } from "@/components/ui/button"
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  FormDescription
+} from "@/components/ui/form"
+import { Trash2, Plus, Loader, Download, X, Eye, AlertCircle } from "lucide-react"
+import { useToast } from "@/hooks/use-toast"
+import { Badge } from "@/components/ui/badge"
+
+import {
+  Dropzone,
+  DropzoneDescription,
+  DropzoneInput,
+  DropzoneTitle,
+  DropzoneUploadIcon,
+  DropzoneZone,
+} from "@/components/ui/dropzone"
+import {
+  FileList,
+  FileListAction,
+  FileListDescription,
+  FileListHeader,
+  FileListIcon,
+  FileListInfo,
+  FileListItem,
+  FileListName,
+  FileListSize,
+} from "@/components/ui/file-list"
+
+import prettyBytes from "pretty-bytes"
+import { processRfqAttachments } from "../service"
+import { format } from "path"
+import { formatDate } from "@/lib/utils"
+import { RfqType } from "../validations"
+import { RfqWithItemCount } from "@/db/schema/rfq"
+
+const MAX_FILE_SIZE = 6e8 // 600MB
+
+/** 기존 첨부 파일 정보 */
+interface ExistingAttachment {
+  id: number
+  fileName: string
+  filePath: string
+  createdAt?: Date // or Date
+  vendorId?: number | null
+  size?: number
+}
+
+/** 새로 업로드할 파일 */
+const newUploadSchema = z.object({
+  fileObj: z.any().optional(), // 실제 File
+})
+
+/** 기존 첨부 (react-hook-form에서 관리) */
+const existingAttachSchema = z.object({
+  id: z.number(),
+  fileName: z.string(),
+  filePath: z.string(),
+  vendorId: z.number().nullable().optional(),
+  createdAt: z.custom<Date>().optional(),    // or use z.any().optional()
+  size: z.number().optional(),
+})
+
+/** RHF 폼 전체 스키마 */
+const attachmentsFormSchema = z.object({
+  rfqId: z.number().int(),
+  existing: z.array(existingAttachSchema),
+  newUploads: z.array(newUploadSchema),
+})
+
+type AttachmentsFormValues = z.infer<typeof attachmentsFormSchema>
+
+interface RfqAttachmentsSheetProps
+  extends React.ComponentPropsWithRef<typeof Sheet> {
+  defaultAttachments?: ExistingAttachment[]
+  rfqType?: RfqType
+  rfq: RfqWithItemCount | null
+  /** 업로드/삭제 후 상위 테이블에 itemCount 등을 업데이트하기 위한 콜백 */
+  onAttachmentsUpdated?: (rfqId: number, newItemCount: number) => void
+}
+
+/**
+ * RfqAttachmentsSheet:
+ * - 기존 첨부 목록 (다운로드 + 삭제)
+ * - 새 파일 Dropzone
+ * - Save 시 processRfqAttachments(server action)
+ */
+export function RfqAttachmentsSheet({
+  defaultAttachments = [],
+  onAttachmentsUpdated,
+  rfq,
+  rfqType,
+  ...props
+}: RfqAttachmentsSheetProps) {
+  const { toast } = useToast()
+  const [isPending, startUpdate] = React.useTransition()
+  const rfqId = rfq?.rfqId ?? 0;
+  
+  // 편집 가능 여부 확인 - DRAFT 상태일 때만 편집 가능
+  const isEditable = rfq?.status === "DRAFT";
+
+  // React Hook Form
+  const form = useForm<AttachmentsFormValues>({
+    resolver: zodResolver(attachmentsFormSchema),
+    defaultValues: {
+      rfqId,
+      existing: [],
+      newUploads: [],
+    },
+  })
+
+  const { reset, control, handleSubmit } = form
+
+  // defaultAttachments가 바뀔 때마다, RHF 상태를 reset
+  React.useEffect(() => {
+    reset({
+      rfqId,
+      existing: defaultAttachments.map((att) => ({
+        ...att,
+        vendorId: att.vendorId ?? null,
+        size: att.size ?? undefined,
+      })),
+      newUploads: [],
+    })
+  }, [rfqId, defaultAttachments, reset])
+
+  // Field Arrays
+  const {
+    fields: existingFields,
+    remove: removeExisting,
+  } = useFieldArray({ control, name: "existing" })
+
+  const {
+    fields: newUploadFields,
+    append: appendNewUpload,
+    remove: removeNewUpload,
+  } = useFieldArray({ control, name: "newUploads" })
+
+  // 기존 첨부 항목 중 삭제된 것 찾기
+  function findRemovedExistingIds(data: AttachmentsFormValues): number[] {
+    const finalIds = data.existing.map((att) => att.id)
+    const originalIds = defaultAttachments.map((att) => att.id)
+    return originalIds.filter((id) => !finalIds.includes(id))
+  }
+
+  async function onSubmit(data: AttachmentsFormValues) {
+    // 편집 불가능한 상태에서는 제출 방지
+    if (!isEditable) return;
+    
+    startUpdate(async () => {
+      try {
+        const removedExistingIds = findRemovedExistingIds(data)
+        const newFiles = data.newUploads
+          .map((it) => it.fileObj)
+          .filter((f): f is File => !!f)
+
+        // 서버 액션
+        const res = await processRfqAttachments({
+          rfqId,
+          removedExistingIds,
+          newFiles,
+          vendorId: null, // vendor ID if needed 
+          rfqType
+        })
+
+        if (!res.ok) throw new Error(res.error ?? "Unknown error")
+
+        const newCount = res.updatedItemCount ?? 0
+
+        toast({
+          variant: "default",
+          title: "Success",
+          description: "File(s) updated",
+        })
+
+        // 상위 테이블 등에 itemCount 업데이트
+        onAttachmentsUpdated?.(rfqId, newCount)
+
+        // 모달 닫기
+        props.onOpenChange?.(false)
+      } catch (err) {
+        toast({
+          variant: "destructive",
+          title: "Error",
+          description: String(err),
+        })
+      }
+    })
+  }
+
+  /** 기존 첨부 - X 버튼 */
+  function handleRemoveExisting(idx: number) {
+    // 편집 불가능한 상태에서는 삭제 방지
+    if (!isEditable) return;
+    removeExisting(idx)
+  }
+
+  /** 드롭존에서 파일 받기 */
+  function handleDropAccepted(acceptedFiles: File[]) {
+    // 편집 불가능한 상태에서는 파일 추가 방지
+    if (!isEditable) return;
+    const mapped = acceptedFiles.map((file) => ({ fileObj: file }))
+    appendNewUpload(mapped)
+  }
+
+  /** 드롭존에서 파일 거부(에러) */
+  function handleDropRejected(fileRejections: any[]) {
+    // 편집 불가능한 상태에서는 무시
+    if (!isEditable) return;
+    
+    fileRejections.forEach((rej) => {
+      toast({
+        variant: "destructive",
+        title: "File Error",
+        description: rej.file.name + " not accepted",
+      })
+    })
+  }
+
+  return (
+    <Sheet {...props}>
+      <SheetContent className="flex flex-col gap-6 sm:max-w-sm">
+        <SheetHeader>
+          <SheetTitle className="flex items-center gap-2">
+            {isEditable ? "Manage Attachments" : "View Attachments"}
+            {rfq?.status && (
+              <Badge 
+                variant={rfq.status === "DRAFT" ? "outline" : "secondary"} 
+                className="ml-1"
+              >
+                {rfq.status}
+              </Badge>
+            )}
+          </SheetTitle>
+          <SheetDescription>
+            {`RFQ ${rfq?.rfqCode} - `}
+            {isEditable ? '파일 첨부/삭제' : '첨부 파일 보기'}
+            {!isEditable && (
+              <div className="mt-1 text-xs flex items-center gap-1 text-amber-600">
+                <AlertCircle className="h-3 w-3" />
+                <span>드래프트 상태가 아닌 RFQ는 첨부파일을 수정할 수 없습니다.</span>
+              </div>
+            )}
+          </SheetDescription>
+        </SheetHeader>
+
+        <Form {...form}>
+          <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-4">
+            {/* 1) 기존 첨부 목록 */}
+            <div className="space-y-2">
+              <p className="font-semibold text-sm">Existing Attachments</p>
+              {existingFields.length === 0 && (
+                <p className="text-sm text-muted-foreground">No existing attachments</p>
+              )}
+              {existingFields.map((field, index) => {
+                const vendorLabel = field.vendorId ? "(Vendor)" : "(Internal)"
+                return (
+                  <div
+                    key={field.id}
+                    className="flex items-center justify-between rounded border p-2"
+                  >
+                    <div className="flex flex-col text-sm">
+                      <span className="font-medium">
+                        {field.fileName} {vendorLabel}
+                      </span>
+                      {field.size && (
+                        <span className="text-xs text-muted-foreground">
+                          {Math.round(field.size / 1024)} KB
+                        </span>
+                      )}
+                      {field.createdAt && (
+                        <span className="text-xs text-muted-foreground">
+                          Created at {formatDate(field.createdAt)}
+                        </span>
+                      )}
+                    </div>
+                    <div className="flex items-center gap-2">
+                      {/* 1) Download button (if filePath) */}
+                      {field.filePath && (
+                        <a
+                          href={`/api/rfq-download?path=${encodeURIComponent(field.filePath)}`}
+                          download={field.fileName}
+                          className="text-sm"
+                        >
+                          <Button variant="ghost" size="icon" type="button">
+                            <Download className="h-4 w-4" />
+                          </Button>
+                        </a>
+                      )}
+                      {/* 2) Remove button - 편집 가능할 때만 표시 */}
+                      {isEditable && (
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="icon"
+                          onClick={() => handleRemoveExisting(index)}
+                        >
+                          <X className="h-4 w-4" />
+                        </Button>
+                      )}
+                    </div>
+                  </div>
+                )
+              })}
+            </div>
+
+            {/* 2) Dropzone for new uploads - 편집 가능할 때만 표시 */}
+            {isEditable ? (
+              <>
+                <Dropzone
+                  maxSize={MAX_FILE_SIZE}
+                  onDropAccepted={handleDropAccepted}
+                  onDropRejected={handleDropRejected}
+                >
+                  {({ maxSize }) => (
+                    <FormField
+                      control={control}
+                      name="newUploads" // not actually used for storing each file detail
+                      render={() => (
+                        <FormItem>
+                          <FormLabel>Drop Files Here</FormLabel>
+                          <DropzoneZone className="flex justify-center">
+                            <FormControl>
+                              <DropzoneInput />
+                            </FormControl>
+                            <div className="flex items-center gap-6">
+                              <DropzoneUploadIcon />
+                              <div className="grid gap-0.5">
+                                <DropzoneTitle>Drop to upload</DropzoneTitle>
+                                <DropzoneDescription>
+                                  Max size: {maxSize ? prettyBytes(maxSize) : "??? MB"}
+                                </DropzoneDescription>
+                              </div>
+                            </div>
+                          </DropzoneZone>
+                          <FormDescription>Alternatively, click browse.</FormDescription>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                  )}
+                </Dropzone>
+
+                {/* newUpload fields -> FileList */}
+                {newUploadFields.length > 0 && (
+                  <div className="grid gap-4">
+                    <h6 className="font-semibold leading-none tracking-tight">
+                      {`Files (${newUploadFields.length})`}
+                    </h6>
+                    <FileList>
+                      {newUploadFields.map((field, idx) => {
+                        const fileObj = form.getValues(`newUploads.${idx}.fileObj`)
+                        if (!fileObj) return null
+
+                        const fileName = fileObj.name
+                        const fileSize = fileObj.size
+                        return (
+                          <FileListItem key={field.id}>
+                            <FileListHeader>
+                              <FileListIcon />
+                              <FileListInfo>
+                                <FileListName>{fileName}</FileListName>
+                                <FileListDescription>
+                                  {`${prettyBytes(fileSize)}`}
+                                </FileListDescription>
+                              </FileListInfo>
+                              <FileListAction onClick={() => removeNewUpload(idx)}>
+                                <X />
+                                <span className="sr-only">Remove</span>
+                              </FileListAction>
+                            </FileListHeader>
+                          </FileListItem>
+                        )
+                      })}
+                    </FileList>
+                  </div>
+                )}
+              </>
+            ) : (
+              <div className="p-3 bg-muted rounded-md flex items-center justify-center">
+                <div className="text-center text-sm text-muted-foreground">
+                  <Eye className="h-4 w-4 mx-auto mb-2" />
+                  <p>보기 모드에서는 파일 첨부를 할 수 없습니다.</p>
+                </div>
+              </div>
+            )}
+
+            <SheetFooter className="gap-2 pt-2 sm:space-x-0">
+              <SheetClose asChild>
+                <Button type="button" variant="outline">
+                  {isEditable ? "Cancel" : "Close"}
+                </Button>
+              </SheetClose>
+              {isEditable && (
+                <Button 
+                  type="submit" 
+                  disabled={isPending || (form.getValues().newUploads.length === 0 && defaultAttachments.length === form.getValues().existing.length)}
+                >
+                  {isPending && <Loader className="mr-2 h-4 w-4 animate-spin" />}
+                  Save
+                </Button>
+              )}
+            </SheetFooter>
+          </form>
+        </Form>
+      </SheetContent>
+    </Sheet>
+  )
+}
\ No newline at end of file
diff --git a/lib/rfqs/table/delete-rfqs-dialog.tsx b/lib/rfqs/table/delete-rfqs-dialog.tsx
new file mode 100644
index 00000000..09596bc7
--- /dev/null
+++ b/lib/rfqs/table/delete-rfqs-dialog.tsx
@@ -0,0 +1,149 @@
+"use client"
+
+import * as React from "react"
+import { type Row } from "@tanstack/react-table"
+import { Loader, Trash } from "lucide-react"
+import { toast } from "sonner"
+
+import { useMediaQuery } from "@/hooks/use-media-query"
+import { Button } from "@/components/ui/button"
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/components/ui/drawer"
+
+import { Rfq, RfqWithItemCount } from "@/db/schema/rfq"
+import { removeRfqs } from "../service"
+
+interface DeleteRfqsDialogProps
+  extends React.ComponentPropsWithoutRef<typeof Dialog> {
+  rfqs: Row<RfqWithItemCount>["original"][]
+  showTrigger?: boolean
+  onSuccess?: () => void
+}
+
+export function DeleteRfqsDialog({
+  rfqs,
+  showTrigger = true,
+  onSuccess,
+  ...props
+}: DeleteRfqsDialogProps) {
+  const [isDeletePending, startDeleteTransition] = React.useTransition()
+  const isDesktop = useMediaQuery("(min-width: 640px)")
+
+  function onDelete() {
+    startDeleteTransition(async () => {
+      const { error } = await removeRfqs({
+        ids: rfqs.map((rfq) => rfq.rfqId),
+      })
+
+      if (error) {
+        toast.error(error)
+        return
+      }
+
+      props.onOpenChange?.(false)
+      toast.success("Tasks deleted")
+      onSuccess?.()
+    })
+  }
+
+  if (isDesktop) {
+    return (
+      <Dialog {...props}>
+        {showTrigger ? (
+          <DialogTrigger asChild>
+            <Button variant="outline" size="sm">
+              <Trash className="mr-2 size-4" aria-hidden="true" />
+              Delete ({rfqs.length})
+            </Button>
+          </DialogTrigger>
+        ) : null}
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Are you absolutely sure?</DialogTitle>
+            <DialogDescription>
+              This action cannot be undone. This will permanently delete your{" "}
+              <span className="font-medium">{rfqs.length}</span>
+              {rfqs.length === 1 ? " task" : " rfqs"} from our servers.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter className="gap-2 sm:space-x-0">
+            <DialogClose asChild>
+              <Button variant="outline">Cancel</Button>
+            </DialogClose>
+            <Button
+              aria-label="Delete selected rows"
+              variant="destructive"
+              onClick={onDelete}
+              disabled={isDeletePending}
+            >
+              {isDeletePending && (
+                <Loader
+                  className="mr-2 size-4 animate-spin"
+                  aria-hidden="true"
+                />
+              )}
+              Delete
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    )
+  }
+
+  return (
+    <Drawer {...props}>
+      {showTrigger ? (
+        <DrawerTrigger asChild>
+          <Button variant="outline" size="sm">
+            <Trash className="mr-2 size-4" aria-hidden="true" />
+            Delete ({rfqs.length})
+          </Button>
+        </DrawerTrigger>
+      ) : null}
+      <DrawerContent>
+        <DrawerHeader>
+          <DrawerTitle>Are you absolutely sure?</DrawerTitle>
+          <DrawerDescription>
+            This action cannot be undone. This will permanently delete your{" "}
+            <span className="font-medium">{rfqs.length}</span>
+            {rfqs.length === 1 ? " task" : " rfqs"} from our servers.
+          </DrawerDescription>
+        </DrawerHeader>
+        <DrawerFooter className="gap-2 sm:space-x-0">
+          <DrawerClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </DrawerClose>
+          <Button
+            aria-label="Delete selected rows"
+            variant="destructive"
+            onClick={onDelete}
+            disabled={isDeletePending}
+          >
+            {isDeletePending && (
+              <Loader className="mr-2 size-4 animate-spin" aria-hidden="true" />
+            )}
+            Delete
+          </Button>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  )
+}
diff --git a/lib/rfqs/table/feature-flags-provider.tsx b/lib/rfqs/table/feature-flags-provider.tsx
new file mode 100644
index 00000000..81131894
--- /dev/null
+++ b/lib/rfqs/table/feature-flags-provider.tsx
@@ -0,0 +1,108 @@
+"use client"
+
+import * as React from "react"
+import { useQueryState } from "nuqs"
+
+import { dataTableConfig, type DataTableConfig } from "@/config/data-table"
+import { cn } from "@/lib/utils"
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+
+type FeatureFlagValue = DataTableConfig["featureFlags"][number]["value"]
+
+interface FeatureFlagsContextProps {
+  featureFlags: FeatureFlagValue[]
+  setFeatureFlags: (value: FeatureFlagValue[]) => void
+}
+
+const FeatureFlagsContext = React.createContext<FeatureFlagsContextProps>({
+  featureFlags: [],
+  setFeatureFlags: () => {},
+})
+
+export function useFeatureFlags() {
+  const context = React.useContext(FeatureFlagsContext)
+  if (!context) {
+    throw new Error(
+      "useFeatureFlags must be used within a FeatureFlagsProvider"
+    )
+  }
+  return context
+}
+
+interface FeatureFlagsProviderProps {
+  children: React.ReactNode
+}
+
+export function FeatureFlagsProvider({ children }: FeatureFlagsProviderProps) {
+  const [featureFlags, setFeatureFlags] = useQueryState<FeatureFlagValue[]>(
+    "flags",
+    {
+      defaultValue: [],
+      parse: (value) => value.split(",") as FeatureFlagValue[],
+      serialize: (value) => value.join(","),
+      eq: (a, b) =>
+        a.length === b.length && a.every((value, index) => value === b[index]),
+      clearOnDefault: true,
+      shallow: false,
+    }
+  )
+
+  return (
+    <FeatureFlagsContext.Provider
+      value={{
+        featureFlags,
+        setFeatureFlags: (value) => void setFeatureFlags(value),
+      }}
+    >
+      <div className="w-full overflow-x-auto">
+        <ToggleGroup
+          type="multiple"
+          variant="outline"
+          size="sm"
+          value={featureFlags}
+          onValueChange={(value: FeatureFlagValue[]) => setFeatureFlags(value)}
+          className="w-fit gap-0"
+        >
+          {dataTableConfig.featureFlags.map((flag, index) => (
+            <Tooltip key={flag.value}>
+              <ToggleGroupItem
+                value={flag.value}
+                className={cn(
+                  "gap-2 whitespace-nowrap rounded-none px-3 text-xs data-[state=on]:bg-accent/70 data-[state=on]:hover:bg-accent/90",
+                  {
+                    "rounded-l-sm border-r-0": index === 0,
+                    "rounded-r-sm":
+                      index === dataTableConfig.featureFlags.length - 1,
+                  }
+                )}
+                asChild
+              >
+                <TooltipTrigger>
+                  <flag.icon className="size-3.5 shrink-0" aria-hidden="true" />
+                  {flag.label}
+                </TooltipTrigger>
+              </ToggleGroupItem>
+              <TooltipContent
+                align="start"
+                side="bottom"
+                sideOffset={6}
+                className="flex max-w-60 flex-col space-y-1.5 border bg-background py-2 font-semibold text-foreground"
+              >
+                <div>{flag.tooltipTitle}</div>
+                <div className="text-xs text-muted-foreground">
+                  {flag.tooltipDescription}
+                </div>
+              </TooltipContent>
+            </Tooltip>
+          ))}
+        </ToggleGroup>
+      </div>
+      {children}
+    </FeatureFlagsContext.Provider>
+  )
+}
diff --git a/lib/rfqs/table/feature-flags.tsx b/lib/rfqs/table/feature-flags.tsx
new file mode 100644
index 00000000..aaae6af2
--- /dev/null
+++ b/lib/rfqs/table/feature-flags.tsx
@@ -0,0 +1,96 @@
+"use client"
+
+import * as React from "react"
+import { useQueryState } from "nuqs"
+
+import { dataTableConfig, type DataTableConfig } from "@/config/data-table"
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+
+type FeatureFlagValue = DataTableConfig["featureFlags"][number]["value"]
+
+interface TasksTableContextProps {
+  featureFlags: FeatureFlagValue[]
+  setFeatureFlags: (value: FeatureFlagValue[]) => void
+}
+
+const TasksTableContext = React.createContext<TasksTableContextProps>({
+  featureFlags: [],
+  setFeatureFlags: () => {},
+})
+
+export function useTasksTable() {
+  const context = React.useContext(TasksTableContext)
+  if (!context) {
+    throw new Error("useTasksTable must be used within a TasksTableProvider")
+  }
+  return context
+}
+
+export function TasksTableProvider({ children }: React.PropsWithChildren) {
+  const [featureFlags, setFeatureFlags] = useQueryState<FeatureFlagValue[]>(
+    "featureFlags",
+    {
+      defaultValue: [],
+      parse: (value) => value.split(",") as FeatureFlagValue[],
+      serialize: (value) => value.join(","),
+      eq: (a, b) =>
+        a.length === b.length && a.every((value, index) => value === b[index]),
+      clearOnDefault: true,
+    }
+  )
+
+  return (
+    <TasksTableContext.Provider
+      value={{
+        featureFlags,
+        setFeatureFlags: (value) => void setFeatureFlags(value),
+      }}
+    >
+      <div className="w-full overflow-x-auto">
+        <ToggleGroup
+          type="multiple"
+          variant="outline"
+          size="sm"
+          value={featureFlags}
+          onValueChange={(value: FeatureFlagValue[]) => setFeatureFlags(value)}
+          className="w-fit"
+        >
+          {dataTableConfig.featureFlags.map((flag) => (
+            <Tooltip key={flag.value}>
+              <ToggleGroupItem
+                value={flag.value}
+                className="whitespace-nowrap px-3 text-xs"
+                asChild
+              >
+                <TooltipTrigger>
+                  <flag.icon
+                    className="mr-2 size-3.5 shrink-0"
+                    aria-hidden="true"
+                  />
+                  {flag.label}
+                </TooltipTrigger>
+              </ToggleGroupItem>
+              <TooltipContent
+                align="start"
+                side="bottom"
+                sideOffset={6}
+                className="flex max-w-60 flex-col space-y-1.5 border bg-background py-2 font-semibold text-foreground"
+              >
+                <div>{flag.tooltipTitle}</div>
+                <div className="text-xs text-muted-foreground">
+                  {flag.tooltipDescription}
+                </div>
+              </TooltipContent>
+            </Tooltip>
+          ))}
+        </ToggleGroup>
+      </div>
+      {children}
+    </TasksTableContext.Provider>
+  )
+}
diff --git a/lib/rfqs/table/rfqs-table-columns.tsx b/lib/rfqs/table/rfqs-table-columns.tsx
new file mode 100644
index 00000000..98df3bc8
--- /dev/null
+++ b/lib/rfqs/table/rfqs-table-columns.tsx
@@ -0,0 +1,315 @@
+"use client"
+
+import * as React from "react"
+import { type DataTableRowAction } from "@/types/table"
+import { type ColumnDef } from "@tanstack/react-table"
+import { Ellipsis, Paperclip, Package } from "lucide-react"
+import { toast } from "sonner"
+
+import { formatDate } from "@/lib/utils"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Checkbox } from "@/components/ui/checkbox"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+
+import { getRFQStatusIcon } from "@/lib/tasks/utils"
+import { rfqsColumnsConfig } from "@/config/rfqsColumnsConfig"
+import { RfqWithItemCount } from "@/db/schema/rfq"
+import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header"
+import { useRouter } from "next/navigation"
+import { RfqType } from "../validations"
+
+type NextRouter = ReturnType<typeof useRouter>;
+
+interface GetColumnsProps {
+  setRowAction: React.Dispatch<
+    React.SetStateAction<DataTableRowAction<RfqWithItemCount> | null>
+  >
+  openItemsModal: (rfqId: number) => void
+  openAttachmentsSheet: (rfqId: number) => void
+  router: NextRouter
+  rfqType?: RfqType
+}
+
+/**
+ * tanstack table 컬럼 정의 (중첩 헤더 버전)
+ */
+export function getColumns({
+  setRowAction,
+  openItemsModal,
+  openAttachmentsSheet,
+  router,
+  rfqType,
+}: GetColumnsProps): ColumnDef<RfqWithItemCount>[] {
+  // ----------------------------------------------------------------
+  // 1) select 컬럼 (체크박스)
+  // ----------------------------------------------------------------
+  const selectColumn: ColumnDef<RfqWithItemCount> = {
+    id: "select",
+    header: ({ table }) => (
+      <Checkbox
+        checked={
+          table.getIsAllPageRowsSelected() ||
+          (table.getIsSomePageRowsSelected() && "indeterminate")
+        }
+        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+        aria-label="Select all"
+        className="translate-y-0.5"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={(value) => row.toggleSelected(!!value)}
+        aria-label="Select row"
+        className="translate-y-0.5"
+      />
+    ),
+    size: 40,
+    enableSorting: false,
+    enableHiding: false,
+  }
+
+  // ----------------------------------------------------------------
+  // 2) actions 컬럼 (Dropdown 메뉴)
+  // ----------------------------------------------------------------
+  const actionsColumn: ColumnDef<RfqWithItemCount> = {
+    id: "actions",
+    enableHiding: false,
+    cell: function Cell({ row }) {
+      const [isUpdatePending, startUpdateTransition] = React.useTransition()
+
+      // Proceed 버튼 클릭 시 호출되는 함수
+      const handleProceed = () => {
+        const rfq = row.original
+        const itemCount = Number(rfq.itemCount || 0)
+        const attachCount = Number(rfq.attachCount || 0)
+
+        // 아이템과 첨부파일이 모두 0보다 커야 진행 가능
+        if (itemCount > 0 && attachCount > 0) {
+          router.push(
+            rfqType === RfqType.PURCHASE
+              ? `/evcp/rfq/${rfq.rfqId}`
+              : `/evcp/budgetary/${rfq.rfqId}`
+          )
+        } else {
+          // 조건을 충족하지 않는 경우 토스트 알림 표시
+          if (itemCount === 0 && attachCount === 0) {
+            toast.error("아이템과 첨부파일을 먼저 추가해주세요.")
+          } else if (itemCount === 0) {
+            toast.error("아이템을 먼저 추가해주세요.")
+          } else {
+            toast.error("첨부파일을 먼저 추가해주세요.")
+          }
+        }
+      }
+
+      return (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              aria-label="Open menu"
+              variant="ghost"
+              className="flex size-8 p-0 data-[state=open]:bg-muted"
+            >
+              <Ellipsis className="size-4" aria-hidden="true" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-40">
+            <DropdownMenuItem
+              onSelect={() => setRowAction({ row, type: "update" })}
+            >
+              Edit
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem onSelect={handleProceed}>
+              {row.original.status ==="DRAFT"?"Proceed":"View Detail"}
+              <DropdownMenuShortcut>↵</DropdownMenuShortcut>
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem
+              onSelect={() => setRowAction({ row, type: "delete" })}
+            >
+              Delete
+              <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      )
+    },
+    size: 40,
+  }
+
+  // ----------------------------------------------------------------
+  // 3) itemsColumn (아이템 개수 표시: 아이콘 + Badge)
+  // ----------------------------------------------------------------
+  const itemsColumn: ColumnDef<RfqWithItemCount> = {
+    id: "items",
+    header: "Items",
+    cell: ({ row }) => {
+      const rfq = row.original
+      const itemCount = rfq.itemCount || 0
+
+      const handleClick = () => {
+        openItemsModal(rfq.rfqId)
+      }
+
+      return (
+        <Button
+          variant="ghost"
+          size="sm"
+          className="relative h-8 w-8 p-0 group"
+          onClick={handleClick}
+          aria-label={
+            itemCount > 0 ? `View ${itemCount} items` : "Add items"
+          }
+        >
+          <Package className="h-4 w-4 text-muted-foreground group-hover:text-primary transition-colors" />
+          {itemCount > 0 && (
+            <Badge
+              variant="secondary"
+              className="pointer-events-none absolute -top-1 -right-1 h-4 min-w-[1rem] p-0 text-[0.625rem] leading-none flex items-center justify-center"
+            >
+              {itemCount}
+            </Badge>
+          )}
+          <span className="sr-only">
+            {itemCount > 0 ? `${itemCount} Items` : "Add Items"}
+          </span>
+        </Button>
+      )
+    },
+    enableSorting: false,
+    size: 60,
+  }
+
+  // ----------------------------------------------------------------
+  // 4) attachmentsColumn (첨부파일 개수 표시: 아이콘 + Badge)
+  // ----------------------------------------------------------------
+  const attachmentsColumn: ColumnDef<RfqWithItemCount> = {
+    id: "attachments",
+    header: "Attachments",
+    cell: ({ row }) => {
+      const fileCount = row.original.attachCount ?? 0
+
+      const handleClick = () => {
+        openAttachmentsSheet(row.original.rfqId)
+      }
+
+      return (
+        <Button
+          variant="ghost"
+          size="sm"
+          className="relative h-8 w-8 p-0 group"
+          onClick={handleClick}
+          aria-label={
+            fileCount > 0 ? `View ${fileCount} files` : "Add files"
+          }
+        >
+          <Paperclip className="h-4 w-4 text-muted-foreground group-hover:text-primary transition-colors" />
+          {fileCount > 0 && (
+            <Badge
+              variant="secondary"
+              className="pointer-events-none absolute -top-1 -right-1 h-4 min-w-[1rem] p-0 text-[0.625rem] leading-none flex items-center justify-center"
+            >
+              {fileCount}
+            </Badge>
+          )}
+          <span className="sr-only">
+            {fileCount > 0 ? `${fileCount} Files` : "Add Files"}
+          </span>
+        </Button>
+      )
+    },
+    enableSorting: false,
+    size: 60,
+  }
+
+  // ----------------------------------------------------------------
+  // 5) 일반 컬럼들을 "그룹"별로 묶어 중첩 columns 생성
+  // ----------------------------------------------------------------
+  const groupMap: Record<string, ColumnDef<RfqWithItemCount>[]> = {}
+
+  rfqsColumnsConfig.forEach((cfg) => {
+    const groupName = cfg.group || "_noGroup"
+
+    if (!groupMap[groupName]) {
+      groupMap[groupName] = []
+    }
+
+    // child column 정의
+    const childCol: ColumnDef<RfqWithItemCount> = {
+      accessorKey: cfg.id,
+      enableResizing: true,
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title={cfg.label} />
+      ),
+      meta: {
+        excelHeader: cfg.excelHeader,
+        group: cfg.group,
+        type: cfg.type,
+      },
+      cell: ({ row, cell }) => {
+        if (cfg.id === "status") {
+          const statusVal = row.original.status
+          if (!statusVal) return null
+          const Icon = getRFQStatusIcon(
+            statusVal as "DRAFT" | "PUBLISHED" | "EVALUATION" | "AWARDED"
+          )
+          return (
+            <div className="flex w-[6.25rem] items-center">
+              <Icon className="mr-2 size-4 text-muted-foreground" aria-hidden="true" />
+              <span className="capitalize">{statusVal}</span>
+            </div>
+          )
+        }
+
+        if (cfg.id === "createdAt" || cfg.id === "updatedAt") {
+          const dateVal = cell.getValue() as Date
+          return formatDate(dateVal)
+        }
+
+        return row.getValue(cfg.id) ?? ""
+      },
+    }
+
+    groupMap[groupName].push(childCol)
+  })
+
+  // groupMap -> nestedColumns
+  const nestedColumns: ColumnDef<RfqWithItemCount>[] = []
+  Object.entries(groupMap).forEach(([groupName, colDefs]) => {
+    if (groupName === "_noGroup") {
+      nestedColumns.push(...colDefs)
+    } else {
+      nestedColumns.push({
+        id: groupName,
+        header: groupName,
+        columns: colDefs,
+      })
+    }
+  })
+
+  // ----------------------------------------------------------------
+  // 6) 최종 컬럼 배열
+  // ----------------------------------------------------------------
+  return [
+    selectColumn,
+    ...nestedColumns,
+    attachmentsColumn, // 첨부파일
+    actionsColumn,
+    itemsColumn,       // 아이템
+  ]
+}
\ No newline at end of file
diff --git a/lib/rfqs/table/rfqs-table-floating-bar.tsx b/lib/rfqs/table/rfqs-table-floating-bar.tsx
new file mode 100644
index 00000000..daef7e0b
--- /dev/null
+++ b/lib/rfqs/table/rfqs-table-floating-bar.tsx
@@ -0,0 +1,338 @@
+"use client"
+
+import * as React from "react"
+import { Table } from "@tanstack/react-table"
+import { toast } from "sonner"
+import { Calendar, type CalendarProps } from "@/components/ui/calendar"
+import { Button } from "@/components/ui/button"
+import { Portal } from "@/components/ui/portal"
+import {
+  Select,
+  SelectTrigger,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectValue,
+} from "@/components/ui/select"
+import { Separator } from "@/components/ui/separator"
+import {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+} from "@/components/ui/tooltip"
+import { Kbd } from "@/components/kbd"
+import { ActionConfirmDialog } from "@/components/ui/action-dialog"
+
+import { ArrowUp, CheckCircle2, Download, Loader, Trash2, X, CalendarIcon } from "lucide-react"
+
+import { exportTableToExcel } from "@/lib/export"
+
+import { RfqWithItemCount, rfqs } from "@/db/schema/rfq"
+import { modifyRfqs, removeRfqs } from "../service"
+
+interface RfqsTableFloatingBarProps {
+  table: Table<RfqWithItemCount>
+}
+
+/**
+ * 추가된 로직:
+ * - 달력(캘린더) 아이콘 버튼
+ * - 눌렀을 때 Popover로 Calendar 표시
+ * - 날짜 선택 시 Confirm 다이얼로그 → modifyRfqs({ dueDate })
+ */
+export function RfqsTableFloatingBar({ table }: RfqsTableFloatingBarProps) {
+  const rows = table.getFilteredSelectedRowModel().rows
+  const [isPending, startTransition] = React.useTransition()
+  const [action, setAction] = React.useState<"update-status" | "export" | "delete" | "update-dueDate">()
+  const [confirmDialogOpen, setConfirmDialogOpen] = React.useState(false)
+
+  const [confirmProps, setConfirmProps] = React.useState<{
+    title: string
+    description?: string
+    onConfirm: () => Promise<void> | void
+  }>({
+    title: "",
+    description: "",
+    onConfirm: () => {},
+  })
+
+  // 캘린더 Popover 열림 여부
+  const [calendarOpen, setCalendarOpen] = React.useState(false)
+  const [selectedDate, setSelectedDate] = React.useState<Date | null>(null)
+
+  // Clear selection on Escape key press
+  React.useEffect(() => {
+    function handleKeyDown(event: KeyboardEvent) {
+      if (event.key === "Escape") {
+        table.toggleAllRowsSelected(false)
+      }
+    }
+    window.addEventListener("keydown", handleKeyDown)
+    return () => window.removeEventListener("keydown", handleKeyDown)
+  }, [table])
+
+  function handleDeleteConfirm() {
+    setAction("delete")
+    setConfirmProps({
+      title: `Delete ${rows.length} RFQ${rows.length > 1 ? "s" : ""}?`,
+      description: "This action cannot be undone.",
+      onConfirm: async () => {
+        startTransition(async () => {
+          const { error } = await removeRfqs({
+            ids: rows.map((row) => row.original.rfqId),
+          })
+          if (error) {
+            toast.error(error)
+            return
+          }
+          toast.success("RFQs deleted")
+          table.toggleAllRowsSelected(false)
+          setConfirmDialogOpen(false)
+        })
+      },
+    })
+    setConfirmDialogOpen(true)
+  }
+
+  function handleSelectStatus(newStatus: RfqWithItemCount["status"]) {
+    setAction("update-status")
+    setConfirmProps({
+      title: `Update ${rows.length} RFQ${rows.length > 1 ? "s" : ""} with status: ${newStatus}?`,
+      description: "This action will override their current status.",
+      onConfirm: async () => {
+        startTransition(async () => {
+          const { error } = await modifyRfqs({
+            ids: rows.map((row) => row.original.rfqId),
+            status: newStatus as "DRAFT" | "PUBLISHED" | "EVALUATION" | "AWARDED",
+          })
+          if (error) {
+            toast.error(error)
+            return
+          }
+          toast.success("RFQs updated")
+          setConfirmDialogOpen(false)
+        })
+      },
+    })
+    setConfirmDialogOpen(true)
+  }
+
+  // 1) 달력에서 날짜를 선택했을 때 → Confirm 다이얼로그
+  function handleDueDateSelect(newDate: Date) {
+    setAction("update-dueDate")
+
+    setConfirmProps({
+      title: `Update ${rows.length} RFQ${rows.length > 1 ? "s" : ""} Due Date to ${newDate.toDateString()}?`,
+      description: "This action will override their current due date.",
+      onConfirm: async () => {
+        startTransition(async () => {
+          const { error } = await modifyRfqs({
+            ids: rows.map((r) => r.original.rfqId),
+            dueDate: newDate,
+          })
+          if (error) {
+            toast.error(error)
+            return
+          }
+          toast.success("Due date updated")
+          setConfirmDialogOpen(false)
+          setCalendarOpen(false)
+        })
+      },
+    })
+    setConfirmDialogOpen(true)
+  }
+
+  // 2) Export
+  function handleExport() {
+    setAction("export")
+    startTransition(() => {
+      exportTableToExcel(table, {
+        excludeColumns: ["select", "actions"],
+        onlySelected: true,
+      })
+    })
+  }
+
+  // Floating bar UI
+  return (
+    <Portal>
+      <div className="fixed inset-x-0 bottom-10 z-50 mx-auto w-fit px-2.5">
+        <div className="w-full overflow-x-auto">
+          <div className="mx-auto flex w-fit items-center gap-2 rounded-md border bg-background p-2 text-foreground shadow">
+            {/* Selection Info + Clear */}
+            <div className="flex h-7 items-center rounded-md border border-dashed pl-2.5 pr-1">
+              <span className="whitespace-nowrap text-xs">
+                {rows.length} selected
+              </span>
+              <Separator orientation="vertical" className="ml-2 mr-1" />
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="size-5 hover:border"
+                    onClick={() => table.toggleAllRowsSelected(false)}
+                  >
+                    <X className="size-3.5 shrink-0" aria-hidden="true" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent className="flex items-center border bg-accent px-2 py-1 font-semibold text-foreground dark:bg-zinc-900">
+                  <p className="mr-2">Clear selection</p>
+                  <Kbd abbrTitle="Escape" variant="outline">
+                    Esc
+                  </Kbd>
+                </TooltipContent>
+              </Tooltip>
+            </div>
+
+            <Separator orientation="vertical" className="hidden h-5 sm:block" />
+
+            <div className="flex items-center gap-1.5">
+              {/* 1) Status Update */}
+              <Select
+                onValueChange={(value: RfqWithItemCount["status"]) => handleSelectStatus(value)}
+              >
+                <Tooltip>
+                  <SelectTrigger asChild>
+                    <TooltipTrigger asChild>
+                      <Button
+                        variant="secondary"
+                        size="icon"
+                        className="size-7 border data-[state=open]:bg-accent data-[state=open]:text-accent-foreground"
+                        disabled={isPending}
+                      >
+                        {isPending && action === "update-status" ? (
+                          <Loader className="size-3.5 animate-spin" aria-hidden="true" />
+                        ) : (
+                          <CheckCircle2 className="size-3.5" aria-hidden="true" />
+                        )}
+                      </Button>
+                    </TooltipTrigger>
+                  </SelectTrigger>
+                  <TooltipContent className="border bg-accent font-semibold text-foreground dark:bg-zinc-900">
+                    <p>Update status</p>
+                  </TooltipContent>
+                </Tooltip>
+                <SelectContent align="center">
+                  <SelectGroup>
+                    {rfqs.status.enumValues.map((status) => (
+                      <SelectItem key={status} value={status} className="capitalize">
+                        {status}
+                      </SelectItem>
+                    ))}
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+
+              {/* 2) Due Date Update: Calendar Popover */}
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="secondary"
+                    size="icon"
+                    className="size-7 border"
+                    disabled={isPending}
+                    onClick={() => setCalendarOpen((open) => !open)}
+                  >
+                    {isPending && action === "update-dueDate" ? (
+                      <Loader className="size-3.5 animate-spin" aria-hidden="true" />
+                    ) : (
+                      <CalendarIcon className="size-3.5" aria-hidden="true" />
+                    )}
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent className="border bg-accent font-semibold text-foreground dark:bg-zinc-900">
+                  <p>Update Due Date</p>
+                </TooltipContent>
+              </Tooltip>
+
+              {/* Calendar Popover (간단 구현) */}
+              {calendarOpen && (
+                <div className="absolute bottom-16 z-50 rounded-md border bg-background p-2 shadow">
+                  <Calendar
+                    mode="single"
+                    selected={selectedDate || new Date()}
+                    onSelect={(date) => {
+                      if (date) {
+                        setSelectedDate(date)
+                        handleDueDateSelect(date)
+                      }
+                    }}
+                    initialFocus
+                  />
+                </div>
+              )}
+
+              {/* 3) Export */}
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="secondary"
+                    size="icon"
+                    className="size-7 border"
+                    onClick={handleExport}
+                    disabled={isPending}
+                  >
+                    {isPending && action === "export" ? (
+                      <Loader className="size-3.5 animate-spin" aria-hidden="true" />
+                    ) : (
+                      <Download className="size-3.5" aria-hidden="true" />
+                    )}
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent className="border bg-accent font-semibold text-foreground dark:bg-zinc-900">
+                  <p>Export tasks</p>
+                </TooltipContent>
+              </Tooltip>
+
+              {/* 4) Delete */}
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="secondary"
+                    size="icon"
+                    className="size-7 border"
+                    onClick={handleDeleteConfirm}
+                    disabled={isPending}
+                  >
+                    {isPending && action === "delete" ? (
+                      <Loader className="size-3.5 animate-spin" aria-hidden="true" />
+                    ) : (
+                      <Trash2 className="size-3.5" aria-hidden="true" />
+                    )}
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent className="border bg-accent font-semibold text-foreground dark:bg-zinc-900">
+                  <p>Delete tasks</p>
+                </TooltipContent>
+              </Tooltip>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* 공용 Confirm Dialog */}
+      <ActionConfirmDialog
+        open={confirmDialogOpen}
+        onOpenChange={setConfirmDialogOpen}
+        title={confirmProps.title}
+        description={confirmProps.description}
+        onConfirm={confirmProps.onConfirm}
+        isLoading={
+          isPending && (action === "delete" || action === "update-status" || action === "update-dueDate")
+        }
+        confirmLabel={
+          action === "delete"
+            ? "Delete"
+            : action === "update-status"
+            ? "Update"
+            : action === "update-dueDate"
+            ? "Update"
+            : "Confirm"
+        }
+        confirmVariant={action === "delete" ? "destructive" : "default"}
+      />
+    </Portal>
+  )
+}
\ No newline at end of file
diff --git a/lib/rfqs/table/rfqs-table-toolbar-actions.tsx b/lib/rfqs/table/rfqs-table-toolbar-actions.tsx
new file mode 100644
index 00000000..6402e625
--- /dev/null
+++ b/lib/rfqs/table/rfqs-table-toolbar-actions.tsx
@@ -0,0 +1,55 @@
+"use client"
+
+import * as React from "react"
+import { type Table } from "@tanstack/react-table"
+import { Download, Upload } from "lucide-react"
+import { toast } from "sonner"
+
+import { exportTableToExcel } from "@/lib/export"
+import { Button } from "@/components/ui/button"
+import {  RfqWithItemCount } from "@/db/schema/rfq"
+import { DeleteRfqsDialog } from "./delete-rfqs-dialog"
+import { AddRfqDialog } from "./add-rfq-dialog"
+import { RfqType } from "../validations"
+
+
+interface RfqsTableToolbarActionsProps {
+  table: Table<RfqWithItemCount>
+  rfqType?: RfqType;
+}
+
+export function RfqsTableToolbarActions({ table , rfqType = RfqType.PURCHASE}: RfqsTableToolbarActionsProps) {
+  return (
+    <div className="flex items-center gap-2">
+      {/** 1) 선택된 로우가 있으면 삭제 다이얼로그 */}
+      {table.getFilteredSelectedRowModel().rows.length > 0 ? (
+        <DeleteRfqsDialog
+          rfqs={table
+            .getFilteredSelectedRowModel()
+            .rows.map((row) => row.original)}
+          onSuccess={() => table.toggleAllRowsSelected(false)}
+        />
+      ) : null}
+
+      {/** 2) 새 Task 추가 다이얼로그 */}
+      <AddRfqDialog rfqType={rfqType} />
+
+ 
+      {/** 4) Export 버튼 */}
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={() =>
+          exportTableToExcel(table, {
+            filename: "tasks",
+            excludeColumns: ["select", "actions"],
+          })
+        }
+        className="gap-2"
+      >
+        <Download className="size-4" aria-hidden="true" />
+        <span className="hidden sm:inline">Export</span>
+      </Button>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/lib/rfqs/table/rfqs-table.tsx b/lib/rfqs/table/rfqs-table.tsx
new file mode 100644
index 00000000..db5c31e7
--- /dev/null
+++ b/lib/rfqs/table/rfqs-table.tsx
@@ -0,0 +1,264 @@
+"use client"
+
+import * as React from "react"
+import type {
+  DataTableAdvancedFilterField,
+  DataTableFilterField,
+  DataTableRowAction,
+} from "@/types/table"
+
+import { toSentenceCase } from "@/lib/utils"
+import { useDataTable } from "@/hooks/use-data-table"
+import { DataTable } from "@/components/data-table/data-table"
+import { DataTableAdvancedToolbar } from "@/components/data-table/data-table-advanced-toolbar"
+
+import { getRFQStatusIcon } from "@/lib/tasks/utils"
+import { useFeatureFlags } from "./feature-flags-provider"
+import { getColumns } from "./rfqs-table-columns"
+import { fetchRfqAttachments, fetchRfqItems, getRfqs, getRfqStatusCounts } from "../service"
+import { RfqItem, RfqWithItemCount, rfqs } from "@/db/schema/rfq"
+import { RfqsTableFloatingBar } from "./rfqs-table-floating-bar"
+import { UpdateRfqSheet } from "./update-rfq-sheet"
+import { DeleteRfqsDialog } from "./delete-rfqs-dialog"
+import { RfqsTableToolbarActions } from "./rfqs-table-toolbar-actions"
+import { RfqsItemsDialog } from "./ItemsDialog"
+import { getAllItems } from "@/lib/items/service"
+import { RfqAttachmentsSheet } from "./attachment-rfq-sheet"
+import { useRouter } from "next/navigation"
+import { RfqType } from "../validations"
+
+interface RfqsTableProps {
+  promises: Promise<
+    [
+      Awaited<ReturnType<typeof getRfqs>>,
+      Awaited<ReturnType<typeof getRfqStatusCounts>>,
+      Awaited<ReturnType<typeof getAllItems>>,
+    ]
+  >;
+  rfqType?: RfqType; // rfqType props 추가
+}
+
+export interface ExistingAttachment {
+  id: number;
+  fileName: string;
+  filePath: string;
+  createdAt?: Date;
+  vendorId?: number | null;
+  size?: number;
+}
+
+export interface ExistingItem {
+  id?: number;
+  itemCode: string;
+  description: string | null;
+  quantity: number | null;
+  uom: string | null;
+}
+
+export function RfqsTable({ promises, rfqType = RfqType.PURCHASE }: RfqsTableProps) {
+  const { featureFlags } = useFeatureFlags()
+
+  const [{ data, pageCount }, statusCounts, items] = React.use(promises)
+  const [attachmentsOpen, setAttachmentsOpen] = React.useState(false)
+  const [selectedRfqIdForAttachments, setSelectedRfqIdForAttachments] = React.useState<number | null>(null)
+  const [attachDefault, setAttachDefault] = React.useState<ExistingAttachment[]>([])
+  const [itemsDefault, setItemsDefault] = React.useState<ExistingItem[]>([])
+
+  const router = useRouter()
+
+  const itemsList = items?.map((v) => ({
+    code: v.itemCode ?? "",
+    name: v.itemName ?? "",
+  }));
+
+  const [rowAction, setRowAction] =
+    React.useState<DataTableRowAction<RfqWithItemCount> | null>(null)
+
+  const [rowData, setRowData] = React.useState<RfqWithItemCount[]>(() => data)
+
+  const [itemsModalOpen, setItemsModalOpen] = React.useState(false);
+  const [selectedRfqId, setSelectedRfqId] = React.useState<number | null>(null);
+
+
+  const selectedRfq = React.useMemo(() => {
+    return rowData.find(row => row.rfqId === selectedRfqId) || null;
+  }, [rowData, selectedRfqId]);
+
+  // rfqType에 따른 제목 계산
+  const getRfqTypeTitle = () => {
+    return rfqType === RfqType.PURCHASE ? "Purchase RFQ" : "Budgetary RFQ";
+  };
+
+  async function openItemsModal(rfqId: number) {
+    const itemList = await fetchRfqItems(rfqId)
+    setItemsDefault(itemList)
+    setSelectedRfqId(rfqId);
+    setItemsModalOpen(true);
+  }
+
+  async function openAttachmentsSheet(rfqId: number) {
+    // 4.1) Fetch current attachments from server (server action)
+    const list = await fetchRfqAttachments(rfqId) // returns ExistingAttachment[]
+    setAttachDefault(list)
+    setSelectedRfqIdForAttachments(rfqId)
+    setAttachmentsOpen(true)
+    setSelectedRfqId(rfqId);
+  }
+
+  function handleAttachmentsUpdated(rfqId: number, newCount: number, newList?: ExistingAttachment[]) {
+    // 5.1) update rowData itemCount
+    setRowData(prev =>
+      prev.map(r =>
+        r.rfqId === rfqId
+          ? { ...r, itemCount: newCount }
+          : r
+      )
+    )
+    // 5.2) if newList is provided, store it
+    if (newList) {
+      setAttachDefault(newList)
+    }
+  }
+
+  const columns = React.useMemo(() => getColumns({
+    setRowAction, router,
+    // we pass openItemsModal as a prop so the itemsColumn can call it
+    openItemsModal,
+    openAttachmentsSheet,
+    rfqType
+  }), [setRowAction, router, rfqType]);
+
+  /**
+   * This component can render either a faceted filter or a search filter based on the `options` prop.
+   */
+  const filterFields: DataTableFilterField<RfqWithItemCount>[] = [
+    {
+      id: "rfqCode",
+      label: "RFQ Code",
+      placeholder: "Filter RFQ Code...",
+    },
+    {
+      id: "status",
+      label: "Status",
+      options: rfqs.status.enumValues?.map((status) => {
+        // 명시적으로 status를 허용된 리터럴 타입으로 변환
+        const s = status as "DRAFT" | "PUBLISHED" | "EVALUATION" | "AWARDED";
+        return {
+          label: toSentenceCase(s),
+          value: s,
+          icon: getRFQStatusIcon(s),
+          count: statusCounts[s],
+        };
+      }),
+
+    }
+  ]
+
+  /**
+   * Advanced filter fields for the data table.
+   */
+  const advancedFilterFields: DataTableAdvancedFilterField<RfqWithItemCount>[] = [
+    {
+      id: "rfqCode",
+      label: "RFQ Code",
+      type: "text",
+    },
+    {
+      id: "description",
+      label: "Description",
+      type: "text",
+    },
+    {
+      id: "projectCode",
+      label: "Project Code",
+      type: "text",
+    },
+    {
+      id: "dueDate",
+      label: "Due Date",
+      type: "date",
+    },
+    {
+      id: "status",
+      label: "Status",
+      type: "multi-select",
+      options: rfqs.status.enumValues?.map((status) => {
+        // 명시적으로 status를 허용된 리터럴 타입으로 변환
+        const s = status as "DRAFT" | "PUBLISHED" | "EVALUATION" | "AWARDED";
+        return {
+          label: toSentenceCase(s),
+          value: s,
+          icon: getRFQStatusIcon(s),
+          count: statusCounts[s],
+        };
+      }),
+
+    },
+  ]
+
+  const { table } = useDataTable({
+    data,
+    columns,
+    pageCount,
+    filterFields,
+    enablePinning: true,
+    enableAdvancedFilter: true,
+    initialState: {
+      sorting: [{ id: "createdAt", desc: true }],
+      columnPinning: { right: ["actions"] },
+    },
+    getRowId: (originalRow) => String(originalRow.rfqId),
+    shallow: false,
+    clearOnDefault: true,
+  })
+
+  return (
+    <>
+      <DataTable
+        table={table}
+        floatingBar={<RfqsTableFloatingBar table={table} />}
+      >
+        <DataTableAdvancedToolbar
+          table={table}
+          filterFields={advancedFilterFields}
+          shallow={false}
+        >
+          <RfqsTableToolbarActions table={table} rfqType={rfqType} />
+        </DataTableAdvancedToolbar>
+      </DataTable>
+
+      <UpdateRfqSheet
+        open={rowAction?.type === "update"}
+        onOpenChange={() => setRowAction(null)}
+        rfq={rowAction?.row.original ?? null}
+        rfqType={rfqType}
+      />
+
+      <DeleteRfqsDialog
+        open={rowAction?.type === "delete"}
+        onOpenChange={() => setRowAction(null)}
+        rfqs={rowAction?.row.original ? [rowAction?.row.original] : []}
+        showTrigger={false}
+        onSuccess={() => rowAction?.row.toggleSelected(false)}
+      />
+
+      <RfqsItemsDialog
+        open={itemsModalOpen}
+        onOpenChange={setItemsModalOpen}
+        rfq={selectedRfq ?? null}
+        itemsList={itemsList}
+        defaultItems={itemsDefault}
+        rfqType={rfqType}
+      />
+
+      <RfqAttachmentsSheet
+        open={attachmentsOpen}
+        onOpenChange={setAttachmentsOpen}
+        defaultAttachments={attachDefault}
+        rfqType={rfqType}
+        rfq={selectedRfq ?? null}
+        onAttachmentsUpdated={handleAttachmentsUpdated}
+      />
+    </>
+  )
+}
\ No newline at end of file
diff --git a/lib/rfqs/table/update-rfq-sheet.tsx b/lib/rfqs/table/update-rfq-sheet.tsx
new file mode 100644
index 00000000..769f25e7
--- /dev/null
+++ b/lib/rfqs/table/update-rfq-sheet.tsx
@@ -0,0 +1,283 @@
+"use client"
+
+import * as React from "react"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Loader } from "lucide-react"
+import { useForm } from "react-hook-form"
+import { toast } from "sonner"
+import { useSession } from "next-auth/react"
+
+import { Button } from "@/components/ui/button"
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet"
+import { Input } from "@/components/ui/input"
+
+import { Rfq, RfqWithItemCount } from "@/db/schema/rfq"
+import { RfqType, updateRfqSchema, type UpdateRfqSchema } from "../validations"
+import { modifyRfq } from "../service"
+import { ProjectSelector } from "@/components/ProjectSelector"
+import { type Project } from "../service"
+import { BudgetaryRfqSelector } from "./BudgetaryRfqSelector"
+
+interface UpdateRfqSheetProps
+  extends React.ComponentPropsWithRef<typeof Sheet> {
+  rfq: RfqWithItemCount | null
+  rfqType?: RfqType;
+}
+
+
+interface BudgetaryRfq {
+  id: number;
+  rfqCode: string;
+  description: string | null;
+}
+
+
+export function UpdateRfqSheet({ rfq,rfqType = RfqType.PURCHASE , ...props }: UpdateRfqSheetProps) {
+  const [isUpdatePending, startUpdateTransition] = React.useTransition()
+  const { data: session } = useSession()
+  const userId = Number(session?.user?.id || 1)
+  const [selectedBudgetaryRfq, setSelectedBudgetaryRfq] = React.useState<BudgetaryRfq | null>(null)
+
+  // RHF setup
+  const form = useForm<UpdateRfqSchema>({
+    resolver: zodResolver(updateRfqSchema),
+    defaultValues: {
+      id: rfq?.rfqId ?? 0,         // PK
+      rfqCode: rfq?.rfqCode ?? "",
+      description: rfq?.description ?? "",
+      projectId: rfq?.projectId, // 프로젝트 ID
+      dueDate: rfq?.dueDate ?? undefined,    // null을 undefined로 변환
+      status: rfq?.status ?? "DRAFT",
+      createdBy: rfq?.createdBy ?? userId,
+    },
+  });
+
+  // 프로젝트 선택 처리
+  const handleProjectSelect = (project: Project) => {
+    form.setValue("projectId", project.id);
+  };
+
+  async function onSubmit(input: UpdateRfqSchema) {
+    startUpdateTransition(async () => {
+      if (!rfq) return
+
+      const { error } = await modifyRfq({
+        ...input,
+      })
+
+      if (error) {
+        toast.error(error)
+        return
+      }
+
+      form.reset()
+      props.onOpenChange?.(false)  // close the sheet
+      toast.success("RFQ updated!")
+    })
+  }
+
+  return (
+    <Sheet {...props}>
+      <SheetContent className="flex flex-col gap-6 sm:max-w-md">
+        <SheetHeader className="text-left">
+          <SheetTitle>Update RFQ</SheetTitle>
+          <SheetDescription>
+            Update the RFQ details and save the changes
+          </SheetDescription>
+        </SheetHeader>
+
+        {/* RHF Form */}
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col gap-4">
+
+            {/* Hidden or code-based id field */}
+            <FormField
+              control={form.control}
+              name="id"
+              render={({ field }) => (
+                <input type="hidden" {...field} />
+              )}
+            />
+
+            {/* Project Selector - 재사용 컴포넌트 사용 */}
+            <FormField
+              control={form.control}
+              name="projectId"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Project</FormLabel>
+                  <FormControl>
+                    <ProjectSelector
+                      selectedProjectId={field.value}
+                      onProjectSelect={handleProjectSelect}
+                      placeholder="프로젝트 선택..."
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {/* Budgetary RFQ Selector - 구매용 RFQ 생성 시에만 표시 */}
+            {rfqType === RfqType.PURCHASE && (
+              <FormField
+                control={form.control}
+                name="parentRfqId"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Budgetary RFQ (Optional)</FormLabel>
+                    <FormControl>
+                      <BudgetaryRfqSelector
+                        selectedRfqId={field.value as number | undefined}
+                        onRfqSelect={(rfq) => {
+                          setSelectedBudgetaryRfq(rfq as any);
+                          form.setValue("parentRfqId", rfq?.id);
+                        }}
+                        placeholder="Budgetary RFQ 선택..."
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            )}
+
+
+            {/* rfqCode */}
+            <FormField
+              control={form.control}
+              name="rfqCode"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>RFQ Code</FormLabel>
+                  <FormControl>
+                    <Input placeholder="e.g. RFQ-2025-001" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {/* description */}
+            <FormField
+              control={form.control}
+              name="description"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Description</FormLabel>
+                  <FormControl>
+                    <Input placeholder="Description" {...field} value={field.value || ""} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+
+
+            {/* dueDate (type="date") */}
+            <FormField
+              control={form.control}
+              name="dueDate"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Due Date</FormLabel>
+                  <FormControl>
+                    <Input
+                      type="date"
+                      // convert Date -> yyyy-mm-dd
+                      value={field.value ? field.value.toISOString().slice(0, 10) : ""}
+                      onChange={(e) => {
+                        const val = e.target.value
+                        field.onChange(val ? new Date(val + "T00:00:00") : undefined)
+                      }}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {/* status (Select) */}
+            <FormField
+              control={form.control}
+              name="status"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Status</FormLabel>
+                  <FormControl>
+                    <Select
+                      onValueChange={field.onChange}
+                      value={field.value ?? "DRAFT"}
+                    >
+                      <SelectTrigger className="capitalize">
+                        <SelectValue placeholder="Select status" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectGroup>
+                          {["DRAFT", "PUBLISHED", "EVALUATION", "AWARDED"].map((item) => (
+                            <SelectItem key={item} value={item} className="capitalize">
+                              {item}
+                            </SelectItem>
+                          ))}
+                        </SelectGroup>
+                      </SelectContent>
+                    </Select>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {/* createdBy (hidden or read-only) */}
+            <FormField
+              control={form.control}
+              name="createdBy"
+              render={({ field }) => (
+                <input type="hidden" {...field} />
+              )}
+            />
+
+            <SheetFooter className="gap-2 pt-2 sm:space-x-0">
+              <SheetClose asChild>
+                <Button type="button" variant="outline">
+                  Cancel
+                </Button>
+              </SheetClose>
+              <Button disabled={isUpdatePending}>
+                {isUpdatePending && (
+                  <Loader className="mr-2 size-4 animate-spin" aria-hidden="true" />
+                )}
+                Save
+              </Button>
+            </SheetFooter>
+          </form>
+        </Form>
+      </SheetContent>
+    </Sheet>
+  )
+}
\ No newline at end of file
diff --git a/lib/rfqs/tbe-table/comments-sheet.tsx b/lib/rfqs/tbe-table/comments-sheet.tsx
new file mode 100644
index 00000000..bea1fc8e
--- /dev/null
+++ b/lib/rfqs/tbe-table/comments-sheet.tsx
@@ -0,0 +1,334 @@
+"use client"
+
+import * as React from "react"
+import { useForm, useFieldArray } from "react-hook-form"
+import { z } from "zod"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Loader, Download, X } from "lucide-react"
+import prettyBytes from "pretty-bytes"
+import { toast } from "sonner"
+
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet"
+import { Button } from "@/components/ui/button"
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form"
+import {
+  Textarea,
+} from "@/components/ui/textarea"
+
+import {
+  Dropzone,
+  DropzoneZone,
+  DropzoneUploadIcon,
+  DropzoneTitle,
+  DropzoneDescription,
+  DropzoneInput
+} from "@/components/ui/dropzone"
+
+import {
+  Table,
+  TableHeader,
+  TableRow,
+  TableHead,
+  TableBody,
+  TableCell
+} from "@/components/ui/table"
+
+// DB 스키마에서 필요한 타입들을 가져온다고 가정
+// (실제 프로젝트에 맞춰 import를 수정하세요.)
+import { RfqWithAll } from "@/db/schema/rfq"
+import { createRfqCommentWithAttachments } from "../service"
+import { formatDate } from "@/lib/utils"
+
+// 코멘트 + 첨부파일 구조 (단순 예시)
+// 실제 DB 스키마에 맞춰 조정
+export interface TbeComment {
+  id: number
+  commentText: string
+  commentedBy?: number
+  createdAt?: string | Date
+  attachments?: {
+    id: number
+    fileName: string
+    filePath: string
+  }[]
+}
+
+interface CommentSheetProps extends React.ComponentPropsWithRef<typeof Sheet> {
+  /** 코멘트를 작성할 RFQ 정보 */
+  /** 이미 존재하는 모든 코멘트 목록 (서버에서 불러와 주입) */
+  initialComments?: TbeComment[]
+
+  /** 사용자(작성자) ID (로그인 세션 등에서 가져옴) */
+  currentUserId: number
+  rfqId:number
+  vendorId:number
+  /** 댓글 저장 후 갱신용 콜백 (옵션) */
+  onCommentsUpdated?: (comments: TbeComment[]) => void
+}
+
+// 새 코멘트 작성 폼 스키마
+const commentFormSchema = z.object({
+  commentText: z.string().min(1, "댓글을 입력하세요."),
+  newFiles: z.array(z.any()).optional() // File[]
+})
+type CommentFormValues = z.infer<typeof commentFormSchema>
+
+const MAX_FILE_SIZE = 30e6 // 30MB
+
+export function CommentSheet({
+  rfqId,
+  vendorId,
+  initialComments = [],
+  currentUserId,
+  onCommentsUpdated,
+  ...props
+}: CommentSheetProps) {
+  const [comments, setComments] = React.useState<TbeComment[]>(initialComments)
+  const [isPending, startTransition] = React.useTransition()
+
+  React.useEffect(() => {
+    setComments(initialComments)
+  }, [initialComments])
+  
+
+  // RHF 세팅
+  const form = useForm<CommentFormValues>({
+    resolver: zodResolver(commentFormSchema),
+    defaultValues: {
+      commentText: "",
+      newFiles: []
+    }
+  })
+
+  // formFieldArray 예시 (파일 목록)
+  const { fields: newFileFields, append, remove } = useFieldArray({
+    control: form.control,
+    name: "newFiles"
+  })
+
+  // 1) 기존 코멘트 + 첨부 보여주기
+  // 간단히 테이블 하나로 표현
+  // 실제로는 Bubble 형태의 UI, Accordion, Timeline 등 다양하게 구성할 수 있음
+  function renderExistingComments() {
+    if (comments.length === 0) {
+      return <p className="text-sm text-muted-foreground">No comments yet</p>
+    }
+
+    return (
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead className="w-1/2">Comment</TableHead>
+            <TableHead>Attachments</TableHead>
+            <TableHead>Created At</TableHead>
+            <TableHead>Created By</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {comments.map((c) => (
+            <TableRow key={c.id}>
+              <TableCell>{c.commentText}</TableCell>
+              <TableCell>
+                {/* 첨부파일 표시 */}
+                {(!c.attachments || c.attachments.length === 0) && (
+                  <span className="text-sm text-muted-foreground">No files</span>
+                )}
+                {c.attachments && c.attachments.length > 0 && (
+                  <div className="flex flex-col gap-1">
+                    {c.attachments.map((att) => (
+                      <div key={att.id} className="flex items-center gap-2">
+                        <a
+                          href={att.filePath}
+                          download
+                          target="_blank"
+                          rel="noreferrer"
+                          className="inline-flex items-center gap-1 text-blue-600 underline"
+                        >
+                          <Download className="h-4 w-4" />
+                          {att.fileName}
+                        </a>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </TableCell>
+              <TableCell> { c.createdAt ? formatDate(c.createdAt): "-"}</TableCell>
+              <TableCell>
+                {c.commentedBy ?? "-"}
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    )
+  }
+
+  // 2) 새 파일 Drop
+  function handleDropAccepted(files: File[]) {
+    // 드롭된 File[]을 RHF field array에 추가
+    const toAppend = files.map((f) => f)
+    append(toAppend)
+  }
+
+
+  // 3) 저장(Submit)
+  async function onSubmit(data: CommentFormValues) {
+
+    if (!rfqId) return
+    startTransition(async () => {
+      try {
+        // 서버 액션 호출
+        const res = await createRfqCommentWithAttachments({
+          rfqId: rfqId,
+          vendorId: vendorId, // 필요시 세팅
+          commentText: data.commentText,
+          commentedBy: currentUserId,
+          evaluationId: null, // 필요시 세팅
+          files: data.newFiles
+        })
+
+        if (!res.ok) {
+          throw new Error("Failed to create comment")
+        }
+
+        toast.success("Comment created")
+
+        // 새 코멘트를 다시 불러오거나,
+        // 여기서는 임시로 "새로운 코멘트가 추가됐다" 라고 가정하여 클라이언트에서 상태 업데이트
+        const newComment: TbeComment = {
+          id: res.commentId, // 서버에서 반환된 commentId
+          commentText: data.commentText,
+          commentedBy: currentUserId,
+          createdAt: new Date().toISOString(),
+          attachments: (data.newFiles?.map((f, idx) => ({
+            id: Math.random() * 100000,
+            fileName: f.name,
+            filePath: "/uploads/" + f.name,
+          })) || [])
+        }
+        setComments((prev) => [...prev, newComment])
+        onCommentsUpdated?.([...comments, newComment])
+
+        // 폼 리셋
+        form.reset()
+      } catch (err: any) {
+        console.error(err)
+        toast.error("Error: " + err.message)
+      }
+    })
+  }
+
+  return (
+    <Sheet {...props}>
+      <SheetContent className="flex flex-col gap-6 sm:max-w-lg">
+        <SheetHeader className="text-left">
+          <SheetTitle>Comments</SheetTitle>
+          <SheetDescription>
+            필요시 첨부파일과 함께 문의/코멘트를 남길 수 있습니다.
+          </SheetDescription>
+        </SheetHeader>
+
+        {/* 기존 코멘트 목록 */}
+        <div className="max-h-[300px] overflow-y-auto">
+          {renderExistingComments()}
+        </div>
+
+        {/* 새 코멘트 작성 Form */}
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col gap-4">
+            <FormField
+              control={form.control}
+              name="commentText"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>New Comment</FormLabel>
+                  <FormControl>
+                    <Textarea
+                      placeholder="Enter your comment..."
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {/* Dropzone (파일 첨부) */}
+            <Dropzone
+              maxSize={MAX_FILE_SIZE}
+              onDropAccepted={handleDropAccepted}
+              onDropRejected={(rej) => {
+                toast.error("File rejected: " + (rej[0]?.file?.name || ""))
+              }}
+            >
+              {({ maxSize }) => (
+                <DropzoneZone className="flex justify-center">
+                  <DropzoneInput />
+                  <div className="flex items-center gap-6">
+                    <DropzoneUploadIcon />
+                    <div className="grid gap-0.5">
+                      <DropzoneTitle>Drop to attach files</DropzoneTitle>
+                      <DropzoneDescription>
+                        Max size: {prettyBytes(maxSize || 0)}
+                      </DropzoneDescription>
+                    </div>
+                  </div>
+                </DropzoneZone>
+              )}
+            </Dropzone>
+
+            {/* 선택된 파일 목록 */}
+            {newFileFields.length > 0 && (
+              <div className="flex flex-col gap-2">
+                {newFileFields.map((field, idx) => {
+                  const file = form.getValues(`newFiles.${idx}`)
+                  if (!file) return null
+                  return (
+                    <div key={field.id} className="flex items-center justify-between border rounded p-2">
+                      <span className="text-sm">{file.name} ({prettyBytes(file.size)})</span>
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        type="button"
+                        onClick={() => remove(idx)}
+                      >
+                        <X className="h-4 w-4" />
+                      </Button>
+                    </div>
+                  )
+                })}
+              </div>
+            )}
+
+            <SheetFooter className="gap-2 pt-4">
+              <SheetClose asChild>
+                <Button type="button" variant="outline">
+                  Cancel
+                </Button>
+              </SheetClose>
+              <Button disabled={isPending}>
+                {isPending && <Loader className="mr-2 h-4 w-4 animate-spin" />}
+                Save
+              </Button>
+            </SheetFooter>
+          </form>
+        </Form>
+      </SheetContent>
+    </Sheet>
+  )
+}
\ No newline at end of file
diff --git a/lib/rfqs/tbe-table/feature-flags-provider.tsx b/lib/rfqs/tbe-table/feature-flags-provider.tsx
new file mode 100644
index 00000000..81131894
--- /dev/null
+++ b/lib/rfqs/tbe-table/feature-flags-provider.tsx
@@ -0,0 +1,108 @@
+"use client"
+
+import * as React from "react"
+import { useQueryState } from "nuqs"
+
+import { dataTableConfig, type DataTableConfig } from "@/config/data-table"
+import { cn } from "@/lib/utils"
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+
+type FeatureFlagValue = DataTableConfig["featureFlags"][number]["value"]
+
+interface FeatureFlagsContextProps {
+  featureFlags: FeatureFlagValue[]
+  setFeatureFlags: (value: FeatureFlagValue[]) => void
+}
+
+const FeatureFlagsContext = React.createContext<FeatureFlagsContextProps>({
+  featureFlags: [],
+  setFeatureFlags: () => {},
+})
+
+export function useFeatureFlags() {
+  const context = React.useContext(FeatureFlagsContext)
+  if (!context) {
+    throw new Error(
+      "useFeatureFlags must be used within a FeatureFlagsProvider"
+    )
+  }
+  return context
+}
+
+interface FeatureFlagsProviderProps {
+  children: React.ReactNode
+}
+
+export function FeatureFlagsProvider({ children }: FeatureFlagsProviderProps) {
+  const [featureFlags, setFeatureFlags] = useQueryState<FeatureFlagValue[]>(
+    "flags",
+    {
+      defaultValue: [],
+      parse: (value) => value.split(",") as FeatureFlagValue[],
+      serialize: (value) => value.join(","),
+      eq: (a, b) =>
+        a.length === b.length && a.every((value, index) => value === b[index]),
+      clearOnDefault: true,
+      shallow: false,
+    }
+  )
+
+  return (
+    <FeatureFlagsContext.Provider
+      value={{
+        featureFlags,
+        setFeatureFlags: (value) => void setFeatureFlags(value),
+      }}
+    >
+      <div className="w-full overflow-x-auto">
+        <ToggleGroup
+          type="multiple"
+          variant="outline"
+          size="sm"
+          value={featureFlags}
+          onValueChange={(value: FeatureFlagValue[]) => setFeatureFlags(value)}
+          className="w-fit gap-0"
+        >
+          {dataTableConfig.featureFlags.map((flag, index) => (
+            <Tooltip key={flag.value}>
+              <ToggleGroupItem
+                value={flag.value}
+                className={cn(
+                  "gap-2 whitespace-nowrap rounded-none px-3 text-xs data-[state=on]:bg-accent/70 data-[state=on]:hover:bg-accent/90",
+                  {
+                    "rounded-l-sm border-r-0": index === 0,
+                    "rounded-r-sm":
+                      index === dataTableConfig.featureFlags.length - 1,
+                  }
+                )}
+                asChild
+              >
+                <TooltipTrigger>
+                  <flag.icon className="size-3.5 shrink-0" aria-hidden="true" />
+                  {flag.label}
+                </TooltipTrigger>
+              </ToggleGroupItem>
+              <TooltipContent
+                align="start"
+                side="bottom"
+                sideOffset={6}
+                className="flex max-w-60 flex-col space-y-1.5 border bg-background py-2 font-semibold text-foreground"
+              >
+                <div>{flag.tooltipTitle}</div>
+                <div className="text-xs text-muted-foreground">
+                  {flag.tooltipDescription}
+                </div>
+              </TooltipContent>
+            </Tooltip>
+          ))}
+        </ToggleGroup>
+      </div>
+      {children}
+    </FeatureFlagsContext.Provider>
+  )
+}
diff --git a/lib/rfqs/tbe-table/file-dialog.tsx b/lib/rfqs/tbe-table/file-dialog.tsx
new file mode 100644
index 00000000..1d1a65ea
--- /dev/null
+++ b/lib/rfqs/tbe-table/file-dialog.tsx
@@ -0,0 +1,141 @@
+"use client"
+
+import * as React from "react"
+import { Download, X } from "lucide-react"
+import { toast } from "sonner"
+
+import { getErrorMessage } from "@/lib/handle-error"
+import { formatDateTime } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+
+import {
+  FileList,
+  FileListItem,
+  FileListIcon,
+  FileListInfo,
+  FileListName,
+  FileListDescription,
+  FileListAction,
+} from "@/components/ui/file-list"
+import { getTbeFilesForVendor, getTbeSubmittedFiles } from "../service"
+
+interface TBEFileDialogProps {
+  isOpen: boolean
+  onOpenChange: (open: boolean) => void
+  tbeId: number
+  vendorId: number
+  rfqId: number
+  onRefresh?: () => void
+}
+
+export function TBEFileDialog({
+  isOpen,
+  onOpenChange,
+  vendorId,
+  rfqId,
+  onRefresh,
+}: TBEFileDialogProps) {
+  const [submittedFiles, setSubmittedFiles] = React.useState<any[]>([])
+  const [isFetchingFiles, setIsFetchingFiles] = React.useState(false)
+
+
+  // Fetch submitted files when dialog opens
+  React.useEffect(() => {
+    if (isOpen && rfqId && vendorId) {
+      fetchSubmittedFiles()
+    }
+  }, [isOpen, rfqId, vendorId])
+
+  // Fetch submitted files using the service function
+  const fetchSubmittedFiles = async () => {
+    if (!rfqId || !vendorId) return
+
+    setIsFetchingFiles(true)
+    try {
+      const { files, error } = await getTbeFilesForVendor(rfqId, vendorId)
+      
+      if (error) {
+        throw new Error(error)
+      }
+      
+      setSubmittedFiles(files)
+    } catch (error) {
+      toast.error("Failed to load files: " + getErrorMessage(error))
+    } finally {
+      setIsFetchingFiles(false)
+    }
+  }
+
+  // Download submitted file
+  const downloadSubmittedFile = async (file: any) => {
+    try {
+      const response = await fetch(`/api/file/${file.id}/download`)
+      if (!response.ok) {
+        throw new Error("Failed to download file")
+      }
+
+      const blob = await response.blob()
+      const url = window.URL.createObjectURL(blob)
+      const a = document.createElement("a")
+      a.href = url
+      a.download = file.fileName
+      document.body.appendChild(a)
+      a.click()
+      window.URL.revokeObjectURL(url)
+      document.body.removeChild(a)
+    } catch (error) {
+      toast.error("Failed to download file: " + getErrorMessage(error))
+    }
+  }
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle>TBE 응답 파일</DialogTitle>
+          <DialogDescription>제출된 파일 목록을 확인하고 다운로드하세요.</DialogDescription>
+        </DialogHeader>
+
+        {/* 제출된 파일 목록 */}
+        {isFetchingFiles ? (
+          <div className="flex justify-center items-center py-8">
+            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
+          </div>
+        ) : submittedFiles.length > 0 ? (
+          <div className="grid gap-2">
+            <FileList>
+              {submittedFiles.map((file) => (
+                <FileListItem key={file.id} className="flex items-center justify-between gap-3">
+                  <div className="flex items-center gap-3 flex-1">
+                    <FileListIcon className="flex-shrink-0" />
+                    <FileListInfo className="flex-1 min-w-0">
+                      <FileListName className="text-sm font-medium truncate">{file.fileName}</FileListName>
+                      <FileListDescription className="text-xs text-muted-foreground">
+                        {file.uploadedAt ? formatDateTime(file.uploadedAt) : ""}
+                      </FileListDescription>
+                    </FileListInfo>
+                  </div>
+                  <FileListAction className="flex-shrink-0 ml-2">
+                    <Button variant="ghost" size="icon" onClick={() => downloadSubmittedFile(file)}>
+                      <Download className="h-4 w-4" />
+                      <span className="sr-only">파일 다운로드</span>
+                    </Button>
+                  </FileListAction>
+                </FileListItem>
+              ))}
+            </FileList>
+          </div>
+        ) : (
+          <div className="text-center py-8 text-muted-foreground">제출된 파일이 없습니다.</div>
+        )}
+      </DialogContent>
+    </Dialog>
+  )
+}
\ No newline at end of file
diff --git a/lib/rfqs/tbe-table/invite-vendors-dialog.tsx b/lib/rfqs/tbe-table/invite-vendors-dialog.tsx
new file mode 100644
index 00000000..e38e0ede
--- /dev/null
+++ b/lib/rfqs/tbe-table/invite-vendors-dialog.tsx
@@ -0,0 +1,203 @@
+"use client"
+
+import * as React from "react"
+import { type Row } from "@tanstack/react-table"
+import { Loader, Send } from "lucide-react"
+import { toast } from "sonner"
+
+import { useMediaQuery } from "@/hooks/use-media-query"
+import { Button } from "@/components/ui/button"
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/components/ui/drawer"
+
+import { Input } from "@/components/ui/input"
+
+import { VendorWithTbeFields } from "@/config/vendorTbeColumnsConfig"
+import { inviteTbeVendorsAction } from "../service"
+
+interface InviteVendorsDialogProps
+  extends React.ComponentPropsWithoutRef<typeof Dialog> {
+  vendors: Row<VendorWithTbeFields>["original"][]
+  rfqId: number
+  showTrigger?: boolean
+  onSuccess?: () => void
+}
+
+export function InviteVendorsDialog({
+  vendors,
+  rfqId,
+  showTrigger = true,
+  onSuccess,
+  ...props
+}: InviteVendorsDialogProps) {
+  const [isInvitePending, startInviteTransition] = React.useTransition()
+
+
+  // multiple 파일을 받을 state
+  const [files, setFiles] = React.useState<FileList | null>(null)
+
+  // 미디어쿼리 (desktop 여부)
+  const isDesktop = useMediaQuery("(min-width: 640px)")
+
+  function onInvite() {
+    startInviteTransition(async () => {
+      // 파일이 선택되지 않았다면 에러
+      if (!files || files.length === 0) {
+        toast.error("Please attach TBE files before inviting.")
+        return
+      }
+
+      // FormData 생성
+      const formData = new FormData()
+      formData.append("rfqId", String(rfqId))
+      vendors.forEach((vendor) => {
+        formData.append("vendorIds[]", String(vendor.id))
+      })
+
+      // multiple 파일
+      for (let i = 0; i < files.length; i++) {
+        formData.append("tbeFiles", files[i]) // key는 동일하게 "tbeFiles"
+      }
+
+      // 서버 액션 호출
+      const { error } = await inviteTbeVendorsAction(formData)
+
+      if (error) {
+        toast.error(error)
+        return
+      }
+
+      // 성공
+      props.onOpenChange?.(false)
+      toast.success("Vendors invited with TBE!")
+      onSuccess?.()
+    })
+  }
+
+  // 파일 선택 UI
+  const fileInput = (
+    <div className="mb-4">
+      <label className="mb-2 block font-medium">TBE Sheets</label>
+      <Input
+        type="file"
+        multiple
+        onChange={(e) => {
+          setFiles(e.target.files)
+        }}
+      />
+    </div>
+  )
+
+  // Desktop Dialog
+  if (isDesktop) {
+    return (
+      <Dialog {...props}>
+        {showTrigger ? (
+          <DialogTrigger asChild>
+            <Button variant="outline" size="sm">
+              <Send className="mr-2 size-4" aria-hidden="true" />
+              Invite ({vendors.length})
+            </Button>
+          </DialogTrigger>
+        ) : null}
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Are you absolutely sure?</DialogTitle>
+            <DialogDescription>
+              This action cannot be undone. This will permanently invite{" "}
+              <span className="font-medium">{vendors.length}</span>
+              {vendors.length === 1 ? " vendor" : " vendors"}. 파일 첨부가 필수이므로 파일을 첨부해야지 버튼이 활성화됩니다.
+            </DialogDescription>
+          </DialogHeader>
+
+          {/* 파일 첨부 */}
+          {fileInput}
+
+          <DialogFooter className="gap-2 sm:space-x-0">
+            <DialogClose asChild>
+              <Button variant="outline">Cancel</Button>
+            </DialogClose>
+            <Button
+              aria-label="Invite selected rows"
+              variant="destructive"
+              onClick={onInvite}
+              // 파일이 없거나 초대 진행중이면 비활성화
+              disabled={isInvitePending || !files || files.length === 0}
+            >
+              {isInvitePending && (
+                <Loader
+                  className="mr-2 size-4 animate-spin"
+                  aria-hidden="true"
+                />
+              )}
+              Invite
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    )
+  }
+
+  // Mobile Drawer
+  return (
+    <Drawer {...props}>
+      {showTrigger ? (
+        <DrawerTrigger asChild>
+          <Button variant="outline" size="sm">
+            <Send className="mr-2 size-4" aria-hidden="true" />
+            Invite ({vendors.length})
+          </Button>
+        </DrawerTrigger>
+      ) : null}
+      <DrawerContent>
+        <DrawerHeader>
+          <DrawerTitle>Are you absolutely sure?</DrawerTitle>
+          <DrawerDescription>
+            This action cannot be undone. This will permanently invite{" "}
+            <span className="font-medium">{vendors.length}</span>
+            {vendors.length === 1 ? " vendor" : " vendors"}.
+          </DrawerDescription>
+        </DrawerHeader>
+
+        {/* 파일 첨부 */}
+        {fileInput}
+
+        <DrawerFooter className="gap-2 sm:space-x-0">
+          <DrawerClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </DrawerClose>
+          <Button
+            aria-label="Invite selected rows"
+            variant="destructive"
+            onClick={onInvite}
+            // 파일이 없거나 초대 진행중이면 비활성화
+            disabled={isInvitePending || !files || files.length === 0}
+          >
+            {isInvitePending && (
+              <Loader className="mr-2 size-4 animate-spin" aria-hidden="true" />
+            )}
+            Invite
+          </Button>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  )
+}
\ No newline at end of file
diff --git a/lib/rfqs/tbe-table/tbe-table-columns.tsx b/lib/rfqs/tbe-table/tbe-table-columns.tsx
new file mode 100644
index 00000000..29fbd5cd
--- /dev/null
+++ b/lib/rfqs/tbe-table/tbe-table-columns.tsx
@@ -0,0 +1,307 @@
+"use client"
+
+import * as React from "react"
+import { type DataTableRowAction } from "@/types/table"
+import { type ColumnDef } from "@tanstack/react-table"
+import { Download, Ellipsis, MessageSquare } from "lucide-react"
+import { toast } from "sonner"
+
+import { getErrorMessage } from "@/lib/handle-error"
+import { formatDate } from "@/lib/utils"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Checkbox } from "@/components/ui/checkbox"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header"
+import { useRouter } from "next/navigation"
+
+import {
+  VendorTbeColumnConfig,
+  vendorTbeColumnsConfig,
+  VendorWithTbeFields,
+} from "@/config/vendorTbeColumnsConfig"
+
+type NextRouter = ReturnType<typeof useRouter>
+
+interface GetColumnsProps {
+  setRowAction: React.Dispatch<
+    React.SetStateAction<DataTableRowAction<VendorWithTbeFields> | null>
+  >
+  router: NextRouter
+  openCommentSheet: (vendorId: number) => void
+  openFilesDialog: (tbeId:number , vendorId: number) => void
+}
+
+/**
+ * tanstack table 컬럼 정의 (중첩 헤더 버전)
+ */
+export function getColumns({
+  setRowAction,
+  router,
+  openCommentSheet,
+  openFilesDialog
+}: GetColumnsProps): ColumnDef<VendorWithTbeFields>[] {
+  // ----------------------------------------------------------------
+  // 1) Select 컬럼 (체크박스)
+  // ----------------------------------------------------------------
+  const selectColumn: ColumnDef<VendorWithTbeFields> = {
+    id: "select",
+    header: ({ table }) => (
+      <Checkbox
+        checked={
+          table.getIsAllPageRowsSelected() ||
+          (table.getIsSomePageRowsSelected() && "indeterminate")
+        }
+        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+        aria-label="Select all"
+        className="translate-y-0.5"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={(value) => row.toggleSelected(!!value)}
+        aria-label="Select row"
+        className="translate-y-0.5"
+      />
+    ),
+    size: 40,
+    enableSorting: false,
+    enableHiding: false,
+  }
+
+  // ----------------------------------------------------------------
+  // 2) 그룹화(Nested) 컬럼 구성
+  // ----------------------------------------------------------------
+  const groupMap: Record<string, ColumnDef<VendorWithTbeFields>[]> = {}
+
+  vendorTbeColumnsConfig.forEach((cfg) => {
+    const groupName = cfg.group || "_noGroup"
+    if (!groupMap[groupName]) {
+      groupMap[groupName] = []
+    }
+
+    // childCol: ColumnDef<VendorWithTbeFields>
+    const childCol: ColumnDef<VendorWithTbeFields> = {
+      accessorKey: cfg.id,
+      enableResizing: true,
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title={cfg.label} />
+      ),
+      meta: {
+        excelHeader: cfg.excelHeader,
+        group: cfg.group,
+        type: cfg.type,
+      },
+      // 셀 렌더링
+      cell: ({ row, getValue }) => {
+        // 1) 필드값 가져오기
+        const val = getValue()
+
+        if (cfg.id === "vendorStatus") {
+          const statusVal = row.original.vendorStatus
+          if (!statusVal) return null
+          // const Icon = getStatusIcon(statusVal)
+          return (
+            <Badge variant="outline">
+              {statusVal}
+            </Badge>
+          )
+        }
+
+
+        if (cfg.id === "rfqVendorStatus") {
+          const statusVal = row.original.rfqVendorStatus
+          if (!statusVal) return null
+          // const Icon = getStatusIcon(statusVal)
+          const variant = statusVal ==="INVITED"?"default" :statusVal ==="DECLINED"?"destructive":statusVal ==="ACCEPTED"?"secondary":"outline"
+          return (
+            <Badge variant={variant}>
+              {statusVal}
+            </Badge>
+          )
+        }
+
+        // 예) TBE Updated (날짜)
+        if (cfg.id === "tbeUpdated") {
+          const dateVal = val as Date | undefined
+          if (!dateVal) return null
+          return formatDate(dateVal)
+        }
+
+        // 그 외 필드는 기본 값 표시
+        return val ?? ""
+      },
+    }
+
+    groupMap[groupName].push(childCol)
+  })
+
+  // groupMap → nestedColumns
+  const nestedColumns: ColumnDef<VendorWithTbeFields>[] = []
+  Object.entries(groupMap).forEach(([groupName, colDefs]) => {
+    if (groupName === "_noGroup") {
+      nestedColumns.push(...colDefs)
+    } else {
+      nestedColumns.push({
+        id: groupName,
+        header: groupName,
+        columns: colDefs,
+      })
+    }
+  })
+
+// ----------------------------------------------------------------
+// 3) Comments 컬럼
+// ----------------------------------------------------------------
+const commentsColumn: ColumnDef<VendorWithTbeFields> = {
+  id: "comments",
+  header: ({ column }) => (
+    <DataTableColumnHeaderSimple column={column} title="Comments" />
+  ),
+  cell: ({ row }) => {
+    const vendor = row.original
+    const commCount = vendor.comments?.length ?? 0
+
+    function handleClick() {
+      // rowAction + openCommentSheet
+      setRowAction({ row, type: "comments" })
+      openCommentSheet(vendor.tbeId ?? 0)
+    }
+
+    return (
+      <div className="flex items-center justify-center">
+        <Button
+          variant="ghost"
+          size="sm"
+          className="h-8 w-8 p-0 group relative"
+          onClick={handleClick}
+          aria-label={commCount > 0 ? `View ${commCount} comments` : "Add comment"}
+        >
+          <div className="flex items-center justify-center relative">
+            {commCount > 0 ? (
+              <>
+                <MessageSquare className="h-4 w-4 text-muted-foreground group-hover:text-primary transition-colors" />
+                <Badge 
+                  variant="secondary" 
+                  className="absolute -top-2 -right-2 h-4 min-w-4 text-xs px-1 flex items-center justify-center"
+                >
+                  {commCount}
+                </Badge>
+              </>
+            ) : (
+              <MessageSquare className="h-4 w-4 text-muted-foreground group-hover:text-primary transition-colors" />
+            )}
+          </div>
+          <span className="sr-only">{commCount > 0 ? `${commCount} Comments` : "Add Comment"}</span>
+        </Button>
+        {/* <span className="ml-2 text-sm text-muted-foreground hover:text-foreground transition-colors cursor-pointer" onClick={handleClick}>
+          {commCount > 0 ? `${commCount} Comments` : "Add Comment"}
+        </span> */}
+      </div>
+    )
+  },
+  enableSorting: false,
+  maxSize:80
+}
+
+  // ----------------------------------------------------------------
+  // 4) Actions 컬럼 (예: 초대하기 버튼)
+  // ----------------------------------------------------------------
+  // const actionsColumn: ColumnDef<VendorWithTbeFields> = {
+  //   id: "actions",
+  //   cell: ({ row }) => {
+  //     const status = row.original.tbeResult
+  //     // 예: 만약 tbeResult가 없을 때만 초대하기 버튼 표시
+  //     if (status) {
+  //       return null
+  //     }
+
+  //     return (
+  //       <Button
+  //         onClick={() => setRowAction({ row, type: "invite" })}
+  //         size="sm"
+  //         variant="outline"
+  //       >
+  //         발행하기
+  //       </Button>
+  //     )
+  //   },
+  //   size: 80,
+  //   enableSorting: false,
+  //   enableHiding: false,
+  // }
+// ----------------------------------------------------------------
+// 3) Files Column - Add before Comments column
+// ----------------------------------------------------------------
+const filesColumn: ColumnDef<VendorWithTbeFields> = {
+  id: "files",
+  header: ({ column }) => (
+    <DataTableColumnHeaderSimple column={column} title="Response Files" />
+  ),
+  cell: ({ row }) => {
+    const vendor = row.original
+    // We'll assume that files count will be populated from the backend
+    // You'll need to modify your getTBE function to include files 
+    const filesCount = vendor.files?.length ?? 0
+
+    function handleClick() {
+      // Open files dialog
+      setRowAction({ row, type: "files" })
+      openFilesDialog(vendor.tbeId ?? 0, vendor.vendorId ?? 0)
+    }
+
+    return (
+      <div className="flex items-center justify-center">
+<Button
+  variant="ghost"
+  size="sm"
+  className="relative h-8 w-8 p-0 group"
+  onClick={handleClick}
+  aria-label={filesCount > 0 ? `View ${filesCount} files` : "Upload file"}
+>
+  {/* 아이콘: 중앙 정렬을 위해 Button 자체가 flex container */}
+  <Download className="h-4 w-4 text-muted-foreground group-hover:text-primary transition-colors" />
+
+  {/* 파일 개수가 1개 이상이면 뱃지 표시 */}
+  {filesCount > 0 && (
+    <Badge
+      variant="secondary"
+      className="pointer-events-none absolute -top-1 -right-1 h-4 min-w-[1rem] p-0 text-[0.625rem] leading-none flex items-center justify-center"
+    >
+      {filesCount}
+    </Badge>
+  )}
+
+  <span className="sr-only">
+    {filesCount > 0 ? `${filesCount} Files` : "Upload File"}
+  </span>
+</Button>
+      </div>
+    )
+  },
+  enableSorting: false,
+  maxSize: 80
+}
+
+// ----------------------------------------------------------------
+// 5) 최종 컬럼 배열 - Update to include the files column
+// ----------------------------------------------------------------
+return [
+  selectColumn,
+  ...nestedColumns,
+  filesColumn,  // Add the files column before comments
+  commentsColumn,
+  // actionsColumn,
+]
+
+}
\ No newline at end of file
diff --git a/lib/rfqs/tbe-table/tbe-table-toolbar-actions.tsx b/lib/rfqs/tbe-table/tbe-table-toolbar-actions.tsx
new file mode 100644
index 00000000..6a336135
--- /dev/null
+++ b/lib/rfqs/tbe-table/tbe-table-toolbar-actions.tsx
@@ -0,0 +1,60 @@
+"use client"
+
+import * as React from "react"
+import { type Table } from "@tanstack/react-table"
+import { Download, Upload } from "lucide-react"
+import { toast } from "sonner"
+
+import { exportTableToExcel } from "@/lib/export"
+import { Button } from "@/components/ui/button"
+
+
+import { InviteVendorsDialog } from "./invite-vendors-dialog"
+import {  VendorWithTbeFields } from "@/config/vendorTbeColumnsConfig"
+
+interface VendorsTableToolbarActionsProps {
+  table: Table<VendorWithTbeFields>
+  rfqId: number
+}
+
+export function VendorsTableToolbarActions({ table,rfqId }: VendorsTableToolbarActionsProps) {
+  // 파일 input을 숨기고, 버튼 클릭 시 참조해 클릭하는 방식
+  const fileInputRef = React.useRef<HTMLInputElement>(null)
+
+  // 파일이 선택되었을 때 처리
+
+  function handleImportClick() {
+    // 숨겨진 <input type="file" /> 요소를 클릭
+    fileInputRef.current?.click()
+  }
+
+  return (
+    <div className="flex items-center gap-2">
+      {table.getFilteredSelectedRowModel().rows.length > 0 ? (
+        <InviteVendorsDialog
+          vendors={table
+            .getFilteredSelectedRowModel()
+            .rows.map((row) => row.original)}
+          rfqId = {rfqId}
+          onSuccess={() => table.toggleAllRowsSelected(false)}
+        />
+      ) : null}
+
+    
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={() =>
+          exportTableToExcel(table, {
+            filename: "tasks",
+            excludeColumns: ["select", "actions"],
+          })
+        }
+        className="gap-2"
+      >
+        <Download className="size-4" aria-hidden="true" />
+        <span className="hidden sm:inline">Export</span>
+      </Button>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/lib/rfqs/tbe-table/tbe-table.tsx b/lib/rfqs/tbe-table/tbe-table.tsx
new file mode 100644
index 00000000..c385ca0b
--- /dev/null
+++ b/lib/rfqs/tbe-table/tbe-table.tsx
@@ -0,0 +1,190 @@
+"use client"
+
+import * as React from "react"
+import { useRouter } from "next/navigation"
+import type {
+  DataTableAdvancedFilterField,
+  DataTableFilterField,
+  DataTableRowAction,
+} from "@/types/table"
+
+import { toSentenceCase } from "@/lib/utils"
+import { useDataTable } from "@/hooks/use-data-table"
+import { DataTable } from "@/components/data-table/data-table"
+import { DataTableAdvancedToolbar } from "@/components/data-table/data-table-advanced-toolbar"
+import { useFeatureFlags } from "./feature-flags-provider"
+import { getColumns } from "./tbe-table-columns"
+import { Vendor, vendors } from "@/db/schema/vendors"
+import { VendorsTableToolbarActions } from "./tbe-table-toolbar-actions"
+import { fetchRfqAttachmentsbyCommentId, getTBE } from "../service"
+import { InviteVendorsDialog } from "./invite-vendors-dialog"
+import { CommentSheet, TbeComment } from "./comments-sheet"
+import { VendorWithTbeFields } from "@/config/vendorTbeColumnsConfig"
+import { TBEFileDialog } from "./file-dialog"
+
+interface VendorsTableProps {
+  promises: Promise<
+    [
+      Awaited<ReturnType<typeof getTBE>>,
+    ]
+  >
+  rfqId: number
+}
+
+
+export function TbeTable({ promises, rfqId }: VendorsTableProps) {
+  const { featureFlags } = useFeatureFlags()
+
+  // Suspense로 받아온 데이터
+  const [{ data, pageCount }] = React.use(promises)
+
+  console.log(data)
+
+  const [rowAction, setRowAction] = React.useState<DataTableRowAction<VendorWithTbeFields> | null>(null)
+
+  // **router** 획득
+  const router = useRouter()
+
+  const [initialComments, setInitialComments] = React.useState<TbeComment[]>([])
+  const [commentSheetOpen, setCommentSheetOpen] = React.useState(false)
+  const [selectedRfqIdForComments, setSelectedRfqIdForComments] = React.useState<number | null>(null)
+  
+  const [isFileDialogOpen, setIsFileDialogOpen] = React.useState(false)
+  const [selectedVendorId, setSelectedVendorId] = React.useState<number | null>(null)
+  const [selectedTbeId, setSelectedTbeId] = React.useState<number | null>(null)
+
+  console.log(selectedVendorId,"selectedVendorId")
+  console.log(rfqId,"rfqId")
+
+  // Add handleRefresh function
+  const handleRefresh = React.useCallback(() => {
+    router.refresh();
+  }, [router]);
+
+  React.useEffect(() => {
+    if (rowAction?.type === "comments") {
+      // rowAction가 새로 세팅된 뒤 여기서 openCommentSheet 실행
+      openCommentSheet(Number(rowAction.row.original.id))
+    } else if (rowAction?.type === "files") {
+      // Handle files action
+      const vendorId = rowAction.row.original.vendorId;
+      const tbeId = rowAction.row.original.tbeId ?? 0;
+      openFilesDialog(tbeId, vendorId);
+    }
+  }, [rowAction])
+
+  async function openCommentSheet(vendorId: number) {
+    setInitialComments([])
+
+    const comments = rowAction?.row.original.comments
+
+    if (comments && comments.length > 0) {
+      const commentWithAttachments: TbeComment[] = await Promise.all(
+        comments.map(async (c) => {
+          const attachments = await fetchRfqAttachmentsbyCommentId(c.id)
+
+          return {
+            ...c,
+            commentedBy: 1, // DB나 API 응답에 있다고 가정
+            attachments,
+          }
+        })
+      )
+      // 3) state에 저장 -> CommentSheet에서 initialComments로 사용
+      setInitialComments(commentWithAttachments)
+    }
+
+    setSelectedRfqIdForComments(vendorId)
+    setCommentSheetOpen(true)
+  }
+
+  const openFilesDialog = (tbeId: number, vendorId: number) => {
+    setSelectedTbeId(tbeId)
+    setSelectedVendorId(vendorId)
+    setIsFileDialogOpen(true)
+  }
+
+
+  // getColumns() 호출 시, router를 주입
+  const columns = React.useMemo(
+    () => getColumns({ setRowAction, router, openCommentSheet, openFilesDialog }),
+    [setRowAction, router]
+  )
+
+  const filterFields: DataTableFilterField<VendorWithTbeFields>[] = [
+  ]
+
+  const advancedFilterFields: DataTableAdvancedFilterField<VendorWithTbeFields>[] = [
+    { id: "vendorName", label: "Vendor Name", type: "text" },
+    { id: "vendorCode", label: "Vendor Code", type: "text" },
+    { id: "email", label: "Email", type: "text" },
+    { id: "country", label: "Country", type: "text" },
+    {
+      id: "vendorStatus",
+      label: "Vendor Status",
+      type: "multi-select",
+      options: vendors.status.enumValues.map((status) => ({
+        label: toSentenceCase(status),
+        value: status,
+      })),
+    },
+    { id: "rfqVendorUpdated", label: "Updated at", type: "date" },
+  ]
+
+
+  const { table } = useDataTable({
+    data,
+    columns,
+    pageCount,
+    filterFields,
+    enablePinning: true,
+    enableAdvancedFilter: true,
+    initialState: {
+      sorting: [{ id: "rfqVendorUpdated", desc: true }],
+      columnPinning: { right: ["actions"] },
+    },
+    getRowId: (originalRow) => String(originalRow.id),
+    shallow: false,
+    clearOnDefault: true,
+  })
+
+  return (
+    <>
+      <DataTable
+        table={table}
+      >
+        <DataTableAdvancedToolbar
+          table={table}
+          filterFields={advancedFilterFields}
+          shallow={false}
+        >
+          <VendorsTableToolbarActions table={table} rfqId={rfqId} />
+        </DataTableAdvancedToolbar>
+      </DataTable>
+      <InviteVendorsDialog
+        vendors={rowAction?.row.original ? [rowAction?.row.original] : []}
+        onOpenChange={() => setRowAction(null)}
+        rfqId={rfqId}
+        open={rowAction?.type === "invite"}
+        showTrigger={false}
+      />
+      <CommentSheet
+        currentUserId={1}
+        open={commentSheetOpen}
+        onOpenChange={setCommentSheetOpen}
+        rfqId={rfqId}
+        vendorId={selectedRfqIdForComments ?? 0}
+        initialComments={initialComments}
+      />
+
+      <TBEFileDialog
+        isOpen={isFileDialogOpen}
+        onOpenChange={setIsFileDialogOpen}
+        tbeId={selectedTbeId ?? 0}
+        vendorId={selectedVendorId ?? 0}
+        rfqId={rfqId} // Use the prop directly instead of data[0]?.rfqId
+        onRefresh={handleRefresh}
+      />
+    </>
+  )
+}
\ No newline at end of file
diff --git a/lib/rfqs/validations.ts b/lib/rfqs/validations.ts
new file mode 100644
index 00000000..369e426c
--- /dev/null
+++ b/lib/rfqs/validations.ts
@@ -0,0 +1,274 @@
+import { createSearchParamsCache,
+  parseAsArrayOf,
+  parseAsInteger,
+  parseAsString,
+  parseAsStringEnum,
+} from "nuqs/server"
+import * as z from "zod"
+
+import { getFiltersStateParser, getSortingStateParser } from "@/lib/parsers"
+import { Rfq, rfqs,  RfqsView,   VendorCbeView,   VendorRfqViewBase, VendorTbeView } from "@/db/schema/rfq";
+import { Vendor, vendors } from "@/db/schema/vendors";
+
+export const RfqType = {
+  PURCHASE: "PURCHASE",
+  BUDGETARY: "BUDGETARY"
+} as const;
+
+export type RfqType = typeof RfqType[keyof typeof RfqType];
+
+// =======================
+// 1) SearchParams (목록 필터링/정렬)
+// =======================
+export const searchParamsCache = createSearchParamsCache({
+  flags: parseAsArrayOf(z.enum(["advancedTable", "floatingBar"])).withDefault([]),
+  page: parseAsInteger.withDefault(1),
+  perPage: parseAsInteger.withDefault(10),
+  sort: getSortingStateParser<RfqsView>().withDefault([
+    { id: "createdAt", desc: true },
+  ]),
+
+  // 간단 검색 필드
+  rfqCode: parseAsString.withDefault(""),
+  projectCode: parseAsString.withDefault(""),
+  projectName: parseAsString.withDefault(""),
+  dueDate: parseAsString.withDefault(""),
+
+  // 상태 - 여러 개일 수 있다고 가정
+  status: parseAsArrayOf(z.enum(rfqs.status.enumValues)).withDefault([]),
+
+  // 고급 필터
+  filters: getFiltersStateParser().withDefault([]),
+  joinOperator: parseAsStringEnum(["and", "or"]).withDefault("and"),
+  search: parseAsString.withDefault(""),
+  rfqType: parseAsStringEnum(["PURCHASE", "BUDGETARY"]).withDefault("PURCHASE"),
+
+});
+
+export type GetRfqsSchema = Awaited<ReturnType<typeof searchParamsCache.parse>>;
+
+
+export const searchParamsMatchedVCache = createSearchParamsCache({
+  // 1) 공통 플래그
+  flags: parseAsArrayOf(z.enum(["advancedTable", "floatingBar"])).withDefault([]),
+
+  // 2) 페이지네이션
+  page: parseAsInteger.withDefault(1),
+  perPage: parseAsInteger.withDefault(10),
+
+  // 3) 정렬 (Rfq 테이블)
+  // getSortingStateParser<Rfq>() → Rfq 테이블의 컬럼명에 맞춘 유효성 검사
+  sort: getSortingStateParser<VendorRfqViewBase>().withDefault([
+    { id: "rfqVendorUpdated", desc: true },
+  ]),
+
+  // 4) 간단 검색 필드
+  vendorName: parseAsString.withDefault(""),
+  vendorCode: parseAsString.withDefault(""),
+  country: parseAsString.withDefault(""),
+  email: parseAsString.withDefault(""),
+  website: parseAsString.withDefault(""),
+
+  // 5) 상태 (배열) - Rfq["status"]는 "DRAFT"|"PUBLISHED"|"EVALUATION"|"AWARDED"
+  // rfqs.status.enumValues 로 가져온 문자열 배열을 z.enum([...])로 처리
+  vendorStatus: parseAsArrayOf(z.enum(vendors.status.enumValues)).withDefault([]),
+
+  // 6) 고급 필터 (nuqs - filterColumns)
+  filters: getFiltersStateParser().withDefault([]),
+  joinOperator: parseAsStringEnum(["and", "or"]).withDefault("and"),
+
+  // 7) 글로벌 검색어
+  search: parseAsString.withDefault(""),
+})
+export type GetMatchedVendorsSchema = Awaited<ReturnType<typeof searchParamsMatchedVCache.parse>>;
+
+export const searchParamsTBECache = createSearchParamsCache({
+  // 1) 공통 플래그
+  flags: parseAsArrayOf(z.enum(["advancedTable", "floatingBar"])).withDefault([]),
+
+  // 2) 페이지네이션
+  page: parseAsInteger.withDefault(1),
+  perPage: parseAsInteger.withDefault(10),
+
+  // 3) 정렬 (Rfq 테이블)
+  // getSortingStateParser<Rfq>() → Rfq 테이블의 컬럼명에 맞춘 유효성 검사
+  sort: getSortingStateParser<VendorTbeView>().withDefault([
+    { id: "tbeUpdated", desc: true },
+  ]),
+
+  // 4) 간단 검색 필드
+  vendorName: parseAsString.withDefault(""),
+  vendorCode: parseAsString.withDefault(""),
+  country: parseAsString.withDefault(""),
+  email: parseAsString.withDefault(""),
+  website: parseAsString.withDefault(""),
+
+  tbeResult: parseAsString.withDefault(""),
+  tbeNote: parseAsString.withDefault(""),
+  tbeUpdated: parseAsString.withDefault(""),
+  rfqType: parseAsStringEnum(["PURCHASE", "BUDGETARY"]).withDefault("PURCHASE"),
+
+  // 5) 상태 (배열) - Rfq["status"]는 "DRAFT"|"PUBLISHED"|"EVALUATION"|"AWARDED"
+  // rfqs.status.enumValues 로 가져온 문자열 배열을 z.enum([...])로 처리
+  vendorStatus: parseAsArrayOf(z.enum(vendors.status.enumValues)).withDefault([]),
+
+  // 6) 고급 필터 (nuqs - filterColumns)
+  filters: getFiltersStateParser().withDefault([]),
+  joinOperator: parseAsStringEnum(["and", "or"]).withDefault("and"),
+
+  // 7) 글로벌 검색어
+  search: parseAsString.withDefault(""),
+})
+export type GetTBESchema = Awaited<ReturnType<typeof searchParamsTBECache.parse>>;
+
+// =======================
+// 2) Create RFQ Schema
+// =======================
+export const createRfqSchema = z.object({
+  rfqCode: z.string().min(3, "RFQ 코드는 최소 3글자 이상이어야 합니다"),
+  description: z.string().optional(),
+  projectId: z.number().nullable().optional(), // 프로젝트 ID (선택적)
+  parentRfqId: z.number().nullable().optional(), // 부모 RFQ ID (선택적)
+  dueDate: z.date(),
+  status: z.enum(["DRAFT", "PUBLISHED", "EVALUATION", "AWARDED"]),
+  rfqType: z.enum([RfqType.PURCHASE, RfqType.BUDGETARY]).default(RfqType.PURCHASE),
+  createdBy: z.number(),
+});
+
+export type CreateRfqSchema = z.infer<typeof createRfqSchema>;
+
+export const createRfqItemSchema = z.object({
+  rfqId: z.number().int().min(1, "Invalid RFQ ID"),
+  itemCode: z.string().min(1),
+  itemName: z.string().optional(),
+  description: z.string().optional(),
+  quantity: z.number().min(1).optional(),
+  uom: z.string().optional(),
+  rfqType: z.string().default("PURCHASE"), // rfqType 필드 추가
+
+});
+
+export type CreateRfqItemSchema = z.infer<typeof createRfqItemSchema>;
+
+// =======================
+// 3) Update RFQ Schema
+// (현재 코드엔 updateTaskSchema라고 되어 있는데,
+//  RFQ 업데이트이므로 'updateRfqSchema'라 명명하는 게 자연스러움)
+// =======================
+export const updateRfqSchema = z.object({
+  // PK id -> 실제로는 URL params로 받을 수도 있지만,
+  // 여기서는 body에서 받는다고 가정
+  id: z.number().int().min(1, "Invalid ID"),
+
+  // 업데이트 시 대부분 optional
+  rfqCode: z.string().max(50).optional(),
+  projectId: z.number().nullable().optional(), // null 값도 허용
+  description: z.string().optional(),
+  parentRfqId: z.number().nullable().optional(), // 부모 RFQ ID (선택적)
+  dueDate: z.preprocess(
+    // null이나 빈 문자열을 undefined로 변환
+    (val) => (val === null || val === '') ? undefined : val,
+    z.date().optional()
+  ),
+  status: z.union([
+    z.enum(["DRAFT", "PUBLISHED", "EVALUATION", "AWARDED"]),
+    z.string().refine(
+      (val) => ["DRAFT", "PUBLISHED", "EVALUATION", "AWARDED"].includes(val),
+      { message: "Invalid status value" }
+    )
+  ]).optional(),
+  createdBy: z.number().int().min(1).optional(),
+});
+export type UpdateRfqSchema = z.infer<typeof updateRfqSchema>;
+
+export const searchParamsRfqsForVendorsCache = createSearchParamsCache({
+  // 1) 공통 플래그
+  flags: parseAsArrayOf(z.enum(["advancedTable", "floatingBar"])).withDefault([]),
+
+  // 2) 페이지네이션
+  page: parseAsInteger.withDefault(1),
+  perPage: parseAsInteger.withDefault(10),
+
+  // 3) 정렬 (rfqs 테이블)
+  sort: getSortingStateParser<Rfq>().withDefault([
+    { id: "createdAt", desc: true },
+  ]),
+
+  // 4) 간단 검색 필드 (예: rfqCode, projectName, projectCode 등)
+  rfqCode: parseAsString.withDefault(""),
+  projectCode: parseAsString.withDefault(""),
+  projectName: parseAsString.withDefault(""),
+
+  // 5) 상태 배열 (rfqs.status.enumValues: "DRAFT" | "PUBLISHED" | ...)
+  status: parseAsArrayOf(z.enum(rfqs.status.enumValues)).withDefault([]),
+
+  // 6) 고급 필터 (nuqs filterColumns)
+  filters: getFiltersStateParser().withDefault([]),
+  joinOperator: parseAsStringEnum(["and", "or"]).withDefault("and"),
+
+  // 7) 글로벌 검색어
+  search: parseAsString.withDefault(""),
+})
+
+/** 
+ * 최종 타입 
+ * `Awaited<ReturnType<...parse>>` 형태로 
+ * Next.js 13 서버 액션이나 클라이언트에서 사용 가능 
+ */
+export type GetRfqsForVendorsSchema = Awaited<ReturnType<typeof searchParamsRfqsForVendorsCache.parse>>
+
+export const updateRfqVendorSchema = z.object({
+  id: z.number().int().min(1, "Invalid ID"),    // rfq_vendors.id
+  status: z.enum(["INVITED","ACCEPTED","DECLINED","REVIEWING", "RESPONDED"])
+})
+
+export type UpdateRfqVendorSchema = z.infer<typeof updateRfqVendorSchema>
+
+
+
+
+export const searchParamsCBECache = createSearchParamsCache({
+  // 1) 공통 플래그
+  flags: parseAsArrayOf(z.enum(["advancedTable", "floatingBar"])).withDefault([]),
+
+  // 2) 페이지네이션
+  page: parseAsInteger.withDefault(1),
+  perPage: parseAsInteger.withDefault(10),
+
+  // 3) 정렬 (Rfq 테이블)
+  // getSortingStateParser<Rfq>() → Rfq 테이블의 컬럼명에 맞춘 유효성 검사
+  sort: getSortingStateParser<VendorCbeView>().withDefault([
+    { id: "cbeUpdated", desc: true },
+  ]),
+
+  // 4) 간단 검색 필드
+  vendorName: parseAsString.withDefault(""),
+  vendorCode: parseAsString.withDefault(""),
+  country: parseAsString.withDefault(""),
+  email: parseAsString.withDefault(""),
+  website: parseAsString.withDefault(""),
+
+  cbeResult: parseAsString.withDefault(""),
+  cbeNote: parseAsString.withDefault(""),
+  cbeUpdated: parseAsString.withDefault(""),
+  rfqType: parseAsStringEnum(["PURCHASE", "BUDGETARY"]).withDefault("PURCHASE"),
+
+
+  totalCost: parseAsInteger.withDefault(0),
+  currency: parseAsString.withDefault(""),
+  paymentTerms: parseAsString.withDefault(""),
+  incoterms: parseAsString.withDefault(""),
+  deliverySchedule: parseAsString.withDefault(""),
+
+  // 5) 상태 (배열) - Rfq["status"]는 "DRAFT"|"PUBLISHED"|"EVALUATION"|"AWARDED"
+  // rfqs.status.enumValues 로 가져온 문자열 배열을 z.enum([...])로 처리
+  vendorStatus: parseAsArrayOf(z.enum(vendors.status.enumValues)).withDefault([]),
+
+  // 6) 고급 필터 (nuqs - filterColumns)
+  filters: getFiltersStateParser().withDefault([]),
+  joinOperator: parseAsStringEnum(["and", "or"]).withDefault("and"),
+
+  // 7) 글로벌 검색어
+  search: parseAsString.withDefault(""),
+})
+export type GetCBESchema = Awaited<ReturnType<typeof searchParamsCBECache.parse>>;
diff --git a/lib/rfqs/vendor-table/add-vendor-dialog.tsx b/lib/rfqs/vendor-table/add-vendor-dialog.tsx
new file mode 100644
index 00000000..8ec5b9f4
--- /dev/null
+++ b/lib/rfqs/vendor-table/add-vendor-dialog.tsx
@@ -0,0 +1,37 @@
+"use client"
+
+import * as React from "react"
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import { VendorsListTable } from "./vendor-list/vendor-list-table"
+
+interface VendorsListTableProps {
+    rfqId: number  // so we know which RFQ to insert into
+  }
+  
+
+/**
+ * A dialog that contains a client-side table or infinite scroll
+ * for "all vendors," allowing the user to select vendors and add them to the RFQ.
+ */
+export function AddVendorDialog({ rfqId }: VendorsListTableProps) {
+    const [open, setOpen] = React.useState(false)
+
+    return (
+        <Dialog open={open} onOpenChange={setOpen}>
+            <DialogTrigger asChild>
+                <Button size="sm">
+                    Add Vendor
+                </Button>
+            </DialogTrigger>
+            <DialogContent className="max-w-[90wv]  sm:max-h-[80vh] overflow-auto" style={{maxWidth:1600, height:680}}>
+                <DialogHeader>
+                    <DialogTitle>Add Vendor to RFQ</DialogTitle>
+                </DialogHeader>
+
+                <VendorsListTable rfqId={rfqId}/>
+
+            </DialogContent>
+        </Dialog>
+    )
+}
\ No newline at end of file
diff --git a/lib/rfqs/vendor-table/comments-sheet.tsx b/lib/rfqs/vendor-table/comments-sheet.tsx
new file mode 100644
index 00000000..644869c6
--- /dev/null
+++ b/lib/rfqs/vendor-table/comments-sheet.tsx
@@ -0,0 +1,303 @@
+"use client"
+
+import * as React from "react"
+import { useForm, useFieldArray } from "react-hook-form"
+import { z } from "zod"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Loader, Download, X } from "lucide-react"
+import prettyBytes from "pretty-bytes"
+import { toast } from "sonner"
+
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet"
+import { Button } from "@/components/ui/button"
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form"
+import { Textarea } from "@/components/ui/textarea"
+import {
+  Dropzone,
+  DropzoneZone,
+  DropzoneUploadIcon,
+  DropzoneTitle,
+  DropzoneDescription,
+  DropzoneInput,
+} from "@/components/ui/dropzone"
+import {
+  Table,
+  TableHeader,
+  TableRow,
+  TableHead,
+  TableBody,
+  TableCell,
+} from "@/components/ui/table"
+
+import { createRfqCommentWithAttachments } from "../service"
+import { formatDate } from "@/lib/utils"
+
+
+export interface MatchedVendorComment {
+  id: number
+  commentText: string
+  commentedBy?: number
+  createdAt?:  Date
+  attachments?: {
+    id: number
+    fileName: string
+    filePath: string
+  }[]
+}
+
+// 1) props 정의
+interface CommentSheetProps extends React.ComponentPropsWithRef<typeof Sheet> {
+  initialComments?: MatchedVendorComment[]
+  currentUserId: number
+  rfqId: number
+  vendorId: number
+  onCommentsUpdated?: (comments: MatchedVendorComment[]) => void
+}
+
+// 2) 폼 스키마
+const commentFormSchema = z.object({
+  commentText: z.string().min(1, "댓글을 입력하세요."),
+  newFiles: z.array(z.any()).optional(), // File[]
+})
+type CommentFormValues = z.infer<typeof commentFormSchema>
+
+const MAX_FILE_SIZE = 30e6 // 30MB
+
+export function CommentSheet({
+  rfqId,
+  vendorId,
+  initialComments = [],
+  currentUserId,
+  onCommentsUpdated,
+  ...props
+}: CommentSheetProps) {
+  const [comments, setComments] = React.useState<MatchedVendorComment[]>(initialComments)
+  const [isPending, startTransition] = React.useTransition()
+
+  React.useEffect(() => {
+    setComments(initialComments)
+  }, [initialComments])
+
+  const form = useForm<CommentFormValues>({
+    resolver: zodResolver(commentFormSchema),
+    defaultValues: {
+      commentText: "",
+      newFiles: [],
+    },
+  })
+
+  const { fields: newFileFields, append, remove } = useFieldArray({
+    control: form.control,
+    name: "newFiles",
+  })
+
+  // (A) 기존 코멘트 렌더링
+  function renderExistingComments() {
+    if (comments.length === 0) {
+      return <p className="text-sm text-muted-foreground">No comments yet</p>
+    }
+    return (
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead className="w-1/2">Comment</TableHead>
+            <TableHead>Attachments</TableHead>
+            <TableHead>Created At</TableHead>
+            <TableHead>Created By</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {comments.map((c) => ( 
+            <TableRow key={c.id}>
+              <TableCell>{c.commentText}</TableCell>
+              <TableCell>
+                {!c.attachments?.length && (
+                  <span className="text-sm text-muted-foreground">No files</span>
+                )}
+                {c.attachments?.length && (
+                  <div className="flex flex-col gap-1">
+                    {c.attachments.map((att) => (
+                      <div key={att.id} className="flex items-center gap-2">
+                        <a
+                          href={att.filePath}
+                          download
+                          target="_blank"
+                          rel="noreferrer"
+                          className="inline-flex items-center gap-1 text-blue-600 underline"
+                        >
+                          <Download className="h-4 w-4" />
+                          {att.fileName}
+                        </a>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </TableCell>
+              <TableCell> { c.createdAt ? formatDate(c.createdAt): "-"}</TableCell>
+              <TableCell>{c.commentedBy ?? "-"}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    )
+  }
+
+  // (B) 파일 드롭
+  function handleDropAccepted(files: File[]) {
+    append(files)
+  }
+
+  // (C) Submit
+  async function onSubmit(data: CommentFormValues) {
+    if (!rfqId) return
+    startTransition(async () => {
+      try {
+        const res = await createRfqCommentWithAttachments({
+          rfqId,
+          vendorId,
+          commentText: data.commentText,
+          commentedBy: currentUserId,
+          evaluationId: null,
+          files: data.newFiles,
+        })
+
+        if (!res.ok) {
+          throw new Error("Failed to create comment")
+        }
+
+        toast.success("Comment created")
+
+        // 임시로 새 코멘트 추가
+        const newComment: MatchedVendorComment = {
+          id: res.commentId, // 서버 응답
+          commentText: data.commentText,
+          commentedBy: currentUserId,
+          createdAt: res.createdAt,
+          attachments:
+            data.newFiles?.map((f) => ({
+              id: Math.floor(Math.random() * 1e6),
+              fileName: f.name,
+              filePath: "/uploads/" + f.name,
+            })) || [],
+        }
+        setComments((prev) => [...prev, newComment])
+        onCommentsUpdated?.([...comments, newComment])
+
+        form.reset()
+      } catch (err: any) {
+        console.error(err)
+        toast.error("Error: " + err.message)
+      }
+    })
+  }
+
+  return (
+    <Sheet {...props}>
+      <SheetContent className="flex flex-col gap-6 sm:max-w-lg">
+        <SheetHeader className="text-left">
+          <SheetTitle>Comments</SheetTitle>
+          <SheetDescription>
+            필요시 첨부파일과 함께 문의/코멘트를 남길 수 있습니다.
+          </SheetDescription>
+        </SheetHeader>
+
+        <div className="max-h-[300px] overflow-y-auto">{renderExistingComments()}</div>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col gap-4">
+            <FormField
+              control={form.control}
+              name="commentText"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>New Comment</FormLabel>
+                  <FormControl>
+                    <Textarea placeholder="Enter your comment..." {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <Dropzone
+              maxSize={MAX_FILE_SIZE}
+              onDropAccepted={handleDropAccepted}
+              onDropRejected={(rej) => {
+                toast.error("File rejected: " + (rej[0]?.file?.name || ""))
+              }}
+            >
+              {({ maxSize }) => (
+                <DropzoneZone className="flex justify-center">
+                  <DropzoneInput />
+                  <div className="flex items-center gap-6">
+                    <DropzoneUploadIcon />
+                    <div className="grid gap-0.5">
+                      <DropzoneTitle>Drop to attach files</DropzoneTitle>
+                      <DropzoneDescription>
+                        Max size: {prettyBytes(maxSize || 0)}
+                      </DropzoneDescription>
+                    </div>
+                  </div>
+                </DropzoneZone>
+              )}
+            </Dropzone>
+
+            {newFileFields.length > 0 && (
+              <div className="flex flex-col gap-2">
+                {newFileFields.map((field, idx) => {
+                  const file = form.getValues(`newFiles.${idx}`)
+                  if (!file) return null
+                  return (
+                    <div
+                      key={field.id}
+                      className="flex items-center justify-between border rounded p-2"
+                    >
+                      <span className="text-sm">
+                        {file.name} ({prettyBytes(file.size)})
+                      </span>
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        type="button"
+                        onClick={() => remove(idx)}
+                      >
+                        <X className="h-4 w-4" />
+                      </Button>
+                    </div>
+                  )
+                })}
+              </div>
+            )}
+
+            <SheetFooter className="gap-2 pt-4">
+              <SheetClose asChild>
+                <Button type="button" variant="outline">
+                  Cancel
+                </Button>
+              </SheetClose>
+              <Button disabled={isPending}>
+                {isPending && <Loader className="mr-2 h-4 w-4 animate-spin" />}
+                Save
+              </Button>
+            </SheetFooter>
+          </form>
+        </Form>
+      </SheetContent>
+    </Sheet>
+  )
+}
\ No newline at end of file
diff --git a/lib/rfqs/vendor-table/feature-flags-provider.tsx b/lib/rfqs/vendor-table/feature-flags-provider.tsx
new file mode 100644
index 00000000..81131894
--- /dev/null
+++ b/lib/rfqs/vendor-table/feature-flags-provider.tsx
@@ -0,0 +1,108 @@
+"use client"
+
+import * as React from "react"
+import { useQueryState } from "nuqs"
+
+import { dataTableConfig, type DataTableConfig } from "@/config/data-table"
+import { cn } from "@/lib/utils"
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+
+type FeatureFlagValue = DataTableConfig["featureFlags"][number]["value"]
+
+interface FeatureFlagsContextProps {
+  featureFlags: FeatureFlagValue[]
+  setFeatureFlags: (value: FeatureFlagValue[]) => void
+}
+
+const FeatureFlagsContext = React.createContext<FeatureFlagsContextProps>({
+  featureFlags: [],
+  setFeatureFlags: () => {},
+})
+
+export function useFeatureFlags() {
+  const context = React.useContext(FeatureFlagsContext)
+  if (!context) {
+    throw new Error(
+      "useFeatureFlags must be used within a FeatureFlagsProvider"
+    )
+  }
+  return context
+}
+
+interface FeatureFlagsProviderProps {
+  children: React.ReactNode
+}
+
+export function FeatureFlagsProvider({ children }: FeatureFlagsProviderProps) {
+  const [featureFlags, setFeatureFlags] = useQueryState<FeatureFlagValue[]>(
+    "flags",
+    {
+      defaultValue: [],
+      parse: (value) => value.split(",") as FeatureFlagValue[],
+      serialize: (value) => value.join(","),
+      eq: (a, b) =>
+        a.length === b.length && a.every((value, index) => value === b[index]),
+      clearOnDefault: true,
+      shallow: false,
+    }
+  )
+
+  return (
+    <FeatureFlagsContext.Provider
+      value={{
+        featureFlags,
+        setFeatureFlags: (value) => void setFeatureFlags(value),
+      }}
+    >
+      <div className="w-full overflow-x-auto">
+        <ToggleGroup
+          type="multiple"
+          variant="outline"
+          size="sm"
+          value={featureFlags}
+          onValueChange={(value: FeatureFlagValue[]) => setFeatureFlags(value)}
+          className="w-fit gap-0"
+        >
+          {dataTableConfig.featureFlags.map((flag, index) => (
+            <Tooltip key={flag.value}>
+              <ToggleGroupItem
+                value={flag.value}
+                className={cn(
+                  "gap-2 whitespace-nowrap rounded-none px-3 text-xs data-[state=on]:bg-accent/70 data-[state=on]:hover:bg-accent/90",
+                  {
+                    "rounded-l-sm border-r-0": index === 0,
+                    "rounded-r-sm":
+                      index === dataTableConfig.featureFlags.length - 1,
+                  }
+                )}
+                asChild
+              >
+                <TooltipTrigger>
+                  <flag.icon className="size-3.5 shrink-0" aria-hidden="true" />
+                  {flag.label}
+                </TooltipTrigger>
+              </ToggleGroupItem>
+              <TooltipContent
+                align="start"
+                side="bottom"
+                sideOffset={6}
+                className="flex max-w-60 flex-col space-y-1.5 border bg-background py-2 font-semibold text-foreground"
+              >
+                <div>{flag.tooltipTitle}</div>
+                <div className="text-xs text-muted-foreground">
+                  {flag.tooltipDescription}
+                </div>
+              </TooltipContent>
+            </Tooltip>
+          ))}
+        </ToggleGroup>
+      </div>
+      {children}
+    </FeatureFlagsContext.Provider>
+  )
+}
diff --git a/lib/rfqs/vendor-table/invite-vendors-dialog.tsx b/lib/rfqs/vendor-table/invite-vendors-dialog.tsx
new file mode 100644
index 00000000..23853e2f
--- /dev/null
+++ b/lib/rfqs/vendor-table/invite-vendors-dialog.tsx
@@ -0,0 +1,177 @@
+"use client"
+
+import * as React from "react"
+import { type Row } from "@tanstack/react-table"
+import { Loader, Send, Trash, AlertTriangle } from "lucide-react"
+import { toast } from "sonner"
+
+import { useMediaQuery } from "@/hooks/use-media-query"
+import { Button } from "@/components/ui/button"
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/components/ui/drawer"
+import { Alert, AlertDescription } from "@/components/ui/alert"
+
+import { MatchedVendorRow } from "@/config/vendorRfbColumnsConfig"
+import { inviteVendors } from "../service"
+import { RfqType } from "@/lib/rfqs/validations"
+
+interface DeleteTasksDialogProps
+  extends React.ComponentPropsWithoutRef<typeof Dialog> {
+  vendors: Row<MatchedVendorRow>["original"][]
+  rfqId:number
+  rfqType: RfqType
+  showTrigger?: boolean
+  onSuccess?: () => void
+}
+
+export function InviteVendorsDialog({
+  vendors,
+  rfqId,
+  rfqType,
+  showTrigger = true,
+  onSuccess,
+  ...props
+}: DeleteTasksDialogProps) {
+  const [isInvitePending, startInviteTransition] = React.useTransition()
+  const isDesktop = useMediaQuery("(min-width: 640px)")
+
+  function onDelete() {
+    startInviteTransition(async () => {
+      const { error } = await inviteVendors({
+        rfqId,
+        vendorIds: vendors.map((vendor) => Number(vendor.id)),
+        rfqType
+      })
+
+      if (error) {
+        toast.error(error)
+        return
+      }
+
+      props.onOpenChange?.(false)
+      toast.success("Vendor invited")
+      onSuccess?.()
+    })
+  }
+
+  if (isDesktop) {
+    return (
+      <Dialog {...props}>
+        {showTrigger ? (
+          <DialogTrigger asChild>
+            <Button variant="outline" size="sm">
+              <Send className="mr-2 size-4" aria-hidden="true" />
+              Invite ({vendors.length})
+            </Button>
+          </DialogTrigger>
+        ) : null}
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Are you absolutely sure?</DialogTitle>
+            <DialogDescription>
+              This action cannot be undone. This will permanently invite{" "}
+              <span className="font-medium">{vendors.length}</span>
+              {vendors.length === 1 ? " vendor" : " vendors"}.
+            </DialogDescription>
+          </DialogHeader>
+          
+          {/* 편집 제한 경고 메시지 */}
+          <Alert variant="destructive" className="mt-4">
+            <AlertTriangle className="h-4 w-4" />
+            <AlertDescription className="font-medium">
+              한 업체라도 초대를 하고 나면 아이템 편집과 RFQ 문서 첨부 편집은 불가능합니다.
+            </AlertDescription>
+          </Alert>
+          
+          <DialogFooter className="gap-2 sm:space-x-0 mt-6">
+            <DialogClose asChild>
+              <Button variant="outline">Cancel</Button>
+            </DialogClose>
+            <Button
+              aria-label="Invite selected rows"
+              variant="destructive"
+              onClick={onDelete}
+              disabled={isInvitePending}
+            >
+              {isInvitePending && (
+                <Loader
+                  className="mr-2 size-4 animate-spin"
+                  aria-hidden="true"
+                />
+              )}
+              Invite
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    )
+  }
+
+  return (
+    <Drawer {...props}>
+      {showTrigger ? (
+        <DrawerTrigger asChild>
+          <Button variant="outline" size="sm">
+            <Trash className="mr-2 size-4" aria-hidden="true" />
+            Invite ({vendors.length})
+          </Button>
+        </DrawerTrigger>
+      ) : null}
+      <DrawerContent>
+        <DrawerHeader>
+          <DrawerTitle>Are you absolutely sure?</DrawerTitle>
+          <DrawerDescription>
+            This action cannot be undone. This will permanently invite {" "}
+            <span className="font-medium">{vendors.length}</span>
+            {vendors.length === 1 ? " vendor" : " vendors"} from our servers.
+          </DrawerDescription>
+        </DrawerHeader>
+        
+        {/* 편집 제한 경고 메시지 (모바일용) */}
+        <div className="px-4">
+          <Alert variant="destructive">
+            <AlertTriangle className="h-4 w-4" />
+            <AlertDescription className="font-medium">
+              한 업체라도 초대를 하고 나면 아이템 편집과 RFQ 문서 첨부 편집은 불가능합니다.
+            </AlertDescription>
+          </Alert>
+        </div>
+        
+        <DrawerFooter className="gap-2 sm:space-x-0 mt-4">
+          <DrawerClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </DrawerClose>
+          <Button
+            aria-label="Delete selected rows"
+            variant="destructive"
+            onClick={onDelete}
+            disabled={isInvitePending}
+          >
+            {isInvitePending && (
+              <Loader className="mr-2 size-4 animate-spin" aria-hidden="true" />
+            )}
+            Invite
+          </Button>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  )
+}
\ No newline at end of file
diff --git a/lib/rfqs/vendor-table/vendor-list/vendor-list-table-column.tsx b/lib/rfqs/vendor-table/vendor-list/vendor-list-table-column.tsx
new file mode 100644
index 00000000..bfcbe75b
--- /dev/null
+++ b/lib/rfqs/vendor-table/vendor-list/vendor-list-table-column.tsx
@@ -0,0 +1,154 @@
+"use client"
+// Because columns rely on React state/hooks for row actions
+
+import * as React from "react"
+import { ColumnDef, Row } from "@tanstack/react-table"
+import { VendorData } from "./vendor-list-table"
+import { ClientDataTableColumnHeaderSimple } from "@/components/client-data-table/data-table-column-simple-header"
+import { formatDate } from "@/lib/utils"
+import { Checkbox } from "@/components/ui/checkbox"
+
+export interface DataTableRowAction<TData> {
+  row: Row<TData>
+  type: "open" | "update" | "delete"
+}
+
+interface GetColumnsProps {
+  setRowAction: React.Dispatch<React.SetStateAction<DataTableRowAction<VendorData> | null>>
+  setSelectedVendorIds: React.Dispatch<React.SetStateAction<number[]>> // Changed to array
+}
+
+/** getColumns: return array of ColumnDef for 'vendors' data */
+export function getColumns({
+  setRowAction,
+  setSelectedVendorIds, // Changed parameter name
+}: GetColumnsProps): ColumnDef<VendorData>[] {
+  return [
+    // MULTIPLE SELECT COLUMN
+    {
+      id: "select",
+      enableSorting: false,
+      enableHiding: false,
+      size: 40,
+      // Add checkbox in header for select all functionality
+      header: ({ table }) => (
+        <Checkbox
+          checked={
+            table.getFilteredSelectedRowModel().rows.length > 0 &&
+            table.getFilteredSelectedRowModel().rows.length === table.getFilteredRowModel().rows.length
+          }
+          onCheckedChange={(checked) => {
+            table.toggleAllRowsSelected(!!checked)
+            
+            // Update selectedVendorIds based on all rows selection
+            if (checked) {
+              const allIds = table.getFilteredRowModel().rows.map(row => row.original.id)
+              setSelectedVendorIds(allIds)
+            } else {
+              setSelectedVendorIds([])
+            }
+          }}
+          aria-label="Select all"
+        />
+      ),
+      cell: ({ row }) => {
+        const isSelected = row.getIsSelected()
+        
+        return (
+          <Checkbox
+            checked={isSelected}
+            onCheckedChange={(checked) => {
+              row.toggleSelected(!!checked)
+              
+              // Update the selectedVendorIds state by adding or removing this ID
+              setSelectedVendorIds(prevIds => {
+                if (checked) {
+                  // Add this ID if it doesn't exist
+                  return prevIds.includes(row.original.id) 
+                    ? prevIds 
+                    : [...prevIds, row.original.id]
+                } else {
+                  // Remove this ID
+                  return prevIds.filter(id => id !== row.original.id)
+                }
+              })
+            }}
+            aria-label="Select row"
+          />
+        )
+      },
+    },
+    
+    // Vendor Name
+    {
+      accessorKey: "vendorName",
+      header: ({ column }) => (
+        <ClientDataTableColumnHeaderSimple column={column} title="Vendor Name" />
+      ),
+      cell: ({ row }) => row.getValue("vendorName"),
+    },
+    
+    // Vendor Code
+    {
+      accessorKey: "vendorCode",
+      header: ({ column }) => (
+        <ClientDataTableColumnHeaderSimple column={column} title="Vendor Code" />
+      ),
+      cell: ({ row }) => row.getValue("vendorCode"),
+    },
+    
+    // Status
+    {
+      accessorKey: "status",
+      header: ({ column }) => (
+        <ClientDataTableColumnHeaderSimple column={column} title="Status" />
+      ),
+      cell: ({ row }) => row.getValue("status"),
+    },
+    
+    // Country
+    {
+      accessorKey: "country",
+      header: ({ column }) => (
+        <ClientDataTableColumnHeaderSimple column={column} title="Country" />
+      ),
+      cell: ({ row }) => row.getValue("country"),
+    },
+    
+    // Email
+    {
+      accessorKey: "email",
+      header: ({ column }) => (
+        <ClientDataTableColumnHeaderSimple column={column} title="Email" />
+      ),
+      cell: ({ row }) => row.getValue("email"),
+    },
+    
+    // Phone
+    {
+      accessorKey: "phone",
+      header: ({ column }) => (
+        <ClientDataTableColumnHeaderSimple column={column} title="Phone" />
+      ),
+      cell: ({ row }) => row.getValue("phone"),
+    },
+    
+    // Created At
+    {
+      accessorKey: "createdAt",
+      header: ({ column }) => (
+        <ClientDataTableColumnHeaderSimple column={column} title="Created At" />
+      ),
+      cell: ({ cell }) => formatDate(cell.getValue() as Date),
+    },
+    
+    // Updated At
+    {
+      accessorKey: "updatedAt",
+      header: ({ column }) => (
+        <ClientDataTableColumnHeaderSimple column={column} title="Updated At" />
+      ),
+      cell: ({ cell }) => formatDate(cell.getValue() as Date),
+    },
+  ]
+}
\ No newline at end of file
diff --git a/lib/rfqs/vendor-table/vendor-list/vendor-list-table.tsx b/lib/rfqs/vendor-table/vendor-list/vendor-list-table.tsx
new file mode 100644
index 00000000..c436eebd
--- /dev/null
+++ b/lib/rfqs/vendor-table/vendor-list/vendor-list-table.tsx
@@ -0,0 +1,142 @@
+"use client"
+
+import * as React from "react"
+import { ClientDataTable } from "@/components/client-data-table/data-table"
+import { DataTableRowAction, getColumns } from "./vendor-list-table-column"
+import { DataTableAdvancedFilterField } from "@/types/table"
+import { addItemToVendors, getAllVendors } from "../../service"
+import { Loader2, Plus } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { useToast } from "@/hooks/use-toast"
+
+export interface VendorData {
+  id: number
+  vendorName: string
+  vendorCode: string | null
+  taxId: string
+  address: string | null
+  country: string | null
+  phone: string | null
+  email: string | null
+  website: string | null
+  status: string
+  createdAt: Date
+  updatedAt: Date
+}
+
+interface VendorsListTableProps {
+  rfqId: number
+}
+
+export function VendorsListTable({ rfqId }: VendorsListTableProps) {
+  const { toast } = useToast()
+  const [rowAction, setRowAction] =
+    React.useState<DataTableRowAction<VendorData> | null>(null)
+  
+  // Changed to array for multiple selection
+  const [selectedVendorIds, setSelectedVendorIds] = React.useState<number[]>([])
+  const [isSubmitting, setIsSubmitting] = React.useState(false)
+  
+  const columns = React.useMemo(
+    () => getColumns({ setRowAction, setSelectedVendorIds }),
+    [setRowAction, setSelectedVendorIds]
+  )
+  
+  const [vendors, setVendors] = React.useState<VendorData[]>([])
+  const [isLoading, setIsLoading] = React.useState(false)
+  
+  React.useEffect(() => {
+    async function loadAllVendors() {
+      setIsLoading(true)
+      try {
+        const allVendors = await getAllVendors()
+        setVendors(allVendors)
+      } catch (error) {
+        console.error("벤더 목록 로드 오류:", error)
+        toast({
+          title: "Error",
+          description: "Failed to load vendors",
+          variant: "destructive",
+        })
+      } finally {
+        setIsLoading(false)
+      }
+    }
+    loadAllVendors()
+  }, [toast])
+  
+  const advancedFilterFields: DataTableAdvancedFilterField<VendorData>[] = []
+  
+  async function handleAddVendors() {
+    if (selectedVendorIds.length === 0) return // Safety check
+    
+    setIsSubmitting(true)
+    try {
+      // Update to use the multiple vendor service
+      const result = await addItemToVendors(rfqId, selectedVendorIds)
+      
+      if (result.success) {
+        toast({
+          title: "Success",
+          description: `Added items to ${selectedVendorIds.length} vendors`,
+        })
+        // Reset selection after successful addition
+        setSelectedVendorIds([])
+      } else {
+        toast({
+          title: "Error",
+          description: result.error || "Failed to add items to vendors",
+          variant: "destructive",
+        })
+      }
+    } catch (err) {
+      console.error("Failed to add vendors:", err)
+      toast({
+        title: "Error",
+        description: "An unexpected error occurred",
+        variant: "destructive",
+      })
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+  
+  // If loading, show a flex container that fills the parent and centers the spinner
+  if (isLoading) {
+    return (
+      <div className="flex h-full w-full items-center justify-center">
+        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+      </div>
+    )
+  }
+  
+  // Otherwise, show the table
+  return (
+    <ClientDataTable
+      data={vendors}
+      columns={columns}
+      advancedFilterFields={advancedFilterFields}
+    >
+      <div className="flex items-center gap-2">
+        <Button 
+          variant="default" 
+          size="sm"
+          onClick={handleAddVendors}
+          disabled={selectedVendorIds.length === 0 || isSubmitting}
+        >
+          {isSubmitting ? (
+            <>
+              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              Adding...
+            </>
+          ) : (
+            <>
+              <Plus className="mr-2 h-4 w-4" />
+              Add Vendors ({selectedVendorIds.length})
+            </>
+          )}
+        </Button>
+      </div>
+    </ClientDataTable>
+  )
+}
\ No newline at end of file
diff --git a/lib/rfqs/vendor-table/vendors-table-columns.tsx b/lib/rfqs/vendor-table/vendors-table-columns.tsx
new file mode 100644
index 00000000..1220cb9d
--- /dev/null
+++ b/lib/rfqs/vendor-table/vendors-table-columns.tsx
@@ -0,0 +1,264 @@
+"use client"
+
+import * as React from "react"
+import { type DataTableRowAction } from "@/types/table"
+import { type ColumnDef } from "@tanstack/react-table"
+import { Ellipsis } from "lucide-react"
+import { toast } from "sonner"
+
+import { getErrorMessage } from "@/lib/handle-error"
+import { formatDate } from "@/lib/utils"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Checkbox } from "@/components/ui/checkbox"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { DataTableColumnHeader } from "@/components/data-table/data-table-column-header"
+import { useRouter } from "next/navigation"
+
+import { vendors } from "@/db/schema/vendors"
+import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header"
+import { vendorColumnsConfig } from "@/config/vendorColumnsConfig"
+import { Separator } from "@/components/ui/separator"
+import { MatchedVendorRow, vendorRfqColumnsConfig } from "@/config/vendorRfbColumnsConfig"
+
+
+type NextRouter = ReturnType<typeof useRouter>;
+
+
+interface GetColumnsProps {
+  setRowAction: React.Dispatch<React.SetStateAction<DataTableRowAction<MatchedVendorRow> | null>>;
+  router: NextRouter;
+  openCommentSheet: (rfqId: number) => void;
+
+}
+
+/**
+ * tanstack table 컬럼 정의 (중첩 헤더 버전)
+ */
+export function getColumns({ setRowAction, router, openCommentSheet }: GetColumnsProps): ColumnDef<MatchedVendorRow>[] {
+  // ----------------------------------------------------------------
+  // 1) select 컬럼 (체크박스)
+  // ----------------------------------------------------------------
+  const selectColumn: ColumnDef<MatchedVendorRow> = {
+    id: "select",
+    header: ({ table }) => (
+      <Checkbox
+        checked={
+          table.getIsAllPageRowsSelected() ||
+          (table.getIsSomePageRowsSelected() && "indeterminate")
+        }
+        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+        aria-label="Select all"
+        className="translate-y-0.5"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={(value) => row.toggleSelected(!!value)}
+        aria-label="Select row"
+        className="translate-y-0.5"
+      />
+    ),
+    size: 40,
+    enableSorting: false,
+    enableHiding: false,
+  }
+
+  // ----------------------------------------------------------------
+  // 2) actions 컬럼 (Dropdown 메뉴)
+  // ----------------------------------------------------------------
+
+  // ----------------------------------------------------------------
+  // 3) 일반 컬럼들을 "그룹"별로 묶어 중첩 columns 생성
+  // ----------------------------------------------------------------
+  // 3-1) groupMap: { [groupName]: ColumnDef<MatchedVendorRow>[] }
+  const groupMap: Record<string, ColumnDef<MatchedVendorRow>[]> = {}
+
+  vendorRfqColumnsConfig.forEach((cfg) => {
+    // 만약 group가 없으면 "_noGroup" 처리
+    const groupName = cfg.group || "_noGroup"
+
+    if (!groupMap[groupName]) {
+      groupMap[groupName] = []
+    }
+
+    // child column 정의
+    const childCol: ColumnDef<MatchedVendorRow> = {
+      accessorKey: cfg.id,
+      enableResizing: true,
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title={cfg.label} />
+      ),
+      meta: {
+        excelHeader: cfg.excelHeader,
+        group: cfg.group,
+        type: cfg.type,
+      },
+      cell: ({ row, cell }) => {
+
+
+        if (cfg.id === "vendorStatus") {
+          const statusVal = row.original.vendorStatus
+          if (!statusVal) return null
+          // const Icon = getStatusIcon(statusVal)
+          return (
+            <Badge variant="outline">
+              {statusVal}
+            </Badge>
+          )
+        }
+
+        if (cfg.id === "rfqVendorStatus") {
+          const statusVal = row.original.rfqVendorStatus
+          if (!statusVal) return null
+          // const Icon = getStatusIcon(statusVal)
+          const variant = statusVal === "INVITED" ? "default" : statusVal === "REJECTED" ? "destructive" : statusVal === "ACCEPTED" ? "secondary" : "outline"
+          return (
+            <Badge variant={variant}>
+              {statusVal}
+            </Badge>
+          )
+        }
+
+
+        if (cfg.id === "rfqVendorUpdated") {
+          const dateVal = cell.getValue() as Date
+          if (!dateVal) return null
+          return formatDate(dateVal)
+        }
+
+
+        // code etc...
+        return row.getValue(cfg.id) ?? ""
+      },
+    }
+
+    groupMap[groupName].push(childCol)
+  })
+
+  const actionsColumn: ColumnDef<MatchedVendorRow> = {
+    id: "actions",
+    // header: "Actions",
+    cell: ({ row }) => {
+      const rfq = row.original
+      const commCount = rfq.comments?.length ?? 0
+      const status = row.original.rfqVendorStatus
+
+      // 공통 코멘트 핸들러
+      function handleCommentClick() {
+        setRowAction({ row, type: "comments" })
+        openCommentSheet(Number(row.original.id))
+      }
+
+      return (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              aria-label="Open menu"
+              variant="ghost"
+              className="flex size-8 p-0 data-[state=open]:bg-muted"
+            >
+              <Ellipsis className="size-4" aria-hidden="true" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-40">
+
+            {/* 기존 기능: status가 INVITED일 때만 표시 */}
+            {(!status || status === 'INVITED') && (
+              <DropdownMenuItem onSelect={() => setRowAction({ row, type: "invite" })}>
+                발행하기
+              </DropdownMenuItem>
+            )}
+            {/* 두 기능 사이 구분선 */}
+            <DropdownMenuSeparator />
+            {/* 코멘트 메뉴 항목 */}
+            <DropdownMenuItem onSelect={handleCommentClick}>
+              {commCount > 0 ? `${commCount} Comments` : "Add Comment"}
+            </DropdownMenuItem>
+
+
+          </DropdownMenuContent>
+        </DropdownMenu>
+      )
+    },
+    size: 40,
+    enableSorting: false,
+    enableHiding: false,
+  }
+
+
+  // const commentsColumn: ColumnDef<MatchedVendorRow> = {
+  //   id: "comments",
+  //   header: "Comments",
+  //   cell: ({ row }) => {
+  //     const rfq = row.original
+  //     const commCount = rfq.comments?.length ?? 0
+
+  //     // 공통 클릭 핸들러
+  //     function handleClick() {
+  //       setRowAction({ row, type: "comments" })
+  //       openCommentSheet(Number(row.original.id))
+  //     }
+
+  //     return commCount > 0 ? (
+  //       <a
+  //         href="#"
+  //         onClick={(e) => {
+  //           e.preventDefault()
+  //           handleClick()
+  //         }}
+  //       >
+  //         {commCount} Comments
+  //       </a>
+  //     ) : (
+  //       <Button size="sm" variant="outline" onClick={handleClick}>
+  //         Add Comment
+  //       </Button>
+  //     )
+  //   },
+  // }
+  // ----------------------------------------------------------------
+  // 3-2) groupMap에서 실제 상위 컬럼(그룹)을 만들기
+  // ----------------------------------------------------------------
+  const nestedColumns: ColumnDef<MatchedVendorRow>[] = []
+
+  // 순서를 고정하고 싶다면 group 순서를 미리 정의하거나 sort해야 함
+  // 여기서는 그냥 Object.entries 순서
+  Object.entries(groupMap).forEach(([groupName, colDefs]) => {
+    if (groupName === "_noGroup") {
+      // 그룹 없음 → 그냥 최상위 레벨 컬럼
+      nestedColumns.push(...colDefs)
+    } else {
+      // 상위 컬럼
+      nestedColumns.push({
+        id: groupName,
+        header: groupName, // "Basic Info", "Metadata" 등
+        columns: colDefs,
+      })
+    }
+  })
+
+  // ----------------------------------------------------------------
+  // 4) 최종 컬럼 배열: select, nestedColumns, actions
+  // ----------------------------------------------------------------
+  return [
+    selectColumn,
+    ...nestedColumns,
+    // commentsColumn,
+    actionsColumn
+
+  ]
+}
\ No newline at end of file
diff --git a/lib/rfqs/vendor-table/vendors-table-floating-bar.tsx b/lib/rfqs/vendor-table/vendors-table-floating-bar.tsx
new file mode 100644
index 00000000..9b32cf5f
--- /dev/null
+++ b/lib/rfqs/vendor-table/vendors-table-floating-bar.tsx
@@ -0,0 +1,137 @@
+"use client"
+
+import * as React from "react"
+import { SelectTrigger } from "@radix-ui/react-select"
+import { type Table } from "@tanstack/react-table"
+import {
+  ArrowUp,
+  CheckCircle2,
+  Download,
+  Loader,
+  Trash2,
+  X,
+} from "lucide-react"
+import { toast } from "sonner"
+
+import { exportTableToExcel } from "@/lib/export"
+import { Button } from "@/components/ui/button"
+import { Portal } from "@/components/ui/portal"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+} from "@/components/ui/select"
+import { Separator } from "@/components/ui/separator"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+import { Kbd } from "@/components/kbd"
+
+import { ActionConfirmDialog } from "@/components/ui/action-dialog"
+import {  vendors } from "@/db/schema/vendors"
+import { MatchedVendorRow } from "@/config/vendorRfbColumnsConfig"
+
+interface VendorsTableFloatingBarProps {
+  table: Table<MatchedVendorRow>
+}
+
+
+export function VendorsTableFloatingBar({ table }: VendorsTableFloatingBarProps) {
+  const rows = table.getFilteredSelectedRowModel().rows
+
+  const [isPending, startTransition] = React.useTransition()
+  const [action, setAction] = React.useState<
+    "update-status" | "export" | "delete"
+  >()
+  const [popoverOpen, setPopoverOpen] = React.useState(false)
+
+  // Clear selection on Escape key press
+  React.useEffect(() => {
+    function handleKeyDown(event: KeyboardEvent) {
+      if (event.key === "Escape") {
+        table.toggleAllRowsSelected(false)
+      }
+    }
+
+    window.addEventListener("keydown", handleKeyDown)
+    return () => window.removeEventListener("keydown", handleKeyDown)
+  }, [table])
+
+
+
+  // 공용 confirm dialog state
+  const [confirmDialogOpen, setConfirmDialogOpen] = React.useState(false)
+  const [confirmProps, setConfirmProps] = React.useState<{
+    title: string
+    description?: string
+    onConfirm: () => Promise<void> | void
+  }>({
+    title: "",
+    description: "",
+    onConfirm: () => { },
+  })
+
+
+
+
+
+  return (
+    <Portal >
+      <div className="fixed inset-x-0 bottom-10 z-50 mx-auto w-fit px-2.5" style={{ bottom: '1.5rem' }}>
+        <div className="w-full overflow-x-auto">
+          <div className="mx-auto flex w-fit items-center gap-2 rounded-md border bg-background p-2 text-foreground shadow">
+            <div className="flex h-7 items-center rounded-md border border-dashed pl-2.5 pr-1">
+              <span className="whitespace-nowrap text-xs">
+                {rows.length} selected
+              </span>
+              <Separator orientation="vertical" className="ml-2 mr-1" />
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="size-5 hover:border"
+                    onClick={() => table.toggleAllRowsSelected(false)}
+                  >
+                    <X className="size-3.5 shrink-0" aria-hidden="true" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent className="flex items-center border bg-accent px-2 py-1 font-semibold text-foreground dark:bg-zinc-900">
+                  <p className="mr-2">Clear selection</p>
+                  <Kbd abbrTitle="Escape" variant="outline">
+                    Esc
+                  </Kbd>
+                </TooltipContent>
+              </Tooltip>
+            </div>
+
+          </div>
+        </div>
+      </div>
+
+
+      {/* 공용 Confirm Dialog */}
+      <ActionConfirmDialog
+        open={confirmDialogOpen}
+        onOpenChange={setConfirmDialogOpen}
+        title={confirmProps.title}
+        description={confirmProps.description}
+        onConfirm={confirmProps.onConfirm}
+        isLoading={isPending && (action === "delete" || action === "update-status")}
+        confirmLabel={
+          action === "delete"
+            ? "Delete"
+            : action === "update-status"
+            ? "Update"
+            : "Confirm"
+        }
+        confirmVariant={
+          action === "delete" ? "destructive" : "default"
+        }
+      />
+    </Portal>
+  )
+}
diff --git a/lib/rfqs/vendor-table/vendors-table-toolbar-actions.tsx b/lib/rfqs/vendor-table/vendors-table-toolbar-actions.tsx
new file mode 100644
index 00000000..abb34f85
--- /dev/null
+++ b/lib/rfqs/vendor-table/vendors-table-toolbar-actions.tsx
@@ -0,0 +1,84 @@
+"use client"
+
+import * as React from "react"
+import { type Table } from "@tanstack/react-table"
+ 
+import { MatchedVendorRow } from "@/config/vendorRfbColumnsConfig"
+import { InviteVendorsDialog } from "./invite-vendors-dialog"
+import { AddVendorDialog } from "./add-vendor-dialog"
+import { Button } from "@/components/ui/button"
+import { useToast } from "@/hooks/use-toast"
+
+interface VendorsTableToolbarActionsProps {
+  table: Table<MatchedVendorRow>
+  rfqId: number
+}
+
+export function VendorsTableToolbarActions({ table, rfqId }: VendorsTableToolbarActionsProps) {
+  const { toast } = useToast()
+  const fileInputRef = React.useRef<HTMLInputElement>(null)
+  
+  // 선택된 모든 행
+  const selectedRows = table.getFilteredSelectedRowModel().rows
+  
+  // 조건에 맞는 벤더만 필터링
+  const eligibleVendors = React.useMemo(() => {
+    return selectedRows
+      .map(row => row.original)
+      .filter(vendor => !vendor.rfqVendorStatus || vendor.rfqVendorStatus === "INVITED")
+  }, [selectedRows])
+  
+  // 조건에 맞지 않는 벤더 수
+  const ineligibleCount = selectedRows.length - eligibleVendors.length
+  
+  function handleImportClick() {
+    fileInputRef.current?.click()
+  }
+  
+  function handleInviteClick() {
+    // 조건에 맞지 않는 벤더가 있다면 토스트 메시지 표시
+    if (ineligibleCount > 0) {
+      toast({
+        title: "일부 벤더만 초대됩니다",
+        description: `선택한 ${selectedRows.length}개 중 ${eligibleVendors.length}개만 초대 가능합니다. 나머지 ${ineligibleCount}개는 초대 불가능한 상태입니다.`,
+        // variant: "warning",
+      })
+    }
+  }
+  
+  // 다이얼로그 표시 여부 - 적합한 벤더가 1개 이상 있으면 표시
+  const showInviteDialog = eligibleVendors.length > 0
+  
+  return (
+    <div className="flex items-center gap-2">
+      {selectedRows.length > 0 && (
+        <>
+          {showInviteDialog ? (
+            <InviteVendorsDialog
+              vendors={eligibleVendors}
+              rfqId={rfqId}
+              onSuccess={() => table.toggleAllRowsSelected(false)}
+              onOpenChange={(open) => {
+                // 다이얼로그가 열릴 때만 경고 표시
+                if (open && ineligibleCount > 0) {
+                  handleInviteClick()
+                }
+              }}
+            />
+          ) : (
+            <Button 
+              variant="default" 
+              size="sm" 
+              disabled={true}
+              title="선택된 벤더 중 초대 가능한 벤더가 없습니다"
+            >
+              초대 불가
+            </Button>
+          )}
+        </>
+      )}
+      
+      <AddVendorDialog rfqId={rfqId} />
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/lib/rfqs/vendor-table/vendors-table.tsx b/lib/rfqs/vendor-table/vendors-table.tsx
new file mode 100644
index 00000000..838342bf
--- /dev/null
+++ b/lib/rfqs/vendor-table/vendors-table.tsx
@@ -0,0 +1,181 @@
+"use client"
+
+import * as React from "react"
+import { useRouter } from "next/navigation"
+import type {
+  DataTableAdvancedFilterField,
+  DataTableFilterField,
+  DataTableRowAction,
+} from "@/types/table"
+
+import { toSentenceCase } from "@/lib/utils"
+import { useDataTable } from "@/hooks/use-data-table"
+import { DataTable } from "@/components/data-table/data-table"
+import { DataTableAdvancedToolbar } from "@/components/data-table/data-table-advanced-toolbar"
+import { useFeatureFlags } from "./feature-flags-provider"
+import { getColumns } from "./vendors-table-columns"
+import { vendors } from "@/db/schema/vendors"
+import { VendorsTableToolbarActions } from "./vendors-table-toolbar-actions"
+import { VendorsTableFloatingBar } from "./vendors-table-floating-bar"
+import { fetchRfqAttachmentsbyCommentId, getMatchedVendors } from "../service"
+import { InviteVendorsDialog } from "./invite-vendors-dialog"
+import { CommentSheet, MatchedVendorComment } from "./comments-sheet"
+import { MatchedVendorRow } from "@/config/vendorRfbColumnsConfig"
+import { RfqType } from "@/lib/rfqs/validations"
+
+interface VendorsTableProps {
+  promises: Promise<[Awaited<ReturnType<typeof getMatchedVendors>>]>
+  rfqId: number
+  rfqType: RfqType
+}
+
+export function MatchedVendorsTable({ promises, rfqId,  rfqType}: VendorsTableProps) {
+  const { featureFlags } = useFeatureFlags()
+
+  // 1) Suspense로 받아온 데이터
+  const [{ data, pageCount }] = React.use(promises)
+  // data는 MatchedVendorRow[] 형태 (getMatchedVendors에서 반환)
+
+  console.log(data)
+
+  // 2) Row 액션 상태
+  const [rowAction, setRowAction] = React.useState<
+    DataTableRowAction<MatchedVendorRow> | null
+  >(null)
+
+  // **router** 획득
+  const router = useRouter()
+
+  // 3) CommentSheet 에 넣을 상태
+  //    => “댓글”은 MatchedVendorComment[] 로 관리해야 함
+  const [initialComments, setInitialComments] = React.useState<
+    MatchedVendorComment[]
+  >([])
+  const [commentSheetOpen, setCommentSheetOpen] = React.useState(false)
+  const [selectedVendorIdForComments, setSelectedVendorIdForComments] =
+    React.useState<number | null>(null)
+
+  // 4) rowAction이 바뀌면, type이 "comments"인지 확인 후 open
+  React.useEffect(() => {
+    if (rowAction?.type === "comments") {
+      openCommentSheet(rowAction.row.original.id)
+    }
+  }, [rowAction])
+
+  // 5) 댓글 시트 오픈 함수
+  async function openCommentSheet(vendorId: number) {
+    setInitialComments([])
+
+    // (a) 현재 Row의 comments 불러옴
+    const comments = rowAction?.row.original.comments
+    if (comments && comments.length > 0) {
+      // (b) 각 comment마다 첨부파일 fetch
+      const commentWithAttachments: MatchedVendorComment[] = await Promise.all(
+        comments.map(async (c) => {
+          const attachments = await fetchRfqAttachmentsbyCommentId(c.id)
+          return {
+            ...c,
+            attachments,
+          }
+        })
+      )
+      setInitialComments(commentWithAttachments)
+    }
+
+    // (c) vendorId state
+    setSelectedVendorIdForComments(vendorId)
+    setCommentSheetOpen(true)
+  }
+
+  // 6) 컬럼 정의 (memo)
+  const columns = React.useMemo(
+    () => getColumns({ setRowAction, router, openCommentSheet }),
+    [setRowAction, router]
+  )
+
+  // 7) 필터 정의
+  const filterFields: DataTableFilterField<MatchedVendorRow>[] = []
+
+  const advancedFilterFields: DataTableAdvancedFilterField<MatchedVendorRow>[] = [
+    { id: "vendorName", label: "Vendor Name", type: "text" },
+    { id: "vendorCode", label: "Vendor Code", type: "text" },
+    { id: "email", label: "Email", type: "text" },
+    { id: "country", label: "Country", type: "text" },
+    {
+      id: "vendorStatus",
+      label: "Vendor Status",
+      type: "multi-select",
+      options: vendors.status.enumValues.map((status) => ({
+        label: toSentenceCase(status),
+        value: status,
+      })),
+    },
+    {
+      id: "rfqVendorStatus",
+      label: "RFQ Status",
+      type: "multi-select",
+      options: ["INVITED", "ACCEPTED", "REJECTED", "QUOTED"].map((s) => ({
+        label: s,
+        value: s,
+      })),
+    },
+    { id: "rfqVendorUpdated", label: "Updated at", type: "date" },
+  ]
+
+  // 8) 테이블 생성
+  const { table } = useDataTable({
+    data, // MatchedVendorRow[]
+    columns,
+    pageCount,
+    filterFields,
+    enablePinning: true,
+    enableAdvancedFilter: true,
+    initialState: {
+      sorting: [{ id: "rfqVendorUpdated", desc: true }],
+      columnPinning: { right: ["actions"] },
+    },
+    // 행의 고유 ID
+    getRowId: (originalRow) => String(originalRow.id),
+    shallow: false,
+    clearOnDefault: true,
+  })
+
+  return (
+    <>
+      <DataTable table={table}>
+        <DataTableAdvancedToolbar
+          table={table}
+          filterFields={advancedFilterFields}
+          shallow={false}
+        >
+          <VendorsTableToolbarActions table={table} rfqId={rfqId} />
+        </DataTableAdvancedToolbar>
+      </DataTable>
+
+      {/* 초대 다이얼로그 */}
+      <InviteVendorsDialog
+        vendors={rowAction?.row.original ? [rowAction?.row.original] : []}
+        onOpenChange={() => setRowAction(null)}
+        rfqId={rfqId}
+        open={rowAction?.type === "invite"}
+        showTrigger={false}
+        rfqType={rfqType}
+      />
+
+      {/* 댓글 시트 */}
+      <CommentSheet
+        open={commentSheetOpen}
+        onOpenChange={setCommentSheetOpen}
+        initialComments={initialComments}
+        rfqId={rfqId}
+        vendorId={selectedVendorIdForComments ?? 0}
+        currentUserId={1}
+        onCommentsUpdated={(updatedComments) => {
+          // Row 의 comments 필드도 업데이트
+          if (!rowAction?.row) return
+          rowAction.row.original.comments = updatedComments
+        }}
+      />
+    </>
+  )
+}
\ No newline at end of file
diff --git a/lib/roles/repository.ts b/lib/roles/repository.ts
new file mode 100644
index 00000000..99ffdf29
--- /dev/null
+++ b/lib/roles/repository.ts
@@ -0,0 +1,94 @@
+// repository.ts
+import { sql, and, eq, inArray ,desc,asc} from "drizzle-orm";
+import type { PgTransaction } from "drizzle-orm/pg-core";
+import { roles, users, userRoles, Role, roleView, RoleView } from "@/db/schema/users"; // 수정
+import db from "@/db/db"; 
+import { companies } from "@/db/schema/companies";
+
+export type NewRole = typeof roles.$inferInsert;       // User insert 시 필요한 타입
+
+
+// (A) SELECT roles + userCount
+export async function selectRolesWithUserCount(
+  tx: PgTransaction<any, any, any>,
+  params: {
+    where?: any
+    orderBy?: (ReturnType<typeof asc> | ReturnType<typeof desc>)[]
+    offset?: number,
+    limit?: number,
+  }
+) {
+
+  const { where, orderBy, offset = 0, limit = 10 } = params
+
+  const query = tx
+    .select()
+    .from(roleView)
+    .where(where)
+    .orderBy(...(orderBy ?? []))
+    .offset(offset)
+    .limit(limit)
+
+  const rows = await query
+  return rows
+}
+// (B) countRoles
+export async function countRoles(
+tx: PgTransaction<any, any, any>,
+  where?: ReturnType<typeof and>
+) {
+  // COUNT(*) from roles
+  const [{ count }] = await tx
+    .select({ count: sql<number>`COUNT(*)`.as("count") })
+    .from(roles)
+    .where(where ?? undefined);
+
+  return count; // number
+}
+
+export async function insertRole(
+  tx: PgTransaction<any, any, any>,
+  data: NewRole
+) {
+  return tx.insert(roles).values(data).returning();
+}
+
+export const getRoleById = async (id: number): Promise<Role | null> => {
+  const roleFouned = await db.select().from(roles).where(eq(roles.id, id)).execute();
+  if (roleFouned.length === 0) return null;
+
+  const role = roleFouned[0];
+  return role
+};
+
+
+export async function updateRole(
+  tx: PgTransaction<any, any, any>,
+  roleId: number,
+  data: Partial<Role>
+) {
+  return tx
+    .update(roles)
+    .set(data)
+    .where(eq(roles.id, roleId))
+    .returning();
+}
+
+
+export async function deleteRolesByIds(
+  tx: PgTransaction<any, any, any>,
+  ids: number[]
+) {
+  return tx.delete(roles).where(inArray(roles.id, ids));
+}
+
+export async function deleteUserRolesByIds(
+  tx: PgTransaction<any, any, any>,
+  ids: number[]
+) {
+  return tx.delete(userRoles).where(inArray(userRoles.roleId, ids));
+}
+
+export async function findAllRoleView(domain?: "evcp" | "partners"): Promise<RoleView[]> {
+  return db.select().from(roleView).where(eq(roleView.domain,domain)).orderBy(asc(roleView.name));
+}
\ No newline at end of file
diff --git a/lib/roles/services.ts b/lib/roles/services.ts
new file mode 100644
index 00000000..1a91d4fa
--- /dev/null
+++ b/lib/roles/services.ts
@@ -0,0 +1,300 @@
+"use server";
+
+import { revalidateTag, unstable_cache, unstable_noStore } from "next/cache";
+import db from "@/db/db";
+import { permissions, Role, rolePermissions, roles, RoleView, roleView, userRoles } from "@/db/schema/users";
+import { and, or, asc, desc, ilike, eq, inArray } from "drizzle-orm";
+import { filterColumns } from "@/lib/filter-columns";
+import {
+  selectRolesWithUserCount,
+  countRoles,
+  insertRole,
+  getRoleById,
+  updateRole,
+  deleteRolesByIds,
+  deleteUserRolesByIds,
+  findAllRoleView,
+} from "./repository";
+import { CreateRoleSchema, GetRolesSchema, UpdateRoleSchema } from "./validations";
+import { getErrorMessage } from "@/lib/handle-error";
+
+interface UpsertPermissionsInput {
+  roleIds: number[];
+  permissionKeys: string[];
+  itemTitle?: string;
+}
+
+export async function getRolesWithCount(input: GetRolesSchema) {
+  // unstable_cache: 특정 키와 함께 캐싱
+  return unstable_cache(
+    async () => {
+      try {
+        // 1) pagination
+        const offset = (input.page - 1) * input.perPage;
+
+        // 2) advanced filter
+        const advancedWhere = filterColumns({
+          table: roleView, // 또는 roleView
+          filters: input.filters,
+          joinOperator: input.joinOperator,
+        });
+
+        // 3) 글로벌 검색
+        let globalWhere;
+        if (input.search) {
+          const s = `%${input.search}%`;
+          // 예: roles.name 에 ilike 검색
+          globalWhere = or(ilike(roles.name, s));
+        }
+
+        // 4) 최종 where
+        const finalWhere = and(advancedWhere, globalWhere);
+
+        // (5) 정렬
+        const orderBy =
+          input.sort.length > 0
+            ? input.sort.map((item) =>
+              item.desc ? desc(roleView[item.id]) : asc(roleView[item.id])
+            )
+            : [desc(roleView.created_at)];
+
+
+        // 6) 트랜잭션 + Repository 호출
+        const { data, total } = await db.transaction(async (tx) => {
+          // 실제 SELECT
+          const data = await selectRolesWithUserCount(tx, {
+            where: finalWhere,
+            orderBy,
+            offset,
+            limit: input.perPage,
+          });
+
+          // 전체 개수
+          const total = await countRoles(tx, finalWhere);
+
+          return { data, total };
+        });
+
+        // 7) pageCount
+        const pageCount = Math.ceil(total / input.perPage);
+
+        return { data, pageCount };
+      } catch (err) {
+        // 에러시 기본값
+        return { data: [], pageCount: 0 };
+      }
+    },
+    [JSON.stringify(input)], // 캐싱 키
+    {
+      revalidate: 3600,
+      tags: ["roles"], // revalidateTag("roles")로 무효화
+    }
+  )();
+}
+
+export async function createRole(input: CreateRoleSchema) {
+  unstable_noStore(); // 캐싱 방지(Next.js 서버 액션용)
+  try {
+
+    await db.transaction(async (tx) => {
+      const [newRole] = await insertRole(tx, {
+        name: input.name,
+        domain: input.domain,
+        description: input.description ?? "",
+        companyId: input.domain === "partners" ? input.companyId ?? null : null,
+      });
+    });
+
+    revalidateTag("roles");
+
+    return { data: null, error: null };
+
+  } catch (err) {
+    return { data: null, error: getErrorMessage(err) };
+  }
+}
+
+
+export async function modifiRole(input: UpdateRoleSchema & { id: number }) {
+  unstable_noStore();
+
+  try {
+
+    const data = await db.transaction(async (tx) => {
+      // 1) 먼저 User 테이블 업데이트
+      const [res] = await updateRole(tx, input.id, {
+        name: input.name,
+        description: input.description,
+        domain: input.domain
+      });
+
+      return res;
+    });
+
+    // 3) 캐시 무효화
+    revalidateTag("roles");
+
+
+    return { data: null, error: null };
+  } catch (err) {
+    return { data: null, error: getErrorMessage(err) };
+  }
+}
+
+export async function removeRoles(input: { ids: number[] }) {
+  unstable_noStore();
+
+  try {
+    await db.transaction(async (tx) => {
+      // user_roles도 있으면 먼저 삭제해야 할 수 있음
+
+      await deleteUserRolesByIds(tx, input.ids);
+      await deleteRolesByIds(tx, input.ids);
+
+    });
+
+    revalidateTag("roles");
+    revalidateTag("user-role-counts");
+    revalidateTag("users");
+
+    return { data: null, error: null };
+  } catch (err) {
+    return { data: null, error: getErrorMessage(err) };
+  }
+}
+
+
+
+export async function assignRolesToUsers(roleIds: number[], userIds: number[]) {
+  // Next.js 서버 액션에서 캐싱 방지
+  unstable_noStore()
+
+  try {
+    await db.transaction(async (tx) => {
+      // 1) 기존 userRoles 삭제: userIds, roleIds에 해당하는 레코드만
+      await tx
+        .delete(userRoles)
+        .where(
+          and(
+            inArray(userRoles.roleId, roleIds),
+            inArray(userRoles.userId, userIds)
+          )
+        )
+
+      // 2) 새로 삽입
+      if (roleIds.length > 0 && userIds.length > 0) {
+        const newRows = []
+        for (const rid of roleIds) {
+          for (const uid of userIds) {
+            newRows.push({ roleId: rid, userId: uid })
+          }
+        }
+        await tx.insert(userRoles).values(newRows)
+      }
+    })
+
+    // 캐시 무효화
+    revalidateTag("users")
+    revalidateTag("roles")
+
+    return { data: null, error: null }
+  } catch (err) {
+    return { data: null, error: getErrorMessage(err) }
+  }
+}
+
+export async function getAllRoleView(domain?: "evcp" | "partners"): Promise<RoleView[]> {
+  try {
+    return await findAllRoleView(domain)
+  } catch (err) {
+    throw new Error("Failed to get roles")
+  }
+}
+
+export async function upsertPermissions(input: UpsertPermissionsInput) {
+  unstable_noStore(); 
+  try {
+    const { roleIds, permissionKeys, itemTitle } = input;
+    if (!roleIds.length || !permissionKeys.length) {
+      return; // nothing to do
+    }
+
+    const roleIdNums = roleIds
+
+    await db.transaction(async (tx) => {
+      for (const permKey of permissionKeys) {
+        // A) Check if permissionKey exists in "permissions" table
+        const [existingPerm] = await tx
+          .select({ id: permissions.id })
+          .from(permissions)
+          .where(eq(permissions.permissionKey, permKey))
+          .limit(1);
+
+        let permissionId: number;
+        if (!existingPerm) {
+          // Insert new permission
+          // description를 어떻게 만들지는 자유: itemTitle + permKey 등
+          const [inserted] = await tx
+            .insert(permissions)
+            .values({
+              permissionKey: permKey,
+              description: itemTitle ? `Menu: ${itemTitle} perm: ${permKey}` : permKey,
+            })
+            .returning({ id: permissions.id });
+
+          permissionId = inserted.id;
+        } else {
+          permissionId = existingPerm.id;
+        }
+
+        // B) now link (roleId, permissionId) in role_permissions
+        for (const rId of roleIdNums) {
+          // check if already exists
+          const [rp] = await tx
+            .select({ p: rolePermissions.permissionId })
+            .from(rolePermissions)
+            .where(and(eq(rolePermissions.roleId, rId), eq(rolePermissions.permissionId, permissionId)))
+            .limit(1);
+
+          if (!rp) {
+            // insert
+            await tx.insert(rolePermissions).values({
+              roleId: rId,
+              permissionId,
+            });
+          }
+          // if rp exists, skip
+        }
+      }
+    });
+
+    return { data: null, error: null };
+
+  } catch (err) {
+    return { data: null, error: getErrorMessage(err) };
+  }
+}
+
+
+export async function getMenuPermissions(
+  itemKey: string
+): Promise<{ roleId: number; permKey: string }[]> {
+  // itemKey = "alert-dialog"
+  // permKey = "alert-dialog.create", "alert-dialog.viewOwn", ...
+  const pattern = `${itemKey}.%`
+
+  // SELECT rp.role_id, p.permission_key
+  // FROM role_permissions rp
+  // JOIN permissions p ON p.id = rp.permissionId
+  // WHERE p.permission_key LIKE 'alert-dialog.%'
+  const rows = await db
+    .select({
+      roleId: rolePermissions.roleId,
+      permKey: permissions.permissionKey,
+    })
+    .from(rolePermissions)
+    .innerJoin(permissions, eq(permissions.id, rolePermissions.permissionId))
+    .where(ilike(permissions.permissionKey, pattern));
+
+  return rows;
+}
\ No newline at end of file
diff --git a/lib/roles/table/add-role-dialog.tsx b/lib/roles/table/add-role-dialog.tsx
new file mode 100644
index 00000000..365daf29
--- /dev/null
+++ b/lib/roles/table/add-role-dialog.tsx
@@ -0,0 +1,308 @@
+import * as React from "react"
+import { useForm } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { Check, ChevronsUpDown, Loader } from "lucide-react"
+import { cn } from "@/lib/utils"
+import { toast } from "sonner"
+
+import { createRoleSchema, type CreateRoleSchema } from "../validations"
+import { createRole } from "../services"
+import { Textarea } from "@/components/ui/textarea"
+import { Company } from "@/db/schema/companies"
+import { getAllCompanies } from "@/lib/admin-users/service"
+import {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+} from "@/components/ui/popover"
+import {
+  Command,
+  CommandInput,
+  CommandList,
+  CommandGroup,
+  CommandItem,
+  CommandEmpty,
+} from "@/components/ui/command"
+
+
+
+const domainOptions = [
+  { value: "partners", label: "협력업체" },
+  { value: "evcp", label: "삼성중공업" },
+]
+
+export function AddRoleDialog() {
+  const [open, setOpen] = React.useState(false)
+  const [isAddPending, startAddTransition] = React.useTransition()
+  const [companies, setCompanies] = React.useState<Company[]>([])  // 회사 목록
+
+  React.useEffect(() => {
+    getAllCompanies().then((res) => {
+      setCompanies(res)
+    })
+  }, [])
+
+  // react-hook-form 세팅
+  const form = useForm<CreateRoleSchema>({
+    resolver: zodResolver(createRoleSchema),
+    defaultValues: {
+      name: "",
+      domain: "evcp",     // 기본값
+      description: "",
+      // companyId: null,  // optional
+    },
+  })
+
+  async function onSubmit(data: CreateRoleSchema) {
+    startAddTransition(async () => {
+      const result = await createRole(data)
+      if (result.error) {
+        toast.error(`에러: ${result.error}`)
+        return
+      }
+      form.reset()
+      setOpen(false)
+      toast.success("Role added")
+    })
+  }
+
+  function handleDialogOpenChange(nextOpen: boolean) {
+    if (!nextOpen) {
+      form.reset()
+    }
+    setOpen(nextOpen)
+  }
+
+  // domain이 partners일 경우 companyId 입력 필드 보이게
+  const selectedDomain = form.watch("domain")
+
+  return (
+    <Dialog open={open} onOpenChange={handleDialogOpenChange}>
+      <DialogTrigger asChild>
+        <Button variant="default" size="sm">
+          Add Role
+        </Button>
+      </DialogTrigger>
+
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Create New Role</DialogTitle>
+          <DialogDescription>
+            새 Role 정보를 입력하고 <b>Create</b> 버튼을 누르세요.
+          </DialogDescription>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)}>
+            <div className="space-y-4 py-4">
+              {/* 1) Role Name */}
+              <FormField
+                control={form.control}
+                name="name"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Role Name</FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder="e.g. admin"
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              {/* 2) Description */}
+              <FormField
+                control={form.control}
+                name="description"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Role Description</FormLabel>
+                    <FormControl>
+                      <Textarea
+                        placeholder="Describe role"
+                        className="resize-none"
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              {/* 3) Domain Select */}
+              <FormField
+                control={form.control}
+                name="domain"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Domain</FormLabel>
+                    <FormControl>
+                      <Select
+                        // domain이 바뀔 때마다 form state에도 반영
+                        onValueChange={field.onChange}
+                        value={field.value}
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select Domain" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {domainOptions.map((v, index) => (
+                            <SelectItem key={index} value={v.value}>
+                              {v.label}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              {/* 4) companyId => domain이 partners인 경우만 노출 */}
+              {selectedDomain === "partners" && (
+              <FormField
+              control={form.control}
+              name="companyId"
+              render={({ field }) => {
+                // 현재 선택된 회사 ID (number) → 문자열
+                const valueString = field.value ? String(field.value) : ""
+
+
+                // 현재 선택된 회사
+                const selectedCompany = companies.find(
+                  (c) => String(c.id) === valueString
+                )
+
+                const selectedCompanyLabel = selectedCompany && `${selectedCompany.name} ${selectedCompany.taxID}`
+
+                const [popoverOpen, setPopoverOpen] = React.useState(false)
+
+
+                return (
+                  <FormItem>
+                    <FormLabel>Company</FormLabel>
+                    <FormControl>
+                      <Popover
+                        open={popoverOpen}
+                        onOpenChange={setPopoverOpen}
+                        modal={true}
+                      >
+                        <PopoverTrigger asChild>
+                          <Button
+                            variant="outline"
+                            role="combobox"
+                            aria-expanded={popoverOpen}
+                            className="w-full justify-between"
+                          >
+                            {selectedCompany
+                              ? `${selectedCompany.name} ${selectedCompany.taxID}`
+                              : "Select company..."}
+                            <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                          </Button>
+                        </PopoverTrigger>
+
+                        <PopoverContent className="w-full p-0">
+                          <Command>
+                            <CommandInput
+                              placeholder="Search company..."
+                              className="h-9"
+
+                            />
+                            <CommandList>
+                              <CommandEmpty>No company found.</CommandEmpty>
+                              <CommandGroup>
+                                {companies.map((comp) => {
+                                  // string(comp.id)
+                                  const compIdStr = String(comp.id)
+                                  const label = `${comp.name}${comp.taxID}`
+                                  const label2 = `${comp.name} ${comp.taxID}`
+                                  return (
+                                    <CommandItem
+                                      key={comp.id}
+                                      value={label2}
+                                      onSelect={() => {
+                                        // 회사 ID를 number로
+                                        field.onChange(Number(comp.id))
+                                        setPopoverOpen(false)
+
+                                      }}
+                                    >
+                                      {label2}
+                                      <Check
+                                        className={cn(
+                                          "ml-auto h-4 w-4",
+                                          selectedCompanyLabel === label2
+                                            ? "opacity-100"
+                                            : "opacity-0"
+                                        )}
+                                      />
+                                    </CommandItem>
+                                  )
+                                })}
+                              </CommandGroup>
+                            </CommandList>
+                          </Command>
+                        </PopoverContent>
+                      </Popover>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )
+              }}
+            />
+              )}
+            </div>
+
+            {/* Footer */}
+            <DialogFooter>
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => setOpen(false)}
+                disabled={isAddPending}
+              >
+                Cancel
+              </Button>
+              <Button
+                type="submit"
+                disabled={form.formState.isSubmitting || isAddPending}
+              >
+                {isAddPending && (
+                  <Loader
+                    className="mr-2 size-4 animate-spin"
+                    aria-hidden="true"
+                  />
+                )}
+                Create
+              </Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  )
+}
\ No newline at end of file
diff --git a/lib/roles/table/assign-roles-sheet.tsx b/lib/roles/table/assign-roles-sheet.tsx
new file mode 100644
index 00000000..11c6a1ff
--- /dev/null
+++ b/lib/roles/table/assign-roles-sheet.tsx
@@ -0,0 +1,87 @@
+"use client"
+
+import * as React from "react"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { toast } from "sonner"
+
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet"
+import { Button } from "@/components/ui/button"
+import { Loader } from "lucide-react"
+import { AssginedUserTable } from "../userTable/assignedUsers-table"
+import { assignUsersToRole } from "@/lib/users/service"
+import { RoleView } from "@/db/schema/users"
+
+export interface UpdateRoleSheetProps
+  extends React.ComponentPropsWithRef<typeof Sheet> {
+  role: RoleView | null
+
+  // ★ 새로 추가: 테이블에 필요한 데이터 로딩 promise
+  assignedTablePromises: Promise<[
+    { data: any[]; pageCount: number }
+
+  ]>
+}
+
+export function AssignRolesSheet({ role, assignedTablePromises, ...props }: UpdateRoleSheetProps) {
+
+  const [isUpdatePending, startUpdateTransition] = React.useTransition()
+  const [selectedUserIds, setSelectedUserIds] = React.useState<number[]>([])
+
+  // 2) 자식에서 호출될 콜백
+  function handleSelectedChange(ids: number[]) {
+    setSelectedUserIds(ids)
+  }
+
+  async function handleAssign() {
+    startUpdateTransition(async () => {
+      if (!role) return
+      const { error } = await assignUsersToRole(role.id, selectedUserIds)
+      if (error) {
+        toast.error(error)
+        return
+      }
+      props.onOpenChange?.(false)
+      toast.success(`Assigned ${selectedUserIds.length} users!`)
+    })
+  }
+
+  return (
+    <Sheet {...props}>
+      <SheetContent className="flex flex-col gap-6 sm:max-w-md">
+        <SheetHeader className="text-left">
+          <SheetTitle>"{role?.name}"에 유저를 할당하세요</SheetTitle>
+          <SheetDescription>
+            현재 {role?.name}에는 {role?.user_count}명이 할당되어있습니다. 이 롤은 다음과 같습니다.<br/> {role?.description}
+          </SheetDescription>
+        </SheetHeader>
+
+        <AssginedUserTable promises={assignedTablePromises} onSelectedChange={handleSelectedChange} />
+
+        <SheetFooter className="gap-2 pt-2 sm:space-x-0">
+        <SheetClose asChild>
+            <Button type="button" variant="outline">
+              Cancel
+            </Button>
+          </SheetClose>
+
+          {/* <Button disabled={isUpdatePending} onClick={onSubmitAssignUsers}> */}
+          <Button disabled={isUpdatePending} onClick={handleAssign}>
+            {isUpdatePending && (
+              <Loader className="mr-2 h-4 w-4 animate-spin" aria-hidden="true" />
+            )}
+            Assign
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  )
+}
\ No newline at end of file
diff --git a/lib/roles/table/delete-roles-dialog.tsx b/lib/roles/table/delete-roles-dialog.tsx
new file mode 100644
index 00000000..269bc7c3
--- /dev/null
+++ b/lib/roles/table/delete-roles-dialog.tsx
@@ -0,0 +1,149 @@
+"use client"
+
+import * as React from "react"
+import { type Row } from "@tanstack/react-table"
+import { Loader, Trash } from "lucide-react"
+import { toast } from "sonner"
+
+import { useMediaQuery } from "@/hooks/use-media-query"
+import { Button } from "@/components/ui/button"
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/components/ui/drawer"
+
+import { removeRoles } from "../services"
+import { RoleView } from "@/db/schema/users"
+
+interface DeleteRolesDialogProps
+  extends React.ComponentPropsWithoutRef<typeof Dialog> {
+  roles: Row<RoleView>["original"][]
+  showTrigger?: boolean
+  onSuccess?: () => void
+}
+
+export function DeleteRolesDialog({
+  roles,
+  showTrigger = true,
+  onSuccess,
+  ...props
+}: DeleteRolesDialogProps) {
+  const [isDeletePending, startDeleteTransition] = React.useTransition()
+  const isDesktop = useMediaQuery("(min-width: 640px)")
+
+  function onDelete() {
+    startDeleteTransition(async () => {
+      const { error } = await removeRoles({
+        ids: roles.map((role) => Number(role.id)),
+      })
+
+      if (error) {
+        toast.error(error)
+        return
+      }
+
+      props.onOpenChange?.(false)
+      toast.success("Users deleted")
+      onSuccess?.()
+    })
+  }
+
+  if (isDesktop) {
+    return (
+      <Dialog {...props}>
+        {showTrigger ? (
+          <DialogTrigger asChild>
+            <Button variant="outline" size="sm">
+              <Trash className="mr-2 size-4" aria-hidden="true" />
+              Delete ({roles.length})
+            </Button>
+          </DialogTrigger>
+        ) : null}
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Are you absolutely sure?</DialogTitle>
+            <DialogDescription>
+              This action cannot be undone. This will permanently delete your{" "}
+              <span className="font-medium">{roles.length}</span>
+              {roles.length === 1 ? " role" : " roles"} from our servers.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter className="gap-2 sm:space-x-0">
+            <DialogClose asChild>
+              <Button variant="outline">Cancel</Button>
+            </DialogClose>
+            <Button
+              aria-label="Delete selected rows"
+              variant="destructive"
+              onClick={onDelete}
+              disabled={isDeletePending}
+            >
+              {isDeletePending && (
+                <Loader
+                  className="mr-2 size-4 animate-spin"
+                  aria-hidden="true"
+                />
+              )}
+              Delete
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    )
+  }
+
+  return (
+    <Drawer {...props}>
+      {showTrigger ? (
+        <DrawerTrigger asChild>
+          <Button variant="outline" size="sm">
+            <Trash className="mr-2 size-4" aria-hidden="true" />
+            Delete ({roles.length})
+          </Button>
+        </DrawerTrigger>
+      ) : null}
+      <DrawerContent>
+        <DrawerHeader>
+          <DrawerTitle>Are you absolutely sure?</DrawerTitle>
+          <DrawerDescription>
+            This action cannot be undone. This will permanently delete your{" "}
+            <span className="font-medium">{roles.length}</span>
+            {roles.length === 1 ? " role" : " roles"} from our servers.
+          </DrawerDescription>
+        </DrawerHeader>
+        <DrawerFooter className="gap-2 sm:space-x-0">
+          <DrawerClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </DrawerClose>
+          <Button
+            aria-label="Delete selected rows"
+            variant="destructive"
+            onClick={onDelete}
+            disabled={isDeletePending}
+          >
+            {isDeletePending && (
+              <Loader className="mr-2 size-4 animate-spin" aria-hidden="true" />
+            )}
+            Delete
+          </Button>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  )
+}
diff --git a/lib/roles/table/role-table-toolbar-actions.tsx b/lib/roles/table/role-table-toolbar-actions.tsx
new file mode 100644
index 00000000..66e279d6
--- /dev/null
+++ b/lib/roles/table/role-table-toolbar-actions.tsx
@@ -0,0 +1,101 @@
+"use client"
+
+import * as React from "react"
+import { type Table } from "@tanstack/react-table"
+import { Download, Upload } from "lucide-react"
+import { toast } from "sonner"
+
+import { exportTableToExcel } from "@/lib/export"
+import { Button } from "@/components/ui/button"
+
+// 삭제, 추가 다이얼로그
+
+// 만약 서버 액션이나 API 라우트를 이용해 업로드 처리한다면 import
+import { importTasksExcel } from "@/lib/tasks/service" // 예시
+import { AddRoleDialog } from "./add-role-dialog"
+import { DeleteRolesDialog } from "./delete-roles-dialog"
+import { RoleView } from "@/db/schema/users"
+
+interface RoleTableToolbarActionsProps {
+  table: Table<RoleView>
+}
+
+export function RoleTableToolbarActions({ table }: RoleTableToolbarActionsProps) {
+  // 파일 input을 숨기고, 버튼 클릭 시 참조해 클릭하는 방식
+  const fileInputRef = React.useRef<HTMLInputElement>(null)
+
+  // 파일이 선택되었을 때 처리
+  async function onFileChange(event: React.ChangeEvent<HTMLInputElement>) {
+    const file = event.target.files?.[0]
+    if (!file) return
+
+    // 파일 초기화 (동일 파일 재업로드 시에도 onChange가 트리거되도록)
+    event.target.value = ""
+
+    // 서버 액션 or API 호출
+    try {
+      // 예: 서버 액션 호출
+      const { errorFile, errorMessage } = await importTasksExcel(file)
+
+      if (errorMessage) {
+        toast.error(errorMessage)
+      }
+      if (errorFile) {
+        // 에러 엑셀을 다운로드
+        const url = URL.createObjectURL(errorFile)
+        const link = document.createElement("a")
+        link.href = url
+        link.download = "errors.xlsx"
+        link.click()
+        URL.revokeObjectURL(url)
+      } else {
+        // 성공
+        toast.success("Import success")
+        // 필요 시 revalidateTag("tasks") 등
+      }
+
+    } catch (err) {
+      toast.error("파일 업로드 중 오류가 발생했습니다.")
+
+    }
+  }
+
+  function handleImportClick() {
+    // 숨겨진 <input type="file" /> 요소를 클릭
+    fileInputRef.current?.click()
+  }
+
+  return (
+    <div className="flex items-center gap-2">
+
+      {table.getFilteredSelectedRowModel().rows.length > 0 ? (
+        <DeleteRolesDialog
+          roles={table
+            .getFilteredSelectedRowModel()
+            .rows.map((row) => row.original)}
+          onSuccess={() => table.toggleAllRowsSelected(false)}
+        />
+      ) : null}
+
+      <AddRoleDialog />
+
+
+
+      {/** 4) Export 버튼 */}
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={() =>
+          exportTableToExcel(table, {
+            filename: "roles",
+            excludeColumns: ["select", "actions"],
+          })
+        }
+        className="gap-2"
+      >
+        <Download className="size-4" aria-hidden="true" />
+        <span className="hidden sm:inline">Export</span>
+      </Button>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/lib/roles/table/roles-table-columns.tsx b/lib/roles/table/roles-table-columns.tsx
new file mode 100644
index 00000000..3a491585
--- /dev/null
+++ b/lib/roles/table/roles-table-columns.tsx
@@ -0,0 +1,223 @@
+"use client"
+
+import * as React from "react"
+import { type DataTableRowAction } from "@/types/table"
+import { type ColumnDef } from "@tanstack/react-table"
+import { Ellipsis } from "lucide-react"
+
+import { formatDate } from "@/lib/utils"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Checkbox } from "@/components/ui/checkbox"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { DataTableColumnHeader } from "@/components/data-table/data-table-column-header"
+import { UserWithCompanyAndRoles } from "@/types/user"
+import { getErrorMessage } from "@/lib/handle-error"
+
+import { modifiUser } from "@/lib/admin-users/service"
+import { toast } from "sonner"
+
+import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header"
+import { MultiSelect } from "@/components/ui/multi-select"
+import { roleColumnsConfig } from "@/config/roleColumnsConfig"
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
+import { RoleView } from "@/db/schema/users"
+
+interface GetColumnsProps {
+  setRowAction: React.Dispatch<React.SetStateAction<DataTableRowAction<RoleView> | null>>
+}
+
+/**
+ * tanstack table 컬럼 정의 (중첩 헤더 버전)
+ */
+export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<RoleView>[] {
+  // ----------------------------------------------------------------
+  // 1) select 컬럼 (체크박스)
+  // ----------------------------------------------------------------
+  const selectColumn: ColumnDef<RoleView> = {
+    id: "select",
+    header: ({ table }) => (
+      <Checkbox
+        checked={
+          table.getIsAllPageRowsSelected() ||
+          (table.getIsSomePageRowsSelected() && "indeterminate")
+        }
+        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+        aria-label="Select all"
+        className="translate-y-0.5"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={(value) => row.toggleSelected(!!value)}
+        aria-label="Select row"
+        className="translate-y-0.5"
+      />
+    ),
+    size:40,
+    enableSorting: false,
+    enableHiding: false,
+  }
+
+  // ----------------------------------------------------------------
+  // 2) actions 컬럼 (Dropdown 메뉴)
+  // ----------------------------------------------------------------
+  const actionsColumn: ColumnDef<RoleView> = {
+    id: "actions",
+    enableHiding: false,
+    cell: function Cell({ row }) {
+      const [isUpdatePending, startUpdateTransition] = React.useTransition()
+
+      return (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              aria-label="Open menu"
+              variant="ghost"
+              className="flex size-8 p-0 data-[state=open]:bg-muted"
+            >
+              <Ellipsis className="size-4" aria-hidden="true" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-40">
+            <DropdownMenuItem
+              onSelect={() => setRowAction({ row, type: "update" })}
+            >
+              Edit
+            </DropdownMenuItem>
+
+            <DropdownMenuItem
+              onSelect={() => setRowAction({ row, type: "user" })}
+            >
+              User Assignment
+            </DropdownMenuItem>
+            
+            <DropdownMenuSeparator />
+            <DropdownMenuItem
+              onSelect={() => setRowAction({ row, type: "delete" })}
+            >
+              Delete
+              <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      )
+    },
+    size: 40,
+  }
+
+  // ----------------------------------------------------------------
+  // 3) 일반 컬럼들을 "그룹"별로 묶어 중첩 columns 생성
+  // ----------------------------------------------------------------
+  // 3-1) groupMap: { [groupName]: ColumnDef<User>[] }
+  const groupMap: Record<string, ColumnDef<RoleView>[]> = {}
+
+  roleColumnsConfig.forEach((cfg) => {
+    // 만약 group가 없으면 "_noGroup" 처리
+    const groupName = cfg.group || "_noGroup"
+
+    if (!groupMap[groupName]) {
+      groupMap[groupName] = []
+    }
+
+    // child column 정의
+    const childCol: ColumnDef<RoleView> = {
+      accessorKey: cfg.id,
+      enableResizing: true,
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title={cfg.label} />
+      ),
+      meta: {
+        excelHeader: cfg.excelHeader,
+        group: cfg.group,
+        type: cfg.type,
+      },
+      cell: ({ row, cell }) => {
+
+        if (cfg.id === "created_at") {
+          const dateVal = cell.getValue() as Date
+          return formatDate(dateVal)
+        }
+
+        if (cfg.id === "domain") {
+          const dateVal = cell.getValue() as string
+          return (
+            <div className="flex w-[6.25rem] items-center">
+            {dateVal === "evcp"?"삼성중공업":"협력업체"}
+            </div>)
+        }
+
+        if (cfg.id === "user_count") {
+          const dateVal = cell.getValue() as number
+          return (
+            <div className="flex w-[3.25rem] items-center">
+            {dateVal}
+            </div>)
+        }
+
+        if (cfg.id === "description") {
+          const val = cell.getValue() as string;
+          return (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <span className="line-clamp-2 w-[400px]">
+                  {val}
+                </span>
+              </TooltipTrigger>
+              <TooltipContent>
+                {val}
+              </TooltipContent>
+            </Tooltip>
+          );
+        }
+
+        return row.getValue(cfg.id) ?? ""
+      },
+    }
+
+    groupMap[groupName].push(childCol)
+  })
+
+  // ----------------------------------------------------------------
+  // 3-2) groupMap에서 실제 상위 컬럼(그룹)을 만들기
+  // ----------------------------------------------------------------
+  const nestedColumns: ColumnDef<RoleView>[] = []
+
+  // 순서를 고정하고 싶다면 group 순서를 미리 정의하거나 sort해야 함
+  // 여기서는 그냥 Object.entries 순서
+  Object.entries(groupMap).forEach(([groupName, colDefs]) => {
+    if (groupName === "_noGroup") {
+      // 그룹 없음 → 그냥 최상위 레벨 컬럼
+      nestedColumns.push(...colDefs)
+    } else {
+      // 상위 컬럼
+      nestedColumns.push({
+        id: groupName,
+        header: groupName, // "Basic Info", "Metadata" 등
+        columns: colDefs,
+      })
+    }
+  })
+
+  // ----------------------------------------------------------------
+  // 4) 최종 컬럼 배열: select, nestedColumns, actions
+  // ----------------------------------------------------------------
+  return [
+    selectColumn,
+    ...nestedColumns,
+    actionsColumn,
+  ]
+}
\ No newline at end of file
diff --git a/lib/roles/table/roles-table.tsx b/lib/roles/table/roles-table.tsx
new file mode 100644
index 00000000..cd7c2a3b
--- /dev/null
+++ b/lib/roles/table/roles-table.tsx
@@ -0,0 +1,169 @@
+"use client"
+
+import * as React from "react"
+import type {
+  DataTableAdvancedFilterField,
+  DataTableFilterField,
+  DataTableRowAction,
+} from "@/types/table"
+
+import { toSentenceCase } from "@/lib/utils"
+import { useDataTable } from "@/hooks/use-data-table"
+import { DataTable } from "@/components/data-table/data-table"
+import { DataTableAdvancedToolbar } from "@/components/data-table/data-table-advanced-toolbar"
+import { DataTableToolbar } from "@/components/data-table/data-table-toolbar"
+
+
+import { getRolesWithCount } from "@/lib/roles/services"
+import { getColumns } from "./roles-table-columns"
+import { RoleTableToolbarActions } from "./role-table-toolbar-actions"
+import { UpdateRolesSheet } from "./update-roles-sheet"
+import { AssignRolesSheet } from "./assign-roles-sheet"
+import { getUsersAll } from "@/lib/users/service"
+import { DeleteRolesDialog } from "./delete-roles-dialog"
+import { RoleView } from "@/db/schema/users"
+
+
+interface RolesTableProps {
+  promises: Promise<
+    [
+      Awaited<ReturnType<typeof getRolesWithCount>>,
+    ]
+  >
+  promises2: Promise<
+  [
+    Awaited<ReturnType<typeof getUsersAll>>,
+  ]
+>
+}
+
+export function RolesTable({ promises ,promises2 }: RolesTableProps) {
+
+  const [{ data, pageCount }] =
+    React.use(promises)
+
+  const [rowAction, setRowAction] =
+    React.useState<DataTableRowAction<RoleView> | null>(null)
+
+  const columns = React.useMemo(
+    () => getColumns({ setRowAction }),
+    [setRowAction]
+  )
+
+
+  /**
+   * This component can render either a faceted filter or a search filter based on the `options` prop.
+   *
+   * @prop options - An array of objects, each representing a filter option. If provided, a faceted filter is rendered. If not, a search filter is rendered.
+   *
+   * Each `option` object has the following properties:
+   * @prop {string} label - The label for the filter option.
+   * @prop {string} value - The value for the filter option.
+   * @prop {React.ReactNode} [icon] - An optional icon to display next to the label.
+   * @prop {boolean} [withCount] - An optional boolean to display the count of the filter option.
+   */
+  const filterFields: DataTableFilterField<RoleView>[] = [
+    {
+      id: "name",
+      label: "Role Name",
+      placeholder: "Filter role name...",
+    },
+
+  ]
+
+  /**
+   * Advanced filter fields for the data table.
+   * These fields provide more complex filtering options compared to the regular filterFields.
+   *
+   * Key differences from regular filterFields:
+   * 1. More field types: Includes 'text', 'multi-select', 'date', and 'boolean'.
+   * 2. Enhanced flexibility: Allows for more precise and varied filtering options.
+   * 3. Used with DataTableAdvancedToolbar: Enables a more sophisticated filtering UI.
+   * 4. Date and boolean types: Adds support for filtering by date ranges and boolean values.
+   */
+  const advancedFilterFields: DataTableAdvancedFilterField<RoleView>[] = [
+    {
+      id: "name",
+      label: "Role Name",
+      type: "text",
+    },
+
+    {
+      id: "domain",
+      label: "룰 도메인",
+      type: "text",
+    },
+
+    {
+      id: "company_name",
+      label: "회사명",
+      type: "text",
+    },
+
+    {
+      id: "created_at",
+      label: "Created at",
+      type: "date",
+    },
+  ]
+
+
+  const { table } = useDataTable({
+    data,
+    columns,
+    pageCount,
+    filterFields,
+    enablePinning: true,
+    enableAdvancedFilter: true,
+    initialState: {
+      sorting: [{ id: "created_at", desc: true }],
+      columnPinning: { right: ["actions"] },
+    },
+    getRowId: (originalRow) => `${originalRow.id}`,
+    shallow: false,
+    clearOnDefault: true,
+  })
+
+  return (
+    <>
+      <DataTable
+        table={table}
+
+      >
+        <DataTableAdvancedToolbar
+          table={table}
+          filterFields={advancedFilterFields}
+          shallow={false}
+        >
+          <RoleTableToolbarActions table={table} />
+        </DataTableAdvancedToolbar>
+
+        </DataTable>
+
+        <UpdateRolesSheet
+          open={rowAction?.type === "update"}
+          onOpenChange={() => setRowAction(null)}
+          role={rowAction?.row.original ?? null}
+        />
+
+        <AssignRolesSheet
+          open={rowAction?.type === "user"}
+          onOpenChange={() => setRowAction(null)}
+          role={rowAction?.row.original ?? null}
+          assignedTablePromises={promises2}
+        />
+
+      <DeleteRolesDialog
+        open={rowAction?.type === "delete"}
+        onOpenChange={() => setRowAction(null)}
+        roles={rowAction?.row.original ? [rowAction?.row.original] : []}
+        showTrigger={false}
+        onSuccess={() => rowAction?.row.toggleSelected(false)}
+      />
+
+
+
+
+    </>
+  )
+}
diff --git a/lib/roles/table/update-roles-sheet.tsx b/lib/roles/table/update-roles-sheet.tsx
new file mode 100644
index 00000000..cbe20352
--- /dev/null
+++ b/lib/roles/table/update-roles-sheet.tsx
@@ -0,0 +1,331 @@
+"use client"
+
+import * as React from "react"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { toast } from "sonner"
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet"
+import { Button } from "@/components/ui/button"
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form"
+import { Input } from "@/components/ui/input"
+import {
+  Select,
+  SelectTrigger,
+  SelectContent,
+  SelectItem,
+  SelectValue,
+  SelectGroup,
+} from "@/components/ui/select"
+// import your MultiSelect or other role selection
+import { RoleView, userRoles, type UserView } from "@/db/schema/users"
+import { getAllCompanies, modifiUser } from "@/lib/admin-users/service"
+import { modifiRole } from "../services"
+import { updateRoleSchema, UpdateRoleSchema } from "../validations"
+import { Check, ChevronsUpDown, Loader } from "lucide-react"
+import { Textarea } from "@/components/ui/textarea"
+import {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+} from "@/components/ui/popover"
+import {
+  Command,
+  CommandInput,
+  CommandList,
+  CommandGroup,
+  CommandItem,
+  CommandEmpty,
+} from "@/components/ui/command"
+import { Company } from "@/db/schema/companies"
+import { cn } from "@/lib/utils"
+
+export interface UpdateRoleSheetProps
+  extends React.ComponentPropsWithRef<typeof Sheet> {
+  role: RoleView | null
+}
+
+const domainOptions = [
+  { value: "partners", label: "협력업체" },
+  { value: "evcp", label: "삼성중공업" },
+]
+
+
+
+export function UpdateRolesSheet({ role, ...props }: UpdateRoleSheetProps) {
+  const [isUpdatePending, startUpdateTransition] = React.useTransition()
+  const [companies, setCompanies] = React.useState<Company[]>([])  // 회사 목록
+
+  React.useEffect(() => {
+    getAllCompanies().then((res) => {
+      setCompanies(res)
+    })
+  }, [])
+
+
+  // 1) RHF 설정
+  const form = useForm<UpdateRoleSchema>({
+    resolver: zodResolver(updateRoleSchema),
+    defaultValues: {
+      name: role?.name ?? "",
+      description: role?.description ?? "",
+      domain:  (role?.domain === "evcp" || role?.domain === "partners")
+      ? role?.domain
+      : undefined,
+    },
+  })
+
+  // 2) user prop 바뀔 때마다 form.reset
+  React.useEffect(() => {
+    if (role) {
+      form.reset({
+        name: role.name,
+        description: role.description,
+        domain: role.domain as "evcp" | "partners" | undefined,
+      })
+    }
+  }, [role, form])
+
+  const selectedDomain = form.watch("domain")
+
+  
+  // 3) onSubmit
+  async function onSubmit(input: UpdateRoleSchema) {
+    startUpdateTransition(async () => {
+      if (!role) return
+
+      const { error } = await modifiRole({
+        id: role.id, // user.userId
+        ...input,
+      })
+
+      if (error) {
+        toast.error(error)
+        return
+      }
+
+      // 성공 시
+      form.reset()
+      props.onOpenChange?.(false)
+      toast.success("User updated successfully!")
+    })
+  }
+
+  return (
+    <Sheet {...props}>
+      <SheetContent className="flex flex-col gap-6 sm:max-w-md">
+        <SheetHeader className="text-left">
+          <SheetTitle>Update user</SheetTitle>
+          <SheetDescription>
+            Update the user details and save the changes
+          </SheetDescription>
+        </SheetHeader>
+
+        {/* 4) RHF Form */}
+        <Form {...form}>
+          <form
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="flex flex-col gap-4"
+          >
+            {/* name */}
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Role Name</FormLabel>
+                  <FormControl>
+                    <Input
+                      placeholder="e.g. admin"
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="description"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Role Description</FormLabel>
+                  <FormControl>
+                    <Textarea
+                      placeholder="Describe role"
+                      className="resize-none"
+                      {...field}
+                    />
+                  </FormControl>
+                  {/* <FormDescription>
+                      You can <span>@mention</span> other users and organizations to
+                      link to them.
+                    </FormDescription> */}
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+
+            {/* language Select */}
+            <FormField
+              control={form.control}
+              name="domain"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Domain</FormLabel>
+                  <FormControl>
+                    <Select
+                      onValueChange={field.onChange}
+                      // 'value'로 현재 값 연결. defaultValue 대신 Controlled 컴포넌트로
+                      value={field.value}
+                    >
+                      <SelectTrigger>
+                        <SelectValue placeholder="Select Domain" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {domainOptions.map((v, index) => (
+                          <SelectItem key={index} value={v.value}>
+                            {v.label}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {selectedDomain === "partners" && (
+              <FormField
+                control={form.control}
+                name="company_id"
+                render={({ field }) => {
+                  // 현재 선택된 회사 ID (number) → 문자열
+                  const valueString = field.value ? String(field.value) : ""
+
+
+                  // 현재 선택된 회사
+                  const selectedCompany = companies.find(
+                    (c) => String(c.id) === valueString
+                  )
+
+                  const selectedCompanyLabel = selectedCompany && `${selectedCompany.name} ${selectedCompany.taxID}`
+
+                  const [popoverOpen, setPopoverOpen] = React.useState(false)
+
+
+                  return (
+                    <FormItem>
+                      <FormLabel>Company</FormLabel>
+                      <FormControl>
+                        <Popover
+                          open={popoverOpen}
+                          onOpenChange={setPopoverOpen}
+                          modal={true}
+                        >
+                          <PopoverTrigger asChild>
+                            <Button
+                              variant="outline"
+                              role="combobox"
+                              aria-expanded={popoverOpen}
+                              className="w-full justify-between"
+                            >
+                              {selectedCompany
+                                ? `${selectedCompany.name} ${selectedCompany.taxID}`
+                                : "Select company..."}
+                              <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                            </Button>
+                          </PopoverTrigger>
+
+                          <PopoverContent className="w-full p-0" side="bottom" >
+                            <Command>
+                              <CommandInput
+                                placeholder="Search company..."
+                                className="h-9"
+
+                              />
+                              <CommandList>
+                                <CommandEmpty>No company found.</CommandEmpty>
+                                <CommandGroup>
+                                  {companies.map((comp) => {
+                                    // string(comp.id)
+                                    const compIdStr = String(comp.id)
+                                    const label = `${comp.name}${comp.taxID}`
+                                    const label2 = `${comp.name} ${comp.taxID}`
+                                    return (
+                                      <CommandItem
+                                        key={comp.id}
+                                        value={label2}
+                                        onSelect={() => {
+                                          // 회사 ID를 number로
+                                          field.onChange(Number(comp.id))
+                                          setPopoverOpen(false)
+
+                                        }}
+                                      >
+                                        {label2}
+                                        <Check
+                                          className={cn(
+                                            "ml-auto h-4 w-4",
+                                            selectedCompanyLabel === label2
+                                              ? "opacity-100"
+                                              : "opacity-0"
+                                          )}
+                                        />
+                                      </CommandItem>
+                                    )
+                                  })}
+                                </CommandGroup>
+                              </CommandList>
+                            </Command>
+                          </PopoverContent>
+                        </Popover>
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )
+                }}
+              />
+            )}
+
+            {/* 5) Footer: Cancel, Save */}
+            <SheetFooter className="gap-2 pt-2 sm:space-x-0">
+              <SheetClose asChild>
+                <Button type="button" variant="outline">
+                  Cancel
+                </Button>
+              </SheetClose>
+
+              <Button type="submit" disabled={isUpdatePending}>
+                {isUpdatePending && (
+                  <Loader
+                    className="mr-2 size-4 animate-spin"
+                    aria-hidden="true"
+                  />
+                )}
+                Save
+              </Button>
+            </SheetFooter>
+          </form>
+        </Form>
+      </SheetContent>
+    </Sheet>
+  )
+}
\ No newline at end of file
diff --git a/lib/roles/userTable/assginedUsers-table-columns.tsx b/lib/roles/userTable/assginedUsers-table-columns.tsx
new file mode 100644
index 00000000..b317a465
--- /dev/null
+++ b/lib/roles/userTable/assginedUsers-table-columns.tsx
@@ -0,0 +1,164 @@
+"use client"
+
+import * as React from "react"
+import { type DataTableRowAction } from "@/types/table"
+import { type ColumnDef } from "@tanstack/react-table"
+import { Ellipsis } from "lucide-react"
+import { userRoles, type UserView } from "@/db/schema/users"
+
+import { formatDate } from "@/lib/utils"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Checkbox } from "@/components/ui/checkbox"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { DataTableColumnHeader } from "@/components/data-table/data-table-column-header"
+import { UserWithCompanyAndRoles } from "@/types/user"
+import { getErrorMessage } from "@/lib/handle-error"
+
+import { modifiUser } from "@/lib/admin-users/service"
+import { toast } from "sonner"
+
+import { euserColumnsConfig } from "@/config/euserColumnsConfig"
+import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header"
+import { MultiSelect } from "@/components/ui/multi-select"
+
+interface GetColumnsProps {
+  setRowAction: React.Dispatch<React.SetStateAction<DataTableRowAction<UserView> | null>>
+}
+
+/**
+ * tanstack table 컬럼 정의 (중첩 헤더 버전)
+ */
+export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<UserView>[] {
+  // ----------------------------------------------------------------
+  // 1) select 컬럼 (체크박스)
+  // ----------------------------------------------------------------
+  const selectColumn: ColumnDef<UserView> = {
+    id: "select",
+    header: ({ table }) => (
+      <Checkbox
+        checked={
+          table.getIsAllPageRowsSelected() ||
+          (table.getIsSomePageRowsSelected() && "indeterminate")
+        }
+        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+        aria-label="Select all"
+        className="translate-y-0.5"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={(value) => row.toggleSelected(!!value)}
+        aria-label="Select row"
+        className="translate-y-0.5"
+      />
+    ),
+    size:40,
+    enableSorting: false,
+    enableHiding: false,
+  }
+
+  // ----------------------------------------------------------------
+  // 2) actions 컬럼 (Dropdown 메뉴)
+  // ----------------------------------------------------------------
+
+
+  // ----------------------------------------------------------------
+  // 3) 일반 컬럼들을 "그룹"별로 묶어 중첩 columns 생성
+  // ----------------------------------------------------------------
+  // 3-1) groupMap: { [groupName]: ColumnDef<User>[] }
+  const groupMap: Record<string, ColumnDef<UserView>[]> = {}
+
+  euserColumnsConfig.forEach((cfg) => {
+    // 만약 group가 없으면 "_noGroup" 처리
+    const groupName = cfg.group || "_noGroup"
+
+    if (!groupMap[groupName]) {
+      groupMap[groupName] = []
+    }
+
+    // child column 정의
+    const childCol: ColumnDef<UserView> = {
+      accessorKey: cfg.id,
+      enableResizing: true,
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title={cfg.label} />
+      ),
+      meta: {
+        excelHeader: cfg.excelHeader,
+        group: cfg.group,
+        type: cfg.type,
+      },
+      cell: ({ row, cell }) => {
+
+        if (cfg.id === "created_at") {
+          const dateVal = cell.getValue() as Date
+          return formatDate(dateVal)
+        }
+
+        if (cfg.id === "roles") {
+          const roleValues = row.original.roles;
+          return (
+            <div className="flex flex-wrap gap-1">
+              {roleValues.map((v) => (
+                v === null?"":
+ 
+                <Badge key={v} variant="outline">
+                  {v}
+                </Badge>
+   
+              ))}
+            </div>
+          );
+        }
+
+        return row.getValue(cfg.id) ?? ""
+      },
+    }
+
+    groupMap[groupName].push(childCol)
+  })
+
+  // ----------------------------------------------------------------
+  // 3-2) groupMap에서 실제 상위 컬럼(그룹)을 만들기
+  // ----------------------------------------------------------------
+  const nestedColumns: ColumnDef<UserView>[] = []
+
+  // 순서를 고정하고 싶다면 group 순서를 미리 정의하거나 sort해야 함
+  // 여기서는 그냥 Object.entries 순서
+  Object.entries(groupMap).forEach(([groupName, colDefs]) => {
+    if (groupName === "_noGroup") {
+      // 그룹 없음 → 그냥 최상위 레벨 컬럼
+      nestedColumns.push(...colDefs)
+    } else {
+      // 상위 컬럼
+      nestedColumns.push({
+        id: groupName,
+        header: groupName, // "Basic Info", "Metadata" 등
+        columns: colDefs,
+      })
+    }
+  })
+
+  // ----------------------------------------------------------------
+  // 4) 최종 컬럼 배열: select, nestedColumns, actions
+  // ----------------------------------------------------------------
+  return [
+    selectColumn,
+    ...nestedColumns,
+
+  ]
+}
\ No newline at end of file
diff --git a/lib/roles/userTable/assignedUsers-table.tsx b/lib/roles/userTable/assignedUsers-table.tsx
new file mode 100644
index 00000000..5ac52f13
--- /dev/null
+++ b/lib/roles/userTable/assignedUsers-table.tsx
@@ -0,0 +1,159 @@
+"use client"
+
+import * as React from "react"
+import { userRoles ,  type UserView} from "@/db/schema/users"
+import type {
+  DataTableAdvancedFilterField,
+  DataTableFilterField,
+  DataTableRowAction,
+} from "@/types/table"
+
+import { toSentenceCase } from "@/lib/utils"
+import { useDataTable } from "@/hooks/use-data-table"
+import { DataTable } from "@/components/data-table/data-table"
+import { DataTableAdvancedToolbar } from "@/components/data-table/data-table-advanced-toolbar"
+import { DataTableToolbar } from "@/components/data-table/data-table-toolbar"
+
+import type {
+  getAllRoles, getUsersAll, getUsersEVCP
+} from "@/lib//users/service"
+import { getColumns } from "./assginedUsers-table-columns"
+
+
+
+interface UsersTableProps {
+  promises: Promise<
+    [
+      Awaited<ReturnType<typeof getUsersAll>>
+
+    ]
+  >
+  onSelectedChange:any
+}
+
+export function AssginedUserTable({ promises ,onSelectedChange}: UsersTableProps) {
+
+  const [{ data, pageCount }] =
+    React.use(promises)
+
+
+  const [rowAction, setRowAction] =
+    React.useState<DataTableRowAction<UserView> | null>(null)
+
+  const columns = React.useMemo(
+    () => getColumns({ setRowAction }),
+    [setRowAction]
+  )
+
+
+
+  /**
+   * This component can render either a faceted filter or a search filter based on the `options` prop.
+   *
+   * @prop options - An array of objects, each representing a filter option. If provided, a faceted filter is rendered. If not, a search filter is rendered.
+   *
+   * Each `option` object has the following properties:
+   * @prop {string} label - The label for the filter option.
+   * @prop {string} value - The value for the filter option.
+   * @prop {React.ReactNode} [icon] - An optional icon to display next to the label.
+   * @prop {boolean} [withCount] - An optional boolean to display the count of the filter option.
+   */
+  const filterFields: DataTableFilterField<UserView>[] = [
+    {
+      id: "user_email",
+      label: "Email",
+      placeholder: "Filter email...",
+    },
+
+  ]
+
+  /**
+   * Advanced filter fields for the data table.
+   * These fields provide more complex filtering options compared to the regular filterFields.
+   *
+   * Key differences from regular filterFields:
+   * 1. More field types: Includes 'text', 'multi-select', 'date', and 'boolean'.
+   * 2. Enhanced flexibility: Allows for more precise and varied filtering options.
+   * 3. Used with DataTableAdvancedToolbar: Enables a more sophisticated filtering UI.
+   * 4. Date and boolean types: Adds support for filtering by date ranges and boolean values.
+   */
+  const advancedFilterFields: DataTableAdvancedFilterField<UserView>[] = [
+    {
+      id: "user_name",
+      label: "User Name",
+      type: "text",
+    },
+    {
+      id: "user_email",
+      label: "Email",
+      type: "text",
+    },
+
+
+    {
+      id: "created_at",
+      label: "Created at",
+      type: "date",
+    },
+  ]
+
+  const { table } = useDataTable({
+    data,
+    columns,
+    pageCount,
+    filterFields,
+    enablePinning: true,
+    enableAdvancedFilter: true,
+    initialState: {
+      sorting: [{ id: "created_at", desc: true }],
+      columnPinning: { right: ["actions"] },
+    },
+    getRowId: (originalRow) => `${originalRow.user_id}`,
+    shallow: false,
+    clearOnDefault: true,
+  })
+
+  const rowSelection = table.getState().rowSelection
+
+  function shallowEqual(arrA: number[], arrB: number[]): boolean {
+    if (arrA.length !== arrB.length) return false
+    for (let i = 0; i < arrA.length; i++) {
+      if (arrA[i] !== arrB[i]) return false
+    }
+    return true
+  }
+  const previousUserIdsRef = React.useRef<number[]>([])
+
+  React.useEffect(() => {
+    // 선택 상태가 바뀌었을 때만 실행
+    if (!onSelectedChange) return
+    
+    const rows = table.getSelectedRowModel().rows
+    const newUserIds = rows.map((r) => r.original.user_id)
+  
+    // 이전/새 userIds 비교
+    if (!shallowEqual(previousUserIdsRef.current, newUserIds)) {
+      previousUserIdsRef.current = newUserIds
+      onSelectedChange(newUserIds)
+    }
+  }, [rowSelection, onSelectedChange])
+
+  return (
+    <>
+      <DataTable
+        table={table}
+
+      >
+        <DataTableAdvancedToolbar
+          table={table}
+          filterFields={advancedFilterFields}
+          shallow={false}
+        >
+        </DataTableAdvancedToolbar>
+
+      </DataTable>
+
+   
+    </>
+  )
+}
diff --git a/lib/roles/validations.ts b/lib/roles/validations.ts
new file mode 100644
index 00000000..10cfe33b
--- /dev/null
+++ b/lib/roles/validations.ts
@@ -0,0 +1,80 @@
+import {
+    createSearchParamsCache,
+    parseAsArrayOf,
+    parseAsInteger,
+    parseAsString,
+    parseAsStringEnum,
+} from "nuqs/server"
+import * as z from "zod"
+import { getFiltersStateParser, getSortingStateParser } from "@/lib/parsers"
+import { RoleView, users } from "@/db/schema/users";
+
+export const searchParamsCache = createSearchParamsCache({
+    flags: parseAsArrayOf(z.enum(["advancedTable", "floatingBar"])).withDefault(
+      []
+    ),
+    page: parseAsInteger.withDefault(1),
+    perPage: parseAsInteger.withDefault(10),
+    sort: getSortingStateParser<RoleView>().withDefault([
+      { id: "created_at", desc: true },
+    ]),
+    name: parseAsString.withDefault(""),
+    // advanced filter
+    filters: getFiltersStateParser().withDefault([]),
+    joinOperator: parseAsStringEnum(["and", "or"]).withDefault("and"),
+    search: parseAsString.withDefault(""),
+  
+  })
+
+  export const createRoleSchema = z.object({
+    name: z.string().min(1),                          
+    description: z.string().min(1),   
+    companyId:z
+    .number()
+    .int()
+    .positive()
+    .nullish(), // number | nullish                    
+    domain: z.enum(users.domain.enumValues),           // "evcp" | "partners"
+  });
+
+  export const createRoleAssignmentSchema = z.object({
+    evcpRoles:z.array(z.string()),                       
+
+  });
+
+  
+
+  export const updateRoleSchema = z.object({
+    name: z.string().min(1),                          
+    description: z.string().min(1),                       
+    domain: z.enum(users.domain.enumValues),           // "evcp" | "partners"
+    company_id: z
+    .number()
+    .int()
+    .positive()
+    .nullish(), // number | nullish
+  }).superRefine((data, ctx) => {
+    // domain이 partners 이면 companyId는 필수
+    if (data.domain === "partners" && !data.company_id) {
+      ctx.addIssue({
+        code: "custom",
+        path: ["company_id"],
+        message: "협력업체(domain=partners)일 경우 companyId는 필수입니다.",
+      })
+    }
+  
+    // domain이 evcp 이면 companyId는 null이어야 한다면(정책상)
+    if (data.domain === "evcp" && data.company_id) {
+      ctx.addIssue({
+        code: "custom",
+        path: ["company_id"],
+        message: "domain=evcp이면 companyId를 입력할 수 없습니다.",
+      })
+    }
+  })
+  
+// TypeScript에서 사용할 타입
+export type GetRolesSchema =  Awaited<ReturnType<typeof searchParamsCache.parse>>
+export type CreateRoleSchema = z.infer<typeof createRoleSchema>
+export type UpdateRoleSchema = z.infer<typeof updateRoleSchema>
+export type CreateRoleAssignmentSchema = z.infer<typeof createRoleAssignmentSchema>
\ No newline at end of file
diff --git a/lib/storage.ts b/lib/storage.ts
new file mode 100644
index 00000000..ead937aa
--- /dev/null
+++ b/lib/storage.ts
@@ -0,0 +1,44 @@
+import fs from "fs/promises"
+import path from "path"
+import crypto from "crypto"
+
+/**
+ * 주어진 File을 해시된 파일명으로 로컬에 저장하고,
+ * 저장된 파일의 메타데이터를 반환하는 공용 함수
+ */
+export async function saveDocument(
+  file: File,
+  directory: string = "./public"
+) {
+  // 확장자 추출
+  const originalName = file.name
+  const ext = path.extname(originalName) || ""
+
+  // 해시 파일명 생성
+  const randomHash = crypto.randomBytes(20).toString("hex")
+  const hashedFileName = randomHash + ext
+
+  // 파일 저장
+  await storeFile(file, hashedFileName, directory)
+
+  // 필요한 메타데이터 반환 (원본 이름, 해시 파일명 등)
+  return {
+    originalName,
+    hashedFileName,
+    ext,
+    // 필요하면 file.size, file.type 등도 포함 가능
+  }
+}
+
+/**
+ * 실제 파일 쓰기 (로컬이든, S3든 자유롭게 교체 가능)
+ */
+async function storeFile(file: File, hashedFileName: string, directory: string) {
+  const arrayBuffer = await file.arrayBuffer()
+  const buffer = Buffer.from(arrayBuffer)
+
+  const filePath = path.join(directory, hashedFileName)
+
+  // 만약 기존 파일에 추가가 아니라 새 파일 생성이라면 writeFile 사용
+  await fs.writeFile(filePath, buffer)
+}
\ No newline at end of file
diff --git a/lib/tag-numbering/repository.ts b/lib/tag-numbering/repository.ts
new file mode 100644
index 00000000..6ebf84db
--- /dev/null
+++ b/lib/tag-numbering/repository.ts
@@ -0,0 +1,45 @@
+import db from "@/db/db";
+import { viewTagSubfields } from "@/db/schema/vendorData";
+import {
+  eq,
+  inArray,
+  not,
+  asc,
+  desc,
+  and,
+  ilike,
+  gte,
+  lte,
+  count,
+  gt,
+} from "drizzle-orm";
+import { PgTransaction } from "drizzle-orm/pg-core";
+
+export async function selectTagNumbering(
+    tx: PgTransaction<any, any, any>,
+    params: {
+      where?: any; // drizzle-orm의 조건식 (and, eq...) 등
+      orderBy?: (ReturnType<typeof asc> | ReturnType<typeof desc>)[];
+      offset?: number;
+      limit?: number;
+    }
+  ) {
+    const { where, orderBy, offset = 0, limit = 10 } = params;
+  
+    return tx
+      .select()
+      .from(viewTagSubfields)
+      .where(where)
+      .orderBy(...(orderBy ?? []))
+      .offset(offset)
+      .limit(limit);
+  }
+  /** 총 개수 count */
+  export async function countTagNumbering(
+    tx: PgTransaction<any, any, any>,
+    where?: any
+  ) {
+    const res = await tx.select({ count: count() }).from(viewTagSubfields).where(where);
+    return res[0]?.count ?? 0;
+  }
+  
\ No newline at end of file
diff --git a/lib/tag-numbering/service.ts b/lib/tag-numbering/service.ts
new file mode 100644
index 00000000..9b1c1172
--- /dev/null
+++ b/lib/tag-numbering/service.ts
@@ -0,0 +1,123 @@
+"use server"; // Next.js 서버 액션에서 직접 import하려면 (선택)
+
+import { revalidateTag, unstable_noStore } from "next/cache";
+import  db  from "@/db/db";
+import { unstable_cache } from "@/lib/unstable-cache";
+import { GetTagNumberigSchema } from "./validation";
+import { filterColumns } from "@/lib/filter-columns";
+import { TagSubfieldOption, tagSubfieldOptions, ViewTagSubfields, viewTagSubfields } from "@/db/schema/vendorData";
+import { asc, desc, ilike, inArray, and, gte, lte, not, or, eq } from "drizzle-orm";
+import { countTagNumbering,  selectTagNumbering } from "./repository";
+
+export async function getTagNumbering(input: GetTagNumberigSchema) {
+
+    return unstable_cache(
+      async () => {
+        try {
+          const offset = (input.page - 1) * input.perPage;
+  
+          // const advancedTable = input.flags.includes("advancedTable");
+          const advancedTable = true;
+  
+          // advancedTable 모드면 filterColumns()로 where 절 구성
+          const advancedWhere = filterColumns({
+            table: viewTagSubfields,
+            filters: input.filters,
+            joinOperator: input.joinOperator,
+          });
+  
+  
+          let globalWhere
+          if (input.search) {
+            const s = `%${input.search}%`
+            globalWhere = or(ilike(viewTagSubfields.tagTypeCode, s), ilike(viewTagSubfields.tagTypeDescription, s)
+            , ilike(viewTagSubfields.attributesId, s) , ilike(viewTagSubfields.attributesDescription, s), ilike(viewTagSubfields.expression, s)
+          )
+            // 필요시 여러 칼럼 OR조건 (status, priority, etc)
+          }
+  
+          const finalWhere = and(
+            // advancedWhere or your existing conditions
+            advancedWhere,
+            globalWhere // and()함수로 결합 or or() 등으로 결합
+          )
+  
+  
+          // 아니면 ilike, inArray, gte 등으로 where 절 구성
+          const where = finalWhere
+          
+  
+          const orderBy =
+            input.sort.length > 0
+              ? input.sort.map((item) =>
+                  item.desc ? desc(viewTagSubfields[item.id]) : asc(viewTagSubfields[item.id])
+                )
+              : [asc(viewTagSubfields.createdAt)];
+  
+          // 트랜잭션 내부에서 Repository 호출
+          const { data, total } = await db.transaction(async (tx) => {
+            const data = await selectTagNumbering(tx, {
+              where,
+              orderBy,
+              offset,
+              limit: input.perPage,
+            });
+  
+            const total = await countTagNumbering(tx, where);
+            return { data, total };
+          });
+  
+          const pageCount = Math.ceil(total / input.perPage);
+  
+          return { data, pageCount };
+        } catch (err) {
+          // 에러 발생 시 디폴트
+          return { data: [], pageCount: 0 };
+        }
+      },
+      [JSON.stringify(input)], // 캐싱 키
+      {
+        revalidate: 3600,
+        tags: ["tag-numbering"], // revalidateTag("items") 호출 시 무효화
+      }
+    )();
+  }
+
+
+  
+  export const fetchTagSubfieldOptions = (async (attributesId: string): Promise<TagSubfieldOption[]> => {
+    try {
+      // (A) findMany -> 스키마 제네릭 누락 에러 발생 → 대신 select().from().where() 사용
+      const rows = await db
+        .select()
+        .from(tagSubfieldOptions)
+        .where(eq(tagSubfieldOptions.attributesId, attributesId))
+        .orderBy(asc(tagSubfieldOptions.code))
+      
+      // rows는 TagSubfieldOption[] 형태
+      return rows
+    } catch (error) {
+      console.error("Error fetching tag subfield options:", error)
+      return []
+    }
+  })
+
+  export const getTagNumberingRules = (async (tagType: string): Promise<ViewTagSubfields[]> => {
+    try {
+      if (!tagType) {
+        return []
+      }
+  
+      // 기존 findMany 대신 select().from().where() + orderBy
+      const rules = await db
+        .select()
+        .from(viewTagSubfields)
+        .where(eq(viewTagSubfields.tagTypeDescription, tagType))
+        .orderBy(asc(viewTagSubfields.sortOrder))
+  
+      return rules
+    } catch (error) {
+      console.error("Error fetching tag numbering rules:", error)
+      return []
+    }
+  })
\ No newline at end of file
diff --git a/lib/tag-numbering/table/feature-flags-provider.tsx b/lib/tag-numbering/table/feature-flags-provider.tsx
new file mode 100644
index 00000000..81131894
--- /dev/null
+++ b/lib/tag-numbering/table/feature-flags-provider.tsx
@@ -0,0 +1,108 @@
+"use client"
+
+import * as React from "react"
+import { useQueryState } from "nuqs"
+
+import { dataTableConfig, type DataTableConfig } from "@/config/data-table"
+import { cn } from "@/lib/utils"
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+
+type FeatureFlagValue = DataTableConfig["featureFlags"][number]["value"]
+
+interface FeatureFlagsContextProps {
+  featureFlags: FeatureFlagValue[]
+  setFeatureFlags: (value: FeatureFlagValue[]) => void
+}
+
+const FeatureFlagsContext = React.createContext<FeatureFlagsContextProps>({
+  featureFlags: [],
+  setFeatureFlags: () => {},
+})
+
+export function useFeatureFlags() {
+  const context = React.useContext(FeatureFlagsContext)
+  if (!context) {
+    throw new Error(
+      "useFeatureFlags must be used within a FeatureFlagsProvider"
+    )
+  }
+  return context
+}
+
+interface FeatureFlagsProviderProps {
+  children: React.ReactNode
+}
+
+export function FeatureFlagsProvider({ children }: FeatureFlagsProviderProps) {
+  const [featureFlags, setFeatureFlags] = useQueryState<FeatureFlagValue[]>(
+    "flags",
+    {
+      defaultValue: [],
+      parse: (value) => value.split(",") as FeatureFlagValue[],
+      serialize: (value) => value.join(","),
+      eq: (a, b) =>
+        a.length === b.length && a.every((value, index) => value === b[index]),
+      clearOnDefault: true,
+      shallow: false,
+    }
+  )
+
+  return (
+    <FeatureFlagsContext.Provider
+      value={{
+        featureFlags,
+        setFeatureFlags: (value) => void setFeatureFlags(value),
+      }}
+    >
+      <div className="w-full overflow-x-auto">
+        <ToggleGroup
+          type="multiple"
+          variant="outline"
+          size="sm"
+          value={featureFlags}
+          onValueChange={(value: FeatureFlagValue[]) => setFeatureFlags(value)}
+          className="w-fit gap-0"
+        >
+          {dataTableConfig.featureFlags.map((flag, index) => (
+            <Tooltip key={flag.value}>
+              <ToggleGroupItem
+                value={flag.value}
+                className={cn(
+                  "gap-2 whitespace-nowrap rounded-none px-3 text-xs data-[state=on]:bg-accent/70 data-[state=on]:hover:bg-accent/90",
+                  {
+                    "rounded-l-sm border-r-0": index === 0,
+                    "rounded-r-sm":
+                      index === dataTableConfig.featureFlags.length - 1,
+                  }
+                )}
+                asChild
+              >
+                <TooltipTrigger>
+                  <flag.icon className="size-3.5 shrink-0" aria-hidden="true" />
+                  {flag.label}
+                </TooltipTrigger>
+              </ToggleGroupItem>
+              <TooltipContent
+                align="start"
+                side="bottom"
+                sideOffset={6}
+                className="flex max-w-60 flex-col space-y-1.5 border bg-background py-2 font-semibold text-foreground"
+              >
+                <div>{flag.tooltipTitle}</div>
+                <div className="text-xs text-muted-foreground">
+                  {flag.tooltipDescription}
+                </div>
+              </TooltipContent>
+            </Tooltip>
+          ))}
+        </ToggleGroup>
+      </div>
+      {children}
+    </FeatureFlagsContext.Provider>
+  )
+}
diff --git a/lib/tag-numbering/table/meta-sheet.tsx b/lib/tag-numbering/table/meta-sheet.tsx
new file mode 100644
index 00000000..4221837c
--- /dev/null
+++ b/lib/tag-numbering/table/meta-sheet.tsx
@@ -0,0 +1,226 @@
+"use client"
+
+import * as React from "react"
+import { useEffect, useState } from "react"
+import { Copy } from "lucide-react"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle
+} from "@/components/ui/sheet"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow
+} from "@/components/ui/table"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  CardFooter
+} from "@/components/ui/card"
+import { Separator } from "@/components/ui/separator"
+import { ViewTagSubfields } from "@/db/schema/vendorData"
+import { fetchTagSubfieldOptions } from "../service"
+
+interface TagOption {
+  id: number
+  attributesId: string
+  code: string
+  label: string
+  createdAt?: Date
+  updatedAt?: Date
+}
+
+interface ViewTagOptionsProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  tagSubfield: ViewTagSubfields | null
+}
+
+export function ViewTagOptions({
+  open,
+  onOpenChange,
+  tagSubfield
+}: ViewTagOptionsProps) {
+  const [options, setOptions] = useState<TagOption[]>([])
+  const [loading, setLoading] = useState(false)
+  const [copied, setCopied] = useState<string | null>(null)
+
+  // 옵션 데이터 가져오기
+  useEffect(() => {
+    async function fetchOptions() {
+      if (!tagSubfield || !open) return
+
+      setLoading(true)
+      try {
+        // 서버 액션 호출 - attributesId와 일치하는 모든 옵션 가져오기
+        const optionsData = await fetchTagSubfieldOptions(tagSubfield.attributesId)
+        setOptions(optionsData || [])
+      } catch (error) {
+        console.error("Error fetching tag options:", error)
+        setOptions([])
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    fetchOptions()
+  }, [tagSubfield, open])
+
+  // 코드 복사 기능
+  const copyToClipboard = (text: string, type: string) => {
+    navigator.clipboard.writeText(text).then(() => {
+      setCopied(type)
+      setTimeout(() => setCopied(null), 2000)
+    })
+  }
+
+  if (!tagSubfield) return null
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent className="sm:max-w-xl md:max-w-3xl lg:max-w-4xl xl:max-w-5xl overflow-y-auto">
+
+        <SheetHeader className="mb-6">
+          <SheetTitle className="text-xl flex items-center gap-2">
+            Field Options
+            <Badge variant="outline" className="ml-2">
+              {options.length} options
+            </Badge>
+          </SheetTitle>
+          <SheetDescription className="mb-4">
+            Field information and available options
+          </SheetDescription>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
+            <div className="space-y-2">
+              <div className="flex items-center justify-between">
+                <span className="text-sm font-medium">Attributes ID:</span>
+                <div className="flex items-center gap-1">
+                  <Badge variant="secondary">
+                    {tagSubfield.attributesId}
+                  </Badge>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="h-6 w-6"
+                    onClick={() => copyToClipboard(tagSubfield.attributesId, 'attributesId')}
+                  >
+                    <Copy className="h-3 w-3" />
+                  </Button>
+                  {copied === 'attributesId' && (
+                    <span className="text-xs text-green-600">Copied</span>
+                  )}
+                </div>
+              </div>
+              <div className="flex items-center justify-between">
+                <span className="text-sm font-medium">Tag Type:</span>
+                <Badge>{tagSubfield.tagTypeCode}</Badge>
+              </div>
+            </div>
+            <div className="space-y-2">
+              <div className="flex items-center justify-between">
+                <span className="text-sm font-medium">Description:</span>
+                <span className="text-sm">{tagSubfield.attributesDescription}</span>
+              </div>
+              <div className="flex items-center justify-between">
+                <span className="text-sm font-medium">Expression:</span>
+                <code className="bg-muted px-2 py-1 rounded text-xs">
+                  {tagSubfield.expression || 'N/A'}
+                </code>
+              </div>
+            </div>
+          </div>
+          {tagSubfield.tagTypeDescription && (
+            <div className="mt-4 text-sm bg-muted p-2 rounded">
+              <span className="font-medium">Type Description: </span>
+              {tagSubfield.tagTypeDescription}
+            </div>
+          )}
+
+        </SheetHeader>
+
+        <Separator className="my-4" />
+
+        {loading ? (
+          <div className="flex items-center justify-center h-40">
+            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
+          </div>
+        ) : options.length > 0 ? (
+          <Card>
+            <CardHeader>
+              <CardTitle>Available Options</CardTitle>
+              <CardDescription>
+                All available options for field {tagSubfield.attributesId}
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead className="w-24">Code</TableHead>
+                    <TableHead>Label</TableHead>
+                    <TableHead className="text-right">Actions</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {options.map((option) => (
+                    <TableRow key={option.id}>
+                      <TableCell className="font-mono">
+                        {option.code}
+                      </TableCell>
+                      <TableCell>{option.label}</TableCell>
+                      <TableCell className="text-right">
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          className="h-8 w-8 p-0"
+                          onClick={() => copyToClipboard(`${option.code} - ${option.label}`, `option-${option.id}`)}
+                        >
+                          <Copy className="h-4 w-4" />
+                          {copied === `option-${option.id}` && (
+                            <span className="absolute -top-2 -right-2 text-xs text-green-600 bg-white px-1 rounded-sm">
+                              Copied
+                            </span>
+                          )}
+                        </Button>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </CardContent>
+            <CardFooter className="flex justify-between text-sm text-muted-foreground">
+              <div>
+                {options.length} options found for {tagSubfield.attributesId}
+              </div>
+              {tagSubfield.delimiter && (
+                <div>
+                  Delimiter: <code className="bg-muted px-2 py-1 rounded text-xs">{tagSubfield.delimiter}</code>
+                </div>
+              )}
+            </CardFooter>
+          </Card>
+        ) : (
+          <div className="text-center py-8">
+            <div className="text-lg font-medium">No options found</div>
+            <p className="text-muted-foreground mt-2">
+              This field ({tagSubfield.attributesId}) has no defined options.
+            </p>
+          </div>
+        )}
+
+      </SheetContent>
+    </Sheet>
+  )
+}
\ No newline at end of file
diff --git a/lib/tag-numbering/table/tagNumbering-table-columns.tsx b/lib/tag-numbering/table/tagNumbering-table-columns.tsx
new file mode 100644
index 00000000..6e9b8191
--- /dev/null
+++ b/lib/tag-numbering/table/tagNumbering-table-columns.tsx
@@ -0,0 +1,131 @@
+"use client"
+
+import * as React from "react"
+import { type DataTableRowAction } from "@/types/table"
+import { type ColumnDef } from "@tanstack/react-table"
+import { InfoIcon } from "lucide-react"
+
+import { formatDate } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+
+import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header"
+import { ViewTagSubfields } from "@/db/schema/vendorData"
+import { tagNumberingColumnsConfig } from "@/config/tagNumberingColumnsConfig"
+
+interface GetColumnsProps {
+  setRowAction: React.Dispatch<React.SetStateAction<DataTableRowAction<ViewTagSubfields> | null>>
+}
+
+/**
+ * tanstack table 컬럼 정의 (중첩 헤더 버전)
+ */
+export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<ViewTagSubfields>[] {
+  // ----------------------------------------------------------------
+  // 1) select 컬럼 (체크박스)
+  // ----------------------------------------------------------------
+
+
+  // ----------------------------------------------------------------
+  // 2) actions 컬럼 (단일 버튼 - Meta Info 바로 보기)
+  // ----------------------------------------------------------------
+  const actionsColumn: ColumnDef<ViewTagSubfields> = {
+    id: "actions",
+    enableHiding: false,
+    cell: function Cell({ row }) {
+      return (
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={() => setRowAction({ row, type: "items" })}
+              >
+                <InfoIcon className="h-4 w-4" aria-hidden="true" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>
+              View Option Info.
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      )
+    },
+    size: 40,
+  }
+
+  // ----------------------------------------------------------------
+  // 3) 일반 컬럼들을 "그룹"별로 묶어 중첩 columns 생성
+  // ----------------------------------------------------------------
+  // 3-1) groupMap: { [groupName]: ColumnDef<ViewTagSubfields>[] }
+  const groupMap: Record<string, ColumnDef<ViewTagSubfields>[]> = {}
+
+  tagNumberingColumnsConfig.forEach((cfg) => {
+    // 만약 group가 없으면 "_noGroup" 처리
+    const groupName = cfg.group || "_noGroup"
+
+    if (!groupMap[groupName]) {
+      groupMap[groupName] = []
+    }
+
+    // child column 정의
+    const childCol: ColumnDef<ViewTagSubfields> = {
+      accessorKey: cfg.id,
+      enableResizing: true,
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title={cfg.label} />
+      ),
+      meta: {
+        excelHeader: cfg.excelHeader,
+        group: cfg.group,
+        type: cfg.type,
+      },
+      cell: ({ row, cell }) => {
+ 
+        if (cfg.id === "createdAt"||cfg.id === "updatedAt") {
+          const dateVal = cell.getValue() as Date
+          return formatDate(dateVal)
+        }
+
+        return row.getValue(cfg.id) ?? ""
+      },
+    }
+
+    groupMap[groupName].push(childCol)
+  })
+
+  // ----------------------------------------------------------------
+  // 3-2) groupMap에서 실제 상위 컬럼(그룹)을 만들기
+  // ----------------------------------------------------------------
+  const nestedColumns: ColumnDef<ViewTagSubfields>[] = []
+
+  // 순서를 고정하고 싶다면 group 순서를 미리 정의하거나 sort해야 함
+  // 여기서는 그냥 Object.entries 순서
+  Object.entries(groupMap).forEach(([groupName, colDefs]) => {
+    if (groupName === "_noGroup") {
+      // 그룹 없음 → 그냥 최상위 레벨 컬럼
+      nestedColumns.push(...colDefs)
+    } else {
+      // 상위 컬럼
+      nestedColumns.push({
+        id: groupName,
+        header: groupName, // "Basic Info", "Metadata" 등
+        columns: colDefs,
+      })
+    }
+  })
+
+  // ----------------------------------------------------------------
+  // 4) 최종 컬럼 배열: select, nestedColumns, actions
+  // ----------------------------------------------------------------
+  return [
+    ...nestedColumns,
+    actionsColumn,
+  ]
+}
\ No newline at end of file
diff --git a/lib/tag-numbering/table/tagNumbering-table-toolbar-actions.tsx b/lib/tag-numbering/table/tagNumbering-table-toolbar-actions.tsx
new file mode 100644
index 00000000..1a7af254
--- /dev/null
+++ b/lib/tag-numbering/table/tagNumbering-table-toolbar-actions.tsx
@@ -0,0 +1,53 @@
+"use client"
+
+import * as React from "react"
+import { type Table } from "@tanstack/react-table"
+import { Download, RefreshCcw, Upload } from "lucide-react"
+import { toast } from "sonner"
+
+import { exportTableToExcel } from "@/lib/export"
+import { Button } from "@/components/ui/button"
+import { ViewTagSubfields } from "@/db/schema/vendorData"
+
+
+
+interface ItemsTableToolbarActionsProps {
+  table: Table<ViewTagSubfields>
+}
+
+export function TagNumberingTableToolbarActions({ table }: ItemsTableToolbarActionsProps) {
+  // 파일 input을 숨기고, 버튼 클릭 시 참조해 클릭하는 방식
+  const fileInputRef = React.useRef<HTMLInputElement>(null)
+
+
+
+  return (
+    <div className="flex items-center gap-2">
+      {/** 4) Export 버튼 */}
+      <Button
+        variant="samsung"
+        size="sm"
+        className="gap-2"
+      >
+        <RefreshCcw className="size-4" aria-hidden="true" />
+        <span className="hidden sm:inline">Get Tag Numbering</span>
+      </Button>
+
+      {/** 4) Export 버튼 */}
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={() =>
+          exportTableToExcel(table, {
+            filename: "tasks",
+            excludeColumns: ["select", "actions"],
+          })
+        }
+        className="gap-2"
+      >
+        <Download className="size-4" aria-hidden="true" />
+        <span className="hidden sm:inline">Export</span>
+      </Button>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/lib/tag-numbering/table/tagNumbering-table.tsx b/lib/tag-numbering/table/tagNumbering-table.tsx
new file mode 100644
index 00000000..7997aad9
--- /dev/null
+++ b/lib/tag-numbering/table/tagNumbering-table.tsx
@@ -0,0 +1,151 @@
+"use client"
+
+import * as React from "react"
+import type {
+  DataTableAdvancedFilterField,
+  DataTableFilterField,
+  DataTableRowAction,
+} from "@/types/table"
+
+import { useDataTable } from "@/hooks/use-data-table"
+import { DataTable } from "@/components/data-table/data-table"
+import { DataTableAdvancedToolbar } from "@/components/data-table/data-table-advanced-toolbar"
+import { useFeatureFlags } from "./feature-flags-provider"
+
+import { ViewTagSubfields } from "@/db/schema/vendorData"
+import { getTagNumbering } from "../service"
+import { getColumns } from "./tagNumbering-table-columns"
+import { TagNumberingTableToolbarActions } from "./tagNumbering-table-toolbar-actions"
+import { ViewTagOptions } from "./meta-sheet"
+
+interface ItemsTableProps {
+  promises: Promise<
+    [
+      Awaited<ReturnType<typeof getTagNumbering>>,
+    ]
+  >
+}
+
+export function TagNumberingTable({ promises }: ItemsTableProps) {
+  const { featureFlags } = useFeatureFlags()
+
+  const [{ data, pageCount }] =
+    React.use(promises)
+
+
+  const [rowAction, setRowAction] =
+    React.useState<DataTableRowAction<ViewTagSubfields> | null>(null)
+
+  const columns = React.useMemo(
+    () => getColumns({ setRowAction }),
+    [setRowAction]
+  )
+
+  /**
+   * This component can render either a faceted filter or a search filter based on the `options` prop.
+   *
+   * @prop options - An array of objects, each representing a filter option. If provided, a faceted filter is rendered. If not, a search filter is rendered.
+   *
+   * Each `option` object has the following properties:
+   * @prop {string} label - The label for the filter option.
+   * @prop {string} value - The value for the filter option.
+   * @prop {React.ReactNode} [icon] - An optional icon to display next to the label.
+   * @prop {boolean} [withCount] - An optional boolean to display the count of the filter option.
+   */
+  const filterFields: DataTableFilterField<ViewTagSubfields>[] = [
+
+  ]
+
+  /**
+   * Advanced filter fields for the data table.
+   * These fields provide more complex filtering options compared to the regular filterFields.
+   *
+   * Key differences from regular filterFields:
+   * 1. More field types: Includes 'text', 'multi-select', 'date', and 'boolean'.
+   * 2. Enhanced flexibility: Allows for more precise and varied filtering options.
+   * 3. Used with DataTableAdvancedToolbar: Enables a more sophisticated filtering UI.
+   * 4. Date and boolean types: Adds support for filtering by date ranges and boolean values.
+   */
+  const advancedFilterFields: DataTableAdvancedFilterField<ViewTagSubfields>[] = [
+    {
+      id: "tagTypeCode",
+      label: "Tag Type Code",
+      type: "text",
+    },
+    {
+      id: "tagTypeDescription",
+      label: "Tag Type Description",
+      type: "text",
+    },
+
+    {
+      id: "attributesId",
+      label: "Attributes Id",
+      type: "text",
+    },
+
+    {
+      id: "attributesDescription",
+      label: "Attributes Description",
+      type: "text",
+    },
+    {
+      id: "expression",
+      label: "expression",
+      type: "text",
+    },
+    {
+      id: "createdAt",
+      label: "Created At",
+      type: "date",
+    },
+    {
+      id: "updatedAt",
+      label: "Updated At",
+      type: "date",
+    },
+
+  ]
+
+
+  const { table } = useDataTable({
+    data,
+    columns,
+    pageCount,
+    filterFields,
+    enablePinning: true,
+    enableAdvancedFilter: true,
+    initialState: {
+      sorting: [{ id: "createdAt", desc: true }],
+      columnPinning: { right: ["actions"] },
+    },
+    getRowId: (originalRow) => String(originalRow.id),
+    shallow: false,
+    clearOnDefault: true,
+  })
+
+  return (
+    <>
+      <DataTable
+        table={table}
+      >
+
+        <DataTableAdvancedToolbar
+          table={table}
+          filterFields={advancedFilterFields}
+          shallow={false}
+        >
+          <TagNumberingTableToolbarActions table={table} />
+        </DataTableAdvancedToolbar>
+
+      </DataTable>
+
+      <ViewTagOptions
+        open={rowAction?.type === "items"}
+        onOpenChange={() => setRowAction(null)}
+        tagSubfield={rowAction?.row.original ?? null}
+      />
+
+    </>
+  )
+}
diff --git a/lib/tag-numbering/validation.ts b/lib/tag-numbering/validation.ts
new file mode 100644
index 00000000..36199f24
--- /dev/null
+++ b/lib/tag-numbering/validation.ts
@@ -0,0 +1,39 @@
+import {
+    createSearchParamsCache,
+    parseAsArrayOf,
+    parseAsInteger,
+    parseAsString,
+    parseAsStringEnum,
+} from "nuqs/server"
+import * as z from "zod"
+
+import { getFiltersStateParser, getSortingStateParser } from "@/lib/parsers"
+import { ViewTagSubfields } from "@/db/schema/vendorData";
+
+export const searchParamsCache = createSearchParamsCache({
+    flags: parseAsArrayOf(z.enum(["advancedTable", "floatingBar"])).withDefault(
+        []
+    ),
+    page: parseAsInteger.withDefault(1),
+    perPage: parseAsInteger.withDefault(10),
+    sort: getSortingStateParser<ViewTagSubfields>().withDefault([
+        { id: "createdAt", desc: true },
+    ]),
+    tagTypeCode: parseAsString.withDefault(""),
+    tagTypeDescription: parseAsString.withDefault(""),
+    attributesId: parseAsString.withDefault(""),
+    attributesDescription: parseAsString.withDefault(""),
+    expression: parseAsString.withDefault(""),
+    delimiter: parseAsString.withDefault(""),
+    sortOrder: parseAsString.withDefault(""),
+
+    // advanced filter
+    filters: getFiltersStateParser().withDefault([]),
+    joinOperator: parseAsStringEnum(["and", "or"]).withDefault("and"),
+    search: parseAsString.withDefault(""),
+
+})
+
+
+
+export type GetTagNumberigSchema = Awaited<ReturnType<typeof searchParamsCache.parse>>
diff --git a/lib/tags/form-mapping-service.ts b/lib/tags/form-mapping-service.ts
new file mode 100644
index 00000000..4b772ab6
--- /dev/null
+++ b/lib/tags/form-mapping-service.ts
@@ -0,0 +1,65 @@
+"use server"
+
+import db from "@/db/db"
+import { tagTypeClassFormMappings } from "@/db/schema/vendorData";
+import { eq, and } from "drizzle-orm"
+
+// 폼 정보 인터페이스 (동일)
+export interface FormMapping {
+  formCode: string;
+  formName: string;
+}
+
+/**
+ * 주어진 tagType, classCode로 DB를 조회하여
+ * 1) 특정 classCode 매핑 => 존재하면 반환
+ * 2) 없으면 DEFAULT 매핑 => 없으면 빈 배열
+ */
+export async function getFormMappingsByTagType(
+  tagType: string,
+  classCode?: string
+): Promise<FormMapping[]> {
+
+  console.log(`DB-based getFormMappingsByTagType => tagType="${tagType}", class="${classCode ?? "NONE"}"`);
+
+  // 1) classCode가 있으면 시도
+  if (classCode) {
+    const specificRows = await db
+      .select({
+        formCode: tagTypeClassFormMappings.formCode,
+        formName: tagTypeClassFormMappings.formName,
+      })
+      .from(tagTypeClassFormMappings)
+      .where(and(
+        eq(tagTypeClassFormMappings.tagTypeLabel, tagType),
+        eq(tagTypeClassFormMappings.classLabel, classCode)
+      ))
+
+    if (specificRows.length > 0) {
+      console.log("Found specific mapping rows:", specificRows.length);
+      return specificRows;
+    }
+  }
+
+  // 2) fallback => DEFAULT
+  console.log(`Falling back to DEFAULT for tagType="${tagType}"`);
+  const defaultRows = await db
+    .select({
+      formCode: tagTypeClassFormMappings.formCode,
+      formName: tagTypeClassFormMappings.formName,
+    })
+    .from(tagTypeClassFormMappings)
+    .where(and(
+      eq(tagTypeClassFormMappings.tagTypeLabel, tagType),
+      eq(tagTypeClassFormMappings.classLabel, "DEFAULT")
+    ))
+
+  if (defaultRows.length > 0) {
+    console.log("Using DEFAULT mapping rows:", defaultRows.length);
+    return defaultRows;
+  }
+
+  // 3) 아무것도 없으면 빈 배열
+  console.log(`No mappings found at all for tagType="${tagType}"`);
+  return [];
+}
\ No newline at end of file
diff --git a/lib/tags/repository.ts b/lib/tags/repository.ts
new file mode 100644
index 00000000..b5d48335
--- /dev/null
+++ b/lib/tags/repository.ts
@@ -0,0 +1,71 @@
+import db from "@/db/db";
+import { NewTag, tags } from "@/db/schema/vendorData";
+import {
+    eq,
+    inArray,
+    not,
+    asc,
+    desc,
+    and,
+    ilike,
+    gte,
+    lte,
+    count,
+    gt,
+} from "drizzle-orm";
+import { PgTransaction } from "drizzle-orm/pg-core";
+
+export async function selectTags(
+    tx: PgTransaction<any, any, any>,
+    params: {
+        where?: any; // drizzle-orm의 조건식 (and, eq...) 등
+        orderBy?: (ReturnType<typeof asc> | ReturnType<typeof desc>)[];
+        offset?: number;
+        limit?: number;
+    }
+) {
+    const { where, orderBy, offset = 0, limit = 10 } = params;
+
+    return tx
+        .select()
+        .from(tags)
+        .where(where)
+        .orderBy(...(orderBy ?? []))
+        .offset(offset)
+        .limit(limit);
+}
+/** 총 개수 count */
+export async function countTags(
+    tx: PgTransaction<any, any, any>,
+    where?: any
+) {
+    const res = await tx.select({ count: count() }).from(tags).where(where);
+    return res[0]?.count ?? 0;
+}
+
+export async function insertTag(
+  tx: PgTransaction<any, any, any>,
+  data: NewTag // DB와 동일한 insert 가능한 타입
+) {
+  // returning() 사용 시 배열로 돌아오므로 [0]만 리턴
+  return tx
+    .insert(tags)
+    .values(data)
+    .returning({ id: tags.id, createdAt: tags.createdAt });
+}
+
+/** 단건 삭제 */
+export async function deleteTagById(
+    tx: PgTransaction<any, any, any>,
+    tagId: number
+) {
+    return tx.delete(tags).where(eq(tags.id, tagId));
+}
+
+/** 복수 삭제 */
+export async function deleteTagsByIds(
+    tx: PgTransaction<any, any, any>,
+    ids: number[]
+) {
+    return tx.delete(tags).where(inArray(tags.id, ids));
+}
diff --git a/lib/tags/service.ts b/lib/tags/service.ts
new file mode 100644
index 00000000..efba2fd5
--- /dev/null
+++ b/lib/tags/service.ts
@@ -0,0 +1,796 @@
+"use server"
+
+import db from "@/db/db"
+import { formEntries, forms, tagClasses, tags, tagSubfieldOptions, tagSubfields, tagTypes } from "@/db/schema/vendorData"
+// import { eq } from "drizzle-orm"
+import { createTagSchema, GetTagsSchema, updateTagSchema, UpdateTagSchema, type CreateTagSchema } from "./validations"
+import { revalidateTag, unstable_noStore } from "next/cache";
+import { filterColumns } from "@/lib/filter-columns";
+import { unstable_cache } from "@/lib/unstable-cache";
+import { asc, desc, ilike, inArray, and, gte, lte, not, or, eq, sql, ne } from "drizzle-orm";
+import { countTags, deleteTagById, deleteTagsByIds, insertTag, selectTags } from "./repository";
+import { getErrorMessage } from "../handle-error";
+import { getFormMappingsByTagType } from './form-mapping-service';
+import { contractItems } from "@/db/schema/contract";
+
+
+// 폼 결과를 위한 인터페이스 정의
+interface CreatedOrExistingForm {
+  id: number;
+  formCode: string;
+  formName: string;
+  isNewlyCreated: boolean;
+}
+
+export async function getTags(input: GetTagsSchema, packagesId: number) {
+
+  return unstable_cache(
+    async () => {
+      try {
+        const offset = (input.page - 1) * input.perPage;
+
+          // (1) advancedWhere
+        const advancedWhere = filterColumns({
+          table: tags,
+          filters: input.filters,
+          joinOperator: input.joinOperator,
+        });
+
+        // (2) globalWhere
+        let globalWhere;
+        if (input.search) {
+          const s = `%${input.search}%`;
+          globalWhere = or(
+            ilike(tags.tagNo, s),
+            ilike(tags.tagType, s),
+            ilike(tags.description, s)
+          );
+        }
+        // (4) 최종 where
+        const finalWhere = and(advancedWhere, globalWhere, eq(tags.contractItemId, packagesId));
+
+        // (5) 정렬
+        const orderBy =
+          input.sort.length > 0
+            ? input.sort.map((item) =>
+              item.desc ? desc(tags[item.id]) : asc(tags[item.id])
+            )
+            : [asc(tags.createdAt)];
+
+        // 트랜잭션 내부에서 Repository 호출
+        const { data, total } = await db.transaction(async (tx) => {
+          const data = await selectTags(tx, {
+            where: finalWhere,
+            orderBy,
+            offset,
+            limit: input.perPage,
+          });
+          const total = await countTags(tx, finalWhere);
+
+
+          return { data, total };
+        });
+
+        const pageCount = Math.ceil(total / input.perPage);
+
+
+        return { data, pageCount };
+      } catch (err) {
+        // 에러 발생 시 디폴트
+        return { data: [], pageCount: 0 };
+      }
+    },
+    [JSON.stringify(input), String(packagesId)], // 캐싱 키에 packagesId 추가
+    {
+      revalidate: 3600,
+      tags: [`tags-${packagesId}`], // 패키지별 태그 사용
+    }
+  )();
+}
+
+export async function createTag(
+  formData: CreateTagSchema,
+  selectedPackageId: number | null
+) {
+  if (!selectedPackageId) {
+    return { error: "No selectedPackageId provided" }
+  }
+
+  // Validate formData
+  const validated = createTagSchema.safeParse(formData)
+  if (!validated.success) {
+    return { error: validated.error.flatten().formErrors.join(", ") }
+  }
+
+  // React 서버 액션에서 매 요청마다 실행
+  unstable_noStore()
+
+  try {
+    // 하나의 트랜잭션에서 모든 작업 수행
+    return await db.transaction(async (tx) => {
+      // 1) 선택된 contractItem의 contractId 가져오기
+      const contractItemResult = await tx
+        .select({ contractId: contractItems.contractId })
+        .from(contractItems)
+        .where(eq(contractItems.id, selectedPackageId))
+        .limit(1)
+
+      if (contractItemResult.length === 0) {
+        return { error: "Contract item not found" }
+      }
+
+      const contractId = contractItemResult[0].contractId
+
+      // 2) 해당 계약 내에서 같은 tagNo를 가진 태그가 있는지 확인
+      const duplicateCheck = await tx
+        .select({ count: sql<number>`count(*)` })
+        .from(tags)
+        .innerJoin(contractItems, eq(tags.contractItemId, contractItems.id))
+        .where(
+          and(
+            eq(contractItems.contractId, contractId),
+            eq(tags.tagNo, validated.data.tagNo)
+          )
+        )
+
+      if (duplicateCheck[0].count > 0) {
+        return {
+          error: `태그 번호 "${validated.data.tagNo}"는 이미 이 계약 내에 존재합니다.`,
+        }
+      }
+
+      // 3) 태그 타입에 따른 폼 정보 가져오기
+      const formMappings = await getFormMappingsByTagType(
+        validated.data.tagType,
+        validated.data.class
+      )
+
+      // 폼 매핑이 없으면 로그만 남기고 진행
+      if (!formMappings || formMappings.length === 0) {
+        console.log(
+          "No form mappings found for tag type:",
+          validated.data.tagType
+        )
+      }
+
+      // 4) 이 태그 타입에 대한 주요 폼(첫 번째 폼)을 찾거나 생성
+      let primaryFormId: number | null = null
+      const createdOrExistingForms: CreatedOrExistingForm[] = []
+
+      if (formMappings && formMappings.length > 0) {
+        for (const formMapping of formMappings) {
+          // 4-1) 이미 존재하는 폼인지 확인
+          const existingForm = await tx
+            .select({ id: forms.id })
+            .from(forms)
+            .where(
+              and(
+                eq(forms.contractItemId, selectedPackageId),
+                eq(forms.formCode, formMapping.formCode)
+              )
+            )
+            .limit(1)
+
+          let formId: number
+          if (existingForm.length > 0) {
+            // 이미 존재하면 해당 ID 사용
+            formId = existingForm[0].id
+            createdOrExistingForms.push({
+              id: formId,
+              formCode: formMapping.formCode,
+              formName: formMapping.formName,
+              isNewlyCreated: false,
+            })
+          } else {
+            // 존재하지 않으면 새로 생성
+            const insertResult = await tx
+              .insert(forms)
+              .values({
+                contractItemId: selectedPackageId,
+                formCode: formMapping.formCode,
+                formName: formMapping.formName,
+              })
+              .returning({ id: forms.id, formCode: forms.formCode, formName: forms.formName })
+
+            console.log("insertResult:", insertResult)
+            formId = insertResult[0].id
+            createdOrExistingForms.push({
+              id: formId,
+              formCode: insertResult[0].formCode,
+              formName: insertResult[0].formName,
+              isNewlyCreated: true,
+            })
+          }
+
+          // 첫 번째 폼을 "주요 폼"으로 설정하여 태그 생성 시 사용
+          if (primaryFormId === null) {
+            primaryFormId = formId
+          }
+        }
+      }
+
+      // 5) 새 Tag 생성 (같은 트랜잭션 `tx` 사용)
+      const [newTag] = await insertTag(tx, {
+        contractItemId: selectedPackageId,
+        formId: primaryFormId,
+        tagNo: validated.data.tagNo,
+        class: validated.data.class,
+        tagType: validated.data.tagType,
+        description: validated.data.description ?? null,
+      })
+
+      console.log(`tags-${selectedPackageId}`, "create", newTag)
+
+      // 6) 캐시 무효화 (React 서버 액션에서 캐싱 사용 시)
+      revalidateTag(`tags-${selectedPackageId}`)
+      revalidateTag(`forms-${selectedPackageId}`)
+      revalidateTag("tags")
+
+      // 7) 성공 시 반환
+      return {
+        success: true,
+        data: {
+          forms: createdOrExistingForms,
+          primaryFormId,
+        },
+      }
+    })
+  } catch (err: any) {
+    console.error("createTag error:", err)
+    return { error: getErrorMessage(err) }
+  }
+}
+
+export async function updateTag(
+  formData: UpdateTagSchema & { id: number },
+  selectedPackageId: number | null
+) {
+  if (!selectedPackageId) {
+    return { error: "No selectedPackageId provided" }
+  }
+
+  if (!formData.id) {
+    return { error: "No tag ID provided" }
+  }
+
+  // Validate formData
+  const validated = updateTagSchema.safeParse(formData)
+  if (!validated.success) {
+    return { error: validated.error.flatten().formErrors.join(", ") }
+  }
+
+  // React 서버 액션에서 매 요청마다 실행
+  unstable_noStore()
+
+  try {
+    // 하나의 트랜잭션에서 모든 작업 수행
+    return await db.transaction(async (tx) => {
+      // 1) 기존 태그 존재 여부 확인
+      const existingTag = await tx
+        .select()
+        .from(tags)
+        .where(eq(tags.id, formData.id))
+        .limit(1)
+
+      if (existingTag.length === 0) {
+        return { error: "태그를 찾을 수 없습니다." }
+      }
+
+      const originalTag = existingTag[0]
+
+      // 2) 선택된 contractItem의 contractId 가져오기
+      const contractItemResult = await tx
+        .select({ contractId: contractItems.contractId })
+        .from(contractItems)
+        .where(eq(contractItems.id, selectedPackageId))
+        .limit(1)
+
+      if (contractItemResult.length === 0) {
+        return { error: "Contract item not found" }
+      }
+
+      const contractId = contractItemResult[0].contractId
+
+      // 3) 태그 번호가 변경되었고, 해당 계약 내에서 같은 tagNo를 가진 다른 태그가 있는지 확인
+      if (originalTag.tagNo !== validated.data.tagNo) {
+        const duplicateCheck = await tx
+          .select({ count: sql<number>`count(*)` })
+          .from(tags)
+          .innerJoin(contractItems, eq(tags.contractItemId, contractItems.id))
+          .where(
+            and(
+              eq(contractItems.contractId, contractId),
+              eq(tags.tagNo, validated.data.tagNo),
+              ne(tags.id, formData.id) // 자기 자신은 제외
+            )
+          )
+
+        if (duplicateCheck[0].count > 0) {
+          return {
+            error: `태그 번호 "${validated.data.tagNo}"는 이미 이 계약 내에 존재합니다.`,
+          }
+        }
+      }
+
+      // 4) 태그 타입이나 클래스가 변경되었는지 확인
+      const isTagTypeOrClassChanged = 
+        originalTag.tagType !== validated.data.tagType || 
+        originalTag.class !== validated.data.class
+
+      let primaryFormId = originalTag.formId
+
+      // 태그 타입이나 클래스가 변경되었다면 연관된 폼 업데이트
+      if (isTagTypeOrClassChanged) {
+        // 4-1) 태그 타입에 따른 폼 정보 가져오기
+        const formMappings = await getFormMappingsByTagType(
+          validated.data.tagType,
+          validated.data.class
+        )
+
+        // 폼 매핑이 없으면 로그만 남기고 진행
+        if (!formMappings || formMappings.length === 0) {
+          console.log(
+            "No form mappings found for tag type:",
+            validated.data.tagType
+          )
+        }
+
+        // 4-2) 이 태그 타입에 대한 주요 폼(첫 번째 폼)을 찾거나 생성
+        const createdOrExistingForms: CreatedOrExistingForm[] = []
+
+        if (formMappings && formMappings.length > 0) {
+          for (const formMapping of formMappings) {
+            // 이미 존재하는 폼인지 확인
+            const existingForm = await tx
+              .select({ id: forms.id })
+              .from(forms)
+              .where(
+                and(
+                  eq(forms.contractItemId, selectedPackageId),
+                  eq(forms.formCode, formMapping.formCode)
+                )
+              )
+              .limit(1)
+
+            let formId: number
+            if (existingForm.length > 0) {
+              // 이미 존재하면 해당 ID 사용
+              formId = existingForm[0].id
+              createdOrExistingForms.push({
+                id: formId,
+                formCode: formMapping.formCode,
+                formName: formMapping.formName,
+                isNewlyCreated: false,
+              })
+            } else {
+              // 존재하지 않으면 새로 생성
+              const insertResult = await tx
+                .insert(forms)
+                .values({
+                  contractItemId: selectedPackageId,
+                  formCode: formMapping.formCode,
+                  formName: formMapping.formName,
+                })
+                .returning({ id: forms.id, formCode: forms.formCode, formName: forms.formName })
+
+              formId = insertResult[0].id
+              createdOrExistingForms.push({
+                id: formId,
+                formCode: insertResult[0].formCode,
+                formName: insertResult[0].formName,
+                isNewlyCreated: true,
+              })
+            }
+
+            // 첫 번째 폼을 "주요 폼"으로 설정하여 태그 업데이트 시 사용
+            if (createdOrExistingForms.length === 1) {
+              primaryFormId = formId
+            }
+          }
+        }
+      }
+
+      // 5) 태그 업데이트
+      const [updatedTag] = await tx
+        .update(tags)
+        .set({
+          contractItemId: selectedPackageId,
+          formId: primaryFormId,
+          tagNo: validated.data.tagNo,
+          class: validated.data.class,
+          tagType: validated.data.tagType,
+          description: validated.data.description ?? null,
+          updatedAt: new Date(),
+        })
+        .where(eq(tags.id, formData.id))
+        .returning()
+
+      // 6) 캐시 무효화 (React 서버 액션에서 캐싱 사용 시)
+      revalidateTag(`tags-${selectedPackageId}`)
+      revalidateTag(`forms-${selectedPackageId}`)
+      revalidateTag("tags")
+
+      // 7) 성공 시 반환
+      return {
+        success: true,
+        data: {
+          tag: updatedTag,
+          formUpdated: isTagTypeOrClassChanged
+        },
+      }
+    })
+  } catch (err: any) {
+    console.error("updateTag error:", err)
+    return { error: getErrorMessage(err) }
+  }
+}
+
+export interface TagInputData {
+  tagNo: string;
+  class: string;
+  tagType: string;
+  description?: string | null;
+  formId?: number | null;
+  [key: string]: any;
+}
+// 새로운 서버 액션
+export async function bulkCreateTags(
+  tagsfromExcel: TagInputData[],
+  selectedPackageId: number
+) {
+  unstable_noStore();
+  
+  if (!tagsfromExcel.length) {
+    return { error: "No tags provided" };
+  }
+  
+  try {
+    // 단일 트랜잭션으로 모든 작업 처리
+    return await db.transaction(async (tx) => {
+      // 1. 컨트랙트 ID 조회 (한 번만)
+      const contractItemResult = await tx
+        .select({ contractId: contractItems.contractId })
+        .from(contractItems)
+        .where(eq(contractItems.id, selectedPackageId))
+        .limit(1);
+        
+      if (contractItemResult.length === 0) {
+        return { error: "Contract item not found" };
+      }
+      
+      const contractId = contractItemResult[0].contractId;
+      
+      // 2. 모든 태그 번호 중복 검사 (한 번에)
+      const tagNos = tagsfromExcel.map(tag => tag.tagNo);
+      const duplicateCheck = await tx
+        .select({ tagNo: tags.tagNo })
+        .from(tags)
+        .innerJoin(contractItems, eq(tags.contractItemId, contractItems.id))
+        .where(and(
+          eq(contractItems.contractId, contractId),
+          inArray(tags.tagNo, tagNos)
+        ));
+        
+      if (duplicateCheck.length > 0) {
+        return {
+          error: `태그 번호 "${duplicateCheck.map(d => d.tagNo).join(', ')}"는 이미 존재합니다.`
+        };
+      }
+      
+      // 3. 태그별 폼 정보 처리 및 태그 생성
+      const createdTags = [];
+      
+      for (const tagData of tagsfromExcel) {
+        // 각 태그 유형에 대한 폼 처리 (createTag 함수와 유사한 로직)
+        const formMappings = await getFormMappingsByTagType(tagData.tagType, tagData.class);
+        let primaryFormId = null;
+        
+        // 폼 처리 로직 (생략...)
+        
+        // 태그 생성
+        const [newTag] = await insertTag(tx, {
+          contractItemId: selectedPackageId,
+          formId: primaryFormId,
+          tagNo: tagData.tagNo,
+          class: tagData.class,
+          tagType: tagData.tagType,
+          description: tagData.description || null,
+        });
+        
+        createdTags.push(newTag);
+      }
+      
+      // 4. 캐시 무효화 (한 번만)
+      revalidateTag(`tags-${selectedPackageId}`);
+      revalidateTag(`forms-${selectedPackageId}`);
+      revalidateTag("tags");
+      
+      return {
+        success: true,
+        data: {
+          createdCount: createdTags.length,
+          tags: createdTags
+        }
+      };
+    });
+  } catch (err: any) {
+    console.error("bulkCreateTags error:", err);
+    return { error: err.message || "Failed to create tags" };
+  }
+}
+
+
+/** 복수 삭제  */
+interface RemoveTagsInput {
+  ids: number[];
+  selectedPackageId: number;
+}
+
+
+// formEntries의 data JSON에서 tagNo가 일치하는 객체를 제거해주는 예시 함수
+function removeTagFromDataJson(
+  dataJson: any,
+  tagNo: string
+): any {
+  // data 구조가 어떻게 생겼는지에 따라 로직이 달라집니다.
+  // 예: data 배열 안에 { tagNumber: string, ... } 형태로 여러 객체가 있다고 가정
+  if (!Array.isArray(dataJson)) return dataJson
+  return dataJson.filter((entry) => entry.tagNumber !== tagNo)
+}
+
+export async function removeTags(input: RemoveTagsInput) {
+  unstable_noStore() // React 서버 액션 무상태 함수
+
+  const { ids, selectedPackageId } = input
+
+  try {
+    await db.transaction(async (tx) => {
+      // 1) 삭제 대상 tag들을 미리 조회 (tagNo, tagType, class 등을 얻기 위함)
+      const tagsToDelete = await tx
+        .select({
+          id: tags.id,
+          tagNo: tags.tagNo,
+          tagType: tags.tagType,
+          class: tags.class,
+        })
+        .from(tags)
+        .where(inArray(tags.id, ids))
+
+      // 2) 각 tag마다 관련된 formCode를 찾고, forms & formEntries 처리를 수행
+      for (const tagInfo of tagsToDelete) {
+        const { tagNo, tagType, class: tagClass } = tagInfo
+
+        // 2-1) tagTypeClassFormMappings(혹은 대응되는 로직)에서 formCode 목록 가져오기
+        const formMappings = await getFormMappingsByTagType(tagType, tagClass)
+        if (!formMappings) continue
+
+        // 2-2) 얻어온 formCode 리스트를 순회하면서, forms 테이블과 formEntries 테이블 처리
+        for (const fm of formMappings) {
+          // (A) forms 테이블 삭제
+          //    - 조건: contractItemId=selectedPackageId, formCode=fm.formCode
+          await tx
+            .delete(forms)
+            .where(
+              and(
+                eq(forms.contractItemId, selectedPackageId),
+                eq(forms.formCode, fm.formCode)
+              )
+            )
+
+          // (B) formEntries 테이블 JSON에서 tagNo 제거 → 업데이트
+          //     - 예: formEntries 안에 (id, contractItemId, formCode, data(=json)) 칼럼 존재 가정
+          const formEntryRecords = await tx
+            .select({
+              id: formEntries.id,
+              data: formEntries.data,
+            })
+            .from(formEntries)
+            .where(
+              and(
+                eq(formEntries.contractItemId, selectedPackageId),
+                eq(formEntries.formCode, fm.formCode)
+              )
+            )
+
+          // 여러 formEntries 레코드가 있을 수도 있어서 모두 처리
+          for (const entry of formEntryRecords) {
+            const updatedJson = removeTagFromDataJson(entry.data, tagNo)
+
+            // 변경이 있다면 업데이트
+            await tx
+              .update(formEntries)
+              .set({ data: updatedJson })
+              .where(eq(formEntries.id, entry.id))
+          }
+        }
+      }
+
+      // 3) 마지막으로 실제로 tags 테이블에서 Tag들을 삭제
+      //   (Tag → forms → formEntries 순서대로 처리)
+      await tx.delete(tags).where(inArray(tags.id, ids))
+    })
+
+    // 4) 캐시 무효화
+      // revalidateTag("tags")
+    revalidateTag(`tags-${selectedPackageId}`)
+    revalidateTag(`forms-${selectedPackageId}`)
+
+    return { data: null, error: null }
+  } catch (err) {
+    return { data: null, error: getErrorMessage(err) }
+  }
+}
+
+// Updated service functions to support the new schema
+
+// 업데이트된 ClassOption 타입
+export interface ClassOption {
+  code: string;
+  label: string;
+  tagTypeCode: string;     // 클래스와 연결된 태그 타입 코드
+  tagTypeDescription?: string; // 태그 타입의 설명 (선택적)
+}
+
+/**
+ * Class 옵션 목록을 가져오는 함수
+ * 이제 각 클래스는 연결된 tagTypeCode와 tagTypeDescription을 포함
+ */
+export async function getClassOptions(){
+  const rows = await db
+    .select({
+      id: tagClasses.id,
+      code: tagClasses.code,
+      label: tagClasses.label,
+      tagTypeCode: tagClasses.tagTypeCode,
+      tagTypeDescription: tagTypes.description,
+    })
+    .from(tagClasses)
+    .leftJoin(tagTypes, eq(tagTypes.code, tagClasses.tagTypeCode))
+
+  return rows.map((row) => ({
+    code: row.code,
+    label: row.label,
+    tagTypeCode: row.tagTypeCode,
+    tagTypeDescription: row.tagTypeDescription ?? "",
+  }))
+}
+
+interface SubFieldDef {
+  name: string
+  label: string
+  type: "select" | "text"
+  options: { value: string; label: string }[]
+  expression: string | null
+  delimiter: string | null
+}
+
+export async function getSubfieldsByTagType(tagTypeCode: string) {
+  try {
+    const rows = await db
+      .select()
+      .from(tagSubfields)
+      .where(eq(tagSubfields.tagTypeCode, tagTypeCode))
+      .orderBy(asc(tagSubfields.sortOrder))
+
+    // 각 row -> SubFieldDef
+    const formattedSubFields: SubFieldDef[] = []
+    for (const sf of rows) {
+      const subfieldType = await getSubfieldType(sf.attributesId)
+      const subfieldOptions = subfieldType === "select"
+        ? await getSubfieldOptions(sf.attributesId)
+        : []
+
+      formattedSubFields.push({
+        name: sf.attributesId.toLowerCase(),
+        label: sf.attributesDescription,
+        type: subfieldType,
+        options: subfieldOptions,
+        expression: sf.expression,
+        delimiter: sf.delimiter,
+      })
+    }
+
+    return { subFields: formattedSubFields }
+  } catch (error) {
+    console.error("Error fetching subfields by tag type:", error)
+    throw new Error("Failed to fetch subfields")
+  }
+}
+
+
+async function getSubfieldType(attributesId: string): Promise<"select" | "text"> {
+  const optRows = await db
+    .select()
+    .from(tagSubfieldOptions)
+    .where(eq(tagSubfieldOptions.attributesId, attributesId))
+
+  return optRows.length > 0 ? "select" : "text"
+}
+
+export interface SubfieldOption {
+  /**
+   * 옵션의 실제 값 (데이터베이스에 저장될 값)
+   * 예: "PM", "AA", "VB", "01" 등
+   */
+  value: string;
+
+  /**
+   * 옵션의 표시 레이블 (사용자에게 보여질 텍스트)
+   * 예: "Pump", "Pneumatic Motor", "Ball Valve" 등
+   */
+  label: string;
+}
+
+
+
+/**
+ * SubField의 옵션 목록을 가져오는 보조 함수
+ */
+async function getSubfieldOptions(attributesId: string): Promise<SubfieldOption[]> {
+  try {
+    const rows = await db
+      .select({
+        code: tagSubfieldOptions.code,
+        label: tagSubfieldOptions.label
+      })
+      .from(tagSubfieldOptions)
+      .where(eq(tagSubfieldOptions.attributesId, attributesId))
+
+    return rows.map((row) => ({
+      value: row.code,
+      label: row.label
+    }))
+  } catch (error) {
+    console.error(`Error fetching options for attribute ${attributesId}:`, error)
+    return []
+  }
+}
+
+
+/**
+ * Tag Type 목록을 가져오는 함수
+ * 이제 tagTypes 테이블에서 직접 데이터를 가져옴
+ */
+export async function getTagTypes(): Promise<{ options: TagTypeOption[] }> {
+  return unstable_cache(
+    async () => {
+      console.log(`[Server] Fetching tag types from tagTypes table`)
+
+      try {
+        // 이제 tagSubfields가 아닌 tagTypes 테이블에서 직접 조회
+        const result = await db
+          .select({
+            code: tagTypes.code,
+            description: tagTypes.description,
+          })
+          .from(tagTypes)
+          .orderBy(tagTypes.description);
+
+        // TagTypeOption 형식으로 변환
+        const tagTypeOptions: TagTypeOption[] = result.map(item => ({
+          id: item.code,          // id 필드에 code 값 할당
+          label: item.description, // label 필드에 description 값 할당
+        }));
+
+        console.log(`[Server] Found ${tagTypeOptions.length} tag types`)
+        return { options: tagTypeOptions };
+      } catch (error) {
+        console.error('[Server] Error fetching tag types:', error)
+        return { options: [] }
+      }
+    },
+    ['tag-types-list'],
+    {
+      revalidate: 3600, // 1시간 캐시
+      tags: ['tag-types']
+    }
+  )()
+}
+
+/**
+ * TagTypeOption 인터페이스 정의
+ */
+export interface TagTypeOption {
+  id: string;    // tagTypes.code 값
+  label: string; // tagTypes.description 값
+}
\ No newline at end of file
diff --git a/lib/tags/table/add-tag-dialog copy.tsx b/lib/tags/table/add-tag-dialog copy.tsx
new file mode 100644
index 00000000..e9f84933
--- /dev/null
+++ b/lib/tags/table/add-tag-dialog copy.tsx
@@ -0,0 +1,637 @@
+"use client"
+
+import * as React from "react"
+import { useRouter } from "next/navigation"       // <-- 1) Import router from App Router
+import { useForm, useWatch } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { toast } from "sonner"
+import { Loader2, ChevronsUpDown, Check } from "lucide-react"
+
+import {
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import {
+  Form,
+  FormField,
+  FormItem,
+  FormControl,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form"
+import {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+} from "@/components/ui/popover"
+import {
+  Command,
+  CommandInput,
+  CommandList,
+  CommandGroup,
+  CommandItem,
+  CommandEmpty,
+} from "@/components/ui/command"
+import { Select, SelectTrigger, SelectContent, SelectItem, SelectValue } from "@/components/ui/select"
+import { cn } from "@/lib/utils"
+
+import type { CreateTagSchema } from "@/lib/tags/validations"
+import { createTagSchema } from "@/lib/tags/validations"
+import {
+  createTag,
+  getSubfieldsByTagType,
+  getClassOptions,
+  type ClassOption,
+  TagTypeOption,
+} from "@/lib/tags/service"
+
+// SubFieldDef for clarity
+interface SubFieldDef {
+  name: string
+  label: string
+  type: "select" | "text"
+  options?: { value: string; label: string }[]
+  expression?: string
+  delimiter?: string
+}
+
+// 클래스 옵션 인터페이스
+interface UpdatedClassOption extends ClassOption {
+  tagTypeCode: string
+  tagTypeDescription?: string
+}
+
+interface AddTagDialogProps {
+  selectedPackageId: number | null
+}
+
+export function AddTagDialog({ selectedPackageId }: AddTagDialogProps) {
+  const router = useRouter()            // <-- 2) Use the router hook
+
+  const [open, setOpen] = React.useState(false)
+  const [tagTypeList, setTagTypeList] = React.useState<TagTypeOption[]>([])
+  const [selectedTagTypeCode, setSelectedTagTypeCode] = React.useState<string | null>(null)
+  const [subFields, setSubFields] = React.useState<SubFieldDef[]>([])
+  const [classOptions, setClassOptions] = React.useState<UpdatedClassOption[]>([])
+  const [classSearchTerm, setClassSearchTerm] = React.useState("")
+  const [isLoadingClasses, setIsLoadingClasses] = React.useState(false)
+  const [isLoadingSubFields, setIsLoadingSubFields] = React.useState(false)
+  const [isSubmitting, setIsSubmitting] = React.useState(false)
+
+  // ID management
+  const selectIdRef = React.useRef(0)
+  const getUniqueSelectId = React.useCallback(() => `select-${selectIdRef.current++}`, [])
+  const fieldIdsRef = React.useRef<Record<string, string>>({})
+  const classOptionIdsRef = React.useRef<Record<string, string>>({})
+
+  // ---------------
+  // Load Class Options
+  // ---------------
+  React.useEffect(() => {
+    const loadClassOptions = async () => {
+      setIsLoadingClasses(true)
+      try {
+        const result = await getClassOptions()
+        setClassOptions(result)
+      } catch (err) {
+        toast.error("Failed to load class options")
+      } finally {
+        setIsLoadingClasses(false)
+      }
+    }
+
+    if (open) {
+      loadClassOptions()
+    }
+  }, [open])
+
+  // ---------------
+  // react-hook-form
+  // ---------------
+  const form = useForm<CreateTagSchema>({
+    resolver: zodResolver(createTagSchema),
+    defaultValues: {
+      tagType: "",
+      tagNo: "",
+      description: "",
+      functionCode: "",
+      seqNumber: "",
+      valveAcronym: "",
+      processUnit: "",
+      class: "",
+    },
+  })
+
+  // watch
+  const { tagNo, ...fieldsToWatch } = useWatch({
+    control: form.control,
+  })
+
+  // ---------------
+  // Load subfields by TagType code
+  // ---------------
+  async function loadSubFieldsByTagTypeCode(tagTypeCode: string) {
+    setIsLoadingSubFields(true)
+    try {
+      const { subFields: apiSubFields } = await getSubfieldsByTagType(tagTypeCode)
+      const formattedSubFields: SubFieldDef[] = apiSubFields.map(field => ({
+        name: field.name,
+        label: field.label,
+        type: field.type,
+        options: field.options || [],
+        expression: field.expression ?? undefined,
+        delimiter: field.delimiter ?? undefined,
+      }))
+      setSubFields(formattedSubFields)
+      selectIdRef.current = 0
+      return true
+    } catch (err) {
+      toast.error("Failed to load subfields")
+      setSubFields([])
+      return false
+    } finally {
+      setIsLoadingSubFields(false)
+    }
+  }
+
+  // ---------------
+  // Handle class selection
+  // ---------------
+  async function handleSelectClass(classOption: UpdatedClassOption) {
+    form.setValue("class", classOption.label)
+    if (classOption.tagTypeCode) {
+      setSelectedTagTypeCode(classOption.tagTypeCode)
+      // If you have tagTypeList, you can find the label
+      const tagType = tagTypeList.find(t => t.id === classOption.tagTypeCode)
+      if (tagType) {
+        form.setValue("tagType", tagType.label)
+      } else if (classOption.tagTypeDescription) {
+        form.setValue("tagType", classOption.tagTypeDescription)
+      }
+      await loadSubFieldsByTagTypeCode(classOption.tagTypeCode)
+    }
+  }
+
+  // ---------------
+  // Render subfields
+  // ---------------
+  function renderSubFields() {
+    if (isLoadingSubFields) {
+      return (
+        <div className="flex justify-center items-center py-8">
+          <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+          <span className="ml-3 text-muted-foreground">Loading fields...</span>
+        </div>
+      )
+    }
+    if (subFields.length === 0 && selectedTagTypeCode) {
+      return (
+        <div className="py-4 text-center text-muted-foreground">
+          No fields available for this tag type.
+        </div>
+      )
+    }
+    if (subFields.length === 0) {
+      return null
+    }
+
+    return subFields.map((sf, index) => {
+      if (!fieldIdsRef.current[`${sf.name}-${index}`]) {
+        fieldIdsRef.current[`${sf.name}-${index}`] =
+          `field-${sf.name}-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`
+      }
+      const fieldId = fieldIdsRef.current[`${sf.name}-${index}`]
+      const selectId = getUniqueSelectId()
+
+      return (
+        <FormField
+          key={fieldId}
+          control={form.control}
+          name={sf.name as keyof CreateTagSchema}
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>{sf.label}</FormLabel>
+              <FormControl>
+                {sf.type === "select" ? (
+                  <Select
+                    value={field.value || ""}
+                    onValueChange={field.onChange}
+                  >
+                    <SelectTrigger className="w-full">
+                      <SelectValue
+                        placeholder={`Select ${sf.label}`}
+                        className={
+                          !field.value ? "text-muted-foreground text-opacity-60" : ""
+                        }
+                      />
+                    </SelectTrigger>
+                    <SelectContent
+                      align="start"
+                      side="bottom"
+                      style={{ width: 400, maxWidth: 400 }}
+                      sideOffset={4}
+                      id={selectId}
+                    >
+                      {sf.options?.map((opt, optIndex) => {
+                        const optionKey = `${fieldId}-option-${opt.value}-${optIndex}`
+                        return (
+                          <SelectItem
+                            key={optionKey}
+                            value={opt.value}
+                            className="multi-line-select-item pr-6"
+                            title={opt.label}
+                          >
+                            {opt.label}
+                          </SelectItem>
+                        )
+                      })}
+                    </SelectContent>
+                  </Select>
+                ) : (
+                  <Input
+                    placeholder={`Enter ${sf.label}`}
+                    {...field}
+                    className={
+                      !field.value
+                        ? "placeholder:text-muted-foreground placeholder:text-opacity-60"
+                        : ""
+                    }
+                  />
+                )}
+              </FormControl>
+              <FormMessage>
+                {sf.expression && (
+                  <span
+                    className="text-xs text-muted-foreground truncate block"
+                    title={sf.expression}
+                  >
+                    형식: {sf.expression}
+                  </span>
+                )}
+              </FormMessage>
+            </FormItem>
+          )}
+        />
+      )
+    })
+  }
+
+  // ---------------
+  // Build TagNo from subfields automatically
+  // ---------------
+  React.useEffect(() => {
+    if (subFields.length === 0) {
+      form.setValue("tagNo", "", { shouldDirty: false })
+    }
+
+    const subscription = form.watch((value, { name }) => {
+      if (!name || name === "tagNo" || subFields.length === 0) {
+        return
+      }
+      let combined = ""
+      subFields.forEach((sf, idx) => {
+        const fieldValue = form.getValues(sf.name as keyof CreateTagSchema) || ""
+        combined += fieldValue
+        if (fieldValue && idx < subFields.length - 1 && sf.delimiter) {
+          combined += sf.delimiter
+        }
+      })
+      const currentTagNo = form.getValues("tagNo")
+      if (currentTagNo !== combined) {
+        form.setValue("tagNo", combined, {
+          shouldDirty: false,
+          shouldTouch: false,
+          shouldValidate: false,
+        })
+      }
+    })
+
+    return () => subscription.unsubscribe()
+  }, [subFields, form])
+
+  // ---------------
+  // Basic validation for TagNo
+  // ---------------
+  const isTagNoValid = React.useMemo(() => {
+    const val = form.getValues("tagNo")
+    return val && val.trim() !== "" && !val.includes("??")
+  }, [fieldsToWatch])
+
+  // ---------------
+  // Submit handler
+  // ---------------
+  async function onSubmit(data: CreateTagSchema) {
+    if (!selectedPackageId) {
+      toast.error("No selectedPackageId.")
+      return
+    }
+    setIsSubmitting(true)
+    try {
+      const res = await createTag(data, selectedPackageId)
+      if ("error" in res) {
+        toast.error(`Error: ${res.error}`)
+        return
+      }
+
+      toast.success("Tag created successfully!")
+
+      // 3) Refresh or navigate after creation:
+      // Option A: If you just want to refresh the same route:
+      router.refresh()
+
+      // Option B: If you want to go to /partners/vendor-data/tag/{selectedPackageId}
+      // router.push(`/partners/vendor-data/tag/${selectedPackageId}?r=${Date.now()}`)
+
+      // (If you want to reset the form dialog or close it, do that too)
+      form.reset()
+      setOpen(false)
+    } catch (err) {
+      toast.error("Failed to create tag.")
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  // ---------------
+  // Render Class field
+  // ---------------
+  function renderClassField(field: any) {
+    const [popoverOpen, setPopoverOpen] = React.useState(false)
+
+    const buttonId = React.useMemo(
+      () => `class-button-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`,
+      []
+    )
+    const popoverContentId = React.useMemo(
+      () => `class-popover-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`,
+      []
+    )
+    const commandId = React.useMemo(
+      () => `class-command-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`,
+      []
+    )
+
+    return (
+      <FormItem>
+        <FormLabel>Class</FormLabel>
+        <FormControl>
+          <Popover open={popoverOpen} onOpenChange={setPopoverOpen}>
+            <PopoverTrigger asChild>
+              <Button
+                key={buttonId}
+                type="button"
+                variant="outline"
+                className="w-full justify-between"
+                disabled={isLoadingClasses}
+              >
+                {isLoadingClasses ? (
+                  <>
+                    <span>Loading classes...</span>
+                    <Loader2 className="ml-2 h-4 w-4 animate-spin" />
+                  </>
+                ) : (
+                  <>
+                    <span className="truncate">
+                      {field.value || "Select Class..."}
+                    </span>
+                    <ChevronsUpDown className="ml-2 h-4 w-4 opacity-50" />
+                  </>
+                )}
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent key={popoverContentId} className="w-full p-0">
+              <Command key={commandId}>
+                <CommandInput
+                  key={`${commandId}-input`}
+                  placeholder="Search Class..."
+                  value={classSearchTerm}
+                  onValueChange={setClassSearchTerm}
+                />
+                <CommandList key={`${commandId}-list`}>
+                  <CommandEmpty key={`${commandId}-empty`}>No class found.</CommandEmpty>
+                  <CommandGroup key={`${commandId}-group`}>
+                    {classOptions.map((opt) => {
+                      if (!classOptionIdsRef.current[opt.code]) {
+                        classOptionIdsRef.current[opt.code] =
+                          `class-${opt.code}-${Date.now()}-${Math.random()
+                            .toString(36)
+                            .slice(2, 9)}`
+                      }
+                      const optionId = classOptionIdsRef.current[opt.code]
+
+                      return (
+                        <CommandItem
+                          key={optionId}
+                          onSelect={() => {
+                            field.onChange(opt.label)
+                            setPopoverOpen(false)
+                            handleSelectClass(opt)
+                          }}
+                          value={opt.label}
+                          className="truncate"
+                          title={opt.label}
+                        >
+                          <span className="truncate">{opt.label}</span>
+                          <Check
+                            key={`${optionId}-check`}
+                            className={cn(
+                              "ml-auto h-4 w-4 flex-shrink-0",
+                              field.value === opt.label ? "opacity-100" : "opacity-0"
+                            )}
+                          />
+                        </CommandItem>
+                      )
+                    })}
+                  </CommandGroup>
+                </CommandList>
+              </Command>
+            </PopoverContent>
+          </Popover>
+        </FormControl>
+        <FormMessage />
+      </FormItem>
+    )
+  }
+
+  // ---------------
+  // Render TagType field (readonly after class selection)
+  // ---------------
+  function renderTagTypeField(field: any) {
+    const isReadOnly = !!selectedTagTypeCode
+    const inputId = React.useMemo(
+      () =>
+        `tag-type-input-${isReadOnly ? "readonly" : "editable"}-${Date.now()}-${Math.random()
+          .toString(36)
+          .slice(2, 9)}`,
+      [isReadOnly]
+    )
+
+    return (
+      <FormItem>
+        <FormLabel>Tag Type</FormLabel>
+        <FormControl>
+          {isReadOnly ? (
+            <Input
+              key={`tag-type-readonly-${inputId}`}
+              {...field}
+              readOnly
+              className="bg-muted"
+            />
+          ) : (
+            <Input
+              key={`tag-type-placeholder-${inputId}`}
+              {...field}
+              readOnly
+              placeholder="Tag Type is determined by selected Class"
+              className="bg-muted"
+            />
+          )}
+        </FormControl>
+        <FormMessage />
+      </FormItem>
+    )
+  }
+
+  // ---------------
+  // Reset IDs/states when dialog closes
+  // ---------------
+  React.useEffect(() => {
+    if (!open) {
+      fieldIdsRef.current = {}
+      classOptionIdsRef.current = {}
+      selectIdRef.current = 0
+    }
+  }, [open])
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(o) => {
+        if (!o) {
+          form.reset()
+          setSelectedTagTypeCode(null)
+          setSubFields([])
+        }
+        setOpen(o)
+      }}
+    >
+      <DialogTrigger asChild>
+        <Button variant="default" size="sm">
+          Add Tag
+        </Button>
+      </DialogTrigger>
+
+      <DialogContent className="max-h-[80vh] flex flex-col">
+        <DialogHeader>
+          <DialogTitle>Add New Tag</DialogTitle>
+          <DialogDescription>
+            Choose a Class, and the Tag Type and subfields will be automatically loaded.
+          </DialogDescription>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="max-h-[70vh] flex flex-col"
+          >
+            <div className="flex-1 overflow-auto px-4 space-y-4">
+              {/* Class */}
+              <FormField
+                key="class-field"
+                control={form.control}
+                name="class"
+                render={({ field }) => renderClassField(field)}
+              />
+
+              {/* TagType (read-only) */}
+              <FormField
+                key="tag-type-field"
+                control={form.control}
+                name="tagType"
+                render={({ field }) => renderTagTypeField(field)}
+              />
+
+              {/* SubFields */}
+              <div className="flex-1 overflow-auto px-2 py-2 space-y-4 max-h-[300px]">
+                {renderSubFields()}
+              </div>
+
+              {/* TagNo (read-only) */}
+              <FormField
+                key="tag-no-field"
+                control={form.control}
+                name="tagNo"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Tag No</FormLabel>
+                    <FormControl>
+                      <Input
+                        {...field}
+                        readOnly
+                        className="bg-muted truncate"
+                        title={field.value || ""}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              {/* Description */}
+              <FormField
+                key="description-field"
+                control={form.control}
+                name="description"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Description</FormLabel>
+                    <FormControl>
+                      <Input
+                        {...field}
+                        placeholder="Enter description..."
+                        className="truncate"
+                        title={field.value || ""}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            {/* Footer */}
+            <DialogFooter className="bg-background z-10 pt-4 px-4 py-4">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => {
+                  form.reset()
+                  setOpen(false)
+                  setSubFields([])
+                  setSelectedTagTypeCode(null)
+                }}
+                disabled={isSubmitting || isLoadingSubFields}
+              >
+                Cancel
+              </Button>
+              <Button
+                type="submit"
+                disabled={isSubmitting || isLoadingSubFields || !isTagNoValid}
+              >
+                {isSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                Create
+              </Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  )
+}
\ No newline at end of file
diff --git a/lib/tags/table/add-tag-dialog.tsx b/lib/tags/table/add-tag-dialog.tsx
new file mode 100644
index 00000000..3814761d
--- /dev/null
+++ b/lib/tags/table/add-tag-dialog.tsx
@@ -0,0 +1,893 @@
+"use client"
+
+import * as React from "react"
+import { useRouter } from "next/navigation"
+import { useForm, useWatch, useFieldArray } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { toast } from "sonner"
+import { Loader2, ChevronsUpDown, Check, Plus, Trash2, Copy } from "lucide-react"
+
+import {
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import {
+  Form,
+  FormField,
+  FormItem,
+  FormControl,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form"
+import {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+} from "@/components/ui/popover"
+import {
+  Command,
+  CommandInput,
+  CommandList,
+  CommandGroup,
+  CommandItem,
+  CommandEmpty,
+} from "@/components/ui/command"
+import { Select, SelectTrigger, SelectContent, SelectItem, SelectValue } from "@/components/ui/select"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table"
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
+import { cn } from "@/lib/utils"
+import { Badge } from "@/components/ui/badge"
+
+import type { CreateTagSchema } from "@/lib/tags/validations"
+import { createTagSchema } from "@/lib/tags/validations"
+import {
+  createTag,
+  getSubfieldsByTagType,
+  getClassOptions,
+  type ClassOption,
+  TagTypeOption,
+} from "@/lib/tags/service"
+
+// Updated to support multiple rows
+interface MultiTagFormValues {
+  class: string;
+  tagType: string;
+  rows: Array<{
+    [key: string]: string;
+    tagNo: string;
+    description: string;
+  }>;
+}
+
+// SubFieldDef for clarity
+interface SubFieldDef {
+  name: string
+  label: string
+  type: "select" | "text"
+  options?: { value: string; label: string }[]
+  expression?: string
+  delimiter?: string
+}
+
+// 클래스 옵션 인터페이스
+interface UpdatedClassOption extends ClassOption {
+  tagTypeCode: string
+  tagTypeDescription?: string
+}
+
+interface AddTagDialogProps {
+  selectedPackageId: number | null
+}
+
+export function AddTagDialog({ selectedPackageId }: AddTagDialogProps) {
+  const router = useRouter()
+
+  const [open, setOpen] = React.useState(false)
+  const [tagTypeList, setTagTypeList] = React.useState<TagTypeOption[]>([])
+  const [selectedTagTypeCode, setSelectedTagTypeCode] = React.useState<string | null>(null)
+  const [subFields, setSubFields] = React.useState<SubFieldDef[]>([])
+  const [classOptions, setClassOptions] = React.useState<UpdatedClassOption[]>([])
+  const [classSearchTerm, setClassSearchTerm] = React.useState("")
+  const [isLoadingClasses, setIsLoadingClasses] = React.useState(false)
+  const [isLoadingSubFields, setIsLoadingSubFields] = React.useState(false)
+  const [isSubmitting, setIsSubmitting] = React.useState(false)
+
+  // ID management
+  const selectIdRef = React.useRef(0)
+  const getUniqueSelectId = React.useCallback(() => `select-${selectIdRef.current++}`, [])
+  const fieldIdsRef = React.useRef<Record<string, string>>({})
+  const classOptionIdsRef = React.useRef<Record<string, string>>({})
+
+  console.log(subFields)
+
+  // ---------------
+  // Load Class Options
+  // ---------------
+  React.useEffect(() => {
+    const loadClassOptions = async () => {
+      setIsLoadingClasses(true)
+      try {
+        const result = await getClassOptions()
+        setClassOptions(result)
+      } catch (err) {
+        toast.error("클래스 옵션을 불러오는데 실패했습니다.")
+      } finally {
+        setIsLoadingClasses(false)
+      }
+    }
+
+    if (open) {
+      loadClassOptions()
+    }
+  }, [open])
+
+  // ---------------
+  // react-hook-form with fieldArray support for multiple rows
+  // ---------------
+  const form = useForm<MultiTagFormValues>({
+    defaultValues: {
+      tagType: "",
+      class: "",
+      rows: [{
+        tagNo: "",
+        description: ""
+      }]
+    },
+  })
+
+  const { fields, append, remove } = useFieldArray({
+    control: form.control,
+    name: "rows"
+  })
+
+  // ---------------
+  // Load subfields by TagType code
+  // ---------------
+  async function loadSubFieldsByTagTypeCode(tagTypeCode: string) {
+    setIsLoadingSubFields(true)
+    try {
+      const { subFields: apiSubFields } = await getSubfieldsByTagType(tagTypeCode)
+      const formattedSubFields: SubFieldDef[] = apiSubFields.map(field => ({
+        name: field.name,
+        label: field.label,
+        type: field.type,
+        options: field.options || [],
+        expression: field.expression ?? undefined,
+        delimiter: field.delimiter ?? undefined,
+      }))
+      setSubFields(formattedSubFields)
+
+      // Initialize the rows with these subfields
+      const currentRows = form.getValues("rows");
+      const updatedRows = currentRows.map(row => {
+        const newRow = { ...row };
+        formattedSubFields.forEach(field => {
+          if (!newRow[field.name]) {
+            newRow[field.name] = "";
+          }
+        });
+        return newRow;
+      });
+
+      form.setValue("rows", updatedRows);
+      return true
+    } catch (err) {
+      toast.error("서브필드를 불러오는데 실패했습니다.")
+      setSubFields([])
+      return false
+    } finally {
+      setIsLoadingSubFields(false)
+    }
+  }
+
+  // ---------------
+  // Handle class selection
+  // ---------------
+  async function handleSelectClass(classOption: UpdatedClassOption) {
+    form.setValue("class", classOption.label)
+    if (classOption.tagTypeCode) {
+      setSelectedTagTypeCode(classOption.tagTypeCode)
+      // If you have tagTypeList, you can find the label
+      const tagType = tagTypeList.find(t => t.id === classOption.tagTypeCode)
+      if (tagType) {
+        form.setValue("tagType", tagType.label)
+      } else if (classOption.tagTypeDescription) {
+        form.setValue("tagType", classOption.tagTypeDescription)
+      }
+      await loadSubFieldsByTagTypeCode(classOption.tagTypeCode)
+    }
+  }
+
+  // ---------------
+  // Build TagNo from subfields automatically for each row
+  // ---------------
+  React.useEffect(() => {
+    if (subFields.length === 0) {
+      return;
+    }
+
+    const subscription = form.watch((value) => {
+      if (!value.rows || subFields.length === 0) {
+        return;
+      }
+
+      const rows = [...value.rows];
+      rows.forEach((row, rowIndex) => {
+        if (!row) return;
+
+        let combined = "";
+        subFields.forEach((sf, idx) => {
+          const fieldValue = row[sf.name] || "";
+          combined += fieldValue;
+          if (fieldValue && idx < subFields.length - 1 && sf.delimiter) {
+            combined += sf.delimiter;
+          }
+        });
+
+        const currentTagNo = form.getValues(`rows.${rowIndex}.tagNo`);
+        if (currentTagNo !== combined) {
+          form.setValue(`rows.${rowIndex}.tagNo`, combined, {
+            shouldDirty: true,     // Changed from false to true
+            shouldTouch: true,     // Changed from false to true
+            shouldValidate: true,  // Changed from false to true
+          });
+        }
+      });
+    });
+
+    return () => subscription.unsubscribe();
+  }, [subFields, form]);
+  // ---------------
+  // Check if tag numbers are valid
+  // ---------------
+  const areAllTagNosValid = React.useMemo(() => {
+    const rows = form.getValues("rows");
+    return rows.every(row => {
+      const tagNo = row.tagNo;
+      return tagNo && tagNo.trim() !== "" && !tagNo.includes("??");
+    });
+  }, [form.watch()]); // Watch the entire form to catch all changes
+  // ---------------
+  // Submit handler for multiple tags
+  // ---------------
+  async function onSubmit(data: MultiTagFormValues) {
+    if (!selectedPackageId) {
+      toast.error("No selectedPackageId.");
+      return;
+    }
+
+    setIsSubmitting(true);
+    try {
+      const successfulTags = [];
+      const failedTags = [];
+
+      // Process each row
+      for (const row of data.rows) {
+        // Create tag data from the row and shared class/tagType
+        const tagData: CreateTagSchema = {
+          tagType: data.tagType,
+          class: data.class,
+          tagNo: row.tagNo,
+          description: row.description,
+          ...Object.fromEntries(
+            subFields.map(field => [field.name, row[field.name] || ""])
+          ),
+          // Add any required default fields from the original form
+          functionCode: row.functionCode || "",
+          seqNumber: row.seqNumber || "",
+          valveAcronym: row.valveAcronym || "",
+          processUnit: row.processUnit || "",
+        };
+
+        try {
+          const res = await createTag(tagData, selectedPackageId);
+          if ("error" in res) {
+            failedTags.push({ tag: row.tagNo, error: res.error });
+          } else {
+            successfulTags.push(row.tagNo);
+          }
+        } catch (err) {
+          failedTags.push({ tag: row.tagNo, error: "Unknown error" });
+        }
+      }
+
+      // Show results to the user
+      if (successfulTags.length > 0) {
+        toast.success(`${successfulTags.length}개의 태그가 성공적으로 생성되었습니다!`);
+      }
+
+      if (failedTags.length > 0) {
+        toast.error(`${failedTags.length}개의 태그 생성에 실패했습니다.`);
+        console.error("Failed tags:", failedTags);
+      }
+
+      // Refresh the page
+      router.refresh();
+
+      // Reset the form and close dialog if all successful
+      if (failedTags.length === 0) {
+        form.reset();
+        setOpen(false);
+      }
+    } catch (err) {
+      toast.error("태그 생성 처리에 실패했습니다.");
+    } finally {
+      setIsSubmitting(false);
+    }
+  }
+
+  // ---------------
+  // Add a new row
+  // ---------------
+  function addRow() {
+    // Create a properly typed row with index signature to allow dynamic properties
+    const newRow: {
+      tagNo: string;
+      description: string;
+      [key: string]: string;  // This allows any string key with string values
+    } = {
+      tagNo: "",
+      description: ""
+    };
+
+    // Add all subfields with empty values
+    subFields.forEach(field => {
+      newRow[field.name] = "";
+    });
+
+    append(newRow);
+
+    // Force form validation after row is added
+    setTimeout(() => form.trigger(), 0);
+  }
+
+  // ---------------
+  // Duplicate row
+  // ---------------
+  function duplicateRow(index: number) {
+    const rowToDuplicate = form.getValues(`rows.${index}`);
+    // Use proper typing with index signature
+    const newRow: {
+      tagNo: string;
+      description: string;
+      [key: string]: string;
+    } = { ...rowToDuplicate };
+
+    // Clear the tagNo field as it will be auto-generated
+    newRow.tagNo = "";
+    append(newRow);
+
+    // Force form validation after row is duplicated
+    setTimeout(() => form.trigger(), 0);
+  }
+
+  // ---------------
+  // Render Class field
+  // ---------------
+  function renderClassField(field: any) {
+    const [popoverOpen, setPopoverOpen] = React.useState(false)
+
+    const buttonId = React.useMemo(
+      () => `class-button-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`,
+      []
+    )
+    const popoverContentId = React.useMemo(
+      () => `class-popover-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`,
+      []
+    )
+    const commandId = React.useMemo(
+      () => `class-command-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`,
+      []
+    )
+
+    return (
+      <FormItem className="w-1/2">
+        <FormLabel>Class</FormLabel>
+        <FormControl>
+          <Popover open={popoverOpen} onOpenChange={setPopoverOpen}>
+            <PopoverTrigger asChild>
+              <Button
+                key={buttonId}
+                type="button"
+                variant="outline"
+                className="w-full justify-between relative h-9"
+                disabled={isLoadingClasses}
+              >
+                {isLoadingClasses ? (
+                  <>
+                    <span>클래스 로딩 중...</span>
+                    <Loader2 className="ml-2 h-4 w-4 animate-spin" />
+                  </>
+                ) : (
+                  <>
+                    <span className="truncate mr-1 flex-grow text-left">
+                      {field.value || "클래스 선택..."}
+                    </span>
+                    <ChevronsUpDown className="h-4 w-4 opacity-50 flex-shrink-0" />
+                  </>
+                )}
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent key={popoverContentId} className="w-[300px] p-0">
+              <Command key={commandId}>
+                <CommandInput
+                  key={`${commandId}-input`}
+                  placeholder="클래스 검색..."
+                  value={classSearchTerm}
+                  onValueChange={setClassSearchTerm}
+                />
+                <CommandList key={`${commandId}-list`} className="max-h-[300px]">
+                  <CommandEmpty key={`${commandId}-empty`}>검색 결과가 없습니다.</CommandEmpty>
+                  <CommandGroup key={`${commandId}-group`}>
+                    {classOptions.map((opt, optIndex) => {
+                      if (!classOptionIdsRef.current[opt.code]) {
+                        classOptionIdsRef.current[opt.code] =
+                          `class-${opt.code}-${Date.now()}-${Math.random()
+                            .toString(36)
+                            .slice(2, 9)}`
+                      }
+                      const optionId = classOptionIdsRef.current[opt.code]
+
+                      return (
+                        <CommandItem
+                          key={`${optionId}-${optIndex}`}
+                          onSelect={() => {
+                            field.onChange(opt.label)
+                            setPopoverOpen(false)
+                            handleSelectClass(opt)
+                          }}
+                          value={opt.label}
+                          className="truncate"
+                          title={opt.label}
+                        >
+                          <span className="truncate">{opt.label}</span>
+                          <Check
+                            key={`${optionId}-check`}
+                            className={cn(
+                              "ml-auto h-4 w-4 flex-shrink-0",
+                              field.value === opt.label ? "opacity-100" : "opacity-0"
+                            )}
+                          />
+                        </CommandItem>
+                      )
+                    })}
+                  </CommandGroup>
+                </CommandList>
+              </Command>
+            </PopoverContent>
+          </Popover>
+        </FormControl>
+        <FormMessage />
+      </FormItem>
+    )
+  }
+
+  // ---------------
+  // Render TagType field (readonly after class selection)
+  // ---------------
+  function renderTagTypeField(field: any) {
+    const isReadOnly = !!selectedTagTypeCode
+    const inputId = React.useMemo(
+      () =>
+        `tag-type-input-${isReadOnly ? "readonly" : "editable"}-${Date.now()}-${Math.random()
+          .toString(36)
+          .slice(2, 9)}`,
+      [isReadOnly]
+    )
+
+    return (
+      <FormItem className="w-1/2">
+        <FormLabel>Tag Type</FormLabel>
+        <FormControl>
+          {isReadOnly ? (
+            <div className="relative">
+              <Input
+                key={`tag-type-readonly-${inputId}`}
+                {...field}
+                readOnly
+                className="h-9 bg-muted"
+              />
+            </div>
+          ) : (
+            <Input
+              key={`tag-type-placeholder-${inputId}`}
+              {...field}
+              readOnly
+              placeholder="클래스 선택시 자동으로 결정됩니다"
+              className="h-9 bg-muted"
+            />
+          )}
+        </FormControl>
+        <FormMessage />
+      </FormItem>
+    )
+  }
+
+  // ---------------
+  // Render the table of subfields
+  // ---------------
+  function renderTagTable() {
+    if (isLoadingSubFields) {
+      return (
+        <div className="flex justify-center items-center py-8">
+          <Loader2 className="h-8 w-8 animate-spin text-primary" />
+          <div className="ml-3 text-muted-foreground">필드 로딩 중...</div>
+        </div>
+      )
+    }
+
+    if (subFields.length === 0 && selectedTagTypeCode) {
+      return (
+        <div className="py-4 text-center text-muted-foreground">
+          이 태그 유형에 대한 필드가 없습니다.
+        </div>
+      )
+    }
+
+    if (subFields.length === 0) {
+      return (
+        <div className="py-4 text-center text-muted-foreground">
+          태그 데이터를 입력하려면 먼저 상단에서 클래스를 선택하세요.
+        </div>
+      )
+    }
+
+    return (
+      <div className="space-y-4">
+        {/* 헤더 */}
+        <div className="flex justify-between items-center">
+          <h3 className="text-sm font-medium">태그 항목 ({fields.length}개)</h3>
+          {!areAllTagNosValid && (
+            <Badge variant="destructive" className="ml-2">
+              유효하지 않은 태그 존재
+            </Badge>
+          )}
+        </div>
+
+        {/* 테이블 컨테이너 - 가로/세로 스크롤 모두 적용 */}
+        <div className="border rounded-md overflow-auto" style={{ maxHeight: '400px', maxWidth: '100%' }}>
+          <div className="min-w-full overflow-x-auto">
+            <Table className="w-full table-fixed">
+              <TableHeader className="sticky top-0 bg-muted z-10">
+                <TableRow>
+                  <TableHead className="w-10 text-center">#</TableHead>
+                  <TableHead className="w-[120px]">
+                    <div className="font-medium">Tag No</div>
+                  </TableHead>
+                  <TableHead className="w-[180px]">
+                    <div className="font-medium">Description</div>
+                  </TableHead>
+
+                  {/* Subfields */}
+                  {subFields.map((field, fieldIndex) => (
+                    <TableHead
+                      key={`header-${field.name}-${fieldIndex}`}
+                      className="w-[120px]"
+                    >
+                      <div className="flex flex-col">
+                        <div className="font-medium" title={field.label}>
+                          {field.label}
+                        </div>
+                        {field.expression && (
+                          <div className="text-[10px] text-muted-foreground truncate" title={field.expression}>
+                            {field.expression}
+                          </div>
+                        )}
+                      </div>
+                    </TableHead>
+                  ))}
+
+                  <TableHead className="w-[100px] text-center sticky right-0 bg-muted">Actions</TableHead>
+                </TableRow>
+              </TableHeader>
+
+              <TableBody>
+                {fields.map((item, rowIndex) => (
+                  <TableRow
+                    key={`row-${item.id}-${rowIndex}`}
+                    className={rowIndex % 2 === 0 ? "bg-background" : "bg-muted/20"}
+                  >
+                    {/* Row number */}
+                    <TableCell className="text-center text-muted-foreground font-mono">
+                      {rowIndex + 1}
+                    </TableCell>
+
+                    {/* Tag No cell */}
+                    <TableCell className="p-1">
+                      <FormField
+                        control={form.control}
+                        name={`rows.${rowIndex}.tagNo`}
+                        render={({ field }) => (
+                          <FormItem className="m-0 space-y-0">
+                            <FormControl>
+                              <div className="relative">
+                                <Input
+                                  {...field}
+                                  readOnly
+                                  className={cn(
+                                    "bg-muted h-8 w-full font-mono text-sm",
+                                    field.value?.includes("??") && "border-red-500 bg-red-50"
+                                  )}
+                                  title={field.value || ""}
+                                />
+                                {field.value?.includes("??") && (
+                                  <div className="absolute right-2 top-1/2 transform -translate-y-1/2">
+                                    <Badge variant="destructive" className="text-xs">
+                                      !
+                                    </Badge>
+                                  </div>
+                                )}
+                              </div>
+                            </FormControl>
+                          </FormItem>
+                        )}
+                      />
+                    </TableCell>
+
+                    {/* Description cell */}
+                    <TableCell className="p-1">
+                      <FormField
+                        control={form.control}
+                        name={`rows.${rowIndex}.description`}
+                        render={({ field }) => (
+                          <FormItem className="m-0 space-y-0">
+                            <FormControl>
+                              <Input
+                                {...field}
+                                className="h-8 w-full"
+                                placeholder="항목 이름 입력"
+                                title={field.value || ""}
+                              />
+                            </FormControl>
+                          </FormItem>
+                        )}
+                      />
+                    </TableCell>
+
+                    {/* Subfield cells */}
+                    {subFields.map((sf, sfIndex) => (
+                      <TableCell
+                        key={`cell-${item.id}-${rowIndex}-${sf.name}-${sfIndex}`}
+                        className="p-1"
+                      >
+                        <FormField
+                          control={form.control}
+                          name={`rows.${rowIndex}.${sf.name}`}
+                          render={({ field }) => (
+                            <FormItem className="m-0 space-y-0">
+                              <FormControl>
+                                {sf.type === "select" ? (
+                                  <Select
+                                    value={field.value || ""}
+                                    onValueChange={field.onChange}
+                                  >
+                                    <SelectTrigger
+                                      className="w-full h-8 truncate"
+                                      title={field.value || ""}
+                                    >
+                                      <SelectValue placeholder={`선택...`} className="truncate" />
+                                    </SelectTrigger>
+                                    <SelectContent
+                                      align="start"
+                                      side="bottom"
+                                      className="max-h-[200px]"
+                                      style={{ minWidth: "250px", maxWidth: "350px" }}
+                                    >
+                                      {sf.options?.map((opt, index) => (
+                                        <SelectItem
+                                          key={`${rowIndex}-${sf.name}-${opt.value}-${index}`}
+                                          value={opt.value}
+                                          title={opt.label}
+                                          className="whitespace-normal py-2 break-words"
+                                        >
+                                          {opt.label}
+                                        </SelectItem>
+                                      ))}
+                                    </SelectContent>
+                                  </Select>
+                                ) : (
+                                  <Input
+                                    {...field}
+                                    className="h-8 w-full"
+                                    placeholder={`입력...`}
+                                    title={field.value || ""}
+                                  />
+                                )}
+                              </FormControl>
+                              {/* <FormMessage>{sf.expression}</FormMessage> */}
+                            </FormItem>
+
+                          )}
+                        />
+                      </TableCell>
+                    ))}
+
+                    {/* Actions cell */}
+                    <TableCell className="p-1 sticky right-0 bg-white shadow-[-4px_0_4px_rgba(0,0,0,0.05)]">
+                      <div className="flex justify-center space-x-1">
+                        <TooltipProvider>
+                          <Tooltip>
+                            <TooltipTrigger asChild>
+                              <Button
+                                type="button"
+                                variant="ghost"
+                                size="icon"
+                                className="h-7 w-7"
+                                onClick={() => duplicateRow(rowIndex)}
+                              >
+                                <Copy className="h-3.5 w-3.5 text-muted-foreground" />
+                              </Button>
+                            </TooltipTrigger>
+                            <TooltipContent side="left">
+                              <p>행 복제</p>
+                            </TooltipContent>
+                          </Tooltip>
+                        </TooltipProvider>
+
+                        <TooltipProvider>
+                          <Tooltip>
+                            <TooltipTrigger asChild>
+                              <Button
+                                type="button"
+                                variant="ghost"
+                                size="icon"
+                                className={cn(
+                                  "h-7 w-7",
+                                  fields.length <= 1 && "opacity-50"
+                                )}
+                                onClick={() => fields.length > 1 && remove(rowIndex)}
+                                disabled={fields.length <= 1}
+                              >
+                                <Trash2 className="h-3.5 w-3.5 text-red-500" />
+                              </Button>
+                            </TooltipTrigger>
+                            <TooltipContent side="left">
+                              <p>행 삭제</p>
+                            </TooltipContent>
+                          </Tooltip>
+                        </TooltipProvider>
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+
+          {/* 행 추가 버튼 */}
+          <Button
+            type="button"
+            variant="outline"
+            className="w-full border-dashed"
+            onClick={addRow}
+            disabled={!selectedTagTypeCode || isLoadingSubFields}
+          >
+            <Plus className="h-4 w-4 mr-2" />
+            새 행 추가
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  // ---------------
+  // Reset IDs/states when dialog closes
+  // ---------------
+  React.useEffect(() => {
+    if (!open) {
+      fieldIdsRef.current = {}
+      classOptionIdsRef.current = {}
+      selectIdRef.current = 0
+    }
+  }, [open])
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(o) => {
+        if (!o) {
+          form.reset({
+            tagType: "",
+            class: "",
+            rows: [{ tagNo: "", description: "" }]
+          });
+          setSelectedTagTypeCode(null);
+          setSubFields([]);
+        }
+        setOpen(o);
+      }}
+    >
+      <DialogTrigger asChild>
+        <Button variant="default" size="sm">
+          태그 추가
+        </Button>
+      </DialogTrigger>
+
+      <DialogContent className="max-h-[90vh] max-w-[95vw]" style={{ width: 1500 }}>
+        <DialogHeader>
+          <DialogTitle>새 태그 추가</DialogTitle>
+          <DialogDescription>
+            클래스를 선택하여 태그 유형과 하위 필드를 로드한 다음, 여러 행을 추가하여 여러 태그를 생성하세요.
+          </DialogDescription>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="space-y-6"
+          >
+            {/* 클래스 및 태그 유형 선택 */}
+            <div className="flex gap-4">
+              <FormField
+                key="class-field"
+                control={form.control}
+                name="class"
+                render={({ field }) => renderClassField(field)}
+              />
+
+              <FormField
+                key="tag-type-field"
+                control={form.control}
+                name="tagType"
+                render={({ field }) => renderTagTypeField(field)}
+              />
+            </div>
+
+            {/* 태그 테이블 */}
+            {renderTagTable()}
+
+            {/* 버튼 */}
+            <DialogFooter>
+              <div className="flex items-center gap-2">
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={() => {
+                    form.reset({
+                      tagType: "",
+                      class: "",
+                      rows: [{ tagNo: "", description: "" }]
+                    });
+                    setOpen(false);
+                    setSubFields([]);
+                    setSelectedTagTypeCode(null);
+                  }}
+                  disabled={isSubmitting}
+                >
+                  취소
+                </Button>
+                <Button
+                  type="submit"
+                  disabled={isSubmitting || !areAllTagNosValid || fields.length < 1}
+                >
+                  {isSubmitting ? (
+                    <>
+                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                      처리 중...
+                    </>
+                  ) : (
+                    `${fields.length}개 태그 생성`
+                  )}
+                </Button>
+              </div>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  )
+}
\ No newline at end of file
diff --git a/lib/tags/table/delete-tags-dialog.tsx b/lib/tags/table/delete-tags-dialog.tsx
new file mode 100644
index 00000000..6a024cda
--- /dev/null
+++ b/lib/tags/table/delete-tags-dialog.tsx
@@ -0,0 +1,151 @@
+"use client"
+
+import * as React from "react"
+import { type Row } from "@tanstack/react-table"
+import { Loader, Trash } from "lucide-react"
+import { toast } from "sonner"
+
+import { useMediaQuery } from "@/hooks/use-media-query"
+import { Button } from "@/components/ui/button"
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/components/ui/drawer"
+
+import { removeTags } from "@/lib//tags/service"
+import { Tag } from "@/db/schema/vendorData"
+
+interface DeleteTasksDialogProps
+  extends React.ComponentPropsWithoutRef<typeof Dialog> {
+  tags: Row<Tag>["original"][]
+  showTrigger?: boolean
+  selectedPackageId: number
+  onSuccess?: () => void
+}
+
+export function DeleteTagsDialog({
+  tags,
+  showTrigger = true,
+  onSuccess,
+  selectedPackageId,
+  ...props
+}: DeleteTasksDialogProps) {
+  const [isDeletePending, startDeleteTransition] = React.useTransition()
+  const isDesktop = useMediaQuery("(min-width: 640px)")
+
+  function onDelete() {
+    startDeleteTransition(async () => {
+      const { error } = await removeTags({
+        ids: tags.map((tag) => tag.id),selectedPackageId
+      })
+
+      if (error) {
+        toast.error(error)
+        return
+      }
+
+      props.onOpenChange?.(false)
+      toast.success("Tasks deleted")
+      onSuccess?.()
+    })
+  }
+
+  if (isDesktop) {
+    return (
+      <Dialog {...props}>
+        {showTrigger ? (
+          <DialogTrigger asChild>
+            <Button variant="outline" size="sm">
+              <Trash className="size-4" aria-hidden="true" />
+              Delete ({tags.length})
+            </Button>
+          </DialogTrigger>
+        ) : null}
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Are you absolutely sure?</DialogTitle>
+            <DialogDescription>
+              This action cannot be undone. This will permanently delete your{" "}
+              <span className="font-medium">{tags.length}</span>
+              {tags.length === 1 ? " tag" : " tags"} from our servers.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter className="gap-2 sm:space-x-0">
+            <DialogClose asChild>
+              <Button variant="outline">Cancel</Button>
+            </DialogClose>
+            <Button
+              aria-label="Delete selected rows"
+              variant="destructive"
+              onClick={onDelete}
+              disabled={isDeletePending}
+            >
+              {isDeletePending && (
+                <Loader
+                  className="mr-2 size-4 animate-spin"
+                  aria-hidden="true"
+                />
+              )}
+              Delete
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    )
+  }
+
+  return (
+    <Drawer {...props}>
+      {showTrigger ? (
+        <DrawerTrigger asChild>
+          <Button variant="outline" size="sm">
+            <Trash className="mr-2 size-4" aria-hidden="true" />
+            Delete ({tags.length})
+          </Button>
+        </DrawerTrigger>
+      ) : null}
+      <DrawerContent>
+        <DrawerHeader>
+          <DrawerTitle>Are you absolutely sure?</DrawerTitle>
+          <DrawerDescription>
+            This action cannot be undone. This will permanently delete your{" "}
+            <span className="font-medium">{tags.length}</span>
+            {tags.length === 1 ? " tag" : " tags"} from our servers.
+          </DrawerDescription>
+        </DrawerHeader>
+        <DrawerFooter className="gap-2 sm:space-x-0">
+          <DrawerClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </DrawerClose>
+          <Button
+            aria-label="Delete selected rows"
+            variant="destructive"
+            onClick={onDelete}
+            disabled={isDeletePending}
+          >
+            {isDeletePending && (
+              <Loader className="mr-2 size-4 animate-spin" aria-hidden="true" />
+            )}
+            Delete
+          </Button>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  )
+}
diff --git a/lib/tags/table/feature-flags-provider.tsx b/lib/tags/table/feature-flags-provider.tsx
new file mode 100644
index 00000000..81131894
--- /dev/null
+++ b/lib/tags/table/feature-flags-provider.tsx
@@ -0,0 +1,108 @@
+"use client"
+
+import * as React from "react"
+import { useQueryState } from "nuqs"
+
+import { dataTableConfig, type DataTableConfig } from "@/config/data-table"
+import { cn } from "@/lib/utils"
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+
+type FeatureFlagValue = DataTableConfig["featureFlags"][number]["value"]
+
+interface FeatureFlagsContextProps {
+  featureFlags: FeatureFlagValue[]
+  setFeatureFlags: (value: FeatureFlagValue[]) => void
+}
+
+const FeatureFlagsContext = React.createContext<FeatureFlagsContextProps>({
+  featureFlags: [],
+  setFeatureFlags: () => {},
+})
+
+export function useFeatureFlags() {
+  const context = React.useContext(FeatureFlagsContext)
+  if (!context) {
+    throw new Error(
+      "useFeatureFlags must be used within a FeatureFlagsProvider"
+    )
+  }
+  return context
+}
+
+interface FeatureFlagsProviderProps {
+  children: React.ReactNode
+}
+
+export function FeatureFlagsProvider({ children }: FeatureFlagsProviderProps) {
+  const [featureFlags, setFeatureFlags] = useQueryState<FeatureFlagValue[]>(
+    "flags",
+    {
+      defaultValue: [],
+      parse: (value) => value.split(",") as FeatureFlagValue[],
+      serialize: (value) => value.join(","),
+      eq: (a, b) =>
+        a.length === b.length && a.every((value, index) => value === b[index]),
+      clearOnDefault: true,
+      shallow: false,
+    }
+  )
+
+  return (
+    <FeatureFlagsContext.Provider
+      value={{
+        featureFlags,
+        setFeatureFlags: (value) => void setFeatureFlags(value),
+      }}
+    >
+      <div className="w-full overflow-x-auto">
+        <ToggleGroup
+          type="multiple"
+          variant="outline"
+          size="sm"
+          value={featureFlags}
+          onValueChange={(value: FeatureFlagValue[]) => setFeatureFlags(value)}
+          className="w-fit gap-0"
+        >
+          {dataTableConfig.featureFlags.map((flag, index) => (
+            <Tooltip key={flag.value}>
+              <ToggleGroupItem
+                value={flag.value}
+                className={cn(
+                  "gap-2 whitespace-nowrap rounded-none px-3 text-xs data-[state=on]:bg-accent/70 data-[state=on]:hover:bg-accent/90",
+                  {
+                    "rounded-l-sm border-r-0": index === 0,
+                    "rounded-r-sm":
+                      index === dataTableConfig.featureFlags.length - 1,
+                  }
+                )}
+                asChild
+              >
+                <TooltipTrigger>
+                  <flag.icon className="size-3.5 shrink-0" aria-hidden="true" />
+                  {flag.label}
+                </TooltipTrigger>
+              </ToggleGroupItem>
+              <TooltipContent
+                align="start"
+                side="bottom"
+                sideOffset={6}
+                className="flex max-w-60 flex-col space-y-1.5 border bg-background py-2 font-semibold text-foreground"
+              >
+                <div>{flag.tooltipTitle}</div>
+                <div className="text-xs text-muted-foreground">
+                  {flag.tooltipDescription}
+                </div>
+              </TooltipContent>
+            </Tooltip>
+          ))}
+        </ToggleGroup>
+      </div>
+      {children}
+    </FeatureFlagsContext.Provider>
+  )
+}
diff --git a/lib/tags/table/tag-table-column.tsx b/lib/tags/table/tag-table-column.tsx
new file mode 100644
index 00000000..47746000
--- /dev/null
+++ b/lib/tags/table/tag-table-column.tsx
@@ -0,0 +1,164 @@
+"use client"
+
+import * as React from "react"
+import { ColumnDef } from "@tanstack/react-table"
+import { formatDate } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Checkbox } from "@/components/ui/checkbox"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { Ellipsis } from "lucide-react"
+// 기존 헤더 컴포넌트 사용 (리사이저가 내장된 헤더는 따로 구현할 예정)
+import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header"
+import { Tag } from "@/db/schema/vendorData"
+import { DataTableRowAction } from "@/types/table"
+
+interface GetColumnsProps {
+  setRowAction: React.Dispatch<React.SetStateAction<DataTableRowAction<Tag> | null>>
+}
+
+export function getColumns({
+  setRowAction,
+}: GetColumnsProps): ColumnDef<Tag>[] {
+  return [
+    {
+      id: "select",
+      header: ({ table }) => (
+        <Checkbox
+          checked={
+            table.getIsAllPageRowsSelected() ||
+            (table.getIsSomePageRowsSelected() && "indeterminate")
+          }
+          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+          aria-label="Select all"
+          className="translate-y-0.5"
+        />
+      ),
+      cell: ({ row }) => (
+        <Checkbox
+          checked={row.getIsSelected()}
+          onCheckedChange={(value) => row.toggleSelected(!!value)}
+          aria-label="Select row"
+          className="translate-y-0.5"
+        />
+      ),
+      enableSorting: false,
+      enableHiding: false,
+      enableResizing: false, // 체크박스 열은 리사이징 비활성화
+      size: 40,
+      minSize: 40,
+      maxSize: 40,
+    },
+
+    {
+      accessorKey: "tagNo",
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title="Tag No." />
+      ),
+      cell: ({ row }) => <div>{row.getValue("tagNo")}</div>,
+      meta: {
+        excelHeader: "Tag No"
+      },
+      enableResizing: true, // 리사이징 활성화
+      minSize: 100, // 최소 너비
+      size: 160, // 기본 너비
+    },
+    {
+      accessorKey: "description",
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title="Tag Description" />
+      ),
+      cell: ({ row }) => <div>{row.getValue("description")}</div>,
+      meta: {
+        excelHeader: "Tag Descripiton"
+      },
+      enableResizing: true,
+      minSize: 150,
+      size: 240,
+    },
+    {
+      accessorKey: "class",
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title="Tag Class" />
+      ),
+      cell: ({ row }) => <div>{row.getValue("class")}</div>,
+      meta: {
+        excelHeader: "Tag Class"
+      },
+      enableResizing: true,
+      minSize: 100,
+      size: 150,
+    },
+    {
+      accessorKey: "createdAt",
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title="Created At" />
+      ),
+      cell: ({ cell }) => formatDate(cell.getValue() as Date),
+      meta: {
+        excelHeader: "created At"
+      },
+      enableResizing: true,
+      minSize: 120,
+      size: 180,
+    },
+    {
+      accessorKey: "updatedAt",
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title="Updated At" />
+      ),
+      cell: ({ cell }) => formatDate(cell.getValue() as Date),
+      meta: {
+        excelHeader: "updated At"
+      },
+      enableResizing: true,
+      minSize: 120,
+      size: 180,
+    },
+    {
+      id: "actions",
+      cell: function Cell({ row }) {
+        const [isUpdatePending, startUpdateTransition] = React.useTransition()
+
+        return (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                aria-label="Open menu"
+                variant="ghost"
+                className="flex size-8 p-0 data-[state=open]:bg-muted"
+              >
+                <Ellipsis className="size-6" aria-hidden="true" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="w-40">
+              <DropdownMenuItem
+                onSelect={() => setRowAction({ row, type: "update" })}
+              >
+                Edit
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem
+                onSelect={() => setRowAction({ row, type: "delete" })}
+              >
+                Delete
+                <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        )
+      },
+      enableResizing: false, // 액션 열은 리사이징 비활성화
+      size: 40,
+      minSize: 40,
+      maxSize: 40,
+      enableHiding: false,
+    },
+  ]
+}
\ No newline at end of file
diff --git a/lib/tags/table/tag-table.tsx b/lib/tags/table/tag-table.tsx
new file mode 100644
index 00000000..5c8c048f
--- /dev/null
+++ b/lib/tags/table/tag-table.tsx
@@ -0,0 +1,141 @@
+"use client"
+
+import * as React from "react"
+import type {
+  DataTableAdvancedFilterField,
+  DataTableFilterField,
+  DataTableRowAction,
+} from "@/types/table"
+
+import { toSentenceCase } from "@/lib/utils"
+import { useDataTable } from "@/hooks/use-data-table"
+import { DataTable } from "@/components/data-table/data-table"
+import { DataTableAdvancedToolbar } from "@/components/data-table/data-table-advanced-toolbar"
+
+import { getColumns } from "./tag-table-column"
+import { Tag } from "@/db/schema/vendorData"
+import { DeleteTagsDialog } from "./delete-tags-dialog"
+import { TagsTableToolbarActions } from "./tags-table-toolbar-actions"
+import { TagsTableFloatingBar } from "./tags-table-floating-bar"
+import { getTags } from "../service"
+import { UpdateTagSheet } from "./update-tag-sheet"
+
+// 여기서 받은 `promises`로부터 태그 목록을 가져와 상태를 세팅
+// 예: "selectedPackageId"는 props로 전달
+interface TagsTableProps {
+  promises: Promise< [ Awaited<ReturnType<typeof getTags>> ] >
+  selectedPackageId: number
+}
+
+export function TagsTable({ promises, selectedPackageId }: TagsTableProps) {
+  // 1) 데이터를 가져옴 (server component -> use(...) pattern)
+  const [{ data, pageCount }] = React.use(promises)
+
+
+
+
+  const [rowAction, setRowAction] = React.useState<DataTableRowAction<Tag> | null>(null)
+
+  const columns = React.useMemo(
+    () => getColumns({ setRowAction }),
+    [setRowAction]
+  )
+
+  // Filter fields
+  const filterFields: DataTableFilterField<Tag>[] = [
+    {
+      id: "tagNo",
+      label: "Tag Number",
+      placeholder: "Filter Tag Number...",
+    },
+  ]
+
+  const advancedFilterFields: DataTableAdvancedFilterField<Tag>[] = [
+    {
+      id: "tagNo",
+      label: "Tag No",
+      type: "text",
+    },
+    {
+      id: "tagType",
+      label: "Tag Type",
+      type: "text",
+    },
+    {
+      id: "description",
+      label: "Description",
+      type: "text",
+    },
+    {
+      id: "createdAt",
+      label: "Created at",
+      type: "date",
+    },
+    {
+      id: "updatedAt",
+      label: "Updated at",
+      type: "date",
+    },
+  ]
+
+  // 3) useDataTable 훅으로 react-table 구성
+  const { table } = useDataTable({
+    data: data,      // <-- 여기서 tableData 사용
+    columns,
+    pageCount,
+    filterFields,
+    enablePinning: true,
+    enableAdvancedFilter: true,
+    initialState: {
+      sorting: [{ id: "createdAt", desc: true }],
+      columnPinning: { right: ["actions"] },
+    },
+    getRowId: (originalRow) => String(originalRow.id),
+    shallow: false,
+    clearOnDefault: true,
+    columnResizeMode: "onEnd",
+
+  })
+
+  return (
+    <>
+      <DataTable
+        table={table}
+        floatingBar={<TagsTableFloatingBar table={table} selectedPackageId={selectedPackageId}/>}
+      >
+        <DataTableAdvancedToolbar
+          table={table}
+          filterFields={advancedFilterFields}
+          shallow={false}
+        >
+          {/*
+            4) ToolbarActions에 tableData, setTableData 넘겨서
+               import 시 상태 병합
+          */}
+          <TagsTableToolbarActions 
+            table={table} 
+            selectedPackageId={selectedPackageId}
+            tableData={data}             // <-- pass current data
+          />
+        </DataTableAdvancedToolbar>
+      </DataTable>
+
+      <UpdateTagSheet
+        open={rowAction?.type === "update"}
+        onOpenChange={() => setRowAction(null)}
+        tag={rowAction?.row.original ?? null}
+        selectedPackageId={selectedPackageId}
+      />
+
+
+      <DeleteTagsDialog
+        open={rowAction?.type === "delete"}
+        onOpenChange={() => setRowAction(null)}
+        tags={rowAction?.row.original ? [rowAction?.row.original] : []}
+        showTrigger={false}
+        onSuccess={() => rowAction?.row.toggleSelected(false)}
+        selectedPackageId={selectedPackageId}
+      />
+    </>
+  )
+}
\ No newline at end of file
diff --git a/lib/tags/table/tags-export.tsx b/lib/tags/table/tags-export.tsx
new file mode 100644
index 00000000..4afbac6c
--- /dev/null
+++ b/lib/tags/table/tags-export.tsx
@@ -0,0 +1,155 @@
+"use client"
+
+import * as React from "react"
+import { type Table } from "@tanstack/react-table"
+import { toast } from "sonner"
+import ExcelJS from "exceljs"
+import { saveAs } from "file-saver"
+import { Tag } from "@/db/schema/vendorData"
+import { getClassOptions } from "../service"
+
+/**
+ * 태그 데이터를 엑셀로 내보내는 함수 (유효성 검사 포함)
+ * - 별도의 ValidationData 시트에 Tag Class 옵션 데이터를 포함
+ * - Tag Class 열에 데이터 유효성 검사(드롭다운)을 적용
+ */
+export async function exportTagsToExcel(
+  table: Table<Tag>,
+  {
+    filename = "Tags",
+    excludeColumns = ["select", "actions", "createdAt", "updatedAt"],
+    maxRows = 5000, // 데이터 유효성 검사를 적용할 최대 행 수
+  }: {
+    filename?: string
+    excludeColumns?: string[]
+    maxRows?: number
+  } = {}
+) {
+  try {
+    // 1. 테이블에서 컬럼 정보 가져오기
+    const allTableColumns = table.getAllLeafColumns()
+    
+    // 제외할 컬럼 필터링
+    const tableColumns = allTableColumns.filter(
+      (col) => !excludeColumns.includes(col.id)
+    )
+    
+    // 2. 워크북 및 워크시트 생성
+    const workbook = new ExcelJS.Workbook()
+    const worksheet = workbook.addWorksheet("Tags")
+    
+    // 3. Tag Class 옵션 가져오기
+    const classOptions = await getClassOptions()
+    
+    // 4. 유효성 검사 시트 생성
+    const validationSheet = workbook.addWorksheet("ValidationData")
+    validationSheet.state = 'hidden' // 시트 숨김 처리
+    
+    // 4.1. Tag Class 유효성 검사 데이터 추가
+    validationSheet.getColumn(1).values = ["Tag Class", ...classOptions.map(opt => opt.label)]
+    
+    // 5. 메인 시트에 헤더 추가
+    const headers = tableColumns.map((col) => {
+      const meta = col.columnDef.meta as any
+      // meta에 excelHeader가 있으면 사용
+      if (meta?.excelHeader) {
+        return meta.excelHeader
+      }
+      // 없으면 컬럼 ID 사용
+      return col.id
+    })
+    
+    worksheet.addRow(headers)
+    
+    // 6. 헤더 스타일 적용
+    const headerRow = worksheet.getRow(1)
+    headerRow.font = { bold: true }
+    headerRow.alignment = { horizontal: 'center' }
+    headerRow.eachCell((cell) => {
+      cell.fill = {
+        type: 'pattern',
+        pattern: 'solid',
+        fgColor: { argb: 'FFCCCCCC' }
+      }
+    })
+    
+    // 7. 데이터 행 추가
+    const rowModel = table.getPrePaginationRowModel()
+    
+    rowModel.rows.forEach((row) => {
+      const rowData = tableColumns.map((col) => {
+        const value = row.getValue(col.id)
+        
+        // 날짜 형식 처리
+        if (value instanceof Date) {
+          return new Date(value).toISOString().split('T')[0]
+        }
+        
+        // value가 null/undefined면 빈 문자열, 객체면 JSON 문자열, 그 외에는 그대로 반환
+        if (value == null) return ""
+        return typeof value === "object" ? JSON.stringify(value) : value
+      })
+      
+      worksheet.addRow(rowData)
+    })
+    
+    // 8. Tag Class 열에 데이터 유효성 검사 적용
+    const classColIndex = headers.findIndex(header => header === "Tag Class")
+    
+    if (classColIndex !== -1) {
+      const colLetter = worksheet.getColumn(classColIndex + 1).letter
+      
+      // 데이터 유효성 검사 설정
+      const validation = {
+        type: 'list' as const,
+        allowBlank: true,
+        formulae: [`ValidationData!$A$2:$A$${classOptions.length + 1}`],
+        showErrorMessage: true,
+        errorStyle: 'warning' as const,
+        errorTitle: '유효하지 않은 클래스',
+        error: '목록에서 클래스를 선택해주세요.'
+      }
+      
+      // 모든 데이터 행 + 추가 행(최대 maxRows까지)에 유효성 검사 적용
+      for (let rowIdx = 2; rowIdx <= maxRows; rowIdx++) {
+        worksheet.getCell(`${colLetter}${rowIdx}`).dataValidation = validation
+      }
+    }
+    
+    // 9. 컬럼 너비 자동 조정
+    tableColumns.forEach((col, index) => {
+      const column = worksheet.getColumn(index + 1)
+      const headerLength = headers[index]?.length || 10
+      
+      // 데이터 기반 최대 길이 계산
+      let maxLength = headerLength
+      rowModel.rows.forEach((row) => {
+        const value = row.getValue(col.id)
+        if (value != null) {
+          const valueLength = String(value).length
+          if (valueLength > maxLength) {
+            maxLength = valueLength
+          }
+        }
+      })
+      
+      // 너비 설정 (최소 10, 최대 50)
+      column.width = Math.min(Math.max(maxLength + 2, 10), 50)
+    })
+    
+    // 10. 파일 다운로드
+    const buffer = await workbook.xlsx.writeBuffer()
+    saveAs(
+      new Blob([buffer], {
+        type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+      }),
+      `${filename}_${new Date().toISOString().split('T')[0]}.xlsx`
+    )
+    
+    return true
+  } catch (error) {
+    console.error("Excel export error:", error)
+    toast.error("Excel 내보내기 중 오류가 발생했습니다.")
+    return false
+  }
+}
\ No newline at end of file
diff --git a/lib/tags/table/tags-table-floating-bar.tsx b/lib/tags/table/tags-table-floating-bar.tsx
new file mode 100644
index 00000000..8d55b7ac
--- /dev/null
+++ b/lib/tags/table/tags-table-floating-bar.tsx
@@ -0,0 +1,220 @@
+"use client"
+
+import * as React from "react"
+import { SelectTrigger } from "@radix-ui/react-select"
+import { type Table } from "@tanstack/react-table"
+import {
+  ArrowUp,
+  CheckCircle2,
+  Download,
+  Loader,
+  Trash2,
+  X,
+} from "lucide-react"
+import { toast } from "sonner"
+
+import { exportTableToExcel } from "@/lib/export"
+import { Button } from "@/components/ui/button"
+import { Portal } from "@/components/ui/portal"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+} from "@/components/ui/select"
+import { Separator } from "@/components/ui/separator"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+import { Kbd } from "@/components/kbd"
+
+import { removeTags } from "@/lib//tags/service"
+import { ActionConfirmDialog } from "@/components/ui/action-dialog"
+import { Tag } from "@/db/schema/vendorData"
+
+interface TagsTableFloatingBarProps {
+  table: Table<Tag>
+  selectedPackageId: number
+
+}
+
+
+export function TagsTableFloatingBar({ table, selectedPackageId }: TagsTableFloatingBarProps) {
+  const rows = table.getFilteredSelectedRowModel().rows
+
+  const [isPending, startTransition] = React.useTransition()
+  const [action, setAction] = React.useState<
+    "update-status" | "update-priority" | "export" | "delete"
+  >()
+  const [popoverOpen, setPopoverOpen] = React.useState(false)
+
+  // Clear selection on Escape key press
+  React.useEffect(() => {
+    function handleKeyDown(event: KeyboardEvent) {
+      if (event.key === "Escape") {
+        table.toggleAllRowsSelected(false)
+      }
+    }
+
+    window.addEventListener("keydown", handleKeyDown)
+    return () => window.removeEventListener("keydown", handleKeyDown)
+  }, [table])
+
+
+
+  // 공용 confirm dialog state
+  const [confirmDialogOpen, setConfirmDialogOpen] = React.useState(false)
+  const [confirmProps, setConfirmProps] = React.useState<{
+    title: string
+    description?: string
+    onConfirm: () => Promise<void> | void
+  }>({
+    title: "",
+    description: "",
+    onConfirm: () => { },
+  })
+
+  // 1) "삭제" Confirm 열기
+  function handleDeleteConfirm() {
+    setAction("delete")
+    setConfirmProps({
+      title: `Delete ${rows.length} tag${rows.length > 1 ? "s" : ""}?`,
+      description: "This action cannot be undone.",
+      onConfirm: async () => {
+        startTransition(async () => {
+          const { error } = await removeTags({
+            ids: rows.map((row) => row.original.id),
+            selectedPackageId
+          })
+          if (error) {
+            toast.error(error)
+            return
+          }
+          toast.success("Tags deleted")
+          table.toggleAllRowsSelected(false)
+          setConfirmDialogOpen(false)
+        })
+      },
+    })
+    setConfirmDialogOpen(true)
+  }
+
+
+
+  return (
+    <Portal >
+      <div className="fixed inset-x-0 bottom-10 z-50 mx-auto w-fit px-2.5" style={{ bottom: '1.5rem' }}>
+        <div className="w-full overflow-x-auto">
+          <div className="mx-auto flex w-fit items-center gap-2 rounded-md border bg-background p-2 text-foreground shadow">
+            <div className="flex h-7 items-center rounded-md border border-dashed pl-2.5 pr-1">
+              <span className="whitespace-nowrap text-xs">
+                {rows.length} selected
+              </span>
+              <Separator orientation="vertical" className="ml-2 mr-1" />
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="size-5 hover:border"
+                    onClick={() => table.toggleAllRowsSelected(false)}
+                  >
+                    <X className="size-3.5 shrink-0" aria-hidden="true" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent className="flex items-center border bg-accent px-2 py-1 font-semibold text-foreground dark:bg-zinc-900">
+                  <p className="mr-2">Clear selection</p>
+                  <Kbd abbrTitle="Escape" variant="outline">
+                    Esc
+                  </Kbd>
+                </TooltipContent>
+              </Tooltip>
+            </div>
+            <Separator orientation="vertical" className="hidden h-5 sm:block" />
+            <div className="flex items-center gap-1.5">
+       
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="secondary"
+                    size="icon"
+                    className="size-7 border"
+                    onClick={() => {
+                      setAction("export")
+
+                      startTransition(() => {
+                        exportTableToExcel(table, {
+                          excludeColumns: ["select", "actions"],
+                          onlySelected: true,
+                        })
+                      })
+                    }}
+                    disabled={isPending}
+                  >
+                    {isPending && action === "export" ? (
+                      <Loader
+                        className="size-3.5 animate-spin"
+                        aria-hidden="true"
+                      />
+                    ) : (
+                      <Download className="size-3.5" aria-hidden="true" />
+                    )}
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent className="border bg-accent font-semibold text-foreground dark:bg-zinc-900">
+                  <p>Export tasks</p>
+                </TooltipContent>
+              </Tooltip>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="secondary"
+                    size="icon"
+                    className="size-7 border"
+                    onClick={handleDeleteConfirm}
+                    disabled={isPending}
+                  >
+                    {isPending && action === "delete" ? (
+                      <Loader
+                        className="size-3.5 animate-spin"
+                        aria-hidden="true"
+                      />
+                    ) : (
+                      <Trash2 className="size-3.5" aria-hidden="true" />
+                    )}
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent className="border bg-accent font-semibold text-foreground dark:bg-zinc-900">
+                  <p>Delete tasks</p>
+                </TooltipContent>
+              </Tooltip>
+            </div>
+          </div>
+        </div>
+      </div>
+
+
+      {/* 공용 Confirm Dialog */}
+      <ActionConfirmDialog
+        open={confirmDialogOpen}
+        onOpenChange={setConfirmDialogOpen}
+        title={confirmProps.title}
+        description={confirmProps.description}
+        onConfirm={confirmProps.onConfirm}
+        isLoading={isPending && (action === "delete" || action === "update-priority" || action === "update-status")}
+        confirmLabel={
+          action === "delete"
+            ? "Delete"
+            : action === "update-priority" || action === "update-status"
+            ? "Update"
+            : "Confirm"
+        }
+        confirmVariant={
+          action === "delete" ? "destructive" : "default"
+        }
+      />
+    </Portal>
+  )
+}
diff --git a/lib/tags/table/tags-table-toolbar-actions.tsx b/lib/tags/table/tags-table-toolbar-actions.tsx
new file mode 100644
index 00000000..8d53d3f3
--- /dev/null
+++ b/lib/tags/table/tags-table-toolbar-actions.tsx
@@ -0,0 +1,598 @@
+"use client"
+
+import * as React from "react"
+import { type Table } from "@tanstack/react-table"
+import { toast } from "sonner"
+import ExcelJS from "exceljs"
+import { saveAs } from "file-saver"
+
+import { Button } from "@/components/ui/button"
+import { Download, Upload, Loader2 } from "lucide-react"
+import { Tag, TagSubfields } from "@/db/schema/vendorData"
+import { exportTagsToExcel } from "./tags-export"
+import { AddTagDialog } from "./add-tag-dialog"
+import { fetchTagSubfieldOptions, getTagNumberingRules, } from "@/lib/tag-numbering/service"
+import { bulkCreateTags, getClassOptions, getSubfieldsByTagType } from "../service"
+import { DeleteTagsDialog } from "./delete-tags-dialog"
+
+// 태그 번호 검증을 위한 인터페이스
+interface TagNumberingRule {
+  attributesId: string;
+  attributesDescription: string;
+  expression: string | null;
+  delimiter: string | null;
+  sortOrder: number;
+}
+
+interface TagOption {
+  code: string;
+  label: string;
+}
+
+interface ClassOption {
+  code: string;
+  label: string;
+  tagTypeCode: string;
+  tagTypeDescription: string;
+}
+
+// 서브필드 정의
+interface SubFieldDef {
+  name: string;
+  label: string;
+  type: "select" | "text";
+  options?: { value: string; label: string }[];
+  expression?: string;
+  delimiter?: string;
+}
+
+interface TagsTableToolbarActionsProps {
+  /** react-table 객체 */
+  table: Table<Tag>
+  /** 현재 선택된 패키지 ID */
+  selectedPackageId: number
+  /** 현재 태그 목록(상태) */
+  tableData: Tag[]
+  /** 태그 목록을 갱신하는 setState */
+}
+
+/**
+ * TagsTableToolbarActions:
+ * - Import 버튼 -> Excel 파일 파싱 & 유효성 검사 (Class 기반 검증 추가)
+ * - 에러 발생 시: state는 그대로 두고, 오류가 적힌 엑셀만 재다운로드
+ * - 정상인 경우: tableData에 병합
+ * - Export 버튼 -> 유효성 검사가 포함된 Excel 내보내기
+ */
+export function TagsTableToolbarActions({
+  table,
+  selectedPackageId,
+  tableData,
+}: TagsTableToolbarActionsProps) {
+  const [isPending, setIsPending] = React.useState(false)
+  const [isExporting, setIsExporting] = React.useState(false)
+  const fileInputRef = React.useRef<HTMLInputElement>(null)
+
+  // 태그 타입별 넘버링 룰 캐시
+  const [tagNumberingRules, setTagNumberingRules] = React.useState<Record<string, TagNumberingRule[]>>({})
+  const [tagOptionsCache, setTagOptionsCache] = React.useState<Record<string, TagOption[]>>({})
+
+  // 클래스 옵션 및 서브필드 캐시
+  const [classOptions, setClassOptions] = React.useState<ClassOption[]>([])
+  const [subfieldCache, setSubfieldCache] = React.useState<Record<string, SubFieldDef[]>>({})
+
+  // 컴포넌트 마운트 시 클래스 옵션 로드
+  React.useEffect(() => {
+    const loadClassOptions = async () => {
+      try {
+        const options = await getClassOptions()
+        setClassOptions(options)
+      } catch (error) {
+        console.error("Failed to load class options:", error)
+      }
+    }
+
+    loadClassOptions()
+  }, [])
+
+  // 숨겨진 <input>을 클릭
+  function handleImportClick() {
+    fileInputRef.current?.click()
+  }
+
+  // 태그 넘버링 룰 가져오기
+  const fetchTagNumberingRules = React.useCallback(async (tagType: string): Promise<TagNumberingRule[]> => {
+    // 이미 캐시에 있으면 캐시된 값 사용
+    if (tagNumberingRules[tagType]) {
+      return tagNumberingRules[tagType]
+    }
+
+    try {
+      // 서버 액션 직접 호출
+      const rules = await getTagNumberingRules(tagType)
+
+      // 캐시에 저장
+      setTagNumberingRules(prev => ({
+        ...prev,
+        [tagType]: rules
+      }))
+
+      return rules
+    } catch (error) {
+      console.error(`Error fetching rules for ${tagType}:`, error)
+      return []
+    }
+  }, [tagNumberingRules])
+
+  // 특정 attributesId에 대한 옵션 가져오기
+  const fetchOptions = React.useCallback(async (attributesId: string): Promise<TagOption[]> => {
+    // 이미 캐시에 있으면 캐시된 값 사용
+    if (tagOptionsCache[attributesId]) {
+      return tagOptionsCache[attributesId]
+    }
+
+    try {
+      const options = await fetchTagSubfieldOptions(attributesId)
+
+      // 캐시에 저장
+      setTagOptionsCache(prev => ({
+        ...prev,
+        [attributesId]: options
+      }))
+
+      return options
+    } catch (error) {
+      console.error(`Error fetching options for ${attributesId}:`, error)
+      return []
+    }
+  }, [tagOptionsCache])
+
+  // 클래스 라벨로 태그 타입 코드 찾기
+  const getTagTypeCodeByClassLabel = React.useCallback((classLabel: string): string | null => {
+    const classOption = classOptions.find(opt => opt.label === classLabel)
+    return classOption?.tagTypeCode || null
+  }, [classOptions])
+
+  // 태그 타입에 따른 서브필드 가져오기
+  const fetchSubfieldsByTagType = React.useCallback(async (tagTypeCode: string): Promise<SubFieldDef[]> => {
+    // 이미 캐시에 있으면 캐시된 값 사용
+    if (subfieldCache[tagTypeCode]) {
+      return subfieldCache[tagTypeCode]
+    }
+
+    try {
+      const { subFields } = await getSubfieldsByTagType(tagTypeCode)
+
+      // API 응답을 SubFieldDef 형식으로 변환
+      const formattedSubFields: SubFieldDef[] = subFields.map(field => ({
+        name: field.name,
+        label: field.label,
+        type: field.type,
+        options: field.options || [],
+        expression: field.expression ?? undefined,
+        delimiter: field.delimiter ?? undefined,
+      }))
+
+      // 캐시에 저장
+      setSubfieldCache(prev => ({
+        ...prev,
+        [tagTypeCode]: formattedSubFields
+      }))
+
+      return formattedSubFields
+    } catch (error) {
+      console.error(`Error fetching subfields for tagType ${tagTypeCode}:`, error)
+      return []
+    }
+  }, [subfieldCache])
+
+  // Class 기반 태그 번호 형식 검증
+  const validateTagNumberByClass = React.useCallback(async (
+    tagNo: string,
+    classLabel: string
+  ): Promise<string> => {
+    if (!tagNo) return "Tag number is empty."
+    if (!classLabel) return "Class is empty."
+
+    try {
+      // 1. 클래스 라벨로 태그 타입 코드 찾기
+      const tagTypeCode = getTagTypeCodeByClassLabel(classLabel)
+      if (!tagTypeCode) {
+        return `No tag type found for class '${classLabel}'.`
+      }
+
+      // 2. 태그 타입 코드로 서브필드 가져오기
+      const subfields = await fetchSubfieldsByTagType(tagTypeCode)
+      if (!subfields || subfields.length === 0) {
+        return `No subfields found for tag type code '${tagTypeCode}'.`
+      }
+
+      // 3. 태그 번호를 파트별로 분석
+      let remainingTagNo = tagNo
+      let currentPosition = 0
+
+      for (const field of subfields) {
+        // 구분자 확인
+        const delimiter = field.delimiter || ""
+
+        // 다음 구분자 위치 또는 문자열 끝
+        let nextDelimiterPos
+        if (delimiter && remainingTagNo.includes(delimiter)) {
+          nextDelimiterPos = remainingTagNo.indexOf(delimiter)
+        } else {
+          nextDelimiterPos = remainingTagNo.length
+        }
+
+        // 현재 파트 추출
+        const part = remainingTagNo.substring(0, nextDelimiterPos)
+
+        // 비어있으면 오류
+        if (!part) {
+          return `Empty part for field '${field.label}'.`
+        }
+
+        // 정규식 검증
+        if (field.expression) {
+          const regex = new RegExp(`^${field.expression}$`)
+          if (!regex.test(part)) {
+            return `Part '${part}' for field '${field.label}' does not match the pattern '${field.expression}'.`
+          }
+        }
+
+        // 선택 옵션 검증
+        if (field.type === "select" && field.options && field.options.length > 0) {
+          const validValues = field.options.map(opt => opt.value)
+          if (!validValues.includes(part)) {
+            return `'${part}' is not a valid value for field '${field.label}'. Valid options: ${validValues.join(", ")}.`
+          }
+        }
+
+        // 남은 문자열 업데이트
+        if (delimiter && nextDelimiterPos < remainingTagNo.length) {
+          remainingTagNo = remainingTagNo.substring(nextDelimiterPos + delimiter.length)
+        } else {
+          remainingTagNo = ""
+          break
+        }
+      }
+
+      // 문자열이 남아있으면 오류
+      if (remainingTagNo) {
+        return `Tag number has extra parts: '${remainingTagNo}'.`
+      }
+
+      return "" // 오류 없음
+    } catch (error) {
+      console.error("Error validating tag number by class:", error)
+      return "Error validating tag number format."
+    }
+  }, [getTagTypeCodeByClassLabel, fetchSubfieldsByTagType])
+
+  // 기존 태그 번호 검증 함수 (기존 코드를 유지)
+  const validateTagNumber = React.useCallback(async (tagNo: string, tagType: string): Promise<string> => {
+    if (!tagNo) return "Tag number is empty."
+    if (!tagType) return "Tag type is empty."
+
+    try {
+      // 1. 태그 타입에 대한 넘버링 룰 가져오기
+      const rules = await fetchTagNumberingRules(tagType)
+      if (!rules || rules.length === 0) {
+        return `No numbering rules found for tag type '${tagType}'.`
+      }
+
+      // 2. 정렬된 룰 (sortOrder 기준)
+      const sortedRules = [...rules].sort((a, b) => a.sortOrder - b.sortOrder)
+
+      // 3. 태그 번호를 파트로 분리
+      let remainingTagNo = tagNo
+      let currentPosition = 0
+
+      for (const rule of sortedRules) {
+        // 마지막 룰이 아니고 구분자가 있으면
+        const delimiter = rule.delimiter || ""
+
+        // 다음 구분자 위치 찾기 또는 문자열 끝
+        let nextDelimiterPos
+        if (delimiter && remainingTagNo.includes(delimiter)) {
+          nextDelimiterPos = remainingTagNo.indexOf(delimiter)
+        } else {
+          nextDelimiterPos = remainingTagNo.length
+        }
+
+        // 현재 파트 추출
+        const part = remainingTagNo.substring(0, nextDelimiterPos)
+
+        // 표현식이 있으면 검증
+        if (rule.expression) {
+          const regex = new RegExp(`^${rule.expression}$`)
+          if (!regex.test(part)) {
+            return `Part '${part}' does not match the pattern '${rule.expression}' for ${rule.attributesDescription}.`
+          }
+        }
+
+        // 옵션이 있는 경우 유효한 코드인지 확인
+        const options = await fetchOptions(rule.attributesId)
+        if (options.length > 0) {
+          const isValidCode = options.some(opt => opt.code === part)
+          if (!isValidCode) {
+            return `'${part}' is not a valid code for ${rule.attributesDescription}. Valid options: ${options.map(o => o.code).join(', ')}.`
+          }
+        }
+
+        // 남은 문자열 업데이트
+        if (delimiter && nextDelimiterPos < remainingTagNo.length) {
+          remainingTagNo = remainingTagNo.substring(nextDelimiterPos + delimiter.length)
+        } else {
+          remainingTagNo = ""
+          break
+        }
+
+        // 모든 룰을 처리했는데 문자열이 남아있으면 오류
+        if (remainingTagNo && rule === sortedRules[sortedRules.length - 1]) {
+          return `Tag number has extra parts: '${remainingTagNo}'.`
+        }
+      }
+
+      // 문자열이 남아있으면 오류
+      if (remainingTagNo) {
+        return `Tag number has unprocessed parts: '${remainingTagNo}'.`
+      }
+
+      return "" // 오류 없음
+    } catch (error) {
+      console.error("Error validating tag number:", error)
+      return "Error validating tag number."
+    }
+  }, [fetchTagNumberingRules, fetchOptions])
+
+  /**
+   * 개선된 handleFileChange 함수
+   * 1) ExcelJS로 파일 파싱
+   * 2) 헤더 -> meta.excelHeader 매핑
+   * 3) 각 행 유효성 검사 (Class 기반 검증 추가)
+   * 4) 에러 행 있으면 → 오류 메시지 기록 + 재다운로드 (상태 변경 안 함)
+   * 5) 정상 행만 importedRows 로 → 병합
+   */
+  async function handleFileChange(e: React.ChangeEvent<HTMLInputElement>) {
+    const file = e.target.files?.[0]
+    if (!file) return
+
+    // 파일 input 초기화
+    e.target.value = ""
+    setIsPending(true)
+
+    try {
+      // 1) Workbook 로드
+      const workbook = new ExcelJS.Workbook()
+      const arrayBuffer = await file.arrayBuffer()
+      await workbook.xlsx.load(arrayBuffer)
+
+      // 첫 번째 시트 사용
+      const worksheet = workbook.worksheets[0]
+
+      // (A) 마지막 열에 "Error" 헤더
+      const lastColIndex = worksheet.columnCount + 1
+      worksheet.getRow(1).getCell(lastColIndex).value = "Error"
+
+      // (B) 엑셀 헤더 (Row1)
+      const headerRowValues = worksheet.getRow(1).values as ExcelJS.CellValue[]
+
+      // (C) excelHeader -> accessor 매핑
+      const excelHeaderToAccessor: Record<string, string> = {}
+      for (const col of table.getAllColumns()) {
+        const meta = col.columnDef.meta as { excelHeader?: string } | undefined
+        if (meta?.excelHeader) {
+          const accessor = col.id as string
+          excelHeaderToAccessor[meta.excelHeader] = accessor
+        }
+      }
+
+      // (D) accessor -> column index
+      const accessorIndexMap: Record<string, number> = {}
+      for (let i = 1; i < headerRowValues.length; i++) {
+        const cellVal = String(headerRowValues[i] ?? "").trim()
+        if (!cellVal) continue
+        const accessor = excelHeaderToAccessor[cellVal]
+        if (accessor) {
+          accessorIndexMap[accessor] = i
+        }
+      }
+
+      let errorCount = 0
+      const importedRows: Tag[] = []
+      const fileTagNos = new Set<string>() // 파일 내 태그번호 중복 체크용
+      const lastRow = worksheet.lastRow?.number || 1
+
+      // 2) 각 데이터 행 파싱
+      for (let rowNum = 2; rowNum <= lastRow; rowNum++) {
+        const row = worksheet.getRow(rowNum)
+        const rowVals = row.values as ExcelJS.CellValue[]
+        if (!rowVals || rowVals.length <= 1) continue // 빈 행 스킵
+
+        let errorMsg = ""
+
+        // 필요한 accessorIndex
+        const tagNoIndex = accessorIndexMap["tagNo"]
+        const classIndex = accessorIndexMap["class"]
+
+        // 엑셀에서 값 읽기
+        const tagNo = tagNoIndex ? String(rowVals[tagNoIndex] ?? "").trim() : ""
+        const classVal = classIndex ? String(rowVals[classIndex] ?? "").trim() : ""
+
+        // A. 필수값 검사
+        if (!tagNo) {
+          errorMsg += `Tag No is empty. `
+        }
+        if (!classVal) {
+          errorMsg += `Class is empty. `
+        }
+
+        // B. 중복 검사
+        if (tagNo) {
+          // 이미 tableData 내 존재 여부
+          const dup = tableData.find(
+            (t) => t.contractItemId === selectedPackageId && t.tagNo === tagNo
+          )
+          if (dup) {
+            errorMsg += `TagNo '${tagNo}' already exists. `
+          }
+
+          // 이번 엑셀 파일 내 중복
+          if (fileTagNos.has(tagNo)) {
+            errorMsg += `TagNo '${tagNo}' is duplicated within this file. `
+          } else {
+            fileTagNos.add(tagNo)
+          }
+        }
+
+        // C. Class 기반 형식 검증
+        if (tagNo && classVal && !errorMsg) {
+          // classVal 로부터 태그타입 코드 획득
+          const tagTypeCode = getTagTypeCodeByClassLabel(classVal)
+
+          if (!tagTypeCode) {
+            errorMsg += `No tag type code found for class '${classVal}'. `
+          } else {
+            // validateTagNumberByClass( ) 안에서
+            // → tagTypeCode로 서브필드 조회, 정규식 검증 등 처리
+            const classValidationError = await validateTagNumberByClass(tagNo, classVal)
+            if (classValidationError) {
+              errorMsg += classValidationError + " "
+            }
+          }
+        }
+
+        // D. 에러 처리
+        if (errorMsg) {
+          row.getCell(lastColIndex).value = errorMsg.trim()
+          errorCount++
+        } else {
+          // 최종 태그 타입 결정 (DB에 저장할 때 'tagType' 컬럼을 무엇으로 쓸지 결정)
+          // 예: DB에서 tagType을 "CV" 같은 코드로 저장하려면
+          //  const finalTagType = getTagTypeCodeByClassLabel(classVal) ?? ""
+          // 혹은 "Control Valve" 같은 description을 쓰려면 classOptions에서 찾아볼 수도 있음
+          const finalTagType = getTagTypeCodeByClassLabel(classVal) ?? ""
+
+          // 정상 행을 importedRows에 추가
+          importedRows.push({
+            id: 0, // 임시
+            contractItemId: selectedPackageId,
+            formId: null,
+            tagNo,
+            tagType: finalTagType,     // ← 코드로 저장할지, Description으로 저장할지 결정
+            class: classVal,
+            description: String(rowVals[accessorIndexMap["description"] ?? 0] ?? "").trim(),
+            createdAt: new Date(),
+            updatedAt: new Date(),
+          })
+        }
+      }
+
+      // (E) 오류 행이 있으면 → 수정된 엑셀 재다운로드 & 종료
+      if (errorCount > 0) {
+        const outBuf = await workbook.xlsx.writeBuffer()
+        const errorFile = new Blob([outBuf])
+        const url = URL.createObjectURL(errorFile)
+        const link = document.createElement("a")
+        link.href = url
+        link.download = "tag_import_errors.xlsx"
+        link.click()
+        URL.revokeObjectURL(url)
+
+        toast.error(`There are ${errorCount} error row(s). Please see downloaded file.`)
+        return
+      }
+
+      // 정상 행이 있으면 태그 생성 요청
+      if (importedRows.length > 0) {
+        const result = await bulkCreateTags(importedRows, selectedPackageId);
+        if ("error" in result) {
+          toast.error(result.error);
+        } else {
+          toast.success(`${result.data.createdCount}개의 태그가 성공적으로 생성되었습니다.`);
+        }
+      }
+
+      toast.success(`Imported ${importedRows.length} tags successfully!`)
+
+    } catch (err) {
+      console.error(err)
+      toast.error("파일 업로드 중 오류가 발생했습니다.")
+    } finally {
+      setIsPending(false)
+    }
+  }
+  // 새 Export 함수 - 유효성 검사 시트를 포함한 엑셀 내보내기
+  async function handleExport() {
+    try {
+      setIsExporting(true)
+
+      // 유효성 검사가 포함된 새로운 엑셀 내보내기 함수 호출
+      await exportTagsToExcel(table, {
+        filename: `Tags_${selectedPackageId}`,
+        excludeColumns: ["select", "actions", "createdAt", "updatedAt"],
+      })
+
+      toast.success("태그 목록이 성공적으로 내보내졌습니다.")
+    } catch (error) {
+      console.error("Export error:", error)
+      toast.error("태그 목록 내보내기 중 오류가 발생했습니다.")
+    } finally {
+      setIsExporting(false)
+    }
+  }
+
+  return (
+    <div className="flex items-center gap-2">
+
+      {table.getFilteredSelectedRowModel().rows.length > 0 ? (
+        <DeleteTagsDialog
+          tags={table
+            .getFilteredSelectedRowModel()
+            .rows.map((row) => row.original)}
+          onSuccess={() => table.toggleAllRowsSelected(false)}
+          selectedPackageId={selectedPackageId} 
+        />
+      ) : null}
+
+
+      <AddTagDialog selectedPackageId={selectedPackageId} />
+
+      {/* Import */}
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={handleImportClick}
+        disabled={isPending || isExporting}
+      >
+        {isPending ? (
+          <Loader2 className="size-4 mr-2 animate-spin" aria-hidden="true" />
+        ) : (
+          <Upload className="size-4 mr-2" aria-hidden="true" />
+        )}
+        <span className="hidden sm:inline">Import</span>
+      </Button>
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept=".xlsx,.xls"
+        className="hidden"
+        onChange={handleFileChange}
+      />
+
+      {/* Export */}
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={handleExport}
+        disabled={isPending || isExporting}
+      >
+        {isExporting ? (
+          <Loader2 className="size-4 mr-2 animate-spin" aria-hidden="true" />
+        ) : (
+          <Download className="size-4 mr-2" aria-hidden="true" />
+        )}
+        <span className="hidden sm:inline">Export</span>
+      </Button>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/lib/tags/table/update-tag-sheet.tsx b/lib/tags/table/update-tag-sheet.tsx
new file mode 100644
index 00000000..27a1bdcb
--- /dev/null
+++ b/lib/tags/table/update-tag-sheet.tsx
@@ -0,0 +1,548 @@
+"use client"
+
+import * as React from "react"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Loader2, Check, ChevronsUpDown } from "lucide-react"
+import { useForm } from "react-hook-form"
+import { toast } from "sonner"
+import { z } from "zod"
+
+import { Button } from "@/components/ui/button"
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form"
+import { Input } from "@/components/ui/input"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command"
+import { Badge } from "@/components/ui/badge"
+import { cn } from "@/lib/utils"
+
+import { Tag } from "@/db/schema/vendorData"
+import { updateTag, getSubfieldsByTagType, getClassOptions, TagTypeOption } from "@/lib/tags/service"
+
+// SubFieldDef 인터페이스
+interface SubFieldDef {
+  name: string
+  label: string
+  type: "select" | "text"
+  options?: { value: string; label: string }[]
+  expression?: string
+  delimiter?: string
+}
+
+// 클래스 옵션 인터페이스
+interface UpdatedClassOption {
+  code: string
+  label: string
+  tagTypeCode: string
+  tagTypeDescription?: string
+}
+
+// UpdateTagSchema 정의
+const updateTagSchema = z.object({
+  class: z.string().min(1, "Class is required"),
+  tagType: z.string().min(1, "Tag Type is required"),
+  tagNo: z.string().min(1, "Tag Number is required"),
+  description: z.string().optional(),
+  // 추가 필드들은 동적으로 처리됨
+})
+
+// TypeScript 타입 정의
+type UpdateTagSchema = z.infer<typeof updateTagSchema> & Record<string, string>
+
+interface UpdateTagSheetProps extends React.ComponentPropsWithRef<typeof Sheet> {
+  tag: Tag | null
+  selectedPackageId: number
+}
+
+export function UpdateTagSheet({ tag, selectedPackageId, ...props }: UpdateTagSheetProps) {
+  const [isUpdatePending, startUpdateTransition] = React.useTransition()
+  const [tagTypeList, setTagTypeList] = React.useState<TagTypeOption[]>([])
+  const [selectedTagTypeCode, setSelectedTagTypeCode] = React.useState<string | null>(null)
+  const [subFields, setSubFields] = React.useState<SubFieldDef[]>([])
+  const [classOptions, setClassOptions] = React.useState<UpdatedClassOption[]>([])
+  const [classSearchTerm, setClassSearchTerm] = React.useState("")
+  const [isLoadingClasses, setIsLoadingClasses] = React.useState(false)
+  const [isLoadingSubFields, setIsLoadingSubFields] = React.useState(false)
+
+  // ID management for popover elements
+  const selectIdRef = React.useRef(0)
+  const fieldIdsRef = React.useRef<Record<string, string>>({})
+  const classOptionIdsRef = React.useRef<Record<string, string>>({})
+
+  console.log(tag)
+
+  // Load class options when sheet opens
+  React.useEffect(() => {
+    const loadClassOptions = async () => {
+      if (!props.open || !tag) return
+
+      setIsLoadingClasses(true)
+      try {
+        const result = await getClassOptions()
+        setClassOptions(result)
+      } catch (err) {
+        toast.error("클래스 옵션을 불러오는데 실패했습니다.")
+      } finally {
+        setIsLoadingClasses(false)
+      }
+    }
+
+    loadClassOptions()
+  }, [props.open, tag])
+
+  // Form setup
+  const form = useForm<UpdateTagSchema>({
+    resolver: zodResolver(updateTagSchema),
+    defaultValues: {
+      class: "",
+      tagType: "",
+      tagNo: "",
+      description: "",
+    },
+  })
+
+  // Load tag data into form when tag changes
+  React.useEffect(() => {
+    if (!tag) return
+
+    // 필요한 필드만 선택적으로 추출
+    const formValues = {
+      tagNo: tag.tagNo,
+      tagType: tag.tagType,
+      class: tag.class,
+      description: tag.description || ""
+      // 참고: 실제 태그 데이터에는 서브필드(functionCode, seqNumber 등)가 없음
+    };
+
+    // 폼 초기화
+    form.reset(formValues)
+
+    // 태그 타입 코드 설정 (추가 필드 로딩을 위해)
+    if (tag.tagType) {
+      // 해당 태그 타입에 맞는 클래스 옵션을 찾아서 태그 타입 코드 설정
+      const foundClass = classOptions.find(opt => opt.label === tag.class)
+      if (foundClass?.tagTypeCode) {
+        setSelectedTagTypeCode(foundClass.tagTypeCode)
+        loadSubFieldsByTagTypeCode(foundClass.tagTypeCode)
+      }
+    }
+  }, [tag, classOptions, form])
+
+  // Load subfields by tag type code
+  async function loadSubFieldsByTagTypeCode(tagTypeCode: string) {
+    setIsLoadingSubFields(true)
+    try {
+      const { subFields: apiSubFields } = await getSubfieldsByTagType(tagTypeCode)
+      const formattedSubFields: SubFieldDef[] = apiSubFields.map(field => ({
+        name: field.name,
+        label: field.label,
+        type: field.type,
+        options: field.options || [],
+        expression: field.expression ?? undefined,
+        delimiter: field.delimiter ?? undefined,
+      }))
+      setSubFields(formattedSubFields)
+      return true
+    } catch (err) {
+      toast.error("서브필드를 불러오는데 실패했습니다.")
+      setSubFields([])
+      return false
+    } finally {
+      setIsLoadingSubFields(false)
+    }
+  }
+
+  // Handle class selection
+  async function handleSelectClass(classOption: UpdatedClassOption) {
+    form.setValue("class", classOption.label, { shouldValidate: true })
+
+    if (classOption.tagTypeCode) {
+      setSelectedTagTypeCode(classOption.tagTypeCode)
+
+      // Set tag type
+      const tagType = tagTypeList.find(t => t.id === classOption.tagTypeCode)
+      if (tagType) {
+        form.setValue("tagType", tagType.label, { shouldValidate: true })
+      } else if (classOption.tagTypeDescription) {
+        form.setValue("tagType", classOption.tagTypeDescription, { shouldValidate: true })
+      }
+
+      await loadSubFieldsByTagTypeCode(classOption.tagTypeCode)
+    }
+  }
+
+  // Form submission handler
+  function onSubmit(data: UpdateTagSchema) {
+    startUpdateTransition(async () => {
+      if (!tag) return
+
+      try {
+        // 기본 필드와 서브필드 데이터 결합
+        const tagData = {
+          id: tag.id,
+          tagType: data.tagType,
+          class: data.class,
+          tagNo: data.tagNo,
+          description: data.description,
+          ...Object.fromEntries(
+            subFields.map(field => [field.name, data[field.name] || ""])
+          ),
+        }
+
+        const result = await updateTag(tagData, selectedPackageId)
+
+        if ("error" in result) {
+          toast.error(result.error)
+          return
+        }
+
+        form.reset()
+        props.onOpenChange?.(false)
+        toast.success("태그가 성공적으로 업데이트되었습니다")
+      } catch (error) {
+        console.error("Error updating tag:", error)
+        toast.error("태그 업데이트 중 오류가 발생했습니다")
+      }
+    })
+  }
+
+  // Render class field
+  function renderClassField(field: any) {
+    const [popoverOpen, setPopoverOpen] = React.useState(false)
+
+    const buttonId = React.useMemo(
+      () => `class-button-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`,
+      []
+    )
+    const popoverContentId = React.useMemo(
+      () => `class-popover-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`,
+      []
+    )
+    const commandId = React.useMemo(
+      () => `class-command-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`,
+      []
+    )
+
+    return (
+      <FormItem>
+        <FormLabel>Class</FormLabel>
+        <FormControl>
+          <Popover open={popoverOpen} onOpenChange={setPopoverOpen}>
+            <PopoverTrigger asChild>
+              <Button
+                key={buttonId}
+                type="button"
+                variant="outline"
+                className="w-full justify-between relative h-9"
+                disabled={isLoadingClasses}
+              >
+                {isLoadingClasses ? (
+                  <>
+                    <span>클래스 로딩 중...</span>
+                    <Loader2 className="ml-2 h-4 w-4 animate-spin" />
+                  </>
+                ) : (
+                  <>
+                    <span className="truncate mr-1 flex-grow text-left">
+                      {field.value || "클래스 선택..."}
+                    </span>
+                    <ChevronsUpDown className="h-4 w-4 opacity-50 flex-shrink-0" />
+                  </>
+                )}
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent key={popoverContentId} className="w-[300px] p-0">
+              <Command key={commandId}>
+                <CommandInput
+                  key={`${commandId}-input`}
+                  placeholder="클래스 검색..."
+                  value={classSearchTerm}
+                  onValueChange={setClassSearchTerm}
+                />
+                <CommandList key={`${commandId}-list`} className="max-h-[300px]">
+                  <CommandEmpty key={`${commandId}-empty`}>검색 결과가 없습니다.</CommandEmpty>
+                  <CommandGroup key={`${commandId}-group`}>
+                    {classOptions.map((opt, optIndex) => {
+                      if (!classOptionIdsRef.current[opt.code]) {
+                        classOptionIdsRef.current[opt.code] =
+                          `class-${opt.code}-${Date.now()}-${Math.random()
+                            .toString(36)
+                            .slice(2, 9)}`
+                      }
+                      const optionId = classOptionIdsRef.current[opt.code]
+
+                      return (
+                        <CommandItem
+                          key={`${optionId}-${optIndex}`}
+                          onSelect={() => {
+                            field.onChange(opt.label)
+                            setPopoverOpen(false)
+                            handleSelectClass(opt)
+                          }}
+                          value={opt.label}
+                          className="truncate"
+                          title={opt.label}
+                        >
+                          <span className="truncate">{opt.label}</span>
+                          <Check
+                            key={`${optionId}-check`}
+                            className={cn(
+                              "ml-auto h-4 w-4 flex-shrink-0",
+                              field.value === opt.label ? "opacity-100" : "opacity-0"
+                            )}
+                          />
+                        </CommandItem>
+                      )
+                    })}
+                  </CommandGroup>
+                </CommandList>
+              </Command>
+            </PopoverContent>
+          </Popover>
+        </FormControl>
+        <FormMessage />
+      </FormItem>
+    )
+  }
+
+  // Render TagType field (readonly)
+  function renderTagTypeField(field: any) {
+    return (
+      <FormItem>
+        <FormLabel>Tag Type</FormLabel>
+        <FormControl>
+          <div className="relative">
+            <Input
+              {...field}
+              readOnly
+              className="h-9 bg-muted"
+            />
+          </div>
+        </FormControl>
+        <FormMessage />
+      </FormItem>
+    )
+  }
+
+  // Render Tag Number field (readonly)
+  function renderTagNoField(field: any) {
+    return (
+      <FormItem>
+        <FormLabel>Tag Number</FormLabel>
+        <FormControl>
+          <div className="relative">
+            <Input
+              {...field}
+              readOnly
+              className="h-9 bg-muted font-mono"
+            />
+          </div>
+        </FormControl>
+        <FormMessage />
+      </FormItem>
+    )
+  }
+
+  // Render form fields for each subfield
+  function renderSubFields() {
+    if (isLoadingSubFields) {
+      return (
+        <div className="flex justify-center items-center py-4">
+          <Loader2 className="h-6 w-6 animate-spin text-primary" />
+          <div className="ml-3 text-muted-foreground">필드 로딩 중...</div>
+        </div>
+      )
+    }
+
+    if (subFields.length === 0) {
+      return null
+    }
+
+    return (
+      <div className="space-y-4">
+        <div className="text-sm font-medium text-muted-foreground">추가 필드</div>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          {subFields.map((sf, index) => (
+            <FormField
+              key={`subfield-${sf.name}-${index}`}
+              control={form.control}
+              name={sf.name}
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>{sf.label}</FormLabel>
+                  <FormControl>
+                    {sf.type === "select" ? (
+                      <Select
+                        value={field.value || ""}
+                        onValueChange={field.onChange}
+                      >
+                        <SelectTrigger className="w-full h-9">
+                          <SelectValue placeholder={`${sf.label} 선택...`} />
+                        </SelectTrigger>
+                        <SelectContent
+                          align="start"
+                          side="bottom"
+                          className="max-h-[250px]"
+                          style={{ minWidth: "250px", maxWidth: "350px" }}
+                        >
+                          {sf.options?.map((opt, optIndex) => (
+                            <SelectItem
+                              key={`${sf.name}-${opt.value}-${optIndex}`}
+                              value={opt.value}
+                              title={opt.label}
+                              className="whitespace-normal py-2 break-words"
+                            >
+                              {opt.label}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    ) : (
+                      <Input
+                        {...field}
+                        className="h-9"
+                        placeholder={`${sf.label} 입력...`}
+                      />
+                    )}
+                  </FormControl>
+                  {sf.expression && (
+                    <p className="text-xs text-muted-foreground mt-1" title={sf.expression}>
+                      {sf.expression}
+                    </p>
+                  )}
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          ))}
+        </div>
+      </div>
+    )
+  }
+
+  // 컴포넌트 렌더링
+  return (
+    <Sheet {...props}>
+      {/* <SheetContent className="flex flex-col gap-0 sm:max-w-md overflow-y-auto"> */}
+      <SheetContent className="flex flex-col gap-6 sm:max-w-lg overflow-y-auto">
+        <SheetHeader className="text-left">
+          <SheetTitle>태그 수정</SheetTitle>
+          <SheetDescription>
+            태그 정보를 업데이트하고 변경 사항을 저장하세요
+          </SheetDescription>
+        </SheetHeader>
+
+        <div className="flex-1 overflow-y-auto py-4">
+          <Form {...form}>
+            <form
+              id="update-tag-form"
+              onSubmit={form.handleSubmit(onSubmit)}
+              className="space-y-6"
+            >
+              {/* 기본 태그 정보 */}
+              <div className="space-y-4">
+                {/* Class */}
+                <FormField
+                  control={form.control}
+                  name="class"
+                  render={({ field }) => renderClassField(field)}
+                />
+
+                {/* Tag Type */}
+                <FormField
+                  control={form.control}
+                  name="tagType"
+                  render={({ field }) => renderTagTypeField(field)}
+                />
+
+                {/* Tag Number */}
+                <FormField
+                  control={form.control}
+                  name="tagNo"
+                  render={({ field }) => renderTagNoField(field)}
+                />
+
+                {/* Description */}
+                <FormField
+                  control={form.control}
+                  name="description"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Description</FormLabel>
+                      <FormControl>
+                        <Input
+                          {...field}
+                          placeholder="태그 설명 입력..."
+                          className="h-9"
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </div>
+
+              {/* 서브필드 */}
+              {renderSubFields()}
+            </form>
+          </Form>
+        </div>
+
+        <SheetFooter className="pt-2">
+          <SheetClose asChild>
+            <Button type="button" variant="outline">
+              취소
+            </Button>
+          </SheetClose>
+          <Button
+            type="submit"
+            form="update-tag-form"
+            disabled={isUpdatePending || isLoadingSubFields}
+          >
+            {isUpdatePending ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" aria-hidden="true" />
+                저장 중...
+              </>
+            ) : (
+              "저장"
+            )}
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  )
+}
\ No newline at end of file
diff --git a/lib/tags/validations.ts b/lib/tags/validations.ts
new file mode 100644
index 00000000..65e64f04
--- /dev/null
+++ b/lib/tags/validations.ts
@@ -0,0 +1,68 @@
+// /lib/tags/validations.ts
+import { z } from "zod"
+import {
+  createSearchParamsCache,
+  parseAsArrayOf,
+  parseAsInteger,
+  parseAsString,
+  parseAsStringEnum,
+} from "nuqs/server"
+import { getFiltersStateParser, getSortingStateParser } from "@/lib/parsers"
+import { Tag } from "@/db/schema/vendorData"
+
+export const createTagSchema = z.object({
+  tagNo: z.string().min(1, "Tag No is required"),
+  tagType: z.string().min(1, "Tag Type is required"),
+  class: z.string().min(1, "Equipment Class is required"),
+  description: z.string().min(1, "Description is required"), // 필수 필드로 변경
+
+    // optional sub-fields for dynamic numbering
+    functionCode: z.string().optional(),
+    seqNumber: z.string().optional(),
+    valveAcronym: z.string().optional(),
+    processUnit: z.string().optional(),
+
+  // If you also want contractItemId:
+  // contractItemId: z.number(),
+})
+
+export const updateTagSchema = z.object({
+  id: z.number().optional(), // 업데이트 과정에서 별도 검증
+  tagNo: z.string().min(1, "Tag Number is required"),
+  class: z.string().min(1, "Class is required"),
+  tagType: z.string().min(1, "Tag Type is required"),
+  description: z.string().optional(),
+  // 추가 필드들은 동적으로 추가될 수 있음
+  functionCode: z.string().optional(),
+  seqNumber: z.string().optional(), 
+  valveAcronym: z.string().optional(),
+  processUnit: z.string().optional(),
+  // 기타 필드들은 필요에 따라 추가
+})
+
+export type UpdateTagSchema = z.infer<typeof updateTagSchema>
+
+
+export const searchParamsCache = createSearchParamsCache({
+  flags: parseAsArrayOf(z.enum(["advancedTable", "floatingBar"])).withDefault(
+    []
+  ),
+  page: parseAsInteger.withDefault(1),
+  perPage: parseAsInteger.withDefault(10),
+  sort: getSortingStateParser<Tag>().withDefault([
+    { id: "createdAt", desc: true },
+  ]),
+  tagNo: parseAsString.withDefault(""),
+  tagType: parseAsString.withDefault(""),
+  description: parseAsString.withDefault(""),
+ 
+  // advanced filter
+  filters: getFiltersStateParser().withDefault([]),
+  joinOperator: parseAsStringEnum(["and", "or"]).withDefault("and"),
+  search: parseAsString.withDefault(""),
+
+})
+
+export type CreateTagSchema = z.infer<typeof createTagSchema>
+export type GetTagsSchema = Awaited<ReturnType<typeof searchParamsCache.parse>>
+
diff --git a/lib/tasks/repository.ts b/lib/tasks/repository.ts
new file mode 100644
index 00000000..2e71ee20
--- /dev/null
+++ b/lib/tasks/repository.ts
@@ -0,0 +1,166 @@
+// src/lib/tasks/repository.ts
+import db  from "@/db/db";
+import { tasks, type Task } from "@/db/schema/tasks";
+import {
+  eq,
+  inArray,
+  not,
+  asc,
+  desc,
+  and,
+  ilike,
+  gte,
+  lte,
+  count,
+  gt,
+} from "drizzle-orm";
+import { PgTransaction } from "drizzle-orm/pg-core";
+export type NewTask = typeof tasks.$inferInsert
+
+/**
+ * 단건/복수 조회 시 공통으로 사용 가능한 SELECT 함수 예시
+ *  - 트랜잭션(tx)을 받아서 사용하도록 구현
+ */
+export async function selectTasks(
+    tx: PgTransaction<any, any, any>,
+    params: {
+      where?: any; // drizzle-orm의 조건식 (and, eq...) 등
+      orderBy?: (ReturnType<typeof asc> | ReturnType<typeof desc>)[];
+      offset?: number;
+      limit?: number;
+    }
+  ) {
+    const { where, orderBy, offset = 0, limit = 10 } = params;
+  
+    return tx
+      .select()
+      .from(tasks)
+      .where(where)
+      .orderBy(...(orderBy ?? []))
+      .offset(offset)
+      .limit(limit);
+  }
+/** 총 개수 count */
+export async function countTasks(
+  tx: PgTransaction<any, any, any>,
+  where?: any
+) {
+  const res = await tx.select({ count: count() }).from(tasks).where(where);
+  return res[0]?.count ?? 0;
+}
+
+/** 단건 Insert 예시 */
+export async function insertTask(
+  tx: PgTransaction<any, any, any>,
+  data: NewTask // DB와 동일한 insert 가능한 타입
+) {
+  // returning() 사용 시 배열로 돌아오므로 [0]만 리턴
+  return tx
+    .insert(tasks)
+    .values(data)
+    .returning({ id: tasks.id, createdAt: tasks.createdAt });
+}
+
+/** 복수 Insert 예시 */
+export async function insertTasks(
+  tx: PgTransaction<any, any, any>,
+  data: Task[]
+) {
+  return tx.insert(tasks).values(data).onConflictDoNothing();
+}
+
+/** (방금 생성된 Task를 제외한) 가장 오래된 Task 하나 조회 */
+export async function selectOldestTaskExcept(
+    tx: PgTransaction<any, any, any>,
+  excludeId: string
+) {
+  return tx
+    .select({ id: tasks.id, createdAt: tasks.createdAt })
+    .from(tasks)
+    .where(not(eq(tasks.id, excludeId)))
+    .orderBy(asc(tasks.createdAt))
+    .limit(1);
+}
+
+/** 단건 삭제 */
+export async function deleteTaskById(
+    tx: PgTransaction<any, any, any>,
+  taskId: string
+) {
+  return tx.delete(tasks).where(eq(tasks.id, taskId));
+}
+
+/** 복수 삭제 */
+export async function deleteTasksByIds(
+    tx: PgTransaction<any, any, any>,
+  ids: string[]
+) {
+  return tx.delete(tasks).where(inArray(tasks.id, ids));
+}
+
+/** 전체 삭제 */
+export async function deleteAllTasks(
+    tx: PgTransaction<any, any, any>,
+) {
+  return tx.delete(tasks);
+}
+
+/** 단건 업데이트 */
+export async function updateTask(
+    tx: PgTransaction<any, any, any>,
+  taskId: string,
+  data: Partial<Task>
+) {
+  return tx
+    .update(tasks)
+    .set(data)
+    .where(eq(tasks.id, taskId))
+    .returning({ status: tasks.status, priority: tasks.priority });
+}
+
+/** 복수 업데이트 */
+export async function updateTasks(
+    tx: PgTransaction<any, any, any>,
+  ids: string[],
+  data: Partial<Task>
+) {
+  return tx
+    .update(tasks)
+    .set(data)
+    .where(inArray(tasks.id, ids))
+    .returning({ status: tasks.status, priority: tasks.priority });
+}
+
+/** status 기준 groupBy */
+export async function groupByStatus(
+    tx: PgTransaction<any, any, any>,
+) {
+  return tx
+    .select({
+      status: tasks.status,
+      count: count(),
+    })
+    .from(tasks)
+    .groupBy(tasks.status)
+    .having(gt(count(), 0));
+}
+
+/** priority 기준 groupBy */
+export async function groupByPriority(
+    tx: PgTransaction<any, any, any>,
+) {
+  return tx
+    .select({
+      priority: tasks.priority,
+      count: count(),
+    })
+    .from(tasks)
+    .groupBy(tasks.priority)
+    .having(gt(count(), 0));
+}
+
+// 모든 task 조회
+export const getAllTasks = async (): Promise<Task[]> => {
+  const users = await db.select().from(tasks).execute();
+  return users
+};
diff --git a/lib/tasks/service.ts b/lib/tasks/service.ts
new file mode 100644
index 00000000..c31ecd4b
--- /dev/null
+++ b/lib/tasks/service.ts
@@ -0,0 +1,561 @@
+// src/lib/tasks/service.ts
+"use server"; // Next.js 서버 액션에서 직접 import하려면 (선택)
+
+import { revalidateTag, unstable_noStore } from "next/cache";
+import  db  from "@/db/db";
+import { tasks, type Task } from "@/db/schema/tasks";
+import { customAlphabet } from "nanoid";
+
+import { filterColumns } from "@/lib/filter-columns";
+import { unstable_cache } from "@/lib/unstable-cache";
+import { getErrorMessage } from "@/lib/handle-error";
+
+import type { CreateTaskSchema, UpdateTaskSchema, GetTasksSchema } from "./validations";
+import { asc, desc, ilike, inArray, and, gte, lte, not, or } from "drizzle-orm";
+
+// 레포지토리 함수들
+import {
+  selectTasks,
+  countTasks,
+  insertTask,
+  insertTasks,
+  selectOldestTaskExcept,
+  deleteTaskById,
+  deleteTasksByIds,
+  deleteAllTasks,
+  updateTask,
+  updateTasks,
+  groupByStatus,
+  groupByPriority,
+  getAllTasks,
+} from "./repository";
+
+import ExcelJS from "exceljs"
+import { tasksColumnsConfig, type TaskColumnConfig } from "@/config/tasksColumnsConfig"
+
+interface ImportResult {
+  errorFile: File | null
+  errorMessage: string | null
+  successMessage?: string
+}
+/* -----------------------------------------------------
+   1) 조회 관련 
+----------------------------------------------------- */
+
+/**
+ * 복잡한 조건으로 Task 목록을 조회 (+ pagination) 하고,
+ * 총 개수에 따라 pageCount를 계산해서 리턴.
+ * Next.js의 unstable_cache를 사용해 일정 시간 캐시.
+ */
+export async function getTasks(input: GetTasksSchema) {
+
+  return unstable_cache(
+    async () => {
+      try {
+        const offset = (input.page - 1) * input.perPage;
+        const fromDate = input.from ? new Date(input.from) : undefined;
+        const toDate = input.to ? new Date(input.to) : undefined;
+        // const advancedTable = input.flags.includes("advancedTable");
+        const advancedTable = true;
+
+        // advancedTable 모드면 filterColumns()로 where 절 구성
+        const advancedWhere = filterColumns({
+          table: tasks,
+          filters: input.filters,
+          joinOperator: input.joinOperator,
+        });
+
+
+        let globalWhere
+        if (input.search) {
+          const s = `%${input.search}%`
+          globalWhere = or(ilike(tasks.title, s), ilike(tasks.code, s)
+          , ilike(tasks.status, s)
+        )
+          // 필요시 여러 칼럼 OR조건 (status, priority, etc)
+        }
+
+        const finalWhere = and(
+          // advancedWhere or your existing conditions
+          advancedWhere,
+          globalWhere // and()함수로 결합 or or() 등으로 결합
+        )
+
+
+        // 아니면 ilike, inArray, gte 등으로 where 절 구성
+        const where = advancedTable
+          ? finalWhere
+          : and(
+              input.title ? ilike(tasks.title, `%${input.title}%`) : undefined,
+              input.status.length > 0 ? inArray(tasks.status, input.status) : undefined,
+              input.priority.length > 0 ? inArray(tasks.priority, input.priority) : undefined,
+              fromDate ? gte(tasks.createdAt, fromDate) : undefined,
+              toDate ? lte(tasks.createdAt, toDate) : undefined
+            );
+
+        const orderBy =
+          input.sort.length > 0
+            ? input.sort.map((item) =>
+                item.desc ? desc(tasks[item.id]) : asc(tasks[item.id])
+              )
+            : [asc(tasks.createdAt)];
+
+        // 트랜잭션 내부에서 Repository 호출
+        const { data, total } = await db.transaction(async (tx) => {
+          const data = await selectTasks(tx, {
+            where,
+            orderBy,
+            offset,
+            limit: input.perPage,
+          });
+          const total = await countTasks(tx, where);
+          return { data, total };
+        });
+
+        const pageCount = Math.ceil(total / input.perPage);
+
+//         console.log("===> advancedWhere:", advancedWhere);
+// console.log("===> globalWhere:", globalWhere);
+// console.log("===> finalWhere:", finalWhere);
+// console.log("===> offset:", offset, " limit:", input.perPage);
+
+        return { data, pageCount };
+      } catch (err) {
+        // 에러 발생 시 디폴트
+        return { data: [], pageCount: 0 };
+      }
+    },
+    [JSON.stringify(input)], // 캐싱 키
+    {
+      revalidate: 3600,
+      tags: ["tasks"], // revalidateTag("tasks") 호출 시 무효화
+    }
+  )();
+}
+
+
+/** Status별 개수 */
+export async function getTaskStatusCounts() {
+  return unstable_cache(
+    async () => {
+      try {
+
+        const initial: Record<Task["status"], number> = {
+            todo: 0,
+            "in-progress": 0,
+            done: 0,
+            canceled: 0,
+          };
+          
+
+        const result = await db.transaction(async (tx) => {
+          const rows = await groupByStatus(tx);
+          return rows.reduce<Record<Task["status"], number>>((acc, { status, count }) => {
+            acc[status] = count;
+            return acc;
+          }, initial);
+        });
+
+        return result;
+      } catch (err) {
+        return {} as Record<Task["status"], number>;
+      }
+    },
+    ["task-status-counts"], // 캐싱 키
+    {
+      revalidate: 3600,
+    }
+  )();
+}
+
+/** Priority별 개수 */
+export async function getTaskPriorityCounts() {
+  return unstable_cache(
+    async () => {
+      try {
+
+        const initial: Record<Task["priority"], number> = {
+            low: 0,
+            medium: 0,
+            high: 0,
+          };
+          
+        const result = await db.transaction(async (tx) => {
+          const rows = await groupByPriority(tx);
+          return rows.reduce<Record<Task["priority"], number>>((acc, { priority, count }) => {
+            acc[priority] = count;
+            return acc;
+          }, initial);
+        });
+
+        return result;
+      } catch (err) {
+        return {} as Record<Task["priority"], number>;
+      }
+    },
+    ["task-priority-counts"],
+    {
+      revalidate: 3600,
+    }
+  )();
+}
+
+/* -----------------------------------------------------
+   2) 생성(Create) 
+----------------------------------------------------- */
+
+
+/**
+ * Task 생성 후, (가장 오래된 Task 1개) 삭제로
+ * 전체 Task 개수를 고정
+ */
+export async function createTask(input: CreateTaskSchema) {
+  unstable_noStore(); // Next.js 서버 액션 캐싱 방지
+  try {
+    await db.transaction(async (tx) => {
+      // 새 Task 생성
+      const [newTask] = await insertTask(tx, {
+        title: input.title,
+        status: input.status,
+        label: input.label,
+        priority: input.priority,
+      });
+      return newTask;
+
+    });
+
+    console.log("tasks")
+
+    // 캐시 무효화
+    revalidateTag("tasks");
+    revalidateTag("task-status-counts");
+    revalidateTag("task-priority-counts");
+
+    return { data: null, error: null };
+  } catch (err) {
+    return { data: null, error: getErrorMessage(err) };
+  }
+}
+
+/* -----------------------------------------------------
+   3) 업데이트
+----------------------------------------------------- */
+
+/** 단건 업데이트 */
+export async function modifiTask(input: UpdateTaskSchema & { id: string }) {
+  unstable_noStore();
+  try {
+    const data = await db.transaction(async (tx) => {
+      const [res] = await updateTask(tx, input.id, {
+        title: input.title,
+        label: input.label,
+        status: input.status,
+        priority: input.priority,
+      });
+      return res;
+    });
+
+    revalidateTag("tasks");
+    if (data.status === input.status) {
+      revalidateTag("task-status-counts");
+    }
+    if (data.priority === input.priority) {
+      revalidateTag("task-priority-counts");
+    }
+
+    return { data: null, error: null };
+  } catch (err) {
+    return { data: null, error: getErrorMessage(err) };
+  }
+}
+
+/** 복수 업데이트 */
+export async function modifiTasks(input: {
+  ids: string[];
+  label?: Task["label"];
+  status?: Task["status"];
+  priority?: Task["priority"];
+}) {
+  unstable_noStore();
+  try {
+    const data = await db.transaction(async (tx) => {
+      const [res] = await updateTasks(tx, input.ids, {
+        label: input.label,
+        status: input.status,
+        priority: input.priority,
+      });
+      return res;
+    });
+
+    revalidateTag("tasks");
+    if (data.status === input.status) {
+      revalidateTag("task-status-counts");
+    }
+    if (data.priority === input.priority) {
+      revalidateTag("task-priority-counts");
+    }
+
+    return { data: null, error: null };
+  } catch (err) {
+    return { data: null, error: getErrorMessage(err) };
+  }
+}
+
+/* -----------------------------------------------------
+   4) 삭제
+----------------------------------------------------- */
+
+/** 단건 삭제  */
+export async function removeTask(input: { id: string }) {
+  unstable_noStore();
+  try {
+    await db.transaction(async (tx) => {
+      // 삭제
+      await deleteTaskById(tx, input.id);
+      // 바로 새 Task 생성
+    });
+
+    revalidateTag("tasks");
+    revalidateTag("task-status-counts");
+    revalidateTag("task-priority-counts");
+
+    return { data: null, error: null };
+  } catch (err) {
+    return { data: null, error: getErrorMessage(err) };
+  }
+}
+
+/** 복수 삭제  */
+export async function removeTasks(input: { ids: string[] }) {
+  unstable_noStore();
+  try {
+    await db.transaction(async (tx) => {
+      // 삭제
+      await deleteTasksByIds(tx, input.ids);
+    });
+
+    revalidateTag("tasks");
+    revalidateTag("task-status-counts");
+    revalidateTag("task-priority-counts");
+
+    return { data: null, error: null };
+  } catch (err) {
+    return { data: null, error: getErrorMessage(err) };
+  }
+}
+
+/**
+ * 1) 그룹 헤더(2줄 헤더)인지, 1줄 헤더인지 판별
+ * - Row1이 `group` 값들로 이루어져 있고,
+ * - Row2가 `excelHeader` 값들과 매칭되는지
+ */
+function detectHasGroupHeader(
+  worksheet: ExcelJS.Worksheet,
+  config: TaskColumnConfig[]
+): boolean {
+  // 전체 group 목록
+  const groupSet = new Set(
+    config.filter((c) => c.group).map((c) => c.group!.trim())
+  )
+  // 전체 excelHeader 목록
+  const headerSet = new Set(
+    config.filter((c) => c.excelHeader).map((c) => c.excelHeader!.trim())
+  )
+
+
+  // row1이 전부(또는 대부분) groupSet에 속하면 => 그룹 헤더일 가능성 높음
+  // row1Values = (index 0은 비어있을 수 있으므로) 안전하게 string 변환 후 trim
+  const row1Values = (worksheet.getRow(1)?.values ?? []) as (string | null | undefined)[]
+  const row2Values = (worksheet.getRow(2)?.values ?? []) as (string | null | undefined)[]
+
+  // row1Values가 전부 groupSet 내에 있거나 빈 문자열이면, "이건 그룹 헤더"
+  const row1IsMostlyGroup = row1Values.every((val) => {
+    if (!val) {
+      return true
+    }
+    return groupSet.has(val.trim())
+  })
+  // row2 중에 headerSet에 포함되는 값이 몇 개나 되는가?
+  // 즉, row2가 실제로 excelHeader로 구성되어 있으면 -> 2줄 헤더 가능성
+  const row2HeaderCount = row2Values.filter((val) => {
+    // val이 string인지 확인
+    if (typeof val === "string") {
+      return headerSet.has(val.trim())
+    }
+    // null/undefined(또는 숫자, 객체 등)이면 필터링 제외
+    return false
+  }).length
+
+  // (단순 로직) row1이 그룹 같고, row2가 적어도 1개 이상 excelHeader 매칭 => 2줄 헤더
+  // 프로젝트에 맞춰 좀 더 세밀하게 조건을 잡아도 됨.
+  if (row1IsMostlyGroup && row2HeaderCount > 0) {
+    return true
+  }
+  return false
+}
+
+export async function importTasksExcel(file: File): Promise<ImportResult> {
+  try {
+    // 1) 엑셀 로드
+    const buffer = await file.arrayBuffer()
+    const workbook = new ExcelJS.Workbook()
+    await workbook.xlsx.load(buffer)
+
+    // 첫 번째 시트만 사용
+    const worksheet = workbook.worksheets[0]
+    if (!worksheet) {
+      throw new Error("엑셀 파일에 시트가 없습니다.")
+    }
+
+    // 2) 그룹 헤더(2줄) or 일반 헤더(1줄) 판별
+    const hasGroupHeader = detectHasGroupHeader(worksheet, tasksColumnsConfig)
+    const headerRowIndex = hasGroupHeader ? 2 : 1
+    const dataStartRowIndex = hasGroupHeader ? 3 : 2
+
+    const headerRow = worksheet.getRow(headerRowIndex)
+    if (!headerRow) {
+      throw new Error("엑셀 헤더 행을 찾지 못했습니다.")
+    }
+
+    // 3) 엑셀 헤더(문자열) → 컬럼 인덱스(Map)
+    const columnIndexMap = new Map<string, number>()
+    headerRow.eachCell((cell, colIndex) => {
+      if (typeof cell.value === "string") {
+        columnIndexMap.set(cell.value.trim(), colIndex)
+      }
+    })
+
+    // 4) columnToFieldMap: "엑셀 열 인덱스" → "DB 필드(Task의 keyof)"
+    //    예) "Code" → "code", "Title" → "title", ...
+    const columnToFieldMap = new Map<number, keyof Task>()
+    tasksColumnsConfig.forEach((cfg) => {
+      if (!cfg.excelHeader) return
+      const colIndex = columnIndexMap.get(cfg.excelHeader.trim())
+      if (colIndex !== undefined) {
+        // 예: colIndex=1 -> cfg.id="code"
+        columnToFieldMap.set(colIndex, cfg.id)
+      }
+    })
+
+    // 5) 에러가 발생하면 표시할 용도
+    const errorRows: { rowIndex: number; message: string }[] = []
+
+    // 6) 엑셀에서 읽어온 행 데이터를 임시 보관
+    //    "마지막 컬럼(D/d) → toDelete=true"
+    type ExcelRowData = {
+      rowIndex: number
+      fields: Partial<Task>
+      toDelete: boolean
+    }
+    const rowDataList: ExcelRowData[] = []
+
+    for (let r = dataStartRowIndex; r <= worksheet.rowCount; r++) {
+      const row = worksheet.getRow(r)
+      if (!row ) continue
+
+      // (6-1) 마지막 셀을 보고 DELETE 여부 판단
+      const lastCellValue = row.getCell(row.cellCount).value
+      const isDelete =
+        typeof lastCellValue === "string" &&
+        lastCellValue.toLowerCase() === "d"
+
+      // (6-2) 각 열 -> DB 필드 매핑
+      const fields = {} as Partial<Task>
+
+      columnToFieldMap.forEach((fieldId, colIdx) => {
+        const cellValue = row.getCell(colIdx).value
+        if (fieldId === "createdAt") {
+            fields.createdAt = undefined
+        } else {
+          fields[fieldId] = (cellValue ?? null) as any
+        }
+      })
+
+      rowDataList.push({
+        rowIndex: r,
+        fields,
+        toDelete: isDelete,
+      })
+    }
+
+    // (6-3) 혹시 이 시점에서 "필수 값이 누락됐다" 등의 검증을 하고 싶다면 errorRows.push(...)
+    // if (errorRows.length > 0) => 엑셀에 표시 후 리턴 (생략)
+
+    // 7) 현재 DB에 있는 "code" 목록을 가져온다
+    const existingCodes = await getAllTasks().then((rows) => rows.map((r) => r.code))
+    const existingCodeSet = new Set<string>(existingCodes.filter(Boolean))
+
+    // 8) CREATE/UPDATE/DELETE 목록 분리
+    const toCreate: Task[] = []
+    // (updateTasks 함수가 "ids: string[], data: Partial<Task>" 형태)
+    //   - 여러 code를 한꺼번에 업데이트할 수도 있지만, 여기선 간단히 1code씩
+    const toUpdate: { codes: string[]; data: Partial<Task> }[] = []
+    const toDeleteCodes: string[] = []
+
+    for (const { rowIndex, fields, toDelete } of rowDataList) {
+      // code를 string으로 캐스팅
+      const code = fields.code ? String(fields.code).trim() : ""
+
+      if (toDelete) {
+        // DELETE
+        if (code && existingCodeSet.has(code)) {
+          toDeleteCodes.push(code)
+        } 
+        // code가 없거나 DB에 없으면 무시
+        continue
+      }
+
+      // CREATE or UPDATE
+      if (!code) {
+
+        toCreate.push(fields as Task)
+      } else {
+        // code가 있고, DB에도 있으면 UPDATE
+        if (existingCodeSet.has(code)) {
+          toUpdate.push({ codes: [code], data: fields })
+        } else {
+          // code가 있지만 DB에 없으면 CREATE
+          toCreate.push(fields as Task)
+        }
+      }
+    }
+
+    // (선택) 에러가 있으면 여기서 다시 한 번 errorRows에 추가 후 반환 가능
+
+    // 9) 트랜잭션으로 처리
+    await db.transaction(async (tx) => {
+      // CREATE
+      if (toCreate.length > 0) {
+        await insertTasks(tx, toCreate)
+      }
+      // UPDATE
+      if (toUpdate.length > 0) {
+        for (const { codes, data } of toUpdate) {
+          await updateTasks(tx, codes, data)
+        }
+      }
+      // DELETE
+      if (toDeleteCodes.length > 0) {
+        await deleteTasksByIds(tx, toDeleteCodes)
+      }
+    })
+
+    // 10) 성공 메시지
+    const msg: string[] = []
+    if (toCreate.length > 0) msg.push(`${toCreate.length}건 생성`)
+    if (toUpdate.length > 0) msg.push(`${toUpdate.length}건 수정`)
+    if (toDeleteCodes.length > 0) msg.push(`${toDeleteCodes.length}건 삭제`)
+    const successMessage = msg.length > 0 ? msg.join(", ") : "No changes"
+
+    return {
+      errorFile: null,
+      errorMessage: null,
+      successMessage,
+    }
+  } catch (err: any) {
+    return {
+      errorFile: null,
+      errorMessage: err.message || "Import 중 오류가 발생했습니다.",
+    }
+  }
+}
\ No newline at end of file
diff --git a/lib/tasks/table/add-tasks-dialog.tsx b/lib/tasks/table/add-tasks-dialog.tsx
new file mode 100644
index 00000000..18a9a4b2
--- /dev/null
+++ b/lib/tasks/table/add-tasks-dialog.tsx
@@ -0,0 +1,227 @@
+"use client"
+
+import * as React from "react"
+import { useForm } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+
+import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+// react-hook-form + shadcn/ui Form
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form"
+// shadcn/ui Select
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+
+import { tasks } from "@/db/schema/tasks" // enumValues 가져올 DB 스키마
+import { createTaskSchema, type CreateTaskSchema } from "@/lib/tasks/validations"
+import { createTask } from "@/lib/tasks/service" // 서버 액션 혹은 API
+
+export function AddTaskDialog() {
+  const [open, setOpen] = React.useState(false)
+
+  // react-hook-form 세팅
+  const form = useForm<CreateTaskSchema>({
+    resolver: zodResolver(createTaskSchema),
+    defaultValues: {
+      title: "",
+      label: tasks.label.enumValues[0] ?? "",     // enumValues 중 첫 번째를 기본값으로
+      status: tasks.status.enumValues[0] ?? "",
+      priority: tasks.priority.enumValues[0] ?? "",
+    },
+  })
+
+  async function onSubmit(data: CreateTaskSchema) {
+    const result = await createTask(data)
+    if (result.error) {
+      alert(`에러: ${result.error}`)
+      return
+    }
+    // 성공 시 모달 닫고 폼 리셋
+    form.reset()
+    setOpen(false)
+  }
+
+  function handleDialogOpenChange(nextOpen: boolean) {
+    if (!nextOpen) {
+      form.reset()
+    }
+    setOpen(nextOpen)
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={handleDialogOpenChange}>
+      {/* 모달을 열기 위한 버튼 */}
+      <DialogTrigger asChild>
+        <Button variant="default" size="sm">
+          Add Task
+        </Button>
+      </DialogTrigger>
+
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Create New Task</DialogTitle>
+          <DialogDescription>
+            새 Task 정보를 입력하고 <b>Create</b> 버튼을 누르세요.
+          </DialogDescription>
+        </DialogHeader>
+
+        {/* shadcn/ui Form을 이용해 react-hook-form과 연결 */}
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)}>
+            <div className="space-y-4 py-4">
+              {/* Title 필드 */}
+              <FormField
+                control={form.control}
+                name="title"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Title</FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder="e.g. Fix the layout bug"
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              {/* Label (Select) */}
+              <FormField
+                control={form.control}
+                name="label"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Label</FormLabel>
+                    <FormControl>
+                      <Select
+                        onValueChange={field.onChange}
+                        value={field.value}
+                      >
+                        <SelectTrigger className="capitalize">
+                          <SelectValue placeholder="Select a label" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectGroup>
+                            {tasks.label.enumValues.map((item) => (
+                              <SelectItem
+                                key={item}
+                                value={item}
+                                className="capitalize"
+                              >
+                                {item}
+                              </SelectItem>
+                            ))}
+                          </SelectGroup>
+                        </SelectContent>
+                      </Select>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              {/* Status (Select) */}
+              <FormField
+                control={form.control}
+                name="status"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Status</FormLabel>
+                    <FormControl>
+                      <Select
+                        onValueChange={field.onChange}
+                        value={field.value}
+                      >
+                        <SelectTrigger className="capitalize">
+                          <SelectValue placeholder="Select a status" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectGroup>
+                            {tasks.status.enumValues.map((item) => (
+                              <SelectItem
+                                key={item}
+                                value={item}
+                                className="capitalize"
+                              >
+                                {item}
+                              </SelectItem>
+                            ))}
+                          </SelectGroup>
+                        </SelectContent>
+                      </Select>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              {/* Priority (Select) */}
+              <FormField
+                control={form.control}
+                name="priority"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Priority</FormLabel>
+                    <FormControl>
+                      <Select
+                        onValueChange={field.onChange}
+                        value={field.value}
+                      >
+                        <SelectTrigger className="capitalize">
+                          <SelectValue placeholder="Select a priority" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectGroup>
+                            {tasks.priority.enumValues.map((item) => (
+                              <SelectItem
+                                key={item}
+                                value={item}
+                                className="capitalize"
+                              >
+                                {item}
+                              </SelectItem>
+                            ))}
+                          </SelectGroup>
+                        </SelectContent>
+                      </Select>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            <DialogFooter>
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => setOpen(false)}
+              >
+                Cancel
+              </Button>
+              <Button type="submit" disabled={form.formState.isSubmitting}>
+                Create
+              </Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  )
+}
\ No newline at end of file
diff --git a/lib/tasks/table/delete-tasks-dialog.tsx b/lib/tasks/table/delete-tasks-dialog.tsx
new file mode 100644
index 00000000..c82c913e
--- /dev/null
+++ b/lib/tasks/table/delete-tasks-dialog.tsx
@@ -0,0 +1,149 @@
+"use client"
+
+import * as React from "react"
+import { type Task } from "@/db/schema/tasks"
+import { type Row } from "@tanstack/react-table"
+import { Loader, Trash } from "lucide-react"
+import { toast } from "sonner"
+
+import { useMediaQuery } from "@/hooks/use-media-query"
+import { Button } from "@/components/ui/button"
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/components/ui/drawer"
+
+import { removeTasks } from "@/lib//tasks/service"
+
+interface DeleteTasksDialogProps
+  extends React.ComponentPropsWithoutRef<typeof Dialog> {
+  tasks: Row<Task>["original"][]
+  showTrigger?: boolean
+  onSuccess?: () => void
+}
+
+export function DeleteTasksDialog({
+  tasks,
+  showTrigger = true,
+  onSuccess,
+  ...props
+}: DeleteTasksDialogProps) {
+  const [isDeletePending, startDeleteTransition] = React.useTransition()
+  const isDesktop = useMediaQuery("(min-width: 640px)")
+
+  function onDelete() {
+    startDeleteTransition(async () => {
+      const { error } = await removeTasks({
+        ids: tasks.map((task) => task.id),
+      })
+
+      if (error) {
+        toast.error(error)
+        return
+      }
+
+      props.onOpenChange?.(false)
+      toast.success("Tasks deleted")
+      onSuccess?.()
+    })
+  }
+
+  if (isDesktop) {
+    return (
+      <Dialog {...props}>
+        {showTrigger ? (
+          <DialogTrigger asChild>
+            <Button variant="outline" size="sm">
+              <Trash className="mr-2 size-4" aria-hidden="true" />
+              Delete ({tasks.length})
+            </Button>
+          </DialogTrigger>
+        ) : null}
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Are you absolutely sure?</DialogTitle>
+            <DialogDescription>
+              This action cannot be undone. This will permanently delete your{" "}
+              <span className="font-medium">{tasks.length}</span>
+              {tasks.length === 1 ? " task" : " tasks"} from our servers.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter className="gap-2 sm:space-x-0">
+            <DialogClose asChild>
+              <Button variant="outline">Cancel</Button>
+            </DialogClose>
+            <Button
+              aria-label="Delete selected rows"
+              variant="destructive"
+              onClick={onDelete}
+              disabled={isDeletePending}
+            >
+              {isDeletePending && (
+                <Loader
+                  className="mr-2 size-4 animate-spin"
+                  aria-hidden="true"
+                />
+              )}
+              Delete
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    )
+  }
+
+  return (
+    <Drawer {...props}>
+      {showTrigger ? (
+        <DrawerTrigger asChild>
+          <Button variant="outline" size="sm">
+            <Trash className="mr-2 size-4" aria-hidden="true" />
+            Delete ({tasks.length})
+          </Button>
+        </DrawerTrigger>
+      ) : null}
+      <DrawerContent>
+        <DrawerHeader>
+          <DrawerTitle>Are you absolutely sure?</DrawerTitle>
+          <DrawerDescription>
+            This action cannot be undone. This will permanently delete your{" "}
+            <span className="font-medium">{tasks.length}</span>
+            {tasks.length === 1 ? " task" : " tasks"} from our servers.
+          </DrawerDescription>
+        </DrawerHeader>
+        <DrawerFooter className="gap-2 sm:space-x-0">
+          <DrawerClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </DrawerClose>
+          <Button
+            aria-label="Delete selected rows"
+            variant="destructive"
+            onClick={onDelete}
+            disabled={isDeletePending}
+          >
+            {isDeletePending && (
+              <Loader className="mr-2 size-4 animate-spin" aria-hidden="true" />
+            )}
+            Delete
+          </Button>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  )
+}
diff --git a/lib/tasks/table/feature-flags-provider.tsx b/lib/tasks/table/feature-flags-provider.tsx
new file mode 100644
index 00000000..81131894
--- /dev/null
+++ b/lib/tasks/table/feature-flags-provider.tsx
@@ -0,0 +1,108 @@
+"use client"
+
+import * as React from "react"
+import { useQueryState } from "nuqs"
+
+import { dataTableConfig, type DataTableConfig } from "@/config/data-table"
+import { cn } from "@/lib/utils"
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+
+type FeatureFlagValue = DataTableConfig["featureFlags"][number]["value"]
+
+interface FeatureFlagsContextProps {
+  featureFlags: FeatureFlagValue[]
+  setFeatureFlags: (value: FeatureFlagValue[]) => void
+}
+
+const FeatureFlagsContext = React.createContext<FeatureFlagsContextProps>({
+  featureFlags: [],
+  setFeatureFlags: () => {},
+})
+
+export function useFeatureFlags() {
+  const context = React.useContext(FeatureFlagsContext)
+  if (!context) {
+    throw new Error(
+      "useFeatureFlags must be used within a FeatureFlagsProvider"
+    )
+  }
+  return context
+}
+
+interface FeatureFlagsProviderProps {
+  children: React.ReactNode
+}
+
+export function FeatureFlagsProvider({ children }: FeatureFlagsProviderProps) {
+  const [featureFlags, setFeatureFlags] = useQueryState<FeatureFlagValue[]>(
+    "flags",
+    {
+      defaultValue: [],
+      parse: (value) => value.split(",") as FeatureFlagValue[],
+      serialize: (value) => value.join(","),
+      eq: (a, b) =>
+        a.length === b.length && a.every((value, index) => value === b[index]),
+      clearOnDefault: true,
+      shallow: false,
+    }
+  )
+
+  return (
+    <FeatureFlagsContext.Provider
+      value={{
+        featureFlags,
+        setFeatureFlags: (value) => void setFeatureFlags(value),
+      }}
+    >
+      <div className="w-full overflow-x-auto">
+        <ToggleGroup
+          type="multiple"
+          variant="outline"
+          size="sm"
+          value={featureFlags}
+          onValueChange={(value: FeatureFlagValue[]) => setFeatureFlags(value)}
+          className="w-fit gap-0"
+        >
+          {dataTableConfig.featureFlags.map((flag, index) => (
+            <Tooltip key={flag.value}>
+              <ToggleGroupItem
+                value={flag.value}
+                className={cn(
+                  "gap-2 whitespace-nowrap rounded-none px-3 text-xs data-[state=on]:bg-accent/70 data-[state=on]:hover:bg-accent/90",
+                  {
+                    "rounded-l-sm border-r-0": index === 0,
+                    "rounded-r-sm":
+                      index === dataTableConfig.featureFlags.length - 1,
+                  }
+                )}
+                asChild
+              >
+                <TooltipTrigger>
+                  <flag.icon className="size-3.5 shrink-0" aria-hidden="true" />
+                  {flag.label}
+                </TooltipTrigger>
+              </ToggleGroupItem>
+              <TooltipContent
+                align="start"
+                side="bottom"
+                sideOffset={6}
+                className="flex max-w-60 flex-col space-y-1.5 border bg-background py-2 font-semibold text-foreground"
+              >
+                <div>{flag.tooltipTitle}</div>
+                <div className="text-xs text-muted-foreground">
+                  {flag.tooltipDescription}
+                </div>
+              </TooltipContent>
+            </Tooltip>
+          ))}
+        </ToggleGroup>
+      </div>
+      {children}
+    </FeatureFlagsContext.Provider>
+  )
+}
diff --git a/lib/tasks/table/feature-flags.tsx b/lib/tasks/table/feature-flags.tsx
new file mode 100644
index 00000000..aaae6af2
--- /dev/null
+++ b/lib/tasks/table/feature-flags.tsx
@@ -0,0 +1,96 @@
+"use client"
+
+import * as React from "react"
+import { useQueryState } from "nuqs"
+
+import { dataTableConfig, type DataTableConfig } from "@/config/data-table"
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+
+type FeatureFlagValue = DataTableConfig["featureFlags"][number]["value"]
+
+interface TasksTableContextProps {
+  featureFlags: FeatureFlagValue[]
+  setFeatureFlags: (value: FeatureFlagValue[]) => void
+}
+
+const TasksTableContext = React.createContext<TasksTableContextProps>({
+  featureFlags: [],
+  setFeatureFlags: () => {},
+})
+
+export function useTasksTable() {
+  const context = React.useContext(TasksTableContext)
+  if (!context) {
+    throw new Error("useTasksTable must be used within a TasksTableProvider")
+  }
+  return context
+}
+
+export function TasksTableProvider({ children }: React.PropsWithChildren) {
+  const [featureFlags, setFeatureFlags] = useQueryState<FeatureFlagValue[]>(
+    "featureFlags",
+    {
+      defaultValue: [],
+      parse: (value) => value.split(",") as FeatureFlagValue[],
+      serialize: (value) => value.join(","),
+      eq: (a, b) =>
+        a.length === b.length && a.every((value, index) => value === b[index]),
+      clearOnDefault: true,
+    }
+  )
+
+  return (
+    <TasksTableContext.Provider
+      value={{
+        featureFlags,
+        setFeatureFlags: (value) => void setFeatureFlags(value),
+      }}
+    >
+      <div className="w-full overflow-x-auto">
+        <ToggleGroup
+          type="multiple"
+          variant="outline"
+          size="sm"
+          value={featureFlags}
+          onValueChange={(value: FeatureFlagValue[]) => setFeatureFlags(value)}
+          className="w-fit"
+        >
+          {dataTableConfig.featureFlags.map((flag) => (
+            <Tooltip key={flag.value}>
+              <ToggleGroupItem
+                value={flag.value}
+                className="whitespace-nowrap px-3 text-xs"
+                asChild
+              >
+                <TooltipTrigger>
+                  <flag.icon
+                    className="mr-2 size-3.5 shrink-0"
+                    aria-hidden="true"
+                  />
+                  {flag.label}
+                </TooltipTrigger>
+              </ToggleGroupItem>
+              <TooltipContent
+                align="start"
+                side="bottom"
+                sideOffset={6}
+                className="flex max-w-60 flex-col space-y-1.5 border bg-background py-2 font-semibold text-foreground"
+              >
+                <div>{flag.tooltipTitle}</div>
+                <div className="text-xs text-muted-foreground">
+                  {flag.tooltipDescription}
+                </div>
+              </TooltipContent>
+            </Tooltip>
+          ))}
+        </ToggleGroup>
+      </div>
+      {children}
+    </TasksTableContext.Provider>
+  )
+}
diff --git a/lib/tasks/table/tasks-table-columns.tsx b/lib/tasks/table/tasks-table-columns.tsx
new file mode 100644
index 00000000..3737c2e5
--- /dev/null
+++ b/lib/tasks/table/tasks-table-columns.tsx
@@ -0,0 +1,262 @@
+"use client"
+
+import * as React from "react"
+import { type DataTableRowAction } from "@/types/table"
+import { type ColumnDef } from "@tanstack/react-table"
+import { Ellipsis } from "lucide-react"
+import { toast } from "sonner"
+
+import { getErrorMessage } from "@/lib/handle-error"
+import { formatDate } from "@/lib/utils"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Checkbox } from "@/components/ui/checkbox"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { DataTableColumnHeader } from "@/components/data-table/data-table-column-header"
+
+import { modifiTask } from "@/lib/tasks/service"
+import { getPriorityIcon, getStatusIcon } from "@/lib/tasks/utils"
+import { tasks } from "@/db/schema/tasks"
+import type { Task } from "@/db/schema/tasks"
+
+import { tasksColumnsConfig } from "@/config/tasksColumnsConfig"
+
+interface GetColumnsProps {
+  setRowAction: React.Dispatch<React.SetStateAction<DataTableRowAction<Task> | null>>
+}
+
+/**
+ * tanstack table 컬럼 정의 (중첩 헤더 버전)
+ */
+export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<Task>[] {
+  // ----------------------------------------------------------------
+  // 1) select 컬럼 (체크박스)
+  // ----------------------------------------------------------------
+  const selectColumn: ColumnDef<Task> = {
+    id: "select",
+    header: ({ table }) => (
+      <Checkbox
+        checked={
+          table.getIsAllPageRowsSelected() ||
+          (table.getIsSomePageRowsSelected() && "indeterminate")
+        }
+        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+        aria-label="Select all"
+        className="translate-y-0.5"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={(value) => row.toggleSelected(!!value)}
+        aria-label="Select row"
+        className="translate-y-0.5"
+      />
+    ),
+    size:40,
+    enableSorting: false,
+    enableHiding: false,
+  }
+
+  // ----------------------------------------------------------------
+  // 2) actions 컬럼 (Dropdown 메뉴)
+  // ----------------------------------------------------------------
+  const actionsColumn: ColumnDef<Task> = {
+    id: "actions",
+    enableHiding: false,
+    cell: function Cell({ row }) {
+      const [isUpdatePending, startUpdateTransition] = React.useTransition()
+
+      return (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              aria-label="Open menu"
+              variant="ghost"
+              className="flex size-8 p-0 data-[state=open]:bg-muted"
+            >
+              <Ellipsis className="size-4" aria-hidden="true" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-40">
+            <DropdownMenuItem
+              onSelect={() => setRowAction({ row, type: "update" })}
+            >
+              Edit
+            </DropdownMenuItem>
+            <DropdownMenuSub>
+              <DropdownMenuSubTrigger>Labels</DropdownMenuSubTrigger>
+              <DropdownMenuSubContent>
+                <DropdownMenuRadioGroup
+                  value={row.original.label}
+                  onValueChange={(value) => {
+                    startUpdateTransition(() => {
+                      toast.promise(
+                        modifiTask({
+                          id: row.original.id,
+                          label: value as Task["label"],
+                        }),
+                        {
+                          loading: "Updating...",
+                          success: "Label updated",
+                          error: (err) => getErrorMessage(err),
+                        }
+                      )
+                    })
+                  }}
+                >
+                  {tasks.label.enumValues.map((label) => (
+                    <DropdownMenuRadioItem
+                      key={label}
+                      value={label}
+                      className="capitalize"
+                      disabled={isUpdatePending}
+                    >
+                      {label}
+                    </DropdownMenuRadioItem>
+                  ))}
+                </DropdownMenuRadioGroup>
+              </DropdownMenuSubContent>
+            </DropdownMenuSub>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem
+              onSelect={() => setRowAction({ row, type: "delete" })}
+            >
+              Delete
+              <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      )
+    },
+    size: 40,
+  }
+
+  // ----------------------------------------------------------------
+  // 3) 일반 컬럼들을 "그룹"별로 묶어 중첩 columns 생성
+  // ----------------------------------------------------------------
+  // 3-1) groupMap: { [groupName]: ColumnDef<Task>[] }
+  const groupMap: Record<string, ColumnDef<Task>[]> = {}
+
+  tasksColumnsConfig.forEach((cfg) => {
+    // 만약 group가 없으면 "_noGroup" 처리
+    const groupName = cfg.group || "_noGroup"
+
+    if (!groupMap[groupName]) {
+      groupMap[groupName] = []
+    }
+
+    // child column 정의
+    const childCol: ColumnDef<Task> = {
+      accessorKey: cfg.id,
+      enableResizing: true,
+      header: ({ column }) => (
+        <DataTableColumnHeader column={column} title={cfg.label} />
+      ),
+      meta: {
+        excelHeader: cfg.excelHeader,
+        group: cfg.group,
+        type: cfg.type,
+      },
+      cell: ({ row, cell }) => {
+        // 예: cfg.id === "title" → custom rendering
+        if (cfg.id === "title") {
+          const labelVal = row.original.label
+          const labelExists = tasks.label.enumValues.includes(labelVal ?? "")
+          return (
+            <div className="flex space-x-2">
+              {labelExists && <Badge variant="outline">{labelVal}</Badge>}
+              <span className="max-w-[31.25rem] truncate font-medium">
+                {row.getValue("title")}
+              </span>
+            </div>
+          )
+        }
+
+        if (cfg.id === "status") {
+          const statusVal = row.original.status
+          if (!statusVal) return null
+          const Icon = getStatusIcon(statusVal)
+          return (
+            <div className="flex w-[6.25rem] items-center">
+              <Icon className="mr-2 size-4 text-muted-foreground" aria-hidden="true" />
+              <span className="capitalize">{statusVal}</span>
+            </div>
+          )
+        }
+
+        if (cfg.id === "priority") {
+          const priorityVal = row.original.priority
+          if (!priorityVal) return null
+          const Icon = getPriorityIcon(priorityVal)
+          return (
+            <div className="flex items-center">
+              <Icon className="mr-2 size-4 text-muted-foreground" aria-hidden="true" />
+              <span className="capitalize">{priorityVal}</span>
+            </div>
+          )
+        }
+
+        if (cfg.id === "archived") {
+          return (
+            <Badge variant="outline">
+              {row.original.archived ? "Yes" : "No"}
+            </Badge>
+          )
+        }
+
+        if (cfg.id === "createdAt") {
+          const dateVal = cell.getValue() as Date
+          return formatDate(dateVal)
+        }
+
+        // code etc...
+        return row.getValue(cfg.id) ?? ""
+      },
+    }
+
+    groupMap[groupName].push(childCol)
+  })
+
+  // ----------------------------------------------------------------
+  // 3-2) groupMap에서 실제 상위 컬럼(그룹)을 만들기
+  // ----------------------------------------------------------------
+  const nestedColumns: ColumnDef<Task>[] = []
+
+  // 순서를 고정하고 싶다면 group 순서를 미리 정의하거나 sort해야 함
+  // 여기서는 그냥 Object.entries 순서
+  Object.entries(groupMap).forEach(([groupName, colDefs]) => {
+    if (groupName === "_noGroup") {
+      // 그룹 없음 → 그냥 최상위 레벨 컬럼
+      nestedColumns.push(...colDefs)
+    } else {
+      // 상위 컬럼
+      nestedColumns.push({
+        id: groupName,
+        header: groupName, // "Basic Info", "Metadata" 등
+        columns: colDefs,
+      })
+    }
+  })
+
+  // ----------------------------------------------------------------
+  // 4) 최종 컬럼 배열: select, nestedColumns, actions
+  // ----------------------------------------------------------------
+  return [
+    selectColumn,
+    ...nestedColumns,
+    actionsColumn,
+  ]
+}
\ No newline at end of file
diff --git a/lib/tasks/table/tasks-table-floating-bar.tsx b/lib/tasks/table/tasks-table-floating-bar.tsx
new file mode 100644
index 00000000..6d367f81
--- /dev/null
+++ b/lib/tasks/table/tasks-table-floating-bar.tsx
@@ -0,0 +1,354 @@
+"use client"
+
+import * as React from "react"
+import { tasks, type Task } from "@/db/schema/tasks"
+import { SelectTrigger } from "@radix-ui/react-select"
+import { type Table } from "@tanstack/react-table"
+import {
+  ArrowUp,
+  CheckCircle2,
+  Download,
+  Loader,
+  Trash2,
+  X,
+} from "lucide-react"
+import { toast } from "sonner"
+
+import { exportTableToExcel } from "@/lib/export"
+import { Button } from "@/components/ui/button"
+import { Portal } from "@/components/ui/portal"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+} from "@/components/ui/select"
+import { Separator } from "@/components/ui/separator"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+import { Kbd } from "@/components/kbd"
+
+import { removeTasks, modifiTasks } from "@/lib//tasks/service"
+import { DeleteTasksDialog } from "./delete-tasks-dialog"
+import { ActionConfirmDialog } from "@/components/ui/action-dialog"
+
+interface TasksTableFloatingBarProps {
+  table: Table<Task>
+}
+
+
+export function TasksTableFloatingBar({ table }: TasksTableFloatingBarProps) {
+  const rows = table.getFilteredSelectedRowModel().rows
+
+  const [isPending, startTransition] = React.useTransition()
+  const [action, setAction] = React.useState<
+    "update-status" | "update-priority" | "export" | "delete"
+  >()
+  const [popoverOpen, setPopoverOpen] = React.useState(false)
+
+  // Clear selection on Escape key press
+  React.useEffect(() => {
+    function handleKeyDown(event: KeyboardEvent) {
+      if (event.key === "Escape") {
+        table.toggleAllRowsSelected(false)
+      }
+    }
+
+    window.addEventListener("keydown", handleKeyDown)
+    return () => window.removeEventListener("keydown", handleKeyDown)
+  }, [table])
+
+
+
+  // 공용 confirm dialog state
+  const [confirmDialogOpen, setConfirmDialogOpen] = React.useState(false)
+  const [confirmProps, setConfirmProps] = React.useState<{
+    title: string
+    description?: string
+    onConfirm: () => Promise<void> | void
+  }>({
+    title: "",
+    description: "",
+    onConfirm: () => { },
+  })
+
+  // 1) "삭제" Confirm 열기
+  function handleDeleteConfirm() {
+    setAction("delete")
+    setConfirmProps({
+      title: `Delete ${rows.length} user${rows.length > 1 ? "s" : ""}?`,
+      description: "This action cannot be undone.",
+      onConfirm: async () => {
+        startTransition(async () => {
+          const { error } = await removeTasks({
+            ids: rows.map((row) => row.original.id),
+          })
+          if (error) {
+            toast.error(error)
+            return
+          }
+          toast.success("Users deleted")
+          table.toggleAllRowsSelected(false)
+          setConfirmDialogOpen(false)
+        })
+      },
+    })
+    setConfirmDialogOpen(true)
+  }
+
+  // 2) 
+  function handleSelectStatus(newStatus: Task["status"]) {
+    setAction("update-status")
+
+    setConfirmProps({
+      title: `Update ${rows.length} task${rows.length > 1 ? "s" : ""} with status: ${newStatus}?`,
+      description: "This action will override their current status.",
+      onConfirm: async () => {
+        startTransition(async () => {
+          const { error } = await modifiTasks({
+            ids: rows.map((row) => row.original.id),
+            status: newStatus,
+          })
+          if (error) {
+            toast.error(error)
+            return
+          }
+          toast.success("Tasks updated")
+          setConfirmDialogOpen(false)
+        })
+      },
+    })
+    setConfirmDialogOpen(true)
+  }
+
+    // 3) 
+    function handleSelectPriority(newPriority: Task["priority"]) {
+      setAction("update-priority")
+  
+      setConfirmProps({
+        title: `Update ${rows.length} task${rows.length > 1 ? "s" : ""} with priority: ${newPriority}?`,
+        description: "This action will override their current priority.",
+        onConfirm: async () => {
+          startTransition(async () => {
+            const { error } = await modifiTasks({
+              ids: rows.map((row) => row.original.id),
+              priority: newPriority,
+            })
+            if (error) {
+              toast.error(error)
+              return
+            }
+            toast.success("Tasks updated")
+            setConfirmDialogOpen(false)
+          })
+        },
+      })
+      setConfirmDialogOpen(true)
+    }
+
+  return (
+    <Portal >
+      <div className="fixed inset-x-0 bottom-10 z-50 mx-auto w-fit px-2.5" style={{ bottom: '1.5rem' }}>
+        <div className="w-full overflow-x-auto">
+          <div className="mx-auto flex w-fit items-center gap-2 rounded-md border bg-background p-2 text-foreground shadow">
+            <div className="flex h-7 items-center rounded-md border border-dashed pl-2.5 pr-1">
+              <span className="whitespace-nowrap text-xs">
+                {rows.length} selected
+              </span>
+              <Separator orientation="vertical" className="ml-2 mr-1" />
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="size-5 hover:border"
+                    onClick={() => table.toggleAllRowsSelected(false)}
+                  >
+                    <X className="size-3.5 shrink-0" aria-hidden="true" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent className="flex items-center border bg-accent px-2 py-1 font-semibold text-foreground dark:bg-zinc-900">
+                  <p className="mr-2">Clear selection</p>
+                  <Kbd abbrTitle="Escape" variant="outline">
+                    Esc
+                  </Kbd>
+                </TooltipContent>
+              </Tooltip>
+            </div>
+            <Separator orientation="vertical" className="hidden h-5 sm:block" />
+            <div className="flex items-center gap-1.5">
+              <Select
+                onValueChange={(value: Task["status"]) => {
+                  handleSelectStatus(value)
+                }}
+              >
+                <Tooltip>
+                  <SelectTrigger asChild>
+                    <TooltipTrigger asChild>
+                      <Button
+                        variant="secondary"
+                        size="icon"
+                        className="size-7 border data-[state=open]:bg-accent data-[state=open]:text-accent-foreground"
+                        disabled={isPending}
+                      >
+                        {isPending && action === "update-status" ? (
+                          <Loader
+                            className="size-3.5 animate-spin"
+                            aria-hidden="true"
+                          />
+                        ) : (
+                          <CheckCircle2
+                            className="size-3.5"
+                            aria-hidden="true"
+                          />
+                        )}
+                      </Button>
+                    </TooltipTrigger>
+                  </SelectTrigger>
+                  <TooltipContent className="border bg-accent font-semibold text-foreground dark:bg-zinc-900">
+                    <p>Update status</p>
+                  </TooltipContent>
+                </Tooltip>
+                <SelectContent align="center">
+                  <SelectGroup>
+                    {tasks.status.enumValues.map((status) => (
+                      <SelectItem
+                        key={status}
+                        value={status}
+                        className="capitalize"
+                      >
+                        {status}
+                      </SelectItem>
+                    ))}
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+              <Select
+                onValueChange={(value: Task["priority"]) => {
+                  handleSelectPriority(value)
+                }}
+              >
+                <Tooltip>
+                  <SelectTrigger asChild>
+                    <TooltipTrigger asChild>
+                      <Button
+                        variant="secondary"
+                        size="icon"
+                        className="size-7 border data-[state=open]:bg-accent data-[state=open]:text-accent-foreground"
+                        disabled={isPending}
+                      >
+                        {isPending && action === "update-priority" ? (
+                          <Loader
+                            className="size-3.5 animate-spin"
+                            aria-hidden="true"
+                          />
+                        ) : (
+                          <ArrowUp className="size-3.5" aria-hidden="true" />
+                        )}
+                      </Button>
+                    </TooltipTrigger>
+                  </SelectTrigger>
+                  <TooltipContent className="border bg-accent font-semibold text-foreground dark:bg-zinc-900">
+                    <p>Update priority</p>
+                  </TooltipContent>
+                </Tooltip>
+                <SelectContent align="center">
+                  <SelectGroup>
+                    {tasks.priority.enumValues.map((priority) => (
+                      <SelectItem
+                        key={priority}
+                        value={priority}
+                        className="capitalize"
+                      >
+                        {priority}
+                      </SelectItem>
+                    ))}
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="secondary"
+                    size="icon"
+                    className="size-7 border"
+                    onClick={() => {
+                      setAction("export")
+
+                      startTransition(() => {
+                        exportTableToExcel(table, {
+                          excludeColumns: ["select", "actions"],
+                          onlySelected: true,
+                        })
+                      })
+                    }}
+                    disabled={isPending}
+                  >
+                    {isPending && action === "export" ? (
+                      <Loader
+                        className="size-3.5 animate-spin"
+                        aria-hidden="true"
+                      />
+                    ) : (
+                      <Download className="size-3.5" aria-hidden="true" />
+                    )}
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent className="border bg-accent font-semibold text-foreground dark:bg-zinc-900">
+                  <p>Export tasks</p>
+                </TooltipContent>
+              </Tooltip>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="secondary"
+                    size="icon"
+                    className="size-7 border"
+                    onClick={handleDeleteConfirm}
+                    disabled={isPending}
+                  >
+                    {isPending && action === "delete" ? (
+                      <Loader
+                        className="size-3.5 animate-spin"
+                        aria-hidden="true"
+                      />
+                    ) : (
+                      <Trash2 className="size-3.5" aria-hidden="true" />
+                    )}
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent className="border bg-accent font-semibold text-foreground dark:bg-zinc-900">
+                  <p>Delete tasks</p>
+                </TooltipContent>
+              </Tooltip>
+            </div>
+          </div>
+        </div>
+      </div>
+
+
+      {/* 공용 Confirm Dialog */}
+      <ActionConfirmDialog
+        open={confirmDialogOpen}
+        onOpenChange={setConfirmDialogOpen}
+        title={confirmProps.title}
+        description={confirmProps.description}
+        onConfirm={confirmProps.onConfirm}
+        isLoading={isPending && (action === "delete" || action === "update-priority" || action === "update-status")}
+        confirmLabel={
+          action === "delete"
+            ? "Delete"
+            : action === "update-priority" || action === "update-status"
+            ? "Update"
+            : "Confirm"
+        }
+        confirmVariant={
+          action === "delete" ? "destructive" : "default"
+        }
+      />
+    </Portal>
+  )
+}
diff --git a/lib/tasks/table/tasks-table-toolbar-actions.tsx b/lib/tasks/table/tasks-table-toolbar-actions.tsx
new file mode 100644
index 00000000..8219b7b6
--- /dev/null
+++ b/lib/tasks/table/tasks-table-toolbar-actions.tsx
@@ -0,0 +1,117 @@
+"use client"
+
+import * as React from "react"
+import { type Task } from "@/db/schema/tasks"
+import { type Table } from "@tanstack/react-table"
+import { Download, Upload } from "lucide-react"
+import { toast } from "sonner"
+
+import { exportTableToExcel } from "@/lib/export"
+import { Button } from "@/components/ui/button"
+
+// 삭제, 추가 다이얼로그
+import { DeleteTasksDialog } from "./delete-tasks-dialog"
+import { AddTaskDialog } from "./add-tasks-dialog"
+
+// 만약 서버 액션이나 API 라우트를 이용해 업로드 처리한다면 import
+import { importTasksExcel } from "@/lib/tasks/service" // 예시
+
+interface TasksTableToolbarActionsProps {
+  table: Table<Task>
+}
+
+export function TasksTableToolbarActions({ table }: TasksTableToolbarActionsProps) {
+  // 파일 input을 숨기고, 버튼 클릭 시 참조해 클릭하는 방식
+  const fileInputRef = React.useRef<HTMLInputElement>(null)
+
+  // 파일이 선택되었을 때 처리
+  async function onFileChange(event: React.ChangeEvent<HTMLInputElement>) {
+    const file = event.target.files?.[0]
+    if (!file) return
+
+    // 파일 초기화 (동일 파일 재업로드 시에도 onChange가 트리거되도록)
+    event.target.value = ""
+
+    // 서버 액션 or API 호출
+    try {
+      // 예: 서버 액션 호출
+      const { errorFile, errorMessage } = await importTasksExcel(file)
+
+      if (errorMessage) {
+        toast.error(errorMessage)
+      }
+      if (errorFile) {
+        // 에러 엑셀을 다운로드
+        const url = URL.createObjectURL(errorFile)
+        const link = document.createElement("a")
+        link.href = url
+        link.download = "errors.xlsx"
+        link.click()
+        URL.revokeObjectURL(url)
+      } else {
+        // 성공
+        toast.success("Import success")
+        // 필요 시 revalidateTag("tasks") 등
+      }
+
+    } catch (err) {
+      toast.error("파일 업로드 중 오류가 발생했습니다.")
+      
+    }
+  }
+
+  function handleImportClick() {
+    // 숨겨진 <input type="file" /> 요소를 클릭
+    fileInputRef.current?.click()
+  }
+
+  return (
+    <div className="flex items-center gap-2">
+      {/** 1) 선택된 로우가 있으면 삭제 다이얼로그 */}
+      {table.getFilteredSelectedRowModel().rows.length > 0 ? (
+        <DeleteTasksDialog
+          tasks={table
+            .getFilteredSelectedRowModel()
+            .rows.map((row) => row.original)}
+          onSuccess={() => table.toggleAllRowsSelected(false)}
+        />
+      ) : null}
+
+      {/** 2) 새 Task 추가 다이얼로그 */}
+      <AddTaskDialog />
+
+      {/** 3) Import 버튼 (파일 업로드) */}
+      <Button variant="outline" size="sm" className="gap-2" onClick={handleImportClick}>
+        <Upload className="size-4" aria-hidden="true" />
+        <span className="hidden sm:inline">Import</span>
+      </Button>
+      {/*
+        실제로는 숨겨진 input과 연결:
+        - accept=".xlsx,.xls" 등으로 Excel 파일만 업로드 허용
+      */}
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept=".xlsx,.xls"
+        className="hidden"
+        onChange={onFileChange}
+      />
+
+      {/** 4) Export 버튼 */}
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={() =>
+          exportTableToExcel(table, {
+            filename: "tasks",
+            excludeColumns: ["select", "actions"],
+          })
+        }
+        className="gap-2"
+      >
+        <Download className="size-4" aria-hidden="true" />
+        <span className="hidden sm:inline">Export</span>
+      </Button>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/lib/tasks/table/tasks-table.tsx b/lib/tasks/table/tasks-table.tsx
new file mode 100644
index 00000000..ab448a7b
--- /dev/null
+++ b/lib/tasks/table/tasks-table.tsx
@@ -0,0 +1,197 @@
+"use client"
+
+import * as React from "react"
+import { tasks, type Task } from "@/db/schema/tasks"
+import type {
+  DataTableAdvancedFilterField,
+  DataTableFilterField,
+  DataTableRowAction,
+} from "@/types/table"
+
+import { toSentenceCase } from "@/lib/utils"
+import { useDataTable } from "@/hooks/use-data-table"
+import { DataTable } from "@/components/data-table/data-table"
+import { DataTableAdvancedToolbar } from "@/components/data-table/data-table-advanced-toolbar"
+import { DataTableToolbar } from "@/components/data-table/data-table-toolbar"
+
+import type {
+  getTaskPriorityCounts,
+  getTasks,
+  getTaskStatusCounts,
+} from "@/lib//tasks/service"
+import { getPriorityIcon, getStatusIcon } from "@/lib/tasks/utils"
+import { DeleteTasksDialog } from "./delete-tasks-dialog"
+import { useFeatureFlags } from "./feature-flags-provider"
+import { getColumns } from "./tasks-table-columns"
+import { TasksTableFloatingBar } from "./tasks-table-floating-bar"
+import { TasksTableToolbarActions } from "./tasks-table-toolbar-actions"
+import { UpdateTaskSheet } from "./update-task-sheet"
+
+interface TasksTableProps {
+  promises: Promise<
+    [
+      Awaited<ReturnType<typeof getTasks>>,
+      Awaited<ReturnType<typeof getTaskStatusCounts>>,
+      Awaited<ReturnType<typeof getTaskPriorityCounts>>,
+    ]
+  >
+}
+
+export function TasksTable({ promises }: TasksTableProps) {
+  const { featureFlags } = useFeatureFlags()
+
+  const [{ data, pageCount }, statusCounts, priorityCounts] =
+    React.use(promises)
+
+
+
+  const [rowAction, setRowAction] =
+    React.useState<DataTableRowAction<Task> | null>(null)
+
+  const columns = React.useMemo(
+    () => getColumns({ setRowAction }),
+    [setRowAction]
+  )
+
+  /**
+   * This component can render either a faceted filter or a search filter based on the `options` prop.
+   *
+   * @prop options - An array of objects, each representing a filter option. If provided, a faceted filter is rendered. If not, a search filter is rendered.
+   *
+   * Each `option` object has the following properties:
+   * @prop {string} label - The label for the filter option.
+   * @prop {string} value - The value for the filter option.
+   * @prop {React.ReactNode} [icon] - An optional icon to display next to the label.
+   * @prop {boolean} [withCount] - An optional boolean to display the count of the filter option.
+   */
+  const filterFields: DataTableFilterField<Task>[] = [
+    {
+      id: "title",
+      label: "Title",
+      placeholder: "Filter titles...",
+    },
+    {
+      id: "status",
+      label: "Status",
+      options: tasks.status.enumValues.map((status) => ({
+        label: toSentenceCase(status),
+        value: status,
+        icon: getStatusIcon(status),
+        count: statusCounts[status],
+      })),
+    },
+    {
+      id: "priority",
+      label: "Priority",
+      options: tasks.priority.enumValues.map((priority) => ({
+        label: toSentenceCase(priority),
+        value: priority,
+        icon: getPriorityIcon(priority),
+        count: priorityCounts[priority],
+      })),
+    },
+  ]
+
+  /**
+   * Advanced filter fields for the data table.
+   * These fields provide more complex filtering options compared to the regular filterFields.
+   *
+   * Key differences from regular filterFields:
+   * 1. More field types: Includes 'text', 'multi-select', 'date', and 'boolean'.
+   * 2. Enhanced flexibility: Allows for more precise and varied filtering options.
+   * 3. Used with DataTableAdvancedToolbar: Enables a more sophisticated filtering UI.
+   * 4. Date and boolean types: Adds support for filtering by date ranges and boolean values.
+   */
+  const advancedFilterFields: DataTableAdvancedFilterField<Task>[] = [
+    {
+      id: "code",
+      label: "Task",
+      type: "text",
+    },
+    {
+      id: "title",
+      label: "Title",
+      type: "text",
+    },
+    {
+      id: "label",
+      label: "Label",
+      type: "text",
+    },
+    {
+      id: "status",
+      label: "Status",
+      type: "multi-select",
+      options: tasks.status.enumValues.map((status) => ({
+        label: toSentenceCase(status),
+        value: status,
+        icon: getStatusIcon(status),
+        count: statusCounts[status],
+      })),
+    },
+    {
+      id: "priority",
+      label: "Priority",
+      type: "multi-select",
+      options: tasks.priority.enumValues.map((priority) => ({
+        label: toSentenceCase(priority),
+        value: priority,
+        icon: getPriorityIcon(priority),
+        count: priorityCounts[priority],
+      })),
+    },
+    {
+      id: "createdAt",
+      label: "Created at",
+      type: "date",
+    },
+  ]
+
+
+  const { table } = useDataTable({
+    data,
+    columns,
+    pageCount,
+    filterFields,
+    enablePinning: true,
+    enableAdvancedFilter: true,
+    initialState: {
+      sorting: [{ id: "createdAt", desc: true }],
+      columnPinning: { right: ["actions"] },
+    },
+    getRowId: (originalRow) => originalRow.id,
+    shallow: false,
+    clearOnDefault: true,
+  })
+
+  return (
+    <>
+      <DataTable
+        table={table}
+        floatingBar={<TasksTableFloatingBar table={table} />}
+      >
+     
+          <DataTableAdvancedToolbar
+            table={table}
+            filterFields={advancedFilterFields}
+            shallow={false}
+          >
+            <TasksTableToolbarActions table={table} />
+          </DataTableAdvancedToolbar>
+        
+      </DataTable>
+      <UpdateTaskSheet
+        open={rowAction?.type === "update"}
+        onOpenChange={() => setRowAction(null)}
+        task={rowAction?.row.original ?? null}
+      />
+      <DeleteTasksDialog
+        open={rowAction?.type === "delete"}
+        onOpenChange={() => setRowAction(null)}
+        tasks={rowAction?.row.original ? [rowAction?.row.original] : []}
+        showTrigger={false}
+        onSuccess={() => rowAction?.row.toggleSelected(false)}
+      />
+    </>
+  )
+}
diff --git a/lib/tasks/table/update-task-sheet.tsx b/lib/tasks/table/update-task-sheet.tsx
new file mode 100644
index 00000000..1f4f5aa8
--- /dev/null
+++ b/lib/tasks/table/update-task-sheet.tsx
@@ -0,0 +1,230 @@
+"use client"
+
+import * as React from "react"
+import { tasks, type Task } from "@/db/schema/tasks"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Loader } from "lucide-react"
+import { useForm } from "react-hook-form"
+import { toast } from "sonner"
+
+import { Button } from "@/components/ui/button"
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet"
+import { Textarea } from "@/components/ui/textarea"
+
+import { modifiTask } from "@/lib//tasks/service"
+import { updateTaskSchema, type UpdateTaskSchema } from "@/lib/tasks/validations"
+
+interface UpdateTaskSheetProps
+  extends React.ComponentPropsWithRef<typeof Sheet> {
+  task: Task | null
+}
+
+export function UpdateTaskSheet({ task, ...props }: UpdateTaskSheetProps) {
+  const [isUpdatePending, startUpdateTransition] = React.useTransition()
+
+  const form = useForm<UpdateTaskSchema>({
+    resolver: zodResolver(updateTaskSchema),
+    defaultValues: {
+      title: task?.title ?? "",
+      label: task?.label,
+      status: task?.status,
+      priority: task?.priority,
+    },
+  })
+
+  function onSubmit(input: UpdateTaskSchema) {
+    startUpdateTransition(async () => {
+      if (!task) return
+
+      const { error } = await modifiTask({
+        id: task.id,
+        ...input,
+      })
+
+      if (error) {
+        toast.error(error)
+        return
+      }
+
+      form.reset()
+      props.onOpenChange?.(false)
+      toast.success("Task updated")
+    })
+  }
+
+  return (
+    <Sheet {...props}>
+      <SheetContent className="flex flex-col gap-6 sm:max-w-md">
+        <SheetHeader className="text-left">
+          <SheetTitle>Update task</SheetTitle>
+          <SheetDescription>
+            Update the task details and save the changes
+          </SheetDescription>
+        </SheetHeader>
+        <Form {...form}>
+          <form
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="flex flex-col gap-4"
+          >
+            <FormField
+              control={form.control}
+              name="title"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Title</FormLabel>
+                  <FormControl>
+                    <Textarea
+                      placeholder="Do a kickflip"
+                      className="resize-none"
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="label"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Label</FormLabel>
+                  <Select
+                    onValueChange={field.onChange}
+                    defaultValue={field.value}
+                  >
+                    <FormControl>
+                      <SelectTrigger className="capitalize">
+                        <SelectValue placeholder="Select a label" />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent>
+                      <SelectGroup>
+                        {tasks.label.enumValues.map((item) => (
+                          <SelectItem
+                            key={item}
+                            value={item}
+                            className="capitalize"
+                          >
+                            {item}
+                          </SelectItem>
+                        ))}
+                      </SelectGroup>
+                    </SelectContent>
+                  </Select>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="status"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Status</FormLabel>
+                  <Select
+                    onValueChange={field.onChange}
+                    defaultValue={field.value}
+                  >
+                    <FormControl>
+                      <SelectTrigger className="capitalize">
+                        <SelectValue placeholder="Select a status" />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent>
+                      <SelectGroup>
+                        {tasks.status.enumValues.map((item) => (
+                          <SelectItem
+                            key={item}
+                            value={item}
+                            className="capitalize"
+                          >
+                            {item}
+                          </SelectItem>
+                        ))}
+                      </SelectGroup>
+                    </SelectContent>
+                  </Select>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="priority"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Priority</FormLabel>
+                  <Select
+                    onValueChange={field.onChange}
+                    defaultValue={field.value}
+                  >
+                    <FormControl>
+                      <SelectTrigger className="capitalize">
+                        <SelectValue placeholder="Select a priority" />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent>
+                      <SelectGroup>
+                        {tasks.priority.enumValues.map((item) => (
+                          <SelectItem
+                            key={item}
+                            value={item}
+                            className="capitalize"
+                          >
+                            {item}
+                          </SelectItem>
+                        ))}
+                      </SelectGroup>
+                    </SelectContent>
+                  </Select>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <SheetFooter className="gap-2 pt-2 sm:space-x-0">
+              <SheetClose asChild>
+                <Button type="button" variant="outline">
+                  Cancel
+                </Button>
+              </SheetClose>
+              <Button disabled={isUpdatePending}>
+                {isUpdatePending && (
+                  <Loader
+                    className="mr-2 size-4 animate-spin"
+                    aria-hidden="true"
+                  />
+                )}
+                Save
+              </Button>
+            </SheetFooter>
+          </form>
+        </Form>
+      </SheetContent>
+    </Sheet>
+  )
+}
diff --git a/lib/tasks/utils.ts b/lib/tasks/utils.ts
new file mode 100644
index 00000000..ea4425de
--- /dev/null
+++ b/lib/tasks/utils.ts
@@ -0,0 +1,80 @@
+import { tasks, type Task } from "@/db/schema/tasks"
+import { faker } from "@faker-js/faker"
+import {
+  ArrowDownIcon,
+  ArrowRightIcon,
+  ArrowUpIcon,
+  AwardIcon,
+  CheckCircle2,
+  CircleHelp,
+  CircleIcon,
+  CircleX,
+  PencilIcon,
+  SearchIcon,
+  SendIcon,
+  Timer,
+} from "lucide-react"
+import { customAlphabet } from "nanoid"
+
+import { generateId } from "@/lib/id"
+import { Rfq } from "@/db/schema/rfq"
+
+export function generateRandomTask(): Task {
+  return {
+    id: generateId("task"),
+    code: `TASK-${customAlphabet("0123456789", 4)()}`,
+    title: faker.hacker
+      .phrase()
+      .replace(/^./, (letter) => letter.toUpperCase()),
+    status: faker.helpers.shuffle(tasks.status.enumValues)[0] ?? "todo",
+    label: faker.helpers.shuffle(tasks.label.enumValues)[0] ?? "bug",
+    priority: faker.helpers.shuffle(tasks.priority.enumValues)[0] ?? "low",
+    archived: faker.datatype.boolean({ probability: 0.2 }),
+    createdAt: new Date(),
+    updatedAt: new Date(),
+  }
+}
+
+/**
+ * Returns the appropriate status icon based on the provided status.
+ * @param status - The status of the task.
+ * @returns A React component representing the status icon.
+ */
+export function getStatusIcon(status: Task["status"]) {
+  const statusIcons = {
+    canceled: CircleX,
+    done: CheckCircle2,
+    "in-progress": Timer,
+    todo: CircleHelp,
+  }
+
+  return statusIcons[status] || CircleIcon
+}
+
+export function getRFQStatusIcon(status: Rfq["status"]) {
+  const statusIcons = {
+    DRAFT: PencilIcon,
+    PUBLISHED: SendIcon,
+    EVALUATION: SearchIcon,
+    AWARDED: AwardIcon,
+  }
+
+
+
+  return statusIcons[status] || CircleIcon
+}
+
+/**
+ * Returns the appropriate priority icon based on the provided priority.
+ * @param priority - The priority of the task.
+ * @returns A React component representing the priority icon.
+ */
+export function getPriorityIcon(priority: Task["priority"]) {
+  const priorityIcons = {
+    high: ArrowUpIcon,
+    low: ArrowDownIcon,
+    medium: ArrowRightIcon,
+  }
+
+  return priorityIcons[priority] || CircleIcon
+}
diff --git a/lib/tasks/validations.ts b/lib/tasks/validations.ts
new file mode 100644
index 00000000..fea313f3
--- /dev/null
+++ b/lib/tasks/validations.ts
@@ -0,0 +1,50 @@
+import { tasks, type Task } from "@/db/schema/tasks";
+import {
+  createSearchParamsCache,
+  parseAsArrayOf,
+  parseAsInteger,
+  parseAsString,
+  parseAsStringEnum,
+} from "nuqs/server"
+import * as z from "zod"
+
+import { getFiltersStateParser, getSortingStateParser } from "@/lib/parsers"
+
+export const searchParamsCache = createSearchParamsCache({
+  flags: parseAsArrayOf(z.enum(["advancedTable", "floatingBar"])).withDefault(
+    []
+  ),
+  page: parseAsInteger.withDefault(1),
+  perPage: parseAsInteger.withDefault(10),
+  sort: getSortingStateParser<Task>().withDefault([
+    { id: "createdAt", desc: true },
+  ]),
+  title: parseAsString.withDefault(""),
+  status: parseAsArrayOf(z.enum(tasks.status.enumValues)).withDefault([]),
+  priority: parseAsArrayOf(z.enum(tasks.priority.enumValues)).withDefault([]),
+  from: parseAsString.withDefault(""),
+  to: parseAsString.withDefault(""),
+  // advanced filter
+  filters: getFiltersStateParser().withDefault([]),
+  joinOperator: parseAsStringEnum(["and", "or"]).withDefault("and"),
+  search: parseAsString.withDefault(""),
+
+})
+
+export const createTaskSchema = z.object({
+  title: z.string(),
+  label: z.enum(tasks.label.enumValues),
+  status: z.enum(tasks.status.enumValues),
+  priority: z.enum(tasks.priority.enumValues),
+})
+
+export const updateTaskSchema = z.object({
+  title: z.string().optional(),
+  label: z.enum(tasks.label.enumValues).optional(),
+  status: z.enum(tasks.status.enumValues).optional(),
+  priority: z.enum(tasks.priority.enumValues).optional(),
+})
+
+export type GetTasksSchema = Awaited<ReturnType<typeof searchParamsCache.parse>>
+export type CreateTaskSchema = z.infer<typeof createTaskSchema>
+export type UpdateTaskSchema = z.infer<typeof updateTaskSchema>
diff --git a/lib/tbe/service.ts b/lib/tbe/service.ts
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/lib/tbe/service.ts
diff --git a/lib/tbe/table/comments-sheet.tsx b/lib/tbe/table/comments-sheet.tsx
new file mode 100644
index 00000000..7fcde35d
--- /dev/null
+++ b/lib/tbe/table/comments-sheet.tsx
@@ -0,0 +1,334 @@
+"use client"
+
+import * as React from "react"
+import { useForm, useFieldArray } from "react-hook-form"
+import { z } from "zod"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Loader, Download, X } from "lucide-react"
+import prettyBytes from "pretty-bytes"
+import { toast } from "sonner"
+
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet"
+import { Button } from "@/components/ui/button"
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form"
+import {
+  Textarea,
+} from "@/components/ui/textarea"
+
+import {
+  Dropzone,
+  DropzoneZone,
+  DropzoneUploadIcon,
+  DropzoneTitle,
+  DropzoneDescription,
+  DropzoneInput
+} from "@/components/ui/dropzone"
+
+import {
+  Table,
+  TableHeader,
+  TableRow,
+  TableHead,
+  TableBody,
+  TableCell
+} from "@/components/ui/table"
+
+// DB 스키마에서 필요한 타입들을 가져온다고 가정
+// (실제 프로젝트에 맞춰 import를 수정하세요.)
+import { RfqWithAll } from "@/db/schema/rfq"
+import { formatDate } from "@/lib/utils"
+import { createRfqCommentWithAttachments } from "@/lib/rfqs/service"
+
+// 코멘트 + 첨부파일 구조 (단순 예시)
+// 실제 DB 스키마에 맞춰 조정
+export interface TbeComment {
+  id: number
+  commentText: string
+  commentedBy?: number
+  createdAt?: string | Date
+  attachments?: {
+    id: number
+    fileName: string
+    filePath: string
+  }[]
+}
+
+interface CommentSheetProps extends React.ComponentPropsWithRef<typeof Sheet> {
+  /** 코멘트를 작성할 RFQ 정보 */
+  /** 이미 존재하는 모든 코멘트 목록 (서버에서 불러와 주입) */
+  initialComments?: TbeComment[]
+
+  /** 사용자(작성자) ID (로그인 세션 등에서 가져옴) */
+  currentUserId: number
+  rfqId:number
+  vendorId:number
+  /** 댓글 저장 후 갱신용 콜백 (옵션) */
+  onCommentsUpdated?: (comments: TbeComment[]) => void
+}
+
+// 새 코멘트 작성 폼 스키마
+const commentFormSchema = z.object({
+  commentText: z.string().min(1, "댓글을 입력하세요."),
+  newFiles: z.array(z.any()).optional() // File[]
+})
+type CommentFormValues = z.infer<typeof commentFormSchema>
+
+const MAX_FILE_SIZE = 30e6 // 30MB
+
+export function CommentSheet({
+  rfqId,
+  vendorId,
+  initialComments = [],
+  currentUserId,
+  onCommentsUpdated,
+  ...props
+}: CommentSheetProps) {
+  const [comments, setComments] = React.useState<TbeComment[]>(initialComments)
+  const [isPending, startTransition] = React.useTransition()
+
+  React.useEffect(() => {
+    setComments(initialComments)
+  }, [initialComments])
+  
+
+  // RHF 세팅
+  const form = useForm<CommentFormValues>({
+    resolver: zodResolver(commentFormSchema),
+    defaultValues: {
+      commentText: "",
+      newFiles: []
+    }
+  })
+
+  // formFieldArray 예시 (파일 목록)
+  const { fields: newFileFields, append, remove } = useFieldArray({
+    control: form.control,
+    name: "newFiles"
+  })
+
+  // 1) 기존 코멘트 + 첨부 보여주기
+  // 간단히 테이블 하나로 표현
+  // 실제로는 Bubble 형태의 UI, Accordion, Timeline 등 다양하게 구성할 수 있음
+  function renderExistingComments() {
+    if (comments.length === 0) {
+      return <p className="text-sm text-muted-foreground">No comments yet</p>
+    }
+
+    return (
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead className="w-1/2">Comment</TableHead>
+            <TableHead>Attachments</TableHead>
+            <TableHead>Created At</TableHead>
+            <TableHead>Created By</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {comments.map((c) => (
+            <TableRow key={c.id}>
+              <TableCell>{c.commentText}</TableCell>
+              <TableCell>
+                {/* 첨부파일 표시 */}
+                {(!c.attachments || c.attachments.length === 0) && (
+                  <span className="text-sm text-muted-foreground">No files</span>
+                )}
+                {c.attachments && c.attachments.length > 0 && (
+                  <div className="flex flex-col gap-1">
+                    {c.attachments.map((att) => (
+                      <div key={att.id} className="flex items-center gap-2">
+                        <a
+                          href={att.filePath}
+                          download
+                          target="_blank"
+                          rel="noreferrer"
+                          className="inline-flex items-center gap-1 text-blue-600 underline"
+                        >
+                          <Download className="h-4 w-4" />
+                          {att.fileName}
+                        </a>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </TableCell>
+              <TableCell> { c.createdAt ? formatDate(c.createdAt): "-"}</TableCell>
+              <TableCell>
+                {c.commentedBy ?? "-"}
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    )
+  }
+
+  // 2) 새 파일 Drop
+  function handleDropAccepted(files: File[]) {
+    // 드롭된 File[]을 RHF field array에 추가
+    const toAppend = files.map((f) => f)
+    append(toAppend)
+  }
+
+
+  // 3) 저장(Submit)
+  async function onSubmit(data: CommentFormValues) {
+
+    if (!rfqId) return
+    startTransition(async () => {
+      try {
+        // 서버 액션 호출
+        const res = await createRfqCommentWithAttachments({
+          rfqId: rfqId,
+          vendorId: vendorId, // 필요시 세팅
+          commentText: data.commentText,
+          commentedBy: currentUserId,
+          evaluationId: null, // 필요시 세팅
+          files: data.newFiles
+        })
+
+        if (!res.ok) {
+          throw new Error("Failed to create comment")
+        }
+
+        toast.success("Comment created")
+
+        // 새 코멘트를 다시 불러오거나,
+        // 여기서는 임시로 "새로운 코멘트가 추가됐다" 라고 가정하여 클라이언트에서 상태 업데이트
+        const newComment: TbeComment = {
+          id: res.commentId, // 서버에서 반환된 commentId
+          commentText: data.commentText,
+          commentedBy: currentUserId,
+          createdAt: new Date().toISOString(),
+          attachments: (data.newFiles?.map((f, idx) => ({
+            id: Math.random() * 100000,
+            fileName: f.name,
+            filePath: "/uploads/" + f.name,
+          })) || [])
+        }
+        setComments((prev) => [...prev, newComment])
+        onCommentsUpdated?.([...comments, newComment])
+
+        // 폼 리셋
+        form.reset()
+      } catch (err: any) {
+        console.error(err)
+        toast.error("Error: " + err.message)
+      }
+    })
+  }
+
+  return (
+    <Sheet {...props}>
+      <SheetContent className="flex flex-col gap-6 sm:max-w-lg">
+        <SheetHeader className="text-left">
+          <SheetTitle>Comments</SheetTitle>
+          <SheetDescription>
+            필요시 첨부파일과 함께 문의/코멘트를 남길 수 있습니다.
+          </SheetDescription>
+        </SheetHeader>
+
+        {/* 기존 코멘트 목록 */}
+        <div className="max-h-[300px] overflow-y-auto">
+          {renderExistingComments()}
+        </div>
+
+        {/* 새 코멘트 작성 Form */}
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col gap-4">
+            <FormField
+              control={form.control}
+              name="commentText"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>New Comment</FormLabel>
+                  <FormControl>
+                    <Textarea
+                      placeholder="Enter your comment..."
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {/* Dropzone (파일 첨부) */}
+            <Dropzone
+              maxSize={MAX_FILE_SIZE}
+              onDropAccepted={handleDropAccepted}
+              onDropRejected={(rej) => {
+                toast.error("File rejected: " + (rej[0]?.file?.name || ""))
+              }}
+            >
+              {({ maxSize }) => (
+                <DropzoneZone className="flex justify-center">
+                  <DropzoneInput />
+                  <div className="flex items-center gap-6">
+                    <DropzoneUploadIcon />
+                    <div className="grid gap-0.5">
+                      <DropzoneTitle>Drop to attach files</DropzoneTitle>
+                      <DropzoneDescription>
+                        Max size: {prettyBytes(maxSize || 0)}
+                      </DropzoneDescription>
+                    </div>
+                  </div>
+                </DropzoneZone>
+              )}
+            </Dropzone>
+
+            {/* 선택된 파일 목록 */}
+            {newFileFields.length > 0 && (
+              <div className="flex flex-col gap-2">
+                {newFileFields.map((field, idx) => {
+                  const file = form.getValues(`newFiles.${idx}`)
+                  if (!file) return null
+                  return (
+                    <div key={field.id} className="flex items-center justify-between border rounded p-2">
+                      <span className="text-sm">{file.name} ({prettyBytes(file.size)})</span>
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        type="button"
+                        onClick={() => remove(idx)}
+                      >
+                        <X className="h-4 w-4" />
+                      </Button>
+                    </div>
+                  )
+                })}
+              </div>
+            )}
+
+            <SheetFooter className="gap-2 pt-4">
+              <SheetClose asChild>
+                <Button type="button" variant="outline">
+                  Cancel
+                </Button>
+              </SheetClose>
+              <Button disabled={isPending}>
+                {isPending && <Loader className="mr-2 h-4 w-4 animate-spin" />}
+                Save
+              </Button>
+            </SheetFooter>
+          </form>
+        </Form>
+      </SheetContent>
+    </Sheet>
+  )
+}
\ No newline at end of file
diff --git a/lib/tbe/table/feature-flags-provider.tsx b/lib/tbe/table/feature-flags-provider.tsx
new file mode 100644
index 00000000..81131894
--- /dev/null
+++ b/lib/tbe/table/feature-flags-provider.tsx
@@ -0,0 +1,108 @@
+"use client"
+
+import * as React from "react"
+import { useQueryState } from "nuqs"
+
+import { dataTableConfig, type DataTableConfig } from "@/config/data-table"
+import { cn } from "@/lib/utils"
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+
+type FeatureFlagValue = DataTableConfig["featureFlags"][number]["value"]
+
+interface FeatureFlagsContextProps {
+  featureFlags: FeatureFlagValue[]
+  setFeatureFlags: (value: FeatureFlagValue[]) => void
+}
+
+const FeatureFlagsContext = React.createContext<FeatureFlagsContextProps>({
+  featureFlags: [],
+  setFeatureFlags: () => {},
+})
+
+export function useFeatureFlags() {
+  const context = React.useContext(FeatureFlagsContext)
+  if (!context) {
+    throw new Error(
+      "useFeatureFlags must be used within a FeatureFlagsProvider"
+    )
+  }
+  return context
+}
+
+interface FeatureFlagsProviderProps {
+  children: React.ReactNode
+}
+
+export function FeatureFlagsProvider({ children }: FeatureFlagsProviderProps) {
+  const [featureFlags, setFeatureFlags] = useQueryState<FeatureFlagValue[]>(
+    "flags",
+    {
+      defaultValue: [],
+      parse: (value) => value.split(",") as FeatureFlagValue[],
+      serialize: (value) => value.join(","),
+      eq: (a, b) =>
+        a.length === b.length && a.every((value, index) => value === b[index]),
+      clearOnDefault: true,
+      shallow: false,
+    }
+  )
+
+  return (
+    <FeatureFlagsContext.Provider
+      value={{
+        featureFlags,
+        setFeatureFlags: (value) => void setFeatureFlags(value),
+      }}
+    >
+      <div className="w-full overflow-x-auto">
+        <ToggleGroup
+          type="multiple"
+          variant="outline"
+          size="sm"
+          value={featureFlags}
+          onValueChange={(value: FeatureFlagValue[]) => setFeatureFlags(value)}
+          className="w-fit gap-0"
+        >
+          {dataTableConfig.featureFlags.map((flag, index) => (
+            <Tooltip key={flag.value}>
+              <ToggleGroupItem
+                value={flag.value}
+                className={cn(
+                  "gap-2 whitespace-nowrap rounded-none px-3 text-xs data-[state=on]:bg-accent/70 data-[state=on]:hover:bg-accent/90",
+                  {
+                    "rounded-l-sm border-r-0": index === 0,
+                    "rounded-r-sm":
+                      index === dataTableConfig.featureFlags.length - 1,
+                  }
+                )}
+                asChild
+              >
+                <TooltipTrigger>
+                  <flag.icon className="size-3.5 shrink-0" aria-hidden="true" />
+                  {flag.label}
+                </TooltipTrigger>
+              </ToggleGroupItem>
+              <TooltipContent
+                align="start"
+                side="bottom"
+                sideOffset={6}
+                className="flex max-w-60 flex-col space-y-1.5 border bg-background py-2 font-semibold text-foreground"
+              >
+                <div>{flag.tooltipTitle}</div>
+                <div className="text-xs text-muted-foreground">
+                  {flag.tooltipDescription}
+                </div>
+              </TooltipContent>
+            </Tooltip>
+          ))}
+        </ToggleGroup>
+      </div>
+      {children}
+    </FeatureFlagsContext.Provider>
+  )
+}
diff --git a/lib/tbe/table/file-dialog.tsx b/lib/tbe/table/file-dialog.tsx
new file mode 100644
index 00000000..b569f2b1
--- /dev/null
+++ b/lib/tbe/table/file-dialog.tsx
@@ -0,0 +1,141 @@
+"use client"
+
+import * as React from "react"
+import { Download, X } from "lucide-react"
+import { toast } from "sonner"
+
+import { getErrorMessage } from "@/lib/handle-error"
+import { formatDateTime } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+
+import {
+  FileList,
+  FileListItem,
+  FileListIcon,
+  FileListInfo,
+  FileListName,
+  FileListDescription,
+  FileListAction,
+} from "@/components/ui/file-list"
+import { getTbeFilesForVendor } from "@/lib/rfqs/service"
+
+interface TBEFileDialogProps {
+  isOpen: boolean
+  onOpenChange: (open: boolean) => void
+  tbeId: number
+  vendorId: number
+  rfqId: number
+  onRefresh?: () => void
+}
+
+export function TBEFileDialog({
+  isOpen,
+  onOpenChange,
+  vendorId,
+  rfqId,
+  onRefresh,
+}: TBEFileDialogProps) {
+  const [submittedFiles, setSubmittedFiles] = React.useState<any[]>([])
+  const [isFetchingFiles, setIsFetchingFiles] = React.useState(false)
+
+
+  // Fetch submitted files when dialog opens
+  React.useEffect(() => {
+    if (isOpen && rfqId && vendorId) {
+      fetchSubmittedFiles()
+    }
+  }, [isOpen, rfqId, vendorId])
+
+  // Fetch submitted files using the service function
+  const fetchSubmittedFiles = async () => {
+    if (!rfqId || !vendorId) return
+
+    setIsFetchingFiles(true)
+    try {
+      const { files, error } = await getTbeFilesForVendor(rfqId, vendorId)
+      
+      if (error) {
+        throw new Error(error)
+      }
+      
+      setSubmittedFiles(files)
+    } catch (error) {
+      toast.error("Failed to load files: " + getErrorMessage(error))
+    } finally {
+      setIsFetchingFiles(false)
+    }
+  }
+
+  // Download submitted file
+  const downloadSubmittedFile = async (file: any) => {
+    try {
+      const response = await fetch(`/api/file/${file.id}/download`)
+      if (!response.ok) {
+        throw new Error("Failed to download file")
+      }
+
+      const blob = await response.blob()
+      const url = window.URL.createObjectURL(blob)
+      const a = document.createElement("a")
+      a.href = url
+      a.download = file.fileName
+      document.body.appendChild(a)
+      a.click()
+      window.URL.revokeObjectURL(url)
+      document.body.removeChild(a)
+    } catch (error) {
+      toast.error("Failed to download file: " + getErrorMessage(error))
+    }
+  }
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle>TBE 응답 파일</DialogTitle>
+          <DialogDescription>제출된 파일 목록을 확인하고 다운로드하세요.</DialogDescription>
+        </DialogHeader>
+
+        {/* 제출된 파일 목록 */}
+        {isFetchingFiles ? (
+          <div className="flex justify-center items-center py-8">
+            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
+          </div>
+        ) : submittedFiles.length > 0 ? (
+          <div className="grid gap-2">
+            <FileList>
+              {submittedFiles.map((file) => (
+                <FileListItem key={file.id} className="flex items-center justify-between gap-3">
+                  <div className="flex items-center gap-3 flex-1">
+                    <FileListIcon className="flex-shrink-0" />
+                    <FileListInfo className="flex-1 min-w-0">
+                      <FileListName className="text-sm font-medium truncate">{file.fileName}</FileListName>
+                      <FileListDescription className="text-xs text-muted-foreground">
+                        {file.uploadedAt ? formatDateTime(file.uploadedAt) : ""}
+                      </FileListDescription>
+                    </FileListInfo>
+                  </div>
+                  <FileListAction className="flex-shrink-0 ml-2">
+                    <Button variant="ghost" size="icon" onClick={() => downloadSubmittedFile(file)}>
+                      <Download className="h-4 w-4" />
+                      <span className="sr-only">파일 다운로드</span>
+                    </Button>
+                  </FileListAction>
+                </FileListItem>
+              ))}
+            </FileList>
+          </div>
+        ) : (
+          <div className="text-center py-8 text-muted-foreground">제출된 파일이 없습니다.</div>
+        )}
+      </DialogContent>
+    </Dialog>
+  )
+}
\ No newline at end of file
diff --git a/lib/tbe/table/invite-vendors-dialog.tsx b/lib/tbe/table/invite-vendors-dialog.tsx
new file mode 100644
index 00000000..87467e57
--- /dev/null
+++ b/lib/tbe/table/invite-vendors-dialog.tsx
@@ -0,0 +1,203 @@
+"use client"
+
+import * as React from "react"
+import { type Row } from "@tanstack/react-table"
+import { Loader, Send } from "lucide-react"
+import { toast } from "sonner"
+
+import { useMediaQuery } from "@/hooks/use-media-query"
+import { Button } from "@/components/ui/button"
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/components/ui/drawer"
+
+import { Input } from "@/components/ui/input"
+
+import { VendorWithTbeFields } from "@/config/vendorTbeColumnsConfig"
+import { inviteTbeVendorsAction } from "@/lib/rfqs/service"
+
+interface InviteVendorsDialogProps
+  extends React.ComponentPropsWithoutRef<typeof Dialog> {
+  vendors: Row<VendorWithTbeFields>["original"][]
+  rfqId: number
+  showTrigger?: boolean
+  onSuccess?: () => void
+}
+
+export function InviteVendorsDialog({
+  vendors,
+  rfqId,
+  showTrigger = true,
+  onSuccess,
+  ...props
+}: InviteVendorsDialogProps) {
+  const [isInvitePending, startInviteTransition] = React.useTransition()
+
+
+  // multiple 파일을 받을 state
+  const [files, setFiles] = React.useState<FileList | null>(null)
+
+  // 미디어쿼리 (desktop 여부)
+  const isDesktop = useMediaQuery("(min-width: 640px)")
+
+  function onInvite() {
+    startInviteTransition(async () => {
+      // 파일이 선택되지 않았다면 에러
+      if (!files || files.length === 0) {
+        toast.error("Please attach TBE files before inviting.")
+        return
+      }
+
+      // FormData 생성
+      const formData = new FormData()
+      formData.append("rfqId", String(rfqId))
+      vendors.forEach((vendor) => {
+        formData.append("vendorIds[]", String(vendor.id))
+      })
+
+      // multiple 파일
+      for (let i = 0; i < files.length; i++) {
+        formData.append("tbeFiles", files[i]) // key는 동일하게 "tbeFiles"
+      }
+
+      // 서버 액션 호출
+      const { error } = await inviteTbeVendorsAction(formData)
+
+      if (error) {
+        toast.error(error)
+        return
+      }
+
+      // 성공
+      props.onOpenChange?.(false)
+      toast.success("Vendors invited with TBE!")
+      onSuccess?.()
+    })
+  }
+
+  // 파일 선택 UI
+  const fileInput = (
+    <div className="mb-4">
+      <label className="mb-2 block font-medium">TBE Sheets</label>
+      <Input
+        type="file"
+        multiple
+        onChange={(e) => {
+          setFiles(e.target.files)
+        }}
+      />
+    </div>
+  )
+
+  // Desktop Dialog
+  if (isDesktop) {
+    return (
+      <Dialog {...props}>
+        {showTrigger ? (
+          <DialogTrigger asChild>
+            <Button variant="outline" size="sm">
+              <Send className="mr-2 size-4" aria-hidden="true" />
+              Invite ({vendors.length})
+            </Button>
+          </DialogTrigger>
+        ) : null}
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Are you absolutely sure?</DialogTitle>
+            <DialogDescription>
+              This action cannot be undone. This will permanently invite{" "}
+              <span className="font-medium">{vendors.length}</span>
+              {vendors.length === 1 ? " vendor" : " vendors"}. 파일 첨부가 필수이므로 파일을 첨부해야지 버튼이 활성화됩니다.
+            </DialogDescription>
+          </DialogHeader>
+
+          {/* 파일 첨부 */}
+          {fileInput}
+
+          <DialogFooter className="gap-2 sm:space-x-0">
+            <DialogClose asChild>
+              <Button variant="outline">Cancel</Button>
+            </DialogClose>
+            <Button
+              aria-label="Invite selected rows"
+              variant="destructive"
+              onClick={onInvite}
+              // 파일이 없거나 초대 진행중이면 비활성화
+              disabled={isInvitePending || !files || files.length === 0}
+            >
+              {isInvitePending && (
+                <Loader
+                  className="mr-2 size-4 animate-spin"
+                  aria-hidden="true"
+                />
+              )}
+              Invite
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    )
+  }
+
+  // Mobile Drawer
+  return (
+    <Drawer {...props}>
+      {showTrigger ? (
+        <DrawerTrigger asChild>
+          <Button variant="outline" size="sm">
+            <Send className="mr-2 size-4" aria-hidden="true" />
+            Invite ({vendors.length})
+          </Button>
+        </DrawerTrigger>
+      ) : null}
+      <DrawerContent>
+        <DrawerHeader>
+          <DrawerTitle>Are you absolutely sure?</DrawerTitle>
+          <DrawerDescription>
+            This action cannot be undone. This will permanently invite{" "}
+            <span className="font-medium">{vendors.length}</span>
+            {vendors.length === 1 ? " vendor" : " vendors"}.
+          </DrawerDescription>
+        </DrawerHeader>
+
+        {/* 파일 첨부 */}
+        {fileInput}
+
+        <DrawerFooter className="gap-2 sm:space-x-0">
+          <DrawerClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </DrawerClose>
+          <Button
+            aria-label="Invite selected rows"
+            variant="destructive"
+            onClick={onInvite}
+            // 파일이 없거나 초대 진행중이면 비활성화
+            disabled={isInvitePending || !files || files.length === 0}
+          >
+            {isInvitePending && (
+              <Loader className="mr-2 size-4 animate-spin" aria-hidden="true" />
+            )}
+            Invite
+          </Button>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  )
+}
\ No newline at end of file
diff --git a/lib/tbe/table/tbe-table-columns.tsx b/lib/tbe/table/tbe-table-columns.tsx
new file mode 100644
index 00000000..f2bc2ced
--- /dev/null
+++ b/lib/tbe/table/tbe-table-columns.tsx
@@ -0,0 +1,249 @@
+"use client"
+
+import * as React from "react"
+import { type DataTableRowAction } from "@/types/table"
+import { type ColumnDef } from "@tanstack/react-table"
+import { Download, Ellipsis, MessageSquare } from "lucide-react"
+import { toast } from "sonner"
+
+import { getErrorMessage } from "@/lib/handle-error"
+import { formatDate } from "@/lib/utils"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Checkbox } from "@/components/ui/checkbox"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header"
+import { useRouter } from "next/navigation"
+
+import {
+  VendorTbeColumnConfig,
+  vendorTbeColumnsConfig,
+  VendorWithTbeFields,
+} from "@/config/vendorTbeColumnsConfig"
+
+type NextRouter = ReturnType<typeof useRouter>
+
+interface GetColumnsProps {
+  setRowAction: React.Dispatch<React.SetStateAction<DataTableRowAction<VendorWithTbeFields> | null>>
+  router: NextRouter
+  openCommentSheet: (vendorId: number, rfqId: number) => void
+  openFilesDialog: (tbeId: number, vendorId: number, rfqId: number) => void
+}
+
+
+/**
+ * tanstack table 컬럼 정의 (중첩 헤더 버전)
+ */
+export function getColumns({
+  setRowAction,
+  router,
+  openCommentSheet,
+  openFilesDialog
+}: GetColumnsProps): ColumnDef<VendorWithTbeFields>[] {
+  // ----------------------------------------------------------------
+  // 1) Select 컬럼 (체크박스)
+  // ----------------------------------------------------------------
+  const selectColumn: ColumnDef<VendorWithTbeFields> = {
+    id: "select",
+    header: ({ table }) => (
+      <Checkbox
+        checked={
+          table.getIsAllPageRowsSelected() ||
+          (table.getIsSomePageRowsSelected() && "indeterminate")
+        }
+        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+        aria-label="Select all"
+        className="translate-y-0.5"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={(value) => row.toggleSelected(!!value)}
+        aria-label="Select row"
+        className="translate-y-0.5"
+      />
+    ),
+    size: 40,
+    enableSorting: false,
+    enableHiding: false,
+  }
+
+  // ----------------------------------------------------------------
+  // 2) 그룹화(Nested) 컬럼 구성
+  // ----------------------------------------------------------------
+  const groupMap: Record<string, ColumnDef<VendorWithTbeFields>[]> = {}
+
+  vendorTbeColumnsConfig.forEach((cfg) => {
+    const groupName = cfg.group || "_noGroup"
+    if (!groupMap[groupName]) {
+      groupMap[groupName] = []
+    }
+
+    // childCol: ColumnDef<VendorWithTbeFields>
+    const childCol: ColumnDef<VendorWithTbeFields> = {
+      accessorKey: cfg.id,
+      enableResizing: true,
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title={cfg.label} />
+      ),
+      meta: {
+        excelHeader: cfg.excelHeader,
+        group: cfg.group,
+        type: cfg.type,
+      },
+      // 셀 렌더링
+      cell: ({ row, getValue }) => {
+        // 1) 필드값 가져오기
+        const val = getValue()
+
+        if (cfg.id === "vendorStatus") {
+          const statusVal = row.original.vendorStatus
+          if (!statusVal) return null
+          // const Icon = getStatusIcon(statusVal)
+          return (
+            <Badge variant="outline">
+              {statusVal}
+            </Badge>
+          )
+        }
+
+
+        if (cfg.id === "rfqVendorStatus") {
+          const statusVal = row.original.rfqVendorStatus
+          if (!statusVal) return null
+          // const Icon = getStatusIcon(statusVal)
+          const variant = statusVal ==="INVITED"?"default" :statusVal ==="DECLINED"?"destructive":statusVal ==="ACCEPTED"?"secondary":"outline"
+          return (
+            <Badge variant={variant}>
+              {statusVal}
+            </Badge>
+          )
+        }
+
+        // 예) TBE Updated (날짜)
+        if (cfg.id === "tbeUpdated") {
+          const dateVal = val as Date | undefined
+          if (!dateVal) return null
+          return formatDate(dateVal)
+        }
+
+        // 그 외 필드는 기본 값 표시
+        return val ?? ""
+      },
+    }
+
+    groupMap[groupName].push(childCol)
+  })
+
+  // groupMap → nestedColumns
+  const nestedColumns: ColumnDef<VendorWithTbeFields>[] = []
+  Object.entries(groupMap).forEach(([groupName, colDefs]) => {
+    if (groupName === "_noGroup") {
+      nestedColumns.push(...colDefs)
+    } else {
+      nestedColumns.push({
+        id: groupName,
+        header: groupName,
+        columns: colDefs,
+      })
+    }
+  })
+// 파일 칼럼
+const filesColumn: ColumnDef<VendorWithTbeFields> = {
+  id: "files",
+  header: ({ column }) => (
+    <DataTableColumnHeaderSimple column={column} title="Response Files" />
+  ),
+  cell: ({ row }) => {
+    const vendor = row.original
+    const filesCount = vendor.files?.length ?? 0
+
+    function handleClick() {
+      // setRowAction으로 타입만 설정하고 끝내는 방법도 가능하지만
+      // 혹은 바로 openFilesDialog()를 호출해도 됨.
+      setRowAction({ row, type: "files" })
+      // 필요한 값을 직접 호출해서 넘겨줄 수도 있음.
+      openFilesDialog(
+        vendor.tbeId ?? 0,
+        vendor.vendorId ?? 0,
+        vendor.rfqId ?? 0,
+      )
+    }
+
+    return (
+      <Button
+        variant="ghost"
+        size="sm"
+        className="relative h-8 w-8 p-0 group"
+        onClick={handleClick}
+        aria-label={filesCount > 0 ? `View ${filesCount} files` : "Upload file"}
+      >
+        <Download className="h-4 w-4" />
+        {filesCount > 0 && (
+          <Badge variant="secondary" className="absolute -top-1 -right-1 h-4 min-w-[1rem] p-0 text-[0.625rem] leading-none flex items-center justify-center">
+            {filesCount}
+          </Badge>
+        )}
+      </Button>
+    )
+  },
+  enableSorting: false,
+  maxSize: 80,
+}
+
+// 댓글 칼럼
+const commentsColumn: ColumnDef<VendorWithTbeFields> = {
+  id: "comments",
+  header: ({ column }) => (
+    <DataTableColumnHeaderSimple column={column} title="Comments" />
+  ),
+  cell: ({ row }) => {
+    const vendor = row.original
+    const commCount = vendor.comments?.length ?? 0
+
+    function handleClick() {
+      // setRowAction() 로 type 설정
+      setRowAction({ row, type: "comments" })
+      // 필요하면 즉시 openCommentSheet() 직접 호출
+      openCommentSheet(
+        vendor.vendorId ?? 0,
+        vendor.rfqId ?? 0,
+      )
+    }
+
+    return (
+      <Button variant="ghost" size="sm" className="h-8 w-8 p-0 group relative" onClick={handleClick}>
+        <MessageSquare className="h-4 w-4" />
+        {commCount > 0 && (
+          <Badge variant="secondary" className="absolute -top-1 -right-1 h-4 min-w-[1rem] text-[0.625rem] p-0 flex items-center justify-center">
+            {commCount}
+          </Badge>
+        )}
+      </Button>
+    )
+  },
+  enableSorting: false,
+  maxSize: 80,
+}
+// ----------------------------------------------------------------
+// 5) 최종 컬럼 배열 - Update to include the files column
+// ----------------------------------------------------------------
+return [
+  selectColumn,
+  ...nestedColumns,
+  filesColumn,  // Add the files column before comments
+  commentsColumn,
+  // actionsColumn,
+]
+
+}
\ No newline at end of file
diff --git a/lib/tbe/table/tbe-table-toolbar-actions.tsx b/lib/tbe/table/tbe-table-toolbar-actions.tsx
new file mode 100644
index 00000000..6a336135
--- /dev/null
+++ b/lib/tbe/table/tbe-table-toolbar-actions.tsx
@@ -0,0 +1,60 @@
+"use client"
+
+import * as React from "react"
+import { type Table } from "@tanstack/react-table"
+import { Download, Upload } from "lucide-react"
+import { toast } from "sonner"
+
+import { exportTableToExcel } from "@/lib/export"
+import { Button } from "@/components/ui/button"
+
+
+import { InviteVendorsDialog } from "./invite-vendors-dialog"
+import {  VendorWithTbeFields } from "@/config/vendorTbeColumnsConfig"
+
+interface VendorsTableToolbarActionsProps {
+  table: Table<VendorWithTbeFields>
+  rfqId: number
+}
+
+export function VendorsTableToolbarActions({ table,rfqId }: VendorsTableToolbarActionsProps) {
+  // 파일 input을 숨기고, 버튼 클릭 시 참조해 클릭하는 방식
+  const fileInputRef = React.useRef<HTMLInputElement>(null)
+
+  // 파일이 선택되었을 때 처리
+
+  function handleImportClick() {
+    // 숨겨진 <input type="file" /> 요소를 클릭
+    fileInputRef.current?.click()
+  }
+
+  return (
+    <div className="flex items-center gap-2">
+      {table.getFilteredSelectedRowModel().rows.length > 0 ? (
+        <InviteVendorsDialog
+          vendors={table
+            .getFilteredSelectedRowModel()
+            .rows.map((row) => row.original)}
+          rfqId = {rfqId}
+          onSuccess={() => table.toggleAllRowsSelected(false)}
+        />
+      ) : null}
+
+    
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={() =>
+          exportTableToExcel(table, {
+            filename: "tasks",
+            excludeColumns: ["select", "actions"],
+          })
+        }
+        className="gap-2"
+      >
+        <Download className="size-4" aria-hidden="true" />
+        <span className="hidden sm:inline">Export</span>
+      </Button>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/lib/tbe/table/tbe-table.tsx b/lib/tbe/table/tbe-table.tsx
new file mode 100644
index 00000000..ed323800
--- /dev/null
+++ b/lib/tbe/table/tbe-table.tsx
@@ -0,0 +1,204 @@
+"use client"
+
+import * as React from "react"
+import { useRouter } from "next/navigation"
+import type {
+  DataTableAdvancedFilterField,
+  DataTableFilterField,
+  DataTableRowAction,
+} from "@/types/table"
+
+import { toSentenceCase } from "@/lib/utils"
+import { useDataTable } from "@/hooks/use-data-table"
+import { DataTable } from "@/components/data-table/data-table"
+import { DataTableAdvancedToolbar } from "@/components/data-table/data-table-advanced-toolbar"
+import { useFeatureFlags } from "./feature-flags-provider"
+import { getColumns } from "./tbe-table-columns"
+import { Vendor, vendors } from "@/db/schema/vendors"
+import { InviteVendorsDialog } from "./invite-vendors-dialog"
+import { CommentSheet, TbeComment } from "./comments-sheet"
+import { VendorWithTbeFields } from "@/config/vendorTbeColumnsConfig"
+import { TBEFileDialog } from "./file-dialog"
+import { fetchRfqAttachmentsbyCommentId, getAllTBE } from "@/lib/rfqs/service"
+import { VendorsTableToolbarActions } from "./tbe-table-toolbar-actions"
+
+interface VendorsTableProps {
+  promises: Promise<[
+    Awaited<ReturnType<typeof getAllTBE>>,
+  ]>
+}
+
+export function AllTbeTable({ promises }: VendorsTableProps) {
+  const { featureFlags } = useFeatureFlags()
+  const router = useRouter()
+
+  // Suspense로 받아온 데이터
+  const [{ data, pageCount }] = React.use(promises)
+
+  const [rowAction, setRowAction] = React.useState<DataTableRowAction<VendorWithTbeFields> | null>(null)
+
+  // 댓글 시트 관련 state
+  const [initialComments, setInitialComments] = React.useState<TbeComment[]>([])
+  const [commentSheetOpen, setCommentSheetOpen] = React.useState(false)
+  const [selectedVendorIdForComments, setSelectedVendorIdForComments] = React.useState<number | null>(null)
+  const [selectedRfqIdForComments, setSelectedRfqIdForComments] = React.useState<number | null>(null)
+
+  // 파일 다이얼로그 관련 state
+  const [isFileDialogOpen, setIsFileDialogOpen] = React.useState(false)
+  const [selectedVendorIdForFiles, setSelectedVendorIdForFiles] = React.useState<number | null>(null)
+  const [selectedTbeIdForFiles, setSelectedTbeIdForFiles] = React.useState<number | null>(null)
+  const [selectedRfqIdForFiles, setSelectedRfqIdForFiles] = React.useState<number | null>(null)
+
+  // 테이블 리프레시용
+  const handleRefresh = React.useCallback(() => {
+    router.refresh();
+  }, [router]);
+
+  // -----------------------------------------------------------
+  // 특정 action이 설정될 때마다 실행되는 effect
+  // -----------------------------------------------------------
+  React.useEffect(() => {
+    if (!rowAction) return
+
+    if (rowAction.type === "comments") {
+      // rowAction가 새로 세팅되면 openCommentSheet 실행
+      // row.original에 rfqId가 있다고 가정
+      openCommentSheet(
+        rowAction.row.original.vendorId ?? 0,
+        rowAction.row.original.rfqId ?? 0,
+      )
+    } else if (rowAction.type === "files") {
+      openFilesDialog(
+        rowAction.row.original.tbeId ?? 0,
+        rowAction.row.original.vendorId ?? 0,
+        rowAction.row.original.rfqId ?? 0,
+      )
+    }
+  }, [rowAction])
+
+  // -----------------------------------------------------------
+  // 댓글 시트 열기
+  // -----------------------------------------------------------
+  async function openCommentSheet(vendorId: number, rfqId: number) {
+    setInitialComments([])
+
+    const comments = rowAction?.row.original.comments
+    if (comments && comments.length > 0) {
+      const commentWithAttachments: TbeComment[] = await Promise.all(
+        comments.map(async (c) => {
+          const attachments = await fetchRfqAttachmentsbyCommentId(c.id)
+          return {
+            ...c,
+            commentedBy: 1, // DB나 API 응답에 있다고 가정
+            attachments,
+          }
+        })
+      )
+      setInitialComments(commentWithAttachments)
+    }
+
+    setSelectedVendorIdForComments(vendorId)
+    setSelectedRfqIdForComments(rfqId)
+    setCommentSheetOpen(true)
+  }
+
+  // -----------------------------------------------------------
+  // 파일 다이얼로그 열기
+  // -----------------------------------------------------------
+  const openFilesDialog = (tbeId: number, vendorId: number, rfqId: number) => {
+    setSelectedTbeIdForFiles(tbeId)
+    setSelectedVendorIdForFiles(vendorId)
+    setSelectedRfqIdForFiles(rfqId)
+    setIsFileDialogOpen(true)
+  }
+
+  // -----------------------------------------------------------
+  // 테이블 컬럼
+  // -----------------------------------------------------------
+  const columns = React.useMemo(
+    () =>
+      getColumns({
+        setRowAction,
+        router,
+        openCommentSheet,  // 필요하면 직접 호출 가능
+        openFilesDialog,
+      }),
+    [setRowAction, router]
+  )
+
+  // -----------------------------------------------------------
+  // 필터 필드
+  // -----------------------------------------------------------
+  const filterFields: DataTableFilterField<VendorWithTbeFields>[] = [
+    // 예: 표준 필터
+  ]
+  const advancedFilterFields: DataTableAdvancedFilterField<VendorWithTbeFields>[] = [
+    { id: "vendorName", label: "Vendor Name", type: "text" },
+    { id: "vendorCode", label: "Vendor Code", type: "text" },
+    { id: "email", label: "Email", type: "text" },
+    { id: "country", label: "Country", type: "text" },
+    {
+      id: "vendorStatus",
+      label: "Vendor Status",
+      type: "multi-select",
+      options: vendors.status.enumValues.map((status) => ({
+        label: toSentenceCase(status),
+        value: status,
+      })),
+    },
+    { id: "rfqVendorUpdated", label: "Updated at", type: "date" },
+  ]
+
+  // -----------------------------------------------------------
+  // 테이블 생성 훅
+  // -----------------------------------------------------------
+  const { table } = useDataTable({
+    data,
+    columns,
+    pageCount,
+    filterFields,
+    enablePinning: true,
+    enableAdvancedFilter: true,
+    initialState: {
+      sorting: [{ id: "rfqVendorUpdated", desc: true }],
+      columnPinning: { right: ["actions"] },
+    },
+    getRowId: (originalRow) => String(originalRow.id),
+    shallow: false,
+    clearOnDefault: true,
+  })
+
+  return (
+    <>
+      <DataTable table={table}>
+        <DataTableAdvancedToolbar
+          table={table}
+          filterFields={advancedFilterFields}
+          shallow={false}
+        >
+          <VendorsTableToolbarActions table={table}  rfqId={selectedRfqIdForFiles ?? 0} />
+        </DataTableAdvancedToolbar>
+      </DataTable>
+
+      {/* 댓글 시트 */}
+      <CommentSheet
+        currentUserId={1}
+        open={commentSheetOpen}
+        onOpenChange={setCommentSheetOpen}
+        vendorId={selectedVendorIdForComments ?? 0}
+        rfqId={selectedRfqIdForComments ?? 0}  // ← 여기!
+        initialComments={initialComments}
+      />
+
+      {/* 파일 업로드/다운로드 다이얼로그 */}
+      <TBEFileDialog
+        isOpen={isFileDialogOpen}
+        onOpenChange={setIsFileDialogOpen}
+        tbeId={selectedTbeIdForFiles ?? 0}
+        vendorId={selectedVendorIdForFiles ?? 0}
+        rfqId={selectedRfqIdForFiles ?? 0}     // ← 여기!
+        onRefresh={handleRefresh}
+      />
+    </>
+  )
+}
\ No newline at end of file
diff --git a/lib/unstable-cache.ts b/lib/unstable-cache.ts
new file mode 100644
index 00000000..c17bb9d8
--- /dev/null
+++ b/lib/unstable-cache.ts
@@ -0,0 +1,19 @@
+/**
+ * @see https://github.com/ethanniser/NextMaster/blob/main/src/lib/unstable-cache.ts
+ */
+
+import { cache } from "react"
+import { unstable_cache as next_unstable_cache } from "next/cache"
+
+// next_unstable_cache doesn't handle deduplication, so we wrap it in React's cache
+export const unstable_cache = <Inputs extends unknown[], Output>(
+  cb: (...args: Inputs) => Promise<Output>,
+  keyParts: string[],
+  options?: {
+    /**
+     * The revalidation interval in seconds.
+     */
+    revalidate?: number | false
+    tags?: string[]
+  }
+) => cache(next_unstable_cache(cb, keyParts, options))
diff --git a/lib/users/repository.ts b/lib/users/repository.ts
new file mode 100644
index 00000000..78d1668b
--- /dev/null
+++ b/lib/users/repository.ts
@@ -0,0 +1,128 @@
+// lib/users/repository.ts
+import db from '@/db/db';
+import { users, otps, type User, Role, roles, userRoles } from '@/db/schema/users';
+import { Otp } from '@/types/user';
+import { eq,and ,asc} from 'drizzle-orm';
+
+// 모든 사용자 조회
+export const getAllUsers = async (): Promise<User[]> => {
+  const usersRes = await db.select().from(users).execute();
+  return usersRes
+};
+
+export async function getRoleAssignedUsers(roleId: number) {
+  const rows = await db
+    .select()
+    .from(userRoles)
+    .where(eq(userRoles.roleId, roleId))
+  return rows.map((r) => r.userId)  // [1, 2, 5, ...]
+}
+
+// ID로 사용자 조회
+export const getUserById = async (id: number): Promise<User | null> => {
+  const usersRes = await db.select().from(users).where(eq(users.id, id)).execute();
+  if (usersRes.length === 0) return null;
+
+  const user = usersRes[0];
+  return user
+};
+
+// Email로 사용자 조회
+export const getUserByEmail = async (email: string): Promise<User | null> => {
+  const usersRes = await db.select().from(users).where(eq(users.email, email)).execute();
+  if (usersRes.length === 0) return null;
+
+  const user = usersRes[0];
+  return user
+};
+
+
+// 새 사용자 생성
+export const createUser = async (name: string, email: string): Promise<User> => {
+  const usersRes = await db.insert(users).values({ name, email }).returning();
+  const user = usersRes[0];
+  return user
+};
+
+// 사용자 업데이트
+export const updateUser = async (id: number, data: Partial<User>): Promise<User | null> => {
+  const usersRes = await db.update(users).set(data).where(eq(users.id, id)).returning();
+  if (usersRes.length === 0) return null;
+  const user = usersRes[0];
+  return user
+};
+
+// 사용자 삭제
+export const deleteUser = async (id: number): Promise<boolean> => {
+  const result = await db.delete(users).where(eq(users.id, id)).execute();
+  return (result.rowCount ?? 0) > 0; // null일 경우 0으로 처리
+};
+
+
+// 새 otp 생성
+export const createOtp = async ( email: string, code:string, createdAt:Date, otpToken:string, otpExpires:Date ): Promise<Otp> => {
+  const otp = await db.insert(otps).values({ email, code, createdAt, otpToken,otpExpires  }).returning();
+  return otp[0]
+};
+
+
+export const findOtpByEmail = async (email: string): Promise<Otp | null> => {
+  const [otpRecord] = await db
+    .select()
+    .from(otps)
+    .where(eq(otps.email, email))
+
+  return otpRecord ?? null
+}
+
+export const updateOtp = async (
+  email: string,
+  code: string,
+  createdAt: Date,
+  otpToken: string,
+  otpExpires: Date
+): Promise<Otp> => {
+  const rows = await db
+    .update(otps)
+    .set({
+      code,
+      createdAt,
+      otpToken,
+      otpExpires,
+    })
+    .where(eq(otps.email, email))
+    .returning();
+
+  return rows[0];
+};
+
+// Email 및 토큰으로 opt 조회
+export const getOtpByEmailAndToken = async (email: string, token:string): Promise<Otp | null> => {
+  const opts = await db.select().from(otps).where(eq(otps.email, email)).execute();
+  if (opts.length === 0) return null;
+
+  const otp = opts[0];
+  return otp
+};
+
+
+export const getOtpByEmailAndCode = async (
+  email: string,
+  code: string
+): Promise<Otp | null> => {
+
+  console.log(email, code, "db")
+
+  const [otp] = await db
+    .select()
+    .from(otps)
+    .where(
+      and(eq(otps.email, email), eq(otps.code, code))
+    );
+
+  return otp ?? null;
+};
+
+export async function findAllRoles(): Promise<Role[]> {
+  return db.select().from(roles).where(eq(roles.domain ,'evcp')).orderBy(asc(roles.name));
+}
\ No newline at end of file
diff --git a/lib/users/send-otp.ts b/lib/users/send-otp.ts
new file mode 100644
index 00000000..c8cfb83d
--- /dev/null
+++ b/lib/users/send-otp.ts
@@ -0,0 +1,71 @@
+"use server";
+
+import { headers } from 'next/headers';
+import { sendEmail } from '@/lib/mail/sendEmail';
+import jwt from 'jsonwebtoken';
+import { findUserByEmail, addNewOtp } from '@/lib/users/service';
+
+
+export async function sendOtpAction(email: string, lng: string) {
+  // Next.js의 headers() API로 헤더 정보를 얻을 수 있습니다.
+  const headersList = await headers();
+
+  // 호스트 정보 (request.nextUrl.host 대체)
+  const host = headersList.get('host') || 'localhost:3000';
+
+  // 사용자 조회
+  const user = await findUserByEmail(email);
+
+  if (!user) {
+    // 서버 액션에서 에러 던지면, 클라이언트 컴포넌트에서 try-catch로 잡을 수 있습니다.
+    throw new Error('User does not exist');
+  }
+
+  // OTP 및 만료 시간 생성
+  const otp = Math.floor(100000 + Math.random() * 900000).toString();
+  const expires = new Date(Date.now() + 10 * 60 * 1000); // 10분 후 만료
+  const token = jwt.sign(
+    {
+      email,
+      otp,
+      exp: Math.floor(expires.getTime() / 1000),
+    },
+    process.env.JWT_SECRET!
+  );
+
+  // DB에 OTP 추가
+  await addNewOtp(email, otp, new Date(), token, expires);
+
+  // 이메일에서 사용할 URL 구성
+  const verificationUrl = `http://${host}/ko/login?token=${token}`;
+
+  // IP 정보로부터 지역 조회 (ip-api 사용)
+  const ip = headersList.get('x-forwarded-for')?.split(',')[0]?.trim() || '';
+  let location = '';
+  try {
+    const response = await fetch(`http://ip-api.com/json/${ip}?fields=country,city`);
+    const data = await response.json();
+    location = data.city && data.country ? `${data.city}, ${data.country}` : '';
+  } catch (error) {
+    // 위치 조회 실패 시 무시
+  }
+
+  // OTP 이메일 발송
+  await sendEmail({
+    to: email,
+    subject: `${otp} - SHI eVCP Sign-in Verification`,
+    template: 'otp',
+    context: {
+      name: user.name,
+      otp,
+      verificationUrl,
+      location,
+      language: lng,
+    },
+  });
+
+  // 클라이언트로 반환할 수 있는 값
+  return {
+    success: true,
+  };
+}
\ No newline at end of file
diff --git a/lib/users/service.ts b/lib/users/service.ts
new file mode 100644
index 00000000..ae97beed
--- /dev/null
+++ b/lib/users/service.ts
@@ -0,0 +1,413 @@
+// lib/users/service.ts
+"use server";
+
+import { Otp } from '@/types/user';
+import { getAllUsers, createUser, getUserById, updateUser, deleteUser, getUserByEmail, createOtp,getOtpByEmailAndToken, updateOtp, findOtpByEmail ,getOtpByEmailAndCode, findAllRoles, getRoleAssignedUsers} from './repository';
+import logger from '@/lib/logger';
+import { Role, userRoles, users, userView, type User } from '@/db/schema/users';
+import { saveDocument } from '../storage';
+import { GetUsersSchema } from '../admin-users/validations';
+import { revalidateTag, unstable_cache, unstable_noStore } from 'next/cache';
+import { filterColumns } from '../filter-columns';
+import { asc, desc, ilike, inArray, and, gte, lte, not, or, eq } from "drizzle-orm";
+import { countUsers, selectUsersWithCompanyAndRoles } from '../admin-users/repository';
+import db from "@/db/db";
+import { getErrorMessage } from "@/lib/handle-error";
+
+interface AssignUsersArgs {
+  roleId: number
+  userIds: number[]
+}
+
+
+export const fetchAllUsers = async (): Promise<User[]> => {
+  try {
+    logger.info('Fetching all users');
+    const users = await getAllUsers();
+    logger.debug({ count: users.length }, 'Fetched users successfully');
+    return users;
+  } catch (error) {
+    logger.error({ error }, 'Error fetching all users');
+    throw new Error('Failed to fetch users');
+  }
+};
+
+
+export const fetchRoleAssignedUserID = async (roleId: number) => {
+  try {
+    logger.info('Fetching all users');
+    const users = await getRoleAssignedUsers(roleId);
+    logger.debug({ count: users.length }, 'Fetched users successfully');
+    return users;
+  } catch (error) {
+    logger.error({ error }, 'Error fetching all users');
+    throw new Error('Failed to fetch users');
+  }
+};
+
+
+export const addNewUser = async (name: string, email: string): Promise<User> => {
+  try {
+    logger.info({ name, email }, 'Creating a new user');
+    const user = await createUser(name, email);
+    logger.debug({ user }, 'User created successfully');
+    return user;
+  } catch (error) {
+    logger.error({ error }, 'Error creating a new user');
+    throw new Error('Failed to create user');
+  }
+};
+
+export const findUserById = async (id: number): Promise<User | null> => {
+  try {
+    logger.info({ id }, 'Fetching user by ID');
+    const user = await getUserById(id);
+    if (!user) {
+      logger.warn({ id }, 'User not found');
+    } else {
+      logger.debug({ user }, 'User fetched successfully');
+    }
+    return user;
+  } catch (error) {
+    logger.error({ error }, 'Error fetching user by ID');
+    throw new Error('Failed to fetch user');
+  }
+};
+
+export const findUserByEmail = async (email: string): Promise<User | null> => {
+  try {
+    logger.info({ email }, 'Fetching user by Email');
+    const user = await getUserByEmail(email);
+    if (!user) {
+      logger.warn({ email }, 'User not found');
+    } else {
+      logger.debug({ user }, 'User fetched successfully');
+    }
+    return user;
+  } catch (error) {
+    logger.error({ error }, 'Error fetching user by ID');
+    throw new Error('Failed to fetch user');
+  }
+};
+
+export const modifyUser = async (id: number, data: Partial<User>): Promise<User | null> => {
+  try {
+    logger.info({ id, data }, 'Updating user');
+    const user = await updateUser(id, data);
+    if (!user) {
+      logger.warn({ id }, 'User not found for update');
+    } else {
+      logger.debug({ user }, 'User updated successfully');
+    }
+    return user;
+  } catch (error) {
+    logger.error({ error }, 'Error updating user');
+    throw new Error('Failed to update user');
+  }
+};
+
+export const removeUser = async (id: number): Promise<boolean> => {
+  try {
+    logger.info({ id }, 'Deleting user');
+    const success = await deleteUser(id);
+    if (success) {
+      logger.debug({ id }, 'User deleted successfully');
+    } else {
+      logger.warn({ id }, 'User not found for deletion');
+    }
+    return success;
+  } catch (error) {
+    logger.error({ error }, 'Error deleting user');
+    throw new Error('Failed to delete user');
+  }
+};
+
+export const addNewOtp = async (
+  email: string,
+  code: string,
+  createdAt: Date,
+  otpToken: string,
+  otpExpires: Date
+): Promise<Otp> => {
+  try {
+    logger.info({ email }, 'Creating or updating an OTP record');
+
+    // 1) 먼저 email로 Otp가 있는지 조회
+    const existingOtp = await findOtpByEmail(email);
+
+    // 2) 이미 있으면 update
+    if (existingOtp) {
+      const otp = await updateOtp(email, code, createdAt, otpToken, otpExpires);
+      logger.debug({ otp }, 'OTP updated successfully');
+      return otp;
+    }
+    // 3) 없으면 새로 생성
+    else {
+      const otp = await createOtp(email, code, createdAt, otpToken, otpExpires);
+      logger.debug({ otp }, 'OTP created successfully');
+      return otp;
+    }
+  } catch (error) {
+    logger.error({ error }, 'Error creating or updating OTP');
+    throw new Error('Failed to create or update OTP');
+  }
+};
+
+export const findOtpByEmailandToken = async (email: string, otpToken: string): Promise<Otp | null> => {
+  try {
+    logger.info({ email }, 'Fetching otp by Email');
+    const otp = await getOtpByEmailAndToken(email, otpToken);
+    if (!otp) {
+      logger.warn({ email }, 'Otp not found');
+    } else {
+      logger.debug({ otp }, 'Otp fetched successfully');
+    }
+    return otp;
+  } catch (error) {
+    logger.error({ error }, 'Error fetching user by ID');
+    throw new Error('Failed to fetch user');
+  }
+};
+
+
+export async function findEmailandOtp(email: string, code: string) {
+  try {
+    // 1) otp 조회
+    const otpRecord: Otp | null = await getOtpByEmailAndCode(email, code)
+    if (!otpRecord) {
+      return null
+    }
+
+    // 2) 사용자 정보 추가로 조회
+    const userRecord: User | null = await getUserByEmail(email)
+    if (!userRecord) {
+      return null
+    }
+
+    // 3) 필요한 형태로 "통합된 객체"를 반환
+    return {
+      otpExpires: otpRecord.otpExpires,
+      email: userRecord.email,
+      name: userRecord.name,    // DB 에서 가져온 실제 이름
+      id: userRecord.id,        // user id
+      imageUrl:userRecord.imageUrl,
+      companyId:userRecord.companyId,
+      domain:userRecord.domain
+      // 기타 필요한 필드...
+    }
+
+  } catch (error) {
+    // 에러 처리
+    throw new Error('Failed to fetch user & otp')
+  }
+}
+
+export async function updateUserProfileImage(formData: FormData) {
+  // 1) FormData에서 데이터 꺼내기
+  const file = formData.get("file") as File | null
+  const userId = Number(formData.get("userId"))
+  const name = formData.get("name") as string
+  const email = formData.get("email") as string
+
+  // 2) 기본적인 유효성 검증
+  if (!file) {
+    throw new Error("No file found in the FormData.")
+  }
+  if (!userId) {
+    throw new Error("userId is required.")
+  }
+
+  try {
+    // 3) 파일 저장 (해시 생성)
+    const directory = './public/profiles'
+    const { hashedFileName } = await saveDocument(file, directory)
+
+    // 4) DB 업데이트
+    const imageUrl = hashedFileName
+    const data = { name, email, imageUrl }
+    const user = await updateUser(userId, data)
+    if (!user) {
+      // updateUser가 null을 반환하면, DB 업데이트 실패 혹은 해당 유저가 없음
+      throw new Error(`User with id=${userId} not found or update failed.`)
+    }
+
+    // 5) 성공 시 성공 정보 반환
+    return { success: true, user }
+  } catch (err: any) {
+    // DB 업데이트 중 발생하는 에러나 saveDocument 내부 에러 등을 처리
+    console.error("[updateUserProfileImage] Error:", err)
+    throw new Error(err.message ?? "Failed to update user profile.")
+  }
+}
+
+export async function getUsersEVCP(input: GetUsersSchema) {
+  return unstable_cache(
+    async () => {
+      try {
+        const offset = (input.page - 1) * input.perPage;
+
+        // (1) advancedWhere
+        const advancedWhere = filterColumns({
+          table: userView,
+          filters: input.filters,
+          joinOperator: input.joinOperator,
+        });
+
+        // (2) globalWhere
+        let globalWhere;
+        if (input.search) {
+          const s = `%${input.search}%`;
+          globalWhere = or(
+            ilike(userView.user_name, s),
+            ilike(userView.user_email, s),
+            ilike(userView.company_name, s)
+          );
+        }
+
+        // (3) 디폴트 domainWhere = eq(userView.domain, "partners")
+        //     다만, 사용자가 이미 domain 필터를 줬다면 적용 X
+        let domainWhere;
+        const hasDomainFilter = input.filters?.some((f) => f.id === "user_domain");
+        if (!hasDomainFilter) {
+          domainWhere = eq(userView.user_domain, "evcp");
+        }
+
+        // (4) 최종 where
+        const finalWhere = and(advancedWhere, globalWhere, domainWhere);
+
+        // (5) 정렬
+        const orderBy =
+          input.sort.length > 0
+            ? input.sort.map((item) =>
+                item.desc ? desc(userView[item.id]) : asc(userView[item.id])
+              )
+            : [desc(users.createdAt)];
+
+        // ...
+        const { data, total } = await db.transaction(async (tx) => {
+          const data = await selectUsersWithCompanyAndRoles(tx, {
+            where: finalWhere,
+            orderBy,
+            offset,
+            limit: input.perPage,
+          });
+
+          const total = await countUsers(tx, finalWhere);
+          return { data, total };
+        });
+
+        const pageCount = Math.ceil(total / input.perPage);
+        return { data, pageCount };
+      } catch (err) {
+        return { data: [], pageCount: 0 };
+      }
+    },
+    [JSON.stringify(input)],
+    {
+      revalidate: 3600,
+      tags: ["users"],
+    }
+  )();
+}
+
+export async function getAllRoles(): Promise<Role[]> {
+  try {
+    return await findAllRoles(); 
+  } catch (err) {
+    throw new Error("Failed to get roles");
+  }
+}
+
+
+export async function getUsersAll(input: GetUsersSchema, domain: string) {
+  return unstable_cache(
+    async () => {
+      try {
+        const offset = (input.page - 1) * input.perPage;
+
+        // (1) advancedWhere
+        const advancedWhere = filterColumns({
+          table: userView,
+          filters: input.filters,
+          joinOperator: input.joinOperator,
+        });
+
+        // (2) globalWhere
+        let globalWhere;
+        if (input.search) {
+          const s = `%${input.search}%`;
+          globalWhere = or(
+            ilike(userView.user_name, s),
+            ilike(userView.user_email, s),
+            ilike(userView.company_name, s)
+          );
+        }
+
+        // (3) domainWhere - 무조건 들어가야 하는 domain 조건
+        const domainWhere = eq(userView.user_domain, domain);
+
+        // (4) 최종 where
+        //    domainWhere과 advancedWhere, globalWhere를 모두 and로 묶는다.
+        //    (globalWhere가 존재하지 않을 수 있으니, and() 호출 시 undefined를 자동 무시할 수도 있음)
+        const finalWhere = and(domainWhere, advancedWhere, globalWhere);
+
+        // (5) 정렬
+        const orderBy =
+          input.sort.length > 0
+            ? input.sort.map((item) =>
+                item.desc ? desc(userView[item.id]) : asc(userView[item.id])
+              )
+            : [desc(users.createdAt)];
+
+        const { data, total } = await db.transaction(async (tx) => {
+          const data = await selectUsersWithCompanyAndRoles(tx, {
+            where: finalWhere,
+            orderBy,
+            offset,
+            limit: input.perPage,
+          });
+
+          const total = await countUsers(tx, finalWhere);
+          return { data, total };
+        });
+
+        const pageCount = Math.ceil(total / input.perPage);
+        return { data, pageCount };
+      } catch (err) {
+        return { data: [], pageCount: 0 };
+      }
+    },
+    // (6) 캐시 종속성 배열에 domain도 추가
+    [JSON.stringify(input), domain],
+    {
+      revalidate: 3600,
+      tags: ["users"],
+    }
+  )();
+}
+
+
+export async function assignUsersToRole(roleId: number, userIds: number[]) {
+  unstable_noStore(); // 캐싱 방지(Next.js 서버 액션용)
+  try{
+    await db.transaction(async (tx) => {
+      // 1) 기존 userRoles 레코드 삭제
+      await tx.delete(userRoles).where(eq(userRoles.roleId, roleId))
+  
+      // 2) 새로 넣기
+      if (userIds.length > 0) {
+        await tx.insert(userRoles).values(
+          userIds.map((uid) => ({ userId: uid, roleId }))
+        )
+      }
+    })
+    revalidateTag("users");
+    revalidateTag("roles");
+
+    return { data: null, error: null };
+  } catch (err){
+    return { data: null, error: getErrorMessage(err) };
+
+  }
+
+}
diff --git a/lib/users/table/assign-roles-dialog.tsx b/lib/users/table/assign-roles-dialog.tsx
new file mode 100644
index 00000000..003f6500
--- /dev/null
+++ b/lib/users/table/assign-roles-dialog.tsx
@@ -0,0 +1,194 @@
+import * as React from "react"
+import { useForm } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { Check, ChevronsUpDown, Loader, UserRoundPlus } from "lucide-react"
+import { cn } from "@/lib/utils"
+import { toast } from "sonner"
+
+import { Textarea } from "@/components/ui/textarea"
+import { Company } from "@/db/schema/companies"
+import { getAllCompanies } from "@/lib/admin-users/service"
+import {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+} from "@/components/ui/popover"
+import {
+  Command,
+  CommandInput,
+  CommandList,
+  CommandGroup,
+  CommandItem,
+  CommandEmpty,
+} from "@/components/ui/command"
+import { assignRolesToUsers, getAllRoleView } from "@/lib/roles/services"
+import { RoleView } from "@/db/schema/users"
+import { type UserView } from "@/db/schema/users"
+import { type Row } from "@tanstack/react-table"
+import { createRoleAssignmentSchema, CreateRoleAssignmentSchema, createRoleSchema, CreateRoleSchema } from "@/lib/roles/validations"
+import { MultiSelect } from "@/components/ui/multi-select"
+
+interface AssignRoleDialogProps
+  extends React.ComponentPropsWithoutRef<typeof Dialog> {
+  users: Row<UserView>["original"][]
+
+}
+
+
+export function AssignRoleDialog({ users }: AssignRoleDialogProps) {
+  const [open, setOpen] = React.useState(false)
+  const [isAddPending, startAddTransition] = React.useTransition()
+  const [roles, setRoles] = React.useState<RoleView[]>([])  // 회사 목록
+  const [loading, setLoading] = React.useState(false)
+
+  const partnersRoles = roles.filter(v => v.domain === "partners")
+  const evcpRoles = roles.filter(v => v.domain === "evcp")
+
+
+  React.useEffect(() => {
+    getAllRoleView("evcp").then((res) => {
+      setRoles(res)
+    })
+  }, [])
+
+
+  const form = useForm<CreateRoleAssignmentSchema>({
+    resolver: zodResolver(createRoleAssignmentSchema),
+    defaultValues: {
+      evcpRoles: [],
+    },
+  })
+
+
+  function handleDialogOpenChange(nextOpen: boolean) {
+    if (!nextOpen) {
+      form.reset()
+    }
+    setOpen(nextOpen)
+  }
+
+  const evcpUsers = users.filter(v => v.user_domain === "evcp");
+
+
+  async function onSubmit(data: CreateRoleAssignmentSchema) {
+    console.log(data.evcpRoles.map((v)=>Number(v)))
+    startAddTransition(async () => {
+
+
+      // if(partnerUsers.length>0){
+      //   const result = await assignRolesToUsers( partnerUsers.map(v=>v.user_id) ,data.partnersRoles)
+
+      //   if (result.error) {
+      //     toast.error(`에러: ${result.error}`)
+      //     return
+      //   }
+      // }
+
+      if (evcpUsers.length > 0) {
+        const result = await assignRolesToUsers( data.evcpRoles.map((v)=>Number(v)), evcpUsers.map(v => v.user_id))
+
+        if (result.error) {
+          toast.error(`에러: ${result.error}`)
+          return
+        }
+      }
+
+      form.reset()
+      setOpen(false)
+      toast.success("Role assgined")
+    })
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={handleDialogOpenChange}>
+      <DialogTrigger asChild>
+        <Button variant="default" size="sm">
+          <UserRoundPlus className="mr-2 size-4" aria-hidden="true" />
+          Assign Role ({users.length})
+        </Button>
+      </DialogTrigger>
+
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Assign Roles to {evcpUsers.length} Users</DialogTitle>
+          <DialogDescription>
+            Role을 Multi-select 하시기 바랍니다.
+          </DialogDescription>
+        </DialogHeader>
+
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)}>
+            <div className="space-y-4 py-4">
+              {/* evcp 롤 선택 */}
+              {evcpUsers.length > 0 &&
+                <FormField
+                  control={form.control}
+                  name="evcpRoles"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>eVCP Role</FormLabel>
+                      <FormControl>
+                        <MultiSelect
+                          options={evcpRoles.map((role) => ({ value: String(role.id), label: role.name }))}
+                          onValueChange={(values) => {
+                            field.onChange(values);
+                          }}
+
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              }
+            </div>
+
+            <DialogFooter>
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => setOpen(false)}
+                disabled={isAddPending}
+              >
+                Cancel
+              </Button>
+              <Button
+                type="submit"
+                disabled={form.formState.isSubmitting || isAddPending}
+              >
+                {isAddPending && (
+                  <Loader
+                    className="mr-2 size-4 animate-spin"
+                    aria-hidden="true"
+                  />
+                )}
+                Assgin
+              </Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  )
+}
\ No newline at end of file
diff --git a/lib/users/table/users-table-columns.tsx b/lib/users/table/users-table-columns.tsx
new file mode 100644
index 00000000..c0eb9520
--- /dev/null
+++ b/lib/users/table/users-table-columns.tsx
@@ -0,0 +1,154 @@
+"use client"
+
+import * as React from "react"
+import { type DataTableRowAction } from "@/types/table"
+import { type ColumnDef } from "@tanstack/react-table"
+import { Ellipsis } from "lucide-react"
+import { userRoles, type UserView } from "@/db/schema/users"
+
+import { formatDate } from "@/lib/utils"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Checkbox } from "@/components/ui/checkbox"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { DataTableColumnHeader } from "@/components/data-table/data-table-column-header"
+import { UserWithCompanyAndRoles } from "@/types/user"
+import { getErrorMessage } from "@/lib/handle-error"
+
+import { modifiUser } from "@/lib/admin-users/service"
+import { toast } from "sonner"
+
+import { euserColumnsConfig } from "@/config/euserColumnsConfig"
+import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header"
+import { MultiSelect } from "@/components/ui/multi-select"
+
+interface GetColumnsProps {
+  setRowAction: React.Dispatch<React.SetStateAction<DataTableRowAction<UserView> | null>>
+}
+
+/**
+ * tanstack table 컬럼 정의 (중첩 헤더 버전)
+ */
+export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<UserView>[] {
+  // ----------------------------------------------------------------
+  // 1) select 컬럼 (체크박스)
+  // ----------------------------------------------------------------
+  const selectColumn: ColumnDef<UserView> = {
+    id: "select",
+    header: ({ table }) => (
+      <Checkbox
+        checked={
+          table.getIsAllPageRowsSelected() ||
+          (table.getIsSomePageRowsSelected() && "indeterminate")
+        }
+        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+        aria-label="Select all"
+        className="translate-y-0.5"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={(value) => row.toggleSelected(!!value)}
+        aria-label="Select row"
+        className="translate-y-0.5"
+      />
+    ),
+    size:40,
+    enableSorting: false,
+    enableHiding: false,
+  }
+
+
+
+  const groupMap: Record<string, ColumnDef<UserView>[]> = {}
+
+  euserColumnsConfig.forEach((cfg) => {
+    // 만약 group가 없으면 "_noGroup" 처리
+    const groupName = cfg.group || "_noGroup"
+
+    if (!groupMap[groupName]) {
+      groupMap[groupName] = []
+    }
+
+    // child column 정의
+    const childCol: ColumnDef<UserView> = {
+      accessorKey: cfg.id,
+      enableResizing: true,
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title={cfg.label} />
+      ),
+      meta: {
+        excelHeader: cfg.excelHeader,
+        group: cfg.group,
+        type: cfg.type,
+      },
+      cell: ({ row, cell }) => {
+
+        if (cfg.id === "created_at") {
+          const dateVal = cell.getValue() as Date
+          return formatDate(dateVal)
+        }
+
+        if (cfg.id === "roles") {
+          const roleValues = row.original.roles;
+          return (
+            <div className="flex flex-wrap gap-1">
+              {roleValues.map((v) => (
+                v === null?"":
+                <Badge key={v} variant="outline">
+                  {v}
+                </Badge>
+              ))}
+            </div>
+          );
+        }
+
+        return row.getValue(cfg.id) ?? ""
+      },
+    }
+
+    groupMap[groupName].push(childCol)
+  })
+
+  // ----------------------------------------------------------------
+  // 3-2) groupMap에서 실제 상위 컬럼(그룹)을 만들기
+  // ----------------------------------------------------------------
+  const nestedColumns: ColumnDef<UserView>[] = []
+
+  // 순서를 고정하고 싶다면 group 순서를 미리 정의하거나 sort해야 함
+  // 여기서는 그냥 Object.entries 순서
+  Object.entries(groupMap).forEach(([groupName, colDefs]) => {
+    if (groupName === "_noGroup") {
+      // 그룹 없음 → 그냥 최상위 레벨 컬럼
+      nestedColumns.push(...colDefs)
+    } else {
+      // 상위 컬럼
+      nestedColumns.push({
+        id: groupName,
+        header: groupName, // "Basic Info", "Metadata" 등
+        columns: colDefs,
+      })
+    }
+  })
+
+  // ----------------------------------------------------------------
+  // 4) 최종 컬럼 배열: select, nestedColumns, actions
+  // ----------------------------------------------------------------
+  return [
+    selectColumn,
+    ...nestedColumns,
+  ]
+}
\ No newline at end of file
diff --git a/lib/users/table/users-table-toolbar-actions.tsx b/lib/users/table/users-table-toolbar-actions.tsx
new file mode 100644
index 00000000..106953a6
--- /dev/null
+++ b/lib/users/table/users-table-toolbar-actions.tsx
@@ -0,0 +1,61 @@
+"use client"
+
+import * as React from "react"
+import { type Table } from "@tanstack/react-table"
+import { Download, Upload } from "lucide-react"
+import { toast } from "sonner"
+
+import { exportTableToExcel } from "@/lib/export"
+import { Button } from "@/components/ui/button"
+
+
+
+import { UserView } from "@/db/schema/users"
+import { DeleteUsersDialog } from "@/lib/admin-users/table/delete-ausers-dialog"
+import { AssignRoleDialog } from "./assign-roles-dialog"
+
+interface UsersTableToolbarActionsProps {
+  table: Table<UserView>
+}
+
+export function UsersTableToolbarActions({ table }: UsersTableToolbarActionsProps) {
+  // 파일 input을 숨기고, 버튼 클릭 시 참조해 클릭하는 방식
+  const fileInputRef = React.useRef<HTMLInputElement>(null)
+
+
+  function handleImportClick() {
+    // 숨겨진 <input type="file" /> 요소를 클릭
+    fileInputRef.current?.click()
+  }
+
+  return (
+    <div className="flex items-center gap-2">
+
+      {table.getFilteredSelectedRowModel().rows.length > 0 ? (
+        <AssignRoleDialog
+          users={table
+            .getFilteredSelectedRowModel()
+            .rows.map((row) => row.original)}
+        />
+      ) : null}
+
+
+
+      {/** 4) Export 버튼 */}
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={() =>
+          exportTableToExcel(table, {
+            filename: "roles",
+            excludeColumns: ["select", "actions"],
+          })
+        }
+        className="gap-2"
+      >
+        <Download className="size-4" aria-hidden="true" />
+        <span className="hidden sm:inline">Export</span>
+      </Button>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/lib/users/table/users-table.tsx b/lib/users/table/users-table.tsx
new file mode 100644
index 00000000..53cb961e
--- /dev/null
+++ b/lib/users/table/users-table.tsx
@@ -0,0 +1,150 @@
+"use client"
+
+import * as React from "react"
+import { userRoles ,  type UserView} from "@/db/schema/users"
+import type {
+  DataTableAdvancedFilterField,
+  DataTableFilterField,
+  DataTableRowAction,
+} from "@/types/table"
+
+import { toSentenceCase } from "@/lib/utils"
+import { useDataTable } from "@/hooks/use-data-table"
+import { DataTable } from "@/components/data-table/data-table"
+import { DataTableAdvancedToolbar } from "@/components/data-table/data-table-advanced-toolbar"
+import { DataTableToolbar } from "@/components/data-table/data-table-toolbar"
+
+import type {
+  getAllRoles, getUsersEVCP
+} from "@/lib//users/service"
+import { getColumns } from "./users-table-columns"
+import { UsersTableToolbarActions } from "./users-table-toolbar-actions"
+
+
+
+interface UsersTableProps {
+  promises: Promise<
+    [
+      Awaited<ReturnType<typeof getUsersEVCP>>,
+      Record<number, number>,
+      Awaited<ReturnType<typeof getAllRoles>>
+    ]
+  >
+}
+type RoleCounts = Record<string, number>
+
+export function UserTable({ promises }: UsersTableProps) {
+
+  const [{ data, pageCount }, roleCountsRaw,  roles] =
+    React.use(promises)
+
+
+  const [rowAction, setRowAction] =
+    React.useState<DataTableRowAction<UserView> | null>(null)
+
+  const columns = React.useMemo(
+    () => getColumns({ setRowAction }),
+    [setRowAction]
+  )
+
+  const roleCounts = roleCountsRaw as RoleCounts
+
+
+  /**
+   * This component can render either a faceted filter or a search filter based on the `options` prop.
+   *
+   * @prop options - An array of objects, each representing a filter option. If provided, a faceted filter is rendered. If not, a search filter is rendered.
+   *
+   * Each `option` object has the following properties:
+   * @prop {string} label - The label for the filter option.
+   * @prop {string} value - The value for the filter option.
+   * @prop {React.ReactNode} [icon] - An optional icon to display next to the label.
+   * @prop {boolean} [withCount] - An optional boolean to display the count of the filter option.
+   */
+  const filterFields: DataTableFilterField<UserView>[] = [
+    {
+      id: "user_email",
+      label: "Email",
+      placeholder: "Filter email...",
+    },
+
+  ]
+
+  /**
+   * Advanced filter fields for the data table.
+   * These fields provide more complex filtering options compared to the regular filterFields.
+   *
+   * Key differences from regular filterFields:
+   * 1. More field types: Includes 'text', 'multi-select', 'date', and 'boolean'.
+   * 2. Enhanced flexibility: Allows for more precise and varied filtering options.
+   * 3. Used with DataTableAdvancedToolbar: Enables a more sophisticated filtering UI.
+   * 4. Date and boolean types: Adds support for filtering by date ranges and boolean values.
+   */
+  const advancedFilterFields: DataTableAdvancedFilterField<UserView>[] = [
+    {
+      id: "user_name",
+      label: "User Name",
+      type: "text",
+    },
+    {
+      id: "user_email",
+      label: "Email",
+      type: "text",
+    },
+
+    {
+      id: "roles",
+      label: "Roles",
+      type: "multi-select",
+      options: roles.map((role) => {
+        return {
+          label: toSentenceCase(role.name),
+          value: role.id,
+          count: roleCounts[role.id], // 이 값이 undefined인지 확인
+        };
+      }),
+    },
+    {
+      id: "created_at",
+      label: "Created at",
+      type: "date",
+    },
+  ]
+
+
+  const { table } = useDataTable({
+    data,
+    columns,
+    pageCount,
+    filterFields,
+    enablePinning: true,
+    enableAdvancedFilter: true,
+    initialState: {
+      sorting: [{ id: "created_at", desc: true }],
+      columnPinning: { right: ["actions"] },
+    },
+    getRowId: (originalRow) => `${originalRow.user_id}`,
+    shallow: false,
+    clearOnDefault: true,
+  })
+
+  return (
+    <>
+      <DataTable
+        table={table}
+
+      >
+        <DataTableAdvancedToolbar
+          table={table}
+          filterFields={advancedFilterFields}
+          shallow={false}
+        >
+          <UsersTableToolbarActions table={table}/>
+        </DataTableAdvancedToolbar>
+
+      </DataTable>
+
+   
+    </>
+  )
+}
diff --git a/lib/users/verifyOtp.ts b/lib/users/verifyOtp.ts
new file mode 100644
index 00000000..5de76f90
--- /dev/null
+++ b/lib/users/verifyOtp.ts
@@ -0,0 +1,28 @@
+// lib/users/verifyOtp.ts
+import { findEmailandOtp } from '@/lib/users/service'
+
+// "email과 code가 맞으면 유저 정보, 아니면 null" 형태로 작성
+export async function verifyOtp(email: string, code: string) {
+  // DB에서 email과 code가 맞는지, 만료 안됐는지 검증
+  const otpRecord = await findEmailandOtp(email, code)
+  if (!otpRecord) {
+    return null
+  }
+
+  // 만료 체크
+  if (otpRecord.otpExpires && otpRecord.otpExpires < new Date()) {
+    return null
+  }
+
+  // 여기서 otpRecord에 유저 정보가 있다고 가정
+  // 예: otpRecord.userId, otpRecord.userName, otpRecord.email 등
+  // 실제 DB 설계에 맞춰 필드명을 조정하세요.
+  return {
+    email: otpRecord.email,
+    name: otpRecord.name,
+    id: otpRecord.id,
+    imageUrl: otpRecord.imageUrl,
+    companyId: otpRecord.companyId,
+    domain: otpRecord.domain,
+  }
+}
\ No newline at end of file
diff --git a/lib/users/verifyToken.ts b/lib/users/verifyToken.ts
new file mode 100644
index 00000000..745a1052
--- /dev/null
+++ b/lib/users/verifyToken.ts
@@ -0,0 +1,38 @@
+"use server";
+
+import jwt from 'jsonwebtoken';
+import { findOtpByEmailandToken } from '@/lib/users/service';
+
+export async function verifyTokenAction(token: string) {
+  if (!token) {
+    // 토큰이 없으면 바로 false 반환
+    return { valid: false };
+  }
+
+  try {
+    // 토큰 검증
+    const decoded = jwt.verify(token, process.env.JWT_SECRET!) as { email: string; otp: string };
+    const { email } = decoded;
+
+    // DB에서 OTP 정보 조회
+    const otp = await findOtpByEmailandToken(email, token);
+    if (!otp) {
+      // 해당하는 OTP/토큰이 없으면 invalid
+      return { valid: false };
+    }
+
+    // 토큰 동일성 및 만료 확인
+    if (otp.otpToken !== token || (otp.otpExpires && otp.otpExpires < new Date())) {
+      return { valid: false };
+    }
+
+    // 여기까지 통과하면 valid
+    return {
+      valid: true,
+      email,
+    };
+  } catch (error) {
+    // JWT 검증 실패
+    return { valid: false };
+  }
+}
\ No newline at end of file
diff --git a/lib/utils.ts b/lib/utils.ts
new file mode 100644
index 00000000..2eca9285
--- /dev/null
+++ b/lib/utils.ts
@@ -0,0 +1,75 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+
+export function formatDate(
+  date: Date | string | number,
+  locale: string = "en-US",
+  opts: Intl.DateTimeFormatOptions = {},
+  includeTime: boolean = false
+) {
+  return new Intl.DateTimeFormat(locale, {
+    month: opts.month ?? "long",
+    day: opts.day ?? "numeric",
+    year: opts.year ?? "numeric",
+    // Add time options when includeTime is true
+    ...(includeTime && {
+      hour: opts.hour ?? "2-digit",
+      minute: opts.minute ?? "2-digit",
+      second: opts.second ?? "2-digit",
+      hour12: opts.hour12 ?? false, // Use 24-hour format by default
+    }),
+    ...opts, // This allows overriding any of the above defaults
+  }).format(new Date(date))
+}
+
+// Alternative: Create a separate function for date and time
+export function formatDateTime(
+  date: Date | string | number,
+  locale: string = "en-US",
+  opts: Intl.DateTimeFormatOptions = {}
+) {
+  return new Intl.DateTimeFormat(locale, {
+    month: opts.month ?? "long",
+    day: opts.day ?? "numeric",
+    year: opts.year ?? "numeric",
+    hour: opts.hour ?? "2-digit",
+    minute: opts.minute ?? "2-digit",
+    second: opts.second ?? "2-digit",
+    hour12: opts.hour12 ?? false,
+    ...opts,
+  }).format(new Date(date))
+}
+
+export function toSentenceCase(str: string) {
+  return str
+    .replace(/_/g, " ")
+    .replace(/([A-Z])/g, " $1")
+    .toLowerCase()
+    .replace(/^\w/, (c) => c.toUpperCase())
+    .replace(/\s+/g, " ")
+    .trim()
+}
+
+/**
+ * @see https://github.com/radix-ui/primitives/blob/main/packages/core/primitive/src/primitive.tsx
+ */
+export function composeEventHandlers<E>(
+  originalEventHandler?: (event: E) => void,
+  ourEventHandler?: (event: E) => void,
+  { checkForDefaultPrevented = true } = {}
+) {
+  return function handleEvent(event: E) {
+    originalEventHandler?.(event)
+
+    if (
+      checkForDefaultPrevented === false ||
+      !(event as unknown as Event).defaultPrevented
+    ) {
+      return ourEventHandler?.(event)
+    }
+  }
+}
diff --git a/lib/vendor-data/services.ts b/lib/vendor-data/services.ts
new file mode 100644
index 00000000..7f0c47c1
--- /dev/null
+++ b/lib/vendor-data/services.ts
@@ -0,0 +1,99 @@
+"use server";
+
+import db from "@/db/db"
+import { items } from "@/db/schema/items"
+import { projects } from "@/db/schema/projects"
+import {  Tag, tags } from "@/db/schema/vendorData"
+import { eq } from "drizzle-orm"
+import { revalidateTag, unstable_noStore } from "next/cache";
+import { unstable_cache } from "@/lib/unstable-cache";
+import { contractItems, contracts } from "@/db/schema/contract";
+
+// 스키마 import
+
+export interface ProjectWithContracts {
+    projectId: number
+    projectCode: string
+    projectName: string
+    projectType: string
+
+    contracts: {
+        contractId: number
+        contractNo: string
+        contractName: string
+        // contractName 등 필요한 필드 추가
+        packages: {
+            itemId: number
+            itemName: string
+        }[]
+    }[]
+}
+
+
+export async function getVendorProjectsAndContracts(
+    vendorId: number
+): Promise<ProjectWithContracts[]> {
+    const rows = await db
+        .select({
+            projectId: projects.id,
+            projectCode: projects.code,
+            projectName: projects.name,
+            projectType: projects.type,
+
+            contractId: contracts.id,
+            contractNo: contracts.contractNo,
+            contractName: contracts.contractName,
+
+            itemId: contractItems.id,
+            itemName: items.itemName,
+        })
+        .from(contracts)
+        .innerJoin(projects, eq(contracts.projectId, projects.id))
+        .innerJoin(contractItems, eq(contractItems.contractId, contracts.id))
+        .innerJoin(items, eq(contractItems.itemId, items.id))
+        .where(eq(contracts.vendorId, vendorId))
+
+    const projectMap = new Map<number, ProjectWithContracts>()
+
+    for (const row of rows) {
+        // 1) 프로젝트 그룹 찾기
+        let projectEntry = projectMap.get(row.projectId)
+        if (!projectEntry) {
+            // 새 프로젝트 항목 생성
+            projectEntry = {
+                projectId: row.projectId,
+                projectCode: row.projectCode,
+                projectName: row.projectName,
+                projectType: row.projectType,
+                contracts: [],
+            }
+            projectMap.set(row.projectId, projectEntry)
+        }
+
+        // 2) 프로젝트 안에서 계약(contractId) 찾기
+        let contractEntry = projectEntry.contracts.find(
+            (c) => c.contractId === row.contractId
+        )
+        if (!contractEntry) {
+            // 새 계약 항목
+            contractEntry = {
+                contractId: row.contractId,
+                contractNo: row.contractNo,
+                contractName: row.contractName,
+                packages: [],
+            }
+            projectEntry.contracts.push(contractEntry)
+        }
+
+        // 3) 계약의 packages 배열에 아이템 추가
+        contractEntry.packages.push({
+            itemId: row.itemId,
+            itemName: row.itemName,
+        })
+    }
+
+    return Array.from(projectMap.values())
+}
+
+
+// 1) 태그 조회
diff --git a/lib/vendor-document-list/repository.ts b/lib/vendor-document-list/repository.ts
new file mode 100644
index 00000000..43adf7ca
--- /dev/null
+++ b/lib/vendor-document-list/repository.ts
@@ -0,0 +1,44 @@
+import db from "@/db/db";
+import { documentStagesView } from "@/db/schema/vendorDocu";
+import {
+    eq,
+    inArray,
+    not,
+    asc,
+    desc,
+    and,
+    ilike,
+    gte,
+    lte,
+    count,
+    gt,
+} from "drizzle-orm";
+import { PgTransaction } from "drizzle-orm/pg-core";
+
+export async function selectVendorDocuments(
+    tx: PgTransaction<any, any, any>,
+    params: {
+        where?: any; // drizzle-orm의 조건식 (and, eq...) 등
+        orderBy?: (ReturnType<typeof asc> | ReturnType<typeof desc>)[];
+        offset?: number;
+        limit?: number;
+    }
+) {
+    const { where, orderBy, offset = 0, limit = 10 } = params;
+
+    return tx
+        .select()
+        .from(documentStagesView)
+        .where(where)
+        .orderBy(...(orderBy ?? []))
+        .offset(offset)
+        .limit(limit);
+}
+/** 총 개수 count */
+export async function countVendorDocuments(
+    tx: PgTransaction<any, any, any>,
+    where?: any
+) {
+    const res = await tx.select({ count: count() }).from(documentStagesView).where(where);
+    return res[0]?.count ?? 0;
+}
diff --git a/lib/vendor-document-list/service.ts b/lib/vendor-document-list/service.ts
new file mode 100644
index 00000000..75c9b6cd
--- /dev/null
+++ b/lib/vendor-document-list/service.ts
@@ -0,0 +1,284 @@
+"use server"
+
+import { eq, SQL } from "drizzle-orm"
+import db from "@/db/db"
+import { documents, documentStagesView, issueStages } from "@/db/schema/vendorDocu"
+import { contracts } from "@/db/schema/vendorData"
+import { GetVendorDcoumentsSchema } from "./validations"
+import { unstable_cache } from "@/lib/unstable-cache";
+import { filterColumns } from "@/lib/filter-columns";
+import { getErrorMessage } from "@/lib/handle-error";
+import { asc, desc, ilike, inArray, and, gte, lte, not, or } from "drizzle-orm";
+import { countVendorDocuments, selectVendorDocuments } from "./repository"
+import path from "path";
+import fs from "fs/promises";
+import { v4 as uuidv4 } from "uuid"
+import { z } from "zod"
+import { revalidateTag, unstable_noStore ,revalidatePath} from "next/cache";
+
+/**
+ * 특정 vendorId에 속한 문서 목록 조회
+ */
+export async function getVendorDocuments(input: GetVendorDcoumentsSchema, id: number) {
+   
+    return unstable_cache(
+        async () => {
+            try {
+                const offset = (input.page - 1) * input.perPage;
+
+                // advancedTable 모드면 filterColumns()로 where 절 구성
+                const advancedWhere = filterColumns({
+                    table: documentStagesView,
+                    filters: input.filters,
+                    joinOperator: input.joinOperator,
+                });
+
+                let globalWhere
+                if (input.search) {
+                    const s = `%${input.search}%`
+                    globalWhere = or(ilike(documentStagesView.title, s), ilike(documentStagesView.docNumber, s)
+                    )
+                    // 필요시 여러 칼럼 OR조건 (status, priority, etc)
+                }
+
+                const finalWhere = and(advancedWhere, globalWhere, eq(documentStagesView.contractId, id));
+                const orderBy =
+                    input.sort.length > 0
+                        ? input.sort.map((item) =>
+                            item.desc ? desc(documentStagesView[item.id]) : asc(documentStagesView[item.id])
+                        )
+                        : [asc(documentStagesView.createdAt)];
+
+                // 트랜잭션 내부에서 Repository 호출
+                const { data, total } = await db.transaction(async (tx) => {
+                    const data = await selectVendorDocuments(tx, {
+                        where: finalWhere,
+                        orderBy,
+                        offset,
+                        limit: input.perPage,
+                    });
+                    const total = await countVendorDocuments(tx, finalWhere);
+                    return { data, total };
+                });
+
+                const pageCount = Math.ceil(total / input.perPage);
+
+
+                return { data, pageCount };
+            } catch (err) {
+                // 에러 발생 시 디폴트
+                return { data: [], pageCount: 0 };
+            }
+        },
+        [JSON.stringify(input), String(id)], // 캐싱 키
+        {
+            revalidate: 3600,
+            tags: [`vendor-docuemnt-list-${id}`],
+        }
+    )();
+}
+
+
+// 입력 스키마 정의
+const createDocumentSchema = z.object({
+  docNumber: z.string().min(1, "Document number is required"),
+  title: z.string().min(1, "Title is required"),
+  status: z.string(),
+  stages: z.array(z.string()).min(1, "At least one stage is required"),
+  contractId: z.number().positive("Contract ID is required")
+});
+
+export type CreateDocumentInputType = z.infer<typeof createDocumentSchema>;
+
+export async function createDocument(input: CreateDocumentInputType) {
+  try {
+    // 입력 유효성 검증
+    const validatedData = createDocumentSchema.parse(input);
+
+    // 트랜잭션 사용하여 문서와 스테이지 동시 생성
+    return await db.transaction(async (tx) => {
+      // 1. 문서 생성
+      const [newDocument] = await tx
+        .insert(documents)
+        .values({
+          contractId: validatedData.contractId,
+          docNumber: validatedData.docNumber,
+          title: validatedData.title,
+          status:  validatedData.status,
+          // issuedDate는 선택적으로 추가 가능
+        })
+        .returning({ id: documents.id });
+
+      // 2. 스테이지 생성 (문서 ID 연결)
+      const stageValues = validatedData.stages.map(stageName => ({
+        documentId: newDocument.id,
+        stageName: stageName,
+        // planDate, actualDate는 나중에 설정 가능
+      }));
+
+      // 스테이지 배열 삽입
+      await tx.insert(issueStages).values(stageValues);
+
+      // 성공 결과 반환
+      return { 
+        success: true, 
+        documentId: newDocument.id,
+        message: "Document and stages created successfully" 
+      };
+    });
+  } catch (error) {
+    console.error("Error creating document:", error);
+    
+    // Zod 유효성 검사 에러 처리
+    if (error instanceof z.ZodError) {
+      return { 
+        success: false, 
+        message: "Validation failed", 
+        errors: error.errors 
+      };
+    }
+    
+    // 기타 에러 처리
+    return { 
+      success: false, 
+      message: "Failed to create document" 
+    };
+  }
+}
+
+// 캐시 무효화 함수
+export async function invalidateDocumentCache(contractId: number) {
+  revalidatePath(`/partners/document-list/${contractId}`);
+  // 추가로 tag 기반 캐시도 무효화할 수 있음
+  revalidateTag(`vendor-docuemnt-list-${contractId}`);
+}
+
+const removeDocumentsSchema = z.object({
+  ids: z.array(z.number()).min(1, "At least one document ID is required")
+});
+export type RemoveDocumentsInputType = z.infer<typeof removeDocumentsSchema>;
+
+export async function removeDocuments(input: RemoveDocumentsInputType) {
+  try {
+    // 입력 유효성 검증
+    const validatedData = removeDocumentsSchema.parse(input);
+    
+    // 먼저 삭제할 문서의 contractId를 일반 select 쿼리로 가져옴
+    const [result] = await db
+      .select({ contractId: documents.contractId })
+      .from(documents)
+      .where(eq(documents.id, validatedData.ids[0]))
+      .limit(1);
+    
+    const contractId = result?.contractId;
+
+    // 트랜잭션 사용하여 문서 삭제
+    await db.transaction(async (tx) => {
+      // documents 테이블에서 삭제 (cascade 옵션으로 연결된 issueStages도 함께 삭제)
+      await tx
+        .delete(documents)
+        .where(inArray(documents.id, validatedData.ids));
+    });
+    
+    // 캐시 무효화
+    if (contractId) {
+      await invalidateDocumentCache(contractId);
+    }
+
+    return { success: true };
+  } catch (error) {
+    console.error("Error removing documents:", error);
+    
+    // Zod 유효성 검사 에러 처리
+    if (error instanceof z.ZodError) {
+      return { 
+        success: false, 
+        error: "Validation failed: " + error.errors.map(e => e.message).join(', ')
+      };
+    }
+    
+    // 기타 에러 처리
+    return { 
+      success: false, 
+      error: "Failed to remove documents"
+    };
+  }
+}
+
+// 입력 스키마 정의
+const modifyDocumentSchema = z.object({
+  id: z.number().positive("Document ID is required"),
+  contractId: z.number().positive("Contract ID is required"),
+  docNumber: z.string().min(1, "Document number is required"),
+  title: z.string().min(1, "Title is required"),
+  status: z.string().min(1, "Status is required"),
+  description: z.string().optional(),
+  remarks: z.string().optional()
+});
+
+export type ModifyDocumentInputType = z.infer<typeof modifyDocumentSchema>;
+
+/**
+ * 문서 정보 수정 서버 액션
+ */
+export async function modifyDocument(input: ModifyDocumentInputType) {
+  try {
+    // 입력 유효성 검증
+    const validatedData = modifyDocumentSchema.parse(input);
+    
+    // 업데이트할 문서 데이터 준비
+    const updateData = {
+      docNumber: validatedData.docNumber,
+      title: validatedData.title,
+      status: validatedData.status,
+      description: validatedData.description,
+      remarks: validatedData.remarks,
+      updatedAt: new Date() // 수정 시간 업데이트
+    };
+    
+    // 트랜잭션 사용하여 문서 업데이트
+    const [updatedDocument] = await db.transaction(async (tx) => {
+      // documents 테이블 업데이트
+      return tx
+        .update(documents)
+        .set(updateData)
+        .where(eq(documents.id, validatedData.id))
+        .returning({ id: documents.id });
+    });
+    
+    // 문서가 존재하지 않는 경우 처리
+    if (!updatedDocument) {
+      return { 
+        success: false, 
+        error: "Document not found" 
+      };
+    }
+    
+    // 캐시 무효화
+    await invalidateDocumentCache(validatedData.contractId);
+    
+    // 성공 결과 반환
+    return { 
+      success: true, 
+      documentId: updatedDocument.id,
+      message: "Document updated successfully" 
+    };
+    
+  } catch (error) {
+    console.error("Error updating document:", error);
+    
+    // Zod 유효성 검사 에러 처리
+    if (error instanceof z.ZodError) {
+      return { 
+        success: false, 
+        error: "Validation failed: " + error.errors.map(e => e.message).join(', ')
+      };
+    }
+    
+    // 기타 에러 처리
+    return { 
+      success: false, 
+      error: getErrorMessage(error) || "Failed to update document"
+    };
+  }
+}
diff --git a/lib/vendor-document-list/table/add-doc-dialog.tsx b/lib/vendor-document-list/table/add-doc-dialog.tsx
new file mode 100644
index 00000000..b108721c
--- /dev/null
+++ b/lib/vendor-document-list/table/add-doc-dialog.tsx
@@ -0,0 +1,299 @@
+"use client"
+
+import * as React from "react"
+import { useForm } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { z } from "zod"
+import { Plus, X } from "lucide-react"
+import { useRouter } from "next/navigation"
+
+import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import {
+    Form,
+    FormControl,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage,
+} from "@/components/ui/form"
+import { useToast } from "@/hooks/use-toast"
+import { createDocument, CreateDocumentInputType, invalidateDocumentCache } from "../service"
+
+// Zod 스키마 정의 - 빈 문자열 방지 로직 추가
+const createDocumentSchema = z.object({
+    docNumber: z.string().min(1, "Document number is required"),
+    title: z.string().min(1, "Title is required"),
+    stages: z.array(z.string().min(1, "Stage name cannot be empty"))
+        .min(1, "At least one stage is required")
+        .refine(stages => !stages.some(stage => stage.trim() === ""), {
+            message: "Stage names cannot be empty"
+        })
+});
+
+type CreateDocumentSchema = z.infer<typeof createDocumentSchema>;
+
+interface AddDocumentListDialogProps {
+    projectType: "ship" | "plant";
+    contractId: number;
+}
+
+export function AddDocumentListDialog({ projectType, contractId }: AddDocumentListDialogProps) {
+    const [open, setOpen] = React.useState(false);
+    const [isSubmitting, setIsSubmitting] = React.useState(false);
+    const router = useRouter();
+    const { toast } = useToast()
+    
+    // 기본 스테이지 설정
+    const defaultStages = projectType === "ship" 
+        ? ["For Approval", "For Working"] 
+        : [""];
+    
+    // react-hook-form 설정
+    const form = useForm<CreateDocumentSchema>({
+        resolver: zodResolver(createDocumentSchema),
+        defaultValues: {
+            docNumber: "",
+            title: "",
+            stages: defaultStages
+        },
+    });
+    
+    // 식물 유형일 때 단계 추가 기능
+    const addStage = () => {
+        const currentStages = form.getValues().stages;
+        form.setValue('stages', [...currentStages, ""], { shouldValidate: true });
+    };
+    
+    // 식물 유형일 때 단계 제거 기능
+    const removeStage = (index: number) => {
+        const currentStages = form.getValues().stages;
+        const newStages = currentStages.filter((_, i) => i !== index);
+        form.setValue('stages', newStages, { shouldValidate: true });
+    };
+    
+    async function onSubmit(data: CreateDocumentSchema) {
+        try {
+            setIsSubmitting(true);
+            
+            // 빈 문자열 필터링 (추가 안전장치)
+            const filteredStages = data.stages.filter(stage => stage.trim() !== "");
+            
+            if (filteredStages.length === 0) {
+                toast({
+                    title: "Error",
+                    description: "At least one valid stage name is required",
+                    variant: "destructive",
+                });
+                return;
+            }
+            
+            // 서버 액션 호출 - status를 "pending"으로 설정
+            const result = await createDocument({
+                ...data,
+                stages: filteredStages, // 필터링된 단계 사용
+                status: "pending", // status 필드 추가
+                contractId, // 계약 ID 추가
+            } as CreateDocumentInputType);
+            
+            if (result.success) {
+                // 성공 시 캐시 무효화
+                await invalidateDocumentCache(contractId);
+                
+                // 토스트 메시지
+                toast({
+                    title: "Success",
+                    description: "Document created successfully",
+                    variant: "default",
+                });
+                
+                // 모달 닫기 및 폼 리셋
+                form.reset();
+                setOpen(false);
+                
+                router.refresh();
+            } else {
+                // 실패 시 에러 토스트
+                toast({
+                    title: "Error",
+                    description: result.message || "Failed to create document",
+                    variant: "destructive",
+                });
+            }
+        } catch (error) {
+            console.error('Error creating document:', error);
+            toast({
+                title: "Error",
+                description: "An unexpected error occurred",
+                variant: "destructive",
+            });
+        } finally {
+            setIsSubmitting(false);
+        }
+    }
+    
+    // 제출 전 유효성 검사
+    const validateBeforeSubmit = async () => {
+        // 빈 스테이지 검사
+        const stages = form.getValues().stages;
+        const hasEmptyStage = stages.some(stage => stage.trim() === "");
+        
+        if (hasEmptyStage) {
+            form.setError("stages", {
+                type: "manual",
+                message: "Stage names cannot be empty"
+            });
+            return false;
+        }
+        
+        return true;
+    };
+    
+    function handleDialogOpenChange(nextOpen: boolean) {
+        if (!nextOpen) {
+            form.reset({
+                docNumber: "",
+                title: "",
+                stages: defaultStages
+            });
+        }
+        setOpen(nextOpen);
+    }
+    
+    return (
+        <Dialog open={open} onOpenChange={handleDialogOpenChange}>
+            {/* 모달을 열기 위한 버튼 */}
+            <DialogTrigger asChild>
+                <Button variant="default" size="sm">
+                    <Plus className="size-4 mr-1"/>
+                    Add Document
+                </Button>
+            </DialogTrigger>
+            
+            <DialogContent className="sm:max-w-[500px]">
+                <DialogHeader>
+                    <DialogTitle>Create New Document</DialogTitle>
+                    <DialogDescription>
+                        새 문서 정보를 입력하고 <b>Create</b> 버튼을 누르세요.
+                    </DialogDescription>
+                </DialogHeader>
+                
+                {/* shadcn/ui Form을 이용해 react-hook-form과 연결 */}
+                <Form {...form}>
+                    <form onSubmit={form.handleSubmit(onSubmit, async (errors) => {
+                        // 추가 유효성 검사 수행
+                        console.error("Form errors:", errors);
+                        const stages = form.getValues().stages;
+                        if (stages.some(stage => stage.trim() === "")) {
+                            toast({
+                                title: "Error",
+                                description: "Stage names cannot be empty",
+                                variant: "destructive",
+                            });
+                        }
+                    })} className="space-y-4">
+                        {/* 문서 번호 필드 */}
+                        <FormField
+                            control={form.control}
+                            name="docNumber"
+                            render={({ field }) => (
+                                <FormItem>
+                                    <FormLabel>Document Number</FormLabel>
+                                    <FormControl>
+                                        <Input placeholder="Enter document number" {...field} />
+                                    </FormControl>
+                                    <FormMessage />
+                                </FormItem>
+                            )}
+                        />
+                        
+                        {/* 문서 제목 필드 */}
+                        <FormField
+                            control={form.control}
+                            name="title"
+                            render={({ field }) => (
+                                <FormItem>
+                                    <FormLabel>Title</FormLabel>
+                                    <FormControl>
+                                        <Input placeholder="Enter document title" {...field} />
+                                    </FormControl>
+                                    <FormMessage />
+                                </FormItem>
+                            )}
+                        />
+                        
+                        {/* 스테이지 섹션 */}
+                        <div>
+                            <div className="flex items-center justify-between mb-2">
+                                <FormLabel>Stages</FormLabel>
+                                {projectType === "plant" && (
+                                    <Button
+                                        type="button"
+                                        variant="outline"
+                                        size="sm"
+                                        onClick={addStage}
+                                        className="h-8 px-2"
+                                    >
+                                        <Plus className="h-4 w-4 mr-1" /> Add Stage
+                                    </Button>
+                                )}
+                            </div>
+                            
+                            {form.watch("stages").map((stage, index) => (
+                                <div key={index} className="flex items-center gap-2 mb-2">
+                                    <FormField
+                                        control={form.control}
+                                        name={`stages.${index}`}
+                                        render={({ field }) => (
+                                            <FormItem className="flex-1">
+                                                <FormControl>
+                                                    <Input 
+                                                        placeholder="Enter stage name" 
+                                                        {...field} 
+                                                        disabled={projectType === "ship"}
+                                                    />
+                                                </FormControl>
+                                                <FormMessage />
+                                            </FormItem>
+                                        )}
+                                    />
+                                    {projectType === "plant" && index > 0 && (
+                                        <Button
+                                            type="button"
+                                            variant="ghost"
+                                            size="sm"
+                                            onClick={() => removeStage(index)}
+                                            className="h-8 w-8 p-0"
+                                        >
+                                            <X className="h-4 w-4" />
+                                        </Button>
+                                    )}
+                                </div>
+                            ))}
+                            <FormMessage>
+                                {form.formState.errors.stages?.message}
+                            </FormMessage>
+                        </div>
+                        
+                        <DialogFooter>
+                            <Button
+                                type="button"
+                                variant="outline"
+                                onClick={() => setOpen(false)}
+                            >
+                                Cancel
+                            </Button>
+                            <Button 
+                                type="submit" 
+                                disabled={isSubmitting || form.formState.isSubmitting}
+                            >
+                                {isSubmitting ? "Creating..." : "Create"}
+                            </Button>
+                        </DialogFooter>
+                    </form>
+                </Form>
+            </DialogContent>
+        </Dialog>
+    );
+}
\ No newline at end of file
diff --git a/lib/vendor-document-list/table/delete-docs-dialog.tsx b/lib/vendor-document-list/table/delete-docs-dialog.tsx
new file mode 100644
index 00000000..8813c742
--- /dev/null
+++ b/lib/vendor-document-list/table/delete-docs-dialog.tsx
@@ -0,0 +1,231 @@
+"use client"
+
+import * as React from "react"
+import { type Row } from "@tanstack/react-table"
+import { Loader, Trash, AlertCircle } from "lucide-react"
+import { toast } from "sonner"
+
+import { useMediaQuery } from "@/hooks/use-media-query"
+import { Button } from "@/components/ui/button"
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/components/ui/drawer"
+import { Alert, AlertDescription } from "@/components/ui/alert"
+import { DocumentStagesView } from "@/db/schema/vendorDocu"
+import { removeDocuments } from "../service"
+
+interface DeleteDocumentsDialogProps
+  extends React.ComponentPropsWithoutRef<typeof Dialog> {
+  documents: Row<DocumentStagesView>["original"][]
+  showTrigger?: boolean
+  onSuccess?: () => void
+}
+
+export function DeleteDocumentsDialog({
+  documents,
+  showTrigger = true,
+  onSuccess,
+  ...props
+}: DeleteDocumentsDialogProps) {
+  const [isDeletePending, startDeleteTransition] = React.useTransition()
+  const isDesktop = useMediaQuery("(min-width: 640px)")
+  
+  // "pending" 상태인 문서만 필터링
+  const pendingDocuments = documents.filter(doc => doc.status === "pending")
+  const nonPendingDocuments = documents.filter(doc => doc.status !== "pending")
+  
+  const hasMixedStatus = pendingDocuments.length > 0 && nonPendingDocuments.length > 0
+  const hasNoPendingDocuments = pendingDocuments.length === 0
+  
+  function onDelete() {
+    // 삭제할 문서가 없으면 경고
+    if (pendingDocuments.length === 0) {
+      toast.error("No pending documents to delete")
+      props.onOpenChange?.(false)
+      return
+    }
+    
+    startDeleteTransition(async () => {
+      // "pending" 상태인 문서 ID만 전달
+      const { success, error } = await removeDocuments({
+        ids: pendingDocuments.map((document) => document.documentId)
+      })
+
+      if (!success) {
+        toast.error(error || "Failed to delete documents")
+        return
+      }
+
+      props.onOpenChange?.(false)
+      
+      // 적절한 성공 메시지 표시
+      if (hasMixedStatus) {
+        toast.success(`${pendingDocuments.length} pending document(s) deleted successfully. ${nonPendingDocuments.length} non-pending document(s) were not affected.`)
+      } else {
+        toast.success(`${pendingDocuments.length} document(s) deleted successfully`)
+      }
+      
+      onSuccess?.()
+    })
+  }
+  
+  // 선택된 문서 상태에 대한 알림 메시지 렌더링
+  const renderStatusAlert = () => {
+    if (hasNoPendingDocuments) {
+      return (
+        <Alert variant="destructive" className="mb-4">
+          <AlertCircle className="h-4 w-4" />
+          <AlertDescription>
+            None of the selected documents are in "pending" status. Only pending documents can be deleted.
+          </AlertDescription>
+        </Alert>
+      )
+    }
+    
+    if (hasMixedStatus) {
+      return (
+        <Alert className="mb-4">
+          <AlertCircle className="h-4 w-4" />
+          <AlertDescription>
+            Only the {pendingDocuments.length} document(s) with "pending" status will be deleted. 
+            {nonPendingDocuments.length} document(s) cannot be deleted because they are not in pending status.
+          </AlertDescription>
+        </Alert>
+      )
+    }
+    
+    return null
+  }
+
+  if (isDesktop) {
+    return (
+      <Dialog {...props}>
+        {showTrigger ? (
+          <DialogTrigger asChild>
+            <Button variant="outline" size="sm">
+              <Trash className="mr-2 size-4" aria-hidden="true" />
+              Delete ({documents.length})
+            </Button>
+          </DialogTrigger>
+        ) : null}
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Are you absolutely sure?</DialogTitle>
+            <DialogDescription>
+              This action cannot be undone. Only documents with "pending" status can be deleted.
+            </DialogDescription>
+          </DialogHeader>
+          
+          {renderStatusAlert()}
+          
+          <div>
+            {pendingDocuments.length > 0 && (
+              <p className="text-sm text-muted-foreground mb-2">
+                {pendingDocuments.length} pending document(s) will be deleted:
+              </p>
+            )}
+            {pendingDocuments.length > 0 && (
+              <ul className="text-sm list-disc pl-5 mb-4 max-h-40 overflow-y-auto">
+                {pendingDocuments.map(doc => (
+                  <li key={doc.documentId} className="text-muted-foreground">{doc.docNumber} - {doc.title}</li>
+                ))}
+              </ul>
+            )}
+          </div>
+          
+          <DialogFooter className="gap-2 sm:space-x-0">
+            <DialogClose asChild>
+              <Button variant="outline">Cancel</Button>
+            </DialogClose>
+            <Button
+              aria-label="Delete selected rows"
+              variant="destructive"
+              onClick={onDelete}
+              disabled={isDeletePending || pendingDocuments.length === 0}
+            >
+              {isDeletePending && (
+                <Loader
+                  className="mr-2 size-4 animate-spin"
+                  aria-hidden="true"
+                />
+              )}
+              Delete {pendingDocuments.length > 0 ? `(${pendingDocuments.length})` : ""}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    )
+  }
+
+  return (
+    <Drawer {...props}>
+      {showTrigger ? (
+        <DrawerTrigger asChild>
+          <Button variant="outline" size="sm">
+            <Trash className="mr-2 size-4" aria-hidden="true" />
+            Delete ({documents.length})
+          </Button>
+        </DrawerTrigger>
+      ) : null}
+      <DrawerContent>
+        <DrawerHeader>
+          <DrawerTitle>Are you absolutely sure?</DrawerTitle>
+          <DrawerDescription>
+            This action cannot be undone. Only documents with "pending" status can be deleted.
+          </DrawerDescription>
+        </DrawerHeader>
+        
+        {renderStatusAlert()}
+        
+        <div className="px-4">
+          {pendingDocuments.length > 0 && (
+            <p className="text-sm text-muted-foreground mb-2">
+              {pendingDocuments.length} pending document(s) will be deleted:
+            </p>
+          )}
+          {pendingDocuments.length > 0 && (
+            <ul className="text-sm list-disc pl-5 mb-4 max-h-40 overflow-y-auto">
+              {pendingDocuments.map(doc => (
+                <li key={doc.documentId} className="text-muted-foreground">{doc.docNumber} - {doc.title}</li>
+              ))}
+            </ul>
+          )}
+        </div>
+        
+        <DrawerFooter className="gap-2 sm:space-x-0">
+          <DrawerClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </DrawerClose>
+          <Button
+            aria-label="Delete selected rows"
+            variant="destructive"
+            onClick={onDelete}
+            disabled={isDeletePending || pendingDocuments.length === 0}
+          >
+            {isDeletePending && (
+              <Loader className="mr-2 size-4 animate-spin" aria-hidden="true" />
+            )}
+            Delete {pendingDocuments.length > 0 ? `(${pendingDocuments.length})` : ""}
+          </Button>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  )
+}
\ No newline at end of file
diff --git a/lib/vendor-document-list/table/doc-table-column.tsx b/lib/vendor-document-list/table/doc-table-column.tsx
new file mode 100644
index 00000000..30fb06b0
--- /dev/null
+++ b/lib/vendor-document-list/table/doc-table-column.tsx
@@ -0,0 +1,202 @@
+"use client"
+
+import * as React from "react"
+import { ColumnDef } from "@tanstack/react-table"
+import { formatDate, formatDateTime } from "@/lib/utils"
+import { Checkbox } from "@/components/ui/checkbox"
+import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header"
+import { DataTableRowAction } from "@/types/table"
+import { DocumentStagesView } from "@/db/schema/vendorDocu"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { Button } from "@/components/ui/button"
+import { Ellipsis } from "lucide-react"
+import { Badge } from "@/components/ui/badge"
+
+interface GetColumnsProps {
+  setRowAction: React.Dispatch<React.SetStateAction<DataTableRowAction<DocumentStagesView> | null>>
+}
+
+export function getColumns({
+  setRowAction,
+}: GetColumnsProps): ColumnDef<DocumentStagesView>[] {
+  return [
+ {
+    id: "select",
+    header: ({ table }) => (
+      <Checkbox
+        checked={
+          table.getIsAllPageRowsSelected() ||
+          (table.getIsSomePageRowsSelected() && "indeterminate")
+        }
+        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+        aria-label="Select all"
+        className="translate-y-0.5"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={(value) => row.toggleSelected(!!value)}
+        aria-label="Select row"
+        className="translate-y-0.5"
+      />
+    ),
+    size:40,
+    enableSorting: false,
+    enableHiding: false,
+  },
+    {
+      accessorKey: "docNumber",
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title="Doc Number" />
+      ),
+      cell: ({ row }) => <div>{row.getValue("docNumber")}</div>,
+      meta: {
+        excelHeader: "Doc Number"
+      },
+      enableResizing: true,
+      minSize: 50,
+      size: 100,
+    },
+    {
+      accessorKey: "title",
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title="Doc title" />
+      ),
+      cell: ({ row }) => <div>{row.getValue("title")}</div>,
+      meta: {
+        excelHeader: "Doc title"
+      },
+      enableResizing: true,
+      minSize: 100,
+      size: 160,
+    },
+
+    {
+      accessorKey: "stageCount",
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title="Stage Count" />
+      ),
+      cell: ({ row }) => <div>{row.getValue("stageCount")}</div>,
+      meta: {
+        excelHeader: "Stage Count"
+      },
+      enableResizing: true,
+      minSize: 50,
+      size: 50,
+    },
+    {
+      accessorKey: "stageList",
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title="Stage List" />
+      ),
+      cell: ({ row }) => {
+        const stageNames = row.getValue("stageList") as string[] | null
+    
+        if (!stageNames || stageNames.length === 0) {
+          return <span className="text-sm text-muted-foreground italic">No stages</span>
+        }
+    
+        return (
+          <div className="flex flex-wrap gap-2">
+            {stageNames.map((stageName, idx) => (
+              <Badge variant="secondary" key={idx}>
+                {stageName}
+              </Badge>
+            ))}
+          </div>
+        )
+      },
+      enableResizing: true,
+      minSize: 120,
+      size: 120,
+    },
+    {
+      accessorKey: "status",
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title="status" />
+      ),
+      cell: ({ row }) => <div>{row.getValue("status")}</div>,
+      meta: {
+        excelHeader: "status"
+      },
+      enableResizing: true,
+      minSize: 60,
+      size: 60,
+    },
+    {
+      accessorKey: "createdAt",
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title="Created At" />
+      ),
+      cell: ({ cell }) => formatDateTime(cell.getValue() as Date),
+      meta: {
+        excelHeader: "created At"
+      },
+      enableResizing: true,
+      minSize: 120,
+      size: 120,
+    },
+    {
+      accessorKey: "updatedAt",
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title="Updated At" />
+      ),
+      cell: ({ cell }) => formatDateTime(cell.getValue() as Date),
+      meta: {
+        excelHeader: "updated At"
+      },
+      enableResizing: true,
+      minSize: 120,
+      size: 120,
+    },
+    {
+      id: "actions",
+      enableHiding: false,
+      cell: function Cell({ row }) {
+        const [isUpdatePending, startUpdateTransition] = React.useTransition()
+  
+        return (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                aria-label="Open menu"
+                variant="ghost"
+                className="flex size-7 p-0 data-[state=open]:bg-muted"
+              >
+                <Ellipsis className="size-4" aria-hidden="true" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="w-40">
+              <DropdownMenuItem
+                onSelect={() => setRowAction({ row, type: "update" })}
+              >
+                Edit
+              </DropdownMenuItem>
+
+              <DropdownMenuItem
+                onSelect={() => setRowAction({ row, type: "delete" })}
+              >
+                Delete
+                <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        )
+      },
+      size: 40,
+    }
+  ]
+}
\ No newline at end of file
diff --git a/lib/vendor-document-list/table/doc-table-toolbar-actions.tsx b/lib/vendor-document-list/table/doc-table-toolbar-actions.tsx
new file mode 100644
index 00000000..a30384dd
--- /dev/null
+++ b/lib/vendor-document-list/table/doc-table-toolbar-actions.tsx
@@ -0,0 +1,66 @@
+"use client"
+
+import * as React from "react"
+import { type Table } from "@tanstack/react-table"
+import { Download, Send, Upload } from "lucide-react"
+import { toast } from "sonner"
+
+import { exportTableToExcel } from "@/lib/export"
+import { Button } from "@/components/ui/button"
+import { DocumentStagesView } from "@/db/schema/vendorDocu"
+import { AddDocumentListDialog } from "./add-doc-dialog"
+import { DeleteDocumentsDialog } from "./delete-docs-dialog"
+
+
+interface DocTableToolbarActionsProps {
+  table: Table<DocumentStagesView>
+  projectType: "ship" | "plant";
+  selectedPackageId: number
+}
+
+export function DocTableToolbarActions({ table, projectType, selectedPackageId }: DocTableToolbarActionsProps) {
+
+
+  return (
+    <div className="flex items-center gap-2">
+      {table.getFilteredSelectedRowModel().rows.length > 0 ? (
+        <DeleteDocumentsDialog
+          documents={table
+            .getFilteredSelectedRowModel()
+            .rows.map((row) => row.original)}
+          onSuccess={() => table.toggleAllRowsSelected(false)}
+        />
+      ) : null}
+
+
+      <AddDocumentListDialog projectType={projectType} contractId={selectedPackageId} />
+
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={() =>
+          exportTableToExcel(table, {
+            filename: "Document-list",
+            excludeColumns: ["select", "actions"],
+          })
+        }
+        className="gap-2"
+      >
+        <Download className="size-4" aria-hidden="true" />
+        <span className="hidden sm:inline">Export</span>
+      </Button>
+
+
+
+      <Button
+        variant="samsung"
+        size="sm"
+        className="gap-2"
+      >
+        <Send className="size-4" aria-hidden="true" />
+        <span className="hidden sm:inline">Send to SHI</span>
+      </Button>
+
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/lib/vendor-document-list/table/doc-table.tsx b/lib/vendor-document-list/table/doc-table.tsx
new file mode 100644
index 00000000..f70ce365
--- /dev/null
+++ b/lib/vendor-document-list/table/doc-table.tsx
@@ -0,0 +1,110 @@
+"use client"
+
+import * as React from "react"
+import type {
+  DataTableAdvancedFilterField,
+  DataTableFilterField,
+  DataTableRowAction,
+} from "@/types/table"
+
+import { useDataTable } from "@/hooks/use-data-table"
+import { DataTable } from "@/components/data-table/data-table"
+import { getColumns } from "./doc-table-column"
+import { getVendorDocuments } from "../service"
+import { DocumentStagesView } from "@/db/schema/vendorDocu"
+import { useEffect } from "react"
+import { DataTableAdvancedToolbar } from "@/components/data-table/data-table-advanced-toolbar"
+import { DocTableToolbarActions } from "./doc-table-toolbar-actions"
+import { DeleteDocumentsDialog } from "./delete-docs-dialog"
+
+interface DocumentListTableProps {
+  promises: Promise<[Awaited<ReturnType<typeof getVendorDocuments>>]>
+  selectedPackageId: number
+  projectType: "ship" | "plant";
+}
+
+export function DocumentsTable({
+  promises,
+  selectedPackageId,
+  projectType,
+}: DocumentListTableProps) {
+  // 1) 데이터를 가져옴 (server component -> use(...) pattern)
+  const [{ data, pageCount }] = React.use(promises)
+
+  console.log(data)
+
+  const [rowAction, setRowAction] = React.useState<DataTableRowAction<DocumentStagesView> | null>(null)
+
+
+
+  const columns = React.useMemo(
+    () => getColumns({ setRowAction }),
+    [setRowAction]
+  )
+
+  // Filter fields
+  const filterFields: DataTableFilterField<DocumentStagesView>[] = []
+
+  const advancedFilterFields: DataTableAdvancedFilterField<DocumentStagesView>[] = [
+    {
+      id: "docNumber",
+      label: "Doc Number",
+      type: "text",
+    },
+    {
+      id: "title",
+      label: "Doc Title",
+      type: "text",
+    },
+    {
+      id: "createdAt",
+      label: "Created at",
+      type: "date",
+    },
+    {
+      id: "updatedAt",
+      label: "Updated at",
+      type: "date",
+    },
+  ]
+
+  // useDataTable 훅으로 react-table 구성
+  const { table } = useDataTable({
+    data: data,      // <-- 여기서 tableData 사용
+    columns,
+    pageCount,
+    filterFields,
+    enablePinning: true,
+    enableAdvancedFilter: true,
+    initialState: {
+      sorting: [{ id: "createdAt", desc: true }],
+      columnPinning: { right: ["actions"] },
+    },
+    getRowId: (originalRow) => String(originalRow.documentId),
+    shallow: false,
+    clearOnDefault: true,
+    columnResizeMode: "onEnd",
+
+  })
+  return (
+    <>
+      <DataTable table={table} >
+        <DataTableAdvancedToolbar
+          table={table}
+          filterFields={advancedFilterFields}
+          shallow={false}
+        >
+          <DocTableToolbarActions table={table} projectType={projectType} selectedPackageId={selectedPackageId} />
+        </DataTableAdvancedToolbar>
+      </DataTable>
+
+      <DeleteDocumentsDialog
+        open={rowAction?.type === "delete"}
+        onOpenChange={() => setRowAction(null)}
+        documents={rowAction?.row.original ? [rowAction?.row.original] : []}
+        showTrigger={false}
+        onSuccess={() => rowAction?.row.toggleSelected(false)}
+      />
+    </>
+  )
+}
\ No newline at end of file
diff --git a/lib/vendor-document-list/table/update-doc-sheet.tsx b/lib/vendor-document-list/table/update-doc-sheet.tsx
new file mode 100644
index 00000000..3e0ca225
--- /dev/null
+++ b/lib/vendor-document-list/table/update-doc-sheet.tsx
@@ -0,0 +1,267 @@
+"use client"
+
+import * as React from "react"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Loader, Save } from "lucide-react"
+import { useForm } from "react-hook-form"
+import { toast } from "sonner"
+import { z } from "zod"
+import { useRouter } from "next/navigation"
+
+import { Button } from "@/components/ui/button"
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet"
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
+import { modifyDocument } from "../service"
+
+// Document 수정을 위한 Zod 스키마 정의
+const updateDocumentSchema = z.object({
+  docNumber: z.string().min(1, "Document number is required"),
+  title: z.string().min(1, "Title is required"),
+  status: z.string().min(1, "Status is required"),
+  description: z.string().optional(),
+  remarks: z.string().optional()
+});
+
+type UpdateDocumentSchema = z.infer<typeof updateDocumentSchema>;
+
+// 상태 옵션 정의
+const statusOptions = [
+  "pending",
+  "in-progress",
+  "completed",
+  "rejected"
+];
+
+interface UpdateDocumentSheetProps
+  extends React.ComponentPropsWithRef<typeof Sheet> {
+  document: {
+    id: number;
+    contractId: number;
+    docNumber: string;
+    title: string;
+    status: string;
+    description?: string | null;
+    remarks?: string | null;
+  } | null
+}
+
+export function UpdateDocumentSheet({ document, ...props }: UpdateDocumentSheetProps) {
+  const [isUpdatePending, startUpdateTransition] = React.useTransition()
+  const router = useRouter()
+
+  const form = useForm<UpdateDocumentSchema>({
+    resolver: zodResolver(updateDocumentSchema),
+    defaultValues: {
+      docNumber: "",
+      title: "",
+      status: "",
+      description: "",
+      remarks: "",
+    },
+  })
+
+  // 폼 초기화 (document가 변경될 때)
+  React.useEffect(() => {
+    if (document) {
+      form.reset({
+        docNumber: document.docNumber,
+        title: document.title,
+        status: document.status,
+        description: document.description ?? "",
+        remarks: document.remarks ?? "",
+      });
+    }
+  }, [document, form]);
+
+  function onSubmit(input: UpdateDocumentSchema) {
+    startUpdateTransition(async () => {
+      if (!document) return
+      
+      const result = await modifyDocument({
+        id: document.id,
+        contractId: document.contractId,
+        ...input,
+      })
+      
+      if (!result.success) {
+        if ('error' in result) {
+          toast.error(result.error)
+        } else {
+          toast.error("Failed to update document")
+        }
+        return
+      }
+      
+      form.reset()
+      props.onOpenChange?.(false)
+      toast.success("Document updated successfully")
+      router.refresh()
+    })
+  }
+
+  return (
+    <Sheet {...props}>
+      <SheetContent className="flex flex-col gap-6 sm:max-w-md">
+        <SheetHeader className="text-left">
+          <SheetTitle>Update Document</SheetTitle>
+          <SheetDescription>
+            Update the document details and save the changes
+          </SheetDescription>
+        </SheetHeader>
+        <Form {...form}>
+          <form
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="flex flex-col gap-4"
+          >
+            {/* 문서 번호 필드 */}
+            <FormField
+              control={form.control}
+              name="docNumber"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Document Number</FormLabel>
+                  <FormControl>
+                    <Input placeholder="Enter document number" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            
+            {/* 문서 제목 필드 */}
+            <FormField
+              control={form.control}
+              name="title"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Title</FormLabel>
+                  <FormControl>
+                    <Input placeholder="Enter document title" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            
+            {/* 상태 필드 */}
+            <FormField
+              control={form.control}
+              name="status"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Status</FormLabel>
+                  <Select 
+                    onValueChange={field.onChange} 
+                    defaultValue={field.value}
+                    value={field.value}
+                  >
+                    <FormControl>
+                      <SelectTrigger>
+                        <SelectValue placeholder="Select status" />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent>
+                      <SelectGroup>
+                        {statusOptions.map((status) => (
+                          <SelectItem key={status} value={status}>
+                            {status.charAt(0).toUpperCase() + status.slice(1)}
+                          </SelectItem>
+                        ))}
+                      </SelectGroup>
+                    </SelectContent>
+                  </Select>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            
+            {/* 설명 필드 */}
+            <FormField
+              control={form.control}
+              name="description"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Description</FormLabel>
+                  <FormControl>
+                    <Textarea
+                      placeholder="Enter document description"
+                      className="min-h-[80px]"
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            
+            {/* 비고 필드 */}
+            <FormField
+              control={form.control}
+              name="remarks"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Remarks</FormLabel>
+                  <FormControl>
+                    <Textarea
+                      placeholder="Enter additional remarks"
+                      className="min-h-[80px]"
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            
+            <SheetFooter className="gap-2 pt-2 sm:space-x-0">
+              <SheetClose asChild>
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={() => form.reset()}
+                >
+                  Cancel
+                </Button>
+              </SheetClose>
+              <Button disabled={isUpdatePending}>
+                {isUpdatePending && (
+                  <Loader
+                    className="mr-2 size-4 animate-spin"
+                    aria-hidden="true"
+                  />
+                )}
+                <Save className="mr-2 size-4" /> Save
+              </Button>
+            </SheetFooter>
+          </form>
+        </Form>
+      </SheetContent>
+    </Sheet>
+  )
+}
\ No newline at end of file
diff --git a/lib/vendor-document-list/validations.ts b/lib/vendor-document-list/validations.ts
new file mode 100644
index 00000000..036cc6c6
--- /dev/null
+++ b/lib/vendor-document-list/validations.ts
@@ -0,0 +1,33 @@
+import {
+  createSearchParamsCache,
+  parseAsArrayOf,
+  parseAsInteger,
+  parseAsString,
+  parseAsStringEnum,
+} from "nuqs/server"
+import * as z from "zod"
+
+import { getFiltersStateParser, getSortingStateParser } from "@/lib/parsers"
+import { DocumentStagesView } from "@/db/schema/vendorDocu"
+
+export const searchParamsCache = createSearchParamsCache({
+  flags: parseAsArrayOf(z.enum(["advancedTable", "floatingBar"])).withDefault(
+    []
+  ),
+  page: parseAsInteger.withDefault(1),
+  perPage: parseAsInteger.withDefault(10),
+  sort: getSortingStateParser<DocumentStagesView>().withDefault([
+    { id: "createdAt", desc: true },
+  ]),
+  title: parseAsString.withDefault(""),
+  docNumber: parseAsString.withDefault(""),
+
+  // advanced filter
+  filters: getFiltersStateParser().withDefault([]),
+  joinOperator: parseAsStringEnum(["and", "or"]).withDefault("and"),
+  search: parseAsString.withDefault(""),
+
+})
+
+
+export type GetVendorDcoumentsSchema = Awaited<ReturnType<typeof searchParamsCache.parse>>
diff --git a/lib/vendor-document/repository.ts b/lib/vendor-document/repository.ts
new file mode 100644
index 00000000..79e0cf70
--- /dev/null
+++ b/lib/vendor-document/repository.ts
@@ -0,0 +1,44 @@
+import db from "@/db/db";
+import { vendorDocumentsView } from "@/db/schema/vendorDocu";
+import {
+    eq,
+    inArray,
+    not,
+    asc,
+    desc,
+    and,
+    ilike,
+    gte,
+    lte,
+    count,
+    gt,
+} from "drizzle-orm";
+import { PgTransaction } from "drizzle-orm/pg-core";
+
+export async function selectVendorDocuments(
+    tx: PgTransaction<any, any, any>,
+    params: {
+        where?: any; // drizzle-orm의 조건식 (and, eq...) 등
+        orderBy?: (ReturnType<typeof asc> | ReturnType<typeof desc>)[];
+        offset?: number;
+        limit?: number;
+    }
+) {
+    const { where, orderBy, offset = 0, limit = 10 } = params;
+
+    return tx
+        .select()
+        .from(vendorDocumentsView)
+        .where(where)
+        .orderBy(...(orderBy ?? []))
+        .offset(offset)
+        .limit(limit);
+}
+/** 총 개수 count */
+export async function countVendorDocuments(
+    tx: PgTransaction<any, any, any>,
+    where?: any
+) {
+    const res = await tx.select({ count: count() }).from(vendorDocumentsView).where(where);
+    return res[0]?.count ?? 0;
+}
diff --git a/lib/vendor-document/service.ts b/lib/vendor-document/service.ts
new file mode 100644
index 00000000..b14a64e0
--- /dev/null
+++ b/lib/vendor-document/service.ts
@@ -0,0 +1,346 @@
+"use server"
+
+import { eq, SQL } from "drizzle-orm"
+import db from "@/db/db"
+import { documentAttachments, documents, issueStages, revisions, vendorDocumentsView } from "@/db/schema/vendorDocu"
+import { contracts } from "@/db/schema/vendorData"
+import { GetVendorDcoumentsSchema } from "./validations"
+import { unstable_cache } from "@/lib/unstable-cache";
+import { filterColumns } from "@/lib/filter-columns";
+import { getErrorMessage } from "@/lib/handle-error";
+import { asc, desc, ilike, inArray, and, gte, lte, not, or , isNotNull, isNull} from "drizzle-orm";
+import { countVendorDocuments, selectVendorDocuments } from "./repository"
+import path from "path";
+import fs from "fs/promises";
+import { v4 as uuidv4 } from "uuid"
+
+/**
+ * 특정 vendorId에 속한 문서 목록 조회
+ */
+export async function getVendorDocumentLists(input: GetVendorDcoumentsSchema, id: number) {
+    return unstable_cache(
+        async () => {
+            try {
+                const offset = (input.page - 1) * input.perPage;
+
+                // advancedTable 모드면 filterColumns()로 where 절 구성
+                const advancedWhere = filterColumns({
+                    table: vendorDocumentsView,
+                    filters: input.filters,
+                    joinOperator: input.joinOperator,
+                });
+
+                let globalWhere
+                if (input.search) {
+                    const s = `%${input.search}%`
+                    globalWhere = or(ilike(vendorDocumentsView.title, s), ilike(vendorDocumentsView.docNumber, s)
+                    )
+                    // 필요시 여러 칼럼 OR조건 (status, priority, etc)
+                }
+
+                const finalWhere = and(advancedWhere, globalWhere, eq(vendorDocumentsView.contractId, id));
+                const orderBy =
+                    input.sort.length > 0
+                        ? input.sort.map((item) =>
+                            item.desc ? desc(vendorDocumentsView[item.id]) : asc(vendorDocumentsView[item.id])
+                        )
+                        : [asc(vendorDocumentsView.createdAt)];
+
+                // 트랜잭션 내부에서 Repository 호출
+                const { data, total } = await db.transaction(async (tx) => {
+                    const data = await selectVendorDocuments(tx, {
+                        where: finalWhere,
+                        orderBy,
+                        offset,
+                        limit: input.perPage,
+                    });
+                    const total = await countVendorDocuments(tx, finalWhere);
+                    return { data, total };
+                });
+
+                const pageCount = Math.ceil(total / input.perPage);
+
+
+                return { data, pageCount };
+            } catch (err) {
+                // 에러 발생 시 디폴트
+                return { data: [], pageCount: 0 };
+            }
+        },
+        [JSON.stringify(input), String(id)], // Include id in the cache key
+        {
+            revalidate: 3600,
+            tags: [`vendor-docuemnt-${id}`],
+        }
+    )();
+}
+
+
+// getDocumentVersionsByDocId 함수 수정 - 업로더 타입으로 필터링 추가
+export async function getDocumentVersionsByDocId(
+  docId: number,
+) {
+  // 모든 조건을 배열로 관리
+  const conditions: SQL<unknown>[] = [eq(issueStages.documentId, docId)];
+  
+
+  
+  // 쿼리 실행
+  const rows = await db
+    .select({
+      // stage 정보
+      stageId: issueStages.id,
+      stageName: issueStages.stageName,
+      planDate: issueStages.planDate,
+      actualDate: issueStages.actualDate,
+      
+      // revision 정보
+      revisionId: revisions.id,
+      revision: revisions.revision,
+      uploaderType: revisions.uploaderType,
+      uploaderName: revisions.uploaderName,
+      comment: revisions.comment,
+      status: revisions.status,
+      approvedDate: revisions.approvedDate,
+      
+      // attachment 정보
+      attachmentId: documentAttachments.id,
+      fileName: documentAttachments.fileName,
+      filePath: documentAttachments.filePath,
+      fileType: documentAttachments.fileType,
+      DocumentSubmitDate: revisions.createdAt,
+    })
+    .from(issueStages)
+    .leftJoin(revisions, eq(issueStages.id, revisions.issueStageId))
+    .leftJoin(documentAttachments, eq(revisions.id, documentAttachments.revisionId))
+    .where(and(...conditions))
+    .orderBy(issueStages.id, revisions.id, documentAttachments.id);
+
+  // 결과를 처리하여 프론트엔드 형식으로 변환
+  // 스테이지+리비전별로 그룹화
+  const stageRevMap = new Map();
+  // 리비전이 있는 스테이지 ID 추적
+  const stagesWithRevisions = new Set();
+
+  for (const row of rows) {
+    const stageId = row.stageId;
+    
+
+    // 리비전이 있는 경우 처리
+    if (row.revisionId) {
+      // 리비전이 있는 스테이지 추적
+      stagesWithRevisions.add(stageId);
+      
+      const key = `${stageId}-${row.revisionId}`;
+      
+      if (!stageRevMap.has(key)) {
+        stageRevMap.set(key, {
+          id: row.revisionId,
+          stage: row.stageName,
+          revision: row.revision,
+          uploaderType: row.uploaderType,
+          uploaderName: row.uploaderName || null,
+          comment: row.comment || null,
+          status: row.status || null,
+          planDate: row.planDate,
+          actualDate: row.actualDate,
+          approvedDate: row.approvedDate,
+          DocumentSubmitDate: row.DocumentSubmitDate,
+          attachments: []
+        });
+      }
+      
+      // attachmentId가 있는 경우에만 첨부파일 추가
+      if (row.attachmentId) {
+        stageRevMap.get(key).attachments.push({
+          id: row.attachmentId,
+          fileName: row.fileName,
+          filePath: row.filePath,
+          fileType: row.fileType
+        });
+      }
+    }
+  }
+
+
+  // 최종 결과 생성
+  const result = [
+    ...stageRevMap.values()
+  ];
+
+  // 스테이지 이름으로 정렬하고, 같은 스테이지 내에서는 리비전이 없는 항목이 먼저 오도록 정렬
+  result.sort((a, b) => {
+    if (a.stage !== b.stage) {
+      return a.stage.localeCompare(b.stage);
+    }
+    
+    // 같은 스테이지 내에서는 리비전이 없는 항목이 먼저 오도록
+    if (a.revision === null) return -1;
+    if (b.revision === null) return 1;
+    
+    // 두 항목 모두 리비전이 있는 경우 리비전 번호로 정렬
+    return a.revision - b.revision;
+  });
+
+  return result;
+}
+// createRevisionAction 함수 수정 - 확장된 업로더 타입 지원
+export async function createRevisionAction(formData: FormData) {
+
+  const stage = formData.get("stage") as string | null
+  const revision = formData.get("revision") as string | null
+  const docIdStr = formData.get("documentId") as string
+  const docId = parseInt(docIdStr, 10)
+  const customFileName = formData.get("customFileName") as string;
+
+  // 업로더 타입 추가 (기본값: "vendor")
+  const uploaderType = formData.get("uploaderType") as string || "vendor"
+  const uploaderName = formData.get("uploaderName") as string | null
+  const comment = formData.get("comment") as string | null
+  
+  if (!docId || Number.isNaN(docId)) {
+    throw new Error("Invalid or missing documentId")
+  }
+  if (!stage || !revision) {
+    throw new Error("Missing stage/revision")
+  }
+  
+  // 업로더 타입 검증
+  if (!['vendor', 'client', 'shi'].includes(uploaderType)) {
+    throw new Error(`Invalid uploaderType: ${uploaderType}. Must be one of: vendor, client, shi`);
+  }
+  
+  // 트랜잭션 시작
+  return await db.transaction(async (tx) => {
+    // (1) issueStageId 찾기 (stageName + documentId)
+    let issueStageId: number;
+    const stageRecord = await tx
+      .select()
+      .from(issueStages)
+      .where(and(eq(issueStages.stageName, stage), eq(issueStages.documentId, docId)))
+      .limit(1)
+    
+    if (!stageRecord.length) {
+      // Stage가 없으면 새로 생성
+      const [newStage] = await tx
+        .insert(issueStages)
+        .values({
+          documentId: docId,
+          stageName: stage,
+          updatedAt: new Date(),
+        })
+        .returning()
+      
+      issueStageId = newStage.id
+    } else {
+      issueStageId = stageRecord[0].id
+    }
+    
+    // (2) Revision 찾기 또는 생성 (issueStageId + revision 조합)
+    let revisionId: number;
+    const revisionRecord = await tx
+      .select()
+      .from(revisions)
+      .where(and(eq(revisions.issueStageId, issueStageId), eq(revisions.revision, revision)))
+      .limit(1)
+    
+    // 기본 상태값 설정
+    let status = 'submitted';
+    if (uploaderType === 'client') status = 'reviewed';
+    if (uploaderType === 'shi') status = 'official';
+    
+    if (!revisionRecord.length) {
+      // Revision이 없으면 새로 생성
+      const [newRevision] = await tx
+        .insert(revisions)
+        .values({
+          issueStageId,
+          revision,
+          uploaderType,
+          uploaderName: uploaderName || undefined,
+          comment: comment || undefined,
+          status,
+          updatedAt: new Date(),
+        })
+        .returning()
+      
+      revisionId = newRevision.id
+    } else {
+      // 이미 존재하는 경우, 업로더 타입이 다르면 업데이트
+      if (revisionRecord[0].uploaderType !== uploaderType) {
+        await tx
+          .update(revisions)
+          .set({
+            uploaderType,
+            uploaderName: uploaderName || undefined,
+            comment: comment || undefined,
+            status,
+            updatedAt: new Date(),
+          })
+          .where(eq(revisions.id, revisionRecord[0].id))
+      }
+      revisionId = revisionRecord[0].id
+    }
+    
+    // (3) 파일 처리
+    const file = formData.get("attachment") as File | null
+    let attachmentRecord: typeof documentAttachments.$inferSelect | null = null;
+    
+    if (file && file.size > 0) {
+      const originalName = customFileName
+      const ext = path.extname(originalName)
+      const uniqueName = uuidv4() + ext
+      const baseDir = path.join(process.cwd(), "public", "documents")
+      const savePath = path.join(baseDir, uniqueName)
+      
+      const arrayBuffer = await file.arrayBuffer()
+      const buffer = Buffer.from(arrayBuffer)
+      await fs.writeFile(savePath, buffer)
+      
+      // 파일 정보를 documentAttachments 테이블에 저장
+      const result = await tx
+        .insert(documentAttachments)
+        .values({
+          revisionId,
+          fileName: originalName,
+          filePath: "/documents/" + uniqueName,
+          fileSize: file.size,
+          fileType: ext.replace('.', '').toLowerCase(),
+          updatedAt: new Date(),
+        })
+        .returning()
+      
+      // 첫 번째 결과만 할당
+      attachmentRecord = result[0]
+    }
+    
+    // (4) Documents 테이블의 updatedAt 갱신 (docId가 documents.id)
+    await tx
+      .update(documents)
+      .set({ updatedAt: new Date() })
+      .where(eq(documents.id, docId))
+    
+    return attachmentRecord
+  })
+}
+
+
+export async function getStageNamesByDocumentId(documentId: number) {
+  try {
+    if (!documentId || Number.isNaN(documentId)) {
+      throw new Error("Invalid document ID");
+    }
+
+    const stageRecords = await db
+      .select({ stageName: issueStages.stageName })
+      .from(issueStages)
+      .where(eq(issueStages.documentId, documentId))
+      .orderBy(issueStages.stageName);
+    
+    // stageName 배열로 변환
+    return stageRecords.map(record => record.stageName);
+  } catch (error) {
+    console.error("Error fetching stage names:", error);
+    return []; // 오류 발생시 빈 배열 반환
+  }
+}
\ No newline at end of file
diff --git a/lib/vendor-document/table/doc-table-column.tsx b/lib/vendor-document/table/doc-table-column.tsx
new file mode 100644
index 00000000..e53b03b9
--- /dev/null
+++ b/lib/vendor-document/table/doc-table-column.tsx
@@ -0,0 +1,150 @@
+"use client"
+
+import * as React from "react"
+import { ColumnDef } from "@tanstack/react-table"
+import { formatDate, formatDateTime } from "@/lib/utils"
+import { Checkbox } from "@/components/ui/checkbox"
+import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header"
+import { DataTableRowAction } from "@/types/table"
+import { VendorDocumentsView } from "@/db/schema/vendorDocu"
+
+interface GetColumnsProps {
+  setRowAction: React.Dispatch<React.SetStateAction<DataTableRowAction<VendorDocumentsView> | null>>
+}
+
+export function getColumns({
+  setRowAction,
+}: GetColumnsProps): ColumnDef<VendorDocumentsView>[] {
+  return [
+    {
+      id: "select",
+      // Remove the "Select all" checkbox in header since we're doing single-select
+      header: () => <span className="sr-only">Select</span>,
+      cell: ({ row, table }) => (
+        <Checkbox
+          checked={row.getIsSelected()}
+          onCheckedChange={(value) => {
+            // If selecting this row
+            if (value) {
+              // First deselect all rows (to ensure single selection)
+              table.toggleAllRowsSelected(false)
+              // Then select just this row
+              row.toggleSelected(true)
+              // Trigger the same action that was in the "Select" button
+              setRowAction({ row, type: "select" })
+            } else {
+              // Just deselect this row
+              row.toggleSelected(false)
+            }
+          }}
+          aria-label="Select row"
+          className="translate-y-0.5"
+        />
+      ),
+      enableSorting: false,
+      enableHiding: false,
+      enableResizing: false,
+      size: 40,
+      minSize: 40,
+      maxSize: 40,
+    },
+    
+    {
+      accessorKey: "docNumber",
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title="Doc Number" />
+      ),
+      cell: ({ row }) => <div>{row.getValue("docNumber")}</div>,
+      meta: {
+        excelHeader: "Doc Number"
+      },
+      enableResizing: true,
+      minSize: 100,
+      size: 160,
+    },
+    {
+      accessorKey: "title",
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title="Doc title" />
+      ),
+      cell: ({ row }) => <div>{row.getValue("title")}</div>,
+      meta: {
+        excelHeader: "Doc title"
+      },
+      enableResizing: true,
+      minSize: 100,
+      size: 160,
+    },
+    {
+      accessorKey: "latestStageName",
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title="Latest Stage Name" />
+      ),
+      cell: ({ row }) => <div>{row.getValue("latestStageName")}</div>,
+      meta: {
+        excelHeader: "Latest Stage Name"
+      },
+      enableResizing: true,
+      minSize: 100,
+      size: 160,
+    },
+    {
+      accessorKey: "latestStagePlanDate",
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title="Latest Stage Plan Date" />
+      ),
+      cell: ({ cell }) => {
+        const value = cell.getValue();
+        return value ? formatDate(value as Date) : "";
+      },      meta: {
+        excelHeader: "Latest Stage Plan Date"
+      },
+      enableResizing: true,
+      minSize: 100,
+      size: 160,
+    },
+    {
+      accessorKey: "latestStageActualDate",
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title="Latest Stage Actual Date" />
+      ),
+      cell: ({ cell }) => {
+        const value = cell.getValue();
+        return value ? formatDate(value as Date) : "";
+      },      meta: {
+        excelHeader: "Latest Stage Actual Date"
+      },
+      enableResizing: true,
+      minSize: 100,
+      size: 160,
+    },
+    {
+      accessorKey: "latestRevision",
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title="Latest Revision" />
+      ),
+      cell: ({ row }) => <div>{row.getValue("latestRevision")}</div>,
+      meta: {
+        excelHeader: "Latest Revision"
+      },
+      enableResizing: true,
+      minSize: 100,
+      size: 160,
+    },
+
+    {
+      accessorKey: "updatedAt",
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title="Updated At" />
+      ),
+      cell: ({ cell }) => formatDateTime(cell.getValue() as Date),
+      meta: {
+        excelHeader: "updated At"
+      },
+      enableResizing: true,
+      minSize: 120,
+      size: 180,
+    },
+    // The "actions" column has been removed
+  ]
+}
\ No newline at end of file
diff --git a/lib/vendor-document/table/doc-table-toolbar-actions.tsx b/lib/vendor-document/table/doc-table-toolbar-actions.tsx
new file mode 100644
index 00000000..cf4aa7c1
--- /dev/null
+++ b/lib/vendor-document/table/doc-table-toolbar-actions.tsx
@@ -0,0 +1,57 @@
+"use client"
+
+import * as React from "react"
+import { type Table } from "@tanstack/react-table"
+import { Download, Send, Upload } from "lucide-react"
+import { toast } from "sonner"
+
+import { exportTableToExcel } from "@/lib/export"
+import { Button } from "@/components/ui/button"
+import { VendorDocumentsView } from "@/db/schema/vendorDocu"
+
+
+interface DocTableToolbarActionsProps {
+  table: Table<VendorDocumentsView>
+}
+
+export function DocTableToolbarActions({ table }: DocTableToolbarActionsProps) {
+
+
+  return (
+    <div className="flex items-center gap-2">
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={() =>
+          exportTableToExcel(table, {
+            filename: "tasks",
+            excludeColumns: ["select", "actions"],
+          })
+        }
+        className="gap-2"
+      >
+        <Download className="size-4" aria-hidden="true" />
+        <span className="hidden sm:inline">Export</span>
+      </Button>
+
+
+      <Button
+        size="sm"
+        className="gap-2"
+      >
+        <Upload className="size-4" aria-hidden="true" />
+        <span className="hidden sm:inline">Bulk File Upload</span>
+      </Button>
+
+      <Button
+        variant="samsung"
+        size="sm"
+        className="gap-2"
+      >
+        <Send className="size-4" aria-hidden="true" />
+        <span className="hidden sm:inline">Send to SHI</span>
+      </Button>
+
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/lib/vendor-document/table/doc-table.tsx b/lib/vendor-document/table/doc-table.tsx
new file mode 100644
index 00000000..dfd906fa
--- /dev/null
+++ b/lib/vendor-document/table/doc-table.tsx
@@ -0,0 +1,124 @@
+"use client"
+
+import * as React from "react"
+import type {
+  DataTableAdvancedFilterField,
+  DataTableFilterField,
+  DataTableRowAction,
+} from "@/types/table"
+
+import { useDataTable } from "@/hooks/use-data-table"
+import { DataTable } from "@/components/data-table/data-table"
+import { getColumns } from "./doc-table-column"
+import { getVendorDocumentLists } from "../service"
+import { VendorDocumentsView } from "@/db/schema/vendorDocu"
+import { useEffect } from "react"
+import { DataTableAdvancedToolbar } from "@/components/data-table/data-table-advanced-toolbar"
+import { DocTableToolbarActions } from "./doc-table-toolbar-actions"
+
+interface DocumentListTableProps {
+  promises: Promise<[Awaited<ReturnType<typeof getVendorDocumentLists>>]>
+  selectedPackageId: number
+  onSelectDocument?: (document: VendorDocumentsView | null) => void
+}
+
+export function DocumentListTable({
+  promises,
+  selectedPackageId,
+  onSelectDocument
+}: DocumentListTableProps) {
+  // 1) 데이터를 가져옴 (server component -> use(...) pattern)
+  const [{ data, pageCount }] = React.use(promises)
+
+  console.log(data)
+  const [rowAction, setRowAction] = React.useState<DataTableRowAction<VendorDocumentsView> | null>(null)
+
+  // 3) 행 액션 처리
+  useEffect(() => {
+    if (rowAction) {
+      // 액션 유형에 따라 처리
+      switch (rowAction.type) {
+        case "select":
+          // 선택된 문서 처리
+          if (onSelectDocument) {
+            onSelectDocument(rowAction.row.original)
+          }
+          break;
+        case "update":
+          // 업데이트 처리 로직
+          console.log("Update document:", rowAction.row.original)
+          break;
+        case "delete":
+          // 삭제 처리 로직
+          console.log("Delete document:", rowAction.row.original)
+          break;
+      }
+
+      // 액션 처리 후 rowAction 초기화
+      setRowAction(null)
+    }
+  }, [rowAction, onSelectDocument])
+
+  const columns = React.useMemo(
+    () => getColumns({ setRowAction }),
+    [setRowAction]
+  )
+
+  // Filter fields
+  const filterFields: DataTableFilterField<VendorDocumentsView>[] = []
+
+  const advancedFilterFields: DataTableAdvancedFilterField<VendorDocumentsView>[] = [
+    {
+      id: "docNumber",
+      label: "Doc Number",
+      type: "text",
+    },
+    {
+      id: "title",
+      label: "Doc Title",
+      type: "text",
+    },
+    {
+      id: "createdAt",
+      label: "Created at",
+      type: "date",
+    },
+    {
+      id: "updatedAt",
+      label: "Updated at",
+      type: "date",
+    },
+  ]
+
+  // useDataTable 훅으로 react-table 구성
+  const { table } = useDataTable({
+    data: data,      // <-- 여기서 tableData 사용
+    columns,
+    pageCount,
+    filterFields,
+    enablePinning: true,
+    enableAdvancedFilter: true,
+    initialState: {
+      sorting: [{ id: "createdAt", desc: true }],
+      columnPinning: { right: ["actions"] },
+    },
+    getRowId: (originalRow) => String(originalRow.id),
+    shallow: false,
+    clearOnDefault: true,
+    columnResizeMode: "onEnd",
+
+  })
+  return (
+    <>
+      <DataTable table={table} >
+        <DataTableAdvancedToolbar
+          table={table}
+          filterFields={advancedFilterFields}
+          shallow={false}
+        >
+          <DocTableToolbarActions table={table}/>
+        </DataTableAdvancedToolbar>
+      </DataTable>
+    </>
+  )
+}
\ No newline at end of file
diff --git a/lib/vendor-document/validations.ts b/lib/vendor-document/validations.ts
new file mode 100644
index 00000000..7b8bb5fb
--- /dev/null
+++ b/lib/vendor-document/validations.ts
@@ -0,0 +1,33 @@
+import {
+  createSearchParamsCache,
+  parseAsArrayOf,
+  parseAsInteger,
+  parseAsString,
+  parseAsStringEnum,
+} from "nuqs/server"
+import * as z from "zod"
+
+import { getFiltersStateParser, getSortingStateParser } from "@/lib/parsers"
+import { VendorDocumentsView, vendorDocumentsView } from "@/db/schema/vendorDocu"
+
+export const searchParamsCache = createSearchParamsCache({
+  flags: parseAsArrayOf(z.enum(["advancedTable", "floatingBar"])).withDefault(
+    []
+  ),
+  page: parseAsInteger.withDefault(1),
+  perPage: parseAsInteger.withDefault(10),
+  sort: getSortingStateParser<VendorDocumentsView>().withDefault([
+    { id: "createdAt", desc: true },
+  ]),
+  title: parseAsString.withDefault(""),
+  docNumber: parseAsString.withDefault(""),
+
+  // advanced filter
+  filters: getFiltersStateParser().withDefault([]),
+  joinOperator: parseAsStringEnum(["and", "or"]).withDefault("and"),
+  search: parseAsString.withDefault(""),
+
+})
+
+
+export type GetVendorDcoumentsSchema = Awaited<ReturnType<typeof searchParamsCache.parse>>
diff --git a/lib/vendor-rfq-response/service.ts b/lib/vendor-rfq-response/service.ts
new file mode 100644
index 00000000..cba6c414
--- /dev/null
+++ b/lib/vendor-rfq-response/service.ts
@@ -0,0 +1,301 @@
+import { unstable_cache } from "next/cache";
+import  db  from "@/db/db";
+import { and, desc, eq, inArray, isNull, or, sql } from "drizzle-orm";
+import { rfqAttachments, rfqComments, rfqItems } from "@/db/schema/rfq";
+import { vendorResponsesView, vendorTechnicalResponses, vendorCommercialResponses, vendorResponseAttachments } from "@/db/schema/rfq";
+import { items } from "@/db/schema/items";
+import { GetRfqsForVendorsSchema } from "../rfqs/validations";
+
+
+
+export async function getRfqResponsesForVendor(input: GetRfqsForVendorsSchema, vendorId: number) {
+  return unstable_cache(
+    async () => {
+      const offset = (input.page - 1) * input.perPage;
+      const limit = input.perPage;
+
+      // 1) 메인 쿼리: vendorResponsesView 사용
+      const { rows, total } = await db.transaction(async (tx) => {
+        // 검색 조건
+        let globalWhere;
+        if (input.search) {
+          const s = `%${input.search}%`;
+          globalWhere = or(
+            sql`${vendorResponsesView.rfqCode} ILIKE ${s}`,
+            sql`${vendorResponsesView.projectName} ILIKE ${s}`,
+            sql`${vendorResponsesView.rfqDescription} ILIKE ${s}`
+          );
+        }
+
+        // 벤더 ID 필터링
+        const mainWhere = and(eq(vendorResponsesView.vendorId, vendorId), globalWhere);
+
+        // 정렬: 응답 시간순
+        const orderBy = [desc(vendorResponsesView.respondedAt)];
+
+        // (A) 데이터 조회
+        const data = await tx
+          .select()
+          .from(vendorResponsesView)
+          .where(mainWhere)
+          .orderBy(...orderBy)
+          .offset(offset)
+          .limit(limit);
+
+        // (B) 전체 개수 카운트
+        const [{ count }] = await tx
+          .select({
+            count: sql<number>`count(*)`.as("count"),
+          })
+          .from(vendorResponsesView)
+          .where(mainWhere);
+
+        return { rows: data, total: Number(count) };
+      });
+
+      // 2) rfqId 고유 목록 추출
+      const distinctRfqs = [...new Set(rows.map((r) => r.rfqId))];
+      if (distinctRfqs.length === 0) {
+        return { data: [], pageCount: 0 };
+      }
+
+      // 3) 추가 데이터 조회
+      // 3-A) RFQ 아이템
+      const itemsAll = await db
+        .select({
+          id: rfqItems.id,
+          rfqId: rfqItems.rfqId,
+          itemCode: rfqItems.itemCode,
+          itemName: items.itemName,
+          quantity: rfqItems.quantity,
+          description: rfqItems.description,
+          uom: rfqItems.uom,
+        })
+        .from(rfqItems)
+        .leftJoin(items, eq(rfqItems.itemCode, items.itemCode))
+        .where(inArray(rfqItems.rfqId, distinctRfqs));
+
+      // 3-B) RFQ 첨부 파일 (벤더용)
+      const attachAll = await db
+        .select()
+        .from(rfqAttachments)
+        .where(
+          and(
+            inArray(rfqAttachments.rfqId, distinctRfqs),
+            isNull(rfqAttachments.vendorId)
+          )
+        );
+
+      // 3-C) RFQ 코멘트
+      const commAll = await db
+        .select()
+        .from(rfqComments)
+        .where(
+          and(
+            inArray(rfqComments.rfqId, distinctRfqs),
+            or(
+              isNull(rfqComments.vendorId),
+              eq(rfqComments.vendorId, vendorId)
+            )
+          )
+        );
+
+  
+      // 3-E) 벤더 응답 상세 - 기술
+      const technicalResponsesAll = await db
+        .select()
+        .from(vendorTechnicalResponses)
+        .where(
+          inArray(
+            vendorTechnicalResponses.responseId,
+            rows.map((r) => r.responseId)
+          )
+        );
+
+      // 3-F) 벤더 응답 상세 - 상업
+      const commercialResponsesAll = await db
+        .select()
+        .from(vendorCommercialResponses)
+        .where(
+          inArray(
+            vendorCommercialResponses.responseId,
+            rows.map((r) => r.responseId)
+          )
+        );
+
+      // 3-G) 벤더 응답 첨부 파일
+      const responseAttachmentsAll = await db
+        .select()
+        .from(vendorResponseAttachments)
+        .where(
+          inArray(
+            vendorResponseAttachments.responseId,
+            rows.map((r) => r.responseId)
+          )
+        );
+
+      // 4) 데이터 그룹화
+      // RFQ 아이템 그룹화
+      const itemsByRfqId = new Map<number, any[]>();
+      for (const it of itemsAll) {
+        if (!itemsByRfqId.has(it.rfqId)) {
+          itemsByRfqId.set(it.rfqId, []);
+        }
+        itemsByRfqId.get(it.rfqId)!.push({
+          id: it.id,
+          itemCode: it.itemCode,
+          itemName: it.itemName,
+          quantity: it.quantity,
+          description: it.description,
+          uom: it.uom,
+        });
+      }
+
+      // RFQ 첨부 파일 그룹화
+      const attachByRfqId = new Map<number, any[]>();
+      for (const att of attachAll) {
+        const rid = att.rfqId!;
+        if (!attachByRfqId.has(rid)) {
+          attachByRfqId.set(rid, []);
+        }
+        attachByRfqId.get(rid)!.push({
+          id: att.id,
+          fileName: att.fileName,
+          filePath: att.filePath,
+          vendorId: att.vendorId,
+          evaluationId: att.evaluationId,
+        });
+      }
+
+      // RFQ 코멘트 그룹화
+      const commByRfqId = new Map<number, any[]>();
+      for (const c of commAll) {
+        const rid = c.rfqId!;
+        if (!commByRfqId.has(rid)) {
+          commByRfqId.set(rid, []);
+        }
+        commByRfqId.get(rid)!.push({
+          id: c.id,
+          commentText: c.commentText,
+          vendorId: c.vendorId,
+          evaluationId: c.evaluationId,
+          createdAt: c.createdAt,
+        });
+      }
+
+    
+      // 기술 응답 그룹화
+      const techResponseByResponseId = new Map<number, any>();
+      for (const tr of technicalResponsesAll) {
+        techResponseByResponseId.set(tr.responseId, {
+          id: tr.id,
+          summary: tr.summary,
+          notes: tr.notes,
+          createdAt: tr.createdAt,
+          updatedAt: tr.updatedAt,
+        });
+      }
+
+      // 상업 응답 그룹화
+      const commResponseByResponseId = new Map<number, any>();
+      for (const cr of commercialResponsesAll) {
+        commResponseByResponseId.set(cr.responseId, {
+          id: cr.id,
+          totalPrice: cr.totalPrice,
+          currency: cr.currency,
+          paymentTerms: cr.paymentTerms,
+          incoterms: cr.incoterms,
+          deliveryPeriod: cr.deliveryPeriod,
+          warrantyPeriod: cr.warrantyPeriod,
+          validityPeriod: cr.validityPeriod,
+          priceBreakdown: cr.priceBreakdown,
+          commercialNotes: cr.commercialNotes,
+          createdAt: cr.createdAt,
+          updatedAt: cr.updatedAt,
+        });
+      }
+
+      // 응답 첨부 파일 그룹화
+      const respAttachByResponseId = new Map<number, any[]>();
+      for (const ra of responseAttachmentsAll) {
+        const rid = ra.responseId!;
+        if (!respAttachByResponseId.has(rid)) {
+          respAttachByResponseId.set(rid, []);
+        }
+        respAttachByResponseId.get(rid)!.push({
+          id: ra.id,
+          fileName: ra.fileName,
+          filePath: ra.filePath,
+          attachmentType: ra.attachmentType,
+          description: ra.description,
+          uploadedAt: ra.uploadedAt,
+          uploadedBy: ra.uploadedBy,
+        });
+      }
+
+      // 5) 최종 데이터 결합
+      const final = rows.map((row) => {
+        return {
+          // 응답 정보
+          responseId: row.responseId,
+          responseStatus: row.responseStatus,
+          respondedAt: row.respondedAt,
+          
+          // RFQ 기본 정보
+          rfqId: row.rfqId,
+          rfqCode: row.rfqCode,
+          rfqDescription: row.rfqDescription,
+          rfqDueDate: row.rfqDueDate,
+          rfqStatus: row.rfqStatus,
+          rfqType: row.rfqType,
+          rfqCreatedAt: row.rfqCreatedAt,
+          rfqUpdatedAt: row.rfqUpdatedAt,
+          rfqCreatedBy: row.rfqCreatedBy,
+          
+          // 프로젝트 정보
+          projectId: row.projectId,
+          projectCode: row.projectCode,
+          projectName: row.projectName,
+          
+          // 벤더 정보
+          vendorId: row.vendorId,
+          vendorName: row.vendorName,
+          vendorCode: row.vendorCode,
+          
+          // RFQ 관련 데이터
+          items: itemsByRfqId.get(row.rfqId) || [],
+          attachments: attachByRfqId.get(row.rfqId) || [],
+          comments: commByRfqId.get(row.rfqId) || [],
+          
+          // 평가 정보
+          tbeEvaluation: row.tbeId ? {
+            id: row.tbeId,
+            result: row.tbeResult,
+          } : null,
+          cbeEvaluation: row.cbeId ? {
+            id: row.cbeId,
+            result: row.cbeResult,
+          } : null,
+          
+          // 벤더 응답 상세
+          technicalResponse: techResponseByResponseId.get(row.responseId) || null,
+          commercialResponse: commResponseByResponseId.get(row.responseId) || null,
+          responseAttachments: respAttachByResponseId.get(row.responseId) || [],
+          
+          // 응답 상태 표시
+          hasTechnicalResponse: row.hasTechnicalResponse,
+          hasCommercialResponse: row.hasCommercialResponse,
+          attachmentCount: row.attachmentCount || 0,
+        };
+      });
+
+      const pageCount = Math.ceil(total / input.perPage);
+      return { data: final, pageCount };
+    },
+    [JSON.stringify(input), `${vendorId}`],
+    {
+      revalidate: 600,
+      tags: ["rfqs-vendor", `vendor-${vendorId}`],
+    }
+  )();
+}
\ No newline at end of file
diff --git a/lib/vendor-rfq-response/types.ts b/lib/vendor-rfq-response/types.ts
new file mode 100644
index 00000000..5dadc89b
--- /dev/null
+++ b/lib/vendor-rfq-response/types.ts
@@ -0,0 +1,76 @@
+// RFQ 아이템 타입
+export interface RfqResponseItem {
+  id: number;
+  itemCode: string;
+  itemName: string;
+  quantity?: number;
+  uom?: string;
+  description?: string | null;
+}
+
+// RFQ 첨부 파일 타입
+export interface RfqResponseAttachment {
+  id: number;
+  fileName: string;
+  filePath: string;
+  vendorId?: number | null;
+  evaluationId?: number | null;
+}
+
+// RFQ 코멘트 타입
+export interface RfqResponseComment {
+  id: number;
+  commentText: string;
+  vendorId?: number | null;
+  evaluationId?: number | null;
+  createdAt: Date;
+  commentedBy?: number;
+}
+
+// 최종 RfqResponse 타입 - RFQ 참여 응답만 포함하도록 간소화
+export interface RfqResponse {
+  // 응답 정보
+  responseId: number;
+  responseStatus: "INVITED" | "ACCEPTED" | "DECLINED" | "REVIEWING" | "RESPONDED";
+  respondedAt: Date;
+  
+  // RFQ 기본 정보
+  rfqId: number;
+  rfqCode: string;
+  rfqDescription?: string | null;
+  rfqDueDate?: Date | null;
+  rfqStatus: string;
+  rfqType?: string | null;
+  rfqCreatedAt: Date;
+  rfqUpdatedAt: Date;
+  rfqCreatedBy?: number | null;
+  
+  // 프로젝트 정보
+  projectId?: number | null;
+  projectCode?: string | null;
+  projectName?: string | null;
+  
+  // 벤더 정보
+  vendorId: number;
+  vendorName: string;
+  vendorCode?: string | null;
+  
+  // RFQ 관련 데이터
+  items: RfqResponseItem[];
+  attachments: RfqResponseAttachment[];
+  comments: RfqResponseComment[];
+}
+
+// DataTable 등에서 사용할 수 있도록 id 필드를 추가한 확장 타입
+export interface RfqResponseWithId extends RfqResponse {
+  id: number; // rfqId와 동일하게 사용
+}
+
+// 페이지네이션 결과 타입
+export interface RfqResponsesResult {
+  data: RfqResponseWithId[];
+  pageCount: number;
+}
+
+// 이전 버전과의 호환성을 위한 RfqWithAll 타입 (이름만 유지)
+export type RfqWithAll = RfqResponseWithId;
\ No newline at end of file
diff --git a/lib/vendor-rfq-response/vendor-rfq-table/ItemsDialog.tsx b/lib/vendor-rfq-response/vendor-rfq-table/ItemsDialog.tsx
new file mode 100644
index 00000000..504fc177
--- /dev/null
+++ b/lib/vendor-rfq-response/vendor-rfq-table/ItemsDialog.tsx
@@ -0,0 +1,125 @@
+"use client"
+
+import * as React from "react"
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table"
+import { RfqWithAll } from "../types"
+/**
+ * 아이템 구조 예시
+ * - API 응답에서 quantity가 "string" 형태이므로,
+ *   숫자로 사용하실 거라면 parse 과정이 필요할 수 있습니다.
+ */
+export interface RfqItem {
+  id: number
+  itemCode: string
+  itemName: string
+  quantity: string
+  description: string
+  uom: string
+}
+
+/**
+ * 첨부파일 구조 예시
+ */
+export interface RfqAttachment {
+  id: number
+  fileName: string
+  filePath: string
+  vendorId: number | null
+  evaluationId: number | null
+}
+
+
+/**
+ * 다이얼로그 내에서만 사용할 단순 아이템 구조 (예: 임시/기본값 표출용)
+ */
+export interface DefaultItem {
+  id?: number
+  itemCode: string
+  description?: string | null
+  quantity?: number | null
+  uom?: string | null
+}
+
+/**
+ * RfqsItemsDialog 컴포넌트 Prop 타입
+ */
+export interface RfqsItemsDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  rfq: RfqWithAll
+  defaultItems?: DefaultItem[]
+}
+
+export function RfqsItemsDialog({
+  open,
+  onOpenChange,
+  rfq,
+}: RfqsItemsDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-none w-[1200px]">
+        <DialogHeader>
+          <DialogTitle>Items for RFQ {rfq?.rfqCode}</DialogTitle>
+          <DialogDescription>
+            Below is the list of items for this RFQ.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="overflow-x-auto w-full space-y-4">
+          {rfq && rfq.items.length === 0 && (
+            <p className="text-sm text-muted-foreground">No items found.</p>
+          )}
+          {rfq && rfq.items.length > 0 && (
+            <Table>
+              {/* 필요에 따라 TableCaption 등을 추가해도 좋습니다. */}
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Item Code</TableHead>
+                  <TableHead>Item Code</TableHead>
+                  <TableHead>Description</TableHead>
+                  <TableHead>Qty</TableHead>
+                  <TableHead>UoM</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {rfq.items.map((it, idx) => (
+                  <TableRow key={it.id ?? idx}>
+                    <TableCell>{it.itemCode || "No Code"}</TableCell>
+                    <TableCell>{it.itemName || "No Name"}</TableCell>
+                    <TableCell>{it.description || "-"}</TableCell>
+                    <TableCell>{it.quantity ?? 1}</TableCell>
+                    <TableCell>{it.uom ?? "each"}</TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          )}
+        </div>
+
+        <DialogFooter className="mt-4">
+          <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
+            Close
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
\ No newline at end of file
diff --git a/lib/vendor-rfq-response/vendor-rfq-table/attachment-rfq-sheet.tsx b/lib/vendor-rfq-response/vendor-rfq-table/attachment-rfq-sheet.tsx
new file mode 100644
index 00000000..6c51c12c
--- /dev/null
+++ b/lib/vendor-rfq-response/vendor-rfq-table/attachment-rfq-sheet.tsx
@@ -0,0 +1,106 @@
+"use client"
+
+import * as React from "react"
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetDescription,
+  SheetFooter,
+  SheetClose,
+} from "@/components/ui/sheet"
+import { Button } from "@/components/ui/button"
+import { Download } from "lucide-react"
+import { formatDate } from "@/lib/utils"
+
+// 첨부파일 구조
+interface RfqAttachment {
+  id: number
+  fileName: string
+  filePath: string
+  createdAt?: Date  // or Date
+  vendorId?: number | null
+  size?: number
+}
+
+// 컴포넌트 Prop
+interface RfqAttachmentsSheetProps extends React.ComponentPropsWithRef<typeof Sheet> {
+  rfqId: number
+  attachments?: RfqAttachment[]
+}
+
+/**
+ * RfqAttachmentsSheet:
+ * - 단순히 첨부파일 리스트 + 다운로드 버튼만
+ */
+export function RfqAttachmentsSheet({
+  rfqId,
+  attachments = [],
+  ...props
+}: RfqAttachmentsSheetProps) {
+  return (
+    <Sheet {...props}>
+      <SheetContent className="flex flex-col gap-6 sm:max-w-sm">
+        <SheetHeader>
+          <SheetTitle>Attachments</SheetTitle>
+          <SheetDescription>RFQ #{rfqId}에 대한 첨부파일 목록</SheetDescription>
+        </SheetHeader>
+
+        <div className="space-y-2">
+          {/* 첨부파일이 없을 경우 */}
+          {attachments.length === 0 && (
+            <p className="text-sm text-muted-foreground">
+              No attachments
+            </p>
+          )}
+
+          {/* 첨부파일 목록 */}
+          {attachments.map((att) => (
+            <div
+              key={att.id}
+              className="flex items-center justify-between rounded border p-2"
+            >
+              <div className="flex flex-col text-sm">
+                <span className="font-medium">{att.fileName}</span>
+                {att.size && (
+                  <span className="text-xs text-muted-foreground">
+                    {Math.round(att.size / 1024)} KB
+                  </span>
+                )}
+                {att.createdAt && (
+                  <span className="text-xs text-muted-foreground">
+                    Created at {formatDate(att.createdAt)}
+                  </span>
+                )}
+              </div>
+              {/* 파일 다운로드 버튼 */}
+              {att.filePath && (
+                <a
+                  href={att.filePath}
+                  download
+                  target="_blank"
+                  rel="noreferrer"
+                  className="text-sm"
+                >
+                  <Button variant="ghost" size="icon" type="button">
+                    <Download className="h-4 w-4" />
+                  </Button>
+                </a>
+              )}
+            </div>
+          ))}
+        </div>
+
+        <SheetFooter className="gap-2 pt-2">
+          {/* 닫기 버튼 */}
+          <SheetClose asChild>
+            <Button type="button" variant="outline">
+              Close
+            </Button>
+          </SheetClose>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  )
+}
\ No newline at end of file
diff --git a/lib/vendor-rfq-response/vendor-rfq-table/comments-sheet.tsx b/lib/vendor-rfq-response/vendor-rfq-table/comments-sheet.tsx
new file mode 100644
index 00000000..d401f1cd
--- /dev/null
+++ b/lib/vendor-rfq-response/vendor-rfq-table/comments-sheet.tsx
@@ -0,0 +1,415 @@
+"use client"
+
+import * as React from "react"
+import { useForm, useFieldArray } from "react-hook-form"
+import { z } from "zod"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Loader, Download, X } from "lucide-react"
+import prettyBytes from "pretty-bytes"
+import { toast } from "sonner"
+
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet"
+import { Button } from "@/components/ui/button"
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form"
+import {
+  Textarea,
+} from "@/components/ui/textarea"
+
+import {
+  Dropzone,
+  DropzoneZone,
+  DropzoneUploadIcon,
+  DropzoneTitle,
+  DropzoneDescription,
+  DropzoneInput
+} from "@/components/ui/dropzone"
+
+import {
+  Table,
+  TableHeader,
+  TableRow,
+  TableHead,
+  TableBody,
+  TableCell
+} from "@/components/ui/table"
+
+// DB 스키마에서 필요한 타입들을 가져온다고 가정
+import { RfqWithAll } from "../types"
+
+import { createRfqCommentWithAttachments, updateRfqComment } from "../../rfqs/service"
+import { formatDate } from "@/lib/utils"
+
+// 코멘트 + 첨부파일 구조 (단순 예시)
+// 실제 DB 스키마에 맞춰 조정
+export interface RfqComment {
+  id: number
+  commentText: string
+  commentedBy?: number
+  createdAt?: Date
+  attachments?: {
+    id: number
+    fileName: string
+    filePath?: string
+  }[]
+}
+
+interface CommentSheetProps extends React.ComponentPropsWithRef<typeof Sheet> {
+  /** 코멘트를 작성할 RFQ 정보 */
+  /** 이미 존재하는 모든 코멘트 목록 (서버에서 불러와 주입) */
+  initialComments?: RfqComment[]
+
+  /** 사용자(작성자) ID (로그인 세션 등에서 가져옴) */
+  currentUserId: number
+  rfq:RfqWithAll
+  /** 댓글 저장 후 갱신용 콜백 (옵션) */
+  onCommentsUpdated?: (comments: RfqComment[]) => void
+}
+
+// 새 코멘트 작성 폼 스키마
+const commentFormSchema = z.object({
+  commentText: z.string().min(1, "댓글을 입력하세요."),
+  newFiles: z.array(z.any()).optional() // File[]
+})
+type CommentFormValues = z.infer<typeof commentFormSchema>
+
+const MAX_FILE_SIZE = 30e6 // 30MB
+
+export function CommentSheet({
+  rfq,
+  initialComments = [],
+  currentUserId,
+  onCommentsUpdated,
+  ...props
+}: CommentSheetProps) {
+  const [comments, setComments] = React.useState<RfqComment[]>(initialComments)
+  const [isPending, startTransition] = React.useTransition()
+
+  React.useEffect(() => {
+    setComments(initialComments)
+  }, [initialComments])
+  
+  // RHF 세팅
+  const form = useForm<CommentFormValues>({
+    resolver: zodResolver(commentFormSchema),
+    defaultValues: {
+      commentText: "",
+      newFiles: []
+    }
+  })
+
+  // formFieldArray 예시 (파일 목록)
+  const { fields: newFileFields, append, remove } = useFieldArray({
+    control: form.control,
+    name: "newFiles"
+  })
+
+  // 1) 기존 코멘트 + 첨부 보여주기
+  // 간단히 테이블 하나로 표현
+  // 실제로는 Bubble 형태의 UI, Accordion, Timeline 등 다양하게 구성할 수 있음
+  function renderExistingComments() {
+    // 1) 편집 상태 관리
+    const [editingId, setEditingId] = React.useState<number | null>(null)
+    const [editText, setEditText] = React.useState("")
+  
+    // 2) Edit 시작 핸들러
+    function handleEditClick(c: RfqComment) {
+      setEditingId(c.id)
+      setEditText(c.commentText)
+    }
+  
+    // 3) Save 핸들러
+    async function handleSave(commentId: number) {
+      try {
+        // (예시) 서버 액션 or API 요청
+        await updateRfqComment({ commentId, commentText: editText })
+  
+        // 만약 단순 로컬 수정만 할 거라면,
+        // parent state의 comments를 갱신하는 로직 필요
+        setComments((prev) =>
+          prev.map((comment) =>
+            comment.id === commentId
+              ? { ...comment, commentText: editText }
+              : comment
+          )
+        )
+  
+        toast.success("Comment updated.")
+      } catch (err) {
+        toast.error("Error updating comment.")
+      } finally {
+        // 편집 모드 종료
+        setEditingId(null)
+        setEditText("")
+      }
+    }
+  
+    // 4) Cancel 핸들러
+    function handleCancel() {
+      setEditingId(null)
+      setEditText("")
+    }
+  
+    // 만약 comments가 비어 있다면
+    if (comments.length === 0) {
+      return <p className="text-sm text-muted-foreground">No comments yet</p>
+    }
+  
+    // 5) 테이블 렌더링
+    return (
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead className="w-1/2">Comment</TableHead>
+            <TableHead>Attachments</TableHead>
+            <TableHead>Created At</TableHead>
+            <TableHead>Created By</TableHead>
+  
+            {/* 추가된 Actions 컬럼 */}
+            <TableHead>Actions</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {comments.map((c) => (
+            <TableRow key={c.id}>
+              {/* 1) Comment 셀 */}
+              <TableCell>
+                {/* 현재 행이 editing 모드인지 체크 */}
+                {editingId === c.id ? (
+                  // 편집 모드
+                  <textarea
+                    value={editText}
+                    onChange={(e) => setEditText(e.target.value)}
+                    className="w-full border p-1 rounded"
+                    rows={3}
+                  />
+                ) : (
+                  // 일반 모드
+                  c.commentText
+                )}
+              </TableCell>
+  
+              {/* 2) Attachments 셀 (기존과 동일) */}
+              <TableCell>
+                {(!c.attachments || c.attachments.length === 0) && (
+                  <span className="text-sm text-muted-foreground">No files</span>
+                )}
+                {c.attachments && c.attachments.length > 0 && (
+                  <div className="flex flex-col gap-1">
+                    {c.attachments.map((att) => (
+                      <div key={att.id} className="flex items-center gap-2">
+                        <a
+                          href={att.filePath}
+                          download
+                          target="_blank"
+                          rel="noreferrer"
+                          className="inline-flex items-center gap-1 text-blue-600 underline"
+                        >
+                          <Download className="h-4 w-4" />
+                          {att.fileName}
+                        </a>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </TableCell>
+  
+              {/* 3) Created At */}
+              <TableCell> { c.createdAt ? formatDate(c.createdAt): "-"}</TableCell>
+  
+              {/* 4) Created By */}
+              <TableCell>{c.commentedBy ?? "-"}</TableCell>
+  
+              {/* 5) 새로 추가된 Actions */}
+              <TableCell>
+                {editingId === c.id ? (
+                  // 편집 중일 때
+                  <div className="flex gap-2">
+                    <Button variant="outline" size="sm" onClick={() => handleSave(c.id)}>
+                      Save
+                    </Button>
+                    <Button variant="ghost" size="sm" onClick={handleCancel}>
+                      Cancel
+                    </Button>
+                  </div>
+                ) : (
+                  // 일반 상태
+                  <Button variant="outline" size="sm" onClick={() => handleEditClick(c)}>
+                    Edit
+                  </Button>
+                )}
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    )
+  }
+
+  // 2) 새 파일 Drop
+  function handleDropAccepted(files: File[]) {
+    // 드롭된 File[]을 RHF field array에 추가
+    const toAppend = files.map((f) => f)
+    append(toAppend)
+  }
+
+
+  // 3) 저장(Submit)
+  async function onSubmit(data: CommentFormValues) {
+
+    if (!rfq) return
+    startTransition(async () => {
+      try {
+        // 서버 액션 호출
+        const res = await createRfqCommentWithAttachments({
+          rfqId: rfq.id,
+          vendorId: rfq.vendorId, // 필요시 세팅
+          commentText: data.commentText,
+          commentedBy: currentUserId,
+          evaluationId: null, // 필요시 세팅
+          files: data.newFiles
+        })
+
+        if (!res.ok) {
+          throw new Error("Failed to create comment")
+        }
+
+        toast.success("Comment created")
+
+        // 새 코멘트를 다시 불러오거나,
+        // 여기서는 임시로 "새로운 코멘트가 추가됐다" 라고 가정하여 클라이언트에서 상태 업데이트
+        const newComment: RfqComment = {
+          id: res.commentId, // 서버에서 반환된 commentId
+          commentText: data.commentText,
+          commentedBy: currentUserId,
+          createdAt: res.createdAt,
+          attachments: (data.newFiles?.map((f, idx) => ({
+            id: Math.random() * 100000,
+            fileName: f.name,
+          })) || [])
+        }
+        setComments((prev) => [...prev, newComment])
+        onCommentsUpdated?.([...comments, newComment])
+
+        // 폼 리셋
+        form.reset()
+      } catch (err: any) {
+        console.error(err)
+        toast.error("Error: " + err.message)
+      }
+    })
+  }
+
+  return (
+    <Sheet {...props}>
+      <SheetContent className="flex flex-col gap-6 sm:max-w-lg">
+        <SheetHeader className="text-left">
+          <SheetTitle>Comments</SheetTitle>
+          <SheetDescription>
+            필요시 첨부파일과 함께 문의/코멘트를 남길 수 있습니다.
+          </SheetDescription>
+        </SheetHeader>
+
+        {/* 기존 코멘트 목록 */}
+        <div className="max-h-[300px] overflow-y-auto">
+          {renderExistingComments()}
+        </div>
+
+        {/* 새 코멘트 작성 Form */}
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col gap-4">
+            <FormField
+              control={form.control}
+              name="commentText"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>New Comment</FormLabel>
+                  <FormControl>
+                    <Textarea
+                      placeholder="Enter your comment..."
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {/* Dropzone (파일 첨부) */}
+            <Dropzone
+              maxSize={MAX_FILE_SIZE}
+              onDropAccepted={handleDropAccepted}
+              onDropRejected={(rej) => {
+                toast.error("File rejected: " + (rej[0]?.file?.name || ""))
+              }}
+            >
+              {({ maxSize }) => (
+                <DropzoneZone className="flex justify-center">
+                  <DropzoneInput />
+                  <div className="flex items-center gap-6">
+                    <DropzoneUploadIcon />
+                    <div className="grid gap-0.5">
+                      <DropzoneTitle>Drop to attach files</DropzoneTitle>
+                      <DropzoneDescription>
+                        Max size: {prettyBytes(maxSize || 0)}
+                      </DropzoneDescription>
+                    </div>
+                  </div>
+                </DropzoneZone>
+              )}
+            </Dropzone>
+
+            {/* 선택된 파일 목록 */}
+            {newFileFields.length > 0 && (
+              <div className="flex flex-col gap-2">
+                {newFileFields.map((field, idx) => {
+                  const file = form.getValues(`newFiles.${idx}`)
+                  if (!file) return null
+                  return (
+                    <div key={field.id} className="flex items-center justify-between border rounded p-2">
+                      <span className="text-sm">{file.name} ({prettyBytes(file.size)})</span>
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        type="button"
+                        onClick={() => remove(idx)}
+                      >
+                        <X className="h-4 w-4" />
+                      </Button>
+                    </div>
+                  )
+                })}
+              </div>
+            )}
+
+            <SheetFooter className="gap-2 pt-4">
+              <SheetClose asChild>
+                <Button type="button" variant="outline">
+                  Cancel
+                </Button>
+              </SheetClose>
+              <Button disabled={isPending}>
+                {isPending && <Loader className="mr-2 h-4 w-4 animate-spin" />}
+                Save
+              </Button>
+            </SheetFooter>
+          </form>
+        </Form>
+      </SheetContent>
+    </Sheet>
+  )
+}
\ No newline at end of file
diff --git a/lib/vendor-rfq-response/vendor-rfq-table/feature-flags-provider.tsx b/lib/vendor-rfq-response/vendor-rfq-table/feature-flags-provider.tsx
new file mode 100644
index 00000000..81131894
--- /dev/null
+++ b/lib/vendor-rfq-response/vendor-rfq-table/feature-flags-provider.tsx
@@ -0,0 +1,108 @@
+"use client"
+
+import * as React from "react"
+import { useQueryState } from "nuqs"
+
+import { dataTableConfig, type DataTableConfig } from "@/config/data-table"
+import { cn } from "@/lib/utils"
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+
+type FeatureFlagValue = DataTableConfig["featureFlags"][number]["value"]
+
+interface FeatureFlagsContextProps {
+  featureFlags: FeatureFlagValue[]
+  setFeatureFlags: (value: FeatureFlagValue[]) => void
+}
+
+const FeatureFlagsContext = React.createContext<FeatureFlagsContextProps>({
+  featureFlags: [],
+  setFeatureFlags: () => {},
+})
+
+export function useFeatureFlags() {
+  const context = React.useContext(FeatureFlagsContext)
+  if (!context) {
+    throw new Error(
+      "useFeatureFlags must be used within a FeatureFlagsProvider"
+    )
+  }
+  return context
+}
+
+interface FeatureFlagsProviderProps {
+  children: React.ReactNode
+}
+
+export function FeatureFlagsProvider({ children }: FeatureFlagsProviderProps) {
+  const [featureFlags, setFeatureFlags] = useQueryState<FeatureFlagValue[]>(
+    "flags",
+    {
+      defaultValue: [],
+      parse: (value) => value.split(",") as FeatureFlagValue[],
+      serialize: (value) => value.join(","),
+      eq: (a, b) =>
+        a.length === b.length && a.every((value, index) => value === b[index]),
+      clearOnDefault: true,
+      shallow: false,
+    }
+  )
+
+  return (
+    <FeatureFlagsContext.Provider
+      value={{
+        featureFlags,
+        setFeatureFlags: (value) => void setFeatureFlags(value),
+      }}
+    >
+      <div className="w-full overflow-x-auto">
+        <ToggleGroup
+          type="multiple"
+          variant="outline"
+          size="sm"
+          value={featureFlags}
+          onValueChange={(value: FeatureFlagValue[]) => setFeatureFlags(value)}
+          className="w-fit gap-0"
+        >
+          {dataTableConfig.featureFlags.map((flag, index) => (
+            <Tooltip key={flag.value}>
+              <ToggleGroupItem
+                value={flag.value}
+                className={cn(
+                  "gap-2 whitespace-nowrap rounded-none px-3 text-xs data-[state=on]:bg-accent/70 data-[state=on]:hover:bg-accent/90",
+                  {
+                    "rounded-l-sm border-r-0": index === 0,
+                    "rounded-r-sm":
+                      index === dataTableConfig.featureFlags.length - 1,
+                  }
+                )}
+                asChild
+              >
+                <TooltipTrigger>
+                  <flag.icon className="size-3.5 shrink-0" aria-hidden="true" />
+                  {flag.label}
+                </TooltipTrigger>
+              </ToggleGroupItem>
+              <TooltipContent
+                align="start"
+                side="bottom"
+                sideOffset={6}
+                className="flex max-w-60 flex-col space-y-1.5 border bg-background py-2 font-semibold text-foreground"
+              >
+                <div>{flag.tooltipTitle}</div>
+                <div className="text-xs text-muted-foreground">
+                  {flag.tooltipDescription}
+                </div>
+              </TooltipContent>
+            </Tooltip>
+          ))}
+        </ToggleGroup>
+      </div>
+      {children}
+    </FeatureFlagsContext.Provider>
+  )
+}
diff --git a/lib/vendor-rfq-response/vendor-rfq-table/rfqs-table-columns.tsx b/lib/vendor-rfq-response/vendor-rfq-table/rfqs-table-columns.tsx
new file mode 100644
index 00000000..ac8fa35e
--- /dev/null
+++ b/lib/vendor-rfq-response/vendor-rfq-table/rfqs-table-columns.tsx
@@ -0,0 +1,421 @@
+"use client"
+
+import * as React from "react"
+import { useRouter } from "next/navigation"
+import { ColumnDef } from "@tanstack/react-table"
+import {
+  Ellipsis,
+  MessageSquare,
+  Package,
+  Paperclip,
+} from "lucide-react"
+import { toast } from "sonner"
+
+import { Button } from "@/components/ui/button"
+import { Checkbox } from "@/components/ui/checkbox"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger
+} from "@/components/ui/dropdown-menu"
+import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header"
+import { Badge } from "@/components/ui/badge"
+
+import { getErrorMessage } from "@/lib/handle-error"
+import { formatDate, formatDateTime } from "@/lib/utils"
+import { modifyRfqVendor } from "../../rfqs/service"
+import type { RfqWithAll } from "../types"
+import type { DataTableRowAction } from "@/types/table"
+
+type NextRouter = ReturnType<typeof useRouter>
+
+interface GetColumnsProps {
+  setRowAction: React.Dispatch<
+    React.SetStateAction<DataTableRowAction<RfqWithAll> | null>
+  >
+  router: NextRouter
+  openAttachmentsSheet: (rfqId: number) => void
+  openCommentSheet: (rfqId: number) => void
+}
+
+/**
+ * tanstack table 컬럼 정의 (Nested Header)
+ */
+export function getColumns({
+  setRowAction,
+  router,
+  openAttachmentsSheet,
+  openCommentSheet,
+}: GetColumnsProps): ColumnDef<RfqWithAll>[] {
+  // 1) 체크박스(Select) 컬럼
+  const selectColumn: ColumnDef<RfqWithAll> = {
+    id: "select",
+    header: ({ table }) => (
+      <Checkbox
+        checked={
+          table.getIsAllPageRowsSelected() ||
+          (table.getIsSomePageRowsSelected() && "indeterminate")
+        }
+        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+        aria-label="Select all"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={(value) => row.toggleSelected(!!value)}
+        aria-label="Select row"
+      />
+    ),
+    size: 40,
+    enableSorting: false,
+    enableHiding: false,
+  }
+
+  // 2) Actions (Dropdown)
+  const actionsColumn: ColumnDef<RfqWithAll> = {
+    id: "actions",
+    enableHiding: false,
+    cell: ({ row }) => {
+      const [isUpdatePending, startUpdateTransition] = React.useTransition()
+
+      return (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" size="icon">
+              <Ellipsis className="h-4 w-4" aria-hidden="true" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-56">
+            <DropdownMenuSub>
+              <DropdownMenuSubTrigger>RFQ Response</DropdownMenuSubTrigger>
+              <DropdownMenuSubContent>
+                <DropdownMenuRadioGroup
+                  value={row.original.responseStatus}
+                  onValueChange={(value) => {
+                    startUpdateTransition(async () => {
+                      let newStatus:
+                        | "ACCEPTED"
+                        | "DECLINED"
+                        | "REVIEWING"
+
+                      switch (value) {
+                        case "ACCEPTED":
+                          newStatus = "ACCEPTED"
+                          break
+                        case "DECLINED":
+                          newStatus = "DECLINED"
+                          break
+                        default:
+                          newStatus = "REVIEWING"
+                      }
+
+                      await toast.promise(
+                        modifyRfqVendor({
+                          id: row.original.responseId,
+                          status: newStatus,
+                        }),
+                        {
+                          loading: "Updating response status...",
+                          success: "Response status updated",
+                          error: (err) => getErrorMessage(err),
+                        }
+                      )
+                    })
+                  }}
+                >
+                  {[
+                    { value: "ACCEPTED", label: "Accept RFQ" },
+                    { value: "DECLINED", label: "Decline RFQ" },
+                  ].map((rep) => (
+                    <DropdownMenuRadioItem
+                      key={rep.value}
+                      value={rep.value}
+                      className="capitalize"
+                      disabled={isUpdatePending}
+                    >
+                      {rep.label}
+                    </DropdownMenuRadioItem>
+                  ))}
+                </DropdownMenuRadioGroup>
+              </DropdownMenuSubContent>
+            </DropdownMenuSub>
+            {/* <DropdownMenuItem
+              onClick={() => {
+                router.push(`/vendor/rfqs/${row.original.rfqId}`)
+              }}
+            >
+              View Details
+            </DropdownMenuItem> */}
+            {/* <DropdownMenuItem onClick={() => openAttachmentsSheet(row.original.rfqId)}>
+              View Attachments
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={() => openCommentSheet(row.original.rfqId)}>
+              View Comments
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={() => setRowAction({ row, type: "items" })}>
+              View Items
+            </DropdownMenuItem> */}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      )
+    },
+    size: 40,
+  }
+
+  // 3) RFQ Code 컬럼
+  const rfqCodeColumn: ColumnDef<RfqWithAll> = {
+    id: "rfqCode",
+    accessorKey: "rfqCode",
+    enableResizing: true,
+    header: ({ column }) => (
+      <DataTableColumnHeaderSimple column={column} title="RFQ Code" />
+    ),
+    cell: ({ row }) => {
+      return (
+        <Button
+          variant="link"
+          className="p-0 h-auto font-medium"
+          onClick={() => router.push(`/vendor/rfqs/${row.original.rfqId}`)}
+        >
+          {row.original.rfqCode}
+        </Button>
+      )
+    },
+    size: 150,
+  }
+
+  // 4) 응답 상태 컬럼
+  const responseStatusColumn: ColumnDef<RfqWithAll> = {
+    id: "responseStatus",
+    accessorKey: "responseStatus",
+    enableResizing: true,
+    header: ({ column }) => (
+      <DataTableColumnHeaderSimple column={column} title="Response Status" />
+    ),
+    cell: ({ row }) => {
+      const status = row.original.responseStatus;
+      let variant: "default" | "secondary" | "destructive" | "outline";
+      
+      switch (status) {
+        case "REVIEWING":
+          variant = "default";
+          break;
+        case "ACCEPTED":
+          variant = "secondary";
+          break;
+        case "DECLINED":
+          variant = "destructive";
+          break;
+        default:
+          variant = "outline";
+      }
+      
+      return <Badge variant={variant}>{status}</Badge>;
+    },
+    size: 150,
+  }
+
+  // 5) 프로젝트 이름 컬럼
+  const projectNameColumn: ColumnDef<RfqWithAll> = {
+    id: "projectName",
+    accessorKey: "projectName",
+    enableResizing: true,
+    header: ({ column }) => (
+      <DataTableColumnHeaderSimple column={column} title="Project" />
+    ),
+    cell: ({ row }) => row.original.projectName || "-",
+    size: 150,
+  }
+
+  // 6) RFQ Description 컬럼
+  const descriptionColumn: ColumnDef<RfqWithAll> = {
+    id: "rfqDescription",
+    accessorKey: "rfqDescription",
+    enableResizing: true,
+    header: ({ column }) => (
+      <DataTableColumnHeaderSimple column={column} title="Description" />
+    ),
+    cell: ({ row }) => row.original.rfqDescription || "-",
+    size: 200,
+  }
+
+  // 7) Due Date 컬럼
+  const dueDateColumn: ColumnDef<RfqWithAll> = {
+    id: "rfqDueDate",
+    accessorKey: "rfqDueDate",
+    enableResizing: true,
+    header: ({ column }) => (
+      <DataTableColumnHeaderSimple column={column} title="Due Date" />
+    ),
+    cell: ({ row }) => {
+      const date = row.original.rfqDueDate;
+      return date ? formatDate(date) : "-";
+    },
+    size: 120,
+  }
+
+  // 8) Last Updated 컬럼
+  const updatedAtColumn: ColumnDef<RfqWithAll> = {
+    id: "respondedAt",
+    accessorKey: "respondedAt",
+    enableResizing: true,
+    header: ({ column }) => (
+      <DataTableColumnHeaderSimple column={column} title="Last Updated" />
+    ),
+    cell: ({ row }) => {
+      const date = row.original.respondedAt;
+      return date ? formatDateTime(date) : "-";
+    },
+    size: 150,
+  }
+
+  // 9) Items 컬럼 - 뱃지로 아이템 개수 표시
+  const itemsColumn: ColumnDef<RfqWithAll> = {
+    id: "items",
+    header: ({ column }) => (
+      <DataTableColumnHeaderSimple column={column} title="Items" />
+    ),
+    cell: ({ row }) => {
+      const rfq = row.original
+      const count = rfq.items?.length ?? 0
+
+      function handleClick() {
+        setRowAction({ row, type: "items" })
+      }
+
+      return (
+        <Button
+          variant="ghost"
+          size="sm"
+          className="relative h-8 w-8 p-0 group"
+          onClick={handleClick}
+          aria-label={count > 0 ? `View ${count} items` : "No items"}
+        >
+          <Package className="h-4 w-4 text-muted-foreground group-hover:text-primary transition-colors" />
+          {count > 0 && (
+            <Badge
+              variant="secondary"
+              className="pointer-events-none absolute -top-1 -right-1 h-4 min-w-[1rem] p-0 text-[0.625rem] leading-none flex items-center justify-center"
+            >
+              {count}
+            </Badge>
+          )}
+
+          <span className="sr-only">
+            {count > 0 ? `${count} Items` : "No Items"}
+          </span>
+        </Button>
+      )
+    },
+    enableSorting: false,
+    maxSize: 80,
+  }
+
+  // 10) Attachments 컬럼 - 뱃지로 파일 개수 표시
+  const attachmentsColumn: ColumnDef<RfqWithAll> = {
+    id: "attachments",
+    header: ({ column }) => (
+      <DataTableColumnHeaderSimple column={column} title="Attachments" />
+    ),
+    cell: ({ row }) => {
+      const attachCount = row.original.attachments?.length ?? 0
+
+      function handleClick(e: React.MouseEvent<HTMLButtonElement>) {
+        e.preventDefault()
+        openAttachmentsSheet(row.original.rfqId)
+      }
+
+      return (
+        <Button
+          variant="ghost"
+          size="sm"
+          className="relative h-8 w-8 p-0 group"
+          onClick={handleClick}
+          aria-label={
+            attachCount > 0 ? `View ${attachCount} files` : "No files"
+          }
+        >
+          <Paperclip className="h-4 w-4 text-muted-foreground group-hover:text-primary transition-colors" />
+          {attachCount > 0 && (
+            <Badge
+              variant="secondary"
+              className="pointer-events-none absolute -top-1 -right-1 h-4 min-w-[1rem] p-0 text-[0.625rem] leading-none flex items-center justify-center"
+            >
+              {attachCount}
+            </Badge>
+          )}
+          <span className="sr-only">
+            {attachCount > 0 ? `${attachCount} Files` : "No Files"}
+          </span>
+        </Button>
+      )
+    },
+    enableSorting: false,
+    maxSize: 80,
+  }
+
+  // 11) Comments 컬럼 - 뱃지로 댓글 개수 표시
+  const commentsColumn: ColumnDef<RfqWithAll> = {
+    id: "comments",
+    header: ({ column }) => (
+      <DataTableColumnHeaderSimple column={column} title="Comments" />
+    ),
+    cell: ({ row }) => {
+      const commCount = row.original.comments?.length ?? 0
+
+      function handleClick() {
+        setRowAction({ row, type: "comments" })
+        openCommentSheet(row.original.rfqId)
+      }
+
+      return (
+        <Button
+          variant="ghost"
+          size="sm"
+          className="relative h-8 w-8 p-0 group"
+          onClick={handleClick}
+          aria-label={
+            commCount > 0 ? `View ${commCount} comments` : "No comments"
+          }
+        >
+          <MessageSquare className="h-4 w-4 text-muted-foreground group-hover:text-primary transition-colors" />
+          {commCount > 0 && (
+            <Badge
+              variant="secondary"
+              className="pointer-events-none absolute -top-1 -right-1 h-4 min-w-[1rem] p-0 text-[0.625rem] leading-none flex items-center justify-center"
+            >
+              {commCount}
+            </Badge>
+          )}
+          <span className="sr-only">
+            {commCount > 0 ? `${commCount} Comments` : "No Comments"}
+          </span>
+        </Button>
+      )
+    },
+    enableSorting: false,
+    maxSize: 80,
+  }
+
+  // 최종 컬럼 구성 - TBE/CBE 관련 컬럼 제외
+  return [
+    selectColumn,
+    rfqCodeColumn,
+    responseStatusColumn,
+    projectNameColumn,
+    descriptionColumn, 
+    dueDateColumn,
+    itemsColumn,
+    attachmentsColumn,
+    commentsColumn,
+    updatedAtColumn,
+    actionsColumn,
+  ]
+}
\ No newline at end of file
diff --git a/lib/vendor-rfq-response/vendor-rfq-table/rfqs-table-toolbar-actions.tsx b/lib/vendor-rfq-response/vendor-rfq-table/rfqs-table-toolbar-actions.tsx
new file mode 100644
index 00000000..1bae99ef
--- /dev/null
+++ b/lib/vendor-rfq-response/vendor-rfq-table/rfqs-table-toolbar-actions.tsx
@@ -0,0 +1,40 @@
+"use client"
+
+import * as React from "react"
+import { type Table } from "@tanstack/react-table"
+import { Download, Upload } from "lucide-react"
+import { toast } from "sonner"
+
+import { exportTableToExcel } from "@/lib/export"
+import { Button } from "@/components/ui/button"
+import { RfqWithAll } from "../types"
+
+
+interface RfqsTableToolbarActionsProps {
+  table: Table<RfqWithAll>
+}
+
+export function RfqsVendorTableToolbarActions({ table }: RfqsTableToolbarActionsProps) {
+
+
+  return (
+    <div className="flex items-center gap-2">
+ 
+      {/** 4) Export 버튼 */}
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={() =>
+          exportTableToExcel(table, {
+            filename: "tasks",
+            excludeColumns: ["select", "actions"],
+          })
+        }
+        className="gap-2"
+      >
+        <Download className="size-4" aria-hidden="true" />
+        <span className="hidden sm:inline">Export</span>
+      </Button>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/lib/vendor-rfq-response/vendor-rfq-table/rfqs-table.tsx b/lib/vendor-rfq-response/vendor-rfq-table/rfqs-table.tsx
new file mode 100644
index 00000000..337c2875
--- /dev/null
+++ b/lib/vendor-rfq-response/vendor-rfq-table/rfqs-table.tsx
@@ -0,0 +1,270 @@
+"use client"
+
+import * as React from "react"
+import type {
+  DataTableAdvancedFilterField,
+  DataTableFilterField,
+  DataTableRowAction,
+} from "@/types/table"
+import { useRouter } from "next/navigation"
+
+import { useDataTable } from "@/hooks/use-data-table"
+import { DataTable } from "@/components/data-table/data-table"
+import { DataTableAdvancedToolbar } from "@/components/data-table/data-table-advanced-toolbar"
+
+import { useFeatureFlags } from "./feature-flags-provider"
+import { getColumns } from "./rfqs-table-columns"
+import { RfqWithAll } from "../types"
+
+import {
+  fetchRfqAttachments,
+  fetchRfqAttachmentsbyCommentId,
+} from "../../rfqs/service"
+
+import { RfqsVendorTableToolbarActions } from "./rfqs-table-toolbar-actions"
+import { RfqsItemsDialog } from "./ItemsDialog"
+import { RfqAttachmentsSheet } from "./attachment-rfq-sheet"
+import { CommentSheet, RfqComment } from "./comments-sheet"
+import { getRfqResponsesForVendor } from "../service"
+
+interface RfqsTableProps {
+  promises: Promise<[Awaited<ReturnType<typeof getRfqResponsesForVendor>>]>
+}
+
+// 코멘트+첨부파일 구조 예시
+export interface RfqCommentWithAttachments extends RfqComment {
+  attachments?: {
+    id: number
+    fileName: string
+    filePath: string
+    createdAt?: Date
+    vendorId?: number | null
+    size?: number
+  }[]
+}
+
+export interface ExistingAttachment {
+  id: number
+  fileName: string
+  filePath: string
+  createdAt?: Date
+  vendorId?: number | null
+  size?: number
+}
+
+export interface ExistingItem {
+  id?: number
+  itemCode: string
+  description: string | null
+  quantity: number | null
+  uom: string | null
+}
+
+export function RfqsVendorTable({ promises }: RfqsTableProps) {
+  const { featureFlags } = useFeatureFlags()
+
+  // 1) 테이블 데이터( RFQs )
+  const [{ data: responseData, pageCount }] = React.use(promises)
+  
+  // 데이터를 RfqWithAll 타입으로 변환 (id 필드 추가)
+  const data: RfqWithAll[] = React.useMemo(() => {
+    return responseData.map(item => ({
+      ...item,
+      id: item.rfqId, // id 필드를 rfqId와 동일하게 설정
+    }));
+  }, [responseData]);
+  
+  const router = useRouter()
+
+  // 2) 첨부파일 시트 + 관련 상태
+  const [attachmentsOpen, setAttachmentsOpen] = React.useState(false)
+  const [selectedRfqIdForAttachments, setSelectedRfqIdForAttachments] = React.useState<number | null>(null)
+  const [attachDefault, setAttachDefault] = React.useState<ExistingAttachment[]>([])
+
+  // 3) 코멘트 시트 + 관련 상태
+  const [initialComments, setInitialComments] = React.useState<RfqCommentWithAttachments[]>([])
+  const [commentSheetOpen, setCommentSheetOpen] = React.useState(false)
+  const [selectedRfqIdForComments, setSelectedRfqIdForComments] = React.useState<number | null>(null)
+
+  // 4) rowAction으로 다양한 모달/시트 열기
+  const [rowAction, setRowAction] = React.useState<DataTableRowAction<RfqWithAll> | null>(null)
+
+  // 열리고 닫힐 때마다, rowAction 등을 확인해서 시트 열기/닫기 처리
+  React.useEffect(() => {
+    if (rowAction?.type === "comments" && rowAction?.row.original) {
+      openCommentSheet(rowAction.row.original.id)
+    }
+  }, [rowAction]) 
+  
+  /**
+   * (A) 코멘트 시트를 열기 전에,
+   *     DB에서 (rfqId에 해당하는) 코멘트들 + 각 코멘트별 첨부파일을 조회.
+   */
+  const openCommentSheet = React.useCallback(async (rfqId: number) => {
+    setInitialComments([])
+
+    // 여기서 rowAction을 직접 참조하지 않고, 필요한 데이터만 파라미터로 받기
+    const comments = data.find(rfq => rfq.rfqId === rfqId)?.comments || []
+
+    if (comments && comments.length > 0) {
+      const commentWithAttachments = await Promise.all(
+        comments.map(async (c) => {
+          const attachments = await fetchRfqAttachmentsbyCommentId(c.id)
+          return {
+            ...c,
+            commentedBy: c.commentedBy || 1,
+            attachments,
+          }
+        })
+      )
+
+      setInitialComments(commentWithAttachments)
+    }
+
+    setSelectedRfqIdForComments(rfqId)
+    setCommentSheetOpen(true)
+  }, [data]) // data만 의존성으로 추가
+
+  /**
+   * (B) 첨부파일 시트 열기
+   */
+  const openAttachmentsSheet = React.useCallback(async (rfqId: number) => {
+    const list = await fetchRfqAttachments(rfqId)
+    setAttachDefault(list)
+    setSelectedRfqIdForAttachments(rfqId)
+    setAttachmentsOpen(true)
+  }, [])
+  
+  // 5) DataTable 컬럼 세팅
+  const columns = React.useMemo(
+    () =>
+      getColumns({
+        setRowAction,
+        router,
+        openAttachmentsSheet,
+        openCommentSheet
+      }),
+    [setRowAction, router, openAttachmentsSheet, openCommentSheet]
+  )
+  
+  /**
+   * 간단한 filterFields 예시
+   */
+  const filterFields: DataTableFilterField<RfqWithAll>[] = [
+    {
+      id: "rfqCode",
+      label: "RFQ Code",
+      placeholder: "Filter RFQ Code...",
+    },
+    {
+      id: "projectName",
+      label: "Project",
+      placeholder: "Filter Project...",
+    },
+    {
+      id: "rfqDescription",
+      label: "Description",
+      placeholder: "Filter Description...",
+    },
+  ]
+
+  /**
+   * Advanced filter fields 예시
+   */
+  const advancedFilterFields: DataTableAdvancedFilterField<RfqWithAll>[] = [
+    {
+      id: "rfqCode",
+      label: "RFQ Code",
+      type: "text",
+    },
+    {
+      id: "rfqDescription",
+      label: "Description",
+      type: "text",
+    },
+    {
+      id: "projectCode",
+      label: "Project Code",
+      type: "text",
+    },
+    {
+      id: "projectName",
+      label: "Project Name",
+      type: "text",
+    },
+    {
+      id: "rfqDueDate",
+      label: "Due Date",
+      type: "date",
+    },
+    {
+      id: "responseStatus",
+      label: "Response Status",
+      type: "select",
+      options: [
+        { label: "Reviewing", value: "REVIEWING" },
+        { label: "Accepted", value: "ACCEPTED" },
+        { label: "Declined", value: "DECLINED" },
+      ],
+    }
+  ]
+
+  // useDataTable() 훅 -> pagination, sorting 등 관리
+  const { table } = useDataTable({
+    data,
+    columns,
+    pageCount,
+    filterFields,
+    enablePinning: true,
+    enableAdvancedFilter: true,
+    initialState: {
+      sorting: [{ id: "respondedAt", desc: true }],
+      columnPinning: { right: ["actions"] },
+    },
+    getRowId: (originalRow) => String(originalRow.id),
+    shallow: false,
+    clearOnDefault: true,
+  })
+
+  return (
+    <>
+      <DataTable table={table}>
+        <DataTableAdvancedToolbar
+          table={table}
+          filterFields={advancedFilterFields}
+          shallow={false}
+        >
+          <RfqsVendorTableToolbarActions table={table} />
+        </DataTableAdvancedToolbar>
+      </DataTable>
+
+      {/* 1) 아이템 목록 Dialog */}
+      {rowAction?.type === "items" && rowAction?.row.original && (
+        <RfqsItemsDialog
+          open={true}
+          onOpenChange={() => setRowAction(null)}
+          rfq={rowAction.row.original}
+        />
+      )}
+
+      {/* 2) 코멘트 시트 */}
+      {selectedRfqIdForComments && (
+        <CommentSheet
+          currentUserId={1}
+          open={commentSheetOpen}
+          onOpenChange={setCommentSheetOpen}
+          initialComments={initialComments}
+          rfq={data.find(item => item.rfqId === selectedRfqIdForComments)!}
+        />
+      )}
+      
+      {/* 3) 첨부파일 시트 */}
+      <RfqAttachmentsSheet
+        open={attachmentsOpen}
+        onOpenChange={setAttachmentsOpen}
+        rfqId={selectedRfqIdForAttachments ?? 0}
+        attachments={attachDefault}
+      />
+    </>
+  )
+}
\ No newline at end of file
diff --git a/lib/vendor-rfq-response/vendor-tbe-table/comments-sheet.tsx b/lib/vendor-rfq-response/vendor-tbe-table/comments-sheet.tsx
new file mode 100644
index 00000000..1eee54f5
--- /dev/null
+++ b/lib/vendor-rfq-response/vendor-tbe-table/comments-sheet.tsx
@@ -0,0 +1,334 @@
+"use client"
+
+import * as React from "react"
+import { useForm, useFieldArray } from "react-hook-form"
+import { z } from "zod"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Loader, Download, X } from "lucide-react"
+import prettyBytes from "pretty-bytes"
+import { toast } from "sonner"
+
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet"
+import { Button } from "@/components/ui/button"
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form"
+import {
+  Textarea,
+} from "@/components/ui/textarea"
+
+import {
+  Dropzone,
+  DropzoneZone,
+  DropzoneUploadIcon,
+  DropzoneTitle,
+  DropzoneDescription,
+  DropzoneInput
+} from "@/components/ui/dropzone"
+
+import {
+  Table,
+  TableHeader,
+  TableRow,
+  TableHead,
+  TableBody,
+  TableCell
+} from "@/components/ui/table"
+
+// DB 스키마에서 필요한 타입들을 가져온다고 가정
+// (실제 프로젝트에 맞춰 import를 수정하세요.)
+import { RfqWithAll } from "@/db/schema/rfq"
+import { createRfqCommentWithAttachments } from "../../rfqs/service"
+import { formatDate } from "@/lib/utils"
+
+// 코멘트 + 첨부파일 구조 (단순 예시)
+// 실제 DB 스키마에 맞춰 조정
+export interface TbeComment {
+  id: number
+  commentText: string
+  commentedBy?: number
+  createdAt?: string | Date
+  attachments?: {
+    id: number
+    fileName: string
+    filePath: string
+  }[]
+}
+
+interface CommentSheetProps extends React.ComponentPropsWithRef<typeof Sheet> {
+  /** 코멘트를 작성할 RFQ 정보 */
+  /** 이미 존재하는 모든 코멘트 목록 (서버에서 불러와 주입) */
+  initialComments?: TbeComment[]
+
+  /** 사용자(작성자) ID (로그인 세션 등에서 가져옴) */
+  currentUserId: number
+  rfqId:number
+  vendorId:number
+  /** 댓글 저장 후 갱신용 콜백 (옵션) */
+  onCommentsUpdated?: (comments: TbeComment[]) => void
+}
+
+// 새 코멘트 작성 폼 스키마
+const commentFormSchema = z.object({
+  commentText: z.string().min(1, "댓글을 입력하세요."),
+  newFiles: z.array(z.any()).optional() // File[]
+})
+type CommentFormValues = z.infer<typeof commentFormSchema>
+
+const MAX_FILE_SIZE = 30e6 // 30MB
+
+export function CommentSheet({
+  rfqId,
+  vendorId,
+  initialComments = [],
+  currentUserId,
+  onCommentsUpdated,
+  ...props
+}: CommentSheetProps) {
+  const [comments, setComments] = React.useState<TbeComment[]>(initialComments)
+  const [isPending, startTransition] = React.useTransition()
+
+  React.useEffect(() => {
+    setComments(initialComments)
+  }, [initialComments])
+  
+
+  // RHF 세팅
+  const form = useForm<CommentFormValues>({
+    resolver: zodResolver(commentFormSchema),
+    defaultValues: {
+      commentText: "",
+      newFiles: []
+    }
+  })
+
+  // formFieldArray 예시 (파일 목록)
+  const { fields: newFileFields, append, remove } = useFieldArray({
+    control: form.control,
+    name: "newFiles"
+  })
+
+  // 1) 기존 코멘트 + 첨부 보여주기
+  // 간단히 테이블 하나로 표현
+  // 실제로는 Bubble 형태의 UI, Accordion, Timeline 등 다양하게 구성할 수 있음
+  function renderExistingComments() {
+    if (comments.length === 0) {
+      return <p className="text-sm text-muted-foreground">No comments yet</p>
+    }
+
+    return (
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead className="w-1/2">Comment</TableHead>
+            <TableHead>Attachments</TableHead>
+            <TableHead>Created At</TableHead>
+            <TableHead>Created By</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {comments.map((c) => (
+            <TableRow key={c.id}>
+              <TableCell>{c.commentText}</TableCell>
+              <TableCell>
+                {/* 첨부파일 표시 */}
+                {(!c.attachments || c.attachments.length === 0) && (
+                  <span className="text-sm text-muted-foreground">No files</span>
+                )}
+                {c.attachments && c.attachments.length > 0 && (
+                  <div className="flex flex-col gap-1">
+                    {c.attachments.map((att) => (
+                      <div key={att.id} className="flex items-center gap-2">
+                        <a
+                          href={att.filePath}
+                          download
+                          target="_blank"
+                          rel="noreferrer"
+                          className="inline-flex items-center gap-1 text-blue-600 underline"
+                        >
+                          <Download className="h-4 w-4" />
+                          {att.fileName}
+                        </a>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </TableCell>
+              <TableCell> { c.createdAt ? formatDate(c.createdAt): "-"}</TableCell>
+              <TableCell>
+                {c.commentedBy ?? "-"}
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    )
+  }
+
+  // 2) 새 파일 Drop
+  function handleDropAccepted(files: File[]) {
+    // 드롭된 File[]을 RHF field array에 추가
+    const toAppend = files.map((f) => f)
+    append(toAppend)
+  }
+
+
+  // 3) 저장(Submit)
+  async function onSubmit(data: CommentFormValues) {
+
+    if (!rfqId) return
+    startTransition(async () => {
+      try {
+        // 서버 액션 호출
+        const res = await createRfqCommentWithAttachments({
+          rfqId: rfqId,
+          vendorId: vendorId, // 필요시 세팅
+          commentText: data.commentText,
+          commentedBy: currentUserId,
+          evaluationId: null, // 필요시 세팅
+          files: data.newFiles
+        })
+
+        if (!res.ok) {
+          throw new Error("Failed to create comment")
+        }
+
+        toast.success("Comment created")
+
+        // 새 코멘트를 다시 불러오거나,
+        // 여기서는 임시로 "새로운 코멘트가 추가됐다" 라고 가정하여 클라이언트에서 상태 업데이트
+        const newComment: TbeComment = {
+          id: res.commentId, // 서버에서 반환된 commentId
+          commentText: data.commentText,
+          commentedBy: currentUserId,
+          createdAt: new Date().toISOString(),
+          attachments: (data.newFiles?.map((f, idx) => ({
+            id: Math.random() * 100000,
+            fileName: f.name,
+            filePath: "/uploads/" + f.name,
+          })) || [])
+        }
+        setComments((prev) => [...prev, newComment])
+        onCommentsUpdated?.([...comments, newComment])
+
+        // 폼 리셋
+        form.reset()
+      } catch (err: any) {
+        console.error(err)
+        toast.error("Error: " + err.message)
+      }
+    })
+  }
+
+  return (
+    <Sheet {...props}>
+      <SheetContent className="flex flex-col gap-6 sm:max-w-lg">
+        <SheetHeader className="text-left">
+          <SheetTitle>Comments</SheetTitle>
+          <SheetDescription>
+            필요시 첨부파일과 함께 문의/코멘트를 남길 수 있습니다.
+          </SheetDescription>
+        </SheetHeader>
+
+        {/* 기존 코멘트 목록 */}
+        <div className="max-h-[300px] overflow-y-auto">
+          {renderExistingComments()}
+        </div>
+
+        {/* 새 코멘트 작성 Form */}
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col gap-4">
+            <FormField
+              control={form.control}
+              name="commentText"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>New Comment</FormLabel>
+                  <FormControl>
+                    <Textarea
+                      placeholder="Enter your comment..."
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {/* Dropzone (파일 첨부) */}
+            <Dropzone
+              maxSize={MAX_FILE_SIZE}
+              onDropAccepted={handleDropAccepted}
+              onDropRejected={(rej) => {
+                toast.error("File rejected: " + (rej[0]?.file?.name || ""))
+              }}
+            >
+              {({ maxSize }) => (
+                <DropzoneZone className="flex justify-center">
+                  <DropzoneInput />
+                  <div className="flex items-center gap-6">
+                    <DropzoneUploadIcon />
+                    <div className="grid gap-0.5">
+                      <DropzoneTitle>Drop to attach files</DropzoneTitle>
+                      <DropzoneDescription>
+                        Max size: {prettyBytes(maxSize || 0)}
+                      </DropzoneDescription>
+                    </div>
+                  </div>
+                </DropzoneZone>
+              )}
+            </Dropzone>
+
+            {/* 선택된 파일 목록 */}
+            {newFileFields.length > 0 && (
+              <div className="flex flex-col gap-2">
+                {newFileFields.map((field, idx) => {
+                  const file = form.getValues(`newFiles.${idx}`)
+                  if (!file) return null
+                  return (
+                    <div key={field.id} className="flex items-center justify-between border rounded p-2">
+                      <span className="text-sm">{file.name} ({prettyBytes(file.size)})</span>
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        type="button"
+                        onClick={() => remove(idx)}
+                      >
+                        <X className="h-4 w-4" />
+                      </Button>
+                    </div>
+                  )
+                })}
+              </div>
+            )}
+
+            <SheetFooter className="gap-2 pt-4">
+              <SheetClose asChild>
+                <Button type="button" variant="outline">
+                  Cancel
+                </Button>
+              </SheetClose>
+              <Button disabled={isPending}>
+                {isPending && <Loader className="mr-2 h-4 w-4 animate-spin" />}
+                Save
+              </Button>
+            </SheetFooter>
+          </form>
+        </Form>
+      </SheetContent>
+    </Sheet>
+  )
+}
\ No newline at end of file
diff --git a/lib/vendor-rfq-response/vendor-tbe-table/feature-flags-provider.tsx b/lib/vendor-rfq-response/vendor-tbe-table/feature-flags-provider.tsx
new file mode 100644
index 00000000..81131894
--- /dev/null
+++ b/lib/vendor-rfq-response/vendor-tbe-table/feature-flags-provider.tsx
@@ -0,0 +1,108 @@
+"use client"
+
+import * as React from "react"
+import { useQueryState } from "nuqs"
+
+import { dataTableConfig, type DataTableConfig } from "@/config/data-table"
+import { cn } from "@/lib/utils"
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+
+type FeatureFlagValue = DataTableConfig["featureFlags"][number]["value"]
+
+interface FeatureFlagsContextProps {
+  featureFlags: FeatureFlagValue[]
+  setFeatureFlags: (value: FeatureFlagValue[]) => void
+}
+
+const FeatureFlagsContext = React.createContext<FeatureFlagsContextProps>({
+  featureFlags: [],
+  setFeatureFlags: () => {},
+})
+
+export function useFeatureFlags() {
+  const context = React.useContext(FeatureFlagsContext)
+  if (!context) {
+    throw new Error(
+      "useFeatureFlags must be used within a FeatureFlagsProvider"
+    )
+  }
+  return context
+}
+
+interface FeatureFlagsProviderProps {
+  children: React.ReactNode
+}
+
+export function FeatureFlagsProvider({ children }: FeatureFlagsProviderProps) {
+  const [featureFlags, setFeatureFlags] = useQueryState<FeatureFlagValue[]>(
+    "flags",
+    {
+      defaultValue: [],
+      parse: (value) => value.split(",") as FeatureFlagValue[],
+      serialize: (value) => value.join(","),
+      eq: (a, b) =>
+        a.length === b.length && a.every((value, index) => value === b[index]),
+      clearOnDefault: true,
+      shallow: false,
+    }
+  )
+
+  return (
+    <FeatureFlagsContext.Provider
+      value={{
+        featureFlags,
+        setFeatureFlags: (value) => void setFeatureFlags(value),
+      }}
+    >
+      <div className="w-full overflow-x-auto">
+        <ToggleGroup
+          type="multiple"
+          variant="outline"
+          size="sm"
+          value={featureFlags}
+          onValueChange={(value: FeatureFlagValue[]) => setFeatureFlags(value)}
+          className="w-fit gap-0"
+        >
+          {dataTableConfig.featureFlags.map((flag, index) => (
+            <Tooltip key={flag.value}>
+              <ToggleGroupItem
+                value={flag.value}
+                className={cn(
+                  "gap-2 whitespace-nowrap rounded-none px-3 text-xs data-[state=on]:bg-accent/70 data-[state=on]:hover:bg-accent/90",
+                  {
+                    "rounded-l-sm border-r-0": index === 0,
+                    "rounded-r-sm":
+                      index === dataTableConfig.featureFlags.length - 1,
+                  }
+                )}
+                asChild
+              >
+                <TooltipTrigger>
+                  <flag.icon className="size-3.5 shrink-0" aria-hidden="true" />
+                  {flag.label}
+                </TooltipTrigger>
+              </ToggleGroupItem>
+              <TooltipContent
+                align="start"
+                side="bottom"
+                sideOffset={6}
+                className="flex max-w-60 flex-col space-y-1.5 border bg-background py-2 font-semibold text-foreground"
+              >
+                <div>{flag.tooltipTitle}</div>
+                <div className="text-xs text-muted-foreground">
+                  {flag.tooltipDescription}
+                </div>
+              </TooltipContent>
+            </Tooltip>
+          ))}
+        </ToggleGroup>
+      </div>
+      {children}
+    </FeatureFlagsContext.Provider>
+  )
+}
diff --git a/lib/vendor-rfq-response/vendor-tbe-table/tbe-table-columns.tsx b/lib/vendor-rfq-response/vendor-tbe-table/tbe-table-columns.tsx
new file mode 100644
index 00000000..34a53d17
--- /dev/null
+++ b/lib/vendor-rfq-response/vendor-tbe-table/tbe-table-columns.tsx
@@ -0,0 +1,317 @@
+"use client"
+
+import * as React from "react"
+import { type DataTableRowAction } from "@/types/table"
+import { type ColumnDef } from "@tanstack/react-table"
+import { Download, MessageSquare, Upload } from "lucide-react"
+import { toast } from "sonner"
+
+import { getErrorMessage } from "@/lib/handle-error"
+import { formatDate } from "@/lib/utils"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Checkbox } from "@/components/ui/checkbox"
+import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header"
+import { useRouter } from "next/navigation"
+
+import {
+  tbeVendorColumnsConfig,
+  VendorTbeColumnConfig,
+  vendorTbeColumnsConfig,
+  TbeVendorFields,
+} from "@/config/vendorTbeColumnsConfig"
+
+type NextRouter = ReturnType<typeof useRouter>
+
+interface GetColumnsProps {
+  setRowAction: React.Dispatch<
+    React.SetStateAction<DataTableRowAction<TbeVendorFields> | null>
+  >
+  router: NextRouter
+  openCommentSheet: (vendorId: number) => void
+  handleDownloadTbeTemplate: (tbeId: number, vendorId: number, rfqId: number) => void
+  handleUploadTbeResponse: (tbeId: number, vendorId: number, rfqId: number, vendorResponseId:number) => void
+}
+
+/**
+ * tanstack table 컬럼 정의 (중첩 헤더 버전)
+ */
+export function getColumns({
+  setRowAction,
+  router,
+  openCommentSheet,
+  handleDownloadTbeTemplate,
+  handleUploadTbeResponse,
+}: GetColumnsProps): ColumnDef<TbeVendorFields>[] {
+  // ----------------------------------------------------------------
+  // 1) Select 컬럼 (체크박스)
+  // ----------------------------------------------------------------
+  const selectColumn: ColumnDef<TbeVendorFields> = {
+    id: "select",
+    header: ({ table }) => (
+      <Checkbox
+        checked={
+          table.getIsAllPageRowsSelected() ||
+          (table.getIsSomePageRowsSelected() && "indeterminate")
+        }
+        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+        aria-label="Select all"
+        className="translate-y-0.5"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={(value) => row.toggleSelected(!!value)}
+        aria-label="Select row"
+        className="translate-y-0.5"
+      />
+    ),
+    size: 40,
+    enableSorting: false,
+    enableHiding: false,
+  }
+
+  // ----------------------------------------------------------------
+  // 2) 그룹화(Nested) 컬럼 구성
+  // ----------------------------------------------------------------
+  const groupMap: Record<string, ColumnDef<TbeVendorFields>[]> = {}
+
+  tbeVendorColumnsConfig.forEach((cfg) => {
+    const groupName = cfg.group || "_noGroup"
+    if (!groupMap[groupName]) {
+      groupMap[groupName] = []
+    }
+
+    // childCol: ColumnDef<TbeVendorFields>
+    const childCol: ColumnDef<TbeVendorFields> = {
+      accessorKey: cfg.id,
+      enableResizing: true,
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title={cfg.label} />
+      ),
+      meta: {
+        excelHeader: cfg.excelHeader,
+        group: cfg.group,
+        type: cfg.type,
+      },
+      maxSize: 120,
+      // 셀 렌더링
+      cell: ({ row, getValue }) => {
+        // 1) 필드값 가져오기
+        const val = getValue()
+
+        if (cfg.id === "vendorStatus") {
+          const statusVal = row.original.vendorStatus
+          if (!statusVal) return null
+          // const Icon = getStatusIcon(statusVal)
+          return (
+            <Badge variant="outline">
+              {statusVal}
+            </Badge>
+          )
+        }
+
+
+        if (cfg.id === "rfqVendorStatus") {
+          const statusVal = row.original.rfqVendorStatus
+          if (!statusVal) return null
+          // const Icon = getStatusIcon(statusVal)
+          const variant = statusVal === "INVITED" ? "default" : statusVal === "REJECTED" ? "destructive" : statusVal === "ACCEPTED" ? "secondary" : "outline"
+          return (
+            <Badge variant={variant}>
+              {statusVal}
+            </Badge>
+          )
+        }
+
+        // 예) TBE Updated (날짜)
+        if (cfg.id === "tbeUpdated") {
+          const dateVal = val as Date | undefined
+          if (!dateVal) return null
+          return formatDate(dateVal)
+        }
+
+        // 그 외 필드는 기본 값 표시
+        return val ?? ""
+      },
+    }
+
+    groupMap[groupName].push(childCol)
+  })
+
+  // groupMap → nestedColumns
+  const nestedColumns: ColumnDef<TbeVendorFields>[] = []
+  Object.entries(groupMap).forEach(([groupName, colDefs]) => {
+    if (groupName === "_noGroup") {
+      nestedColumns.push(...colDefs)
+    } else {
+      nestedColumns.push({
+        id: groupName,
+        header: groupName,
+        columns: colDefs,
+      })
+    }
+  })
+
+  // ----------------------------------------------------------------
+  // 3) Comments 컬럼
+  // ----------------------------------------------------------------
+  const commentsColumn: ColumnDef<TbeVendorFields> = {
+    id: "comments",
+    header: ({ column }) => (
+      <DataTableColumnHeaderSimple column={column} title="Comments" />
+    ),
+    cell: ({ row }) => {
+      const vendor = row.original
+      const commCount = vendor.comments?.length ?? 0
+
+      function handleClick() {
+        // rowAction + openCommentSheet
+        setRowAction({ row, type: "comments" })
+        openCommentSheet(vendor.tbeId ?? 0)
+      }
+
+      return (
+        <div>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-8 w-8 p-0 group relative"
+            onClick={handleClick}
+            aria-label={commCount > 0 ? `View ${commCount} comments` : "Add comment"}
+          >
+            <div className="flex items-center justify-center relative">
+              <MessageSquare className="h-4 w-4 text-muted-foreground group-hover:text-primary transition-colors" />
+            </div>
+            {commCount > 0 && <span className="absolute -top-1 -right-1 inline-flex h-2 w-2 rounded-full bg-red-500"></span>}
+            <span className="sr-only">{commCount > 0 ? `${commCount} Comments` : "Add Comment"}</span>
+          </Button>
+        </div>
+      )
+    },
+    enableSorting: false,
+    maxSize: 80
+  }
+
+  // ----------------------------------------------------------------
+  // 4) TBE 다운로드 컬럼 - 템플릿 다운로드 기능
+  // ----------------------------------------------------------------
+  const tbeDownloadColumn: ColumnDef<TbeVendorFields> = {
+    id: "tbeDownload",
+    header: ({ column }) => (
+      <DataTableColumnHeaderSimple column={column} title="TBE Sheets" />
+    ),
+    cell: ({ row }) => {
+      const vendor = row.original
+      const tbeId = vendor.tbeId
+      const vendorId = vendor.vendorId
+      const rfqId = vendor.rfqId
+      const templateFileCount = vendor.templateFileCount || 0
+
+      if (!tbeId || !vendorId || !rfqId) {
+        return <div className="text-center text-muted-foreground">-</div>
+      }
+
+      // 템플릿 파일이 없으면 다운로드 버튼 비활성화
+      const isDisabled = templateFileCount <= 0
+
+      return (
+        <Button
+          variant="ghost"
+          size="sm"
+          className="relative h-8 w-8 p-0 group"
+          onClick={
+            isDisabled
+              ? undefined
+              : () => handleDownloadTbeTemplate(tbeId, vendorId, rfqId)
+          }
+          aria-label={
+            templateFileCount > 0
+              ? `TBE 템플릿 다운로드 (${templateFileCount}개)`
+              : "다운로드할 파일 없음"
+          }
+          disabled={isDisabled}
+        >
+          <Download className="h-4 w-4 text-muted-foreground group-hover:text-primary transition-colors" />
+
+          {/* 파일이 1개 이상인 경우 뱃지로 개수 표시 */}
+          {templateFileCount > 0 && (
+            <Badge
+              variant="secondary"
+              className="pointer-events-none absolute -top-1 -right-1 h-4 min-w-[1rem] p-0 text-[0.625rem] leading-none flex items-center justify-center"
+            >
+              {templateFileCount}
+            </Badge>
+          )}
+
+          <span className="sr-only">
+            {templateFileCount > 0
+              ? `TBE 템플릿 다운로드 (${templateFileCount}개)`
+              : "다운로드할 파일 없음"}
+          </span>
+        </Button>
+      )
+    },
+    enableSorting: false,
+    maxSize: 80,
+  }
+  // ----------------------------------------------------------------
+  // 5) TBE 업로드 컬럼 - 응답 업로드 기능
+  // ----------------------------------------------------------------
+  const tbeUploadColumn: ColumnDef<TbeVendorFields> = {
+    id: "tbeUpload",
+    header: ({ column }) => (
+      <DataTableColumnHeaderSimple column={column} title="Upload Response" />
+    ),
+    cell: ({ row }) => {
+      const vendor = row.original
+      const tbeId = vendor.tbeId
+      const vendorId = vendor.vendorId
+      const rfqId = vendor.rfqId
+      const vendorResponseId = vendor.vendorResponseId
+      const status = vendor.rfqVendorStatus
+      const hasResponse = vendor.hasResponse || false
+
+
+      if (!tbeId || !vendorId || !rfqId || status === "REJECTED") {
+        return <div className="text-center text-muted-foreground">-</div>
+      }
+
+      return (
+        <div >
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-8 w-8 p-0 group relative"
+            onClick={() => handleUploadTbeResponse(tbeId, vendorId, rfqId, vendorResponseId)}
+            aria-label={hasResponse ? "TBE 응답 확인" : "TBE 응답 업로드"}
+          >
+            <div className="flex items-center justify-center relative">
+              <Upload className="h-4 w-4 text-muted-foreground group-hover:text-primary transition-colors" />
+            </div>
+            {hasResponse && (
+              <span className="absolute -top-1 -right-1 inline-flex h-2 w-2 rounded-full" style={{ backgroundColor: '#10B981' }}></span>
+            )}
+            <span className="sr-only">
+              {"TBE 응답 업로드"}
+            </span>
+          </Button>
+        </div>
+      )
+    },
+    enableSorting: false,
+    maxSize: 80
+  }
+
+  // ----------------------------------------------------------------
+  // 6) 최종 컬럼 배열
+  // ----------------------------------------------------------------
+  return [
+    selectColumn,
+    ...nestedColumns,
+    commentsColumn,
+    tbeDownloadColumn,
+    tbeUploadColumn,
+  ]
+}
\ No newline at end of file
diff --git a/lib/vendor-rfq-response/vendor-tbe-table/tbe-table.tsx b/lib/vendor-rfq-response/vendor-tbe-table/tbe-table.tsx
new file mode 100644
index 00000000..3450a643
--- /dev/null
+++ b/lib/vendor-rfq-response/vendor-tbe-table/tbe-table.tsx
@@ -0,0 +1,162 @@
+"use client"
+
+import * as React from "react"
+import { useRouter } from "next/navigation"
+import type {
+  DataTableAdvancedFilterField,
+  DataTableFilterField,
+  DataTableRowAction,
+} from "@/types/table"
+
+import { toSentenceCase } from "@/lib/utils"
+import { useDataTable } from "@/hooks/use-data-table"
+import { DataTable } from "@/components/data-table/data-table"
+import { DataTableAdvancedToolbar } from "@/components/data-table/data-table-advanced-toolbar"
+import { useFeatureFlags } from "./feature-flags-provider"
+import { getColumns } from "./tbe-table-columns"
+import { Vendor, vendors } from "@/db/schema/vendors"
+import { fetchRfqAttachmentsbyCommentId, getTBEforVendor } from "../../rfqs/service"
+import { CommentSheet, TbeComment } from "./comments-sheet"
+import { TbeVendorFields } from "@/config/vendorTbeColumnsConfig"
+import { useTbeFileHandlers } from "./tbeFileHandler"
+import { useSession } from "next-auth/react"
+
+interface VendorsTableProps {
+  promises: Promise<
+    [
+      Awaited<ReturnType<typeof getTBEforVendor>>,
+    ]
+  >
+}
+
+export function TbeVendorTable({ promises }: VendorsTableProps) {
+  const { featureFlags } = useFeatureFlags()
+  const { data: session } = useSession()
+  const userVendorId = session?.user?.companyId
+  const userId = Number(session?.user?.id)
+  // Suspense로 받아온 데이터
+  const [{ data, pageCount }] = React.use(promises)
+  const [rowAction, setRowAction] = React.useState<DataTableRowAction<TbeVendorFields> | null>(null)
+
+
+  // router 획득
+  const router = useRouter()
+
+  const [initialComments, setInitialComments] = React.useState<TbeComment[]>([])
+  const [commentSheetOpen, setCommentSheetOpen] = React.useState(false)
+  const [selectedRfqIdForComments, setSelectedRfqIdForComments] = React.useState<number | null>(null)
+
+  // TBE 파일 핸들러 훅 사용
+  const {
+    handleDownloadTbeTemplate,
+    handleUploadTbeResponse,
+    UploadDialog,
+  } = useTbeFileHandlers()
+
+  React.useEffect(() => {
+    if (rowAction?.type === "comments") {
+      // rowAction가 새로 세팅된 뒤 여기서 openCommentSheet 실행
+      openCommentSheet(Number(rowAction.row.original.id))
+    }
+  }, [rowAction])
+
+  async function openCommentSheet(vendorId: number) {
+    setInitialComments([])
+
+    const comments = rowAction?.row.original.comments
+
+    if (comments && comments.length > 0) {
+      const commentWithAttachments: TbeComment[] = await Promise.all(
+        comments.map(async (c) => {
+          // 서버 액션을 사용하여 코멘트 첨부 파일 가져오기
+          const attachments = await fetchRfqAttachmentsbyCommentId(c.id)
+
+          return {
+            ...c,
+            commentedBy: 1, // DB나 API 응답에 있다고 가정
+            attachments,
+          }
+        })
+      )
+      
+      setInitialComments(commentWithAttachments)
+    }
+
+    setSelectedRfqIdForComments(vendorId)
+    setCommentSheetOpen(true)
+  }
+
+  // getColumns() 호출 시, 필요한 모든 핸들러 함수 주입
+  const columns = React.useMemo(
+    () => getColumns({
+      setRowAction,
+      router,
+      openCommentSheet,
+      handleDownloadTbeTemplate,
+      handleUploadTbeResponse,
+    }),
+    [setRowAction, router, openCommentSheet, handleDownloadTbeTemplate, handleUploadTbeResponse]
+  )
+
+  const filterFields: DataTableFilterField<TbeVendorFields>[] = []
+
+  const advancedFilterFields: DataTableAdvancedFilterField<TbeVendorFields>[] = [
+    { id: "vendorName", label: "Vendor Name", type: "text" },
+    { id: "vendorCode", label: "Vendor Code", type: "text" },
+    { id: "email", label: "Email", type: "text" },
+    { id: "country", label: "Country", type: "text" },
+    {
+      id: "vendorStatus",
+      label: "Vendor Status",
+      type: "multi-select",
+      options: vendors.status.enumValues.map((status) => ({
+        label: toSentenceCase(status),
+        value: status,
+      })),
+    },
+    { id: "rfqVendorUpdated", label: "Updated at", type: "date" },
+  ]
+
+  const { table } = useDataTable({
+    data,
+    columns,
+    pageCount,
+    filterFields,
+    enablePinning: true,
+    enableAdvancedFilter: true,
+    initialState: {
+      sorting: [{ id: "rfqVendorUpdated", desc: true }],
+      columnPinning: { right: ["comments", "tbeDocuments"] }, // tbeDocuments 컬럼을 우측에 고정
+    },
+    getRowId: (originalRow) => String(originalRow.id),
+    shallow: false,
+    clearOnDefault: true,
+  })
+
+  return (
+    <>
+      <DataTable table={table}>
+        <DataTableAdvancedToolbar
+          table={table}
+          filterFields={advancedFilterFields}
+          shallow={false}
+        />
+      </DataTable>
+
+      {/* 코멘트 시트 */}
+      {commentSheetOpen && selectedRfqIdForComments && (
+        <CommentSheet
+          open={commentSheetOpen}
+          onOpenChange={setCommentSheetOpen}
+          rfqId={selectedRfqIdForComments}
+          initialComments={initialComments}
+          vendorId={userVendorId||0}
+          currentUserId={userId||0}
+        />
+      )}
+
+      {/* TBE 파일 다이얼로그 */}
+      <UploadDialog />
+    </>
+  )
+}
\ No newline at end of file
diff --git a/lib/vendor-rfq-response/vendor-tbe-table/tbeFileHandler.tsx b/lib/vendor-rfq-response/vendor-tbe-table/tbeFileHandler.tsx
new file mode 100644
index 00000000..3994b8eb
--- /dev/null
+++ b/lib/vendor-rfq-response/vendor-tbe-table/tbeFileHandler.tsx
@@ -0,0 +1,355 @@
+"use client";
+
+import { useCallback, useState, useEffect } from "react";
+import { toast } from "sonner";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import {
+  fetchTbeTemplateFiles,
+  getTbeTemplateFileInfo,
+  uploadTbeResponseFile,
+  getTbeSubmittedFiles,
+} from "../../rfqs/service";
+import {
+  Dropzone,
+  DropzoneDescription,
+  DropzoneInput,
+  DropzoneTitle,
+  DropzoneUploadIcon,
+  DropzoneZone,
+} from "@/components/ui/dropzone";
+import {
+  FileList,
+  FileListAction,
+  FileListDescription,
+  FileListIcon,
+  FileListInfo,
+  FileListItem,
+  FileListName,
+  FileListSize,
+} from "@/components/ui/file-list";
+import { Download, X } from "lucide-react";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { formatDateTime } from "@/lib/utils";
+
+export function useTbeFileHandlers() {
+  // 모달 열림 여부, 현재 선택된 IDs
+  const [isUploadDialogOpen, setIsUploadDialogOpen] = useState(false);
+  const [currentTbeId, setCurrentTbeId] = useState<number | null>(null);
+  const [currentVendorId, setCurrentVendorId] = useState<number | null>(null);
+  const [currentRfqId, setCurrentRfqId] = useState<number | null>(null);
+  const [currentvendorResponseId, setCurrentvendorResponseId] = useState<number | null>(null);
+
+  
+
+  // 로딩 상태들
+  const [isLoading, setIsLoading] = useState(false);
+  const [isFetchingFiles, setIsFetchingFiles] = useState(false);
+
+  // 업로드할 파일, 제출된 파일 목록
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  const [submittedFiles, setSubmittedFiles] = useState<
+    Array<{ id: number; fileName: string; filePath: string; uploadedAt: Date }>
+  >([]);
+
+  // ===================================
+  // 1) 제출된 파일 목록 가져오기
+  // ===================================
+  const fetchSubmittedFiles = useCallback(async (vendorResponseId: number) => {
+    if (!vendorResponseId ) return;
+
+    setIsFetchingFiles(true);
+    try {
+      const { files, error } = await getTbeSubmittedFiles(vendorResponseId);
+      if (error) {
+        console.error(error);
+        return;
+      }
+      setSubmittedFiles(files);
+    } catch (error) {
+      console.error("Failed to fetch submitted files:", error);
+    } finally {
+      setIsFetchingFiles(false);
+    }
+  }, []);
+
+  // ===================================
+  // 2) TBE 템플릿 다운로드
+  // ===================================
+  const handleDownloadTbeTemplate = useCallback(
+    async (tbeId: number, vendorId: number, rfqId: number) => {
+      setCurrentTbeId(tbeId);
+      setCurrentVendorId(vendorId);
+      setCurrentRfqId(rfqId);
+      setIsLoading(true);
+
+      try {
+        const { files, error } = await fetchTbeTemplateFiles(tbeId);
+        if (error) {
+          toast.error(error);
+          return;
+        }
+        if (files.length === 0) {
+          toast.warning("다운로드할 템플릿 파일이 없습니다");
+          return;
+        }
+        // 순차적으로 파일 다운로드
+        for (const file of files) {
+          await downloadFile(file.id);
+        }
+        toast.success("모든 템플릿 파일이 다운로드되었습니다");
+      } catch (error) {
+        toast.error("템플릿 파일을 다운로드하는 데 실패했습니다");
+        console.error(error);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    []
+  );
+
+  // 실제 다운로드 로직
+  const downloadFile = useCallback(async (fileId: number) => {
+    try {
+      const { file, error } = await getTbeTemplateFileInfo(fileId);
+      if (error || !file) {
+        throw new Error(error || "파일 정보를 가져오는 데 실패했습니다");
+      }
+
+      const link = document.createElement("a");
+      link.href = `/api/rfq-download?path=${encodeURIComponent(file.filePath)}`;
+      link.download = file.fileName;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+
+      return true;
+    } catch (error) {
+      console.error(error);
+      return false;
+    }
+  }, []);
+
+  // ===================================
+  // 3) 제출된 파일 다운로드
+  // ===================================
+  const downloadSubmittedFile = useCallback((file: { id: number; fileName: string; filePath: string }) => {
+    try {
+      const link = document.createElement("a");
+      link.href = `/api/files/${file.filePath}`;
+      link.download = file.fileName;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+
+      toast.success(`${file.fileName} 다운로드 시작`);
+    } catch (error) {
+      console.error("Failed to download file:", error);
+      toast.error("파일 다운로드에 실패했습니다");
+    }
+  }, []);
+
+  // ===================================
+  // 4) TBE 응답 업로드 모달 열기
+  //    (이 시점에서는 데이터 fetch하지 않음)
+  // ===================================
+  const handleUploadTbeResponse = useCallback((tbeId: number, vendorId: number, rfqId: number, vendorResponseId:number) => {
+    setCurrentTbeId(tbeId);
+    setCurrentVendorId(vendorId);
+    setCurrentRfqId(rfqId);
+    setCurrentvendorResponseId(vendorResponseId);
+    setIsUploadDialogOpen(true);
+  }, []);
+
+  // ===================================
+  // 5) Dialog 열고 닫힐 때 상태 초기화
+  //    열렸을 때 -> useEffect로 파일 목록 가져오기
+  // ===================================
+  useEffect(() => {
+    if (!isUploadDialogOpen) {
+      // 닫힐 때는 파일 상태들 초기화
+      setSelectedFile(null);
+      setSubmittedFiles([]);
+    }
+  }, [isUploadDialogOpen]);
+
+  useEffect(() => {
+    // Dialog가 열렸고, ID들이 유효하면
+    if (isUploadDialogOpen &&currentvendorResponseId) {
+      fetchSubmittedFiles(currentvendorResponseId);
+    }
+  }, [isUploadDialogOpen, currentvendorResponseId, fetchSubmittedFiles]);
+
+  // ===================================
+  // 6) 드롭존 파일 선택 & 제거
+  // ===================================
+  const handleFileDrop = useCallback((files: File[]) => {
+    if (files && files.length > 0) {
+      setSelectedFile(files[0]);
+    }
+  }, []);
+
+  const handleRemoveFile = useCallback(() => {
+    setSelectedFile(null);
+  }, []);
+
+  // ===================================
+  // 7) 응답 파일 업로드
+  // ===================================
+  const handleSubmitResponse = useCallback(async () => {
+    if (!selectedFile || !currentTbeId || !currentVendorId || !currentRfqId ||!currentvendorResponseId) {
+      toast.error("업로드할 파일을 선택해주세요");
+      return;
+    }
+
+    setIsLoading(true);
+    try {
+      // FormData 생성
+      const formData = new FormData();
+      formData.append("file", selectedFile);
+      formData.append("rfqId", currentRfqId.toString());
+      formData.append("vendorId", currentVendorId.toString());
+      formData.append("evaluationId", currentTbeId.toString());
+      formData.append("vendorResponseId", currentvendorResponseId.toString());
+
+      const result = await uploadTbeResponseFile(formData);
+      if (!result.success) {
+        throw new Error(result.error || "파일 업로드에 실패했습니다");
+      }
+
+      toast.success(result.message || "응답이 성공적으로 업로드되었습니다");
+
+      // 업로드 후 다시 제출된 파일 목록 가져오기
+      await fetchSubmittedFiles(currentvendorResponseId);
+
+      // 업로드 성공 시 선택 파일 초기화
+      setSelectedFile(null);
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "응답 업로드에 실패했습니다");
+      console.error(error);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [selectedFile, currentTbeId, currentVendorId, currentRfqId, currentvendorResponseId,fetchSubmittedFiles]);
+
+  // ===================================
+  // 8) 실제 Dialog 컴포넌트
+  // ===================================
+  const UploadDialog = () => (
+    <Dialog open={isUploadDialogOpen} onOpenChange={setIsUploadDialogOpen}>
+      <DialogContent className="sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle>TBE 응답 파일</DialogTitle>
+          <DialogDescription>제출된 파일을 확인하거나 새 파일을 업로드하세요.</DialogDescription>
+        </DialogHeader>
+
+        <Tabs defaultValue="upload" className="w-full">
+          <TabsList className="grid w-full grid-cols-2">
+            <TabsTrigger value="upload">새 파일 업로드</TabsTrigger>
+            <TabsTrigger
+              value="submitted"
+              disabled={submittedFiles.length === 0}
+              className={submittedFiles.length > 0 ? "relative" : ""}
+            >
+              제출된 파일{" "}
+              {submittedFiles.length > 0 && (
+                <span className="ml-2 inline-flex items-center justify-center rounded-full bg-primary w-4 h-4 text-[10px] text-primary-foreground">
+                  {submittedFiles.length}
+                </span>
+              )}
+            </TabsTrigger>
+          </TabsList>
+
+          {/* 업로드 탭 */}
+          <TabsContent value="upload" className="pt-4">
+            <div className="grid gap-4">
+              {selectedFile ? (
+                <FileList>
+                  <FileListItem>
+                    <FileListIcon />
+                    <FileListInfo>
+                      <FileListName>{selectedFile.name}</FileListName>
+                      <FileListSize>{selectedFile.size}</FileListSize>
+                    </FileListInfo>
+                    <FileListAction>
+                      <Button variant="ghost" size="icon" onClick={handleRemoveFile}>
+                        <X className="h-4 w-4" />
+                        <span className="sr-only">파일 제거</span>
+                      </Button>
+                    </FileListAction>
+                  </FileListItem>
+                </FileList>
+              ) : (
+                <Dropzone onDrop={handleFileDrop}>
+                  <DropzoneInput className="sr-only" />
+                  <DropzoneZone className="flex flex-col items-center justify-center gap-2 p-6">
+                    <DropzoneUploadIcon className="h-10 w-10 text-muted-foreground" />
+                    <DropzoneTitle>파일을 드래그하거나 클릭하여 업로드</DropzoneTitle>
+                    <DropzoneDescription>TBE 응답 파일 (XLSX, XLS, DOCX, PDF 등)</DropzoneDescription>
+                  </DropzoneZone>
+                </Dropzone>
+              )}
+
+              <DialogFooter className="mt-4">
+                <Button type="submit" onClick={handleSubmitResponse} disabled={!selectedFile || isLoading}>
+                  {isLoading ? "업로드 중..." : "응답 업로드"}
+                </Button>
+              </DialogFooter>
+            </div>
+          </TabsContent>
+
+          {/* 제출된 파일 탭 */}
+          <TabsContent value="submitted" className="pt-4">
+            {isFetchingFiles ? (
+              <div className="flex justify-center items-center py-8">
+                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
+              </div>
+            ) : submittedFiles.length > 0 ? (
+              <div className="grid gap-2">
+                <FileList>
+                  {submittedFiles.map((file) => (
+                    <FileListItem key={file.id} className="flex items-center justify-between gap-3">
+                      <div className="flex items-center gap-3 flex-1">
+                        <FileListIcon className="flex-shrink-0" />
+                        <FileListInfo className="flex-1 min-w-0">
+                          <FileListName className="text-sm font-medium truncate">{file.fileName}</FileListName>
+                          <FileListDescription className="text-xs text-muted-foreground">
+                            {file.uploadedAt ? formatDateTime(file.uploadedAt) : ""}
+                          </FileListDescription>
+                        </FileListInfo>
+                      </div>
+                      <FileListAction className="flex-shrink-0 ml-2">
+                        <Button variant="ghost" size="icon" onClick={() => downloadSubmittedFile(file)}>
+                          <Download className="h-4 w-4" />
+                          <span className="sr-only">파일 다운로드</span>
+                        </Button>
+                      </FileListAction>
+                    </FileListItem>
+                  ))}
+                </FileList>
+              </div>
+            ) : (
+              <div className="text-center py-8 text-muted-foreground">제출된 파일이 없습니다.</div>
+            )}
+          </TabsContent>
+        </Tabs>
+      </DialogContent>
+    </Dialog>
+  );
+
+  // ===================================
+  // 9) Hooks 내보내기
+  // ===================================
+  return {
+    handleDownloadTbeTemplate,
+    handleUploadTbeResponse,
+    UploadDialog,
+  };
+}
\ No newline at end of file
diff --git a/lib/vendors/contacts-table/add-contact-dialog.tsx b/lib/vendors/contacts-table/add-contact-dialog.tsx
new file mode 100644
index 00000000..5376583a
--- /dev/null
+++ b/lib/vendors/contacts-table/add-contact-dialog.tsx
@@ -0,0 +1,175 @@
+"use client"
+
+import * as React from "react"
+import { useForm } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+
+import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form"
+
+import {
+  createVendorContactSchema,
+  type CreateVendorContactSchema,
+} from "../validations"
+import { createVendorContact } from "../service"
+
+interface AddContactDialogProps {
+  vendorId: number
+}
+
+export function AddContactDialog({ vendorId }: AddContactDialogProps) {
+  const [open, setOpen] = React.useState(false)
+
+  // react-hook-form 세팅
+  const form = useForm<CreateVendorContactSchema>({
+    resolver: zodResolver(createVendorContactSchema),
+    defaultValues: {
+      // vendorId는 form에 표시할 필요가 없다면 hidden으로 관리하거나, submit 시 추가
+      vendorId,
+      contactName: "",
+      contactPosition: "",
+      contactEmail: "",
+      contactPhone: "",
+      isPrimary: false,
+    },
+  })
+
+  async function onSubmit(data: CreateVendorContactSchema) {
+    // 혹은 여기서 data.vendorId = vendorId; 해줘도 됨
+    const result = await createVendorContact(data)
+    if (result.error) {
+      alert(`에러: ${result.error}`)
+      return
+    }
+    // 성공 시 모달 닫고 폼 리셋
+    form.reset()
+    setOpen(false)
+  }
+
+  function handleDialogOpenChange(nextOpen: boolean) {
+    if (!nextOpen) {
+      form.reset()
+    }
+    setOpen(nextOpen)
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={handleDialogOpenChange}>
+      {/* 모달을 열기 위한 버튼 */}
+      <DialogTrigger asChild>
+        <Button variant="default" size="sm">
+          Add Contact
+        </Button>
+      </DialogTrigger>
+
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Create New Contact</DialogTitle>
+          <DialogDescription>
+            새 Contact 정보를 입력하고 <b>Create</b> 버튼을 누르세요.
+          </DialogDescription>
+        </DialogHeader>
+
+        {/* shadcn/ui Form을 이용해 react-hook-form과 연결 */}
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)}>
+            <div className="space-y-4 py-4">
+              <FormField
+                control={form.control}
+                name="contactName"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Contact Name</FormLabel>
+                    <FormControl>
+                      <Input placeholder="예: 홍길동" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="contactPosition"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Position / Title</FormLabel>
+                    <FormControl>
+                      <Input placeholder="예: 과장" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="contactEmail"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Email</FormLabel>
+                    <FormControl>
+                      <Input placeholder="name@company.com" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="contactPhone"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Phone</FormLabel>
+                    <FormControl>
+                      <Input placeholder="010-1234-5678" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              {/* 단순 checkbox */}
+              <FormField
+                control={form.control}
+                name="isPrimary"
+                render={({ field }) => (
+                  <FormItem>
+                    <div className="flex items-center space-x-2 mt-2">
+                      <input
+                        type="checkbox"
+                        checked={field.value}
+                        onChange={(e) => field.onChange(e.target.checked)}
+                      />
+                      <FormLabel>Is Primary?</FormLabel>
+                    </div>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            <DialogFooter>
+              <Button type="button" variant="outline" onClick={() => setOpen(false)}>
+                Cancel
+              </Button>
+              <Button type="submit" disabled={form.formState.isSubmitting}>
+                Create
+              </Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  )
+}
\ No newline at end of file
diff --git a/lib/vendors/contacts-table/contact-table-columns.tsx b/lib/vendors/contacts-table/contact-table-columns.tsx
new file mode 100644
index 00000000..f80fae33
--- /dev/null
+++ b/lib/vendors/contacts-table/contact-table-columns.tsx
@@ -0,0 +1,195 @@
+"use client"
+
+import * as React from "react"
+import { type DataTableRowAction } from "@/types/table"
+import { type ColumnDef } from "@tanstack/react-table"
+import { Ellipsis } from "lucide-react"
+import { toast } from "sonner"
+
+import { getErrorMessage } from "@/lib/handle-error"
+import { formatDate } from "@/lib/utils"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Checkbox } from "@/components/ui/checkbox"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { DataTableColumnHeader } from "@/components/data-table/data-table-column-header"
+
+import { VendorContact,  vendors } from "@/db/schema/vendors"
+import { modifyVendor } from "../service"
+import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header"
+import { vendorContactsColumnsConfig } from "@/config/vendorContactsColumnsConfig"
+
+
+
+
+interface GetColumnsProps {
+  setRowAction: React.Dispatch<React.SetStateAction<DataTableRowAction<VendorContact> | null>>;
+}
+
+/**
+ * tanstack table 컬럼 정의 (중첩 헤더 버전)
+ */
+export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<VendorContact>[] {
+  // ----------------------------------------------------------------
+  // 1) select 컬럼 (체크박스)
+  // ----------------------------------------------------------------
+  const selectColumn: ColumnDef<VendorContact> = {
+    id: "select",
+    header: ({ table }) => (
+      <Checkbox
+        checked={
+          table.getIsAllPageRowsSelected() ||
+          (table.getIsSomePageRowsSelected() && "indeterminate")
+        }
+        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+        aria-label="Select all"
+        className="translate-y-0.5"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={(value) => row.toggleSelected(!!value)}
+        aria-label="Select row"
+        className="translate-y-0.5"
+      />
+    ),
+    size:40,
+    enableSorting: false,
+    enableHiding: false,
+  }
+
+  // ----------------------------------------------------------------
+  // 2) actions 컬럼 (Dropdown 메뉴)
+  // ----------------------------------------------------------------
+  const actionsColumn: ColumnDef<VendorContact> = {
+    id: "actions",
+    enableHiding: false,
+    cell: function Cell({ row }) {
+      const [isUpdatePending, startUpdateTransition] = React.useTransition()
+
+      return (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              aria-label="Open menu"
+              variant="ghost"
+              className="flex size-8 p-0 data-[state=open]:bg-muted"
+            >
+              <Ellipsis className="size-4" aria-hidden="true" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-40">
+          <DropdownMenuItem
+              onSelect={() => {
+                setRowAction({ row, type: "update" })
+
+              }}
+            >
+              Edit
+            </DropdownMenuItem>
+
+            <DropdownMenuSeparator />
+            <DropdownMenuItem
+              onSelect={() => setRowAction({ row, type: "delete" })}
+            >
+              Delete
+              <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      )
+    },
+    size: 40,
+  }
+
+  // ----------------------------------------------------------------
+  // 3) 일반 컬럼들을 "그룹"별로 묶어 중첩 columns 생성
+  // ----------------------------------------------------------------
+  // 3-1) groupMap: { [groupName]: ColumnDef<VendorContact>[] }
+  const groupMap: Record<string, ColumnDef<VendorContact>[]> = {}
+
+  vendorContactsColumnsConfig.forEach((cfg) => {
+    // 만약 group가 없으면 "_noGroup" 처리
+    const groupName = cfg.group || "_noGroup"
+
+    if (!groupMap[groupName]) {
+      groupMap[groupName] = []
+    }
+
+    // child column 정의
+    const childCol: ColumnDef<VendorContact> = {
+      accessorKey: cfg.id,
+      enableResizing: true,
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title={cfg.label} />
+      ),
+      meta: {
+        excelHeader: cfg.excelHeader,
+        group: cfg.group,
+        type: cfg.type,
+      },
+      cell: ({ row, cell }) => {
+
+
+        if (cfg.id === "createdAt") {
+          const dateVal = cell.getValue() as Date
+          return formatDate(dateVal)
+        }
+
+        if (cfg.id === "updatedAt") {
+          const dateVal = cell.getValue() as Date
+          return formatDate(dateVal)
+        }
+
+
+        // code etc...
+        return row.getValue(cfg.id) ?? ""
+      },
+    }
+
+    groupMap[groupName].push(childCol)
+  })
+
+  // ----------------------------------------------------------------
+  // 3-2) groupMap에서 실제 상위 컬럼(그룹)을 만들기
+  // ----------------------------------------------------------------
+  const nestedColumns: ColumnDef<VendorContact>[] = []
+
+  // 순서를 고정하고 싶다면 group 순서를 미리 정의하거나 sort해야 함
+  // 여기서는 그냥 Object.entries 순서
+  Object.entries(groupMap).forEach(([groupName, colDefs]) => {
+    if (groupName === "_noGroup") {
+      // 그룹 없음 → 그냥 최상위 레벨 컬럼
+      nestedColumns.push(...colDefs)
+    } else {
+      // 상위 컬럼
+      nestedColumns.push({
+        id: groupName,
+        header: groupName, // "Basic Info", "Metadata" 등
+        columns: colDefs,
+      })
+    }
+  })
+
+  // ----------------------------------------------------------------
+  // 4) 최종 컬럼 배열: select, nestedColumns, actions
+  // ----------------------------------------------------------------
+  return [
+    selectColumn,
+    ...nestedColumns,
+    actionsColumn,
+  ]
+}
\ No newline at end of file
diff --git a/lib/vendors/contacts-table/contact-table-toolbar-actions.tsx b/lib/vendors/contacts-table/contact-table-toolbar-actions.tsx
new file mode 100644
index 00000000..8aef6953
--- /dev/null
+++ b/lib/vendors/contacts-table/contact-table-toolbar-actions.tsx
@@ -0,0 +1,106 @@
+"use client"
+
+import * as React from "react"
+import { type Table } from "@tanstack/react-table"
+import { Download, Upload } from "lucide-react"
+import { toast } from "sonner"
+
+import { exportTableToExcel } from "@/lib/export"
+import { Button } from "@/components/ui/button"
+
+
+// 만약 서버 액션이나 API 라우트를 이용해 업로드 처리한다면 import
+import { importTasksExcel } from "@/lib/tasks/service" // 예시
+import {  VendorContact } from "@/db/schema/vendors"
+import { AddContactDialog } from "./add-contact-dialog"
+
+interface VendorsTableToolbarActionsProps {
+  table: Table<VendorContact>
+  vendorId: number
+}
+
+export function VendorsTableToolbarActions({ table,vendorId }: VendorsTableToolbarActionsProps) {
+  // 파일 input을 숨기고, 버튼 클릭 시 참조해 클릭하는 방식
+  const fileInputRef = React.useRef<HTMLInputElement>(null)
+
+  // 파일이 선택되었을 때 처리
+  async function onFileChange(event: React.ChangeEvent<HTMLInputElement>) {
+    const file = event.target.files?.[0]
+    if (!file) return
+
+    // 파일 초기화 (동일 파일 재업로드 시에도 onChange가 트리거되도록)
+    event.target.value = ""
+
+    // 서버 액션 or API 호출
+    try {
+      // 예: 서버 액션 호출
+      const { errorFile, errorMessage } = await importTasksExcel(file)
+
+      if (errorMessage) {
+        toast.error(errorMessage)
+      }
+      if (errorFile) {
+        // 에러 엑셀을 다운로드
+        const url = URL.createObjectURL(errorFile)
+        const link = document.createElement("a")
+        link.href = url
+        link.download = "errors.xlsx"
+        link.click()
+        URL.revokeObjectURL(url)
+      } else {
+        // 성공
+        toast.success("Import success")
+        // 필요 시 revalidateTag("tasks") 등
+      }
+
+    } catch (err) {
+      toast.error("파일 업로드 중 오류가 발생했습니다.")
+      
+    }
+  }
+
+  function handleImportClick() {
+    // 숨겨진 <input type="file" /> 요소를 클릭
+    fileInputRef.current?.click()
+  }
+
+  return (
+    <div className="flex items-center gap-2">
+
+      <AddContactDialog vendorId={vendorId}/>
+
+      {/** 3) Import 버튼 (파일 업로드) */}
+      <Button variant="outline" size="sm" className="gap-2" onClick={handleImportClick}>
+        <Upload className="size-4" aria-hidden="true" />
+        <span className="hidden sm:inline">Import</span>
+      </Button>
+      {/*
+        실제로는 숨겨진 input과 연결:
+        - accept=".xlsx,.xls" 등으로 Excel 파일만 업로드 허용
+      */}
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept=".xlsx,.xls"
+        className="hidden"
+        onChange={onFileChange}
+      />
+
+      {/** 4) Export 버튼 */}
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={() =>
+          exportTableToExcel(table, {
+            filename: "tasks",
+            excludeColumns: ["select", "actions"],
+          })
+        }
+        className="gap-2"
+      >
+        <Download className="size-4" aria-hidden="true" />
+        <span className="hidden sm:inline">Export</span>
+      </Button>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/lib/vendors/contacts-table/contact-table.tsx b/lib/vendors/contacts-table/contact-table.tsx
new file mode 100644
index 00000000..2991187e
--- /dev/null
+++ b/lib/vendors/contacts-table/contact-table.tsx
@@ -0,0 +1,87 @@
+"use client"
+
+import * as React from "react"
+import type {
+  DataTableAdvancedFilterField,
+  DataTableFilterField,
+  DataTableRowAction,
+} from "@/types/table"
+
+import { toSentenceCase } from "@/lib/utils"
+import { useDataTable } from "@/hooks/use-data-table"
+import { DataTable } from "@/components/data-table/data-table"
+import { DataTableAdvancedToolbar } from "@/components/data-table/data-table-advanced-toolbar"
+import { useFeatureFlags } from "./feature-flags-provider"
+import { getColumns } from "./contact-table-columns"
+import { getVendorContacts,  } from "../service"
+import { VendorContact, vendors } from "@/db/schema/vendors"
+import { VendorsTableToolbarActions } from "./contact-table-toolbar-actions"
+
+interface VendorsTableProps {
+  promises: Promise<
+    [
+      Awaited<ReturnType<typeof getVendorContacts>>,
+    ]
+  >, 
+  vendorId:number
+}
+
+export function VendorContactsTable({ promises , vendorId}: VendorsTableProps) {
+  const { featureFlags } = useFeatureFlags()
+
+  // Suspense로 받아온 데이터
+  const [{ data, pageCount }] = React.use(promises)
+
+  const [rowAction, setRowAction] = React.useState<DataTableRowAction<VendorContact> | null>(null)
+
+  // getColumns() 호출 시, router를 주입
+  const columns = React.useMemo(
+    () => getColumns({ setRowAction }),
+    [setRowAction]
+  )
+
+  const filterFields: DataTableFilterField<VendorContact>[] = [
+    
+  ]
+
+  const advancedFilterFields: DataTableAdvancedFilterField<VendorContact>[] = [
+    { id: "contactName", label: "Contact Name", type: "text" },
+    { id: "contactPosition", label: "Contact Position", type: "text" },
+    { id: "contactEmail", label: "Contact Email", type: "text" },
+    { id: "contactPhone", label: "Contact Phone", type: "text" },
+    { id: "createdAt", label: "Created at", type: "date" },
+    { id: "updatedAt", label: "Updated at", type: "date" },
+  ]
+
+  const { table } = useDataTable({
+    data,
+    columns,
+    pageCount,
+    filterFields,
+    enablePinning: true,
+    enableAdvancedFilter: true,
+    initialState: {
+      sorting: [{ id: "createdAt", desc: true }],
+      columnPinning: { right: ["actions"] },
+    },
+    getRowId: (originalRow) => String(originalRow.id),
+    shallow: false,
+    clearOnDefault: true,
+  })
+
+  return (
+    <>
+      <DataTable
+        table={table}
+      >
+        <DataTableAdvancedToolbar
+          table={table}
+          filterFields={advancedFilterFields}
+          shallow={false}
+        >
+          <VendorsTableToolbarActions table={table} vendorId={vendorId} />
+        </DataTableAdvancedToolbar>
+      </DataTable>
+    </>
+  )
+}
\ No newline at end of file
diff --git a/lib/vendors/contacts-table/feature-flags-provider.tsx b/lib/vendors/contacts-table/feature-flags-provider.tsx
new file mode 100644
index 00000000..81131894
--- /dev/null
+++ b/lib/vendors/contacts-table/feature-flags-provider.tsx
@@ -0,0 +1,108 @@
+"use client"
+
+import * as React from "react"
+import { useQueryState } from "nuqs"
+
+import { dataTableConfig, type DataTableConfig } from "@/config/data-table"
+import { cn } from "@/lib/utils"
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+
+type FeatureFlagValue = DataTableConfig["featureFlags"][number]["value"]
+
+interface FeatureFlagsContextProps {
+  featureFlags: FeatureFlagValue[]
+  setFeatureFlags: (value: FeatureFlagValue[]) => void
+}
+
+const FeatureFlagsContext = React.createContext<FeatureFlagsContextProps>({
+  featureFlags: [],
+  setFeatureFlags: () => {},
+})
+
+export function useFeatureFlags() {
+  const context = React.useContext(FeatureFlagsContext)
+  if (!context) {
+    throw new Error(
+      "useFeatureFlags must be used within a FeatureFlagsProvider"
+    )
+  }
+  return context
+}
+
+interface FeatureFlagsProviderProps {
+  children: React.ReactNode
+}
+
+export function FeatureFlagsProvider({ children }: FeatureFlagsProviderProps) {
+  const [featureFlags, setFeatureFlags] = useQueryState<FeatureFlagValue[]>(
+    "flags",
+    {
+      defaultValue: [],
+      parse: (value) => value.split(",") as FeatureFlagValue[],
+      serialize: (value) => value.join(","),
+      eq: (a, b) =>
+        a.length === b.length && a.every((value, index) => value === b[index]),
+      clearOnDefault: true,
+      shallow: false,
+    }
+  )
+
+  return (
+    <FeatureFlagsContext.Provider
+      value={{
+        featureFlags,
+        setFeatureFlags: (value) => void setFeatureFlags(value),
+      }}
+    >
+      <div className="w-full overflow-x-auto">
+        <ToggleGroup
+          type="multiple"
+          variant="outline"
+          size="sm"
+          value={featureFlags}
+          onValueChange={(value: FeatureFlagValue[]) => setFeatureFlags(value)}
+          className="w-fit gap-0"
+        >
+          {dataTableConfig.featureFlags.map((flag, index) => (
+            <Tooltip key={flag.value}>
+              <ToggleGroupItem
+                value={flag.value}
+                className={cn(
+                  "gap-2 whitespace-nowrap rounded-none px-3 text-xs data-[state=on]:bg-accent/70 data-[state=on]:hover:bg-accent/90",
+                  {
+                    "rounded-l-sm border-r-0": index === 0,
+                    "rounded-r-sm":
+                      index === dataTableConfig.featureFlags.length - 1,
+                  }
+                )}
+                asChild
+              >
+                <TooltipTrigger>
+                  <flag.icon className="size-3.5 shrink-0" aria-hidden="true" />
+                  {flag.label}
+                </TooltipTrigger>
+              </ToggleGroupItem>
+              <TooltipContent
+                align="start"
+                side="bottom"
+                sideOffset={6}
+                className="flex max-w-60 flex-col space-y-1.5 border bg-background py-2 font-semibold text-foreground"
+              >
+                <div>{flag.tooltipTitle}</div>
+                <div className="text-xs text-muted-foreground">
+                  {flag.tooltipDescription}
+                </div>
+              </TooltipContent>
+            </Tooltip>
+          ))}
+        </ToggleGroup>
+      </div>
+      {children}
+    </FeatureFlagsContext.Provider>
+  )
+}
diff --git a/lib/vendors/items-table/add-item-dialog.tsx b/lib/vendors/items-table/add-item-dialog.tsx
new file mode 100644
index 00000000..6bbcc436
--- /dev/null
+++ b/lib/vendors/items-table/add-item-dialog.tsx
@@ -0,0 +1,289 @@
+"use client"
+
+import * as React from "react"
+import { useForm } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Check, ChevronsUpDown } from "lucide-react"
+
+import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command"
+import { cn } from "@/lib/utils"
+
+import {
+  createVendorItemSchema,
+  type CreateVendorItemSchema,
+} from "../validations"
+
+import { createVendorItem, getItemsForVendor, ItemDropdownOption } from "../service"
+
+interface AddItemDialogProps {
+  vendorId: number
+}
+
+export function AddItemDialog({ vendorId }: AddItemDialogProps) {
+  const [open, setOpen] = React.useState(false)
+  const [commandOpen, setCommandOpen] = React.useState(false)
+  const [items, setItems] = React.useState<ItemDropdownOption[]>([])
+  const [filteredItems, setFilteredItems] = React.useState<ItemDropdownOption[]>([])
+  const [isLoading, setIsLoading] = React.useState(false)
+  const [searchTerm, setSearchTerm] = React.useState("")
+  
+  // 선택된 아이템의 정보를 보여주기 위한 상태
+  const [selectedItem, setSelectedItem] = React.useState<{
+    itemName: string;
+    description: string;
+  } | null>(null)
+
+  // react-hook-form 세팅 - 서버로 보낼 값은 vendorId와 itemCode만
+  const form = useForm<CreateVendorItemSchema>({
+    resolver: zodResolver(createVendorItemSchema),
+    defaultValues: {
+      vendorId,
+      itemCode: "",
+    },
+  })
+
+  console.log(vendorId)
+
+  // 아이템 목록 가져오기 (한 번만 호출)
+  const fetchItems = React.useCallback(async () => {
+    if (items.length > 0) return // 이미 로드된 경우 스킵
+    
+    setIsLoading(true)
+    try {
+      const result = await getItemsForVendor(vendorId)
+      if (result.data) {
+        setItems(result.data)
+        setFilteredItems(result.data)
+      }
+    } catch (error) {
+      console.error("Failed to fetch items:", error)
+    } finally {
+      setIsLoading(false)
+    }
+  }, [items.length])
+
+  // 팝오버 열릴 때 아이템 목록 로드
+  React.useEffect(() => {
+    if (commandOpen) {
+      fetchItems()
+    }
+  }, [commandOpen, fetchItems])
+
+  // 클라이언트 사이드 필터링
+  React.useEffect(() => {
+    if (!items.length) return
+    
+    if (!searchTerm.trim()) {
+      setFilteredItems(items)
+      return
+    }
+    
+    const lowerSearch = searchTerm.toLowerCase()
+    const filtered = items.filter(item => 
+      item.itemCode.toLowerCase().includes(lowerSearch) || 
+      item.itemName.toLowerCase().includes(lowerSearch) ||
+      (item.description && item.description.toLowerCase().includes(lowerSearch))
+    )
+    
+    setFilteredItems(filtered)
+  }, [searchTerm, items])
+
+  // 선택된 아이템 데이터로 폼 업데이트
+  const handleSelectItem = (item: ItemDropdownOption) => {
+    // 폼에는 itemCode만 설정
+    form.setValue("itemCode", item.itemCode)
+    
+    // 나머지 정보는 표시용 상태에 저장
+    setSelectedItem({
+      itemName: item.itemName,
+      description: item.description || "",
+    })
+    
+    setCommandOpen(false)
+  }
+
+  // 폼 제출 - itemCode만 서버로 전송
+  async function onSubmit(data: CreateVendorItemSchema) {
+    // 서버에는 vendorId와 itemCode만 전송됨
+    const result = await createVendorItem(data)
+    console.log(result)
+    if (result.error) {
+      alert(`에러: ${result.error}`)
+      return
+    }
+    // 성공 시 모달 닫고 폼 리셋
+    form.reset()
+    setSelectedItem(null)
+    setOpen(false)
+  }
+
+  // 모달 열림/닫힘 핸들
+  function handleDialogOpenChange(nextOpen: boolean) {
+    if (!nextOpen) {
+      // 닫힐 때 폼 리셋
+      form.reset()
+      setSelectedItem(null)
+    }
+    setOpen(nextOpen)
+  }
+
+  // 현재 선택된 아이템 코드
+  const selectedItemCode = form.watch("itemCode")
+  
+  // 선택된 아이템 코드가 있으면 상세 정보 표시를 위한 아이템 찾기
+  const displayItemCode = selectedItemCode || "아이템 선택..."
+  const displayItemName = selectedItem?.itemName || ""
+
+  return (
+    <Dialog open={open} onOpenChange={handleDialogOpenChange}>
+      {/* 모달 열기 버튼 */}
+      <DialogTrigger asChild>
+        <Button variant="default" size="sm">
+          Add Item
+        </Button>
+      </DialogTrigger>
+
+      <DialogContent className="max-h-[90vh] overflow-hidden flex flex-col">
+        <DialogHeader>
+          <DialogTitle>Create New Item</DialogTitle>
+          <DialogDescription>
+            아이템을 선택한 후 <b>Create</b> 버튼을 누르세요.
+          </DialogDescription>
+        </DialogHeader>
+
+        {/* shadcn/ui Form + react-hook-form */}
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col flex-1 overflow-hidden">
+            <div className="space-y-4 py-4 flex-1 overflow-y-auto">
+              
+              {/* 아이템 선택 */}
+              <div>
+                <FormLabel className="text-sm font-medium">아이템 선택</FormLabel>
+                <Popover open={commandOpen} onOpenChange={setCommandOpen}>
+                  <PopoverTrigger asChild>
+                    <Button
+                      variant="outline"
+                      role="combobox"
+                      aria-expanded={commandOpen}
+                      className="w-full justify-between mt-1"
+                    >
+                      {selectedItemCode 
+                        ? `${selectedItemCode} - ${displayItemName}` 
+                        : "아이템 선택..."}
+                      <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent className="w-[400px] p-0">
+                    <Command>
+                      <CommandInput 
+                        placeholder="아이템 코드/이름 검색..." 
+                        onValueChange={setSearchTerm}
+                      />
+                      <CommandList className="max-h-[200px]">
+                        <CommandEmpty>검색 결과가 없습니다</CommandEmpty>
+                        {isLoading ? (
+                          <div className="py-6 text-center text-sm">로딩 중...</div>
+                        ) : (
+                          <CommandGroup>
+                            {filteredItems.map((item) => (
+                              <CommandItem
+                                key={item.itemCode}
+                                value={`${item.itemCode} ${item.itemName}`}
+                                onSelect={() => handleSelectItem(item)}
+                              >
+                                <Check
+                                  className={cn(
+                                    "mr-2 h-4 w-4",
+                                    selectedItemCode === item.itemCode
+                                      ? "opacity-100"
+                                      : "opacity-0"
+                                  )}
+                                />
+                                <span className="font-medium">{item.itemCode}</span>
+                                <span className="ml-2 text-gray-500 truncate">- {item.itemName}</span>
+                              </CommandItem>
+                            ))}
+                          </CommandGroup>
+                        )}
+                      </CommandList>
+                    </Command>
+                  </PopoverContent>
+                </Popover>
+              </div>
+
+              {/* 아이템 정보 영역 - 선택된 경우에만 표시 */}
+              {selectedItem && (
+                <div className="rounded-md border p-3 mt-4 overflow-hidden">
+                  <h3 className="font-medium text-sm mb-2">선택된 아이템 정보</h3>
+                  
+                  {/* Item Code - readonly (hidden field) */}
+                  <FormField
+                    control={form.control}
+                    name="itemCode"
+                    render={({ field }) => (
+                      <FormItem className="hidden">
+                        <FormControl>
+                          <Input {...field} />
+                        </FormControl>
+                      </FormItem>
+                    )}
+                  />
+                  
+                  {/* Item Name (표시용) */}
+                  <div className="mb-2">
+                    <p className="text-xs font-medium text-gray-500">Item Name</p>
+                    <p className="text-sm mt-0.5 break-words">{selectedItem.itemName}</p>
+                  </div>
+                  
+                  {/* Description (표시용) */}
+                  {selectedItem.description && (
+                    <div>
+                      <p className="text-xs font-medium text-gray-500">Description</p>
+                      <p className="text-sm mt-0.5 break-words max-h-20 overflow-y-auto">{selectedItem.description}</p>
+                    </div>
+                  )}
+                </div>
+              )}
+
+            </div>
+
+            <DialogFooter className="flex-shrink-0 pt-2">
+              <Button type="button" variant="outline" onClick={() => setOpen(false)}>
+                Cancel
+              </Button>
+              <Button 
+                type="submit" 
+                disabled={form.formState.isSubmitting || !selectedItemCode}
+              >
+                Create
+              </Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  )
+}
\ No newline at end of file
diff --git a/lib/vendors/items-table/feature-flags-provider.tsx b/lib/vendors/items-table/feature-flags-provider.tsx
new file mode 100644
index 00000000..81131894
--- /dev/null
+++ b/lib/vendors/items-table/feature-flags-provider.tsx
@@ -0,0 +1,108 @@
+"use client"
+
+import * as React from "react"
+import { useQueryState } from "nuqs"
+
+import { dataTableConfig, type DataTableConfig } from "@/config/data-table"
+import { cn } from "@/lib/utils"
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+
+type FeatureFlagValue = DataTableConfig["featureFlags"][number]["value"]
+
+interface FeatureFlagsContextProps {
+  featureFlags: FeatureFlagValue[]
+  setFeatureFlags: (value: FeatureFlagValue[]) => void
+}
+
+const FeatureFlagsContext = React.createContext<FeatureFlagsContextProps>({
+  featureFlags: [],
+  setFeatureFlags: () => {},
+})
+
+export function useFeatureFlags() {
+  const context = React.useContext(FeatureFlagsContext)
+  if (!context) {
+    throw new Error(
+      "useFeatureFlags must be used within a FeatureFlagsProvider"
+    )
+  }
+  return context
+}
+
+interface FeatureFlagsProviderProps {
+  children: React.ReactNode
+}
+
+export function FeatureFlagsProvider({ children }: FeatureFlagsProviderProps) {
+  const [featureFlags, setFeatureFlags] = useQueryState<FeatureFlagValue[]>(
+    "flags",
+    {
+      defaultValue: [],
+      parse: (value) => value.split(",") as FeatureFlagValue[],
+      serialize: (value) => value.join(","),
+      eq: (a, b) =>
+        a.length === b.length && a.every((value, index) => value === b[index]),
+      clearOnDefault: true,
+      shallow: false,
+    }
+  )
+
+  return (
+    <FeatureFlagsContext.Provider
+      value={{
+        featureFlags,
+        setFeatureFlags: (value) => void setFeatureFlags(value),
+      }}
+    >
+      <div className="w-full overflow-x-auto">
+        <ToggleGroup
+          type="multiple"
+          variant="outline"
+          size="sm"
+          value={featureFlags}
+          onValueChange={(value: FeatureFlagValue[]) => setFeatureFlags(value)}
+          className="w-fit gap-0"
+        >
+          {dataTableConfig.featureFlags.map((flag, index) => (
+            <Tooltip key={flag.value}>
+              <ToggleGroupItem
+                value={flag.value}
+                className={cn(
+                  "gap-2 whitespace-nowrap rounded-none px-3 text-xs data-[state=on]:bg-accent/70 data-[state=on]:hover:bg-accent/90",
+                  {
+                    "rounded-l-sm border-r-0": index === 0,
+                    "rounded-r-sm":
+                      index === dataTableConfig.featureFlags.length - 1,
+                  }
+                )}
+                asChild
+              >
+                <TooltipTrigger>
+                  <flag.icon className="size-3.5 shrink-0" aria-hidden="true" />
+                  {flag.label}
+                </TooltipTrigger>
+              </ToggleGroupItem>
+              <TooltipContent
+                align="start"
+                side="bottom"
+                sideOffset={6}
+                className="flex max-w-60 flex-col space-y-1.5 border bg-background py-2 font-semibold text-foreground"
+              >
+                <div>{flag.tooltipTitle}</div>
+                <div className="text-xs text-muted-foreground">
+                  {flag.tooltipDescription}
+                </div>
+              </TooltipContent>
+            </Tooltip>
+          ))}
+        </ToggleGroup>
+      </div>
+      {children}
+    </FeatureFlagsContext.Provider>
+  )
+}
diff --git a/lib/vendors/items-table/item-table-columns.tsx b/lib/vendors/items-table/item-table-columns.tsx
new file mode 100644
index 00000000..b5d26434
--- /dev/null
+++ b/lib/vendors/items-table/item-table-columns.tsx
@@ -0,0 +1,197 @@
+"use client"
+
+import * as React from "react"
+import { type DataTableRowAction } from "@/types/table"
+import { type ColumnDef } from "@tanstack/react-table"
+import { Ellipsis } from "lucide-react"
+import { toast } from "sonner"
+
+import { getErrorMessage } from "@/lib/handle-error"
+import { formatDate } from "@/lib/utils"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Checkbox } from "@/components/ui/checkbox"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { DataTableColumnHeader } from "@/components/data-table/data-table-column-header"
+
+import { VendorItemsView,  vendors } from "@/db/schema/vendors"
+import { modifyVendor } from "../service"
+import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header"
+import { vendorItemsColumnsConfig } from "@/config/vendorItemsColumnsConfig"
+
+
+
+
+interface GetColumnsProps {
+  setRowAction: React.Dispatch<React.SetStateAction<DataTableRowAction<VendorItemsView> | null>>;
+}
+
+/**
+ * tanstack table 컬럼 정의 (중첩 헤더 버전)
+ */
+export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<VendorItemsView>[] {
+  // ----------------------------------------------------------------
+  // 1) select 컬럼 (체크박스)
+  // ----------------------------------------------------------------
+  const selectColumn: ColumnDef<VendorItemsView> = {
+    id: "select",
+    header: ({ table }) => (
+      <Checkbox
+        checked={
+          table.getIsAllPageRowsSelected() ||
+          (table.getIsSomePageRowsSelected() && "indeterminate")
+        }
+        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+        aria-label="Select all"
+        className="translate-y-0.5"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={(value) => row.toggleSelected(!!value)}
+        aria-label="Select row"
+        className="translate-y-0.5"
+      />
+    ),
+    size:40,
+    enableSorting: false,
+    enableHiding: false,
+  }
+
+  // ----------------------------------------------------------------
+  // 2) actions 컬럼 (Dropdown 메뉴)
+  // ----------------------------------------------------------------
+  const actionsColumn: ColumnDef<VendorItemsView> = {
+    id: "actions",
+    enableHiding: false,
+    cell: function Cell({ row }) {
+      const [isUpdatePending, startUpdateTransition] = React.useTransition()
+
+      return (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              aria-label="Open menu"
+              variant="ghost"
+              className="flex size-8 p-0 data-[state=open]:bg-muted"
+            >
+              <Ellipsis className="size-4" aria-hidden="true" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-40">
+          <DropdownMenuItem
+              onSelect={() => {
+                setRowAction({ row, type: "update" })
+
+              }}
+            >
+              Edit
+            </DropdownMenuItem>
+
+            <DropdownMenuSeparator />
+            <DropdownMenuItem
+              onSelect={() => setRowAction({ row, type: "delete" })}
+            >
+              Delete
+              <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      )
+    },
+    size: 40,
+  }
+
+  // ----------------------------------------------------------------
+  // 3) 일반 컬럼들을 "그룹"별로 묶어 중첩 columns 생성
+  // ----------------------------------------------------------------
+  // 3-1) groupMap: { [groupName]: ColumnDef<VendorItemsView>[] }
+  const groupMap: Record<string, ColumnDef<VendorItemsView>[]> = {}
+
+  vendorItemsColumnsConfig.forEach((cfg) => {
+    // 만약 group가 없으면 "_noGroup" 처리
+    const groupName = cfg.group || "_noGroup"
+
+    if (!groupMap[groupName]) {
+      groupMap[groupName] = []
+    }
+
+    // child column 정의
+    const childCol: ColumnDef<VendorItemsView> = {
+      accessorKey: cfg.id,
+      enableResizing: true,
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title={cfg.label} />
+      ),
+      minSize: cfg.minWidth,
+      size: cfg.defaultWidth,
+      meta: {
+        excelHeader: cfg.excelHeader,
+        group: cfg.group,
+        type: cfg.type,
+      },
+      cell: ({ row, cell }) => {
+
+
+        if (cfg.id === "createdAt") {
+          const dateVal = cell.getValue() as Date
+          return formatDate(dateVal)
+        }
+
+        if (cfg.id === "updatedAt") {
+          const dateVal = cell.getValue() as Date
+          return formatDate(dateVal)
+        }
+
+
+        // code etc...
+        return row.getValue(cfg.id) ?? ""
+      },
+    }
+
+    groupMap[groupName].push(childCol)
+  })
+
+  // ----------------------------------------------------------------
+  // 3-2) groupMap에서 실제 상위 컬럼(그룹)을 만들기
+  // ----------------------------------------------------------------
+  const nestedColumns: ColumnDef<VendorItemsView>[] = []
+
+  // 순서를 고정하고 싶다면 group 순서를 미리 정의하거나 sort해야 함
+  // 여기서는 그냥 Object.entries 순서
+  Object.entries(groupMap).forEach(([groupName, colDefs]) => {
+    if (groupName === "_noGroup") {
+      // 그룹 없음 → 그냥 최상위 레벨 컬럼
+      nestedColumns.push(...colDefs)
+    } else {
+      // 상위 컬럼
+      nestedColumns.push({
+        id: groupName,
+        header: groupName, // "Basic Info", "Metadata" 등
+        columns: colDefs,
+      })
+    }
+  })
+
+  // ----------------------------------------------------------------
+  // 4) 최종 컬럼 배열: select, nestedColumns, actions
+  // ----------------------------------------------------------------
+  return [
+    selectColumn,
+    ...nestedColumns,
+    actionsColumn,
+  ]
+}
\ No newline at end of file
diff --git a/lib/vendors/items-table/item-table-toolbar-actions.tsx b/lib/vendors/items-table/item-table-toolbar-actions.tsx
new file mode 100644
index 00000000..f7bd2bf6
--- /dev/null
+++ b/lib/vendors/items-table/item-table-toolbar-actions.tsx
@@ -0,0 +1,106 @@
+"use client"
+
+import * as React from "react"
+import { type Table } from "@tanstack/react-table"
+import { Download, Upload } from "lucide-react"
+import { toast } from "sonner"
+
+import { exportTableToExcel } from "@/lib/export"
+import { Button } from "@/components/ui/button"
+
+
+// 만약 서버 액션이나 API 라우트를 이용해 업로드 처리한다면 import
+import { importTasksExcel } from "@/lib/tasks/service" // 예시
+import {   VendorItemsView } from "@/db/schema/vendors"
+import { AddItemDialog } from "./add-item-dialog"
+
+interface VendorsTableToolbarActionsProps {
+  table: Table<VendorItemsView>
+  vendorId: number
+}
+
+export function VendorsTableToolbarActions({ table,vendorId }: VendorsTableToolbarActionsProps) {
+  // 파일 input을 숨기고, 버튼 클릭 시 참조해 클릭하는 방식
+  const fileInputRef = React.useRef<HTMLInputElement>(null)
+
+  // 파일이 선택되었을 때 처리
+  async function onFileChange(event: React.ChangeEvent<HTMLInputElement>) {
+    const file = event.target.files?.[0]
+    if (!file) return
+
+    // 파일 초기화 (동일 파일 재업로드 시에도 onChange가 트리거되도록)
+    event.target.value = ""
+
+    // 서버 액션 or API 호출
+    try {
+      // 예: 서버 액션 호출
+      const { errorFile, errorMessage } = await importTasksExcel(file)
+
+      if (errorMessage) {
+        toast.error(errorMessage)
+      }
+      if (errorFile) {
+        // 에러 엑셀을 다운로드
+        const url = URL.createObjectURL(errorFile)
+        const link = document.createElement("a")
+        link.href = url
+        link.download = "errors.xlsx"
+        link.click()
+        URL.revokeObjectURL(url)
+      } else {
+        // 성공
+        toast.success("Import success")
+        // 필요 시 revalidateTag("tasks") 등
+      }
+
+    } catch (err) {
+      toast.error("파일 업로드 중 오류가 발생했습니다.")
+      
+    }
+  }
+
+  function handleImportClick() {
+    // 숨겨진 <input type="file" /> 요소를 클릭
+    fileInputRef.current?.click()
+  }
+
+  return (
+    <div className="flex items-center gap-2">
+
+      <AddItemDialog vendorId={vendorId}/>
+
+      {/** 3) Import 버튼 (파일 업로드) */}
+      <Button variant="outline" size="sm" className="gap-2" onClick={handleImportClick}>
+        <Upload className="size-4" aria-hidden="true" />
+        <span className="hidden sm:inline">Import</span>
+      </Button>
+      {/*
+        실제로는 숨겨진 input과 연결:
+        - accept=".xlsx,.xls" 등으로 Excel 파일만 업로드 허용
+      */}
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept=".xlsx,.xls"
+        className="hidden"
+        onChange={onFileChange}
+      />
+
+      {/** 4) Export 버튼 */}
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={() =>
+          exportTableToExcel(table, {
+            filename: "tasks",
+            excludeColumns: ["select", "actions"],
+          })
+        }
+        className="gap-2"
+      >
+        <Download className="size-4" aria-hidden="true" />
+        <span className="hidden sm:inline">Export</span>
+      </Button>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/lib/vendors/items-table/item-table.tsx b/lib/vendors/items-table/item-table.tsx
new file mode 100644
index 00000000..d8cd0ea2
--- /dev/null
+++ b/lib/vendors/items-table/item-table.tsx
@@ -0,0 +1,85 @@
+"use client"
+
+import * as React from "react"
+import type {
+  DataTableAdvancedFilterField,
+  DataTableFilterField,
+  DataTableRowAction,
+} from "@/types/table"
+
+import { toSentenceCase } from "@/lib/utils"
+import { useDataTable } from "@/hooks/use-data-table"
+import { DataTable } from "@/components/data-table/data-table"
+import { DataTableAdvancedToolbar } from "@/components/data-table/data-table-advanced-toolbar"
+import { useFeatureFlags } from "./feature-flags-provider"
+import { getColumns } from "./item-table-columns"
+import {  getVendorItems,  } from "../service"
+import { VendorItemsView, vendors } from "@/db/schema/vendors"
+import { VendorsTableToolbarActions } from "./item-table-toolbar-actions"
+
+interface VendorsTableProps {
+  promises: Promise<
+    [
+      Awaited<ReturnType<typeof getVendorItems>>,
+    ]
+  >, 
+  vendorId:number
+}
+
+export function VendorItemsTable({ promises , vendorId}: VendorsTableProps) {
+  const { featureFlags } = useFeatureFlags()
+
+  // Suspense로 받아온 데이터
+  const [{ data, pageCount }] = React.use(promises)
+  const [rowAction, setRowAction] = React.useState<DataTableRowAction<VendorItemsView> | null>(null)
+
+  // getColumns() 호출 시, router를 주입
+  const columns = React.useMemo(
+    () => getColumns({ setRowAction }),
+    [setRowAction]
+  )
+
+  const filterFields: DataTableFilterField<VendorItemsView>[] = [
+    
+  ]
+
+  const advancedFilterFields: DataTableAdvancedFilterField<VendorItemsView>[] = [
+    { id: "itemName", label: "Item Name", type: "text" },
+    { id: "itemCode", label: "Item Code", type: "text" },
+    { id: "description", label: "Description", type: "text" },
+    { id: "createdAt", label: "Created at", type: "date" },
+    { id: "updatedAt", label: "Updated at", type: "date" },
+  ]
+
+  const { table } = useDataTable({
+    data,
+    columns,
+    pageCount,
+    filterFields,
+    enablePinning: true,
+    enableAdvancedFilter: true,
+    initialState: {
+      sorting: [{ id: "createdAt", desc: true }],
+      columnPinning: { right: ["actions"] },
+    },
+    getRowId: (originalRow) => String(originalRow.itemCode),
+    shallow: false,
+    clearOnDefault: true,
+  })
+
+  return (
+    <>
+      <DataTable
+        table={table}
+      >
+        <DataTableAdvancedToolbar
+          table={table}
+          filterFields={advancedFilterFields}
+          shallow={false}
+        >
+          <VendorsTableToolbarActions table={table} vendorId={vendorId} />
+        </DataTableAdvancedToolbar>
+      </DataTable>
+    </>
+  )
+}
\ No newline at end of file
diff --git a/lib/vendors/repository.ts b/lib/vendors/repository.ts
new file mode 100644
index 00000000..ff195932
--- /dev/null
+++ b/lib/vendors/repository.ts
@@ -0,0 +1,282 @@
+// src/lib/vendors/repository.ts
+
+import { and, eq, inArray, count, gt, AnyColumn, SQLWrapper, SQL} from "drizzle-orm";
+import { PgTransaction } from "drizzle-orm/pg-core";
+import { VendorContact, vendorContacts, vendorItemsView, vendorPossibleItems, vendors, type Vendor } from "@/db/schema/vendors";
+import db from '@/db/db';
+import { items } from "@/db/schema/items";
+import { rfqs,rfqItems, rfqEvaluations, vendorResponses } from "@/db/schema/rfq";
+import { sql } from "drizzle-orm";
+
+interface SelectVendorsOptions {
+  where?: any;
+  orderBy?: any[];
+  offset?: number;
+  limit?: number;
+}
+export declare function asc(column: AnyColumn | SQLWrapper): SQL;
+export declare function desc(column: AnyColumn | SQLWrapper): SQL;
+export type NewVendorContact = typeof vendorContacts.$inferInsert
+export type NewVendorItem = typeof vendorPossibleItems.$inferInsert
+
+/**
+ * 1) SELECT (목록 조회)
+ */
+export async function selectVendors(
+    tx: PgTransaction<any, any, any>,
+  { where, orderBy, offset, limit }: SelectVendorsOptions
+) {
+  return tx
+    .select()
+    .from(vendors)
+    .where(where ?? undefined)
+    .orderBy(...(orderBy ?? []))
+    .offset(offset ?? 0)
+    .limit(limit ?? 20);
+}
+
+/**
+ * 2) COUNT
+ */
+export async function countVendors(
+    tx: PgTransaction<any, any, any>,
+    where?: any
+  ) {
+    const res = await tx.select({ count: count() }).from(vendors).where(where);
+    return res[0]?.count ?? 0;
+  }
+  
+
+/**
+ * 3) INSERT (단일 벤더 생성)
+ *    - id/createdAt/updatedAt은 DB default 사용
+ *    - 반환값은 "생성된 레코드" 배열 ([newVendor])
+ */
+export async function insertVendor(
+  tx: PgTransaction<any, any, any>,
+  data: Omit<Vendor, "id" | "createdAt" | "updatedAt">
+) {
+  return tx.insert(vendors).values(data).returning();
+}
+
+/**
+ * 4) UPDATE (단일 벤더)
+ */
+export async function updateVendor(
+  tx: PgTransaction<any, any, any>,
+  id: string,
+  data: Partial<Vendor>
+) {
+  return tx
+    .update(vendors)
+    .set(data)
+    .where(eq(vendors.id, Number(id)))
+    .returning();
+}
+
+/**
+ * 5) UPDATE (복수 벤더)
+ *    - 여러 개의 id를 받아 일괄 업데이트
+ */
+export async function updateVendors(
+  tx: PgTransaction<any, any, any>,
+  ids: string[],
+  data: Partial<Vendor>
+) {
+  const numericIds = ids.map((i) => Number(i));
+  return tx
+    .update(vendors)
+    .set(data)
+    .where(inArray(vendors.id, numericIds))
+    .returning();
+}
+
+/** status 기준 groupBy */
+export async function groupByStatus(
+    tx: PgTransaction<any, any, any>,
+) {
+  return tx
+    .select({
+      status: vendors.status,
+      count: count(),
+    })
+    .from(vendors)
+    .groupBy(vendors.status)
+    .having(gt(count(), 0));
+}
+
+
+// ID로 사용자 조회
+export const getVendorById = async (id: number): Promise<Vendor | null> => {
+  const vendorsRes = await db.select().from(vendors).where(eq(vendors.id, id)).execute();
+  if (vendorsRes.length === 0) return null;
+
+  const vendor = vendorsRes[0];
+  return vendor
+};
+
+export const getVendorContactsById = async (id: number): Promise<VendorContact | null> => {
+  const contactsRes = await db.select().from(vendorContacts).where(eq(vendorContacts.vendorId, id)).execute();
+  if (contactsRes.length === 0) return null;
+
+  const contact = contactsRes[0];
+  return contact
+};
+
+export async function selectVendorContacts(
+  tx: PgTransaction<any, any, any>,
+  params: {
+    where?: any; // drizzle-orm의 조건식 (and, eq...) 등
+    orderBy?: (ReturnType<typeof asc> | ReturnType<typeof desc>)[];
+    offset?: number;
+    limit?: number;
+  }
+) {
+  const { where, orderBy, offset = 0, limit = 10 } = params;
+
+  return tx
+    .select()
+    .from(vendorContacts)
+    .where(where)
+    .orderBy(...(orderBy ?? []))
+    .offset(offset)
+    .limit(limit);
+}
+
+export async function countVendorContacts(
+  tx: PgTransaction<any, any, any>,
+  where?: any
+) {
+  const res = await tx.select({ count: count() }).from(vendorContacts).where(where);
+  return res[0]?.count ?? 0;
+}
+
+export async function insertVendorContact(
+  tx: PgTransaction<any, any, any>,
+  data: NewVendorContact // DB와 동일한 insert 가능한 타입
+) {
+  // returning() 사용 시 배열로 돌아오므로 [0]만 리턴
+  return tx
+    .insert(vendorContacts)
+    .values(data)
+    .returning({ id: vendorContacts.id, createdAt: vendorContacts.createdAt });
+}
+
+
+export async function selectVendorItems(
+  tx: PgTransaction<any, any, any>,
+  params: {
+    where?: any; // drizzle-orm의 조건식 (and, eq...) 등
+    orderBy?: (ReturnType<typeof asc> | ReturnType<typeof desc>)[];
+    offset?: number;
+    limit?: number;
+  }
+) {
+  const { where, orderBy, offset = 0, limit = 10 } = params;
+
+  return tx
+  .select({
+    // vendor_possible_items cols
+    vendorItemId: vendorItemsView.vendorItemId,
+    vendorId: vendorItemsView.vendorId,
+    itemCode: vendorItemsView.itemCode,
+    createdAt: vendorItemsView.createdAt,
+    updatedAt: vendorItemsView.updatedAt,
+    itemName: vendorItemsView.itemName,         
+    description: vendorItemsView.description,  
+  })
+  .from(vendorItemsView)
+  .where(where ?? undefined)
+  .orderBy(...(orderBy ?? []))
+  .offset(offset)
+  .limit(limit);
+}
+
+export async function countVendorItems(
+  tx: PgTransaction<any, any, any>,
+  where?: any
+) {
+  const res = await tx.select({ count: count() }).from(vendorItemsView).where(where);
+  return res[0]?.count ?? 0;
+}
+
+export async function insertVendorItem(
+  tx: PgTransaction<any, any, any>,
+  data: NewVendorItem // DB와 동일한 insert 가능한 타입
+) {
+  // returning() 사용 시 배열로 돌아오므로 [0]만 리턴
+  return tx
+    .insert(vendorPossibleItems)
+    .values(data)
+    .returning({ id: vendorPossibleItems.id, createdAt: vendorPossibleItems.createdAt });
+}
+
+export async function selectRfqHistory(
+  tx: PgTransaction<any, any, any>,
+  { where, orderBy, offset, limit }: SelectVendorsOptions
+) {
+  return tx
+      .select({
+          // RFQ 기본 정보
+          id: rfqs.id,
+          rfqCode: rfqs.rfqCode,
+
+          description: rfqs.description,
+          dueDate: rfqs.dueDate,
+          status: rfqs.status,
+          createdAt: rfqs.createdAt,
+          
+   
+          // Item 정보 (집계)
+          itemCount: sql<number>`count(distinct ${rfqItems.id})::integer`,
+          
+          // 평가 정보
+          tbeResult: sql<string>`
+              (select result from ${rfqEvaluations} 
+              where rfq_id = ${rfqs.id} 
+              and vendor_id = ${vendorResponses.vendorId} 
+              and eval_type = 'TBE' 
+              limit 1)`,
+          cbeResult: sql<string>`
+              (select result from ${rfqEvaluations} 
+              where rfq_id = ${rfqs.id} 
+              and vendor_id = ${vendorResponses.vendorId} 
+              and eval_type = 'CBE' 
+              limit 1)`
+      })
+      .from(rfqs)
+      .innerJoin(vendorResponses, eq(rfqs.id, vendorResponses.rfqId))
+
+      .leftJoin(rfqItems, eq(rfqs.id, rfqItems.rfqId))
+      .where(where ?? undefined)
+      .groupBy(
+          rfqs.id,
+          rfqs.rfqCode,
+      
+          rfqs.description,
+          rfqs.dueDate,
+          rfqs.status,
+          rfqs.createdAt,
+        
+          vendorResponses.vendorId,
+     
+      )
+      .orderBy(...(orderBy ?? []))
+      .offset(offset ?? 0)
+      .limit(limit ?? 20);
+}
+
+export async function countRfqHistory(
+  tx: PgTransaction<any, any, any>,
+  where?: any
+) {
+  const [{ count }] = await tx
+      .select({
+          count: sql<number>`count(distinct ${rfqs.id})::integer`,
+      })
+      .from(rfqs)
+      .innerJoin(vendorResponses, eq(rfqs.id, vendorResponses.rfqId))
+      .where(where ?? undefined);
+
+  return count;
+}
diff --git a/lib/vendors/rfq-history-table/feature-flags-provider.tsx b/lib/vendors/rfq-history-table/feature-flags-provider.tsx
new file mode 100644
index 00000000..81131894
--- /dev/null
+++ b/lib/vendors/rfq-history-table/feature-flags-provider.tsx
@@ -0,0 +1,108 @@
+"use client"
+
+import * as React from "react"
+import { useQueryState } from "nuqs"
+
+import { dataTableConfig, type DataTableConfig } from "@/config/data-table"
+import { cn } from "@/lib/utils"
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+
+type FeatureFlagValue = DataTableConfig["featureFlags"][number]["value"]
+
+interface FeatureFlagsContextProps {
+  featureFlags: FeatureFlagValue[]
+  setFeatureFlags: (value: FeatureFlagValue[]) => void
+}
+
+const FeatureFlagsContext = React.createContext<FeatureFlagsContextProps>({
+  featureFlags: [],
+  setFeatureFlags: () => {},
+})
+
+export function useFeatureFlags() {
+  const context = React.useContext(FeatureFlagsContext)
+  if (!context) {
+    throw new Error(
+      "useFeatureFlags must be used within a FeatureFlagsProvider"
+    )
+  }
+  return context
+}
+
+interface FeatureFlagsProviderProps {
+  children: React.ReactNode
+}
+
+export function FeatureFlagsProvider({ children }: FeatureFlagsProviderProps) {
+  const [featureFlags, setFeatureFlags] = useQueryState<FeatureFlagValue[]>(
+    "flags",
+    {
+      defaultValue: [],
+      parse: (value) => value.split(",") as FeatureFlagValue[],
+      serialize: (value) => value.join(","),
+      eq: (a, b) =>
+        a.length === b.length && a.every((value, index) => value === b[index]),
+      clearOnDefault: true,
+      shallow: false,
+    }
+  )
+
+  return (
+    <FeatureFlagsContext.Provider
+      value={{
+        featureFlags,
+        setFeatureFlags: (value) => void setFeatureFlags(value),
+      }}
+    >
+      <div className="w-full overflow-x-auto">
+        <ToggleGroup
+          type="multiple"
+          variant="outline"
+          size="sm"
+          value={featureFlags}
+          onValueChange={(value: FeatureFlagValue[]) => setFeatureFlags(value)}
+          className="w-fit gap-0"
+        >
+          {dataTableConfig.featureFlags.map((flag, index) => (
+            <Tooltip key={flag.value}>
+              <ToggleGroupItem
+                value={flag.value}
+                className={cn(
+                  "gap-2 whitespace-nowrap rounded-none px-3 text-xs data-[state=on]:bg-accent/70 data-[state=on]:hover:bg-accent/90",
+                  {
+                    "rounded-l-sm border-r-0": index === 0,
+                    "rounded-r-sm":
+                      index === dataTableConfig.featureFlags.length - 1,
+                  }
+                )}
+                asChild
+              >
+                <TooltipTrigger>
+                  <flag.icon className="size-3.5 shrink-0" aria-hidden="true" />
+                  {flag.label}
+                </TooltipTrigger>
+              </ToggleGroupItem>
+              <TooltipContent
+                align="start"
+                side="bottom"
+                sideOffset={6}
+                className="flex max-w-60 flex-col space-y-1.5 border bg-background py-2 font-semibold text-foreground"
+              >
+                <div>{flag.tooltipTitle}</div>
+                <div className="text-xs text-muted-foreground">
+                  {flag.tooltipDescription}
+                </div>
+              </TooltipContent>
+            </Tooltip>
+          ))}
+        </ToggleGroup>
+      </div>
+      {children}
+    </FeatureFlagsContext.Provider>
+  )
+}
diff --git a/lib/vendors/rfq-history-table/rfq-history-table-columns.tsx b/lib/vendors/rfq-history-table/rfq-history-table-columns.tsx
new file mode 100644
index 00000000..7e22e96a
--- /dev/null
+++ b/lib/vendors/rfq-history-table/rfq-history-table-columns.tsx
@@ -0,0 +1,223 @@
+"use client"

+

+import * as React from "react"

+import { type DataTableRowAction } from "@/types/table"

+import { type ColumnDef } from "@tanstack/react-table"

+import { Ellipsis } from "lucide-react"

+import { toast } from "sonner"

+

+import { getErrorMessage } from "@/lib/handle-error"

+import { formatDate } from "@/lib/utils"

+import { Badge } from "@/components/ui/badge"

+import { Button } from "@/components/ui/button"

+import { Checkbox } from "@/components/ui/checkbox"

+import {

+  DropdownMenu,

+  DropdownMenuContent,

+  DropdownMenuItem,

+  DropdownMenuRadioGroup,

+  DropdownMenuRadioItem,

+  DropdownMenuSeparator,

+  DropdownMenuShortcut,

+  DropdownMenuSub,

+  DropdownMenuSubContent,

+  DropdownMenuSubTrigger,

+  DropdownMenuTrigger,

+} from "@/components/ui/dropdown-menu"

+import { DataTableColumnHeader } from "@/components/data-table/data-table-column-header"

+

+import { VendorItem,  vendors } from "@/db/schema/vendors"

+import { modifyVendor } from "../service"

+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"

+import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header"

+import { getRFQStatusIcon } from "@/lib/tasks/utils"

+import { rfqHistoryColumnsConfig } from "@/config/rfqHistoryColumnsConfig"

+

+export interface RfqHistoryRow {

+  id: number;

+  rfqCode: string | null;

+  projectCode: string | null;

+  projectName: string | null;

+  description: string | null;

+  dueDate: Date;

+  status: "DRAFT" | "PUBLISHED" | "EVALUATION" | "AWARDED";

+  vendorStatus: string;

+  totalAmount: number | null;

+  currency: string | null;

+  leadTime: string | null;

+  itemCount: number;

+  tbeResult: string | null;

+  cbeResult: string | null;

+  createdAt: Date;

+  items: {

+    rfqId: number;

+    id: number;

+    itemCode: string;

+    description: string | null;

+    quantity: number | null;

+    uom: string | null;

+  }[];

+}

+

+interface GetColumnsProps {

+  setRowAction: React.Dispatch<React.SetStateAction<DataTableRowAction<RfqHistoryRow> | null>>;

+  openItemsModal: (rfqId: number) => void;

+}

+

+/**

+ * tanstack table 컬럼 정의 (중첩 헤더 버전)

+ */

+export function getColumns({ setRowAction, openItemsModal }: GetColumnsProps): ColumnDef<RfqHistoryRow>[] {

+  // ----------------------------------------------------------------

+  // 1) select 컬럼 (체크박스)

+  // ----------------------------------------------------------------

+  const selectColumn: ColumnDef<RfqHistoryRow> = {

+    id: "select",

+    header: ({ table }) => (

+      <Checkbox

+        checked={

+          table.getIsAllPageRowsSelected() ||

+          (table.getIsSomePageRowsSelected() && "indeterminate")

+        }

+        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}

+        aria-label="Select all"

+        className="translate-y-0.5"

+      />

+    ),

+    cell: ({ row }) => (

+      <Checkbox

+        checked={row.getIsSelected()}

+        onCheckedChange={(value) => row.toggleSelected(!!value)}

+        aria-label="Select row"

+        className="translate-y-0.5"

+      />

+    ),

+    size: 40,

+    enableSorting: false,

+    enableHiding: false,

+  }

+

+  // ----------------------------------------------------------------

+  // 2) actions 컬럼 (Dropdown 메뉴)

+  // ----------------------------------------------------------------

+  const actionsColumn: ColumnDef<RfqHistoryRow> = {

+    id: "actions",

+    enableHiding: false,

+    cell: function Cell({ row }) {

+      return (

+        <DropdownMenu>

+          <DropdownMenuTrigger asChild>

+            <Button

+              aria-label="Open menu"

+              variant="ghost"

+              className="flex size-8 p-0 data-[state=open]:bg-muted"

+            >

+              <Ellipsis className="size-4" aria-hidden="true" />

+            </Button>

+          </DropdownMenuTrigger>

+          <DropdownMenuContent align="end" className="w-40">

+            <DropdownMenuItem

+              onSelect={() => setRowAction({ row, type: "update" })}

+            >

+              View Details

+            </DropdownMenuItem>

+          </DropdownMenuContent>

+        </DropdownMenu>

+      )

+    },

+    size: 40,

+  }

+

+  // ----------------------------------------------------------------

+  // 3) 일반 컬럼들

+  // ----------------------------------------------------------------

+  const basicColumns: ColumnDef<RfqHistoryRow>[] = rfqHistoryColumnsConfig.map((cfg) => {

+    const column: ColumnDef<RfqHistoryRow> = {

+      accessorKey: cfg.id,

+      header: ({ column }) => (

+        <DataTableColumnHeaderSimple column={column} title={cfg.label} />

+      ),

+      size: cfg.size,

+    }

+

+    if (cfg.id === "description") {

+      column.cell = ({ row }) => {

+        const description = row.original.description

+        if (!description) return null

+        return (

+          <Tooltip>

+            <TooltipTrigger asChild>

+              <div className="break-words whitespace-normal line-clamp-2">

+                {description}

+              </div>

+            </TooltipTrigger>

+            <TooltipContent side="bottom" className="max-w-[400px] whitespace-pre-wrap break-words">

+              {description}

+            </TooltipContent>

+          </Tooltip>

+        )

+      }

+    }

+

+    if (cfg.id === "status") {

+      column.cell = ({ row }) => {

+        const statusVal = row.original.status

+        if (!statusVal) return null

+        const Icon = getRFQStatusIcon(statusVal)

+        return (

+          <div className="flex items-center">

+            <Icon className="mr-2 size-4 text-muted-foreground" aria-hidden="true" />

+            <span className="capitalize">{statusVal}</span>

+          </div>

+        )

+      }

+    }

+

+    if (cfg.id === "totalAmount") {

+      column.cell = ({ row }) => {

+        const amount = row.original.totalAmount

+        const currency = row.original.currency

+        if (!amount || !currency) return null

+        return (

+          <div className="whitespace-nowrap">

+            {`${currency} ${amount.toLocaleString()}`}

+          </div>

+        )

+      }

+    }

+

+    if (cfg.id === "dueDate" || cfg.id === "createdAt") {

+      column.cell = ({ row }) => (

+        <div className="whitespace-nowrap">

+          {formatDate(row.getValue(cfg.id))}

+        </div>

+      )

+    }

+

+    return column

+  })

+

+  const itemsColumn: ColumnDef<RfqHistoryRow> = {

+    id: "items",

+    header: "Items",

+    cell: ({ row }) => {

+      const rfq = row.original;

+      const count = rfq.itemCount || 0;

+      return (

+        <Button variant="ghost" onClick={() => openItemsModal(rfq.id)}>

+          {count === 0 ? "No Items" : `${count} Items`}

+        </Button>

+      )

+    },

+  }

+

+  // ----------------------------------------------------------------

+  // 4) 최종 컬럼 배열

+  // ----------------------------------------------------------------

+  return [

+    selectColumn,

+    ...basicColumns,

+    itemsColumn,

+    actionsColumn,

+  ]

+}
\ No newline at end of file
diff --git a/lib/vendors/rfq-history-table/rfq-history-table-toolbar-actions.tsx b/lib/vendors/rfq-history-table/rfq-history-table-toolbar-actions.tsx
new file mode 100644
index 00000000..46eaa6a6
--- /dev/null
+++ b/lib/vendors/rfq-history-table/rfq-history-table-toolbar-actions.tsx
@@ -0,0 +1,136 @@
+"use client"

+

+import * as React from "react"

+import { type Table } from "@tanstack/react-table"

+import { Download, Upload } from "lucide-react"

+import { toast } from "sonner"

+

+import { exportTableToExcel } from "@/lib/export"

+import { Button } from "@/components/ui/button"

+import { DataTableViewOptions } from "@/components/data-table/data-table-view-options"

+

+

+// 만약 서버 액션이나 API 라우트를 이용해 업로드 처리한다면 import

+import { importTasksExcel } from "@/lib/tasks/service" // 예시

+import {   VendorItem } from "@/db/schema/vendors"

+// import { AddItemDialog } from "./add-item-dialog"

+

+interface RfqHistoryRow {

+  id: number;

+  rfqCode: string | null;

+  projectCode: string | null;

+  projectName: string | null;

+  description: string | null;

+  dueDate: Date;

+  status: "DRAFT" | "PUBLISHED" | "EVALUATION" | "AWARDED";

+  vendorStatus: string;

+  totalAmount: number | null;

+  currency: string | null;

+  leadTime: string | null;

+  itemCount: number;

+  tbeResult: string | null;

+  cbeResult: string | null;

+  createdAt: Date;

+  items: {

+    rfqId: number;

+    id: number;

+    itemCode: string;

+    description: string | null;

+    quantity: number | null;

+    uom: string | null;

+  }[];

+}

+

+interface RfqHistoryTableToolbarActionsProps {

+  table: Table<RfqHistoryRow>

+}

+

+export function RfqHistoryTableToolbarActions({

+  table,

+}: RfqHistoryTableToolbarActionsProps) {

+  // 파일 input을 숨기고, 버튼 클릭 시 참조해 클릭하는 방식

+  const fileInputRef = React.useRef<HTMLInputElement>(null)

+

+  // 파일이 선택되었을 때 처리

+  async function onFileChange(event: React.ChangeEvent<HTMLInputElement>) {

+    const file = event.target.files?.[0]

+    if (!file) return

+

+    // 파일 초기화 (동일 파일 재업로드 시에도 onChange가 트리거되도록)

+    event.target.value = ""

+

+    // 서버 액션 or API 호출

+    try {

+      // 예: 서버 액션 호출

+      const { errorFile, errorMessage } = await importTasksExcel(file)

+

+      if (errorMessage) {

+        toast.error(errorMessage)

+      }

+      if (errorFile) {

+        // 에러 엑셀을 다운로드

+        const url = URL.createObjectURL(errorFile)

+        const link = document.createElement("a")

+        link.href = url

+        link.download = "errors.xlsx"

+        link.click()

+        URL.revokeObjectURL(url)

+      } else {

+        // 성공

+        toast.success("Import success")

+        // 필요 시 revalidateTag("tasks") 등

+      }

+

+    } catch (err) {

+      toast.error("파일 업로드 중 오류가 발생했습니다.")

+      

+    }

+  }

+

+  // function handleImportClick() {

+  //   // 숨겨진 <input type="file" /> 요소를 클릭

+  //   fileInputRef.current?.click()

+  // }

+

+  return (

+    <div className="flex items-center gap-2">

+      <DataTableViewOptions table={table} />

+

+      {/* 조회만 하는 모듈 */}

+      {/* <AddItemDialog vendorId={vendorId}/> */}

+

+      {/** 3) Import 버튼 (파일 업로드) */}

+      {/* <Button variant="outline" size="sm" className="gap-2" onClick={handleImportClick}>

+        <Upload className="size-4" aria-hidden="true" />

+        <span className="hidden sm:inline">Import</span>

+      </Button> */}

+      {/*

+        실제로는 숨겨진 input과 연결:

+        - accept=".xlsx,.xls" 등으로 Excel 파일만 업로드 허용

+      */}

+      <input

+        ref={fileInputRef}

+        type="file"

+        accept=".xlsx,.xls"

+        className="hidden"

+        onChange={onFileChange}

+      />

+

+      {/** 4) Export 버튼 */}

+      <Button

+        variant="outline"

+        size="sm"

+        onClick={() =>

+          exportTableToExcel(table, {

+            filename: "rfq-history",

+            excludeColumns: ["select", "actions"],

+          })

+        }

+        className="gap-2"

+      >

+        <Download className="size-4" aria-hidden="true" />

+        <span className="hidden sm:inline">Export</span>

+      </Button>

+    </div>

+  )

+}
\ No newline at end of file
diff --git a/lib/vendors/rfq-history-table/rfq-history-table.tsx b/lib/vendors/rfq-history-table/rfq-history-table.tsx
new file mode 100644
index 00000000..71830303
--- /dev/null
+++ b/lib/vendors/rfq-history-table/rfq-history-table.tsx
@@ -0,0 +1,156 @@
+"use client"
+
+import * as React from "react"
+import type {
+  DataTableAdvancedFilterField,
+  DataTableFilterField,
+  DataTableRowAction,
+} from "@/types/table"
+
+import { toSentenceCase } from "@/lib/utils"
+import { useDataTable } from "@/hooks/use-data-table"
+import { DataTable } from "@/components/data-table/data-table"
+import { DataTableAdvancedToolbar } from "@/components/data-table/data-table-advanced-toolbar"
+import { getColumns } from "./rfq-history-table-columns"
+import { getRfqHistory } from "../service"
+import { RfqHistoryTableToolbarActions } from "./rfq-history-table-toolbar-actions"
+import { RfqItemsTableDialog } from "./rfq-items-table-dialog"
+import { getRFQStatusIcon } from "@/lib/tasks/utils"
+import { TooltipProvider } from "@/components/ui/tooltip"
+
+export interface RfqHistoryRow {
+  id: number;
+  rfqCode: string | null;
+  projectCode: string | null;
+  projectName: string | null;
+  description: string | null;
+  dueDate: Date;
+  status: "DRAFT" | "PUBLISHED" | "EVALUATION" | "AWARDED";
+  vendorStatus: string;
+  totalAmount: number | null;
+  currency: string | null;
+  leadTime: string | null;
+  itemCount: number;
+  tbeResult: string | null;
+  cbeResult: string | null;
+  createdAt: Date;
+  items: {
+    rfqId: number;
+    id: number;
+    itemCode: string;
+    description: string | null;
+    quantity: number | null;
+    uom: string | null;
+  }[];
+}
+
+interface RfqHistoryTableProps {
+  promises: Promise<
+    [
+      Awaited<ReturnType<typeof getRfqHistory>>,
+    ]
+  >
+}
+
+export function VendorRfqHistoryTable({ promises }: RfqHistoryTableProps) {
+  const [{ data, pageCount }] = React.use(promises)
+
+  const [rowAction, setRowAction] = React.useState<DataTableRowAction<RfqHistoryRow> | null>(null)
+
+  const [itemsModalOpen, setItemsModalOpen] = React.useState(false);
+  const [selectedRfq, setSelectedRfq] = React.useState<RfqHistoryRow | null>(null);
+
+  const openItemsModal = React.useCallback((rfqId: number) => {
+    const rfq = data.find(r => r.id === rfqId);
+    if (rfq) {
+      setSelectedRfq(rfq);
+      setItemsModalOpen(true);
+    }
+  }, [data]);
+
+  const columns = React.useMemo(() => getColumns({
+    setRowAction,
+    openItemsModal,
+  }), [setRowAction, openItemsModal]);
+
+  const filterFields: DataTableFilterField<RfqHistoryRow>[] = [
+    {
+      id: "rfqCode",
+      label: "RFQ Code",
+      placeholder: "Filter RFQ Code...",
+    },
+    {
+      id: "status",
+      label: "Status",
+      options: ["DRAFT", "PUBLISHED", "EVALUATION", "AWARDED"].map((status) => ({
+        label: toSentenceCase(status),
+        value: status,
+        icon: getRFQStatusIcon(status),
+      })),
+    },
+    {
+      id: "vendorStatus",
+      label: "Vendor Status",
+      placeholder: "Filter Vendor Status...",
+    }
+  ]
+
+  const advancedFilterFields: DataTableAdvancedFilterField<RfqHistoryRow>[] = [
+    { id: "rfqCode", label: "RFQ Code", type: "text" },
+    { id: "projectCode", label: "Project Code", type: "text" },
+    { id: "projectName", label: "Project Name", type: "text" },
+    { 
+      id: "status", 
+      label: "RFQ Status", 
+      type: "multi-select",
+      options: ["DRAFT", "PUBLISHED", "EVALUATION", "AWARDED"].map((status) => ({
+        label: toSentenceCase(status),
+        value: status,
+        icon: getRFQStatusIcon(status),
+      })),
+    },
+    { id: "vendorStatus", label: "Vendor Status", type: "text" },
+    { id: "dueDate", label: "Due Date", type: "date" },
+    { id: "createdAt", label: "Created At", type: "date" },
+  ]
+
+  const { table } = useDataTable({
+    data,
+    columns,
+    pageCount,
+    filterFields,
+    enablePinning: true,
+    enableAdvancedFilter: true,
+    initialState: {
+      sorting: [{ id: "createdAt", desc: true }],
+      columnPinning: { right: ["actions"] },
+    },
+    getRowId: (originalRow) => String(originalRow.id),
+    shallow: true,
+    clearOnDefault: true,
+  })
+
+  return (
+    <>
+      <TooltipProvider>
+        <DataTable
+          table={table}
+        >
+          <DataTableAdvancedToolbar
+            table={table}
+            filterFields={advancedFilterFields}
+            shallow={false}
+          >
+            <RfqHistoryTableToolbarActions table={table} />
+          </DataTableAdvancedToolbar>
+        </DataTable>
+
+        <RfqItemsTableDialog
+          open={itemsModalOpen}
+          onOpenChange={setItemsModalOpen}
+          items={selectedRfq?.items ?? []}
+        />
+      </TooltipProvider>
+    </>
+  )
+}
\ No newline at end of file
diff --git a/lib/vendors/rfq-history-table/rfq-items-table-dialog.tsx b/lib/vendors/rfq-history-table/rfq-items-table-dialog.tsx
new file mode 100644
index 00000000..49a5d890
--- /dev/null
+++ b/lib/vendors/rfq-history-table/rfq-items-table-dialog.tsx
@@ -0,0 +1,98 @@
+"use client"
+
+import * as React from "react"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+import { DataTable } from "@/components/data-table/data-table"
+import { useDataTable } from "@/hooks/use-data-table"
+import { type ColumnDef } from "@tanstack/react-table"
+import { DataTableColumnHeader } from "@/components/data-table/data-table-column-header"
+
+interface RfqItem {
+  id: number
+  itemCode: string
+  description: string | null
+  quantity: number | null
+  uom: string | null
+}
+
+interface RfqItemsTableDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  items: RfqItem[]
+}
+
+export function RfqItemsTableDialog({
+  open,
+  onOpenChange,
+  items,
+}: RfqItemsTableDialogProps) {
+  const columns = React.useMemo<ColumnDef<RfqItem>[]>(
+    () => [
+      {
+        accessorKey: "itemCode",
+        header: ({ column }) => (
+          <DataTableColumnHeader column={column} title="Item Code" />
+        ),
+      },
+      {
+        accessorKey: "description",
+        header: ({ column }) => (
+          <DataTableColumnHeader column={column} title="Description" />
+        ),
+        cell: ({ row }) => row.getValue("description") || "-",
+      },
+      {
+        accessorKey: "quantity",
+        header: ({ column }) => (
+          <DataTableColumnHeader column={column} title="Quantity" />
+        ),
+        cell: ({ row }) => {
+          const quantity = row.getValue("quantity") as number | null;
+          return (
+            <div className="text-center">
+              {quantity !== null ? quantity.toLocaleString() : "-"}
+            </div>
+          );
+        },
+      },
+      {
+        accessorKey: "uom",
+        header: ({ column }) => (
+          <DataTableColumnHeader column={column} title="UoM" />
+        ),
+        cell: ({ row }) => row.getValue("uom") || "-",
+      },
+    ],
+    []
+  )
+
+  const { table } = useDataTable({
+    data: items,
+    columns,
+    pageCount: 1,
+    enablePinning: false,
+    enableAdvancedFilter: false,
+  })
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-3xl">
+        <DialogHeader>
+          <DialogTitle>RFQ Items</DialogTitle>
+          <DialogDescription>
+            Items included in this RFQ
+          </DialogDescription>
+        </DialogHeader>
+        <div className="mt-4">
+          <DataTable table={table} />
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+} 
\ No newline at end of file
diff --git a/lib/vendors/service.ts b/lib/vendors/service.ts
new file mode 100644
index 00000000..2da16888
--- /dev/null
+++ b/lib/vendors/service.ts
@@ -0,0 +1,1345 @@
+"use server"; // Next.js 서버 액션에서 직접 import하려면 (선택)
+
+import { revalidateTag, unstable_noStore } from "next/cache";
+import db from "@/db/db";
+import { vendorAttachments, VendorContact, vendorContacts, vendorItemsView, vendorPossibleItems, vendors, type Vendor } from "@/db/schema/vendors";
+import logger from '@/lib/logger';
+
+import { filterColumns } from "@/lib/filter-columns";
+import { unstable_cache } from "@/lib/unstable-cache";
+import { getErrorMessage } from "@/lib/handle-error";
+
+import {
+  selectVendors,
+  countVendors,
+  insertVendor,
+  updateVendor,
+  updateVendors, groupByStatus,
+  getVendorById,
+  getVendorContactsById,
+  selectVendorContacts,
+  countVendorContacts,
+  insertVendorContact,
+  selectVendorItems,
+  countVendorItems,
+  insertVendorItem,
+  countRfqHistory,
+  selectRfqHistory
+} from "./repository";
+
+import type {
+  CreateVendorSchema,
+  UpdateVendorSchema,
+  GetVendorsSchema,
+  GetVendorContactsSchema,
+  CreateVendorContactSchema,
+  GetVendorItemsSchema,
+  CreateVendorItemSchema,
+  GetRfqHistorySchema,
+} from "./validations";
+
+import { asc, desc, ilike, inArray, and, or, gte, lte, eq, isNull } from "drizzle-orm";
+import { rfqItems, rfqs, vendorRfqView } from "@/db/schema/rfq";
+import path from "path";
+import fs from "fs/promises";
+import { randomUUID } from "crypto";
+import JSZip from 'jszip';
+import { promises as fsPromises } from 'fs';
+import { sendEmail } from "../mail/sendEmail";
+import { PgTransaction } from "drizzle-orm/pg-core";
+import { items } from "@/db/schema/items";
+import { id_ID } from "@faker-js/faker";
+import { users } from "@/db/schema/users";
+
+
+/* -----------------------------------------------------
+   1) 조회 관련 
+----------------------------------------------------- */
+
+/**
+ * 복잡한 조건으로 Vendor 목록을 조회 (+ pagination) 하고,
+ * 총 개수에 따라 pageCount를 계산해서 리턴.
+ * Next.js의 unstable_cache를 사용해 일정 시간 캐시.
+ */
+export async function getVendors(input: GetVendorsSchema) {
+  return unstable_cache(
+    async () => {
+      try {
+        const offset = (input.page - 1) * input.perPage;
+
+        // 1) 고급 필터
+        const advancedWhere = filterColumns({
+          table: vendors,
+          filters: input.filters,
+          joinOperator: input.joinOperator,
+        });
+
+        // 2) 글로벌 검색
+        let globalWhere;
+        if (input.search) {
+          const s = `%${input.search}%`;
+          globalWhere = or(
+            ilike(vendors.vendorName, s),
+            ilike(vendors.vendorCode, s),
+            ilike(vendors.email, s),
+            ilike(vendors.status, s)
+          );
+        }
+
+        // 최종 where 결합
+        const finalWhere = and(advancedWhere, globalWhere);
+
+        // 간단 검색 (advancedTable=false) 시 예시
+        const simpleWhere = and(
+          input.vendorName
+            ? ilike(vendors.vendorName, `%${input.vendorName}%`)
+            : undefined,
+          input.status ? ilike(vendors.status, input.status) : undefined,
+          input.country
+            ? ilike(vendors.country, `%${input.country}%`)
+            : undefined
+        );
+
+        // 실제 사용될 where
+        const where = finalWhere;
+
+        // 정렬
+        const orderBy =
+          input.sort.length > 0
+            ? input.sort.map((item) =>
+              item.desc ? desc(vendors[item.id]) : asc(vendors[item.id])
+            )
+            : [asc(vendors.createdAt)];
+
+        // 트랜잭션 내에서 데이터 조회
+        const { data, total } = await db.transaction(async (tx) => {
+          // 1) vendor 목록 조회
+          const vendorsData = await selectVendors(tx, {
+            where,
+            orderBy,
+            offset,
+            limit: input.perPage,
+          });
+
+          // 2) 각 vendor의 attachments 조회
+          const vendorsWithAttachments = await Promise.all(
+            vendorsData.map(async (vendor) => {
+              const attachments = await tx
+                .select({
+                  id: vendorAttachments.id,
+                  fileName: vendorAttachments.fileName,
+                  filePath: vendorAttachments.filePath,
+                })
+                .from(vendorAttachments)
+                .where(eq(vendorAttachments.vendorId, vendor.id));
+
+              return {
+                ...vendor,
+                hasAttachments: attachments.length > 0,
+                attachmentsList: attachments,
+              };
+            })
+          );
+
+          // 3) 전체 개수
+          const total = await countVendors(tx, where);
+          return { data: vendorsWithAttachments, total };
+        });
+
+        // 페이지 수
+        const pageCount = Math.ceil(total / input.perPage);
+
+        return { data, pageCount };
+      } catch (err) {
+        // 에러 발생 시
+        return { data: [], pageCount: 0 };
+      }
+    },
+    [JSON.stringify(input)], // 캐싱 키
+    {
+      revalidate: 3600,
+      tags: ["vendors"], // revalidateTag("vendors") 호출 시 무효화
+    }
+  )();
+}
+
+
+export async function getVendorStatusCounts() {
+  return unstable_cache(
+    async () => {
+      try {
+
+        const initial: Record<Vendor["status"], number> = {
+          ACTIVE: 0,
+          INACTIVE: 0,
+          BLACKLISTED: 0,
+          "PENDING_REVIEW": 0,
+          "IN_REVIEW": 0,
+          "REJECTED": 0,
+          "IN_PQ": 0,
+          "PQ_FAILED": 0,
+          "APPROVED": 0,
+          "PQ_SUBMITTED": 0
+        };
+
+
+        const result = await db.transaction(async (tx) => {
+          const rows = await groupByStatus(tx);
+          return rows.reduce<Record<Vendor["status"], number>>((acc, { status, count }) => {
+            acc[status] = count;
+            return acc;
+          }, initial);
+        });
+
+        return result;
+      } catch (err) {
+        return {} as Record<Vendor["status"], number>;
+      }
+    },
+    ["task-status-counts"], // 캐싱 키
+    {
+      revalidate: 3600,
+    }
+  )();
+}
+
+/* -----------------------------------------------------
+   2) 생성(Create) 
+----------------------------------------------------- */
+
+/**
+ * 신규 Vendor 생성
+ */
+
+async function storeVendorFiles(
+  tx: PgTransaction<any, any, any>,
+  vendorId: number,
+  files: File[],
+  attachmentType: string
+) {
+  const vendorDir = path.join(
+    process.cwd(),
+    "public",
+    "vendors",
+    String(vendorId)
+  )
+  await fs.mkdir(vendorDir, { recursive: true })
+
+  for (const file of files) {
+    // Convert file to buffer
+    const ab = await file.arrayBuffer()
+    const buffer = Buffer.from(ab)
+
+    // Generate a unique filename
+    const uniqueName = `${randomUUID()}-${file.name}`
+    const relativePath = path.join("vendors", String(vendorId), uniqueName)
+    const absolutePath = path.join(process.cwd(), "public", relativePath)
+
+    // Write to disk
+    await fs.writeFile(absolutePath, buffer)
+
+    // Insert attachment record
+    await tx.insert(vendorAttachments).values({
+      vendorId,
+      fileName: file.name,
+      filePath: "/" + relativePath.replace(/\\/g, "/"),
+      attachmentType, // "GENERAL", "CREDIT_RATING", "CASH_FLOW_RATING", ...
+    })
+  }
+}
+
+export type CreateVendorData = {
+  vendorName: string
+  vendorCode?: string
+  website?: string
+  taxId: string
+  address?: string
+  email: string
+  phone?: string
+
+  representativeName?: string
+  representativeBirth?: string
+  representativeEmail?: string
+  representativePhone?: string
+
+  creditAgency?: string
+  creditRating?: string
+  cashFlowRating?: string
+  corporateRegistrationNumber?: string
+
+  country?: string
+  status?: "PENDING_REVIEW" | "IN_REVIEW" | "IN_PQ" | "PQ_FAILED" | "APPROVED" | "ACTIVE" | "INACTIVE" | "BLACKLISTED" | "PQ_SUBMITTED"
+}
+
+export async function createVendor(params: {
+  vendorData: CreateVendorData
+  // 기존의 일반 첨부파일
+  files?: File[]
+  
+  // 신용평가 / 현금흐름 등급 첨부
+  creditRatingFiles?: File[]
+  cashFlowRatingFiles?: File[]
+  contacts: {
+    contactName: string
+    contactPosition?: string
+    contactEmail: string
+    contactPhone?: string
+    isPrimary?: boolean
+  }[]
+}) {
+  unstable_noStore() // Next.js 서버 액션 캐싱 방지
+  
+  try {
+    const { vendorData, files = [], creditRatingFiles = [], cashFlowRatingFiles = [], contacts } = params
+    
+    // 이메일 중복 검사 - 이미 users 테이블에 존재하는지 확인
+    const existingUser = await db
+      .select({ id: users.id })
+      .from(users)
+      .where(eq(users.email, vendorData.email))
+      .limit(1);
+    
+    // 이미 사용자가 존재하면 에러 반환
+    if (existingUser.length > 0) {
+      return { 
+        data: null, 
+        error: `이미 등록된 이메일입니다. 다른 이메일을 사용해주세요. (Email ${vendorData.email} already exists in the system)` 
+      };
+    }
+    
+    await db.transaction(async (tx) => {
+      // 1) Insert the vendor (확장 필드도 함께)
+      const [newVendor] = await insertVendor(tx, {
+        vendorName: vendorData.vendorName,
+        vendorCode: vendorData.vendorCode || null,
+        address: vendorData.address || null,
+        country: vendorData.country || null,
+        phone: vendorData.phone || null,
+        email: vendorData.email,
+        website: vendorData.website || null,
+        status: vendorData.status ?? "PENDING_REVIEW",
+        taxId: vendorData.taxId,
+        
+        // 대표자 정보
+        representativeName: vendorData.representativeName || null,
+        representativeBirth: vendorData.representativeBirth || null,
+        representativeEmail: vendorData.representativeEmail || null,
+        representativePhone: vendorData.representativePhone || null,
+        corporateRegistrationNumber: vendorData.corporateRegistrationNumber || null,
+        
+        // 신용/현금흐름
+        creditAgency: vendorData.creditAgency || null,
+        creditRating: vendorData.creditRating || null,
+        cashFlowRating: vendorData.cashFlowRating || null,
+      })
+      
+      // 2) If there are attached files, store them
+      // (2-1) 일반 첨부
+      if (files.length > 0) {
+        await storeVendorFiles(tx, newVendor.id, files, "GENERAL")
+      }
+      
+      // (2-2) 신용평가 파일
+      if (creditRatingFiles.length > 0) {
+        await storeVendorFiles(tx, newVendor.id, creditRatingFiles, "CREDIT_RATING")
+      }
+      
+      // (2-3) 현금흐름 파일
+      if (cashFlowRatingFiles.length > 0) {
+        await storeVendorFiles(tx, newVendor.id, cashFlowRatingFiles, "CASH_FLOW_RATING")
+      }
+      
+      for (const contact of contacts) {
+        await tx.insert(vendorContacts).values({
+          vendorId: newVendor.id,
+          contactName: contact.contactName,
+          contactPosition: contact.contactPosition || null,
+          contactEmail: contact.contactEmail,
+          contactPhone: contact.contactPhone || null,
+          isPrimary: contact.isPrimary ?? false,
+        })
+      }
+    })
+    
+    revalidateTag("vendors")
+    return { data: null, error: null }
+  } catch (error) {
+    return { data: null, error: getErrorMessage(error) }
+  }
+}
+/* -----------------------------------------------------
+   3) 업데이트 (단건/복수)
+----------------------------------------------------- */
+
+/** 단건 업데이트 */
+export async function modifyVendor(
+  input: UpdateVendorSchema & { id: string }
+) {
+  unstable_noStore();
+  try {
+    const updated = await db.transaction(async (tx) => {
+      // 특정 ID 벤더를 업데이트
+      const [res] = await updateVendor(tx, input.id, {
+        vendorName: input.vendorName,
+        vendorCode: input.vendorCode,
+        address: input.address,
+        country: input.country,
+        phone: input.phone,
+        email: input.email,
+        website: input.website,
+        status: input.status,
+      });
+      return res;
+    });
+
+    // 필요 시, status 변경 등에 따른 다른 캐시도 무효화
+    revalidateTag("vendors");
+    revalidateTag("rfq-vendors");
+
+    return { data: updated, error: null };
+  } catch (err) {
+    return { data: null, error: getErrorMessage(err) };
+  }
+}
+
+/** 복수 업데이트 */
+export async function modifyVendors(input: {
+  ids: string[];
+  status?: Vendor["status"];
+}) {
+  unstable_noStore();
+  try {
+    const data = await db.transaction(async (tx) => {
+      // 여러 벤더 일괄 업데이트
+      const [updated] = await updateVendors(tx, input.ids, {
+        // 예: 상태만 일괄 변경
+        status: input.status,
+      });
+      return updated;
+    });
+
+    revalidateTag("vendors");
+    if (data.status === input.status) {
+      revalidateTag("vendor-status-counts");
+    }
+    return { data: null, error: null };
+  } catch (err) {
+    return { data: null, error: getErrorMessage(err) };
+  }
+}
+
+export const findVendorById = async (id: number): Promise<Vendor | null> => {
+  try {
+    logger.info({ id }, 'Fetching user by ID');
+    const vendor = await getVendorById(id);
+    if (!vendor) {
+      logger.warn({ id }, 'User not found');
+    } else {
+      logger.debug({ vendor }, 'User fetched successfully');
+    }
+    return vendor;
+  } catch (error) {
+    logger.error({ error }, 'Error fetching user by ID');
+    throw new Error('Failed to fetch user');
+  }
+};
+
+
+export const findVendorContactsById = async (id: number): Promise<VendorContact | null> => {
+  try {
+    logger.info({ id }, 'Fetching user by ID');
+    const vendor = await getVendorContactsById(id);
+    if (!vendor) {
+      logger.warn({ id }, 'User not found');
+    } else {
+      logger.debug({ vendor }, 'User fetched successfully');
+    }
+    return vendor;
+  } catch (error) {
+    logger.error({ error }, 'Error fetching user by ID');
+    throw new Error('Failed to fetch user');
+  }
+};
+
+
+export async function getVendorContacts(input: GetVendorContactsSchema, id: number) {
+  return unstable_cache(
+    async () => {
+      try {
+        const offset = (input.page - 1) * input.perPage;
+
+        // const advancedTable = input.flags.includes("advancedTable");
+        const advancedTable = true;
+
+
+        // advancedTable 모드면 filterColumns()로 where 절 구성
+        const advancedWhere = filterColumns({
+          table: vendorContacts,
+          filters: input.filters,
+          joinOperator: input.joinOperator,
+        });
+
+
+        let globalWhere
+        if (input.search) {
+          const s = `%${input.search}%`
+          globalWhere = or(ilike(vendorContacts.contactName, s), ilike(vendorContacts.contactPosition, s)
+            , ilike(vendorContacts.contactEmail, s), ilike(vendorContacts.contactPhone, s)
+          )
+          // 필요시 여러 칼럼 OR조건 (status, priority, etc)
+        }
+
+        const vendorWhere = eq(vendorContacts.vendorId, id)
+
+        const finalWhere = and(
+          // advancedWhere or your existing conditions
+          advancedWhere,
+          globalWhere,
+          vendorWhere
+        )
+
+
+        // 아니면 ilike, inArray, gte 등으로 where 절 구성
+        const where = finalWhere
+
+        const orderBy =
+          input.sort.length > 0
+            ? input.sort.map((item) =>
+              item.desc ? desc(vendorContacts[item.id]) : asc(vendorContacts[item.id])
+            )
+            : [asc(vendorContacts.createdAt)];
+
+        // 트랜잭션 내부에서 Repository 호출
+        const { data, total } = await db.transaction(async (tx) => {
+          const data = await selectVendorContacts(tx, {
+            where,
+            orderBy,
+            offset,
+            limit: input.perPage,
+          });
+          const total = await countVendorContacts(tx, where);
+          return { data, total };
+        });
+
+
+
+        const pageCount = Math.ceil(total / input.perPage);
+
+
+        return { data, pageCount };
+      } catch (err) {
+        // 에러 발생 시 디폴트
+        return { data: [], pageCount: 0 };
+      }
+    },
+    [JSON.stringify(input), String(id)], // 캐싱 키
+    {
+      revalidate: 3600,
+      tags: [`vendor-contacts-${id}`], // revalidateTag("tasks") 호출 시 무효화
+    }
+  )();
+}
+
+export async function createVendorContact(input: CreateVendorContactSchema) {
+  unstable_noStore(); // Next.js 서버 액션 캐싱 방지
+  try {
+    await db.transaction(async (tx) => {
+      // DB Insert
+      const [newContact] = await insertVendorContact(tx, {
+        vendorId: input.vendorId,
+        contactName: input.contactName,
+        contactPosition: input.contactPosition || "",
+        contactEmail: input.contactEmail,
+        contactPhone: input.contactPhone || "",
+        isPrimary: input.isPrimary || false,
+      });
+      return newContact;
+    });
+
+    // 캐시 무효화 (벤더 연락처 목록 등)
+    revalidateTag(`vendor-contacts-${input.vendorId}`);
+
+    return { data: null, error: null };
+  } catch (err) {
+    return { data: null, error: getErrorMessage(err) };
+  }
+}
+
+
+///item
+
+export async function getVendorItems(input: GetVendorItemsSchema, id: number) {
+  const cachedFunction = unstable_cache(
+
+    async () => {
+      try {
+        const offset = (input.page - 1) * input.perPage;
+
+        // const advancedTable = input.flags.includes("advancedTable");
+        const advancedTable = true;
+
+        // advancedTable 모드면 filterColumns()로 where 절 구성
+        const advancedWhere = filterColumns({
+          table: vendorItemsView,
+          filters: input.filters,
+          joinOperator: input.joinOperator,
+        });
+
+
+        let globalWhere
+        if (input.search) {
+          const s = `%${input.search}%`
+          globalWhere = or(ilike(vendorItemsView.itemCode, s)
+            , ilike(vendorItemsView.description, s)
+          )
+          // 필요시 여러 칼럼 OR조건 (status, priority, etc)
+        }
+
+        const vendorWhere = eq(vendorItemsView.vendorId, id)
+
+        const finalWhere = and(
+          // advancedWhere or your existing conditions
+          advancedWhere,
+          globalWhere,
+          vendorWhere
+        )
+
+
+        // 아니면 ilike, inArray, gte 등으로 where 절 구성
+        const where = finalWhere
+
+        const orderBy =
+          input.sort.length > 0
+            ? input.sort.map((item) =>
+              item.desc ? desc(vendorItemsView[item.id]) : asc(vendorItemsView[item.id])
+            )
+            : [asc(vendorItemsView.createdAt)];
+
+        // 트랜잭션 내부에서 Repository 호출
+        const { data, total } = await db.transaction(async (tx) => {
+          const data = await selectVendorItems(tx, {
+            where,
+            orderBy,
+            offset,
+            limit: input.perPage,
+          });
+          const total = await countVendorItems(tx, where);
+          return { data, total };
+        });
+
+
+        const pageCount = Math.ceil(total / input.perPage);
+
+
+        console.log(data)
+
+        return { data, pageCount };
+      } catch (err) {
+        // 에러 발생 시 디폴트
+        return { data: [], pageCount: 0 };
+      }
+    },
+    [JSON.stringify(input), String(id)], // 캐싱 키
+    {
+      revalidate: 3600,
+      tags: [`vendor-items-${id}`], // revalidateTag("tasks") 호출 시 무효화
+    }
+  );
+  return cachedFunction();
+}
+
+export interface ItemDropdownOption {
+  itemCode: string;
+  itemName: string;
+  description: string | null;
+}
+
+/**
+ * Vendor Item 추가 시 사용할 아이템 목록 조회 (전체 목록 반환)
+ * 아이템 코드, 이름, 설명만 간소화해서 반환
+ */
+export async function getItemsForVendor(vendorId: number) {
+  return unstable_cache(
+    async () => {
+      try {
+        // 해당 vendorId가 이미 가지고 있는 itemCode 목록을 서브쿼리로 구함
+        // 그 아이템코드를 제외(notIn)하여 모든 items 테이블에서 조회
+        const itemsData = await db
+        .select({
+          itemCode: items.itemCode,
+          itemName: items.itemName,
+          description: items.description,
+        })
+        .from(items)
+        .leftJoin(
+          vendorPossibleItems,
+          eq(items.itemCode, vendorPossibleItems.itemCode)
+        )
+        // vendorPossibleItems.vendorId가 이 vendorId인 행이 없는(즉 아직 등록되지 않은) 아이템만
+        .where(
+          isNull(vendorPossibleItems.id) // 또는 isNull(vendorPossibleItems.itemCode)
+        )
+        .orderBy(asc(items.itemName))
+
+        return {
+          data: itemsData.map((item) => ({
+            itemCode: item.itemCode ?? "",     // null이라면 ""로 치환
+            itemName: item.itemName,
+            description: item.description ?? ""  // null이라면 ""로 치환
+          })),
+          error: null
+        }
+      } catch (err) {
+        console.error("Failed to fetch items for vendor dropdown:", err)
+        return {
+          data: [],
+          error: "아이템 목록을 불러오는데 실패했습니다.",
+        }
+      }
+    },
+    // 캐시 키를 vendorId 별로 달리 해야 한다.
+    ["items-for-vendor", String(vendorId)],
+    {
+      revalidate: 3600, // 1시간 캐싱
+      tags: ["items"],   // revalidateTag("items") 호출 시 무효화
+    }
+  )()
+}
+
+export async function createVendorItem(input: CreateVendorItemSchema) {
+  unstable_noStore(); // Next.js 서버 액션 캐싱 방지
+  try {
+    await db.transaction(async (tx) => {
+      // DB Insert
+      const [newContact] = await insertVendorItem(tx, {
+        vendorId: input.vendorId,
+        itemCode: input.itemCode,
+
+      });
+      return newContact;
+    });
+
+    // 캐시 무효화 (벤더 연락처 목록 등)
+    revalidateTag(`vendor-items-${input.vendorId}`);
+
+    return { data: null, error: null };
+  } catch (err) {
+    return { data: null, error: getErrorMessage(err) };
+  }
+}
+
+export async function getRfqHistory(input: GetRfqHistorySchema, vendorId: number) {
+  return unstable_cache(
+    async () => {
+      try {
+        logger.info({ vendorId, input }, "Starting getRfqHistory");
+
+        const offset = (input.page - 1) * input.perPage;
+
+        // 기본 where 조건 (vendorId)
+        const vendorWhere = eq(vendorRfqView.vendorId, vendorId);
+        logger.debug({ vendorWhere }, "Vendor where condition");
+
+        // 고급 필터링
+        const advancedWhere = filterColumns({
+          table: vendorRfqView,
+          filters: input.filters,
+          joinOperator: input.joinOperator,
+        });
+        logger.debug({ advancedWhere }, "Advanced where condition");
+
+        // 글로벌 검색
+        let globalWhere;
+        if (input.search) {
+          const s = `%${input.search}%`;
+          globalWhere = or(
+            ilike(vendorRfqView.rfqCode, s),
+            ilike(vendorRfqView.projectCode, s),
+            ilike(vendorRfqView.projectName, s)
+          );
+          logger.debug({ globalWhere, search: input.search }, "Global search condition");
+        }
+
+        const finalWhere = and(
+          advancedWhere,
+          globalWhere,
+          vendorWhere
+        );
+        logger.debug({ finalWhere }, "Final where condition");
+
+        // 정렬 조건
+        const orderBy =
+          input.sort.length > 0
+            ? input.sort.map((item) =>
+              item.desc ? desc(rfqs[item.id]) : asc(rfqs[item.id])
+            )
+            : [desc(rfqs.createdAt)];
+        logger.debug({ orderBy }, "Order by condition");
+
+        // 트랜잭션으로 데이터 조회
+        const { data, total } = await db.transaction(async (tx) => {
+          logger.debug("Starting transaction for RFQ history query");
+
+          const data = await selectRfqHistory(tx, {
+            where: finalWhere,
+            orderBy,
+            offset,
+            limit: input.perPage,
+          });
+          logger.debug({ dataLength: data.length }, "RFQ history data fetched");
+
+          // RFQ 아이템 정보 조회
+          const rfqIds = data.map(rfq => rfq.id);
+          const items = await tx
+            .select({
+              rfqId: rfqItems.rfqId,
+              id: rfqItems.id,
+              itemCode: rfqItems.itemCode,
+              description: rfqItems.description,
+              quantity: rfqItems.quantity,
+              uom: rfqItems.uom,
+            })
+            .from(rfqItems)
+            .where(inArray(rfqItems.rfqId, rfqIds));
+
+          // RFQ 데이터에 아이템 정보 추가
+          const dataWithItems = data.map(rfq => ({
+            ...rfq,
+            items: items.filter(item => item.rfqId === rfq.id),
+          }));
+
+          const total = await countRfqHistory(tx, finalWhere);
+          logger.debug({ total }, "RFQ history total count");
+
+          return { data: dataWithItems, total };
+        });
+
+        const pageCount = Math.ceil(total / input.perPage);
+        logger.info({
+          vendorId,
+          dataLength: data.length,
+          total,
+          pageCount
+        }, "RFQ history query completed");
+
+        return { data, pageCount };
+      } catch (err) {
+        logger.error({
+          err,
+          vendorId,
+          stack: err instanceof Error ? err.stack : undefined
+        }, 'Error fetching RFQ history');
+        return { data: [], pageCount: 0 };
+      }
+    },
+    [JSON.stringify({ input, vendorId })],
+    {
+      revalidate: 3600,
+      tags: ["rfq-history"],
+    }
+  )();
+}
+
+export async function checkJoinPortal(taxID: string) {
+  try {
+    // 이미 등록된 회사가 있는지 검색
+    const result = await db.select().from(vendors).where(eq(vendors.taxId, taxID)).limit(1)
+
+    if (result.length > 0) {
+      // 이미 가입되어 있음
+      // data에 예시로 vendorName이나 다른 정보를 담아 반환
+      return {
+        success: false,
+        data: result[0].vendorName ?? "Already joined",
+      }
+    }
+
+    // 미가입 → 가입 가능
+    return {
+      success: true,
+    }
+  } catch (err) {
+    console.error("checkJoinPortal error:", err)
+    // 서버 에러 시
+    return {
+      success: false,
+      data: "서버 에러가 발생했습니다.",
+    }
+  }
+}
+
+interface CreateCompanyInput {
+  vendorName: string
+  taxId: string
+  email: string
+  address: string
+  phone?: string
+  country?: string
+  // 필요한 필드 추가 가능 (vendorCode, website 등)
+}
+
+
+/**
+ * 벤더 첨부파일 다운로드를 위한 서버 액션
+ * @param vendorId 벤더 ID
+ * @param fileId 특정 파일 ID (단일 파일 다운로드시)
+ * @returns 다운로드할 수 있는 임시 URL
+ */
+export async function downloadVendorAttachments(vendorId: number, fileId?: number) {
+  try {
+    // 벤더 정보 조회
+    const vendor = await db.select()
+      .from(vendors)
+      .where(eq(vendors.id, vendorId))
+      .limit(1)
+      .then(rows => rows[0]);
+
+    if (!vendor) {
+      throw new Error(`벤더 정보를 찾을 수 없습니다. (ID: ${vendorId})`);
+    }
+
+    // 첨부파일 조회 (특정 파일 또는 모든 파일)
+    const attachments = fileId
+      ? await db.select()
+        .from(vendorAttachments)
+        .where(eq(vendorAttachments.id, fileId))
+      : await db.select()
+        .from(vendorAttachments)
+        .where(eq(vendorAttachments.vendorId, vendorId));
+
+    if (!attachments.length) {
+      throw new Error('다운로드할 첨부파일이 없습니다.');
+    }
+
+    // 업로드 기본 경로
+    const basePath = process.env.UPLOAD_DIR || path.join(process.cwd(), 'uploads');
+
+    // 단일 파일인 경우 직접 URL 반환
+    if (attachments.length === 1) {
+      const attachment = attachments[0];
+      const filePath = `/api/vendors/attachments/download?id=${attachment.id}`;
+      return { url: filePath, fileName: attachment.fileName };
+    }
+
+    // 다중 파일: 임시 ZIP 생성 후 URL 반환
+    // 임시 디렉토리 생성
+    const tempDir = path.join(process.cwd(), 'tmp');
+    await fsPromises.mkdir(tempDir, { recursive: true });
+
+    // 고유 ID로 임시 ZIP 파일명 생성
+    const tempId = randomUUID();
+    const zipFileName = `${vendor.vendorName || `vendor-${vendorId}`}-attachments-${tempId}.zip`;
+    const zipFilePath = path.join(tempDir, zipFileName);
+
+    // JSZip을 사용하여 ZIP 파일 생성
+    const zip = new JSZip();
+
+    // 파일 읽기 및 추가 작업을 병렬로 처리
+    await Promise.all(
+      attachments.map(async (attachment) => {
+        const filePath = path.join(basePath, attachment.filePath);
+
+        try {
+          // 파일 존재 확인 (fsPromises.access 사용)
+          try {
+            await fsPromises.access(filePath, fs.constants.F_OK);
+          } catch (e) {
+            console.warn(`파일이 존재하지 않습니다: ${filePath}`);
+            return; // 파일이 없으면 건너뜀
+          }
+
+          // 파일 읽기 (fsPromises.readFile 사용)
+          const fileData = await fsPromises.readFile(filePath);
+
+          // ZIP에 파일 추가
+          zip.file(attachment.fileName, fileData);
+        } catch (error) {
+          console.warn(`파일을 처리할 수 없습니다: ${filePath}`, error);
+          // 오류가 있더라도 계속 진행
+        }
+      })
+    );
+
+    // ZIP 생성 및 저장
+    const zipContent = await zip.generateAsync({ type: 'nodebuffer', compression: 'DEFLATE', compressionOptions: { level: 9 } });
+    await fsPromises.writeFile(zipFilePath, zipContent);
+
+    // 임시 ZIP 파일에 접근할 수 있는 URL 생성
+    const downloadUrl = `/api/vendors/attachments/download-temp?file=${encodeURIComponent(zipFileName)}`;
+
+    return {
+      url: downloadUrl,
+      fileName: `${vendor.vendorName || `vendor-${vendorId}`}-attachments.zip`
+    };
+  } catch (error) {
+    console.error('첨부파일 다운로드 서버 액션 오류:', error);
+    throw new Error('첨부파일 다운로드 준비 중 오류가 발생했습니다.');
+  }
+}
+
+/**
+ * 임시 ZIP 파일 정리를 위한 서버 액션
+ * @param fileName 정리할 파일명
+ */
+export async function cleanupTempFiles(fileName: string) {
+  'use server';
+
+  try {
+    const tempDir = path.join(process.cwd(), 'tmp');
+    const filePath = path.join(tempDir, fileName);
+
+    try {
+      // 파일 존재 확인
+      await fsPromises.access(filePath, fs.constants.F_OK);
+      // 파일 삭제
+      await fsPromises.unlink(filePath);
+    } catch {
+      // 파일이 없으면 무시
+    }
+
+    return { success: true };
+  } catch (error) {
+    console.error('임시 파일 정리 오류:', error);
+    return { success: false, error: '임시 파일 정리 중 오류가 발생했습니다.' };
+  }
+}
+
+
+interface ApproveVendorsInput {
+  ids: number[];
+}
+
+/**
+ * 선택된 벤더의 상태를 IN_REVIEW로 변경하고 이메일 알림을 발송하는 서버 액션
+ */
+export async function approveVendors(input: ApproveVendorsInput) {
+  unstable_noStore();
+  
+  try {
+    // 트랜잭션 내에서 벤더 상태 업데이트, 유저 생성 및 이메일 발송
+    const result = await db.transaction(async (tx) => {
+      // 1. 벤더 상태 업데이트
+      const [updated] = await tx
+        .update(vendors)
+        .set({
+          status: "IN_REVIEW",
+          updatedAt: new Date()
+        })
+        .where(inArray(vendors.id, input.ids))
+        .returning();
+      
+      // 2. 업데이트된 벤더 정보 조회
+      const updatedVendors = await tx
+        .select({
+          id: vendors.id,
+          vendorName: vendors.vendorName,
+          email: vendors.email,
+        })
+        .from(vendors)
+        .where(inArray(vendors.id, input.ids));
+      
+      // 3. 각 벤더에 대한 유저 계정 생성
+      await Promise.all(
+        updatedVendors.map(async (vendor) => {
+          if (!vendor.email) return; // 이메일이 없으면 스킵
+          
+          // 이미 존재하는 유저인지 확인
+          const existingUser = await tx
+            .select({ id: users.id })
+            .from(users)
+            .where(eq(users.email, vendor.email))
+            .limit(1);
+          
+          // 유저가 존재하지 않는 경우에만 생성
+          if (existingUser.length === 0) {
+            await tx.insert(users).values({
+              name: vendor.vendorName,
+              email: vendor.email,
+              companyId: vendor.id,
+              domain: "partners", // 기본값으로 이미 설정되어 있지만 명시적으로 지정
+            });
+          }
+        })
+      );
+      
+      // 4. 각 벤더에게 이메일 발송
+      await Promise.all(
+        updatedVendors.map(async (vendor) => {
+          if (!vendor.email) return; // 이메일이 없으면 스킵
+          
+          try {
+            const userLang = "en"; // 기본값, 필요시 벤더 언어 설정에서 가져오기
+            
+            const subject = 
+              "[eVCP] Admin Account Created";
+            
+            const loginUrl = "http://3.36.56.124:3000/en/login";
+            
+            await sendEmail({
+              to: vendor.email,
+              subject,
+              template: "admin-created", // 이메일 템플릿 이름
+              context: {
+                vendorName: vendor.vendorName,
+                loginUrl,
+                language: userLang,
+              },
+            });
+          } catch (emailError) {
+            console.error(`Failed to send email to vendor ${vendor.id}:`, emailError);
+            // 이메일 전송 실패는 전체 트랜잭션을 실패시키지 않음
+          }
+        })
+      );
+      
+      return updated;
+    });
+    
+    // 캐시 무효화
+    revalidateTag("vendors");
+    revalidateTag("vendor-status-counts");
+    revalidateTag("users"); // 유저 캐시도 무효화
+    
+    return { data: result, error: null };
+  } catch (err) {
+    console.error("Error approving vendors:", err);
+    return { data: null, error: getErrorMessage(err) };
+  }
+}
+export async function requestPQVendors(input: ApproveVendorsInput) {
+  unstable_noStore();
+
+  try {
+    // 트랜잭션 내에서 벤더 상태 업데이트 및 이메일 발송
+    const result = await db.transaction(async (tx) => {
+      // 1. 벤더 상태 업데이트
+      const [updated] = await tx
+        .update(vendors)
+        .set({
+          status: "IN_PQ",
+          updatedAt: new Date()
+        })
+        .where(inArray(vendors.id, input.ids))
+        .returning();
+
+      // 2. 업데이트된 벤더 정보 조회
+      const updatedVendors = await tx
+        .select({
+          id: vendors.id,
+          vendorName: vendors.vendorName,
+          email: vendors.email,
+        })
+        .from(vendors)
+        .where(inArray(vendors.id, input.ids));
+
+      // 3. 각 벤더에게 이메일 발송
+      await Promise.all(
+        updatedVendors.map(async (vendor) => {
+          if (!vendor.email) return; // 이메일이 없으면 스킵
+
+          try {
+            const userLang = "en"; // 기본값, 필요시 벤더 언어 설정에서 가져오기
+
+            const subject =
+              "[eVCP] You are invited to submit PQ";
+
+            const loginUrl = "http://3.36.56.124:3000/en/login";
+
+            await sendEmail({
+              to: vendor.email,
+              subject,
+              template: "pq", // 이메일 템플릿 이름
+              context: {
+                vendorName: vendor.vendorName,
+                loginUrl,
+                language: userLang,
+              },
+            });
+          } catch (emailError) {
+            console.error(`Failed to send email to vendor ${vendor.id}:`, emailError);
+            // 이메일 전송 실패는 전체 트랜잭션을 실패시키지 않음
+          }
+        })
+      );
+
+      return updated;
+    });
+
+    // 캐시 무효화
+    revalidateTag("vendors");
+    revalidateTag("vendor-status-counts");
+
+    return { data: result, error: null };
+  } catch (err) {
+    console.error("Error approving vendors:", err);
+    return { data: null, error: getErrorMessage(err) };
+  }
+}
+
+interface SendVendorsInput {
+  ids: number[];
+}
+
+/**
+ * APPROVED 상태인 벤더 정보를 기간계 시스템에 전송하고 벤더 코드를 업데이트하는 서버 액션
+ */
+export async function sendVendors(input: SendVendorsInput) {
+  unstable_noStore();
+
+  try {
+    // 트랜잭션 내에서 진행
+    const result = await db.transaction(async (tx) => {
+      // 1. 선택된 벤더 중 APPROVED 상태인 벤더만 필터링
+      const approvedVendors = await tx
+        .select()
+        .from(vendors)
+        .where(
+          and(
+            inArray(vendors.id, input.ids),
+            eq(vendors.status, "APPROVED")
+          )
+        );
+
+      if (!approvedVendors.length) {
+        throw new Error("No approved vendors found in the selection");
+      }
+
+      // 벤더별 처리 결과를 저장할 배열
+      const results = [];
+
+      // 2. 각 벤더에 대해 처리
+      for (const vendor of approvedVendors) {
+        // 2-1. 벤더 연락처 정보 조회
+        const contacts = await tx
+          .select()
+          .from(vendorContacts)
+          .where(eq(vendorContacts.vendorId, vendor.id));
+
+        // 2-2. 벤더 가능 아이템 조회
+        const possibleItems = await tx
+          .select()
+          .from(vendorPossibleItems)
+          .where(eq(vendorPossibleItems.vendorId, vendor.id));
+
+        // 2-3. 벤더 첨부파일 조회
+        const attachments = await tx
+          .select({
+            id: vendorAttachments.id,
+            fileName: vendorAttachments.fileName,
+            filePath: vendorAttachments.filePath,
+          })
+          .from(vendorAttachments)
+          .where(eq(vendorAttachments.vendorId, vendor.id));
+
+        // 2-4. 벤더 정보를 기간계 시스템에 전송 (NextJS API 라우트 사용)
+        const vendorData = {
+          id: vendor.id,
+          vendorName: vendor.vendorName,
+          taxId: vendor.taxId,
+          address: vendor.address || "",
+          country: vendor.country || "",
+          phone: vendor.phone || "",
+          email: vendor.email || "",
+          website: vendor.website || "",
+          contacts,
+          possibleItems,
+          attachments,
+        };
+
+        try {
+          // 내부 API 호출 (기간계 시스템 연동 API)
+          const erpResponse = await fetch(`/api/erp/vendors`, {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(vendorData),
+          });
+
+          if (!erpResponse.ok) {
+            const errorData = await erpResponse.json();
+            throw new Error(`ERP system error for vendor ${vendor.id}: ${errorData.message || erpResponse.statusText}`);
+          }
+
+          const responseData = await erpResponse.json();
+
+          if (!responseData.success || !responseData.vendorCode) {
+            throw new Error(`Invalid response from ERP system for vendor ${vendor.id}`);
+          }
+
+          // 2-5. 벤더 코드 및 상태 업데이트
+          const vendorCode = responseData.vendorCode;
+
+          const [updated] = await tx
+            .update(vendors)
+            .set({
+              vendorCode,
+              status: "ACTIVE", // 상태를 ACTIVE로 변경
+              updatedAt: new Date(),
+            })
+            .where(eq(vendors.id, vendor.id))
+            .returning();
+
+          // 2-6. 벤더에게 알림 이메일 발송
+          if (vendor.email) {
+            const userLang = "en"; // 기본값, 필요시 벤더 언어 설정에서 가져오기
+
+            const subject =
+              "[eVCP] Vendor Registration Completed";
+
+              const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || 'http://3.36.56.124:3000'
+
+            const portalUrl = `${baseUrl}/en/partners`;
+
+            await sendEmail({
+              to: vendor.email,
+              subject,
+              template: "vendor-active",
+              context: {
+                vendorName: vendor.vendorName,
+                vendorCode,
+                portalUrl,
+                language: userLang,
+              },
+            });
+          }
+
+          results.push({
+            id: vendor.id,
+            success: true,
+            vendorCode,
+            message: "Successfully sent to ERP system",
+          });
+        } catch (vendorError) {
+          // 개별 벤더 처리 오류 기록
+          results.push({
+            id: vendor.id,
+            success: false,
+            error: getErrorMessage(vendorError),
+          });
+        }
+      }
+
+      // 3. 처리 결과 반환
+      const successCount = results.filter(r => r.success).length;
+      const failCount = results.filter(r => !r.success).length;
+
+      return {
+        totalProcessed: results.length,
+        successCount,
+        failCount,
+        results,
+      };
+    });
+
+    // 캐시 무효화
+    revalidateTag("vendors");
+    revalidateTag("vendor-status-counts");
+
+    return { data: result, error: null };
+  } catch (err) {
+    console.error("Error sending vendors to ERP:", err);
+    return { data: null, error: getErrorMessage(err) };
+  }
+}
+
diff --git a/lib/vendors/table/approve-vendor-dialog.tsx b/lib/vendors/table/approve-vendor-dialog.tsx
new file mode 100644
index 00000000..253c2830
--- /dev/null
+++ b/lib/vendors/table/approve-vendor-dialog.tsx
@@ -0,0 +1,150 @@
+"use client"
+
+import * as React from "react"
+import { type Row } from "@tanstack/react-table"
+import { Loader, Check } from "lucide-react"
+import { toast } from "sonner"
+
+import { useMediaQuery } from "@/hooks/use-media-query"
+import { Button } from "@/components/ui/button"
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/components/ui/drawer"
+import { Vendor } from "@/db/schema/vendors"
+import { approveVendors } from "../service"
+
+interface ApprovalVendorDialogProps
+  extends React.ComponentPropsWithoutRef<typeof Dialog> {
+  vendors: Row<Vendor>["original"][]
+  showTrigger?: boolean
+  onSuccess?: () => void
+}
+
+export function ApproveVendorsDialog({
+  vendors,
+  showTrigger = true,
+  onSuccess,
+  ...props
+}: ApprovalVendorDialogProps) {
+  const [isApprovePending, startApproveTransition] = React.useTransition()
+  const isDesktop = useMediaQuery("(min-width: 640px)")
+
+  function onApprove() {
+    startApproveTransition(async () => {
+      const { error } = await approveVendors({
+        ids: vendors.map((vendor) => vendor.id),
+      })
+
+      if (error) {
+        toast.error(error)
+        return
+      }
+
+      props.onOpenChange?.(false)
+      toast.success("Vendors successfully approved for review")
+      onSuccess?.()
+    })
+  }
+
+  if (isDesktop) {
+    return (
+      <Dialog {...props}>
+        {showTrigger ? (
+          <DialogTrigger asChild>
+            <Button variant="outline" size="sm" className="gap-2">
+              <Check className="size-4" aria-hidden="true" />
+              Approve ({vendors.length})
+            </Button>
+          </DialogTrigger>
+        ) : null}
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Confirm Vendor Approval</DialogTitle>
+            <DialogDescription>
+              Are you sure you want to approve{" "}
+              <span className="font-medium">{vendors.length}</span>
+              {vendors.length === 1 ? " vendor" : " vendors"}? 
+              After approval, vendors will be notified and can login to submit PQ information.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter className="gap-2 sm:space-x-0">
+            <DialogClose asChild>
+              <Button variant="outline">Cancel</Button>
+            </DialogClose>
+            <Button
+              aria-label="Approve selected vendors"
+              variant="default"
+              onClick={onApprove}
+              disabled={isApprovePending}
+            >
+              {isApprovePending && (
+                <Loader
+                  className="mr-2 size-4 animate-spin"
+                  aria-hidden="true"
+                />
+              )}
+              Approve
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    )
+  }
+
+  return (
+    <Drawer {...props}>
+      {showTrigger ? (
+        <DrawerTrigger asChild>
+          <Button variant="outline" size="sm" className="gap-2">
+            <Check className="size-4" aria-hidden="true" />
+            Approve ({vendors.length})
+          </Button>
+        </DrawerTrigger>
+      ) : null}
+      <DrawerContent>
+        <DrawerHeader>
+          <DrawerTitle>Confirm Vendor Approval</DrawerTitle>
+          <DrawerDescription>
+            Are you sure you want to approve{" "}
+            <span className="font-medium">{vendors.length}</span>
+            {vendors.length === 1 ? " vendor" : " vendors"}? 
+            After approval, vendors will be notified and can login to submit PQ information.
+          </DrawerDescription>
+        </DrawerHeader>
+        <DrawerFooter className="gap-2 sm:space-x-0">
+          <DrawerClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </DrawerClose>
+          <Button
+            aria-label="Approve selected vendors"
+            variant="default"
+            onClick={onApprove}
+            disabled={isApprovePending}
+          >
+            {isApprovePending && (
+              <Loader className="mr-2 size-4 animate-spin" aria-hidden="true" />
+            )}
+            Approve
+          </Button>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  )
+}
\ No newline at end of file
diff --git a/lib/vendors/table/attachmentButton.tsx b/lib/vendors/table/attachmentButton.tsx
new file mode 100644
index 00000000..a82f59e1
--- /dev/null
+++ b/lib/vendors/table/attachmentButton.tsx
@@ -0,0 +1,69 @@
+'use client';
+
+import React from 'react';
+import { Button } from '@/components/ui/button';
+import { PaperclipIcon } from 'lucide-react';
+import { Badge } from '@/components/ui/badge';
+import { toast } from 'sonner';
+import { type VendorAttach } from '@/db/schema/vendors';
+import { downloadVendorAttachments } from '../service';
+
+interface AttachmentsButtonProps {
+  vendorId: number;
+  hasAttachments: boolean;
+  attachmentsList?: VendorAttach[];
+}
+
+export function AttachmentsButton({ vendorId, hasAttachments, attachmentsList = [] }: AttachmentsButtonProps) {
+  if (!hasAttachments) return null;
+  
+  const handleDownload = async () => {
+    try {
+      toast.loading('첨부파일을 준비하는 중...');
+      
+      // 서버 액션 호출
+      const result = await downloadVendorAttachments(vendorId);
+      
+      // 로딩 토스트 닫기
+      toast.dismiss();
+      
+      if (!result || !result.url) {
+        toast.error('다운로드 준비 중 오류가 발생했습니다.');
+        return;
+      }
+      
+      // 파일 다운로드 트리거
+      toast.success('첨부파일 다운로드가 시작되었습니다.');
+      
+      // 다운로드 링크 열기
+      const a = document.createElement('a');
+      a.href = result.url;
+      a.download = result.fileName || '첨부파일.zip';
+      a.style.display = 'none';
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      
+    } catch (error) {
+      toast.dismiss();
+      toast.error('첨부파일 다운로드에 실패했습니다.');
+      console.error('첨부파일 다운로드 오류:', error);
+    }
+  };
+  
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      onClick={handleDownload}
+      title={`${attachmentsList.length}개 파일 다운로드`}
+    >
+      <PaperclipIcon className="h-4 w-4" />
+      {attachmentsList.length > 1 && (
+        <Badge variant="outline" className="ml-1 h-5 min-w-5 px-1">
+          {attachmentsList.length}
+        </Badge>
+      )}
+    </Button>
+  );
+}
diff --git a/lib/vendors/table/feature-flags-provider.tsx b/lib/vendors/table/feature-flags-provider.tsx
new file mode 100644
index 00000000..81131894
--- /dev/null
+++ b/lib/vendors/table/feature-flags-provider.tsx
@@ -0,0 +1,108 @@
+"use client"
+
+import * as React from "react"
+import { useQueryState } from "nuqs"
+
+import { dataTableConfig, type DataTableConfig } from "@/config/data-table"
+import { cn } from "@/lib/utils"
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+
+type FeatureFlagValue = DataTableConfig["featureFlags"][number]["value"]
+
+interface FeatureFlagsContextProps {
+  featureFlags: FeatureFlagValue[]
+  setFeatureFlags: (value: FeatureFlagValue[]) => void
+}
+
+const FeatureFlagsContext = React.createContext<FeatureFlagsContextProps>({
+  featureFlags: [],
+  setFeatureFlags: () => {},
+})
+
+export function useFeatureFlags() {
+  const context = React.useContext(FeatureFlagsContext)
+  if (!context) {
+    throw new Error(
+      "useFeatureFlags must be used within a FeatureFlagsProvider"
+    )
+  }
+  return context
+}
+
+interface FeatureFlagsProviderProps {
+  children: React.ReactNode
+}
+
+export function FeatureFlagsProvider({ children }: FeatureFlagsProviderProps) {
+  const [featureFlags, setFeatureFlags] = useQueryState<FeatureFlagValue[]>(
+    "flags",
+    {
+      defaultValue: [],
+      parse: (value) => value.split(",") as FeatureFlagValue[],
+      serialize: (value) => value.join(","),
+      eq: (a, b) =>
+        a.length === b.length && a.every((value, index) => value === b[index]),
+      clearOnDefault: true,
+      shallow: false,
+    }
+  )
+
+  return (
+    <FeatureFlagsContext.Provider
+      value={{
+        featureFlags,
+        setFeatureFlags: (value) => void setFeatureFlags(value),
+      }}
+    >
+      <div className="w-full overflow-x-auto">
+        <ToggleGroup
+          type="multiple"
+          variant="outline"
+          size="sm"
+          value={featureFlags}
+          onValueChange={(value: FeatureFlagValue[]) => setFeatureFlags(value)}
+          className="w-fit gap-0"
+        >
+          {dataTableConfig.featureFlags.map((flag, index) => (
+            <Tooltip key={flag.value}>
+              <ToggleGroupItem
+                value={flag.value}
+                className={cn(
+                  "gap-2 whitespace-nowrap rounded-none px-3 text-xs data-[state=on]:bg-accent/70 data-[state=on]:hover:bg-accent/90",
+                  {
+                    "rounded-l-sm border-r-0": index === 0,
+                    "rounded-r-sm":
+                      index === dataTableConfig.featureFlags.length - 1,
+                  }
+                )}
+                asChild
+              >
+                <TooltipTrigger>
+                  <flag.icon className="size-3.5 shrink-0" aria-hidden="true" />
+                  {flag.label}
+                </TooltipTrigger>
+              </ToggleGroupItem>
+              <TooltipContent
+                align="start"
+                side="bottom"
+                sideOffset={6}
+                className="flex max-w-60 flex-col space-y-1.5 border bg-background py-2 font-semibold text-foreground"
+              >
+                <div>{flag.tooltipTitle}</div>
+                <div className="text-xs text-muted-foreground">
+                  {flag.tooltipDescription}
+                </div>
+              </TooltipContent>
+            </Tooltip>
+          ))}
+        </ToggleGroup>
+      </div>
+      {children}
+    </FeatureFlagsContext.Provider>
+  )
+}
diff --git a/lib/vendors/table/request-vendor-pg-dialog.tsx b/lib/vendors/table/request-vendor-pg-dialog.tsx
new file mode 100644
index 00000000..b417f846
--- /dev/null
+++ b/lib/vendors/table/request-vendor-pg-dialog.tsx
@@ -0,0 +1,150 @@
+"use client"
+
+import * as React from "react"
+import { type Row } from "@tanstack/react-table"
+import { Loader, Check, SendHorizonal } from "lucide-react"
+import { toast } from "sonner"
+
+import { useMediaQuery } from "@/hooks/use-media-query"
+import { Button } from "@/components/ui/button"
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/components/ui/drawer"
+import { Vendor } from "@/db/schema/vendors"
+import { requestPQVendors } from "../service"
+
+interface ApprovalVendorDialogProps
+  extends React.ComponentPropsWithoutRef<typeof Dialog> {
+  vendors: Row<Vendor>["original"][]
+  showTrigger?: boolean
+  onSuccess?: () => void
+}
+
+export function RequestPQVendorsDialog({
+  vendors,
+  showTrigger = true,
+  onSuccess,
+  ...props
+}: ApprovalVendorDialogProps) {
+  const [isApprovePending, startApproveTransition] = React.useTransition()
+  const isDesktop = useMediaQuery("(min-width: 640px)")
+
+  function onApprove() {
+    startApproveTransition(async () => {
+      const { error } = await requestPQVendors({
+        ids: vendors.map((vendor) => vendor.id),
+      })
+
+      if (error) {
+        toast.error(error)
+        return
+      }
+
+      props.onOpenChange?.(false)
+      toast.success("PQ successfully sent to vendors")
+      onSuccess?.()
+    })
+  }
+
+  if (isDesktop) {
+    return (
+      <Dialog {...props}>
+        {showTrigger ? (
+          <DialogTrigger asChild>
+            <Button variant="outline" size="sm" className="gap-2">
+              <SendHorizonal className="size-4" aria-hidden="true" />
+              Request ({vendors.length})
+            </Button>
+          </DialogTrigger>
+        ) : null}
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Confirm Vendor PQ requst</DialogTitle>
+            <DialogDescription>
+              Are you sure you want to request{" "}
+              <span className="font-medium">{vendors.length}</span>
+              {vendors.length === 1 ? " vendor" : " vendors"}?
+              After sent, vendors will be notified and can submit PQ information.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter className="gap-2 sm:space-x-0">
+            <DialogClose asChild>
+              <Button variant="outline">Cancel</Button>
+            </DialogClose>
+            <Button
+              aria-label="Request selected vendors"
+              variant="default"
+              onClick={onApprove}
+              disabled={isApprovePending}
+            >
+              {isApprovePending && (
+                <Loader
+                  className="mr-2 size-4 animate-spin"
+                  aria-hidden="true"
+                />
+              )}
+              Request
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    )
+  }
+
+  return (
+    <Drawer {...props}>
+      {showTrigger ? (
+        <DrawerTrigger asChild>
+          <Button variant="outline" size="sm" className="gap-2">
+            <Check className="size-4" aria-hidden="true" />
+            Request ({vendors.length})
+          </Button>
+        </DrawerTrigger>
+      ) : null}
+      <DrawerContent>
+        <DrawerHeader>
+          <DrawerTitle>Confirm Vendor Approval</DrawerTitle>
+          <DrawerDescription>
+            Are you sure you want to request{" "}
+            <span className="font-medium">{vendors.length}</span>
+            {vendors.length === 1 ? " vendor" : " vendors"}?
+            After sent, vendors will be notified and can submit PQ information.
+          </DrawerDescription>
+        </DrawerHeader>
+        <DrawerFooter className="gap-2 sm:space-x-0">
+          <DrawerClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </DrawerClose>
+          <Button
+            aria-label="Request selected vendors"
+            variant="default"
+            onClick={onApprove}
+            disabled={isApprovePending}
+          >
+            {isApprovePending && (
+              <Loader className="mr-2 size-4 animate-spin" aria-hidden="true" />
+            )}
+            Request
+          </Button>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  )
+}
\ No newline at end of file
diff --git a/lib/vendors/table/send-vendor-dialog.tsx b/lib/vendors/table/send-vendor-dialog.tsx
new file mode 100644
index 00000000..a34abb77
--- /dev/null
+++ b/lib/vendors/table/send-vendor-dialog.tsx
@@ -0,0 +1,150 @@
+"use client"
+
+import * as React from "react"
+import { type Row } from "@tanstack/react-table"
+import { Loader, Check, Send } from "lucide-react"
+import { toast } from "sonner"
+
+import { useMediaQuery } from "@/hooks/use-media-query"
+import { Button } from "@/components/ui/button"
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/components/ui/drawer"
+import { Vendor } from "@/db/schema/vendors"
+import { requestPQVendors, sendVendors } from "../service"
+
+interface ApprovalVendorDialogProps
+  extends React.ComponentPropsWithoutRef<typeof Dialog> {
+  vendors: Row<Vendor>["original"][]
+  showTrigger?: boolean
+  onSuccess?: () => void
+}
+
+export function SendVendorsDialog({
+  vendors,
+  showTrigger = true,
+  onSuccess,
+  ...props
+}: ApprovalVendorDialogProps) {
+  const [isApprovePending, startApproveTransition] = React.useTransition()
+  const isDesktop = useMediaQuery("(min-width: 640px)")
+
+  function onApprove() {
+    startApproveTransition(async () => {
+      const { error } = await sendVendors({
+        ids: vendors.map((vendor) => vendor.id),
+      })
+
+      if (error) {
+        toast.error(error)
+        return
+      }
+
+      props.onOpenChange?.(false)
+      toast.success("PQ successfully sent to vendors")
+      onSuccess?.()
+    })
+  }
+
+  if (isDesktop) {
+    return (
+      <Dialog {...props}>
+        {showTrigger ? (
+          <DialogTrigger asChild>
+            <Button variant="outline" size="sm" className="gap-2">
+              <Send className="size-4" aria-hidden="true" />
+              Send ({vendors.length})
+            </Button>
+          </DialogTrigger>
+        ) : null}
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Confirm to send Vendor Information</DialogTitle>
+            <DialogDescription>
+              Are you sure you want to send{" "}
+              <span className="font-medium">{vendors.length}</span>
+              {vendors.length === 1 ? " vendor" : " vendors"}?
+              After vendor information is sent, vendor code will be generated.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter className="gap-2 sm:space-x-0">
+            <DialogClose asChild>
+              <Button variant="outline">Cancel</Button>
+            </DialogClose>
+            <Button
+              aria-label="Send selected vendors"
+              variant="default"
+              onClick={onApprove}
+              disabled={isApprovePending}
+            >
+              {isApprovePending && (
+                <Loader
+                  className="mr-2 size-4 animate-spin"
+                  aria-hidden="true"
+                />
+              )}
+              Send
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    )
+  }
+
+  return (
+    <Drawer {...props}>
+      {showTrigger ? (
+        <DrawerTrigger asChild>
+          <Button variant="outline" size="sm" className="gap-2">
+            <Send className="size-4" aria-hidden="true" />
+            Send ({vendors.length})
+          </Button>
+        </DrawerTrigger>
+      ) : null}
+      <DrawerContent>
+        <DrawerHeader>
+          <DrawerTitle>Confirm to send Vendor Information</DrawerTitle>
+          <DrawerDescription>
+            Are you sure you want to send{" "}
+            <span className="font-medium">{vendors.length}</span>
+            {vendors.length === 1 ? " vendor" : " vendors"}?
+            After vendor information is sent, vendor code will be generated.
+            </DrawerDescription>
+        </DrawerHeader>
+        <DrawerFooter className="gap-2 sm:space-x-0">
+          <DrawerClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </DrawerClose>
+          <Button
+            aria-label="Send selected vendors"
+            variant="default"
+            onClick={onApprove}
+            disabled={isApprovePending}
+          >
+            {isApprovePending && (
+              <Loader className="mr-2 size-4 animate-spin" aria-hidden="true" />
+            )}
+            Send
+          </Button>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  )
+}
\ No newline at end of file
diff --git a/lib/vendors/table/update-vendor-sheet.tsx b/lib/vendors/table/update-vendor-sheet.tsx
new file mode 100644
index 00000000..e65c4b1c
--- /dev/null
+++ b/lib/vendors/table/update-vendor-sheet.tsx
@@ -0,0 +1,270 @@
+"use client"
+
+import * as React from "react"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { Loader } from "lucide-react"
+import { toast } from "sonner"
+
+import { Button } from "@/components/ui/button"
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form"
+import { Input } from "@/components/ui/input"
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+
+import { Vendor } from "@/db/schema/vendors"
+import { updateVendorSchema, type UpdateVendorSchema } from "../validations"
+import { modifyVendor } from "../service"
+// 예: import { modifyVendor } from "@/lib/vendors/service"
+
+interface UpdateVendorSheetProps
+  extends React.ComponentPropsWithRef<typeof Sheet> {
+  vendor: Vendor | null
+}
+
+// 폼 컴포넌트
+export function UpdateVendorSheet({ vendor, ...props }: UpdateVendorSheetProps) {
+  const [isPending, startTransition] = React.useTransition()
+
+  console.log(vendor)
+
+  // RHF + Zod
+  const form = useForm<UpdateVendorSchema>({
+    resolver: zodResolver(updateVendorSchema),
+    defaultValues: {
+      vendorName: vendor?.vendorName ?? "",
+      vendorCode: vendor?.vendorCode ?? "",
+      address: vendor?.address ?? "",
+      country: vendor?.country ?? "",
+      phone: vendor?.phone ?? "",
+      email: vendor?.email ?? "",
+      website: vendor?.website ?? "",
+      status: vendor?.status ?? "ACTIVE",
+    },
+  })
+
+  React.useEffect(() => {
+    if (vendor) {
+      form.reset({
+        vendorName: vendor?.vendorName ?? "",
+        vendorCode: vendor?.vendorCode ?? "",
+        address: vendor?.address ?? "",
+        country: vendor?.country ?? "",
+        phone: vendor?.phone ?? "",
+        email: vendor?.email ?? "",
+        website: vendor?.website ?? "",
+        status: vendor?.status ?? "ACTIVE",
+      });
+    }
+  }, [vendor, form]);
+
+  console.log(form.getValues())
+  // 제출 핸들러
+  async function onSubmit(data: UpdateVendorSchema) {
+    if (!vendor) return
+
+    startTransition(async () => {
+      // 서버 액션 or API
+      // const { error } = await modifyVendor({ id: vendor.id, ...data })
+      // 여기선 간단 예시
+      try {
+        // 예시:
+        const { error } = await modifyVendor({ id: String(vendor.id), ...data })
+        if (error) throw new Error(error)
+
+        toast.success("Vendor updated!")
+        form.reset()
+        props.onOpenChange?.(false)
+      } catch (err: any) {
+        toast.error(String(err))
+      }
+    })
+  }
+
+  return (
+    <Sheet {...props}>
+      <SheetContent className="flex flex-col gap-6 sm:max-w-md">
+        <SheetHeader className="text-left">
+          <SheetTitle>Update Vendor</SheetTitle>
+          <SheetDescription>
+            Update the vendor details and save the changes
+          </SheetDescription>
+        </SheetHeader>
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col gap-4">
+            {/* vendorName */}
+            <FormField
+              control={form.control}
+              name="vendorName"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Vendor Name</FormLabel>
+                  <FormControl>
+                    <Input placeholder="Vendor Name" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {/* vendorCode */}
+            <FormField
+              control={form.control}
+              name="vendorCode"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Vendor Code</FormLabel>
+                  <FormControl>
+                    <Input placeholder="Code123" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {/* address */}
+            <FormField
+              control={form.control}
+              name="address"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Address</FormLabel>
+                  <FormControl>
+                    <Input placeholder="123 Main St" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {/* country */}
+            <FormField
+              control={form.control}
+              name="country"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Country</FormLabel>
+                  <FormControl>
+                    <Input placeholder="USA" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {/* phone */}
+            <FormField
+              control={form.control}
+              name="phone"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Phone</FormLabel>
+                  <FormControl>
+                    <Input placeholder="+1 555-1234" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {/* email */}
+            <FormField
+              control={form.control}
+              name="email"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Email</FormLabel>
+                  <FormControl>
+                    <Input placeholder="vendor@example.com" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {/* website */}
+            <FormField
+              control={form.control}
+              name="website"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Website</FormLabel>
+                  <FormControl>
+                    <Input placeholder="https://www.vendor.com" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {/* status */}
+            <FormField
+              control={form.control}
+              name="status"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Status</FormLabel>
+                  <FormControl>
+                    <Select
+                      value={field.value}
+                      onValueChange={field.onChange}
+                    >
+                      <SelectTrigger className="capitalize">
+                        <SelectValue placeholder="Select a status" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectGroup>
+                          {/* enum ["ACTIVE","INACTIVE","BLACKLISTED"] */}
+                          <SelectItem value="ACTIVE">ACTIVE</SelectItem>
+                          <SelectItem value="INACTIVE">INACTIVE</SelectItem>
+                          <SelectItem value="BLACKLISTED">BLACKLISTED</SelectItem>
+                        </SelectGroup>
+                      </SelectContent>
+                    </Select>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <SheetFooter className="gap-2 pt-2 sm:space-x-0">
+              <SheetClose asChild>
+                <Button type="button" variant="outline">
+                  Cancel
+                </Button>
+              </SheetClose>
+              <Button disabled={isPending}>
+                {isPending && (
+                  <Loader className="mr-2 h-4 w-4 animate-spin" aria-hidden="true" />
+                )}
+                Save
+              </Button>
+            </SheetFooter>
+          </form>
+        </Form>
+      </SheetContent>
+    </Sheet>
+  )
+}
\ No newline at end of file
diff --git a/lib/vendors/table/vendors-table-columns.tsx b/lib/vendors/table/vendors-table-columns.tsx
new file mode 100644
index 00000000..c503e369
--- /dev/null
+++ b/lib/vendors/table/vendors-table-columns.tsx
@@ -0,0 +1,279 @@
+"use client"
+
+import * as React from "react"
+import { type DataTableRowAction } from "@/types/table"
+import { type ColumnDef } from "@tanstack/react-table"
+import { Ellipsis, PaperclipIcon } from "lucide-react"
+import { toast } from "sonner"
+
+import { getErrorMessage } from "@/lib/handle-error"
+import { formatDate } from "@/lib/utils"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Checkbox } from "@/components/ui/checkbox"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { DataTableColumnHeader } from "@/components/data-table/data-table-column-header"
+import { useRouter } from "next/navigation"
+
+import { Vendor, vendors, VendorWithAttachments } from "@/db/schema/vendors"
+import { modifyVendor } from "../service"
+import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header"
+import { vendorColumnsConfig } from "@/config/vendorColumnsConfig"
+import { Separator } from "@/components/ui/separator"
+import { AttachmentsButton } from "./attachmentButton"
+
+
+type NextRouter = ReturnType<typeof useRouter>;
+
+
+interface GetColumnsProps {
+  setRowAction: React.Dispatch<React.SetStateAction<DataTableRowAction<Vendor> | null>>;
+  router: NextRouter;
+}
+
+/**
+ * tanstack table 컬럼 정의 (중첩 헤더 버전)
+ */
+export function getColumns({ setRowAction, router }: GetColumnsProps): ColumnDef<Vendor>[] {
+  // ----------------------------------------------------------------
+  // 1) select 컬럼 (체크박스)
+  // ----------------------------------------------------------------
+  const selectColumn: ColumnDef<Vendor> = {
+    id: "select",
+    header: ({ table }) => (
+      <Checkbox
+        checked={
+          table.getIsAllPageRowsSelected() ||
+          (table.getIsSomePageRowsSelected() && "indeterminate")
+        }
+        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+        aria-label="Select all"
+        className="translate-y-0.5"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={(value) => row.toggleSelected(!!value)}
+        aria-label="Select row"
+        className="translate-y-0.5"
+      />
+    ),
+    size: 40,
+    enableSorting: false,
+    enableHiding: false,
+  }
+
+  // ----------------------------------------------------------------
+  // 2) actions 컬럼 (Dropdown 메뉴)
+  // ----------------------------------------------------------------
+  const actionsColumn: ColumnDef<Vendor> = {
+    id: "actions",
+    enableHiding: false,
+    cell: function Cell({ row }) {
+      const [isUpdatePending, startUpdateTransition] = React.useTransition()
+
+      return (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              aria-label="Open menu"
+              variant="ghost"
+              className="flex size-8 p-0 data-[state=open]:bg-muted"
+            >
+              <Ellipsis className="size-4" aria-hidden="true" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-40">
+            <DropdownMenuItem
+              onSelect={() => setRowAction({ row, type: "update" })}
+            >
+              Edit
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onSelect={() => {
+                // 1) 만약 rowAction을 열고 싶다면
+                // setRowAction({ row, type: "update" })
+
+                // 2) 자세히 보기 페이지로 클라이언트 라우팅
+                router.push(`/evcp/vendors/${row.original.id}/info`);
+              }}
+            >
+              Details
+            </DropdownMenuItem>
+            <Separator />
+            <DropdownMenuSub>
+              <DropdownMenuSubTrigger>Status</DropdownMenuSubTrigger>
+              <DropdownMenuSubContent>
+                <DropdownMenuRadioGroup
+                  value={row.original.status}
+                  onValueChange={(value) => {
+                    startUpdateTransition(() => {
+                      toast.promise(
+                        modifyVendor({
+                          id: String(row.original.id),
+                          status: value as Vendor["status"],
+                        }),
+                        {
+                          loading: "Updating...",
+                          success: "Label updated",
+                          error: (err) => getErrorMessage(err),
+                        }
+                      )
+                    })
+                  }}
+                >
+                  {vendors.status.enumValues.map((status) => (
+                    <DropdownMenuRadioItem
+                      key={status}
+                      value={status}
+                      className="capitalize"
+                      disabled={isUpdatePending}
+                    >
+                      {status}
+                    </DropdownMenuRadioItem>
+                  ))}
+                </DropdownMenuRadioGroup>
+              </DropdownMenuSubContent>
+            </DropdownMenuSub>
+
+          </DropdownMenuContent>
+        </DropdownMenu>
+      )
+    },
+    size: 40,
+  }
+
+  // ----------------------------------------------------------------
+  // 3) 일반 컬럼들을 "그룹"별로 묶어 중첩 columns 생성
+  // ----------------------------------------------------------------
+  // 3-1) groupMap: { [groupName]: ColumnDef<Vendor>[] }
+  const groupMap: Record<string, ColumnDef<Vendor>[]> = {}
+
+  vendorColumnsConfig.forEach((cfg) => {
+    // 만약 group가 없으면 "_noGroup" 처리
+    const groupName = cfg.group || "_noGroup"
+
+    if (!groupMap[groupName]) {
+      groupMap[groupName] = []
+    }
+
+    // child column 정의
+    const childCol: ColumnDef<Vendor> = {
+      accessorKey: cfg.id,
+      enableResizing: true,
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title={cfg.label} />
+      ),
+      meta: {
+        excelHeader: cfg.excelHeader,
+        group: cfg.group,
+        type: cfg.type,
+      },
+      cell: ({ row, cell }) => {
+
+
+        if (cfg.id === "status") {
+          const statusVal = row.original.status
+          if (!statusVal) return null
+          // const Icon = getStatusIcon(statusVal)
+          return (
+            <div className="flex w-[6.25rem] items-center">
+              {/* <Icon className="mr-2 size-4 text-muted-foreground" aria-hidden="true" /> */}
+              <span className="capitalize">{statusVal}</span>
+            </div>
+          )
+        }
+
+
+        if (cfg.id === "createdAt") {
+          const dateVal = cell.getValue() as Date
+          return formatDate(dateVal)
+        }
+
+        if (cfg.id === "updatedAt") {
+          const dateVal = cell.getValue() as Date
+          return formatDate(dateVal)
+        }
+
+
+        // code etc...
+        return row.getValue(cfg.id) ?? ""
+      },
+    }
+
+    groupMap[groupName].push(childCol)
+  })
+
+  // ----------------------------------------------------------------
+  // 3-2) groupMap에서 실제 상위 컬럼(그룹)을 만들기
+  // ----------------------------------------------------------------
+  const nestedColumns: ColumnDef<Vendor>[] = []
+
+  // 순서를 고정하고 싶다면 group 순서를 미리 정의하거나 sort해야 함
+  // 여기서는 그냥 Object.entries 순서
+  Object.entries(groupMap).forEach(([groupName, colDefs]) => {
+    if (groupName === "_noGroup") {
+      // 그룹 없음 → 그냥 최상위 레벨 컬럼
+      nestedColumns.push(...colDefs)
+    } else {
+      // 상위 컬럼
+      nestedColumns.push({
+        id: groupName,
+        header: groupName, // "Basic Info", "Metadata" 등
+        columns: colDefs,
+      })
+    }
+  })
+
+  const attachmentsColumn: ColumnDef<VendorWithAttachments> = {
+    id: "attachments",
+    header: ({ column }) => (
+      <DataTableColumnHeaderSimple column={column} title="" />
+    ),
+    cell: ({ row }) => {
+      // hasAttachments 및 attachmentsList 속성이 추가되었다고 가정
+      const hasAttachments = row.original.hasAttachments;
+      const attachmentsList = row.original.attachmentsList || [];
+      
+      if(hasAttachments){
+
+      // 서버 액션을 사용하는 컴포넌트로 교체
+      return (
+        <AttachmentsButton
+          vendorId={row.original.id}
+          hasAttachments={hasAttachments}
+          attachmentsList={attachmentsList}
+        />
+      );}{
+        return null
+      }
+    },
+    enableSorting: false,
+    enableHiding: false,
+    minSize: 45,
+  };
+  
+
+  // ----------------------------------------------------------------
+  // 4) 최종 컬럼 배열: select, nestedColumns, actions
+  // ----------------------------------------------------------------
+  return [
+    selectColumn,
+    attachmentsColumn,
+    ...nestedColumns,
+    actionsColumn,
+  ]
+}
\ No newline at end of file
diff --git a/lib/vendors/table/vendors-table-floating-bar.tsx b/lib/vendors/table/vendors-table-floating-bar.tsx
new file mode 100644
index 00000000..791fb760
--- /dev/null
+++ b/lib/vendors/table/vendors-table-floating-bar.tsx
@@ -0,0 +1,241 @@
+"use client"
+
+import * as React from "react"
+import { SelectTrigger } from "@radix-ui/react-select"
+import { type Table } from "@tanstack/react-table"
+import {
+  ArrowUp,
+  CheckCircle2,
+  Download,
+  Loader,
+  Trash2,
+  X,
+} from "lucide-react"
+import { toast } from "sonner"
+
+import { exportTableToExcel } from "@/lib/export"
+import { Button } from "@/components/ui/button"
+import { Portal } from "@/components/ui/portal"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+} from "@/components/ui/select"
+import { Separator } from "@/components/ui/separator"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+import { Kbd } from "@/components/kbd"
+
+import { ActionConfirmDialog } from "@/components/ui/action-dialog"
+import { Vendor, vendors } from "@/db/schema/vendors"
+import { modifyVendors } from "../service"
+
+interface VendorsTableFloatingBarProps {
+  table: Table<Vendor>
+}
+
+
+export function VendorsTableFloatingBar({ table }: VendorsTableFloatingBarProps) {
+  const rows = table.getFilteredSelectedRowModel().rows
+
+  const [isPending, startTransition] = React.useTransition()
+  const [action, setAction] = React.useState<
+    "update-status" | "export" | "delete"
+  >()
+  const [popoverOpen, setPopoverOpen] = React.useState(false)
+
+  // Clear selection on Escape key press
+  React.useEffect(() => {
+    function handleKeyDown(event: KeyboardEvent) {
+      if (event.key === "Escape") {
+        table.toggleAllRowsSelected(false)
+      }
+    }
+
+    window.addEventListener("keydown", handleKeyDown)
+    return () => window.removeEventListener("keydown", handleKeyDown)
+  }, [table])
+
+
+
+  // 공용 confirm dialog state
+  const [confirmDialogOpen, setConfirmDialogOpen] = React.useState(false)
+  const [confirmProps, setConfirmProps] = React.useState<{
+    title: string
+    description?: string
+    onConfirm: () => Promise<void> | void
+  }>({
+    title: "",
+    description: "",
+    onConfirm: () => { },
+  })
+
+
+  // 2) 
+  function handleSelectStatus(newStatus: Vendor["status"]) {
+    setAction("update-status")
+
+    setConfirmProps({
+      title: `Update ${rows.length} vendor${rows.length > 1 ? "s" : ""} with status: ${newStatus}?`,
+      description: "This action will override their current status.",
+      onConfirm: async () => {
+        startTransition(async () => {
+          const { error } = await modifyVendors({
+            ids: rows.map((row) => String(row.original.id)),
+            status: newStatus,
+          })
+          if (error) {
+            toast.error(error)
+            return
+          }
+          toast.success("Vendors updated")
+          setConfirmDialogOpen(false)
+        })
+      },
+    })
+    setConfirmDialogOpen(true)
+  }
+
+
+  return (
+    <Portal >
+      <div className="fixed inset-x-0 bottom-10 z-50 mx-auto w-fit px-2.5" style={{ bottom: '1.5rem' }}>
+        <div className="w-full overflow-x-auto">
+          <div className="mx-auto flex w-fit items-center gap-2 rounded-md border bg-background p-2 text-foreground shadow">
+            <div className="flex h-7 items-center rounded-md border border-dashed pl-2.5 pr-1">
+              <span className="whitespace-nowrap text-xs">
+                {rows.length} selected
+              </span>
+              <Separator orientation="vertical" className="ml-2 mr-1" />
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="size-5 hover:border"
+                    onClick={() => table.toggleAllRowsSelected(false)}
+                  >
+                    <X className="size-3.5 shrink-0" aria-hidden="true" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent className="flex items-center border bg-accent px-2 py-1 font-semibold text-foreground dark:bg-zinc-900">
+                  <p className="mr-2">Clear selection</p>
+                  <Kbd abbrTitle="Escape" variant="outline">
+                    Esc
+                  </Kbd>
+                </TooltipContent>
+              </Tooltip>
+            </div>
+            <Separator orientation="vertical" className="hidden h-5 sm:block" />
+            <div className="flex items-center gap-1.5">
+              <Select
+                onValueChange={(value: Vendor["status"]) => {
+                  handleSelectStatus(value)
+                }}
+              >
+                <Tooltip>
+                  <SelectTrigger asChild>
+                    <TooltipTrigger asChild>
+                      <Button
+                        variant="secondary"
+                        size="icon"
+                        className="size-7 border data-[state=open]:bg-accent data-[state=open]:text-accent-foreground"
+                        disabled={isPending}
+                      >
+                        {isPending && action === "update-status" ? (
+                          <Loader
+                            className="size-3.5 animate-spin"
+                            aria-hidden="true"
+                          />
+                        ) : (
+                          <CheckCircle2
+                            className="size-3.5"
+                            aria-hidden="true"
+                          />
+                        )}
+                      </Button>
+                    </TooltipTrigger>
+                  </SelectTrigger>
+                  <TooltipContent className="border bg-accent font-semibold text-foreground dark:bg-zinc-900">
+                    <p>Update status</p>
+                  </TooltipContent>
+                </Tooltip>
+                <SelectContent align="center">
+                  <SelectGroup>
+                    {vendors.status.enumValues.map((status) => (
+                      <SelectItem
+                        key={status}
+                        value={status}
+                        className="capitalize"
+                      >
+                        {status}
+                      </SelectItem>
+                    ))}
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="secondary"
+                    size="icon"
+                    className="size-7 border"
+                    onClick={() => {
+                      setAction("export")
+
+                      startTransition(() => {
+                        exportTableToExcel(table, {
+                          excludeColumns: ["select", "actions"],
+                          onlySelected: true,
+                        })
+                      })
+                    }}
+                    disabled={isPending}
+                  >
+                    {isPending && action === "export" ? (
+                      <Loader
+                        className="size-3.5 animate-spin"
+                        aria-hidden="true"
+                      />
+                    ) : (
+                      <Download className="size-3.5" aria-hidden="true" />
+                    )}
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent className="border bg-accent font-semibold text-foreground dark:bg-zinc-900">
+                  <p>Export vendors</p>
+                </TooltipContent>
+              </Tooltip>
+
+            </div>
+          </div>
+        </div>
+      </div>
+
+
+      {/* 공용 Confirm Dialog */}
+      <ActionConfirmDialog
+        open={confirmDialogOpen}
+        onOpenChange={setConfirmDialogOpen}
+        title={confirmProps.title}
+        description={confirmProps.description}
+        onConfirm={confirmProps.onConfirm}
+        isLoading={isPending && (action === "delete" || action === "update-status")}
+        confirmLabel={
+          action === "delete"
+            ? "Delete"
+            : action === "update-status"
+            ? "Update"
+            : "Confirm"
+        }
+        confirmVariant={
+          action === "delete" ? "destructive" : "default"
+        }
+      />
+    </Portal>
+  )
+}
diff --git a/lib/vendors/table/vendors-table-toolbar-actions.tsx b/lib/vendors/table/vendors-table-toolbar-actions.tsx
new file mode 100644
index 00000000..c0605191
--- /dev/null
+++ b/lib/vendors/table/vendors-table-toolbar-actions.tsx
@@ -0,0 +1,97 @@
+"use client"
+
+import * as React from "react"
+import { type Table } from "@tanstack/react-table"
+import { Download, Upload, Check } from "lucide-react"
+import { toast } from "sonner"
+
+import { exportTableToExcel } from "@/lib/export"
+import { Button } from "@/components/ui/button"
+import { Vendor } from "@/db/schema/vendors"
+import { ApproveVendorsDialog } from "./approve-vendor-dialog"
+import { RequestPQVendorsDialog } from "./request-vendor-pg-dialog"
+import { SendVendorsDialog } from "./send-vendor-dialog"
+
+interface VendorsTableToolbarActionsProps {
+  table: Table<Vendor>
+}
+
+export function VendorsTableToolbarActions({ table }: VendorsTableToolbarActionsProps) {
+  // 파일 input을 숨기고, 버튼 클릭 시 참조해 클릭하는 방식
+  const fileInputRef = React.useRef<HTMLInputElement>(null)
+
+  // 선택된 벤더 중 PENDING_REVIEW 상태인 벤더만 필터링
+  const pendingReviewVendors = React.useMemo(() => {
+    return table
+      .getFilteredSelectedRowModel()
+      .rows
+      .map(row => row.original)
+      .filter(vendor => vendor.status === "PENDING_REVIEW");
+  }, [table.getFilteredSelectedRowModel().rows]);
+
+
+  // 선택된 벤더 중 PENDING_REVIEW 상태인 벤더만 필터링
+  const inReviewVendors = React.useMemo(() => {
+    return table
+      .getFilteredSelectedRowModel()
+      .rows
+      .map(row => row.original)
+      .filter(vendor => vendor.status === "IN_REVIEW");
+  }, [table.getFilteredSelectedRowModel().rows]);
+
+  const approvedVendors = React.useMemo(() => {
+    return table
+      .getFilteredSelectedRowModel()
+      .rows
+      .map(row => row.original)
+      .filter(vendor => vendor.status === "APPROVED");
+  }, [table.getFilteredSelectedRowModel().rows]);
+
+
+
+  return (
+    <div className="flex items-center gap-2">
+
+
+
+      {/* 승인 다이얼로그: PENDING_REVIEW 상태인 벤더가 있을 때만 표시 */}
+      {pendingReviewVendors.length > 0 && (
+        <ApproveVendorsDialog
+          vendors={pendingReviewVendors}
+          onSuccess={() => table.toggleAllRowsSelected(false)}
+        />
+      )}
+
+      {inReviewVendors.length > 0 && (
+        <RequestPQVendorsDialog
+          vendors={inReviewVendors}
+          onSuccess={() => table.toggleAllRowsSelected(false)}
+        />
+      )}
+
+      {approvedVendors.length > 0 && (
+        <SendVendorsDialog
+          vendors={approvedVendors}
+          onSuccess={() => table.toggleAllRowsSelected(false)}
+        />
+      )}
+
+
+      {/** 4) Export 버튼 */}
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={() =>
+          exportTableToExcel(table, {
+            filename: "vendors",
+            excludeColumns: ["select", "actions"],
+          })
+        }
+        className="gap-2"
+      >
+        <Download className="size-4" aria-hidden="true" />
+        <span className="hidden sm:inline">Export</span>
+      </Button>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/lib/vendors/table/vendors-table.tsx b/lib/vendors/table/vendors-table.tsx
new file mode 100644
index 00000000..c04d57a9
--- /dev/null
+++ b/lib/vendors/table/vendors-table.tsx
@@ -0,0 +1,121 @@
+"use client"
+
+import * as React from "react"
+import { useRouter } from "next/navigation"
+import type {
+  DataTableAdvancedFilterField,
+  DataTableFilterField,
+  DataTableRowAction,
+} from "@/types/table"
+
+import { toSentenceCase } from "@/lib/utils"
+import { useDataTable } from "@/hooks/use-data-table"
+import { DataTable } from "@/components/data-table/data-table"
+import { DataTableAdvancedToolbar } from "@/components/data-table/data-table-advanced-toolbar"
+import { useFeatureFlags } from "./feature-flags-provider"
+import { getColumns } from "./vendors-table-columns"
+import { getVendors, getVendorStatusCounts } from "../service"
+import { Vendor, vendors } from "@/db/schema/vendors"
+import { VendorsTableToolbarActions } from "./vendors-table-toolbar-actions"
+import { VendorsTableFloatingBar } from "./vendors-table-floating-bar"
+import { UpdateTaskSheet } from "@/lib/tasks/table/update-task-sheet"
+import { UpdateVendorSheet } from "./update-vendor-sheet"
+
+interface VendorsTableProps {
+  promises: Promise<
+    [
+      Awaited<ReturnType<typeof getVendors>>,
+      Awaited<ReturnType<typeof getVendorStatusCounts>>
+    ]
+  >
+}
+
+export function VendorsTable({ promises }: VendorsTableProps) {
+  const { featureFlags } = useFeatureFlags()
+
+  // Suspense로 받아온 데이터
+  const [{ data, pageCount }, statusCounts] = React.use(promises)
+
+  const [rowAction, setRowAction] = React.useState<DataTableRowAction<Vendor> | null>(null)
+
+  // **router** 획득
+  const router = useRouter()
+
+  // getColumns() 호출 시, router를 주입
+  const columns = React.useMemo(
+    () => getColumns({ setRowAction, router }),
+    [setRowAction, router]
+  )
+
+  const filterFields: DataTableFilterField<Vendor>[] = [
+    {
+      id: "status",
+      label: "Status",
+      options: vendors.status.enumValues.map((status) => ({
+        label: toSentenceCase(status),
+        value: status,
+        count: statusCounts[status],
+      })),
+    },
+
+    { id: "vendorCode", label: "Vendor Code" },
+
+  ]
+
+  const advancedFilterFields: DataTableAdvancedFilterField<Vendor>[] = [
+    { id: "vendorName", label: "Vendor Name", type: "text" },
+    { id: "vendorCode", label: "Vendor Code", type: "text" },
+    { id: "email", label: "Email", type: "text" },
+    { id: "country", label: "Country", type: "text" },
+    {
+      id: "status",
+      label: "Status",
+      type: "multi-select",
+      options: vendors.status.enumValues.map((status) => ({
+        label: toSentenceCase(status),
+        value: status,
+        count: statusCounts[status],
+      })),
+    },
+    { id: "createdAt", label: "Created at", type: "date" },
+    { id: "updatedAt", label: "Updated at", type: "date" },
+  ]
+
+  const { table } = useDataTable({
+    data,
+    columns,
+    pageCount,
+    filterFields,
+    enablePinning: true,
+    enableAdvancedFilter: true,
+    initialState: {
+      sorting: [{ id: "createdAt", desc: true }],
+      columnPinning: { right: ["actions"] },
+    },
+    getRowId: (originalRow) => String(originalRow.id),
+    shallow: false,
+    clearOnDefault: true,
+  })
+
+  return (
+    <>
+      <DataTable
+        table={table}
+        // floatingBar={<VendorsTableFloatingBar table={table} />}
+      >
+        <DataTableAdvancedToolbar
+          table={table}
+          filterFields={advancedFilterFields}
+          shallow={false}
+        >
+          <VendorsTableToolbarActions table={table} />
+        </DataTableAdvancedToolbar>
+      </DataTable>
+      <UpdateVendorSheet
+        open={rowAction?.type === "update"}
+        onOpenChange={() => setRowAction(null)}
+        vendor={rowAction?.row.original ?? null}
+      />
+    </>
+  )
+}
\ No newline at end of file
diff --git a/lib/vendors/validations.ts b/lib/vendors/validations.ts
new file mode 100644
index 00000000..14efc8dc
--- /dev/null
+++ b/lib/vendors/validations.ts
@@ -0,0 +1,341 @@
+import { tasks, type Task } from "@/db/schema/tasks";
+import {
+  createSearchParamsCache,
+  parseAsArrayOf,
+  parseAsInteger,
+  parseAsString,
+  parseAsStringEnum,
+} from "nuqs/server"
+import * as z from "zod"
+
+import { getFiltersStateParser, getSortingStateParser } from "@/lib/parsers"
+import { Vendor, VendorContact, VendorItemsView, vendors } from "@/db/schema/vendors";
+import { rfqs } from "@/db/schema/rfq"
+
+
+export const searchParamsCache = createSearchParamsCache({
+
+  // 공통 플래그
+  flags: parseAsArrayOf(z.enum(["advancedTable", "floatingBar"])).withDefault(
+    []
+  ),
+
+  // 페이징
+  page: parseAsInteger.withDefault(1),
+  perPage: parseAsInteger.withDefault(10),
+
+  // 정렬 (vendors 테이블에 맞춰 Vendor 타입 지정)
+  sort: getSortingStateParser<Vendor>().withDefault([
+    { id: "createdAt", desc: true }, // createdAt 기준 내림차순
+  ]),
+
+  // 고급 필터
+  filters: getFiltersStateParser().withDefault([]),
+  joinOperator: parseAsStringEnum(["and", "or"]).withDefault("and"),
+
+  // 검색 키워드
+  search: parseAsString.withDefault(""),
+
+  // -----------------------------------------------------------------
+  // 여기부터는 "벤더"에 특화된 검색 필드 예시
+  // -----------------------------------------------------------------
+  // 상태 (ACTIVE, INACTIVE, BLACKLISTED 등) 중에서 선택
+  status: parseAsStringEnum(["ACTIVE", "INACTIVE", "BLACKLISTED"]),
+
+  // 벤더명 검색
+  vendorName: parseAsString.withDefault(""),
+
+  // 국가 검색
+  country: parseAsString.withDefault(""),
+
+  // 예) 코드 검색
+  vendorCode: parseAsString.withDefault(""),
+
+  // 필요하다면 이메일 검색 / 웹사이트 검색 등 추가 가능
+  email: parseAsString.withDefault(""),
+  website: parseAsString.withDefault(""),
+});
+
+export const searchParamsContactCache = createSearchParamsCache({
+  // 공통 플래그
+  flags: parseAsArrayOf(z.enum(["advancedTable", "floatingBar"])).withDefault(
+    []
+  ),
+
+  // 페이징
+  page: parseAsInteger.withDefault(1),
+  perPage: parseAsInteger.withDefault(10),
+
+  // 정렬 (vendors 테이블에 맞춰 Vendor 타입 지정)
+  sort: getSortingStateParser<VendorContact>().withDefault([
+    { id: "createdAt", desc: true }, // createdAt 기준 내림차순
+  ]),
+
+  // 고급 필터
+  filters: getFiltersStateParser().withDefault([]),
+  joinOperator: parseAsStringEnum(["and", "or"]).withDefault("and"),
+
+  // 검색 키워드
+  search: parseAsString.withDefault(""),
+
+
+  contactName: parseAsString.withDefault(""),
+  contactPosition: parseAsString.withDefault(""),
+  contactEmail: parseAsString.withDefault(""),
+  contactPhone: parseAsString.withDefault(""),
+});
+
+
+
+export const searchParamsItemCache = createSearchParamsCache({
+  // 공통 플래그
+  flags: parseAsArrayOf(z.enum(["advancedTable", "floatingBar"])).withDefault(
+    []
+  ),
+
+  // 페이징
+  page: parseAsInteger.withDefault(1),
+  perPage: parseAsInteger.withDefault(10),
+
+  // 정렬 (vendors 테이블에 맞춰 Vendor 타입 지정)
+  sort: getSortingStateParser<VendorItemsView>().withDefault([
+    { id: "createdAt", desc: true }, // createdAt 기준 내림차순
+  ]),
+
+  // 고급 필터
+  filters: getFiltersStateParser().withDefault([]),
+  joinOperator: parseAsStringEnum(["and", "or"]).withDefault("and"),
+
+  // 검색 키워드
+  search: parseAsString.withDefault(""),
+
+
+  itemName: parseAsString.withDefault(""),
+  itemCode: parseAsString.withDefault(""),
+  description: parseAsString.withDefault(""),
+});
+
+
+export const updateVendorSchema = z.object({
+  vendorName: z.string().min(1, "Vendor name is required").max(255, "Max length 255").optional(),
+  vendorCode: z.string().max(100, "Max length 100").optional(),
+  address: z.string().optional(),
+  country: z.string().max(100, "Max length 100").optional(),
+  phone: z.string().max(50, "Max length 50").optional(),
+  email: z.string().email("Invalid email").max(255).optional(),
+  website: z.string().url("Invalid URL").max(255).optional(),
+
+  // status는 특정 값만 허용하도록 enum 사용 예시
+  // 필요 시 'SUSPENDED', 'BLACKLISTED' 등 추가하거나 제거 가능
+  status: z.enum(vendors.status.enumValues)
+    .optional()
+    .default("ACTIVE"),
+});
+
+
+const contactSchema = z.object({
+  contactName: z
+    .string()
+    .min(1, "Contact name is required")
+    .max(255, "Max length 255"),
+  contactPosition: z.string().max(100).optional(),
+  contactEmail: z.string().email("Invalid email").max(255),
+  contactPhone: z.string().max(50).optional(),
+  isPrimary: z.boolean().default(false).optional()})
+
+const vendorStatusEnum = z.enum(vendors.status.enumValues)
+// CREATE 시: 일부 필드는 필수, 일부는 optional
+export const createVendorSchema = z
+  .object({
+
+    vendorName: z
+      .string()
+      .min(1, "Vendor name is required")
+      .max(255, "Max length 255"),
+    email: z.string().email("Invalid email").max(255),
+    taxId: z.string().max(100, "Max length 100"),
+
+    // 나머지 optional
+    vendorCode: z.string().max(100, "Max length 100").optional(),
+    address: z.string().optional(),
+    country: z.string()
+    .min(1, "국가 선택은 필수입니다.")
+    .max(100, "Max length 100"),
+    phone: z.string().max(50, "Max length 50").optional(),
+    website: z.string().url("Invalid URL").max(255).optional(),
+
+    creditRatingAttachment: z.any().optional(),    // 신용평가 첨부
+    cashFlowRatingAttachment: z.any().optional(),  // 현금흐름 첨부
+    attachedFiles: z.any()
+    .refine(
+      val => {
+        // Validate that files exist and there's at least one file
+        return val && 
+               (Array.isArray(val) ? val.length > 0 : 
+                val instanceof FileList ? val.length > 0 : 
+                val && typeof val === 'object' && 'length' in val && val.length > 0);
+      }, 
+      { message: "첨부 파일은 필수입니다." }
+    ),
+    status: vendorStatusEnum.default("PENDING_REVIEW"),
+
+    representativeName: z.union([z.string().max(255), z.literal("")]).optional(),
+    representativeBirth: z.union([z.string().max(20), z.literal("")]).optional(),
+    representativeEmail: z.union([z.string().email("Invalid email").max(255), z.literal("")]).optional(),
+    representativePhone: z.union([z.string().max(50), z.literal("")]).optional(),
+    corporateRegistrationNumber: z.union([z.string().max(100), z.literal("")]).optional(),
+
+    creditAgency: z.string().max(50).optional(),
+    creditRating: z.string().max(50).optional(),
+    cashFlowRating: z.string().max(50).optional(),
+
+    contacts: z
+    .array(contactSchema)
+    .nonempty("At least one contact is required."), 
+
+    // ... (기타 필드)
+  })
+  .superRefine((data, ctx) => {
+    if (data.country === "KR") {
+      // 1) 대표자 정보가 누락되면 각각 에러 발생
+      if (!data.representativeName) {
+        ctx.addIssue({
+          code: "custom",
+          path: ["representativeName"],
+          message: "대표자 이름은 한국(KR) 업체일 경우 필수입니다.",
+        })
+      }
+      if (!data.representativeBirth) {
+        ctx.addIssue({
+          code: "custom",
+          path: ["representativeBirth"],
+          message: "대표자 생년월일은 한국(KR) 업체일 경우 필수입니다.",
+        })
+      }
+      if (!data.representativeEmail) {
+        ctx.addIssue({
+          code: "custom",
+          path: ["representativeEmail"],
+          message: "대표자 이메일은 한국(KR) 업체일 경우 필수입니다.",
+        })
+      }
+      if (!data.representativePhone) {
+        ctx.addIssue({
+          code: "custom",
+          path: ["representativePhone"],
+          message: "대표자 전화번호는 한국(KR) 업체일 경우 필수입니다.",
+        })
+      }
+      if (!data.corporateRegistrationNumber) {
+        ctx.addIssue({
+          code: "custom",
+          path: ["corporateRegistrationNumber"],
+          message: "법인등록번호는 한국(KR) 업체일 경우 필수입니다.",
+        })
+      }
+
+      // 2) 신용/현금흐름 등급도 필수라면
+      if (!data.creditAgency) {
+        ctx.addIssue({
+          code: "custom",
+          path: ["creditAgency"],
+          message: "신용평가사 선택은 한국(KR) 업체일 경우 필수입니다.",
+        })
+      }
+      if (!data.creditRating) {
+        ctx.addIssue({
+          code: "custom",
+          path: ["creditRating"],
+          message: "신용평가등급은 한국(KR) 업체일 경우 필수입니다.",
+        })
+      }
+      if (!data.cashFlowRating) {
+        ctx.addIssue({
+          code: "custom",
+          path: ["cashFlowRating"],
+          message: "현금흐름등급은 한국(KR) 업체일 경우 필수입니다.",
+        })
+      }
+    }
+  }
+)
+
+export const createVendorContactSchema = z.object({
+  vendorId: z.number(),
+  contactName: z.string()
+    .min(1, "Contact name is required")
+    .max(255, "Max length 255"), // 신규 생성 시 반드시 입력
+  contactPosition: z.string().max(100, "Max length 100"),
+  contactEmail: z.string().email(),
+  contactPhone: z.string().max(50, "Max length 50").optional(),
+  isPrimary: z.boolean(),
+});
+
+
+export const updateVendorContactSchema = z.object({
+  contactName: z.string()
+    .min(1, "Contact name is required")
+    .max(255, "Max length 255"), // 신규 생성 시 반드시 입력
+  contactPosition: z.string().max(100, "Max length 100").optional(),
+  contactEmail: z.string().email().optional(),
+  contactPhone: z.string().max(50, "Max length 50").optional(),
+  isPrimary: z.boolean().optional(),
+});
+
+
+
+export const createVendorItemSchema = z.object({
+  vendorId: z.number(),
+  itemCode: z.string().max(100, "Max length 100"),
+
+});
+
+
+export const updateVendorItemSchema = z.object({
+  itemName: z.string().optional(),
+  itemCode: z.string().max(100, "Max length 100"),
+  description: z.string().optional()
+});
+
+export const searchParamsRfqHistoryCache = createSearchParamsCache({
+  // 공통 플래그
+  flags: parseAsArrayOf(z.enum(["advancedTable", "floatingBar"])).withDefault(
+    []
+  ),
+
+  // 페이징
+  page: parseAsInteger.withDefault(1),
+  perPage: parseAsInteger.withDefault(10),
+
+  // 정렬
+  sort: getSortingStateParser<typeof rfqs.$inferSelect>().withDefault([
+    { id: "createdAt", desc: true },
+  ]),
+
+  // 고급 필터
+  filters: getFiltersStateParser().withDefault([]),
+  joinOperator: parseAsStringEnum(["and", "or"]).withDefault("and"),
+
+  // 검색 키워드
+  search: parseAsString.withDefault(""),
+
+  // RFQ 특화 필터
+  rfqCode: parseAsString.withDefault(""),
+  projectCode: parseAsString.withDefault(""),
+  projectName: parseAsString.withDefault(""),
+  status: parseAsStringEnum(["DRAFT", "IN_PROGRESS", "COMPLETED", "CANCELLED"]),
+  vendorStatus: parseAsStringEnum(["INVITED", "ACCEPTED", "DECLINED", "SUBMITTED", "AWARDED", "REJECTED"]),
+  dueDate: parseAsString.withDefault(""),
+});
+
+export type GetVendorsSchema = Awaited<ReturnType<typeof searchParamsCache.parse>>
+export type GetVendorContactsSchema = Awaited<ReturnType<typeof searchParamsContactCache.parse>>
+export type GetVendorItemsSchema = Awaited<ReturnType<typeof searchParamsItemCache.parse>>
+
+export type UpdateVendorSchema = z.infer<typeof updateVendorSchema>
+export type CreateVendorSchema = z.infer<typeof createVendorSchema>
+export type CreateVendorContactSchema = z.infer<typeof createVendorContactSchema>
+export type UpdateVendorContactSchema = z.infer<typeof updateVendorContactSchema>
+export type CreateVendorItemSchema = z.infer<typeof createVendorItemSchema>
+export type UpdateVendorItemSchema = z.infer<typeof updateVendorItemSchema>
+export type GetRfqHistorySchema = Awaited<ReturnType<typeof searchParamsRfqHistoryCache.parse>>