[components] VideoOverlayWithPhoneNumber 추가

Detail Notes :

1. Video에 포커스시 Lg전용번호가 노출되는 컴포넌트 추가 (call to order)

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 && (
+        <div className={classNames(className && className, css.container)}>
+          <img src={IcCallToOrder} alt={CALL_TO_ORDER_STRING} />
+          <div>
+            <img src={IcWhiteCall} alt={PHONE_STRING} />
+            {/* @@pyh Todo, 임시적 번호 기재, 추후 Lg 전용번호로 변경 */}
+            <span>{"080-284-3001"}</span>
+          </div>
+        </div>
+      )}
+    </>
+  );
+});

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);
+    }
+  }
+}

com.twin.app.shoptime/src/components/VideoOverlayWithPhoneNumber/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "VideoOverlayWithPhoneNumber.jsx",
+  "styles": [
+    "VideoOverlayWithPhoneNumber.module.less"
+  ]
+}