feat: 아티클 하이라이트 기능 구현 (커스텀 팔레트, 하이라이트 목록)#66
Conversation
gomminjae
commented
Feb 24, 2026
gomminjae
commented
- 네이티브 iOS 메뉴 대신 JS 커스텀 플로팅 팔레트 구현 (5색 + 밑줄 + 삭제)
- 기존 하이라이트 탭 시 에디트 메뉴로 색상 변경/삭제 기능
- 하이라이트 목록 바텀시트 디자인 (nohighlight 에셋, 컬러바, lineTrash)
- 글자 크기 기본 20pt, 범위 15~25pt, 아웃라인 스타일 버튼
- 스크롤 최상단 버튼 추가
- 밑줄 색상 #EF4444, highlight-focused 색상 #2866D3 통일
- SwiftData 기반 하이라이트 저장/조회/삭제/타입변경
- 네이티브 iOS 메뉴 대신 JS 커스텀 플로팅 팔레트 구현 (5색 + 밑줄 + 삭제) - 기존 하이라이트 탭 시 에디트 메뉴로 색상 변경/삭제 기능 - 하이라이트 목록 바텀시트 디자인 (nohighlight 에셋, 컬러바, lineTrash) - 글자 크기 기본 20pt, 범위 15~25pt, 아웃라인 스타일 버튼 - 스크롤 최상단 버튼 추가 - 밑줄 색상 #EF4444, highlight-focused 색상 #2866D3 통일 - SwiftData 기반 하이라이트 저장/조회/삭제/타입변경 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Summary of ChangesHello @gomminjae, 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은 아티클 하이라이트 기능을 대폭 개선하여 사용자 경험을 향상시킵니다. 네이티브 iOS 메뉴 대신 커스텀 JavaScript 기반의 플로팅 팔레트를 도입하여 하이라이트 생성 및 편집을 더욱 유연하게 만들었으며, 하이라이트 목록 UI를 재설계하고 글꼴 크기 조절 및 스크롤 최상단 이동과 같은 편의 기능을 추가했습니다. 또한, SwiftData를 활용하여 하이라이트 데이터를 효율적으로 관리할 수 있도록 백엔드 로직을 강화했습니다. Highlights
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. Changelog
Activity
Using Gemini Code AssistThe 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
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 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
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
| { | ||
| "images" : [ | ||
| { | ||
| "filename" : "Icon Button.pdf", | ||
| "idiom" : "universal" | ||
| } | ||
| ], | ||
| "info" : { | ||
| "author" : "xcode", | ||
| "version" : 1 | ||
| } | ||
| } |
There was a problem hiding this comment.
이 trashbin.imageset 애셋은 코드에서 사용되지 않는 것으로 보입니다. 실제 코드에서는 DesignSystemAsset.lineTrash가 사용되고 있으며, 이는 Line Trash.imageset에 해당합니다. 이 파일은 개발 과정에서 남은 불필요한 파일일 수 있으므로, 프로젝트를 깔끔하게 유지하기 위해 삭제하는 것을 고려해 보세요. 또한 내부의 이미지 파일명인 Icon Button.pdf도 좀 더 설명적인 이름으로 바꾸면 좋을 것 같습니다.
| // MARK: - Scroll Tracking | ||
|
|
||
| func scrollViewDidScroll(_ scrollView: UIScrollView) { | ||
| let shouldShow = scrollView.contentOffset.y > 200 |
There was a problem hiding this comment.
scrollViewDidScroll 함수 내에서 스크롤 최상단 버튼 표시 여부를 결정하는 값 200이 매직 넘버로 사용되었습니다. 이 값을 의미를 알 수 있는 상수로 추출하면 가독성과 유지보수성을 높일 수 있습니다. 예를 들어, Coordinator 내부에 private let scrollToTopButtonVisibleOffsetY: CGFloat = 200와 같이 정의할 수 있습니다.
| private var highlightColor: Color { | ||
| switch highlight.highlightType { | ||
| case "yellow": return Color(red: 1.0, green: 0.96, blue: 0.62) | ||
| case "pink": return Color(red: 0.97, green: 0.73, blue: 0.85) | ||
| case "green": return Color(red: 0.78, green: 0.90, blue: 0.79) | ||
| case "blue": return Color(red: 0.73, green: 0.87, blue: 0.98) | ||
| case "underline": return .clear | ||
| default: return .clear | ||
| case "yellow": return Color(hex: "#FBE96C") | ||
| case "orange": return Color(hex: "#FFC194") | ||
| case "pink": return Color(hex: "#F1B2C7") | ||
| case "green": return Color(hex: "#D7EDA1") | ||
| case "blue": return Color(hex: "#95D5EC") | ||
| case "underline": return Color(hex: "#EF4444") | ||
| default: return Color.gray.opacity(0.4) | ||
| } |
There was a problem hiding this comment.
HighlightRowView의 highlightColor 연산 프로퍼티 내에서 하이라이트 색상들이 하드코딩된 hex 값으로 사용되고 있습니다. 이 색상들은 ArticleHTMLBuilder.swift의 CSS에서도 중복으로 사용되고 있어 유지보수를 어렵게 만듭니다. 이 색상들을 디자인 시스템의 일부로 통합하거나, 최소한 한 곳에서 상수로 정의하여 공유하는 것이 좋습니다.
| RoundedRectangle(cornerRadius: highlight.highlightType == "underline" ? 1 : 3) | ||
| .fill(highlightColor) | ||
| .frame(width: highlight.highlightType == "underline" ? 2 : 6) |
There was a problem hiding this comment.
HighlightRowView의 body 내에서 좌측 컬러 바의 cornerRadius와 width를 설정할 때 1, 3, 2, 6과 같은 매직 넘버가 사용되었습니다. 이 값들을 의미있는 이름의 상수로 정의하면 코드의 가독성을 높일 수 있습니다.
| private func formatDate(_ date: Date) -> String { | ||
| let formatter = DateFormatter() | ||
| formatter.locale = Locale(identifier: "ko_KR") | ||
| formatter.dateFormat = "M월 d일 HH:mm" | ||
| formatter.dateFormat = "yyyy-MM-dd HH:mm" | ||
| return formatter.string(from: date) | ||
| } |
There was a problem hiding this comment.
formatDate 함수가 ArticleDetailView와 HighlightRowView 두 곳에 중복으로 구현되어 있습니다. 코드 중복을 피하고 재사용성을 높이기 위해 이 함수를 Date의 extension이나 별도의 유틸리티 파일로 옮기는 것을 추천합니다.
| palette.style.top = (menuTop < 10 ? rect.bottom + 8 : menuTop) + 'px'; | ||
| palette.style.left = Math.min(Math.max(rect.left + rect.width / 2, 120), window.innerWidth - 120) + 'px'; |
There was a problem hiding this comment.
showSelectionPalette 함수에서 팔레트의 위치를 계산할 때 46, 120과 같은 매직 넘버가 사용되었습니다. 이 값들은 팔레트의 높이나 여백과 관련이 있을 것으로 보입니다. 스크립트 상단에 상수로 정의해두면 (예: const PALETTE_TOP_OFFSET = 46;) 나중에 스타일을 변경할 때 더 쉽게 관리할 수 있습니다. showHighlightEditMenu 함수에서도 동일한 문제가 발견되었습니다.
- TRASH_SVG, hlTypes 등 긴 줄 분리하여 line_length 해결 - ArticleHighlightJS enum body를 extension으로 분리하여 type_body_length 해결 - HighlightListView/HighlightRowView를 별도 파일로 분리하여 file_length 해결 - identifier_name (h → highlight), attributes 위반 수정 - highlight-underline CSS 줄바꿈 처리 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1 participant
