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