diff --git a/packages/frontend/public/wave-border.svg b/packages/frontend/public/wave-border-card.svg
similarity index 100%
rename from packages/frontend/public/wave-border.svg
rename to packages/frontend/public/wave-border-card.svg
diff --git a/packages/frontend/public/wave-border-layout.svg b/packages/frontend/public/wave-border-layout.svg
new file mode 100644
index 0000000..d32a0dd
--- /dev/null
+++ b/packages/frontend/public/wave-border-layout.svg
@@ -0,0 +1,13 @@
+
diff --git a/packages/frontend/src/components/shared/WavyBorder/WavyBorder.tsx b/packages/frontend/src/components/shared/WavyBorder/WavyBorder.tsx
index 45bc723..a4ab1e0 100644
--- a/packages/frontend/src/components/shared/WavyBorder/WavyBorder.tsx
+++ b/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 (
-