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