[#127] Add Time component

ui/packages/mr-c.app/package.json

@@ -13,6 +13,7 @@
     "@mrc/common-components": "workspace:*",
     "@mrc/common-utils": "workspace:*",
     "clsx": "^2.1.0",
+    "dayjs": "^1.11.10",
     "next": "^14.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

ui/packages/mr-c.app/src/components/time/client-time.tsx

@@ -0,0 +1,19 @@
+'use client';
+
+import { type Locale, formatDateToLocal } from '@/lib/utils/format-date-to-local';
+import Text, { type TextProps } from '@/components/atomic/text';
+
+interface Props extends Omit<TextProps, 'children'> {
+  dateStr: string;
+  locale?: Locale;
+  relative?: boolean;
+}
+
+export default function ClientTime({
+  dateStr,
+  locale = 'ko-KR',
+  relative = false,
+  ...textProps
+}: Props) {
+  return <Text {...textProps}>{formatDateToLocal(dateStr, locale, relative)}</Text>;
+}

ui/packages/mr-c.app/src/components/time/index.tsx

@@ -0,0 +1,4 @@
+import dynamic from 'next/dynamic';
+const Time = dynamic(() => import('@/components/time/client-time'), { ssr: false });
+
+export default Time;

ui/packages/mr-c.app/src/lib/utils/format-date-to-local.ts

@@ -0,0 +1,27 @@
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import 'dayjs/locale/ko';
+
+dayjs.extend(relativeTime);
+
+export type Locale = 'ko-KR' | 'en-US';
+
+// If this function is called on server, it would reflect
+// the timezone where the server at rather than the client at.
+// This could cause a react hydration error.
+export function formatDateToLocal(dateStr: string, locale: Locale, relative = false) {
+  const date = new Date(dateStr);
+
+  if (relative) {
+    return dayjs(date).locale(locale).fromNow();
+  }
+
+  const options: Intl.DateTimeFormatOptions = {
+    day: 'numeric',
+    month: 'short',
+    year: 'numeric',
+  };
+  const formatter = new Intl.DateTimeFormat(locale, options);
+
+  return formatter.format(date);
+}

ui/yarn.lock

@@ -2291,6 +2291,7 @@ __metadata:
     "@typescript-eslint/parser": ^6.7.3
     autoprefixer: ^10.4.16
     clsx: ^2.1.0
+    dayjs: ^1.11.10
     eslint: ^8.51.0
     eslint-config-next: ^13.5.5
     jest: ^29.7.0
@@ -6656,6 +6657,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dayjs@npm:^1.11.10":
+  version: 1.11.10
+  resolution: "dayjs@npm:1.11.10"
+  checksum: a6b5a3813b8884f5cd557e2e6b7fa569f4c5d0c97aca9558e38534af4f2d60daafd3ff8c2000fed3435cfcec9e805bcebd99f90130c6d1c5ef524084ced588c4
+  languageName: node
+  linkType: hard
+
 "debug@npm:2.6.9, debug@npm:^2.6.9":
   version: 2.6.9
   resolution: "debug@npm:2.6.9"