🎨 style: adjust wavy border and add layout wavy border

packages/frontend/src/components/shared/WavyBorder/WavyBorder.tsx

@@ -1,15 +1,37 @@
-import React, { ComponentPropsWithoutRef } from 'react';
+import React, { ComponentPropsWithoutRef, useMemo } from 'react';
 import { cn } from 'utils/classnames';
 
-export interface WavyBorderProps extends ComponentPropsWithoutRef<'div'> {}
+type WavyBorderType = 'card' | 'layout';
+
+export interface WavyBorderProps extends ComponentPropsWithoutRef<'div'> {
+  type?: WavyBorderType;
+}
 
 export const WavyBorder = ({
   className,
   children,
+  type = 'card',
   ...props
 }: WavyBorderProps) => {
+  const imageSrc = useMemo(() => {
+    switch (type) {
+      case 'card':
+        return '/wave-border-card.svg';
+      case 'layout':
+        return '/wave-border-layout.svg';
+      default:
+        return '/wave-border-card.svg';
+    }
+  }, [type]);
+
   return (
-    <div {...props} className={cn('wave', className)}>
+    <div
+      {...props}
+      className={cn('w-full h-1 bg-repeat-x bg-top bg-cover', className)}
+      style={{
+        backgroundImage: `url(${imageSrc})`,
+      }}
+    >
       {children}
     </div>
   );