refactor: BackwardButton -> BackwardIcon으로 변경

src/components/BackwardIcon/index.js

@@ -0,0 +1,30 @@
+/* eslint-disable react/jsx-curly-brace-presence */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export const BackwardIcon = ({ size, color, strokeWidth }) => {
+  return (
+    <svg viewBox={`0 0 ${size} ${size}`} height={size} width={size} fill="none">
+      <path
+        d={`
+              M ${size / 2} 1 
+              L 1 ${size / 2} 
+              L ${size / 2} ${size}`}
+        stroke={color}
+        strokeWidth={strokeWidth}
+      />
+    </svg>
+  );
+};
+
+BackwardIcon.propTypes = {
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  strokeWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  color: PropTypes.string.isRequired,
+};
+
+BackwardIcon.defaultProps = {
+  size: 16,
+  strokeWidth: 1.5,
+  color: '#525252',
+};

src/components/index.js

@@ -1,4 +1,4 @@
-import { BackwardButton } from './BackwardButton';
+import { BackwardIcon } from './BackwardIcon';
 import { Button } from './Button';
 import { Card } from './Card';
 import { Circle } from './Circle';
@@ -11,4 +11,4 @@ import { Modal } from './Modal';
 import { Text } from './Text';
 import { Heading } from './Heading';
 
-export { BackwardButton, Button, Card, Circle, CreditCardPreview, Container, Form, Input, Label, Modal, Text, Heading };
+export { BackwardIcon, Button, Card, Circle, CreditCardPreview, Container, Form, Input, Label, Modal, Text, Heading };

src/pages/AddPages/AddFormPage/index.js

@@ -1,9 +1,10 @@
 import { useState } from 'react';
-import { BackwardButton, CreditCardPreview, Heading } from '../../../components';
+import { Button, CreditCardPreview, Heading } from '../../../components';
 import { CardInfoForm } from './CardInfoForm';
 import { CardCompanySelectModal } from './CardCompanySelectModal';
 import { getFormattedCardInfo } from '../../../cardInfoFormatter';
 import './style.css';
+import { BackwardIcon } from '../../../components/BackwardIcon';
 
 export const AddFormPage = (props) => {
   const { initialCardInfo, cardInfo, setCardInfo } = props;
@@ -14,7 +15,9 @@ export const AddFormPage = (props) => {
   return (
     <div className="AddFormPage">
       <div className="AddFormPage__Heading">
-        <BackwardButton />
+        <Button className="AddFormPage__BackwardButton">
+          <BackwardIcon />
+        </Button>
         <Heading>카드 추가</Heading>
       </div>
       <CreditCardPreview

src/pages/AddPages/AddFormPage/style.css

@@ -8,6 +8,12 @@
   align-items: center;
 }
 
+.AddFormPage__BackwardButton {
+  width: 1.25rem;
+  height: 1.25rem;
+  margin-right: 1.5rem;
+}
+
 /* 카드 정보 작성 폼 */
 
 .CardInfoForm {