diff --git a/src/components/ErrorBoundary.css b/src/components/ErrorBoundary.css
new file mode 100644
index 0000000..4cb0ea8
--- /dev/null
+++ b/src/components/ErrorBoundary.css
@@ -0,0 +1,99 @@
+.error-boundary {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  padding: 2rem;
+  background-color: #2E2C2F;
+}
+
+.error-boundary-card {
+  text-align: center;
+  max-width: 440px;
+  padding: 40px 32px;
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 16px;
+}
+
+.error-boundary-icon {
+  width: 56px;
+  height: 56px;
+  margin: 0 auto 20px;
+  border-radius: 50%;
+  background: rgba(229, 115, 115, 0.12);
+  color: rgba(229, 115, 115, 0.9);
+  font-size: 1.5rem;
+  font-weight: 700;
+  line-height: 56px;
+}
+
+.error-boundary-title {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: rgba(255, 255, 255, 0.9);
+  margin: 0 0 8px 0;
+}
+
+.error-boundary-desc {
+  font-size: 0.9rem;
+  color: rgba(255, 255, 255, 0.45);
+  margin: 0 0 20px 0;
+}
+
+.error-boundary-detail {
+  padding: 12px 16px;
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: 8px;
+  margin-bottom: 24px;
+  text-align: left;
+}
+
+.error-boundary-type {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: rgba(229, 115, 115, 0.8);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.error-boundary-message {
+  font-size: 0.85rem;
+  color: rgba(255, 255, 255, 0.6);
+  margin: 6px 0 0 0;
+  word-break: break-word;
+  font-family: monospace;
+}
+
+.error-boundary-actions {
+  display: flex;
+  gap: 8px;
+  justify-content: center;
+}
+
+.error-boundary-btn {
+  padding: 10px 24px;
+  border-radius: 6px;
+  font-size: 0.9rem;
+  font-weight: 500;
+  cursor: pointer;
+  border: none;
+  transition: opacity 0.2s;
+}
+
+.error-boundary-btn:hover {
+  opacity: 0.85;
+}
+
+.error-boundary-btn-primary {
+  background: #BACDB0;
+  color: #2E2C2F;
+  font-weight: 600;
+}
+
+.error-boundary-btn-secondary {
+  background: transparent;
+  color: rgba(255, 255, 255, 0.5);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+}
diff --git a/src/components/ErrorBoundary.jsx b/src/components/ErrorBoundary.jsx
index 0fb7ebb..205c8f4 100644
--- a/src/components/ErrorBoundary.jsx
+++ b/src/components/ErrorBoundary.jsx
@@ -1,31 +1,54 @@
 import { Component } from 'react';
+import './ErrorBoundary.css';
 
 export default class ErrorBoundary extends Component {
   constructor(props) {
     super(props);
-    this.state = { hasError: false };
+    this.state = { hasError: false, error: null };
   }
 
-  static getDerivedStateFromError() {
-    return { hasError: true };
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
   }
 
   componentDidCatch(error, errorInfo) {
     console.error('Uncaught error:', error, errorInfo);
   }
 
+  handleRetry = () => {
+    this.setState({ hasError: false, error: null });
+  };
+
   render() {
     if (this.state.hasError) {
+      const { error } = this.state;
+      const errorType = error?.name || 'Error';
+      const errorMessage = error?.message || '알 수 없는 오류가 발생했습니다.';
+
       return (
-        <div style={{ padding: '2rem', textAlign: 'center', color: '#ccc' }}>
-          <h2>문제가 발생했습니다</h2>
-          <p>페이지를 새로고침하거나 잠시 후 다시 시도해주세요.</p>
-          <button onClick={() => window.location.reload()} style={{ marginTop: '1rem', padding: '0.5rem 1rem', cursor: 'pointer' }}>
-            새로고침
-          </button>
+        <div className="error-boundary">
+          <div className="error-boundary-card">
+            <div className="error-boundary-icon">!</div>
+            <h2 className="error-boundary-title">문제가 발생했습니다</h2>
+            <p className="error-boundary-desc">
+              예기치 않은 오류로 페이지를 표시할 수 없습니다.
+            </p>
+            <div className="error-boundary-detail">
+              <span className="error-boundary-type">{errorType}</span>
+              <p className="error-boundary-message">{errorMessage}</p>
+            </div>
+            <div className="error-boundary-actions">
+              <button className="error-boundary-btn error-boundary-btn-primary" onClick={this.handleRetry}>
+                다시 시도
+              </button>
+              <button className="error-boundary-btn error-boundary-btn-secondary" onClick={() => window.location.reload()}>
+                새로고침
+              </button>
+            </div>
+          </div>
         </div>
       );
     }
     return this.props.children;
   }
-}
+}
\ No newline at end of file
diff --git a/src/components/admin/AdminCommon.css b/src/components/admin/AdminCommon.module.css
similarity index 80%
rename from src/components/admin/AdminCommon.css
rename to src/components/admin/AdminCommon.module.css
index 51e45e5..dbdbfac 100644
--- a/src/components/admin/AdminCommon.css
+++ b/src/components/admin/AdminCommon.module.css
@@ -1,10 +1,10 @@
-.admin-section {
+.section {
   display: flex;
   flex-direction: column;
   gap: 24px;
 }
 
-.admin-section-title {
+.sectionTitle {
   font-size: 1.1rem;
   font-weight: 700;
   color: rgba(255, 255, 255, 0.9);
@@ -14,7 +14,7 @@
 }
 
 /* Form */
-.admin-form {
+.form {
   display: flex;
   flex-direction: column;
   gap: 12px;
@@ -24,18 +24,18 @@
   border-radius: 10px;
 }
 
-.admin-field {
+.field {
   display: flex;
   flex-direction: column;
   gap: 6px;
 }
 
-.admin-label {
+.label {
   font-size: 0.8rem;
   color: rgba(255, 255, 255, 0.5);
 }
 
-.admin-input {
+.input {
   padding: 10px 14px;
   background: rgba(255, 255, 255, 0.05);
   border: 1px solid rgba(186, 205, 176, 0.15);
@@ -46,11 +46,11 @@
   transition: border-color 0.2s;
 }
 
-.admin-input:focus {
+.input:focus {
   border-color: rgba(186, 205, 176, 0.5);
 }
 
-.admin-textarea {
+.textarea {
   padding: 10px 14px;
   background: rgba(255, 255, 255, 0.05);
   border: 1px solid rgba(186, 205, 176, 0.15);
@@ -63,24 +63,24 @@
   font-family: inherit;
 }
 
-.admin-textarea:focus {
+.textarea:focus {
   border-color: rgba(186, 205, 176, 0.5);
 }
 
-.admin-error {
+.error {
   font-size: 0.85rem;
   color: rgba(229, 115, 115, 0.9);
   margin: 0;
 }
 
-.admin-form-actions {
+.formActions {
   display: flex;
   gap: 8px;
   margin-top: 4px;
 }
 
 /* Buttons */
-.btn-admin-primary {
+.btnPrimary {
   padding: 10px 24px;
   background: #BACDB0;
   color: #2E2C2F;
@@ -92,10 +92,10 @@
   transition: opacity 0.2s;
 }
 
-.btn-admin-primary:hover { opacity: 0.9; }
-.btn-admin-primary:disabled { opacity: 0.5; cursor: not-allowed; }
+.btnPrimary:hover { opacity: 0.9; }
+.btnPrimary:disabled { opacity: 0.5; cursor: not-allowed; }
 
-.btn-admin-secondary {
+.btnSecondary {
   padding: 10px 20px;
   background: transparent;
   color: rgba(255, 255, 255, 0.5);
@@ -106,12 +106,12 @@
   transition: background 0.2s;
 }
 
-.btn-admin-secondary:hover {
+.btnSecondary:hover {
   background: rgba(255, 255, 255, 0.05);
 }
 
 /* List */
-.admin-list {
+.list {
   list-style: none;
   margin: 0;
   padding: 0;
@@ -120,7 +120,7 @@
   gap: 4px;
 }
 
-.admin-list-item {
+.listItem {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -130,14 +130,14 @@
   border-radius: 8px;
 }
 
-.admin-list-info {
+.listInfo {
   display: flex;
   align-items: center;
   gap: 12px;
   min-width: 0;
 }
 
-.admin-list-title {
+.listTitle {
   font-size: 0.9rem;
   color: rgba(255, 255, 255, 0.85);
   white-space: nowrap;
@@ -145,19 +145,19 @@
   text-overflow: ellipsis;
 }
 
-.admin-list-date {
+.listDate {
   font-size: 0.8rem;
   color: rgba(255, 255, 255, 0.3);
   flex-shrink: 0;
 }
 
-.admin-list-actions {
+.listActions {
   display: flex;
   gap: 8px;
   flex-shrink: 0;
 }
 
-.btn-admin-edit {
+.btnEdit {
   padding: 6px 14px;
   background: transparent;
   color: rgba(186, 205, 176, 0.8);
@@ -168,11 +168,11 @@
   transition: background 0.2s;
 }
 
-.btn-admin-edit:hover {
+.btnEdit:hover {
   background: rgba(186, 205, 176, 0.08);
 }
 
-.btn-admin-delete {
+.btnDelete {
   padding: 6px 14px;
   background: transparent;
   color: rgba(229, 115, 115, 0.8);
@@ -183,25 +183,25 @@
   transition: background 0.2s;
 }
 
-.btn-admin-delete:hover {
+.btnDelete:hover {
   background: rgba(229, 115, 115, 0.08);
 }
 
 /* Deploy block */
-.admin-deploy-block {
+.deployBlock {
   display: flex;
   flex-direction: column;
   gap: 8px;
 }
 
-.admin-deploy-header {
+.deployHeader {
   display: flex;
   align-items: center;
   gap: 12px;
   flex-wrap: wrap;
 }
 
-.admin-deploy-label {
+.deployLabel {
   font-size: 0.8rem;
   font-weight: 600;
   color: rgba(255, 255, 255, 0.5);
@@ -210,32 +210,32 @@
 }
 
 /* File input */
-.admin-input-file {
+.inputFile {
   padding: 8px 0;
   color: rgba(255, 255, 255, 0.7);
   font-size: 0.875rem;
   cursor: pointer;
 }
 
-.admin-input-file:disabled {
+.inputFile:disabled {
   opacity: 0.4;
   cursor: not-allowed;
 }
 
 /* Field hint */
-.admin-field-hint {
+.fieldHint {
   font-size: 0.75rem;
   color: rgba(255, 255, 255, 0.3);
 }
 
 /* Upload progress */
-.admin-upload-progress {
+.uploadProgress {
   display: flex;
   align-items: center;
   gap: 10px;
 }
 
-.admin-upload-bar {
+.uploadBar {
   flex: 1;
   height: 6px;
   background: #BACDB0;
@@ -243,7 +243,7 @@
   transition: width 0.2s;
 }
 
-.admin-upload-pct {
+.uploadPct {
   font-size: 0.8rem;
   color: rgba(255, 255, 255, 0.5);
   min-width: 36px;
@@ -251,7 +251,7 @@
 }
 
 /* Current build info */
-.admin-current-build {
+.currentBuild {
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -261,13 +261,13 @@
   border-radius: 8px;
 }
 
-.admin-meta-row {
+.metaRow {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
 }
 
-.admin-meta-item {
+.metaItem {
   font-size: 0.78rem;
   color: rgba(186, 205, 176, 0.8);
   background: rgba(186, 205, 176, 0.08);
@@ -276,85 +276,101 @@
   border: 1px solid rgba(186, 205, 176, 0.15);
 }
 
-.admin-meta-hash {
+.metaHash {
+  composes: metaItem;
   font-family: monospace;
   cursor: help;
 }
 
 /* Role badge */
-.admin-list-empty {
+.listEmpty {
   font-size: 0.9rem;
   color: rgba(255, 255, 255, 0.35);
   padding: 12px 16px;
   margin: 0;
 }
 
-.admin-role-badge {
+.roleBadge {
   font-size: 0.7rem;
   padding: 2px 8px;
   border-radius: 4px;
   font-weight: 600;
 }
 
-.admin-role-badge.admin {
+.roleBadgeAdmin {
+  composes: roleBadge;
   background: rgba(186, 205, 176, 0.15);
   color: #BACDB0;
 }
 
-.admin-role-badge.user {
+.roleBadgeUser {
+  composes: roleBadge;
   background: rgba(255, 255, 255, 0.08);
   color: rgba(255, 255, 255, 0.45);
 }
 
+.errorBlock {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.loading {
+  font-size: 0.9rem;
+  color: rgba(255, 255, 255, 0.35);
+  padding: 12px 16px;
+  margin: 0;
+}
+
 /* Mobile responsive */
 @media (max-width: 768px) {
-  .admin-form {
+  .form {
     padding: 16px 12px;
   }
 
-  .admin-input,
-  .admin-textarea {
+  .input,
+  .textarea {
     width: 100%;
     box-sizing: border-box;
   }
 
-  .admin-list-item {
+  .listItem {
     flex-direction: column;
     align-items: flex-start;
     gap: 8px;
     padding: 10px 12px;
   }
 
-  .admin-list-info {
+  .listInfo {
     width: 100%;
   }
 
-  .admin-list-actions {
+  .listActions {
     width: 100%;
     justify-content: flex-end;
   }
 
-  .admin-form-actions {
+  .formActions {
     flex-direction: column;
   }
 
-  .admin-form-actions button {
+  .formActions button {
     width: 100%;
     min-height: 44px;
   }
 
-  .btn-admin-primary,
-  .btn-admin-secondary,
-  .btn-admin-edit,
-  .btn-admin-delete {
+  .btnPrimary,
+  .btnSecondary,
+  .btnEdit,
+  .btnDelete {
     min-height: 44px;
   }
 
-  .admin-meta-row {
+  .metaRow {
     flex-direction: column;
   }
 
-  .admin-deploy-header {
+  .deployHeader {
     flex-direction: column;
     align-items: flex-start;
   }
diff --git a/src/components/admin/AnnouncementAdmin.jsx b/src/components/admin/AnnouncementAdmin.jsx
index 6fbcbc0..e6ced00 100644
--- a/src/components/admin/AnnouncementAdmin.jsx
+++ b/src/components/admin/AnnouncementAdmin.jsx
@@ -2,7 +2,7 @@ import { useState, useEffect, useCallback } from 'react';
 import { getAnnouncements, createAnnouncement, updateAnnouncement, deleteAnnouncement } from '../../api/announcements';
 import { useToast } from '../toast/useToast';
 import { useConfirm } from '../confirm/useConfirm';
-import './AdminCommon.css';
+import s from './AdminCommon.module.css';
 
 export default function AnnouncementAdmin() {
   const toast = useToast();
@@ -77,30 +77,30 @@ export default function AnnouncementAdmin() {
 
   if (fetchLoading) {
     return (
-      <div className="admin-section">
-        <h2 className="admin-section-title">공지사항 관리</h2>
-        <p className="admin-loading">불러오는 중...</p>
+      <div className={s.section}>
+        <h2 className={s.sectionTitle}>공지사항 관리</h2>
+        <p className={s.loading}>불러오는 중...</p>
       </div>
     );
   }
 
   if (fetchError) {
     return (
-      <div className="admin-section">
-        <h2 className="admin-section-title">공지사항 관리</h2>
-        <p className="admin-error">{fetchError}</p>
-        <button className="btn-admin-secondary" onClick={load}>다시 시도</button>
+      <div className={s.section}>
+        <h2 className={s.sectionTitle}>공지사항 관리</h2>
+        <p className={s.error}>{fetchError}</p>
+        <button className={s.btnSecondary} onClick={load}>다시 시도</button>
       </div>
     );
   }
 
   return (
-    <div className="admin-section">
-      <h2 className="admin-section-title">공지사항 관리</h2>
+    <div className={s.section}>
+      <h2 className={s.sectionTitle}>공지사항 관리</h2>
 
-      <form className="admin-form" onSubmit={handleSubmit}>
+      <form className={s.form} onSubmit={handleSubmit}>
         <input
-          className="admin-input"
+          className={s.input}
           placeholder="제목"
           value={form.title}
           onChange={(e) => setForm({ ...form, title: e.target.value })}
@@ -108,7 +108,7 @@ export default function AnnouncementAdmin() {
           aria-label="공지사항 제목"
         />
         <textarea
-          className="admin-textarea"
+          className={s.textarea}
           placeholder="내용"
           rows={4}
           value={form.content}
@@ -116,29 +116,29 @@ export default function AnnouncementAdmin() {
           maxLength={10000}
           aria-label="공지사항 내용"
         />
-        {error && <p className="admin-error">{error}</p>}
-        <div className="admin-form-actions">
-          <button className="btn-admin-primary" type="submit" disabled={loading}>
+        {error && <p className={s.error}>{error}</p>}
+        <div className={s.formActions}>
+          <button className={s.btnPrimary} type="submit" disabled={loading}>
             {editingId ? '수정 완료' : '공지 등록'}
           </button>
           {editingId && (
-            <button className="btn-admin-secondary" type="button" onClick={handleCancel}>
+            <button className={s.btnSecondary} type="button" onClick={handleCancel}>
               취소
             </button>
           )}
         </div>
       </form>
 
-      <ul className="admin-list">
+      <ul className={s.list}>
         {list.map((item) => (
-          <li key={item.id} className="admin-list-item">
-            <div className="admin-list-info">
-              <span className="admin-list-title">{item.title}</span>
-              <span className="admin-list-date">{item.createdAt?.slice(0, 10)}</span>
+          <li key={item.id} className={s.listItem}>
+            <div className={s.listInfo}>
+              <span className={s.listTitle}>{item.title}</span>
+              <span className={s.listDate}>{item.createdAt?.slice(0, 10)}</span>
             </div>
-            <div className="admin-list-actions">
-              <button className="btn-admin-edit" onClick={() => handleEdit(item)}>수정</button>
-              <button className="btn-admin-delete" onClick={() => handleDelete(item.id)}>삭제</button>
+            <div className={s.listActions}>
+              <button className={s.btnEdit} onClick={() => handleEdit(item)}>수정</button>
+              <button className={s.btnDelete} onClick={() => handleDelete(item.id)}>삭제</button>
             </div>
           </li>
         ))}
diff --git a/src/components/admin/DownloadAdmin.jsx b/src/components/admin/DownloadAdmin.jsx
index dec0b2b..b9df531 100644
--- a/src/components/admin/DownloadAdmin.jsx
+++ b/src/components/admin/DownloadAdmin.jsx
@@ -2,7 +2,7 @@ import { useState, useEffect } from 'react';
 import { getDownloadInfo } from '../../api/download';
 import { useToast } from '../toast/useToast';
 import UploadForm from './UploadForm';
-import './AdminCommon.css';
+import s from './AdminCommon.module.css';
 
 export default function DownloadAdmin() {
   const toast = useToast();
@@ -31,34 +31,34 @@ export default function DownloadAdmin() {
 
   if (loading) {
     return (
-      <div className="admin-section">
-        <h2 className="admin-section-title">게임 배포 관리</h2>
-        <p className="admin-loading">불러오는 중...</p>
+      <div className={s.section}>
+        <h2 className={s.sectionTitle}>게임 배포 관리</h2>
+        <p className={s.loading}>불러오는 중...</p>
       </div>
     );
   }
 
   if (loadError) {
     return (
-      <div className="admin-section">
-        <h2 className="admin-section-title">게임 배포 관리</h2>
-        <p className="admin-error">{loadError}</p>
-        <button className="btn-admin-secondary" onClick={load}>다시 시도</button>
+      <div className={s.section}>
+        <h2 className={s.sectionTitle}>게임 배포 관리</h2>
+        <p className={s.error}>{loadError}</p>
+        <button className={s.btnSecondary} onClick={load}>다시 시도</button>
       </div>
     );
   }
 
   return (
-    <div className="admin-section">
-      <h2 className="admin-section-title">게임 배포 관리</h2>
+    <div className={s.section}>
+      <h2 className={s.sectionTitle}>게임 배포 관리</h2>
 
       {/* 런처 섹션 */}
-      <div className="admin-deploy-block">
-        <div className="admin-deploy-header">
-          <span className="admin-deploy-label">런처</span>
+      <div className={s.deployBlock}>
+        <div className={s.deployHeader}>
+          <span className={s.deployLabel}>런처</span>
           {info?.launcherUrl && (
-            <div className="admin-meta-row">
-              {info.launcherSize && <span className="admin-meta-item">{info.launcherSize}</span>}
+            <div className={s.metaRow}>
+              {info.launcherSize && <span className={s.metaItem}>{info.launcherSize}</span>}
             </div>
           )}
         </div>
@@ -72,16 +72,16 @@ export default function DownloadAdmin() {
       </div>
 
       {/* 게임 섹션 */}
-      <div className="admin-deploy-block">
-        <div className="admin-deploy-header">
-          <span className="admin-deploy-label">게임</span>
+      <div className={s.deployBlock}>
+        <div className={s.deployHeader}>
+          <span className={s.deployLabel}>게임</span>
           {info?.url && (
-            <div className="admin-meta-row">
-              {info.version && <span className="admin-meta-item">{info.version}</span>}
-              {info.fileName && <span className="admin-meta-item">{info.fileName}</span>}
-              {info.fileSize && <span className="admin-meta-item">{info.fileSize}</span>}
+            <div className={s.metaRow}>
+              {info.version && <span className={s.metaItem}>{info.version}</span>}
+              {info.fileName && <span className={s.metaItem}>{info.fileName}</span>}
+              {info.fileSize && <span className={s.metaItem}>{info.fileSize}</span>}
               {info.fileHash && (
-                <span className="admin-meta-item admin-meta-hash" title={info.fileHash}>
+                <span className={s.metaHash} title={info.fileHash}>
                   SHA256: {info.fileHash.slice(0, 12)}...
                 </span>
               )}
diff --git a/src/components/admin/UploadForm.jsx b/src/components/admin/UploadForm.jsx
index 29e5874..f8339b9 100644
--- a/src/components/admin/UploadForm.jsx
+++ b/src/components/admin/UploadForm.jsx
@@ -1,6 +1,7 @@
 import { useState, useRef } from 'react';
 import { apiUpload } from '../../api/client';
 import { useToast } from '../toast/useToast';
+import s from './AdminCommon.module.css';
 
 export default function UploadForm({ title, hint, accept, endpoint, onSuccess }) {
   const toast = useToast();
@@ -62,31 +63,31 @@ export default function UploadForm({ title, hint, accept, endpoint, onSuccess })
   };
 
   return (
-    <form className="admin-form" onSubmit={handleUpload}>
-      <div className="admin-field">
-        <label className="admin-label">{title}</label>
+    <form className={s.form} onSubmit={handleUpload}>
+      <div className={s.field}>
+        <label className={s.label}>{title}</label>
         <input
           ref={fileInputRef}
           type="file"
           accept={accept}
-          className="admin-input-file"
+          className={s.inputFile}
           onChange={handleFileChange}
           disabled={uploading}
         />
-        <span className="admin-field-hint">{hint}</span>
+        <span className={s.fieldHint}>{hint}</span>
       </div>
 
       {uploading && (
-        <div className="admin-upload-progress">
-          <div className="admin-upload-bar" style={{ width: `${progress}%` }} />
-          <span className="admin-upload-pct">{progress}%</span>
+        <div className={s.uploadProgress}>
+          <div className={s.uploadBar} style={{ width: `${progress}%` }} />
+          <span className={s.uploadPct}>{progress}%</span>
         </div>
       )}
 
-      {error && <p className="admin-error">{error}</p>}
+      {error && <p className={s.error}>{error}</p>}
 
-      <div className="admin-form-actions">
-        <button className="btn-admin-primary" type="submit" disabled={uploading || !file}>
+      <div className={s.formActions}>
+        <button className={s.btnPrimary} type="submit" disabled={uploading || !file}>
           {uploading ? `업로드 중... (${progress}%)` : '업로드'}
         </button>
       </div>
diff --git a/src/components/admin/UserAdmin.jsx b/src/components/admin/UserAdmin.jsx
index dfa13f9..278530e 100644
--- a/src/components/admin/UserAdmin.jsx
+++ b/src/components/admin/UserAdmin.jsx
@@ -3,7 +3,7 @@ import { getUsers, updateUserRole, deleteUser } from '../../api/users';
 import { useAuth } from '../../context/useAuth';
 import { useToast } from '../toast/useToast';
 import { useConfirm } from '../confirm/useConfirm';
-import './AdminCommon.css';
+import s from './AdminCommon.module.css';
 
 export default function UserAdmin() {
   const [users, setUsers] = useState([]);
@@ -51,29 +51,29 @@ export default function UserAdmin() {
   };
 
   return (
-    <div className="admin-section">
-      <h2 className="admin-section-title">유저 관리</h2>
+    <div className={s.section}>
+      <h2 className={s.sectionTitle}>유저 관리</h2>
       {fetchError && (
-        <div className="admin-error-block">
-          <p className="admin-error">유저 목록을 불러올 수 없습니다.</p>
-          <button className="btn-admin-secondary" onClick={load}>다시 시도</button>
+        <div className={s.errorBlock}>
+          <p className={s.error}>유저 목록을 불러올 수 없습니다.</p>
+          <button className={s.btnSecondary} onClick={load}>다시 시도</button>
         </div>
       )}
-      {loading && <p className="admin-list-empty">불러오는 중...</p>}
-      {!loading && users.length === 0 && <p className="admin-list-empty">등록된 유저가 없습니다.</p>}
-      <ul className="admin-list">
+      {loading && <p className={s.listEmpty}>불러오는 중...</p>}
+      {!loading && users.length === 0 && <p className={s.listEmpty}>등록된 유저가 없습니다.</p>}
+      <ul className={s.list}>
         {users.map((u) => (
-          <li key={u.id} className="admin-list-item">
-            <div className="admin-list-info">
-              <span className="admin-list-title">{u.username}</span>
-              <span className={`admin-role-badge ${u.role}`}>{u.role}</span>
+          <li key={u.id} className={s.listItem}>
+            <div className={s.listInfo}>
+              <span className={s.listTitle}>{u.username}</span>
+              <span className={u.role === 'admin' ? s.roleBadgeAdmin : s.roleBadgeUser}>{u.role}</span>
             </div>
             {u.username !== me?.username && (
-              <div className="admin-list-actions">
-                <button className="btn-admin-edit" onClick={() => handleRoleToggle(u)}>
+              <div className={s.listActions}>
+                <button className={s.btnEdit} onClick={() => handleRoleToggle(u)}>
                   {u.role === 'admin' ? '일반으로' : '관리자로'}
                 </button>
-                <button className="btn-admin-delete" onClick={() => handleDelete(u)}>삭제</button>
+                <button className={s.btnDelete} onClick={() => handleDelete(u)}>삭제</button>
               </div>
             )}
           </li>
diff --git a/src/components/admin/UserAdmin.test.jsx b/src/components/admin/UserAdmin.test.jsx
index cfabbdc..d1a3b04 100644
--- a/src/components/admin/UserAdmin.test.jsx
+++ b/src/components/admin/UserAdmin.test.jsx
@@ -63,8 +63,7 @@ describe('UserAdmin', () => {
     // admin1 row should not have edit/delete buttons
     const listItems = screen.getAllByRole('listitem');
     const admin1Item = listItems.find((li) => li.textContent.includes('admin1'));
-    expect(admin1Item.querySelector('.btn-admin-edit')).toBeNull();
-    expect(admin1Item.querySelector('.btn-admin-delete')).toBeNull();
+    expect(admin1Item.querySelector('button')).toBeNull();
   });
 
   it('shows role badge for each user', async () => {