refactor: 1주차 추가 QA#235
Conversation
WalkthroughPollRecord option click handlers now receive and stop the mouse event. RecordItem introduces a relative container and an overlay to block interactions when shouldBlur is true, removing pointer-events styling from CSS. Clicks on blurred items stop propagation. PageRangeSection input width calc slightly adjusted. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor U as User
participant RI as RecordItem
participant OV as Overlay (shouldBlur)
participant AC as Actions (like/comment/pin)
U->>RI: Click on item
alt shouldBlur = true
RI->>OV: Render overlay (abs, zIndex 10)
U-->>OV: Click
OV-->>RI: stopPropagation()
note over OV,RI: 아래 컴포넌트로 이벤트 전파 차단
else shouldBlur = false
RI-->>RI: handleClick(e)
RI->>AC: Trigger actions/menus
end
sequenceDiagram
autonumber
actor U as User
participant PR as PollRecord
participant OP as Option Button
U->>OP: Click option
OP->>PR: handleOptionClick(e, option)
PR-->>PR: e.stopPropagation()
PR->>PR: Guard checks (alreadyVoted, updating, etc.)
PR->>PR: Proceed with vote update (unchanged flow)
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested reviewers
Poem
✨ 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 |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![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
🧹 Nitpick comments (6)
src/components/recordwrite/PageRangeSection.styled.ts (1)
55-56: 입력 시작 시 폭이 placeholder(12px)보다 줄어드는 레이아웃 시프트 발생 가능inputLength가 1일 때 9px로 줄어 placeholder 12px 대비 시프트가 생깁니다. 최소값을 12로 맞춰주세요.
- return `${Math.max(9, props.inputLength * 9)}px`; + return `${Math.max(12, props.inputLength * 9)}px`;src/components/memory/RecordItem/PollRecord.tsx (2)
1-1: React 네임스페이스 의존 제거: 이벤트 타입은 명시 import 권장빌드 설정에 따라 React 네임스페이스 타입 참조가 실패할 수 있습니다. MouseEvent 타입을 명시 import로 전환해 주세요.
-import { useState, useEffect, useRef } from 'react'; +import { useState, useEffect, useRef } from 'react'; +import type { MouseEvent } from 'react'; @@ - const handleOptionClick = async (e: React.MouseEvent, option: PollOption) => { + const handleOptionClick = async (e: MouseEvent, option: PollOption) => {Also applies to: 70-72
156-161: 중복 방어 로직 정리: overlay + stopPropagation이 있으므로 pointerEvents 강제는 생략 가능shouldBlur일 때 onClick을 끄고, 상위에서 오버레이가 클릭을 차단하므로 pointerEvents까지 막을 필요는 없어 보입니다. 스타일 간소화로 유지보수성을 높여주세요.
- style={{ - cursor: shouldBlur ? 'default' : (isVoting ? 'not-allowed' : 'pointer'), - opacity: shouldBlur ? 1 : (isVoting ? 0.7 : 1), - pointerEvents: shouldBlur ? 'none' : 'auto' - }} + style={{ + cursor: shouldBlur ? 'default' : (isVoting ? 'not-allowed' : 'pointer'), + opacity: shouldBlur ? 1 : (isVoting ? 0.7 : 1), + }}src/components/memory/RecordItem/RecordItem.tsx (3)
269-275: 블라인드 차단 로직 적절 + 이벤트 타입 import 권장버블 차단으로 더보기 메뉴 오작동을 막는 방향 좋습니다. 이벤트 타입은 명시 import로 교체해 빌드 환경 의존을 줄이세요.
-import { useState, useCallback } from 'react'; +import { useState, useCallback } from 'react'; +import type { MouseEvent } from 'react'; @@ - const handleClick = useCallback((e: React.MouseEvent) => { + const handleClick = useCallback((e: MouseEvent) => {
312-316: position 중복 선언 제거Container.styled에서 이미 position: relative를 설정했습니다. inline 스타일의 중복 선언은 제거하는 편이 명확합니다.
- style={{ - cursor: 'pointer', - position: 'relative', - }} + style={{ + cursor: 'pointer', + }}
318-333: 오버레이에서 클릭 외 입력도 차단모바일/데스크톱에서 mousedown/touchstart가 선행될 수 있어 같이 막아두면 안전합니다. 테스트 편의상 data-testid도 부여를 권장합니다.
<div style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, zIndex: 10, cursor: 'default', }} - onClick={(e) => { + data-testid="blind-overlay" + onClick={(e) => { e.stopPropagation(); }} + onMouseDown={(e) => e.stopPropagation()} + onTouchStart={(e) => e.stopPropagation()} />
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- Jira integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (4)
src/components/memory/RecordItem/PollRecord.tsx(2 hunks)src/components/memory/RecordItem/RecordItem.styled.ts(1 hunks)src/components/memory/RecordItem/RecordItem.tsx(2 hunks)src/components/recordwrite/PageRangeSection.styled.ts(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
src/components/memory/RecordItem/PollRecord.tsx (2)
src/types/memory.ts (1)
PollOption(81-88)src/components/memory/RecordItem/PollRecord.styled.ts (1)
PollOption(23-32)
🔇 Additional comments (1)
src/components/memory/RecordItem/RecordItem.styled.ts (1)
8-9: overlay 포지셔닝을 위한 position: relative 추가, 적절합니다오버레이 절대배치를 위한 상대 기준이 생겨 의도대로 동작할 것입니다. 추가로, Container에 filter가 적용되어 자식(오버레이 포함)도 블러링되는 점은 의도인지 한번 확인 부탁드립니다. 의도와 다르면 블러를 콘텐츠 래퍼로 이동하는 방식을 고려해 주세요.
2 participants
#️⃣연관된 이슈
#229
📝작업 내용
기록장에서 발생하는 두 가지 사용자 경험 문제를 해결했습니다.
1. 투표 버튼 클릭 시 더보기 메뉴가 열리는 문제 수정
투표 기록에서 투표 옵션을 클릭할 때 이벤트 버블링으로 인해 상위 컨테이너의 클릭 이벤트가 함께 발생하여 더보기 메뉴가 의도치 않게 열리는 문제가 있었습니다. PollRecord 컴포넌트의
handleOptionClick핸들러에e.stopPropagation()을 추가하여 이벤트 전파를 차단했습니다.2. 블라인드 처리된 기록에서 클릭 이벤트가 뒤의 버튼들로 전달되는 문제 수정
블라인드 처리된 기록의 블러 영역을 클릭했을 때, CSS blur 효과만 적용되고 실제 클릭 이벤트는 막히지 않아서 뒤쪽에 있는 좋아요, 댓글, 핀하기 버튼들이 의도치 않게 동작하는 문제가 있었습니다. 이를 해결하기 위해 블라인드 상태일 때 전체 컨테이너 위에 투명한 오버레이를 추가하고, 해당 오버레이에서 클릭 이벤트를
stopPropagation()으로 차단하도록 구현했습니다. 또한 RecordItem 컨테이너의handleClick함수에서도 블라인드 상태일 때는 더보기 메뉴가 열리지 않도록 추가 보완했습니다.3. 기록 작성 페이지의 페이지 입력 필드 길이 개선
Summary by CodeRabbit