From b917c40f4b3bf60c4012730a030051aae4084e3d Mon Sep 17 00:00:00 2001
From: lydiacho <sheecho0804@ewhain.net>
Date: Fri, 16 Aug 2024 20:07:45 +0900
Subject: [PATCH 1/2] =?UTF-8?q?fix:=20Checkbox=20isReview=EC=9D=BC=20?=
 =?UTF-8?q?=EA=B2=BD=EC=9A=B0=20=ED=81=B4=EB=A6=AD=20=EB=A7=89=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/common/components/Checkbox/index.tsx             |  1 +
 src/common/components/Checkbox/style.css.ts          |  7 ++++++-
 .../ApplyPage/components/BottomSection/index.tsx     | 12 ++++++++++--
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/common/components/Checkbox/index.tsx b/src/common/components/Checkbox/index.tsx
index 305f7677..8c4aafbe 100644
--- a/src/common/components/Checkbox/index.tsx
+++ b/src/common/components/Checkbox/index.tsx
@@ -33,6 +33,7 @@ const Checkbox = <T extends FieldValues>({
             })}
             type="checkbox"
             className={`amp-unmask ${hiddenCheckbox}`}
+            disabled
             {...checkboxElementProps}
           />
           <span className={checkmark[errors && errors[name] ? 'error' : 'default']} />
diff --git a/src/common/components/Checkbox/style.css.ts b/src/common/components/Checkbox/style.css.ts
index 2d96d79d..96375db2 100644
--- a/src/common/components/Checkbox/style.css.ts
+++ b/src/common/components/Checkbox/style.css.ts
@@ -15,7 +15,6 @@ export const checkboxContainer = style({
   gap: 6,
   position: 'relative',
   width: 'fit-content',
-  cursor: 'pointer',
   WebkitUserSelect: 'none',
   MozUserSelect: 'none',
   msUserSelect: 'none',
@@ -38,6 +37,7 @@ const checkmarkBase = style({
   width: 22,
   borderRadius: 5,
   transition: 'all 0.3s ease',
+  cursor: 'pointer',
 
   selectors: {
     /* Create the checkmark/indicator (hidden when not checked) */
@@ -86,6 +86,11 @@ const checkmarkBase = style({
       outline: `2px dotted ${theme.color.primary}`,
       outlineOffset: 2,
     },
+
+    /* ReviewPage에서는 disabled 처리 */
+    [`${checkboxContainer} input:disabled ~ &`]: {
+      cursor: 'not-allowed',
+    },
   },
 });
 
diff --git a/src/views/ApplyPage/components/BottomSection/index.tsx b/src/views/ApplyPage/components/BottomSection/index.tsx
index 5ec96763..56def4b2 100644
--- a/src/views/ApplyPage/components/BottomSection/index.tsx
+++ b/src/views/ApplyPage/components/BottomSection/index.tsx
@@ -40,12 +40,20 @@ const BottomSection = ({ isReview, knownPath }: BottomSectionProps) => {
             ? 'SOPT makers의 행사 및 정기 모임은 일요일에 진행됩니다.'
             : 'SOPT의 행사 및 세미나는 매주 토요일에 진행됩니다.'}
         </p>
-        <Checkbox checked={isReview ? true : undefined} name="attendance" required>
+        <Checkbox
+          checked={isReview ? true : undefined}
+          name="attendance"
+          required
+          disabled={isReview ? true : undefined}>
           참석 가능합니다.
         </Checkbox>
       </div>
       <div>
-        <Checkbox checked={isReview ? true : undefined} required name="personalInformation">
+        <Checkbox
+          checked={isReview ? true : undefined}
+          required
+          name="personalInformation"
+          disabled={isReview ? true : undefined}>
           개인정보 수집 ‧ 이용에 동의합니다.
         </Checkbox>
         <Contentbox>{PRIVACY_POLICY}</Contentbox>

From 799d5cca43abf615fd035b5826caa0b53abbb1c7 Mon Sep 17 00:00:00 2001
From: lydiacho <sheecho0804@ewhain.net>
Date: Fri, 16 Aug 2024 20:17:08 +0900
Subject: [PATCH 2/2] =?UTF-8?q?fix:=20disabled=20=EC=8B=9C=20hover=20?=
 =?UTF-8?q?=ED=9A=A8=EA=B3=BC=20=EB=A7=89=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/common/components/Checkbox/style.css.ts    |  4 ++--
 .../Radio/components/Option/style.css.ts       | 18 ++++++++++++++----
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/common/components/Checkbox/style.css.ts b/src/common/components/Checkbox/style.css.ts
index 96375db2..16443f89 100644
--- a/src/common/components/Checkbox/style.css.ts
+++ b/src/common/components/Checkbox/style.css.ts
@@ -48,7 +48,7 @@ const checkmarkBase = style({
     },
 
     /* 마우스 hover시 */
-    [`${checkboxContainer}:hover input ~ &`]: {
+    [`${checkboxContainer}:hover input:enabled ~ &`]: {
       backgroundColor: theme.color.subBackground,
     },
 
@@ -58,7 +58,7 @@ const checkmarkBase = style({
       backgroundColor: theme.color.primary,
     },
 
-    [`${checkboxContainer} input:checked:hover ~ &`]: {
+    [`${checkboxContainer} input:checked:enabled:hover ~ &`]: {
       border: `1px solid ${theme.color.primaryDark}`,
       backgroundColor: theme.color.primaryDark,
     },
diff --git a/src/common/components/Radio/components/Option/style.css.ts b/src/common/components/Radio/components/Option/style.css.ts
index ec25f834..c4e46271 100644
--- a/src/common/components/Radio/components/Option/style.css.ts
+++ b/src/common/components/Radio/components/Option/style.css.ts
@@ -16,10 +16,6 @@ const inputBase = style({
   transition: 'all 0.3s ease',
   cursor: 'pointer',
 
-  ':hover': {
-    backgroundColor: theme.color.subBackground,
-  },
-
   ':checked': {
     border: `6px solid ${theme.color.primary}`,
   },
@@ -29,7 +25,15 @@ const inputBase = style({
     outlineOffset: 2,
   },
 
+  ':disabled': {
+    cursor: 'not-allowed',
+  },
+
   selectors: {
+    '&:enabled:hover': {
+      backgroundColor: theme.color.subBackground,
+    },
+
     '&:checked:hover': {
       backgroundColor: theme.color.background,
       border: `6px solid ${theme.color.primaryDark}`,
@@ -55,4 +59,10 @@ export const inputStyle = styleVariants({
 export const labelStyle = style({
   ...theme.font.BODY_2_16_M,
   cursor: 'pointer',
+
+  selectors: {
+    [`${container} input:disabled ~ &`]: {
+      cursor: 'not-allowed',
+    },
+  },
 });