Feat(client): 개발 QA 1차(사이드바 카테고리 이모지 카운트 수정) #134
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Walkthrough사용자 입력 카테고리명 길이 검증을 코드포인트 기반에서 그래프림(문자 소구성) 기반으로 전환했습니다. 이를 위해 graphemeLength 유틸을 추가하고, PopupPortal 내 모든 length 비교 로직을 graphemeLength 결과로 대체했습니다. 공개 API 변경은 없습니다. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
✅ Storybook chromatic 배포 확인: |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
apps/client/src/shared/components/sidebar/PopupPortal.tsx (1)
5-77: 카테고리/이름 길이 검사에서 .length 사용을 graphemeLength로 교체하세요PopupPortal는 graphemeLength를 사용하고 있으나, 리포지토리에서 문자열 길이 검사에 .length를 여전히 사용하는 코드가 발견되었습니다(유니코드/이모지 등에서 잘못된 길이 판단 발생). 아래 위치를 문자열 글자수 검사는 graphemeLength로 대체하세요.
- apps/client/src/shared/components/cardEditModal/CardEditModal.tsx — if (categoryTitle.length > 20) { … } (약 58행) → graphemeLength(categoryTitle.trim()) 기준으로 변경 필요.
- apps/client/src/pages/remind/Remind.tsx, apps/client/src/pages/myBookmark/MyBookmark.tsx — articles.length > 0 등은 배열 길이 검사이므로 변경 불필요.
🧹 Nitpick comments (6)
apps/client/src/shared/utils/grapheme.ts (4)
1-7: 폴백 정확도 개선: 코드포인트 카운트 대신 진짜 ‘grapheme’ 분할 사용 제안Intl.Segmenter 미지원 환경에서 Array.from(s).length는 코드포인트 길이라 '❤️', '👍🏻', '🇰🇷', '👨👩👧👦', 분해된 한글 자모(가) 등이 여전히 2개 이상으로 집계될 수 있습니다. QA 이슈(#133)가 특정 환경에서 재발할 여지가 있습니다. Segmenter가 없을 때는 경량 라이브러리(graphemer 또는 grapheme-splitter)로 폴리필을 권장합니다.
다음과 같이 대체를 제안합니다(예: graphemer):
+import GraphemeSplitter from 'graphemer'; const _seg = typeof Intl !== 'undefined' && Intl.Segmenter - ? new Intl.Segmenter('ko', { granularity: 'grapheme' }) + ? new Intl.Segmenter(undefined, { granularity: 'grapheme' }) : null; -export const graphemeLength = (s: string) => - _seg ? Array.from(_seg.segment(s)).length : Array.from(s).length; +const _splitter = _seg ? null : new GraphemeSplitter(); + +export const graphemeLength = (s: string) => { + if (_seg) { + // 비용 줄이기: 배열 생성 없이 카운트 + let n = 0; + for (const _ of _seg.segment(s)) n++; + return n; + } + return _splitter!.countGraphemes(s); +};
3-3: 로케일 하드코딩 불필요grapheme 분할은 로케일 비의존적(UAX #29)이라 'ko'를 고정하지 않아도 됩니다. 런타임 기본값(undefined) 사용이 안전합니다. 위 diff에 반영했습니다.
6-7: 미세 최적화: Array.from 할당 제거Segmenter 사용 시 매 타이핑마다 배열·세그먼트 객체를 생성합니다. for-of 루프로 카운트하면 동등한 가독성으로 할당을 줄일 수 있습니다. 위 diff에 포함했습니다.
6-7: 크로스‑환경 검증 케이스 제안다음 값이 모두 1로 카운트되는지(특히 Segmenter 미지원 환경) 테스트 추가를 권합니다: '😊', '👍🏻', '❤️', '🇰🇷', '👨👩👧👦', '가'(분해 자모). 필요 시 테스트 코드 초안 제공 가능합니다.
apps/client/src/shared/components/sidebar/PopupPortal.tsx (2)
46-49: trim 이후 그래프림 길이 사용 일관성 확인중복 검사와 동일하게 trim된 value를 기준으로 glen을 계산한 점 좋습니다. categoryList의 name이 미리 trim/정규화(NFC)되어 있는지도 한번만 확인 부탁드립니다(공백/정규화 차이로 오탑재 방지).
77-77: 차단 조건 적용 OK. 버튼 상태 동기화 여부 확인onRightClick에서만 차단하면 사용자는 버튼이 활성처럼 보여 혼동할 수 있습니다. 디자인 시스템 Popup이 비활성화 프롭을 제공한다면 함께 전달하여 시각적 피드백을 동기화하는 것을 권장합니다.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
apps/client/src/shared/components/sidebar/PopupPortal.tsx(4 hunks)apps/client/src/shared/utils/grapheme.ts(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
apps/client/src/shared/components/sidebar/PopupPortal.tsx (1)
apps/client/src/shared/utils/grapheme.ts (1)
graphemeLength(6-7)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: storybook
🔇 Additional comments (2)
apps/client/src/shared/components/sidebar/PopupPortal.tsx (2)
5-5: graphemeLength 도입 적절합니다카테고리명 길이 판단의 소스 오브 트루스를 통일해 이슈 #133의 근본 원인(이모지 카운트)을 해결합니다.
62-66: 경계값 처리(L==MAX, L>MAX) 깔끔합니다MAX일 때 가이드만 표시하고 오류 UI/차단은 하지 않는 흐름이 UX에 부합합니다.
1 participant
📌 Related Issues
📄 Tasks
⭐ PR Point (To Reviewer)
📷 Screenshot
Summary by CodeRabbit