[다국어] 다국어 정리 및 Top Btn style 조정

com.twin.app.shoptime/resources/de/strings.json

@@ -3,7 +3,9 @@
   "Exit Shop Time": "Shop Time verlassen",
   "This is an unsupported country.": "Nicht unterstütztes Land.",
   "Yes": "Ja",
+  "YES": "Ja",
   "No": "Nein",
+  "NO": "Nein",
   "Remove from Favorite": "Aus meiner Favoritenliste entfernt",
   "Add to Favorite": "Zu meiner Favoritenliste hinzugefügt.",
   "View More": "Mehr sehen",
@@ -24,6 +26,7 @@
   "Failed to sent text to {mobileNumber}": "SMS senden an {mobileNumber} fehlgeschlagen",
   "Agree and Send": "Zustimmen und senden",
   "Cancel": "Abbrechen",
+  "CANCEL": "Abbrechen",
   "OK": "OK",
   "SOLD OUT": "Ausverkauft",
   "TOP": "TOP",

com.twin.app.shoptime/resources/en/strings.json

@@ -3,7 +3,9 @@
   "Exit Shop Time": "Exit Shop Time",
   "This is an unsupported country.": "This is an unsupported country.",
   "Yes": "Yes",
+  "YES": "Yes",
   "No": "No",
+  "NO": "No",
   "Remove from Favorite": "Remove from Favorite",
   "Add to Favorite": "Add to Favorite",
   "View More": "View More",
@@ -24,6 +26,7 @@
   "Failed to sent text to {mobileNumber}": "Failed to sent text to {mobileNumber}",
   "Agree and Send": "Agree and Send",
   "Cancel": "Cancel",
+  "CANCEL": "Cancel",
   "OK": "OK",
   "SOLD OUT": "SOLD OUT",
   "TOP": "TOP",

com.twin.app.shoptime/resources/gb/strings.json

@@ -3,7 +3,9 @@
   "Exit Shop Time": "Exit Shop Time",
   "This is an unsupported country.": "This is an unsupported country.",
   "Yes": "Yes",
+  "YES": "Yes",
   "No": "No",
+  "NO": "No",
   "Remove from Favorite": "Remove from Favorite",
   "Add to Favorite": "Add to Favorite",
   "View More": "View More",
@@ -24,6 +26,7 @@
   "Failed to sent text to {mobileNumber}": "Failed to sent text to {mobileNumber}",
   "Agree and Send": "Agree and Send",
   "Cancel": "Cancel",
+  "CANCEL": "Cancel",
   "OK": "OK",
   "SOLD OUT": "SOLD OUT",
   "TOP": "TOP",

com.twin.app.shoptime/resources/ru/strings.json

@@ -3,7 +3,9 @@
   "Exit Shop Time": "Выйти из Shop on TV",
   "This is an unsupported country.": "Сервис не поддерживается в данной стране.",
   "Yes": "Да",
+  "YES": "Да",
   "No": "Нет",
+  "NO": "Нет",
   "Remove from Favorite": "Удалить из Избранного",
   "Add to Favorite": "Добавить в Избранное",
   "View More": "Смотреть ещё",
@@ -24,6 +26,7 @@
   "Failed to sent text to {mobileNumber}": "Ошибка при отправке сообщения на {mobileNumber}",
   "Agree and Send": "Согласен и отправить",
   "Cancel": "Отмена",
+  "CANCEL": "Отмена",
   "OK": "OK",
   "SOLD OUT": "Продано",
   "TOP": "ВВЕРХ",

com.twin.app.shoptime/src/components/TButton/TButton.jsx

@@ -131,7 +131,7 @@ function TButtonBase({
       aria-hidden={ariaHidden}
       spotlightDisabled={spotlightDisabled}
     >
-      {type === "topButton" && <div className={css.topText}>TOP</div>}
+      {type === "topButton" && <div className={css.topText}>{$L("TOP")}</div>}
       {type !== "topButton" &&
         (withMarquee ? (
           <Marquee className={css.marquee} marqueeOn="focus">

com.twin.app.shoptime/src/components/TButton/TButton.module.less

@@ -241,19 +241,16 @@
     .size(@w: 120px, @h: 120px);
     border-radius: 100%;
     background-image: url("../../../assets/images/rectangle-639@3x.png");
-    background-position: 44px 31px;
+    background-position: center 31px;
     background-size: 32px 17px;
     background-repeat: no-repeat;
     display: block;
     margin: 60px auto;
     > div.topText {
-      width: 56px;
+      text-align: center;
-      height: 22px;
-      display: inline-block;
-      line-height: normal;
       font-size: 30px;
-      margin-top: 60px;
+      padding-top: 60px;
-      margin-left: 22px;
+      line-height: 1;
     }
   }
 

com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBestSeller/FeaturedBestSeller.jsx

@@ -10,7 +10,7 @@ import css from "./FeaturedBestSeller.module.less";
 import FeaturedBestSellerList from "./FeaturedBestSellerList/FeaturedBestSellerList";
 
 const STRING_CONF = {
-  BEST_SELLER: $L("BEST SELLER"),
+  BEST_SELLER: "BEST SELLER",
 };
 
 const Container = SpotlightContainerDecorator(
@@ -69,7 +69,7 @@ export default memo(function FeaturedBestSeller({
       data-wheel-point
     >
       <SectionTitle
-        title={STRING_CONF.BEST_SELLER}
+        title={$L(STRING_CONF.BEST_SELLER)}
         data-title="best-seller"
         label="best-seller Heading 1"
       />

com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.jsx

@@ -51,16 +51,14 @@ import TodaysDeals from "./TodaysDeals/TodaysDeals";
 import UpComing from "./UpComing/UpComing";
 
 const STRING_CONF = {
-  CANCEL: $L("CANCEL"),
+  CANCEL: "CANCEL",
-  OK: $L("OK"),
+  OK: "OK",
-  YES: $L("YES"),
+  YES: "YES",
-  NO_SHOW_MESSAGE: $L("This show doesn’t exist anymore"),
+  NO_SHOW_MESSAGE: "This show doesn’t exist anymore",
-  REMINDER_ON_OFF_MESSAGE: $L(
+  REMINDER_ON_OFF_MESSAGE:
-    "Reminder Notification is turned off. Select Yes to turn on reminders."
+    "Reminder Notification is turned off. Select Yes to turn on reminders.",
-  ),
+  UPCOMING_TIME_CONFLICT_MESSAGE:
-  UPCOMING_TIME_CONFLICT_MESSAGE: $L(
+    "A Reminder is already set on the selected schedule. Press OK to overwrite the existing Reminder.",
-    "A Reminder is already set on the selected schedule. Press OK to overwrite the existing Reminder."
-  ),
 };
 
 const TEMPLATE_CODE_CONF = {
@@ -151,11 +149,11 @@ const findSelector = (selector, maxAttempts = 5, currentAttempts = 0) => {
 const getMessageByPopupType = (type) => {
   switch (type) {
     case ACTIVE_POPUP.reminderPopup:
-      return STRING_CONF.REMINDER_ON_OFF_MESSAGE;
+      return $L(STRING_CONF.REMINDER_ON_OFF_MESSAGE);
     case ACTIVE_POPUP.timeConflictPopup:
-      return STRING_CONF.UPCOMING_TIME_CONFLICT_MESSAGE;
+      return $L(STRING_CONF.UPCOMING_TIME_CONFLICT_MESSAGE);
     case ACTIVE_POPUP.noShowPopup:
-      return STRING_CONF.NO_SHOW_MESSAGE;
+      return $L(STRING_CONF.NO_SHOW_MESSAGE);
     default:
       return;
   }
@@ -874,11 +872,12 @@ export default function FeaturedBrandsPanel({
         <TPopUp
           button1Text={
             activePopup?.type !== ACTIVE_POPUP.noShowPopup
-              ? STRING_CONF.YES
+              ? $L(STRING_CONF.YES)
-              : STRING_CONF.OK
+              : $L(STRING_CONF.OK)
           }
           button2Text={
-            activePopup?.type !== ACTIVE_POPUP.noShowPopup && STRING_CONF.CANCEL
+            activePopup?.type !== ACTIVE_POPUP.noShowPopup &&
+            $L(STRING_CONF.CANCEL)
           }
           hasButton
           hasText

com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedCategory/FeaturedCategory.jsx

@@ -12,7 +12,7 @@ import FeaturedCategoryNav from "./FeaturedCategoryNav/FeaturedCategoryNav";
 import FeaturedSubCategoryNav from "./FeaturedSubCategoryNav/FeaturedSubCategoryNav";
 
 const STRING_CONF = {
-  CATEGORY: $L("CATEGORY"),
+  CATEGORY: "CATEGORY",
 };
 const Container = SpotlightContainerDecorator(
   { leaveFor: { right: "" }, enterTo: null },
@@ -238,7 +238,7 @@ export default memo(function FeaturedCategory({
       data-wheel-point
     >
       <SectionTitle
-        title={STRING_CONF.CATEGORY}
+        title={$L(STRING_CONF.CATEGORY)}
         data-title="category"
         label="category, Heading 1"
       />

com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedCategory/FeaturedCategoryNav/FeaturedCategoryNav.jsx

@@ -25,7 +25,7 @@ const Container = SpotlightContainerDecorator(
 );
 
 const STRING_CONF = {
-  ALL: $L("ALL"),
+  ALL: "ALL",
 };
 
 export default memo(function FeaturedCategoryNav({
@@ -172,11 +172,7 @@ export default memo(function FeaturedCategoryNav({
         return;
       }
     },
-    [
+    [cursorVisible, handleItemFocus, handleScrollReset]
-      cursorVisible,
-      handleItemFocus,
-      handleScrollReset
-    ]
   );
   const selectedText = !selectedCatCdLv1 ? "Selected " : "";
   const allLabeltext =
@@ -204,7 +200,7 @@ export default memo(function FeaturedCategoryNav({
               type={TYPES.oneDepthCategory}
               ariaLabel={allLabeltext}
             >
-              {STRING_CONF.ALL}
+              {$L(STRING_CONF.ALL)}
             </TButton>
           </li>
           {brandCategoryInfo.map(({ catCdLv1, catNmLv1 }, itemIndex) => (

com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedCategory/FeaturedSubCategoryNav/FeaturedSubCategoryNav.jsx

@@ -21,8 +21,8 @@ const Container = SpotlightContainerDecorator(
 );
 
 const STRING_CONF = {
-  ALL: $L("ALL"),
+  ALL: "ALL",
-  MORE: $L("MORE"),
+  MORE: "MORE",
 };
 
 const MAX_LENGTH = 20;
@@ -156,7 +156,7 @@ export default memo(function FeaturedSubCategoryNav({
               ariaLabel={allLabeltext}
               withMarquee
             >
-              {STRING_CONF.ALL}
+              {$L(STRING_CONF.ALL)}
             </TButton>
           </li>
           {selectedCategoryLv2Infos
@@ -201,7 +201,7 @@ export default memo(function FeaturedSubCategoryNav({
                 onClick={goToSearchPanel}
                 type={TYPES.twoDepthCategory}
               >
-                {STRING_CONF.MORE + " +"}
+                {$L(STRING_CONF.MORE) + " +"}
               </TButton>
             </li>
           )}

com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedCreators/FeaturedCreators.jsx

@@ -11,7 +11,7 @@ import FeaturedCreatorsContents from "./FeaturedCreatorsContents/FeaturedCreator
 import FeaturedCreatorsNav from "./FeaturedCreatorsNav/FeaturedCreatorsNav";
 
 const STRING_CONF = {
-  FEATURED_CREATORS: $L("FEATURED CREATORS"),
+  FEATURED_CREATORS: "FEATURED CREATORS",
 };
 const Container = SpotlightContainerDecorator(
   { leaveFor: { right: "" }, enterTo: null },
@@ -73,7 +73,7 @@ export default memo(function FeaturedCreators({
       data-wheel-point
     >
       <SectionTitle
-        title={STRING_CONF.FEATURED_CREATORS}
+        title={$L(STRING_CONF.FEATURED_CREATORS)}
         data-title="featured-creators"
       />
       <FeaturedCreatorsNav

com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/LiveChannels.jsx

@@ -24,7 +24,7 @@ import LiveChannelsVerticalContents from "./LiveChannelsVerticalContents/LiveCha
 import NoLiveContents from "./NoLiveContents/NoLiveContents";
 
 const STRING_CONF = {
-  LIVE_CHANNELS: $L("LIVE CHANNELS"),
+  LIVE_CHANNELS: "LIVE CHANNELS",
 };
 
 const Container = SpotlightContainerDecorator({ enterTo: null }, "div");
@@ -119,7 +119,7 @@ export default memo(function LiveChannels({
       data-wheel-point
     >
       <SectionTitle
-        title={STRING_CONF.LIVE_CHANNELS}
+        title={$L(STRING_CONF.LIVE_CHANNELS)}
         data-title="live-channels"
         aria-label="LIVE CHANNELS, Heading1"
       />

com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/LiveChannelsErrorContents/LiveChannelsErrorContents.jsx

@@ -5,8 +5,8 @@ import { $L } from "../../../../utils/helperMethods";
 import css from "./LiveChannelsErrorContents.module.less";
 
 const STRING_CONF = {
-  TITLE_FOR_DELAY: $L("An error occurred."),
+  TITLE_FOR_DELAY: "An error occurred.",
-  MESSAGE_FOR_DELAY: $L("Please try again in 30 seconds."),
+  MESSAGE_FOR_DELAY: "Please try again in 30 seconds.",
 };
 
 export default function LiveChannelsErrorContents() {
@@ -18,8 +18,8 @@ export default function LiveChannelsErrorContents() {
           alt="Service is delayed. Please try again in 30 seconds."
         />
       </figure>
-      <h3>{STRING_CONF.TITLE_FOR_DELAY}</h3>
+      <h3>{$L(STRING_CONF.TITLE_FOR_DELAY)}</h3>
-      <p>{STRING_CONF.MESSAGE_FOR_DELAY}</p>
+      <p>{$L(STRING_CONF.MESSAGE_FOR_DELAY)}</p>
     </div>
   );
 }

com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/NoLiveContents/NoLiveCard/NoLiveCard.jsx

@@ -15,10 +15,10 @@ import css from "./NoLiveCard.module.less";
 import { getMyUpcomingAlertShow } from "../../../../../actions/myPageActions";
 
 const STRING_CONF = {
-  RECENTLY_AIRED: $L("Recently Aired"),
+  RECENTLY_AIRED: "Recently Aired",
-  REMOVE_REMINDER: $L("Remove Reminder"),
+  REMOVE_REMINDER: "Remove Reminder",
-  SET_REMINDER: $L("Set a Reminder"),
+  SET_REMINDER: "Set a Reminder",
-  WITH_HOST: $L("With Host"),
+  WITH_HOST: "With Host",
 };
 
 export default memo(function NoLiveCard({
@@ -152,7 +152,7 @@ export default memo(function NoLiveCard({
         />
         <time>{convertToTimeFormat(strtDt, true)}</time>
         <h3>{showNm}</h3>
-        <p>{hstNm ? STRING_CONF.WITH_HOST + " " + hstNm : ""}</p>
+        <p>{hstNm ? $L(STRING_CONF.WITH_HOST) + " " + hstNm : ""}</p>
         <div>
           <TButton
             className={css.tButton}
@@ -161,8 +161,8 @@ export default memo(function NoLiveCard({
             size={null}
           >
             {isReserved
-              ? STRING_CONF.REMOVE_REMINDER
+              ? $L(STRING_CONF.REMOVE_REMINDER)
-              : STRING_CONF.SET_REMINDER}
+              : $L(STRING_CONF.SET_REMINDER)}
           </TButton>
           <TButton
             className={css.tButton}
@@ -170,7 +170,7 @@ export default memo(function NoLiveCard({
             onFocus={handleFocus}
             size={null}
           >
-            {STRING_CONF.RECENTLY_AIRED}
+            {$L(STRING_CONF.RECENTLY_AIRED)}
           </TButton>
         </div>
       </div>

com.twin.app.shoptime/src/views/FeaturedBrandsPanel/QuickMenu/QuickMenuItem/QuickMenuItem.jsx

@@ -16,7 +16,7 @@ import css from "./QuickMenuItem.module.less";
 const SpottableComponent = Spottable("li");
 
 const STRING_CONF = {
-  NEW: $L("NEW"),
+  NEW: "NEW",
 };
 
 export default memo(function QuickMenuItem({
@@ -99,7 +99,7 @@ export default memo(function QuickMenuItem({
         fallbackSrc={IcPartnersDefault}
         ariaLabel={logoImgAlt}
       />
-      {newFlag === "Y" && <div>{STRING_CONF.NEW}</div>}
+      {newFlag === "Y" && <div>{$L(STRING_CONF.NEW)}</div>}
     </SpottableComponent>
   );
 });

com.twin.app.shoptime/src/views/FeaturedBrandsPanel/QuickMenu/QuickMenuItem/QuickMenuItem.module.less

@@ -16,12 +16,13 @@
   > div {
     .position(@position: absolute, @top:6px, @right: 0);
     z-index: 10;
-    .size(@w: 60px, @h: 30px);
+    padding: 6px;
     border-radius: 6px;
     background-color: #f00;
     .font(@fontFamily: @arialFontBold, @fontSize: 18px);
     color: @COLOR_WHITE;
     text-align: center;
+    line-height: 1;
   }
 
   &:focus {

com.twin.app.shoptime/src/views/FeaturedBrandsPanel/RecommendedShows/RecommendedShows.jsx

@@ -13,7 +13,7 @@ import RecommendedShowsContents from "./RecommendedShowsContents/RecommendedShow
 import RecommendedShowsNav from "./RecommendedShowsNav/RecommendedShowsNav";
 
 const STRING_CONF = {
-  RECOMMENDED_SHOWS: $L("RECOMMENDED SHOWS"),
+  RECOMMENDED_SHOWS: "RECOMMENDED SHOWS",
 };
 
 const Container = SpotlightContainerDecorator(
@@ -94,7 +94,7 @@ export default memo(function RecommendedShows({
       data-wheel-point
     >
       <SectionTitle
-        title={STRING_CONF.RECOMMENDED_SHOWS}
+        title={$L(STRING_CONF.RECOMMENDED_SHOWS)}
         data-title="recommended-shows"
         aria-label="RECOMMENDED SHOWS, Heading1"
       />

com.twin.app.shoptime/src/views/FeaturedBrandsPanel/Series/Series.jsx

@@ -11,7 +11,7 @@ import SeriesContents from "./SeriesContents/SeriesContents";
 import SeriesNav from "./SeriesNav/SeriesNav";
 
 const STRING_CONF = {
-  SERIES: $L("SERIES"),
+  SERIES: "SERIES",
 };
 
 const Container = SpotlightContainerDecorator(
@@ -83,7 +83,7 @@ export default memo(function Series({
       spotlightId={spotlightId}
       data-wheel-point
     >
-      <SectionTitle title={STRING_CONF.SERIES} data-title="series" />
+      <SectionTitle title={$L(STRING_CONF.SERIES)} data-title="series" />
       <SeriesNav
         brandSeriesInfo={brandSeriesInfo}
         handleItemFocus={_handleItemFocus}

com.twin.app.shoptime/src/views/FeaturedBrandsPanel/Series/SeriesNav/SeriesNav.jsx

@@ -25,7 +25,7 @@ const Container = SpotlightContainerDecorator(
 );
 
 const STRING_CONF = {
-  ALL: $L("ALL"),
+  ALL: "ALL",
 };
 
 export default memo(function SeriesNav({
@@ -168,11 +168,7 @@ export default memo(function SeriesNav({
         return;
       }
     },
-    [
+    [cursorVisible, handleItemFocus, handleScrollReset]
-      cursorVisible,
-      handleItemFocus,
-      handleScrollReset
-    ]
   );
   const selectedText = !selectedSeriesId ? "Selected " : "";
   const allLabeltext =
@@ -199,7 +195,7 @@ export default memo(function SeriesNav({
               type={TYPES.oneDepthCategory}
               ariaLabel={allLabeltext}
             >
-              {STRING_CONF.ALL}
+              {$L(STRING_CONF.ALL)}
             </TButton>
           </li>
           {brandSeriesInfo.map(({ seriesId, seriesNm }, index) => (

com.twin.app.shoptime/src/views/FeaturedBrandsPanel/Showroom/Showroom.jsx

@@ -13,7 +13,7 @@ import ShowroomContents from "./ShowroomContents/ShowroomContents";
 import ShowroomNav from "./ShowroomNav/ShowroomNav";
 
 const STRING_CONF = {
-  SHOWROOM: $L("SHOWROOM"),
+  SHOWROOM: "SHOWROOM",
 };
 
 const Container = SpotlightContainerDecorator(
@@ -89,7 +89,7 @@ export default memo(function Showroom({
       spotlightId={spotlightId}
       data-wheel-point
     >
-      <SectionTitle title={STRING_CONF.SHOWROOM} data-title="showroom" />
+      <SectionTitle title={$L(STRING_CONF.SHOWROOM)} data-title="showroom" />
       <ShowroomNav
         brandShowroomInfo={brandShowroomInfo}
         handleItemFocus={_handleItemFocus}

com.twin.app.shoptime/src/views/FeaturedBrandsPanel/TodaysDeals/TodaysDeals.jsx

@@ -15,7 +15,7 @@ const Container = SpotlightContainerDecorator(
 );
 
 const STRING_CONF = {
-  TODAYS_DEALS: $L("TODAY'S DEALS"),
+  TODAYS_DEALS: "TODAY'S DEALS",
 };
 
 export default memo(function TodaysDeals({
@@ -65,7 +65,7 @@ export default memo(function TodaysDeals({
       data-wheel-point
     >
       <SectionTitle
-        title={STRING_CONF.TODAYS_DEALS}
+        title={$L(STRING_CONF.TODAYS_DEALS)}
         data-title="today's-deals"
       />
       <TodaysDealsCard

com.twin.app.shoptime/src/views/FeaturedBrandsPanel/UpComing/UpComing.jsx

@@ -15,7 +15,7 @@ const Container = SpotlightContainerDecorator(
 );
 
 const STRING_CONF = {
-  UPCOMING: $L("UPCOMING"),
+  UPCOMING: "UPCOMING",
 };
 
 export default memo(function UpComing({
@@ -65,7 +65,7 @@ export default memo(function UpComing({
       data-wheel-point
     >
       <SectionTitle
-        title={STRING_CONF.UPCOMING}
+        title={$L(STRING_CONF.UPCOMING)}
         data-title="upcoming"
         aria-label="upcoming heading 1"
       />

com.twin.app.shoptime/src/views/FeaturedBrandsPanel/UpComing/UpComingList/UpComingCard/UpComingCard.jsx

@@ -12,13 +12,12 @@ import css from "./UpComingCard.module.less";
 const SpottableComponent = Spottable("div");
 
 const STRING_CONF = {
-  REMINDER_SETTED: $L("Reminder Setted"),
+  REMINDER_SETTED: "Reminder Setted",
-  REMOVE_REMINDER: $L("Remove Reminder"),
+  REMOVE_REMINDER: "Remove Reminder",
-  SET_REMINDER: $L("Set a Reminder"),
+  SET_REMINDER: "Set a Reminder",
-  TURNED_OFF_MESSAGE: $L(
+  TURNED_OFF_MESSAGE:
-    "Reminder Notification is turned off. Select Yes to turn on reminders."
+    "Reminder Notification is turned off. Select Yes to turn on reminders.",
-  ),
+  WITH_HOST: "With Host",
-  WITH_HOST: $L("With Host"),
 };
 
 export default memo(function UpComingCard({
@@ -79,17 +78,19 @@ export default memo(function UpComingCard({
             src={isReserved ? IcUpcomingsReserved : IcUpcomingsNormal}
             alt=""
           />
-          {isReserved && <span>{STRING_CONF.REMINDER_SETTED}</span>}
+          {isReserved && <span>{$L(STRING_CONF.REMINDER_SETTED)}</span>}
         </div>
       )}
 
       <time>{convertToTimeFormat(strtDt, true)}</time>
       <h3>{showNm}</h3>
-      {hstNm && <p>{STRING_CONF.WITH_HOST + " " + hstNm}</p>}
+      {hstNm && <p>{$L(STRING_CONF.WITH_HOST) + " " + hstNm}</p>}
 
       {isFocused && (
         <button type="button" aria-label={buttonText}>
-          {isReserved ? STRING_CONF.REMOVE_REMINDER : STRING_CONF.SET_REMINDER}
+          {isReserved
+            ? $L(STRING_CONF.REMOVE_REMINDER)
+            : $L(STRING_CONF.SET_REMINDER)}
         </button>
       )}
     </SpottableComponent>

com.twin.app.shoptime/src/views/TrendingNowPanel/TrendingNowPanel.jsx

@@ -33,8 +33,8 @@ const Container = SpotlightContainerDecorator(
   "div"
 );
 const STRING_CONF = {
-  POPULAR_SHOW: $L("POPULAR SHOW"),
+  POPULAR_SHOW: "POPULAR SHOW",
-  BEST_SELLER: $L("BEST SELLER"),
+  BEST_SELLER: "BEST SELLER",
 };
 export default function TrendingNowPanel({ panelInfo, spotlightId }) {
   const { sendLogGNB } = useLogService();
@@ -270,7 +270,7 @@ export default function TrendingNowPanel({ panelInfo, spotlightId }) {
                 data-wheel-point={true}
               >
                 <SectionTitle
-                  title={STRING_CONF.POPULAR_SHOW}
+                  title={$L(STRING_CONF.POPULAR_SHOW)}
                   label="POPULAR SHOW, Heading1"
                 />
                 <PopularShowIndicator
@@ -288,7 +288,7 @@ export default function TrendingNowPanel({ panelInfo, spotlightId }) {
                 data-wheel-point={true}
               >
                 <SectionTitle
-                  title={STRING_CONF.BEST_SELLER}
+                  title={$L(STRING_CONF.BEST_SELLER)}
                   data-title-index="TNBestSellerTitle"
                 />
                 <div className={css.itemList}>