[FE] REFACTOR: 변수및 파일명 UserList로 변경

src/frontend/src/components/Sidebar/MemberList/MemberListFooter/index.tsx → src/frontend/src/components/Sidebar/UserList/UserListFooter/index.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { CommonInput } from '@/components/common/Input';
-import { MemberFooter, VoiceChatFooter, ActionButton, JoinButton } from '../index.css';
+import { UserFooter, VoiceChatFooter, ActionButton, JoinButton } from '../index.css';
 
 import { SidebarType } from '@/types/enums/SidebarType';
 
@@ -10,23 +10,23 @@ import HeadphoneOn from '@/assets/img/HeadphoneOn.svg';
 import MicrophoneOffRed from '@/assets/img/MicrophoneOffRed.svg';
 import HeadphoneOffRed from '@/assets/img/HeadphoneOffRed.svg';
 
-interface IMemberListFooter {
+interface IUserListFooter {
   sidebarType: SidebarType;
 }
 
-export const MemberListFooter = (props: IMemberListFooter) => {
+export const UserListFooter = (props: IUserListFooter) => {
   const [micOn, setMicOn] = useState(true);
   const [soundOn, setSoundOn] = useState(true);
 
   const handleMicrophone = () => setMicOn(!micOn);
   const handleSound = () => setSoundOn(!soundOn);
 
-  if (props.sidebarType === SidebarType.MEMBER) {
+  if (props.sidebarType === SidebarType.USERLIST) {
     return (
-      <MemberFooter>
+      <UserFooter>
         <img src={AddUserIcon} alt="Add User" />
         <CommonInput placeholder="룸 유저 검색" design={1} />
-      </MemberFooter>
+      </UserFooter>
     );
   }
 

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

@@ -8,14 +8,14 @@ export const Container = styled.div`
   justify-content: space-between;
 `;
 
-export const UserList = styled.div`
+export const UserListContainer = styled.div`
   display: flex;
   flex-direction: column;
   width: 100%;
   overflow-y: auto;
 `;
 
-export const MemberFooter = styled.div`
+export const UserFooter = styled.div`
   width: 100%;
   display: flex;
   align-items: center;

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

@@ -1,15 +1,15 @@
 import { useState, useEffect, useRef } from 'react';
 import { SmallProfile } from '@/components/common/SmallProfile';
 import { ProfileDetail } from '@/components/common/ProfileDetail';
-import { MemberListFooter } from '@/components/Sidebar/MemberList/MemberListFooter';
+import { UserListFooter } from '@/components/Sidebar/UserList/UserListFooter';
 import { RedBlackTree } from '@/hooks/utils/RedBlackTree';
 
 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';
+import { Container, UserListContainer, ProfileWrapper } from './index.css';
 
 interface IUser {
   id: number;
@@ -25,7 +25,7 @@ const compareUsers = (a: IUser, b: IUser): number => {
   return a.id - b.id;
 };
 
-export const MemberList = () => {
+export const UserList = () => {
   const treeRef = useRef<RedBlackTree<IUser> | null>(null);
   const [, setVersion] = useState(0);
 
@@ -64,7 +64,7 @@ export const MemberList = () => {
 
   return (
     <Container>
-      <UserList>
+      <UserListContainer>
         {users.map(member => (
           <ProfileWrapper key={member.id}>
             <div onClick={() => handleProfileClick(member.id)}>
@@ -80,14 +80,14 @@ export const MemberList = () => {
                 userId={member.id}
                 userRole={member.role}
                 myRole={UserRole.CREATOR}
-                sidebarType={SidebarType.MEMBER}
+                sidebarType={SidebarType.USERLIST}
               />
             )}
           </ProfileWrapper>
         ))}
-      </UserList>
+      </UserListContainer>
       <button onClick={handleAddUser}>랜덤 유저 추가</button>
-      <MemberListFooter sidebarType={SidebarType.MEMBER} />
+      <UserListFooter sidebarType={SidebarType.USERLIST} />
     </Container>
   );
 };

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

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { SmallProfile } from '@/components/common/SmallProfile';
 import { ProfileDetail } from '@/components/common/ProfileDetail';
-import { MemberListFooter } from '@/components/Sidebar/MemberList/MemberListFooter';
+import { UserListFooter } from '@/components/Sidebar/UserList/UserListFooter';
 
 import { SidebarType } from '@/types/enums/SidebarType';
 import { ProfileType } from '@/types/enums/ProfileType';
@@ -51,7 +51,7 @@ export const VoiceChat = () => {
           </ProfileWrapper>
         ))}
       </UserList>
-      <MemberListFooter sidebarType={SidebarType.VOICECHAT} />
+      <UserListFooter sidebarType={SidebarType.VOICECHAT} />
     </Container>
   );
 };

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

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { ChatBox } from './Chating';
-import { MemberList } from './MemberList';
+import { UserList } from './UserList';
 import { Playlist } from './Playlist';
 import { VoiceChat } from './VoiceChat';
 import SidebarChat from '@/assets/img/SidebarChat.svg';
@@ -17,7 +17,7 @@ export const Sidebar = () => {
     [SidebarType.CHAT]: ChatBox,
     [SidebarType.PLAYLIST]: Playlist,
     [SidebarType.VOICECHAT]: VoiceChat,
-    [SidebarType.MEMBER]: MemberList,
+    [SidebarType.USERLIST]: UserList,
   };
 
   const renderContent = () => {
@@ -28,7 +28,7 @@ export const Sidebar = () => {
   return (
     <Wrapper>
       <Nav>
-        {[SidebarType.CHAT, SidebarType.PLAYLIST, SidebarType.VOICECHAT, SidebarType.MEMBER].map(
+        {[SidebarType.CHAT, SidebarType.PLAYLIST, SidebarType.VOICECHAT, SidebarType.USERLIST].map(
           (type, index) => (
             <NavButton
               key={index}

src/frontend/src/types/enums/SidebarType.ts

@@ -2,5 +2,5 @@ export enum SidebarType {
   CHAT = 0,
   PLAYLIST = 1,
   VOICECHAT = 2,
-  MEMBER = 3,
+  USERLIST = 3,
 }