[251105] fix: BuyNow Option-1

🕐 커밋 시간: 2025. 11. 05. 07:35:13

📊 변경 통계:
  • 총 파일: 4개
  • 추가: +94줄
  • 삭제: -70줄

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/utils/BuyNowDataManipulator.js
  ~ com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx
  ~ com.twin.app.shoptime/src/views/DetailPanel/components/BuyOption.jsx
  ~ com.twin.app.shoptime/src/views/SearchPanel/VoiceInputOverlay/VoiceInputOverlay.jsx

🔧 주요 변경 내용:
  • 공통 유틸리티 함수 최적화
  • UI 컴포넌트 아키텍처 개선
  • 소규모 기능 개선
  • 코드 정리 및 최적화

com.twin.app.shoptime/src/views/DetailPanel/components/BuyOption.jsx

@@ -136,14 +136,15 @@ const BuyOption = ({
   // 상품 정보 (props 우선, 없으면 productInfo에서)
   const selectedPatnrId = propsSelectedPatnrId || productInfo?.patnrId;
   const selectedPrdtId = propsSelectedPrdtId || productInfo?.prdtId;
+  const isMockMode = BUYNOW_CONFIG.isMockMode();
 
   // Mock Mode에서 옵션 데이터 처리
   const productOptionInfos = useMemo(() => {
-    console.log('[BuyOption] productOptionInfos useMemo - isMockMode:', BUYNOW_CONFIG.isMockMode());
+    console.log('[BuyOption] productOptionInfos useMemo - isMockMode:', isMockMode);
     console.log('[BuyOption] productOptionInfos useMemo - reduxProductOptionInfos:', reduxProductOptionInfos);
 
     // API Mode: 기존 로직 100% 유지
-    if (!BUYNOW_CONFIG.isMockMode()) {
+    if (!isMockMode) {
       console.log('[BuyOption] API Mode - using reduxProductOptionInfos');
       return reduxProductOptionInfos;
     }
@@ -162,7 +163,9 @@ const BuyOption = ({
     // Mock Mode이고 유효한 옵션 데이터가 있으면 그대로 사용
     console.log('[BuyOption] Mock Mode - using existing valid reduxProductOptionInfos');
     return reduxProductOptionInfos;
-  }, [reduxProductOptionInfos, productData]);  // logInfo 생성 (SingleOption과 동일한 로직, productData 우선 사용)
+  }, [reduxProductOptionInfos, productData, isMockMode]);  // logInfo 생성 (SingleOption과 동일한 로직, productData 우선 사용)
+  const hasMockOptions =
+    isMockMode && Array.isArray(productOptionInfos) && productOptionInfos.length > 0;
   const logInfo = useMemo(() => {
     if (productData) {
       // productData가 있으면 SingleOption과 동일하게 처리
@@ -307,7 +310,7 @@ const BuyOption = ({
   // Mock Mode: API 호출 스킵 (Mock 데이터만 사용)
   useEffect(() => {
     // API Mode: 실제 API 호출
-    if (!BUYNOW_CONFIG.isMockMode()) {
+    if (!isMockMode) {
       dispatch(
         getProductOption({
           patnrId: selectedPatnrId,
@@ -324,41 +327,35 @@ const BuyOption = ({
       );
     }
     // Mock Mode: API 호출 하지 않음
-  }, [dispatch, selectedPatnrId, selectedPrdtId, userNumber]);
+  }, [dispatch, selectedPatnrId, selectedPrdtId, userNumber, isMockMode]);
 
   // 포커스 관리 로직 (SingleOption과 유사)
   useEffect(() => {
-    // if (!isSpotlight) {
-    //   // isSpotlight이 false면 일반적인 BuyOption 포커스
-    //   console.log('[BuyOption] Component mounted - focusing BUY NOW button');
+    const shouldHandleOptionFocus =
+      productInfo?.optProdYn === 'Y' || hasMockOptions;
 
-    //   Spotlight.focus('buy-option-buy-now-button');
-
-    //   return;
-    // }
-
-    // isSpotlight이 true이고 SingleOption 동작이 필요한 경우 요부분
-    if (productInfo?.optProdYn === 'N') {
+    if (!shouldHandleOptionFocus) {
       Spotlight.focus('buy-option-buy-now-button');
-    } else if (productInfo?.optProdYn === 'Y') {
-      if(
-        productOptionInfos &&
-        productOptionInfos?.length > 1
-        ){
-        Spotlight.focus('buy-option-first-dropdown');
-      } else if (
-        productOptionInfos?.legnth > 0 &&
-        productOptionInfos[selectedBtnOptIdx]?.prdtOptDtl &&
-        productOptionInfos[selectedBtnOptIdx]?.prdtOptDtl.length > 1
-      ){
-        Spotlight.focus('buy-option-second-dropdown');
-      } else {
-        Spotlight.focus('buy-option-buy-now-button');
-      }
+      return;
+    }
+
+    if (productOptionInfos && productOptionInfos.length > 1) {
+      Spotlight.focus('buy-option-first-dropdown');
+    } else if (
+      productOptionInfos &&
+      productOptionInfos[selectedBtnOptIdx]?.prdtOptDtl &&
+      productOptionInfos[selectedBtnOptIdx]?.prdtOptDtl.length > 1
+    ) {
+      Spotlight.focus('buy-option-second-dropdown');
     } else {
       Spotlight.focus('buy-option-buy-now-button');
     }
-  }, [productOptionInfos?.length, productInfo?.length]);
+  }, [
+    productOptionInfos,
+    productInfo?.optProdYn,
+    hasMockOptions,
+    selectedBtnOptIdx,
+  ]);
 
   // checkOutValidate 콜백 함수 (SingleOption과 동일한 로직)
   function checkOutValidate(response) {
@@ -1318,7 +1315,7 @@ const BuyOption = ({
         {/* 동적 옵션 렌더링 */}
         {productOptionInfos &&
           productOptionInfos?.length > 0 &&
-          productInfo?.optProdYn === 'Y' && (
+          (productInfo?.optProdYn === 'Y' || hasMockOptions) && (
             <>
               {/* 첫번째 옵션 (여러 옵션이 있을 때만) */}
               {productOptionInfos?.length > 1 && (