[251211] feat: FeaturedBrandsPanel , TopBannerImage Modal

🕐 커밋 시간: 2025. 12. 11. 14:04:14

📊 변경 통계:
  • 총 파일: 3개
  • 추가: +63줄
  • 삭제: -25줄

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/components/GlobalPopup/GlobalPopup.jsx
  ~ com.twin.app.shoptime/src/views/FeaturedBrandsPanel/TopBannerImage/TopBannerPopup.jsx
  ~ com.twin.app.shoptime/src/views/FeaturedBrandsPanel/TopBannerImage/TopBannerPopup.module.less

🔧 주요 변경 내용:
  • UI 컴포넌트 아키텍처 개선
  • 소규모 기능 개선

com.twin.app.shoptime/src/views/FeaturedBrandsPanel/TopBannerImage/TopBannerPopup.jsx

@@ -1,4 +1,4 @@
-import React, { memo, useCallback, useState } from "react";
+import React, { memo, useCallback, useState, useEffect, useRef } from "react";
 import { useDispatch } from "react-redux";
 import { setHidePopup } from "../../../actions/commonActions";
 import css from "./TopBannerPopup.module.less";
@@ -6,6 +6,7 @@ import css from "./TopBannerPopup.module.less";
 const TopBannerPopup = memo(({ title, imageUrl, imageAlt, onImageLoad }) => {
   const dispatch = useDispatch();
   const [imageDimensions, setImageDimensions] = useState({ width: 0, height: 0 });
+  const closeButtonRef = useRef(null);
 
   const handleImageLoad = useCallback((e) => {
     const img = e.target;
@@ -29,6 +30,14 @@ const TopBannerPopup = memo(({ title, imageUrl, imageAlt, onImageLoad }) => {
     dispatch(setHidePopup());
   }, [dispatch]);
 
+  // 팝업이 마운트되었을 때 Close 버튼에 포커스
+  useEffect(() => {
+    console.log("[TOP-BANNER-POPUP] Component mounted - focusing close button");
+    if (closeButtonRef.current) {
+      closeButtonRef.current.focus();
+    }
+  }, []);
+
   return (
     <div className={css.container}>
       {/* Title Section */}
@@ -48,7 +57,12 @@ const TopBannerPopup = memo(({ title, imageUrl, imageAlt, onImageLoad }) => {
 
       {/* Button Section */}
       <div className={css.buttonSection}>
-        <button className={css.closeButton} onClick={handleClose} aria-label="Close popup">
+        <button
+          ref={closeButtonRef}
+          className={css.closeButton}
+          onClick={handleClose}
+          aria-label="Close popup"
+        >
           CLOSE
         </button>
       </div>

com.twin.app.shoptime/src/views/FeaturedBrandsPanel/TopBannerImage/TopBannerPopup.module.less

@@ -1,3 +1,6 @@
+@import "../../../style/CommonStyle.module.less";
+@import "../../../style/utils.module.less";
+
 .container {
   width: 100%;
   height: 100%;
@@ -86,12 +89,12 @@
   text-align: center;
 
   &:hover {
-    background: #6a7278;
+    background: @PRIMARY_COLOR_RED;
   }
 
   &:focus {
-    outline: 2px solid #fff;
-    outline-offset: 2px;
+    background: @PRIMARY_COLOR_RED;
+    outline: none;
   }
 
   &:active {