376 lines
14 KiB
TypeScript
376 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useCallback, useEffect, useMemo } from "react";
|
|
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
|
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
|
|
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
|
import { roleAPI, RoleGroup } from "@/lib/api/role";
|
|
import { useAuth } from "@/hooks/useAuth";
|
|
import { AlertCircle, Check, ChevronsUpDown } from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
import { companyAPI } from "@/lib/api/company";
|
|
|
|
interface RoleFormModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
onSuccess?: () => void;
|
|
editingRole?: RoleGroup | null;
|
|
}
|
|
|
|
/**
|
|
* 권한 그룹 생성/수정 모달
|
|
*
|
|
* 기능:
|
|
* - 권한 그룹 생성 (authName, authCode, companyCode)
|
|
* - 권한 그룹 수정 (authName, authCode, status)
|
|
* - 유효성 검사
|
|
*
|
|
* shadcn/ui 표준 모달 디자인 적용
|
|
*/
|
|
export function RoleFormModal({ isOpen, onClose, onSuccess, editingRole }: RoleFormModalProps) {
|
|
const { user: currentUser } = useAuth();
|
|
const isEditMode = !!editingRole;
|
|
|
|
// 최고 관리자 여부
|
|
const isSuperAdmin = currentUser?.companyCode === "*" && currentUser?.userType === "SUPER_ADMIN";
|
|
|
|
// 폼 데이터
|
|
const [formData, setFormData] = useState({
|
|
authName: "",
|
|
authCode: "",
|
|
companyCode: currentUser?.companyCode || "",
|
|
status: "active",
|
|
});
|
|
|
|
// 상태 관리
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [showAlert, setShowAlert] = useState(false);
|
|
const [alertMessage, setAlertMessage] = useState("");
|
|
const [alertType, setAlertType] = useState<"success" | "error" | "info">("info");
|
|
|
|
// 회사 목록 (최고 관리자용)
|
|
const [companies, setCompanies] = useState<Array<{ company_code: string; company_name: string }>>([]);
|
|
const [isLoadingCompanies, setIsLoadingCompanies] = useState(false);
|
|
const [companyComboOpen, setCompanyComboOpen] = useState(false);
|
|
|
|
// 폼 유효성 검사
|
|
const isFormValid = useMemo(() => {
|
|
return formData.authName.trim() !== "" && formData.authCode.trim() !== "" && formData.companyCode.trim() !== "";
|
|
}, [formData]);
|
|
|
|
// 알림 표시
|
|
const displayAlert = useCallback((message: string, type: "success" | "error" | "info") => {
|
|
setAlertMessage(message);
|
|
setAlertType(type);
|
|
setShowAlert(true);
|
|
setTimeout(() => setShowAlert(false), 3000);
|
|
}, []);
|
|
|
|
// 회사 목록 로드 (최고 관리자만)
|
|
const loadCompanies = useCallback(async () => {
|
|
if (!isSuperAdmin) return;
|
|
|
|
setIsLoadingCompanies(true);
|
|
try {
|
|
// companyAPI.getList()는 Promise<Company[]>를 반환하므로 직접 사용
|
|
const companies = await companyAPI.getList();
|
|
console.log("📋 회사 목록 로드 성공:", companies);
|
|
setCompanies(companies);
|
|
} catch (error) {
|
|
console.error("❌ 회사 목록 로드 오류:", error);
|
|
displayAlert("회사 목록을 불러오는데 실패했습니다.", "error");
|
|
} finally {
|
|
setIsLoadingCompanies(false);
|
|
}
|
|
}, [isSuperAdmin, displayAlert]);
|
|
|
|
// 초기화
|
|
useEffect(() => {
|
|
if (isOpen) {
|
|
// 최고 관리자이고 생성 모드일 때만 회사 목록 로드
|
|
if (isSuperAdmin && !isEditMode) {
|
|
loadCompanies();
|
|
}
|
|
|
|
if (isEditMode && editingRole) {
|
|
// 수정 모드: 기존 데이터 로드
|
|
setFormData({
|
|
authName: editingRole.authName || "",
|
|
authCode: editingRole.authCode || "",
|
|
companyCode: editingRole.companyCode || "",
|
|
status: editingRole.status || "active",
|
|
});
|
|
} else {
|
|
// 생성 모드: 초기화
|
|
setFormData({
|
|
authName: "",
|
|
authCode: "",
|
|
companyCode: currentUser?.companyCode || "",
|
|
status: "active",
|
|
});
|
|
}
|
|
setShowAlert(false);
|
|
}
|
|
}, [isOpen, isEditMode, editingRole, currentUser?.companyCode, isSuperAdmin, loadCompanies]);
|
|
|
|
// 입력 핸들러
|
|
const handleInputChange = useCallback((field: string, value: string) => {
|
|
setFormData((prev) => ({ ...prev, [field]: value }));
|
|
}, []);
|
|
|
|
// 제출 핸들러
|
|
const handleSubmit = useCallback(async () => {
|
|
if (!isFormValid) {
|
|
displayAlert("모든 필수 항목을 입력해주세요.", "error");
|
|
return;
|
|
}
|
|
|
|
setIsLoading(true);
|
|
try {
|
|
let response;
|
|
|
|
if (isEditMode && editingRole) {
|
|
// 수정
|
|
response = await roleAPI.update(editingRole.objid, {
|
|
authName: formData.authName,
|
|
authCode: formData.authCode,
|
|
status: formData.status,
|
|
});
|
|
} else {
|
|
// 생성
|
|
response = await roleAPI.create({
|
|
authName: formData.authName,
|
|
authCode: formData.authCode,
|
|
companyCode: formData.companyCode,
|
|
});
|
|
}
|
|
|
|
if (response.success) {
|
|
displayAlert(isEditMode ? "권한 그룹이 수정되었습니다." : "권한 그룹이 생성되었습니다.", "success");
|
|
setTimeout(() => {
|
|
onClose();
|
|
onSuccess?.();
|
|
}, 1500);
|
|
} else {
|
|
displayAlert(response.message || "작업에 실패했습니다.", "error");
|
|
}
|
|
} catch (error) {
|
|
console.error("권한 그룹 저장 오류:", error);
|
|
displayAlert("권한 그룹 저장 중 오류가 발생했습니다.", "error");
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
}, [isFormValid, isEditMode, editingRole, formData, onClose, onSuccess, displayAlert]);
|
|
|
|
// Enter 키 핸들러
|
|
const handleKeyDown = useCallback(
|
|
(e: React.KeyboardEvent) => {
|
|
if (e.key === "Enter" && isFormValid && !isLoading) {
|
|
handleSubmit();
|
|
}
|
|
},
|
|
[isFormValid, isLoading, handleSubmit],
|
|
);
|
|
|
|
return (
|
|
<Dialog open={isOpen} onOpenChange={onClose}>
|
|
<DialogContent className="max-w-[95vw] sm:max-w-[500px]">
|
|
<DialogHeader>
|
|
<DialogTitle className="text-base sm:text-lg">{isEditMode ? "권한 그룹 수정" : "권한 그룹 생성"}</DialogTitle>
|
|
</DialogHeader>
|
|
|
|
<div className="space-y-3 sm:space-y-4">
|
|
{/* 권한 그룹명 */}
|
|
<div>
|
|
<Label htmlFor="authName" className="text-xs sm:text-sm">
|
|
권한 그룹명 <span className="text-red-500">*</span>
|
|
</Label>
|
|
<Input
|
|
id="authName"
|
|
value={formData.authName}
|
|
onChange={(e) => handleInputChange("authName", e.target.value)}
|
|
onKeyDown={handleKeyDown}
|
|
placeholder="예: 영업팀 권한"
|
|
className="h-8 text-xs sm:h-10 sm:text-sm"
|
|
disabled={isLoading}
|
|
/>
|
|
</div>
|
|
|
|
{/* 권한 코드 */}
|
|
<div>
|
|
<Label htmlFor="authCode" className="text-xs sm:text-sm">
|
|
권한 코드 <span className="text-red-500">*</span>
|
|
</Label>
|
|
<Input
|
|
id="authCode"
|
|
value={formData.authCode}
|
|
onChange={(e) => handleInputChange("authCode", e.target.value)}
|
|
onKeyDown={handleKeyDown}
|
|
placeholder="예: SALES_TEAM (영문/숫자/언더스코어만)"
|
|
className="h-8 text-xs sm:h-10 sm:text-sm"
|
|
disabled={isLoading}
|
|
/>
|
|
<p className="text-muted-foreground mt-1 text-[10px] sm:text-xs">
|
|
시스템 내부에서 사용되는 고유 코드입니다. 영문 대문자, 숫자, 언더스코어만 사용하세요.
|
|
</p>
|
|
</div>
|
|
|
|
{/* 회사 (수정 모드에서는 비활성화) */}
|
|
{isEditMode ? (
|
|
<div>
|
|
<Label htmlFor="companyCode" className="text-xs sm:text-sm">
|
|
회사
|
|
</Label>
|
|
<Input
|
|
id="companyCode"
|
|
value={formData.companyCode}
|
|
disabled
|
|
className="bg-muted h-8 cursor-not-allowed text-xs sm:h-10 sm:text-sm"
|
|
/>
|
|
<p className="text-muted-foreground mt-1 text-[10px] sm:text-xs">회사 코드는 수정할 수 없습니다.</p>
|
|
</div>
|
|
) : (
|
|
<div>
|
|
<Label htmlFor="companyCode" className="text-xs sm:text-sm">
|
|
회사 <span className="text-red-500">*</span>
|
|
</Label>
|
|
{isSuperAdmin ? (
|
|
<>
|
|
<Popover open={companyComboOpen} onOpenChange={setCompanyComboOpen}>
|
|
<PopoverTrigger asChild>
|
|
<Button
|
|
variant="outline"
|
|
role="combobox"
|
|
aria-expanded={companyComboOpen}
|
|
className="h-8 w-full justify-between text-xs sm:h-10 sm:text-sm"
|
|
disabled={isLoading || isLoadingCompanies}
|
|
>
|
|
{formData.companyCode
|
|
? companies.find((company) => company.company_code === formData.companyCode)?.company_name ||
|
|
formData.companyCode
|
|
: "회사 선택..."}
|
|
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent
|
|
className="p-0"
|
|
style={{ width: "var(--radix-popover-trigger-width)" }}
|
|
align="start"
|
|
>
|
|
<Command>
|
|
<CommandInput placeholder="회사 검색..." className="text-xs sm:text-sm" />
|
|
<CommandList>
|
|
<CommandEmpty className="text-xs sm:text-sm">
|
|
{isLoadingCompanies ? "로딩 중..." : "회사를 찾을 수 없습니다."}
|
|
</CommandEmpty>
|
|
<CommandGroup>
|
|
{companies.map((company) => (
|
|
<CommandItem
|
|
key={company.company_code}
|
|
value={`${company.company_code} ${company.company_name}`}
|
|
onSelect={() => {
|
|
handleInputChange("companyCode", company.company_code);
|
|
setCompanyComboOpen(false);
|
|
}}
|
|
className="text-xs sm:text-sm"
|
|
>
|
|
<Check
|
|
className={cn(
|
|
"mr-2 h-4 w-4",
|
|
formData.companyCode === company.company_code ? "opacity-100" : "opacity-0",
|
|
)}
|
|
/>
|
|
<div className="flex flex-col">
|
|
<span className="font-medium">{company.company_name}</span>
|
|
<span className="text-muted-foreground text-[10px]">{company.company_code}</span>
|
|
</div>
|
|
</CommandItem>
|
|
))}
|
|
</CommandGroup>
|
|
</CommandList>
|
|
</Command>
|
|
</PopoverContent>
|
|
</Popover>
|
|
<p className="text-muted-foreground mt-1 text-[10px] sm:text-xs">
|
|
모든 회사에 권한 그룹을 생성할 수 있습니다.
|
|
</p>
|
|
</>
|
|
) : (
|
|
<>
|
|
<Input
|
|
id="companyCode"
|
|
value={formData.companyCode}
|
|
disabled
|
|
className="bg-muted h-8 cursor-not-allowed text-xs sm:h-10 sm:text-sm"
|
|
/>
|
|
<p className="text-muted-foreground mt-1 text-[10px] sm:text-xs">
|
|
자신의 회사에만 권한 그룹을 생성할 수 있습니다.
|
|
</p>
|
|
</>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* 상태 (수정 모드에서만 표시) */}
|
|
{isEditMode && (
|
|
<div>
|
|
<Label htmlFor="status" className="text-xs sm:text-sm">
|
|
상태
|
|
</Label>
|
|
<Select value={formData.status} onValueChange={(value) => handleInputChange("status", value)}>
|
|
<SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="active">활성</SelectItem>
|
|
<SelectItem value="inactive">비활성</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
)}
|
|
|
|
{/* 알림 메시지 */}
|
|
{showAlert && (
|
|
<div
|
|
className={`rounded-lg border p-3 text-sm ${
|
|
alertType === "success"
|
|
? "border-green-300 bg-green-50 text-green-800"
|
|
: alertType === "error"
|
|
? "border-destructive/50 bg-destructive/10 text-destructive"
|
|
: "border-blue-300 bg-blue-50 text-blue-800"
|
|
}`}
|
|
>
|
|
<div className="flex items-start gap-2">
|
|
{alertType === "error" && <AlertCircle className="mt-0.5 h-4 w-4 flex-shrink-0" />}
|
|
<span className="text-xs sm:text-sm">{alertMessage}</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<DialogFooter className="gap-2 sm:gap-0">
|
|
<Button
|
|
variant="outline"
|
|
onClick={onClose}
|
|
disabled={isLoading}
|
|
className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
|
|
>
|
|
취소
|
|
</Button>
|
|
<Button
|
|
onClick={handleSubmit}
|
|
disabled={isLoading || !isFormValid}
|
|
className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
|
|
>
|
|
{isLoading ? "처리중..." : isEditMode ? "수정" : "생성"}
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|