feat: 메모 생성/수정 모달의 카테고리 입력창에 CategoryList 컴포넌트 연동#143
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Walkthrough
Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant MemoModal
participant CategoryList
participant useCategories
User->>MemoModal: 카테고리 입력 필드에 포커스
MemoModal->>useCategories: 카테고리 목록 요청
useCategories-->>MemoModal: 카테고리 배열 반환
MemoModal->>CategoryList: 카테고리 목록 및 onMouseDown 콜백 전달
User->>CategoryList: 카테고리 클릭
CategoryList->>MemoModal: onMouseDown(카테고리 이름)
MemoModal->>MemoModal: 카테고리 상태 업데이트
Possibly related issues
Possibly related PRs
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
npm error Exit handler never called! ✨ Finishing Touches
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. 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
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (3)
src/components/category/CategoryList.tsx (1)
19-30: 카테고리 렌더링 로직 개선을 고려해보세요.현재 구현은 기능적으로 올바르지만 접근성 개선이 필요합니다.
다음과 같은 개선사항을 고려해보세요:
<ul> {categories.map(category => { const { name, id } = category; return ( <li key={id} - className="px-2.5 py-1 cursor-pointer hover:bg-gray-100" + className="px-2.5 py-1 cursor-pointer hover:bg-gray-100 focus:bg-gray-100 focus:outline-none" onMouseDown={() => onMouseDown(name)} + tabIndex={0} + role="option" + onKeyDown={(e) => { + if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault(); + onMouseDown(name); + } + }} > {name} </li> ); })} </ul>그리고 컨테이너에 role="listbox" 추가:
-<div className="max-h-[250px] overflow-y-auto w-[200px] h-auto py-2 rounded-xs bg-white shadow-sm text-neutral-800"> +<div + className="max-h-[250px] overflow-y-auto w-[200px] h-auto py-2 rounded-xs bg-white shadow-sm text-neutral-800" + role="listbox" +>src/components/memo-editor/MemoUpdateModal.tsx (1)
168-177: 카테고리 드롭다운 구현에서 개선사항을 고려해보세요.현재 구현은 기능적으로 올바르지만 몇 가지 개선점이 있습니다.
- 에러 상태 처리 추가:
+ const { categories, isLoading: isCategoriesLoading, isError: isCategoriesError } = useCategories(); {isCategoryFocused && ( <div className="absolute top-full left-0 mt-1 z-5"> + {isCategoriesError ? ( + <div className="w-[200px] p-2 bg-white shadow-sm rounded-xs text-red-600 text-sm"> + 카테고리를 불러올 수 없습니다. + </div> + ) : isCategoriesLoading ? ( + <div className="w-[200px] p-2 bg-white shadow-sm rounded-xs text-gray-500 text-sm"> + 카테고리 로딩 중... + </div> + ) : ( <CategoryList categories={categories} onMouseDown={name => { setMemoData(prev => ({ ...prev, category: name })); }} /> + )} </div> )}
- Z-index 충돌 방지: CategoryModal이 z-50을 사용하므로 CategoryList도 더 높은 z-index 사용을 고려해보세요.
- <div className="absolute top-full left-0 mt-1 z-5"> + <div className="absolute top-full left-0 mt-1 z-10">src/components/memo-editor/MemoCreateModal.tsx (1)
110-119: CategoryList 통합을 개선해보세요.MemoUpdateModal과 동일한 개선사항이 필요합니다.
에러 상태 처리와 z-index 조정을 고려해보세요:
+ const { categories, isLoading: isCategoriesLoading, isError: isCategoriesError } = useCategories(); {isCategoryFocused && ( - <div className="absolute top-full left-0 mt-1 z-5"> + <div className="absolute top-full left-0 mt-1 z-10"> + {isCategoriesError ? ( + <div className="w-[200px] p-2 bg-white shadow-sm rounded-xs text-red-600 text-sm"> + 카테고리를 불러올 수 없습니다. + </div> + ) : isCategoriesLoading ? ( + <div className="w-[200px] p-2 bg-white shadow-sm rounded-xs text-gray-500 text-sm"> + 카테고리 로딩 중... + </div> + ) : ( <CategoryList categories={categories} onMouseDown={name => { setMemoData(prev => ({ ...prev, category: name })); }} /> + )} </div> )}두 모달 컴포넌트에서 동일한 로직을 공유하므로 커스텀 훅으로 추출하는 것도 고려해볼 수 있습니다.
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/components/category/CategoryList.tsx(1 hunks)src/components/memo-editor/MemoCreateModal.tsx(4 hunks)src/components/memo-editor/MemoUpdateModal.tsx(5 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (2)
src/components/memo-editor/MemoUpdateModal.tsx (3)
src/hooks/useCategories.ts (1)
useCategories(23-34)src/components/category/CategoryList.tsx (1)
CategoryList(5-34)src/data/mocks.ts (1)
categories(172-198)
src/components/category/CategoryList.tsx (1)
src/data/mocks.ts (1)
categories(172-198)
🔇 Additional comments (20)
src/components/category/CategoryList.tsx (5)
3-3: 타입 import가 적절합니다.CategoryItem 타입을 올바르게 import하여 타입 안전성을 확보했습니다.
5-11: 컴포넌트 props 리팩터링이 잘 되었습니다.string 배열에서 CategoryItem 배열로 변경하고 onMouseDown 콜백을 추가한 것이 적절합니다. onMouseDown 사용은 input blur 이벤트보다 먼저 실행되어 포커스 경쟁 상태를 방지하는 좋은 접근법입니다.
3-3: 타입 import 추가 승인CategoryItem 타입을 import하여 타입 안전성을 향상시킨 것이 좋습니다.
5-11: props 인터페이스 개선 승인문자열 배열 대신 타입이 지정된 CategoryItem 배열을 받도록 변경하고, onMouseDown 콜백을 추가한 것이 좋은 개선입니다. 타입 안전성과 재사용성이 향상되었습니다.
19-30: 렌더링 로직 개선 승인구조분해 할당을 사용하여 name과 id를 추출하고, id를 key로 사용하는 것이 좋습니다. onMouseDown 이벤트 사용도 적절합니다 - 이는 input의 onBlur 이벤트보다 먼저 실행되어 카테고리 선택이 제대로 작동하도록 보장합니다.
src/components/memo-editor/MemoUpdateModal.tsx (8)
2-2: 필요한 import들이 적절히 추가되었습니다.CategoryList 컴포넌트와 useCategories 훅이 올바르게 import되었습니다.
Also applies to: 12-12
29-31: 카테고리 상태 관리가 잘 구현되었습니다.포커스 상태 추적을 위한 isCategoryFocused와 카테고리 데이터 fetch를 위한 useCategories 사용이 적절합니다.
157-159: 포커스 이벤트 핸들러 구현이 올바릅니다.onFocus/onBlur 핸들러를 통한 드롭다운 표시/숨김 로직이 잘 구현되었습니다.
2-2: import 문 추가 승인CategoryList 컴포넌트와 useCategories 훅을 적절히 import한 것이 좋습니다.
Also applies to: 12-12
29-31: 상태 관리 및 데이터 페칭 승인isCategoryFocused 상태 변수 추가와 useCategories 훅 사용이 적절합니다. 카테고리 드롭다운 표시/숨김 로직을 위한 깔끔한 구현입니다.
157-159: 포커스 이벤트 핸들러 승인onFocus와 onBlur 이벤트 핸들러가 적절히 구현되었습니다. 포커스 상태 관리를 통해 드롭다운 표시를 제어하는 것이 사용자 경험에 좋습니다.
170-176: 카테고리 선택 로직 승인onMouseDown 콜백을 통한 카테고리 선택 구현이 좋습니다. setMemoData를 사용하여 선택된 카테고리명으로 상태를 업데이트하는 것이 적절합니다.
168-177: 아래 스크립트를 실행해서CategoryModal파일 위치와 해당 컴포넌트의 z-index 설정(z-50) 여부를 확인해 주세요.#!/bin/bash # 1) CategoryModal 컴포넌트 파일 찾기 rg -n "CategoryModal" -g '*.tsx' # 2) 전체 TSX 파일에서 z-50 사용 여부 확인 rg -n "z-50" -g '*.tsx'src/components/memo-editor/MemoCreateModal.tsx (7)
2-2: 필요한 import들이 올바르게 추가되었습니다.MemoUpdateModal과 일관된 패턴으로 CategoryList와 useCategories가 import되었습니다.
Also applies to: 10-10
25-27: 상태 관리가 일관되게 구현되었습니다.MemoUpdateModal과 동일한 패턴으로 포커스 상태와 카테고리 데이터 관리가 구현되어 코드 일관성이 유지됩니다.
99-100: 포커스 관리 로직이 적절합니다.onFocus/onBlur 핸들러 구현이 MemoUpdateModal과 일치하여 일관된 사용자 경험을 제공합니다.
2-2: import 문 추가 승인CategoryList 컴포넌트와 useCategories 훅을 적절히 import한 것이 좋습니다. MemoUpdateModal과 일관성 있는 구현입니다.
Also applies to: 10-10
25-27: 상태 관리 및 데이터 페칭 승인isCategoryFocused 상태 변수와 useCategories 훅 사용이 적절합니다. MemoUpdateModal과 동일한 패턴으로 일관성이 좋습니다.
99-101: 포커스 이벤트 핸들러 승인onFocus와 onBlur 이벤트 핸들러 구현이 적절합니다. 사용자 상호작용을 통한 드롭다운 제어가 직관적입니다.
112-118: 카테고리 선택 로직 승인onMouseDown 콜백과 setMemoData를 통한 카테고리 업데이트 로직이 잘 구현되었습니다. MemoUpdateModal과 일관성 있는 패턴을 따르고 있어 좋습니다.
| {isCategoryFocused && ( | ||
| <div className="absolute top-full left-0 mt-1 z-5"> | ||
| <CategoryList | ||
| categories={categories} | ||
| onMouseDown={name => { | ||
| setMemoData(prev => ({ ...prev, category: name })); | ||
| }} | ||
| /> | ||
| </div> | ||
| )} |
There was a problem hiding this comment.
🛠️ Refactor suggestion
z-index 일관성 개선 제안
CategoryList의 z-index가 z-5로 설정되어 있는데, 이는 MemoUpdateModal과 동일한 문제입니다. CategoryModal(z-50)보다 낮은 값으로 인해 레이어링 문제가 발생할 수 있습니다.
- <div className="absolute top-full left-0 mt-1 z-5">
+ <div className="absolute top-full left-0 mt-1 z-40">이렇게 하면 CategoryModal(z-50)보다는 낮지만 충분히 높은 z-index를 사용하여 다른 UI 요소와의 충돌을 방지할 수 있습니다.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| {isCategoryFocused && ( | |
| <div className="absolute top-full left-0 mt-1 z-5"> | |
| <CategoryList | |
| categories={categories} | |
| onMouseDown={name => { | |
| setMemoData(prev => ({ ...prev, category: name })); | |
| }} | |
| /> | |
| </div> | |
| )} | |
| {isCategoryFocused && ( | |
| <div className="absolute top-full left-0 mt-1 z-40"> | |
| <CategoryList | |
| categories={categories} | |
| onMouseDown={name => { | |
| setMemoData(prev => ({ ...prev, category: name })); | |
| }} | |
| /> | |
| </div> | |
| )} |
🤖 Prompt for AI Agents
In src/components/memo-editor/MemoCreateModal.tsx around lines 110 to 119, the
z-index of the div wrapping CategoryList is set to z-5, which may cause layering
issues compared to CategoryModal's z-50. Update the z-index to a higher value,
such as z-40 or closer to z-50, to ensure proper stacking order and prevent UI
overlap conflicts.
2 participants
📋 작업 세부 사항
<MemoCreateModal / MemoUpdateModal>
onMouseDown, categories를 props로 받도록 수정 - categories는 useCategories를 통해 받아오도록 함. onBlur 이전에 클릭을 받을 수 있도록 onClick -> onMouseDown으로 수정카테고리 input창에 onBlur, onFocus 속성 추가
포커싱 여부를 관리하는 categoryFocused useState 추가
🔧 변경 사항 요약
메모 생성/수정 모달의 카테고리 입력창에 CategoryList 컴포넌트 연동
Summary by CodeRabbit
신규 기능
리팩터링