[as] refactor: 결재선 선택 다이얼로그 통합

apps/as/src/entities/elapr/index.ts

@@ -102,3 +102,12 @@ export type {
   ElaprTmpltService,
   ElaprTmpltUpdateRequest,
 } from "./model/elapr-tmplt-interface";
+export type { ReviewerOption } from "./model/reviewer-option";
+export { AprvrPickerDialog } from "./ui/aprvr-picker-dialog";
+export { ElaprAplnPickerGrid } from "./ui/elapr-apln-picker-grid";
+export {
+  ElaprTmpltPickerDialog,
+  type ElaprTmpltPickerConfirmPayload,
+} from "./ui/elapr-tmplt-picker-dialog";
+export { ElaprTmpltSelectTable } from "./ui/elapr-tmplt-select-table";
+export { SortableAplnPickerRow } from "./ui/sortable-apln-picker-row";

apps/as/src/entities/elapr/ui/aprvr-picker-dialog.tsx

@@ -17,7 +17,7 @@ import {
   TableRow,
 } from "@common/components";
 
-import { type ReviewerOption } from "../../model/reviewer-option";
+import { type ReviewerOption } from "../model/reviewer-option";
 
 const PAGE_SIZE = 500;
 

apps/as/src/entities/elapr/ui/elapr-apln-picker-grid.tsx

@@ -6,13 +6,6 @@ import { closestCenter, DndContext, type DragEndEvent } from "@dnd-kit/core";
 import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
 
 import { useAlertStore } from "@/shared/lib";
-import {
-  type ElaprAplnRow,
-  useAplnRows,
-  useDndSensors,
-  useElaprAplnPage,
-  validateAplnRow,
-} from "@/entities/elapr";
 import {
   Button,
   Skeleton,
@@ -23,7 +16,12 @@ import {
   TableRow,
 } from "@common/components";
 
-import type { ReviewerOption } from "../../model/reviewer-option";
+import { useElaprAplnPage } from "../api/queries";
+import { validateAplnRow } from "../lib/apln-validators";
+import { useAplnRows } from "../lib/use-apln-rows";
+import { useDndSensors } from "../lib/use-dnd-sensors";
+import type { ElaprAplnRow } from "../model/elapr-apln-row-types";
+import type { ReviewerOption } from "../model/reviewer-option";
 
 import { AprvrPickerDialog } from "./aprvr-picker-dialog";
 import { SortableAplnPickerRow } from "./sortable-apln-picker-row";

apps/as/src/entities/elapr/ui/elapr-tmplt-picker-dialog.tsx

@@ -1,163 +1,166 @@
-"use client";
-
-import { useCallback, useState } from "react";
-
-import { useAlertStore } from "@/shared/lib";
-import {
-  type ElaprAplnRow,
-  type ElaprTmplt,
-  getVisibleRows,
-  useElaprTmpltPage,
-  validateAllRowsForSave,
-  validateAtrzOrder,
-  validateUniqueSeqNo,
-} from "@/entities/elapr";
-import {
-  Button,
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@common/components";
-
-import { ElaprAplnPickerGrid } from "./elapr-apln-picker-grid";
-import { ElaprTmpltSelectTable } from "./elapr-tmplt-select-table";
-
-const PAGE_SIZE = 100;
-
-interface ElaprTmpltPickerConfirmPayload {
-  tmplt: ElaprTmplt;
-  aplnRows: ElaprAplnRow[];
-}
-
-interface ElaprTmpltPickerDialogProps {
-  open: boolean;
-  onClose: () => void;
-  onSelect?: (tmplt: ElaprTmplt) => void;
-  onConfirm?: (payload: ElaprTmpltPickerConfirmPayload) => void;
-}
-
-function ElaprTmpltPickerDialog({
-  open,
-  onClose,
-  onSelect,
-  onConfirm,
-}: ElaprTmpltPickerDialogProps) {
-  const alert = useAlertStore((state) => state.setMessage);
-  const [selectedTmplt, setSelectedTmplt] = useState<ElaprTmplt | null>(null);
-  const [aplnRows, setAplnRows] = useState<ElaprAplnRow[]>([]);
-  const [isEditingLocked, setIsEditingLocked] = useState(false);
-
-  const tmpltQuery = useElaprTmpltPage({
-    page: 0,
-    size: PAGE_SIZE,
-    sort: "regDt,desc",
-    docSeComCd: "INSTL",
-  });
-
-  const handleRowsChange = useCallback((rows: ElaprAplnRow[]) => {
-    setAplnRows(rows);
-  }, []);
-
-  const handleEditingLockedChange = useCallback((locked: boolean) => {
-    setIsEditingLocked(locked);
-  }, []);
-
-  function handleSelectTmplt(tmplt: ElaprTmplt | null) {
-    setSelectedTmplt(tmplt);
-    setAplnRows([]);
-    setIsEditingLocked(false);
-  }
-
-  function handleOpenChange(isOpen: boolean) {
-    if (!isOpen) {
-      setSelectedTmplt(null);
-      setAplnRows([]);
-      setIsEditingLocked(false);
-      onClose();
-    }
-  }
-
-  function handleConfirm() {
-    if (!selectedTmplt) {
-      alert("결재서식을 선택해 주세요.");
-      return;
-    }
-
-    const rowsError = validateAllRowsForSave(aplnRows, isEditingLocked);
-    if (rowsError) {
-      alert(rowsError);
-      return;
-    }
-
-    const orderError = validateAtrzOrder(aplnRows);
-    if (orderError) {
-      alert(orderError);
-      return;
-    }
-
-    const seqError = validateUniqueSeqNo(aplnRows);
-    if (seqError) {
-      alert(seqError);
-      return;
-    }
-
-    const visibleRows = getVisibleRows(aplnRows);
-
-    const payload: ElaprTmpltPickerConfirmPayload = {
-      tmplt: selectedTmplt,
-      aplnRows: visibleRows,
-    };
-
-    if (onConfirm) {
-      onConfirm(payload);
-    } else {
-      onSelect?.(selectedTmplt);
-    }
-
-    setSelectedTmplt(null);
-    setAplnRows([]);
-    setIsEditingLocked(false);
-    onClose();
-  }
-
-  return (
-    <Dialog open={open} onOpenChange={handleOpenChange}>
-      <DialogContent className="max-w-[120rem]" aria-describedby={undefined}>
-        <DialogHeader>
-          <DialogTitle>결재선 선택</DialogTitle>
-        </DialogHeader>
-
-        <div className="flex gap-6">
-          <ElaprTmpltSelectTable
-            query={tmpltQuery}
-            selectedTmpltId={selectedTmplt?.elaprTmpltId ?? null}
-            onSelectTmplt={handleSelectTmplt}
-          />
-          <ElaprAplnPickerGrid
-            elaprTmpltId={selectedTmplt?.elaprTmpltId ?? null}
-            onRowsChange={handleRowsChange}
-            onEditingLockedChange={handleEditingLockedChange}
-          />
-        </div>
-
-        <DialogFooter>
-          <Button type="button" color="white" onClick={() => handleOpenChange(false)}>
-            닫기
-          </Button>
-          <Button
-            type="button"
-            disabled={!selectedTmplt || isEditingLocked}
-            onClick={handleConfirm}
-          >
-            확인
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}
-
-export { ElaprTmpltPickerDialog };
-export type { ElaprTmpltPickerConfirmPayload };
+"use client";
+
+import { useCallback, useState } from "react";
+
+import { useAlertStore } from "@/shared/lib";
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@common/components";
+
+import { useElaprTmpltPage } from "../api/queries";
+import {
+  getVisibleRows,
+  validateAllRowsForSave,
+  validateAtrzOrder,
+  validateUniqueSeqNo,
+} from "../lib/apln-validators";
+import type { ElaprAplnRow } from "../model/elapr-apln-row-types";
+import type { ElaprTmplt } from "../model/elapr-tmplt-interface";
+
+import { ElaprAplnPickerGrid } from "./elapr-apln-picker-grid";
+import { ElaprTmpltSelectTable } from "./elapr-tmplt-select-table";
+
+const PAGE_SIZE = 100;
+
+interface ElaprTmpltPickerConfirmPayload {
+  tmplt: ElaprTmplt;
+  aplnRows: ElaprAplnRow[];
+}
+
+interface ElaprTmpltPickerDialogProps {
+  open: boolean;
+  onClose: () => void;
+  docSeComCd: string;
+  onSelect?: (tmplt: ElaprTmplt) => void;
+  onConfirm?: (payload: ElaprTmpltPickerConfirmPayload) => void;
+}
+
+function ElaprTmpltPickerDialog({
+  open,
+  onClose,
+  docSeComCd,
+  onSelect,
+  onConfirm,
+}: ElaprTmpltPickerDialogProps) {
+  const alert = useAlertStore((state) => state.setMessage);
+  const [selectedTmplt, setSelectedTmplt] = useState<ElaprTmplt | null>(null);
+  const [aplnRows, setAplnRows] = useState<ElaprAplnRow[]>([]);
+  const [isEditingLocked, setIsEditingLocked] = useState(false);
+
+  const tmpltQuery = useElaprTmpltPage({
+    page: 0,
+    size: PAGE_SIZE,
+    sort: "regDt,desc",
+    docSeComCd,
+  });
+
+  const handleRowsChange = useCallback((rows: ElaprAplnRow[]) => {
+    setAplnRows(rows);
+  }, []);
+
+  const handleEditingLockedChange = useCallback((locked: boolean) => {
+    setIsEditingLocked(locked);
+  }, []);
+
+  function handleSelectTmplt(tmplt: ElaprTmplt | null) {
+    setSelectedTmplt(tmplt);
+    setAplnRows([]);
+    setIsEditingLocked(false);
+  }
+
+  function handleOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      setSelectedTmplt(null);
+      setAplnRows([]);
+      setIsEditingLocked(false);
+      onClose();
+    }
+  }
+
+  function handleConfirm() {
+    if (!selectedTmplt) {
+      alert("결재서식을 선택해 주세요.");
+      return;
+    }
+
+    const rowsError = validateAllRowsForSave(aplnRows, isEditingLocked);
+    if (rowsError) {
+      alert(rowsError);
+      return;
+    }
+
+    const orderError = validateAtrzOrder(aplnRows);
+    if (orderError) {
+      alert(orderError);
+      return;
+    }
+
+    const seqError = validateUniqueSeqNo(aplnRows);
+    if (seqError) {
+      alert(seqError);
+      return;
+    }
+
+    const visibleRows = getVisibleRows(aplnRows);
+
+    const payload: ElaprTmpltPickerConfirmPayload = {
+      tmplt: selectedTmplt,
+      aplnRows: visibleRows,
+    };
+
+    if (onConfirm) {
+      onConfirm(payload);
+    } else {
+      onSelect?.(selectedTmplt);
+    }
+
+    setSelectedTmplt(null);
+    setAplnRows([]);
+    setIsEditingLocked(false);
+    onClose();
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogContent className="max-w-[120rem]" aria-describedby={undefined}>
+        <DialogHeader>
+          <DialogTitle>결재선 선택</DialogTitle>
+        </DialogHeader>
+
+        <div className="flex gap-6">
+          <ElaprTmpltSelectTable
+            query={tmpltQuery}
+            selectedTmpltId={selectedTmplt?.elaprTmpltId ?? null}
+            onSelectTmplt={handleSelectTmplt}
+          />
+          <ElaprAplnPickerGrid
+            elaprTmpltId={selectedTmplt?.elaprTmpltId ?? null}
+            onRowsChange={handleRowsChange}
+            onEditingLockedChange={handleEditingLockedChange}
+          />
+        </div>
+
+        <DialogFooter>
+          <Button type="button" color="white" onClick={() => handleOpenChange(false)}>
+            닫기
+          </Button>
+          <Button
+            type="button"
+            disabled={!selectedTmplt || isEditingLocked}
+            onClick={handleConfirm}
+          >
+            확인
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export { ElaprTmpltPickerDialog };
+export type { ElaprTmpltPickerConfirmPayload };

apps/as/src/entities/elapr/ui/elapr-tmplt-select-table.tsx

@@ -7,9 +7,10 @@ import { createColumnHelper, getCoreRowModel, type RowSelectionState } from "@ta
 
 import { useDataTable } from "@/shared/lib";
 import type { PageResponse } from "@/shared/model";
-import type { ElaprTmplt } from "@/entities/elapr";
 import { Skeleton } from "@common/components";
 
+import type { ElaprTmplt } from "../model/elapr-tmplt-interface";
+
 const columnHelper = createColumnHelper<ElaprTmplt>();
 
 interface ElaprTmpltSelectTableProps {

apps/as/src/entities/elapr/ui/sortable-apln-picker-row.tsx

@@ -5,7 +5,6 @@ import { CSS } from "@dnd-kit/utilities";
 import { MoveVertical } from "lucide-react";
 
 import { findCodeLabel, useCodeList } from "@/entities/code";
-import type { ElaprAplnRow } from "@/entities/elapr";
 import {
   Button,
   Select,
@@ -17,6 +16,8 @@ import {
   TableRow,
 } from "@common/components";
 
+import type { ElaprAplnRow } from "../model/elapr-apln-row-types";
+
 interface SortableAplnPickerRowProps {
   row: ElaprAplnRow;
   displaySeqNo: number;

apps/as/src/pages/fnrs-cnsltn/ui/components/elapr-apln-picker-grid.tsx

@@ -1,206 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-
-import { closestCenter, DndContext, type DragEndEvent } from "@dnd-kit/core";
-import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
-
-import { useAlertStore } from "@/shared/lib";
-import {
-  type ElaprAplnRow,
-  useAplnRows,
-  useDndSensors,
-  useElaprAplnPage,
-  validateAplnRow,
-} from "@/entities/elapr";
-import {
-  Button,
-  Skeleton,
-  Table,
-  TableBody,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@common/components";
-
-import type { ReviewerOption } from "../../model/reviewer-option";
-
-import { AprvrPickerDialog } from "./aprvr-picker-dialog";
-import { SortableAplnPickerRow } from "./sortable-apln-picker-row";
-
-interface ElaprAplnPickerGridProps {
-  elaprTmpltId: string | null;
-  onRowsChange?: (rows: ElaprAplnRow[]) => void;
-  onEditingLockedChange?: (locked: boolean) => void;
-}
-
-function ElaprAplnPickerGrid({
-  elaprTmpltId,
-  onRowsChange,
-  onEditingLockedChange,
-}: ElaprAplnPickerGridProps) {
-  const [pickerOpen, setPickerOpen] = useState(false);
-  const [pickingRowKey, setPickingRowKey] = useState<string | null>(null);
-
-  const alert = useAlertStore((state) => state.setMessage);
-
-  const aplnQuery = useElaprAplnPage({
-    elaprTmpltId: elaprTmpltId ?? undefined,
-    page: 0,
-    size: 200,
-    sort: "atrzSeqNo,asc",
-  });
-
-  const {
-    rows,
-    visibleRows,
-    editingRowKey,
-    isEditingLocked,
-    addRow,
-    startEdit,
-    updateRow,
-    cancelEdit,
-    commitEdit,
-    markDeleted,
-    reorderRows,
-  } = useAplnRows({
-    elaprTmpltId,
-    serverRows: aplnQuery.data?.content,
-  });
-
-  useEffect(() => {
-    onRowsChange?.(rows);
-  }, [rows, onRowsChange]);
-
-  useEffect(() => {
-    onEditingLockedChange?.(isEditingLocked);
-  }, [isEditingLocked, onEditingLockedChange]);
-
-  const sensors = useDndSensors();
-  const isDisabled = !elaprTmpltId;
-  const pickingRow = pickingRowKey ? rows.find((r) => r.rowKey === pickingRowKey) : undefined;
-
-  function handleDragEnd(event: DragEndEvent) {
-    const { active, over } = event;
-    if (!over || active.id === over.id) return;
-
-    reorderRows(String(active.id), String(over.id));
-  }
-
-  function handleRowChange(row: ElaprAplnRow, patch: Partial<ElaprAplnRow>) {
-    updateRow(row.rowKey, patch);
-  }
-
-  function handleRowSave(row: ElaprAplnRow) {
-    const fieldError = validateAplnRow(row);
-    if (fieldError) {
-      alert(fieldError);
-      return;
-    }
-
-    commitEdit(row.rowKey);
-  }
-
-  function handleRowDelete(row: ElaprAplnRow) {
-    markDeleted(row.rowKey);
-  }
-
-  function handleReviewerSelect(reviewer: ReviewerOption) {
-    if (!pickingRowKey) return;
-    updateRow(pickingRowKey, {
-      aprvrUuid: reviewer.uuid,
-      aprvrNm: reviewer.name,
-    });
-    setPickingRowKey(null);
-  }
-
-  return (
-    <section className="card card-border mx-0 min-h-[32rem] flex-1 pt-0">
-      <div className="card-header flex flex-wrap items-center justify-between gap-3">
-        <h3 className="text-2xl font-semibold">결재선 관리</h3>
-        <div className="flex flex-wrap items-center gap-3">
-          <Button
-            size="sm"
-            type="button"
-            color="green"
-            disabled={isDisabled || isEditingLocked}
-            onClick={addRow}
-          >
-            결재선 추가
-          </Button>
-        </div>
-      </div>
-
-      {aplnQuery.isPending && elaprTmpltId ? (
-        <div className="flex flex-col gap-2">
-          <Skeleton className="h-[4rem]" />
-          <Skeleton className="h-[16rem]" />
-        </div>
-      ) : !elaprTmpltId ? (
-        <p className="py-8 text-center text-lg text-muted-foreground">결재서식을 선택하세요.</p>
-      ) : visibleRows.length === 0 ? (
-        <p className="py-8 text-center text-lg text-muted-foreground">
-          등록된 결재선이 없습니다. [결재선 추가]로 결재자를 등록하세요.
-        </p>
-      ) : (
-        <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
-          <Table className="w-full">
-            <colgroup>
-              <col width="10%" />
-              <col width="30%" />
-              <col width="10%" />
-              <col width="10%" />
-              <col width="30%" />
-              <col width="10%" />
-            </colgroup>
-            <TableHeader>
-              <TableRow>
-                <TableHead className="w-10" />
-                <TableHead>결재선아이디</TableHead>
-                <TableHead>결재순서</TableHead>
-                <TableHead>결재구분</TableHead>
-                <TableHead>결재자</TableHead>
-                <TableHead>관리</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              <SortableContext
-                items={visibleRows.map((r) => r.rowKey)}
-                strategy={verticalListSortingStrategy}
-              >
-                {visibleRows.map((row, index) => (
-                  <SortableAplnPickerRow
-                    key={row.rowKey}
-                    row={row}
-                    displaySeqNo={index + 1}
-                    isEditing={editingRowKey === row.rowKey}
-                    isLocked={isEditingLocked}
-                    dragDisabled={isEditingLocked || !row.atrzSeComCd}
-                    onStartEdit={() => startEdit(row.rowKey)}
-                    onSave={() => handleRowSave(row)}
-                    onCancel={cancelEdit}
-                    onDelete={() => handleRowDelete(row)}
-                    onChange={(patch) => handleRowChange(row, patch)}
-                    onPickAprvr={() => {
-                      setPickingRowKey(row.rowKey);
-                      setPickerOpen(true);
-                    }}
-                  />
-                ))}
-              </SortableContext>
-            </TableBody>
-          </Table>
-        </DndContext>
-      )}
-
-      <AprvrPickerDialog
-        open={pickerOpen}
-        onOpenChange={setPickerOpen}
-        atrzSeComCd={pickingRow?.atrzSeComCd ?? ""}
-        onSelect={handleReviewerSelect}
-      />
-    </section>
-  );
-}
-
-export { ElaprAplnPickerGrid };

apps/as/src/pages/fnrs-cnsltn/ui/components/elapr-approval-dialog.tsx

@@ -10,11 +10,13 @@ import { AxiosError } from "axios";
 import { ENDPOINT } from "@/shared/config";
 import { useAlertStore } from "@/shared/lib";
 import {
+  AprvrPickerDialog,
   buildPrgrsSttsSavePayload,
   elaprPrgrsSttsService,
   findCurrentUserPendingApprovalRequest,
   hasUnsavedPrgrsSttsChanges,
   isPrgrsSttsRowEditable,
+  type ReviewerOption,
   useDndSensors,
   useElaprDocPrgrsByDocNo,
   usePrgrsSttsRows,
@@ -41,9 +43,6 @@ import {
   Textarea,
 } from "@common/components";
 
-import type { ReviewerOption } from "../../model/reviewer-option";
-
-import { AprvrPickerDialog } from "./aprvr-picker-dialog";
 import { SortablePrgrsSttsRow } from "./sortable-prgrs-stts-row";
 
 interface ElaprApprovalDialogProps {

apps/as/src/pages/fnrs-cnsltn/ui/components/elapr-tmplt-picker-dialog.tsx

@@ -1,163 +0,0 @@
-"use client";
-
-import { useCallback, useState } from "react";
-
-import { useAlertStore } from "@/shared/lib";
-import {
-  type ElaprAplnRow,
-  type ElaprTmplt,
-  getVisibleRows,
-  useElaprTmpltPage,
-  validateAllRowsForSave,
-  validateAtrzOrder,
-  validateUniqueSeqNo,
-} from "@/entities/elapr";
-import {
-  Button,
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@common/components";
-
-import { ElaprAplnPickerGrid } from "./elapr-apln-picker-grid";
-import { ElaprTmpltSelectTable } from "./elapr-tmplt-select-table";
-
-const PAGE_SIZE = 100;
-
-interface ElaprTmpltPickerConfirmPayload {
-  tmplt: ElaprTmplt;
-  aplnRows: ElaprAplnRow[];
-}
-
-interface ElaprTmpltPickerDialogProps {
-  open: boolean;
-  onClose: () => void;
-  onSelect?: (tmplt: ElaprTmplt) => void;
-  onConfirm?: (payload: ElaprTmpltPickerConfirmPayload) => void;
-}
-
-function ElaprTmpltPickerDialog({
-  open,
-  onClose,
-  onSelect,
-  onConfirm,
-}: ElaprTmpltPickerDialogProps) {
-  const alert = useAlertStore((state) => state.setMessage);
-  const [selectedTmplt, setSelectedTmplt] = useState<ElaprTmplt | null>(null);
-  const [aplnRows, setAplnRows] = useState<ElaprAplnRow[]>([]);
-  const [isEditingLocked, setIsEditingLocked] = useState(false);
-
-  const tmpltQuery = useElaprTmpltPage({
-    page: 0,
-    size: PAGE_SIZE,
-    sort: "regDt,desc",
-    docSeComCd: "FNRS",
-  });
-
-  const handleRowsChange = useCallback((rows: ElaprAplnRow[]) => {
-    setAplnRows(rows);
-  }, []);
-
-  const handleEditingLockedChange = useCallback((locked: boolean) => {
-    setIsEditingLocked(locked);
-  }, []);
-
-  function handleSelectTmplt(tmplt: ElaprTmplt | null) {
-    setSelectedTmplt(tmplt);
-    setAplnRows([]);
-    setIsEditingLocked(false);
-  }
-
-  function handleOpenChange(isOpen: boolean) {
-    if (!isOpen) {
-      setSelectedTmplt(null);
-      setAplnRows([]);
-      setIsEditingLocked(false);
-      onClose();
-    }
-  }
-
-  function handleConfirm() {
-    if (!selectedTmplt) {
-      alert("결재서식을 선택해 주세요.");
-      return;
-    }
-
-    const rowsError = validateAllRowsForSave(aplnRows, isEditingLocked);
-    if (rowsError) {
-      alert(rowsError);
-      return;
-    }
-
-    const orderError = validateAtrzOrder(aplnRows);
-    if (orderError) {
-      alert(orderError);
-      return;
-    }
-
-    const seqError = validateUniqueSeqNo(aplnRows);
-    if (seqError) {
-      alert(seqError);
-      return;
-    }
-
-    const visibleRows = getVisibleRows(aplnRows);
-
-    const payload: ElaprTmpltPickerConfirmPayload = {
-      tmplt: selectedTmplt,
-      aplnRows: visibleRows,
-    };
-
-    if (onConfirm) {
-      onConfirm(payload);
-    } else {
-      onSelect?.(selectedTmplt);
-    }
-
-    setSelectedTmplt(null);
-    setAplnRows([]);
-    setIsEditingLocked(false);
-    onClose();
-  }
-
-  return (
-    <Dialog open={open} onOpenChange={handleOpenChange}>
-      <DialogContent className="max-w-[120rem]" aria-describedby={undefined}>
-        <DialogHeader>
-          <DialogTitle>결재선 선택</DialogTitle>
-        </DialogHeader>
-
-        <div className="flex gap-6">
-          <ElaprTmpltSelectTable
-            query={tmpltQuery}
-            selectedTmpltId={selectedTmplt?.elaprTmpltId ?? null}
-            onSelectTmplt={handleSelectTmplt}
-          />
-          <ElaprAplnPickerGrid
-            elaprTmpltId={selectedTmplt?.elaprTmpltId ?? null}
-            onRowsChange={handleRowsChange}
-            onEditingLockedChange={handleEditingLockedChange}
-          />
-        </div>
-
-        <DialogFooter>
-          <Button type="button" color="white" onClick={() => handleOpenChange(false)}>
-            닫기
-          </Button>
-          <Button
-            type="button"
-            disabled={!selectedTmplt || isEditingLocked}
-            onClick={handleConfirm}
-          >
-            확인
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}
-
-export { ElaprTmpltPickerDialog };
-export type { ElaprTmpltPickerConfirmPayload };

apps/as/src/pages/fnrs-cnsltn/ui/components/elapr-tmplt-select-table.tsx

@@ -1,104 +0,0 @@
-"use client";
-
-import { useEffect, useMemo, useState } from "react";
-
-import type { UseQueryResult } from "@tanstack/react-query";
-import { createColumnHelper, getCoreRowModel, type RowSelectionState } from "@tanstack/react-table";
-
-import { useDataTable } from "@/shared/lib";
-import type { PageResponse } from "@/shared/model";
-import type { ElaprTmplt } from "@/entities/elapr";
-import { Skeleton } from "@common/components";
-
-const columnHelper = createColumnHelper<ElaprTmplt>();
-
-interface ElaprTmpltSelectTableProps {
-  query: UseQueryResult<PageResponse<ElaprTmplt>>;
-  selectedTmpltId: string | null;
-  onSelectTmplt: (tmplt: ElaprTmplt | null) => void;
-}
-
-function ElaprTmpltSelectTable({
-  query,
-  selectedTmpltId,
-  onSelectTmplt,
-}: ElaprTmpltSelectTableProps) {
-  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
-
-  useEffect(() => {
-    if (selectedTmpltId) {
-      setRowSelection({ [selectedTmpltId]: true });
-    } else {
-      setRowSelection({});
-    }
-  }, [selectedTmpltId]);
-
-  const columns = useMemo(
-    () => [
-      columnHelper.accessor("elaprTmpltId", {
-        header: "전자결재서식아이디",
-        meta: { align: "left" },
-      }),
-      columnHelper.accessor("elaprTmpltNm", {
-        header: "결재서식명",
-        meta: { align: "left" },
-      }),
-      columnHelper.accessor("docSeComNm", {
-        header: "문서구분",
-        cell: ({ getValue, row }) => getValue() ?? row.original.docSeComCd ?? "—",
-      }),
-    ],
-    [],
-  );
-
-  const { tableComponent } = useDataTable({
-    query,
-    tableOptions: {
-      columns,
-      state: { rowSelection },
-      enableRowSelection: true,
-      enableMultiRowSelection: false,
-      getRowId: (row) => row.elaprTmpltId,
-      onRowSelectionChange: (updater) => {
-        const next = typeof updater === "function" ? updater(rowSelection) : updater;
-        setRowSelection(next);
-        const selectedId = Object.keys(next)[0];
-        if (!selectedId) {
-          onSelectTmplt(null);
-          return;
-        }
-        const selected = query.data?.content.find((t) => t.elaprTmpltId === selectedId);
-        onSelectTmplt(selected ?? null);
-      },
-      getCoreRowModel: getCoreRowModel(),
-    },
-    dataTableOptions: {
-      onRowClick: (row) => {
-        setRowSelection({ [row.elaprTmpltId]: true });
-        onSelectTmplt(row);
-      },
-    },
-  });
-
-  return (
-    <section className="card card-border mx-0 min-h-[32rem] flex-[0.5] bg-background pt-0">
-      <div className="card-header h-[4.6rem]">
-        <h3 className="text-2xl font-semibold">전자결재서식</h3>
-      </div>
-      {query.isPending && (
-        <div className="flex flex-col gap-2 p-4">
-          <Skeleton className="h-[4rem]" />
-          <Skeleton className="h-[16rem]" />
-        </div>
-      )}
-      {query.isError && (
-        <p className="py-8 text-center text-lg text-muted-foreground">
-          결재서식 목록을 불러오지 못했습니다.
-        </p>
-      )}
-      {!query.isPending && !query.isError && tableComponent}
-    </section>
-  );
-}
-
-export { ElaprTmpltSelectTable };

apps/as/src/pages/fnrs-cnsltn/ui/components/floating-action-buttons.tsx

@@ -13,6 +13,8 @@ import {
   buildElaprPrgrsSttsListFromAplnRows,
   type ElaprDmndSaveRequestDto,
   elaprDmndService,
+  type ElaprTmpltPickerConfirmPayload,
+  ElaprTmpltPickerDialog,
   hasCurrentUserPendingApprovalRequest,
   useElaprDocPrgrsByDocNo,
 } from "@/entities/elapr";
@@ -44,10 +46,6 @@ import { type ChecklistFormState } from "../../model/view-types";
 import type { TechReviewOpinionSectionHandle } from "../sections/tech-review-opinion-section";
 
 import { ElaprApprovalDialog } from "./elapr-approval-dialog";
-import {
-  type ElaprTmpltPickerConfirmPayload,
-  ElaprTmpltPickerDialog,
-} from "./elapr-tmplt-picker-dialog";
 
 interface FloatingActionButtonsProps {
   data: FnrsCnsltnMngDetResponseDto;
@@ -513,6 +511,7 @@ function FloatingActionButtons({
       <ElaprTmpltPickerDialog
         open={activeDialog === "elaprTmplt"}
         onClose={() => setActiveDialog(null)}
+        docSeComCd={docSeComCd}
         onConfirm={handleElaprTmpltConfirm}
       />
 

apps/as/src/pages/fnrs-cnsltn/ui/components/sortable-apln-picker-row.tsx

@@ -1,138 +0,0 @@
-"use client";
-
-import { useSortable } from "@dnd-kit/sortable";
-import { CSS } from "@dnd-kit/utilities";
-import { MoveVertical } from "lucide-react";
-
-import { CodeSelect, findCodeLabel, useCodeList } from "@/entities/code";
-import type { ElaprAplnRow } from "@/entities/elapr";
-import { Button, TableCell, TableRow } from "@common/components";
-
-interface SortableAplnPickerRowProps {
-  row: ElaprAplnRow;
-  displaySeqNo: number;
-  isEditing: boolean;
-  isLocked: boolean;
-  dragDisabled: boolean;
-  onStartEdit: () => void;
-  onSave: () => void;
-  onCancel: () => void;
-  onDelete: () => void;
-  onChange: (patch: Partial<ElaprAplnRow>) => void;
-  onPickAprvr: () => void;
-}
-
-function SortableAplnPickerRow({
-  row,
-  displaySeqNo,
-  isEditing,
-  isLocked,
-  dragDisabled,
-  onStartEdit,
-  onSave,
-  onCancel,
-  onDelete,
-  onChange,
-  onPickAprvr,
-}: SortableAplnPickerRowProps) {
-  const { data: atrzSeCodes } = useCodeList("ATRZSE");
-
-  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
-    id: row.rowKey,
-    disabled: dragDisabled,
-  });
-
-  const style = {
-    transform: CSS.Transform.toString(transform),
-    transition,
-    opacity: isDragging ? 0.6 : 1,
-  };
-
-  const rowDisabled = isLocked && !isEditing;
-  const atrzSeLabel = row.atrzSeComNm || findCodeLabel(atrzSeCodes, row.atrzSeComCd);
-
-  return (
-    <TableRow ref={setNodeRef} style={style} className={isEditing ? "bg-accent/30" : undefined}>
-      <TableCell align="center" className="w-10">
-        <Button
-          type="button"
-          size="icon"
-          className="cursor-grab !bg-transparent text-muted-foreground disabled:cursor-not-allowed disabled:opacity-40"
-          disabled={dragDisabled}
-          {...attributes}
-          {...listeners}
-          aria-label="순서 변경"
-        >
-          <MoveVertical className="!size-6" />
-        </Button>
-      </TableCell>
-      <TableCell align="center">{row.isNew ? "-" : (row.aplnId ?? "-")}</TableCell>
-      <TableCell align="center">{displaySeqNo}</TableCell>
-      <TableCell align="center">
-        {isEditing ? (
-          <CodeSelect
-            upCd="ATRZSE"
-            className="min-w-[120px]"
-            value={row.atrzSeComCd ?? ""}
-            onValueChange={(v) =>
-              onChange({
-                atrzSeComCd: v,
-                atrzSeComNm: findCodeLabel(atrzSeCodes, v),
-              })
-            }
-            placeholder="결재구분"
-          />
-        ) : (
-          atrzSeLabel || "-"
-        )}
-      </TableCell>
-      <TableCell align="center">
-        <div className="flex items-center justify-center gap-4">
-          <span>{row.aprvrNm || row.aprvrUuid || "-"}</span>
-          {isEditing && (
-            <Button type="button" size="sm" onClick={onPickAprvr}>
-              선택
-            </Button>
-          )}
-        </div>
-      </TableCell>
-      <TableCell align="center">
-        <div className="flex justify-center gap-2">
-          {isEditing ? (
-            <>
-              <Button type="button" size="sm" onClick={onSave}>
-                확인
-              </Button>
-              <Button type="button" size="sm" color="white" onClick={onCancel}>
-                취소
-              </Button>
-            </>
-          ) : (
-            <>
-              <Button
-                type="button"
-                size="sm"
-                color="white"
-                disabled={rowDisabled}
-                onClick={onStartEdit}
-              >
-                수정
-              </Button>
-              <Button
-                type="button"
-                size="sm"
-                color="gray"
-                disabled={rowDisabled}
-                onClick={onDelete}
-              >
-                삭제
-              </Button>
-            </>
-          )}
-        </div>
-      </TableCell>
-    </TableRow>
-  );
-}
-
-export { SortableAplnPickerRow };

apps/as/src/pages/instl-sncn/model/reviewer-option.ts

@@ -1,5 +0,0 @@
-export interface ReviewerOption {
-  uuid: string;
-  name: string;
-  deptNm: string;
-}

apps/as/src/pages/instl-sncn/ui/components/aprvr-picker-dialog.tsx

@@ -1,125 +0,0 @@
-"use client";
-
-import { RvwMnpwMngResponseDto, useRvwMnpwMngPage } from "@/entities/rvw-mnpw";
-import {
-  Button,
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  Skeleton,
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@common/components";
-
-import { type ReviewerOption } from "../../model/reviewer-option";
-
-const PAGE_SIZE = 500;
-
-interface AprvrPickerDialogProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  atrzSeComCd: string;
-  onSelect: (reviewer: ReviewerOption) => void;
-}
-
-function AprvrPickerDialog({ open, onOpenChange, atrzSeComCd, onSelect }: AprvrPickerDialogProps) {
-  const { data, isPending, isError } = useRvwMnpwMngPage(
-    {
-      atrzSeComCd,
-      page: 0,
-      size: PAGE_SIZE,
-      sort: "userUuidNm,asc",
-    },
-    { enabled: open },
-  );
-
-  const items = data?.content ?? [];
-
-  function fromRvwMnpwMng(item: RvwMnpwMngResponseDto): ReviewerOption {
-    return {
-      uuid: item.userUuid,
-      name: item.userUuidNm ?? "",
-      deptNm: item.ognzNm ?? "",
-    };
-  }
-
-  function handleSelect(item: (typeof items)[number]) {
-    onSelect(fromRvwMnpwMng(item));
-    onOpenChange(false);
-  }
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-[56rem]" aria-describedby={undefined}>
-        <DialogHeader>
-          <DialogTitle>검토인력 선택</DialogTitle>
-        </DialogHeader>
-
-        <div className="h-[36rem] overflow-auto">
-          {isPending ? (
-            <div className="flex flex-col gap-2">
-              <Skeleton className="h-[4rem]" />
-              <Skeleton className="h-[16rem]" />
-            </div>
-          ) : isError ? (
-            <p className="py-8 text-center text-lg text-muted-foreground">
-              검토인력 목록을 불러오지 못했습니다.
-            </p>
-          ) : items.length === 0 ? (
-            <p className="py-8 text-center text-lg text-muted-foreground">
-              배치된 검토인력이 없습니다.
-            </p>
-          ) : (
-            <Table className="w-full">
-              <colgroup>
-                <col width="25%" />
-                <col width="25%" />
-                <col width="15%" />
-                <col width="15%" />
-                <col width="20%" />
-              </colgroup>
-              <TableHeader>
-                <TableRow>
-                  <TableHead>성명</TableHead>
-                  <TableHead>부서</TableHead>
-                  <TableHead>직위</TableHead>
-                  <TableHead>직급</TableHead>
-                  <TableHead>선택</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {items.map((item) => (
-                  <TableRow key={`${item.atrzSeComCd}-${item.ognzSn}-${item.userUuid}`}>
-                    <TableCell align="center">{item.userUuidNm || item.userUuid}</TableCell>
-                    <TableCell align="center">{item.ognzNm || "-"}</TableCell>
-                    <TableCell align="center">{item.jbpsSeNm || "-"}</TableCell>
-                    <TableCell align="center">{item.jbgdSeNm || "-"}</TableCell>
-                    <TableCell align="center">
-                      <Button type="button" size="sm" onClick={() => handleSelect(item)}>
-                        선택
-                      </Button>
-                    </TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          )}
-        </div>
-
-        <DialogFooter>
-          <Button type="button" color="white" onClick={() => onOpenChange(false)}>
-            닫기
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}
-
-export { AprvrPickerDialog };

apps/as/src/pages/instl-sncn/ui/components/elapr-approval-dialog.tsx

@@ -10,11 +10,13 @@ import { AxiosError } from "axios";
 import { ENDPOINT } from "@/shared/config";
 import { useAlertStore } from "@/shared/lib";
 import {
+  AprvrPickerDialog,
   buildPrgrsSttsSavePayload,
   elaprPrgrsSttsService,
   findCurrentUserPendingApprovalRequest,
   hasUnsavedPrgrsSttsChanges,
   isPrgrsSttsRowEditable,
+  type ReviewerOption,
   useDndSensors,
   useElaprDocPrgrsByDocNo,
   usePrgrsSttsRows,
@@ -41,9 +43,6 @@ import {
   Textarea,
 } from "@common/components";
 
-import type { ReviewerOption } from "../../model/reviewer-option";
-
-import { AprvrPickerDialog } from "./aprvr-picker-dialog";
 import { SortablePrgrsSttsRow } from "./sortable-prgrs-stts-row";
 
 interface ElaprApprovalDialogProps {

apps/as/src/pages/instl-sncn/ui/components/floating-action-buttons.tsx

@@ -13,6 +13,8 @@ import {
   buildElaprPrgrsSttsListFromAplnRows,
   type ElaprDmndSaveRequestDto,
   elaprDmndService,
+  type ElaprTmpltPickerConfirmPayload,
+  ElaprTmpltPickerDialog,
   hasCurrentUserPendingApprovalRequest,
   useElaprDocPrgrsByDocNo,
 } from "@/entities/elapr";
@@ -39,10 +41,6 @@ import { type ChecklistFormState } from "../../model/view-types";
 import type { TechReviewOpinionSectionHandle } from "../sections/tech-review-opinion-section";
 
 import { ElaprApprovalDialog } from "./elapr-approval-dialog";
-import {
-  type ElaprTmpltPickerConfirmPayload,
-  ElaprTmpltPickerDialog,
-} from "./elapr-tmplt-picker-dialog";
 
 interface FloatingActionButtonsProps {
   data: InstlSncnMngDetResponse;
@@ -516,6 +514,7 @@ function FloatingActionButtons({
       <ElaprTmpltPickerDialog
         open={activeDialog === "elaprTmplt"}
         onClose={() => setActiveDialog(null)}
+        docSeComCd={docSeComCd}
         onConfirm={handleElaprTmpltConfirm}
       />