diff --git a/src/pages/QRCodeScanner.tsx b/src/pages/QRCodeScanner.tsx
index 9533c88..bbc4021 100644
--- a/src/pages/QRCodeScanner.tsx
+++ b/src/pages/QRCodeScanner.tsx
@@ -204,11 +204,11 @@ const QRCodeScanner = () => {
   }, []);
 
   return (
-    <div className="qr-scanner-wrapper">
-      <div className="qr-header">
-        <img src={logo} alt="KEYWE Logo" className="qr-logo" />
-        <h2 className="qr-header-text">QR 스캔 후 출입이 가능합니다!</h2>
-        <div className="qr-header-location">
+    <div className="qr-code-scanner-wrapper">
+      <div className="qr-code-scanner-header">
+        <img src={logo} alt="KEYWE Logo" className="qr-code-scanner-logo" />
+        <h2 className="qr-code-scanner-header-text">QR 스캔 후 출입이 가능합니다!</h2>
+        <div className="qr-code-scanner-header-location">
           {isZoneMode 
             ? `${buildingName} / ${zoneName}` 
             : `${buildingName} / ${direction}`}
@@ -217,20 +217,20 @@ const QRCodeScanner = () => {
 
       {showPopup && (
         <div
-          className={`qr-popup-message ${
-            CENTER_MESSAGES.includes(popupMessage) ? 'qr-popup-message-center' : ''
+          className={`qr-code-scanner-popup-message ${
+            CENTER_MESSAGES.includes(popupMessage) ? 'qr-code-scanner-popup-message-center' : ''
           }`}
         >
           {popupMessage}
         </div>
       )}
 
-      <div id="qr-reader" className="qr-reader" />
-      <div className="qr-overlay" />
+      <div id="qr-reader" className="qr-code-scanner-reader" />
+      <div className="qr-code-scanner-overlay" />
 
-      {error && <p className="qr-error-text">{error}</p>}
+      {error && <p className="qr-code-scanner-error-text">{error}</p>}
 
-      <button className="qr-back-button" onClick={handleBackClick}>돌아가기</button>
+      <button className="qr-code-scanner-back-button" onClick={handleBackClick}>돌아가기</button>
     </div>
   );
 };
diff --git a/src/pages/css/QRCodeScanner.css b/src/pages/css/QRCodeScanner.css
index 6014e7b..66f1d6c 100644
--- a/src/pages/css/QRCodeScanner.css
+++ b/src/pages/css/QRCodeScanner.css
@@ -1,4 +1,4 @@
-.qr-scanner-wrapper {
+.qr-code-scanner-wrapper {
   position: relative;
   width: 100vw;
   height: 100vh;
@@ -6,7 +6,7 @@
   background: black;
 }
 
-.qr-header {
+.qr-code-scanner-header {
   position: absolute;
   top: 0;
   left: 0;
@@ -19,20 +19,20 @@
   z-index: 9999;
 }
 
-.qr-logo {
+.qr-code-scanner-logo {
   top: 11px;
   position: absolute;
   left: 20px;
   height: 40px;
 }
 
-.qr-header-text {
+.qr-code-scanner-header-text {
   color: white;
   margin: 0;
   font-size: 20px;
 }
 
-.qr-popup-message {
+.qr-code-scanner-popup-message {
   position: fixed;
   top: 90PX;
   left: 50%;
@@ -48,13 +48,13 @@
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
 }
 
-.qr-popup-message-center {
+.qr-code-scanner-popup-message-center {
   font-size: 3rem;
   top: 50% !important;
   transform: translate(-50%, -50%) !important;
 }
 
-.qr-reader {
+.qr-code-scanner-reader {
   position: absolute;
   top: 0;
   left: 0;
@@ -65,7 +65,7 @@
   background: black;
 }
 
-.qr-overlay {
+.qr-code-scanner-overlay {
   position: absolute;
   top: 30PX;
   left: 0;
@@ -86,7 +86,7 @@
   );
 }
 
-.qr-error-text {
+.qr-code-scanner-error-text {
   color: red;
   position: absolute;
   bottom: 80px;
@@ -95,7 +95,7 @@
   font-weight: bold;
 }
 
-.qr-back-button {
+.qr-code-scanner-back-button {
   position: absolute;
   bottom: 20px;
   right: 20px;
@@ -110,7 +110,7 @@
 }
 
 
-.qr-header-location {
+.qr-code-scanner-header-location {
   position: absolute;
   right: 20px;
   top: 50%;