From 5a2d770589ae3a68945575b91552a7d9999a6278 Mon Sep 17 00:00:00 2001
From: wallace <wallacegb94@gmail.com>
Date: Thu, 27 Nov 2025 00:45:55 +0900
Subject: [PATCH] =?UTF-8?q?global=20css=20=EC=A0=81=EC=9A=A9,=20=EA=B6=8C?=
 =?UTF-8?q?=ED=95=9C=EC=84=A4=EC=A0=95=20=EC=99=84=EB=A3=8C1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/admin/id/page.tsx            | 176 +++++++++++++++++++--------
 src/app/course-list/page.tsx         |  22 ++--
 src/app/globals.css                  |  40 +++---
 src/app/login/LoginErrorModal.tsx    |  21 +++-
 src/app/login/page.tsx               |   9 +-
 src/app/menu/ChangePasswordModal.tsx |  36 +++---
 src/app/menu/account/page.tsx        |  16 +--
 src/app/menu/courses/CourseCard.tsx  |  36 +++---
 src/app/page.tsx                     |  74 ++++++++---
 9 files changed, 285 insertions(+), 145 deletions(-)

diff --git a/src/app/admin/id/page.tsx b/src/app/admin/id/page.tsx
index 4bfac39..b5207d1 100644
--- a/src/app/admin/id/page.tsx
+++ b/src/app/admin/id/page.tsx
@@ -179,13 +179,76 @@ export default function AdminIdPage() {
     setIsActivateModalOpen(true);
   }
 
-  function handleActivateConfirm() {
-    if (selectedUserId) {
+  async function handleActivateConfirm() {
+    if (!selectedUserId) {
+      setIsActivateModalOpen(false);
+      setSelectedUserId(null);
+      return;
+    }
+
+    try {
+      // selectedUserId로 사용자 찾기
+      const user = users.find(u => u.id === selectedUserId);
+      if (!user || !user.email || user.email === '-') {
+        setToastMessage('사용자 정보를 찾을 수 없습니다.');
+        setShowToast(true);
+        setTimeout(() => {
+          setShowToast(false);
+        }, 3000);
+        setIsActivateModalOpen(false);
+        setSelectedUserId(null);
+        return;
+      }
+
+      const token = localStorage.getItem('token') || document.cookie
+        .split('; ')
+        .find(row => row.startsWith('token='))
+        ?.split('=')[1];
+
+      if (!token) {
+        setToastMessage('로그인이 필요합니다.');
+        setShowToast(true);
+        setTimeout(() => {
+          setShowToast(false);
+        }, 3000);
+        setIsActivateModalOpen(false);
+        setSelectedUserId(null);
+        return;
+      }
+
+      const apiUrl = process.env.NEXT_PUBLIC_API_BASE_URL 
+        ? `${process.env.NEXT_PUBLIC_API_BASE_URL}/admin/users/${selectedUserId}/unsuspend`
+        : `https://hrdi.coconutmeet.net/admin/users/${selectedUserId}/unsuspend`;
+
+      const response = await fetch(apiUrl, {
+        method: 'PATCH',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${token}`,
+        },
+      });
+
+      if (!response.ok) {
+        let errorMessage = `계정 활성화 실패 (${response.status})`;
+        try {
+          const errorData = await response.json();
+          if (errorData.error) {
+            errorMessage = errorData.error;
+          } else if (errorData.message) {
+            errorMessage = errorData.message;
+          }
+        } catch (parseError) {
+          // ignore
+        }
+        throw new Error(errorMessage);
+      }
+
+      // API 호출 성공 시 로컬 상태 업데이트
       setUsers(prevUsers => 
-        prevUsers.map(user => 
-          user.id === selectedUserId 
-            ? { ...user, status: 'active' }
-            : user
+        prevUsers.map(u => 
+          u.id === selectedUserId 
+            ? { ...u, status: 'active' }
+            : u
         )
       );
       setToastMessage('계정을 활성화했습니다.');
@@ -193,9 +256,18 @@ export default function AdminIdPage() {
       setTimeout(() => {
         setShowToast(false);
       }, 3000);
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : '계정 활성화 중 오류가 발생했습니다.';
+      setToastMessage(errorMessage);
+      setShowToast(true);
+      setTimeout(() => {
+        setShowToast(false);
+      }, 3000);
+      console.error('계정 활성화 오류:', err);
+    } finally {
+      setIsActivateModalOpen(false);
+      setSelectedUserId(null);
     }
-    setIsActivateModalOpen(false);
-    setSelectedUserId(null);
   }
 
   function handleActivateCancel() {
@@ -337,13 +409,13 @@ export default function AdminIdPage() {
             <div className="h-full flex flex-col px-8">
             {/* 제목 영역 */}
             <div className="h-[100px] flex items-center">
-              <h1 className="text-[24px] font-bold leading-[1.5] text-[#1b2027]">
+              <h1 className="text-[24px] font-bold leading-normal text-text-title">
                 권한 설정
               </h1>
             </div>
             {/* 탭 네비게이션 */}
             <div>
-              <div className="flex items-center gap-8 border-b border-[#dee1e6]">
+              <div className="flex items-center gap-8 border-b border-input-border">
                 {[
                   { id: 'all' as TabType, label: '전체' },
                   { id: 'learner' as TabType, label: '학습자' },
@@ -355,15 +427,15 @@ export default function AdminIdPage() {
                     type="button"
                     onClick={() => setActiveTab(tab.id)}
                     className={[
-                      "pb-4 px-1 text-[16px] font-medium leading-[1.5] transition-colors relative cursor-pointer",
+                      "pb-4 px-1 text-[16px] font-medium leading-normal transition-colors relative cursor-pointer",
                       activeTab === tab.id
-                        ? "text-[#1f2b91] font-semibold"
-                        : "text-[#6c7682]",
+                        ? "text-active-button font-semibold"
+                        : "text-text-label",
                     ].join(" ")}
                   >
                     {tab.label}
                     {activeTab === tab.id && (
-                      <span className="absolute bottom-0 left-0 right-0 h-0.5 bg-[#1f2b91]" />
+                      <span className="absolute bottom-0 left-0 right-0 h-0.5 bg-active-button" />
                     )}
                   </button>
                 ))}
@@ -373,27 +445,27 @@ export default function AdminIdPage() {
             {/* 콘텐츠 영역 */}
             <div className="flex-1 pt-8 flex flex-col">
               {isLoading ? (
-                <div className="rounded-lg border border-[#dee1e6] bg-white min-h-[400px] flex items-center justify-center">
-                  <p className="text-[16px] font-medium leading-[1.5] text-[#333c47]">
+                <div className="rounded-lg border border-input-border bg-white min-h-[400px] flex items-center justify-center">
+                  <p className="text-[16px] font-medium leading-normal text-neutral-700">
                     데이터를 불러오는 중...
                   </p>
                 </div>
               ) : error ? (
-                <div className="rounded-lg border border-[#dee1e6] bg-white min-h-[400px] flex items-center justify-center">
-                  <p className="text-[16px] font-medium leading-[1.5] text-[#f64c4c]">
+                <div className="rounded-lg border border-input-border bg-white min-h-[400px] flex items-center justify-center">
+                  <p className="text-[16px] font-medium leading-normal text-error">
                     {error}
                   </p>
                 </div>
               ) : filteredUsers.length === 0 ? (
-                <div className="rounded-lg border border-[#dee1e6] bg-white min-h-[400px] flex items-center justify-center">
-                  <p className="text-[16px] font-medium leading-[1.5] text-[#333c47]">
+                <div className="rounded-lg border border-input-border bg-white min-h-[400px] flex items-center justify-center">
+                  <p className="text-[16px] font-medium leading-normal text-neutral-700">
                     현재 관리할 수 있는 회원 계정이 없습니다.
                   </p>
                 </div>
               ) : (
                 <>
                   <div className="rounded-[8px]">
-                    <div className="w-full rounded-[8px] border border-[#dee1e6] overflow-visible">
+                    <div className="w-full rounded-[8px] border border-input-border overflow-visible">
                       <table className="min-w-full border-collapse">
                         <colgroup>
                           <col style={{ width: 200 }} />
@@ -404,11 +476,11 @@ export default function AdminIdPage() {
                         </colgroup>
                         <thead>
                           <tr className="h-12 bg-gray-50 text-left">
-                            <th className="border-r border-[#dee1e6] px-4 text-[14px] font-semibold leading-[1.5] text-[#4c5561]">가입일</th>
-                            <th className="border-r border-[#dee1e6] px-4 text-[14px] font-semibold leading-[1.5] text-[#4c5561]">성명</th>
-                            <th className="border-r border-[#dee1e6] px-4 text-[14px] font-semibold leading-[1.5] text-[#4c5561]">아이디(이메일)</th>
-                            <th className="border-r border-[#dee1e6] px-4 text-[14px] font-semibold leading-[1.5] text-[#4c5561]">계정상태</th>
-                            <th className="px-4 text-center text-[14px] font-semibold leading-[1.5] text-[#4c5561]">계정관리</th>
+                            <th className="border-r border-input-border px-4 text-[14px] font-semibold leading-normal text-basic-text">가입일</th>
+                            <th className="border-r border-input-border px-4 text-[14px] font-semibold leading-normal text-basic-text">성명</th>
+                            <th className="border-r border-input-border px-4 text-[14px] font-semibold leading-normal text-basic-text">아이디(이메일)</th>
+                            <th className="border-r border-input-border px-4 text-[14px] font-semibold leading-normal text-basic-text">계정상태</th>
+                            <th className="px-4 text-center text-[14px] font-semibold leading-normal text-basic-text">계정관리</th>
                           </tr>
                         </thead>
                         <tbody>
@@ -417,31 +489,31 @@ export default function AdminIdPage() {
                             key={user.id}
                             className="h-12"
                           >
-                            <td className="border-t border-r border-[#dee1e6] px-4 text-[13px] leading-[1.5] text-[#1b2027] whitespace-nowrap">
+                            <td className="border-t border-r border-input-border px-4 text-[13px] leading-normal text-text-body whitespace-nowrap">
                               {user.joinDate}
                             </td>
-                            <td className="border-t border-r border-[#dee1e6] px-4 text-[13px] leading-[1.5] text-[#1b2027] whitespace-nowrap">
+                            <td className="border-t border-r border-input-border px-4 text-[13px] leading-normal text-text-body whitespace-nowrap">
                               {user.name}
                             </td>
-                            <td className="border-t border-r border-[#dee1e6] px-4 text-[13px] leading-[1.5] text-[#1b2027] whitespace-nowrap">
+                            <td className="border-t border-r border-input-border px-4 text-[13px] leading-normal text-text-body whitespace-nowrap">
                               {user.email}
                             </td>
-                            <td className="border-t border-r border-[#dee1e6] px-4 text-[13px] leading-[1.5] text-[#1b2027] whitespace-nowrap">
+                            <td className="border-t border-r border-input-border px-4 text-[13px] leading-normal text-text-body whitespace-nowrap">
                               {user.status === 'active' ? (
-                                <div className="inline-flex items-center justify-center h-[20px] px-[4px] rounded-[4px] bg-[#ecf0ff]">
-                                  <span className="text-[13px] font-semibold leading-[1.4] text-[#384fbf] whitespace-nowrap">
+                                <div className="inline-flex items-center justify-center h-[20px] px-[4px] rounded-[4px] bg-bg-primary-light">
+                                  <span className="text-[13px] font-semibold leading-[1.4] text-primary whitespace-nowrap">
                                     {statusLabels[user.status]}
                                   </span>
                                 </div>
                               ) : (
-                                <div className="inline-flex items-center justify-center h-[20px] px-[4px] rounded-[4px] bg-[#f1f3f5]">
-                                  <span className="text-[13px] font-semibold leading-[1.4] text-[#4c5561] whitespace-nowrap">
+                                <div className="inline-flex items-center justify-center h-[20px] px-[4px] rounded-[4px] bg-bg-gray-light">
+                                  <span className="text-[13px] font-semibold leading-[1.4] text-basic-text whitespace-nowrap">
                                     {statusLabels[user.status]}
                                   </span>
                                 </div>
                               )}
                             </td>
-                            <td className="border-t border-[#dee1e6] px-4 text-center text-[13px] leading-[1.5] text-[#1b2027] whitespace-nowrap">
+                            <td className="border-t border-input-border px-4 text-center text-[13px] leading-normal text-text-body whitespace-nowrap">
                               <button
                                 type="button"
                                 onClick={() => toggleAccountStatus(user.id)}
@@ -473,7 +545,7 @@ export default function AdminIdPage() {
                           type="button"
                           onClick={() => setCurrentPage(1)}
                           aria-label="맨 앞 페이지"
-                          className="flex items-center justify-center rounded-[1000px] p-[8.615px] size-[32px] text-[#333c47] disabled:opacity-40 cursor-pointer disabled:cursor-not-allowed"
+                          className="flex items-center justify-center rounded-[1000px] p-[8.615px] size-[32px] text-neutral-700 disabled:opacity-40 cursor-pointer disabled:cursor-not-allowed"
                           disabled={currentPage === 1}
                         >
                           <div className="relative flex items-center justify-center w-full h-full">
@@ -487,7 +559,7 @@ export default function AdminIdPage() {
                           type="button"
                           onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
                           aria-label="이전 페이지"
-                          className="flex items-center justify-center rounded-[1000px] p-[8.615px] size-[32px] text-[#333c47] disabled:opacity-40 cursor-pointer disabled:cursor-not-allowed"
+                          className="flex items-center justify-center rounded-[1000px] p-[8.615px] size-[32px] text-neutral-700 disabled:opacity-40 cursor-pointer disabled:cursor-not-allowed"
                           disabled={currentPage === 1}
                         >
                           <ChevronDownSvg width={14.8} height={14.8} className="rotate-90" />
@@ -504,10 +576,10 @@ export default function AdminIdPage() {
                               aria-current={active ? 'page' : undefined}
                               className={[
                                 'flex items-center justify-center rounded-[1000px] size-[32px] cursor-pointer',
-                                active ? 'bg-[#ecf0ff]' : 'bg-white',
+                                active ? 'bg-bg-primary-light' : 'bg-white',
                               ].join(' ')}
                             >
-                              <span className="text-[16px] leading-[1.4] text-[#333c47]">{n}</span>
+                              <span className="text-[16px] leading-[1.4] text-neutral-700">{n}</span>
                             </button>
                           );
                         })}
@@ -517,7 +589,7 @@ export default function AdminIdPage() {
                           type="button"
                           onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
                           aria-label="다음 페이지"
-                          className="flex items-center justify-center rounded-[1000px] p-[8.615px] size-[32px] text-[#333c47] disabled:opacity-40 cursor-pointer disabled:cursor-not-allowed"
+                          className="flex items-center justify-center rounded-[1000px] p-[8.615px] size-[32px] text-neutral-700 disabled:opacity-40 cursor-pointer disabled:cursor-not-allowed"
                           disabled={currentPage === totalPages}
                         >
                           <ChevronDownSvg width={14.8} height={14.8} className="-rotate-90" />
@@ -528,7 +600,7 @@ export default function AdminIdPage() {
                           type="button"
                           onClick={() => setCurrentPage(totalPages)}
                           aria-label="맨 뒤 페이지"
-                          className="flex items-center justify-center rounded-[1000px] p-[8.615px] size-[32px] text-[#333c47] disabled:opacity-40 cursor-pointer disabled:cursor-not-allowed"
+                          className="flex items-center justify-center rounded-[1000px] p-[8.615px] size-[32px] text-neutral-700 disabled:opacity-40 cursor-pointer disabled:cursor-not-allowed"
                           disabled={currentPage === totalPages}
                         >
                           <div className="relative flex items-center justify-center w-full h-full">
@@ -559,7 +631,7 @@ export default function AdminIdPage() {
           <div className="relative z-10 bg-white rounded-[8px] p-6 shadow-[0px_8px_20px_0px_rgba(0,0,0,0.06),0px_24px_60px_0px_rgba(0,0,0,0.12)] flex flex-col gap-8 items-end justify-end min-w-[500px]">
             <div className="flex flex-col gap-4 items-start justify-center w-full">
               <div className="flex gap-2 items-start w-full">
-                <h2 className="text-[18px] font-semibold leading-[1.5] text-[#333c47]">
+                <h2 className="text-[18px] font-semibold leading-normal text-neutral-700">
                   계정을 활성화하시겠습니까?
                 </h2>
               </div>
@@ -568,14 +640,14 @@ export default function AdminIdPage() {
               <button
                 type="button"
                 onClick={handleActivateCancel}
-                className="h-[40px] px-2 rounded-[8px] bg-[#f1f3f5] text-[16px] font-semibold leading-[1.5] text-[#4c5561] w-[80px] cursor-pointer hover:bg-[#e5e7eb] transition-colors"
+                className="h-[40px] px-2 rounded-[8px] bg-bg-gray-light text-[16px] font-semibold leading-normal text-basic-text w-[80px] cursor-pointer hover:bg-bg-gray-hover transition-colors"
               >
                 취소
               </button>
               <button
                 type="button"
                 onClick={handleActivateConfirm}
-                className="h-[40px] px-4 rounded-[8px] bg-[#1f2b91] text-[16px] font-semibold leading-[1.5] text-white cursor-pointer hover:bg-[#1a2478] transition-colors"
+                className="h-[40px] px-4 rounded-[8px] bg-active-button text-[16px] font-semibold leading-normal text-white cursor-pointer hover:bg-active-button-hover transition-colors"
               >
                 활성화하기
               </button>
@@ -594,10 +666,10 @@ export default function AdminIdPage() {
           />
           <div className="relative z-10 bg-white rounded-[8px] p-[24px] shadow-[0px_8px_20px_0px_rgba(0,0,0,0.06),0px_24px_60px_0px_rgba(0,0,0,0.12)] flex flex-col gap-[32px] items-end justify-end min-w-[500px]">
             <div className="flex flex-col gap-[16px] items-start justify-center w-full">
-              <h2 className="text-[18px] font-semibold leading-[1.5] text-[#333c47]">
+              <h2 className="text-[18px] font-semibold leading-normal text-[#333c47]">
                 계정을 비활성화 하시겠습니까?
               </h2>
-              <p className="text-[15px] font-normal leading-[1.5] text-[#4c5561]">
+              <p className="text-[15px] font-normal leading-normal text-basic-text">
                 학습자가 강좌를 수강 중일 경우 강좌 수강이 어렵습니다.
                 <br />
                 계정을 비활성화 처리하시겠습니까?
@@ -608,7 +680,7 @@ export default function AdminIdPage() {
                   value={deactivateReason}
                   onChange={(e) => setDeactivateReason(e.target.value)}
                   placeholder="비활성화 사유를 입력해주세요"
-                  className="w-full h-[40px] px-[12px] rounded-[8px] border border-[#dee1e6] text-[14px] leading-[1.5] text-[#1b2027] placeholder:text-[#9ca3af] focus:outline-none focus:ring-2 focus:ring-[#1f2b91] focus:border-transparent"
+                  className="w-full h-[40px] px-[12px] rounded-[8px] border border-input-border text-[14px] leading-normal text-text-body placeholder:text-text-placeholder focus:outline-none focus:ring-2 focus:ring-active-button focus:border-transparent"
                 />
               </div>
             </div>
@@ -616,14 +688,14 @@ export default function AdminIdPage() {
               <button
                 type="button"
                 onClick={handleDeactivateCancel}
-                className="h-[40px] px-2 rounded-[8px] bg-[#f1f3f5] text-[16px] font-semibold leading-[1.5] text-[#4c5561] w-[80px] cursor-pointer hover:bg-[#e5e7eb] transition-colors"
+                className="h-[40px] px-2 rounded-[8px] bg-bg-gray-light text-[16px] font-semibold leading-normal text-basic-text w-[80px] cursor-pointer hover:bg-bg-gray-hover transition-colors"
               >
                 취소
               </button>
               <button
                 type="button"
                 onClick={handleDeactivateConfirm}
-                className="h-[40px] px-4 rounded-[8px] bg-red-50 text-[16px] font-semibold leading-[1.5] text-[#f64c4c] cursor-pointer hover:bg-red-100 transition-colors"
+                className="h-[40px] px-4 rounded-[8px] bg-red-50 text-[16px] font-semibold leading-normal text-error cursor-pointer hover:bg-red-100 transition-colors"
               >
                 비활성화하기
               </button>
@@ -635,14 +707,14 @@ export default function AdminIdPage() {
       {/* 활성화 완료 토스트 */}
       {showToast && (
         <div className="fixed right-[60px] bottom-[60px] z-50">
-          <div className="bg-white border border-[#dee1e6] rounded-[8px] p-4 min-w-[360px] flex gap-[10px] items-center">
+          <div className="bg-white border border-input-border rounded-[8px] p-4 min-w-[360px] flex gap-[10px] items-center">
             <div className="relative shrink-0 w-[16.667px] h-[16.667px]">
               <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <circle cx="8.5" cy="8.5" r="8.5" fill="#384FBF"/>
+                <circle cx="8.5" cy="8.5" r="8.5" fill="var(--color-primary)"/>
                 <path d="M5.5 8.5L7.5 10.5L11.5 6.5" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
               </svg>
             </div>
-            <p className="text-[15px] font-medium leading-[1.5] text-[#1b2027] text-nowrap">
+            <p className="text-[15px] font-medium leading-normal text-text-body text-nowrap">
               {toastMessage}
             </p>
           </div>
diff --git a/src/app/course-list/page.tsx b/src/app/course-list/page.tsx
index 829bde1..3ad2b2b 100644
--- a/src/app/course-list/page.tsx
+++ b/src/app/course-list/page.tsx
@@ -16,8 +16,8 @@ const imgThumbD = '/imgs/thumb-d.png'; // public/imgs/thumb-d.png
 
 function ColorfulTag({ text }: { text: string }) {
   return (
-    <div className="bg-[#e5f5ec] box-border flex h-[20px] items-center justify-center px-[4px] rounded-[4px]">
-      <p className="font-['Pretendard:SemiBold',sans-serif] text-[#0c9d61] text-[13px] leading-[1.4]">{text}</p>
+    <div className="bg-bg-success-light box-border flex h-[20px] items-center justify-center px-[4px] rounded-[4px]">
+      <p className="font-['Pretendard:SemiBold',sans-serif] text-success text-[13px] leading-[1.4]">{text}</p>
     </div>
   );
 }
@@ -56,15 +56,15 @@ export default function CourseListPage() {
     <main className="flex w-full flex-col items-center">
       {/* 상단 타이틀 영역 */}
       <div className="flex h-[100px] w-full max-w-[1440px] items-center px-8">
-        <h1 className="text-[24px] font-bold leading-normal text-[#1b2027]">교육 과정 목록</h1>
+        <h1 className="text-[24px] font-bold leading-normal text-text-title">교육 과정 목록</h1>
       </div>
 
       {/* 콘텐츠 래퍼: Figma 기준 1440 컨테이너, 내부 1376 그리드 폭 */}
       <section className="w-full max-w-[1440px] px-8 pt-8 pb-20">
         {/* 상단 카운트/정렬 영역 */}
         <div className="flex items-center justify-between">
-          <p className="text-[15px] font-medium leading-normal text-[#333c47]">
-            총 <span className="text-[#384fbf]">{courses.length}</span>건
+          <p className="text-[15px] font-medium leading-normal text-neutral-700">
+            총 <span className="text-primary">{courses.length}</span>건
           </p>
           <div className="h-[40px] w-[114px]" />
         </div>
@@ -90,13 +90,13 @@ export default function CourseListPage() {
                 <div className="flex w-full flex-col gap-[4px]">
                   <div className="flex flex-col gap-[4px]">
                     {c.inProgress && <ColorfulTag text="수강 중" />}
-                    <h2 className="text-[18px] font-semibold leading-normal text-[#333c47]">
+                    <h2 className="text-[18px] font-semibold leading-normal text-neutral-700">
                       {c.title}
                     </h2>
                   </div>
                   <div className="flex items-center gap-[4px]">
                     <img src={imgPlay} alt="" className="size-[16px]" />
-                    <p className="text-[13px] font-medium leading-[1.4] text-[#8c95a1]">
+                    <p className="text-[13px] font-medium leading-[1.4] text-text-meta">
                       VOD · 총 6강 · 4시간 20분
                     </p>
                   </div>
@@ -113,7 +113,7 @@ export default function CourseListPage() {
             type="button"
             onClick={() => setPage((p) => Math.max(1, p - 1))}
             aria-label="이전 페이지"
-            className="flex items-center justify-center rounded-[1000px] p-[8.615px] size-[32px] text-[#333c47] disabled:opacity-40"
+            className="flex items-center justify-center rounded-[1000px] p-[8.615px] size-[32px] text-neutral-700 disabled:opacity-40"
             disabled={page === 1}
           >
             <ChevronDownSvg width={14.8} height={14.8} className="rotate-90" />
@@ -130,10 +130,10 @@ export default function CourseListPage() {
                 aria-current={active ? 'page' : undefined}
                 className={[
                   'flex items-center justify-center rounded-[1000px] size-[32px]',
-                  active ? 'bg-[#ecf0ff]' : 'bg-white',
+                  active ? 'bg-bg-primary-light' : 'bg-white',
                 ].join(' ')}
               >
-                <span className="text-[16px] leading-[1.4] text-[#333c47]">{n}</span>
+                <span className="text-[16px] leading-[1.4] text-neutral-700">{n}</span>
               </button>
             );
           })}
@@ -143,7 +143,7 @@ export default function CourseListPage() {
             type="button"
             onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
             aria-label="다음 페이지"
-            className="flex items-center justify-center rounded-[1000px] p-[8.615px] size-[32px] text-[#333c47] disabled:opacity-40"
+            className="flex items-center justify-center rounded-[1000px] p-[8.615px] size-[32px] text-neutral-700 disabled:opacity-40"
             disabled={page === totalPages}
           >
             <ChevronDownSvg width={14.8} height={14.8} className="-rotate-90" />
diff --git a/src/app/globals.css b/src/app/globals.css
index f2cdd58..0a120f7 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -11,30 +11,42 @@
   --font-sans: var(--font-geist-sans);
   --font-mono: var(--font-geist-mono);
 
-  
-  /*login color start*/
-  --color-input-placeholder-text: #b1b8c0;
-
-  --color-neutral-40: #dee1e6;
-  --color-input-border: #dee1e6;
-
+  /* ===== 텍스트 색상 ===== */
+  --color-text-title: #1b2027;
+  --color-text-body: #1b2027;
+  --color-text-label: #6c7682;
+  --color-text-meta: #8c95a1;
+  --color-text-placeholder: #9ca3af;
+  --color-text-placeholder-alt: #b1b8c0;
   --color-basic-text: #4c5561;
-
-  /* color natural 700*/
   --color-neutral-700: #333c47;
   --color-logo-text: #333c47;
-  --color-input-border-select: #333c47;
   --color-input-alert-text: #333c47;
 
-  --color-error: #f64c4c;
+  /* ===== 배경 색상 ===== */
+  --color-bg-gray-light: #f1f3f5;
+  --color-bg-gray-hover: #e5e7eb;
+  --color-bg-success-light: #e5f5ec;
+  --color-bg-primary-light: #ecf0ff;
+  --color-bg-header: #060958;
 
-  --color-inactive-checkbox: #c2c9cf;
+  /* ===== 테두리 색상 ===== */
+  --color-neutral-40: #dee1e6;
+  --color-input-border: #dee1e6;
+  --color-input-border-select: #333c47;
 
+  /* ===== 버튼/액션 색상 ===== */
   --color-inactive-button: #8598e8;
   --color-active-button: #1f2b91;
-  /*login color end*/
-
+  --color-active-button-hover: #1a2478;
+  --color-primary: #384fbf;
+  --color-primary-alt: #384FBF;
 
+  /* ===== 상태 색상 ===== */
+  --color-error: #f64c4c;
+  --color-success: #0c9d61;
+  --color-inactive-checkbox: #c2c9cf;
+  --color-input-placeholder-text: #b1b8c0;
 }
 
 body {
diff --git a/src/app/login/LoginErrorModal.tsx b/src/app/login/LoginErrorModal.tsx
index 5713089..e7fe4ca 100644
--- a/src/app/login/LoginErrorModal.tsx
+++ b/src/app/login/LoginErrorModal.tsx
@@ -5,11 +5,14 @@ import React from "react";
 type LoginErrorModalProps = {
 	open: boolean;
 	onClose: () => void;
+	errorMessage?: string;
 };
 
-export default function LoginErrorModal({ open, onClose }: LoginErrorModalProps) {
+export default function LoginErrorModal({ open, onClose, errorMessage }: LoginErrorModalProps) {
 	if (!open) return null;
 
+	const isSuspendedAccount = errorMessage?.includes("정지된 계정입니다");
+
 	return (
 		<div className="fixed inset-0 z-50 flex items-center justify-center">
 			<button
@@ -25,9 +28,19 @@ export default function LoginErrorModal({ open, onClose }: LoginErrorModalProps)
 				className="relative bg-white box-border flex flex-col items-stretch justify-start p-6 rounded-[8px] min-w-[500px] max-w-[calc(100%-48px)]"
 			>
 				<div className="text-[18px] leading-normal font-semibold text-neutral-700 mb-8" id="login-error-title">
-					아이디 또는 비밀번호가 일치하지 않습니다.
-					<br />
-					확인 후 다시 시도해 주세요.
+					{isSuspendedAccount ? (
+						<>
+							정지된 계정입니다.
+							<br />
+							확인 후 다시 시도해 주세요.
+						</>
+					) : (
+						<>
+							아이디 또는 비밀번호가 일치하지 않습니다.
+							<br />
+							확인 후 다시 시도해 주세요.
+						</>
+					)}
 				</div>
 				<div className="flex items-center justify-end gap-[8px]">
 					<button
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
index 44a86bd..81ae69e 100644
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -19,6 +19,7 @@ export default function LoginPage() {
 	const [isUserIdFocused, setIsUserIdFocused] = useState(false);
 	const [isPasswordFocused, setIsPasswordFocused] = useState(false);
 	const [isLoginErrorOpen, setIsLoginErrorOpen] = useState(false);
+	const [loginErrorMessage, setLoginErrorMessage] = useState("");
 	const [idError, setIdError] = useState("");
 	const [passwordError, setPasswordError] = useState("");
 
@@ -146,6 +147,7 @@ export default function LoginPage() {
 					}
 				}
 				console.error("로그인 실패:", errorMessage);
+				setLoginErrorMessage(errorMessage);
 				setIsLoginErrorOpen(true);
 				return;
 			}
@@ -206,6 +208,7 @@ export default function LoginPage() {
 		} catch (error) {
 			const errorMessage = error instanceof Error ? error.message : "네트워크 오류가 발생했습니다.";
 			console.error("로그인 오류:", errorMessage);
+			setLoginErrorMessage(errorMessage);
 			setIsLoginErrorOpen(true);
 		}
 	}
@@ -215,7 +218,11 @@ export default function LoginPage() {
 
 			<LoginErrorModal
 				open={isLoginErrorOpen}
-				onClose={() => setIsLoginErrorOpen(false)}
+				onClose={() => {
+					setIsLoginErrorOpen(false);
+					setLoginErrorMessage("");
+				}}
+				errorMessage={loginErrorMessage}
 			/>
 			<LoginOption
 				onClick={() => setIsLoginErrorOpen(true)}
diff --git a/src/app/menu/ChangePasswordModal.tsx b/src/app/menu/ChangePasswordModal.tsx
index 35ac584..9d29bfd 100644
--- a/src/app/menu/ChangePasswordModal.tsx
+++ b/src/app/menu/ChangePasswordModal.tsx
@@ -96,15 +96,15 @@ export default function ChangePasswordModal({ open, onClose, onSubmit, showVerif
       role="dialog"
       aria-modal="true"
     >
-      <div className="w-[480px] rounded-[12px] border border-[#dee1e6] bg-white shadow-[0_10px_30px_rgba(0,0,0,0.06)]">
+      <div className="w-[480px] rounded-[12px] border border-input-border bg-white shadow-[0_10px_30px_rgba(0,0,0,0.06)]">
         {/* header */}
         <div className="flex items-center justify-between p-6">
-          <h2 className="text-[20px] font-bold leading-[1.5] text-[#333c47]">비밀번호 변경</h2>
+          <h2 className="text-[20px] font-bold leading-[1.5] text-neutral-700">비밀번호 변경</h2>
           <button
             type="button"
             aria-label="닫기"
             onClick={onClose}
-            className="inline-flex size-6 items-center justify-center text-[#333c47] hover:opacity-80 cursor-pointer"
+            className="inline-flex size-6 items-center justify-center text-neutral-700 hover:opacity-80 cursor-pointer"
           >
             <ModalCloseSvg />
           </button>
@@ -113,14 +113,14 @@ export default function ChangePasswordModal({ open, onClose, onSubmit, showVerif
         {/* body */}
         <div className="flex flex-col gap-[10px] px-6">
           <div className="flex flex-col gap-2">
-            <label className="w-[100px] text-[15px] font-semibold leading-[1.5] text-[#6c7682]">아이디 (이메일)</label>
+            <label className="w-[100px] text-[15px] font-semibold leading-[1.5] text-text-label">아이디 (이메일)</label>
             <div className="flex items-center gap-3">
               <input
                 type="email"
                 value={email}
                 onChange={(e) => setEmail(e.target.value)}
                 className={[
-                  "h-10 flex-1 rounded-[8px] border border-[#dee1e6] px-3 text-[16px] leading-[1.5] text-[#333c47] placeholder-[#b1b8c0] outline-none",
+                  "h-10 flex-1 rounded-[8px] border border-input-border px-3 text-[16px] leading-[1.5] text-neutral-700 placeholder:text-text-placeholder-alt outline-none",
                   hasError ? "bg-white" : isCodeSent ? "bg-neutral-50" : "bg-white",
                 ].join(" ")}
                 placeholder="이메일"
@@ -132,7 +132,7 @@ export default function ChangePasswordModal({ open, onClose, onSubmit, showVerif
                   setIsCodeSent(true);
                   setError(null);
                 }}
-                className="h-10 w-[136px] rounded-[8px] bg-[#f1f3f5] px-3 text-[16px] font-semibold leading-[1.5] text-[#333c47] cursor-pointer"
+                className="h-10 w-[136px] rounded-[8px] bg-bg-gray-light px-3 text-[16px] font-semibold leading-[1.5] text-neutral-700 cursor-pointer"
               >
                 {isCodeSent ? "인증번호 재전송" : "인증번호 전송"}
               </button>
@@ -140,13 +140,13 @@ export default function ChangePasswordModal({ open, onClose, onSubmit, showVerif
           </div>
           {requireCode ? (
             <div className="flex flex-col gap-2">
-              <div className="w-[100px] text-[15px] font-semibold leading-[1.5] text-[#6c7682]">인증번호</div>
+              <div className="w-[100px] text-[15px] font-semibold leading-[1.5] text-text-label">인증번호</div>
               <div className="flex items-center gap-3">
                 <input
                   type="text"
                   value={code}
                   onChange={(e) => setCode(e.target.value)}
-                  className="h-10 flex-1 rounded-[8px] border border-[#dee1e6] bg-white px-3 text-[16px] leading-[1.5] text-[#333c47] placeholder-[#b1b8c0] outline-none"
+                  className="h-10 flex-1 rounded-[8px] border border-input-border bg-white px-3 text-[16px] leading-[1.5] text-neutral-700 placeholder:text-text-placeholder-alt outline-none"
                   placeholder="인증번호를 입력해 주세요."
                 />
                 <button
@@ -154,7 +154,7 @@ export default function ChangePasswordModal({ open, onClose, onSubmit, showVerif
                   disabled={!canConfirm}
                   className={[
                     "h-10 w-[136px] rounded-[8px] px-3 text-[16px] font-semibold leading-[1.5] cursor-pointer disabled:cursor-default",
-                    canConfirm ? "bg-[#f1f3f5] text-[#4c5561]" : "bg-gray-50 text-[#b1b8c0]",
+                    canConfirm ? "bg-bg-gray-light text-basic-text" : "bg-gray-50 text-text-placeholder-alt",
                   ].join(" ")}
                 >
                   인증번호 확인
@@ -162,37 +162,37 @@ export default function ChangePasswordModal({ open, onClose, onSubmit, showVerif
               </div>
               {isCodeSent && !hasError && !isVerified ? (
                 <div className="px-1">
-                  <p className="text-[13px] font-semibold leading-[1.4] text-[#384fbf]">
+                  <p className="text-[13px] font-semibold leading-[1.4] text-primary">
                     인증 확인을 위해 작성한 이메일로 인증번호를 발송했습니다.
                   </p>
-                  <p className="text-[13px] font-semibold leading-[1.4] text-[#384fbf]">
+                  <p className="text-[13px] font-semibold leading-[1.4] text-primary">
                     이메일을 확인해 주세요.
                   </p>
                 </div>
               ) : null}
               {error ? (
-                <p className="px-1 text-[13px] font-semibold leading-[1.4] text-[#f64c4c]">
+                <p className="px-1 text-[13px] font-semibold leading-[1.4] text-error">
                   {error}
                 </p>
               ) : null}
             </div>
           ) : null}
           <div className="flex flex-col gap-2">
-            <label className="text-[15px] font-semibold leading-[1.5] text-[#6c7682]">새 비밀번호</label>
+            <label className="text-[15px] font-semibold leading-[1.5] text-text-label">새 비밀번호</label>
             <input
               type="password"
               value={newPassword}
               onChange={(e) => setNewPassword(e.target.value)}
               disabled={!isVerified}
               className={[
-                "h-10 rounded-[8px] border border-[#dee1e6] px-3 text-[16px] leading-[1.5] text-[#333c47] placeholder-[#b1b8c0] outline-none",
+                "h-10 rounded-[8px] border border-input-border px-3 text-[16px] leading-[1.5] text-neutral-700 placeholder:text-text-placeholder-alt outline-none",
                 isVerified ? "bg-white" : "bg-neutral-50",
               ].join(" ")}
               placeholder="새 비밀번호"
             />
           </div>
           <div className="flex flex-col gap-2">
-            <label className="text-[15px] font-semibold leading-[1.5] text-[#6c7682]">
+            <label className="text-[15px] font-semibold leading-[1.5] text-text-label">
               새 비밀번호 확인
             </label>
             <input
@@ -201,7 +201,7 @@ export default function ChangePasswordModal({ open, onClose, onSubmit, showVerif
               onChange={(e) => setConfirmPassword(e.target.value)}
               disabled={!isVerified}
               className={[
-                "h-10 rounded-[8px] border border-[#dee1e6] px-3 text-[16px] leading-[1.5] text-[#333c47] placeholder-[#b1b8c0] outline-none",
+                "h-10 rounded-[8px] border border-input-border px-3 text-[16px] leading-[1.5] text-neutral-700 placeholder:text-text-placeholder-alt outline-none",
                 isVerified ? "bg-white" : "bg-neutral-50",
               ].join(" ")}
               placeholder="새 비밀번호 확인"
@@ -214,14 +214,14 @@ export default function ChangePasswordModal({ open, onClose, onSubmit, showVerif
           <button
             type="button"
             onClick={onClose}
-            className="h-12 w-[136px] rounded-[10px] bg-[#f1f3f5] px-4 text-[16px] font-semibold leading-[1.5] text-[#4c5561] cursor-pointer"
+            className="h-12 w-[136px] rounded-[10px] bg-bg-gray-light px-4 text-[16px] font-semibold leading-[1.5] text-basic-text cursor-pointer"
           >
             취소
           </button>
           <button
             type="button"
             onClick={handleSubmit}
-            className="h-12 w-[136px] rounded-[10px] bg-[#8598e8] px-4 text-[16px] font-semibold leading-[1.5] text-white cursor-pointer"
+            className="h-12 w-[136px] rounded-[10px] bg-inactive-button px-4 text-[16px] font-semibold leading-[1.5] text-white cursor-pointer"
           >
             비밀번호 변경
           </button>
diff --git a/src/app/menu/account/page.tsx b/src/app/menu/account/page.tsx
index 9011cb0..710e197 100644
--- a/src/app/menu/account/page.tsx
+++ b/src/app/menu/account/page.tsx
@@ -122,29 +122,29 @@ export default function AccountPage() {
         <h1 className="text-[24px] font-bold leading-normal text-[#1b2027]">내 정보 수정</h1>
       </div>
       <div className="px-8 pb-20">
-        <div className="rounded-lg border border-[#dee1e6] bg-white p-8">
+        <div className="rounded-lg border border-input-border bg-white p-8">
           <div className="flex flex-col gap-2">
-            <label className="w-[100px] text-[15px] font-semibold leading-[1.5] text-[#6c7682]">
+            <label className="w-[100px] text-[15px] font-semibold leading-[1.5] text-text-label">
               아이디 (이메일)
             </label>
-            <div className="h-10 rounded-lg border border-[#dee1e6] bg-neutral-50 px-3 py-2">
-              <span className="text-[16px] leading-normal text-[#333c47]">
+            <div className="h-10 rounded-lg border border-input-border bg-neutral-50 px-3 py-2">
+              <span className="text-[16px] leading-normal text-neutral-700">
                 {isLoading ? '로딩 중...' : (userInfo.email || '이메일 정보 없음')}
               </span>
             </div>
           </div>
           <div className="mt-6 flex flex-col gap-2">
-            <label className="w-[100px] text-[15px] font-semibold leading-[1.5] text-[#6c7682]">
+            <label className="w-[100px] text-[15px] font-semibold leading-[1.5] text-text-label">
               비밀번호 변경
             </label>
             <div className="flex items-center gap-3">
-              <div className="h-10 flex-1 rounded-lg border border-[#dee1e6] bg-neutral-50 px-3 py-2">
-                <span className="text-[16px] leading-normal text-[#333c47]">●●●●●●●●●●</span>
+              <div className="h-10 flex-1 rounded-lg border border-input-border bg-neutral-50 px-3 py-2">
+                <span className="text-[16px] leading-normal text-neutral-700">●●●●●●●●●●</span>
               </div>
               <button
                 type="button"
                 onClick={() => setOpen(true)}
-                className="h-10 rounded-lg bg-[#f1f3f5] px-4 text-[16px] font-semibold leading-[1.5] text-[#4c5561]"
+                className="h-10 rounded-lg bg-bg-gray-light px-4 text-[16px] font-semibold leading-[1.5] text-basic-text"
               >
                 비밀번호 변경
               </button>
diff --git a/src/app/menu/courses/CourseCard.tsx b/src/app/menu/courses/CourseCard.tsx
index f0f576a..ee677ae 100644
--- a/src/app/menu/courses/CourseCard.tsx
+++ b/src/app/menu/courses/CourseCard.tsx
@@ -26,9 +26,9 @@ type Course = {
 function ProgressBar({ value }: { value: number }) {
 	const pct = Math.max(0, Math.min(100, value));
 	return (
-		<div className="relative h-1.5 w-full overflow-hidden rounded-full bg-[#ecf0ff]">
+		<div className="relative h-1.5 w-full overflow-hidden rounded-full bg-bg-primary-light">
 			<div
-				className="h-full rounded-full bg-[#384fbf] transition-[width] duration-300 ease-out"
+				className="h-full rounded-full bg-primary transition-[width] duration-300 ease-out"
 				style={{ width: `${pct}%` }}
 			/>
 		</div>
@@ -45,7 +45,7 @@ export default function CourseCard({ course, defaultOpen = false }: { course: Co
 	const firstIncomplete = course.lessons.find((l) => !l.isCompleted)?.id;
 	const cardClassName = [
 		"rounded-xl bg-white shadow-[0_2px_8px_rgba(0,0,0,0.02)]",
-		open ? "border-[3px] border-[#384fbf]" : "border border-[#ecf0ff]",
+		open ? "border-[3px] border-primary" : "border border-bg-primary-light",
 	].join(" ");
 
 	const formatDuration = (m: number) => {
@@ -57,7 +57,7 @@ export default function CourseCard({ course, defaultOpen = false }: { course: Co
 	return (
 		<article className={cardClassName}>
 			<header className="flex items-center gap-6 px-8 py-6">
-				<div className="relative h-[120px] w-[180px] overflow-hidden rounded-[8px] bg-[#f1f3f5]">
+				<div className="relative h-[120px] w-[180px] overflow-hidden rounded-[8px] bg-bg-gray-light">
 					<Image
 						src={`https://picsum.photos/seed/${encodeURIComponent(course.id)}/240/152`}
 						alt=""
@@ -69,19 +69,19 @@ export default function CourseCard({ course, defaultOpen = false }: { course: Co
 				</div>
 				<div className="min-w-0 flex-1">
 					<div className="flex items-center gap-2">
-						<span className="flex h-[20px] items-center justify-center rounded-[4px] bg-[#e5f5ec] px-[4px] text-[13px] font-semibold leading-[1.4] text-[#0c9d61]">
+						<span className="flex h-[20px] items-center justify-center rounded-[4px] bg-bg-success-light px-[4px] text-[13px] font-semibold leading-[1.4] text-success">
 							{course.status}
 						</span>
-						<h2 className="truncate text-[18px] font-semibold leading-normal text-[#333c47]">
+						<h2 className="truncate text-[18px] font-semibold leading-normal text-neutral-700">
 							{course.title}
 						</h2>
 					</div>
 					<p className="mt-1 line-clamp-2 text-[14px] leading-normal text-basic-text">{course.description}</p>
 					<div className="mt-2 flex items-center justify-between gap-3">
-						<p className="text-[13px] leading-[1.4] text-[#8c95a1]">
+						<p className="text-[13px] leading-[1.4] text-text-meta">
 							VOD · 총 {course.lessons.length}강 · {totalHours}시간 {restMinutes}분
 						</p>
-						<p className="text-[13px] font-semibold leading-[1.4] text-[#384fbf]">
+						<p className="text-[13px] font-semibold leading-[1.4] text-primary">
 							전체 진도율: {course.progressPct}%
 						</p>
 					</div>
@@ -94,7 +94,7 @@ export default function CourseCard({ course, defaultOpen = false }: { course: Co
 						type="button"
 						aria-expanded={open}
 						onClick={() => setOpen((v) => !v)}
-						className="flex h-8 w-8 items-center justify-center text-[#6c7682] cursor-pointer"
+						className="flex h-8 w-8 items-center justify-center text-text-label cursor-pointer"
 						aria-label={open ? "접기" : "펼치기"}
 					>
 						<ChevronDownSvg
@@ -110,14 +110,14 @@ export default function CourseCard({ course, defaultOpen = false }: { course: Co
 				<div className="px-6 pb-6">
 					<ul className="flex flex-col gap-2">
 						{course.lessons.map((lesson, idx) => (
-							<li key={lesson.id} className="rounded-lg border border-[#dee1e6] bg-white">
+							<li key={lesson.id} className="rounded-lg border border-input-border bg-white">
 								<div className="flex items-center justify-between gap-4 px-[24px] py-[16px]">
 									<div className="min-w-0 flex-1">
-										<p className="truncate text-[16px] font-semibold leading-normal text-[#333c47]">
+										<p className="truncate text-[16px] font-semibold leading-normal text-neutral-700">
 											{`${idx + 1}. ${lesson.title}`}
 										</p>
 										<div className="mt-2 flex items-center gap-3">
-											<span className="text-[13px] leading-[1.4] text-[#8c95a1]">
+											<span className="text-[13px] leading-[1.4] text-text-meta">
 												{formatDuration(lesson.durationMin)}
 											</span>
 										</div>
@@ -128,8 +128,8 @@ export default function CourseCard({ course, defaultOpen = false }: { course: Co
 											className={[
 												"inline-flex h-[32px] w-[140px] items-center justify-center gap-[6px] rounded-[6px] px-4 text-center whitespace-nowrap cursor-pointer",
 												lesson.isCompleted
-													? "bg-white text-[13px] font-medium leading-[1.4] text-[#384fbf]"
-													: "bg-white text-[14px] font-medium leading-normal text-basic-text border border-[#8c95a1]",
+													? "bg-white text-[13px] font-medium leading-[1.4] text-primary"
+													: "bg-white text-[14px] font-medium leading-normal text-basic-text border border-text-meta",
 											].join(" ")}
 										>
 											{lesson.isCompleted ? (
@@ -144,7 +144,7 @@ export default function CourseCard({ course, defaultOpen = false }: { course: Co
 													>
 														<path
 															d="M8.75 0.75L3.25 6.25L0.75 3.75"
-															stroke="#384FBF"
+															stroke="var(--color-primary)"
 															strokeWidth="1.5"
 															strokeLinecap="round"
 															strokeLinejoin="round"
@@ -160,7 +160,7 @@ export default function CourseCard({ course, defaultOpen = false }: { course: Co
 											<button
 												type="button"
 												onClick={() => router.push(`/menu/courses/lessons/${lesson.id}/review`)}
-												className="inline-flex h-[32px] w-[140px] items-center justify-center rounded-[6px] bg-[#f1f3f5] px-4 text-center text-[14px] font-medium leading-normal text-basic-text whitespace-nowrap cursor-pointer"
+												className="inline-flex h-[32px] w-[140px] items-center justify-center rounded-[6px] bg-bg-gray-light px-4 text-center text-[14px] font-medium leading-normal text-basic-text whitespace-nowrap cursor-pointer"
 											>
 												복습하기
 											</button>
@@ -177,8 +177,8 @@ export default function CourseCard({ course, defaultOpen = false }: { course: Co
 												className={[
 													"inline-flex h-[32px] w-[140px] items-center justify-center rounded-[6px] px-4 text-center text-[14px] font-medium leading-normal whitespace-nowrap cursor-pointer",
 													lesson.id === firstIncomplete
-														? "bg-[#ecf0ff] text-[#384fbf]"
-														: "border border-[#dee1e6] text-basic-text",
+														? "bg-bg-primary-light text-primary"
+														: "border border-input-border text-basic-text",
 												].join(" ")}
 											>
 												{lesson.id === firstIncomplete ? "이어서 수강하기" : "수강하기"}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 68f2e71..a8c6731 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -3,12 +3,11 @@
 
 import { useEffect, useMemo, useRef, useState } from 'react';
 import MainLogoSvg from './svgs/mainlogosvg';
-import ChevronDownSvg from './svgs/chevrondownsvg';
 
 export default function Home() {
   const containerRef = useRef<HTMLDivElement | null>(null);
   const [currentIndex, setCurrentIndex] = useState(0);
-  const [isNameActive, setIsNameActive] = useState(false);
+  const [userName, setUserName] = useState<string>('');
 
   // 코스, 공지사항 더미 데이터
   const courseCards = useMemo(
@@ -114,6 +113,57 @@ export default function Home() {
     []
   );
 
+  // 사용자 정보 가져오기
+  useEffect(() => {
+    let isMounted = true;
+
+    async function fetchUserInfo() {
+      try {
+        const localStorageToken = localStorage.getItem('token');
+        const cookieToken = document.cookie
+          .split('; ')
+          .find(row => row.startsWith('token='))
+          ?.split('=')[1];
+        
+        const token = localStorageToken || cookieToken;
+        
+        if (!token) {
+          return;
+        }
+
+        const apiUrl = process.env.NEXT_PUBLIC_API_BASE_URL 
+          ? `${process.env.NEXT_PUBLIC_API_BASE_URL}/auth/me`
+          : 'https://hrdi.coconutmeet.net/auth/me';
+
+        const response = await fetch(apiUrl, {
+          method: 'GET',
+          headers: {
+            'Content-Type': 'application/json',
+            Authorization: `Bearer ${token}`,
+          },
+        });
+
+        if (!response.ok) {
+          return;
+        }
+
+        const data = await response.json();
+        
+        if (isMounted && data.name) {
+          setUserName(data.name);
+        }
+      } catch (error) {
+        console.error('사용자 정보 조회 오류:', error);
+      }
+    }
+
+    fetchUserInfo();
+
+    return () => {
+      isMounted = false;
+    };
+  }, []);
+
   useEffect(() => {
     const containerEl = containerRef.current;
     if (!containerEl) return;
@@ -141,10 +191,6 @@ export default function Home() {
   const handlePrev = () => scrollToIndex(currentIndex - 1);
   const handleNext = () => scrollToIndex(currentIndex + 1);
 
-  const handleNameClick = () => {
-    setIsNameActive((prev) => !prev);
-  };
-
   return (
     <div className="w-full min-h-screen flex flex-col bg-white">
       <main className="flex-1">
@@ -223,19 +269,9 @@ export default function Home() {
                   <div className="px-8 py-8">
                     <div className="mb-6">
                       <div className="flex items-center gap-2">
-                        <button
-                          type="button"
-                          onClick={handleNameClick}
-                          aria-expanded={isNameActive}
-                          className="m-0 p-0 bg-transparent border-0 text-[18px] font-bold leading-normal text-[#333C47] cursor-pointer inline-flex items-center gap-1"
-                        >
-                          김하늘님
-                          <ChevronDownSvg
-                            width={20}
-                            height={20}
-                            className={'transition-transform duration-200 ' + (isNameActive ? 'rotate-180' : 'rotate-0')}
-                          />
-                        </button>
+                        <span className="text-[18px] font-bold leading-normal text-[#333C47]">
+                          {userName ? `${userName}님` : '사용자님'}
+                        </span>
                         <span className="text-[18px] font-bold leading-normal text-[#333C47]">환영합니다.</span>
                       </div>
                     </div>