From c2d4eef8bfcd5d234c66aae77d9128720863e57e Mon Sep 17 00:00:00 2001
From: polee <43488305+poiu694@users.noreply.github.com>
Date: Sat, 29 Jun 2024 22:01:03 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20getDiffDate=20=ED=85=8D=EC=8A=A4?=
 =?UTF-8?q?=ED=8A=B8=20(#31)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* chore: change py in button

* feat: getDiffText util function

* refactor: button

* feat: add env into gitignore
---
 .gitignore                       |  3 ++-
 src/__tests__/utils/date.test.ts | 33 ++++++++++++++++++++++++++++++++
 src/app/page.tsx                 |  3 ++-
 src/components/common/button.tsx | 24 ++++++++++++++++-------
 src/utils/date.ts                | 32 +++++++++++++++++++++++++++++++
 5 files changed, 86 insertions(+), 9 deletions(-)
 create mode 100644 src/__tests__/utils/date.test.ts
 create mode 100644 src/utils/date.ts

diff --git a/.gitignore b/.gitignore
index a5abcf01..93e3f55b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -26,7 +26,8 @@ yarn-debug.log*
 yarn-error.log*
 
 # local env files
-.env*.local
+.env
+.env.*
 
 # vercel
 .vercel
diff --git a/src/__tests__/utils/date.test.ts b/src/__tests__/utils/date.test.ts
new file mode 100644
index 00000000..5a04c7e1
--- /dev/null
+++ b/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)
+  })
+})
diff --git a/src/app/page.tsx b/src/app/page.tsx
index add5cca5..3753f071 100644
--- a/src/app/page.tsx
+++ b/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>
   )
 }
diff --git a/src/components/common/button.tsx b/src/components/common/button.tsx
index 595f26de..6f107da9 100644
--- a/src/components/common/button.tsx
+++ b/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}
diff --git a/src/utils/date.ts b/src/utils/date.ts
new file mode 100644
index 00000000..bd4a561e
--- /dev/null
+++ b/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
+}