summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--app/[lng]/evcp/(evcp)/items-ship/page.tsx72
-rw-r--r--db/schema/items.ts33
-rw-r--r--lib/items-ship/repository.ts125
-rw-r--r--lib/items-ship/service.ts416
-rw-r--r--lib/items-ship/table/Items-ship-table.tsx140
-rw-r--r--lib/items-ship/table/add-items-dialog.tsx219
-rw-r--r--lib/items-ship/table/delete-items-dialog.tsx169
-rw-r--r--lib/items-ship/table/feature-flags.tsx96
-rw-r--r--lib/items-ship/table/import-excel-button.tsx263
-rw-r--r--lib/items-ship/table/import-item-handler.tsx145
-rw-r--r--lib/items-ship/table/item-excel-template.tsx122
-rw-r--r--lib/items-ship/table/items-ship-table-columns.tsx244
-rw-r--r--lib/items-ship/table/items-table-toolbar-actions.tsx177
-rw-r--r--lib/items-ship/table/update-items-sheet.tsx202
-rw-r--r--lib/items-ship/validations.ts88
15 files changed, 2510 insertions, 1 deletions
diff --git a/app/[lng]/evcp/(evcp)/items-ship/page.tsx b/app/[lng]/evcp/(evcp)/items-ship/page.tsx
new file mode 100644
index 00000000..fb6ee965
--- /dev/null
+++ b/app/[lng]/evcp/(evcp)/items-ship/page.tsx
@@ -0,0 +1,72 @@
+import * as React from "react"
+import { type SearchParams } from "@/types/table"
+
+import { getValidFilters } from "@/lib/data-table"
+import { Skeleton } from "@/components/ui/skeleton"
+import { DataTableSkeleton } from "@/components/data-table/data-table-skeleton"
+import { Shell } from "@/components/shell"
+import { searchParamsCache } from "@/lib/items-ship/validations"
+import { getShipbuildingItems } from "@/lib/items-ship/service"
+import { ItemsShipTable } from "@/lib/items-ship/table/Items-ship-table"
+
+interface IndexPageProps {
+ searchParams: Promise<SearchParams>
+}
+
+export default async function IndexPage(props: IndexPageProps) {
+ const searchParams = await props.searchParams
+ const search = searchParamsCache.parse(searchParams)
+ const validFilters = getValidFilters(search.filters)
+
+ // 아이템 타입별 서비스 함수 호출
+
+ const promises = Promise.all([
+ getShipbuildingItems({
+ ...search,
+ filters: validFilters,
+ }),
+ ]).then(([result]) => result)
+ return (
+ <Shell className="gap-2">
+ <div className="flex items-center justify-between space-y-2">
+ <div className="flex items-center justify-between space-y-2">
+ <div>
+ <h2 className="text-2xl font-bold tracking-tight">
+ 조선 아이템 매트릭스
+ </h2>
+ <p className="text-muted-foreground">
+ Item을 등록하고 관리할 수 있습니다.{" "}
+ {/* <span className="inline-flex items-center whitespace-nowrap">
+ <Ellipsis className="size-3" />
+ <span className="ml-1">버튼</span>
+ </span>
+ 을 통해 담당자 연락처, 입찰 이력, 계약 이력, 패키지 내용 등을 확인 할 수 있습니다. */}
+ </p>
+ </div>
+ </div>
+ </div>
+
+ <React.Suspense fallback={<Skeleton className="h-7 w-52" />}>
+ {/* <DateRangePicker
+ triggerSize="sm"
+ triggerClassName="ml-auto w-56 sm:w-60"
+ align="end"
+ shallow={false}
+ /> */}
+ </React.Suspense>
+ <React.Suspense
+ fallback={
+ <DataTableSkeleton
+ columnCount={6}
+ searchableColumnCount={1}
+ filterableColumnCount={2}
+ cellWidths={["10rem", "40rem", "12rem", "12rem", "8rem", "8rem"]}
+ shrinkZero
+ />
+ }
+ >
+ <ItemsShipTable promises={promises} />
+ </React.Suspense>
+ </Shell>
+ )
+}
diff --git a/db/schema/items.ts b/db/schema/items.ts
index 1d4b0ded..9279b580 100644
--- a/db/schema/items.ts
+++ b/db/schema/items.ts
@@ -1,4 +1,5 @@
-import { pgTable, varchar, text, timestamp ,serial} from "drizzle-orm/pg-core"
+import { relations } from "drizzle-orm";
+import { pgTable, varchar, text, timestamp ,serial, integer, pgEnum} from "drizzle-orm/pg-core"
export const items = pgTable("items", {
id: serial("id").primaryKey(),
@@ -10,3 +11,33 @@ export const items = pgTable("items", {
});
export type Item = typeof items.$inferSelect
+
+export const itemsRelations = relations(items, ({ many }) => ({
+ shipbuilding: many(itemShipbuilding),
+}));
+
+// 조선 기능(공종) 유형 enum 정의
+export const workTypeEnum = pgEnum('work_type', ['기장', '전장', '선실', '배관', '철의']);
+
+//조선 아이템 테이블
+//아이템코드(:자재그룹코드), 아이템이름(:아이템리스트), 공종(:workType), 선종, createdAt(:생성일), updatedAt(:수정일)
+export const itemShipbuilding = pgTable("item_shipbuilding", {
+ id: serial("id").primaryKey(),
+ itemId: integer("item_id").notNull().references(() => items.id, { onDelete: 'cascade' }),
+ workType: workTypeEnum("work_type").notNull(),
+ shipTypes: text("ship_types").notNull().default('A-MAX'),
+});
+
+
+//조선 아이템 관계 정의
+export const itemShipbuildingRelations = relations(itemShipbuilding, ({ one }) => ({
+ item: one(items, {
+ fields: [itemShipbuilding.itemId],
+ references: [items.id],
+ }),
+}));
+
+
+
+export type ItemShipbuilding = typeof itemShipbuilding.$inferSelect;
+export type ItemWithShipbuilding = Item & ItemShipbuilding; \ No newline at end of file
diff --git a/lib/items-ship/repository.ts b/lib/items-ship/repository.ts
new file mode 100644
index 00000000..550e6b1d
--- /dev/null
+++ b/lib/items-ship/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-ship/service.ts b/lib/items-ship/service.ts
new file mode 100644
index 00000000..37b623c1
--- /dev/null
+++ b/lib/items-ship/service.ts
@@ -0,0 +1,416 @@
+// src/lib/items-ship/service.ts
+"use server"; // Next.js 서버 액션에서 직접 import하려면 (선택)
+
+import { 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 { asc, desc, ilike, and, or, eq, count, inArray, sql } from "drizzle-orm";
+import { GetItemsSchema, UpdateItemSchema, ShipbuildingItemCreateData, TypedItemCreateData } from "./validations";
+import { Item, items, itemShipbuilding } from "@/db/schema/items";
+import { deleteItemById, deleteItemsByIds, findAllItems, insertItem, updateItem } from "./repository";
+
+/* -----------------------------------------------------
+ 1) 조회 관련
+----------------------------------------------------- */
+
+/**
+ * 복잡한 조건으로 Item 목록을 조회 (+ pagination) 하고,
+ * 총 개수에 따라 pageCount를 계산해서 리턴.
+ * Next.js의 unstable_cache를 사용해 일정 시간 캐시.
+ */
+export async function getShipbuildingItems(input: GetItemsSchema) {
+ return unstable_cache(
+ async () => {
+ try {
+ const offset = (input.page - 1) * input.perPage;
+
+ // 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)
+ );
+ }
+
+ const finalWhere = and(
+ advancedWhere,
+ globalWhere
+ );
+
+ 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)];
+
+ // 조선 아이템 테이블과 기본 아이템 테이블 조인하여 조회
+ const result = await db.select({
+ id: itemShipbuilding.id,
+ itemId: itemShipbuilding.itemId,
+ workType: itemShipbuilding.workType,
+ shipTypes: itemShipbuilding.shipTypes,
+ itemCode: items.itemCode,
+ itemName: items.itemName,
+ description: items.description,
+ createdAt: items.createdAt,
+ updatedAt: items.updatedAt,
+ })
+ .from(itemShipbuilding)
+ .innerJoin(items, eq(itemShipbuilding.itemId, items.id))
+ .where(where)
+ .orderBy(...orderBy)
+ .offset(offset)
+ .limit(input.perPage);
+
+ // 전체 데이터 개수 조회
+ const [{ count: total }] = await db.select({
+ count: count()
+ })
+ .from(itemShipbuilding)
+ .innerJoin(items, eq(itemShipbuilding.itemId, items.id))
+ .where(where);
+
+ const pageCount = Math.ceil(Number(total) / input.perPage);
+
+ return { data: result, pageCount };
+ } catch (err) {
+ console.error("Error fetching shipbuilding items:", err);
+ return { data: [], pageCount: 0 };
+ }
+ },
+ [JSON.stringify(input)],
+ {
+ revalidate: 3600,
+ tags: ["items"],
+ }
+ )();
+}
+
+/* -----------------------------------------------------
+ 2) 생성(Create)
+----------------------------------------------------- */
+
+/**
+ * Item 생성 - 아이템 타입에 따라 해당 테이블에 데이터 삽입
+ */
+export async function createShipbuildingItem(input: TypedItemCreateData) {
+ unstable_noStore()
+
+ try {
+ if (!input.itemCode || !input.itemName) {
+ return {
+ success: false,
+ message: "아이템 코드와 아이템 명은 필수입니다",
+ data: null,
+ error: "필수 필드 누락"
+ }
+ }
+
+ let result: unknown[] = []
+
+ result = await db.transaction(async (tx) => {
+ const existingItem = await tx.query.items.findFirst({
+ where: eq(items.itemCode, input.itemCode),
+ })
+
+ let itemId: number
+ let itemResult
+
+ if (existingItem) {
+ itemResult = await updateItem(tx, existingItem.id, {
+ itemName: input.itemName,
+ description: input.description,
+ })
+ itemId = existingItem.id
+ } else {
+ itemResult = await insertItem(tx, {
+ itemCode: input.itemCode,
+ itemName: input.itemName,
+ description: input.description,
+ })
+ itemId = itemResult[0].id
+ }
+
+ const shipData = input as ShipbuildingItemCreateData;
+ const typeResult = await tx.insert(itemShipbuilding).values({
+ itemId: itemId,
+ workType: shipData.workType ? (shipData.workType as '기장' | '전장' | '선실' | '배관' | '철의') : '기장',
+ shipTypes: shipData.shipTypes || ''
+ }).returning();
+
+ return [...itemResult, ...typeResult]
+ })
+
+ revalidateTag("items")
+
+ return {
+ success: true,
+ data: result[0] || null,
+ error: null
+ }
+ } catch (err) {
+ console.error("아이템 생성/업데이트 오류:", err)
+
+ if (err instanceof Error && err.message.includes("unique constraint")) {
+ return {
+ success: false,
+ message: "이미 존재하는 아이템 코드입니다",
+ data: null,
+ error: "중복 키 오류"
+ }
+ }
+
+ return {
+ success: false,
+ message: getErrorMessage(err),
+ data: null,
+ error: getErrorMessage(err)
+ }
+ }
+}
+
+/**
+ * Excel import를 위한 조선 아이템 생성 함수
+ * 하나의 아이템 코드에 대해 여러 선종을 처리 (1:N 관계)
+ */
+export async function createShipbuildingImportItem(input: {
+ itemCode: string;
+ itemName: string;
+ workType: '기장' | '전장' | '선실' | '배관' | '철의';
+ description?: string | null;
+ shipTypes: Record<string, boolean>;
+}) {
+ unstable_noStore();
+
+ try {
+
+ if (!input.itemCode || !input.itemName) {
+ return {
+ success: false,
+ message: "아이템 코드와 아이템 명은 필수입니다",
+ data: null,
+ error: "필수 필드 누락"
+ }
+ }
+ let results: any[] = []
+ results = await db.transaction(async (tx) => {
+ // 1. itemCode 정규화해서 직접 쿼리
+ const existRows = await tx.select().from(items)
+ .where(eq(items.itemCode, input.itemCode));
+ const existingItem = existRows[0];
+
+ console.log('DB에서 직접 조회한 기존 아이템:', existingItem);
+
+ let itemId: number;
+
+ if (existingItem) {
+ // 이미 있으면 업데이트
+ await updateItem(tx, existingItem.id, {
+ itemName: input.itemName,
+ description: input.description,
+ });
+ itemId = existingItem.id;
+ console.log('기존 아이템 업데이트, id:', itemId);
+ } else {
+ // 없으면 새로 생성
+ // 현재 가장 큰 ID 값 가져오기
+ const maxIdResult = await tx.select({ maxId: sql`MAX(id)` }).from(items);
+ const maxId = maxIdResult[0]?.maxId || 0;
+ const newId = Number(maxId) + 1;
+ console.log('새 아이템 생성을 위한 ID 계산:', { maxId, newId });
+
+ // 새 ID로 아이템 생성
+ const insertResult = await tx.insert(items).values({
+ id: newId,
+ itemCode: input.itemCode,
+ itemName: input.itemName,
+ description: input.description,
+ }).returning();
+
+ itemId = insertResult[0].id;
+ console.log('새 아이템 생성 완료, id:', itemId);
+ }
+
+ const createdItems = [];
+ for (const shipType of Object.keys(input.shipTypes)) {
+ // 그대로 선종명 string으로 저장
+ const existShip = await tx.select().from(itemShipbuilding)
+ .where(
+ and(
+ eq(itemShipbuilding.itemId, itemId),
+ eq(itemShipbuilding.shipTypes, shipType)
+ )
+ );
+ if (!existShip[0]) {
+ const shipbuildingResult = await tx.insert(itemShipbuilding).values({
+ itemId: itemId,
+ workType: input.workType,
+ shipTypes: shipType
+ }).returning();
+ createdItems.push({
+ ...shipbuildingResult[0]
+ });
+ console.log('조선아이템 생성:', shipType, shipbuildingResult[0]);
+ } else {
+ console.log('이미 존재하는 조선아이템:', shipType);
+ }
+ }
+ return createdItems;
+ });
+
+ revalidateTag("items");
+
+ return {
+ success: true,
+ data: results,
+ error: null
+ }
+ } catch (err) {
+ // DB에 실제로 존재하는 itemCode 목록도 함께 출력
+ const allCodes = await db.select({ code: items.itemCode }).from(items);
+ console.error("아이템 import 오류:", err);
+ console.error("DB에 존재하는 모든 itemCode:", allCodes.map(x => x.code));
+ return {
+ success: false,
+ message: getErrorMessage(err),
+ data: null,
+ error: getErrorMessage(err)
+ }
+ }
+}
+
+/* -----------------------------------------------------
+ 3) 업데이트
+----------------------------------------------------- */
+
+// 업데이트 타입 정의 인터페이스
+interface UpdateShipbuildingItemInput extends UpdateItemSchema {
+ id: number;
+ workType?: string;
+ shipTypes?: string;
+ itemCode?: string;
+ itemName?: string;
+ description?: string;
+}
+
+/** 단건 업데이트 */
+export async function modifyShipbuildingItem(input: UpdateShipbuildingItemInput) {
+ unstable_noStore();
+ try {
+ await db.transaction(async (tx) => {
+ // 기본 아이템 테이블 업데이트
+ const [item] = await updateItem(tx, input.id, {
+ itemCode: input.itemCode,
+ itemName: input.itemName,
+ description: input.description,
+ });
+
+ // 조선 아이템 테이블 업데이트
+ if (input.workType || input.shipTypes) {
+ await tx.update(itemShipbuilding)
+ .set({
+ workType: input.workType as '기장' | '전장' | '선실' | '배관' | '철의',
+ shipTypes: input.shipTypes
+ })
+ .where(eq(itemShipbuilding.itemId, item.id));
+ }
+
+ return item;
+ });
+
+ revalidateTag("items");
+ return { data: null, error: null };
+ } catch (err) {
+ return { data: null, error: getErrorMessage(err) };
+ }
+}
+
+/* -----------------------------------------------------
+ 4) 삭제
+----------------------------------------------------- */
+
+// 삭제 타입 정의 인터페이스
+interface DeleteItemInput {
+ id: number;
+}
+
+interface DeleteItemsInput {
+ ids: number[];
+}
+
+/** 단건 삭제 */
+export async function removeShipbuildingItem(input: DeleteItemInput) {
+ unstable_noStore();
+ try {
+ await db.transaction(async (tx) => {
+ const item = await tx.query.items.findFirst({
+ where: eq(items.id, input.id),
+ });
+
+ if (!item) {
+ throw new Error("아이템을 찾을 수 없습니다.");
+ }
+
+ // 조선 아이템 테이블에서 먼저 삭제
+ await tx.delete(itemShipbuilding)
+ .where(eq(itemShipbuilding.itemId, input.id));
+
+ // 기본 아이템 테이블에서 삭제
+ await deleteItemById(tx, input.id);
+ });
+
+ revalidateTag("items");
+
+ return { data: null, error: null };
+ } catch (err) {
+ return { data: null, error: getErrorMessage(err) };
+ }
+}
+
+/** 복수 삭제 */
+export async function removeShipbuildingItems(input: DeleteItemsInput) {
+ unstable_noStore();
+ try {
+ await db.transaction(async (tx) => {
+ if (input.ids.length > 0) {
+ // 조선 아이템 테이블에서 먼저 삭제
+ await tx.delete(itemShipbuilding)
+ .where(inArray(itemShipbuilding.itemId, input.ids));
+
+ // 기본 아이템 테이블에서 삭제
+ await deleteItemsByIds(tx, input.ids);
+ }
+ });
+
+ revalidateTag("items");
+
+ return { data: null, error: null, success: true, message: "아이템이 성공적으로 삭제되었습니다." };
+ } catch (err) {
+ return { data: null, error: getErrorMessage(err), success: false, message: "아이템 삭제 중 오류가 발생했습니다." };
+ }
+}
+
+export async function getAllShipbuildingItems(): Promise<Item[]> {
+ try {
+ return await findAllItems();
+ } catch (error) {
+ console.error("Failed to get items:", error);
+ throw new Error("Failed to get items");
+ }
+}
diff --git a/lib/items-ship/table/Items-ship-table.tsx b/lib/items-ship/table/Items-ship-table.tsx
new file mode 100644
index 00000000..486c1481
--- /dev/null
+++ b/lib/items-ship/table/Items-ship-table.tsx
@@ -0,0 +1,140 @@
+"use client"
+
+import * as React from "react"
+import type {
+ DataTableFilterField,
+ DataTableAdvancedFilterField,
+ 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 { getShipbuildingItems } from "../service"
+import { getShipbuildingColumns } from "./items-ship-table-columns"
+import { ItemsTableToolbarActions } from "./items-table-toolbar-actions"
+import { DeleteItemsDialog } from "./delete-items-dialog"
+
+// 서비스에서 반환하는 데이터 타입 정의
+type ShipbuildingItem = {
+ id: number;
+ itemId: number;
+ workType: "기장" | "전장" | "선실" | "배관" | "철의";
+ shipTypes: string;
+ itemCode: string | null;
+ itemName: string;
+ description: string | null;
+ createdAt: Date;
+ updatedAt: Date;
+}
+
+interface ItemsTableProps {
+ promises: Promise<Awaited<ReturnType<typeof getShipbuildingItems>>>
+}
+
+export function ItemsShipTable({ promises }: ItemsTableProps) {
+ const { data, pageCount } = React.use(promises)
+
+ // 아이템 타입에 따른 행 액션 상태 관리
+ const [rowAction, setRowAction] = React.useState<DataTableRowAction<ShipbuildingItem> | null>(null)
+ const columns = getShipbuildingColumns({ setRowAction })
+ const filterFields: DataTableFilterField<ShipbuildingItem>[] = [
+ {
+ id: "itemCode",
+ label: "Item Code",
+ },
+ {
+ id: "itemName",
+ label: "Item Name",
+ },
+ {
+ id: "workType",
+ label: "기능(공종)",
+ },
+ {
+ id: "shipTypes",
+ label: "선종",
+ },
+ ]
+
+ /**
+ * 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<ShipbuildingItem>[] = [
+ {
+ id: "itemCode",
+ label: "Item Code",
+ type: "text",
+ },
+ {
+ id: "itemName",
+ label: "Item Name",
+ type: "text",
+ },
+ {
+ id: "description",
+ label: "Description",
+ type: "text",
+ },
+ {
+ id: "workType",
+ label: "기능(공종)",
+ type: "text",
+ },
+ {
+ id: "shipTypes",
+ label: "선종",
+ 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 as ShipbuildingItem}
+ /> */}
+ <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-ship/table/add-items-dialog.tsx b/lib/items-ship/table/add-items-dialog.tsx
new file mode 100644
index 00000000..4abf5f8a
--- /dev/null
+++ b/lib/items-ship/table/add-items-dialog.tsx
@@ -0,0 +1,219 @@
+"use client"
+
+import * as React from "react"
+import { useForm } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { z } from "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 { Textarea } from "@/components/ui/textarea"
+// react-hook-form + shadcn/ui Form
+import {
+ Form,
+ FormControl,
+ FormField,
+ FormItem,
+ FormLabel,
+ FormMessage,
+} from "@/components/ui/form"
+
+import {
+ createShipbuildingItemSchema,
+
+} from "../validations"
+import { createShipbuildingItem } from "../service"
+import { ItemType } from "./excel/item-excel-template"
+import { Plus } from "lucide-react"
+import { toast } from "sonner"
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "@/components/ui/select"
+
+
+interface AddItemDialogProps {
+ itemType?: ItemType
+}
+
+const workTypes = [
+ { value: "기장", label: "기장" },
+ { value: "전장", label: "전장" },
+ { value: "선실", label: "선실" },
+ { value: "배관", label: "배관" },
+ { value: "철의", label: "철의" },
+] as const
+
+export function AddItemDialog({ itemType = 'shipbuilding' }: AddItemDialogProps) {
+ const [open, setOpen] = React.useState(false)
+ const [isSubmitting, setIsSubmitting] = React.useState(false)
+
+ // 아이템 타입에 따라 다른 폼과 스키마 사용
+ const getFormAndSchema = () => {
+ return {
+ schema: createShipbuildingItemSchema,
+ defaultValues: {
+ itemCode: "",
+ itemName: "",
+ description: "",
+ workType: "",
+ shipTypes: "",
+ }
+ };
+ };
+
+ const { schema, defaultValues } = getFormAndSchema();
+
+ // 타입 안전성을 위해 구체적인 타입 사용
+ type ItemFormSchema =
+ | z.infer<typeof createShipbuildingItemSchema>
+
+
+ const form = useForm<ItemFormSchema>({
+ resolver: zodResolver(schema),
+ defaultValues,
+ });
+
+ async function onSubmit(values: ItemFormSchema) {
+ try {
+ setIsSubmitting(true)
+
+ // 타입에 따라 다른 로직 추가 가능
+ const result = await createShipbuildingItem(values)
+
+ if (result.success) {
+ toast.success("아이템이 추가되었습니다.")
+ form.reset()
+ setOpen(false)
+ } else {
+ toast.error(result.message || "아이템 추가 실패")
+ }
+ } catch (error) {
+ toast.error("오류가 발생했습니다.")
+ console.error(error)
+ } finally {
+ setIsSubmitting(false)
+ }
+ }
+
+
+
+ return (
+ <Dialog open={open} onOpenChange={setOpen}>
+ <DialogTrigger asChild>
+ <Button variant="outline" size="sm" className="ml-auto gap-2">
+ <Plus className="h-4 w-4" />
+ <span className="hidden sm:inline">Add Item</span>
+ </Button>
+ </DialogTrigger>
+ <DialogContent className="sm:max-w-[425px] max-h-[80vh] flex flex-col">
+ <DialogHeader>
+ <DialogTitle>아이템 추가</DialogTitle>
+ <DialogDescription>
+ {'조선 아이템을 추가합니다. 아이템 코드, 이름, 설명을 입력하세요.'}
+ </DialogDescription>
+ </DialogHeader>
+ <div className="overflow-y-auto pr-2">
+ <Form {...form}>
+ <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+ <FormField
+ control={form.control}
+ name="itemCode"
+ render={({ field }) => (
+ <FormItem>
+ <FormLabel>아이템 코드</FormLabel>
+ <FormControl>
+ <Input placeholder={`예: ${itemType === 'shipbuilding' ? 'SB001' : itemType === 'offshoreTop' ? 'OT001' : 'OH001'}`} {...field} />
+ </FormControl>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
+ <FormField
+ control={form.control}
+ name="itemName"
+ render={({ field }) => (
+ <FormItem>
+ <FormLabel>아이템 이름</FormLabel>
+ <FormControl>
+ <Input placeholder="아이템 이름 입력" {...field} />
+ </FormControl>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
+ <FormField
+ control={form.control}
+ name="description"
+ render={({ field }) => (
+ <FormItem>
+ <FormLabel>설명</FormLabel>
+ <FormControl>
+ <Textarea placeholder="설명 입력 (선택사항)" {...field} />
+ </FormControl>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
+ <FormField
+ control={form.control}
+ name="workType"
+ render={({ field }) => (
+ <FormItem>
+ <FormLabel>기능(공종)</FormLabel>
+ <FormControl>
+ <Select
+ onValueChange={field.onChange}
+ defaultValue={field.value}
+ >
+ <FormControl>
+ <SelectTrigger>
+ <SelectValue placeholder={`${itemType === 'shipbuilding' ? '기능(공종)' : itemType === 'offshoreTop' ? '예: TM, TS' : '예: HA, HE'}을 선택하세요`} />
+ </SelectTrigger>
+ </FormControl>
+ <SelectContent>
+ {workTypes.map((type) => (
+ <SelectItem key={type.value} value={type.value}>
+ {type.label}
+ </SelectItem>
+ ))}
+ </SelectContent>
+ </Select>
+ </FormControl>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
+
+ {/* 조선 아이템인 경우 선종 필드 표시 */}
+ {itemType === 'shipbuilding' && (
+ <FormField
+ control={form.control}
+ name="shipTypes"
+ render={({ field }) => (
+ <FormItem>
+ <FormLabel>선종</FormLabel>
+ <FormControl>
+ <Input placeholder="예: A-MAX, VLCC, S-MAX" {...field} />
+ </FormControl>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
+ )}
+ <DialogFooter className="mt-4">
+ <Button type="submit" disabled={isSubmitting}>
+ {isSubmitting ? "추가 중..." : "추가"}
+ </Button>
+ </DialogFooter>
+ </form>
+ </Form>
+ </div>
+ </DialogContent>
+ </Dialog>
+ )
+} \ No newline at end of file
diff --git a/lib/items-ship/table/delete-items-dialog.tsx b/lib/items-ship/table/delete-items-dialog.tsx
new file mode 100644
index 00000000..1b847550
--- /dev/null
+++ b/lib/items-ship/table/delete-items-dialog.tsx
@@ -0,0 +1,169 @@
+"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 { removeShipbuildingItems } from "../service"
+import { ItemType } from "./excel/item-excel-template"
+
+interface DeleteItemsDialogProps
+ extends React.ComponentPropsWithoutRef<typeof Dialog> {
+ items: Row<Item>["original"][]
+ itemType?: ItemType
+ showTrigger?: boolean
+ onSuccess?: () => void
+}
+
+export function DeleteItemsDialog({
+ items,
+ itemType = 'shipbuilding',
+ showTrigger = true,
+ onSuccess,
+ ...props
+}: DeleteItemsDialogProps) {
+ const [isDeletePending, startDeleteTransition] = React.useTransition()
+ const isDesktop = useMediaQuery("(min-width: 640px)")
+
+ // 아이템 타입에 따른 텍스트 설정
+ const getItemTypeText = () => {
+ switch (itemType) {
+ case 'offshoreTop':
+ return '해양 Top 아이템';
+ case 'offshoreHull':
+ return '해양 Hull 아이템';
+ default:
+ return '조선 아이템';
+ }
+ };
+
+ async function onDelete() {
+ try {
+ startDeleteTransition(async () => {
+ const { error } = await removeShipbuildingItems({
+ ids: items.map((item) => item.id),
+ })
+
+ if (error) {
+ toast.error(error)
+ return
+ }
+
+ props.onOpenChange?.(false)
+ toast.success("아이템 삭제 완료")
+ onSuccess?.()
+ })
+ } catch (error) {
+ toast.error("오류가 발생했습니다.")
+ console.error(error)
+ }
+ }
+
+ if (isDesktop) {
+ return (
+ <Dialog {...props}>
+ {showTrigger ? (
+ <DialogTrigger asChild>
+ <Button variant="outline" size="sm">
+ <Trash className="mr-2 size-4" aria-hidden="true" />
+ 삭제 ({items.length})
+ </Button>
+ </DialogTrigger>
+ ) : null}
+ <DialogContent>
+ <DialogHeader>
+ <DialogTitle>정말로 삭제하시겠습니까?</DialogTitle>
+ <DialogDescription>
+ 이 작업은 되돌릴 수 없습니다. 선택한{" "}
+ <span className="font-medium">{items.length}</span>
+ 개의 {getItemTypeText()}이(가) 영구적으로 삭제됩니다.
+ </DialogDescription>
+ </DialogHeader>
+ <DialogFooter className="gap-2 sm:space-x-0">
+ <DialogClose asChild>
+ <Button variant="outline">취소</Button>
+ </DialogClose>
+ <Button
+ aria-label="삭제 확인"
+ variant="destructive"
+ onClick={onDelete}
+ disabled={isDeletePending}
+ >
+ {isDeletePending && (
+ <Loader
+ className="mr-2 size-4 animate-spin"
+ aria-hidden="true"
+ />
+ )}
+ 삭제
+ </Button>
+ </DialogFooter>
+ </DialogContent>
+ </Dialog>
+ )
+ }
+
+ return (
+ <Drawer {...props}>
+ {showTrigger ? (
+ <DrawerTrigger asChild>
+ <Button variant="outline" size="sm">
+ <Trash className="mr-2 size-4" aria-hidden="true" />
+ 삭제 ({items.length})
+ </Button>
+ </DrawerTrigger>
+ ) : null}
+ <DrawerContent>
+ <DrawerHeader>
+ <DrawerTitle>정말로 삭제하시겠습니까?</DrawerTitle>
+ <DrawerDescription>
+ 이 작업은 되돌릴 수 없습니다. 선택한{" "}
+ <span className="font-medium">{items.length}</span>
+ 개의 {getItemTypeText()}이(가) 영구적으로 삭제됩니다.
+ </DrawerDescription>
+ </DrawerHeader>
+ <DrawerFooter className="gap-2 sm:space-x-0">
+ <DrawerClose asChild>
+ <Button variant="outline">취소</Button>
+ </DrawerClose>
+ <Button
+ aria-label="삭제 확인"
+ variant="destructive"
+ onClick={onDelete}
+ disabled={isDeletePending}
+ >
+ {isDeletePending && (
+ <Loader className="mr-2 size-4 animate-spin" aria-hidden="true" />
+ )}
+ 삭제
+ </Button>
+ </DrawerFooter>
+ </DrawerContent>
+ </Drawer>
+ )
+}
diff --git a/lib/items-ship/table/feature-flags.tsx b/lib/items-ship/table/feature-flags.tsx
new file mode 100644
index 00000000..aaae6af2
--- /dev/null
+++ b/lib/items-ship/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-ship/table/import-excel-button.tsx b/lib/items-ship/table/import-excel-button.tsx
new file mode 100644
index 00000000..cc6c9b73
--- /dev/null
+++ b/lib/items-ship/table/import-excel-button.tsx
@@ -0,0 +1,263 @@
+"use client"
+
+import * as React from "react"
+import { Upload } from "lucide-react"
+import { toast } from "sonner"
+import * as ExcelJS from 'exceljs'
+
+import { Button } from "@/components/ui/button"
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogFooter,
+ DialogHeader,
+ DialogTitle,
+} from "@/components/ui/dialog"
+import { Progress } from "@/components/ui/progress"
+import { processFileImport } from "./import-item-handler"
+
+const SHIP_TYPES = ['A-MAX', 'S-MAX', 'LNGC', 'VLCC', 'CONT'] as const;
+
+interface ImportItemButtonProps {
+ onSuccess?: () => void
+}
+
+export function ImportItemButton({ onSuccess }: ImportItemButtonProps) {
+ const [open, setOpen] = React.useState(false)
+ const [file, setFile] = React.useState<File | null>(null)
+ const [isUploading, setIsUploading] = React.useState(false)
+ const [progress, setProgress] = React.useState(0)
+ const [error, setError] = React.useState<string | null>(null)
+ const fileInputRef = React.useRef<HTMLInputElement>(null)
+
+ // 파일 선택 처리
+ const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+ const selectedFile = e.target.files?.[0]
+ if (!selectedFile) return
+
+ if (!selectedFile.name.endsWith('.xlsx') && !selectedFile.name.endsWith('.xls')) {
+ setError("Excel 파일(.xlsx 또는 .xls)만 가능합니다.")
+ return
+ }
+
+ setFile(selectedFile)
+ setError(null)
+ }
+
+ // 데이터 가져오기 처리
+ const handleImport = async () => {
+ if (!file) {
+ setError("가져올 파일을 선택해주세요.")
+ return
+ }
+
+ try {
+ setIsUploading(true)
+ setProgress(0)
+ setError(null)
+
+ // 파일을 ArrayBuffer로 읽기
+ const arrayBuffer = await file.arrayBuffer();
+
+ // ExcelJS 워크북 로드
+ const workbook = new ExcelJS.Workbook();
+ await workbook.xlsx.load(arrayBuffer);
+
+ // 첫 번째 워크시트 가져오기
+ const worksheet = workbook.worksheets[0];
+ if (!worksheet) {
+ throw new Error("Excel 파일에 워크시트가 없습니다.");
+ }
+
+ // 헤더 행 찾기
+ let headerRowIndex = 1;
+ let headerRow: ExcelJS.Row | undefined;
+ let headerValues: (string | null)[] = [];
+
+ worksheet.eachRow((row, rowNumber) => {
+ const values = row.values as (string | null)[];
+ if (!headerRow && values.some(v => v === "아이템 코드" || v === "itemCode" || v === "item_code")) {
+ headerRowIndex = rowNumber;
+ headerRow = row;
+ headerValues = [...values];
+ }
+ });
+
+ if (!headerRow) {
+ throw new Error("Excel 파일에서 헤더 행을 찾을 수 없습니다.");
+ }
+
+ // 헤더를 기반으로 인덱스 매핑 생성
+ const headerMapping: Record<string, number> = {};
+ headerValues.forEach((value, index) => {
+ if (typeof value === 'string') {
+ headerMapping[value] = index;
+ }
+ });
+
+ const requiredHeaders = ["아이템 코드", "아이템 명", "기능(공종)", ...SHIP_TYPES];
+ const alternativeHeaders = {
+ "아이템 코드": ["itemCode", "item_code"],
+ "아이템 명": ["itemName", "item_name"],
+ "기능(공종)": ["workType"],
+ "설명": ["description"]
+ };
+
+ // 헤더 매핑 확인 (대체 이름 포함)
+ const missingHeaders = requiredHeaders.filter(header => {
+ const alternatives = alternativeHeaders[header as keyof typeof alternativeHeaders] || [];
+ return !(header in headerMapping) &&
+ !alternatives.some(alt => alt in headerMapping);
+ });
+
+ if (missingHeaders.length > 0) {
+ throw new Error(`다음 필수 헤더가 누락되었습니다: ${missingHeaders.join(", ")}`);
+ }
+
+ // 데이터 행 추출 (헤더 이후 행부터)
+ const dataRows: Record<string, any>[] = [];
+
+ worksheet.eachRow((row, rowNumber) => {
+ if (rowNumber > headerRowIndex) {
+ const rowData: Record<string, any> = {};
+ const values = row.values as (string | null | undefined)[];
+
+ // 헤더 매핑에 따라 데이터 추출
+ Object.entries(headerMapping).forEach(([header, index]) => {
+ rowData[header] = values[index] || "";
+ });
+
+ // 빈 행이 아닌 경우만 추가
+ if (Object.values(rowData).some(value => value && value.toString().trim() !== "")) {
+ dataRows.push(rowData);
+ }
+ }
+ });
+
+ if (dataRows.length === 0) {
+ throw new Error("Excel 파일에 가져올 데이터가 없습니다.");
+ }
+
+ // 진행 상황 업데이트를 위한 콜백
+ const updateProgress = (current: number, total: number) => {
+ const percentage = Math.round((current / total) * 100);
+ setProgress(percentage);
+ };
+
+ const result = await processFileImport(dataRows, updateProgress);
+
+ toast.success(`${result.successCount}개의 조선 아이템이 성공적으로 가져와졌습니다.`);
+
+ if (result.errorCount > 0) {
+ toast.warning(`${result.errorCount}개의 항목은 처리할 수 없었습니다.`);
+ }
+
+ // 상태 초기화 및 다이얼로그 닫기
+ setFile(null);
+ setOpen(false);
+
+ // 성공 콜백 호출
+ if (onSuccess) {
+ onSuccess();
+ }
+ } catch (error) {
+ console.error("Excel 파일 처리 중 오류 발생:", error);
+ setError(error instanceof Error ? error.message : "파일 처리 중 오류가 발생했습니다.");
+ } finally {
+ setIsUploading(false);
+ }
+ };
+
+ // 다이얼로그 열기/닫기 핸들러
+ const handleOpenChange = (newOpen: boolean) => {
+ if (!newOpen) {
+ // 닫을 때 상태 초기화
+ setFile(null)
+ setError(null)
+ setProgress(0)
+ if (fileInputRef.current) {
+ fileInputRef.current.value = ""
+ }
+ }
+ setOpen(newOpen)
+ }
+
+ return (
+ <>
+ <Button
+ variant="outline"
+ size="sm"
+ className="gap-2"
+ onClick={() => setOpen(true)}
+ disabled={isUploading}
+ >
+ <Upload className="size-4" aria-hidden="true" />
+ <span className="hidden sm:inline">Import</span>
+ </Button>
+
+ <Dialog open={open} onOpenChange={handleOpenChange}>
+ <DialogContent className="sm:max-w-[500px]">
+ <DialogHeader>
+ <DialogTitle>조선 아이템 가져오기</DialogTitle>
+ <DialogDescription>
+ 조선 아이템을 Excel 파일에서 가져옵니다.
+ <br />
+ 올바른 형식의 Excel 파일(.xlsx)을 업로드하세요.
+ </DialogDescription>
+ </DialogHeader>
+
+ <div className="space-y-4 py-4">
+ <div className="flex items-center gap-4">
+ <input
+ type="file"
+ ref={fileInputRef}
+ className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-foreground file:font-medium"
+ accept=".xlsx,.xls"
+ onChange={handleFileChange}
+ disabled={isUploading}
+ />
+ </div>
+
+ {file && (
+ <div className="text-sm text-muted-foreground">
+ 선택된 파일: <span className="font-medium">{file.name}</span> ({(file.size / 1024).toFixed(1)} KB)
+ </div>
+ )}
+
+ {isUploading && (
+ <div className="space-y-2">
+ <Progress value={progress} />
+ <p className="text-sm text-muted-foreground text-center">
+ {progress}% 완료
+ </p>
+ </div>
+ )}
+
+ {error && (
+ <div className="text-sm font-medium text-destructive">
+ {error}
+ </div>
+ )}
+ </div>
+
+ <DialogFooter>
+ <Button
+ variant="outline"
+ onClick={() => setOpen(false)}
+ disabled={isUploading}
+ >
+ 취소
+ </Button>
+ <Button
+ onClick={handleImport}
+ disabled={!file || isUploading}
+ >
+ {isUploading ? "처리 중..." : "가져오기"}
+ </Button>
+ </DialogFooter>
+ </DialogContent>
+ </Dialog>
+ </>
+ )
+} \ No newline at end of file
diff --git a/lib/items-ship/table/import-item-handler.tsx b/lib/items-ship/table/import-item-handler.tsx
new file mode 100644
index 00000000..07086c94
--- /dev/null
+++ b/lib/items-ship/table/import-item-handler.tsx
@@ -0,0 +1,145 @@
+"use client"
+
+import { z } from "zod"
+import { createShipbuildingImportItem, createShipbuildingItem } from "../service" // 아이템 생성 서버 액션
+
+const SHIP_TYPES = ['A-MAX', 'S-MAX', 'LNGC', 'VLCC', 'CONT'] as const;
+
+// 아이템 데이터 검증을 위한 Zod 스키마
+const itemSchema = z.object({
+ itemCode: z.string().min(1, "아이템 코드는 필수입니다"),
+ itemName: z.string().min(1, "아이템 명은 필수입니다"),
+ workType: z.enum(["기장", "전장", "선실", "배관", "철의"], {
+ required_error: "기능(공종)은 필수입니다",
+ }),
+ description: z.string().nullable().optional(),
+});
+
+interface ProcessResult {
+ successCount: number;
+ errorCount: number;
+ errors?: Array<{ row: number; message: string }>;
+}
+
+/**
+ * Excel 파일에서 가져온 조선 아이템 데이터 처리하는 함수
+ */
+export async function processFileImport(
+ jsonData: any[],
+ progressCallback?: (current: number, total: number) => void
+): Promise<ProcessResult> {
+ // 결과 카운터 초기화
+ let successCount = 0;
+ let errorCount = 0;
+ const errors: Array<{ row: number; message: string }> = [];
+
+ // 빈 행 등 필터링
+ const dataRows = jsonData.filter(row => {
+ // 빈 행 건너뛰기
+ if (Object.values(row).every(val => !val)) {
+ return false;
+ }
+ return true;
+ });
+
+ // 데이터 행이 없으면 빈 결과 반환
+ if (dataRows.length === 0) {
+ return { successCount: 0, errorCount: 0 };
+ }
+
+ // 각 행에 대해 처리
+ for (let i = 0; i < dataRows.length; i++) {
+ const row = dataRows[i];
+ const rowIndex = i + 1; // 사용자에게 표시할 행 번호는 1부터 시작
+
+ // 진행 상황 콜백 호출
+ if (progressCallback) {
+ progressCallback(i + 1, dataRows.length);
+ }
+
+ try {
+ // 필드 매핑 (한글/영문 필드명 모두 지원)
+ const itemCode = row["아이템 코드"] || row["itemCode"] || "";
+ const itemName = row["아이템 명"] || row["itemName"] || "";
+ const workType = row["기능(공종)"] || row["workType"] || "";
+ const description = row["설명"] || row["description"] || null;
+
+ // 데이터 정제
+ const cleanedRow = {
+ itemCode: typeof itemCode === 'string' ? itemCode.trim() : String(itemCode).trim(),
+ itemName: typeof itemName === 'string' ? itemName.trim() : String(itemName).trim(),
+ workType: typeof workType === 'string' ? workType.trim() : String(workType).trim(),
+ description: description ? (typeof description === 'string' ? description : String(description)) : null,
+ };
+
+ // 데이터 유효성 검사
+ const validationResult = itemSchema.safeParse(cleanedRow);
+
+ if (!validationResult.success) {
+ const errorMessage = validationResult.error.errors.map(
+ err => `${err.path.join('.')}: ${err.message}`
+ ).join(', ');
+
+ errors.push({ row: rowIndex, message: errorMessage });
+ errorCount++;
+ continue;
+ }
+
+ // 선종 데이터 처리
+ const shipTypeEntries = SHIP_TYPES.map(type => ({
+ type,
+ value: row[type]?.toUpperCase() === 'O'
+ })).filter(entry => entry.value);
+ console.log('shipTypeEntries:', shipTypeEntries);
+
+ if (shipTypeEntries.length === 0) {
+ errors.push({
+ row: rowIndex,
+ message: "최소 하나 이상의 선종이 'O'로 지정되어야 합니다."
+ });
+ errorCount++;
+ continue;
+ }
+
+ // 각 선종에 대해 아이템 생성
+ for (const { type } of shipTypeEntries) {
+ const result = await createShipbuildingImportItem({
+ itemCode: cleanedRow.itemCode,
+ itemName: cleanedRow.itemName,
+ workType: cleanedRow.workType as "기장" | "전장" | "선실" | "배관" | "철의",
+ shipTypes: { [type]: true },
+ description: cleanedRow.description,
+ });
+
+ if (result.success || !result.error) {
+ successCount++;
+ } else {
+ errors.push({
+ row: rowIndex,
+ message: `${type}: ${result.message || result.error || "알 수 없는 오류"}`
+ });
+ errorCount++;
+ }
+ }
+ } catch (error) {
+ console.error(`${rowIndex}행 처리 오류:`, error);
+ errors.push({
+ row: rowIndex,
+ message: error instanceof Error ? error.message : "알 수 없는 오류"
+ });
+ errorCount++;
+ }
+
+ // 비동기 작업 쓰로틀링
+ if (i % 5 === 0) {
+ await new Promise(resolve => setTimeout(resolve, 10));
+ }
+ }
+
+ // 처리 결과 반환
+ return {
+ successCount,
+ errorCount,
+ errors: errors.length > 0 ? errors : undefined
+ };
+} \ No newline at end of file
diff --git a/lib/items-ship/table/item-excel-template.tsx b/lib/items-ship/table/item-excel-template.tsx
new file mode 100644
index 00000000..127a1dea
--- /dev/null
+++ b/lib/items-ship/table/item-excel-template.tsx
@@ -0,0 +1,122 @@
+import * as ExcelJS from 'exceljs';
+import { saveAs } from "file-saver";
+
+const SHIP_TYPES = ['A-MAX', 'S-MAX', 'LNGC', 'VLCC', 'CONT'] as const;
+
+/**
+ * 조선 아이템 데이터 가져오기를 위한 Excel 템플릿 파일 생성 및 다운로드
+ */
+export async function exportItemTemplate() {
+ // 워크북 생성
+ const workbook = new ExcelJS.Workbook();
+ workbook.creator = 'Shipbuilding Item Management System';
+ workbook.created = new Date();
+
+ // 워크시트 생성
+ const worksheet = workbook.addWorksheet('조선 아이템');
+
+ // 컬럼 헤더 정의 및 스타일 적용
+ worksheet.columns = [
+ { header: '아이템 코드', key: 'itemCode', width: 15 },
+ { header: '아이템 명', key: 'itemName', width: 30 },
+ { header: '기능(공종)', key: 'workType', width: 15 },
+ { header: '설명', key: 'description', width: 50 },
+ ...SHIP_TYPES.map(type => ({
+ header: type,
+ key: type,
+ width: 10
+ }))
+ ];
+
+ // 헤더 스타일 적용
+ const headerRow = worksheet.getRow(1);
+ headerRow.font = { bold: true };
+ headerRow.fill = {
+ type: 'pattern',
+ pattern: 'solid',
+ fgColor: { argb: 'FFE0E0E0' }
+ };
+ headerRow.alignment = { vertical: 'middle', horizontal: 'center' };
+
+ // 테두리 스타일 적용
+ headerRow.eachCell((cell) => {
+ cell.border = {
+ top: { style: 'thin' },
+ left: { style: 'thin' },
+ bottom: { style: 'thin' },
+ right: { style: 'thin' }
+ };
+ });
+
+ // 샘플 데이터 추가
+ const sampleData = [
+ {
+ itemCode: 'BG0001',
+ itemName: '샘플 아이템 1',
+ workType: '기장',
+ description: '이것은 샘플 아이템 1의 설명입니다.',
+ 'A-MAX': 'O',
+ 'S-MAX': 'O',
+ 'LNGC': 'O',
+ 'VLCC': 'X',
+ 'CONT': 'X'
+ },
+ {
+ itemCode: 'BG0002',
+ itemName: '샘플 아이템 2',
+ workType: '전장',
+ description: '이것은 샘플 아이템 2의 설명입니다.',
+ 'A-MAX': 'O',
+ 'S-MAX': 'X',
+ 'LNGC': 'O',
+ 'VLCC': 'O',
+ 'CONT': 'X'
+ }
+ ];
+
+ // 데이터 행 추가
+ sampleData.forEach(item => {
+ worksheet.addRow(item);
+ });
+
+ // 데이터 행 스타일 적용
+ worksheet.eachRow((row, rowNumber) => {
+ if (rowNumber > 1) { // 헤더를 제외한 데이터 행
+ row.eachCell((cell) => {
+ cell.border = {
+ top: { style: 'thin' },
+ left: { style: 'thin' },
+ bottom: { style: 'thin' },
+ right: { style: 'thin' }
+ };
+ });
+ }
+ });
+
+ // 워크시트 보호 (선택적)
+ worksheet.protect('', {
+ selectLockedCells: true,
+ selectUnlockedCells: true,
+ formatColumns: true,
+ formatRows: true,
+ insertColumns: false,
+ insertRows: true,
+ insertHyperlinks: false,
+ deleteColumns: false,
+ deleteRows: true,
+ sort: true,
+ autoFilter: true,
+ pivotTables: false
+ });
+
+ try {
+ // 워크북을 Blob으로 변환
+ const buffer = await workbook.xlsx.writeBuffer();
+ const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
+ saveAs(blob, 'shipbuilding-item-template.xlsx');
+ return true;
+ } catch (error) {
+ console.error('Excel 템플릿 생성 오류:', error);
+ throw error;
+ }
+} \ No newline at end of file
diff --git a/lib/items-ship/table/items-ship-table-columns.tsx b/lib/items-ship/table/items-ship-table-columns.tsx
new file mode 100644
index 00000000..158cd791
--- /dev/null
+++ b/lib/items-ship/table/items-ship-table-columns.tsx
@@ -0,0 +1,244 @@
+"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 { Button } from "@/components/ui/button"
+import { Checkbox } from "@/components/ui/checkbox"
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuSeparator,
+ DropdownMenuShortcut,
+ DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header"
+
+// 테이블 표시에 필요한 데이터 타입 정의
+interface ShipbuildingTableItem {
+ id: number;
+ itemId: number;
+ workType: "기장" | "전장" | "선실" | "배관" | "철의";
+ shipTypes: string;
+ itemCode: string | null;
+ itemName: string;
+ description: string | null;
+ createdAt: Date;
+ updatedAt: Date;
+}
+
+interface GetColumnsProps {
+ setRowAction: React.Dispatch<React.SetStateAction<DataTableRowAction<ShipbuildingTableItem> | null>>
+}
+
+/**
+ * 조선 아이템 테이블 컬럼 정의
+ */
+export function getShipbuildingColumns({ setRowAction }: GetColumnsProps): ColumnDef<ShipbuildingTableItem>[] {
+ // ----------------------------------------------------------------
+ // 1) select 컬럼 (체크박스)
+ // ----------------------------------------------------------------
+ const selectColumn: ColumnDef<ShipbuildingTableItem> = {
+ 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<ShipbuildingTableItem> = {
+ id: "actions",
+ cell: ({ row }) => (
+ <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" })}
+ >
+ 수정
+ </DropdownMenuItem>
+ <DropdownMenuSeparator />
+ <DropdownMenuItem
+ onSelect={() => setRowAction({ row, type: "delete" })}
+ className="text-destructive"
+ >
+ 삭제
+ <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>
+ </DropdownMenuItem>
+ </DropdownMenuContent>
+ </DropdownMenu>
+ ),
+ size: 40,
+ enableSorting: false,
+ enableHiding: false,
+ }
+
+ // ----------------------------------------------------------------
+ // 3) 데이터 컬럼들을 그룹별로 구성
+ // ----------------------------------------------------------------
+
+ // 3-1) 기본 정보 그룹 컬럼
+ const basicInfoColumns: ColumnDef<ShipbuildingTableItem>[] = [
+ {
+ accessorKey: "itemCode",
+ header: ({ column }) => (
+ <DataTableColumnHeaderSimple column={column} title="Material Group" />
+ ),
+ cell: ({ row }) => <div>{row.original.itemCode}</div>,
+ enableSorting: true,
+ enableHiding: true,
+ meta: {
+ excelHeader: "Material Group",
+ group: "기본 정보",
+ },
+ },
+ {
+ accessorKey: "itemName",
+ header: ({ column }) => (
+ <DataTableColumnHeaderSimple column={column} title="Description" />
+ ),
+ cell: ({ row }) => <div>{row.original.itemName}</div>,
+ enableSorting: true,
+ enableHiding: true,
+ meta: {
+ excelHeader: "Description",
+ group: "기본 정보",
+ },
+ },
+ {
+ accessorKey: "workType",
+ header: ({ column }) => (
+ <DataTableColumnHeaderSimple column={column} title="기능(공종)" />
+ ),
+ cell: ({ row }) => <div>{row.original.workType}</div>,
+ enableSorting: true,
+ enableHiding: true,
+ meta: {
+ excelHeader: "기능(공종)",
+ group: "기본 정보",
+ },
+ },
+ {
+ accessorKey: "description",
+ header: ({ column }) => (
+ <DataTableColumnHeaderSimple column={column} title="Size/Dimension" />
+ ),
+ cell: ({ row }) => <div>{row.original.description || "-"}</div>,
+ enableSorting: true,
+ enableHiding: true,
+ meta: {
+ excelHeader: "Size/Dimension",
+ group: "기본 정보",
+ },
+ },
+ ]
+
+ // 3-2) 선종 정보 그룹 컬럼
+ const shipTypesColumns: ColumnDef<ShipbuildingTableItem>[] = [
+ {
+ accessorKey: "shipTypes",
+ header: ({ column }) => (
+ <DataTableColumnHeaderSimple column={column} title="선종" />
+ ),
+ cell: ({ row }) => <div>{row.original.shipTypes}</div>,
+ enableSorting: true,
+ enableHiding: true,
+ meta: {
+ excelHeader: "선종",
+ group: "선종",
+ },
+ },
+ ]
+
+ // 3-3) 메타데이터 그룹 컬럼
+ const metadataColumns: ColumnDef<ShipbuildingTableItem>[] = [
+
+ {
+ accessorKey: "createdAt",
+ header: ({ column }) => (
+ <DataTableColumnHeaderSimple column={column} title="생성일" />
+ ),
+ cell: ({ row }) => formatDate(row.original.createdAt),
+ enableSorting: true,
+ enableHiding: true,
+ meta: {
+ excelHeader: "생성일",
+ group: "Metadata",
+ },
+ },
+ {
+ accessorKey: "updatedAt",
+ header: ({ column }) => (
+ <DataTableColumnHeaderSimple column={column} title="수정일" />
+ ),
+ cell: ({ row }) => formatDate(row.original.updatedAt),
+ enableSorting: true,
+ enableHiding: true,
+ meta: {
+ excelHeader: "수정일",
+ group: "Metadata",
+ },
+ }
+ ]
+
+ // 3-4) 그룹별 컬럼 구성
+ const groupedColumns: ColumnDef<ShipbuildingTableItem>[] = [
+ {
+ id: "기본 정보",
+ header: "기본 정보",
+ columns: basicInfoColumns,
+ },
+ {
+ id: "선종",
+ header: "선종",
+ columns: shipTypesColumns,
+ },
+ {
+ id: "Metadata",
+ header: "Metadata",
+ columns: metadataColumns,
+ }
+ ]
+
+ // ----------------------------------------------------------------
+ // 4) 최종 컬럼 배열: select, groupedColumns, actions
+ // ----------------------------------------------------------------
+ return [
+ selectColumn,
+ ...groupedColumns,
+ actionsColumn,
+ ]
+} \ No newline at end of file
diff --git a/lib/items-ship/table/items-table-toolbar-actions.tsx b/lib/items-ship/table/items-table-toolbar-actions.tsx
new file mode 100644
index 00000000..a8cca179
--- /dev/null
+++ b/lib/items-ship/table/items-table-toolbar-actions.tsx
@@ -0,0 +1,177 @@
+"use client"
+
+import * as React from "react"
+import { type Table } from "@tanstack/react-table"
+import { Download, FileDown } from "lucide-react"
+import * as ExcelJS from 'exceljs'
+import { saveAs } from "file-saver"
+
+import { Button } from "@/components/ui/button"
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+
+import { DeleteItemsDialog } from "./delete-items-dialog"
+import { AddItemDialog } from "./add-items-dialog"
+import { exportItemTemplate } from "./item-excel-template"
+import { ImportItemButton } from "./import-excel-button"
+
+// 조선 아이템 타입 정의
+interface ShipbuildingItem {
+ id: number;
+ itemId: number;
+ workType: "기장" | "전장" | "선실" | "배관" | "철의";
+ shipTypes: string;
+ itemCode: string | null;
+ itemName: string;
+ description: string | null;
+ createdAt: Date;
+ updatedAt: Date;
+}
+
+interface ItemsTableToolbarActionsProps {
+ table: Table<ShipbuildingItem>
+}
+
+export function ItemsTableToolbarActions({ table }: ItemsTableToolbarActionsProps) {
+ const [refreshKey, setRefreshKey] = React.useState(0)
+
+ // 가져오기 성공 후 테이블 갱신
+ const handleImportSuccess = () => {
+ setRefreshKey(prev => prev + 1)
+ }
+
+ // Excel 내보내기 함수
+ const exportTableToExcel = async (
+ table: Table<ShipbuildingItem>,
+ options: {
+ filename: string;
+ excludeColumns?: string[];
+ sheetName?: string;
+ }
+ ) => {
+ const { filename, excludeColumns = [], sheetName = "조선 아이템 목록" } = options;
+
+ // 워크북 생성
+ const workbook = new ExcelJS.Workbook();
+ workbook.creator = 'Shipbuilding Item Management System';
+ workbook.created = new Date();
+
+ // 워크시트 생성
+ const worksheet = workbook.addWorksheet(sheetName);
+
+ // 테이블 데이터 가져오기
+ const data = table.getFilteredRowModel().rows.map(row => row.original);
+ console.log("내보내기 데이터:", data);
+
+ // 필요한 헤더 직접 정의 (필터링 문제 해결)
+ const headers = [
+ { key: 'itemCode', header: '아이템 코드' },
+ { key: 'itemName', header: '아이템 명' },
+ { key: 'description', header: '설명' },
+ { key: 'workType', header: '기능(공종)' },
+ { key: 'shipTypes', header: '선종' }
+ ].filter(header => !excludeColumns.includes(header.key));
+
+ console.log("내보내기 헤더:", headers);
+ // 컬럼 정의
+ worksheet.columns = headers.map(header => ({
+ header: header.header,
+ key: header.key,
+ width: 20 // 기본 너비
+ }));
+
+ // 스타일 적용
+ const headerRow = worksheet.getRow(1);
+ headerRow.font = { bold: true };
+ headerRow.fill = {
+ type: 'pattern',
+ pattern: 'solid',
+ fgColor: { argb: 'FFE0E0E0' }
+ };
+ headerRow.alignment = { vertical: 'middle', horizontal: 'center' };
+
+ // 데이터 행 추가
+ data.forEach(item => {
+ const row: Record<string, any> = {};
+ headers.forEach(header => {
+ row[header.key] = item[header.key as keyof ShipbuildingItem];
+ });
+ worksheet.addRow(row);
+ });
+
+ // 전체 셀에 테두리 추가
+ worksheet.eachRow((row) => {
+ row.eachCell((cell) => {
+ cell.border = {
+ top: { style: 'thin' },
+ left: { style: 'thin' },
+ bottom: { style: 'thin' },
+ right: { style: 'thin' }
+ };
+ });
+ });
+
+ try {
+ // 워크북을 Blob으로 변환
+ const buffer = await workbook.xlsx.writeBuffer();
+ const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
+ saveAs(blob, `${filename}.xlsx`);
+ return true;
+ } catch (error) {
+ console.error("Excel 내보내기 오류:", error);
+ return false;
+ }
+ }
+
+ return (
+ <div className="flex items-center gap-2">
+ {/* 선택된 로우가 있으면 삭제 다이얼로그 */}
+ {table.getFilteredSelectedRowModel().rows.length > 0 ? (
+ <DeleteItemsDialog
+ items={table
+ .getFilteredSelectedRowModel()
+ .rows.map((row) => row.original)}
+ onSuccess={() => table.toggleAllRowsSelected(false)}
+ />
+ ) : null}
+
+ {/* 새 아이템 추가 다이얼로그 */}
+ <AddItemDialog />
+
+ {/* Import 버튼 */}
+ <ImportItemButton onSuccess={handleImportSuccess} />
+
+ {/* Export 드롭다운 메뉴 */}
+ <DropdownMenu>
+ <DropdownMenuTrigger asChild>
+ <Button variant="outline" size="sm" className="gap-2">
+ <Download className="size-4" aria-hidden="true" />
+ <span className="hidden sm:inline">Export</span>
+ </Button>
+ </DropdownMenuTrigger>
+ <DropdownMenuContent align="end">
+ <DropdownMenuItem
+ onClick={() =>
+ exportTableToExcel(table, {
+ filename: "shipbuilding_items",
+ excludeColumns: ["select", "actions"],
+ sheetName: "조선 아이템 목록"
+ })
+ }
+ >
+ <FileDown className="mr-2 h-4 w-4" />
+ <span>현재 데이터 내보내기</span>
+ </DropdownMenuItem>
+ <DropdownMenuItem onClick={() => exportItemTemplate()}>
+ <FileDown className="mr-2 h-4 w-4" />
+ <span>템플릿 다운로드</span>
+ </DropdownMenuItem>
+ </DropdownMenuContent>
+ </DropdownMenu>
+ </div>
+ )
+} \ No newline at end of file
diff --git a/lib/items-ship/table/update-items-sheet.tsx b/lib/items-ship/table/update-items-sheet.tsx
new file mode 100644
index 00000000..8bab9b14
--- /dev/null
+++ b/lib/items-ship/table/update-items-sheet.tsx
@@ -0,0 +1,202 @@
+"use client"
+
+import * as React from "react"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+
+import { Button } from "@/components/ui/button"
+import {
+ Sheet,
+ SheetClose,
+ SheetContent,
+ SheetDescription,
+ SheetFooter,
+ SheetHeader,
+ SheetTitle,
+} from "@/components/ui/sheet"
+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 { Textarea } from "@/components/ui/textarea"
+import { toast } from "sonner"
+
+import { modifyShipbuildingItem } from "../service"
+import { updateShipbuildingItemSchema, type UpdateShipbuildingItemSchema } from "../validations"
+
+const workTypes = [
+ { value: "기장", label: "기장" },
+ { value: "전장", label: "전장" },
+ { value: "선실", label: "선실" },
+ { value: "배관", label: "배관" },
+ { value: "철의", label: "철의" },
+] as const
+
+interface UpdateItemSheetProps {
+ item: {
+ id: number;
+ itemId: number;
+ workType: "기장" | "전장" | "선실" | "배관" | "철의";
+ shipTypes: string;
+ itemCode: string | null;
+ itemName: string;
+ description: string | null;
+ createdAt: Date;
+ updatedAt: Date;
+ }
+ open: boolean
+ onOpenChange: (open: boolean) => void
+}
+
+export function UpdateItemSheet({ item, open, onOpenChange }: UpdateItemSheetProps) {
+ const [isSubmitting, setIsSubmitting] = React.useState(false)
+
+ const form = useForm<UpdateShipbuildingItemSchema>({
+ resolver: zodResolver(updateShipbuildingItemSchema),
+ defaultValues: {
+ itemCode: item.itemCode || "",
+ itemName: item.itemName,
+ description: item.description || "",
+ workType: item.workType,
+ shipTypes: item.shipTypes,
+ },
+ })
+
+ async function onSubmit(data: UpdateShipbuildingItemSchema) {
+ try {
+ setIsSubmitting(true)
+ const result = await modifyShipbuildingItem({ ...data, id: item.id })
+
+ if (result.data) {
+ toast.success("아이템이 수정되었습니다.")
+ onOpenChange(false)
+ } else {
+ toast.error(result.error || "아이템 수정 중 오류가 발생했습니다. 다시 시도해주세요.")
+ }
+ } catch (error) {
+ toast.error("오류가 발생했습니다.")
+ console.error(error)
+ } finally {
+ setIsSubmitting(false)
+ }
+ }
+
+ return (
+ <Sheet open={open} onOpenChange={onOpenChange}>
+ <SheetContent>
+ <SheetHeader>
+ <SheetTitle>조선 아이템 수정</SheetTitle>
+ <SheetDescription>
+ 조선 아이템 정보를 수정합니다. 수정할 필드를 입력해주세요.
+ </SheetDescription>
+ </SheetHeader>
+ <Form {...form}>
+ <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+ <FormField
+ control={form.control}
+ name="itemCode"
+ render={({ field }) => (
+ <FormItem>
+ <FormLabel>Material Group</FormLabel>
+ <FormControl>
+ <Input placeholder="Material Group을 입력하세요" {...field} />
+ </FormControl>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
+ <FormField
+ control={form.control}
+ name="itemName"
+ render={({ field }) => (
+ <FormItem>
+ <FormLabel>Description</FormLabel>
+ <FormControl>
+ <Input placeholder="Description을 입력하세요" {...field} />
+ </FormControl>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
+ <FormField
+ control={form.control}
+ name="workType"
+ render={({ field }) => (
+ <FormItem>
+ <FormLabel>기능(공종)</FormLabel>
+ <Select
+ onValueChange={field.onChange}
+ defaultValue={field.value}
+ >
+ <FormControl>
+ <SelectTrigger>
+ <SelectValue placeholder="기능(공종)을 선택하세요" />
+ </SelectTrigger>
+ </FormControl>
+ <SelectContent>
+ {workTypes.map((type) => (
+ <SelectItem key={type.value} value={type.value}>
+ {type.label}
+ </SelectItem>
+ ))}
+ </SelectContent>
+ </Select>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
+ <FormField
+ control={form.control}
+ name="shipTypes"
+ render={({ field }) => (
+ <FormItem>
+ <FormLabel>선종</FormLabel>
+ <FormControl>
+ <Input placeholder="선종을 입력하세요" {...field} />
+ </FormControl>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
+ <FormField
+ control={form.control}
+ name="description"
+ render={({ field }) => (
+ <FormItem>
+ <FormLabel>Size/Dimension</FormLabel>
+ <FormControl>
+ <Textarea
+ placeholder="Size/Dimension을 입력하세요"
+ {...field}
+ />
+ </FormControl>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
+ <SheetFooter>
+ <SheetClose asChild>
+ <Button variant="outline">취소</Button>
+ </SheetClose>
+ <Button type="submit" disabled={isSubmitting}>
+ {isSubmitting ? "수정 중..." : "수정"}
+ </Button>
+ </SheetFooter>
+ </form>
+ </Form>
+ </SheetContent>
+ </Sheet>
+ )
+} \ No newline at end of file
diff --git a/lib/items-ship/validations.ts b/lib/items-ship/validations.ts
new file mode 100644
index 00000000..dbaff859
--- /dev/null
+++ b/lib/items-ship/validations.ts
@@ -0,0 +1,88 @@
+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 const updateShipbuildingItemSchema = z.object({
+ itemCode: z.string().optional(),
+ itemName: z.string().optional(),
+ description: z.string().optional(),
+ workType: z.string().optional(),
+ shipTypes: 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>
+export type UpdateShipbuildingItemSchema = z.infer<typeof updateShipbuildingItemSchema>
+
+// 조선 아이템 스키마
+export const createShipbuildingItemSchema = z.object({
+ itemCode: z.string(),
+ itemName: z.string(),
+ description: z.string(),
+ workType: z.string(),
+ shipTypes: z.string(),
+})
+
+
+export type CreateShipbuildingItemSchema = z.infer<typeof createShipbuildingItemSchema>
+
+// 기본 아이템 생성 데이터 타입
+export interface ItemCreateData {
+ itemCode: string
+ itemName: string
+ description: string | null
+}
+
+
+// 조선 아이템 생성 데이터 타입
+export interface ShipbuildingItemCreateData extends ItemCreateData {
+ workType: string | null
+ shipTypes: string | null
+}
+
+// 아이템 타입에 따른 생성 데이터 타입
+export type TypedItemCreateData = ShipbuildingItemCreateData
+
generated by cgit v1.2.3 (git 2.39.1) at 2025-12-07 16:29:02 +0000