Fix: 카테고리 이슈 #166
Fix: 카테고리 이슈 #166
Conversation
Walkthrough이 PR은 Changes
Sequence Diagram(s)sequenceDiagram
participant 사용자 as 사용자
participant 텍스트영역 as Textarea
participant 폼 as MemoForm
participant 저장 as DebouncedSave
사용자->>텍스트영역: keydown 이벤트 (예: '#')
텍스트영역->>폼: handleKeyDown 호출
폼-->>텍스트영역: '#' 삽입 및 상태 업데이트
사용자->>텍스트영역: 텍스트 내용 변경
텍스트영역->>폼: handleMemoChange 호출
폼->>저장: 저장 작업 (디바운스)
사용자->>폼: 카테고리 선택
폼-->>텍스트영역: handleCategorySelect 호출 (불필요 '#' 제거)
Poem
📜 Recent review detailsConfiguration used: .coderabbit.yaml 📒 Files selected for processing (1)
⏰ Context from checks skipped due to timeout of 90000ms (1)
🔇 Additional comments (7)
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
55f8159 to
55804fb
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
pages/side-panel/src/components/MemoForm.tsx (1)
112-146: 입력 처리 로직이 명확하게 개선되었습니다.'#' 키 입력 처리를 위한 새로운
handleKeyDown함수가 잘 구현되었습니다. 이제 사용자가 '#'을 입력할 때 기본 동작을 방지하고, 커서 위치를 계산하여 카테고리 목록을 적절한 위치에 표시합니다. 특히 화면 너비를 고려하여 카테고리 목록이 화면 밖으로 나가지 않도록 처리한 부분이 좋습니다.// 다음과 같이 뷰포트 너비를 확인하여 목록이 화면을 벗어나지 않도록 처리합니다 + const viewportWidth = window.innerWidth; + const CATEGORY_LIST_WIDTH = 256; // w-64 = 16rem = 256px + if (calculatedLeft + CATEGORY_LIST_WIDTH > viewportWidth) { + calculatedLeft = 0; + }다만 계산된 위치가 0으로 설정되는 경우, 화면 왼쪽 끝에 붙게 되는데 이는 UX 측면에서 개선할 여지가 있습니다. 사용자 경험을 더 좋게 하려면 화면 오른쪽에서 약간의 여백을 두는 것을 고려해보세요.
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
pages/side-panel/src/components/MemoForm.tsx(2 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: Run end-to-end tests
🔇 Additional comments (4)
pages/side-panel/src/components/MemoForm.tsx (4)
148-152: 텍스트 변경 처리 기능이 분리되어 코드 가독성이 향상되었습니다.새로 추가된
handleMemoChange함수는 텍스트 영역의 변경 이벤트를 처리하는 역할을 명확하게 담당하고 있습니다. debounce를 활용하여 불필요한 저장 작업을 최소화한 것도 좋은 접근입니다.이 분리를 통해 각 이벤트 핸들러가 한 가지 역할만 담당하도록 하여 단일 책임 원칙(SRP)을 잘 따르고 있습니다.
157-164: 카테고리 선택 로직의 버그 수정이 잘 이루어졌습니다.기존에는 마지막 문자를 무조건 제거했던 방식에서, '#' 문자의 정확한 위치를 찾아 해당 문자만 제거하도록 개선되었습니다. 이는 사용자가 카테고리 선택 시 의도치 않게 다른 문자가 삭제되는 버그를 해결합니다.
- // 이전 코드는 마지막 문자를 무조건 제거했을 것입니다 + const hashIndex = currentText.lastIndexOf('#'); + if (hashIndex !== -1) { + setValue('memo', currentText.slice(0, hashIndex) + currentText.slice(hashIndex + 1)); + }이 방식은 마지막 '#'의 위치를 정확히 찾아 해당 문자만 제거하므로 훨씬 안전합니다.
205-206: 적절한 이벤트 핸들러 연결이 이루어졌습니다.Textarea의 onChange 이벤트에 새로 구현된
handleMemoChange함수를 연결하여 텍스트 변경 이벤트를 적절히 처리하고 있습니다.
212-213: 키 입력 처리 핸들러가 적절히 연결되었습니다.Textarea에 onKeyDown 이벤트 핸들러로
handleKeyDown함수를 연결하여 '#' 키 입력을 감지하고 처리할 수 있도록 했습니다.
| onChange: handleMemoTextAreaChange, | ||
| onChange: handleMemoChange, | ||
| })} | ||
| {...rest} | ||
| ref={e => { | ||
| ref(e); | ||
| textareaRef.current = e; | ||
| }} | ||
| > |
There was a problem hiding this comment.
AS-IS : 마우스 커서가 #를 만나면 계속 카테고리 창이 열린다.
TO-BE : 사용자가 #를 타이핑하면 그 때 카테고리 창이 열린다.
해결 방법 : 기존 mouse이벤트의 change 타입에서 이벤트 감지 -> Keyboard이벤트의 keydown 타입에서 이벤트 감지
| const viewportWidth = window.innerWidth; | ||
| const CATEGORY_LIST_WIDTH = 256; // w-64 = 16rem = 256px | ||
|
|
||
| if (textareaRef.current) { | ||
| textareaRef.current.selectionStart = cursorPosition - 1; | ||
| textareaRef.current.selectionEnd = cursorPosition - 1; | ||
| if (calculatedLeft + CATEGORY_LIST_WIDTH > viewportWidth) { | ||
| calculatedLeft = 0; | ||
| } |
There was a problem hiding this comment.
AS-IS : 마우스 커서가 우측에 있을 때 #를 눌러 카테고리 선택 창을 열 경우, 화면이 잘린다.
TO-BE : 마우스 커서가 우측에 있을 때 #를 눌러 카테고리 선택 창을 열 경우, 카테고리 창이 좌측 상단에서 열린다.
해결 방법 : calculatedLeft + CATEGORY_LIST_WIDTH > viewportWidth 즉 현재 마우스 커서의 X좌표와 카테고리 너비를 합한 X좌표가 뷰포트 너비보다 클 경우, 카테고리 창의 X좌표를 0으로 설정한다.
Summary by CodeRabbit
새로운 기능
리팩토링