Conversation
… Needle) 및 ChartBox 리팩토링
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Summary of Changes
Hello @Dobbymin, I'm Gemini Code Assist1! 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은 메인 페이지에 전세 계약 위험도 분석 기능을 새롭게 도입합니다. 이를 위해 위험도 분석 및 차트 관련 엔티티와 데이터 모델을 정의하고, 차트 컴포넌트들을 모듈화하여 재사용성을 높였습니다. 또한, 위험도 게이지 차트와 주요 위험 요인을 시각적으로 표현하는 UI 컴포넌트를 추가하고, 관련 유틸리티 함수들을 구현하여 사용자가 전세 계약의 위험도를 한눈에 파악할 수 있도록 지원합니다.
Highlights
- 위험도 분석 기능 도입: 메인 페이지에 전세 계약의 위험도를 시각적으로 분석하고 요약하는 새로운 섹션이 추가되었습니다. 이는 게이지 차트와 주요 위험 요인 목록을 통해 사용자에게 직관적인 정보를 제공합니다.
- 새로운 엔티티 및 데이터 모델 추가: 차트 관련 엔티티(ChartLine, ChartDataPoint, ChartData)와 위험도 분석 엔티티(RiskSummary, Landlord, RiskAnalysisResponse 등)가 새롭게 정의되어 데이터 모델의 일관성과 확장성을 확보했습니다.
- 차트 시스템 모듈화 및 리팩토링: 기존 ChartBox 컴포넌트가 ChartAxis, ChartGrid, ChartLineItem, LegendLine 등 재사용 가능한 공통 차트 컴포넌트들로 분리 및 리팩토링되었습니다. 또한, useChartConfig 훅을 도입하여 차트 설정을 중앙에서 관리할 수 있게 되었습니다.
- 게이지 차트 시각화 및 유틸리티 강화: 위험도 게이지 차트의 바늘을 표현하는 NeedleIcon SVG 컴포넌트와 위험도 점수 계산 및 게이지 데이터 생성을 위한 유틸리티 함수들이 추가되어 시각화의 정확성과 유연성을 높였습니다.
- 목업 데이터 개선: 차트 및 위험도 분석을 위한 목업 데이터가 업데이트 및 추가되어 개발 및 테스트 환경을 지원합니다.
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
-
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. ↩
There was a problem hiding this comment.
Code Review
이 PR은 메인 페이지에 위험도 분석 기능을 추가하는 중요한 업데이트입니다. 전반적으로 코드 구조가 잘 잡혀있고, 기능 구현을 위해 새로운 엔티티, 컴포넌트, 훅, 유틸리티 등이 체계적으로 추가되었습니다. 특히 차트 관련 로직을 커스텀 훅과 공통 컴포넌트로 분리하여 재사용성과 유지보수성을 높인 점이 인상적입니다. 몇 가지 개선점을 제안합니다. 목 데이터의 불일치 문제를 해결하고, 사용되지 않는 코드를 정리하며, 일부 컴포넌트의 안정성과 명확성을 높이는 방향으로 피드백을 드렸습니다. 이 피드백들이 코드의 완성도를 높이는 데 도움이 되기를 바랍니다.
| score: 0, | ||
| grade: '안전', |
There was a problem hiding this comment.
현재 DEFAULT_RISK_ANALYSIS_DATA로 사용되는 첫 번째 목 데이터에서 score가 0인데 grade가 '안전'으로 설정되어 있습니다. shared/utils/chart/risk-chart.ts의 getRiskSegment 로직에 따르면 점수 0은 '위험' 등급에 해당합니다. 이 불일치는 UI에 잘못된 위험도 정보를 표시할 수 있으므로, 점수에 맞는 등급으로 수정해야 합니다.
| score: 0, | |
| grade: '안전', | |
| score: 0, | |
| grade: '위험', |
| export type RiskFactor = { | ||
| name: string; | ||
| percentage: number; | ||
| }; |
There was a problem hiding this comment.
이 파일과 src/entities/chart/types 디렉토리 전체가 현재 코드베이스에서 사용되지 않는 것으로 보입니다. RiskFactor 타입은 src/entities/risk-analysis/index.ts에도 정의되어 있으며, 실제 사용되는 것은 후자입니다. 중복과 혼동을 줄이기 위해 이 디렉토리와 관련 파일들을 삭제하는 것이 좋습니다.
| // 5개 구간 정의 (각각 20점씩) - 왼쪽부터 안전/다소안전/양호/다소위험/위험 | ||
| export const RISK_SEGMENTS = [ | ||
| { name: '위험', value: 20, fill: '#ef4444' }, | ||
| { name: '다소 위험', value: 20, fill: '#f97316' }, | ||
| { name: '양호', value: 20, fill: '#fbbf24' }, | ||
| { name: '다소안전', value: 20, fill: '#34d399' }, | ||
| { name: '안전', value: 20, fill: '#10b981' }, | ||
| ]; |
There was a problem hiding this comment.
이 파일과 src/features/main/model 디렉토리 전체가 src/shared/constants/risk-chart-segments.ts 파일과 중복되는 것으로 보이며, 현재 코드베이스에서 사용되지 않는 것 같습니다. 또한, 이 파일의 주석은 실제 코드와 내용이 반대로 되어 있어 혼동을 줄 수 있습니다. 코드베이스를 깔끔하게 유지하고 혼란을 방지하기 위해 이 디렉토리와 파일들을 삭제하는 것을 고려해 보세요.
|
|
||
| import { Needle } from '../../common'; | ||
|
|
||
| // import NeedleIcon from '../../../_assets/needle.svg'; |
There was a problem hiding this comment.
주석 처리된 import 구문이 남아있습니다. 사용하지 않는 코드는 삭제하여 코드를 깔끔하게 유지하는 것이 좋습니다.
| <h3 className='mb-2 text-lg font-bold text-gray-900'>전세 계약 최종 위험도</h3> | ||
| <p className='text-md mb-6 flex items-center gap-2 text-gray-600'> | ||
| <span className='font-semibold'>위험 점수 :</span> | ||
| <span className='font-semibold text-green-600'>{riskScore}</span> |
There was a problem hiding this comment.
위험 점수(riskScore)의 색상이 text-green-600으로 하드코딩되어 있습니다. 위험도에 따라 동적으로 색상이 변경되도록 구현하면 사용자에게 더 명확한 시각적 피드백을 줄 수 있습니다. gaugeData.label (위험 등급)을 사용하여 동적으로 CSS 클래스를 할당하는 헬퍼 함수를 만들어 사용하는 것을 고려해볼 수 있습니다.
| <h3 className='mb-6 text-2xl font-bold text-gray-900'>주요 위험 요인</h3> | ||
| <div className='flex w-full flex-col gap-2'> | ||
| {riskFactors.map((factor, index) => ( | ||
| <div key={index} className='flex items-center gap-5 py-3 text-center font-semibold'> |
There was a problem hiding this comment.
map 함수에서 key로 index를 사용하는 것은 리스트가 동적으로 변경될 때 예기치 않은 UI 문제를 일으킬 수 있습니다. 각 factor의 name이 고유하므로 key={factor.name}과 같이 고유한 값을 키로 사용하는 것이 더 안정적입니다.
| <div key={index} className='flex items-center gap-5 py-3 text-center font-semibold'> | |
| <div key={factor.name} className='flex items-center gap-5 py-3 text-center font-semibold'> |
| export const RISK_LEVEL_DESCRIPTIONS = { | ||
| SAFE: '매우 안전한 전세 계약입니다.', | ||
| MODERATE_SAFE: '안전한 전세 계약입니다.', | ||
| GOOD: '양호한 전세 계약입니다.', | ||
| MODERATE_RISK: '주의가 필요한 전세 계약입니다.', | ||
| RISK: '위험한 전세 계약입니다.', | ||
| } as const; | ||
|
|
||
| // 위험도 점수별 등급 매핑 | ||
| export const getRiskGrade = (score: number): string => { | ||
| if (score <= 20) return '매우 안전'; | ||
| if (score <= 40) return '안전'; | ||
| if (score <= 60) return '양호'; | ||
| if (score <= 80) return '다소 위험'; | ||
| return '위험'; | ||
| }; | ||
|
|
||
| // 위험도 등급별 색상 | ||
| export const getRiskGradeColor = (grade: string): string => { | ||
| switch (grade) { | ||
| case '매우 안전': | ||
| case '안전': | ||
| return 'text-green-600'; | ||
| case '양호': | ||
| return 'text-blue-600'; | ||
| case '다소 위험': | ||
| return 'text-yellow-600'; | ||
| case '위험': | ||
| return 'text-red-600'; | ||
| default: | ||
| return 'text-gray-600'; | ||
| } | ||
| }; |
There was a problem hiding this comment.
RISK_LEVEL_DESCRIPTIONS, getRiskGrade, getRiskGradeColor는 현재 코드베이스에서 사용되지 않는 것으로 보입니다. 특히 getRiskGrade 함수는 실제 사용되는 위험도 계산 로직과 달라 혼동을 줄 수 있습니다. 불필요한 코드를 제거하여 코드베이스를 간결하게 유지하는 것이 좋습니다.
|
|
||
| // 게이지 데이터 타입 정의 | ||
| export interface GaugeData { | ||
| data: RiskSegment[]; |
There was a problem hiding this comment.
GaugeData 인터페이스의 data 속성을 readonly RiskSegment[]로 변경하면 RISK_CHART_SEGMENTS (타입이 readonly RiskSegment[])를 할당할 때 불필요한 타입 단언(as RiskSegment[])을 피할 수 있습니다. 이는 타입 안정성을 높이고 코드의 의도를 더 명확하게 만듭니다.
| data: RiskSegment[]; | |
| data: readonly RiskSegment[]; |
| const SEGMENT_SIZE = 20; | ||
|
|
||
| // 점수 범위 검증 함수 | ||
| export const isValidRiskScore = (score: number): score is RiskScore => { |
There was a problem hiding this comment.
isValidRiskScore, toRiskScore, getSegmentIndex 함수들은 이 모듈 내부에서만 사용되므로 export 키워드를 제거하여 모듈의 캡슐화를 강화하는 것이 좋습니다.
| export const validateRiskScore = (score: number): boolean => { | ||
| return isValidRiskScore(score); | ||
| }; |
There was a problem hiding this comment.
validateRiskScore 함수는 export 되어 있지만 프로젝트 내에서 아무 곳에서도 사용되지 않는 것 같습니다. 불필요한 코드를 제거하여 코드베이스를 깨끗하게 유지하는 것이 좋습니다.
- 기존 바늘이 0 도가 아닌 90도 에서 시작했음을 확인 - props로 받아온 각도에 임의로 90를 빼서 올바른 값을 가리킬 수 있도록 수정
1 participant
📝 요약 (Summary)
이 PR은 위험도 분석 기능을 메인 페이지에 도입하며, 이를 위해 필요한 새로운 엔티티, 데이터 모델, 유틸리티, UI 컴포넌트 및 차트 관련 기능을 추가합니다.
✅ 주요 변경 사항 (Key Changes)
💻 상세 구현 내용 (Implementation Details)
위험도 분석 관련 엔티티 및 응답 데이터 모델,위험 구간 정의 및 데이터 모델,위험 분석 데이터등을 추가하여 위험도 분석을 위한 기반 데이터 구조와 로직을 구축했습니다. 또한,위험도 차트 관련 유틸리티를 모듈화하여 데이터 처리 및 계산 로직의 재사용성을 높였습니다.위험 분석 요약 섹션,위험도 차트 박스,위험 요인 박스등의 새로운 컴포넌트를 추가하여 위험도 분석 결과를 시각적으로 명확하게 제공합니다.아이콘 컴포넌트를 추가하여 UI의 일관성과 확장성을 확보했습니다.useChartConfig훅을 도입하여 차트의 설정 및 데이터 관리를 중앙화하고 재사용 가능하도록 했습니다.ChartAxis,ChartGrid,ChartLineItem,LegendLine,Needle등 차트 관련 세부 컴포넌트들을 추가하고ChartBox를 리팩토링하여 복잡한 차트를 유연하게 구성할 수 있도록 했습니다.CHART_DATA_LIST로 차트 데이터 목록을 변경하여 데이터 관리를 용이하게 했습니다.InputSection 컴포넌트의 텍스트 레이아웃과위험도 차트 박스 컴포넌트의 스타일을 수정하여 UI의 완성도를 높였습니다.위험 요인 박스 컴포넌트는 스타일 수정과 함께 레이아웃을 개선하여 정보 전달력을 향상시켰습니다.🚀 트러블 슈팅 (Trouble