From 3176a9f01e13e0e219cf94f334e016b444f36708 Mon Sep 17 00:00:00 2001
From: Kwon Seo Jin <97675977+B0XERCAT@users.noreply.github.com>
Date: Tue, 24 Sep 2024 19:06:27 +0900
Subject: [PATCH] refactor(fe): add hide spin button util style (#2109)

* refactor(fe): add hide spin button util style, delete hide scroll bar plugin

* fix(fe): fix pnpm lock file

* chore(fe): add import type declaration
---
 .../@tabs/_components/RegisterButton.tsx      |   2 +-
 .../app/admin/_components/SwitchField.tsx     |   6 +-
 .../contest/[id]/_components/Columns.tsx      |   6 +-
 .../problem/_components/TestcaseItem.tsx      |   3 +-
 .../auth/ResetPasswordEmailVerify.tsx         |   2 +-
 .../components/auth/SignUpEmailVerify.tsx     |   2 +-
 apps/frontend/package.json                    |   1 -
 apps/frontend/tailwind.config.ts              |  19 ++-
 pnpm-lock.yaml                                | 108 +++++++++++++-----
 9 files changed, 105 insertions(+), 44 deletions(-)

diff --git a/apps/frontend/app/(main)/contest/[contestId]/@tabs/_components/RegisterButton.tsx b/apps/frontend/app/(main)/contest/[contestId]/@tabs/_components/RegisterButton.tsx
index 1dcdd4636a..6187dead6e 100644
--- a/apps/frontend/app/(main)/contest/[contestId]/@tabs/_components/RegisterButton.tsx
+++ b/apps/frontend/app/(main)/contest/[contestId]/@tabs/_components/RegisterButton.tsx
@@ -181,7 +181,7 @@ export default function RegisterButton({
                   })}
                   type="number"
                   className={cn(
-                    'h-12 w-full [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none',
+                    'hide-spin-button h-12 w-full',
                     errors.invitationCode &&
                       'border-red-500 focus-visible:ring-red-500'
                   )}
diff --git a/apps/frontend/app/admin/_components/SwitchField.tsx b/apps/frontend/app/admin/_components/SwitchField.tsx
index d6b229b2a6..53e67d2083 100644
--- a/apps/frontend/app/admin/_components/SwitchField.tsx
+++ b/apps/frontend/app/admin/_components/SwitchField.tsx
@@ -61,11 +61,7 @@ export default function SwitchField({
             id={name}
             type={type}
             placeholder={placeholder}
-            className={cn(
-              inputStyle,
-              'h-[36px] w-[380px]',
-              '[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none'
-            )}
+            className={cn(inputStyle, 'hide-spin-button h-[36px] w-[380px]')}
             {...register(name, {
               onChange: () => trigger(name)
             })}
diff --git a/apps/frontend/app/admin/contest/[id]/_components/Columns.tsx b/apps/frontend/app/admin/contest/[id]/_components/Columns.tsx
index a34faf9c11..dc88eaa3f5 100644
--- a/apps/frontend/app/admin/contest/[id]/_components/Columns.tsx
+++ b/apps/frontend/app/admin/contest/[id]/_components/Columns.tsx
@@ -5,7 +5,6 @@ import OptionSelect from '@/components/OptionSelect'
 import { Badge } from '@/components/ui/badge'
 import { Input } from '@/components/ui/input'
 import { GET_BELONGED_CONTESTS } from '@/graphql/contest/queries'
-import { cn } from '@/lib/utils'
 import type { Level } from '@/types/type'
 import { useQuery } from '@apollo/client'
 import type { ColumnDef, Row } from '@tanstack/react-table'
@@ -72,10 +71,7 @@ export const columns = (
       <div className="flex justify-center">
         <Input
           defaultValue={row.getValue('score')}
-          className={cn(
-            'w-[70px] focus-visible:ring-0',
-            '[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none'
-          )}
+          className="hide-spin-button w-[70px] focus-visible:ring-0"
           type="number"
           min={0}
           onKeyDown={(e) => {
diff --git a/apps/frontend/app/admin/problem/_components/TestcaseItem.tsx b/apps/frontend/app/admin/problem/_components/TestcaseItem.tsx
index 303eb63fec..062f2eeea9 100644
--- a/apps/frontend/app/admin/problem/_components/TestcaseItem.tsx
+++ b/apps/frontend/app/admin/problem/_components/TestcaseItem.tsx
@@ -86,8 +86,7 @@ export default function TestcaseItem({
             type="number"
             min={0}
             className={cn(
-              'h-5 w-8 rounded-sm border text-center text-xs',
-              '[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none',
+              'hide-spin-button h-5 w-8 rounded-sm border text-center text-xs',
               isInvalid(getValues('testcases')[index].scoreWeight)
                 ? 'border-red-500'
                 : 'border-gray-300'
diff --git a/apps/frontend/components/auth/ResetPasswordEmailVerify.tsx b/apps/frontend/components/auth/ResetPasswordEmailVerify.tsx
index 4988e20925..4f78f13864 100644
--- a/apps/frontend/components/auth/ResetPasswordEmailVerify.tsx
+++ b/apps/frontend/components/auth/ResetPasswordEmailVerify.tsx
@@ -140,7 +140,7 @@ export default function ResetPasswordEmailVerify() {
       <Input
         type="number"
         className={cn(
-          '[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none',
+          'hide-spin-button',
           inputFocused && 'ring-1 focus-visible:ring-1 disabled:ring-0',
           errors.verificationCode || codeError
             ? 'ring-red-500 focus-visible:ring-red-500'
diff --git a/apps/frontend/components/auth/SignUpEmailVerify.tsx b/apps/frontend/components/auth/SignUpEmailVerify.tsx
index fbb162b367..39f7e5f742 100644
--- a/apps/frontend/components/auth/SignUpEmailVerify.tsx
+++ b/apps/frontend/components/auth/SignUpEmailVerify.tsx
@@ -193,7 +193,7 @@ export default function SignUpEmailVerify() {
           <Input
             type="number"
             className={cn(
-              'mt-2 [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none',
+              'hide-spin-button mt-2',
               'focus-visible:border-primary w-full focus-visible:ring-0',
               (errors.verificationCode || expired || codeError) &&
                 'border-red-500 focus-visible:border-red-500'
diff --git a/apps/frontend/package.json b/apps/frontend/package.json
index 03d4990694..92e579dd26 100644
--- a/apps/frontend/package.json
+++ b/apps/frontend/package.json
@@ -108,7 +108,6 @@
     "msw": "^2.4.1",
     "postcss": "^8.4.41",
     "tailwind-merge": "^2.5.2",
-    "tailwind-scrollbar-hide": "^1.1.7",
     "tailwindcss": "^3.4.10",
     "tailwindcss-animate": "^1.0.7",
     "typescript": "^5.5.4",
diff --git a/apps/frontend/tailwind.config.ts b/apps/frontend/tailwind.config.ts
index 42d9cd9411..8fb509df8d 100644
--- a/apps/frontend/tailwind.config.ts
+++ b/apps/frontend/tailwind.config.ts
@@ -3,6 +3,7 @@ import typography from '@tailwindcss/typography'
 import type { Config } from 'tailwindcss'
 import animate from 'tailwindcss-animate'
 import defaultTheme from 'tailwindcss/defaultTheme'
+import type { PluginAPI } from 'tailwindcss/types/config'
 
 export default {
   darkMode: ['class'],
@@ -70,5 +71,21 @@ export default {
       }
     }
   },
-  plugins: [animate, typography, require('tailwind-scrollbar-hide')]
+  plugins: [
+    animate,
+    typography,
+    function ({ addUtilities }: { addUtilities: PluginAPI['addUtilities'] }) {
+      addUtilities({
+        '.hide-spin-button': {
+          appearance: 'textfield',
+          '&::-webkit-inner-spin-button': {
+            appearance: 'none'
+          },
+          '&::-webkit-outer-spin-button': {
+            appearance: 'none'
+          }
+        }
+      })
+    }
+  ]
 } satisfies Config
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3a9803f100..4dd30f4358 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -58,7 +58,7 @@ importers:
         version: 0.6.6(@trivago/prettier-plugin-sort-imports@4.3.0(prettier@3.3.3))(prettier@3.3.3)
       ts-node:
         specifier: ^10.9.2
-        version: 10.9.2(@swc/core@1.7.23(@swc/helpers@0.5.13))(@types/node@22.5.4)(typescript@5.5.4)
+        version: 10.9.2(@swc/core@1.7.23)(@types/node@22.5.4)(typescript@5.5.4)
       typescript:
         specifier: ^5.5.4
         version: 5.5.4
@@ -443,10 +443,10 @@ importers:
         version: 1.1.2(@types/react-dom@18.3.0)(@types/react@18.3.5)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@sentry/nextjs':
         specifier: ^8.27.0
-        version: 8.28.0(@opentelemetry/api@1.9.0)(@opentelemetry/core@1.26.0(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.52.1(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@1.26.0(@opentelemetry/api@1.9.0))(next@14.2.7(@babel/core@7.25.2)(@opentelemetry/api@1.9.0)(@playwright/test@1.47.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)(webpack@5.94.0(@swc/core@1.7.23(@swc/helpers@0.5.13)))
+        version: 8.28.0(@opentelemetry/api@1.9.0)(@opentelemetry/core@1.26.0(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.52.1(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@1.26.0(@opentelemetry/api@1.9.0))(next@14.2.7(@babel/core@7.25.2)(@opentelemetry/api@1.9.0)(@playwright/test@1.47.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)(webpack@5.94.0(@swc/core@1.7.23))
       '@tailwindcss/typography':
         specifier: ^0.5.15
-        version: 0.5.15(tailwindcss@3.4.10(ts-node@10.9.2(@swc/core@1.7.23(@swc/helpers@0.5.13))(@types/node@20.16.5)(typescript@5.5.4)))
+        version: 0.5.15(tailwindcss@3.4.10(ts-node@10.9.2(@swc/core@1.7.23)(@types/node@20.16.5)(typescript@5.5.4)))
       '@tanstack/react-query':
         specifier: ^5.53.1
         version: 5.55.0(react@18.3.1)
@@ -637,15 +637,12 @@ importers:
       tailwind-merge:
         specifier: ^2.5.2
         version: 2.5.2
-      tailwind-scrollbar-hide:
-        specifier: ^1.1.7
-        version: 1.1.7
       tailwindcss:
         specifier: ^3.4.10
-        version: 3.4.10(ts-node@10.9.2(@swc/core@1.7.23(@swc/helpers@0.5.13))(@types/node@20.16.5)(typescript@5.5.4))
+        version: 3.4.10(ts-node@10.9.2(@swc/core@1.7.23)(@types/node@20.16.5)(typescript@5.5.4))
       tailwindcss-animate:
         specifier: ^1.0.7
-        version: 1.0.7(tailwindcss@3.4.10(ts-node@10.9.2(@swc/core@1.7.23(@swc/helpers@0.5.13))(@types/node@20.16.5)(typescript@5.5.4)))
+        version: 1.0.7(tailwindcss@3.4.10(ts-node@10.9.2(@swc/core@1.7.23)(@types/node@20.16.5)(typescript@5.5.4)))
       typescript:
         specifier: ^5.5.4
         version: 5.5.4
@@ -10093,9 +10090,6 @@ packages:
   tailwind-merge@2.5.2:
     resolution: {integrity: sha512-kjEBm+pvD+6eAwzJL2Bi+02/9LFLal1Gs61+QB7HvTfQQ0aXwC5LGT8PEt1gS0CWKktKe6ysPTAy3cBC5MeiIg==}
 
-  tailwind-scrollbar-hide@1.1.7:
-    resolution: {integrity: sha512-X324n9OtpTmOMqEgDUEA/RgLrNfBF/jwJdctaPZDzB3mppxJk7TLIDmOreEDm1Bq4R9LSPu4Epf8VSdovNU+iA==}
-
   tailwindcss-animate@1.0.7:
     resolution: {integrity: sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==}
     peerDependencies:
@@ -15252,7 +15246,7 @@ snapshots:
       '@sentry/types': 8.28.0
       '@sentry/utils': 8.28.0
 
-  '@sentry/nextjs@8.28.0(@opentelemetry/api@1.9.0)(@opentelemetry/core@1.26.0(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.52.1(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@1.26.0(@opentelemetry/api@1.9.0))(next@14.2.7(@babel/core@7.25.2)(@opentelemetry/api@1.9.0)(@playwright/test@1.47.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)(webpack@5.94.0(@swc/core@1.7.23(@swc/helpers@0.5.13)))':
+  '@sentry/nextjs@8.28.0(@opentelemetry/api@1.9.0)(@opentelemetry/core@1.26.0(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.52.1(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@1.26.0(@opentelemetry/api@1.9.0))(next@14.2.7(@babel/core@7.25.2)(@opentelemetry/api@1.9.0)(@playwright/test@1.47.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)(webpack@5.94.0(@swc/core@1.7.23))':
     dependencies:
       '@opentelemetry/instrumentation-http': 0.52.1(@opentelemetry/api@1.9.0)
       '@opentelemetry/semantic-conventions': 1.27.0
@@ -15264,14 +15258,14 @@ snapshots:
       '@sentry/types': 8.28.0
       '@sentry/utils': 8.28.0
       '@sentry/vercel-edge': 8.28.0
-      '@sentry/webpack-plugin': 2.22.3(webpack@5.94.0(@swc/core@1.7.23(@swc/helpers@0.5.13)))
+      '@sentry/webpack-plugin': 2.22.3(webpack@5.94.0(@swc/core@1.7.23))
       chalk: 3.0.0
       next: 14.2.7(@babel/core@7.25.2)(@opentelemetry/api@1.9.0)(@playwright/test@1.47.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       resolve: 1.22.8
       rollup: 3.29.4
       stacktrace-parser: 0.1.10
     optionalDependencies:
-      webpack: 5.94.0(@swc/core@1.7.23(@swc/helpers@0.5.13))
+      webpack: 5.94.0(@swc/core@1.7.23)
     transitivePeerDependencies:
       - '@opentelemetry/api'
       - '@opentelemetry/core'
@@ -15349,12 +15343,12 @@ snapshots:
       '@sentry/types': 8.28.0
       '@sentry/utils': 8.28.0
 
-  '@sentry/webpack-plugin@2.22.3(webpack@5.94.0(@swc/core@1.7.23(@swc/helpers@0.5.13)))':
+  '@sentry/webpack-plugin@2.22.3(webpack@5.94.0(@swc/core@1.7.23))':
     dependencies:
       '@sentry/bundler-plugin-core': 2.22.3
       unplugin: 1.0.1
       uuid: 9.0.1
-      webpack: 5.94.0(@swc/core@1.7.23(@swc/helpers@0.5.13))
+      webpack: 5.94.0(@swc/core@1.7.23)
     transitivePeerDependencies:
       - encoding
       - supports-color
@@ -15820,13 +15814,13 @@ snapshots:
     dependencies:
       defer-to-connect: 2.0.1
 
-  '@tailwindcss/typography@0.5.15(tailwindcss@3.4.10(ts-node@10.9.2(@swc/core@1.7.23(@swc/helpers@0.5.13))(@types/node@20.16.5)(typescript@5.5.4)))':
+  '@tailwindcss/typography@0.5.15(tailwindcss@3.4.10(ts-node@10.9.2(@swc/core@1.7.23)(@types/node@20.16.5)(typescript@5.5.4)))':
     dependencies:
       lodash.castarray: 4.4.0
       lodash.isplainobject: 4.0.6
       lodash.merge: 4.6.2
       postcss-selector-parser: 6.0.10
-      tailwindcss: 3.4.10(ts-node@10.9.2(@swc/core@1.7.23(@swc/helpers@0.5.13))(@types/node@20.16.5)(typescript@5.5.4))
+      tailwindcss: 3.4.10(ts-node@10.9.2(@swc/core@1.7.23)(@types/node@20.16.5)(typescript@5.5.4))
 
   '@tanstack/query-core@5.54.1': {}
 
@@ -21445,13 +21439,13 @@ snapshots:
       camelcase-css: 2.0.1
       postcss: 8.4.45
 
-  postcss-load-config@4.0.2(postcss@8.4.45)(ts-node@10.9.2(@swc/core@1.7.23(@swc/helpers@0.5.13))(@types/node@20.16.5)(typescript@5.5.4)):
+  postcss-load-config@4.0.2(postcss@8.4.45)(ts-node@10.9.2(@swc/core@1.7.23)(@types/node@20.16.5)(typescript@5.5.4)):
     dependencies:
       lilconfig: 3.1.2
       yaml: 2.5.1
     optionalDependencies:
       postcss: 8.4.45
-      ts-node: 10.9.2(@swc/core@1.7.23(@swc/helpers@0.5.13))(@types/node@20.16.5)(typescript@5.5.4)
+      ts-node: 10.9.2(@swc/core@1.7.23)(@types/node@20.16.5)(typescript@5.5.4)
 
   postcss-nested@6.2.0(postcss@8.4.45):
     dependencies:
@@ -22719,13 +22713,11 @@ snapshots:
 
   tailwind-merge@2.5.2: {}
 
-  tailwind-scrollbar-hide@1.1.7: {}
-
-  tailwindcss-animate@1.0.7(tailwindcss@3.4.10(ts-node@10.9.2(@swc/core@1.7.23(@swc/helpers@0.5.13))(@types/node@20.16.5)(typescript@5.5.4))):
+  tailwindcss-animate@1.0.7(tailwindcss@3.4.10(ts-node@10.9.2(@swc/core@1.7.23)(@types/node@20.16.5)(typescript@5.5.4))):
     dependencies:
-      tailwindcss: 3.4.10(ts-node@10.9.2(@swc/core@1.7.23(@swc/helpers@0.5.13))(@types/node@20.16.5)(typescript@5.5.4))
+      tailwindcss: 3.4.10(ts-node@10.9.2(@swc/core@1.7.23)(@types/node@20.16.5)(typescript@5.5.4))
 
-  tailwindcss@3.4.10(ts-node@10.9.2(@swc/core@1.7.23(@swc/helpers@0.5.13))(@types/node@20.16.5)(typescript@5.5.4)):
+  tailwindcss@3.4.10(ts-node@10.9.2(@swc/core@1.7.23)(@types/node@20.16.5)(typescript@5.5.4)):
     dependencies:
       '@alloc/quick-lru': 5.2.0
       arg: 5.0.2
@@ -22744,7 +22736,7 @@ snapshots:
       postcss: 8.4.45
       postcss-import: 15.1.0(postcss@8.4.45)
       postcss-js: 4.0.1(postcss@8.4.45)
-      postcss-load-config: 4.0.2(postcss@8.4.45)(ts-node@10.9.2(@swc/core@1.7.23(@swc/helpers@0.5.13))(@types/node@20.16.5)(typescript@5.5.4))
+      postcss-load-config: 4.0.2(postcss@8.4.45)(ts-node@10.9.2(@swc/core@1.7.23)(@types/node@20.16.5)(typescript@5.5.4))
       postcss-nested: 6.2.0(postcss@8.4.45)
       postcss-selector-parser: 6.1.2
       resolve: 1.22.8
@@ -22773,6 +22765,17 @@ snapshots:
     optionalDependencies:
       '@swc/core': 1.7.23(@swc/helpers@0.5.13)
 
+  terser-webpack-plugin@5.3.10(@swc/core@1.7.23)(webpack@5.94.0(@swc/core@1.7.23)):
+    dependencies:
+      '@jridgewell/trace-mapping': 0.3.25
+      jest-worker: 27.5.1
+      schema-utils: 3.3.0
+      serialize-javascript: 6.0.2
+      terser: 5.31.6
+      webpack: 5.94.0(@swc/core@1.7.23)
+    optionalDependencies:
+      '@swc/core': 1.7.23(@swc/helpers@0.5.13)
+
   terser@5.31.6:
     dependencies:
       '@jridgewell/source-map': 0.3.6
@@ -22925,7 +22928,28 @@ snapshots:
     optionalDependencies:
       '@swc/core': 1.7.23(@swc/helpers@0.5.13)
 
-  ts-node@10.9.2(@swc/core@1.7.23(@swc/helpers@0.5.13))(@types/node@22.5.4)(typescript@5.5.4):
+  ts-node@10.9.2(@swc/core@1.7.23)(@types/node@20.16.5)(typescript@5.5.4):
+    dependencies:
+      '@cspotcode/source-map-support': 0.8.1
+      '@tsconfig/node10': 1.0.11
+      '@tsconfig/node12': 1.0.11
+      '@tsconfig/node14': 1.0.3
+      '@tsconfig/node16': 1.0.4
+      '@types/node': 20.16.5
+      acorn: 8.12.1
+      acorn-walk: 8.3.3
+      arg: 4.1.3
+      create-require: 1.1.1
+      diff: 4.0.2
+      make-error: 1.3.6
+      typescript: 5.5.4
+      v8-compile-cache-lib: 3.0.1
+      yn: 3.1.1
+    optionalDependencies:
+      '@swc/core': 1.7.23(@swc/helpers@0.5.13)
+    optional: true
+
+  ts-node@10.9.2(@swc/core@1.7.23)(@types/node@22.5.4)(typescript@5.5.4):
     dependencies:
       '@cspotcode/source-map-support': 0.8.1
       '@tsconfig/node10': 1.0.11
@@ -23331,6 +23355,36 @@ snapshots:
       - esbuild
       - uglify-js
 
+  webpack@5.94.0(@swc/core@1.7.23):
+    dependencies:
+      '@types/estree': 1.0.5
+      '@webassemblyjs/ast': 1.12.1
+      '@webassemblyjs/wasm-edit': 1.12.1
+      '@webassemblyjs/wasm-parser': 1.12.1
+      acorn: 8.12.1
+      acorn-import-attributes: 1.9.5(acorn@8.12.1)
+      browserslist: 4.23.3
+      chrome-trace-event: 1.0.4
+      enhanced-resolve: 5.17.1
+      es-module-lexer: 1.5.4
+      eslint-scope: 5.1.1
+      events: 3.3.0
+      glob-to-regexp: 0.4.1
+      graceful-fs: 4.2.11
+      json-parse-even-better-errors: 2.3.1
+      loader-runner: 4.3.0
+      mime-types: 2.1.35
+      neo-async: 2.6.2
+      schema-utils: 3.3.0
+      tapable: 2.2.1
+      terser-webpack-plugin: 5.3.10(@swc/core@1.7.23)(webpack@5.94.0(@swc/core@1.7.23))
+      watchpack: 2.4.2
+      webpack-sources: 3.2.3
+    transitivePeerDependencies:
+      - '@swc/core'
+      - esbuild
+      - uglify-js
+
   whatwg-encoding@3.1.1:
     dependencies:
       iconv-lite: 0.6.3