feat(i18n): 다국어 처리

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, {
   PropsWithChildren,
@@ -50,6 +51,15 @@ export interface Props {
   topIndicatorPosition?: string;
 
   loadingImageSrc?: string;
+
+  indicatorText: {
+    from: string;
+    to: string;
+    descriptionFrom: string;
+    descriptionTo: string;
+  };
+
+  locale?: "ko" | "en";
 }
 
 /**
@@ -78,14 +88,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>({
@@ -136,10 +150,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

@@ -23,6 +23,7 @@ export interface Props {
   months: string[];
   years: number[];
   weeks?: CalendarState["weeks"];
+  locale?: "ko" | "en";
 }
 
 export const DateTable = React.memo(
@@ -41,6 +42,7 @@ export const DateTable = React.memo(
         months,
         years,
         weeks,
+        locale,
         className,
         ...props
       }: DateTableProps<C>,
@@ -198,15 +200,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={"시간 선택하기"}

packages/travelmakers-design-core/src/components/Card/HotelCard/HotelCard.tsx

@@ -43,6 +43,8 @@ export interface Props {
 
   /** true일 경우 HotelCard 컴포넌트가 disabled 됩니다. */
   disabled?: boolean;
+
+  locale?: "ko" | "en";
 }
 
 export const HotelCard = forwardRef(
@@ -58,6 +60,7 @@ export const HotelCard = forwardRef(
       price = [],
       isCoupon,
       disabled = false,
+      locale = "ko",
       className,
       ...props
     }: HotelCardProps<C>,
@@ -84,7 +87,7 @@ export const HotelCard = forwardRef(
                   Sold Out
                 </Typography>
                 <Typography color="white" level="body2">
-                  다음에 만나요
+                  {locale === "ko" ? "다음에 만나요" : "See you next time"}
                 </Typography>
               </div>
             ) : (