From 1d457588552e351d6d293456797b4025eb742d66 Mon Sep 17 00:00:00 2001 From: Heeryong Kang Date: Fri, 16 Aug 2024 13:57:34 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20i18next=20=EB=8C=80=EC=8B=A0=20react-i1?= =?UTF-8?q?8next=20=EC=82=AC=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/image-source/format-source-url.ts | 9 -------- .../src/image-source/image-source.tsx | 7 ++++-- .../poi-list-elements/carousel-element.tsx | 5 ++-- .../compact-poi-list-element.tsx | 5 ++-- .../src/poi-list-elements/get-type-names.ts | 17 -------------- .../src/poi-list-elements/use-type-name.ts | 19 +++++++++++++++ .../src/public-header/categories.ts | 23 +++++++++++-------- .../src/public-header/public-header.tsx | 12 +++++----- .../src/elements/tna/product.tsx | 4 ++-- .../{helpers.ts => use-generate-coupon.ts} | 6 ++--- packages/triple-document/src/index.ts | 2 +- 11 files changed, 55 insertions(+), 54 deletions(-) delete mode 100644 packages/tds-widget/src/image-source/format-source-url.ts delete mode 100644 packages/tds-widget/src/poi-list-elements/get-type-names.ts create mode 100644 packages/tds-widget/src/poi-list-elements/use-type-name.ts rename packages/triple-document/src/elements/tna/{helpers.ts => use-generate-coupon.ts} (88%) diff --git a/packages/tds-widget/src/image-source/format-source-url.ts b/packages/tds-widget/src/image-source/format-source-url.ts deleted file mode 100644 index b5ff289593..0000000000 --- a/packages/tds-widget/src/image-source/format-source-url.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { t } from 'i18next' - -export default function formatSourceUrl(url: string) { - const httpsSchemeRemovedUrl = url.replace(/^https?:\/\//, '') - return t('출처 {{httpsSchemeRemovedUrl}}', { - ns: 'triple-frontend', - httpsSchemeRemovedUrl, - }) -} diff --git a/packages/tds-widget/src/image-source/image-source.tsx b/packages/tds-widget/src/image-source/image-source.tsx index b5d74fc3cf..5dc29d06b0 100644 --- a/packages/tds-widget/src/image-source/image-source.tsx +++ b/packages/tds-widget/src/image-source/image-source.tsx @@ -1,13 +1,16 @@ -import formatSourceUrl from './format-source-url' +import { useTranslation } from 'react-i18next' export interface ImageSourceProps { sourceUrl?: string } export function ImageSource({ sourceUrl }: ImageSourceProps) { + const { t } = useTranslation('triple-frontend') + if (!sourceUrl) { return null } - return <>{formatSourceUrl(sourceUrl)} + const httpsSchemeRemovedUrl = sourceUrl.replace(/^https?:\/\//, '') + return <>{t('출처 {{httpsSchemeRemovedUrl}}', { httpsSchemeRemovedUrl })} } diff --git a/packages/tds-widget/src/poi-list-elements/carousel-element.tsx b/packages/tds-widget/src/poi-list-elements/carousel-element.tsx index 3762b78b74..8bd996c46a 100644 --- a/packages/tds-widget/src/poi-list-elements/carousel-element.tsx +++ b/packages/tds-widget/src/poi-list-elements/carousel-element.tsx @@ -11,7 +11,7 @@ import { FrameRatioAndSizes, GuestModeType } from '@titicaca/type-definitions' import { OverlayScrapButton } from '../scrap-button' import { POI_IMAGE_PLACEHOLDERS } from './constants' -import { getTypeNames } from './get-type-names' +import { useTypeName } from './use-type-name' import { PoiListElementBaseProps, ActionButtonElement, @@ -47,6 +47,7 @@ export function PoiCarouselElement({ optimized?: boolean guestMode?: GuestModeType }) { + const typeName = useTypeName(type) if (!poi) { return null } @@ -100,7 +101,7 @@ export function PoiCarouselElement({ {name} - {description || getTypeNames(type)} + {description || typeName} {regionName diff --git a/packages/tds-widget/src/poi-list-elements/compact-poi-list-element.tsx b/packages/tds-widget/src/poi-list-elements/compact-poi-list-element.tsx index 3ffaa407d0..1de438ee2e 100644 --- a/packages/tds-widget/src/poi-list-elements/compact-poi-list-element.tsx +++ b/packages/tds-widget/src/poi-list-elements/compact-poi-list-element.tsx @@ -14,7 +14,7 @@ import { ActionButtonElement, PoiListElementType, } from './types' -import { getTypeNames } from './get-type-names' +import { useTypeName } from './use-type-name' interface CompactPoiListElementBaseProps extends PoiListElementBaseProps { @@ -48,6 +48,7 @@ export function CompactPoiListElement({ }: CompactPoiListElementProps) { const [actionButtonWidth, setActionButtonWidth] = useState(0) const actionButtonRef = useRef(null) + const typeName = useTypeName(type) useEffect(() => { if (actionButtonRef && actionButtonRef.current) { @@ -97,7 +98,7 @@ export function CompactPoiListElement({ {[ - getTypeNames(type), + typeName, regionName ? areas?.[0]?.name ? `${regionName}(${areas?.[0]?.name})` diff --git a/packages/tds-widget/src/poi-list-elements/get-type-names.ts b/packages/tds-widget/src/poi-list-elements/get-type-names.ts deleted file mode 100644 index 1cd7be5370..0000000000 --- a/packages/tds-widget/src/poi-list-elements/get-type-names.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { t } from 'i18next' - -import { PoiListElementType } from './types' - -export function getTypeNames(type: PoiListElementType['type']) { - switch (type) { - case 'attraction': { - return t('관광명소', { ns: 'triple-frontend' }) - } - case 'hotel': { - return t('호텔', { ns: 'triple-frontend' }) - } - case 'restaurant': { - return t('음식점', { ns: 'triple-frontend' }) - } - } -} diff --git a/packages/tds-widget/src/poi-list-elements/use-type-name.ts b/packages/tds-widget/src/poi-list-elements/use-type-name.ts new file mode 100644 index 0000000000..33c4fe8e4b --- /dev/null +++ b/packages/tds-widget/src/poi-list-elements/use-type-name.ts @@ -0,0 +1,19 @@ +import { useTranslation } from 'react-i18next' + +import { PoiListElementType } from './types' + +export function useTypeName(type: PoiListElementType['type']) { + const { t } = useTranslation('triple-frontend') + + switch (type) { + case 'attraction': { + return t('관광명소') + } + case 'hotel': { + return t('호텔') + } + case 'restaurant': { + return t('음식점') + } + } +} diff --git a/packages/tds-widget/src/public-header/categories.ts b/packages/tds-widget/src/public-header/categories.ts index dc72804976..9c78cc7f3d 100644 --- a/packages/tds-widget/src/public-header/categories.ts +++ b/packages/tds-widget/src/public-header/categories.ts @@ -1,4 +1,4 @@ -import { t } from 'i18next' +import { useTranslation } from 'react-i18next' import type { Category } from './types' @@ -15,34 +15,37 @@ export function getCategoryHref(category?: Category) { } } -export function getCategoryTitle(category?: Category) { +export function useCategoryTitle(category?: Category) { + const { t } = useTranslation('triple-frontend') switch (category) { case 'air': - return t('Triple 항공 홈', { ns: 'triple-frontend' }) + return t('Triple 항공 홈') case 'hotels': - return t('Triple 숙소 홈', { ns: 'triple-frontend' }) + return t('Triple 숙소 홈') case 'tna': - return t('Triple 투어 티켓 홈', { ns: 'triple-frontend' }) + return t('Triple 투어 티켓 홈') default: - return t('Triple 홈', { ns: 'triple-frontend' }) + return t('Triple 홈') } } -export function getCategoryImageProps(category?: Category) { +export function useCategoryImageProps(category?: Category) { + const { t } = useTranslation('triple-frontend') + switch (category) { case 'air': return { - alt: t('항공', { ns: 'triple-frontend' }), + alt: t('항공'), src: 'https://assets.triple.guide/images/img_intro_logo_air.svg', } case 'hotels': return { - alt: t('숙소', { ns: 'triple-frontend' }), + alt: t('숙소'), src: 'https://assets.triple.guide/images/img_intro_logo_hotels.svg', } case 'tna': return { - alt: t('투어 티켓', { ns: 'triple-frontend' }), + alt: t('투어 티켓'), src: 'https://assets.triple.guide/images/img_intro_logo_tna.svg', } default: diff --git a/packages/tds-widget/src/public-header/public-header.tsx b/packages/tds-widget/src/public-header/public-header.tsx index 2745002561..fefe7dfc75 100644 --- a/packages/tds-widget/src/public-header/public-header.tsx +++ b/packages/tds-widget/src/public-header/public-header.tsx @@ -12,8 +12,8 @@ import { import type { Category, DeeplinkComponent } from './types' import { getCategoryHref, - getCategoryImageProps, - getCategoryTitle, + useCategoryImageProps, + useCategoryTitle, } from './categories' import { useAutoHide } from './use-auto-hide' import { ExtraActionsContainer } from './extra-actions-container' @@ -111,6 +111,8 @@ export function PublicHeader({ const app = useClientApp() const visible = useAutoHide(disableAutoHide) + const categoryTitle = useCategoryTitle(category) + const categoryImageProps = useCategoryImageProps(category) if (app) { return null @@ -121,16 +123,14 @@ export function PublicHeader({ - {category && ( - - )} + {category && } diff --git a/packages/triple-document/src/elements/tna/product.tsx b/packages/triple-document/src/elements/tna/product.tsx index 82073ae2c0..2b61d4d02e 100644 --- a/packages/triple-document/src/elements/tna/product.tsx +++ b/packages/triple-document/src/elements/tna/product.tsx @@ -7,7 +7,7 @@ import { StaticIntersectionObserver } from '@titicaca/intersection-observer' import { useClientApp } from '@titicaca/triple-web' import { TnaProductData, DomesticArea } from './types' -import { generateCoupon } from './helpers' +import { useGenerateCoupon } from './use-generate-coupon' import { PricePolicyCouponInfo } from './price-policy-coupon-info' const PLACEHOLDER_IMAGE_URL = @@ -119,7 +119,7 @@ export function TnaProductWithPrice({ hasOnlyExpectedApplicableCoupon, hasAmountAfterUsingCouponPrice, displayPricePolicy, - } = generateCoupon({ + } = useGenerateCoupon({ applicableCoupon, expectedApplicableCoupon, }) diff --git a/packages/triple-document/src/elements/tna/helpers.ts b/packages/triple-document/src/elements/tna/use-generate-coupon.ts similarity index 88% rename from packages/triple-document/src/elements/tna/helpers.ts rename to packages/triple-document/src/elements/tna/use-generate-coupon.ts index c71d63ff4c..c14ffc89c0 100644 --- a/packages/triple-document/src/elements/tna/helpers.ts +++ b/packages/triple-document/src/elements/tna/use-generate-coupon.ts @@ -1,15 +1,16 @@ import { formatNumber } from '@titicaca/view-utilities' -import { t } from 'i18next' +import { useTranslation } from 'react-i18next' import { TnaCoupon } from './types' -export function generateCoupon({ +export function useGenerateCoupon({ applicableCoupon, expectedApplicableCoupon, }: { applicableCoupon?: TnaCoupon expectedApplicableCoupon?: TnaCoupon }) { + const { t } = useTranslation('triple-frontend') const { amountAfterUsingCoupon: applicableAmountAfterUsingCoupon } = applicableCoupon || {} @@ -26,7 +27,6 @@ export function generateCoupon({ applicableCoupon && t('{{formattedApplicableAmountAfterUsingCoupon}}원', { formattedApplicableAmountAfterUsingCoupon, - ns: 'triple-frontend', }) return { diff --git a/packages/triple-document/src/index.ts b/packages/triple-document/src/index.ts index 3b237653bf..c15bc71a50 100644 --- a/packages/triple-document/src/index.ts +++ b/packages/triple-document/src/index.ts @@ -3,7 +3,7 @@ import { TripleDocument } from './triple-document' export { default as ELEMENTS } from './elements' export type { TripleElementData as TripleDocumentElementData } from './types' export * from './elements/text' -export { generateCoupon } from './elements/tna/helpers' +export { useGenerateCoupon } from './elements/tna/use-generate-coupon' export { Slot } from './elements/tna/slot' export { PricePolicyCouponInfo } from './elements/tna/price-policy-coupon-info'