refactor: break out Section container

components/Section/Container/container.module.css

@@ -0,0 +1,4 @@
+.container {
+  display: grid;
+  gap: var(--Spacing-x3);
+}

components/Section/Container/index.tsx

@@ -0,0 +1,13 @@
+import styles from "./container.module.css"
+
+export default function SectionContainer({
+  children,
+  className = "",
+  ...props
+}: React.HTMLAttributes<HTMLElement>) {
+  return (
+    <section {...props} className={`${styles.container} ${className}`}>
+      {children}
+    </section>
+  )
+}

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>
+  )
+}