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

.gitignore

@@ -11,7 +11,7 @@ node_modules
 dist
 dist-ssr
 *.local
-src/.env
+.env
 
 # Editor directories and files
 .vscode/*

eslint.config.js

@@ -72,4 +72,4 @@ export default [
   },
 
   eslintConfigPrettier,
-];
+];

package.json

@@ -11,6 +11,8 @@
     "format.fix": "prettier --write ./src"
   },
   "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
     "@emotion/is-prop-valid": "^1.3.1",
     "@hookform/resolvers": "^5.0.1",
     "@reduxjs/toolkit": "^2.6.1",
@@ -23,6 +25,7 @@
     "firebase": "^11.5.0",
     "framer-motion": "^12.6.2",
     "idb": "^8.0.2",
+    "lucide-react": "^0.503.0",
     "pnpm": "^10.7.1",
     "radix-ui": "^1.1.3",
     "react": "^18.3.1",

src/app/Router.tsx

@@ -1,43 +1,46 @@
-import { Routes, Route } from 'react-router-dom';
-import LandingPage from '../view/pages/landing/LandingPage.tsx';
-import SignupPage from '@pages/auth/signup/SignupPage.tsx';
-import ChatPage from '../view/pages/chat/ChatPage.tsx';
-import LoginPage from '@pages/auth/login/LoginPage.tsx';
-import LayoutWithSidebar from '../view/components/layout/LayoutWithSidebar.tsx';
-import FriendsPage from '../view/pages/Friends/FriendsPage.tsx';
-import PrivateRoute from '../service/feature/auth/component/PrivateRoute.tsx';
-import { AuthProvider } from '../service/feature/auth';
+import { Routes, Route, Navigate } from 'react-router-dom';
+import LandingPage from '@pages/landing/LandingPage';
+import LoginPage from '@pages/auth/login/LoginPage';
+import SignupPage from '@pages/auth/signup/SignupPage';
+import FriendsPage from '@pages/Friends/FriendsPage';
+import ChatPage from '@pages/chat/ChatPage';
+
+import LayoutWithSidebar from '@components/layout/LayoutWithSidebar';
+import { AuthProvider } from '@service/feature/auth';
+import PrivateRoute from '@service/feature/auth/component/PrivateRoute.tsx';
+
 
 const AppRouter = () => {
   return (
     <Routes>
       <Route path="/" element={<LandingPage />} />
-      <Route path="login" element={<LoginPage />} />
-      <Route path="signup" element={<SignupPage />} />
-      <Route
-        element={
-          <AuthProvider>
-            <LayoutWithSidebar />
-          </AuthProvider>
-        }
-      >
-        <Route
-          path="channels/:channelId"
-          element={
-            <PrivateRoute>
-              <ChatPage />
-            </PrivateRoute>
-          }
-        />
-        <Route
-          path="friends"
-          element={
-            <PrivateRoute>
-              <FriendsPage />
-            </PrivateRoute>
-          }
-        />
+      <Route path="/login" element={<LoginPage />} />
+      <Route path="/signup" element={<SignupPage />} />
+      <Route path="/channels" element={
+        <AuthProvider>
+          <LayoutWithSidebar />
+        </AuthProvider>
+      }>
+        <Route path="@me" element={
+          <PrivateRoute>
+            <FriendsPage />
+          </PrivateRoute>
+        } />
+
+        <Route path="@me/:channelId" element={
+          <PrivateRoute>
+            <ChatPage />
+          </PrivateRoute>
+        } />
+
+        <Route path=":serverId/:channelId" element={
+          <PrivateRoute>
+            <ChatPage />
+          </PrivateRoute>
+        } />
       </Route>
+
+      <Route path="*" element={<Navigate to="/channels/@me" replace />} />
     </Routes>
   );
 };

src/service/feature/channel/hook/useChannelList.ts

@@ -0,0 +1,23 @@
+import { useQuery } from '@tanstack/react-query';
+import axios from 'axios';
+
+export interface Channel {
+  id: string;
+  name: string;
+  type: 'text' | 'voice' | 'event';
+  category: string;
+}
+
+export const useChannelList = (serverId: string) => {
+  return useQuery<Channel[]>({
+    queryKey: ['serverChannels', serverId],
+    queryFn: async () => {
+      const { data } = await axios.get(
+          `http://flowchat.shop:30003/api/servers/${serverId}/channels`
+      );
+      return data;
+    },
+    enabled: !!serverId,
+    staleTime: 1000 * 60 * 5,
+  });
+};

src/service/feature/chat/index.ts

@@ -1,5 +1,5 @@
 export { useChat } from './hook/useChat';
-export { useChannelList } from './hook/useChannelList';
+export { useChannelList } from '../channel/hook/useChannelList.ts';
 export { useMessageHistory } from './hook/useMessageHistory';
 export { useSendMessage } from './hook/useSendMessage';
 export { useSocket } from './context/useSocket';

src/view/components/layout/LayoutWithSidebar.tsx

@@ -1,16 +1,21 @@
-import { Outlet } from 'react-router-dom';
+import { Outlet, useLocation } from 'react-router-dom';
+import UserProfileBar from '@components/layout/UserProfileBar.tsx';
 import TeamSidebar from '@components/layout/sidebar/TeamSidebar.tsx';
-import ChannelSidebar from '@components/layout/sidebar/ChannelSidebar.tsx';
-import UserProfileBar from './sidebar/UserProfileBar';
+import DirectChannelSidebar from './sidebar/channel/DirectChannelSidebar.tsx';
+import ServerChannelSidebar from './sidebar/channel/ServerChannelSidebar.tsx';
 
 const LayoutWithSidebar = () => {
+
+  const location = useLocation();
+  const isDMView = location.pathname.startsWith('/channels/@me');
+
   return (
     <div className='flex w-screen h-screen overflow-hidden'>
       <aside className='w-[72px] bg-gray-800 text-white'>
         <TeamSidebar />
       </aside>
       <aside className='w-[240px] bg-gray-700 text-white flex flex-col'>
-        <ChannelSidebar />
+        {isDMView ? <DirectChannelSidebar /> : <ServerChannelSidebar />}
         <UserProfileBar />
       </aside>
       <main className='flex-1 bg-gray-900 text-white overflow-y-auto'>

src/view/components/layout/sidebar/channel/DirectChannelSidebar.tsx

@@ -0,0 +1,15 @@
+import ChannelNavigation from '@components/layout/sidebar/components/channel/ChannelNavigation.tsx';
+import DirectMessages from '@components/layout/sidebar/components/channel/DirectMessages.tsx';
+import { SidebarLayout } from '@components/layout/sidebar/components/channel/SidebarLayout.tsx';
+
+const DirectChannelSidebar = () => {
+  return (
+    <SidebarLayout>
+      <ChannelNavigation />
+      <div className="border w-full h-[1px] border-[#42454A]" />
+      <DirectMessages />
+    </SidebarLayout>
+  );
+};
+
+export default DirectChannelSidebar;

src/view/components/layout/sidebar/channel/ServerChannelSidebar.tsx

@@ -0,0 +1,12 @@
+import ServerChannelList from '@components/layout/sidebar/components/channel/ServerChannelList.tsx';
+import { SidebarLayout } from '@components/layout/sidebar/components/channel/SidebarLayout.tsx';
+
+const ServerChannelSidebar = () => {
+  return (
+    <SidebarLayout>
+      <ServerChannelList />
+    </SidebarLayout>
+  );
+};
+
+export default ServerChannelSidebar;