From 48863c4d11a0e9e4e93732163d7eaec65afd1dcf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=95=EA=B8=B0=EC=98=81?= <wjdrldud98@gmail.com>
Date: Tue, 6 Aug 2024 10:42:30 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=88=98=EA=B0=95=EC=8B=A0=EC=B2=AD=20?=
 =?UTF-8?q?=EC=A4=91(onPending)=20=EC=8B=9C=20=EC=88=98=EA=B0=95=20?=
 =?UTF-8?q?=EC=8B=A0=EC=B2=AD=EC=9D=84=20=EB=A7=89=EB=8A=94=20=EA=B8=B0?=
 =?UTF-8?q?=EB=8A=A5=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/ClassInfo/ClassInfo.jsx        | 5 +++--
 frontend/src/components/ClassInfo/ClassInfo.module.css | 8 ++++++++
 frontend/src/pages/LectureInfoPage/LectureInfoPage.jsx | 2 ++
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/ClassInfo/ClassInfo.jsx b/frontend/src/components/ClassInfo/ClassInfo.jsx
index 0c47655..794a968 100644
--- a/frontend/src/components/ClassInfo/ClassInfo.jsx
+++ b/frontend/src/components/ClassInfo/ClassInfo.jsx
@@ -1,6 +1,6 @@
 import styles from './ClassInfo.module.css';
 
-export default function ClassInfo({ classTerm, classTime, onSubmit }) {
+export default function ClassInfo({ classTerm, classTime, onPending = false, onSubmit }) {
   return (
     <div className={styles.classInfo}>
       <div className={styles.title}>수업정보</div>
@@ -17,8 +17,9 @@ export default function ClassInfo({ classTerm, classTime, onSubmit }) {
       <button
         onClick={onSubmit}
         className={styles.button}
+        disabled={onPending}
       >
-        수강신청
+        {onPending ? '수강신청 중' : '수강신청'}
       </button>
     </div>
   );
diff --git a/frontend/src/components/ClassInfo/ClassInfo.module.css b/frontend/src/components/ClassInfo/ClassInfo.module.css
index 257afeb..a729c6c 100644
--- a/frontend/src/components/ClassInfo/ClassInfo.module.css
+++ b/frontend/src/components/ClassInfo/ClassInfo.module.css
@@ -55,3 +55,11 @@
   color: var(--on-primary);
   cursor: pointer;
 }
+
+.button:disabled {
+  border-color: var(--border-color);
+  background-color: var(--background-tertiary);
+  color: var(--text-color-tertiary);
+  cursor: not-allowed;
+  stroke: var(--text-color-tertiary);
+}
diff --git a/frontend/src/pages/LectureInfoPage/LectureInfoPage.jsx b/frontend/src/pages/LectureInfoPage/LectureInfoPage.jsx
index 7a31b5b..b0bfbe5 100644
--- a/frontend/src/pages/LectureInfoPage/LectureInfoPage.jsx
+++ b/frontend/src/pages/LectureInfoPage/LectureInfoPage.jsx
@@ -16,6 +16,7 @@ export default function LectureInfoPage() {
   const endDate = new Date(lectureData.endDate).toLocaleDateString();
   const userType = useBoundStore((state) => state.userType);
   console.log(lectureData);
+  const onPending = lectureData.status === 'PENDING' ? true : false;
   const { lectureRegister } = useLectureRegister();
   const handleSubmit = () => {
     if (userType === null) {
@@ -58,6 +59,7 @@ export default function LectureInfoPage() {
             classTerm={`${startDate} ~ ${endDate}`}
             classTime={lectureData.time}
             onSubmit={handleSubmit}
+            onPending={onPending}
           />
         </aside>
       </MaxWidthLayout>