feat: ✨ biome, oxlint

gracefullight · Jun 22, 2024 · 18ec6f8 · 18ec6f8
1 parent 6fdb1bf
commit 18ec6f8
Show file tree

Hide file tree

Showing 99 changed files with 2,888 additions and 1,657 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1 @@
+apps/web/public/workbox-*.js
diff --git a/.vscode/cspell.json b/.vscode/cspell.json
@@ -3,6 +3,7 @@
     "ahooks",
     "apexcharts",
     "autodocs",
+    "biomejs",
     "clsx",
     "commitlint",
     "Coupang",
@@ -20,6 +21,7 @@
     "nosniff",
     "openapi",
     "otel",
+    "oxlint",
     "picsum",
     "pino",
     "placehold",

diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,11 +1,8 @@
 {
   "[prisma]": { "editor.defaultFormatter": "Prisma.prisma" },
-  "[javascript,typescript,typescriptreact]": {
-    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
-  },
-  "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
     "source.organizeImports": "explicit",
+    "source.organize.biome": "explicit",
     "source.fixAll": "explicit"
   },
   "eslint.workingDirectories": [

diff --git a/apps/web/.eslintrc.cjs b/apps/web/.eslintrc.cjs
diff --git a/apps/web/package.json b/apps/web/package.json
@@ -8,7 +8,6 @@
     "build": "pnpm with-env next build",
     "clean": "git clean -xdf .next .turbo node_modules",
     "dev": "pnpm with-env next dev",
-    "lint": "eslint",
     "start": "pnpm with-env next start",
     "test": "vitest --ui --coverage",
     "type-check": "tsc --noEmit",
@@ -56,7 +55,6 @@
     "zod": "^3.23.8"
   },
   "devDependencies": {
-    "@doss/eslint-config": "workspace:*",
     "@doss/tailwind-config": "workspace:*",
     "@doss/tsconfig": "workspace:*",
     "@prisma/nextjs-monorepo-workaround-plugin": "^5.15.1",

diff --git a/apps/web/public/sw.js b/apps/web/public/sw.js
diff --git a/apps/web/public/workbox-9564d7f6.js b/apps/web/public/workbox-9564d7f6.js
diff --git a/apps/web/src/app/(routes)/all/page.tsx b/apps/web/src/app/(routes)/all/page.tsx
@@ -780,14 +780,14 @@ export default function All() {
       </div>
       <div className="px-2">
         <div className="mb-4 flex items-center gap-4">
-          <h1 className="text-2xl font-bold text-neutral-200">전체</h1>
+          <h1 className="font-bold text-2xl text-neutral-200">전체</h1>
         </div>
         <div className="flex justify-between gap-2 py-2">
           {items.map((item) => (
             <ConditionalLink href={item.link} key={item.title}>
               <div className="flex cursor-pointer select-none flex-col items-center justify-center gap-1 rounded-2xl bg-neutral-700 px-6 py-4 active:bg-neutral-600">
                 {item.IconComponent}
-                <span className="text-sm text-neutral-200">{item.title}</span>
+                <span className="text-neutral-200 text-sm">{item.title}</span>
               </div>
             </ConditionalLink>
           ))}
@@ -832,11 +832,11 @@ export default function All() {
             </div>
           </li>
         </ul>
-        <div className="divider px-2"></div>
+        <div className="divider px-2" />
         <div className="flex flex-col gap-6">
           {sections.map((section) => (
             <div key={section.sectionTitle}>
-              <div className="px-2 pb-4 text-lg font-medium">
+              <div className="px-2 pb-4 font-medium text-lg">
                 {section.sectionTitle}
               </div>
               <ul className="flex flex-col gap-2">
@@ -852,7 +852,7 @@ export default function All() {
                       <span className="font-medium">
                         {item.title}
                         {item.serviceName && (
-                          <span className="text-sm font-normal text-neutral-500">
+                          <span className="font-normal text-neutral-500 text-sm">
                             {` · ${item.serviceName}`}
                           </span>
                         )}

diff --git a/apps/web/src/app/(routes)/benefit/page.tsx b/apps/web/src/app/(routes)/benefit/page.tsx
@@ -47,14 +47,14 @@ export default function Benefit() {
   useEffect(() => {
     if (direction === 1) {
       videoRef.current?.pause();
-      void animate(
+      animate(
         scope.current,
         { y: "-30vh", paddingTop: "3rem" },
         { duration: 0.2 },
       );
     } else {
-      void videoRef.current?.play();
-      void animate(
+      videoRef.current?.play();
+      animate(
         scope.current,
         {
           y: 0,
@@ -63,7 +63,7 @@ export default function Benefit() {
         { duration: 0.2 },
       );
     }
-  }, [direction]);
+  }, [animate, direction, scope.current]);
 
   const { hours: diffHours } = Interval.fromDateTimes(
     DateTime.local(),
@@ -200,11 +200,11 @@ export default function Benefit() {
         />
       </video>
       <div
-        className="bg-base-100 z-10 flex h-full w-screen flex-col pb-4"
+        className="z-10 flex h-full w-screen flex-col bg-base-100 pb-4"
         ref={scope}
       >
         <div className="flex items-center justify-between px-5">
-          <h1 className="text-2xl font-bold text-neutral-200">혜택</h1>
+          <h1 className="font-bold text-2xl text-neutral-200">혜택</h1>
           <button
             className="btn btn-ghost btn-md pr-0 text-lg"
             type="button"
@@ -229,13 +229,13 @@ export default function Benefit() {
               <div className="flex items-center space-x-4">
                 <div
                   className={clsx(
-                    `relative flex items-center justify-center rounded-full border-2 bg-neutral-700 p-3`,
-                    item.isDone ? `border-green-500` : `border-neutral-700`,
+                    "relative flex items-center justify-center rounded-full border-2 bg-neutral-700 p-3",
+                    item.isDone ? "border-green-500" : "border-neutral-700",
                   )}
                 >
                   {item.IconComponent}
                   {item.isDone && (
-                    <div className="absolute -bottom-1 -right-1 rounded-full border border-neutral-700 bg-green-500 p-1">
+                    <div className="-bottom-1 -right-1 absolute rounded-full border border-neutral-700 bg-green-500 p-1">
                       <CheckIcon
                         name="check"
                         className="w-4 text-neutral-700"
@@ -245,8 +245,8 @@ export default function Benefit() {
                   )}
                 </div>
                 <div className="flex flex-col">
-                  <h2 className="text-lg font-medium">{item.title}</h2>
-                  <p className="text-md text-info">{item.subTitle}</p>
+                  <h2 className="font-medium text-lg">{item.title}</h2>
+                  <p className="text-info text-md">{item.subTitle}</p>
                 </div>
               </div>
               {item.badge && (

diff --git a/apps/web/src/app/(routes)/layout.tsx b/apps/web/src/app/(routes)/layout.tsx
@@ -3,7 +3,7 @@ import { BottomNavigation, ScreenCaptureToast } from "~/components/layout";
 
 export default function Layout({ children }: PropsWithChildren) {
   return (
-    <main className="bg-base-100 flex flex-col items-center justify-center pb-24">
+    <main className="flex flex-col items-center justify-center bg-base-100 pb-24">
       {children}
       <BottomNavigation />
       <ScreenCaptureToast />

diff --git a/apps/web/src/app/(routes)/pay/page.tsx b/apps/web/src/app/(routes)/pay/page.tsx
@@ -19,7 +19,7 @@ export default function Pay() {
       <div className="flex flex-col gap-4">
         <div className="flex flex-col bg-neutral-800 pb-1">
           <div className="mb-2 flex items-center justify-between px-6">
-            <h1 className="text-2xl font-bold text-neutral-200">도스페이</h1>
+            <h1 className="font-bold text-2xl text-neutral-200">도스페이</h1>
           </div>
           <DynamicGroupShoppingBanner />
           <QuickAccessButtons />

diff --git a/apps/web/src/app/(routes)/stock/page.tsx b/apps/web/src/app/(routes)/stock/page.tsx
@@ -19,7 +19,7 @@ export default function Stock() {
         <div className="flex flex-col">
           <div className="bg-neutral-800 px-6">
             <div className="mb-4 flex items-center gap-4">
-              <h1 className="text-2xl font-bold text-neutral-200">도스증권</h1>
+              <h1 className="font-bold text-2xl text-neutral-200">도스증권</h1>
               <div className="flex self-end text-sm">
                 <IndexBanner />
               </div>
@@ -29,7 +29,7 @@ export default function Stock() {
           <StockMainTabs />
           <div className="px-6">
             <FeedbackBanner />
-            <div className="divider"></div>
+            <div className="divider" />
             <StockFooter />
           </div>
         </div>

diff --git a/apps/web/src/app/bank/page.tsx b/apps/web/src/app/bank/page.tsx
@@ -25,11 +25,11 @@ export default function Bank() {
     <StackLayout>
       <StackLayoutNavbar items={navItems} isLightBackground />
       <div className="flex flex-grow flex-col bg-neutral-800">
-        <div className="tabs tabs-lg tabs-bordered w-full  bg-neutral-800 px-5">
+        <div className="tabs tabs-lg tabs-bordered w-full bg-neutral-800 px-5">
           {tabs.map((tab, idx) => (
             <a
               key={tab.name}
-              className={clsx(`tab`, {
+              className={clsx("tab", {
                 "tab-active": tabIndex === idx,
                 "text-2xl": isLargeFont,
               })}

diff --git a/apps/web/src/app/bank/setting/page.tsx b/apps/web/src/app/bank/setting/page.tsx
@@ -71,7 +71,7 @@ export default function BankSetting() {
             <div className="avatar">
               <div className="h-8 w-8 rounded-full">
                 <Image
-                  src={`https://placehold.co/100x100?text=me`}
+                  src={"https://placehold.co/100x100?text=me"}
                   alt="thumbnail"
                   loading="lazy"
                   decoding="async"
@@ -84,16 +84,16 @@ export default function BankSetting() {
               <div className="font-semibold text-neutral-300">
                 {session?.user.name}
               </div>
-              <span className="text-sm text-neutral-400">내 정보 수정하기</span>
+              <span className="text-neutral-400 text-sm">내 정보 수정하기</span>
             </div>
           </div>
           <ChevronRightIcon name="chevron-right" size={20} />
         </div>
       </div>
 
       <div className="mt-4 flex flex-col gap-3 bg-neutral-800 py-2">
-        {sections.map((section, index) => (
-          <div key={index} className="flex flex-col">
+        {sections.map((section) => (
+          <div key={section.sectionTitle} className="flex flex-col">
             <div className="px-5 py-2 font-semibold text-neutral-200">
               {section.sectionTitle}
             </div>

diff --git a/apps/web/src/app/bank/transfer/find-account/page.tsx b/apps/web/src/app/bank/transfer/find-account/page.tsx
@@ -21,7 +21,7 @@ export default function BankTransferFindAccount() {
     <StackLayout>
       <StackLayoutNavbar />
       <div className="flex flex-col gap-6 px-6">
-        <h1 className="mt-4 text-2xl font-bold text-neutral-300">
+        <h1 className="mt-4 font-bold text-2xl text-neutral-300">
           어떤 계좌로 보낼까요?
         </h1>
         <input

diff --git a/apps/web/src/app/bank/transfer/page.tsx b/apps/web/src/app/bank/transfer/page.tsx
@@ -23,18 +23,18 @@ export default function BankTransfer() {
     <StackLayout>
       <StackLayoutNavbar />
       <div className="flex flex-col px-6">
-        <h1 className="text-2xl font-bold text-neutral-300">
+        <h1 className="font-bold text-2xl text-neutral-300">
           어디로 돈을 보낼까요?
         </h1>
         <div className="tabs tabs-boxed mt-4 bg-neutral-700">
           <a
-            className={clsx(`tab`, tabIndex === 0 && "tab-active")}
+            className={clsx("tab", tabIndex === 0 && "tab-active")}
             onClick={() => setTabIndex(0)}
           >
             계좌
           </a>
           <a
-            className={clsx(`tab`, tabIndex === 1 && "tab-active")}
+            className={clsx("tab", tabIndex === 1 && "tab-active")}
             onClick={() => setTabIndex(1)}
           >
             연락처

diff --git a/apps/web/src/app/benefit/coupang/page.tsx b/apps/web/src/app/benefit/coupang/page.tsx
@@ -12,10 +12,10 @@ export default function BenefitCoupang() {
     <StackLayout>
       <StackLayoutNavbar />
       <div className="flex flex-col px-6">
-        <div className="text-sm text-neutral-400">
+        <div className="text-neutral-400 text-sm">
           오늘은 이미 포인트를 받았어요
         </div>
-        <div className="pt-2 text-lg font-medium text-neutral-200">
+        <div className="pt-2 font-medium text-lg text-neutral-200">
           쿠팡 로켓배송
           <br />
           인기 상품 구경해볼까요?

diff --git a/apps/web/src/app/benefit/lottery/page.tsx b/apps/web/src/app/benefit/lottery/page.tsx
@@ -44,7 +44,7 @@ export default function BenefitLottery() {
     transition: {
       y: {
         duration: duration,
-        repeat: Infinity,
+        repeat: Number.POSITIVE_INFINITY,
         repeatType: "reverse",
         ease: "easeInOut",
       },
@@ -61,10 +61,10 @@ export default function BenefitLottery() {
       <StackLayoutNavbar items={navItems} />
       {!selected && (
         <div className="flex h-[calc(100vh-140px)] flex-col items-center justify-center">
-          <span className="text-lg font-medium text-neutral-400">
+          <span className="font-medium text-lg text-neutral-400">
             오늘 이루고 싶은 것을 생각하며
           </span>
-          <h1 className="text-xl font-bold text-neutral-200">
+          <h1 className="font-bold text-neutral-200 text-xl">
             복권을 눌러보세요
           </h1>
           <div className="mt-12 flex justify-between gap-2">
@@ -87,32 +87,32 @@ export default function BenefitLottery() {
       {selected && (
         <div>
           <div className="flex flex-col px-6">
-            <h2 className="text-info text-lg font-bold">1일차</h2>
-            <h1 className="mt-2 text-2xl font-bold text-neutral-300">
+            <h2 className="font-bold text-info text-lg">1일차</h2>
+            <h1 className="mt-2 font-bold text-2xl text-neutral-300">
               복권을 매일 확인하면
               <br />
               3일차에 2배 드려요
             </h1>
             <SevenDaysCalendar />
             <div className="mt-4 flex flex-col rounded-2xl bg-neutral-700 px-6 py-8">
               <div className="relative">
-                <div className="text-2xl font-bold text-neutral-300">
+                <div className="font-bold text-2xl text-neutral-300">
                   성공운 좋음
                 </div>
                 <SmileIcon
                   name="smile"
-                  className="absolute -top-1 right-0 text-yellow-400"
+                  className="-top-1 absolute right-0 text-yellow-400"
                   size={48}
                 />
-                <span className="text-info block text-2xl font-bold">6 원</span>
+                <span className="block font-bold text-2xl text-info">6 원</span>
               </div>
-              <p className="mt-2 text-sm text-neutral-400">
+              <p className="mt-2 text-neutral-400 text-sm">
                 작은 행운이 찾아오는 날이에요.
                 <br />
                 소중한 지인들에게 연락해보세요.
               </p>
               <div className="mt-8 flex flex-col gap-1">
-                <span className="text-sm text-neutral-400">
+                <span className="text-neutral-400 text-sm">
                   행운을 줄 귀인의 초성
                 </span>
                 <span className="font-bold text-neutral-300">ㅇㄱ</span>
@@ -121,7 +121,7 @@ export default function BenefitLottery() {
           </div>
           <div className="fixed bottom-0 z-50 flex w-full px-5 pb-4">
             <button
-              className="btn btn-block btn-lg text-info rounded-xl border-none bg-neutral-700 hover:bg-neutral-800"
+              className="btn btn-block btn-lg rounded-xl border-none bg-neutral-700 text-info hover:bg-neutral-800"
               type="button"
               onClick={() => router.push("/benefit/lottery/share")}
             >

diff --git a/apps/web/src/app/benefit/lottery/setting/agreement/page.tsx b/apps/web/src/app/benefit/lottery/setting/agreement/page.tsx
@@ -9,8 +9,8 @@ export default function LotteryAgreement() {
         <div className="flex items-center justify-center bg-neutral-200 py-4">
           <CloverIcon name="clover" className="text-green-500" size={240} />
         </div>
-        <div className="flex flex-col gap-4 bg-neutral-800 px-5 pb-10 pt-5">
-          <h1 className="text-2xl font-bold text-neutral-200">
+        <div className="flex flex-col gap-4 bg-neutral-800 px-5 pt-5 pb-10">
+          <h1 className="font-bold text-2xl text-neutral-200">
             100% 당첨되는
             <br />
             행운 복권을 받아보세요

diff --git a/apps/web/src/app/benefit/lottery/setting/alarm/page.tsx b/apps/web/src/app/benefit/lottery/setting/alarm/page.tsx
@@ -21,7 +21,7 @@ export default function LotterySettingAlarm() {
     <StackLayout>
       <StackLayoutNavbar />
       <div className="flex flex-col px-5">
-        <h1 className="text-xl font-bold text-neutral-300">
+        <h1 className="font-bold text-neutral-300 text-xl">
           복권 신청 완료!
           <br />
           매일 행운을 보내드릴게요
@@ -41,7 +41,7 @@ export default function LotterySettingAlarm() {
             <div className="flex gap-2">
               <ClockIcon name="clock" size={24} />
               <div className="flex flex-col">
-                <span className="text-sm text-neutral-500">시간</span>
+                <span className="text-neutral-500 text-sm">시간</span>
                 <div className="font-medium text-neutral-300">
                   매일 오전 8시
                 </div>
@@ -59,7 +59,7 @@ export default function LotterySettingAlarm() {
             <div className="flex gap-2">
               <CalendarIcon name="calendar" size={24} />
               <div className="flex flex-col">
-                <span className="text-sm text-neutral-500">날짜</span>
+                <span className="text-neutral-500 text-sm">날짜</span>
                 <div className="font-medium text-neutral-300">내일부터</div>
               </div>
             </div>