diff --git a/src/index.css b/src/index.css index d0b87c2..f6c3e46 100644 --- a/src/index.css +++ b/src/index.css @@ -131,8 +131,8 @@ --sidebar-ring: oklch(0.708 0 0); --risk-very-danger: #ff6f6f; --risk-danger: #ffba6f; - --risk-good: #ffe93f; - --risk-safe: #d9ff41; + --risk-good: #f5e03c; + --risk-safe: #d0f14f; --risk-very-safe: #2cdf44; } diff --git a/src/shared/constants/risk-chart-segments.ts b/src/shared/constants/risk-chart-segments.ts index 1d20f7e..1f09160 100644 --- a/src/shared/constants/risk-chart-segments.ts +++ b/src/shared/constants/risk-chart-segments.ts @@ -12,11 +12,11 @@ export type RiskSegment = { }; // 색상 상수 -const COLORS = { +export const COLORS = { RED: '#ff6f6f', ORANGE: '#ffba6f', - YELLOW: '#ffe93f', - YELLOW_GREEN: '#d9ff41', + YELLOW: '#f5e03c', + YELLOW_GREEN: '#d0f14f', GREEN: '#2cdf44', } as const; diff --git a/src/shared/utils/chart/chart-colors.ts b/src/shared/utils/chart/chart-colors.ts index 61cd998..f6fcda0 100644 --- a/src/shared/utils/chart/chart-colors.ts +++ b/src/shared/utils/chart/chart-colors.ts @@ -1,7 +1,7 @@ /** * 차트 색상 관련 유틸리티 */ -import { CHART_COLORS, CHART_COLOR_CLASSES, RISK_SCORE_COLORS } from '../../constants'; +import { CHART_COLORS, CHART_COLOR_CLASSES, COLORS, RISK_SCORE_COLORS } from '../../constants'; /** * 인덱스에 따른 차트 색상 CSS 변수를 반환 @@ -41,11 +41,11 @@ export const getRiskScoreColorClass = (score: number): string => { */ export const getRiskColorClass = (hexColor: string): string => { const colorMap: Record = { - '#ff6f6f': 'bg-risk-very-danger', // 매우 위험 - '#ffba6f': 'bg-risk-danger', // 위험 - '#ffe93f': 'bg-risk-good', // 양호 - '#d9ff41': 'bg-risk-safe', // 안전 - '#2cdf44': 'bg-risk-very-safe', // 매우 안전 + [COLORS.RED]: 'bg-risk-very-danger', // 매우 위험 + [COLORS.ORANGE]: 'bg-risk-danger', // 위험 + [COLORS.YELLOW]: 'bg-risk-good', // 양호 + [COLORS.YELLOW_GREEN]: 'bg-risk-safe', // 안전 + [COLORS.GREEN]: 'bg-risk-very-safe', // 매우 안전 }; return colorMap[hexColor] || 'bg-gray-400'; @@ -53,11 +53,11 @@ export const getRiskColorClass = (hexColor: string): string => { export const getRiskBoxShadowClass = (hexColor: string): string => { const colorMap: Record = { - '#ff6f6f': 'shadow-[0_0_12px_var(--color-risk-very-danger)]', // 매우 위험 - '#ffba6f': 'shadow-[0_0_12px_var(--color-risk-danger)]', // 위험 - '#ffe93f': 'shadow-[0_0_12px_var(--color-risk-good)]', // 양호 - '#d9ff41': 'shadow-[0_0_12px_var(--color-risk-safe)]', // 안전 - '#2cdf44': 'shadow-[0_0_12px_var(--color-risk-very-safe)]', // 매우 안전 + [COLORS.RED]: 'shadow-[0_0_12px_var(--color-risk-very-danger)]', // 매우 위험 + [COLORS.ORANGE]: 'shadow-[0_0_12px_var(--color-risk-danger)]', // 위험 + [COLORS.YELLOW]: 'shadow-[0_0_12px_var(--color-risk-good)]', // 양호 + [COLORS.YELLOW_GREEN]: 'shadow-[0_0_12px_var(--color-risk-safe)]', // 안전 + [COLORS.GREEN]: 'shadow-[0_0_12px_var(--color-risk-very-safe)]', // 매우 안전 }; return colorMap[hexColor] || 'shadow-[0_0_12px_rgba(156,163,175,0.5)]'; };