🔧 chore: default Header를 서버, 클라이언트 양쪽 사용을 위한 버튼 분리 #6

src/layout/Mobile/MobileHeader/DefaultHeader/ClientBackButton.tsx

@@ -0,0 +1,28 @@
+import Link from "next/link";
+import { FC } from "react";
+import { UrlObject } from "url";
+
+import { ArrowLeftSmallIcon } from "@/components/icons";
+
+interface Props {
+  href?: UrlObject | string;
+  onClick?: () => void;
+}
+
+const ClientBackButton: FC<Props> = ({ href, onClick }) => {
+  if (href) {
+    return (
+      <Link href={href} onClick={onClick}>
+        <ArrowLeftSmallIcon width={24} height={24} />
+      </Link>
+    );
+  } else {
+    return (
+      <button onClick={onClick}>
+        <ArrowLeftSmallIcon width={24} height={24} />
+      </button>
+    );
+  }
+};
+
+export default ClientBackButton;

src/layout/Mobile/MobileHeader/DefaultHeader/DefaultHeader.tsx

@@ -1,27 +1,24 @@
-import Link from "next/link";
 import { FC } from "react";
 import { UrlObject } from "url";
 
-import { ArrowLeftSmallIcon } from "@/components/icons";
+import ClientBackButton from "./ClientBackButton";
 
 interface Props {
   label?: string;
   showBackButton?: boolean;
-  href: UrlObject | string;
+  href?: UrlObject | string;
+  onClick?: () => void;
 }
 
 const DefaultHeader: FC<Props> = ({
   label = "",
   showBackButton = true,
   href,
+  onClick,
 }) => {
   return (
     <header className="fixed top-0 z-[999] flex h-[44px] w-full max-w-none items-center justify-between bg-gray-scale-0 px-[10px] text-gray-900 lg:max-w-[450px]">
-      {showBackButton && (
-        <Link href={href}>
-          <ArrowLeftSmallIcon width={24} height={24} />
-        </Link>
-      )}
+      {showBackButton && <ClientBackButton href={href} onClick={onClick} />}
 
       <span className="max-w-[200px] truncate text-label-semi">{label}</span>
       <div className="size-[44px]" />