feat: migration of mailto

package.json

@@ -138,7 +138,8 @@
         "assets": [
           "package.json",
           "package-lock.json",
-          "CHANGELOG.md"
+          "CHANGELOG.md",
+          "src/scss/**/*.scss"
         ],
         "message": "chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}"
       }
@@ -147,7 +148,8 @@
   "files": [
     "README.md",
     "LICENSE",
-    "dist"
+    "dist",
+    "src/scss"
   ],
   "publishConfig": {
     "registry": "https://npm.pkg.github.com",

src/components/molecules/Mailto/Mailto.stories.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+
+import { Mailto, MailtoProps } from './Mailto'
+
+export default {
+  title: 'molecules/Mailto',
+  component: Mailto
+} as ComponentMeta<React.ComponentType<MailtoProps>>
+
+const Template: ComponentStory<React.ComponentType<MailtoProps>> = args => <Mailto {...args} />
+
+export const Primary = Template.bind({})
+Primary.args = {}

src/components/molecules/Mailto/Mailto.styles.module.scss

@@ -0,0 +1,34 @@
+@import 'src/scss/mixins';
+
+.mailto {
+  @include flex-center;
+
+  margin: 15px 12px;
+
+  @include mobile {
+    width: 100%;
+    justify-content: left;
+    padding-left: 8px;
+  }
+}
+
+.title {
+  color: $color-light;
+  font-weight: 500;
+}
+
+.title,
+.label {
+  font-size: 22px;
+  line-height: 50px;
+}
+
+.label {
+  color: $color-base;
+  padding-left: 10px;
+  font-weight: 500;
+
+  &:hover {
+    color: $color-light-gray;
+  }
+}

src/components/molecules/Mailto/Mailto.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+
+import { Link } from 'react-router-dom'
+
+import css from './Mailto.styles.module.scss'
+
+export type MailtoProps = {
+  mailto: string
+  label: string
+  title: string
+}
+
+export const Mailto = ({ mailto, label, title }: MailtoProps) => {
+  return (
+    <div className={css.mailto}>
+      <p className={css.title}>{title}</p>
+      <Link
+        to="#"
+        onClick={event => {
+          window.location.href = mailto
+          event.preventDefault()
+        }}
+        className={css.label}
+      >
+        {label}
+      </Link>
+    </div>
+  )
+}

src/components/molecules/Mailto/index.ts

@@ -0,0 +1 @@
+export * from './Mailto'