[detail] 모바일 샌드 팝업 스타일 수정#1

- 피그마에 맞게 수정(단 팝업 크기 자체의 문제가 있어 이부분 처리 필요) - 에러관련 부분은 미처리.
2025-10-17 16:45:22 +09:00
parent 2a799c5e8a
commit 58641c1bac
4 changed files with 131 additions and 105 deletions
--- a/com.twin.app.shoptime/src/components/MobileSend/MobileSendPopUp.jsx
+++ b/com.twin.app.shoptime/src/components/MobileSend/MobileSendPopUp.jsx
@@ -4,61 +4,72 @@ import React, {
  useMemo,
  useRef,
  useState,
-} from "react";
+} from 'react';

-import classNames from "classnames";
+import classNames from 'classnames';
 import {
  AsYouTypeFormatter,
  PhoneNumberFormat,
  PhoneNumberUtil,
-} from "google-libphonenumber";
-import { useDispatch, useSelector } from "react-redux";
+} from 'google-libphonenumber';
+import {
+  useDispatch,
+  useSelector,
+} from 'react-redux';

-import { off, on } from "@enact/core/dispatcher";
-import spotlight, { Spotlight } from "@enact/spotlight";
-import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator";
-import { Spottable } from "@enact/spotlight/Spottable";
+import {
+  off,
+  on,
+} from '@enact/core/dispatcher';
+import spotlight, { Spotlight } from '@enact/spotlight';
+import {
+  SpotlightContainerDecorator,
+} from '@enact/spotlight/SpotlightContainerDecorator';
+import { Spottable } from '@enact/spotlight/Spottable';

-import defaultImage from "../../../assets/images/img-thumb-empty-144@3x.png";
-import { types } from "../../actions/actionTypes";
-import { clearSMS, sendSms } from "../../actions/appDataActions";
+import defaultImage from '../../../assets/images/img-thumb-empty-144@3x.png';
+import { types } from '../../actions/actionTypes';
+import {
+  clearSMS,
+  sendSms,
+} from '../../actions/appDataActions';
 import {
  changeLocalSettings,
  setHidePopup,
  setShowPopup,
-} from "../../actions/commonActions";
+} from '../../actions/commonActions';
 import {
  clearRegisterDeviceInfo,
  getDeviceAdditionInfo,
  registerDeviceInfo,
-} from "../../actions/deviceActions";
+} from '../../actions/deviceActions';
 import {
  clearCurationCoupon,
  setEventIssueReq,
-} from "../../actions/eventActions";
+} from '../../actions/eventActions';
 import {
  sendLogShopByMobile,
  sendLogTotalRecommend,
-} from "../../actions/logActions";
+} from '../../actions/logActions';
 import {
  ACTIVE_POPUP,
  LOG_CONTEXT_NAME,
  LOG_MESSAGE_ID,
  LOG_TP_NO,
-} from "../../utils/Config";
+} from '../../utils/Config';
 import {
  $L,
  decryptPhoneNumber,
  encryptPhoneNumber,
  formatLocalDateTime,
-} from "../../utils/helperMethods";
-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";
+} from '../../utils/helperMethods';
+import CustomImage from '../CustomImage/CustomImage';
+import TButton from '../TButton/TButton';
+import TPopUp from '../TPopUp/TPopUp';
+import HistoryPhoneNumber from './HistoryPhoneNumber/HistoryPhoneNumber';
+import css from './MobileSendPopUp.module.less';
+import PhoneInputSection from './PhoneInputSection';
+import SMSNumKeyPad from './SMSNumKeyPad';

 const SECRET_KEY = "fy7BTKuM9eeTQqEC9sF3Iw5qG43Aaip";

@@ -616,13 +627,15 @@ export default function MobileSendPopUp({
                  </div>
                )}
                {productPrice && (
-                  <div className={css.container__header__price}>{productPrice}</div>
+                  <div className={css.container__header__price}>
+                    {productPrice}
+                  </div>
                )}
              </div>
            </div>
            <div className={css.container__smsArea}>
-              {/* 🔄 [BACKUP] 기존 전화번호 입력 영역 - 원상복구용
-              <div className={css.smsContainer}>
+              {/* 🔄 [BACKUP] 기존 전화번호 입력 영역 - 원상복구용 */}
+              <div className={css.container__smsArea__smsContainer}>
                <InputContainer className={css.smsNumLayer}>
                  <SpottableComponent
                    className={css.inputNum}
@@ -635,8 +648,8 @@ export default function MobileSendPopUp({
                    <span>{mobileNumber}</span>
                  </SpottableComponent>
                </InputContainer>
-
-                <Container>
+                <div className={css.errTxt}></div>
+                <Container className={css.flex}>
                  {keyPadOff && recentSentNumber.length > 0 ? (
                    <HistoryPhoneNumber
                      handleClickSelect={handleClickSelect}
@@ -660,10 +673,9 @@ export default function MobileSendPopUp({
                  />
                )}
              </div>
-              */}

              {/* 🆕 [NEW] PhoneInputSection + instruction 좌우 배치 */}
-              <div className={css.container__smsArea__smsContainer}>
+              {/* <div className={css.container__smsArea__smsContainer}>
                <PhoneInputSection
                  mobileNumber={mobileNumber}
                  deviceCountryCode={deviceCountryCode}
@@ -685,7 +697,7 @@ export default function MobileSendPopUp({
                    </div>
                  </div>
                )}
-              </div>              
+              </div>               */}
            </div>
            <Container className={css.container__btnContainer}>
              <TButton
--- a/com.twin.app.shoptime/src/components/MobileSend/MobileSendPopUp.module.less
+++ b/com.twin.app.shoptime/src/components/MobileSend/MobileSendPopUp.module.less
@@ -118,31 +118,42 @@
    }
  }
  .container__smsArea {
-    border-top: 1px solid #cccccc;
    display: flex;
    flex-direction: row; // 가로 배치
    align-items: flex-start;
    margin: 10px 30px 0 30px; // 위 10px, 좌우 30px
-    width: calc(100% - 60px); // 좌우 마진 제외한 전체 너비
-    height: 412px; // PhoneInputSection 높이와 동일
+    width: 1060px; // 좌우 마진 제외한 전체 너비
+    height: 422px; // PhoneInputSection 높이와 동일
    flex-shrink: 0; // 크기 고정
+    justify-content: center;

    .container__smsArea__smsContainer {
-      flex: 1; // 남은 공간을 모두 차지하도록
-      min-width: 400px; // 최소 너비 보장
-      max-width: 639.6px; // 최대 너비 제한
+      flex: none; // 남은 공간을 모두 차지하도록
+      // min-width: 400px; // 최소 너비 보장
+      // max-width: 639.6px; // 최대 너비 제한
+      width: 492.5px;
+      height: 412px;
      margin-right: 15px; // 오른쪽 15px 마진
+      background: rgba(87, 94, 102, 0.95);
+      border-radius: 12px;
+      padding: 30px;
+      .smsNumLayer {
+        width: 432.5px;
+        height: 54px;
+        background: rgba(230, 230, 230, 0.2);
+        border-radius: 6px;
+      }

-      .container__smsArea__smsContainer__inputNum {
+      .inputNum {
        position: relative;
-        padding: 18px 5px 18px 20px;
-        width: 438px;
-        .border-solid(@size:1px,#cccccc);
-        height: 68px;
+        line-height: 54px;
+        width: 432.5px;
+        height: 54px;
        cursor: text;
        font-weight: normal;
        font-size: 28px;
-
+        color: #e6e6e6;
+        text-align: center;
        &.rucInput {
          margin-right: 8px;
        }
@@ -154,11 +165,22 @@
        }
      }
    }
-
-    .container__smsArea__instruction {
-      width: 345.5px; // 고정 너비
+    .errTxt {
+      width: 100%;
+      height: 26px;
+      margin: 30px 0;
+      text-align: center;
+      font-size: 22px;
+      color: #fb5656;
+    }
+    .flex {
+      display: flex;
+      justify-content: center;
+    }
+    .instruction {
+      width: 492.5px; // 고정 너비
      height: 412px; // PhoneInputSection과 동일한 높이
-      padding: 10px 30px 0 30px; // 위 10px, 좌우 30px, 아래 0
+      padding: 30px;
      background: #f8f8f8;
      border-radius: 12px;
      display: flex;
@@ -166,30 +188,10 @@
      align-items: flex-start;
      flex-shrink: 0; // 크기 고정

-      > div {
-        flex: 1;
-        align-self: stretch;
+      > span {
        color: #808080;
-        font-size: 20px; // 피그마 스펙대로 복원
-        font-family: "LG Smart UI";
-        font-weight: 400;
-        line-height: 24px; // 피그마 스펙대로 복원
-        word-wrap: break-word;
-        display: flex;
-        flex-direction: column;
-        justify-content: flex-start;
-        align-items: flex-start;
-        overflow: hidden; // 넘치는 내용 숨김
-
-        &.instructionRu {
-          font-size: 18px; // 피그마 스펙대로 복원
-          line-height: 22px;
-        }
-
-        > div {
-          word-wrap: break-word;
-          overflow-wrap: break-word;
-        }
+        font-size: 20px;
+        line-height: 24px;
      }
    }
  }
--- a/com.twin.app.shoptime/src/components/MobileSend/SMSNumKeyPad.jsx
+++ b/com.twin.app.shoptime/src/components/MobileSend/SMSNumKeyPad.jsx
@@ -1,12 +1,14 @@
-import React, { useCallback } from "react";
+import React, { useCallback } from 'react';

-import classNames from "classnames";
+import classNames from 'classnames';

-import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator";
-import Spottable from "@enact/spotlight/Spottable";
+import {
+  SpotlightContainerDecorator,
+} from '@enact/spotlight/SpotlightContainerDecorator';
+import Spottable from '@enact/spotlight/Spottable';

-import { $L } from "../../utils/helperMethods";
-import css from "./SMSNumKeyPad.module.less";
+import { $L } from '../../utils/helperMethods';
+import css from './SMSNumKeyPad.module.less';

 const Container = SpotlightContainerDecorator(
  { defaultElement: `[data-spotlight-id="keypad-number-1"]` },
@@ -42,10 +44,12 @@ export default function SMSNumKeyPad({ onKeyDown }) {
    <Container className={css.container}>
      {[...Array(9).keys()].map((num, idx) => renderButton(num + 1, idx))}
      <SpottableComponent
-        className={classNames(css.btn, css.btnDelete)}
-        onClick={_onKeyDown("backspace")}
-        aria-label="Delete Key"
-      />
+        className={classNames(css.btn, css.btnBack)}
+        onClick={_onKeyDown("clear")}
+        aria-label="Clear Key"
+      >
+        {$L("Clear")}
+      </SpottableComponent>
      <SpottableComponent
        className={css.btn}
        onClick={_onKeyDown(0)}
@@ -54,12 +58,10 @@ export default function SMSNumKeyPad({ onKeyDown }) {
        0
      </SpottableComponent>
      <SpottableComponent
-        className={classNames(css.btn, css.btnBack)}
-        onClick={_onKeyDown("clear")}
-        aria-label="Clear Key"
-      >
-        {$L("Clear")}
-      </SpottableComponent>
+        className={classNames(css.btn, css.btnDelete)}
+        onClick={_onKeyDown("backspace")}
+        aria-label="Delete Key"
+      />
    </Container>
  );
 }
--- a/com.twin.app.shoptime/src/components/MobileSend/SMSNumKeyPad.module.less
+++ b/com.twin.app.shoptime/src/components/MobileSend/SMSNumKeyPad.module.less
@@ -4,38 +4,48 @@
 .container {
  display: flex;
  flex-wrap: wrap;
-  .numInput {
-    padding: 18px 5px 18px 20px;
-    width: 437px;
-    .border-solid(@size:1px,#cccccc);
-    height: 100%;
-    cursor: text;
-    font-weight: normal;
-    font-size: 28px;
-  }
-  width: 441px;
+  width: 202.5px;
+  height: 218px;
+  justify-content: end;
+  align-items: center;
+  // .numInput {
+  //   padding: 18px 5px 18px 20px;
+  //   width: 437px;
+  //   .border-solid(@size:1px,#cccccc);
+  //   height: 100%;
+  //   cursor: text;
+  //   font-weight: normal;
+  //   font-size: 28px;
+  // }
+  // width: 441px;
  .btn {
    .flex();
    outline: none;
-    width: 145px;
-    height: 70px;
-    margin: 0 1px 1px 0;
-    background-color: #434040;
+    width: 54.5px;
+    height: 54.5px;
+    // margin: 0 1px 1px 0;
+    &:nth-child(3n + 2) {
+      margin: 0px 19px;
+    }
    color: #ffffff;
-    font-size: 34px;
-    letter-spacing: -0.5px;
+    font-size: 27px;
    text-align: center;
    &:nth-child(3n + 3) {
      margin: 0 0 1px 0;
    }
+    &.btnBack {
+      font-size: 18px;
+      font-weight: 600;
+    }
    &.btnDelete {
      background-image: url("../../../assets//images/deltxt.png");
      .imgElement(37px,27px,center,center);
    }

    &:focus {
-      background-color: @PRIMARY_COLOR_RED;
-      color: @COLOR_WHITE;
+      background-color: #e6e6e6;
+      color: #4c5059;
+      border-radius: 6px;
    }
  }
 }