From 256a0c5eaaccdfee1839d5829d7fbbdf6bddd396 Mon Sep 17 00:00:00 2001 From: chloe_choi Date: Fri, 25 Apr 2025 15:31:27 +0900 Subject: [PATCH 1/2] =?UTF-8?q?FLOW-27:=20=EC=84=9C=EB=B2=84=20=EC=B1=84?= =?UTF-8?q?=EB=84=90=20=EC=82=AC=EC=9D=B4=EB=93=9C=20=EB=B0=94=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 3 + pnpm-lock.yaml | 65 +++++++++++++++++ src/app/Router.tsx | 71 ++++++++++--------- .../feature/channel/hook/useChannelList.ts | 23 ++++++ .../feature/chat/hook/useChannelList.ts | 9 --- src/service/feature/chat/index.ts | 2 +- .../components/layout/LayoutWithSidebar.tsx | 13 ++-- .../layout/sidebar/ChannelSidebar.tsx | 23 ------ .../sidebar/channel/DirectChannelSidebar.tsx | 15 ++++ .../sidebar/channel/ServerChannelSidebar.tsx | 12 ++++ .../channel/components/ChannelCategory.tsx | 71 +++++++++++++++++++ .../channel/components/ChannelItem.tsx | 33 +++++++++ .../channel/components/ChannelNavigation.tsx | 26 +++++++ .../channel/components/NavigationCard.tsx | 35 +++++++++ .../channel/components/ServerChannelList.tsx | 32 +++++++++ .../channel/components/SidebarLayout.tsx | 7 ++ .../component/channel/ChannelNavigation.tsx | 14 ---- .../component/channel/NavigationCard.tsx | 31 -------- tsconfig.app.json | 2 +- 19 files changed, 370 insertions(+), 117 deletions(-) create mode 100644 src/service/feature/channel/hook/useChannelList.ts delete mode 100644 src/service/feature/chat/hook/useChannelList.ts delete mode 100644 src/view/components/layout/sidebar/ChannelSidebar.tsx create mode 100644 src/view/components/layout/sidebar/channel/DirectChannelSidebar.tsx create mode 100644 src/view/components/layout/sidebar/channel/ServerChannelSidebar.tsx create mode 100644 src/view/components/layout/sidebar/channel/components/ChannelCategory.tsx create mode 100644 src/view/components/layout/sidebar/channel/components/ChannelItem.tsx create mode 100644 src/view/components/layout/sidebar/channel/components/ChannelNavigation.tsx create mode 100644 src/view/components/layout/sidebar/channel/components/NavigationCard.tsx create mode 100644 src/view/components/layout/sidebar/channel/components/ServerChannelList.tsx create mode 100644 src/view/components/layout/sidebar/channel/components/SidebarLayout.tsx delete mode 100644 src/view/components/layout/sidebar/component/channel/ChannelNavigation.tsx delete mode 100644 src/view/components/layout/sidebar/component/channel/NavigationCard.tsx diff --git a/package.json b/package.json index 7dce9c2..c90fa34 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6864f3f..7307ee5 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -8,6 +8,12 @@ importers: .: dependencies: + '@dnd-kit/core': + specifier: ^6.3.1 + version: 6.3.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@dnd-kit/sortable': + specifier: ^10.0.0 + version: 10.0.0(@dnd-kit/core@6.3.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1) '@emotion/is-prop-valid': specifier: ^1.3.1 version: 1.3.1 @@ -44,6 +50,9 @@ importers: idb: specifier: ^8.0.2 version: 8.0.2 + lucide-react: + specifier: ^0.503.0 + version: 0.503.0(react@18.3.1) pnpm: specifier: ^10.7.1 version: 10.8.0 @@ -881,6 +890,28 @@ packages: resolution: {integrity: sha512-4B4OijXeVNOPZlYA2oEwWOTkzyltLao+xbotHQeqN++Rv27Y6s818+n2Qkp8q+Fxhn0t/5lA5X1Mxktud8eayQ==} engines: {node: '>=14.17.0'} + '@dnd-kit/accessibility@3.1.1': + resolution: {integrity: sha512-2P+YgaXF+gRsIihwwY1gCsQSYnu9Zyj2py8kY5fFvUM1qm2WA2u639R6YNVfU4GWr+ZM5mqEsfHZZLoRONbemw==} + peerDependencies: + react: '>=16.8.0' + + '@dnd-kit/core@6.3.1': + resolution: {integrity: sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ==} + peerDependencies: + react: '>=16.8.0' + react-dom: '>=16.8.0' + + '@dnd-kit/sortable@10.0.0': + resolution: {integrity: sha512-+xqhmIIzvAYMGfBYYnbKuNicfSsk4RksY2XdmJhT+HAC01nix6fHCztU68jooFiMUB01Ky3F0FyOvhG/BZrWkg==} + peerDependencies: + '@dnd-kit/core': ^6.3.0 + react: '>=16.8.0' + + '@dnd-kit/utilities@3.2.2': + resolution: {integrity: sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg==} + peerDependencies: + react: '>=16.8.0' + '@emotion/is-prop-valid@1.3.1': resolution: {integrity: sha512-/ACwoqx7XQi9knQs/G0qKvv5teDMhD7bXYns9N/wM8ah8iNb8jZ2uNO0YOgiq2o2poIvVtJS2YALasQuMSQ7Kw==} @@ -4808,6 +4839,11 @@ packages: lru-cache@5.1.1: resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==} + lucide-react@0.503.0: + resolution: {integrity: sha512-HGGkdlPWQ0vTF8jJ5TdIqhQXZi6uh3LnNgfZ8MHiuxFfX3RZeA79r2MW2tHAZKlAVfoNE8esm3p+O6VkIvpj6w==} + peerDependencies: + react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0 + lz-string@1.5.0: resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==} hasBin: true @@ -7376,6 +7412,31 @@ snapshots: '@discoveryjs/json-ext@0.6.3': {} + '@dnd-kit/accessibility@3.1.1(react@18.3.1)': + dependencies: + react: 18.3.1 + tslib: 2.8.1 + + '@dnd-kit/core@6.3.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@dnd-kit/accessibility': 3.1.1(react@18.3.1) + '@dnd-kit/utilities': 3.2.2(react@18.3.1) + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + tslib: 2.8.1 + + '@dnd-kit/sortable@10.0.0(@dnd-kit/core@6.3.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)': + dependencies: + '@dnd-kit/core': 6.3.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@dnd-kit/utilities': 3.2.2(react@18.3.1) + react: 18.3.1 + tslib: 2.8.1 + + '@dnd-kit/utilities@3.2.2(react@18.3.1)': + dependencies: + react: 18.3.1 + tslib: 2.8.1 + '@emotion/is-prop-valid@1.3.1': dependencies: '@emotion/memoize': 0.9.0 @@ -11985,6 +12046,10 @@ snapshots: dependencies: yallist: 3.1.1 + lucide-react@0.503.0(react@18.3.1): + dependencies: + react: 18.3.1 + lz-string@1.5.0: {} magic-string@0.25.9: diff --git a/src/app/Router.tsx b/src/app/Router.tsx index eac13b5..15be7c3 100644 --- a/src/app/Router.tsx +++ b/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 ( } /> - } /> - } /> - - - - } - > - - - - } - /> - - - - } - /> + } /> + } /> + + + + }> + + + + } /> + + + + + } /> + + + + + } /> + + } /> ); }; diff --git a/src/service/feature/channel/hook/useChannelList.ts b/src/service/feature/channel/hook/useChannelList.ts new file mode 100644 index 0000000..11c2bfe --- /dev/null +++ b/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({ + 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, + }); +}; \ No newline at end of file diff --git a/src/service/feature/chat/hook/useChannelList.ts b/src/service/feature/chat/hook/useChannelList.ts deleted file mode 100644 index 595ba6a..0000000 --- a/src/service/feature/chat/hook/useChannelList.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { useQuery } from '@tanstack/react-query'; -import { fetchChannels } from '../api/chatAPI'; - -export const useChannelList = () => { - return useQuery({ - queryKey: ['channels'], - queryFn: fetchChannels, - }); -}; \ No newline at end of file diff --git a/src/service/feature/chat/index.ts b/src/service/feature/chat/index.ts index 8209b61..c2a265a 100644 --- a/src/service/feature/chat/index.ts +++ b/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'; diff --git a/src/view/components/layout/LayoutWithSidebar.tsx b/src/view/components/layout/LayoutWithSidebar.tsx index 0d32e5c..7f5b5c5 100644 --- a/src/view/components/layout/LayoutWithSidebar.tsx +++ b/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/sidebar/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 (
diff --git a/src/view/components/layout/sidebar/ChannelSidebar.tsx b/src/view/components/layout/sidebar/ChannelSidebar.tsx deleted file mode 100644 index 71432d5..0000000 --- a/src/view/components/layout/sidebar/ChannelSidebar.tsx +++ /dev/null @@ -1,23 +0,0 @@ -// import DirectBar from '@pages/landing/components/DirectBar'; - -import DirectBar from './component/right/DirectBar'; - -// 대충 넣은것 -const ChannelSidebar = () => { - return ( - //
- //
TEXT CHANNELS
- // {[1, 2, 3].map((channel) => ( - //
- // # general-{channel} - //
- // ))} - //
- - ); -}; - -export default ChannelSidebar; diff --git a/src/view/components/layout/sidebar/channel/DirectChannelSidebar.tsx b/src/view/components/layout/sidebar/channel/DirectChannelSidebar.tsx new file mode 100644 index 0000000..0343dbe --- /dev/null +++ b/src/view/components/layout/sidebar/channel/DirectChannelSidebar.tsx @@ -0,0 +1,15 @@ +import ChannelNavigation from '@components/layout/sidebar/channel/components/ChannelNavigation.tsx'; +import DirectMessages from '@components/layout/sidebar/component/right/DirectMessages.tsx'; +import { SidebarLayout } from './components/SidebarLayout.tsx'; + +const DirectChannelSidebar = () => { + return ( + + +
+ + + ); +}; + +export default DirectChannelSidebar; \ No newline at end of file diff --git a/src/view/components/layout/sidebar/channel/ServerChannelSidebar.tsx b/src/view/components/layout/sidebar/channel/ServerChannelSidebar.tsx new file mode 100644 index 0000000..ca9550d --- /dev/null +++ b/src/view/components/layout/sidebar/channel/ServerChannelSidebar.tsx @@ -0,0 +1,12 @@ +import ServerChannelList from './components/ServerChannelList.tsx'; +import { SidebarLayout } from './components/SidebarLayout.tsx'; + +const ServerChannelSidebar = () => { + return ( + + + + ); +}; + +export default ServerChannelSidebar; \ No newline at end of file diff --git a/src/view/components/layout/sidebar/channel/components/ChannelCategory.tsx b/src/view/components/layout/sidebar/channel/components/ChannelCategory.tsx new file mode 100644 index 0000000..f655085 --- /dev/null +++ b/src/view/components/layout/sidebar/channel/components/ChannelCategory.tsx @@ -0,0 +1,71 @@ +import { useState } from 'react'; +import { DndContext } from '@dnd-kit/core'; +import { + SortableContext, + verticalListSortingStrategy, + arrayMove, +} from '@dnd-kit/sortable'; +import { ChevronDown, ChevronRight, Plus } from 'lucide-react'; +import ChannelItem from './ChannelItem.tsx'; + +interface Channel { + id: string; + name: string; + type?: 'text' | 'voice' | 'event'; +} + +const ChannelCategory = ({ + title, + type, + defaultItems, + }: { + title: string; + type: 'text' | 'voice' | 'event'; + defaultItems: Channel[]; +}) => { + const [isOpen, setIsOpen] = useState(true); + const [items, setItems] = useState(defaultItems); + + const handleDragEnd = (event: any) => { + const { active, over } = event; + if (active.id !== over?.id) { + const oldIndex = items.findIndex((i) => i.id === active.id); + const newIndex = items.findIndex((i) => i.id === over.id); + setItems((items) => arrayMove(items, oldIndex, newIndex)); + } + }; + + return ( +
+
setIsOpen(!isOpen)} + > +
+ {isOpen ? : } + {title} +
+ +
+ + {isOpen && ( + + i.id)} strategy={verticalListSortingStrategy}> +
+ {items.map((item) => ( + + ))} +
+ + + )} +
+ ); +}; + +export default ChannelCategory; \ No newline at end of file diff --git a/src/view/components/layout/sidebar/channel/components/ChannelItem.tsx b/src/view/components/layout/sidebar/channel/components/ChannelItem.tsx new file mode 100644 index 0000000..793d251 --- /dev/null +++ b/src/view/components/layout/sidebar/channel/components/ChannelItem.tsx @@ -0,0 +1,33 @@ +import { useDraggable } from '@dnd-kit/core'; +import { Hash, Radio, Volume2 } from 'lucide-react'; +import clsx from 'clsx'; + +const ChannelItem = ({ id, name, type = 'text', selected = false, }: { + id: string; + name: string; + type?: 'text' | 'voice' | 'event'; + selected?: boolean; +}) => { + const icon = + type === 'voice' ? : + type === 'event' ? : + ; + + const { attributes, listeners, setNodeRef, transform, isDragging } = useDraggable({ id, }); + + const style = transform + ? { transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`, opacity: 0.8, } + : undefined; + + return ( +
+ {icon} + {name} +
+ ); +}; + +export default ChannelItem; \ No newline at end of file diff --git a/src/view/components/layout/sidebar/channel/components/ChannelNavigation.tsx b/src/view/components/layout/sidebar/channel/components/ChannelNavigation.tsx new file mode 100644 index 0000000..532a5e8 --- /dev/null +++ b/src/view/components/layout/sidebar/channel/components/ChannelNavigation.tsx @@ -0,0 +1,26 @@ +import NavigationCard from '@components/layout/sidebar/channel/components/NavigationCard.tsx'; + +const ChannelNavigation = () => { + const menus = [ + { name: 'Friends', path: '/channels/@me' }, + { name: 'Explore', path: '/channels/explore' }, + { name: 'Nitro', path: '/channels/nitro' }, + ]; + + return ( +
+ {menus.map((menu) => ( + + {menu.name} + + ))} +
+ ); +}; + +export default ChannelNavigation; \ No newline at end of file diff --git a/src/view/components/layout/sidebar/channel/components/NavigationCard.tsx b/src/view/components/layout/sidebar/channel/components/NavigationCard.tsx new file mode 100644 index 0000000..12440a8 --- /dev/null +++ b/src/view/components/layout/sidebar/channel/components/NavigationCard.tsx @@ -0,0 +1,35 @@ +import { PropsWithChildren } from 'react'; +import { useNavigate } from 'react-router-dom'; +import clsx from 'clsx'; +import Icon from '@components/common/Icon.tsx'; + +interface NavigationCardProps { + route: string; + iconPath: string; + isActive?: boolean; + path: string; + onClick?: () => void; +} + +const NavigationCard = ({ route, iconPath, isActive = false, onClick, children, + }: PropsWithChildren) => { + const navigate = useNavigate(); + + const handleClick = () => { + if (onClick) onClick(); + navigate(route); + }; + + return ( +
+
+ +
+

{children}

+
+ ); +}; + +export default NavigationCard; \ No newline at end of file diff --git a/src/view/components/layout/sidebar/channel/components/ServerChannelList.tsx b/src/view/components/layout/sidebar/channel/components/ServerChannelList.tsx new file mode 100644 index 0000000..62478ce --- /dev/null +++ b/src/view/components/layout/sidebar/channel/components/ServerChannelList.tsx @@ -0,0 +1,32 @@ +import { useParams } from 'react-router-dom'; +import ChannelCategory from './ChannelCategory.tsx'; +import { useChannelList } from '@service/feature/channel/hook/useChannelList.ts'; + +const ServerChannelList = () => { + const { serverId } = useParams(); + const { data: channels, isLoading, error } = useChannelList(serverId!); + + if (isLoading) return
Loading...
; + if (error) return
에러 발생
; + + const categories = channels?.reduce((acc, channel) => { + if (!acc[channel.category]) acc[channel.category] = []; + acc[channel.category].push(channel); + return acc; + }, {} as Record) ?? {}; + + return ( +
+ {Object.entries(categories).map(([categoryName, categoryChannels]) => ( + + ))} +
+ ); +}; + +export default ServerChannelList; \ No newline at end of file diff --git a/src/view/components/layout/sidebar/channel/components/SidebarLayout.tsx b/src/view/components/layout/sidebar/channel/components/SidebarLayout.tsx new file mode 100644 index 0000000..a31af31 --- /dev/null +++ b/src/view/components/layout/sidebar/channel/components/SidebarLayout.tsx @@ -0,0 +1,7 @@ +export const SidebarLayout = ({ children }: { children: React.ReactNode }) => ( +
+
+ {children} +
+
+); \ No newline at end of file diff --git a/src/view/components/layout/sidebar/component/channel/ChannelNavigation.tsx b/src/view/components/layout/sidebar/component/channel/ChannelNavigation.tsx deleted file mode 100644 index 1d5fe53..0000000 --- a/src/view/components/layout/sidebar/component/channel/ChannelNavigation.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { useState } from 'react'; -import NavigationCard from './NavigationCard'; - -const ChannelNavigation = () => { - return ( -
- console.log('friends')} path='friends'> - Friends - -
- ); -}; - -export default ChannelNavigation; diff --git a/src/view/components/layout/sidebar/component/channel/NavigationCard.tsx b/src/view/components/layout/sidebar/component/channel/NavigationCard.tsx deleted file mode 100644 index 4dd479f..0000000 --- a/src/view/components/layout/sidebar/component/channel/NavigationCard.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import Icon from '@components/common/Icon'; -import { PropsWithChildren } from 'react'; - -interface NavigationCardProps { - path: string; - isActive?: boolean; - onClick: () => void; -} - -const NavigationCard = ({ - path, - isActive, - onClick, - children, -}: PropsWithChildren) => { - return ( -
-
- -
-

{children}

-
- ); -}; - -export default NavigationCard; diff --git a/tsconfig.app.json b/tsconfig.app.json index 0690c65..eae22d8 100644 --- a/tsconfig.app.json +++ b/tsconfig.app.json @@ -29,7 +29,7 @@ "@assets/*": ["src/view/assets/*"], "@components/*": ["src/view/components/*"], "@pages/*": ["src/view/pages/*"], - "@services/*": ["src/services*"], + "@service/*": ["src/service/*"], } }, "include": ["src"] From f96f8f0843008d90209fd85a43879c132253a83f Mon Sep 17 00:00:00 2001 From: chloe_choi Date: Tue, 29 Apr 2025 20:01:08 +0900 Subject: [PATCH 2/2] =?UTF-8?q?FLOW-27:=20=EC=84=9C=EB=B2=84=20=EC=B1=84?= =?UTF-8?q?=EB=84=90=20=EC=82=AC=EC=9D=B4=EB=93=9C=20=EB=B0=94=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 2 +- eslint.config.js | 2 +- .../layout/{sidebar => }/Header.tsx | 0 .../components/layout/LayoutWithSidebar.tsx | 2 +- .../layout/{sidebar => }/UserProfileBar.tsx | 0 .../sidebar/channel/DirectChannelSidebar.tsx | 6 +-- .../sidebar/channel/ServerChannelSidebar.tsx | 4 +- .../sidebar/component/right/DirectBar.tsx | 16 ------- .../channel}/ChannelCategory.tsx | 0 .../channel}/ChannelItem.tsx | 0 .../channel}/ChannelNavigation.tsx | 0 .../channel}/DirectMessages.tsx | 0 .../channel}/NavigationCard.tsx | 0 .../channel}/ServerChannelList.tsx | 0 .../channel}/SidebarLayout.tsx | 0 .../profile/Interactions.tsx | 0 .../profile/ProfileInfo.tsx | 0 .../profile/UserInfo.tsx | 0 .../profile/UserProfile.tsx | 0 src/view/pages/chat/ChatPage.tsx | 43 ------------------- src/view/pages/legacy/HomePage.tsx | 33 -------------- 21 files changed, 8 insertions(+), 100 deletions(-) rename src/view/components/layout/{sidebar => }/Header.tsx (100%) rename src/view/components/layout/{sidebar => }/UserProfileBar.tsx (100%) delete mode 100644 src/view/components/layout/sidebar/component/right/DirectBar.tsx rename src/view/components/layout/sidebar/{channel/components => components/channel}/ChannelCategory.tsx (100%) rename src/view/components/layout/sidebar/{channel/components => components/channel}/ChannelItem.tsx (100%) rename src/view/components/layout/sidebar/{channel/components => components/channel}/ChannelNavigation.tsx (100%) rename src/view/components/layout/sidebar/{component/right => components/channel}/DirectMessages.tsx (100%) rename src/view/components/layout/sidebar/{channel/components => components/channel}/NavigationCard.tsx (100%) rename src/view/components/layout/sidebar/{channel/components => components/channel}/ServerChannelList.tsx (100%) rename src/view/components/layout/sidebar/{channel/components => components/channel}/SidebarLayout.tsx (100%) rename src/view/components/layout/sidebar/{component => components}/profile/Interactions.tsx (100%) rename src/view/components/layout/sidebar/{component => components}/profile/ProfileInfo.tsx (100%) rename src/view/components/layout/sidebar/{component => components}/profile/UserInfo.tsx (100%) rename src/view/components/layout/sidebar/{component => components}/profile/UserProfile.tsx (100%) delete mode 100644 src/view/pages/legacy/HomePage.tsx diff --git a/.gitignore b/.gitignore index 0ec747f..438657a 100644 --- a/.gitignore +++ b/.gitignore @@ -11,7 +11,7 @@ node_modules dist dist-ssr *.local -src/.env +.env # Editor directories and files .vscode/* diff --git a/eslint.config.js b/eslint.config.js index b2dd403..3c17518 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -72,4 +72,4 @@ export default [ }, eslintConfigPrettier, -]; +]; \ No newline at end of file diff --git a/src/view/components/layout/sidebar/Header.tsx b/src/view/components/layout/Header.tsx similarity index 100% rename from src/view/components/layout/sidebar/Header.tsx rename to src/view/components/layout/Header.tsx diff --git a/src/view/components/layout/LayoutWithSidebar.tsx b/src/view/components/layout/LayoutWithSidebar.tsx index 7f5b5c5..cb4b5f2 100644 --- a/src/view/components/layout/LayoutWithSidebar.tsx +++ b/src/view/components/layout/LayoutWithSidebar.tsx @@ -1,5 +1,5 @@ import { Outlet, useLocation } from 'react-router-dom'; -import UserProfileBar from '@components/layout/sidebar/UserProfileBar.tsx'; +import UserProfileBar from '@components/layout/UserProfileBar.tsx'; import TeamSidebar from '@components/layout/sidebar/TeamSidebar.tsx'; import DirectChannelSidebar from './sidebar/channel/DirectChannelSidebar.tsx'; import ServerChannelSidebar from './sidebar/channel/ServerChannelSidebar.tsx'; diff --git a/src/view/components/layout/sidebar/UserProfileBar.tsx b/src/view/components/layout/UserProfileBar.tsx similarity index 100% rename from src/view/components/layout/sidebar/UserProfileBar.tsx rename to src/view/components/layout/UserProfileBar.tsx diff --git a/src/view/components/layout/sidebar/channel/DirectChannelSidebar.tsx b/src/view/components/layout/sidebar/channel/DirectChannelSidebar.tsx index 0343dbe..deea0e2 100644 --- a/src/view/components/layout/sidebar/channel/DirectChannelSidebar.tsx +++ b/src/view/components/layout/sidebar/channel/DirectChannelSidebar.tsx @@ -1,6 +1,6 @@ -import ChannelNavigation from '@components/layout/sidebar/channel/components/ChannelNavigation.tsx'; -import DirectMessages from '@components/layout/sidebar/component/right/DirectMessages.tsx'; -import { SidebarLayout } from './components/SidebarLayout.tsx'; +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 ( diff --git a/src/view/components/layout/sidebar/channel/ServerChannelSidebar.tsx b/src/view/components/layout/sidebar/channel/ServerChannelSidebar.tsx index ca9550d..43803f2 100644 --- a/src/view/components/layout/sidebar/channel/ServerChannelSidebar.tsx +++ b/src/view/components/layout/sidebar/channel/ServerChannelSidebar.tsx @@ -1,5 +1,5 @@ -import ServerChannelList from './components/ServerChannelList.tsx'; -import { SidebarLayout } from './components/SidebarLayout.tsx'; +import ServerChannelList from '@components/layout/sidebar/components/channel/ServerChannelList.tsx'; +import { SidebarLayout } from '@components/layout/sidebar/components/channel/SidebarLayout.tsx'; const ServerChannelSidebar = () => { return ( diff --git a/src/view/components/layout/sidebar/component/right/DirectBar.tsx b/src/view/components/layout/sidebar/component/right/DirectBar.tsx deleted file mode 100644 index d621449..0000000 --- a/src/view/components/layout/sidebar/component/right/DirectBar.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import DirectMessages from './DirectMessages.tsx'; -import ChannelNavigation from '../channel/ChannelNavigation.tsx'; - -const DirectBar = () => { - return ( -
-
- -
- -
-
- ); -}; - -export default DirectBar; diff --git a/src/view/components/layout/sidebar/channel/components/ChannelCategory.tsx b/src/view/components/layout/sidebar/components/channel/ChannelCategory.tsx similarity index 100% rename from src/view/components/layout/sidebar/channel/components/ChannelCategory.tsx rename to src/view/components/layout/sidebar/components/channel/ChannelCategory.tsx diff --git a/src/view/components/layout/sidebar/channel/components/ChannelItem.tsx b/src/view/components/layout/sidebar/components/channel/ChannelItem.tsx similarity index 100% rename from src/view/components/layout/sidebar/channel/components/ChannelItem.tsx rename to src/view/components/layout/sidebar/components/channel/ChannelItem.tsx diff --git a/src/view/components/layout/sidebar/channel/components/ChannelNavigation.tsx b/src/view/components/layout/sidebar/components/channel/ChannelNavigation.tsx similarity index 100% rename from src/view/components/layout/sidebar/channel/components/ChannelNavigation.tsx rename to src/view/components/layout/sidebar/components/channel/ChannelNavigation.tsx diff --git a/src/view/components/layout/sidebar/component/right/DirectMessages.tsx b/src/view/components/layout/sidebar/components/channel/DirectMessages.tsx similarity index 100% rename from src/view/components/layout/sidebar/component/right/DirectMessages.tsx rename to src/view/components/layout/sidebar/components/channel/DirectMessages.tsx diff --git a/src/view/components/layout/sidebar/channel/components/NavigationCard.tsx b/src/view/components/layout/sidebar/components/channel/NavigationCard.tsx similarity index 100% rename from src/view/components/layout/sidebar/channel/components/NavigationCard.tsx rename to src/view/components/layout/sidebar/components/channel/NavigationCard.tsx diff --git a/src/view/components/layout/sidebar/channel/components/ServerChannelList.tsx b/src/view/components/layout/sidebar/components/channel/ServerChannelList.tsx similarity index 100% rename from src/view/components/layout/sidebar/channel/components/ServerChannelList.tsx rename to src/view/components/layout/sidebar/components/channel/ServerChannelList.tsx diff --git a/src/view/components/layout/sidebar/channel/components/SidebarLayout.tsx b/src/view/components/layout/sidebar/components/channel/SidebarLayout.tsx similarity index 100% rename from src/view/components/layout/sidebar/channel/components/SidebarLayout.tsx rename to src/view/components/layout/sidebar/components/channel/SidebarLayout.tsx diff --git a/src/view/components/layout/sidebar/component/profile/Interactions.tsx b/src/view/components/layout/sidebar/components/profile/Interactions.tsx similarity index 100% rename from src/view/components/layout/sidebar/component/profile/Interactions.tsx rename to src/view/components/layout/sidebar/components/profile/Interactions.tsx diff --git a/src/view/components/layout/sidebar/component/profile/ProfileInfo.tsx b/src/view/components/layout/sidebar/components/profile/ProfileInfo.tsx similarity index 100% rename from src/view/components/layout/sidebar/component/profile/ProfileInfo.tsx rename to src/view/components/layout/sidebar/components/profile/ProfileInfo.tsx diff --git a/src/view/components/layout/sidebar/component/profile/UserInfo.tsx b/src/view/components/layout/sidebar/components/profile/UserInfo.tsx similarity index 100% rename from src/view/components/layout/sidebar/component/profile/UserInfo.tsx rename to src/view/components/layout/sidebar/components/profile/UserInfo.tsx diff --git a/src/view/components/layout/sidebar/component/profile/UserProfile.tsx b/src/view/components/layout/sidebar/components/profile/UserProfile.tsx similarity index 100% rename from src/view/components/layout/sidebar/component/profile/UserProfile.tsx rename to src/view/components/layout/sidebar/components/profile/UserProfile.tsx diff --git a/src/view/pages/chat/ChatPage.tsx b/src/view/pages/chat/ChatPage.tsx index 4fd57a4..d37f9e6 100644 --- a/src/view/pages/chat/ChatPage.tsx +++ b/src/view/pages/chat/ChatPage.tsx @@ -1,54 +1,11 @@ -import { useState } from 'react'; -import { v4 as uuidv4 } from 'uuid'; -import ChatMessage from './components/ChatMessage'; -import ChatInput from './components/ChatInput'; -import AddServerModal from './components/AddServerModal'; -import ChatServer from '../../../service/feature/team/ChatServer.tsx'; -import ChatChannel from '../../../service/feature/chat/legacy/ChatChannel.tsx'; -import Navigation from '@pages/Friends/components/Navigation.tsx'; -import { useNavigate, useParams } from 'react-router-dom'; -// import DirectBar from '@pages/home/components/DirectBar'; import Friend from './components/Friend'; -import DirectBar from '@components/layout/sidebar/component/right/DirectBar.tsx'; -// import DirectBar from '@pages/landing/components/DirectBar.tsx'; -const servers = [ - { id: 1, title: '서버1' }, - { id: 2, title: 'server2' }, -]; -const channels = [ - { id: 1, title: '일반1' }, - { id: 2, title: '일반2' }, -]; export default function ChatPage() { - const [messages, setMessages] = useState<{ id: string; text: string }[]>([]); - - const navigate = useNavigate(); - const params = useParams(); - const channelId = params.serverId; - - const handleSendMessage = (message: string) => { - setMessages([...messages, { id: uuidv4(), text: message }]); - }; - - const handleChannel = (server: { id: number; title: string }) => { - console.log('server: ', server); - if (server.id === 0) { - navigate(`/channels/@me`); - } else { - navigate(`/channels/${server.id}`); - } - }; return (
- {/* */} - {/* {messages.map((message) => ( - - ))} - */}
); diff --git a/src/view/pages/legacy/HomePage.tsx b/src/view/pages/legacy/HomePage.tsx deleted file mode 100644 index 5a68794..0000000 --- a/src/view/pages/legacy/HomePage.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import SearchInput from '../Friends/components/SearchInput.tsx'; -import DirectBar from '../../components/layout/sidebar/component/right/DirectBar.tsx'; -import ProfileInfo from '../../components/layout/sidebar/component/profile/ProfileInfo.tsx'; -import Topbar from '../Friends/components/Topbar.tsx'; -import UserProfile from '../../components/layout/sidebar/component/profile/UserProfile.tsx'; -import { useState } from 'react'; - -const HomePage = () => { - const [searchValue, setSearchValue] = useState(''); - return ( - <> - -
- - - - - -
-
- - ); -}; - -export default HomePage;