[FE] FEAT: 유저리스트 정렬 관리 #161

src/frontend/src/components/Sidebar/MemberList/index.css.ts

@@ -12,6 +12,7 @@ export const UserList = styled.div`
   display: flex;
   flex-direction: column;
   width: 100%;
+  overflow-y: auto;
 `;
 
 export const MemberFooter = styled.div`

src/frontend/src/components/Sidebar/MemberList/index.tsx

@@ -6,54 +6,56 @@ import { MemberListFooter } from '@/components/Sidebar/MemberList/MemberListFoot
 import { SidebarType } from '@/types/enums/SidebarType';
 import { ProfileType } from '@/types/enums/ProfileType';
 import { UserRole } from '@/types/enums/UserRole';
-import { memberListTest } from '@/assets/data/memberListTest';
 
+import { useUserList, IUser } from '@/hooks/utils/useUserList';
 import { Container, UserList, ProfileWrapper } from './index.css';
-interface IMemberListProps {
-  sidebarType: SidebarType;
-}
 
-export const MemberList = ({ sidebarType }: IMemberListProps) => {
+export const MemberList = () => {
+  const { addUser, getSortedUsers } = useUserList();
   const [activeProfile, setActiveProfile] = useState<number | null>(null);
+
   const handleProfileClick = (id: number) => {
     setActiveProfile(prevId => (prevId === id ? null : id));
   };
 
+  const handleAddUser = () => {
+    const newUser: IUser = {
+      id: Date.now(),
+      role: Math.floor(Math.random() * 3),
+      nickname: `User${Math.floor(Math.random() * 1000)}`,
+      profileImg: '',
+    };
+    addUser(newUser);
+  };
+
+  const users = getSortedUsers();
+
   return (
     <Container>
       <UserList>
-        {memberListTest
-          .sort((a, b) => a.role - b.role)
-          .map(member => (
-            <ProfileWrapper key={member.id}>
-              <div onClick={() => handleProfileClick(member.id)}>
-                <SmallProfile
-                  type={
-                    sidebarType === SidebarType.VOICECHAT
-                      ? ProfileType.VOICECHAT
-                      : ProfileType.MEMBER
-                  }
-                  role={member.role}
-                  nickname={member.nickname}
-                  imgUrl={member.profileImg}
-                />
-              </div>
-              {activeProfile === member.id ? (
-                <div className={`profile-detail ${activeProfile === member.id ? 'active' : ''}`}>
-                  <ProfileDetail
-                    userId={member.id}
-                    userRole={member.role}
-                    myRole={UserRole.CREATOR}
-                    sidebarType={sidebarType}
-                  />
-                </div>
-              ) : (
-                ''
-              )}
-            </ProfileWrapper>
-          ))}
+        {users.map(member => (
+          <ProfileWrapper key={member.id}>
+            <div onClick={() => handleProfileClick(member.id)}>
+              <SmallProfile
+                type={ProfileType.MEMBER}
+                role={member.role}
+                nickname={member.nickname}
+                imgUrl={member.profileImg}
+              />
+            </div>
+            {activeProfile === member.id && (
+              <ProfileDetail
+                userId={member.id}
+                userRole={member.role}
+                myRole={UserRole.CREATOR}
+                sidebarType={SidebarType.MEMBER}
+              />
+            )}
+          </ProfileWrapper>
+        ))}
       </UserList>
-      <MemberListFooter sidebarType={sidebarType} />
+      <button onClick={handleAddUser}>랜덤 유저 추가</button>
+      <MemberListFooter sidebarType={SidebarType.MEMBER} />
     </Container>
   );
 };

src/frontend/src/components/Sidebar/VoiceChat/index.css.ts

@@ -0,0 +1,75 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+`;
+
+export const UserList = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  overflow-y: auto;
+`;
+
+export const MemberFooter = styled.div`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  padding: 8px 0;
+
+  border-top: 1px solid #d4d4d4;
+`;
+
+export const VoiceChatFooter = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: space-around;
+  padding: 8px 0px;
+  border-top: 1px solid #d4d4d4;
+`;
+
+export const ActionButton = styled.button`
+  border: none;
+  padding: 10px;
+  border-radius: 50%;
+  background-color: #f4f4f4;
+  cursor: pointer;
+`;
+
+export const JoinButton = styled.button`
+  width: 194px;
+  border: none;
+  background-color: #ff9100;
+  padding: 10px 20px;
+  color: white;
+  font-weight: bold;
+  border-radius: 5px;
+  cursor: pointer;
+`;
+
+export const ProfileWrapper = styled.div`
+  position: relative;
+  cursor: pointer;
+
+  & .profile-detail {
+    position: absolute;
+    top: 0px;
+    right: 60%;
+    transform: translateX(-50%);
+    opacity: 0;
+    visibility: hidden;
+    transition:
+      opacity 0.3s ease,
+      visibility 0.3s ease;
+    z-index: 10;
+  }
+
+  .profile-detail.active {
+    opacity: 1;
+    visibility: visible;
+  }
+`;

src/frontend/src/components/Sidebar/VoiceChat/index.tsx

@@ -0,0 +1,52 @@
+import { useState } from 'react';
+import { SmallProfile } from '@/components/common/SmallProfile';
+import { ProfileDetail } from '@/components/common/ProfileDetail';
+import { MemberListFooter } from '@/components/Sidebar/MemberList/MemberListFooter';
+
+import { SidebarType } from '@/types/enums/SidebarType';
+import { ProfileType } from '@/types/enums/ProfileType';
+import { UserRole } from '@/types/enums/UserRole';
+import { memberListTest } from '@/assets/data/memberListTest';
+
+import { Container, UserList, ProfileWrapper } from './index.css';
+
+export const VoiceChat = () => {
+  const [activeProfile, setActiveProfile] = useState<number | null>(null);
+  const handleProfileClick = (id: number) => {
+    setActiveProfile(prevId => (prevId === id ? null : id));
+  };
+
+  return (
+    <Container>
+      <UserList>
+        {memberListTest
+          .sort((a, b) => a.role - b.role)
+          .map(member => (
+            <ProfileWrapper key={member.id}>
+              <div onClick={() => handleProfileClick(member.id)}>
+                <SmallProfile
+                  type={ProfileType.VOICECHAT}
+                  role={member.role}
+                  nickname={member.nickname}
+                  imgUrl={member.profileImg}
+                />
+              </div>
+              {activeProfile === member.id ? (
+                <div className={`profile-detail ${activeProfile === member.id ? 'active' : ''}`}>
+                  <ProfileDetail
+                    userId={member.id}
+                    userRole={member.role}
+                    myRole={UserRole.CREATOR}
+                    sidebarType={SidebarType.VOICECHAT}
+                  />
+                </div>
+              ) : (
+                ''
+              )}
+            </ProfileWrapper>
+          ))}
+      </UserList>
+      <MemberListFooter sidebarType={SidebarType.VOICECHAT} />
+    </Container>
+  );
+};

src/frontend/src/components/Sidebar/index.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react';
 import { ChatBox } from './Chating';
 import { MemberList } from './MemberList';
 import { Playlist } from './Playlist';
+import { VoiceChat } from './VoiceChat';
 import SidebarChat from '@/assets/img/SidebarChat.svg';
 import SidebarPlaylist from '@/assets/img/SidebarPlaylist.svg';
 import SidebarVoicechat from '@/assets/img/SidebarVoicechat.svg';
@@ -12,19 +13,16 @@ import { SidebarType } from '@/types/enums/SidebarType';
 export const Sidebar = () => {
   const [interfaceType, setInterfaceType] = useState<SidebarType>(SidebarType.CHAT);
 
+  const contentComponents = {
+    [SidebarType.CHAT]: ChatBox,
+    [SidebarType.PLAYLIST]: Playlist,
+    [SidebarType.VOICECHAT]: VoiceChat,
+    [SidebarType.MEMBER]: MemberList,
+  };
+
   const renderContent = () => {
-    switch (interfaceType) {
-      case SidebarType.CHAT:
-        return <ChatBox />;
-      case SidebarType.PLAYLIST:
-        return <Playlist />;
-      case SidebarType.VOICECHAT:
-        return <MemberList sidebarType={SidebarType.VOICECHAT} />;
-      case SidebarType.MEMBER:
-        return <MemberList sidebarType={SidebarType.MEMBER} />;
-      default:
-        return null;
-    }
+    const Component = contentComponents[interfaceType];
+    return Component ? <Component /> : null;
   };
 
   return (