[20250723] IntroPanel.new Agree버튼 포커스색상 변경

com.twin.app.shoptime/src/views/IntroPanel/IntroPanel.new.jsx

@@ -7,6 +7,7 @@ import React, {
   useRef,
   useState,
 } from "react";
+import classNames from "classnames";
 import { useDispatch, useSelector } from "react-redux";
 import BasicIntroPanel from "./IntroPanel.jsx";
 import Region from "@enact/sandstone/Region";
@@ -230,8 +231,8 @@ function IntroPanelWithOptional({
   const [currentTerms, setCurrentTerms] = useState(null);
   // 필수약관 체크 해제시 팝업표시용
   const [requiredAgreePopup, setRequiredAgreePopup] = useState(false);
-  const [prevTermsChecked, setPrevTermsChecked] = useState(false);
-  const [prevPrivacyChecked, setPrevPrivacyChecked] = useState(false);
+  // const [prevTermsChecked, setPrevTermsChecked] = useState(false); // 제거됨
+  // const [prevPrivacyChecked, setPrevPrivacyChecked] = useState(false); // 제거됨
 
   useEffect(() => {
     dispatch({ type: types.REGISTER_DEVICE_RESET });
@@ -294,22 +295,22 @@ function IntroPanelWithOptional({
     }
   }, [termsError, dispatch]);
 
-  // 필수약관 체크 해제 감지 및 팝업 표시
-  useEffect(() => {
-    // 이전 상태가 true이고 현재 상태가 false인 경우 (체크 해제)
-    if ((prevTermsChecked && !termsChecked) || (prevPrivacyChecked && !privacyChecked)) {
-      setRequiredAgreePopup(true);
-      
-      // 3초 후 자동 닫기
-      popupTimeoutRef.current = setTimeout(() => {
-        setRequiredAgreePopup(false);
-      }, 3000);
-    }
-    
-    // 현재 상태를 이전 상태로 업데이트
-    setPrevTermsChecked(termsChecked);
-    setPrevPrivacyChecked(privacyChecked);
-  }, [termsChecked, privacyChecked, prevTermsChecked, prevPrivacyChecked]);
+  // 필수약관 체크 해제 감지 및 팝업 표시 - 제거됨
+  // useEffect(() => {
+  //   // 이전 상태가 true이고 현재 상태가 false인 경우 (체크 해제)
+  //   if ((prevTermsChecked && !termsChecked) || (prevPrivacyChecked && !privacyChecked)) {
+  //     setRequiredAgreePopup(true);
+  //     
+  //     // 3초 후 자동 닫기
+  //     popupTimeoutRef.current = setTimeout(() => {
+  //       setRequiredAgreePopup(false);
+  //     }, 3000);
+  //   }
+  //   
+  //   // 현재 상태를 이전 상태로 업데이트
+  //   setPrevTermsChecked(termsChecked);
+  //   setPrevPrivacyChecked(privacyChecked);
+  // }, [termsChecked, privacyChecked, prevTermsChecked, prevPrivacyChecked]);
 
   useEffect(() => {
     console.log("[IntroPanel] deviceRegistered", deviceRegistered);
@@ -573,13 +574,23 @@ function IntroPanelWithOptional({
 
     // 필수 약관 체크
     if (!termsChecked || !privacyChecked) {
-      dispatch(
-        setShowPopup(Config.ACTIVE_POPUP.alertPopup, {
-          title: $L("Required Terms"),
-          text: $L("Please agree to Terms & Conditions and Privacy Policy."),
-          button1Text: $L("OK"),
-        }),
-      );
+      // 기존 alert 팝업 - 주석 처리됨
+      // dispatch(
+      //   setShowPopup(Config.ACTIVE_POPUP.alertPopup, {
+      //     title: $L("Required Terms"),
+      //     text: $L("Please agree to Terms & Conditions and Privacy Policy."),
+      //     button1Text: $L("OK"),
+      //   }),
+      // );
+      
+      // 새로운 requiredAgreePopup 사용
+      setRequiredAgreePopup(true);
+      
+      // 3초 후 자동 닫기
+      popupTimeoutRef.current = setTimeout(() => {
+        setRequiredAgreePopup(false);
+      }, 3000);
+      
       return;
     }
 
@@ -945,13 +956,14 @@ function IntroPanelWithOptional({
           {/* 네 번째 영역: 버튼 섹션 */}
           <div className={css.buttonSection}>
             <TButton
-              className={css.agreeButton}
+              className={classNames(
+                css.agreeButton,
+                (!termsChecked || !privacyChecked) && css.disabled
+              )}
               onClick={handleAgree}
               spotlightId="agreeButton"
               type={TYPES.agree}
               ariaLabel={$L("Agree to terms")}
-              disabled={!termsChecked || !privacyChecked}
-              spotlightDisabled={!termsChecked || !privacyChecked}
             >
               {$L("Agree")}
             </TButton>

com.twin.app.shoptime/src/views/IntroPanel/IntroPanel.new.module.less

@@ -249,6 +249,16 @@
         box-shadow: 0px 18px 28.2px 1.8px rgba(0, 0, 0, 0.4);
       }
     }
+
+    // Agree 버튼이 disabled 상태일 때 포커스/호버 스타일 오버라이드
+    .agreeButton.disabled {
+      &:focus,
+      &:hover {
+        background-color: rgba(201, 29, 83, 0.3) !important;
+        color: @COLOR_WHITE !important;
+        box-shadow: 0 5px 5px #003 0 6px 7px #0000001a !important;
+      }
+    }
   }
 }