feat: 팀 참여중인 유저 사이드바 구현

src/service/feature/member/types/memberAPI.ts

@@ -11,6 +11,7 @@ export type MemberState =
 export interface MemberInfo {
   userId: string;
   email: string;
+  name: string;
   nickname: string;
   avatarUrl?: string;
   birth?: string;
@@ -38,4 +39,4 @@ export interface SearchMemberResult {
   email: string;
   nickname: string;
   avatarUrl?: string;
-}
+}

src/view/layout/LayoutWithSidebar.tsx

@@ -4,6 +4,7 @@ import UserProfileBar from './profile/UserProfileBar.tsx';
 import DirectChannelSidebar from './sidebar/channel/DirectChannelSidebar.tsx';
 import ServerChannelSidebar from './sidebar/channel/ServerChannelSidebar.tsx';
 import TopSidebar from '@components/layout/sidebar/top/TopSidebar.tsx';
+import TeamMemberSidebar from './sidebar/team/TeamMemberSidebar.tsx';
 
 const LayoutWithSidebar = () => {
   const location = useLocation();
@@ -22,9 +23,16 @@ const LayoutWithSidebar = () => {
           {isDMView ? <DirectChannelSidebar /> : <ServerChannelSidebar />}
           <UserProfileBar />
         </aside>
-        <main className='flex-1  bg-wrapper text-white overflow-y-auto border border-[#42454A] rounded-[12px]'>
-          <Outlet />
-        </main>
+        <div className='flex flex-1 flex-row bg-wrapper text-white overflow-y-auto border border-[#42454A] rounded-[12px]'>
+          <main className='flex-1  bg-wrapper text-white overflow-y-auto border border-[#42454A] rounded-[12px]'>
+            <Outlet />
+          </main>
+          {!isDMView && (
+            <aside>
+              <TeamMemberSidebar />
+            </aside>
+          )}
+        </div>
       </div>
     </div>
   );

src/view/layout/sidebar/components/team/TeamMember.tsx

@@ -0,0 +1,39 @@
+import { MemberInfo } from '@service/feature/member/types/memberAPI';
+
+const TeamMember = ({
+  user,
+  isActive = true,
+  isMe = false,
+}: {
+  user: MemberInfo;
+  isActive?: boolean;
+  isMe?: boolean;
+}) => {
+  console.log('user 출력: ', user);
+  return (
+    <div
+      className={`flex h-[42px] rounded-[8px] cursor-pointer items-center w-full hover:bg-[#41424b] ${!isActive && 'opacity-[40%] hover:opacity-100'}`}
+    >
+      <div className='w-8 h-8 my-[5px] ml-2 block items-center justify-center relative mr-3'>
+        <div>
+          <img
+            className='rounded-full'
+            src={user.avatarUrl || require('@assets/img/logo/chatflow.png')}
+            alt={user.name}
+          />
+          <div
+            className={`absolute right-0 bottom-[-2px] w-[12px] h-[12px] border-2 border-[#2e3036] ${user.state === 'ONLINE' ? 'bg-lime-500' : 'bg-slate-500'} rounded-full`}
+          ></div>
+        </div>
+      </div>
+      <div
+        className={`flex items-start flex-col justify-center overflow-hidden whitespace-nowrap text-neutral-400 hover:text-white ${isActive && 'text-neutral-200'}`}
+      >
+        <p className={`w-[151px] text-lg m-0 h-[18px] flex items-center`}>
+          {user.name}
+        </p>
+      </div>
+    </div>
+  );
+};
+export default TeamMember;

src/view/layout/sidebar/team/TeamMemberSidebar.tsx

@@ -0,0 +1,60 @@
+import { useParams } from 'react-router-dom';
+import { useTeamDetailQuery } from '@service/feature/team/hook/query/useTeamServiceQuery.ts';
+import SkeletonTeamSidebar from '../components/skeletons/SkeletonTeamSidebar.tsx';
+import TeamMember from '../components/team/TeamMember.tsx';
+import { TeamMembers } from '@service/feature/team/types/team.ts';
+import SkeletonDMList from '../components/skeletons/SkeletonDMList.tsx';
+
+const TeamMemberSidebar = () => {
+  const { serverId } = useParams<{
+    serverId: string;
+    channelId: string;
+  }>();
+
+  const { data, isLoading, error } = useTeamDetailQuery(serverId);
+
+  if (isLoading) return <SkeletonDMList className='py-5 px-4' />;
+  if (error) return <div>에러</div>;
+
+  console.log('팀 유저 리스트: ', data);
+  const offlineUsers = data?.teamMembers.filter(
+    (user: { memberInfo: { state: string } }) =>
+      user.memberInfo.state === 'OFFLINE',
+  );
+  const onlineUsers = data?.teamMembers.filter(
+    (user: { memberInfo: { state: string } }) =>
+      user.memberInfo.state === 'ONLINE',
+  );
+
+  return (
+    <div className='flex flex-col py-5 px-4 gap-5'>
+      {onlineUsers.length > 0 && (
+        <div>
+          <p className='text-neutral-400 text-text-sm font-bold'>
+            온라인 - {onlineUsers.length}
+          </p>
+          {onlineUsers.map((user: TeamMembers) => (
+            <TeamMember key={user.id} user={user.memberInfo} />
+          ))}
+        </div>
+      )}
+      {offlineUsers.length > 0 && (
+        <div>
+          <p className='text-neutral-400 text-text-sm font-bold'>
+            오프라인 - {offlineUsers.length}
+          </p>
+          {offlineUsers.map((user: TeamMembers) => (
+            <TeamMember
+              key={user.id}
+              user={user.memberInfo}
+              isActive={false}
+              isMe={false}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default TeamMemberSidebar;