[#207] 작은 기기로 ProfileView를 렌더링 했을 때 히트맵 UI가 넘치는 현상을 해결한다

[opficdev]

• closed 작은 기기로 ProfileView를 렌더링 했을 때 히트맵 UI가 넘치는 현상을 해결한다 #207

[gemini-code-assist]

Summary of Changes

Hello, 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!

이 풀 리퀘스트는 작은 기기에서 ProfileHeatmapView의 UI 오버플로우 문제를 해결하기 위해 동적 레이아웃 시스템을 도입합니다. 히트맵 구성 요소를 리팩토링하여 사용 가능한 화면 너비에 따라 셀 크기와 간격을 계산하도록 하여 히트맵이 올바르게 확장되도록 합니다. 또한, 속성 이름이 명확성을 위해 업데이트되었습니다.

Highlights

• 속성 이름 변경: ProfileCompletionDay 구조체에서 isInMonth 속성을 isVisible로 이름을 변경하여 속성의 목적을 더 명확하게 했습니다.
• 동적 레이아웃 시스템 도입: 히트맵 레이아웃 계산을 중앙 집중화하는 ProfileHeatmapLayout 구조체를 도입하여 사용 가능한 너비에 반응하도록 했습니다.
• 히트맵 UI 리팩토링: ProfileHeatmapView 및 MonthCompactHeatmapView를 리팩토링하여 새로운 ProfileHeatmapLayout을 사용하여 셀 크기, 간격 및 기타 UI 요소를 동적으로 조정하도록 했습니다.

Changelog

• DevLog/Presentation/Structure/Profile/ProfileCompletionDay.swift
  • isInMonth 속성을 isVisible로 변경했습니다.
• DevLog/Presentation/Structure/Profile/ProfileCompletionQuarter.swift
  • 필터링 작업에서 isInMonth 사용을 isVisible로 업데이트했습니다.
• DevLog/Presentation/ViewModel/ProfileViewModel.swift
  • ProfileCompletionDay 객체 생성 시 isInMonth 할당을 새 isVisible 속성으로 업데이트했습니다.
• DevLog/UI/Profile/MonthCompactHeatmapView.swift
  • 크기 및 간격 조정을 위해 layout 속성을 추가하여 ProfileHeatmapLayout을 사용하도록 했습니다.
  • VStack 및 HStack 간격, Text 프레임 높이, RoundedRectangle 모서리 반경 및 스트로크 선 너비를 layout 속성을 사용하도록 업데이트했습니다.
  • onTapGesture 및 fillColor 로직에서 day.isInMonth를 day.isVisible로 변경했습니다.
• DevLog/UI/Profile/ProfileHeatmapView.swift
  • safeAreaInsets 및 sceneWidth 환경 변수를 추가했습니다.
  • 동적 레이아웃 계산을 위해 ProfileHeatmapLayout을 도입하고 활용했습니다.
  • weekdayLabel이 layout을 매개변수로 받아 속성을 사용하도록 수정했습니다.
  • 월별 HStack에서 Spacer()를 동적 monthSpacing으로 대체했습니다.
  • ProfileHeatmapLayout 구조체 정의를 이 파일로 이동했습니다.

Activity

• 이 풀 리퀘스트에 대한 활동은 아직 없습니다.

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 by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

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 pull request 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은 작은 기기에서 히트맵 UI가 화면을 벗어나는 문제를 해결하기 위해 동적 레이아웃을 도입한 점이 좋습니다. ProfileHeatmapLayout 구조체를 통해 가용 너비에 따라 셀 크기를 계산하는 방식은 올바른 접근입니다. 또한, isInMonth를 isVisible로 변경하여 프로퍼티의 역할을 더 명확하게 한 점도 좋은 개선입니다.

다만, 코드에 몇 가지 수정이 필요한 부분이 있습니다. ProfileHeatmapView에서 availableWidth를 계산할 때 사용된 매직 넘버 12에 대한 설명이 필요해 보입니다. 또한, MonthCompactHeatmapView에서 .stroke 수정자를 잘못 사용하여 컴파일 오류를 유발할 수 있는 코드가 있습니다. 자세한 내용은 각 파일의 주석을 참고해주세요.

[gemini-code-assist]

이 12라는 값은 어디서 온 것인가요? 매직 넘버로 보입니다. 이 값이 무엇을 의미하는지 설명하는 주석을 추가하거나, 의미를 알 수 있는 상수로 정의하여 가독성을 높이는 것이 좋겠습니다. 예를 들어, private let outerPadding: CGFloat = 16 와 private let innerPadding: CGFloat = 12 와 같이요. 만약 이 값이 다른 곳의 패딩 값과 관련이 있다면, 그 값을 직접 참조하는 것이 더 안전할 것입니다.