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

feat: fetchWrapper 마이그레이션 및 토큰 리프레시 캐싱 구현

Browse Source 
- 40+ actions.ts 파일을 fetchWrapper 패턴으로 마이그레이션
- 토큰 리프레시 캐싱 로직 추가 (refresh-token.ts)
- ApiErrorContext 추가로 전역 에러 처리 개선
- HR EmployeeForm 컴포넌트 개선
- 참조함(ReferenceBox) 기능 수정
- juil 테스트 URL 페이지 추가
- claudedocs 문서 업데이트

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
byeongcheolryu
2025-12-30 17:00:18 +09:00
parent 0e5307f7a3
commit d38b1242d7
82 changed files with 7434 additions and 4775 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
src/components/approval/ApprovalBox/actions.ts
View File

@@ -10,7 +10,7 @@
'use server';
import { cookies } from 'next/headers';
import { serverFetch } from '@/lib/api/fetch-wrapper';
import type { ApprovalRecord, ApprovalType, ApprovalStatus } from './types';
// ============================================
@@ -81,21 +81,6 @@ interface InboxStepApiData {
// 헬퍼 함수
// ============================================
/**
* 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 || '',
};
}
/**
* API 상태 → 프론트엔드 상태 변환
*/
@@ -108,6 +93,22 @@ function mapApiStatus(apiStatus: string): ApprovalStatus {
return statusMap[apiStatus] || 'pending';
}
/**
* 프론트엔드 탭 상태 → 백엔드 API 상태 변환
* 백엔드 inbox API가 기대하는 값:
* - requested: 결재 요청 (현재 내 차례) = 미결재
* - completed: 내가 처리 완료 = 결재완료
* - rejected: 내가 반려한 문서 = 결재반려
*/
function mapTabToApiStatus(tabStatus: string): string | undefined {
const statusMap: Record<string, string> = {
'pending': 'requested', // 미결재 → 결재 요청
'approved': 'completed', // 결재완료 → 처리 완료
'rejected': 'rejected', // 반려 (동일)
};
return statusMap[tabStatus];
}
/**
* 양식 카테고리 → 결재 유형 변환
*/
@@ -175,16 +176,19 @@ export async function getInbox(params?: {
approval_type?: string;
sort_by?: string;
sort_dir?: 'asc' | 'desc';
}): Promise<{ data: ApprovalRecord[]; total: number; lastPage: number }> {
}): Promise<{ data: ApprovalRecord[]; total: number; lastPage: number; __authError?: boolean }> {
try {
const headers = await getApiHeaders();
const searchParams = new URLSearchParams();
if (params?.page) searchParams.set('page', String(params.page));
if (params?.per_page) searchParams.set('per_page', String(params.per_page));
if (params?.search) searchParams.set('search', params.search);
if (params?.status && params.status !== 'all') {
searchParams.set('status', params.status);
// 프론트엔드 탭 상태를 백엔드 API 상태로 변환
const apiStatus = mapTabToApiStatus(params.status);
if (apiStatus) {
searchParams.set('status', apiStatus);
}
}
if (params?.approval_type && params.approval_type !== 'all') {
searchParams.set('approval_type', params.approval_type);
@@ -194,20 +198,20 @@ export async function getInbox(params?: {
const url = `${process.env.NEXT_PUBLIC_API_URL}/api/v1/approvals/inbox?${searchParams.toString()}`;
const response = await fetch(url, {
method: 'GET',
headers,
cache: 'no-store',
});
const { response, error } = await serverFetch(url, { method: 'GET' });
if (!response.ok) {
console.error('[ApprovalBoxActions] GET inbox error:', response.status);
if (error?.__authError) {
return { data: [], total: 0, lastPage: 1, __authError: true };
}
if (!response) {
console.error('[ApprovalBoxActions] GET inbox error:', error?.message);
return { data: [], total: 0, lastPage: 1 };
}
const result: ApiResponse<PaginatedResponse<InboxApiData>> = await response.json();
if (!result.success || !result.data?.data) {
if (!response.ok || !result.success || !result.data?.data) {
console.warn('[ApprovalBoxActions] No data in response');
return { data: [], total: 0, lastPage: 1 };
}
@@ -228,25 +232,19 @@ export async function getInbox(params?: {
*/
export async function getInboxSummary(): Promise<InboxSummary | null> {
try {
const headers = await getApiHeaders();
const response = await fetch(
const { response, error } = await serverFetch(
`${process.env.NEXT_PUBLIC_API_URL}/api/v1/approvals/inbox/summary`,
{
method: 'GET',
headers,
cache: 'no-store',
}
{ method: 'GET' }
);
if (!response.ok) {
console.error('[ApprovalBoxActions] GET inbox/summary error:', response.status);
if (error?.__authError || !response) {
console.error('[ApprovalBoxActions] GET inbox/summary error:', error?.message);
return null;
}
const result: ApiResponse<InboxSummary> = await response.json();
if (!result.success || !result.data) {
if (!response.ok || !result.success || !result.data) {
return null;
}
@@ -260,19 +258,24 @@ export async function getInboxSummary(): Promise<InboxSummary | null> {
/**
* 승인 처리
*/
export async function approveDocument(id: string, comment?: string): Promise<{ success: boolean; error?: string }> {
export async function approveDocument(id: string, comment?: string): Promise<{ success: boolean; error?: string; __authError?: boolean }> {
try {
const headers = await getApiHeaders();
const response = await fetch(
const { response, error } = await serverFetch(
`${process.env.NEXT_PUBLIC_API_URL}/api/v1/approvals/${id}/approve`,
{
method: 'POST',
headers,
body: JSON.stringify({ comment: comment || '' }),
}
);
if (error?.__authError) {
return { success: false, __authError: true };
}
if (!response) {
return { success: false, error: error?.message || '승인 처리에 실패했습니다.' };
}
const result = await response.json();
if (!response.ok || !result.success) {
@@ -295,7 +298,7 @@ export async function approveDocument(id: string, comment?: string): Promise<{ s
/**
* 반려 처리
*/
export async function rejectDocument(id: string, comment: string): Promise<{ success: boolean; error?: string }> {
export async function rejectDocument(id: string, comment: string): Promise<{ success: boolean; error?: string; __authError?: boolean }> {
try {
if (!comment?.trim()) {
return {
@@ -304,17 +307,22 @@ export async function rejectDocument(id: string, comment: string): Promise<{ suc
};
}
const headers = await getApiHeaders();
const response = await fetch(
const { response, error } = await serverFetch(
`${process.env.NEXT_PUBLIC_API_URL}/api/v1/approvals/${id}/reject`,
{
method: 'POST',
headers,
body: JSON.stringify({ comment }),
}
);
if (error?.__authError) {
return { success: false, __authError: true };
}
if (!response) {
return { success: false, error: error?.message || '반려 처리에 실패했습니다.' };
}
const result = await response.json();
if (!response.ok || !result.success) {

17
src/components/approval/DocumentCreate/ApprovalLineSection.tsx
View File

@@ -68,24 +68,23 @@ export function ApprovalLineSection({ data, onChange }: ApprovalLineSectionProps
</div>
) : (
data.map((person, index) => (
<div key={person.id} className="flex items-center gap-2">
<div key={`${person.id}-${index}`} className="flex items-center gap-2">
<span className="w-8 text-center text-sm text-gray-500">{index + 1}</span>
<Select
value={person.id.startsWith('temp-') ? '' : person.id}
value={person.id.startsWith('temp-') ? undefined : person.id}
onValueChange={(value) => handleChange(index, value)}
>
<SelectTrigger className="flex-1">
{/* 이미 선택된 값이 있으면 직접 표시, 없으면 placeholder */}
{person.name && !person.id.startsWith('temp-') ? (
<span>{person.department} / {person.position} / {person.name}</span>
) : (
<SelectValue placeholder="부서명 / 직책명 / 이름 ▼" />
)}
<SelectValue placeholder="부서명 / 직책명 / 이름 ▼">
{person.name && !person.id.startsWith('temp-')
? `${person.department || ''} / ${person.position || ''} / ${person.name}`
: null}
</SelectValue>
</SelectTrigger>
<SelectContent>
{employees.map((employee) => (
<SelectItem key={employee.id} value={employee.id}>
{employee.department} / {employee.position} / {employee.name}
{employee.department || ''} / {employee.position || ''} / {employee.name}
</SelectItem>
))}
</SelectContent>

17
src/components/approval/DocumentCreate/ReferenceSection.tsx
View File

@@ -68,24 +68,23 @@ export function ReferenceSection({ data, onChange }: ReferenceSectionProps) {
</div>
) : (
data.map((person, index) => (
<div key={person.id} className="flex items-center gap-2">
<div key={`${person.id}-${index}`} className="flex items-center gap-2">
<span className="w-8 text-center text-sm text-gray-500">{index + 1}</span>
<Select
value={person.id.startsWith('temp-') ? '' : person.id}
value={person.id.startsWith('temp-') ? undefined : person.id}
onValueChange={(value) => handleChange(index, value)}
>
<SelectTrigger className="flex-1">
{/* 이미 선택된 값이 있으면 직접 표시, 없으면 placeholder */}
{person.name && !person.id.startsWith('temp-') ? (
<span>{person.department} / {person.position} / {person.name}</span>
) : (
<SelectValue placeholder="부서명 / 직책명 / 이름 ▼" />
)}
<SelectValue placeholder="부서명 / 직책명 / 이름 ▼">
{person.name && !person.id.startsWith('temp-')
? `${person.department || ''} / ${person.position || ''} / ${person.name}`
: null}
</SelectValue>
</SelectTrigger>
<SelectContent>
{employees.map((employee) => (
<SelectItem key={employee.id} value={employee.id}>
{employee.department} / {employee.position} / {employee.name}
{employee.department || ''} / {employee.position || ''} / {employee.name}
</SelectItem>
))}
</SelectContent>

100
src/components/approval/DocumentCreate/actions.ts
View File

@@ -11,6 +11,7 @@
'use server';
import { cookies } from 'next/headers';
import { serverFetch } from '@/lib/api/fetch-wrapper';
import type {
ExpenseEstimateItem,
ApprovalPerson,
@@ -74,21 +75,6 @@ interface ApprovalCreateResponse {
// 헬퍼 함수
// ============================================
/**
* 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 || '',
};
}
/**
* 비용견적서 API 데이터 → 프론트엔드 데이터 변환
*/
@@ -141,6 +127,8 @@ function transformEmployee(employee: EmployeeApiData): ApprovalPerson {
* 파일 업로드
* @param files 업로드할 파일 배열
* @returns 업로드된 파일 정보 배열
*
* NOTE: 파일 업로드는 multipart/form-data가 필요하므로 serverFetch 대신 직접 fetch 사용
*/
export async function uploadFiles(files: File[]): Promise<{
success: boolean;
@@ -210,7 +198,6 @@ export async function getExpenseEstimateItems(yearMonth?: string): Promise<{
finalDifference: number;
} | null> {
try {
const headers = await getApiHeaders();
const searchParams = new URLSearchParams();
if (yearMonth) {
@@ -219,12 +206,15 @@ export async function getExpenseEstimateItems(yearMonth?: string): Promise<{
const url = `${process.env.NEXT_PUBLIC_API_URL}/api/v1/reports/expense-estimate?${searchParams.toString()}`;
const response = await fetch(url, {
const { response, error } = await serverFetch(url, {
method: 'GET',
headers,
cache: 'no-store',
});
if (error || !response) {
console.error('[DocumentCreateActions] GET expense-estimate error:', error?.message);
return null;
}
if (!response.ok) {
console.error('[DocumentCreateActions] GET expense-estimate error:', response.status);
return null;
@@ -254,7 +244,6 @@ export async function getExpenseEstimateItems(yearMonth?: string): Promise<{
*/
export async function getEmployees(search?: string): Promise<ApprovalPerson[]> {
try {
const headers = await getApiHeaders();
const searchParams = new URLSearchParams();
searchParams.set('per_page', '100');
if (search) {
@@ -263,12 +252,15 @@ export async function getEmployees(search?: string): Promise<ApprovalPerson[]> {
const url = `${process.env.NEXT_PUBLIC_API_URL}/api/v1/employees?${searchParams.toString()}`;
const response = await fetch(url, {
const { response, error } = await serverFetch(url, {
method: 'GET',
headers,
cache: 'no-store',
});
if (error || !response) {
console.error('[DocumentCreateActions] GET employees error:', error?.message);
return [];
}
if (!response.ok) {
console.error('[DocumentCreateActions] GET employees error:', response.status);
return [];
@@ -296,8 +288,6 @@ export async function createApproval(formData: DocumentFormData): Promise<{
error?: string;
}> {
try {
const headers = await getApiHeaders();
// 새 첨부파일 업로드
const newFiles = formData.proposalData?.attachments
|| formData.expenseReportData?.attachments
@@ -332,15 +322,21 @@ export async function createApproval(formData: DocumentFormData): Promise<{
content: getDocumentContent(formData, uploadedFiles),
};
const response = await fetch(
const { response, error } = await serverFetch(
`${process.env.NEXT_PUBLIC_API_URL}/api/v1/approvals`,
{
method: 'POST',
headers,
body: JSON.stringify(requestBody),
}
);
if (error || !response) {
return {
success: false,
error: error?.message || '문서 저장에 실패했습니다.',
};
}
const result: ApiResponse<ApprovalCreateResponse> = await response.json();
if (!response.ok || !result.success) {
@@ -374,17 +370,21 @@ export async function submitApproval(id: number): Promise<{
error?: string;
}> {
try {
const headers = await getApiHeaders();
const response = await fetch(
const { response, error } = await serverFetch(
`${process.env.NEXT_PUBLIC_API_URL}/api/v1/approvals/${id}/submit`,
{
method: 'POST',
headers,
body: JSON.stringify({}),
}
);
if (error || !response) {
return {
success: false,
error: error?.message || '문서 상신에 실패했습니다.',
};
}
const result = await response.json();
if (!response.ok || !result.success) {
@@ -450,17 +450,17 @@ export async function getApprovalById(id: number): Promise<{
error?: string;
}> {
try {
const headers = await getApiHeaders();
const response = await fetch(
const { response, error } = await serverFetch(
`${process.env.NEXT_PUBLIC_API_URL}/api/v1/approvals/${id}`,
{
method: 'GET',
headers,
cache: 'no-store',
}
);
if (error || !response) {
return { success: false, error: error?.message || '문서 조회에 실패했습니다.' };
}
if (!response.ok) {
if (response.status === 404) {
return { success: false, error: '문서를 찾을 수 없습니다.' };
@@ -476,9 +476,9 @@ export async function getApprovalById(id: number): Promise<{
// API 응답을 프론트엔드 형식으로 변환
const apiData = result.data;
const formData = transformApiToFormData(apiData);
const formDataResult = transformApiToFormData(apiData);
return { success: true, data: formData };
return { success: true, data: formDataResult };
} catch (error) {
console.error('[DocumentCreateActions] getApprovalById error:', error);
return { success: false, error: '서버 오류가 발생했습니다.' };
@@ -494,8 +494,6 @@ export async function updateApproval(id: number, formData: DocumentFormData): Pr
error?: string;
}> {
try {
const headers = await getApiHeaders();
// 새 첨부파일 업로드
const newFiles = formData.proposalData?.attachments
|| formData.expenseReportData?.attachments
@@ -528,15 +526,21 @@ export async function updateApproval(id: number, formData: DocumentFormData): Pr
content: getDocumentContent(formData, uploadedFiles),
};
const response = await fetch(
const { response, error } = await serverFetch(
`${process.env.NEXT_PUBLIC_API_URL}/api/v1/approvals/${id}`,
{
method: 'PATCH',
headers,
body: JSON.stringify(requestBody),
}
);
if (error || !response) {
return {
success: false,
error: error?.message || '문서 수정에 실패했습니다.',
};
}
const result = await response.json();
if (!response.ok || !result.success) {
@@ -601,16 +605,20 @@ export async function deleteApproval(id: number): Promise<{
error?: string;
}> {
try {
const headers = await getApiHeaders();
const response = await fetch(
const { response, error } = await serverFetch(
`${process.env.NEXT_PUBLIC_API_URL}/api/v1/approvals/${id}`,
{
method: 'DELETE',
headers,
}
);
if (error || !response) {
return {
success: false,
error: error?.message || '문서 삭제에 실패했습니다.',
};
}
const result = await response.json();
if (!response.ok || !result.success) {

122
src/components/approval/DraftBox/actions.ts
View File

@@ -12,7 +12,7 @@
'use server';
import { cookies } from 'next/headers';
import { serverFetch } from '@/lib/api/fetch-wrapper';
import type { DraftRecord, DocumentStatus, Approver } from './types';
// ============================================
@@ -85,21 +85,6 @@ interface ApprovalStepApiData {
// 헬퍼 함수
// ============================================
/**
* 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 || '',
};
}
/**
* API 상태 → 프론트엔드 상태 변환
*/
@@ -193,9 +178,8 @@ export async function getDrafts(params?: {
status?: string;
sort_by?: string;
sort_dir?: 'asc' | 'desc';
}): Promise<{ data: DraftRecord[]; total: number; lastPage: number }> {
}): Promise<{ data: DraftRecord[]; total: number; lastPage: number; __authError?: boolean }> {
try {
const headers = await getApiHeaders();
const searchParams = new URLSearchParams();
if (params?.page) searchParams.set('page', String(params.page));
@@ -217,27 +201,20 @@ export async function getDrafts(params?: {
const url = `${process.env.NEXT_PUBLIC_API_URL}/api/v1/approvals/drafts?${searchParams.toString()}`;
console.log('[DraftBoxActions] Fetching:', url);
console.log('[DraftBoxActions] Headers:', JSON.stringify(headers, null, 2));
const { response, error } = await serverFetch(url, { method: 'GET' });
const response = await fetch(url, {
method: 'GET',
headers,
cache: 'no-store',
});
if (error?.__authError) {
return { data: [], total: 0, lastPage: 1, __authError: true };
}
console.log('[DraftBoxActions] Response status:', response.status);
if (!response.ok) {
const errorText = await response.text();
console.error('[DraftBoxActions] GET drafts error:', response.status, errorText);
if (!response) {
console.error('[DraftBoxActions] GET drafts error:', error?.message);
return { data: [], total: 0, lastPage: 1 };
}
const result: ApiResponse<PaginatedResponse<ApprovalApiData>> = await response.json();
console.log('[DraftBoxActions] Result:', JSON.stringify(result, null, 2).slice(0, 500));
if (!result.success || !result.data?.data) {
if (!response.ok || !result.success || !result.data?.data) {
console.warn('[DraftBoxActions] No data in response');
return { data: [], total: 0, lastPage: 1 };
}
@@ -258,25 +235,19 @@ export async function getDrafts(params?: {
*/
export async function getDraftsSummary(): Promise<DraftsSummary | null> {
try {
const headers = await getApiHeaders();
const response = await fetch(
const { response, error } = await serverFetch(
`${process.env.NEXT_PUBLIC_API_URL}/api/v1/approvals/drafts/summary`,
{
method: 'GET',
headers,
cache: 'no-store',
}
{ method: 'GET' }
);
if (!response.ok) {
console.error('[DraftBoxActions] GET summary error:', response.status);
if (error?.__authError || !response) {
console.error('[DraftBoxActions] GET summary error:', error?.message);
return null;
}
const result: ApiResponse<DraftsSummary> = await response.json();
if (!result.success || !result.data) {
if (!response.ok || !result.success || !result.data) {
return null;
}
@@ -292,25 +263,19 @@ export async function getDraftsSummary(): Promise<DraftsSummary | null> {
*/
export async function getDraftById(id: string): Promise<DraftRecord | null> {
try {
const headers = await getApiHeaders();
const response = await fetch(
const { response, error } = await serverFetch(
`${process.env.NEXT_PUBLIC_API_URL}/api/v1/approvals/${id}`,
{
method: 'GET',
headers,
cache: 'no-store',
}
{ method: 'GET' }
);
if (!response.ok) {
console.error('[DraftBoxActions] GET draft error:', response.status);
if (error?.__authError || !response) {
console.error('[DraftBoxActions] GET draft error:', error?.message);
return null;
}
const result: ApiResponse<ApprovalApiData> = await response.json();
if (!result.success || !result.data) {
if (!response.ok || !result.success || !result.data) {
return null;
}
@@ -324,18 +289,21 @@ export async function getDraftById(id: string): Promise<DraftRecord | null> {
/**
* 결재 문서 삭제 (임시저장 상태만)
*/
export async function deleteDraft(id: string): Promise<{ success: boolean; error?: string }> {
export async function deleteDraft(id: string): Promise<{ success: boolean; error?: string; __authError?: boolean }> {
try {
const headers = await getApiHeaders();
const response = await fetch(
const { response, error } = await serverFetch(
`${process.env.NEXT_PUBLIC_API_URL}/api/v1/approvals/${id}`,
{
method: 'DELETE',
headers,
}
{ method: 'DELETE' }
);
if (error?.__authError) {
return { success: false, __authError: true };
}
if (!response) {
return { success: false, error: error?.message || '결재 문서 삭제에 실패했습니다.' };
}
const result = await response.json();
if (!response.ok || !result.success) {
@@ -382,19 +350,24 @@ export async function deleteDrafts(ids: string[]): Promise<{ success: boolean; f
/**
* 결재 상신
*/
export async function submitDraft(id: string): Promise<{ success: boolean; error?: string }> {
export async function submitDraft(id: string): Promise<{ success: boolean; error?: string; __authError?: boolean }> {
try {
const headers = await getApiHeaders();
const response = await fetch(
const { response, error } = await serverFetch(
`${process.env.NEXT_PUBLIC_API_URL}/api/v1/approvals/${id}/submit`,
{
method: 'POST',
headers,
body: JSON.stringify({}),
}
);
if (error?.__authError) {
return { success: false, __authError: true };
}
if (!response) {
return { success: false, error: error?.message || '결재 상신에 실패했습니다.' };
}
const result = await response.json();
if (!response.ok || !result.success) {
@@ -441,19 +414,24 @@ export async function submitDrafts(ids: string[]): Promise<{ success: boolean; f
/**
* 결재 회수 (기안자만)
*/
export async function cancelDraft(id: string): Promise<{ success: boolean; error?: string }> {
export async function cancelDraft(id: string): Promise<{ success: boolean; error?: string; __authError?: boolean }> {
try {
const headers = await getApiHeaders();
const response = await fetch(
const { response, error } = await serverFetch(
`${process.env.NEXT_PUBLIC_API_URL}/api/v1/approvals/${id}/cancel`,
{
method: 'POST',
headers,
body: JSON.stringify({}),
}
);
if (error?.__authError) {
return { success: false, __authError: true };
}
if (!response) {
return { success: false, error: error?.message || '결재 회수에 실패했습니다.' };
}
const result = await response.json();
if (!response.ok || !result.success) {

74
src/components/approval/ReferenceBox/actions.ts
View File

@@ -9,8 +9,8 @@
'use server';
import { cookies } from 'next/headers';
import type { ReferenceRecord, ApprovalType, DocumentStatus, ReadStatus } from './types';
import { serverFetch } from '@/lib/api/fetch-wrapper';
import type { ReferenceRecord, ApprovalType, DocumentStatus } from './types';
// ============================================
// API 응답 타입 정의
@@ -72,21 +72,6 @@ interface ReferenceStepApiData {
// 헬퍼 함수
// ============================================
/**
* 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 || '',
};
}
/**
* API 상태 → 프론트엔드 상태 변환
*/
@@ -156,7 +141,6 @@ export async function getReferences(params?: {
sort_dir?: 'asc' | 'desc';
}): Promise<{ data: ReferenceRecord[]; total: number; lastPage: number }> {
try {
const headers = await getApiHeaders();
const searchParams = new URLSearchParams();
if (params?.page) searchParams.set('page', String(params.page));
@@ -173,12 +157,16 @@ export async function getReferences(params?: {
const url = `${process.env.NEXT_PUBLIC_API_URL}/api/v1/approvals/reference?${searchParams.toString()}`;
const response = await fetch(url, {
const { response, error } = await serverFetch(url, {
method: 'GET',
headers,
cache: 'no-store',
});
// serverFetch handles 401 with redirect, so we just check for other errors
if (error || !response) {
console.error('[ReferenceBoxActions] GET reference error:', error?.message);
return { data: [], total: 0, lastPage: 1 };
}
if (!response.ok) {
console.error('[ReferenceBoxActions] GET reference error:', response.status);
return { data: [], total: 0, lastPage: 1 };
@@ -228,16 +216,20 @@ export async function getReferenceSummary(): Promise<{ all: number; read: number
*/
export async function markAsRead(id: string): Promise<{ success: boolean; error?: string }> {
try {
const headers = await getApiHeaders();
const url = `${process.env.NEXT_PUBLIC_API_URL}/api/v1/approvals/${id}/read`;
const response = await fetch(
`${process.env.NEXT_PUBLIC_API_URL}/api/v1/approvals/${id}/read`,
{
method: 'POST',
headers,
body: JSON.stringify({}),
}
);
const { response, error } = await serverFetch(url, {
method: 'POST',
body: JSON.stringify({}),
});
// serverFetch handles 401 with redirect
if (error || !response) {
return {
success: false,
error: error?.message || '열람 처리에 실패했습니다.',
};
}
const result = await response.json();
@@ -263,16 +255,20 @@ export async function markAsRead(id: string): Promise<{ success: boolean; error?
*/
export async function markAsUnread(id: string): Promise<{ success: boolean; error?: string }> {
try {
const headers = await getApiHeaders();
const url = `${process.env.NEXT_PUBLIC_API_URL}/api/v1/approvals/${id}/unread`;
const response = await fetch(
`${process.env.NEXT_PUBLIC_API_URL}/api/v1/approvals/${id}/unread`,
{
method: 'POST',
headers,
body: JSON.stringify({}),
}
);
const { response, error } = await serverFetch(url, {
method: 'POST',
body: JSON.stringify({}),
});
// serverFetch handles 401 with redirect
if (error || !response) {
return {
success: false,
error: error?.message || '미열람 처리에 실패했습니다.',
};
}
const result = await response.json();

135
src/components/approval/ReferenceBox/index.tsx
View File

@@ -5,7 +5,6 @@ import {
Files,
Eye,
EyeOff,
Check,
BookOpen,
} from 'lucide-react';
import { toast } from 'sonner';
@@ -44,19 +43,22 @@ import {
} from '@/components/templates/IntegratedListTemplateV2';
import { DateRangeSelector } from '@/components/molecules/DateRangeSelector';
import { ListMobileCard, InfoField } from '@/components/organisms/ListMobileCard';
import { DocumentDetailModal } from '@/components/approval/DocumentDetail';
import type { DocumentType, ProposalDocumentData, ExpenseReportDocumentData, ExpenseEstimateDocumentData } from '@/components/approval/DocumentDetail/types';
import type {
ReferenceTabType,
ReferenceRecord,
SortOption,
FilterOption,
ApprovalType,
} from './types';
import {
REFERENCE_TAB_LABELS,
SORT_OPTIONS,
FILTER_OPTIONS,
APPROVAL_TYPE_LABELS,
DOCUMENT_STATUS_LABELS,
DOCUMENT_STATUS_COLORS,
READ_STATUS_LABELS,
READ_STATUS_COLORS,
} from './types';
// ===== 통계 타입 =====
@@ -86,6 +88,10 @@ export function ReferenceBox() {
const [markReadDialogOpen, setMarkReadDialogOpen] = useState(false);
const [markUnreadDialogOpen, setMarkUnreadDialogOpen] = useState(false);
// ===== 문서 상세 모달 상태 =====
const [isModalOpen, setIsModalOpen] = useState(false);
const [selectedDocument, setSelectedDocument] = useState<ReferenceRecord | null>(null);
// API 데이터
const [data, setData] = useState<ReferenceRecord[]>([]);
const [totalCount, setTotalCount] = useState(0);
@@ -252,6 +258,87 @@ export function ReferenceBox() {
setMarkUnreadDialogOpen(false);
}, [selectedItems, loadData, loadSummary]);
// ===== 문서 클릭/상세 보기 핸들러 =====
const handleDocumentClick = useCallback((item: ReferenceRecord) => {
setSelectedDocument(item);
setIsModalOpen(true);
}, []);
// ===== ApprovalType → DocumentType 변환 =====
const getDocumentType = (approvalType: ApprovalType): DocumentType => {
switch (approvalType) {
case 'expense_estimate': return 'expenseEstimate';
case 'expense_report': return 'expenseReport';
default: return 'proposal';
}
};
// ===== ReferenceRecord → 모달용 데이터 변환 =====
const convertToModalData = (item: ReferenceRecord): ProposalDocumentData | ExpenseReportDocumentData | ExpenseEstimateDocumentData => {
const docType = getDocumentType(item.approvalType);
const drafter = {
id: 'drafter-1',
name: item.drafter,
position: item.drafterPosition,
department: item.drafterDepartment,
status: 'approved' as const,
};
const approvers = [{
id: 'approver-1',
name: '결재자',
position: '부장',
department: '경영지원팀',
status: 'approved' as const,
}];
switch (docType) {
case 'expenseEstimate':
return {
documentNo: item.documentNo,
createdAt: item.draftDate,
items: [
{ id: '1', expectedPaymentDate: '2025-11-05', category: '통신 서비스', amount: 550000, vendor: 'KT', account: '국민 123-456-789012 홍길동' },
{ id: '2', expectedPaymentDate: '2025-11-12', category: '인건 대행', amount: 2500000, vendor: '에이치알코리아', account: '신한 110-123-456789 (주)에이치알' },
],
totalExpense: 3050000,
accountBalance: 25000000,
finalDifference: 21950000,
approvers,
drafter,
};
case 'expenseReport':
return {
documentNo: item.documentNo,
createdAt: item.draftDate,
requestDate: item.draftDate,
paymentDate: item.draftDate,
items: [
{ id: '1', no: 1, description: '업무용 택시비', amount: 50000, note: '고객사 미팅' },
{ id: '2', no: 2, description: '식대', amount: 30000, note: '팀 회식' },
],
cardInfo: '삼성카드 **** 1234',
totalAmount: 80000,
attachments: [],
approvers,
drafter,
};
default:
return {
documentNo: item.documentNo,
createdAt: item.draftDate,
vendor: '거래처',
vendorPaymentDate: item.draftDate,
title: item.title,
description: item.title,
reason: '업무상 필요',
estimatedCost: 1000000,
attachments: [],
approvers,
drafter,
};
}
};
// ===== 통계 카드 =====
const statCards: StatCard[] = useMemo(() => [
{ label: '전체', value: `${stats.all}건`, icon: Files, iconColor: 'text-blue-500' },
@@ -267,7 +354,7 @@ export function ReferenceBox() {
], [stats]);
// ===== 테이블 컬럼 =====
// 문서번호, 문서유형, 제목, 기안자, 기안일시, 상태, 확인
// 문서번호, 문서유형, 제목, 기안자, 기안일시, 상태
const tableColumns: TableColumn[] = useMemo(() => [
{ key: 'no', label: '번호', className: 'w-[60px] text-center' },
{ key: 'documentNo', label: '문서번호' },
@@ -276,7 +363,6 @@ export function ReferenceBox() {
{ key: 'drafter', label: '기안자' },
{ key: 'draftDate', label: '기안일시' },
{ key: 'status', label: '상태', className: 'text-center' },
{ key: 'confirm', label: '확인', className: 'w-[80px] text-center' },
], []);
// ===== 테이블 행 렌더링 =====
@@ -284,8 +370,12 @@ export function ReferenceBox() {
const isSelected = selectedItems.has(item.id);
return (
<TableRow key={item.id} className="hover:bg-muted/50">
<TableCell className="text-center">
<TableRow
key={item.id}
className="hover:bg-muted/50 cursor-pointer"
onClick={() => handleDocumentClick(item)}
>
<TableCell className="text-center" onClick={(e) => e.stopPropagation()}>
<Checkbox checked={isSelected} onCheckedChange={() => toggleSelection(item.id)} />
</TableCell>
<TableCell className="text-center">{globalIndex}</TableCell>
@@ -297,18 +387,13 @@ export function ReferenceBox() {
<TableCell>{item.drafter}</TableCell>
<TableCell>{item.draftDate}</TableCell>
<TableCell className="text-center">
<Badge className={DOCUMENT_STATUS_COLORS[item.documentStatus]}>
{DOCUMENT_STATUS_LABELS[item.documentStatus]}
<Badge className={READ_STATUS_COLORS[item.readStatus]}>
{READ_STATUS_LABELS[item.readStatus]}
</Badge>
</TableCell>
<TableCell className="text-center">
{item.readStatus === 'read' && (
<Check className="h-4 w-4 mx-auto text-green-600" />
)}
</TableCell>
</TableRow>
);
}, [selectedItems, toggleSelection]);
}, [selectedItems, toggleSelection, handleDocumentClick]);
// ===== 모바일 카드 렌더링 =====
const renderMobileCard = useCallback((
@@ -325,14 +410,9 @@ export function ReferenceBox() {
headerBadges={
<div className="flex gap-1">
<Badge variant="outline">{APPROVAL_TYPE_LABELS[item.approvalType]}</Badge>
<Badge className={DOCUMENT_STATUS_COLORS[item.documentStatus]}>
{DOCUMENT_STATUS_LABELS[item.documentStatus]}
<Badge className={READ_STATUS_COLORS[item.readStatus]}>
{READ_STATUS_LABELS[item.readStatus]}
</Badge>
{item.readStatus === 'read' ? (
<Badge className="bg-gray-100 text-gray-800">열람</Badge>
) : (
<Badge className="bg-blue-100 text-blue-800">미열람</Badge>
)}
</div>
}
isSelected={isSelected}
@@ -505,6 +585,17 @@ export function ReferenceBox() {
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
{/* 문서 상세 모달 */}
{selectedDocument && (
<DocumentDetailModal
open={isModalOpen}
onOpenChange={setIsModalOpen}
documentType={getDocumentType(selectedDocument.approvalType)}
data={convertToModalData(selectedDocument)}
mode="reference"
/>
)}
</>
);
}