[선택약관 관련수정]

1. TButtonScroller.jsx
    1. Props 추가 및 kind로 구분하여 spotlight.focus변경.
2. TNewPopUp.jsx
    1.  758줄의 kind 추가하여 전달.
3. IntroPanel.new.jsx
    1.  자동팝업 종료후 체크박스에 포커스 이동처리
    2. selectAll에서 포커스 올렸을때 처리변경.
    3. Optional term 체크박스에서 하단으로 이동시 로직에 따른 체크박스 이동.
    4. 팝업에 agree버튼 및 실제 작동 함수 추가.
4.  TermsOfService.jsx
    1. 체크박스 및 문구 주석처리(추후 제거처리 필요, 완료 이후)

com.twin.app.shoptime/src/components/TButtonScroller/TButtonScroller.jsx

@@ -28,6 +28,7 @@ export default function TButtonScroller({
   className,
   resetScrollPosition,
   forcedFocus = true,
+  kind,
 }) {
   const { getScrollTo, scrollTop } = useScrollTo();
 
@@ -90,9 +91,17 @@ export default function TButtonScroller({
     if (!forcedFocus) return;
 
     if (checkScrollPosition === "top") {
-      Spotlight.focus("spotlightId_TbuttonScrollerDown");
+      if (kind === "figmaTermsPopup") {
+        Spotlight.focus("figma-terms-agree");
+      } else {
+        Spotlight.focus("spotlightId_TbuttonScrollerDown");
+      }
     } else if (checkScrollPosition === "bottom") {
-      Spotlight.focus("spotlightId_TbuttonScrollerUp");
+      if (kind === "figmaTermsPopup") {
+        Spotlight.focus("figma-terms-agree");
+      } else {
+        Spotlight.focus("spotlightId_TbuttonScrollerUp");
+      }
     }
   }, [checkScrollPosition, forcedFocus]);
   return (

com.twin.app.shoptime/src/components/TPopUp/TNewPopUp.jsx

@@ -359,8 +359,8 @@ export default function TNewPopUp({
   //   }
   // }, [open, spotlightId]);
 
-   // 커스텀 스타일 생성
+  // 커스텀 스타일 생성
-   const customStyle = useMemo(() => {
+  const customStyle = useMemo(() => {
     if (!customPosition) return {};
 
     return {
@@ -487,23 +487,23 @@ export default function TNewPopUp({
   }, [onIntroTermsAgreeClick]);
 
   const _onSpotlightRight = useCallback(
-      (e) => {
+    (e) => {
-        if (onSpotlightRight) onSpotlightRight(e);
+      if (onSpotlightRight) onSpotlightRight(e);
-      },
+    },
-      [onSpotlightRight]
+    [onSpotlightRight]
-    );
+  );
-    const alertStyle = useMemo(() => {
+  const alertStyle = useMemo(() => {
-      if (kind === 'optionalConfirm') {
+    if (kind === 'optionalConfirm') {
-        return {
+      return {
-          bottom: 'unset',
+        bottom: 'unset',
-          transform: 'none'
+        transform: 'none'
-        };
+      };
-      }
+    }
-      return {};
+    return {};
-    }, [kind]);
+  }, [kind]);
 
-    if (!open) {
+  if (!open) {
-      return null;
+    return null;
   }
 
 
@@ -692,8 +692,8 @@ export default function TNewPopUp({
             <OptionalConfirmButtonSection className={getClassName(kind, "optionalConfirmButtonSection")}>
               <div className={getClassName(kind, "optionalConfirmLeftButtonSection")}>
                 <TButton
-                    className={css.optionalTermsButton}
+                  className={css.optionalTermsButton}
-                    onClick={_onOptionalTermsClick}
+                  onClick={_onOptionalTermsClick}
                   spotlightId="optionalConfirmTermsBtn"
                   type="terms"
                   ariaLabel={$L("Optional Terms")}
@@ -703,7 +703,7 @@ export default function TNewPopUp({
                 </TButton>
               </div>
               <div className={getClassName(kind, "optionalConfirmRightButtonSection")}>
-              <TButton
+                <TButton
                   className={getClassName(kind, "optionalConfirmButton")}
                   onClick={_onOptionalAgreeClick}
                   role="button"
@@ -742,6 +742,7 @@ export default function TNewPopUp({
                 <TButtonScroller 
                   boxHeight={460} 
                   width={844} 
+                  kind={kind}
                 >
                   <div
                     className={getClassName(kind, "scrollerContent")}

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

@@ -608,6 +608,11 @@ function IntroPanelWithOptional({
       // 3초 후 자동 닫기
       popupTimeoutRef.current = setTimeout(() => {
         setRequiredAgreePopup(false);
+        if (!termsChecked) {
+          Spotlight.focus("termsCheckbox");
+        } else if (!privacyChecked) {
+          Spotlight.focus("privacyCheckbox");
+        }
       }, 3000);
 
       return;
@@ -837,6 +842,31 @@ function IntroPanelWithOptional({
     Spotlight.focus();
   }, [popupVisible]);
 
+  //20250903 pjh
+  //selectAll에서 포커스 올렸을때 처리 변경.
+  const onSelectAllSpotlightUp = () => {
+    const focusTimer = setTimeout(() => {
+      Spotlight.focus("optionalCheckbox");
+    }, 100);
+    return () => {
+      clearTimeout(focusTimer);
+    };
+  };
+
+  //Optional terms 체크박스가 체크가 되어있을때 아래로 내리면(3개전부 체크기준) agree로 가고, 아닐경우 select all로 포커스이동해야함.
+  const onOptionalTermSpotlightDown = () => {
+    const focusTimer = setTimeout(() => {
+      if (termsChecked && privacyChecked && optionalChecked) {
+        Spotlight.focus("agreeButton");
+      } else {
+        Spotlight.focus("selectAllCheckbox");
+      }
+    }, 100);
+    return () => {
+      clearTimeout(focusTimer);
+    };
+  };
+
   // useEffect(() => {
   //   if (regDeviceInfoData && regDeviceInfoData.retCode === 0) {
   //     dispatch(setHidePopup());
@@ -944,6 +974,7 @@ function IntroPanelWithOptional({
                   className={css.customeCheckbox}
                   selected={optionalChecked}
                   onToggle={handleOptionalToggle}
+                  onSpotlightDown={onOptionalTermSpotlightDown}
                   spotlightId="optionalCheckbox"
                   ariaLabel={$L("Optional Terms checkbox")}
                 />
@@ -968,6 +999,7 @@ function IntroPanelWithOptional({
               className={css.selectAllCheckbox}
               selected={selectAllChecked}
               onToggle={handleSelectAllToggle}
+              onSpotlightUp={onSelectAllSpotlightUp}
               spotlightId="selectAllCheckbox"
               ariaLabel={$L("Select All checkbox")}
             />
@@ -1033,6 +1065,8 @@ function IntroPanelWithOptional({
             open={popupVisible}
             kind="figmaTermsPopup"
             title={getTermsPopupTitle(currentTerms)}
+            showAgreeButton
+            onAgreeClick={handleTermsAgree}
             text={currentTerms?.trmsCntt || ""}
             onClose={onClose} // Close 버튼 핸들러 연결
           />
@@ -1095,3 +1129,4 @@ function IntroPanelWithOptional({
     </Region>
   );
 }
+

com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/TermsOfService/TermsOfService.jsx

@@ -439,7 +439,7 @@ export default function TermsOfService({ title, cbScrollTo }) {
 
             {termsList[selectedTab]?.trmsTpCd === "MST00405" ? (
               <div className={css.optionalContainer}>
-                <div className={css.checkboxContainer}>
+                {/* <div className={css.checkboxContainer}>
                   <TCheckBoxSquare
                     selected={optionalTermsAgree || isOptionalChecked}
                     onToggle={handleOptionalCheckboxToggle}
@@ -456,7 +456,7 @@ export default function TermsOfService({ title, cbScrollTo }) {
                       "I agree to receive Personalized Recommendations and Advertisements"
                     )}
                   </div>
-                </div>
+                </div> */}
                 <div className={css.buttonContainer}>
                   <TButton
                     onClick={handleOptionalAgree}
@@ -489,10 +489,10 @@ export default function TermsOfService({ title, cbScrollTo }) {
                           "You can change your agreement to the terms and conditions in your LG Account."
                         )
                       : termsList[selectedTab]?.termsId === "20230908001_US"
-                      ? $L(
+                        ? $L(
-                          "If you do not wish to agree to these terms, please proceed to the following link."
+                            "If you do not wish to agree to these terms, please proceed to the following link."
-                        )
+                          )
-                      : null}
+                        : null}
                   </div>
                 )}
                 <TButton
@@ -595,3 +595,4 @@ export default function TermsOfService({ title, cbScrollTo }) {
     </>
   );
 }
+