feat#23-mainpage-chart-ui by Dobbymin · Pull Request #25 · BusanHackathon/lighthouseFE

Dobbymin · 2025-08-21T04:28:21Z

📝 요약 (Summary)

메인 페이지에 새로운 차트 기능을 도입하고, 이를 위한 recharts 라이브러리 설치, 관련 컴포넌트 및 데이터/스타일링 유틸리티를 추가합니다.

✅ 주요 변경 사항 (Key Changes)

recharts 라이브러리 설치 및 관련 의존성 업데이트
메인 페이지에 차트 섹션 및 차트 컴포넌트 추가
차트 데이터 및 스타일링을 위한 유틸리티 구현

💻 상세 구현 내용 (Implementation Details)

recharts 라이브러리 설치 및 관련 의존성 업데이트: 복잡하고 다양한 차트 시각화를 효율적으로 구현하기 위해 recharts 라이브러리를 프로젝트에 추가하고, 이에 필요한 의존성 파일들을 업데이트했습니다. 이는 차트 기능 개발을 위한 견고한 기반을 마련합니다.
메인 페이지에 차트 섹션 및 차트 컴포넌트 추가: 메인 페이지 사용자에게 핵심 데이터를 시각적으로 제공하기 위해 새로운 차트 섹션을 도입했습니다. 이 섹션은 ChartSection 컴포넌트로 구성되며, 내부에는 실제 차트 로직을 담당하는 Chart 컴포넌트가 포함됩니다. 새로운 섹션 추가에 맞춰 메인 페이지의 전체적인 레이아웃도 조정하여 시각적 통일성을 유지했습니다.
차트 데이터 및 스타일링을 위한 유틸리티 구현: Chart 컴포넌트의 개발 및 테스트를 용이하게 하기 위해 목(mock) 데이터를 생성했습니다. 또한, 차트의 시각적 일관성과 재사용성을 높이기 위해 차트에서 사용될 색상 변수들을 정의하고, 이 색상들을 효과적으로 관리하고 적용할 수 있는 색상 유틸리티 함수를 구현했습니다.

🚀 트러블 슈팅 (Trouble Shooting)

이번 PR에서는 특정 트러블 슈팅이 필요하지 않았습니다.

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

현재 차트 데이터는 목(mock) 데이터를 사용하고 있습니다. 추후 실제 데이터 연동이 필요합니다.

📸 스크린샷 (Screenshots)

#️⃣ 관련 이슈 (Related Issues)

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!

이 풀 리퀘스트는 메인 페이지에 새로운 차트 기능을 추가하여 사용자에게 핵심 데이터를 시각적으로 제공하는 것을 목표로 합니다. 'recharts' 라이브러리를 도입하고, 이를 활용하여 다양한 차트 컴포넌트와 관련 데이터 및 스타일링 유틸리티를 구현했습니다. 이를 통해 메인 페이지의 정보 전달력을 높이고 사용자 경험을 개선합니다.

Highlights

차트 라이브러리 도입: 메인 페이지에 새로운 차트 시각화 기능을 도입하기 위해 'recharts' 라이브러리와 관련 의존성들이 프로젝트에 추가되었습니다.
메인 페이지 차트 UI 추가: 메인 페이지에 차트 데이터를 시각적으로 표시할 수 있는 'ChartSection' 및 재사용 가능한 'ChartBox' 컴포넌트가 새로 추가되었습니다.
차트 데이터 및 스타일링 유틸리티 구현: 차트 컴포넌트의 개발 및 테스트를 용이하게 하기 위한 목(mock) 데이터와 차트 색상 관리를 위한 유틸리티 함수가 구현되었습니다.

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.

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입니다. recharts 라이브러리를 도입하고 관련 컴포넌트, 목 데이터, 유틸리티 함수들을 추가했습니다. 전반적으로 잘 작성되었지만, 몇 가지 개선점을 제안합니다. 컴포넌트의 재사용성을 높이기 위해 하드코딩된 값을 동적으로 처리하고, 사용하지 않는 prop이나 코드를 정리하는 것이 좋습니다. 또한, React의 key prop 사용과 CSS 클래스 관리 방식을 일관성 있게 가져가는 것을 권장합니다.

gemini-code-assist · 2025-08-21T04:29:48Z

src/features/main/components/features/chart/ChartBox.tsx

+    showDot?: boolean;
+  }[];
+  title?: string;
+  height?: number;


height prop이 정의되어 있지만 컴포넌트 내에서 사용되지 않고 있습니다. ResponsiveContainer의 height가 300으로 고정되어 있기 때문입니다. 이 prop이 필요 없다면 제거하여 코드를 더 명확하게 만드는 것이 좋습니다.

gemini-code-assist · 2025-08-21T04:29:48Z

src/features/main/components/features/chart/ChartBox.tsx

+  return (
+    <div className='pt-5 pr-8 pb-1 pl-5'>
+      {title && (
+        <h3 className='mb-10 ml-5 text-start text-3xl font-bold text-[#333D4B]'>{title}</h3>


text-[#333D4B]와 같이 색상 값을 하드코딩하면 나중에 디자인 시스템을 변경하거나 다크 모드를 지원할 때 관리가 어려워집니다. tailwind.config.js나 CSS 변수를 통해 색상을 정의하고 의미 있는 이름(예: text-gray-800)으로 사용하는 것이 좋습니다.

gemini-code-assist · 2025-08-21T04:29:48Z

src/features/main/components/features/chart/ChartBox.tsx

+            domain={[0, 6]}
+            ticks={[0, 1, 2, 3, 4, 5, 6]}


YAxis의 domain과 ticks가 [0, 6]으로 하드코딩되어 있어 다른 데이터 범위에 대해 차트를 재사용하기 어렵습니다. 이 값들을 prop으로 받거나, recharts가 데이터에 기반해 자동으로 계산하도록 이 라인들을 제거하는 것을 고려해보세요. 이렇게 하면 컴포넌트의 재사용성이 향상됩니다.

gemini-code-assist · 2025-08-21T04:29:49Z

src/features/main/components/features/chart/ChartBox.tsx

+              return (
+                <ul className='m-0 flex list-none gap-5 p-0'>
+                  {lines.map((line, index) => (
+                    <li key={index} className='flex items-center gap-2'>


map 함수에서 index를 key로 사용하고 있습니다. 리스트가 정적이라 현재는 문제가 되지 않지만, 각 line 객체에 고유한 key 프로퍼티가 있으므로 key={line.key}를 사용하는 것이 더 안전하고 명확한 방법입니다.

Suggested change

<li key={index} className='flex items-center gap-2'>

<li key={line.key} className='flex items-center gap-2'>

gemini-code-assist · 2025-08-21T04:29:49Z

src/features/main/mock/chart-data.mock.ts

+    lines: [
+      {
+        key: '기준치',
+        color: '#0c3165',
+        name: '기준치',
+        showDot: false,
+      },
+      {
+        key: '변동률',
+        color: '#f57a0c',
+        name: '변동률',
+        showDot: true,
+      },
+    ],


CHART_DATA_CONFIGS의 lines 배열에 color 프로퍼티가 정의되어 있지만, ChartBox 컴포넌트에서는 이 값을 사용하지 않고 getChartColor(index)를 통해 색상을 동적으로 할당합니다. 이 color 프로퍼티는 혼란을 줄 수 있으므로 제거하는 것이 좋습니다.

lines: [ { key: '기준치', name: '기준치', showDot: false, }, { key: '변동률', name: '변동률', showDot: true, }, ],

gemini-code-assist · 2025-08-21T04:29:49Z

src/features/main/ui/ChartSection.tsx

+    <div className='mx-auto w-full max-w-6xl p-6'>
+      <div className='grid grid-cols-2 gap-6'>
+        {CHART_DATA_CONFIGS.map((config, index) => (
+          <div key={index} className='bg-white'>


map 함수에서 index를 key로 사용하고 있습니다. CHART_DATA_CONFIGS의 각 config 객체는 고유한 title을 가지고 있으므로, key={config.title}과 같이 더 안정적인 값을 사용하는 것이 좋습니다.

Suggested change

<div key={index} className='bg-white'>

<div key={config.title} className='bg-white'>

gemini-code-assist · 2025-08-21T04:29:49Z

src/pages/main/MainPage.tsx

-    <div className='flex h-screen w-full'>
-      <InputSection />
-      <MapSection />
+    <div className='flex h-screen w-full flex-col'>


h-screen을 사용하면 페이지 내용이 화면 높이보다 클 경우 잘릴 수 있습니다. min-h-screen을 사용하면 최소 높이를 화면 크기로 설정하면서 내용이 더 길어질 경우 스크롤이 가능해지므로 더 안전합니다.

Suggested change

<div className='flex h-screen w-full flex-col'>

<div className='flex min-h-screen w-full flex-col'>

gemini-code-assist · 2025-08-21T04:29:49Z

src/shared/utils/chart/chart-colors.ts

+ * @returns CSS 변수 문자열
+ */
+export const getChartColor = (index: number): string => {
+  return CHART_COLORS[index] || CHART_COLORS[index % CHART_COLORS.length];


CHART_COLORS[index] || CHART_COLORS[index % CHART_COLORS.length] 로직은 중복됩니다. index % CHART_COLORS.length는 index가 배열 범위 내에 있을 때와 벗어났을 때 모두 올바르게 동작하므로, CHART_COLORS[index % CHART_COLORS.length]로 단순화할 수 있습니다.

Suggested change

return CHART_COLORS[index] || CHART_COLORS[index % CHART_COLORS.length];

return CHART_COLORS[index % CHART_COLORS.length];

gemini-code-assist · 2025-08-21T04:29:49Z

src/shared/utils/chart/chart-colors.ts

+ * @returns Tailwind CSS 클래스명
+ */
+export const getChartColorClass = (index: number): string => {
+  return CHART_COLOR_CLASSES[index] || CHART_COLOR_CLASSES[index % CHART_COLOR_CLASSES.length];


getChartColor 함수와 마찬가지로, CHART_COLOR_CLASSES[index % CHART_COLOR_CLASSES.length]로 로직을 단순화할 수 있습니다.

Suggested change

return CHART_COLOR_CLASSES[index] || CHART_COLOR_CLASSES[index % CHART_COLOR_CLASSES.length];

return CHART_COLOR_CLASSES[index % CHART_COLOR_CLASSES.length];

Dobbymin added 7 commits August 21, 2025 13:25

chore: recharts 라이브러리 추가 및 관련 의존성 업데이트

dc31c4c

feat: 차트 색상 변수 추가

ebf1562

feat: 차트 색상 유틸리티 구현

80de150

feat: 차트 mock 데이터 생성

91b79e7

feat: 차트 컴포넌트 추가

2a04984

feat: 차트 섹션 컴포넌트 추가

65b97d1

feat: 메인 페이지에 차트 섹션 추가 및 레이아웃 수정

302935b

Dobbymin self-assigned this Aug 21, 2025

Dobbymin linked an issue Aug 21, 2025 that may be closed by this pull request

[UI 구현] 메인페이지 차트 관련 UI 구현 #23

Closed

gemini-code-assist bot reviewed Aug 21, 2025

View reviewed changes

Dobbymin added 5 commits August 21, 2025 13:40

fix: 차트 항목의 키 값을 인덱스에서 고유 키로 변경

8730d9f

fix: 차트 데이터에서 색상 속성 제거

42bbb8f

fix: 차트 항목의 키 값을 인덱스에서 제목으로 변경

d5aa806

fix: 메인 페이지의 레이아웃을 수정하여 최소 높이를 설정

637cdf3

fix: 차트 색상 반환 로직에서 불필요한 조건문 제거

0ced227

Dobbymin merged commit fada8fc into main Aug 21, 2025
2 checks passed

Dobbymin deleted the feat#23-mainpage-chart-ui branch August 21, 2025 04:42

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat#23-mainpage-chart-ui#25

feat#23-mainpage-chart-ui#25
Dobbymin merged 12 commits intomainfrom
feat#23-mainpage-chart-ui

Dobbymin commented Aug 21, 2025

Uh oh!

gemini-code-assist bot left a comment

Uh oh!

gemini-code-assist bot left a comment

Uh oh!

gemini-code-assist bot Aug 21, 2025

Uh oh!

gemini-code-assist bot Aug 21, 2025

Uh oh!

gemini-code-assist bot Aug 21, 2025

Uh oh!

gemini-code-assist bot Aug 21, 2025

Uh oh!

gemini-code-assist bot Aug 21, 2025

Uh oh!

gemini-code-assist bot Aug 21, 2025

Uh oh!

gemini-code-assist bot Aug 21, 2025

Uh oh!

gemini-code-assist bot Aug 21, 2025

Uh oh!

gemini-code-assist bot Aug 21, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

	<li key={index} className='flex items-center gap-2'>
	<li key={line.key} className='flex items-center gap-2'>

	<div key={index} className='bg-white'>
	<div key={config.title} className='bg-white'>

	<div className='flex h-screen w-full flex-col'>
	<div className='flex min-h-screen w-full flex-col'>

	return CHART_COLORS[index] \|\| CHART_COLORS[index % CHART_COLORS.length];
	return CHART_COLORS[index % CHART_COLORS.length];

	return CHART_COLOR_CLASSES[index] \|\| CHART_COLOR_CLASSES[index % CHART_COLOR_CLASSES.length];
	return CHART_COLOR_CLASSES[index % CHART_COLOR_CLASSES.length];

Conversation

Dobbymin commented Aug 21, 2025

📝 요약 (Summary)

✅ 주요 변경 사항 (Key Changes)

💻 상세 구현 내용 (Implementation Details)

🚀 트러블 슈팅 (Trouble Shooting)

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

📸 스크린샷 (Screenshots)

#️⃣ 관련 이슈 (Related Issues)

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Summary of Changes

Highlights

Footnotes

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

gemini-code-assist bot Aug 21, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Aug 21, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Aug 21, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Aug 21, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Aug 21, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Aug 21, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Aug 21, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Aug 21, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Aug 21, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant