diff --git a/client/src/components/Sidebar/ConfButton.tsx b/client/src/components/Sidebar/ConfButton.tsx index f6186d4f..ad86d924 100644 --- a/client/src/components/Sidebar/ConfButton.tsx +++ b/client/src/components/Sidebar/ConfButton.tsx @@ -1,3 +1,4 @@ +import { memo } from 'react'; import SOCKET_MESSAGE from 'src/constants/socket-message'; import { useConfContext } from 'src/hooks/useConfContext'; import useSocketContext from 'src/hooks/useSocketContext'; @@ -27,4 +28,4 @@ function ConfButton() { ); } -export default ConfButton; +export default memo(ConfButton); diff --git a/client/src/components/Sidebar/Header.tsx b/client/src/components/Sidebar/Header.tsx new file mode 100644 index 00000000..c088472d --- /dev/null +++ b/client/src/components/Sidebar/Header.tsx @@ -0,0 +1,19 @@ +import React, { memo } from 'react'; + +import SettingIcon from './SettingIcon'; +import style from './style.module.scss'; + +interface HeaderProps { + name: string; +} + +function Header({ name }: HeaderProps) { + return ( +
+

{name}

+ +
+ ); +} + +export default memo(Header); diff --git a/client/src/components/Sidebar/MemberList.tsx b/client/src/components/Sidebar/MemberList.tsx index e2983b9b..51cde298 100644 --- a/client/src/components/Sidebar/MemberList.tsx +++ b/client/src/components/Sidebar/MemberList.tsx @@ -1,3 +1,4 @@ +import { memo } from 'react'; import { TUser } from 'src/types/user'; import style from './style.module.scss'; @@ -19,4 +20,4 @@ function MemberList({ members }: MemberListProps) { ); } -export default MemberList; +export default memo(MemberList); diff --git a/client/src/components/Sidebar/MomList.tsx b/client/src/components/Sidebar/MomList.tsx index beb58959..d4f1dead 100644 --- a/client/src/components/Sidebar/MomList.tsx +++ b/client/src/components/Sidebar/MomList.tsx @@ -1,4 +1,4 @@ -import { useEffect, useState } from 'react'; +import { useEffect, useState, memo } from 'react'; import SOCKET_MESSAGE from 'src/constants/socket-message'; import useMom from 'src/hooks/useSelectedMom'; import useSocketContext from 'src/hooks/useSocketContext'; @@ -8,10 +8,10 @@ import style from './style.module.scss'; interface MomListProps { moms: TMom[]; + setSelectedMom: React.Dispatch>; } -function MomList({ moms }: MomListProps) { - const { selectedMom, setSelectedMom } = useMom(); +function MomList({ moms, setSelectedMom }: MomListProps) { const { momSocket: socket } = useSocketContext(); const [momList, setMomList] = useState(moms); @@ -20,7 +20,6 @@ function MomList({ moms }: MomListProps) { }; const onSelect = (targetId: string) => { - if (selectedMom && selectedMom._id === targetId) return; socket.emit(SOCKET_MESSAGE.MOM.SELECT, targetId); }; @@ -56,4 +55,4 @@ function MomList({ moms }: MomListProps) { ); } -export default MomList; +export default memo(MomList); diff --git a/client/src/components/Sidebar/index.tsx b/client/src/components/Sidebar/index.tsx index 137d2fec..91dd940a 100644 --- a/client/src/components/Sidebar/index.tsx +++ b/client/src/components/Sidebar/index.tsx @@ -1,24 +1,23 @@ +import useSelectedMom from 'src/hooks/useSelectedMom'; import { WorkspaceInfo } from 'src/types/workspace'; import ConfButton from './ConfButton'; +import Header from './Header'; import MemberList from './MemberList'; import MomList from './MomList'; -import SettingIcon from './SettingIcon'; import style from './style.module.scss'; - interface SidebarProps { workspace: WorkspaceInfo; } function Sidebar({ workspace }: SidebarProps) { + const { setSelectedMom } = useSelectedMom(); + return (
-
-

{workspace.name}

- -
+
- +
); diff --git a/client/src/hooks/useSelectedMom.ts b/client/src/hooks/useSelectedMom.ts index 19bb58e7..7d050920 100644 --- a/client/src/hooks/useSelectedMom.ts +++ b/client/src/hooks/useSelectedMom.ts @@ -1,7 +1,7 @@ import { useContext } from 'react'; import { SelectedMomContext } from 'src/contexts/selected-mom'; -export default function useMom() { +export default function useSelectedMom() { const context = useContext(SelectedMomContext); if (!context) throw new Error('아니요. 없어요.');