diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx index f62392c..7373e08 100644 --- a/src/components/layout/Sidebar.tsx +++ b/src/components/layout/Sidebar.tsx @@ -1,6 +1,6 @@ 'use client'; -import { useState, useRef, useCallback, useEffect } from 'react'; +import { useState, useRef, useCallback, useEffect, useMemo } from 'react'; import Link from 'next/link'; import { usePathname } from 'next/navigation'; // 🎨 이미지 μ΅œμ ν™”λ₯Ό μœ„ν•΄ next/image μ‚¬μš© @@ -79,6 +79,12 @@ function CategoryItem({ category, depth, pathname, isEditMode, onDrop, onAdd, on } }; + // πŸ†• ν•˜μœ„ μΉ΄ν…Œκ³ λ¦¬λ„ ID 순으둜 μ •λ ¬ + const sortedChildren = useMemo(() => { + if (!category.children) return []; + return [...category.children].sort((a, b) => a.id - b.id); + }, [category.children]); + return (
- {category.children && category.children.length > 0 && ( + {sortedChildren.length > 0 && (
- {category.children.map((child) => ( + {sortedChildren.map((child) => ( { + if (!categories) return undefined; + return [...categories].sort((a, b) => a.id - b.id); + }, [categories]); + const { data: profile, isLoading: isProfileLoading } = useQuery({ queryKey: ['profile'], queryFn: getProfile, @@ -373,7 +385,7 @@ export default function Sidebar() { onDragLeave={isCategoryEditMode ? (e) => { e.preventDefault(); setIsRootDragOver(false); } : undefined} onDrop={isCategoryEditMode ? handleRootDrop : undefined} > - {categories?.map((cat) => ( + {sortedCategories?.map((cat) => ( ))}