[홈패널] 로직변경 다운 포커스 수정

com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate1.jsx

@@ -1,25 +1,16 @@
-import React, {
-  useCallback,
-  useEffect,
-  useState,
-} from 'react';
+import React, { useCallback, useEffect, useState } from "react";
 
-import {
-  useDispatch,
-  useSelector,
-} from 'react-redux';
+import { useDispatch, useSelector } from "react-redux";
 
-import Spotlight from '@enact/spotlight';
-import {
-  SpotlightContainerDecorator,
-} from '@enact/spotlight/SpotlightContainerDecorator';
-import Spottable from '@enact/spotlight/Spottable';
+import Spotlight from "@enact/spotlight";
+import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator";
+import Spottable from "@enact/spotlight/Spottable";
 
-import { getHomeMainContents } from '../../../actions/homeActions';
-import CustomImage from '../../../components/CustomImage/CustomImage';
-import css from './HomeBannerTemplate1.module.less';
-import Random from './RandomUnit';
-import Rolling from './RollingUnit';
+import { getHomeMainContents } from "../../../actions/homeActions";
+import CustomImage from "../../../components/CustomImage/CustomImage";
+import css from "./HomeBannerTemplate1.module.less";
+import Random from "./RandomUnit";
+import Rolling from "./RollingUnit";
 
 const SpottableComponent = Spottable("div");
 const Container = SpotlightContainerDecorator(
@@ -34,44 +25,43 @@ const ContainerBasic = SpotlightContainerDecorator(
 export default function HomeBannerTemplate1() {
   const dispatch = useDispatch();
   const [bannerInfos, setBannerInfos] = useState([]);
-  const [vctpImage1, setVctpImage1] = useState();
-  const [vctpImage2, setVctpImage2] = useState();
-  const [wdthImage1, setwdthImage1] = useState();
-  const [wdthImage2, setwdthImage2] = useState();
 
   const homeMainContentsBannerInfos = useSelector(
     (state) => state.home.mainContentsData.homeMainContentsBannerInfos
   );
-
   const homeTopDisplayInfos = useSelector(
     (state) => state.home.mainContentsData.homeTopDisplayInfos
   );
 
-  useEffect(() => {
-    if (homeTopDisplayInfos) {
-      setVctpImage1(homeTopDisplayInfos[0].vtctpImgPath1);
-      setVctpImage2(homeTopDisplayInfos[0].vtctpImgPath2);
-      setwdthImage1(homeTopDisplayInfos[0].wdthtpImgPath1);
-      setwdthImage2(homeTopDisplayInfos[0].wdthtpImgPath2);
-      Spotlight.focus("banner01");
+  const vctpImage1 = useSelector(
+    (state) => state.home.mainContentsData.homeTopDisplayInfos[0].vtctpImgPath1
+  );
+  const vctpImage2 = useSelector(
+    (state) => state.home.mainContentsData.homeTopDisplayInfos[0].vtctpImgPath2
+  );
+  const wdthImage1 = useSelector(
+    (state) => state.home.mainContentsData.homeTopDisplayInfos[0].wdthtpImgPath1
+  );
+  const wdthImage2 = useSelector(
+    (state) => state.home.mainContentsData.homeTopDisplayInfos[0].wdthtpImgPath2
+  );
 
+  useEffect(() => {
+    if (!homeTopDisplayInfos || !homeMainContentsBannerInfos) {
       dispatch(getHomeMainContents);
     }
-  }, [homeTopDisplayInfos, dispatch]);
+  }, [homeTopDisplayInfos, homeMainContentsBannerInfos, dispatch]);
 
   useEffect(() => {
     if (homeMainContentsBannerInfos) {
       const banerInfo = homeMainContentsBannerInfos[0].bannerInfos;
       setBannerInfos(banerInfo);
+      Spotlight.focus("top", { enterTo: "" });
       dispatch(getHomeMainContents);
       console.log(homeMainContentsBannerInfos, "메인 컨텐츠");
       console.log(homeTopDisplayInfos, "탑디스");
     }
-  }, [homeMainContentsBannerInfos, dispatch]);
-
-  useEffect(() => {
-    Spotlight.focus("top", { enterTo: "topmost" });
-  }, [dispatch, bannerInfos]);
+  }, [homeMainContentsBannerInfos, bannerInfos, dispatch]);
 
   return (
     <Container className={css.container} spotlightId={"top"}>

com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate2.jsx

@@ -1,25 +1,16 @@
-import React, {
-  useCallback,
-  useEffect,
-  useState,
-} from 'react';
+import React, { useCallback, useEffect, useState } from "react";
 
-import {
-  useDispatch,
-  useSelector,
-} from 'react-redux';
+import { useDispatch, useSelector } from "react-redux";
 
-import Spotlight from '@enact/spotlight';
-import {
-  SpotlightContainerDecorator,
-} from '@enact/spotlight/SpotlightContainerDecorator';
-import Spottable from '@enact/spotlight/Spottable';
+import Spotlight from "@enact/spotlight";
+import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator";
+import Spottable from "@enact/spotlight/Spottable";
 
-import { getHomeMainContents } from '../../../actions/homeActions';
-import CustomImage from '../../../components/CustomImage/CustomImage';
-import css from './HomeBannerTemplate2.module.less';
-import Random from './RandomUnit';
-import Rolling from './RollingUnit';
+import { getHomeMainContents } from "../../../actions/homeActions";
+import CustomImage from "../../../components/CustomImage/CustomImage";
+import css from "./HomeBannerTemplate2.module.less";
+import Random from "./RandomUnit";
+import Rolling from "./RollingUnit";
 
 const SpottableComponent = Spottable("div");
 const Container = SpotlightContainerDecorator(
@@ -34,46 +25,46 @@ const ContainerBasic = SpotlightContainerDecorator(
   "div"
 );
 
-export default function HomeBannerTemplate2({ ...rest }) {
+export default function HomeBannerTemplate2() {
   const dispatch = useDispatch();
   const [bannerInfos, setBannerInfos] = useState([]);
-  const [vctpImage1, setVctpImage1] = useState();
-  const [vctpImage2, setVctpImage2] = useState();
-  const [wdthImage1, setwdthImage1] = useState();
-  const [wdthImage2, setwdthImage2] = useState();
 
   const homeMainContentsBannerInfos = useSelector(
     (state) => state.home.mainContentsData.homeMainContentsBannerInfos
   );
-
   const homeTopDisplayInfos = useSelector(
     (state) => state.home.mainContentsData.homeTopDisplayInfos
   );
 
-  useEffect(() => {
-    if (homeTopDisplayInfos) {
-      setVctpImage1(homeTopDisplayInfos[0].vtctpImgPath1);
-      setVctpImage2(homeTopDisplayInfos[0].vtctpImgPath2);
-      setwdthImage1(homeTopDisplayInfos[0].wdthtpImgPath1);
-      setwdthImage2(homeTopDisplayInfos[0].wdthtpImgPath2);
+  const vctpImage1 = useSelector(
+    (state) => state.home.mainContentsData.homeTopDisplayInfos[0].vtctpImgPath1
+  );
+  const vctpImage2 = useSelector(
+    (state) => state.home.mainContentsData.homeTopDisplayInfos[0].vtctpImgPath2
+  );
+  const wdthImage1 = useSelector(
+    (state) => state.home.mainContentsData.homeTopDisplayInfos[0].wdthtpImgPath1
+  );
+  const wdthImage2 = useSelector(
+    (state) => state.home.mainContentsData.homeTopDisplayInfos[0].wdthtpImgPath2
+  );
 
+  useEffect(() => {
+    if (!homeTopDisplayInfos || !homeMainContentsBannerInfos) {
       dispatch(getHomeMainContents);
     }
-  }, [homeTopDisplayInfos, dispatch]);
+  }, [homeTopDisplayInfos, homeMainContentsBannerInfos, dispatch]);
 
   useEffect(() => {
     if (homeMainContentsBannerInfos) {
       const banerInfo = homeMainContentsBannerInfos[0].bannerInfos;
       setBannerInfos(banerInfo);
+      Spotlight.focus("top", { enterTo: "" });
       dispatch(getHomeMainContents);
-      console.log(homeMainContentsBannerInfos, "메인 컨텐츠 - 템플릿2");
+      console.log(homeMainContentsBannerInfos, "메인 컨텐츠");
       console.log(homeTopDisplayInfos, "탑디스");
     }
-  }, [homeMainContentsBannerInfos, dispatch]);
-
-  useEffect(() => {
-    Spotlight.focus("top", { enterTo: "topmost" });
-  }, [dispatch, bannerInfos]);
+  }, [homeMainContentsBannerInfos, bannerInfos, dispatch]);
 
   return (
     <Container className={css.container} spotlightId="top">

com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate3.jsx

@@ -1,26 +1,17 @@
-import React, {
-  useCallback,
-  useEffect,
-  useState,
-} from 'react';
+import React, { useCallback, useEffect, useState } from "react";
 
-import classNames from 'classnames';
-import {
-  useDispatch,
-  useSelector,
-} from 'react-redux';
+import classNames from "classnames";
+import { useDispatch, useSelector } from "react-redux";
 
-import Spotlight from '@enact/spotlight';
-import {
-  SpotlightContainerDecorator,
-} from '@enact/spotlight/SpotlightContainerDecorator';
-import Spottable from '@enact/spotlight/Spottable';
+import Spotlight from "@enact/spotlight";
+import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator";
+import Spottable from "@enact/spotlight/Spottable";
 
-import { getHomeMainContents } from '../../../actions/homeActions';
-import CustomImage from '../../../components/CustomImage/CustomImage';
-import css from './HomeBannerTemplate3.module.less';
-import Random from './RandomUnit';
-import Rolling from './RollingUnit';
+import { getHomeMainContents } from "../../../actions/homeActions";
+import CustomImage from "../../../components/CustomImage/CustomImage";
+import css from "./HomeBannerTemplate3.module.less";
+import Random from "./RandomUnit";
+import Rolling from "./RollingUnit";
 
 const SpottableComponent = Spottable("div");
 const Container = SpotlightContainerDecorator(
@@ -38,43 +29,43 @@ const ContainerBasic = SpotlightContainerDecorator(
 export default function HomeBannerTemplate3({ ...rest }) {
   const dispatch = useDispatch();
   const [bannerInfos, setBannerInfos] = useState([]);
-  const [vctpImage1, setVctpImage1] = useState();
-  const [vctpImage2, setVctpImage2] = useState();
-  const [wdthImage1, setwdthImage1] = useState();
-  const [wdthImage2, setwdthImage2] = useState();
 
   const homeMainContentsBannerInfos = useSelector(
     (state) => state.home.mainContentsData.homeMainContentsBannerInfos
   );
-
   const homeTopDisplayInfos = useSelector(
     (state) => state.home.mainContentsData.homeTopDisplayInfos
   );
 
-  useEffect(() => {
-    if (homeTopDisplayInfos) {
-      setVctpImage1(homeTopDisplayInfos[0].vtctpImgPath1);
-      setVctpImage2(homeTopDisplayInfos[0].vtctpImgPath2);
-      setwdthImage1(homeTopDisplayInfos[0].wdthtpImgPath1);
-      setwdthImage2(homeTopDisplayInfos[0].wdthtpImgPath2);
+  const vctpImage1 = useSelector(
+    (state) => state.home.mainContentsData.homeTopDisplayInfos[0].vtctpImgPath1
+  );
+  const vctpImage2 = useSelector(
+    (state) => state.home.mainContentsData.homeTopDisplayInfos[0].vtctpImgPath2
+  );
+  const wdthImage1 = useSelector(
+    (state) => state.home.mainContentsData.homeTopDisplayInfos[0].wdthtpImgPath1
+  );
+  const wdthImage2 = useSelector(
+    (state) => state.home.mainContentsData.homeTopDisplayInfos[0].wdthtpImgPath2
+  );
 
+  useEffect(() => {
+    if (!homeTopDisplayInfos || !homeMainContentsBannerInfos) {
       dispatch(getHomeMainContents);
     }
-  }, [homeTopDisplayInfos, dispatch]);
+  }, [homeTopDisplayInfos, homeMainContentsBannerInfos, dispatch]);
 
   useEffect(() => {
     if (homeMainContentsBannerInfos) {
       const banerInfo = homeMainContentsBannerInfos[0].bannerInfos;
       setBannerInfos(banerInfo);
+      Spotlight.focus("top", { enterTo: "" });
       dispatch(getHomeMainContents);
       console.log(homeMainContentsBannerInfos, "메인 컨텐츠");
       console.log(homeTopDisplayInfos, "탑디스");
     }
-  }, [homeMainContentsBannerInfos, dispatch]);
-
-  useEffect(() => {
-    Spotlight.focus("top", { enterTo: "topmost" });
-  }, [dispatch, bannerInfos]);
+  }, [homeMainContentsBannerInfos, bannerInfos, dispatch]);
 
   return (
     <Container className={css.homeTemplateBox} spotlightId="top">

com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RollingUnit.jsx

@@ -1,41 +1,36 @@
-import React, {
-  useCallback,
-  useEffect,
-  useState,
-} from 'react';
+import React, { useCallback, useEffect, useState } from "react";
 
-import VideoPlay from '@enact/sandstone/VideoPlayer';
+import HomeTodayDeal from "../HomeTodayDeal/HomeTodayDeal";
+import ImageBanner from "./ImageBannerUnit";
 
-import CustomImage from '../../../components/CustomImage/CustomImage';
-import HomeTodayDeal from '../HomeTodayDeal/HomeTodayDeal';
-import ImageBanner from './ImageBannerUnit';
+// import ViedoController from './VideoUnit';
 
 export default function RollingUnit({ bannerData, imageType, spotlightId }) {
-  const bannerDetailInfos = bannerData.bannerDetailInfos;
-  const bannerDetailInfosLength = bannerData.bannerDetailInfos.length;
+  const rollingData = bannerData.bannerDetailInfos;
+  const rollingDataLength = bannerData.bannerDetailInfos.length;
 
   const [count, setCount] = useState(10);
   const [startIndex, setStartIndex] = useState(0);
-  const [lastIndex, setLastIndex] = useState(null);
+  const [lastIndex, setLastIndex] = useState(rollingDataLength - 1);
   const [startFocus, setStartFocus] = useState(false);
   const [onFocus, setOnFocus] = useState(false);
 
-  const getIndex = (index) => {
-    setStartIndex(index);
-  };
+  const getIndex = useCallback(
+    (index) => {
+      setStartIndex(index);
+    },
+    [startIndex]
+  );
 
-  const getFocus = (focus) => {
-    setOnFocus(focus);
-  };
+  const getFocus = useCallback(
+    (focus) => {
+      setOnFocus(focus);
+    },
+    [onFocus]
+  );
 
   useEffect(() => {
-    if (bannerData) {
-      setLastIndex(bannerDetailInfosLength - 1);
-    }
-  }, [bannerData, startIndex]);
-
-  useEffect(() => {
-    if (bannerDetailInfosLength === 1) {
+    if (rollingDataLength === 1) {
       return;
     }
 
@@ -63,21 +58,21 @@ export default function RollingUnit({ bannerData, imageType, spotlightId }) {
 
   return (
     <>
-      {bannerDetailInfos &&
-      bannerDetailInfos[startIndex].shptmBanrTpNm === "Image Banner" ? (
+      {rollingData &&
+      rollingData[startIndex].shptmBanrTpNm === "Image Banner" ? (
         <ImageBanner
-          imgAlt={bannerDetailInfos[startIndex].tmnlImgAlt}
-          imageName={bannerDetailInfos[startIndex].tmnlImgNm}
-          imgPath={bannerDetailInfos[startIndex].tmnlImgPath}
-          patnrId={bannerDetailInfos[startIndex].patnrId}
-          prdtId={bannerDetailInfos[startIndex].prdtId}
-          productName={bannerDetailInfos[startIndex].prdtNm}
-          showUrl={bannerDetailInfos[startIndex].showUrl}
-          showNm={bannerDetailInfos[startIndex].showNm}
-          patncLogoPath={bannerDetailInfos[startIndex].patncLogoPath}
-          shptmLnkTpNm={bannerDetailInfos[startIndex].shptmLnkTpNm}
+          imgAlt={rollingData[startIndex].tmnlImgAlt}
+          imageName={rollingData[startIndex].tmnlImgNm}
+          imgPath={rollingData[startIndex].tmnlImgPath}
+          patnrId={rollingData[startIndex].patnrId}
+          prdtId={rollingData[startIndex].prdtId}
+          productName={rollingData[startIndex].prdtNm}
+          showUrl={rollingData[startIndex].showUrl}
+          showNm={rollingData[startIndex].showNm}
+          patncLogoPath={rollingData[startIndex].patncLogoPath}
+          shptmLnkTpNm={rollingData[startIndex].shptmLnkTpNm}
           isHorizontal={imageType} // WIDTH = TRUE / FALSE
-          rolling={bannerDetailInfosLength === 1 ? false : true}
+          rolling={rollingDataLength === 1 ? false : true}
           lastIndex={lastIndex}
           currentIndex={startIndex}
           getIndex={getIndex}
@@ -85,23 +80,23 @@ export default function RollingUnit({ bannerData, imageType, spotlightId }) {
           spotlightId={spotlightId}
           startFocus={startFocus}
         />
-      ) : bannerDetailInfos[startIndex].shptmBanrTpNm === "LIVE" ||
-        bannerDetailInfos[startIndex].shptmBanrTpNm === "VOD" ? (
+      ) : rollingData[startIndex].shptmBanrTpNm === "LIVE" ||
+        rollingData[startIndex].shptmBanrTpNm === "VOD" ? (
         <>
-          <p>비디오 테스트</p>
+          <p>비디오 구현 중</p>
         </>
-      ) : bannerDetailInfos[startIndex].shptmBanrTpNm === "Today's Deals" ? (
+      ) : rollingData[startIndex].shptmBanrTpNm === "Today's Deals" ? (
         <HomeTodayDeal
-          imgAlt={bannerDetailInfos[startIndex].tmnlImgAlt}
-          imageName={bannerDetailInfos[startIndex].tmnlImgNm}
-          imgPath={bannerDetailInfos[startIndex].tmnlImgPath}
-          priceInfo={bannerDetailInfos[startIndex].priceInfo}
-          patnrId={bannerDetailInfos[startIndex].patnrId}
-          prdtId={bannerDetailInfos[startIndex].prdtId}
-          productName={bannerDetailInfos[startIndex].prdtNm}
-          soldoutFlag={bannerDetailInfos[startIndex].soldoutFlag}
+          imgAlt={rollingData[startIndex].tmnlImgAlt}
+          imageName={rollingData[startIndex].tmnlImgNm}
+          imgPath={rollingData[startIndex].tmnlImgPath}
+          priceInfo={rollingData[startIndex].priceInfo}
+          patnrId={rollingData[startIndex].patnrId}
+          prdtId={rollingData[startIndex].prdtId}
+          productName={rollingData[startIndex].prdtNm}
+          soldoutFlag={rollingData[startIndex].soldoutFlag}
           isHorizontal={imageType} // WIDTH = TRUE / FALSE
-          rolling={bannerDetailInfosLength === 1 ? false : true}
+          rolling={rollingDataLength === 1 ? false : true}
           lastIndex={lastIndex}
           currentIndex={startIndex}
           getIndex={getIndex}

com.twin.app.shoptime/src/views/HomePanel/HomeTodayDeal/HomeTodayDeal.jsx

@@ -1,20 +1,15 @@
-import React, {
-  useCallback,
-  useEffect,
-  useState,
-} from 'react';
+import React, { useCallback, useEffect, useState } from "react";
 
-import classNames from 'classnames';
-import { useDispatch } from 'react-redux';
+import classNames from "classnames";
+import { useDispatch } from "react-redux";
 
-import Spotlight from '@enact/spotlight';
-import SpotlightContainerDecorator
-  from '@enact/spotlight/SpotlightContainerDecorator';
-import Spottable from '@enact/spotlight/Spottable';
+import Spotlight from "@enact/spotlight";
+import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
+import Spottable from "@enact/spotlight/Spottable";
 
-import { pushPanel } from '../../../actions/panelActions';
-import { panel_names } from '../../../utils/Config';
-import css from './HomeTodayDeal.module.less';
+import { pushPanel } from "../../../actions/panelActions";
+import { panel_names } from "../../../utils/Config";
+import css from "./HomeTodayDeal.module.less";
 
 const Container = SpotlightContainerDecorator(
   { enterTo: "last-focused" },
@@ -50,7 +45,6 @@ export default function HomeTodayDeal({
   const handleClick = useCallback(() => {
     console.log("파트너ID", patnrId);
     console.log("상품", prdtId);
-
     // dispatch(
     //   pushPanel({
     //     name: panel_names.DETAIL_PANEL,
@@ -59,33 +53,46 @@ export default function HomeTodayDeal({
     // );
   }, [dispatch, patnrId, productId]);
 
-  const handlePrev = () => {
+  // 화살표 아래키 누를시, 아래로 포커스
+  const [focusDown, setFocusDown] = useState(false);
+
+  const handlePrev = useCallback(() => {
     if (currentIndex === 0) {
       getIndex(lastIndex);
       return;
     }
     getIndex(currentIndex - 1);
-  };
+  }, [getIndex]);
 
-  const handleNext = () => {
+  const handleNext = useCallback(() => {
     if (lastIndex === currentIndex) {
       getIndex(0);
       return;
     }
     getIndex(currentIndex + 1);
-  };
+  }, [getIndex]);
 
-  const _onFocus = () => {
+  const onFocus = () => {
     if (rolling === true) {
       getFocus(true);
     }
   };
 
-  const _onBlur = () => {
+  const onBlur = useCallback(() => {
     if (rolling === true) {
+      setFocusDown(false);
       getFocus(false);
     }
-  };
+  }, []);
+
+  const onKeyDown = useCallback(
+    (event) => {
+      if (event.key === "ArrowDown") {
+        setFocusDown(true);
+      }
+    },
+    [focusDown]
+  );
 
   const parsePriceInfo = useCallback(
     (priceInfo) => {
@@ -114,12 +121,6 @@ export default function HomeTodayDeal({
   const { originalPrice, discountedPrice, discountRate } =
     parsePriceInfo(priceInfo);
 
-  // useEffect(() => {
-  //   if (startFocus === false) {
-  //     Spotlight.focus("banner01");
-  //   }
-  // }, [startFocus]);
-
   return (
     <Container
       className={classNames(
@@ -127,17 +128,24 @@ export default function HomeTodayDeal({
         isHorizontal && css.isHorizontalWrap
       )}
     >
-      {rolling === true && (
+      {focusDown === true ? (
+        <div
+          className={classNames(css.arrow, css.leftBtn)}
+          onClick={handlePrev}
+        ></div>
+      ) : (
         <SpottableComponent
           className={classNames(css.arrow, css.leftBtn)}
           onClick={handlePrev}
         ></SpottableComponent>
       )}
+
       <SpottableComponent
         className={classNames(css.itemBox, isHorizontal && css.isHorizontal)}
         onClick={handleClick}
-        onFocus={_onFocus}
-        onBlur={_onBlur}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        onKeyDown={onKeyDown}
         spotlightId={spotlightId}
       >
         <div>
@@ -155,7 +163,12 @@ export default function HomeTodayDeal({
         </div>
       </SpottableComponent>
 
-      {rolling === true && (
+      {focusDown === true ? (
+        <div
+          className={classNames(css.arrow, css.rightBtn)}
+          onClick={handleNext}
+        ></div>
+      ) : (
         <SpottableComponent
           className={classNames(css.arrow, css.rightBtn)}
           onClick={handleNext}

com.twin.app.shoptime/src/views/HomePanel/HomeTodayDeal/HomeTodayDeal.module.less

@@ -84,24 +84,33 @@
 
   .arrow {
     z-index: 10;
-    .size(@w: 61px, @h: calc(100% + 2px));
+    .size(@w: 42px, @h: 42px);
     background-size: 42px 42px;
-    background-repeat: no-repeat;
+    background-position: center center;
     &.leftBtn {
-      .position(@position: absolute, @top: -1px, @left: -1px);
+      .position(@position: absolute, @top: 429px, @left: 18px);
       background-image: url("../../../../assets/images/btn/btn_prev_thumb_nor.png");
-      background-position: center right;
       &:focus {
         background-image: url("../../../../assets/images/btn/btn_prev_thumb_foc.png");
       }
     }
     &.rightBtn {
-      .position(@position: absolute, @top: -1px, @right: -1px);
+      .position(@position: absolute, @top: 429px, @right: 18px);
       background-image: url("../../../../assets/images/btn/btn_next_thumb_nor.png");
-      background-position: center left;
       &:focus {
         background-image: url("../../../../assets/images/btn/btn_next_thumb_foc.png");
       }
     }
   }
+
+  &.isHorizontalWrap {
+    .arrow {
+      &.leftBtn {
+        .position(@position: absolute, @top: 189px, @left: 18px);
+      }
+      &.rightBtn {
+        .position(@position: absolute, @top: 189px, @right: 18px);
+      }
+    }
+  }
 }