From 06f87d4f08392066da5ace31890031b0bd19205c Mon Sep 17 00:00:00 2001 From: kang Date: Wed, 18 Oct 2023 01:12:56 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=EC=83=88=EB=A1=9C=EC=9A=B4=20=EB=AA=A8?= =?UTF-8?q?=EB=8B=AC=20UI=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ContentModal.tsx | 66 +++++++++++++++++++++++++++++++++ src/components/Icons.tsx | 39 +++++++++++++++++++ src/utils/formatDate.ts | 17 +++++++++ 3 files changed, 122 insertions(+) create mode 100644 src/components/ContentModal.tsx create mode 100644 src/components/Icons.tsx create mode 100644 src/utils/formatDate.ts diff --git a/src/components/ContentModal.tsx b/src/components/ContentModal.tsx new file mode 100644 index 0000000..30bfccd --- /dev/null +++ b/src/components/ContentModal.tsx @@ -0,0 +1,66 @@ +import { + Divider, + Modal, + ModalBody, + ModalCloseButton, + ModalContent, + ModalFooter, + ModalHeader, + ModalOverlay, + Text, +} from '@chakra-ui/react' +import { ko } from 'date-fns/locale' + +import { RefreshIcon } from './Icons' + +import foramtDate from '@/utils/formatDate' + +type Props = { + isOpen: boolean + onClose: () => void +} + +const ContentModal = ({ isOpen, onClose }: Props) => { + return ( + + + + + Gachon Tools + + + + 하이 + + + + {foramtDate(ko, new Date().toDateString())} 업데이트 + + + + + + ) +} + +export default ContentModal diff --git a/src/components/Icons.tsx b/src/components/Icons.tsx new file mode 100644 index 0000000..ad9dc18 --- /dev/null +++ b/src/components/Icons.tsx @@ -0,0 +1,39 @@ +import { type ChakraComponent, chakra } from '@chakra-ui/react' + +import type { ComponentProps } from 'react' + +export const CheckIcon = (props: ComponentProps>) => { + return ( + + + + ) +} + +export const RefreshIcon = (props: ComponentProps>) => { + return ( + + + + ) +} diff --git a/src/utils/formatDate.ts b/src/utils/formatDate.ts new file mode 100644 index 0000000..79060c7 --- /dev/null +++ b/src/utils/formatDate.ts @@ -0,0 +1,17 @@ +import { format, formatDistanceToNowStrict } from 'date-fns' + +const foramtDate = (locale: Locale, date: string) => { + const d = new Date(date) + const now = Date.now() + const diff = (now - d.getTime()) / 1000 + + if (diff < 60 * 1) { + return locale.code === 'ko' ? '방금 전' : 'just now' + } + if (diff < 60 * 60 * 24 * 3) { + return formatDistanceToNowStrict(d, { addSuffix: true, locale }) + } + return format(d, locale.code === 'ko' ? 'yyyy년 MM월 dd일' : 'dd MMM yyyy') +} + +export default foramtDate