diff --git a/com.twin.app.shoptime/src/components/VideoOverlayWithPhoneNumber/VideoOverlayWithPhoneNumber.jsx b/com.twin.app.shoptime/src/components/VideoOverlayWithPhoneNumber/VideoOverlayWithPhoneNumber.jsx new file mode 100644 index 00000000..401057b0 --- /dev/null +++ b/com.twin.app.shoptime/src/components/VideoOverlayWithPhoneNumber/VideoOverlayWithPhoneNumber.jsx @@ -0,0 +1,34 @@ +import { memo } from "react"; + +import classNames from "classnames"; + +import IcWhiteCall from "../../../assets/icon/ic-wh-call.svg"; +import IcCallToOrder from "../../../assets/icon/tag/tag-calltoorder.svg"; +import css from "./VideoOverlayWithPhoneNumber.module.less"; + +const CALL_TO_ORDER_STRING = "Call To Order"; +const PHONE_STRING = "Phone"; + +/** + * default, position: absolute; + * top, right, bottom, left 중 필요한 위치 설정 + * @param {string} className + * @param {boolean} show + */ + +export default memo(function VideoOverlayWithPhoneNumber({ className, show }) { + return ( + <> + {show && ( +
+ {CALL_TO_ORDER_STRING} +
+ {PHONE_STRING} + {/* @@pyh Todo, 임시적 번호 기재, 추후 Lg 전용번호로 변경 */} + {"080-284-3001"} +
+
+ )} + + ); +}); diff --git a/com.twin.app.shoptime/src/components/VideoOverlayWithPhoneNumber/VideoOverlayWithPhoneNumber.module.less b/com.twin.app.shoptime/src/components/VideoOverlayWithPhoneNumber/VideoOverlayWithPhoneNumber.module.less new file mode 100644 index 00000000..0055b78b --- /dev/null +++ b/com.twin.app.shoptime/src/components/VideoOverlayWithPhoneNumber/VideoOverlayWithPhoneNumber.module.less @@ -0,0 +1,38 @@ +@import "../../style/CommonStyle.module.less"; +@import "../../style/utils.module.less"; + +.container { + position: absolute; + .flex(@direction: column, @alignCenter: flex-start); + gap: 12px; + .size(@w: 312px, @h: 132px); + padding: 18px; + border-radius: 10px; + background-image: linear-gradient(to top, #1a1a1a 93%, #8e8e8e); + .font(@fontFamily: @baseFontBold, @fontSize: 36px); + color: @COLOR_WHITE; + box-shadow: 5px 8.7px 15px 0 rgba(6, 0, 1, 0.5); + + &::after { + .position(@position: absolute, @top: 0, @right: 0); + .size(@w: 100%, @h: 100%); + display: block; + box-sizing: border-box; + border-radius: 10px; + border: 2px solid rgba(255, 255, 255, 0.7); + content: ""; + } + + > img { + .size(@w: 126px, @h: 42px); + } + + div { + .flex(@justifyCenter: flex-start); + gap: 4px; + letter-spacing: -0.9px; + img { + .size(@w: 42px, @h: 42px); + } + } +} diff --git a/com.twin.app.shoptime/src/components/VideoOverlayWithPhoneNumber/package.json b/com.twin.app.shoptime/src/components/VideoOverlayWithPhoneNumber/package.json new file mode 100644 index 00000000..aedb3f08 --- /dev/null +++ b/com.twin.app.shoptime/src/components/VideoOverlayWithPhoneNumber/package.json @@ -0,0 +1,6 @@ +{ + "main": "VideoOverlayWithPhoneNumber.jsx", + "styles": [ + "VideoOverlayWithPhoneNumber.module.less" + ] +}