Feature: cn(tailwind-merge + clsx)을 추가한다 (#77)

* feat: `clsx`와 `tailwind-merge`를 설치한다

* refactor: `cn`을 적용한다

Author: guesung

packages/shared/package.json

@@ -56,5 +56,9 @@
     "@extension/storage": "workspace:*",
     "@extension/tsconfig": "workspace:*",
     "esbuild-node-externals": "^1.14.0"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^2.4.0"
   }
 }

packages/shared/src/utils/index.ts

@@ -7,3 +7,4 @@ export * from './url';
 export * from './error';
 export * from './supabase';
 export * from './notion';
+export * from './tailwind';

packages/shared/src/utils/tailwind.ts

@@ -0,0 +1,6 @@
+import { ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export const cn = (...inputs: ClassValue[]) => {
+  return twMerge(clsx(inputs));
+};

packages/web/src/components/YoutubeEmbed.tsx

@@ -1,3 +1,4 @@
+import { cn } from '@extension/shared/utils';
 import { IframeHTMLAttributes } from 'react';
 
 interface YoutubeEmbedProps extends IframeHTMLAttributes<HTMLIFrameElement> {
@@ -10,7 +11,7 @@ export default function YoutubeEmbed({ embedId, className, isAutoPlay = false, .
       <iframe
         width="853"
         height="480"
-        src={`https://www.youtube.com/embed/${embedId}${isAutoPlay ? '?autoplay=1' : ''}`}
+        src={cn(`https://www.youtube.com/embed/${embedId}`, { '?autoplay=1': isAutoPlay })}
         allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
         allowFullScreen
         title="Embedded youtube"

pages/side-panel/src/SidePanel.tsx

@@ -36,7 +36,7 @@ export default function SidePanel() {
           </section>
         </main>
       </OverlayProvider>
-      <ReactQueryDevtools initialIsOpen={false} />
+      {/* <ReactQueryDevtools initialIsOpen={false} /> */}
     </QueryClientProvider>
   );
 }

pages/side-panel/src/components/MemoForm.tsx

@@ -11,7 +11,7 @@ import {
 } from '@extension/shared/hooks';
 import { MemoSupabaseResponse } from '@extension/shared/types';
 import { getFormattedMemo, getSupabaseClient, I18n, responseUpdateSidePanel } from '@extension/shared/utils/extension';
-import { Toast } from '@extension/ui';
+import { cn, Toast } from '@extension/ui';
 import withAuthentication from '@src/hoc/withAuthentication';
 import { UseQueryResult } from '@tanstack/react-query';
 
@@ -90,7 +90,9 @@ function MemoForm() {
   return (
     <form className="form-control h-full" onSubmit={handleFormSubmit}>
       <textarea
-        className={`textarea textarea-bordered h-full border-2 resize-none ${isSaved ? '' : 'border-cyan-900 focus:border-cyan-900 '}`}
+        className={cn('textarea textarea-bordered h-full border-2 resize-none', {
+          'border-cyan-900 focus:border-cyan-900': isSaved,
+        })}
         id="memo-textarea"
         placeholder="memo"
         onChange={handleMemoTextAreaChange}