[250929] feat: ShopByMobile관련 컴포넌트 추가

com.twin.app.shoptime/src/components/MobileSend/MobileSendPopUp.jsx

@@ -56,6 +56,7 @@ import CustomImage from "../CustomImage/CustomImage";
 import TButton from "../TButton/TButton";
 import TPopUp from "../TPopUp/TPopUp";
 import HistoryPhoneNumber from "./HistoryPhoneNumber/HistoryPhoneNumber";
+import PhoneInputSection from "./PhoneInputSection";
 import css from "./MobileSendPopUp.module.less";
 import SMSNumKeyPad from "./SMSNumKeyPad";
 
@@ -80,6 +81,8 @@ export default function MobileSendPopUp({
   subTitle,
   productImg,
   productPrice,
+  brandLogo,
+  productId,
   smsTpCd,
   smsText,
   prdtId,
@@ -567,11 +570,16 @@ export default function MobileSendPopUp({
             hasText
             spotlightId={mobileSendPopUpSpotlightId}
           >
-            <div className={css.header}>
+            <div className={css.titleHead}>
+              <div className={css.titleHead__text}>
+                {title || MSG_SEND_LINK}
+              </div>
+            </div>
+            <div className={css.container__header}>
               {productImg && (
-                <p className={css.productImg}>
+                <p className={css.container__header__productImg}>
                   <CustomImage
-                    className={css.img}
+                    className={css.container__header__productImg__img}
                     src={productImg}
                     fallbackSrc={defaultImage}
                   />
@@ -579,27 +587,41 @@ export default function MobileSendPopUp({
               )}
               <div
                 className={classNames(
-                  css.textBox,
-                  !productImg && css.textBoxOnly
+                  css.container__header__textBox,
+                  !productImg && css.container__header__textBoxOnly
                 )}
               >
-                {title && <div className={css.smsTitle}>{title}</div>}
+                <div className={css.headerTopRow}>
+                  {brandLogo && (
+                    <img
+                      className={css.headerTopRow__brandLogo}
+                      src={brandLogo}
+                      alt="Brand"
+                    />
+                  )}
+                  {productId && (
+                    <div className={css.headerTopRow__productId}>
+                      ID: {productId}
+                    </div>
+                  )}
+                </div>
                 {subTitle && (
                   <div
                     className={classNames(
-                      css.subTitle,
-                      !productImg && css.subTitleOnly
+                      css.container__header__subTitle,
+                      !productImg && css.container__header__subTitleOnly
                     )}
                   >
                     {subTitle}
                   </div>
                 )}
                 {productPrice && (
-                  <div className={css.price}>{productPrice}</div>
+                  <div className={css.container__header__price}>{productPrice}</div>
                 )}
               </div>
             </div>
-            <div className={css.smsArea}>
+            <div className={css.container__smsArea}>
+              {/* 🔄 [BACKUP] 기존 전화번호 입력 영역 - 원상복구용
               <div className={css.smsContainer}>
                 <InputContainer className={css.smsNumLayer}>
                   <SpottableComponent
@@ -638,8 +660,34 @@ export default function MobileSendPopUp({
                   />
                 )}
               </div>
+              */}
+
+              {/* 🆕 [NEW] PhoneInputSection + instruction 좌우 배치 */}
+              <div className={css.container__smsArea__smsContainer}>
+                <PhoneInputSection
+                  mobileNumber={mobileNumber}
+                  deviceCountryCode={deviceCountryCode}
+                  onInputClick={handleInputClick}
+                  onKeypadClick={numKeypadClicked}
+                  spotlightId={mobileSendPopUpSpotlightId}
+                  inputDisabled={inputDisabled}
+                />
+              </div>
+              <div className={css.container__smsArea__instruction}>
+                {deviceCountryCode && (
+                  <div className={deviceCountryCode === "RU" ? css.instructionRu : ""}>
+                    <div>
+                      {$L("By clicking Agree and Send button, I agree that LGE may collect and store my cell phone number to send text messages as I requested, for data analysis and for feature-enhancement purposes.")}
+                    </div>
+                    <div style={{ height: "16px" }}></div>
+                    <div>
+                      {$L("By entering my cell phone number, I agree to receive messages from LGE with information on how to purchase the product I selected. Message and data rates may apply.")}
+                    </div>
+                  </div>
+                )}
+              </div>              
             </div>
-            <Container className={css.btnContainer}>
+            <Container className={css.container__btnContainer}>
               <TButton
                 onClick={handleAgreeSendClick}
                 spotlightId={"agreeAndSend"}