feat: 신규 페이지 구현 및 HR/설정 기능 개선
신규 페이지: - 회계관리: 거래처, 예상비용, 청구서, 발주서 - 게시판: 공지사항, 자료실, 커뮤니티 - 고객센터: 문의/FAQ - 설정: 계정, 알림, 출퇴근, 팝업, 구독, 결제내역 - 리포트 (차트 시각화) - 개발자 테스트 URL 페이지 기능 개선: - HR 직원관리/휴가관리/카드관리 강화 - IntegratedListTemplateV2 확장 - AuthenticatedLayout 패딩 표준화 - 로그인 페이지 UI 개선 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
byeongcheolryu
124
src/components/settings/PopupManagement/PopupDetail.tsx
Normal file
124
src/components/settings/PopupManagement/PopupDetail.tsx
Normal file
@@ -0,0 +1,124 @@
|
||||
'use client';
|
||||
|
||||
/**
|
||||
* 팝업 상세 컴포넌트
|
||||
*
|
||||
* 디자인 스펙:
|
||||
* - 페이지 타이틀: 팝업 상세
|
||||
* - 읽기 전용 모드로 팝업 정보 표시
|
||||
* - 버튼 위치: 카드 아래 별도 영역 (좌: 목록, 우: 삭제/수정)
|
||||
*/
|
||||
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { Megaphone, ArrowLeft, Edit, Trash2 } from 'lucide-react';
|
||||
import { PageLayout } from '@/components/organisms/PageLayout';
|
||||
import { PageHeader } from '@/components/organisms/PageHeader';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { type Popup } from './types';
|
||||
|
||||
interface PopupDetailProps {
|
||||
popup: Popup;
|
||||
onEdit: () => void;
|
||||
onDelete: () => void;
|
||||
}
|
||||
|
||||
export function PopupDetail({ popup, onEdit, onDelete }: PopupDetailProps) {
|
||||
const router = useRouter();
|
||||
|
||||
const handleBack = () => {
|
||||
router.push('/ko/settings/popup-management');
|
||||
};
|
||||
|
||||
// 대상 표시 텍스트
|
||||
const getTargetDisplay = () => {
|
||||
if (popup.target === 'all') {
|
||||
return '전사';
|
||||
}
|
||||
return popup.targetName || '부서별';
|
||||
};
|
||||
|
||||
return (
|
||||
<PageLayout>
|
||||
<PageHeader
|
||||
title="팝업관리 상세"
|
||||
description="팝업 목록을 관리합니다"
|
||||
icon={Megaphone}
|
||||
/>
|
||||
|
||||
<div className="space-y-6">
|
||||
{/* 팝업 정보 */}
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between">
|
||||
<CardTitle className="text-base">팝업 정보</CardTitle>
|
||||
<Badge variant={popup.status === 'active' ? 'default' : 'secondary'}>
|
||||
{popup.status === 'active' ? '사용함' : '사용안함'}
|
||||
</Badge>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<dl className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<dt className="text-sm font-medium text-muted-foreground">대상</dt>
|
||||
<dd className="text-sm mt-1">{getTargetDisplay()}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt className="text-sm font-medium text-muted-foreground">작성자</dt>
|
||||
<dd className="text-sm mt-1">{popup.author}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt className="text-sm font-medium text-muted-foreground">제목</dt>
|
||||
<dd className="text-sm mt-1">{popup.title}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt className="text-sm font-medium text-muted-foreground">상태</dt>
|
||||
<dd className="text-sm mt-1">
|
||||
<Badge variant={popup.status === 'active' ? 'default' : 'secondary'}>
|
||||
{popup.status === 'active' ? '사용함' : '사용안함'}
|
||||
</Badge>
|
||||
</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt className="text-sm font-medium text-muted-foreground">기간</dt>
|
||||
<dd className="text-sm mt-1">{popup.startDate} ~ {popup.endDate}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt className="text-sm font-medium text-muted-foreground">등록일시</dt>
|
||||
<dd className="text-sm mt-1">{popup.createdAt}</dd>
|
||||
</div>
|
||||
<div className="md:col-span-2">
|
||||
<dt className="text-sm font-medium text-muted-foreground">내용</dt>
|
||||
<dd className="text-sm mt-1">
|
||||
<div
|
||||
className="border border-gray-200 rounded-md p-4 bg-gray-50 min-h-[100px] prose prose-sm max-w-none"
|
||||
dangerouslySetInnerHTML={{ __html: popup.content }}
|
||||
/>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 버튼 영역 */}
|
||||
<div className="flex items-center justify-between">
|
||||
<Button variant="outline" onClick={handleBack}>
|
||||
<ArrowLeft className="w-4 h-4 mr-2" />
|
||||
목록으로
|
||||
</Button>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button variant="outline" onClick={onDelete} className="text-destructive hover:bg-destructive hover:text-destructive-foreground">
|
||||
<Trash2 className="w-4 h-4 mr-2" />
|
||||
삭제
|
||||
</Button>
|
||||
<Button onClick={onEdit}>
|
||||
<Edit className="w-4 h-4 mr-2" />
|
||||
수정
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</PageLayout>
|
||||
);
|
||||
}
|
||||
|
||||
export default PopupDetail;
|
||||
291
src/components/settings/PopupManagement/PopupForm.tsx
Normal file
291
src/components/settings/PopupManagement/PopupForm.tsx
Normal file
@@ -0,0 +1,291 @@
|
||||
'use client';
|
||||
|
||||
/**
|
||||
* 팝업 등록/수정 폼 컴포넌트
|
||||
*
|
||||
* 디자인 스펙:
|
||||
* - 페이지 타이틀: 팝업 상세
|
||||
* - 필드: 대상(Select), 기간(DateRange), 제목(Input), 내용(RichTextEditor), 상태(Radio), 작성자, 등록일시
|
||||
*/
|
||||
|
||||
import { useState, useCallback } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { format } from 'date-fns';
|
||||
import { Megaphone, ArrowLeft, Save } from 'lucide-react';
|
||||
import { PageLayout } from '@/components/organisms/PageLayout';
|
||||
import { PageHeader } from '@/components/organisms/PageHeader';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@/components/ui/card';
|
||||
import { RichTextEditor } from '@/components/board/RichTextEditor';
|
||||
import {
|
||||
type Popup,
|
||||
type PopupTarget,
|
||||
type PopupStatus,
|
||||
TARGET_OPTIONS,
|
||||
STATUS_OPTIONS,
|
||||
} from './types';
|
||||
|
||||
interface PopupFormProps {
|
||||
mode: 'create' | 'edit';
|
||||
initialData?: Popup;
|
||||
}
|
||||
|
||||
// 현재 로그인 사용자 정보 (실제로는 auth context에서 가져옴)
|
||||
const CURRENT_USER = {
|
||||
id: 'user1',
|
||||
name: '홍길동',
|
||||
};
|
||||
|
||||
export function PopupForm({ mode, initialData }: PopupFormProps) {
|
||||
const router = useRouter();
|
||||
|
||||
// ===== 폼 상태 =====
|
||||
const [target, setTarget] = useState<PopupTarget>(initialData?.target || 'all');
|
||||
const [title, setTitle] = useState(initialData?.title || '');
|
||||
const [content, setContent] = useState(initialData?.content || '');
|
||||
const [status, setStatus] = useState<PopupStatus>(initialData?.status || 'inactive');
|
||||
const [startDate, setStartDate] = useState(
|
||||
initialData?.startDate || format(new Date(), 'yyyy-MM-dd')
|
||||
);
|
||||
const [endDate, setEndDate] = useState(
|
||||
initialData?.endDate || format(new Date(), 'yyyy-MM-dd')
|
||||
);
|
||||
|
||||
// 유효성 에러
|
||||
const [errors, setErrors] = useState<Record<string, string>>({});
|
||||
|
||||
// ===== 유효성 검사 =====
|
||||
const validate = useCallback(() => {
|
||||
const newErrors: Record<string, string> = {};
|
||||
|
||||
if (!target) {
|
||||
newErrors.target = '대상을 선택해주세요.';
|
||||
}
|
||||
if (!title.trim()) {
|
||||
newErrors.title = '제목을 입력해주세요.';
|
||||
}
|
||||
if (!content.trim() || content === '<p></p>') {
|
||||
newErrors.content = '내용을 입력해주세요.';
|
||||
}
|
||||
if (!startDate) {
|
||||
newErrors.startDate = '시작일을 선택해주세요.';
|
||||
}
|
||||
if (!endDate) {
|
||||
newErrors.endDate = '종료일을 선택해주세요.';
|
||||
}
|
||||
if (startDate && endDate && startDate > endDate) {
|
||||
newErrors.endDate = '종료일은 시작일 이후여야 합니다.';
|
||||
}
|
||||
|
||||
setErrors(newErrors);
|
||||
return Object.keys(newErrors).length === 0;
|
||||
}, [target, title, content, startDate, endDate]);
|
||||
|
||||
// ===== 저장 핸들러 =====
|
||||
const handleSubmit = useCallback(() => {
|
||||
if (!validate()) return;
|
||||
|
||||
const formData = {
|
||||
target,
|
||||
title,
|
||||
content,
|
||||
status,
|
||||
startDate,
|
||||
endDate,
|
||||
};
|
||||
|
||||
console.log('Submit:', mode, formData);
|
||||
|
||||
// TODO: API 호출
|
||||
|
||||
// 목록으로 이동
|
||||
router.push('/ko/settings/popup-management');
|
||||
}, [target, title, content, status, startDate, endDate, mode, router, validate]);
|
||||
|
||||
// ===== 취소 핸들러 =====
|
||||
const handleCancel = useCallback(() => {
|
||||
router.back();
|
||||
}, [router]);
|
||||
|
||||
return (
|
||||
<PageLayout>
|
||||
{/* 헤더 */}
|
||||
<PageHeader
|
||||
title={mode === 'create' ? '팝업관리 상세' : '팝업관리 상세'}
|
||||
description="팝업 목록을 관리합니다"
|
||||
icon={Megaphone}
|
||||
/>
|
||||
|
||||
<div className="space-y-6">
|
||||
{/* 폼 카드 */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-1">
|
||||
팝업 정보
|
||||
<span className="text-red-500">*</span>
|
||||
</CardTitle>
|
||||
<CardDescription>팝업의 기본 정보를 입력해주세요.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
{/* 대상 + 기간 (같은 줄) */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{/* 대상 선택 */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="target">
|
||||
대상 <span className="text-red-500">*</span>
|
||||
</Label>
|
||||
<Select value={target} onValueChange={(v) => setTarget(v as PopupTarget)}>
|
||||
<SelectTrigger className={errors.target ? 'border-red-500' : ''}>
|
||||
<SelectValue placeholder="대상을 선택해주세요" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{TARGET_OPTIONS.map((option) => (
|
||||
<SelectItem key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{errors.target && <p className="text-sm text-red-500">{errors.target}</p>}
|
||||
</div>
|
||||
|
||||
{/* 기간 */}
|
||||
<div className="space-y-2">
|
||||
<Label>
|
||||
기간 <span className="text-red-500">*</span>
|
||||
</Label>
|
||||
<div className="flex items-center gap-2">
|
||||
<Input
|
||||
type="date"
|
||||
value={startDate}
|
||||
onChange={(e) => setStartDate(e.target.value)}
|
||||
className={errors.startDate ? 'border-red-500' : ''}
|
||||
/>
|
||||
<span className="text-muted-foreground">~</span>
|
||||
<Input
|
||||
type="date"
|
||||
value={endDate}
|
||||
onChange={(e) => setEndDate(e.target.value)}
|
||||
className={errors.endDate ? 'border-red-500' : ''}
|
||||
/>
|
||||
</div>
|
||||
{(errors.startDate || errors.endDate) && (
|
||||
<p className="text-sm text-red-500">{errors.startDate || errors.endDate}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 제목 */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="title">
|
||||
제목 <span className="text-red-500">*</span>
|
||||
</Label>
|
||||
<Input
|
||||
id="title"
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
placeholder="제목을 입력해주세요"
|
||||
className={errors.title ? 'border-red-500' : ''}
|
||||
/>
|
||||
{errors.title && <p className="text-sm text-red-500">{errors.title}</p>}
|
||||
</div>
|
||||
|
||||
{/* 내용 (에디터) */}
|
||||
<div className="space-y-2">
|
||||
<Label>
|
||||
내용 <span className="text-red-500">*</span>
|
||||
</Label>
|
||||
<RichTextEditor
|
||||
value={content}
|
||||
onChange={setContent}
|
||||
placeholder="내용을 입력해주세요"
|
||||
minHeight="200px"
|
||||
className={errors.content ? 'border-red-500' : ''}
|
||||
/>
|
||||
{errors.content && <p className="text-sm text-red-500">{errors.content}</p>}
|
||||
</div>
|
||||
|
||||
{/* 상태 + 작성자 (같은 줄) */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{/* 상태 */}
|
||||
<div className="space-y-2">
|
||||
<Label>상태</Label>
|
||||
<RadioGroup
|
||||
value={status}
|
||||
onValueChange={(v) => setStatus(v as PopupStatus)}
|
||||
className="flex gap-4"
|
||||
>
|
||||
{STATUS_OPTIONS.map((option) => (
|
||||
<div key={option.value} className="flex items-center space-x-2">
|
||||
<RadioGroupItem value={option.value} id={`status-${option.value}`} />
|
||||
<Label
|
||||
htmlFor={`status-${option.value}`}
|
||||
className="font-normal cursor-pointer"
|
||||
>
|
||||
{option.label}
|
||||
</Label>
|
||||
</div>
|
||||
))}
|
||||
</RadioGroup>
|
||||
</div>
|
||||
|
||||
{/* 작성자 (읽기 전용) */}
|
||||
<div className="space-y-2">
|
||||
<Label>작성자</Label>
|
||||
<Input
|
||||
value={initialData?.author || CURRENT_USER.name}
|
||||
disabled
|
||||
className="bg-gray-50"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 등록일시 */}
|
||||
<div className="space-y-2">
|
||||
<Label>등록일시</Label>
|
||||
<Input
|
||||
value={
|
||||
initialData?.createdAt
|
||||
? format(new Date(initialData.createdAt), 'yyyy-MM-dd HH:mm')
|
||||
: format(new Date(), 'yyyy-MM-dd HH:mm')
|
||||
}
|
||||
disabled
|
||||
className="bg-gray-50"
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 버튼 영역 */}
|
||||
<div className="flex items-center justify-between">
|
||||
<Button type="button" variant="outline" onClick={handleCancel}>
|
||||
<ArrowLeft className="w-4 h-4 mr-2" />
|
||||
취소
|
||||
</Button>
|
||||
<Button type="button" onClick={handleSubmit}>
|
||||
<Save className="w-4 h-4 mr-2" />
|
||||
{mode === 'create' ? '등록' : '저장'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</PageLayout>
|
||||
);
|
||||
}
|
||||
|
||||
export default PopupForm;
|
||||
329
src/components/settings/PopupManagement/PopupList.tsx
Normal file
329
src/components/settings/PopupManagement/PopupList.tsx
Normal file
@@ -0,0 +1,329 @@
|
||||
'use client';
|
||||
|
||||
/**
|
||||
* 팝업관리 리스트 컴포넌트
|
||||
*
|
||||
* 디자인 스펙:
|
||||
* - 페이지 타이틀: 팝업관리
|
||||
* - 페이지 설명: 팝업 목록을 관리합니다.
|
||||
* - 테이블 컬럼: 체크박스, No, 대상, 제목, 상태, 작성자, 등록일, 기간, 작업
|
||||
*/
|
||||
|
||||
import { useState, useMemo, useCallback } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { Megaphone, Plus, Pencil, Trash2 } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Checkbox } from '@/components/ui/checkbox';
|
||||
import { TableCell, TableRow } from '@/components/ui/table';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from '@/components/ui/alert-dialog';
|
||||
import {
|
||||
IntegratedListTemplateV2,
|
||||
type TableColumn,
|
||||
type PaginationConfig,
|
||||
} from '@/components/templates/IntegratedListTemplateV2';
|
||||
import { type Popup, MOCK_POPUPS } from './types';
|
||||
|
||||
const ITEMS_PER_PAGE = 10;
|
||||
|
||||
export function PopupList() {
|
||||
const router = useRouter();
|
||||
|
||||
// ===== 상태 관리 =====
|
||||
const [popups] = useState<Popup[]>(MOCK_POPUPS);
|
||||
const [searchValue, setSearchValue] = useState('');
|
||||
const [selectedItems, setSelectedItems] = useState<Set<string>>(new Set());
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
|
||||
// 삭제 확인 다이얼로그
|
||||
const [showDeleteDialog, setShowDeleteDialog] = useState(false);
|
||||
const [deleteTargetId, setDeleteTargetId] = useState<string | null>(null);
|
||||
|
||||
// ===== 필터링된 데이터 =====
|
||||
const filteredData = useMemo(() => {
|
||||
let result = [...popups];
|
||||
|
||||
// 검색 필터
|
||||
if (searchValue) {
|
||||
const searchLower = searchValue.toLowerCase();
|
||||
result = result.filter(
|
||||
(item) =>
|
||||
item.title.toLowerCase().includes(searchLower) ||
|
||||
item.author.toLowerCase().includes(searchLower)
|
||||
);
|
||||
}
|
||||
|
||||
return result;
|
||||
}, [popups, searchValue]);
|
||||
|
||||
// ===== 페이지네이션 =====
|
||||
const paginatedData = useMemo(() => {
|
||||
const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
|
||||
return filteredData.slice(startIndex, startIndex + ITEMS_PER_PAGE);
|
||||
}, [filteredData, currentPage]);
|
||||
|
||||
const totalPages = Math.ceil(filteredData.length / ITEMS_PER_PAGE);
|
||||
|
||||
// ===== 핸들러 =====
|
||||
const handleToggleSelection = useCallback((id: string) => {
|
||||
setSelectedItems((prev) => {
|
||||
const newSet = new Set(prev);
|
||||
if (newSet.has(id)) {
|
||||
newSet.delete(id);
|
||||
} else {
|
||||
newSet.add(id);
|
||||
}
|
||||
return newSet;
|
||||
});
|
||||
}, []);
|
||||
|
||||
const handleToggleSelectAll = useCallback(() => {
|
||||
if (selectedItems.size === paginatedData.length) {
|
||||
setSelectedItems(new Set());
|
||||
} else {
|
||||
setSelectedItems(new Set(paginatedData.map((item) => item.id)));
|
||||
}
|
||||
}, [selectedItems.size, paginatedData]);
|
||||
|
||||
const handleRowClick = useCallback((item: Popup) => {
|
||||
router.push(`/ko/settings/popup-management/${item.id}`);
|
||||
}, [router]);
|
||||
|
||||
const handleEdit = useCallback(
|
||||
(id: string) => {
|
||||
router.push(`/ko/settings/popup-management/${id}/edit`);
|
||||
},
|
||||
[router]
|
||||
);
|
||||
|
||||
const handleDelete = useCallback((id: string) => {
|
||||
setDeleteTargetId(id);
|
||||
setShowDeleteDialog(true);
|
||||
}, []);
|
||||
|
||||
const handleConfirmDelete = useCallback(() => {
|
||||
if (deleteTargetId) {
|
||||
console.log('Delete popup:', deleteTargetId);
|
||||
// TODO: API 호출
|
||||
}
|
||||
setShowDeleteDialog(false);
|
||||
setDeleteTargetId(null);
|
||||
}, [deleteTargetId]);
|
||||
|
||||
const handleBulkDelete = useCallback(() => {
|
||||
console.log('Bulk delete:', Array.from(selectedItems));
|
||||
// TODO: API 호출
|
||||
setSelectedItems(new Set());
|
||||
}, [selectedItems]);
|
||||
|
||||
const handleCreate = useCallback(() => {
|
||||
router.push('/ko/settings/popup-management/new');
|
||||
}, [router]);
|
||||
|
||||
// ===== 테이블 컬럼 =====
|
||||
const tableColumns: TableColumn[] = [
|
||||
{ key: 'no', label: '번호', className: 'w-[60px] text-center' },
|
||||
{ key: 'target', label: '대상', className: 'w-[80px] text-center' },
|
||||
{ key: 'title', label: '제목', className: 'min-w-[150px]' },
|
||||
{ key: 'status', label: '상태', className: 'w-[80px] text-center' },
|
||||
{ key: 'author', label: '작성자', className: 'w-[100px] text-center' },
|
||||
{ key: 'createdAt', label: '등록일', className: 'w-[110px] text-center' },
|
||||
{ key: 'period', label: '기간', className: 'w-[180px] text-center' },
|
||||
{ key: 'actions', label: '작업', className: 'w-[180px] text-center' },
|
||||
];
|
||||
|
||||
// ===== 테이블 행 렌더링 =====
|
||||
const renderTableRow = useCallback(
|
||||
(item: Popup, index: number, globalIndex: number) => {
|
||||
const isSelected = selectedItems.has(item.id);
|
||||
|
||||
return (
|
||||
<TableRow
|
||||
key={item.id}
|
||||
className="hover:bg-muted/50 cursor-pointer"
|
||||
onClick={() => handleRowClick(item)}
|
||||
>
|
||||
<TableCell className="text-center" onClick={(e) => e.stopPropagation()}>
|
||||
<Checkbox
|
||||
checked={isSelected}
|
||||
onCheckedChange={() => handleToggleSelection(item.id)}
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell className="text-center">{globalIndex}</TableCell>
|
||||
<TableCell className="text-center">
|
||||
{item.target === 'all' ? '전사' : item.targetName || '부서별'}
|
||||
</TableCell>
|
||||
<TableCell>{item.title}</TableCell>
|
||||
<TableCell className="text-center">
|
||||
<Badge variant={item.status === 'active' ? 'default' : 'secondary'}>
|
||||
{item.status === 'active' ? '사용함' : '사용안함'}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="text-center">{item.author}</TableCell>
|
||||
<TableCell className="text-center">{item.createdAt}</TableCell>
|
||||
<TableCell className="text-center">
|
||||
{item.startDate}~{item.endDate}
|
||||
</TableCell>
|
||||
<TableCell className="text-center" onClick={(e) => e.stopPropagation()}>
|
||||
{isSelected && (
|
||||
<div className="flex items-center justify-center gap-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => handleEdit(item.id)}
|
||||
title="수정"
|
||||
>
|
||||
<Pencil className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => handleDelete(item.id)}
|
||||
title="삭제"
|
||||
className="text-destructive hover:text-destructive"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
},
|
||||
[
|
||||
selectedItems,
|
||||
handleRowClick,
|
||||
handleToggleSelection,
|
||||
handleEdit,
|
||||
handleDelete,
|
||||
]
|
||||
);
|
||||
|
||||
// ===== 모바일 카드 렌더링 =====
|
||||
const renderMobileCard = useCallback(
|
||||
(
|
||||
item: Popup,
|
||||
index: number,
|
||||
globalIndex: number,
|
||||
isSelected: boolean,
|
||||
onToggle: () => void
|
||||
) => {
|
||||
return (
|
||||
<Card
|
||||
className="cursor-pointer hover:bg-muted/50"
|
||||
onClick={() => handleRowClick(item)}
|
||||
>
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<div onClick={(e) => e.stopPropagation()}>
|
||||
<Checkbox checked={isSelected} onCheckedChange={onToggle} />
|
||||
</div>
|
||||
<div className="flex-1 space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-muted-foreground">#{globalIndex}</span>
|
||||
<Badge variant={item.status === 'active' ? 'default' : 'secondary'}>
|
||||
{item.status === 'active' ? '사용함' : '사용안함'}
|
||||
</Badge>
|
||||
</div>
|
||||
<h3 className="font-medium">{item.title}</h3>
|
||||
<div className="flex flex-wrap gap-2 text-sm text-muted-foreground">
|
||||
<span>{item.target === 'all' ? '전사' : item.targetName || '부서별'}</span>
|
||||
<span>|</span>
|
||||
<span>{item.author}</span>
|
||||
<span>|</span>
|
||||
<span>{item.createdAt}</span>
|
||||
</div>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
기간: {item.startDate} ~ {item.endDate}
|
||||
</div>
|
||||
{isSelected && (
|
||||
<div className="flex gap-2 pt-2" onClick={(e) => e.stopPropagation()}>
|
||||
<Button variant="outline" size="sm" onClick={() => handleEdit(item.id)}>
|
||||
수정
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="text-destructive"
|
||||
onClick={() => handleDelete(item.id)}
|
||||
>
|
||||
삭제
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
},
|
||||
[handleRowClick, handleEdit, handleDelete]
|
||||
);
|
||||
|
||||
// ===== 페이지네이션 설정 =====
|
||||
const pagination: PaginationConfig = {
|
||||
currentPage,
|
||||
totalPages,
|
||||
totalItems: filteredData.length,
|
||||
itemsPerPage: ITEMS_PER_PAGE,
|
||||
onPageChange: setCurrentPage,
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<IntegratedListTemplateV2
|
||||
title="팝업관리"
|
||||
description="팝업 목록을 관리합니다."
|
||||
icon={Megaphone}
|
||||
headerActions={
|
||||
<Button onClick={handleCreate}>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
팝업 등록
|
||||
</Button>
|
||||
}
|
||||
searchValue={searchValue}
|
||||
onSearchChange={setSearchValue}
|
||||
searchPlaceholder="제목, 작성자로 검색..."
|
||||
tableColumns={tableColumns}
|
||||
data={paginatedData}
|
||||
allData={filteredData}
|
||||
selectedItems={selectedItems}
|
||||
onToggleSelection={handleToggleSelection}
|
||||
onToggleSelectAll={handleToggleSelectAll}
|
||||
getItemId={(item) => item.id}
|
||||
onBulkDelete={handleBulkDelete}
|
||||
renderTableRow={renderTableRow}
|
||||
renderMobileCard={renderMobileCard}
|
||||
pagination={pagination}
|
||||
/>
|
||||
|
||||
{/* 삭제 확인 다이얼로그 */}
|
||||
<AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>팝업 삭제</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
선택한 팝업을 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>취소</AlertDialogCancel>
|
||||
<AlertDialogAction onClick={handleConfirmDelete}>삭제</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default PopupList;
|
||||
4
src/components/settings/PopupManagement/index.tsx
Normal file
4
src/components/settings/PopupManagement/index.tsx
Normal file
@@ -0,0 +1,4 @@
|
||||
export { PopupList } from './PopupList';
|
||||
export { PopupForm } from './PopupForm';
|
||||
export { PopupDetail } from './PopupDetail';
|
||||
export * from './types';
|
||||
136
src/components/settings/PopupManagement/types.ts
Normal file
136
src/components/settings/PopupManagement/types.ts
Normal file
@@ -0,0 +1,136 @@
|
||||
/**
|
||||
* 팝업관리 타입 정의
|
||||
*/
|
||||
|
||||
// 팝업 대상
|
||||
export type PopupTarget = 'all' | 'department';
|
||||
|
||||
// 팝업 상태
|
||||
export type PopupStatus = 'active' | 'inactive';
|
||||
|
||||
// 팝업 데이터 인터페이스
|
||||
export interface Popup {
|
||||
id: string;
|
||||
target: PopupTarget;
|
||||
targetName?: string; // 부서명 (대상이 department인 경우)
|
||||
title: string;
|
||||
content: string;
|
||||
status: PopupStatus;
|
||||
author: string;
|
||||
authorId: string;
|
||||
createdAt: string;
|
||||
startDate: string;
|
||||
endDate: string;
|
||||
}
|
||||
|
||||
// 팝업 폼 데이터
|
||||
export interface PopupFormData {
|
||||
target: PopupTarget;
|
||||
targetDepartmentId?: string;
|
||||
title: string;
|
||||
content: string;
|
||||
status: PopupStatus;
|
||||
startDate: string;
|
||||
endDate: string;
|
||||
}
|
||||
|
||||
// 대상 옵션
|
||||
export const TARGET_OPTIONS = [
|
||||
{ value: 'all', label: '전사' },
|
||||
{ value: 'department', label: '부서별' },
|
||||
] as const;
|
||||
|
||||
// 상태 옵션
|
||||
export const STATUS_OPTIONS = [
|
||||
{ value: 'inactive', label: '사용안함' },
|
||||
{ value: 'active', label: '사용함' },
|
||||
] as const;
|
||||
|
||||
// Mock 데이터
|
||||
export const MOCK_POPUPS: Popup[] = [
|
||||
{
|
||||
id: '1',
|
||||
target: 'all',
|
||||
title: '휴가',
|
||||
content: '<p>전사 휴가 안내입니다.</p>',
|
||||
status: 'active',
|
||||
author: '홍길동',
|
||||
authorId: 'user1',
|
||||
createdAt: '2025-09-03',
|
||||
startDate: '2025-09-30',
|
||||
endDate: '2025-12-10',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
target: 'all',
|
||||
title: '휴직',
|
||||
content: '<p>휴직 관련 안내입니다.</p>',
|
||||
status: 'active',
|
||||
author: '홍길동',
|
||||
authorId: 'user1',
|
||||
createdAt: '2025-09-03',
|
||||
startDate: '2025-09-30',
|
||||
endDate: '2025-12-10',
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
target: 'department',
|
||||
targetName: '부서별',
|
||||
title: '휴가',
|
||||
content: '<p>부서별 휴가 안내입니다.</p>',
|
||||
status: 'inactive',
|
||||
author: '홍길동',
|
||||
authorId: 'user1',
|
||||
createdAt: '2025-09-03',
|
||||
startDate: '2025-09-30',
|
||||
endDate: '2025-12-10',
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
target: 'all',
|
||||
title: '휴직',
|
||||
content: '<p>휴직 안내입니다.</p>',
|
||||
status: 'inactive',
|
||||
author: '홍길동',
|
||||
authorId: 'user1',
|
||||
createdAt: '2025-09-03',
|
||||
startDate: '2025-09-30',
|
||||
endDate: '2025-12-10',
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
target: 'all',
|
||||
title: '휴직',
|
||||
content: '<p>전사 휴직 공지입니다.</p>',
|
||||
status: 'active',
|
||||
author: '홍길동',
|
||||
authorId: 'user1',
|
||||
createdAt: '2025-09-03',
|
||||
startDate: '2025-09-30',
|
||||
endDate: '2025-12-10',
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
target: 'all',
|
||||
title: '일정',
|
||||
content: '<p>전사 일정 안내입니다.</p>',
|
||||
status: 'active',
|
||||
author: '홍길동',
|
||||
authorId: 'user1',
|
||||
createdAt: '2025-09-03',
|
||||
startDate: '2025-09-30',
|
||||
endDate: '2025-12-10',
|
||||
},
|
||||
{
|
||||
id: '7',
|
||||
target: 'all',
|
||||
title: '휴가',
|
||||
content: '<p>휴가 일정 안내입니다.</p>',
|
||||
status: 'active',
|
||||
author: '홍길동',
|
||||
authorId: 'user1',
|
||||
createdAt: '2025-09-03',
|
||||
startDate: '2025-09-30',
|
||||
endDate: '2025-12-10',
|
||||
},
|
||||
];
|
||||
Reference in New Issue
Block a user