feat: 새로운 모달 UI 구현

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 (
+ <Modal isCentered isOpen={isOpen} onClose={onClose}>
+ <ModalOverlay />
+ <ModalContent minW="750px" h="500px" borderRadius="8px">
+ <ModalHeader
+ display="flex"
+ alignItems="center"
+ minH="60px"
+ px="24px"
+ color="gray.700"
+ fontSize="large"
+ fontWeight="700"
+ >
+ Gachon Tools
+ <ModalCloseButton
+ size="lg"
+ top="16px"
+ right="16px"
+ border="none"
+ _focus={{
+ outline: 'none',
+ bg: 'none',
+ }}
+ _focusVisible={{
+ boxShadow: 'none',
+ }}
+ />
+ </ModalHeader>
+ <Divider m="0" />
+ <ModalBody>하이</ModalBody>
+ <Divider m="0" />
+ <ModalFooter h="60px" px="24px">
+ <Text fontSize="12px" color="gray.600" mr="4px">
+ {foramtDate(ko, new Date().toDateString())} 업데이트
+ </Text>
+ <RefreshIcon color="gray.600" />
+ </ModalFooter>
+ </ModalContent>
+ </Modal>
+ )
+}
+
+export default ContentModal

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<ChakraComponent<'svg'>>) => {
+ return (
+ <chakra.svg
+ width="24px"
+ height="24px"
+ viewBox="0 0 24 24"
+ fill="currentcolor"
+ xmlns="http://www.w3.org/2000/svg"
+ {...props}
+ >
+ <path
+ d="M12 24C8.8174 24 5.76516 22.7357 3.51472 20.4853C1.26428 18.2348 0 15.1826 0 12C0 8.8174 1.26428 5.76516 3.51472 3.51472C5.76516 1.26428 8.8174 0 12 0C15.1826 0 18.2348 1.26428 20.4853 3.51472C22.7357 5.76516 24 8.8174 24 12C24 15.1826 22.7357 18.2348 20.4853 20.4853C18.2348 22.7357 15.1826 24 12 24ZM17.67 9.42C17.8686 9.20661 17.9768 8.92453 17.9717 8.63305C17.9667 8.34158 17.8489 8.0634 17.643 7.857C17.4366 7.65114 17.1584 7.5333 16.8669 7.52827C16.5755 7.52323 16.2934 7.63139 16.08 7.83L10.125 13.785L7.92 11.58C7.70661 11.3814 7.42453 11.2732 7.13305 11.2783C6.84158 11.2833 6.5634 11.4011 6.357 11.607C6.15114 11.8134 6.0333 12.0916 6.02827 12.3831C6.02323 12.6745 6.13139 12.9566 6.33 13.17L9.33 16.17C9.54094 16.3807 9.82687 16.499 10.125 16.499C10.4231 16.499 10.7091 16.3807 10.92 16.17L17.67 9.42Z"
+ fill="#44A046"
+ />
+ </chakra.svg>
+ )
+}
+
+export const RefreshIcon = (props: ComponentProps<ChakraComponent<'svg'>>) => {
+ return (
+ <chakra.svg
+ width="16px"
+ height="16px"
+ viewBox="0 0 24 24"
+ fill="currentcolor"
+ xmlns="http://www.w3.org/2000/svg"
+ {...props}
+ >
+ <path
+ d="M17.65 6.35001C16.8118 5.50428 15.7944 4.85762 14.6728 4.4578C13.5512 4.05798 12.3542 3.9152 11.17 4.04001C7.50002 4.41001 4.48002 7.39001 4.07002 11.06C3.52002 15.91 7.27002 20 12 20C13.5101 20 14.9892 19.5715 16.2655 18.7643C17.5418 17.9572 18.5628 16.8044 19.21 15.44C19.53 14.77 19.05 14 18.31 14C17.94 14 17.59 14.2 17.43 14.53C16.8494 15.779 15.8564 16.79 14.6179 17.3928C13.3795 17.9957 11.9712 18.1536 10.63 17.84C8.41002 17.35 6.62002 15.54 6.15002 13.32C5.95245 12.4423 5.95474 11.5313 6.15672 10.6546C6.35869 9.77787 6.75519 8.95776 7.31687 8.25493C7.87856 7.55211 8.59107 6.98454 9.40169 6.59423C10.2123 6.20392 11.1003 6.00084 12 6.00001C13.66 6.00001 15.14 6.69001 16.22 7.78001L14.71 9.29001C14.08 9.92001 14.52 11 15.41 11H19C19.55 11 20 10.55 20 10V6.41001C20 5.52001 18.92 5.07001 18.29 5.70001L17.65 6.35001Z"
+ fill="currentColor"
+ />
+ </chakra.svg>
+ )
+}

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