= 4 && "grid-cols-2 md:grid-cols-4"
+ )}>
{config.summaryCards.map((card, index) => (
))}
@@ -368,10 +421,11 @@ export function DetailModal({ isOpen, onClose, config }: DetailModalProps) {
)}
{/* 차트 영역 */}
- {(config.barChart || config.pieChart) && (
+ {(config.barChart || config.pieChart || config.horizontalBarChart) && (
{config.barChart &&
}
{config.pieChart &&
}
+ {config.horizontalBarChart &&
}
)}
diff --git a/src/components/business/CEODashboard/types.ts b/src/components/business/CEODashboard/types.ts
index 085a8cfb..a16e28a3 100644
--- a/src/components/business/CEODashboard/types.ts
+++ b/src/components/business/CEODashboard/types.ts
@@ -255,6 +255,19 @@ export interface PieChartConfig {
data: PieChartDataItem[];
}
+// 가로 막대 차트 데이터 타입
+export interface HorizontalBarChartDataItem {
+ name: string;
+ value: number;
+}
+
+// 가로 막대 차트 설정 타입
+export interface HorizontalBarChartConfig {
+ title: string;
+ data: HorizontalBarChartDataItem[];
+ color?: string;
+}
+
// 테이블 컬럼 타입
export interface TableColumnConfig {
key: string;
@@ -262,6 +275,7 @@ export interface TableColumnConfig {
align?: 'left' | 'center' | 'right';
format?: 'number' | 'currency' | 'date' | 'text';
width?: string;
+ highlightValue?: string; // 이 값일 때 주황색으로 강조 표시
}
// 테이블 필터 옵션 타입
@@ -295,6 +309,7 @@ export interface DetailModalConfig {
summaryCards: SummaryCardData[];
barChart?: BarChartConfig;
pieChart?: PieChartConfig;
+ horizontalBarChart?: HorizontalBarChartConfig; // 가로 막대 차트 (도넛 차트 대신 사용)
table?: TableConfig;
}
diff --git a/src/components/business/MainDashboard.tsx b/src/components/business/MainDashboard.tsx
index 909af8a4..d8baf9cb 100644
--- a/src/components/business/MainDashboard.tsx
+++ b/src/components/business/MainDashboard.tsx
@@ -1035,7 +1035,7 @@ export function MainDashboard() {
diff --git a/src/layouts/AuthenticatedLayout.tsx b/src/layouts/AuthenticatedLayout.tsx
index 21010cd5..051a2a2a 100644
--- a/src/layouts/AuthenticatedLayout.tsx
+++ b/src/layouts/AuthenticatedLayout.tsx
@@ -116,14 +116,32 @@ export default function AuthenticatedLayout({ children }: AuthenticatedLayoutPro
}
}, [restartAfterAuth]);
- // 모바일 감지
+ // 모바일 감지 + 폴더블 기기 대응 (Galaxy Fold 등)
useEffect(() => {
- const checkScreenSize = () => {
- setIsMobile(window.innerWidth < 768);
+ const updateViewport = () => {
+ // visualViewport API 우선 사용 (폴더블 기기에서 더 정확)
+ const width = window.visualViewport?.width ?? window.innerWidth;
+ const height = window.visualViewport?.height ?? window.innerHeight;
+
+ setIsMobile(width < 768);
+
+ // CSS 변수로 실제 viewport 크기 설정 (폴더블 기기 대응)
+ document.documentElement.style.setProperty('--app-width', `${width}px`);
+ document.documentElement.style.setProperty('--app-height', `${height}px`);
+ };
+
+ updateViewport();
+
+ // resize 이벤트
+ window.addEventListener('resize', updateViewport);
+
+ // visualViewport resize 이벤트 (폴더블 기기 화면 전환 감지)
+ window.visualViewport?.addEventListener('resize', updateViewport);
+
+ return () => {
+ window.removeEventListener('resize', updateViewport);
+ window.visualViewport?.removeEventListener('resize', updateViewport);
};
- checkScreenSize();
- window.addEventListener('resize', checkScreenSize);
- return () => window.removeEventListener('resize', checkScreenSize);
}, []);
// 서버에서 받은 사용자 정보로 초기화
@@ -293,7 +311,7 @@ export default function AuthenticatedLayout({ children }: AuthenticatedLayoutPro
// 모바일 레이아웃
if (isMobile) {
return (
-
+
{/* 모바일 헤더 - sam-design 스타일 */}
diff --git a/src/lib/api/client.ts b/src/lib/api/client.ts
index 432e7e11..9920adcf 100644
--- a/src/lib/api/client.ts
+++ b/src/lib/api/client.ts
@@ -199,9 +199,15 @@ export async function withTokenRefresh(
// Retry the original API call
return withTokenRefresh(apiCall, maxRetries - 1);
} else {
- console.error('❌ Token refresh failed - redirecting to login');
- // Refresh failed - redirect to login
+ console.error('❌ Token refresh failed - clearing cookies and redirecting to login');
+ // ⚠️ 무한 루프 방지: 쿠키 삭제 API 호출 후 redirect
+ // 쿠키가 남아있으면 미들웨어가 "인증됨"으로 판단하여 무한 루프 발생
if (typeof window !== 'undefined') {
+ try {
+ await fetch('/api/auth/logout', { method: 'POST' });
+ } catch {
+ // 로그아웃 API 실패해도 redirect 진행
+ }
window.location.href = '/login';
}
}
diff --git a/src/lib/api/fetch-wrapper.ts b/src/lib/api/fetch-wrapper.ts
index 34f1170b..bf01cd4d 100644
--- a/src/lib/api/fetch-wrapper.ts
+++ b/src/lib/api/fetch-wrapper.ts
@@ -13,6 +13,24 @@ import { isNextRedirectError } from '@/lib/utils/redirect-error';
import { createErrorResponse, type ApiErrorResponse } from './errors';
import { refreshAccessToken } from './refresh-token';
+/**
+ * 토큰 쿠키 삭제 (리프레시 실패 또는 인증 만료 시)
+ *
+ * ⚠️ 중요: redirect('/login') 호출 전에 반드시 실행해야 함
+ * 쿠키가 남아있으면 미들웨어가 "인증됨"으로 판단하여 무한 루프 발생
+ */
+async function clearTokenCookies() {
+ const cookieStore = await cookies();
+
+ // 토큰 쿠키 삭제
+ cookieStore.delete('access_token');
+ cookieStore.delete('refresh_token');
+ cookieStore.delete('token_refreshed_at');
+ cookieStore.delete('is_authenticated');
+
+ console.log('🗑️ [serverFetch] 토큰 쿠키 삭제 완료 (무한 루프 방지)');
+}
+
/**
* 새 토큰을 쿠키에 저장
*/
@@ -152,16 +170,19 @@ export async function serverFetch(
// 재시도도 401이면 로그인으로
if (response.status === 401) {
console.warn('🔴 [serverFetch] Retry failed with 401, redirecting to login...');
+ await clearTokenCookies(); // ⚠️ 무한 루프 방지: 쿠키 삭제 후 redirect
redirect('/login');
}
} else {
// 리프레시 실패 → 로그인 페이지로
console.warn('🔴 [serverFetch] Token refresh failed, redirecting to login...');
+ await clearTokenCookies(); // ⚠️ 무한 루프 방지: 쿠키 삭제 후 redirect
redirect('/login');
}
} else if (response.status === 401 && !options?.skipAuthCheck) {
// refresh_token이 없는 경우
console.warn(`[serverFetch] 401 Unauthorized (no refresh token): ${url} → 로그인 페이지로 이동`);
+ await clearTokenCookies(); // ⚠️ 무한 루프 방지: 쿠키 삭제 후 redirect
redirect('/login');
}