[Feat/component/server channel/flow-27] ServerChannelSidebar 구성 및 채널 DnD 기능 추가

[xeunnie]

💡 PR 제목

✅ 요구사항

• 서버 ID에 따라 채널 목록을 API로 받아와 렌더링
• 채널을 카테고리별로 그룹화하여 출력
• 채널 항목은 드래그 앤 드롭 가능
• 선택된 채널은 URL 기준으로 하이라이트 처리
• 채널 클릭 시 해당 채널로 라우팅 (/channels/:serverId/:channelId)

✅ 기능1

• useChannelList 훅을 통한 서버 채널 데이터 fetch
• ServerChannelList: 카테고리 분류 및 채널 렌더링
• ChannelCategory: 아코디언 + @dnd-kit 기반 정렬 지원
• ChannelItem: 채널별 아이콘 렌더링 + 드래그 핸들링 + 선택 여부 표시
• ServerChannelSidebar: 레이아웃 포함 렌더링

✅ 리뷰어가 알아야할 사항

• ChannelItem 내에서 직접 라우팅 처리 (useNavigate)
• 선택된 채널은 useParams().channelId로 판별하여 스타일링 처리
• 카테고리별 정렬은 현재 local state로만 처리 중 (추후 서버 저장 필요)
• clsx, lucide-react, @dnd-kit/core 사용

✅ 체크리스트

• 자신의 코드에 대한 리뷰를 진행했습니다
• 실행 후 심각한 버그나 경고문이 없음을 확인했습니다
• 이해하기 어려운 부분에 적절한 주석을 첨부했습니다
• 요구사항 변경, 레이아웃 변경 등 변경사항을 문서에 반영했습니다

[netlify]

❌ Deploy Preview for chatflow-project failed.

Name	Link
🔨 Latest commit	f96f8f0
🔍 Latest deploy log	https://app.netlify.com/sites/chatflow-project/deploys/6810b25483e0720008a3c5b7

[Copilot]

Pull Request Overview

This PR implements the new ServerChannelSidebar with drag-and-drop support for channel sorting and related sidebar refactoring. Key changes include:

• Adding new components for server channel listing and DnD functionality (ChannelNavigation, ChannelItem, ChannelCategory).
• Replacing the outdated DirectBar, NavigationCard, and ChannelSidebar components with updated sidebar components (DirectChannelSidebar and ServerChannelSidebar) in the layout and router.
• Moving the useChannelList hook from the chat feature to the channel feature with updated API integration.

Reviewed Changes

Copilot reviewed 29 out of 31 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
src/view/components/layout/sidebar/components/channel/ChannelNavigation.tsx	New navigation component for channel lists using NavigationCard.
src/view/components/layout/sidebar/components/channel/ChannelItem.tsx	New channel item component with drag support using @dnd-kit/core.
src/view/components/layout/sidebar/components/channel/ChannelCategory.tsx	New category component that groups channels and supports drag-and-drop sorting.
src/view/components/layout/sidebar/channel/ServerChannelSidebar.tsx	New sidebar component to render server channels within the updated layout.
src/view/components/layout/sidebar/channel/DirectChannelSidebar.tsx	New sidebar component for direct messages, incorporating ChannelNavigation and DirectMessages.
src/view/components/layout/sidebar/ChannelSidebar.tsx	Removed outdated channel sidebar.
src/view/components/layout/LayoutWithSidebar.tsx	Updated to conditionally render DirectChannelSidebar or ServerChannelSidebar based on the URL.
src/service/feature/chat/index.ts	Updated export path for useChannelList hook to point to the new channel hook.
src/service/feature/chat/hook/useChannelList.ts	Removed the old channel list hook.
src/service/feature/channel/hook/useChannelList.ts	New hook for fetching server channel data using axios.
src/app/Router.tsx	Updated router configuration and route definitions to reflect the new sidebar components.

Files not reviewed (2)

• package.json: Language not supported
• pnpm-lock.yaml: Language not supported

Comments suppressed due to low confidence (1)

src/view/components/layout/sidebar/components/channel/ChannelCategory.tsx:29

• Consider adding tests to verify the drag-and-drop sorting functionality in the ChannelCategory component to ensure correct reordering behavior.

const handleDragEnd = (event: any) => {