Develop

src/components/Heading/Heading.stories.tsx

@@ -0,0 +1,15 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Heading } from './Heading';
+
+export default {
+  title: 'Heading',
+  component: Heading,
+  args: {
+    as: 'h1',
+    children: 'Heading Text',
+  },
+} as ComponentMeta<typeof Heading>;
+
+const Template: ComponentStory<typeof Heading> = (args) => <Heading {...args} />;
+
+export const Default = Template.bind({});

src/components/Heading/Heading.styled.tsx

@@ -0,0 +1,13 @@
+import styled from '@emotion/styled';
+import { pxToRem, media } from 'utils';
+
+export const StyledHeading = styled.h1`
+  font-size: ${pxToRem(32)};
+  color: ${({ theme }) => theme.color.primaryOrange};
+  font-weight: bold;
+  padding-top: ${pxToRem(16)};
+
+  ${media.mobile} {
+    font-size: ${pxToRem(26)};
+  }
+`;

src/components/Heading/Heading.tsx

@@ -0,0 +1,10 @@
+import { HeadingProps } from './Heading.types';
+import { StyledHeading } from './Heading.styled';
+
+export const Heading = ({ as, className, children }: HeadingProps): JSX.Element => {
+  return (
+    <StyledHeading as={as} className={className}>
+      {children}
+    </StyledHeading>
+  );
+};

src/components/Heading/Heading.types.ts

@@ -0,0 +1,5 @@
+export interface HeadingProps {
+  as: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+  className?: string;
+  children: React.ReactNode;
+}

src/components/index.ts

@@ -1,6 +1,7 @@
 export * from './CookingInfo/CookingInfo';
 export * from './Logo/Logo';
 export * from './Loading/Loading';
+export * from './Heading/Heading';
 export * from './Layout/Layout';
 export * from './Header/Header';
 export * from './EmptyPage/EmptyPage';