[#5] feature: x 버튼, 뒤로가기 버튼 컴포넌트

src/components/common/BackBtn/index.tsx

@@ -0,0 +1,25 @@
+import React, { ButtonHTMLAttributes, FC } from 'react';
+
+import { backPathDefaultStyle } from './style';
+import { buttonDefaultStyle, buttonSVGDefaultStyle } from '@/styles/common';
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  width: string;
+  height: string;
+  color: string;
+}
+
+const Exit: FC<ButtonProps> = ({ width, height, color }) => {
+  return (
+    <button css={[buttonDefaultStyle, { width, height }]} type="button">
+      <svg viewBox="0 0 100 100" css={buttonSVGDefaultStyle}>
+        <path
+          d="M75 10 L 25 50 L 75 90"
+          css={[{ stroke: color }, backPathDefaultStyle]}
+        />
+      </svg>
+    </button>
+  );
+};
+
+export default Exit;

src/components/common/BackBtn/style.ts

@@ -0,0 +1,8 @@
+import { css } from '@emotion/react';
+
+export const backPathDefaultStyle = css`
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 10;
+  fill: none;
+`;

src/components/common/ExitBtn/index.tsx

@@ -0,0 +1,35 @@
+import React, { ButtonHTMLAttributes, FC } from 'react';
+
+import { buttonDefaultStyle, buttonSVGDefaultStyle } from '@/styles/common';
+import { exitLineDefaultStyle } from './style';
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  width: string;
+  height: string;
+  color: string;
+}
+
+const Exit: FC<ButtonProps> = ({ width, height, color }) => {
+  return (
+    <button css={[buttonDefaultStyle, { width, height }]} type="button">
+      <svg viewBox="0 0 100 100" css={buttonSVGDefaultStyle}>
+        <line
+          css={[exitLineDefaultStyle, { stroke: color }]}
+          x1="10"
+          y1="10"
+          x2="90"
+          y2="90"
+        />
+        <line
+          css={[exitLineDefaultStyle, { stroke: color }]}
+          x1="90"
+          y1="10"
+          x2="10"
+          y2="90"
+        />
+      </svg>
+    </button>
+  );
+};
+
+export default Exit;

src/components/common/ExitBtn/style.ts

@@ -0,0 +1,6 @@
+import { css } from '@emotion/react';
+
+export const exitLineDefaultStyle = css`
+  stroke-linecap: round;
+  stroke-width: 20;
+`;

src/stories/BackBtn.stories.tsx

@@ -0,0 +1,37 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import theme from '@/styles/theme';
+import BackBtn from '@/components/common/BackBtn';
+
+export default {
+  title: 'common/Back Button',
+  component: BackBtn,
+} as ComponentMeta<typeof BackBtn>;
+
+const Template: ComponentStory<typeof BackBtn> = (args) => (
+  <BackBtn {...args} />
+);
+
+export const PrimaryBackButton = Template.bind({});
+PrimaryBackButton.args = {
+  width: '50px',
+  height: '50px',
+  color: theme.colorPrimary,
+};
+export const LightBackButton = Template.bind({});
+LightBackButton.args = {
+  width: '50px',
+  height: '50px',
+  color: 'white',
+};
+LightBackButton.decorators = [
+  (Story) => {
+    return (
+      <div style={{ backgroundColor: theme.colorPrimary }}>
+        <Story />
+      </div>
+    );
+  },
+];

src/stories/ExitBtn.stories.tsx

@@ -0,0 +1,37 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import theme from '@/styles/theme';
+import ExitBtn from '@/components/common/ExitBtn';
+
+export default {
+  title: 'common/Exit Button',
+  component: ExitBtn,
+} as ComponentMeta<typeof ExitBtn>;
+
+const Template: ComponentStory<typeof ExitBtn> = (args) => (
+  <ExitBtn {...args} />
+);
+
+export const PrimaryExitButton = Template.bind({});
+PrimaryExitButton.args = {
+  width: '50px',
+  height: '50px',
+  color: theme.colorPrimary,
+};
+export const LightExitButton = Template.bind({});
+LightExitButton.args = {
+  width: '50px',
+  height: '50px',
+  color: 'white',
+};
+LightExitButton.decorators = [
+  (Story) => {
+    return (
+      <div style={{ backgroundColor: theme.colorPrimary }}>
+        <Story />
+      </div>
+    );
+  },
+];

src/styles/common.ts

@@ -0,0 +1,12 @@
+import { css } from '@emotion/react';
+
+export const buttonDefaultStyle = css`
+  border: none;
+  background-color: transparent;
+  padding: 0;
+`;
+
+export const buttonSVGDefaultStyle = css`
+  width: 100%;
+  height: 100%;
+`;