feat: add masthead component (#48)

packages/core/lib/components/Masthead.tsx

@@ -0,0 +1,68 @@
+import { colors } from "../colors/color";
+import { Label } from "./Label";
+
+export type MastheadProps<E extends React.ElementType> = {
+  className?: string;
+} & React.ComponentPropsWithoutRef<E>;
+
+export const Masthead = <E extends React.ElementType = "div">({
+  className = "",
+  ...props
+}: MastheadProps<E>) => {
+  const flagStyle = {
+    display: "inline-block",
+    width: 24,
+    height: 16,
+  };
+
+  return (
+    <div className={`${className}`} {...props}>
+      <div
+        className="w-full flex flex-row items-center px-4 gap-5 py-2"
+        style={{
+          backgroundColor: colors.secondary5,
+        }}
+      >
+        <RepublicOfKoreaFlagIcon style={flagStyle} />
+        <Label
+          size="s"
+          color={"gray-90"}
+          style={{
+            display: "inline-block",
+          }}
+        >
+          이 누리집은 대한민국 공식 전자정부 누리집입니다.
+        </Label>
+      </div>
+    </div>
+  );
+};
+
+const RepublicOfKoreaFlagIcon: React.FC<{ style?: React.CSSProperties }> = ({
+  style,
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="-72 -48 144 96"
+    style={style}
+  >
+    <path fill="#fff" d="M-72-48v96H72v-96z" />
+    <g stroke="#000" stroke-width="4">
+      <path
+        transform="rotate(33.69006752598)"
+        d="M-50-12v24m6 0v-24m6 0v24m76 0V1m0-2v-11m6 0v11m0 2v11m6 0V1m0-2v-11"
+      />
+      <path
+        transform="rotate(-33.69006752598)"
+        d="M-50-12v24m6 0V1m0-2v-11m6 0v24m76 0V1m0-2v-11m6 0v24m6 0V1m0-2v-11"
+      />
+    </g>
+    <g transform="rotate(33.69006752598)">
+      <path fill="#cd2e3a" d="M12 0a18 18 0 11-36 0 24 24 0 1148 0" />
+      <path
+        fill="#0047a0"
+        d="M0 0a12 12 0 1124 0 24 24 0 11-48 0 12 12 0 1024 0"
+      />
+    </g>
+  </svg>
+);

packages/core/lib/index.ts

@@ -28,6 +28,7 @@ import { Pagination } from "./components/Pagination";
 import { FileUpload } from "./components/FileUpload";
 import { Calendar } from "./components/Calendar";
 import { Select } from "./components/Select";
+import { Masthead } from "./components/Masthead";
 
 export { Display, Heading, Title, Body, Detail, Label, Link, colors };
 export {
@@ -51,4 +52,5 @@ export {
   FileUpload,
   Calendar,
   Select,
+  Masthead,
 };

stories/core/Masthead.stories.ts

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+import { Masthead } from "../../packages/core/lib";
+
+const meta = {
+  title: "Components/Masthead",
+  component: Masthead,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Masthead>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};