Skip to content

feat: 메모 생성/수정 모달의 카테고리 입력창에 CategoryList 컴포넌트 연동 #143

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
unanbb merged 4 commits into from
Jun 20, 2025
+46 −5
Merged

feat: 메모 생성/수정 모달의 카테고리 입력창에 CategoryList 컴포넌트 연동 #143

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d47207e
feat: MemoCreateModal에 CategoryList 연동 #100
unanbb Jun 20, 2025
c7ca25b
fix: CategoryList의 li key 변경 #100
unanbb Jun 20, 2025
dc8f906
refactor: CategoryList의 props명 onMouseDown으로 변경 #100
unanbb Jun 20, 2025
55dca13
feat: MemoUpdateModal에 CategoryList 연동 #100
unanbb Jun 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 13 additions & 5 deletions src/components/category/CategoryList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,30 @@
'use client';

export default function CategoryList({ categories }: { categories: string[] }) {
import type { CategoryItem } from '@/types/category';

export default function CategoryList({
categories,
onMouseDown,
}: {
categories: CategoryItem[];
onMouseDown: (category: string) => void;
}) {
if (categories.length === 0) {
return <div className="w-[200px] h-[200px] py-2">카테고리가 없습니다.</div>;
}

return (
<div className="max-h-[250px] overflow-y-auto w-[200px] h-auto py-2 rounded-xs bg-white shadow-sm text-neutral-800">
<ul>
{categories.map((category, idx) => {
{categories.map(category => {
const { name, id } = category;
return (
<li
key={`${category}-${idx}`}
key={id}
className="px-2.5 py-1 cursor-pointer hover:bg-gray-100"
onClick={() => console.log(category)}
onMouseDown={() => onMouseDown(name)}
>
{category}
{name}
</li>
);
})}
Expand Down
16 changes: 16 additions & 0 deletions src/components/memo-editor/MemoCreateModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
'use client';
import CategoryList from '@/components/category/CategoryList';
import CategoryModal from '@/components/category/CategoryModal';
import AddButton from '@/components/common/AddButton';
import CrossButton from '@/components/common/CrossButton';
import MemoEditorSkeleton from '@/components/common/MemoEditorSkeleton';
import LexicalMarkdownEditor from '@/components/memo-editor/LexicalMarkdownEditor/LexicalMarkdownEditor';
import { Modal } from '@/components/Modal';
import showToast from '@/components/toast/showToast';
import useCategories from '@/hooks/useCategories';
import usePostMemo from '@/hooks/usePostMemo';
import { type MemoProps } from '@/types/memo';
import { useCallback, useState } from 'react';
Expand All @@ -20,7 +22,9 @@ export default function MemoCreateModal({ onClose }: MemoCreateModalProps) {
content: '',
category: '',
});
const [isCategoryFocused, setIsCategoryFocused] = useState(false);

const { categories } = useCategories();
const { postMemo, isLoading } = usePostMemo();

const submitMemo = useCallback(async () => {
Expand Down Expand Up @@ -92,6 +96,8 @@ export default function MemoCreateModal({ onClose }: MemoCreateModalProps) {
name="category"
value={memoData.category}
onChange={handleChange}
onFocus={() => setIsCategoryFocused(true)}
onBlur={() => setIsCategoryFocused(false)}
className="w-full rounded-md border border-gray-200 bg-gray-50 px-6 py-1.5 text-sm focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 placeholder:text-gray-400"
/>
<div className="absolute right-0 top-1/2 transform -translate-y-1/2">
Expand All @@ -101,6 +107,16 @@ export default function MemoCreateModal({ onClose }: MemoCreateModalProps) {
className="p-1"
/>
</div>
{isCategoryFocused && (
<div className="absolute top-full left-0 mt-1 z-5">
<CategoryList
categories={categories}
onMouseDown={name => {
setMemoData(prev => ({ ...prev, category: name }));
}}
/>
</div>
)}
Comment on lines +110 to +119
Copy link
Copy Markdown

@coderabbitai coderabbitai bot Jun 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ 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.

Suggested change
{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.

{isOpenCategoryModal && (
<div className="absolute top-1 left-44 z-50">
<CategoryModal onClose={handleCloseCategoryModal} />
Expand Down
17 changes: 17 additions & 0 deletions src/components/memo-editor/MemoUpdateModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
'use client';
import CategoryList from '@/components/category/CategoryList';
import CategoryModal from '@/components/category/CategoryModal';
import AddButton from '@/components/common/AddButton';
import CrossButton from '@/components/common/CrossButton';
Expand All @@ -8,6 +9,7 @@ import LexicalMarkdownEditor from '@/components/memo-editor/LexicalMarkdownEdito
import { Modal } from '@/components/Modal';
import showToast from '@/components/toast/showToast';
import { showUndoDeleteToast } from '@/components/toast/showUndoDeleteToast';
import useCategories from '@/hooks/useCategories';
import useDeleteMemo from '@/hooks/useDeleteMemo';
import useGetMemoById from '@/hooks/useGetMemoById';
import useUpdateMemo from '@/hooks/useUpdateMemo';
Expand All @@ -24,6 +26,9 @@ export default function MemoUpdateModal({ onClose, id }: MemoUpdateModalProps) {
const { deleteMemo } = useDeleteMemo();

const [isOpenCategoryModal, setIsOpenCategoryModal] = useState(false);
const [isCategoryFocused, setIsCategoryFocused] = useState(false);

const { categories } = useCategories();

const [memoData, setMemoData] = useState<{
id?: string;
Expand Down Expand Up @@ -149,6 +154,8 @@ export default function MemoUpdateModal({ onClose, id }: MemoUpdateModalProps) {
name="category"
value={displayMemoData.category}
onChange={handleChange}
onFocus={() => setIsCategoryFocused(true)}
onBlur={() => setIsCategoryFocused(false)}
className="w-full rounded-md border border-gray-200 bg-gray-50 px-6 py-1.5 text-sm focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 placeholder:text-gray-400"
/>
<div className="absolute right-0 top-1/2 transform -translate-y-1/2">
Expand All @@ -158,6 +165,16 @@ export default function MemoUpdateModal({ onClose, id }: MemoUpdateModalProps) {
className="p-1"
/>
</div>
{isCategoryFocused && (
<div className="absolute top-full left-0 mt-1 z-5">
<CategoryList
categories={categories}
onMouseDown={name => {
setMemoData(prev => ({ ...prev, category: name }));
}}
/>
</div>
)}
{isOpenCategoryModal && (
<div className="absolute top-1 left-44 z-50">
<CategoryModal onClose={handleCloseCategoryModal} />
Expand Down
Loading