refactor: break out Section container

components/Section/Header/header.module.css

@@ -0,0 +1,20 @@
+.header {
+  display: grid;
+  gap: var(--Spacing-x1);
+  grid-template-columns: 1fr auto;
+}
+
+.title {
+  grid-column: 1/2;
+  grid-row: 1/2;
+}
+
+.link {
+  grid-column: 2/-1;
+  grid-row: 1/2;
+}
+
+.subtitle {
+  grid-column: 1/-1;
+  grid-row: 2;
+}

components/Section/Header/index.tsx

@@ -0,0 +1,32 @@
+import Link from "@/components/TempDesignSystem/Link"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+import Title from "@/components/TempDesignSystem/Text/Title"
+
+import styles from "./header.module.css"
+
+import type { HeaderProps } from "@/types/components/myPages/header"
+
+export default function SectionHeader({
+  link,
+  subtitle,
+  title,
+  topTitle = false,
+}: HeaderProps) {
+  return (
+    <header className={styles.header}>
+      <Title
+        as={topTitle ? "h2" : "h3"}
+        className={styles.title}
+        level={topTitle ? "h1" : "h2"}
+      >
+        {title}
+      </Title>
+      {link ? (
+        <Link className={styles.link} href={link.href} variant="myPage">
+          {link.text}
+        </Link>
+      ) : null}
+      <Subtitle className={styles.subtitle}>{subtitle}</Subtitle>
+    </header>
+  )
+}