FIX: many known issues

this commit contained:
-fix dependency
-fix color picker
-fix console spam
-fix styling

countdown

@@ -0,0 +1 @@
+Subproject commit 78c2abe791520f7c3543ea6d06c72ddbc5d4f39d

package-lock.json

@@ -6,8 +6,10 @@
     "": {
       "name": "timerweb",
       "dependencies": {
+        "@gsap/react": "^2.1.1",
         "clsx": "^2.1.1",
         "framer-motion": "^11.2.11",
+        "gsap": "^3.12.5",
         "next": "12.3.1",
         "react": "18.2.0",
         "react-dom": "18.2.0",
@@ -71,6 +73,15 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/@gsap/react": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@gsap/react/-/react-2.1.1.tgz",
+      "integrity": "sha512-apGPRrmpqxvl1T6Io1KgT8tFU+IuACI6z4zmT7t8+PASserJeLVRFJdSNUFA2Xb/eVkZI1noE8LIrY/w/oJECw==",
+      "dependencies": {
+        "gsap": "^3.12.5",
+        "react": ">=16"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.10.7",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.10.7.tgz",
@@ -2191,6 +2202,11 @@
       "integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==",
       "dev": true
     },
+    "node_modules/gsap": {
+      "version": "3.12.5",
+      "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.12.5.tgz",
+      "integrity": "sha512-srBfnk4n+Oe/ZnMIOXt3gT605BX9x5+rh/prT2F1SsNJsU1XuMiP0E2aptW481OnonOGACZWBqseH5Z7csHxhQ=="
+    },
     "node_modules/has": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",

package.json

@@ -7,8 +7,10 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@gsap/react": "^2.1.1",
     "clsx": "^2.1.1",
     "framer-motion": "^11.2.11",
+    "gsap": "^3.12.5",
     "next": "12.3.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",

public/global.css

@@ -2,7 +2,9 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
 @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
+
 html {
   overflow: hidden;
   font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
@@ -125,7 +127,7 @@ div.timer-container {
   padding: 10px;
   margin: 10px auto;
   /* 보더 대신 그림자로 대체 */
-  box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
   border-radius: 10px;
 
 }
@@ -140,7 +142,6 @@ div.timer-container > div.timer {
   display: flex;
   justify-content: center;
   align-items: first baseline;
-  font-family: 'Share Tech Mono';
   font-size: 30px;
   height: 2rem;
 }

src/pages/embed.tsx

@@ -48,12 +48,12 @@ const TimerEmbed: React.FC = () => {
             <Digit getter={() => getRemainingTime(date,  'minute').toString().padStart(2, '0')} />
             :
             <Digit getter={() => getRemainingTime(date, 'second').toString().padStart(2, '0')} style={{ marginRight: 0 }} />
-            <div className='flex transform -translate-x-1 items-baseline'>
+            <div className='flex transform items-baseline translate-x-2'>
               .
               <Digit
                 ignoreBlink
                 getter={() => Math.round(getRemainingTime(date, 'milisecond') / 10).toString().slice(0, 2).padStart(2, '0')}
-                style={{ textAlign: 'left', fontSize: '0.5em', margin: 0, width: '20px' }}
+                style={{ textAlign: 'left', fontSize: '0.5em', margin: 5, width: '20px' }}
               />
             </div>
           </>

src/utils/getRemainingTime.ts

@@ -15,7 +15,5 @@ export const getRemainingTime = (date: string, type: timeType, all = false) => {
   const currentDate = new Date();
   const targetDate = parseDate(date);
   const timeDifference = targetDate.getTime() - currentDate.getTime();
-  let result = Math.max(Math.floor(cal[type](timeDifference, all)), 0);
-  //print out the result
   return Math.max(Math.floor(cal[type](timeDifference, all)), 0);
 };

yarn.lock

@@ -29,6 +29,14 @@
     minimatch "^3.1.2"
     strip-json-comments "^3.1.1"
 
+"@gsap/react@^2.1.1":
+  version "2.1.1"
+  resolved "https://registry.npmjs.org/@gsap/react/-/react-2.1.1.tgz"
+  integrity sha512-apGPRrmpqxvl1T6Io1KgT8tFU+IuACI6z4zmT7t8+PASserJeLVRFJdSNUFA2Xb/eVkZI1noE8LIrY/w/oJECw==
+  dependencies:
+    gsap "^3.12.5"
+    react ">=16"
+
 "@humanwhocodes/config-array@^0.10.4":
   version "0.10.7"
   resolved "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.10.7.tgz"
@@ -1165,6 +1173,11 @@ grapheme-splitter@^1.0.4:
   resolved "https://registry.npmjs.org/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz"
   integrity sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==
 
+gsap@^3.12.5:
+  version "3.12.5"
+  resolved "https://registry.npmjs.org/gsap/-/gsap-3.12.5.tgz"
+  integrity sha512-srBfnk4n+Oe/ZnMIOXt3gT605BX9x5+rh/prT2F1SsNJsU1XuMiP0E2aptW481OnonOGACZWBqseH5Z7csHxhQ==
+
 has-bigints@^1.0.1, has-bigints@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz"
@@ -1919,7 +1932,7 @@ react-is@^16.13.1:
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
-"react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^17.0.2 || ^18.0.0-0", react@^18.0.0, react@^18.2.0, "react@>= 16.8.0 || 17.x.x || ^18.0.0-0", react@18.2.0:
+"react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^17.0.2 || ^18.0.0-0", react@^18.0.0, react@^18.2.0, "react@>= 16.8.0 || 17.x.x || ^18.0.0-0", react@>=16, react@18.2.0:
   version "18.2.0"
   resolved "https://registry.npmjs.org/react/-/react-18.2.0.tgz"
   integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==