design: 내 강의 스타일 수정

frontend/src/assets/icons/compass.svg

@@ -0,0 +1,8 @@
+<svg width="49" height="49" viewBox="0 0 49 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Compass">
+<g id="Icon">
+<path d="M24.5 44.5C35.5457 44.5 44.5 35.5457 44.5 24.5C44.5 13.4543 35.5457 4.5 24.5 4.5C13.4543 4.5 4.5 13.4543 4.5 24.5C4.5 35.5457 13.4543 44.5 24.5 44.5Z"  stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M32.98 16.02L28.74 28.74L16.02 32.98L20.26 20.26L32.98 16.02Z"  stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</g>
+</svg>

frontend/src/assets/icons/plus.svg

@@ -0,0 +1,5 @@
+<svg width="49" height="49" viewBox="0 0 49 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Plus circle">
+<path id="Icon" d="M24.5 16.5V32.5M16.5 24.5H32.5M44.5 24.5C44.5 35.5457 35.5457 44.5 24.5 44.5C13.4543 44.5 4.5 35.5457 4.5 24.5C4.5 13.4543 13.4543 4.5 24.5 4.5C35.5457 4.5 44.5 13.4543 44.5 24.5Z" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

frontend/src/components/ClassCard/ClassCard.jsx

@@ -1,5 +1,6 @@
 import { Link } from 'react-router-dom';
 import styles from './ClassCard.module.css';
+import CompassIcon from '/src/assets/icons/compass.svg?react';
 
 export default function ClassCard({ img, path, children }) {
   return (
@@ -7,11 +8,17 @@ export default function ClassCard({ img, path, children }) {
       to={path}
       className={styles.card}
     >
-      <img
-        src={img}
-        alt="강의 이미지"
-        className={styles.thumbnail}
-      />
+      {img ? (
+        <img
+          src={img}
+          alt="강의 이미지"
+          className={styles.thumbnail}
+        />
+      ) : (
+        <div className={styles.thumbnail}>
+          <CompassIcon />
+        </div>
+      )}
       <div>{children}</div>
     </Link>
   );

frontend/src/components/ClassCard/ClassCard.module.css

@@ -9,9 +9,13 @@
 }
 
 .thumbnail {
+  display: flex;
+  justify-content: center;
+  align-items: center;
   width: 295px;
   height: 220px;
   border-radius: 20px;
   background-color: var(--background-secondary);
+  stroke: var(--text-color);
   box-sizing: border-box;
 }

frontend/src/components/LiveRoom/LiveRoom.jsx

@@ -115,7 +115,10 @@ export default function LiveRoom() {
                 </FocusLayoutContainer>
               </div>
             )}
-            <ControlBar controls={{ chat: false, leave: false, screenShare: role === '강사' }} />
+            <ControlBar
+              variation="minimal"
+              controls={{ chat: false, leave: true, screenShare: role === '강사' }}
+            />
           </div>
           <ChatRoom />
         </LayoutContextProvider>

frontend/src/components/SideBar/SideBar.module.css

@@ -18,7 +18,7 @@
 .groupList {
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: 8px;
   list-style: none;
   padding: 0;
   margin: 0;

frontend/src/components/SideBar/SideLink.module.css

@@ -15,5 +15,4 @@
 
 .active {
   font-weight: 700;
-  text-decoration: underline;
 }