` - 품목관리 패턴
+3. **PageLayout**: `p-3 md:p-6 pb-0` - 내부 패딩
+
+### 문제점
+| 구분 | 품목관리 (기준) | 다른 페이지들 |
+|------|-----------------|--------------|
+| page.tsx | `
` | `
` |
+| 결과 | 헤더/레프트와 적절한 간격 | 헤더/레프트에 붙어있음 |
+
+## ✅ 수정 대상 페이지 체크리스트
+
+### 1️⃣ 리스트 페이지 (IntegratedListTemplateV2 사용)
+- [ ] `/board/page.tsx` - 게시판 목록
+- [ ] `/hr/employee-management/page.tsx` - 사원관리 목록
+- [ ] `/hr/attendance-management/page.tsx` - 근태관리 목록
+- [ ] `/hr/vacation-management/page.tsx` - 휴가관리 목록
+- [ ] `/accounting/purchase/page.tsx` - 매입관리 목록
+- [ ] `/accounting/sales/page.tsx` - 매출관리 목록
+- [ ] `/accounting/vendors/page.tsx` - 거래처관리 목록
+- [ ] `/accounting/deposits/page.tsx` - 입금관리 목록
+- [ ] `/accounting/withdrawals/page.tsx` - 출금관리 목록
+- [ ] `/accounting/bills/page.tsx` - 어음관리 목록
+- [ ] `/accounting/bank-transactions/page.tsx` - 통장거래내역
+- [ ] `/accounting/vendor-ledger/page.tsx` - 거래처원장
+- [ ] `/accounting/daily-report/page.tsx` - 일일마감
+- [ ] `/accounting/expected-expenses/page.tsx` - 예상지출
+- [ ] `/accounting/bad-debt-collection/page.tsx` - 악성채권추심
+- [ ] `/accounting/receivables-status/page.tsx` - 매출채권현황
+- [ ] `/approval/draft/page.tsx` - 기안함
+- [ ] `/approval/inbox/page.tsx` - 결재함
+- [ ] `/approval/reference/page.tsx` - 참조함
+
+### 2️⃣ 상세/수정/등록 페이지 (PageLayout 직접 사용)
+- [ ] `/board/create/page.tsx` - 게시글 등록
+- [ ] `/board/[id]/page.tsx` - 게시글 상세
+- [ ] `/board/[id]/edit/page.tsx` - 게시글 수정
+- [ ] `/hr/employee-management/new/page.tsx` - 사원 등록
+- [ ] `/hr/employee-management/[id]/page.tsx` - 사원 상세
+- [ ] `/hr/employee-management/[id]/edit/page.tsx` - 사원 수정
+- [ ] `/accounting/sales/new/page.tsx` - 매출 등록
+- [ ] `/accounting/sales/[id]/page.tsx` - 매출 상세
+- [ ] `/accounting/vendors/new/page.tsx` - 거래처 등록
+- [ ] `/accounting/vendors/[id]/page.tsx` - 거래처 상세
+- [ ] `/accounting/purchase/[id]/page.tsx` - 매입 상세
+- [ ] `/accounting/deposits/[id]/page.tsx` - 입금 상세
+- [ ] `/accounting/withdrawals/[id]/page.tsx` - 출금 상세
+- [ ] `/accounting/bills/[id]/page.tsx` - 어음 상세
+- [ ] `/accounting/bills/new/page.tsx` - 어음 등록
+- [ ] `/accounting/vendor-ledger/[id]/page.tsx` - 거래처원장 상세
+- [ ] `/accounting/bad-debt-collection/new/page.tsx` - 악성채권 등록
+- [ ] `/accounting/bad-debt-collection/[id]/page.tsx` - 악성채권 상세
+- [ ] `/accounting/bad-debt-collection/[id]/edit/page.tsx` - 악성채권 수정
+- [ ] `/approval/draft/new/page.tsx` - 기안 작성
+
+### 3️⃣ 기타 페이지
+- [ ] `/hr/attendance/page.tsx` - 모바일 근태
+- [ ] `/hr/salary-management/page.tsx` - 급여관리
+- [ ] `/settings/ranks/page.tsx` - 직급관리
+- [ ] `/settings/titles/page.tsx` - 직책관리
+- [ ] `/settings/permissions/page.tsx` - 권한관리
+- [ ] `/settings/work-schedule/page.tsx` - 근무일정
+- [ ] `/settings/leave-policy/page.tsx` - 휴가정책
+- [ ] `/dashboard/page.tsx` - 대시보드
+
+## 🔧 수정 방법
+
+### 표준 패턴 (품목관리 기준)
+
+**page.tsx에서 wrapper 추가:**
+```tsx
+// Before
+export default function SomePage() {
+ return
+
+ );
+}
+```
+
+## 📌 공통 레이아웃 래퍼 제안
+
+향후 관리 편의를 위해 공통 래퍼 컴포넌트 생성:
+
+```tsx
+// src/components/organisms/ContentWrapper.tsx
+export function ContentWrapper({ children }: { children: React.ReactNode }) {
+ return {children}
;
+}
+```
+
+## 🎯 실행 계획
+
+### Phase 1: 게시판 페이지 (대표 수정)
+1. `/board/page.tsx` 수정
+2. 브라우저에서 확인
+3. 품목관리와 비교 검증
+
+### Phase 2: 나머지 페이지 일괄 수정
+- 체크리스트 기반으로 순차 수정
+- 각 수정 후 체크 표시
+
+### Phase 3: RULES.md 업데이트
+- 페이지 레이아웃 표준 규칙 추가
+
+## 📝 RULES.md 추가 내용 (예정)
+
+```markdown
+## Page Layout Standards
+**Priority**: 🟡 **Triggers**: 새 페이지 생성, 기존 페이지 레이아웃 수정
+
+### 표준 패턴
+- **page.tsx wrapper**: 모든 페이지는 `` wrapper 필수
+- **기준**: 품목관리(`/items/page.tsx`) 페이지
+
+### 예시
+\`\`\`tsx
+// ✅ 올바른 패턴
+export default function SomePage() {
+ return (
+ (null);
+
+ useEffect(() => {
+ // TODO: API 연동
+ // const id = params.id;
+ setBoard(mockBoard);
+ }, [params.id]);
+
+ const handleSubmit = (data: BoardFormData) => {
+ // TODO: API 연동
+ console.log('Update board:', params.id, data);
+ router.push(`/ko/board/board-management/${params.id}`);
+ };
+
+ if (!board) {
+ return (
+ (null);
+ const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+
+ useEffect(() => {
+ // TODO: API 연동
+ // const id = params.id;
+ setBoard(mockBoard);
+ }, [params.id]);
+
+ const handleEdit = () => {
+ router.push(`/ko/board/board-management/${params.id}/edit`);
+ };
+
+ const handleDelete = () => {
+ setDeleteDialogOpen(true);
+ };
+
+ const confirmDelete = () => {
+ // TODO: API 연동
+ console.log('Delete board:', params.id);
+ router.push('/ko/board/board-management');
+ };
+
+ if (!board) {
+ return (
+
+
+
+ 게시판 삭제
+
+ "{board.boardName}" 게시판을 삭제하시겠습니까?
+
+ + 삭제된 게시판 정보는 복구할 수 없습니다. + +
+
+
+ 취소
+
+ 삭제
+
+
+
+
+
+ );
+}
diff --git a/src/app/[locale]/(protected)/board/board-management/new/page.tsx b/src/app/[locale]/(protected)/board/board-management/new/page.tsx
new file mode 100644
index 00000000..a6f40c20
--- /dev/null
+++ b/src/app/[locale]/(protected)/board/board-management/new/page.tsx
@@ -0,0 +1,22 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import { BoardForm } from '@/components/board/BoardManagement/BoardForm';
+import type { BoardFormData } from '@/components/board/BoardManagement/types';
+
+export default function BoardNewPage() {
+ const router = useRouter();
+
+ const handleSubmit = (data: BoardFormData) => {
+ // TODO: API 연동
+ console.log('Create board:', data);
+ router.push('/ko/board/board-management');
+ };
+
+ return (
+ >({});
+
+ const toggleSub = (title: string) => {
+ setSubExpanded((prev) => ({ ...prev, [title]: !prev[title] }));
+ };
+
+ const totalItems = category.items.length +
+ (category.subCategories?.reduce((acc, sub) => acc + sub.items.length, 0) || 0);
+
+ if (totalItems === 0) return null;
+
+ return (
+ = {
+ '기본': '🏠',
+ '인사관리': '👥',
+ 'HR': '👥',
+ '판매관리': '💰',
+ 'Sales': '💰',
+ '기준정보관리': '📦',
+ 'Master Data': '📦',
+ '생산관리': '🏭',
+ 'Production': '🏭',
+ '설정': '⚙️',
+ 'Settings': '⚙️',
+ '전자결재': '📝',
+ 'Approval': '📝',
+ '회계관리': '💵',
+ 'Accounting': '💵',
+ '게시판': '📋',
+ 'Board': '📋',
+ '보고서': '📊',
+ 'Reports': '📊',
+};
+
+function getIcon(title: string): string {
+ for (const [key, icon] of Object.entries(iconMap)) {
+ if (title.includes(key)) return icon;
+ }
+ return '📄';
+}
+
+function parseTableRow(line: string): UrlItem | null {
+ // | 페이지 | URL | 상태 | 형식 파싱
+ const parts = line.split('|').map(p => p.trim()).filter(p => p);
+
+ if (parts.length < 2) return null;
+ if (parts[0] === '페이지' || parts[0].startsWith('---')) return null;
+
+ const name = parts[0].replace(/\*\*/g, ''); // **bold** 제거
+ const url = parts[1].replace(/`/g, ''); // backtick 제거
+ const status = parts[2] || undefined;
+
+ // URL이 /ko로 시작하는지 확인
+ if (!url.startsWith('/ko')) return null;
+
+ return { name, url, status };
+}
+
+function parseMdFile(content: string): { categories: UrlCategory[]; lastUpdated: string } {
+ const lines = content.split('\n');
+ const categories: UrlCategory[] = [];
+ let currentCategory: UrlCategory | null = null;
+ let currentSubCategory: { title: string; items: UrlItem[] } | null = null;
+ let lastUpdated = 'N/A';
+
+ // Last Updated 추출
+ const updateMatch = content.match(/Last Updated:\s*(\d{4}-\d{2}-\d{2})/);
+ if (updateMatch) {
+ lastUpdated = updateMatch[1];
+ }
+
+ for (let i = 0; i < lines.length; i++) {
+ const line = lines[i].trim();
+
+ // ## 카테고리 (메인 섹션)
+ if (line.startsWith('## ') && !line.includes('클릭 가능한') && !line.includes('전체 URL') && !line.includes('백엔드 메뉴')) {
+ // 이전 카테고리 저장
+ if (currentCategory) {
+ if (currentSubCategory) {
+ currentCategory.subCategories = currentCategory.subCategories || [];
+ currentCategory.subCategories.push(currentSubCategory);
+ currentSubCategory = null;
+ }
+ categories.push(currentCategory);
+ }
+
+ const title = line.replace('## ', '').replace(/[🏠👥💰📦🏭⚙️📝📋💵]/g, '').trim();
+ currentCategory = {
+ title,
+ icon: getIcon(title),
+ items: [],
+ subCategories: [],
+ };
+ currentSubCategory = null;
+ }
+
+ // ### 서브 카테고리
+ else if (line.startsWith('### ') && currentCategory) {
+ // 이전 서브카테고리 저장
+ if (currentSubCategory) {
+ currentCategory.subCategories = currentCategory.subCategories || [];
+ currentCategory.subCategories.push(currentSubCategory);
+ }
+
+ const subTitle = line.replace('### ', '').trim();
+ // "메인 페이지"는 서브카테고리가 아니라 메인 아이템으로
+ if (subTitle === '메인 페이지') {
+ currentSubCategory = null;
+ } else {
+ currentSubCategory = {
+ title: subTitle,
+ items: [],
+ };
+ }
+ }
+
+ // 테이블 행 파싱
+ else if (line.startsWith('|') && currentCategory) {
+ const item = parseTableRow(line);
+ if (item) {
+ if (currentSubCategory) {
+ currentSubCategory.items.push(item);
+ } else {
+ currentCategory.items.push(item);
+ }
+ }
+ }
+ }
+
+ // 마지막 카테고리 저장
+ if (currentCategory) {
+ if (currentSubCategory) {
+ currentCategory.subCategories = currentCategory.subCategories || [];
+ currentCategory.subCategories.push(currentSubCategory);
+ }
+ categories.push(currentCategory);
+ }
+
+ // 빈 서브카테고리 제거
+ categories.forEach(cat => {
+ cat.subCategories = cat.subCategories?.filter(sub => sub.items.length > 0);
+ });
+
+ return { categories, lastUpdated };
+}
+
+export default async function TestUrlsPage() {
+ // md 파일 경로
+ const mdFilePath = path.join(
+ process.cwd(),
+ 'claudedocs',
+ '[REF] all-pages-test-urls.md'
+ );
+
+ let urlData: UrlCategory[] = [];
+ let lastUpdated = 'N/A';
+
+ try {
+ const fileContent = await fs.readFile(mdFilePath, 'utf-8');
+ const parsed = parseMdFile(fileContent);
+ urlData = parsed.categories;
+ lastUpdated = parsed.lastUpdated;
+ } catch (error) {
+ console.error('Failed to read md file:', error);
+ // 파일 읽기 실패 시 빈 데이터
+ urlData = [];
+ }
+
+ return ('--:--:--');
+ const [currentDate, setCurrentDate] = useState('');
+ const [distance, setDistance] = useState(null);
+ const [isInRange, setIsInRange] = useState(false);
+ const [attendanceStatus, setAttendanceStatus] = useState('not-checked-in');
+ const [viewMode, setViewMode] = useState('main');
+ const [checkInTime, setCheckInTime] = useState('');
+ const [checkOutTime, setCheckOutTime] = useState('');
+ const [userName, setUserName] = useState(TEST_USER.name);
+ const [userDepartment, setUserDepartment] = useState(TEST_USER.department);
+ const [userPosition, setUserPosition] = useState(TEST_USER.position);
+
+ // 클라이언트 마운트 확인
+ useEffect(() => {
+ setMounted(true);
+ }, []);
+
+ // 현재 시간 업데이트 (마운트 후에만 실행)
+ useEffect(() => {
+ if (!mounted) return;
+
+ const updateTime = () => {
+ const now = new Date();
+ const hours = String(now.getHours()).padStart(2, '0');
+ const minutes = String(now.getMinutes()).padStart(2, '0');
+ const seconds = String(now.getSeconds()).padStart(2, '0');
+ setCurrentTime(`${hours}:${minutes}:${seconds}`);
+
+ // 날짜 포맷
+ const year = now.getFullYear();
+ const month = now.getMonth() + 1;
+ const date = now.getDate();
+ const dayNames = ['일', '월', '화', '수', '목', '금', '토'];
+ const day = dayNames[now.getDay()];
+ setCurrentDate(`${year}년 ${month}월 ${date}일 (${day})`);
+ };
+
+ updateTime();
+ const interval = setInterval(updateTime, 1000);
+ return () => clearInterval(interval);
+ }, [mounted]);
+
+ // localStorage에서 사용자 정보 가져오기 (마운트 후에만 실행)
+ useEffect(() => {
+ if (!mounted) return;
+
+ const userDataStr = localStorage.getItem('user');
+ if (userDataStr) {
+ try {
+ const userData = JSON.parse(userDataStr);
+ if (userData.name) setUserName(userData.name);
+ if (userData.department) setUserDepartment(userData.department);
+ if (userData.position) setUserPosition(userData.position);
+ } catch (e) {
+ console.error('사용자 정보 파싱 실패:', e);
+ }
+ }
+ }, [mounted]);
+
+ // 거리 변경 콜백
+ const handleDistanceChange = useCallback((dist: number, inRange: boolean) => {
+ setDistance(dist);
+ setIsInRange(inRange);
+ }, []);
+
+ // 출근하기
+ const handleCheckIn = () => {
+ if (!isInRange) return;
+
+ const now = new Date();
+ const hours = String(now.getHours()).padStart(2, '0');
+ const minutes = String(now.getMinutes()).padStart(2, '0');
+ const seconds = String(now.getSeconds()).padStart(2, '0');
+ const timeStr = `${hours}:${minutes}:${seconds}`;
+
+ setCheckInTime(timeStr);
+ setAttendanceStatus('checked-in');
+ setViewMode('check-in-complete');
+
+ // TODO: API 호출로 출근 기록 저장
+ console.log('[출근 기록]', {
+ time: timeStr,
+ location: SITE_LOCATION.name,
+ coordinates: { lat: SITE_LOCATION.lat, lng: SITE_LOCATION.lng },
+ });
+ };
+
+ // 퇴근하기
+ const handleCheckOut = () => {
+ if (!isInRange) return;
+
+ const now = new Date();
+ const hours = String(now.getHours()).padStart(2, '0');
+ const minutes = String(now.getMinutes()).padStart(2, '0');
+ const seconds = String(now.getSeconds()).padStart(2, '0');
+ const timeStr = `${hours}:${minutes}:${seconds}`;
+
+ setCheckOutTime(timeStr);
+ setAttendanceStatus('checked-out');
+ setViewMode('check-out-complete');
+
+ // TODO: API 호출로 퇴근 기록 저장
+ console.log('[퇴근 기록]', {
+ time: timeStr,
+ location: SITE_LOCATION.name,
+ coordinates: { lat: SITE_LOCATION.lat, lng: SITE_LOCATION.lng },
+ });
+ };
+
+ // 완료 화면에서 확인 클릭
+ const handleConfirm = () => {
+ setViewMode('main');
+ };
+
+ // 마운트 전 로딩 UI (Hydration 에러 방지)
+ if (!mounted) {
+ return (
+ (null);
+
+ useEffect(() => {
+ // TODO: API 연동
+ // const id = params.id;
+ setCard(mockCard);
+ }, [params.id]);
+
+ const handleSubmit = (data: CardFormData) => {
+ // TODO: API 연동
+ console.log('Update card:', params.id, data);
+ router.push(`/ko/hr/card-management/${params.id}`);
+ };
+
+ if (!card) {
+ return (
+ (null);
+ const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+
+ useEffect(() => {
+ // TODO: API 연동
+ // const id = params.id;
+ setCard(mockCard);
+ }, [params.id]);
+
+ const handleEdit = () => {
+ router.push(`/ko/hr/card-management/${params.id}/edit`);
+ };
+
+ const handleDelete = () => {
+ setDeleteDialogOpen(true);
+ };
+
+ const confirmDelete = () => {
+ // TODO: API 연동
+ console.log('Delete card:', params.id);
+ router.push('/ko/hr/card-management');
+ };
+
+ if (!card) {
+ return (
+
+
+
+ 카드 삭제
+
+ "{card.cardName}" 카드를 삭제하시겠습니까?
+
+ + 삭제된 카드 정보는 복구할 수 없습니다. + +
+
+
+ 취소
+
+ 삭제
+
+
+
+
+
+ );
+}
diff --git a/src/app/[locale]/(protected)/hr/card-management/new/page.tsx b/src/app/[locale]/(protected)/hr/card-management/new/page.tsx
new file mode 100644
index 00000000..b4a034e6
--- /dev/null
+++ b/src/app/[locale]/(protected)/hr/card-management/new/page.tsx
@@ -0,0 +1,22 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import { CardForm } from '@/components/hr/CardManagement/CardForm';
+import type { CardFormData } from '@/components/hr/CardManagement/types';
+
+export default function CardNewPage() {
+ const router = useRouter();
+
+ const handleSubmit = (data: CardFormData) => {
+ // TODO: API 연동
+ console.log('Create card:', data);
+ router.push('/ko/hr/card-management');
+ };
+
+ return (
+
+
+ );
+}
+
+// ❌ 잘못된 패턴
+export default function SomePage() {
+ return 게시글 내용입니다.
+이것은 테스트용 콘텐츠입니다.
+ `, + authorId: 'user1', + authorName: '홍길동', + authorDepartment: '개발팀', + authorPosition: '과장', + isPinned: false, + allowComments: true, + viewCount: 123, + attachments: [ + { + id: 'file-1', + fileName: 'abc.pdf', + fileSize: 1024000, + fileUrl: '/files/abc.pdf', + mimeType: 'application/pdf', + }, + ], + createdAt: format(new Date(2025, 8, 9, 12, 20), "yyyy-MM-dd'T'HH:mm:ss"), + updatedAt: format(new Date(2025, 8, 9, 12, 20), "yyyy-MM-dd'T'HH:mm:ss"), + }; +}; + +export default function BoardEditPage() { + const params = useParams(); + const postId = params.id as string; + + // Mock 데이터 (실제로는 API에서 가져옴) + const post = useMemo(() => generateMockPost(postId), [postId]); + + return게시글 내용입니다.
+이것은 테스트용 콘텐츠입니다.
+내용
+ `, + authorId: 'user1', + authorName: '홍길동', + authorDepartment: '개발팀', + authorPosition: '과장', + isPinned: false, + allowComments: true, + viewCount: 123, + attachments: [ + { + id: 'file-1', + fileName: 'abc.pdf', + fileSize: 1024000, + fileUrl: '/files/abc.pdf', + mimeType: 'application/pdf', + }, + ], + createdAt: format(new Date(2025, 8, 3, 12, 23), "yyyy-MM-dd'T'HH:mm:ss"), + updatedAt: format(new Date(2025, 8, 3, 12, 23), "yyyy-MM-dd'T'HH:mm:ss"), + }; +}; + +const generateMockComments = (postId: string): Comment[] => [ + { + id: 'comment-1', + postId, + authorId: 'user2', + authorName: '이름 직책', + authorDepartment: '부서명', + authorPosition: '', + content: '댓글 내용', + createdAt: format(new Date(2025, 8, 3, 15, 33), "yyyy-MM-dd'T'HH:mm:ss"), + updatedAt: format(new Date(2025, 8, 3, 15, 33), "yyyy-MM-dd'T'HH:mm:ss"), + }, + { + id: 'comment-2', + postId, + authorId: 'user1', // 본인 댓글 + authorName: '이름 직책', + authorDepartment: '부서명', + authorPosition: '', + content: '댓글 내용', + createdAt: format(new Date(2025, 8, 3, 15, 33), "yyyy-MM-dd'T'HH:mm:ss"), + updatedAt: format(new Date(2025, 8, 3, 15, 33), "yyyy-MM-dd'T'HH:mm:ss"), + }, +]; + +export default function BoardDetailPage() { + const params = useParams(); + const postId = params.id as string; + + // Mock 데이터 (실제로는 API에서 가져옴) + const post = useMemo(() => generateMockPost(postId), [postId]); + const comments = useMemo(() => generateMockComments(postId), [postId]); + + return ( +
+
+ );
+ }
+
+ return (
+
+
+
+ 로딩 중...
+
+
+ );
+ }
+
+ return (
+ <>
+
+
+
+ 로딩 중...
++ + 삭제된 게시판 정보는 복구할 수 없습니다. + +
+
+ );
+ }
+
+ return 이벤트를 찾을 수 없습니다.
+
+
+ );
+ }
+
+ return 문의를 찾을 수 없습니다.
+
+
+ );
+ }
+
+ // Mock: 답변 데이터 (답변완료 상태일 때만)
+ const reply = inquiry.status === 'completed' ? MOCK_REPLY : undefined;
+
+ // Mock: 댓글 데이터
+ const comments = MOCK_COMMENTS.filter((c) => c.inquiryId === inquiryId);
+
+ // Mock: 현재 사용자 ID
+ const currentUserId = 'user1';
+
+ return (
+ 문의를 찾을 수 없습니다.
+
+
+ );
+ }
+
+ return 공지사항을 찾을 수 없습니다.
+
+
+ );
+}
+
+function CategorySection({ category, baseUrl }: { category: UrlCategory; baseUrl: string }) {
+ const [expanded, setExpanded] = useState(true);
+ const [subExpanded, setSubExpanded] = useState
+
+
+
+ {item.name}
+
+ {item.status && (
+
+ {item.status}
+
+ )}
+
+ + {item.url} +
+
+
+
+
+
+
+ {expanded && (
+
+ );
+}
+
+export default function TestUrlsClient({ initialData, lastUpdated }: TestUrlsClientProps) {
+ const [baseUrl, setBaseUrl] = useState('http://localhost:3000');
+ const [searchTerm, setSearchTerm] = useState('');
+
+ useEffect(() => {
+ if (typeof window !== 'undefined') {
+ setBaseUrl(window.location.origin);
+ }
+ }, []);
+
+ // 검색 필터링
+ const filteredData = initialData
+ .map((category) => ({
+ ...category,
+ items: category.items.filter(
+ (item) =>
+ item.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+ item.url.toLowerCase().includes(searchTerm.toLowerCase())
+ ),
+ subCategories: category.subCategories?.map((sub) => ({
+ ...sub,
+ items: sub.items.filter(
+ (item) =>
+ item.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+ item.url.toLowerCase().includes(searchTerm.toLowerCase())
+ ),
+ })).filter((sub) => sub.items.length > 0),
+ }))
+ .filter(
+ (category) =>
+ category.items.length > 0 || (category.subCategories && category.subCategories.length > 0)
+ );
+
+ const totalLinks = initialData.reduce(
+ (acc, cat) =>
+ acc +
+ cat.items.length +
+ (cat.subCategories?.reduce((subAcc, sub) => subAcc + sub.items.length, 0) || 0),
+ 0
+ );
+
+ const handleRefresh = () => {
+ window.location.reload();
+ };
+
+ return (
+
+ {category.items.length > 0 && (
+
+ )}
+
+ {category.items.map((item) => (
+
+ )}
+
+ {category.subCategories?.map((sub) => (
+
+
+ {subExpanded[sub.title] !== false && (
+
+ ))}
+
+ {sub.items.map((item) => (
+
+ )}
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/app/[locale]/(protected)/dev/test-urls/page.tsx b/src/app/[locale]/(protected)/dev/test-urls/page.tsx
new file mode 100644
index 00000000..fbfcc7f8
--- /dev/null
+++ b/src/app/[locale]/(protected)/dev/test-urls/page.tsx
@@ -0,0 +1,167 @@
+import { promises as fs } from 'fs';
+import path from 'path';
+import TestUrlsClient, { UrlCategory, UrlItem } from './TestUrlsClient';
+
+// 아이콘 매핑
+const iconMap: Record
+ {/* Header */}
+
+
+
+
+ {/* Search & Base URL */}
+
+
+ + 🔗 테스트 URL 목록 +
+ ++ 백엔드 메뉴 연동 전 테스트용 직접 접근 URL ({totalLinks}개) +
++ 클릭하면 새 탭에서 열립니다 • 최종 업데이트: {lastUpdated} +
++ ✨ md 파일 수정 시 자동 반영됩니다 +
+
+ setSearchTerm(e.target.value)}
+ className="flex-1 px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+ />
+
+
+ {/* Categories */}
+
+ Base:
+ setBaseUrl(e.target.value)}
+ className="w-48 text-sm bg-transparent text-gray-900 dark:text-white focus:outline-none"
+ />
+
+
+ {filteredData.map((category) => (
+
+
+ {filteredData.length === 0 && (
+
+ 검색 결과가 없습니다.
+
+ )}
+
+ {/* Footer */}
+
+
+
+ 📁 데이터 소스: claudedocs/[REF] all-pages-test-urls.md
+
+ md 파일 수정 후 새로고침하면 자동 반영! +
+
+
+ );
+ }
+
+ // 완료 화면 렌더링
+ if (viewMode === 'check-in-complete') {
+ return (
+
+
+ 출퇴근하기
+
+
+
+
+
+ 로딩 중...
+
+
+ );
+ }
+
+ if (viewMode === 'check-out-complete') {
+ return (
+
+
+ );
+ }
+
+ // 버튼 활성화 상태
+ const canCheckIn = isInRange && attendanceStatus === 'not-checked-in';
+ const canCheckOut = isInRange && attendanceStatus === 'checked-in';
+
+ return (
+
+ {/* 타이틀 */}
+
+ );
+}
diff --git a/src/app/[locale]/(protected)/hr/card-management/[id]/edit/page.tsx b/src/app/[locale]/(protected)/hr/card-management/[id]/edit/page.tsx
new file mode 100644
index 00000000..a3e871c1
--- /dev/null
+++ b/src/app/[locale]/(protected)/hr/card-management/[id]/edit/page.tsx
@@ -0,0 +1,65 @@
+'use client';
+
+import { useRouter, useParams } from 'next/navigation';
+import { useState, useEffect } from 'react';
+import { CardForm } from '@/components/hr/CardManagement/CardForm';
+import type { Card, CardFormData } from '@/components/hr/CardManagement/types';
+
+// TODO: 실제 API에서 데이터 가져오기
+const mockCard: Card = {
+ id: '1',
+ cardCompany: 'shinhan',
+ cardNumber: '1234-1234-1234-1234',
+ cardName: '법인카드1',
+ expiryDate: '0327',
+ pinPrefix: '12',
+ status: 'active',
+ user: {
+ id: 'u1',
+ departmentId: 'd1',
+ departmentName: '부서명',
+ employeeId: 'e1',
+ employeeName: '홍길동',
+ positionId: 'p1',
+ positionName: '팀장',
+ },
+ createdAt: '2024-01-01T00:00:00Z',
+ updatedAt: '2024-01-01T00:00:00Z',
+};
+
+export default function CardEditPage() {
+ const router = useRouter();
+ const params = useParams();
+ const [card, setCard] = useState
+
+
+ {/* 지도 영역 */}
+ 출퇴근하기
+
+
+
+ {/* 사용자 정보 + 시간 + 버튼 */}
+
+
+ )}
+
+
+
+ {/* 사용자 정보 */}
+
+
+
+
+ {/* 현재 시간 */}
+
+ {userName.charAt(0)}
+
+
+
+ {userName}
++ {userDepartment} {userPosition} +
+
+
+
+ {/* 출근/퇴근 버튼 */}
+ {currentTime}
+{currentDate}
+ {attendanceStatus === 'checked-in' && ( +출근중
+ )} +
+
+
+
+
+ {/* 범위 밖 경고 */}
+ {!isInRange && distance !== null && (
+ + 출퇴근 가능 범위({SITE_LOCATION.radius}m) 밖에 있습니다. +
+ )} +
+
+ );
+ }
+
+ return (
+
+
+
+ 로딩 중...
+
+
+ );
+ }
+
+ return (
+ <>
+
+
+
+ 로딩 중...
++ + 삭제된 카드 정보는 복구할 수 없습니다. + +
+
+
+
{submitError && (
⚠️ {submitError}
diff --git a/src/app/[locale]/(protected)/items/page.tsx b/src/app/[locale]/(protected)/items/page.tsx
index 6cc29fe5..d0ffef41 100644
--- a/src/app/[locale]/(protected)/items/page.tsx
+++ b/src/app/[locale]/(protected)/items/page.tsx
@@ -12,11 +12,7 @@ import ItemListClient from '@/components/items/ItemListClient';
* 품목 목록 페이지
*/
export default function ItemsPage() {
- return (
-
-
- );
+ return
+
);
@@ -201,7 +201,7 @@ export default function EditItemPage() {
}
return (
-
로딩 중...
+
(null);
+ const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+
+ useEffect(() => {
+ // TODO: API 연동
+ const id = params.id as string;
+ const found = MOCK_POPUPS.find((p) => p.id === id);
+ setPopup(found || null);
+ }, [params.id]);
+
+ const handleEdit = () => {
+ router.push(`/ko/settings/popup-management/${params.id}/edit`);
+ };
+
+ const handleDelete = () => {
+ setDeleteDialogOpen(true);
+ };
+
+ const confirmDelete = () => {
+ // TODO: API 연동
+ console.log('Delete popup:', params.id);
+ router.push('/ko/settings/popup-management');
+ };
+
+ if (!popup) {
+ return (
+
+
+
+ 팝업 삭제
+
+ "{popup.title}" 팝업을 삭제하시겠습니까?
+
+ + 삭제된 팝업 정보는 복구할 수 없습니다. + +
+
+
+ 취소
+
+ 삭제
+
+
+
+
+
+ );
+}
diff --git a/src/app/[locale]/(protected)/settings/popup-management/new/page.tsx b/src/app/[locale]/(protected)/settings/popup-management/new/page.tsx
new file mode 100644
index 00000000..ab40d806
--- /dev/null
+++ b/src/app/[locale]/(protected)/settings/popup-management/new/page.tsx
@@ -0,0 +1,5 @@
+import { PopupForm } from '@/components/settings/PopupManagement';
+
+export default function PopupCreatePage() {
+ return => ({
+ vendorId: '',
+ vendorCode: '',
+ vendorName: '',
+ businessNumber: '',
+ representativeName: '',
+ vendorType: 'both',
+ businessType: '',
+ businessCategory: '',
+ zipCode: '',
+ address1: '',
+ address2: '',
+ phone: '',
+ mobile: '',
+ fax: '',
+ email: '',
+ contactName: '',
+ contactPhone: '',
+ systemManager: '',
+ debtAmount: 0,
+ status: 'collecting',
+ overdueDays: 0,
+ overdueToggle: false,
+ occurrenceDate: format(new Date(), 'yyyy-MM-dd'),
+ endDate: null,
+ assignedManagerId: null,
+ assignedManager: null,
+ settingToggle: true,
+ files: [],
+ memos: [],
+});
+
+export function BadDebtDetail({ mode, recordId }: BadDebtDetailProps) {
+ const router = useRouter();
+ const isViewMode = mode === 'view';
+ const isNewMode = mode === 'new';
+
+ // 폼 데이터
+ const initialData = recordId ? getMockRecord(recordId) : getEmptyRecord();
+ const [formData, setFormData] = useState(initialData);
+
+ // 다이얼로그 상태
+ const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+ const [showSaveDialog, setShowSaveDialog] = useState(false);
+
+ // 새 메모 입력
+ const [newMemo, setNewMemo] = useState('');
+
+ // 파일 업로드 상태
+ const [newBusinessRegistrationFile, setNewBusinessRegistrationFile] = useState(null);
+ const [newTaxInvoiceFile, setNewTaxInvoiceFile] = useState(null);
+ const [newAdditionalFiles, setNewAdditionalFiles] = useState([]);
+
+ // 필드 변경 핸들러
+ const handleChange = useCallback((field: string, value: string | number | boolean | null) => {
+ setFormData(prev => ({ ...prev, [field]: value }));
+ }, []);
+
+ // 네비게이션 핸들러
+ const handleBack = useCallback(() => {
+ router.push('/ko/accounting/bad-debt-collection');
+ }, [router]);
+
+ const handleEdit = useCallback(() => {
+ router.push(`/ko/accounting/bad-debt-collection/${recordId}/edit`);
+ }, [router, recordId]);
+
+ const handleCancel = useCallback(() => {
+ if (isNewMode) {
+ router.push('/ko/accounting/bad-debt-collection');
+ } else {
+ router.push(`/ko/accounting/bad-debt-collection/${recordId}`);
+ }
+ }, [router, recordId, isNewMode]);
+
+ // 저장 핸들러
+ const handleSave = useCallback(() => {
+ setShowSaveDialog(true);
+ }, []);
+
+ const handleConfirmSave = useCallback(() => {
+ console.log('저장:', formData);
+ setShowSaveDialog(false);
+ if (isNewMode) {
+ router.push('/ko/accounting/bad-debt-collection');
+ } else {
+ router.push(`/ko/accounting/bad-debt-collection/${recordId}`);
+ }
+ }, [formData, router, recordId, isNewMode]);
+
+ // 삭제 핸들러
+ const handleDelete = useCallback(() => {
+ setShowDeleteDialog(true);
+ }, []);
+
+ const handleConfirmDelete = useCallback(() => {
+ console.log('삭제:', recordId);
+ setShowDeleteDialog(false);
+ router.push('/ko/accounting/bad-debt-collection');
+ }, [router, recordId]);
+
+ // 메모 추가 핸들러
+ const handleAddMemo = useCallback(() => {
+ if (!newMemo.trim()) return;
+ const now = new Date();
+ const dateStr = format(now, 'yyyy-MM-dd');
+ const timeStr = format(now, 'HH:mm');
+ const memo: BadDebtMemo = {
+ id: String(Date.now()),
+ content: `${dateStr} ${timeStr} [사용자] ${newMemo}`,
+ createdAt: now.toISOString(),
+ createdBy: '사용자',
+ };
+ setFormData(prev => ({
+ ...prev,
+ memos: [...prev.memos, memo],
+ }));
+ setNewMemo('');
+ }, [newMemo]);
+
+ // 메모 삭제 핸들러
+ const handleDeleteMemo = useCallback((memoId: string) => {
+ setFormData(prev => ({
+ ...prev,
+ memos: prev.memos.filter(m => m.id !== memoId),
+ }));
+ }, []);
+
+ // 담당자 변경 핸들러
+ const handleManagerChange = useCallback((managerId: string) => {
+ const manager = MANAGER_OPTIONS.find(m => m.id === managerId) || null;
+ setFormData(prev => ({
+ ...prev,
+ assignedManagerId: managerId,
+ assignedManager: manager,
+ }));
+ }, []);
+
+ // 수취 어음 현황 버튼
+ const handleBillStatus = useCallback(() => {
+ router.push(`/ko/accounting/bills?vendorId=${formData.vendorId}&type=received`);
+ }, [router, formData.vendorId]);
+
+ // 거래처 미수금 현황 버튼
+ const handleReceivablesStatus = useCallback(() => {
+ router.push(`/ko/accounting/receivables-status?highlight=${formData.vendorId}`);
+ }, [router, formData.vendorId]);
+
+ // 파일 다운로드 핸들러
+ const handleFileDownload = useCallback((fileName: string) => {
+ console.log('파일 다운로드:', fileName);
+ // TODO: 실제 다운로드 로직
+ }, []);
+
+ // 기존 파일 삭제 핸들러
+ const handleDeleteExistingFile = useCallback((fileId: string) => {
+ setFormData(prev => ({
+ ...prev,
+ files: prev.files.filter(f => f.id !== fileId),
+ }));
+ }, []);
+
+ // 추가 서류 추가 핸들러
+ const handleAddAdditionalFile = useCallback((file: File) => {
+ setNewAdditionalFiles(prev => [...prev, file]);
+ }, []);
+
+ // 추가 서류 (새 파일) 삭제 핸들러
+ const handleRemoveNewAdditionalFile = useCallback((index: number) => {
+ setNewAdditionalFiles(prev => prev.filter((_, i) => i !== index));
+ }, []);
+
+ // 헤더 버튼
+ const headerActions = useMemo(() => {
+ if (isViewMode) {
+ return (
+
+
+
로딩 중... }>
로딩 중...
}>
+
+
+
- 로딩 중...
}>
-
+
+ );
+ }
+
+ return
+ 계좌를 찾을 수 없습니다.
+
+
+
+ );
+ }
+
+ return 팝업을 찾을 수 없습니다.
+
+
+ );
+ }
+
+ return (
+ <>
+
+
+
+ 로딩 중...
++ + 삭제된 팝업 정보는 복구할 수 없습니다. + +
+
+
+
+ );
+ }
+ return (
+
+
+
+
+ );
+ }, [isViewMode, isNewMode, handleDelete, handleEdit, handleCancel, handleSave]);
+
+ // 입력 필드 렌더링 헬퍼
+ const renderField = (
+ label: string,
+ field: string,
+ value: string | number,
+ options?: {
+ required?: boolean;
+ type?: 'text' | 'tel' | 'email' | 'number';
+ placeholder?: string;
+ disabled?: boolean;
+ }
+ ) => {
+ const { required, type = 'text', placeholder, disabled } = options || {};
+ return (
+
+
+ handleChange(field, type === 'number' ? Number(e.target.value) : e.target.value)}
+ placeholder={placeholder}
+ disabled={isViewMode || disabled}
+ className="bg-white"
+ />
+
+ );
+ };
+
+ return (
+
+ {/* 기본 정보 */}
+
+
+ 기본 정보
+
+
+ {renderField('사업자등록번호', 'businessNumber', formData.businessNumber, { required: true, placeholder: '000-00-00000', disabled: true })}
+ {renderField('거래처 코드', 'vendorCode', formData.vendorCode, { disabled: true })}
+ {renderField('거래처명', 'vendorName', formData.vendorName, { required: true })}
+ {renderField('대표자명', 'representativeName', formData.representativeName)}
+ {/* 거래처 유형 */}
+
+
+
+ {/* 연락처 정보 */}
+
+
+ 연락처 정보
+
+
+ {/* 주소 */}
+
+
+
+ {/* 담당자 정보 */}
+
+
+ 담당자 정보
+
+
+ {renderField('담당자명', 'contactName', formData.contactName)}
+ {renderField('담당자 전화', 'contactPhone', formData.contactPhone, { type: 'tel' })}
+ {renderField('시스템 관리자', 'systemManager', formData.systemManager, { disabled: true })}
+
+
+
+ {/* 필요 서류 */}
+
+
+ 필요 서류
+
+
+ {/* 사업자등록증 */}
+
+
+
+ {/* 악성 채권 정보 */}
+
+
+ 악성 채권 정보
+
+
+
+
+
+ {/* 메모 */}
+
+
+ 메모
+
+
+ {/* 메모 입력 */}
+ {!isViewMode && (
+
+
+ {/* 악성채권 등록 */}
+
+
+ handleChange('vendorType', checked ? 'both' : 'sales')}
+ disabled={isViewMode}
+ className="data-[state=checked]:bg-orange-500"
+ />
+
+
+
+
+
+
+ handleChange('businessType', e.target.value)}
+ placeholder="업태"
+ disabled={isViewMode}
+ className="bg-white"
+ />
+ handleChange('businessCategory', e.target.value)}
+ placeholder="업종"
+ disabled={isViewMode}
+ className="bg-white"
+ />
+
+
+
+
+
+ handleChange('zipCode', e.target.value)}
+ placeholder="우편번호"
+ disabled={isViewMode}
+ className="w-[120px] bg-white"
+ />
+
+
+ handleChange('address1', e.target.value)}
+ placeholder="기본주소"
+ disabled={isViewMode}
+ className="bg-white"
+ />
+ handleChange('address2', e.target.value)}
+ placeholder="상세주소"
+ disabled={isViewMode}
+ className="bg-white"
+ />
+
+ {renderField('전화번호', 'phone', formData.phone, { type: 'tel', placeholder: '02-0000-0000' })}
+ {renderField('모바일', 'mobile', formData.mobile, { type: 'tel', placeholder: '010-0000-0000' })}
+ {renderField('팩스', 'fax', formData.fax, { type: 'tel', placeholder: '02-0000-0000' })}
+ {renderField('이메일', 'email', formData.email, { type: 'email' })}
+
+
+
+
+
+ {/* 세금계산서 */}
+
+ {/* 기존 파일 있는 경우 */}
+ {formData.files.find(f => f.type === 'businessRegistration') && !newBusinessRegistrationFile ? (
+
+
+
+ ) : newBusinessRegistrationFile ? (
+ /* 새 파일 선택된 경우 */
+
+
+
+ {!isViewMode && (
+ <>
+
+
+
+ )}
+
+
+ ) : (
+ /* 파일 없는 경우 */
+
+
+
+
+
+ {!isViewMode && (
+ setNewBusinessRegistrationFile(e.target.files?.[0] || null)}
+ className="hidden"
+ />
+ )}
+
+ )}
+
+
+
+
+ {/* 추가 서류 */}
+
+ {/* 기존 파일 있는 경우 */}
+ {formData.files.find(f => f.type === 'taxInvoice') && !newTaxInvoiceFile ? (
+
+
+
+ ) : newTaxInvoiceFile ? (
+ /* 새 파일 선택된 경우 */
+
+
+
+ {!isViewMode && (
+ <>
+
+
+
+ )}
+
+
+ ) : (
+ /* 파일 없는 경우 */
+
+
+
+
+
+ {!isViewMode && (
+ setNewTaxInvoiceFile(e.target.files?.[0] || null)}
+ className="hidden"
+ />
+ )}
+
+ )}
+
+
+
+
+ {!isViewMode && (
+
+ )}
+
+
+ {/* 기존 추가 서류 */}
+ {formData.files.filter(f => f.type === 'additional').map((file) => (
+
+
+
+ ))}
+ {/* 새로 추가된 파일 */}
+ {newAdditionalFiles.map((file, index) => (
+
+
+
+ {!isViewMode && (
+
+ )}
+
+
+ ))}
+ {/* 파일 없는 경우 안내 */}
+ {formData.files.filter(f => f.type === 'additional').length === 0 && newAdditionalFiles.length === 0 && (
+
+
+
+
+
+ )}
+
+ {/* 미수금 */}
+
+ {/* 연동 버튼 */}
+
+
+ handleChange('debtAmount', Number(e.target.value))}
+ disabled={isViewMode}
+ className="bg-white"
+ />
+
+ {/* 상태 */}
+
+
+
+
+ {/* 연체일수 */}
+
+
+
+ {/* 본사 담당자 */}
+
+ handleChange('overdueDays', Number(e.target.value))}
+ disabled={isViewMode}
+ className="bg-white w-[100px]"
+ />
+ 일
+
+
+
+
+
+ {/* 악성채권 발생일 */}
+
+
+ handleChange('occurrenceDate', e.target.value)}
+ disabled={isViewMode}
+ className="bg-white"
+ />
+
+ {/* 악성채권 종료일 */}
+
+
+ handleChange('endDate', e.target.value || null)}
+ disabled={isViewMode}
+ className="bg-white"
+ placeholder="-"
+ />
+
+
+
+
+
+
+