feat(i18n): 다국어 처리 (#27)

* feat(i18n): 다국어 처리 (#26)

* feat(calendar): 캘린더 다국어 처리

* feat(calendar): 박수 부분 영어 전환

* feat(card): 카드 컴포넌트에 대해서 i18n 다국어 적용

* feat(getpaymethod): getPayMethod i18n 다국어 처리

* feat(utils): timeline에 대한 i18n 다국어 번역 추가

* feat(utils): 날짜 format 처리 변경

* feat(icon): add a language icon

* feat(modal): add a ModalSelect

* fix(indicator): text객체 없는 경우에 대한 대처

* fix(price): price 통화 변경

* feat(i18n): process 컴포넌트 영어 추가

* chore: node version chnage

* feat(i18n): price 컴포넌트에 대해서 통화규칙 변경

* feat(i18n): card내 label 부분에 대해서 props로 적용

* chore: updated a READEME file

* feat(price): price 컴포넌트 기본 text 변경

* feat(i18n): couponCard에 대해서 locale props 추가

* feat(i18n): couponCard 다국어 테스트

* feat(i18n): price 공백처리 변경

* feat(select-button): 글자 중앙정렬 추가

.nvmrc

@@ -1 +1 @@
-16.15.1
+16.16.0

README.md

@@ -33,6 +33,14 @@ npm install @travelmakers/<package-name>
 yarn add @travelmakers/<package-name>
 ```
 
+```bash
+# 개발모드
+nvm install 16.16.0 
+npm install -g yarn
+npm install -g commitizen
+npm install -g cz-conventional-changelog-with-jiraid-detection 
+```
+
 <!-- 구분!!! -->
 
 ## :rocket: Getting started

package.json

@@ -31,7 +31,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hot-toast": "^2.4.0",
-    "swiper": "9.4.1"
+    "swiper": "9.4.1",
+    "lerna": "6.1.0"
   },
   "devDependencies": {
     "@rollup/plugin-alias": "^3.1.8",

packages/travelmakers-design-core/src/components/Calendar/Calendar.tsx

@@ -1,4 +1,5 @@
 import { useCalendar, useUpdateEffect } from "@travelmakers/hooks";
+import { ko, enUS } from "date-fns/locale";
 import { PolymorphicRef } from "@travelmakers/styles";
 import React, {
   forwardRef,
@@ -49,6 +50,15 @@ export interface Props {
   topIndicatorPosition?: string;
 
   loadingImageSrc?: string;
+
+  indicatorText: {
+    from: string;
+    to: string;
+    descriptionFrom: string;
+    descriptionTo: string;
+  };
+
+  locale?: "ko" | "en";
 }
 
 /**
@@ -77,14 +87,18 @@ export const Calendar = forwardRef(
       onChange,
       onClick,
       loadingImageSrc,
+      indicatorText,
+      locale = "ko",
       children,
       className,
       ...props
     }: PropsWithChildren<CalendarProps<C>>,
     ref: PolymorphicRef<C>
   ) => {
     const { classes, cx } = useStyles();
-    const [state, actions] = useCalendar(null);
+    const [state, actions] = useCalendar(null, {
+      locale: locale === "ko" ? ko : enUS,
+    });
     const deferredState = useDeferredValue(state);
     const [isPending, startTransition] = useTransition();
     const [checked, setChecked] = useState<SelectedDays>({
@@ -135,10 +149,13 @@ export const Calendar = forwardRef(
             selected={selected}
             type={type}
             topIndicatorPosition={topIndicatorPosition}
+            text={indicatorText}
+            locale={locale}
           />
           <div className={classes.calendar}>
             {deferredState && (
               <DateTable
+                locale={locale}
                 checked={checked}
                 setChecked={setChecked}
                 type={type}

packages/travelmakers-design-core/src/components/Calendar/_components/DateCell/DateCell.tsx

@@ -10,6 +10,7 @@ import {
 } from "./DateCell.type";
 import { SelectedDays } from "../../Calendar.type";
 import { differenceInDays, isEqual } from "date-fns";
+import { log } from "next/dist/server/typescript/utils";
 
 export interface Props {
   selectableDates: string[];
@@ -23,12 +24,14 @@ export interface Props {
   enabledDays: Date;
   minNight: number;
   type: "tour" | "move-in";
+  locale?: "ko" | "en";
 }
 
 export const DateCell = React.memo(
   forwardRef(
     <C extends React.ElementType = "td">(
       {
+        locale,
         day,
         visible,
         checked,

packages/travelmakers-design-core/src/components/Calendar/_components/DateTable/DateTable.tsx

@@ -22,6 +22,7 @@ export interface Props {
   months: string[];
   years: number[];
   weeks?: CalendarState["weeks"];
+  locale?: "ko" | "en";
 }
 
 export const DateTable = React.memo(
@@ -40,6 +41,7 @@ export const DateTable = React.memo(
         months,
         years,
         weeks,
+        locale,
         className,
         ...props
       }: DateTableProps<C>,
@@ -197,15 +199,17 @@ export const DateTable = React.memo(
             const year = years[index];
             if (!year) return null;
             const title = `${year}년 ${month}`;
+            const titleEN = `${month} ${year}`;
             return (
               <DateYear
+                locale={locale}
                 key={title}
                 checked={checked}
                 betweenDays={betweenDays}
                 type={type}
                 disabledDays={disabledDays}
                 selectableDates={selectableDates}
-                title={title}
+                title={locale === "ko" ? title : titleEN}
                 hotelName={hotelName}
                 year={year}
                 month={month}

packages/travelmakers-design-core/src/components/Calendar/_components/DateYear/DateYear.tsx

@@ -11,6 +11,7 @@ import _ from "lodash";
 import { getMonth } from "date-fns";
 import { DateCellDay, DateCellType } from "../DateCell/DateCell.type";
 import { SelectedDays } from "../../Calendar.type";
+import { getDate } from "@travelmakers/utils";
 
 export interface Props {
   title: string;
@@ -27,12 +28,14 @@ export interface Props {
   enabledDays: Date;
   minNight: number;
   type: "tour" | "move-in";
+  locale?: "ko" | "en";
 }
 
 export const DateYear = React.memo(
   forwardRef(
     <C extends React.ElementType = "div">(
       {
+        locale,
         title,
         hotelName,
         checked,
@@ -58,14 +61,14 @@ export const DateYear = React.memo(
       return (
         <>
           <div className={classes.tableHead}>
-            <HeadMonthly title={title} onClear={onClear} />
+            <HeadMonthly title={title} onClear={onClear} locale={locale} />
           </div>
           <table>
             <caption className={"sr-only"}>
               {hotelName && `${hotelName} :`} {title} 달력
             </caption>
             <thead className={classes.mt10}>
-              <HeadTitle />
+              <HeadTitle locale={locale} />
             </thead>
             <tbody>
               {weeks
@@ -82,9 +85,16 @@ export const DateYear = React.memo(
                       <tr>
                         {week.map((day) => {
                           if (!day.year) return null;
+                          const visibleKO =
+                            _.first(week).month ===
+                            `${getMonth(day.date) + 1}월`;
+                          const visibleEN =
+                            _.first(week).month ===
+                            getDate(day.date, "MMMM").format;
                           return (
                             <DateCell
                               key={`${weeklyKey}-${day.dayOfMonth}day`}
+                              locale={locale}
                               day={day}
                               betweenDays={betweenDays}
                               dateBreak={dateBreak}
@@ -95,10 +105,7 @@ export const DateYear = React.memo(
                               disabledDays={disabledDays}
                               selectableDates={selectableDates}
                               onClick={onClick}
-                              visible={
-                                _.first(week).month ===
-                                `${getMonth(day.date) + 1}월`
-                              }
+                              visible={locale === "ko" ? visibleKO : visibleEN}
                             />
                           );
                         })}

packages/travelmakers-design-core/src/components/Calendar/_components/HeadMonthly/index.tsx

@@ -5,17 +5,19 @@ import { Button } from "../../../Button";
 const HeadMonthly = ({
   title,
   onClear,
+  locale = "ko",
 }: {
   title: string;
   onClear: () => void;
+  locale?: "ko" | "en";
 }) => {
   return (
     <>
       <Typography level="subhead2" color="primary1" strong>
         {title}
       </Typography>
       <Button variant="text" size="small" roundness onClick={onClear}>
-        초기화
+        {locale === "ko" ? "초기화" : "clear"}
       </Button>
     </>
   );

packages/travelmakers-design-core/src/components/Calendar/_components/HeadTitle/index.tsx

@@ -2,13 +2,15 @@ import React from "react";
 import { Typography } from "../../../Typography";
 import useStyles from "../../Calendar.style";
 
-const DAYS = ["일", "월", "화", "수", "목", "금", "토"];
+const DAYS_KO = ["일", "월", "화", "수", "목", "금", "토"];
+const DAYS_EN = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
 
-const HeadTitle: React.FC = () => {
+const HeadTitle: React.FC<{ locale?: "ko" | "en" }> = ({ locale = "ko" }) => {
   const { classes, cx } = useStyles();
+  const days = locale === "ko" ? DAYS_KO : DAYS_EN;
   return (
     <tr>
-      {DAYS.map((day) => {
+      {days.map((day) => {
         return (
           <th key={day} className={classes.tableCell}>
             <Typography level="body2" color="primary1">

packages/travelmakers-design-core/src/components/Calendar/_components/Indicator/Indicator.style.ts

@@ -43,8 +43,9 @@ export default createStyles(
       indicatorDateCountBox: {
         margin: "auto 0",
         ["& > div"]: {
-          width: "56px",
+          minWidth: "56px",
           height: "28px",
+          padding: `0 ${theme.spacing.spacing10}`,
           border: `1px solid ${theme.colors.primary1}`,
           borderRadius: theme.radius.radius100,
           textAlign: "center",

packages/travelmakers-design-core/src/components/Calendar/_components/Indicator/Indicator.tsx

@@ -9,23 +9,25 @@ import { SelectedDays } from "../../Calendar.type";
 export interface Props {
   selected: SelectedDays;
   type: "tour" | "move-in";
+  text: {
+    from: string;
+    to: string;
+    descriptionFrom: string;
+    descriptionTo: string;
+  };
   topIndicatorPosition?: string;
+  locale?: "ko" | "en";
 }
 
 export const Indicator: React.FC<Props> = ({
   selected,
   type,
   topIndicatorPosition,
+  text,
+  locale = "ko",
 }) => {
   const { classes } = useStyles({ topIndicatorPosition });
   const isTour = type === "tour";
-  const headlineText = {
-    from: !isTour ? "체크인" : "투어 예정일",
-    to: !isTour ? "체크아웃" : "투어 예정 시간",
-    description: !isTour
-      ? "일정을 <br /> 선택해주세요."
-      : "시간을 <br /> 선택해주세요.",
-  };
 
   const generateToHeadlineText = () => {
     if (isTour) {
@@ -34,7 +36,7 @@ export const Indicator: React.FC<Props> = ({
           <Typography
             level="caption"
             color="primary3"
-            dangerouslySetInnerHTML={{ __html: headlineText.description }}
+            dangerouslySetInnerHTML={{ __html: text?.descriptionTo }}
           />
         );
       }
@@ -51,7 +53,7 @@ export const Indicator: React.FC<Props> = ({
           <Typography
             level="caption"
             color="primary3"
-            dangerouslySetInnerHTML={{ __html: headlineText.description }}
+            dangerouslySetInnerHTML={{ __html: text?.descriptionTo }}
           />
         );
       }
@@ -61,7 +63,7 @@ export const Indicator: React.FC<Props> = ({
             {getDate(selected.to.date).format}
           </Typography>
           <Typography level="caption" color="primary1">
-            {getDay(selected.to.date)}
+            {getDay(selected.to.date, locale)}
           </Typography>
         </div>
       );
@@ -73,28 +75,30 @@ export const Indicator: React.FC<Props> = ({
       <div className={classes.indicatorInnerBox}>
         <div>
           <Typography level="body3" color="secondary1" strong>
-            {headlineText.from}
+            {text?.from}
           </Typography>
 
           {!selected.from ? (
-            <Typography level="caption" color="primary3">
-              일정을 <br /> 선택해주세요.
-            </Typography>
+            <Typography
+              level="caption"
+              color="primary3"
+              dangerouslySetInnerHTML={{ __html: text?.descriptionFrom }}
+            />
           ) : (
             <div className={classes.indicatorSelectedDay}>
               <Typography level="subhead1" color="primary1" strong>
                 {getDate(selected.from.date).format}
               </Typography>
               <Typography level="caption" color="primary1">
-                {getDay(selected.from.date)}
+                {getDay(selected.from.date, locale)}
               </Typography>
             </div>
           )}
         </div>
         <Divider type={"vertical"} color="outline" />
         <div>
           <Typography level="body3" color="secondary1" strong>
-            {headlineText.to}
+            {text?.to}
           </Typography>
 
           {generateToHeadlineText()}
@@ -108,7 +112,8 @@ export const Indicator: React.FC<Props> = ({
               level="subhead2"
               color="primary1"
             >
-              {differenceInDays(selected.to.date, selected.from.date)}박
+              {differenceInDays(selected.to.date, selected.from.date)}
+              {locale === "ko" ? "박" : " nights"}
             </Typography>
           </div>
         </div>

packages/travelmakers-design-core/src/components/Calendar/stories/Calendar.stories.tsx

@@ -174,6 +174,12 @@ export const Default = (props) => {
         topIndicatorPosition="0px"
         selected={selected}
         onChange={setSelected}
+        indicatorText={{
+          from: "Tour date",
+          to: "Tour time",
+          descriptionFrom: "Please <br/> select a schedule.",
+          descriptionTo: "Please <br/> select a time.",
+        }}
       >
         <Calendar.OptionBox
           title={"시간 선택하기"}