feat: getDiffDate 텍스트 (#31)

* chore: change py in button

* feat: getDiffText util function

* refactor: button

* feat: add env into gitignore

.gitignore

@@ -26,7 +26,8 @@ yarn-debug.log*
 yarn-error.log*
 
 # local env files
-.env*.local
+.env
+.env.*
 
 # vercel
 .vercel

src/__tests__/utils/date.test.ts

@@ -0,0 +1,33 @@
+import { describe, it, expect } from 'vitest'
+
+import { DateOrderError, getDiffDateText } from '@/utils/date'
+
+describe('getDiffDateText', () => {
+  it('should return 1 if the difference is less than a day', () => {
+    const startDate = new Date('2024-05-04T23:40:00Z')
+    const endDate = new Date('2024-05-04T23:59:00Z')
+
+    expect(getDiffDateText(startDate, endDate)).toBe(1)
+  })
+
+  it('should return 2 if day crosses midnight', () => {
+    const startDate = new Date('2024-05-04T23:40:00Z')
+    const endDate = new Date('2024-05-05T00:00:00Z')
+
+    expect(getDiffDateText(startDate, endDate)).toBe(2)
+  })
+
+  it('should return the correct number of days if the difference is more than a day', () => {
+    const startDate = new Date('2024-05-04T00:00:00Z')
+    const endDate = new Date('2024-05-06T00:00:00Z')
+
+    expect(getDiffDateText(startDate, endDate)).toBe(3)
+  })
+
+  it('should throw a DateOrderError if endDate is before startDate', () => {
+    const startDate = new Date('2024-05-05T00:00:00Z')
+    const endDate = new Date('2024-05-04T23:40:00Z')
+
+    expect(() => getDiffDateText(startDate, endDate)).toThrow(DateOrderError)
+  })
+})

src/app/page.tsx

@@ -1,9 +1,10 @@
-import { QRCode } from '@/components'
+import { Button, QRCode } from '@/components'
 
 const Home = () => {
   return (
     <main className="w-full min-h-screen flex flex-col justify-center items-center bg-neutral-600">
       <QRCode url="http://localhost:3000" />
+      <Button colorScheme="orange">HI</Button>
     </main>
   )
 }

src/components/common/button.tsx

@@ -17,7 +17,7 @@ const ButtonVariants = cva<{
       },
       size: {
         sm: 'py-[12px]',
-        md: 'py-[17px]',
+        md: 'py-[15px]',
         lg: 'py-[18px]',
       },
       rounded: {
@@ -28,7 +28,7 @@ const ButtonVariants = cva<{
     defaultVariants: {
       colorScheme: 'orange',
       size: 'md',
-      rounded: 'xl',
+      rounded: 'full',
     },
   },
 )
@@ -44,21 +44,33 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   fullWidth?: boolean
 }
 
+const getDisabledClassName = (
+  disabled: boolean,
+  disabledColor: 'dark' | 'light',
+) => {
+  if (!disabled) {
+    return ''
+  }
+  return disabledColor === 'dark' ? darkDisableClass : lightDisableClass
+}
+
 const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   (
     {
       className,
       children,
-      disabled,
       size,
       colorScheme,
       rounded,
-      fullWidth,
+      disabled = false,
+      fullWidth = true,
       disabledColor = 'dark',
       ...props
     },
     ref,
   ) => {
+    const disabledClassName = getDisabledClassName(disabled, disabledColor)
+
     return (
       <button
         ref={ref}
@@ -72,9 +84,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
             rounded,
           }),
           className,
-          disabled && disabledColor === 'dark'
-            ? darkDisableClass
-            : lightDisableClass,
+          disabledClassName,
           fullWidth && 'w-full',
         )}
         {...props}

src/utils/date.ts

@@ -0,0 +1,32 @@
+export class DateOrderError extends Error {
+  constructor() {
+    super('인자의 순서가 잘못되었습니다.(endDate < startDate)')
+  }
+}
+
+/**
+ * 그리니치 천문대로부터 특정 날짜까지 몇 일이 떨어져 있는지 계산합니다.
+ * @param targetDate - 계산할 대상 날짜
+ * @returns 그리니치 천문대 기준으로부터 떨어진 일 수
+ */
+const getDaysFromGreenwich = (targetDate: Date): number => {
+  const greenwichDate = new Date('1970-01-01T00:00:00Z')
+  const MS_PER_DAY = 1000 * 60 * 60 * 24
+
+  const diffInMs = targetDate.getTime() - greenwichDate.getTime()
+  const diffInDays = Math.floor(diffInMs / MS_PER_DAY)
+
+  return diffInDays
+}
+
+export const getDiffDateText = (startDate: Date, endDate: Date): number => {
+  if (endDate.getTime() < startDate.getTime()) {
+    throw new DateOrderError()
+  }
+
+  const startDay = getDaysFromGreenwich(startDate)
+  const endDay = getDaysFromGreenwich(endDate)
+  const diffDay = endDay - startDay
+
+  return diffDay + 1
+}