diff --git a/countdown b/countdown new file mode 160000 index 0000000..78c2abe --- /dev/null +++ b/countdown @@ -0,0 +1 @@ +Subproject commit 78c2abe791520f7c3543ea6d06c72ddbc5d4f39d diff --git a/package-lock.json b/package-lock.json index 59108e2..a12184c 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index b5eaeb7..bb67c2b 100644 --- a/package.json +++ b/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", diff --git a/public/global.css b/public/global.css index eefdbb5..e4074b3 100644 --- a/public/global.css +++ b/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; } diff --git a/src/pages/embed.tsx b/src/pages/embed.tsx index 938e006..682c855 100644 --- a/src/pages/embed.tsx +++ b/src/pages/embed.tsx @@ -48,12 +48,12 @@ const TimerEmbed: React.FC = () => { getRemainingTime(date, 'minute').toString().padStart(2, '0')} /> : getRemainingTime(date, 'second').toString().padStart(2, '0')} style={{ marginRight: 0 }} /> -
+
. 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' }} />
diff --git a/src/utils/getRemainingTime.ts b/src/utils/getRemainingTime.ts index 775997f..f2252d3 100644 --- a/src/utils/getRemainingTime.ts +++ b/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); }; diff --git a/yarn.lock b/yarn.lock index 94bd0fa..fce43c9 100644 --- a/yarn.lock +++ b/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==