Merge pull request #115 from DMU-DebugVisual/inseong_websocket

권한 표시변경

Author: Danto7632

src/components/codecast/codecastlive/CodecastLive.jsx

@@ -802,14 +802,19 @@ export default function CodecastLive({ isDark }) {
 
     // 사이드바 표시용 역할 계산: 현재 세션 권한표 반영
     const sidebarViewParticipants = useMemo(() => {
-        const perms = activeSessionPermissions;
         const ownerId = activeSessionMeta?.ownerId;
+        const perms = activeSessionPermissions || {};
         return participants.map((p) => {
-            let displayRole = 'view';
-            if (p.id === roomOwnerId) displayRole = 'host';      // 방장 표시 유지
-            if (p.id === ownerId) displayRole = 'host';          // 세션 소유자를 별도 'owner'로 구분하고 싶으면 이 라인을 바꿔도 됨
-            else if (perms[p.id] === 'edit') displayRole = 'edit';
-            return { ...p, displayRole };
+            const idKey = String(p.id);
+            const isSessionOwner = !!ownerId && p.id === ownerId;
+            const hasEditPermission = perms[p.id] === 'edit' || perms[idKey] === 'edit';
+            const sessionRole = isSessionOwner ? 'owner' : hasEditPermission ? 'edit' : 'view';
+
+            return {
+                ...p,
+                sessionRole,
+                isRoomOwner: p.id === roomOwnerId,
+            };
         });
     }, [participants, activeSessionPermissions, activeSessionMeta?.ownerId, roomOwnerId]);
 

src/components/codecast/codecastlive/CodecastSidebar.css

@@ -156,13 +156,45 @@
     color: #3f51b5;
 }
 
-.role-icon {
-    font-size: 15px;
+.permission-chip {
+    display: flex;
+    justify-content: center;
+    min-width: 78px;
+    flex-shrink: 0;
+}
+
+.role-badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 3px 10px;
+    font-size: 11px;
+    font-weight: 600;
+    border-radius: 999px;
+    background: var(--surface-muted);
+    color: var(--text-muted);
+    border: 1px solid transparent;
+    min-width: 64px;
+    letter-spacing: -0.02em;
 }
 
-.role-icon.host { color: #ffbf00; }
-.role-icon.edit { color: #00a152; }
-.role-icon.view { color: #999; }
+.role-badge.owner {
+    background: rgba(250, 204, 21, 0.14);
+    color: #fbbf24;
+    border-color: rgba(250, 204, 21, 0.25);
+}
+
+.role-badge.edit {
+    background: rgba(56, 189, 248, 0.14);
+    color: #38bdf8;
+    border-color: rgba(56, 189, 248, 0.25);
+}
+
+.role-badge.view {
+    background: rgba(148, 163, 184, 0.12);
+    color: #94a3b8;
+    border-color: rgba(148, 163, 184, 0.2);
+}
 
 .participant-item.active-user {
     background-color: var(--accent-soft-strong);

src/components/codecast/codecastlive/CodecastSidebar.jsx

@@ -1,37 +1,51 @@
 import React, { useEffect, useRef, useState } from 'react';
 import './CodecastSidebar.css';
-import { FaCrown, FaPenFancy, FaEye, FaUser, FaEllipsisV, FaCheck, FaComments } from 'react-icons/fa';
+import { FaUser, FaEllipsisV, FaCheck, FaComments } from 'react-icons/fa';
 
-const RoleIcon = ({ role }) => {
-    if (role === 'host') return <FaCrown className="role-icon host" />;
-    if (role === 'edit') return <FaPenFancy className="role-icon edit" />;
-    return <FaEye className="role-icon view" />;
+const RoleBadge = ({ role }) => {
+    const labelMap = {
+        owner: '세션 소유자',
+        edit: '편집',
+        view: '읽기',
+    };
+    const label = labelMap[role] ?? '';
+
+    return (
+        <span className={`role-badge ${role || 'blank'}`}>
+            {label || '\u00A0'}
+        </span>
+    );
 };
 
 function useClickOutside(onClose) {
     const ref = useRef(null);
+
     useEffect(() => {
-        const handler = (e) => {
+        const handler = (event) => {
             if (!ref.current) return;
-            if (!ref.current.contains(e.target)) onClose?.();
+            if (!ref.current.contains(event.target)) {
+                onClose?.();
+            }
         };
+
         document.addEventListener('mousedown', handler);
         return () => document.removeEventListener('mousedown', handler);
     }, [onClose]);
+
     return ref;
 }
 
 export default function CodecastSidebar({
-                                             participants,
-                                             currentUserId,
-                                             roomOwnerId,
-                                             activeSession,
-                                             focusedParticipantId,
-                                             onSelectParticipant,
-                                             onChangePermission,
-                                             onKick,
-                                             onOpenChat,
-                                         }) {
+    participants,
+    currentUserId,
+    roomOwnerId,
+    activeSession,
+    focusedParticipantId,
+    onSelectParticipant,
+    onChangePermission,
+    onKick,
+    onOpenChat,
+}) {
     const [menuFor, setMenuFor] = useState(null);
     const closeMenu = () => setMenuFor(null);
     const menuRef = useClickOutside(closeMenu);
@@ -40,14 +54,6 @@ export default function CodecastSidebar({
         !!activeSession && (activeSession.ownerId === currentUserId || roomOwnerId === currentUserId);
     const canKick = currentUserId === roomOwnerId;
 
-    const resolveRole = (participant) => {
-        if (participant.role === 'host') return 'host';
-        if (participant.role === 'edit') return 'edit';
-        if (activeSession?.permissions?.[participant.id] === 'edit') return 'edit';
-        if (participant.role) return participant.role;
-        return participant.id === roomOwnerId ? 'host' : 'view';
-    };
-
     return (
         <aside className="codecast-sidebar">
             <div className="sidebar-headline">
@@ -67,7 +73,8 @@ export default function CodecastSidebar({
 
             <ul className="participant-list">
                 {participants.map((participant) => {
-                    const role = resolveRole(participant);
+                    const role = participant.sessionRole || 'view';
+                    const isSessionOwnerRole = role === 'owner';
                     const isFocused = participant.id === focusedParticipantId;
                     const isMenuOpen = menuFor === participant.id;
                     const isSelf = participant.id === currentUserId;
@@ -89,7 +96,10 @@ export default function CodecastSidebar({
                         <li
                             key={participant.id}
                             className={`participant-item ${isFocused ? 'active-user' : ''}`}
-                            onClick={() => onSelectParticipant?.(participant.id)}
+                            onClick={() => {
+                                closeMenu();
+                                onSelectParticipant?.(participant.id);
+                            }}
                         >
                             {participant.avatar ? (
                                 <img src={participant.avatar} alt={participant.name} className="avatar" />
@@ -107,32 +117,29 @@ export default function CodecastSidebar({
                                 <span className={`stage ${stage}`}>{stageLabel}</span>
                             </div>
 
-                            <RoleIcon role={role} />
+                            <div className="permission-chip">
+                                <RoleBadge role={role} />
+                            </div>
 
                             <button
                                 className="more-btn"
                                 type="button"
                                 aria-label={`${participant.name} 더보기`}
-                                onClick={(e) => {
-                                    e.stopPropagation();
+                                onClick={(event) => {
+                                    event.stopPropagation();
                                     setMenuFor(isMenuOpen ? null : participant.id);
                                 }}
                             >
                                 <FaEllipsisV />
                             </button>
 
                             {isMenuOpen && (
-                                <div className="more-menu" ref={menuRef} onClick={(e) => e.stopPropagation()}>
+                                <div className="more-menu" ref={menuRef} onClick={(event) => event.stopPropagation()}>
                                     <div className="menu-group">
                                         <div className="menu-label">세션 권한</div>
 
-                                        <button
-                                            className="menu-item"
-                                            type="button"
-                                            onClick={() => {}}
-                                            disabled
-                                        >
-                                            {role === 'host' && <FaCheck className="check" />}
+                                        <button className="menu-item" type="button" onClick={() => {}} disabled>
+                                            {isSessionOwnerRole && <FaCheck className="check" />}
                                             세션 소유자
                                         </button>
 
@@ -147,7 +154,11 @@ export default function CodecastSidebar({
                                                     type="button"
                                                     onClick={() => {
                                                         if (!disabled) {
-                                                            onChangePermission?.(activeSession.sessionId, participant.id, nextRole);
+                                                            onChangePermission?.(
+                                                                activeSession.sessionId,
+                                                                participant.id,
+                                                                nextRole
+                                                            );
                                                         }
                                                         closeMenu();
                                                     }}