[251101] fix: ProductAllSection Skeleton

🕐 커밋 시간: 2025. 11. 01. 11:56:47

📊 변경 통계:
  • 총 파일: 2개
  • 추가: +31줄
  • 삭제: -6줄

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx
  ~ com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.jsx

🔧 주요 변경 내용:
  • 소규모 기능 개선

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

@@ -44,7 +44,6 @@ import { SpotlightIds } from '../../utils/SpotlightIds';
 import DetailPanelBackground from './components/DetailPanelBackground';
 import THeaderCustom from './components/THeaderCustom';
 import css from './DetailPanel.module.less';
-import DetailPanelSkeleton from './DetailPanelSkeleton/DetailPanelSkeleton';
 import ProductAllSection from './ProductAllSection/ProductAllSection';
 import ThemeItemListOverlay from './ThemeItemListOverlay/ThemeItemListOverlay';
 
@@ -120,7 +119,6 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
 
   const [scrollToSection, setScrollToSection] = useState(null);
   const [pendingScrollSection, setPendingScrollSection] = useState(null);
-
   const updateSelectedIndex = useCallback((newIndex) => {
     setSelectedIndex(
       fp.pipe(
@@ -741,10 +739,6 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
               );
             }
 
-            if (renderStates.showLoading) {
-              return <DetailPanelSkeleton />;
-            }
-
             return null;
           }, [
             isLoading,

com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.jsx

@@ -77,6 +77,7 @@ import YouMayAlsoLike
   from '../ProductContentSection/YouMayAlsoLike/YouMayAlsoLike';
 import QRCode from '../ProductInfoSection/QRCode/QRCode';
 import ProductOverview from '../ProductOverview/ProductOverview';
+import DetailPanelSkeleton from '../DetailPanelSkeleton/DetailPanelSkeleton';
 // CSS imports
 // import infoCSS from "../ProductInfoSection/ProductInfoSection.module.less";
 // import contentCSS from "../ProductContentSection/ProductContentSection.module.less";
@@ -189,6 +190,9 @@ export default function ProductAllSection({
   // handleScrollToImages의 timeout을 추적하기 위한 ref
   const scrollToImagesTimeoutRef = useRef(null);
 
+  // ProductAllSection 초기 로딩 시 Skeleton 표시를 위한 상태
+  const [isInitialLoading, setIsInitialLoading] = useState(true);
+
   useEffect(() => {
     const toggleQRCode = () => {
       if (isShowQRCode) {
@@ -608,6 +612,24 @@ export default function ProductAllSection({
     }
   }, [onReady, isOnRender]);
 
+  // 초기 로딩 후 Skeleton 숨기기
+  useEffect(() => {
+    if (productType && productData && isInitialLoading) {
+      const timer = setTimeout(() => {
+        setIsInitialLoading(false);
+      }, 150); // 150ms 후에 Skeleton 숨김
+
+      return () => clearTimeout(timer);
+    }
+  }, [productType, productData, isInitialLoading]);
+
+  // 컴포넌트 unmount 시 초기 상태로 복원
+  useEffect(() => {
+    return () => {
+      setIsInitialLoading(true);
+    };
+  }, []);
+
   // WebOS TV focus-within 대체 로직
   // useEffect(() => {
   //   const detailAreaElement = document.querySelector('.detailArea');
@@ -665,6 +687,15 @@ export default function ProductAllSection({
     };
   }, []);
 
+  // 초기 로딩 중에는 Skeleton 표시
+  if (isInitialLoading) {
+    return (
+      <div className={css.detailArea}>
+        <DetailPanelSkeleton />
+      </div>
+    );
+  }
+
   return (
     <HorizontalContainer className={css.detailArea} onClick={handleCloseToast}>
       {/* Left Margin Section - 60px */}