fix#28-risk-color

[Dobbymin]

📝 요약 (Summary)

위험도 관련 색상 상수를 리팩토링하여 채도가 낮은 색상으로 업데이트하고, 전반적인 시각적 일관성을 개선합니다.

✅ 주요 변경 사항 (Key Changes)

• 위험도 레벨 색상 상수 업데이트
• 위험도 차트 색상 상수 업데이트

💻 상세 구현 내용 (Implementation Details)

위험도 레벨을 나타내는 색상 상수를 채도가 낮은 색상으로 변경하여 업데이트했습니다. 이는 사용자 인터페이스 전반에 걸쳐 색상 일관성을 유지하고, 시각적 피로도를 줄이며 더욱 부드러운 사용자 경험을 제공하기 위함입니다.
또한, 위험도 차트에서 사용되는 색상 상수도 채도를 낮춰 업데이트했습니다. 이는 일반 위험도 색상과의 통일성을 확보하고, 차트의 가독성을 높여 데이터를 더 명확하게 전달할 수 있도록 합니다.

🚀 트러블 슈팅 (Trouble Shooting)

본 PR에서는 특정 문제 해결에 대한 트러블 슈팅은 필요하지 않았습니다.

⚠️ 알려진 이슈 및 참고 사항 (Known Issues & Notes)

현재 알려진 이슈는 없습니다.

📸 스크린샷 (Screenshots)

왼쪽 = 변경후 , 오른쪽 = 변경전

#️⃣ 관련 이슈 (Related Issues)

• [리팩토링] 위험도 색상 수정 #28

[gemini-code-assist]

Summary of Changes

Hello @Dobbymin, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

이 PR은 위험도 관련 색상 상수를 리팩토링하여 채도가 낮은 색상으로 업데이트하고, 전반적인 시각적 일관성을 개선하는 것을 목표로 합니다. 이는 사용자 인터페이스 전반에 걸쳐 색상 일관성을 유지하고, 시각적 피로도를 줄이며 더욱 부드러운 사용자 경험을 제공하기 위함입니다.

Highlights

• 위험도 레벨 색상 상수 업데이트: 위험도 레벨 색상 상수를 채도가 낮은 색상으로 업데이트했습니다.
• 위험도 차트 색상 상수 업데이트: 위험도 차트 색상 상수를 채도가 낮은 색상으로 업데이트했습니다.
• 시각적 일관성 및 사용자 경험 개선: 사용자 인터페이스의 시각적 일관성을 개선하고 시각적 피로도를 줄였습니다.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in issue comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

이 PR은 위험도 관련 색상 상수를 업데이트하여 시각적 일관성을 개선하는 것을 목표로 하고 있습니다. 변경 사항은 index.css, risk-chart-segments.ts, chart-colors.ts 파일에 걸쳐 일관되게 적용되었습니다.

코드 리뷰 결과, chart-colors.ts 파일에서 하드코딩된 색상 값을 사용하는 부분을 발견했습니다. 이 값들은 risk-chart-segments.ts에 상수로 이미 정의되어 있으므로, 이를 직접 참조하도록 리팩토링하면 코드의 유지보수성을 크게 향상시킬 수 있습니다. 관련된 구체적인 제안은 개별 주석을 참고해 주세요.

[gemini-code-assist]

colorMap에 색상 HEX 코드가 하드코딩되어 있습니다. 이 색상들은 src/shared/constants/risk-chart-segments.ts 파일의 COLORS 객체에 상수로 정의되어 있습니다. 하드코딩된 값을 사용하면 향후 색상 변경 시 여러 파일을 수정해야 하는 번거로움이 있으며, 이는 현재 PR에서 수정하고 있는 문제이기도 합니다.

유지보수성을 높이기 위해 risk-chart-segments.ts의 COLORS 상수를 export하고, 이 파일에서 import하여 사용하는 것이 좋습니다.

개선 제안:

1. src/shared/constants/risk-chart-segments.ts 파일에서 COLORS 상수를 export 합니다.

   export const COLORS = { ... };

2. chart-colors.ts 파일 상단에 COLORS를 import 합니다.

   import { COLORS } from '../../constants/risk-chart-segments';

3. 아래와 같이 colorMap을 수정합니다.

Suggested change

	const colorMap: Record<string, string> = {
	'#ff6f6f': 'bg-risk-very-danger', // 매우 위험
	'#ffba6f': 'bg-risk-danger', // 위험
	'#ffe93f': 'bg-risk-good', // 양호
	'#d9ff41': 'bg-risk-safe', // 안전
	'#f5e03c': 'bg-risk-good', // 양호
	'#d0f14f': 'bg-risk-safe', // 안전
	'#2cdf44': 'bg-risk-very-safe', // 매우 안전
	};
	const colorMap: Record<string, string> = {
	[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', // 매우 안전
	};

[gemini-code-assist]

이 colorMap 또한 getRiskColorClass 함수와 마찬가지로 하드코딩된 HEX 색상 값을 사용하고 있습니다. 코드 중복을 피하고 유지보수성을 향상시키기 위해 risk-chart-segments.ts의 COLORS 상수를 사용하도록 변경하는 것을 권장합니다.

Suggested change

	const colorMap: Record<string, string> = {
	'#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)]', // 안전
	'#f5e03c': 'shadow-[0_0_12px_var(--color-risk-good)]', // 양호
	'#d0f14f': 'shadow-[0_0_12px_var(--color-risk-safe)]', // 안전
	'#2cdf44': 'shadow-[0_0_12px_var(--color-risk-very-safe)]', // 매우 안전
	};
	const colorMap: Record<string, string> = {
	[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)]', // 매우 안전
	};