master_api_sum

- 2025-12-28 고객센터 시스템 게시판 API 연동 수정 기록
- 날짜 범위 필터 초기값 변경 내용 문서화

fix: 고객센터 목록 날짜 범위 초기값 변경

- EventList, InquiryList, NoticeList 날짜 범위 초기값 빈 문자열로 변경
- 페이지 진입 시 전체 데이터 조회 가능하도록 수정

feat: 1:1 문의 댓글 기능 API 연동

- 댓글 CRUD API 함수 구현 (shared/actions.ts)
  - getComments, createComment, updateComment, deleteComment
- CommentApiData 타입 및 transformApiToComment 변환 함수 추가
- InquiryDetail 컴포넌트 callback props 방식으로 변경
- user.id localStorage 저장으로 본인 글 수정/삭제 버튼 표시
- page.tsx에서 댓글 API 호출 및 상태 관리

feat(WEB): 게시판 시스템 Mock → API 연동 (Phase J)

- BoardList: getPosts, getMyPosts API 연동
- BoardDetail: getPost API 연동, 새 라우트 구조 적용
- BoardForm: getBoards, createPost, updatePost API 연동
- 라우트 변경: /board/[id] → /board/[boardCode]/[postId]
- Toast 라이브러리 sonner로 통일
- MOCK_BOARDS 완전 제거, types.ts 정리

chore: 작업 현황 업데이트

refactor: BoardForm 부서 Mock 데이터 분리

- types.ts에서 MOCK_DEPARTMENTS 제거
- BoardForm 내부에 임시 Mock 데이터 정의
- TODO: API에서 부서 목록 연동 필요

feat: 종합현황 반려 사유 입력 Dialog 추가

- 반려 시 사유 입력 Dialog 표시
- 사유 미입력 시 toast 에러 메시지
- rejectIssue 함수에 reason 파라미터 추가

feat: 고객센터 Mock → API 연동 완료

- shared/actions.ts: 공통 게시글 API 액션 추가
- shared/types.ts: 공통 타입 정의
- InquiryList: Mock → API 연동, transform 함수 추가
- FAQList: Mock → API 연동, transform 함수 추가
- 상세 페이지: API 연동 (notices, events, inquiries)
- 각 types.ts: transformPost 함수 추가

fix: 고객센터 board_code 불일치 수정

- 공지사항: notice → notices
- 이벤트: event → events
- DB 시스템 게시판 코드와 일치하도록 수정

feat: 결재 문서 작성 파일 첨부 기능 구현

- UploadedFile 타입 추가 및 ProposalData/ExpenseReportData에 uploadedFiles 필드 추가
- uploadFiles() 함수 구현 (/api/v1/files/upload API 연동)
- createApproval/updateApproval에서 파일 업로드 후 저장 처리
- ProposalForm/ExpenseReportForm에 첨부파일 UI 개선
  - 기존 업로드 파일 표시 (파일 보기/삭제 기능)
  - 새 첨부 파일 목록 표시 및 삭제 기능
- DraftBox에서 결재자 부서/직책 정보 표시
- 문서 상세 모달에서 실제 API 데이터 표시 (목업 데이터 제거)
- 수정 모드 상신 시 PATCH 메서드 사용 (405 에러 수정)

feat: [mock-migration] Phase J-4 게시판 관리 Mock → API 연동 완료

- types.ts: BoardApiData, BoardExtraSettings API 타입 추가
- actions.ts: Server Actions 생성 (CRUD, 변환 함수)
- index.tsx: Mock 데이터 → API 호출로 전환
- [id]/page.tsx: 상세 페이지 API 연동
- [id]/edit/page.tsx: 수정 페이지 API 연동
- new/page.tsx: 등록 페이지 API 연동

주요 정책:
- /boards/tenant 엔드포인트로 테넌트 게시판만 조회
- 수정 시 board_code 전송 안함 (코드 변경 불가)
- extra_settings 내 target/target_name 저장

feat: 매입유형(purchase_type) 필드 저장 기능 추가

- actions.ts: API 응답/요청에 purchase_type 매핑 추가
- PurchaseDetail.tsx: 저장 시 purchaseType 포함하도록 수정

fix(salary): 직책/직급 매핑 수정 (사원관리 기준 통일)

- transformApiToFrontend: position → job_title_label (직책), rank → rank (직급)
- transformApiToDetail: 동일하게 수정
- 기존 잘못된 매핑: position_label(직위) → 직책, job_title_label(직책) → 직급

feat: [mock-migration] Phase M 잔여 Mock/TODO 제거 완료

- M-1: 매입 상세 모달 MOCK_ACCOUNTS, MOCK_VENDORS → API 연동
- M-2: 직원 관리 파일 업로드 API 연동 (uploadProfileImage)
- M-4: 결재 문서 생성 MOCK_EMPLOYEES 제거 → getEmployees API
- M-5: 결재함/기안함 console.log 제거 → 승인/반려 API 연동
- M-6: 구독 관리 TODO 제거 → requestDataExport, cancelSubscription
- M-7: 계정 정보 TODO 제거 → withdrawAccount, suspendTenant

docs: 휴가관리 사용현황 동기화 수정 작업 기록

- 2025-12-26 휴가 사용현황 동기화 수정 내용 추가
- fetchUsageData 호출 추가, 부여일수 계산 수정 문서화

feat: Phase G 생산관리/품질검사 Mock → API 연동 완료

G-1 작업지시관리:
- WorkOrderList: getWorkOrders, getWorkOrderStats API
- WorkOrderDetail: getWorkOrderById API
- WorkOrderCreate: createWorkOrder API
- SalesOrderSelectModal: getSalesOrdersForWorkOrder API

G-2 작업실적관리:
- WorkResultList: getWorkResults, getWorkResultStats API

G-3 생산대시보드:
- actions.ts 생성, getDashboardData API

G-4 작업자화면:
- actions.ts 생성
- getMyWorkOrders, completeWorkOrder API
- MaterialInputModal: getMaterialsForWorkOrder, registerMaterialInput API
- ProcessDetailSection: getProcessSteps, requestInspection API

G-5 품질검사:
- actions.ts 생성
- InspectionList: getInspections, getInspectionStats API
- InspectionDetail: getInspectionById, updateInspection API
- InspectionCreate: createInspection API

fix: [vacation] 휴가 사용현황 동기화 및 부여일수 계산 수정

- 승인 후 fetchUsageData() 호출 추가로 사용현황 즉시 반영
- baseVacation: 동적 totalDays → 고정 '15일' (기본 연차)
- grantedVacation: 하드코딩 '0일' → Math.max(0, totalDays-15) 계산
- useCallback dependencies에 fetchUsageData 추가

feat: Phase I Excel/PDF 다운로드 API 연동

- ReceivablesStatus: 채권현황 엑셀 다운로드 API 연동
- VendorLedger: 거래처원장 목록 엑셀, 상세 PDF 다운로드 API 연동
- DailyReport: 일일일보 엑셀 다운로드 API 연동
- Blob 다운로드 패턴 및 toast 알림 적용

feat: L-2 견적 관리 Mock → API 연동

## 변경사항
- SAMPLE_QUOTES Mock 데이터 제거
- Server Actions 생성 (CRUD + 특수 기능 14개)
- QuoteManagementClient 분리 (SSR/CSR 패턴)
- Quote 타입 및 변환 함수 정의

## 추가된 API 연동
- 목록/상세/등록/수정/삭제/일괄삭제
- 최종확정/확정취소/수주전환
- PDF 생성/이메일/카카오 발송
- 견적번호 미리보기/요약 통계

feat: 공정관리 페이지 및 컴포넌트 추가

- 공정관리 목록/상세/등록/수정 페이지 구현
- ProcessListClient, ProcessDetail, ProcessForm 컴포넌트 추가
- ProcessWorkLogPreviewModal, RuleModal 추가
- MobileCard 공통 컴포넌트 추가
- WorkLogModal.tsx 개선
- .gitignore 업데이트

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
(cherry picked from commit f0c0de2ecd)

chore: React 공통 컴포넌트 업데이트

- VacationManagement: API 연동 개선
- WorkOrders: 작업자 선택 모달 개선
- TypeScript 빌드 설정 업데이트

feat: I-8 휴가 정책 관리 API 연동

- actions.ts: 휴가 정책 CRUD Server Actions
- LeavePolicyManagement 컴포넌트 API 연동

feat: I-7 종합분석 API 연동

- actions.ts: 종합분석 조회 Server Actions
- ComprehensiveAnalysis 컴포넌트 API 연동

feat: I-6 일일 생산현황 API 연동

- actions.ts: 일일 리포트 조회 Server Actions
- DailyReport 컴포넌트 API 연동

feat: I-5 미수금 현황 API 연동

- actions.ts: 미수금 조회 Server Actions
- ReceivablesStatus 컴포넌트 API 연동

feat: I-4 거래통장 조회 API 연동

- actions.ts: 은행 거래내역 조회 Server Actions
- BankTransactionInquiry 컴포넌트 API 연동

feat: I-3 법인카드 사용내역 API 연동

- actions.ts: 카드 거래내역 조회 Server Actions
- CardTransactionInquiry 컴포넌트 API 연동

feat: I-2 거래처 원장 API 연동

- actions.ts: 거래처 원장 조회 Server Actions
- VendorLedger 컴포넌트 API 연동
- VendorLedgerDetail 상세 조회 연동

feat: H-3 출하 관리 API 연동

- actions.ts: Server Actions (CRUD, 상태 변경)
- ShipmentList: 출하 목록 API 연동
- ShipmentCreate: 출하 등록 API 연동
- ShipmentEdit: 출하 수정 API 연동
- ShipmentDetail: 출하 상세 API 연동

feat: G-2 작업실적 관리 API 연동

- types.ts API 타입 추가 (WorkResultApi, WorkResultStatsApi 등)
- transformApiToFrontend/transformFrontendToApi 변환 함수 추가
- actions.ts 서버 액션 생성 (8개 함수)
- index.ts 액션 exports 추가

Server Actions:
- getWorkResults: 목록 조회 (페이징, 필터링)
- getWorkResultStats: 통계 조회
- getWorkResultById: 상세 조회
- createWorkResult: 등록
- updateWorkResult: 수정
- deleteWorkResult: 삭제
- toggleInspection: 검사 상태 토글
- togglePackaging: 포장 상태 토글

fix: StockStatusList Hook 순서 오류 수정

- 조건부 return 전에 모든 Hooks(useCallback, useMemo) 선언
- React Rules of Hooks 준수

feat: H-2 재고현황 Mock → API 연동 완료

- StockStatusDetail.tsx: 상세 조회 API 연동
- StockStatusList.tsx: 목록 조회 API 연동 (이전 세션)
- actions.ts: 재고 현황 Server Actions 구현

feat: H-1 입고 관리 Mock → API 연동 완료

- ReceivingDetail.tsx: 상세 조회 및 입고처리 API 연동
- ReceivingProcessDialog.tsx: 폼 데이터 API 전달 구조로 변경
- InspectionCreate.tsx: 검사 대상 목록 API 조회 적용
- ReceivingList.tsx: 미사용 타입 import 정리

feat: G-1 작업지시 관리 API 연동

- actions.ts 서버 액션 11개 함수 구현
- types.ts API 타입 및 변환 함수 추가
- index.ts 액션 함수 export 추가

Server Actions:
- getWorkOrders (목록)
- getWorkOrderStats (통계)
- getWorkOrderById (상세)
- createWorkOrder (등록)
- updateWorkOrder (수정)
- deleteWorkOrder (삭제)
- updateWorkOrderStatus (상태변경)
- assignWorkOrder (담당자배정)
- toggleBendingField (벤딩토글)
- addWorkOrderIssue (이슈등록)
- resolveWorkOrderIssue (이슈해결)

feat: I-1 미지급비용 관리 React 연동

- Server Actions 패턴으로 API 연동 구현 (actions.ts)
- Mock 데이터 제거, props 기반 데이터 주입
- Server Component로 초기 데이터 로딩
- 삭제/지급일 변경 등 CRUD 액션 연동

feat: HR 모듈 API 연동 완료 및 휴가관리 버그 수정

## 휴가관리 (VacationManagement)
- 휴가 부여 API 연동: createLeaveGrant 호출 추가
- 휴가 신청 시 선택된 사원 userId 전달 (잔여휴가 오류 수정)
- LeaveType 타입 분리 (VacationType과 구분)
- VacationGrantDialog에 부여일(grantDate) 필드 추가

## 근태관리 (AttendanceManagement)
- actions.ts 추가: API 호출 함수 분리
- 타입 정의 확장 및 개선

## 기타 개선
- CardManagement, SalaryManagement: actions 개선
- DocumentCreate: 전자결재 actions 및 index 개선
- GoogleMap: 지도 컴포넌트 개선

feat: Phase E 인사관리 Mock → API 마이그레이션

- E-1 법인카드 관리 API 연동
  - actions.ts 생성 (getCards, createCard, updateCard, deleteCard, toggleCardStatus)
  - CardForm, 페이지 컴포넌트 API 연동
- E-2 급여 관리 API 연동
  - actions.ts 생성 (getSalaries, getSalary, updateSalaryStatus, bulkUpdateSalaryStatus)
  - 급여 목록 컴포넌트 API 연동
- 결재 시스템 actions.ts 추가 (ApprovalBox, DraftBox, ReferenceBox, DocumentCreate)
- DepositManagement actions.ts 페이지네이션 응답 구조 수정
- 부서 관리, 휴가 관리 actions.ts 개선
- API URL에 /api prefix 추가

회계 및 설정 모듈 리팩토링: actions 분리, 타입 정의 개선

feat: 휴가 부여현황 Mock 데이터 제거 및 API 연동

- getLeaveGrants, createLeaveGrant, deleteLeaveGrant API 함수 추가
- LeaveGrantType, LeaveGrantRecord, CreateLeaveGrantRequest 타입 추가
- generateGrantData Mock 함수 제거
- fetchGrantData로 실제 API 호출
- grantData 상태를 API 데이터로 갱신

feat: 휴가 사용현황 Mock 데이터 제거 및 API 연동

- getLeaveBalances() API 함수 추가
- LeaveBalanceRecord, GetLeaveBalancesParams 타입 정의
- generateUsageData() Mock 함수 제거
- fetchUsageData()로 실제 API 호출
- hireDate 날짜 포맷팅 예외 처리 추가

feat: C-4 부서 관리 Mock → API 연동

- actions.ts 생성 (getDepartmentTree, createDepartment, updateDepartment, deleteDepartment, deleteDepartmentsMany)
- index.tsx Mock 데이터 제거 및 API 연동
- 트리 구조 CRUD 완전 연동

⚠️ .env.local에 API_URL=https://api.sam.kr/api 설정 필요 (Server Actions용)

feat: C-3 휴가 관리 Mock → API 연동

- actions.ts 생성: getLeaves, createLeave, approveLeave, rejectLeave, cancelLeave 등
- index.tsx 수정: 신청현황 탭 Mock 데이터 → API 호출 전환
- 일괄 승인/반려 API 연동 (approveLeavesMany, rejectLeavesMany)
- 휴가 신청 다이얼로그 createLeave API 연동

feat: C-2 근태 관리 Mock → API 연동

- actions.ts 생성 (checkIn/checkOut/getTodayAttendance)
- GoogleMap.tsx userLocation 콜백 추가
- page.tsx Mock console.log 제거 + API 연동
- 처리중 상태 및 버튼 텍스트 추가

feat: C-1 직원 관리 Mock → API 연동

- actions.ts 생성 (CRUD + 통계 + 일괄삭제 Server Actions)
- utils.ts 생성 (API ↔ Frontend 데이터 변환)
- index.tsx Mock 데이터 제거, API 연동
- [id]/page.tsx 상세 페이지 API 연동
- [id]/edit/page.tsx 수정 페이지 API 연동
- new/page.tsx 등록 페이지 API 연동

API Endpoints:
- GET/POST /api/v1/employees
- GET/PATCH/DELETE /api/v1/employees/{id}
- POST /api/v1/employees/bulk-delete
- GET /api/v1/employees/stats

feat: Daum 우편번호 서비스 연동 및 악성채권 UI 개선

- useDaumPostcode 공통 훅 생성 (Daum Postcode API 연동)
- 우편번호 찾기 기능 적용: 악성채권, 거래처, 직원, 회사정보, 주문등록
- 악성채권 페이지 토글 순서 변경 (라벨 → 토글)
- 악성채권 토글 기능 수정 (매출/매입 → 등록/해제)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
(cherry picked from commit 41ef0bdd86)

feat: A-2 팝업 관리 Mock → API 연동

- 상세 조회 페이지: MOCK_POPUPS → getPopupById() API
- 수정 페이지: MOCK_POPUPS → getPopupById() API + 로딩 상태
- PopupForm: console.log → createPopup/updatePopup Server Actions
- 삭제 기능: deletePopup() API 연동 + 로딩 상태
- 데이터 변환 유틸리티 추가 (API ↔ Frontend)

feat: A-1 악성채권 관리 Mock → API 연동 완료

- 상세 페이지 서버 컴포넌트 전환 ([id]/page.tsx, [id]/edit/page.tsx)
- BadDebtDetail.tsx: CRUD API 연동 (createBadDebt, updateBadDebt, deleteBadDebt)
- actions.ts: 메모 API 추가 (addBadDebtMemo, deleteBadDebtMemo)

feat: 매입 관리 Mock → API 전환 및 세금계산서 토글 연동

- index.tsx: Mock 데이터 제거, API 데이터 로딩으로 전환
- actions.ts: getPurchases(), togglePurchaseTaxInvoice() 서버 액션 추가
- vendorOptions 빈 문자열 필터링 (Select.Item 에러 수정)

feat: 매출 상세 페이지 API 연동

- 목데이터(MOCK_VENDORS, fetchSalesDetail) 제거
- getSaleById, createSale, updateSale, deleteSale API 연동
- getClients로 거래처 목록 로드
- 상태 관리 개선 (clients, isLoading, isSaving)

fix: Mock 데이터를 실제 API 연동으로 복원

- 팝업 관리, 결제 내역, 구독 관리, 알림 설정 API 연동
- 입금/출금/거래처 관리 API 연동
- page.tsx를 서버 컴포넌트로 변환
- actions.ts 서버 액션 추가

src/components/board/BoardList/index.tsx

@@ -9,10 +9,10 @@
  * - 테이블 컬럼: No., 제목, 작성자, 등록일, 조회수
  */
 
-import { useState, useMemo, useCallback } from 'react';
+import { useState, useMemo, useCallback, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
 import { format } from 'date-fns';
-import { FileText, Plus, Pencil, Trash2 } from 'lucide-react';
+import { FileText, Plus, Pencil, Trash2, Loader2 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Checkbox } from '@/components/ui/checkbox';
 import { TableRow, TableCell } from '@/components/ui/table';
@@ -26,13 +26,6 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from '@/components/ui/alert-dialog';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
 import {
   IntegratedListTemplateV2,
   type TabOption,
@@ -40,61 +33,11 @@ import {
 } from '@/components/templates/IntegratedListTemplateV2';
 import { DateRangeSelector } from '@/components/molecules/DateRangeSelector';
 import { ListMobileCard, InfoField } from '@/components/organisms/ListMobileCard';
-import type { Post, SortOption, BoardFilter } from '../types';
-import { BOARD_FILTER_OPTIONS, MOCK_BOARDS } from '../types';
-
-// ===== Mock 데이터 생성 =====
-const generateMockPosts = (): Post[] => {
-  const authors = [
-    { id: 'user1', name: '홍길동', department: '개발팀', position: '과장' },
-    { id: 'user2', name: '김철수', department: '인사팀', position: '대리' },
-    { id: 'user3', name: '이영희', department: '총무팀', position: '사원' },
-    { id: 'user4', name: '박지민', department: '마케팅팀', position: '차장' },
-  ];
-  const titles = [
-    '제목',
-    '2025년 1분기 사업계획 공지',
-    '시스템 점검 안내',
-    '연말 휴가 일정 안내',
-    '신규 프로젝트 착수 회의',
-  ];
-  const boards = MOCK_BOARDS.filter((b) => b.id !== 'all');
-
-  return Array.from({ length: 50 }, (_, i) => {
-    const author = authors[i % authors.length];
-    const board = boards[i % boards.length];
-    const dayOffset = i % 30;
-
-    return {
-      id: `post-${i + 1}`,
-      boardId: board.id,
-      boardName: board.name,
-      title: titles[i % titles.length],
-      content: `<p>게시글 내용 ${i + 1}입니다. 이것은 테스트용 콘텐츠입니다.</p>`,
-      authorId: author.id,
-      authorName: author.name,
-      authorDepartment: author.department,
-      authorPosition: author.position,
-      isPinned: i < 3, // 상위 3개만 상단 고정
-      allowComments: i % 2 === 0,
-      viewCount: 100 + i * 7,
-      attachments: i % 3 === 0 ? [
-        {
-          id: `file-${i}`,
-          fileName: 'abc.pdf',
-          fileSize: 1024000,
-          fileUrl: '/files/abc.pdf',
-          mimeType: 'application/pdf',
-        },
-      ] : [],
-      createdAt: format(new Date(2025, 8, dayOffset + 1, 12, 20), "yyyy-MM-dd'T'HH:mm:ss"),
-      updatedAt: format(new Date(2025, 8, dayOffset + 1, 12, 20), "yyyy-MM-dd'T'HH:mm:ss"),
-    };
-  });
-};
-
-// 현재 로그인 사용자 ID (실제로는 auth context에서 가져옴)
-const CURRENT_USER_ID = 'user1';
+import { toast } from 'sonner';
+import type { Post, SortOption } from '../types';
+import { getBoards } from '../BoardManagement/actions';
+import { getPosts, getMyPosts, deletePost } from '../actions';
+import type { Board } from '../BoardManagement/types';
 
 export function BoardList() {
   const router = useRouter();
@@ -102,22 +45,100 @@ export function BoardList() {
   // ===== 상태 관리 =====
   const [searchQuery, setSearchQuery] = useState('');
   const [sortOption] = useState<SortOption>('latest'); // 기본 정렬: 최신순
-  const [boardFilter, setBoardFilter] = useState<BoardFilter>('notice');
-  const [activeTab, setActiveTab] = useState<string>('notice'); // 첫 번째 탭: 공지사항
+  const [activeTab, setActiveTab] = useState<string>(''); // 첫 번째 게시판 코드로 설정
   const [selectedItems, setSelectedItems] = useState<Set<string>>(new Set());
   const [currentPage, setCurrentPage] = useState(1);
   const itemsPerPage = 20;
 
   // 날짜 범위 상태
-  const [startDate, setStartDate] = useState('2025-09-01');
-  const [endDate, setEndDate] = useState('2025-09-03');
+  const [startDate, setStartDate] = useState('');
+  const [endDate, setEndDate] = useState('');
 
   // 삭제 다이얼로그
   const [showDeleteDialog, setShowDeleteDialog] = useState(false);
   const [deleteTargetId, setDeleteTargetId] = useState<string | null>(null);
+  const [deleteTargetBoardCode, setDeleteTargetBoardCode] = useState<string>('');
 
-  // Mock 데이터
-  const [data, setData] = useState<Post[]>(generateMockPosts);
+  // 데이터 상태
+  const [boards, setBoards] = useState<Board[]>([]);
+  const [posts, setPosts] = useState<Post[]>([]);
+  const [totalItems, setTotalItems] = useState(0);
+  const [totalPages, setTotalPages] = useState(1);
+  const [isLoading, setIsLoading] = useState(true);
+  const [currentUserId, setCurrentUserId] = useState<string>('');
+
+  // ===== 게시판 목록 조회 =====
+  useEffect(() => {
+    async function fetchBoards() {
+      const result = await getBoards();
+      if (result.success && result.data) {
+        setBoards(result.data);
+        // 첫 번째 게시판을 기본 탭으로 설정
+        if (result.data.length > 0 && !activeTab) {
+          setActiveTab(result.data[0].boardCode);
+        }
+      }
+    }
+    fetchBoards();
+  }, []);
+
+  // ===== 게시글 목록 조회 =====
+  useEffect(() => {
+    async function fetchPosts() {
+      if (!activeTab) return;
+
+      setIsLoading(true);
+      try {
+        let result;
+
+        if (activeTab === 'my') {
+          // 나의 게시글 조회
+          result = await getMyPosts({
+            search: searchQuery || undefined,
+            per_page: itemsPerPage,
+            page: currentPage,
+          });
+        } else {
+          // 특정 게시판 게시글 조회
+          result = await getPosts(activeTab, {
+            search: searchQuery || undefined,
+            per_page: itemsPerPage,
+            page: currentPage,
+          });
+        }
+
+        if (result.success && result.posts) {
+          setPosts(result.posts);
+          if (result.data) {
+            setTotalItems(result.data.total);
+            setTotalPages(result.data.last_page);
+          }
+        } else {
+          setPosts([]);
+          setTotalItems(0);
+          setTotalPages(1);
+          if (result.error) {
+            toast.error(result.error);
+          }
+        }
+      } catch (error) {
+        console.error('게시글 조회 오류:', error);
+        setPosts([]);
+      } finally {
+        setIsLoading(false);
+      }
+    }
+
+    fetchPosts();
+  }, [activeTab, currentPage, searchQuery]);
+
+  // ===== 현재 사용자 ID 가져오기 =====
+  useEffect(() => {
+    // TODO: 실제 인증 컨텍스트에서 가져오기
+    // 임시로 localStorage에서 가져옴
+    const userId = localStorage.getItem('user_id') || '';
+    setCurrentUserId(userId);
+  }, []);
 
   // ===== 체크박스 핸들러 =====
   const toggleSelection = useCallback((id: string) => {
@@ -130,35 +151,16 @@ export function BoardList() {
   }, []);
 
   const toggleSelectAll = useCallback(() => {
-    if (selectedItems.size === filteredData.length && filteredData.length > 0) {
+    if (selectedItems.size === posts.length && posts.length > 0) {
       setSelectedItems(new Set());
     } else {
-      setSelectedItems(new Set(filteredData.map((item) => item.id)));
+      setSelectedItems(new Set(posts.map((item) => item.id)));
     }
-  }, [selectedItems.size]);
+  }, [selectedItems.size, posts]);
 
-  // ===== 필터링된 데이터 =====
-  const filteredData = useMemo(() => {
-    let result = data.filter((item) =>
-      item.title.includes(searchQuery) ||
-      item.authorName.includes(searchQuery)
-    );
-
-    // 탭 필터 (게시판 종류 또는 나의 게시글)
-    if (activeTab === 'my') {
-      // 나의 게시글 탭: 현재 사용자 게시글만
-      result = result.filter((item) => item.authorId === CURRENT_USER_ID);
-    } else if (activeTab !== 'all') {
-      // 특정 게시판 탭
-      result = result.filter((item) => item.boardId === activeTab);
-    }
-
-    // 게시판 필터 드롭다운 (탭과 별개로 추가 필터링)
-    if (boardFilter === 'my') {
-      result = result.filter((item) => item.authorId === CURRENT_USER_ID);
-    } else if (boardFilter !== 'all' && boardFilter !== 'notice') {
-      result = result.filter((item) => item.boardId === boardFilter);
-    }
+  // ===== 필터링된 데이터 (클라이언트 정렬만) =====
+  const sortedData = useMemo(() => {
+    const result = [...posts];
 
     // 정렬 (상단 고정은 항상 최상위)
     result.sort((a, b) => {
@@ -179,70 +181,72 @@ export function BoardList() {
     });
 
     return result;
-  }, [data, searchQuery, activeTab, boardFilter, sortOption]);
-
-  const paginatedData = useMemo(() => {
-    const startIndex = (currentPage - 1) * itemsPerPage;
-    return filteredData.slice(startIndex, startIndex + itemsPerPage);
-  }, [filteredData, currentPage, itemsPerPage]);
-
-  const totalPages = Math.ceil(filteredData.length / itemsPerPage);
+  }, [posts, sortOption]);
 
   // ===== 액션 핸들러 =====
   const handleRowClick = useCallback((item: Post) => {
-    router.push(`/ko/board/${item.id}`);
+    router.push(`/ko/board/${item.boardCode}/${item.id}`);
   }, [router]);
 
   const handleNewPost = useCallback(() => {
-    router.push('/ko/board/create');
-  }, [router]);
+    const boardCode = activeTab !== 'my' ? activeTab : boards[0]?.boardCode;
+    if (boardCode) {
+      router.push(`/ko/board/${boardCode}/create`);
+    } else {
+      router.push('/ko/board/create');
+    }
+  }, [router, activeTab, boards]);
 
-  const handleDeleteClick = useCallback((id: string) => {
+  const handleDeleteClick = useCallback((id: string, boardCode: string) => {
     setDeleteTargetId(id);
+    setDeleteTargetBoardCode(boardCode);
     setShowDeleteDialog(true);
   }, []);
 
-  const handleConfirmDelete = useCallback(() => {
-    if (deleteTargetId) {
-      setData((prev) => prev.filter((item) => item.id !== deleteTargetId));
-      setSelectedItems((prev) => {
-        const newSet = new Set(prev);
-        newSet.delete(deleteTargetId);
-        return newSet;
-      });
+  const handleConfirmDelete = useCallback(async () => {
+    if (deleteTargetId && deleteTargetBoardCode) {
+      const result = await deletePost(deleteTargetBoardCode, deleteTargetId);
+      if (result.success) {
+        setPosts((prev) => prev.filter((item) => item.id !== deleteTargetId));
+        setSelectedItems((prev) => {
+          const newSet = new Set(prev);
+          newSet.delete(deleteTargetId);
+          return newSet;
+        });
+        toast.success('게시글이 삭제되었습니다.');
+      } else {
+        toast.error(result.error || '게시글 삭제에 실패했습니다.');
+      }
     }
     setShowDeleteDialog(false);
     setDeleteTargetId(null);
-  }, [deleteTargetId]);
+    setDeleteTargetBoardCode('');
+  }, [deleteTargetId, deleteTargetBoardCode]);
 
-  // ===== 탭 옵션 (공지사항 고정 + 동적 게시판들 + 나의 게시글 고정) =====
+  // ===== 탭 변경 핸들러 =====
+  const handleTabChange = useCallback((tab: string) => {
+    setActiveTab(tab);
+    setCurrentPage(1);
+    setSelectedItems(new Set());
+  }, []);
+
+  // ===== 탭 옵션 (게시판 목록 + 나의 게시글) =====
   const tabs: TabOption[] = useMemo(() => {
-    // 동적으로 생성되는 게시판들 (공지사항, 전체, 나의게시글 제외)
-    const dynamicBoards = MOCK_BOARDS.filter(
-      (b) => b.id !== 'all' && b.id !== 'notice' && b.id !== 'my'
-    );
+    const boardTabs = boards.map((board) => ({
+      value: board.boardCode,
+      label: board.boardName,
+      count: 0, // API에서 게시글 수를 가져오면 업데이트
+    }));
 
     return [
-      // 첫 번째: 공지사항 (고정)
-      {
-        value: 'notice',
-        label: '공지사항',
-        count: data.filter((p) => p.boardId === 'notice').length,
-      },
-      // 중간: 동적 게시판들
-      ...dynamicBoards.map((board) => ({
-        value: board.id,
-        label: board.name,
-        count: data.filter((p) => p.boardId === board.id).length,
-      })),
-      // 마지막: 나의 게시글 (고정)
+      ...boardTabs,
       {
         value: 'my',
         label: '나의 게시글',
-        count: data.filter((p) => p.authorId === CURRENT_USER_ID).length,
+        count: 0,
       },
     ];
-  }, [data]);
+  }, [boards]);
 
   // ===== 테이블 컬럼 (스크린샷 기준: No., 제목, 작성자, 등록일, 조회수) =====
   const tableColumns: TableColumn[] = useMemo(() => [
@@ -257,7 +261,7 @@ export function BoardList() {
   // ===== 테이블 행 렌더링 =====
   const renderTableRow = useCallback((item: Post, index: number, globalIndex: number) => {
     const isSelected = selectedItems.has(item.id);
-    const isMyPost = item.authorId === CURRENT_USER_ID;
+    const isMyPost = item.authorId === currentUserId;
 
     return (
       <TableRow
@@ -272,7 +276,7 @@ export function BoardList() {
         <TableCell className="text-center text-sm text-gray-500">
           {item.isPinned ? (
             <span className="inline-flex items-center justify-center w-6 h-6 bg-red-500 text-white rounded-full text-xs font-bold">
-              {globalIndex}
+              공지
             </span>
           ) : (
             globalIndex
@@ -284,6 +288,9 @@ export function BoardList() {
             {item.isPinned && (
               <span className="text-xs text-red-500 font-medium">[공지]</span>
             )}
+            {item.isSecret && (
+              <span className="text-xs text-gray-500 font-medium">[비밀]</span>
+            )}
             <span className="truncate">{item.title}</span>
           </div>
         </TableCell>
@@ -301,7 +308,7 @@ export function BoardList() {
                 variant="ghost"
                 size="icon"
                 className="h-8 w-8 text-gray-600 hover:text-gray-700 hover:bg-gray-50"
-                onClick={() => router.push(`/ko/board/${item.id}/edit`)}
+                onClick={() => router.push(`/ko/board/${item.boardCode}/${item.id}/edit`)}
               >
                 <Pencil className="h-4 w-4" />
               </Button>
@@ -309,7 +316,7 @@ export function BoardList() {
                 variant="ghost"
                 size="icon"
                 className="h-8 w-8 text-red-500 hover:text-red-600 hover:bg-red-50"
-                onClick={() => handleDeleteClick(item.id)}
+                onClick={() => handleDeleteClick(item.id, item.boardCode)}
               >
                 <Trash2 className="h-4 w-4" />
               </Button>
@@ -318,7 +325,7 @@ export function BoardList() {
         </TableCell>
       </TableRow>
     );
-  }, [selectedItems, toggleSelection, handleRowClick, handleDeleteClick, router]);
+  }, [selectedItems, currentUserId, toggleSelection, handleRowClick, handleDeleteClick, router]);
 
   // ===== 모바일 카드 렌더링 =====
   const renderMobileCard = useCallback((
@@ -328,7 +335,7 @@ export function BoardList() {
     isSelected: boolean,
     onToggle: () => void
   ) => {
-    const isMyPost = item.authorId === CURRENT_USER_ID;
+    const isMyPost = item.authorId === currentUserId;
 
     return (
       <ListMobileCard
@@ -338,6 +345,9 @@ export function BoardList() {
             {item.isPinned && (
               <span className="text-xs text-red-500 font-medium">[공지]</span>
             )}
+            {item.isSecret && (
+              <span className="text-xs text-gray-500 font-medium">[비밀]</span>
+            )}
             <span>{item.title}</span>
           </div>
         }
@@ -357,14 +367,14 @@ export function BoardList() {
               <Button
                 variant="outline"
                 className="flex-1"
-                onClick={() => router.push(`/ko/board/${item.id}/edit`)}
+                onClick={() => router.push(`/ko/board/${item.boardCode}/${item.id}/edit`)}
               >
                 <Pencil className="w-4 h-4 mr-2" /> 수정
               </Button>
               <Button
                 variant="outline"
                 className="flex-1 text-red-500 border-red-200 hover:bg-red-50 hover:text-red-600"
-                onClick={() => handleDeleteClick(item.id)}
+                onClick={() => handleDeleteClick(item.id, item.boardCode)}
               >
                 <Trash2 className="w-4 h-4 mr-2" /> 삭제
               </Button>
@@ -374,7 +384,7 @@ export function BoardList() {
         onClick={() => handleRowClick(item)}
       />
     );
-  }, [handleRowClick, handleDeleteClick, router]);
+  }, [currentUserId, handleRowClick, handleDeleteClick, router]);
 
   // ===== 헤더 액션 =====
   const headerActions = (
@@ -392,24 +402,14 @@ export function BoardList() {
     </>
   );
 
-  // ===== 테이블 헤더 액션 (필터 1개만: 게시판) =====
-  const tableHeaderActions = (
-    <div className="flex items-center gap-2 flex-wrap">
-      {/* 게시판 필터 */}
-      <Select value={boardFilter} onValueChange={(value) => setBoardFilter(value as BoardFilter)}>
-        <SelectTrigger className="w-[140px]">
-          <SelectValue placeholder="게시판" />
-        </SelectTrigger>
-        <SelectContent>
-          {BOARD_FILTER_OPTIONS.map((option) => (
-            <SelectItem key={option.value} value={option.value}>
-              {option.label}
-            </SelectItem>
-          ))}
-        </SelectContent>
-      </Select>
-    </div>
-  );
+  // ===== 로딩 상태 =====
+  if (isLoading && posts.length === 0) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <Loader2 className="h-8 w-8 animate-spin text-gray-400" />
+      </div>
+    );
+  }
 
   return (
     <>
@@ -423,12 +423,11 @@ export function BoardList() {
         searchPlaceholder="제목, 작성자 검색..."
         tabs={tabs}
         activeTab={activeTab}
-        onTabChange={setActiveTab}
-        tableHeaderActions={tableHeaderActions}
+        onTabChange={handleTabChange}
         tableColumns={tableColumns}
-        data={paginatedData}
-        totalCount={filteredData.length}
-        allData={filteredData}
+        data={sortedData}
+        totalCount={totalItems}
+        allData={sortedData}
         selectedItems={selectedItems}
         onToggleSelection={toggleSelection}
         onToggleSelectAll={toggleSelectAll}
@@ -438,7 +437,7 @@ export function BoardList() {
         pagination={{
           currentPage,
           totalPages,
-          totalItems: filteredData.length,
+          totalItems,
           itemsPerPage,
           onPageChange: setCurrentPage,
         }}