SamProject/sam-react-prod
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 공지 팝업 시스템 구현 및 캘린더/어음/팝업관리 개선

Browse Source 
- NoticePopupModal: 공지 팝업 컨테이너/actions 신규 구현
- AuthenticatedLayout에 공지 팝업 연동
- CalendarSection: 일정 타입 확장 및 UI 개선
- BillManagementClient: 기능 확장
- PopupManagement: popupDetailConfig 대폭 확장, 상세/폼 개선
- BoardForm/BoardManagement: 게시판 폼 개선
- LoginPage, logout, userStorage: 인증 관련 소폭 수정
- dashboard types 정비
- claudedocs: 공지팝업 구현, 캘린더 어음연동/일정타입, API changelog 문서 추가
This commit is contained in:
유병철
2026-03-10 15:16:41 +09:00
parent 7bd4bd38da
commit 397eb2c19c
23 changed files with 1004 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
src/components/accounting/BillManagement/BillManagementClient.tsx
View File

@@ -17,7 +17,7 @@ import { useDateRange } from '@/hooks';
import {
FileText,
Plus,
Save,
RefreshCw,
} from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Checkbox } from '@/components/ui/checkbox';
@@ -51,6 +51,8 @@ import {
BILL_TYPE_FILTER_OPTIONS,
BILL_STATUS_COLORS,
BILL_STATUS_FILTER_OPTIONS,
RECEIVED_BILL_STATUS_OPTIONS,
ISSUED_BILL_STATUS_OPTIONS,
getBillStatusLabel,
} from './types';
import { getBills, deleteBill, updateBillStatus } from './actions';
@@ -84,6 +86,7 @@ export function BillManagementClient({
const [billTypeFilter, setBillTypeFilter] = useState<string>(initialBillType || 'received');
const [vendorFilter, setVendorFilter] = useState<string>(initialVendorId || 'all');
const [statusFilter, setStatusFilter] = useState<string>('all');
const [targetStatus, setTargetStatus] = useState<string>('');
const [selectedItems, setSelectedItems] = useState<Set<string>>(new Set());
const [currentPage, setCurrentPage] = useState(initialPagination.currentPage);
const itemsPerPage = initialPagination.perPage;
@@ -262,15 +265,15 @@ export function BillManagementClient({
];
}, [data]);
// ===== 저장 핸들러 =====
const handleSave = useCallback(async () => {
// ===== 상태 변경 핸들러 =====
const handleStatusChange = useCallback(async () => {
if (selectedItems.size === 0) {
toast.warning('선택된 항목이 없습니다.');
return;
}
if (statusFilter === 'all') {
toast.warning('상태를 선택해주세요.');
if (!targetStatus) {
toast.warning('변경할 상태를 선택해주세요.');
return;
}
@@ -278,7 +281,7 @@ export function BillManagementClient({
let successCount = 0;
for (const id of selectedItems) {
const result = await updateBillStatus(id, statusFilter as BillStatus);
const result = await updateBillStatus(id, targetStatus as BillStatus);
if (result.success) {
successCount++;
}
@@ -286,14 +289,20 @@ export function BillManagementClient({
if (successCount > 0) {
invalidateDashboard('bill');
toast.success(`${successCount}건이 저장되었습니다.`);
toast.success(`${successCount}건의 상태가 변경되었습니다.`);
loadData(currentPage);
setSelectedItems(new Set());
setTargetStatus('');
} else {
toast.error('저장에 실패했습니다.');
toast.error('상태 변경에 실패했습니다.');
}
setIsLoading(false);
}, [selectedItems, statusFilter, loadData, currentPage]);
}, [selectedItems, targetStatus, loadData, currentPage]);
// 구분에 따른 상태 옵션
const statusChangeOptions = useMemo(() => {
return billTypeFilter === 'issued' ? ISSUED_BILL_STATUS_OPTIONS : RECEIVED_BILL_STATUS_OPTIONS;
}, [billTypeFilter]);
// ===== UniversalListPage Config =====
const config: UniversalListConfig<BillRecord> = useMemo(
@@ -377,12 +386,30 @@ export function BillManagementClient({
icon: Plus,
},
// 헤더 액션: 저장 버튼만 (필터는 tableHeaderActions에서 통합 관리)
headerActions: () => (
<Button onClick={handleSave} size="sm" disabled={isLoading}>
<Save className="h-4 w-4 mr-1" />
저장
</Button>
// 선택 시 상태 변경 액션
selectionActions: () => (
<div className="flex items-center gap-2">
<Select value={targetStatus} onValueChange={setTargetStatus}>
<SelectTrigger className="min-w-[130px] w-auto h-8">
<SelectValue placeholder="상태 선택" />
</SelectTrigger>
<SelectContent>
{statusChangeOptions.map((option) => (
<SelectItem key={option.value} value={option.value}>
{option.label}
</SelectItem>
))}
</SelectContent>
</Select>
<Button
size="sm"
onClick={handleStatusChange}
disabled={!targetStatus || isLoading}
>
<RefreshCw className="h-4 w-4 mr-1" />
상태변경
</Button>
</div>
),
// 테이블 헤더 액션 (필터)
@@ -447,7 +474,9 @@ export function BillManagementClient({
router,
loadData,
currentPage,
handleSave,
handleStatusChange,
statusChangeOptions,
targetStatus,
renderTableRow,
renderMobileCard,
]

8
src/components/auth/LoginPage.tsx
View File

@@ -119,12 +119,20 @@ export function LoginPage() {
name: data.user?.name || userId,
position: data.roles?.[0]?.description || '사용자',
userId: userId,
department: data.user?.department || null,
department_id: data.user?.department_id || null,
menu: transformedMenus, // 변환된 메뉴 구조 저장
roles: data.roles || [],
tenant: data.tenant || {},
};
localStorage.setItem('user', JSON.stringify(userData));
// 유저별 persist store를 새 유저 키로 rehydrate
const { useFavoritesStore } = await import('@/stores/favoritesStore');
const { useTableColumnStore } = await import('@/stores/useTableColumnStore');
useFavoritesStore.persist.rehydrate();
useTableColumnStore.persist.rehydrate();
// 메뉴 폴링 재시작 플래그 설정 (세션 만료 후 재로그인 시)
sessionStorage.setItem('auth_just_logged_in', 'true');

23
src/components/board/BoardForm/index.tsx
View File

@@ -61,13 +61,14 @@ interface BoardFormProps {
initialData?: Post;
}
// 현재 로그인 사용자 정보 (실제로는 auth context에서 가져옴)
const CURRENT_USER = {
id: 'user1',
name: '홍길동',
department: '개발팀',
position: '과장',
};
// 로그인 사용자 이름을 가져오는 헬퍼
function getLoggedInUserName(): string {
if (typeof window === 'undefined') return '';
try {
const userDataStr = localStorage.getItem('user');
return userDataStr ? JSON.parse(userDataStr).name || '' : '';
} catch { return ''; }
}
// 상단 고정 최대 개수
const MAX_PINNED_COUNT = 5;
@@ -75,6 +76,12 @@ const MAX_PINNED_COUNT = 5;
export function BoardForm({ mode, initialData }: BoardFormProps) {
const router = useRouter();
// 로그인 사용자 이름
const [currentUserName, setCurrentUserName] = useState('');
useEffect(() => {
setCurrentUserName(getLoggedInUserName());
}, []);
// ===== 폼 상태 =====
const [boardCode, setBoardCode] = useState(initialData?.boardCode || '');
const [isPinned, setIsPinned] = useState(initialData?.isPinned ? 'true' : 'false');
@@ -330,7 +337,7 @@ export function BoardForm({ mode, initialData }: BoardFormProps) {
<div className="space-y-2">
<Label>작성자</Label>
<Input
value={CURRENT_USER.name}
value={currentUserName}
disabled
className="bg-gray-50"
/>

10
src/components/board/BoardManagement/BoardForm.tsx
View File

@@ -117,8 +117,14 @@ export function BoardForm({ mode, board, onSubmit }: BoardFormProps) {
}));
};
// 작성자 (현재 로그인한 사용자 - mock)
const currentUser = '홍길동';
// 작성자 (로그인한 사용자)
const [currentUser, setCurrentUser] = useState('');
useEffect(() => {
const userDataStr = typeof window !== 'undefined' ? localStorage.getItem('user') : null;
if (userDataStr) {
try { setCurrentUser(JSON.parse(userDataStr).name || ''); } catch { /* ignore */ }
}
}, []);
// 등록일시
const registeredAt = mode === 'edit' && board ? formatDateTime(board.createdAt) : getCurrentDateTime();

104
src/components/business/CEODashboard/sections/CalendarSection.tsx
View File

@@ -38,17 +38,35 @@ const SCHEDULE_TYPE_COLORS: Record<string, string> = {
schedule: 'blue',
order: 'green',
construction: 'purple',
bill: 'amber',
expected_expense: 'rose',
delivery: 'cyan',
shipment: 'teal',
issue: 'red',
other: 'gray',
holiday: 'red',
tax: 'orange',
};
// 일정 타입별 상세 페이지 라우트
const SCHEDULE_TYPE_ROUTES: Record<string, string> = {
bill: '/accounting/bills',
order: '/production/work-orders',
construction: '/construction/project/contract',
expected_expense: '/accounting/expected-expenses',
delivery: '/sales/order-management-sales',
shipment: '/outbound/shipments',
};
// 일정 타입별 라벨
const SCHEDULE_TYPE_LABELS: Record<string, string> = {
order: '생산',
construction: '시공',
schedule: '일정',
bill: '어음',
expected_expense: '결제예정',
delivery: '납기',
shipment: '출고',
other: '기타',
};
@@ -57,6 +75,10 @@ const SCHEDULE_TYPE_BADGE_COLORS: Record<string, string> = {
order: 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300',
construction: 'bg-purple-100 text-purple-700 dark:bg-purple-900/40 dark:text-purple-300',
schedule: 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300',
bill: 'bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300',
expected_expense: 'bg-rose-100 text-rose-700 dark:bg-rose-900/40 dark:text-rose-300',
delivery: 'bg-cyan-100 text-cyan-700 dark:bg-cyan-900/40 dark:text-cyan-300',
shipment: 'bg-teal-100 text-teal-700 dark:bg-teal-900/40 dark:text-teal-300',
other: 'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300',
};
@@ -88,6 +110,10 @@ const TASK_FILTER_OPTIONS: { value: ExtendedTaskFilterType; label: string }[] =
{ value: 'schedule', label: '일정' },
{ value: 'order', label: '발주' },
{ value: 'construction', label: '시공' },
{ value: 'bill', label: '어음' },
{ value: 'expected_expense', label: '결제예정' },
{ value: 'delivery', label: '납기' },
{ value: 'shipment', label: '출고' },
{ value: 'issue', label: '이슈' },
];
@@ -245,6 +271,19 @@ export function CalendarSection({
return parts.join(' | ');
};
// 일정 타입별 상세 페이지 링크 생성 (bill_123 → /ko/accounting/bills/123)
const getScheduleLink = (schedule: CalendarScheduleItem): string | null => {
const basePath = SCHEDULE_TYPE_ROUTES[schedule.type];
if (!basePath) return null;
// expected_expense는 목록 페이지만 존재 (상세 페이지 없음)
if (schedule.type === 'expected_expense') {
return `/ko${basePath}`;
}
const numericId = schedule.id.split('_').pop();
if (!numericId) return null;
return `/ko${basePath}/${numericId}`;
};
const handleDateClick = (date: Date) => {
setSelectedDate(date);
};
@@ -461,11 +500,18 @@ export function CalendarSection({
schedule: 'bg-blue-500',
order: 'bg-green-500',
construction: 'bg-purple-500',
bill: 'bg-amber-500',
expected_expense: 'bg-rose-500',
delivery: 'bg-cyan-500',
shipment: 'bg-teal-500',
issue: 'bg-red-400',
};
const dotColor = colorMap[evType] || 'bg-gray-400';
const title = evData?.name as string || evData?.title as string || ev.title;
const cleanTitle = title?.replace(/^[🔴🟠]\s*/, '') || '';
const mobileScheduleLink = isSelected && evType !== 'holiday' && evType !== 'tax' && evType !== 'issue'
? getScheduleLink(evData as unknown as CalendarScheduleItem)
: null;
return (
<div key={ev.id} className="flex items-center gap-1.5 text-xs text-muted-foreground">
<span className={`w-2 h-2 rounded-full shrink-0 ${dotColor}`} />
@@ -474,7 +520,18 @@ export function CalendarSection({
{SCHEDULE_TYPE_LABELS[evType] || ''}
</span>
)}
<span className={isSelected ? '' : 'truncate'}>{cleanTitle}</span>
<span className={`${isSelected ? '' : 'truncate'} flex-1`}>{cleanTitle}</span>
{mobileScheduleLink && (
<span
className="flex items-center gap-0.5 text-blue-600 dark:text-blue-400 hover:underline cursor-pointer shrink-0"
onClick={(e) => {
e.stopPropagation();
router.push(mobileScheduleLink);
}}
>
<ExternalLink className="h-3 w-3" />
</span>
)}
</div>
);
})}
@@ -569,21 +626,38 @@ export function CalendarSection({
);
})}
{selectedDateItems.schedules.map((schedule) => (
<div
key={schedule.id}
className="p-3 border border-border rounded-lg hover:bg-muted/50 transition-colors cursor-pointer"
onClick={() => onScheduleClick?.(schedule)}
>
<div className="flex items-start gap-2 mb-1">
<Badge variant="secondary" className={`shrink-0 text-xs ${SCHEDULE_TYPE_BADGE_COLORS[schedule.type]}`}>
{SCHEDULE_TYPE_LABELS[schedule.type] || '일정'}
</Badge>
<span className="font-medium text-base text-foreground flex-1">{schedule.title}</span>
{selectedDateItems.schedules.map((schedule) => {
const scheduleLink = getScheduleLink(schedule);
return (
<div
key={schedule.id}
className="p-3 border border-border rounded-lg hover:bg-muted/50 transition-colors cursor-pointer"
onClick={() => onScheduleClick?.(schedule)}
>
<div className="flex items-start gap-2 mb-1">
<Badge variant="secondary" className={`shrink-0 text-xs ${SCHEDULE_TYPE_BADGE_COLORS[schedule.type]}`}>
{SCHEDULE_TYPE_LABELS[schedule.type] || '일정'}
</Badge>
<span className="font-medium text-base text-foreground flex-1">{schedule.title}</span>
</div>
<div className="flex items-center justify-between text-sm text-muted-foreground">
<span>{formatScheduleDetail(schedule)}</span>
{scheduleLink && (
<span
className="flex items-center gap-1 text-blue-600 dark:text-blue-400 hover:underline cursor-pointer shrink-0 ml-2"
onClick={(e) => {
e.stopPropagation();
router.push(scheduleLink);
}}
>
상세보기
<ExternalLink className="h-3 w-3" />
</span>
)}
</div>
</div>
<div className="text-sm text-muted-foreground">{formatScheduleDetail(schedule)}</div>
</div>
))}
);
})}
{selectedDateItems.issues.map((issue) => (
<div

6
src/components/business/CEODashboard/types.ts
View File

@@ -161,7 +161,8 @@ export interface CalendarScheduleItem {
startTime?: string; // "09:00"
endTime?: string; // "12:00"
isAllDay?: boolean;
type: 'schedule' | 'order' | 'construction' | 'other'; // 일정, 발주, 시공
type: 'schedule' | 'order' | 'construction' | 'other' | 'bill'
| 'expected_expense' | 'delivery' | 'shipment'; // 일정, 발주, 시공, 어음, 결제예정, 납기, 출고
department?: string; // 부서명
personName?: string; // 담당자명
color?: string;
@@ -174,7 +175,8 @@ export type CalendarViewType = 'week' | 'month';
export type CalendarDeptFilterType = 'all' | 'department' | 'personal';
// 캘린더 업무 필터 타입
export type CalendarTaskFilterType = 'all' | 'schedule' | 'order' | 'construction';
export type CalendarTaskFilterType = 'all' | 'schedule' | 'order' | 'construction' | 'bill'
| 'expected_expense' | 'delivery' | 'shipment';
// ===== 매출 현황 데이터 =====
export interface SalesMonthlyTrend {

92
src/components/common/NoticePopupModal/NoticePopupContainer.tsx Normal file
View File

@@ -0,0 +1,92 @@
'use client';
import { useEffect, useState } from 'react';
import { NoticePopupModal, isPopupDismissedForToday } from './NoticePopupModal';
import { getActivePopups } from './actions';
import type { NoticePopupData } from './NoticePopupModal';
import type { Popup } from '@/components/settings/PopupManagement/types';
/**
* 활성 팝업을 자동으로 가져와 순차적으로 표시하는 컨테이너
* - AuthenticatedLayout에 마운트
* - 오늘 하루 안 보기 처리된 팝업은 건너뜀
* - 여러 개일 경우 하나 닫으면 다음 팝업 표시
*/
export default function NoticePopupContainer() {
const [popups, setPopups] = useState<NoticePopupData[]>([]);
const [currentIndex, setCurrentIndex] = useState(0);
const [open, setOpen] = useState(false);
useEffect(() => {
let cancelled = false;
async function fetchPopups() {
try {
// localStorage에서 사용자 부서 ID 조회 (부서별 팝업 필터링용)
const user = JSON.parse(localStorage.getItem('user') || '{}');
const activePopups = await getActivePopups(user.department_id ?? undefined);
if (cancelled) return;
// 날짜 범위 + 오늘 하루 안 보기 필터링
const today = new Date().toISOString().slice(0, 10); // YYYY-MM-DD
const visiblePopups = activePopups
.filter((p) => {
// 기간 내 팝업만 (startDate~endDate)
if (p.startDate && today < p.startDate) return false;
if (p.endDate && today > p.endDate) return false;
// 오늘 하루 안 보기 처리된 팝업 제외
if (isPopupDismissedForToday(p.id)) return false;
return true;
})
.map((p) => ({
id: p.id,
title: p.title,
content: p.content,
}));
if (visiblePopups.length > 0) {
setPopups(visiblePopups);
setCurrentIndex(0);
setOpen(true);
}
} catch {
// 팝업 로드 실패 시 무시 (핵심 기능 아님)
}
}
fetchPopups();
return () => {
cancelled = true;
};
}, []);
const currentPopup = popups[currentIndex];
if (!currentPopup) return null;
const handleOpenChange = (isOpen: boolean) => {
if (!isOpen) {
// 다음 팝업이 있으면 표시
const nextIndex = currentIndex + 1;
if (nextIndex < popups.length) {
setCurrentIndex(nextIndex);
// 약간의 딜레이로 자연스러운 전환
setTimeout(() => setOpen(true), 200);
} else {
setOpen(false);
}
} else {
setOpen(true);
}
};
return (
<NoticePopupModal
popup={currentPopup}
open={open}
onOpenChange={handleOpenChange}
/>
);
}

31
src/components/common/NoticePopupModal/actions.ts Normal file
View File

@@ -0,0 +1,31 @@
'use server';
/**
* 공지 팝업 서버 액션
*
* API Endpoints:
* - GET /api/v1/popups/active - 사용자용 활성 팝업 조회 (날짜+부서 필터 백엔드 처리)
*/
import { executeServerAction } from '@/lib/api/execute-server-action';
import { buildApiUrl } from '@/lib/api/query-params';
import { type PopupApiData, transformApiToFrontend } from '@/components/settings/PopupManagement/utils';
import type { Popup } from '@/components/settings/PopupManagement/types';
/**
* 활성 팝업 목록 조회 (사용자용)
* - 백엔드 scopeActive(): status=active + 날짜 범위 내
* - 백엔드 scopeForUser(): 전사 OR 사용자 부서
* @param departmentId - 사용자 소속 부서 ID (부서별 팝업 필터용)
*/
export async function getActivePopups(departmentId?: number): Promise<Popup[]> {
const result = await executeServerAction({
url: buildApiUrl('/api/v1/popups/active', {
department_id: departmentId,
}),
transform: (data: PopupApiData[]) => data.map(transformApiToFrontend),
errorMessage: '활성 팝업 조회에 실패했습니다.',
});
return result.success ? (result.data ?? []) : [];
}

21
src/components/settings/PopupManagement/PopupDetailClientV2.tsx
View File

@@ -12,7 +12,7 @@ import { IntegratedDetailTemplate } from '@/components/templates/IntegratedDetai
import type { DetailMode } from '@/components/templates/IntegratedDetailTemplate/types';
import type { Popup, PopupFormData } from './types';
import { getPopupById, createPopup, updatePopup, deletePopup } from './actions';
import { popupDetailConfig } from './popupDetailConfig';
import { popupDetailConfig, decodeTargetValue } from './popupDetailConfig';
import { toast } from 'sonner';
interface PopupDetailClientV2Props {
@@ -20,11 +20,14 @@ interface PopupDetailClientV2Props {
initialMode?: DetailMode;
}
// 현재 로그인 사용자 정보 (실제로는 auth context에서 가져옴)
const CURRENT_USER = {
id: 'user1',
name: '홍길동',
};
// 로그인 사용자 이름을 가져오는 헬퍼
function getLoggedInUserName(): string {
if (typeof window === 'undefined') return '';
try {
const userDataStr = localStorage.getItem('user');
return userDataStr ? JSON.parse(userDataStr).name || '' : '';
} catch { return ''; }
}
export function PopupDetailClientV2({ popupId, initialMode }: PopupDetailClientV2Props) {
const router = useRouter();
@@ -99,8 +102,10 @@ export function PopupDetailClientV2({ popupId, initialMode }: PopupDetailClientV
const handleSubmit = useCallback(
async (formData: Record<string, unknown>) => {
try {
const { targetType, departmentId } = decodeTargetValue((formData.target as string) || 'all');
const popupFormData: PopupFormData = {
target: (formData.target as PopupFormData['target']) || 'all',
target: targetType,
targetDepartmentId: departmentId ? String(departmentId) : undefined,
title: formData.title as string,
content: formData.content as string,
status: (formData.status as PopupFormData['status']) || 'inactive',
@@ -167,7 +172,7 @@ export function PopupDetailClientV2({ popupId, initialMode }: PopupDetailClientV
? ({
target: 'all',
status: 'inactive',
author: CURRENT_USER.name,
author: getLoggedInUserName(),
createdAt: format(new Date(), 'yyyy-MM-dd HH:mm'),
startDate: format(new Date(), 'yyyy-MM-dd'),
endDate: format(new Date(), 'yyyy-MM-dd'),

15
src/components/settings/PopupManagement/PopupForm.tsx
View File

@@ -51,11 +51,14 @@ interface PopupFormProps {
initialData?: Popup;
}
// 현재 로그인 사용자 정보 (실제로는 auth context에서 가져옴)
const CURRENT_USER = {
id: 'user1',
name: '홍길동',
};
// 로그인 사용자 이름을 가져오는 헬퍼
function getLoggedInUserName(): string {
if (typeof window === 'undefined') return '';
try {
const userDataStr = localStorage.getItem('user');
return userDataStr ? JSON.parse(userDataStr).name || '' : '';
} catch { return ''; }
}
export function PopupForm({ mode, initialData }: PopupFormProps) {
const router = useRouter();
@@ -268,7 +271,7 @@ export function PopupForm({ mode, initialData }: PopupFormProps) {
<div className="space-y-2">
<Label>작성자</Label>
<Input
value={initialData?.author || CURRENT_USER.name}
value={initialData?.author || getLoggedInUserName()}
disabled
className="bg-gray-50"
/>

13
src/components/settings/PopupManagement/actions.ts
View File

@@ -97,6 +97,19 @@ export async function deletePopup(id: string): Promise<ActionResult> {
});
}
/**
* 부서 목록 조회 (팝업 대상 선택용)
*/
export async function getDepartmentList(): Promise<{ id: number; name: string }[]> {
const result = await executeServerAction({
url: buildApiUrl('/api/v1/departments'),
transform: (data: { data: { id: number; name: string }[] }) =>
data.data.map((d) => ({ id: d.id, name: d.name })),
errorMessage: '부서 목록 조회에 실패했습니다.',
});
return result.data || [];
}
/**
* 팝업 일괄 삭제
*/

164
src/components/settings/PopupManagement/popupDetailConfig.ts
View File

@@ -7,8 +7,10 @@ import { Megaphone } from 'lucide-react';
import type { DetailConfig, FieldDefinition, SectionDefinition } from '@/components/templates/IntegratedDetailTemplate/types';
import type { Popup, PopupFormData, PopupTarget, PopupStatus } from './types';
import { RichTextEditor } from '@/components/board/RichTextEditor';
import { createElement } from 'react';
import { createElement, useState, useEffect } from 'react';
import { sanitizeHTML } from '@/lib/sanitize';
import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@/components/ui/select';
import { getDepartmentList } from './actions';
// ===== 대상 옵션 =====
const TARGET_OPTIONS = [
@@ -22,18 +24,76 @@ const STATUS_OPTIONS = [
{ value: 'active', label: '사용함' },
];
/**
* target 값 인코딩/디코딩 헬퍼
* 'all' → target_type: all, target_id: null
* 'department:13' → target_type: department, target_id: 13
*/
export function encodeTargetValue(targetType: string, departmentId?: number | null): string {
if (targetType === 'department' && departmentId) {
return `department:${departmentId}`;
}
return targetType;
}
export function decodeTargetValue(value: string): { targetType: PopupTarget; departmentId: number | null } {
if (value.startsWith('department:')) {
const id = parseInt(value.split(':')[1]);
return { targetType: 'department', departmentId: isNaN(id) ? null : id };
}
if (value === 'department') {
return { targetType: 'department', departmentId: null };
}
return { targetType: 'all', departmentId: null };
}
// ===== 필드 정의 =====
export const popupFields: FieldDefinition[] = [
{
key: 'target',
label: '대상',
type: 'select',
type: 'custom',
required: true,
options: TARGET_OPTIONS,
placeholder: '대상을 선택해주세요',
validation: [
{ type: 'required', message: '대상을 선택해주세요.' },
{
type: 'custom',
message: '대상을 선택해주세요.',
validate: (value) => !!value && value !== '',
},
{
type: 'custom',
message: '부서를 선택해주세요.',
validate: (value) => {
const str = value as string;
if (str === 'department') return false; // 부서 미선택
return true;
},
},
],
renderField: ({ value, onChange, mode, disabled }) => {
const strValue = (value as string) || 'all';
const { targetType, departmentId } = decodeTargetValue(strValue);
if (mode === 'view') {
// view 모드에서는 formatValue로 처리
return null;
}
// Edit/Create 모드: 대상 타입 Select + 조건부 부서 Select
return createElement(TargetSelectorField, {
targetType,
departmentId,
onChange,
disabled: !!disabled,
});
},
formatValue: (value) => {
// view 모드에서 표시할 텍스트 — 실제 부서명은 PopupDetailClientV2에서 처리
const strValue = (value as string) || 'all';
if (strValue === 'all') return '전사';
if (strValue.startsWith('department:')) return '부서별'; // 부서명은 아래서 덮어씌움
return '부서별';
},
},
{
key: 'startDate',
@@ -92,13 +152,11 @@ export const popupFields: FieldDefinition[] = [
],
renderField: ({ value, onChange, mode, disabled }) => {
if (mode === 'view') {
// View 모드: HTML 렌더링
return createElement('div', {
className: 'border border-gray-200 rounded-md p-4 bg-gray-50 min-h-[100px] prose prose-sm max-w-none',
dangerouslySetInnerHTML: { __html: sanitizeHTML((value as string) || '') },
});
}
// Edit/Create 모드: RichTextEditor
return createElement(RichTextEditor, {
value: (value as string) || '',
onChange: onChange,
@@ -172,7 +230,7 @@ export const popupDetailConfig: DetailConfig<Popup> = {
},
},
transformInitialData: (data: Popup) => ({
target: data.target || 'all',
target: encodeTargetValue(data.target, data.targetId),
startDate: data.startDate || '',
endDate: data.endDate || '',
title: data.title || '',
@@ -181,12 +239,86 @@ export const popupDetailConfig: DetailConfig<Popup> = {
author: data.author || '',
createdAt: data.createdAt || '',
}),
transformSubmitData: (formData): Partial<PopupFormData> => ({
target: formData.target as PopupTarget,
title: formData.title as string,
content: formData.content as string,
status: formData.status as PopupStatus,
startDate: formData.startDate as string,
endDate: formData.endDate as string,
}),
transformSubmitData: (formData): Partial<PopupFormData> => {
const { targetType, departmentId } = decodeTargetValue(formData.target as string);
return {
target: targetType,
targetDepartmentId: departmentId ? String(departmentId) : undefined,
title: formData.title as string,
content: formData.content as string,
status: formData.status as PopupStatus,
startDate: formData.startDate as string,
endDate: formData.endDate as string,
};
},
};
// ===== 대상 선택 필드 컴포넌트 =====
interface TargetSelectorFieldProps {
targetType: string;
departmentId: number | null;
onChange: (value: unknown) => void;
disabled: boolean;
}
function TargetSelectorField({ targetType, departmentId, onChange, disabled }: TargetSelectorFieldProps) {
const [departments, setDepartments] = useState<{ id: number; name: string }[]>([]);
const [loading, setLoading] = useState(false);
useEffect(() => {
if (targetType === 'department' && departments.length === 0) {
setLoading(true);
getDepartmentList()
.then((list: { id: number; name: string }[]) => setDepartments(list))
.finally(() => setLoading(false));
}
}, [targetType]);
const handleTypeChange = (newType: string) => {
if (newType === 'all') {
onChange('all');
} else {
onChange('department');
}
};
const handleDepartmentChange = (deptId: string) => {
onChange(`department:${deptId}`);
};
return createElement('div', { className: 'space-y-2' },
// 대상 타입 Select
createElement(Select, {
value: targetType,
onValueChange: handleTypeChange,
disabled,
},
createElement(SelectTrigger, null,
createElement(SelectValue, { placeholder: '대상을 선택해주세요' })
),
createElement(SelectContent, null,
TARGET_OPTIONS.map(opt =>
createElement(SelectItem, { key: opt.value, value: opt.value }, opt.label)
)
)
),
// 부서별 선택 시 부서 Select 추가
targetType === 'department' && createElement(Select, {
value: departmentId ? String(departmentId) : undefined,
onValueChange: handleDepartmentChange,
disabled: disabled || loading,
},
createElement(SelectTrigger, null,
createElement(SelectValue, {
placeholder: loading ? '부서 목록 로딩 중...' : '부서를 선택해주세요',
})
),
createElement(SelectContent, null,
departments.map((dept: { id: number; name: string }) =>
createElement(SelectItem, { key: dept.id, value: String(dept.id) }, dept.name)
)
)
)
);
}

1
src/components/settings/PopupManagement/types.ts
View File

@@ -12,6 +12,7 @@ export type PopupStatus = 'active' | 'inactive';
export interface Popup {
id: string;
target: PopupTarget;
targetId?: number | null; // 부서 ID (대상이 department인 경우)
targetName?: string; // 부서명 (대상이 department인 경우)
title: string;
content: string;

1
src/components/settings/PopupManagement/utils.ts
View File

@@ -48,6 +48,7 @@ export function transformApiToFrontend(apiData: PopupApiData): Popup {
return {
id: String(apiData.id),
target: apiData.target_type as PopupTarget,
targetId: apiData.target_id,
targetName: apiData.target_type === 'department'
? apiData.department?.name
: undefined,

7
src/layouts/AuthenticatedLayout.tsx
View File

@@ -43,6 +43,7 @@ import {
import Sidebar from '@/components/layout/Sidebar';
import HeaderFavoritesBar from '@/components/layout/HeaderFavoritesBar';
import CommandMenuSearch, { type CommandMenuSearchRef } from '@/components/layout/CommandMenuSearch';
import NoticePopupContainer from '@/components/common/NoticePopupModal/NoticePopupContainer';
import { useTheme, useSetTheme } from '@/stores/themeStore';
import { useAuthStore } from '@/stores/authStore';
import { deserializeMenuItems } from '@/lib/utils/menuTransform';
@@ -1010,6 +1011,9 @@ export default function AuthenticatedLayout({ children }: AuthenticatedLayoutPro
{/* 메뉴 검색 Command Palette (Ctrl+K / Cmd+K) */}
<CommandMenuSearch ref={commandMenuRef} />
{/* 공지 팝업 자동 표시 */}
<NoticePopupContainer />
</div>
);
}
@@ -1296,6 +1300,9 @@ export default function AuthenticatedLayout({ children }: AuthenticatedLayoutPro
{/* 메뉴 검색 Command Palette (Ctrl+K / Cmd+K) */}
<CommandMenuSearch ref={commandMenuRef} />
{/* 공지 팝업 자동 표시 */}
<NoticePopupContainer />
</div>
);
}

3
src/lib/api/dashboard/types.ts
View File

@@ -257,7 +257,8 @@ export interface TodayIssueApiResponse {
// ============================================
/** 캘린더 일정 타입 */
export type CalendarScheduleType = 'schedule' | 'order' | 'construction' | 'other';
export type CalendarScheduleType = 'schedule' | 'order' | 'construction' | 'other' | 'bill'
| 'expected_expense' | 'delivery' | 'shipment';
/** 캘린더 일정 아이템 */
export interface CalendarScheduleItemApiResponse {

3
src/lib/auth/logout.ts
View File

@@ -98,6 +98,9 @@ export function resetZustandStores(): void {
// itemMasterStore 초기화
const itemMasterStore = useItemMasterStore.getState();
itemMasterStore.reset();
// favoritesStore는 persist 연동이라 setFavorites([])하면 localStorage까지 비워짐
// 로그인 시 rehydrate로 새 유저 데이터 로드하므로 여기서는 건드리지 않음
} catch (error) {
console.error('[Logout] Failed to reset Zustand stores:', error);
}

7
src/stores/utils/userStorage.ts
View File

@@ -14,13 +14,10 @@ export function getStorageKey(baseKey: string): string {
export function createUserStorage(baseKey: string) {
return {
getItem: (name: string) => {
getItem: (_name: string) => {
const key = getStorageKey(baseKey);
const str = localStorage.getItem(key);
if (!str) {
const fallback = localStorage.getItem(name);
return fallback ? JSON.parse(fallback) : null;
}
if (!str) return null;
return JSON.parse(str);
},
setItem: (name: string, value: unknown) => {