fix(fe): apply a seoul time zone at date formatting (#1569)

dayongkr · web-flow · commit aa465fdc1282 · 2024-03-18T21:29:26.000+09:00
* feat: add locale

* fix: change logic

* fix: apply new function
diff --git a/apps/frontend/app/(main)/_components/ContestCard.tsx b/apps/frontend/app/(main)/_components/ContestCard.tsx
@@ -1,7 +1,6 @@
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
-import { cn } from '@/lib/utils'
+import { cn, dateFormatter } from '@/lib/utils'
 import type { Contest } from '@/types/type'
-import dayjs from 'dayjs'
 import { FaRegClock } from 'react-icons/fa'
 import { FaRegCalendarAlt } from 'react-icons/fa'
 import Badge from './Badge'
@@ -21,8 +20,8 @@ interface Props {
 
 const format = (target: Date, year: number): string =>
   new Date(target).getFullYear() === year
-    ? dayjs(target).format('MMM DD')
-    : dayjs(target).format('MMM DD, YYYY')
+    ? dateFormatter(target, 'MMM DD')
+    : dateFormatter(target, 'MMM DD, YYYY')
 
 export default function ContestCard({ contest }: Props) {
   const year = new Date().getFullYear()
diff --git a/apps/frontend/app/(main)/contest/[contestId]/@tabs/announcement/_components/Columns.tsx b/apps/frontend/app/(main)/contest/[contestId]/@tabs/announcement/_components/Columns.tsx
@@ -1,9 +1,8 @@
 'use client'
 
-import { convertToLetter } from '@/lib/utils'
+import { convertToLetter, dateFormatter } from '@/lib/utils'
 import type { ContestAnnouncement } from '@/types/type'
 import type { ColumnDef } from '@tanstack/react-table'
-import dayjs from 'dayjs'
 import './styles.css'
 
 export const columns: ColumnDef<ContestAnnouncement>[] = [
@@ -28,6 +27,7 @@ export const columns: ColumnDef<ContestAnnouncement>[] = [
   {
     header: () => 'Posted',
     accessorKey: 'updateTime',
-    cell: ({ row }) => dayjs(row.original.updateTime).format('YYYY-MM-DD HH:mm')
+    cell: ({ row }) =>
+      dateFormatter(row.original.updateTime, 'YYYY-MM-DD HH:mm')
   }
 ]
diff --git a/apps/frontend/app/(main)/contest/[contestId]/layout.tsx b/apps/frontend/app/(main)/contest/[contestId]/layout.tsx
@@ -1,6 +1,5 @@
-import { fetcher } from '@/lib/utils'
+import { fetcher, dateFormatter } from '@/lib/utils'
 import type { Contest } from '@/types/type'
-import dayjs from 'dayjs'
 import { FaRegClock } from 'react-icons/fa'
 import { FaRegCalendarAlt } from 'react-icons/fa'
 import TimeDiff from '../../_components/TimeDiff'
@@ -14,8 +13,8 @@ interface ContestDetailProps {
 
 const format = (target: Date, year: number): string =>
   new Date(target).getFullYear() === year
-    ? dayjs(target).format('MMM DD')
-    : dayjs(target).format('MMM DD, YYYY')
+    ? dateFormatter(target, 'MMM DD')
+    : dateFormatter(target, 'MMM DD,YYYY')
 
 export default async function Layout({
   params,
diff --git a/apps/frontend/app/(main)/contest/[contestId]/page.tsx b/apps/frontend/app/(main)/contest/[contestId]/page.tsx
@@ -1,5 +1,5 @@
 import { baseUrl } from '@/lib/constants'
-import dayjs from 'dayjs'
+import { dateFormatter } from '@/lib/utils'
 import { sanitize } from 'isomorphic-dompurify'
 
 interface ContestDetailProps {
@@ -18,9 +18,9 @@ export default async function ContestDetail({ params }: ContestDetailProps) {
       <header className="flex justify-between border-b border-b-gray-200 p-5 py-4">
         <h2 className="break-words text-2xl font-extrabold">{title}</h2>
         <div className="mt-1 flex gap-1 text-sm text-gray-400">
-          <p>{dayjs(startTime).format('YYYY-MM-DD')}</p>
+          <p>{dateFormatter(startTime, 'YYYY-MM-DD')}</p>
           <p>-</p>
-          <p>{dayjs(endTime).format('YYYY-MM-DD')}</p>
+          <p>{dateFormatter(endTime, 'YYYY-MM-DD')}</p>
         </div>
       </header>
       <main
diff --git a/apps/frontend/app/(main)/contest/_components/Columns.tsx b/apps/frontend/app/(main)/contest/_components/Columns.tsx
@@ -1,9 +1,9 @@
 'use client'
 
 import Badge from '@/app/(main)/_components/Badge'
+import { dateFormatter } from '@/lib/utils'
 import type { Contest } from '@/types/type'
 import type { ColumnDef } from '@tanstack/react-table'
-import dayjs from 'dayjs'
 
 export const columns: ColumnDef<Contest>[] = [
   {
@@ -31,12 +31,12 @@ export const columns: ColumnDef<Contest>[] = [
   {
     header: 'Starts at',
     accessorKey: 'startTime',
-    cell: ({ row }) => dayjs(row.original.startTime).format('YYYY-MM-DD')
+    cell: ({ row }) => dateFormatter(row.original.startTime, 'YYYY-MM-DD')
   },
   {
     header: 'Ends at',
     accessorKey: 'endTime',
-    cell: ({ row }) => dayjs(row.original.endTime).format('YYYY-MM-DD')
+    cell: ({ row }) => dateFormatter(row.original.endTime, 'YYYY-MM-DD')
   },
   {
     header: 'Participants',
diff --git a/apps/frontend/app/(main)/contest/_components/ContestTable.tsx b/apps/frontend/app/(main)/contest/_components/ContestTable.tsx
@@ -8,14 +8,14 @@ import {
   TableHeader,
   TableRow
 } from '@/components/ui/table'
+import { dateFormatter } from '@/lib/utils'
 import type { Contest } from '@/types/type'
 import type { ColumnDef } from '@tanstack/react-table'
 import {
   flexRender,
   getCoreRowModel,
   useReactTable
 } from '@tanstack/react-table'
-import dayjs from 'dayjs'
 import type { Route } from 'next'
 import { useRouter } from 'next/navigation'
 
@@ -47,7 +47,7 @@ export default function ContestTable({ data }: ContestTableProps) {
         return (
           <p className="text-center">
             <span className="text-xs md:text-sm">
-              {dayjs(row.original.startTime).format('YYYY-MM-DD')}
+              {dateFormatter(row.original.startTime, 'YYYY-MM-DD')}
             </span>
           </p>
         )
@@ -64,7 +64,7 @@ export default function ContestTable({ data }: ContestTableProps) {
         return (
           <p className="text-center">
             <span className="text-xs md:text-sm">
-              {dayjs(row.original.endTime).format('YYYY-MM-DD')}
+              {dateFormatter(row.original.endTime, 'YYYY-MM-DD')}
             </span>
           </p>
         )
diff --git a/apps/frontend/app/(main)/notice/[id]/page.tsx b/apps/frontend/app/(main)/notice/[id]/page.tsx
@@ -1,5 +1,5 @@
 import { baseUrl } from '@/lib/constants'
-import dayjs from 'dayjs'
+import { dateFormatter } from '@/lib/utils'
 import { sanitize } from 'isomorphic-dompurify'
 import Link from 'next/link'
 import { RxHamburgerMenu } from 'react-icons/rx'
@@ -30,7 +30,7 @@ export default async function NoticeDetail({
         <h2 className="break-words text-lg font-semibold">{title}</h2>
         <div className="mt-1 flex justify-between text-sm text-gray-400">
           <p>{createdBy}</p>
-          <p>{dayjs(createTime).format('YYYY-MM-DD')}</p>
+          <p>{dateFormatter(createTime, 'YYYY-MM-DD')}</p>
         </div>
       </header>
       <main
diff --git a/apps/frontend/app/(main)/notice/_components/Columns.tsx b/apps/frontend/app/(main)/notice/_components/Columns.tsx
@@ -1,9 +1,8 @@
 'use client'
 
-import { cn } from '@/lib/utils'
+import { cn, dateFormatter } from '@/lib/utils'
 import type { Notice } from '@/types/type'
 import type { ColumnDef } from '@tanstack/react-table'
-import dayjs from 'dayjs'
 import { PiPushPinFill } from 'react-icons/pi'
 
 export const columns: ColumnDef<Notice>[] = [
@@ -38,6 +37,6 @@ export const columns: ColumnDef<Notice>[] = [
   {
     header: 'Date',
     accessorKey: 'createTime',
-    cell: ({ row }) => dayjs(row.original.createTime).format('YYYY-MM-DD')
+    cell: ({ row }) => dateFormatter(row.original.createTime, 'YYYY-MM-DD')
   }
 ]
diff --git a/apps/frontend/app/admin/contest/_components/Columns.tsx b/apps/frontend/app/admin/contest/_components/Columns.tsx
@@ -3,8 +3,8 @@
 import { DataTableColumnHeader } from '@/components/DataTableColumnHeader'
 import { Checkbox } from '@/components/ui/checkbox'
 import { Switch } from '@/components/ui/switch'
+import { dateFormatter } from '@/lib/utils'
 import type { ColumnDef } from '@tanstack/react-table'
-import dayjs from 'dayjs'
 import { FiEyeOff } from 'react-icons/fi'
 import { FiEye } from 'react-icons/fi'
 
@@ -108,8 +108,7 @@ export const columns: ColumnDef<Contest>[] = [
     ),
     cell: ({ row }) => (
       <p className="text-center">
-        {dayjs(row.original.startTime).format('YYYY-MM-DD HH:mm')} ~{' '}
-        {dayjs(row.original.endTime).format('YYYY-MM-DD HH:mm')}
+        {`${dateFormatter(row.original.startTime, 'YYYY-MM-DD')} ~ ${dateFormatter(row.original.endTime, 'YYYY-MM-DD')}`}
       </p>
     )
   },
diff --git a/apps/frontend/app/admin/problem/[id]/_components/Columns.tsx b/apps/frontend/app/admin/problem/[id]/_components/Columns.tsx
@@ -1,8 +1,8 @@
 'use client'
 
+import { dateFormatter } from '@/lib/utils'
 import type { SubmissionItem } from '@/types/type'
 import type { ColumnDef } from '@tanstack/react-table'
-import dayjs from 'dayjs'
 
 export const columns: ColumnDef<SubmissionItem>[] = [
   {
@@ -43,7 +43,7 @@ export const columns: ColumnDef<SubmissionItem>[] = [
     header: () => 'Submission Time',
     accessorKey: 'createTime',
     cell: ({ row }) =>
-      dayjs(row.original.createTime).format('YYYY-MM-DD HH:mm:ss')
+      dateFormatter(row.original.createTime, 'YYYY-MM-DD HH:mm:ss')
   },
   {
     header: () => 'Code Size',
diff --git a/apps/frontend/app/problem/[problemId]/submission/_components/Columns.tsx b/apps/frontend/app/problem/[problemId]/submission/_components/Columns.tsx
@@ -1,8 +1,8 @@
 'use client'
 
+import { dateFormatter } from '@/lib/utils'
 import type { SubmissionItem } from '@/types/type'
 import type { ColumnDef } from '@tanstack/react-table'
-import dayjs from 'dayjs'
 
 export const columns: ColumnDef<SubmissionItem>[] = [
   {
@@ -37,7 +37,7 @@ export const columns: ColumnDef<SubmissionItem>[] = [
     header: () => 'Submission Time',
     accessorKey: 'createTime',
     cell: ({ row }) =>
-      dayjs(row.original.createTime).format('YYYY-MM-DD HH:mm:ss')
+      dateFormatter(row.original.createTime, 'YYYY-MM-DD HH:mm:ss')
   },
   {
     header: () => 'Code Size',
diff --git a/apps/frontend/app/problem/[problemId]/submission/_components/SubmissionDetail.tsx b/apps/frontend/app/problem/[problemId]/submission/_components/SubmissionDetail.tsx
@@ -8,9 +8,8 @@ import {
   TableHeader,
   TableRow
 } from '@/components/ui/table'
-import { fetcherWithAuth } from '@/lib/utils'
+import { dateFormatter, fetcherWithAuth } from '@/lib/utils'
 import type { SubmissionDetail } from '@/types/type'
-import dayjs from 'dayjs'
 import { revalidateTag } from 'next/cache'
 import { IoIosLock } from 'react-icons/io'
 import dataIfError from './dataIfError'
@@ -73,7 +72,7 @@ export default async function SubmissionDetail({
           </div>
           <div>
             <h2>Submission Time</h2>
-            <p>{dayjs(submission.createTime).format('YYYY-MM-DD HH:mm:ss')}</p>
+            <p>{dateFormatter(submission.createTime, 'YYYY-MM-DD HH:mm:ss')}</p>
           </div>
         </div>
         <ScrollBar orientation="horizontal" />
diff --git a/apps/frontend/lib/utils.ts b/apps/frontend/lib/utils.ts
@@ -1,4 +1,5 @@
 import { type ClassValue, clsx } from 'clsx'
+import dayjs from 'dayjs'
 import ky, { TimeoutError } from 'ky'
 import { toast } from 'sonner'
 import { twMerge } from 'tailwind-merge'
@@ -57,3 +58,9 @@ export const fetcherWithAuth = fetcher.extend({
 export const convertToLetter = (n: number) => {
   return String.fromCharCode(65 + n)
 }
+
+export const dateFormatter = (date: string | Date, format: string) => {
+  return dayjs(
+    new Date(date).toLocaleString('en-US', { timeZone: 'Asia/Seoul' })
+  ).format(format)
+}

Original file line number	Diff line number	Diff line change
`@@ -1,9 +1,8 @@`
`1`	`1`	`'use client'`
`2`	`2`
`3`		`-import { convertToLetter } from '@/lib/utils'`
	`3`	`+import { convertToLetter, dateFormatter } from '@/lib/utils'`
`4`	`4`	`import type { ContestAnnouncement } from '@/types/type'`
`5`	`5`	`import type { ColumnDef } from '@tanstack/react-table'`
`6`		`-import dayjs from 'dayjs'`
`7`	`6`	`import './styles.css'`
`8`	`7`
`9`	`8`	`export const columns: ColumnDef<ContestAnnouncement>[] = [`
`@@ -28,6 +27,7 @@ export const columns: ColumnDef<ContestAnnouncement>[] = [`
`28`	`27`	`{`
`29`	`28`	`header: () => 'Posted',`
`30`	`29`	`accessorKey: 'updateTime',`
`31`		`- cell: ({ row }) => dayjs(row.original.updateTime).format('YYYY-MM-DD HH:mm')`
	`30`	`+ cell: ({ row }) =>`
	`31`	`+ dateFormatter(row.original.updateTime, 'YYYY-MM-DD HH:mm')`
`32`	`32`	`}`
`33`	`33`	`]`
Original file line number	Diff line number	Diff line change
`@@ -1,9 +1,9 @@`
`1`	`1`	`'use client'`
`2`	`2`
`3`	`3`	`import Badge from '@/app/(main)/_components/Badge'`
	`4`	`+import { dateFormatter } from '@/lib/utils'`
`4`	`5`	`import type { Contest } from '@/types/type'`
`5`	`6`	`import type { ColumnDef } from '@tanstack/react-table'`
`6`		`-import dayjs from 'dayjs'`
`7`	`7`
`8`	`8`	`export const columns: ColumnDef<Contest>[] = [`
`9`	`9`	`{`
`@@ -31,12 +31,12 @@ export const columns: ColumnDef<Contest>[] = [`
`31`	`31`	`{`
`32`	`32`	`header: 'Starts at',`
`33`	`33`	`accessorKey: 'startTime',`
`34`		`- cell: ({ row }) => dayjs(row.original.startTime).format('YYYY-MM-DD')`
	`34`	`+ cell: ({ row }) => dateFormatter(row.original.startTime, 'YYYY-MM-DD')`
`35`	`35`	`},`
`36`	`36`	`{`
`37`	`37`	`header: 'Ends at',`
`38`	`38`	`accessorKey: 'endTime',`
`39`		`- cell: ({ row }) => dayjs(row.original.endTime).format('YYYY-MM-DD')`
	`39`	`+ cell: ({ row }) => dateFormatter(row.original.endTime, 'YYYY-MM-DD')`
`40`	`40`	`},`
`41`	`41`	`{`
`42`	`42`	`header: 'Participants',`
Original file line number	Diff line number	Diff line change
`@@ -1,9 +1,8 @@`
`1`	`1`	`'use client'`
`2`	`2`
`3`		`-import { cn } from '@/lib/utils'`
	`3`	`+import { cn, dateFormatter } from '@/lib/utils'`
`4`	`4`	`import type { Notice } from '@/types/type'`
`5`	`5`	`import type { ColumnDef } from '@tanstack/react-table'`
`6`		`-import dayjs from 'dayjs'`
`7`	`6`	`import { PiPushPinFill } from 'react-icons/pi'`
`8`	`7`
`9`	`8`	`export const columns: ColumnDef<Notice>[] = [`
`@@ -38,6 +37,6 @@ export const columns: ColumnDef<Notice>[] = [`
`38`	`37`	`{`
`39`	`38`	`header: 'Date',`
`40`	`39`	`accessorKey: 'createTime',`
`41`		`- cell: ({ row }) => dayjs(row.original.createTime).format('YYYY-MM-DD')`
	`40`	`+ cell: ({ row }) => dateFormatter(row.original.createTime, 'YYYY-MM-DD')`
`42`	`41`	`}`
`43`	`42`	`]`