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/settings/NotificationSettings/NotificationSettingsClient.tsx

@@ -0,0 +1,557 @@
+'use client';
+
+/**
+ * 알림설정 페이지 클라이언트 컴포넌트
+ *
+ * 각 알림 유형별로 ON/OFF 토글과 이메일 알림 체크박스를 제공합니다.
+ * 클라이언트에서 프록시를 통해 API 호출 (토큰 갱신 자동 처리)
+ */
+
+import { useState, useCallback, useEffect } from 'react';
+import { PageLayout } from '@/components/organisms/PageLayout';
+import { PageHeader } from '@/components/organisms/PageHeader';
+import { Bell, Save } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardTitle } from '@/components/ui/card';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Switch } from '@/components/ui/switch';
+import { ContentLoadingSpinner } from '@/components/ui/loading-spinner';
+import { toast } from 'sonner';
+import type { NotificationSettings, NotificationItem } from './types';
+import { DEFAULT_NOTIFICATION_SETTINGS } from './types';
+
+// ===== 알림 항목 컴포넌트 =====
+interface NotificationItemRowProps {
+  label: string;
+  item: NotificationItem;
+  onChange: (item: NotificationItem) => void;
+  disabled?: boolean;
+}
+
+function NotificationItemRow({ label, item, onChange, disabled }: NotificationItemRowProps) {
+  return (
+    <div className="flex items-center justify-between py-3 border-b last:border-b-0">
+      <div className="flex items-center gap-4 flex-1">
+        <span className="text-sm min-w-[160px]">{label}</span>
+        <label className="flex items-center gap-2 cursor-pointer">
+          <Checkbox
+            checked={item.email}
+            onCheckedChange={(checked) =>
+              onChange({ ...item, email: checked === true })
+            }
+            disabled={disabled || !item.enabled}
+          />
+          <span className="text-sm text-muted-foreground">이메일</span>
+        </label>
+      </div>
+      <Switch
+        checked={item.enabled}
+        onCheckedChange={(checked) =>
+          onChange({ ...item, enabled: checked, email: checked ? item.email : false })
+        }
+        disabled={disabled}
+      />
+    </div>
+  );
+}
+
+// ===== 알림 섹션 컴포넌트 =====
+interface NotificationSectionProps {
+  title: string;
+  enabled: boolean;
+  onEnabledChange: (enabled: boolean) => void;
+  children: React.ReactNode;
+}
+
+function NotificationSection({ title, enabled, onEnabledChange, children }: NotificationSectionProps) {
+  return (
+    <Card>
+      <div className="flex items-center justify-between px-6 pt-6 pb-3">
+        <CardTitle className="text-base font-medium">{title}</CardTitle>
+        <Switch
+          checked={enabled}
+          onCheckedChange={onEnabledChange}
+        />
+      </div>
+      <CardContent className="pt-0">
+        <div className="pl-4">
+          {children}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+// ===== API 응답과 기본값 병합 =====
+function mergeWithDefaults(apiData: Partial<NotificationSettings>): NotificationSettings {
+  return {
+    notice: {
+      enabled: apiData.notice?.enabled ?? DEFAULT_NOTIFICATION_SETTINGS.notice.enabled,
+      notice: apiData.notice?.notice ?? DEFAULT_NOTIFICATION_SETTINGS.notice.notice,
+      event: apiData.notice?.event ?? DEFAULT_NOTIFICATION_SETTINGS.notice.event,
+    },
+    schedule: {
+      enabled: apiData.schedule?.enabled ?? DEFAULT_NOTIFICATION_SETTINGS.schedule.enabled,
+      vatReport: apiData.schedule?.vatReport ?? DEFAULT_NOTIFICATION_SETTINGS.schedule.vatReport,
+      incomeTaxReport: apiData.schedule?.incomeTaxReport ?? DEFAULT_NOTIFICATION_SETTINGS.schedule.incomeTaxReport,
+    },
+    vendor: {
+      enabled: apiData.vendor?.enabled ?? DEFAULT_NOTIFICATION_SETTINGS.vendor.enabled,
+      newVendor: apiData.vendor?.newVendor ?? DEFAULT_NOTIFICATION_SETTINGS.vendor.newVendor,
+      creditRating: apiData.vendor?.creditRating ?? DEFAULT_NOTIFICATION_SETTINGS.vendor.creditRating,
+    },
+    attendance: {
+      enabled: apiData.attendance?.enabled ?? DEFAULT_NOTIFICATION_SETTINGS.attendance.enabled,
+      annualLeave: apiData.attendance?.annualLeave ?? DEFAULT_NOTIFICATION_SETTINGS.attendance.annualLeave,
+      clockIn: apiData.attendance?.clockIn ?? DEFAULT_NOTIFICATION_SETTINGS.attendance.clockIn,
+      late: apiData.attendance?.late ?? DEFAULT_NOTIFICATION_SETTINGS.attendance.late,
+      absent: apiData.attendance?.absent ?? DEFAULT_NOTIFICATION_SETTINGS.attendance.absent,
+    },
+    order: {
+      enabled: apiData.order?.enabled ?? DEFAULT_NOTIFICATION_SETTINGS.order.enabled,
+      salesOrder: apiData.order?.salesOrder ?? DEFAULT_NOTIFICATION_SETTINGS.order.salesOrder,
+      purchaseOrder: apiData.order?.purchaseOrder ?? DEFAULT_NOTIFICATION_SETTINGS.order.purchaseOrder,
+    },
+    approval: {
+      enabled: apiData.approval?.enabled ?? DEFAULT_NOTIFICATION_SETTINGS.approval.enabled,
+      approvalRequest: apiData.approval?.approvalRequest ?? DEFAULT_NOTIFICATION_SETTINGS.approval.approvalRequest,
+      draftApproved: apiData.approval?.draftApproved ?? DEFAULT_NOTIFICATION_SETTINGS.approval.draftApproved,
+      draftRejected: apiData.approval?.draftRejected ?? DEFAULT_NOTIFICATION_SETTINGS.approval.draftRejected,
+      draftCompleted: apiData.approval?.draftCompleted ?? DEFAULT_NOTIFICATION_SETTINGS.approval.draftCompleted,
+    },
+    production: {
+      enabled: apiData.production?.enabled ?? DEFAULT_NOTIFICATION_SETTINGS.production.enabled,
+      safetyStock: apiData.production?.safetyStock ?? DEFAULT_NOTIFICATION_SETTINGS.production.safetyStock,
+      productionComplete: apiData.production?.productionComplete ?? DEFAULT_NOTIFICATION_SETTINGS.production.productionComplete,
+    },
+  };
+}
+
+export function NotificationSettingsClient() {
+  const [settings, setSettings] = useState<NotificationSettings>(DEFAULT_NOTIFICATION_SETTINGS);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isSaving, setIsSaving] = useState(false);
+
+  // ===== 데이터 로드 (프록시 패턴) =====
+  useEffect(() => {
+    async function loadSettings() {
+      try {
+        const response = await fetch('/api/proxy/settings/notifications', {
+          method: 'GET',
+          headers: {
+            'Accept': 'application/json',
+          },
+        });
+
+        const result = await response.json();
+
+        if (result.success && result.data) {
+          setSettings(mergeWithDefaults(result.data));
+        }
+      } catch (error) {
+        console.error('[NotificationSettings] Load error:', error);
+        toast.error('알림 설정을 불러오는데 실패했습니다.');
+      } finally {
+        setIsLoading(false);
+      }
+    }
+
+    loadSettings();
+  }, []);
+
+  // ===== 공지 알림 핸들러 =====
+  const handleNoticeEnabledChange = useCallback((enabled: boolean) => {
+    setSettings(prev => ({
+      ...prev,
+      notice: {
+        ...prev.notice,
+        enabled,
+        ...(enabled ? {} : {
+          notice: { ...prev.notice.notice, enabled: false, email: false },
+          event: { ...prev.notice.event, enabled: false, email: false },
+        }),
+      },
+    }));
+  }, []);
+
+  const handleNoticeItemChange = useCallback((key: 'notice' | 'event', item: NotificationItem) => {
+    setSettings(prev => ({
+      ...prev,
+      notice: { ...prev.notice, [key]: item },
+    }));
+  }, []);
+
+  // ===== 일정 알림 핸들러 =====
+  const handleScheduleEnabledChange = useCallback((enabled: boolean) => {
+    setSettings(prev => ({
+      ...prev,
+      schedule: {
+        ...prev.schedule,
+        enabled,
+        ...(enabled ? {} : {
+          vatReport: { ...prev.schedule.vatReport, enabled: false, email: false },
+          incomeTaxReport: { ...prev.schedule.incomeTaxReport, enabled: false, email: false },
+        }),
+      },
+    }));
+  }, []);
+
+  const handleScheduleItemChange = useCallback((key: 'vatReport' | 'incomeTaxReport', item: NotificationItem) => {
+    setSettings(prev => ({
+      ...prev,
+      schedule: { ...prev.schedule, [key]: item },
+    }));
+  }, []);
+
+  // ===== 거래처 알림 핸들러 =====
+  const handleVendorEnabledChange = useCallback((enabled: boolean) => {
+    setSettings(prev => ({
+      ...prev,
+      vendor: {
+        ...prev.vendor,
+        enabled,
+        ...(enabled ? {} : {
+          newVendor: { ...prev.vendor.newVendor, enabled: false, email: false },
+          creditRating: { ...prev.vendor.creditRating, enabled: false, email: false },
+        }),
+      },
+    }));
+  }, []);
+
+  const handleVendorItemChange = useCallback((key: 'newVendor' | 'creditRating', item: NotificationItem) => {
+    setSettings(prev => ({
+      ...prev,
+      vendor: { ...prev.vendor, [key]: item },
+    }));
+  }, []);
+
+  // ===== 근태 알림 핸들러 =====
+  const handleAttendanceEnabledChange = useCallback((enabled: boolean) => {
+    setSettings(prev => ({
+      ...prev,
+      attendance: {
+        ...prev.attendance,
+        enabled,
+        ...(enabled ? {} : {
+          annualLeave: { ...prev.attendance.annualLeave, enabled: false, email: false },
+          clockIn: { ...prev.attendance.clockIn, enabled: false, email: false },
+          late: { ...prev.attendance.late, enabled: false, email: false },
+          absent: { ...prev.attendance.absent, enabled: false, email: false },
+        }),
+      },
+    }));
+  }, []);
+
+  const handleAttendanceItemChange = useCallback((
+    key: 'annualLeave' | 'clockIn' | 'late' | 'absent',
+    item: NotificationItem
+  ) => {
+    setSettings(prev => ({
+      ...prev,
+      attendance: { ...prev.attendance, [key]: item },
+    }));
+  }, []);
+
+  // ===== 수주/발주 알림 핸들러 =====
+  const handleOrderEnabledChange = useCallback((enabled: boolean) => {
+    setSettings(prev => ({
+      ...prev,
+      order: {
+        ...prev.order,
+        enabled,
+        ...(enabled ? {} : {
+          salesOrder: { ...prev.order.salesOrder, enabled: false, email: false },
+          purchaseOrder: { ...prev.order.purchaseOrder, enabled: false, email: false },
+        }),
+      },
+    }));
+  }, []);
+
+  const handleOrderItemChange = useCallback((key: 'salesOrder' | 'purchaseOrder', item: NotificationItem) => {
+    setSettings(prev => ({
+      ...prev,
+      order: { ...prev.order, [key]: item },
+    }));
+  }, []);
+
+  // ===== 전자결재 알림 핸들러 =====
+  const handleApprovalEnabledChange = useCallback((enabled: boolean) => {
+    setSettings(prev => ({
+      ...prev,
+      approval: {
+        ...prev.approval,
+        enabled,
+        ...(enabled ? {} : {
+          approvalRequest: { ...prev.approval.approvalRequest, enabled: false, email: false },
+          draftApproved: { ...prev.approval.draftApproved, enabled: false, email: false },
+          draftRejected: { ...prev.approval.draftRejected, enabled: false, email: false },
+          draftCompleted: { ...prev.approval.draftCompleted, enabled: false, email: false },
+        }),
+      },
+    }));
+  }, []);
+
+  const handleApprovalItemChange = useCallback((
+    key: 'approvalRequest' | 'draftApproved' | 'draftRejected' | 'draftCompleted',
+    item: NotificationItem
+  ) => {
+    setSettings(prev => ({
+      ...prev,
+      approval: { ...prev.approval, [key]: item },
+    }));
+  }, []);
+
+  // ===== 생산 알림 핸들러 =====
+  const handleProductionEnabledChange = useCallback((enabled: boolean) => {
+    setSettings(prev => ({
+      ...prev,
+      production: {
+        ...prev.production,
+        enabled,
+        ...(enabled ? {} : {
+          safetyStock: { ...prev.production.safetyStock, enabled: false, email: false },
+          productionComplete: { ...prev.production.productionComplete, enabled: false, email: false },
+        }),
+      },
+    }));
+  }, []);
+
+  const handleProductionItemChange = useCallback((
+    key: 'safetyStock' | 'productionComplete',
+    item: NotificationItem
+  ) => {
+    setSettings(prev => ({
+      ...prev,
+      production: { ...prev.production, [key]: item },
+    }));
+  }, []);
+
+  // ===== 저장 (프록시 패턴) =====
+  const handleSave = useCallback(async () => {
+    setIsSaving(true);
+    try {
+      const response = await fetch('/api/proxy/settings/notifications', {
+        method: 'PUT',
+        headers: {
+          'Accept': 'application/json',
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(settings),
+      });
+
+      const result = await response.json();
+
+      if (response.ok && result.success) {
+        toast.success('알림 설정이 저장되었습니다.');
+        if (result.data) {
+          setSettings(mergeWithDefaults(result.data));
+        }
+      } else {
+        toast.error(result.message || '저장에 실패했습니다.');
+      }
+    } catch (error) {
+      console.error('[NotificationSettings] Save error:', error);
+      toast.error('서버 오류가 발생했습니다.');
+    } finally {
+      setIsSaving(false);
+    }
+  }, [settings]);
+
+  // ===== 로딩 UI =====
+  if (isLoading) {
+    return (
+      <PageLayout>
+        <PageHeader
+          title="알림설정"
+          description="알림 설정을 관리합니다."
+          icon={Bell}
+        />
+        <ContentLoadingSpinner text="알림 설정을 불러오는 중..." />
+      </PageLayout>
+    );
+  }
+
+  return (
+    <PageLayout>
+      <PageHeader
+        title="알림설정"
+        description="알림 설정을 관리합니다."
+        icon={Bell}
+      />
+
+      <div className="space-y-4">
+        {/* 공지 알림 */}
+        <NotificationSection
+          title="공지 알림"
+          enabled={settings.notice.enabled}
+          onEnabledChange={handleNoticeEnabledChange}
+        >
+          <NotificationItemRow
+            label="공지사항 알림"
+            item={settings.notice.notice}
+            onChange={(item) => handleNoticeItemChange('notice', item)}
+            disabled={!settings.notice.enabled}
+          />
+          <NotificationItemRow
+            label="이벤트 알림"
+            item={settings.notice.event}
+            onChange={(item) => handleNoticeItemChange('event', item)}
+            disabled={!settings.notice.enabled}
+          />
+        </NotificationSection>
+
+        {/* 일정 알림 */}
+        <NotificationSection
+          title="일정 알림"
+          enabled={settings.schedule.enabled}
+          onEnabledChange={handleScheduleEnabledChange}
+        >
+          <NotificationItemRow
+            label="부가세 신고 알림"
+            item={settings.schedule.vatReport}
+            onChange={(item) => handleScheduleItemChange('vatReport', item)}
+            disabled={!settings.schedule.enabled}
+          />
+          <NotificationItemRow
+            label="종합소득세 신고 알림"
+            item={settings.schedule.incomeTaxReport}
+            onChange={(item) => handleScheduleItemChange('incomeTaxReport', item)}
+            disabled={!settings.schedule.enabled}
+          />
+        </NotificationSection>
+
+        {/* 거래처 알림 */}
+        <NotificationSection
+          title="거래처 알림"
+          enabled={settings.vendor.enabled}
+          onEnabledChange={handleVendorEnabledChange}
+        >
+          <NotificationItemRow
+            label="신규 업체 등록 알림"
+            item={settings.vendor.newVendor}
+            onChange={(item) => handleVendorItemChange('newVendor', item)}
+            disabled={!settings.vendor.enabled}
+          />
+          <NotificationItemRow
+            label="신용등급 등록 알림"
+            item={settings.vendor.creditRating}
+            onChange={(item) => handleVendorItemChange('creditRating', item)}
+            disabled={!settings.vendor.enabled}
+          />
+        </NotificationSection>
+
+        {/* 근태 알림 */}
+        <NotificationSection
+          title="근태 알림"
+          enabled={settings.attendance.enabled}
+          onEnabledChange={handleAttendanceEnabledChange}
+        >
+          <NotificationItemRow
+            label="연차 알림"
+            item={settings.attendance.annualLeave}
+            onChange={(item) => handleAttendanceItemChange('annualLeave', item)}
+            disabled={!settings.attendance.enabled}
+          />
+          <NotificationItemRow
+            label="출근 알림"
+            item={settings.attendance.clockIn}
+            onChange={(item) => handleAttendanceItemChange('clockIn', item)}
+            disabled={!settings.attendance.enabled}
+          />
+          <NotificationItemRow
+            label="지각 알림"
+            item={settings.attendance.late}
+            onChange={(item) => handleAttendanceItemChange('late', item)}
+            disabled={!settings.attendance.enabled}
+          />
+          <NotificationItemRow
+            label="결근 알림"
+            item={settings.attendance.absent}
+            onChange={(item) => handleAttendanceItemChange('absent', item)}
+            disabled={!settings.attendance.enabled}
+          />
+        </NotificationSection>
+
+        {/* 수주/발주 알림 */}
+        <NotificationSection
+          title="수주/발주 알림"
+          enabled={settings.order.enabled}
+          onEnabledChange={handleOrderEnabledChange}
+        >
+          <NotificationItemRow
+            label="수주 등록 알림"
+            item={settings.order.salesOrder}
+            onChange={(item) => handleOrderItemChange('salesOrder', item)}
+            disabled={!settings.order.enabled}
+          />
+          <NotificationItemRow
+            label="발주 알림"
+            item={settings.order.purchaseOrder}
+            onChange={(item) => handleOrderItemChange('purchaseOrder', item)}
+            disabled={!settings.order.enabled}
+          />
+        </NotificationSection>
+
+        {/* 전자결재 알림 */}
+        <NotificationSection
+          title="전자결재 알림"
+          enabled={settings.approval.enabled}
+          onEnabledChange={handleApprovalEnabledChange}
+        >
+          <NotificationItemRow
+            label="결재요청 알림"
+            item={settings.approval.approvalRequest}
+            onChange={(item) => handleApprovalItemChange('approvalRequest', item)}
+            disabled={!settings.approval.enabled}
+          />
+          <NotificationItemRow
+            label="기안 > 승인 알림"
+            item={settings.approval.draftApproved}
+            onChange={(item) => handleApprovalItemChange('draftApproved', item)}
+            disabled={!settings.approval.enabled}
+          />
+          <NotificationItemRow
+            label="기안 > 반려 알림"
+            item={settings.approval.draftRejected}
+            onChange={(item) => handleApprovalItemChange('draftRejected', item)}
+            disabled={!settings.approval.enabled}
+          />
+          <NotificationItemRow
+            label="기안 > 완료 알림"
+            item={settings.approval.draftCompleted}
+            onChange={(item) => handleApprovalItemChange('draftCompleted', item)}
+            disabled={!settings.approval.enabled}
+          />
+        </NotificationSection>
+
+        {/* 생산 알림 */}
+        <NotificationSection
+          title="생산 알림"
+          enabled={settings.production.enabled}
+          onEnabledChange={handleProductionEnabledChange}
+        >
+          <NotificationItemRow
+            label="안전재고 알림"
+            item={settings.production.safetyStock}
+            onChange={(item) => handleProductionItemChange('safetyStock', item)}
+            disabled={!settings.production.enabled}
+          />
+          <NotificationItemRow
+            label="생산완료 알림"
+            item={settings.production.productionComplete}
+            onChange={(item) => handleProductionItemChange('productionComplete', item)}
+            disabled={!settings.production.enabled}
+          />
+        </NotificationSection>
+
+        {/* 저장 버튼 */}
+        <div className="flex justify-end pt-4">
+          <Button onClick={handleSave} size="lg" disabled={isSaving}>
+            <Save className="h-4 w-4 mr-2" />
+            {isSaving ? '저장 중...' : '저장'}
+          </Button>
+        </div>
+      </div>
+    </PageLayout>
+  );
+}

src/components/settings/NotificationSettings/actions.ts

@@ -0,0 +1,117 @@
+'use server';
+
+import { cookies } from 'next/headers';
+import type { NotificationSettings } from './types';
+import { DEFAULT_NOTIFICATION_SETTINGS } from './types';
+
+// ===== API 헤더 생성 =====
+async function getApiHeaders(): Promise<HeadersInit> {
+  const cookieStore = await cookies();
+  const token = cookieStore.get('access_token')?.value;
+
+  return {
+    'Accept': 'application/json',
+    'Content-Type': 'application/json',
+    'Authorization': token ? `Bearer ${token}` : '',
+    'X-API-KEY': process.env.API_KEY || '',
+  };
+}
+
+// ===== 알림 설정 조회 =====
+export async function getNotificationSettings(): Promise<{
+  success: boolean;
+  data: NotificationSettings;
+  error?: string;
+}> {
+  try {
+    const headers = await getApiHeaders();
+
+    const response = await fetch(
+      `${process.env.NEXT_PUBLIC_API_URL}/api/v1/settings/notifications`,
+      {
+        method: 'GET',
+        headers,
+        cache: 'no-store',
+      }
+    );
+
+    if (!response.ok) {
+      console.warn('[NotificationActions] GET settings error:', response.status);
+      return {
+        success: true,
+        data: DEFAULT_NOTIFICATION_SETTINGS,
+      };
+    }
+
+    const result = await response.json();
+
+    if (!result.success || !result.data) {
+      return {
+        success: true,
+        data: DEFAULT_NOTIFICATION_SETTINGS,
+      };
+    }
+
+    // API → Frontend 변환
+    return {
+      success: true,
+      data: transformApiToFrontend(result.data),
+    };
+  } catch (error) {
+    console.error('[NotificationActions] getNotificationSettings error:', error);
+    return {
+      success: true,
+      data: DEFAULT_NOTIFICATION_SETTINGS,
+    };
+  }
+}
+
+// ===== 알림 설정 저장 =====
+export async function saveNotificationSettings(
+  settings: NotificationSettings
+): Promise<{ success: boolean; error?: string }> {
+  try {
+    const headers = await getApiHeaders();
+    const apiData = transformFrontendToApi(settings);
+
+    const response = await fetch(
+      `${process.env.NEXT_PUBLIC_API_URL}/api/v1/settings/notifications`,
+      {
+        method: 'PUT',
+        headers,
+        body: JSON.stringify(apiData),
+      }
+    );
+
+    const result = await response.json();
+
+    if (!response.ok || !result.success) {
+      return {
+        success: false,
+        error: result.message || '알림 설정 저장에 실패했습니다.',
+      };
+    }
+
+    return { success: true };
+  } catch (error) {
+    console.error('[NotificationActions] saveNotificationSettings error:', error);
+    return {
+      success: false,
+      error: '서버 오류가 발생했습니다.',
+    };
+  }
+}
+
+// ===== API → Frontend 변환 =====
+function transformApiToFrontend(apiData: Record<string, unknown>): NotificationSettings {
+  // API 응답이 이미 프론트엔드 형식과 동일하다고 가정
+  // 필요시 snake_case → camelCase 변환
+  return apiData as NotificationSettings;
+}
+
+// ===== Frontend → API 변환 =====
+function transformFrontendToApi(settings: NotificationSettings): Record<string, unknown> {
+  // 프론트엔드 형식이 이미 API 형식과 동일하다고 가정
+  // 필요시 camelCase → snake_case 변환
+  return settings as Record<string, unknown>;
+}

src/components/settings/NotificationSettings/index.ts

@@ -0,0 +1,2 @@
+export { NotificationSettingsClient } from './NotificationSettingsClient';
+export * from './types';

src/components/settings/NotificationSettings/index.tsx

@@ -4,10 +4,6 @@
  * 알림설정 페이지
  *
  * 각 알림 유형별로 ON/OFF 토글과 이메일 알림 체크박스를 제공합니다.
- *
- * TODO: API 연동 시 작업 사항
- * - GET /api/settings/notifications: 설정값 조회
- * - PUT /api/settings/notifications: 설정값 저장
  */
 
 import { useState } from 'react';
@@ -20,7 +16,7 @@ import { Checkbox } from '@/components/ui/checkbox';
 import { Switch } from '@/components/ui/switch';
 import { toast } from 'sonner';
 import type { NotificationSettings, NotificationItem } from './types';
-import { DEFAULT_NOTIFICATION_SETTINGS } from './types';
+import { saveNotificationSettings } from './actions';
 
 // 알림 항목 컴포넌트
 interface NotificationItemRowProps {
@@ -89,8 +85,12 @@ function NotificationSection({ title, enabled, onEnabledChange, children }: Noti
   );
 }
 
-export function NotificationSettingsManagement() {
-  const [settings, setSettings] = useState<NotificationSettings>(DEFAULT_NOTIFICATION_SETTINGS);
+interface NotificationSettingsManagementProps {
+  initialData: NotificationSettings;
+}
+
+export function NotificationSettingsManagement({ initialData }: NotificationSettingsManagementProps) {
+  const [settings, setSettings] = useState<NotificationSettings>(initialData);
 
   // 공지 알림 핸들러
   const handleNoticeEnabledChange = (enabled: boolean) => {
@@ -260,10 +260,13 @@ export function NotificationSettingsManagement() {
   };
 
   // 저장
-  const handleSave = () => {
-    // TODO: API 호출로 설정 저장
-    console.log('저장할 알림 설정:', settings);
-    toast.success('알림 설정이 저장되었습니다.');
+  const handleSave = async () => {
+    const result = await saveNotificationSettings(settings);
+    if (result.success) {
+      toast.success('알림 설정이 저장되었습니다.');
+    } else {
+      toast.error(result.error || '알림 설정 저장에 실패했습니다.');
+    }
   };
 
   return (