fix: 아이콘 적용 버그 문제 해결 (#942)

* fix: 잘못 적용된 Icon 수정

* feat: IconSetting component 구현

client/src/components/Design/components/Amount/EditableAmount.tsx

@@ -74,8 +74,8 @@ const EditableAmount = ({value, onChange, onClick, readOnly = true, isFixed = fa
           <Text size="tiny" textColor="gray">
             원
           </Text>
+          {onClick && <IconEdit size={16} />}
         </div>
-        {onClick && <IconEdit />}
       </div>
 
       <span

client/src/components/Design/components/Banner/Banner.tsx

@@ -25,7 +25,7 @@ const Banner = ({title, description, buttonText, onDelete, ...buttonProps}: Bann
           style={{display: 'flex', alignItems: 'flex-start'}}
           aria-label="배너 닫기"
         >
-          <IconX />
+          <IconX size={12} />
         </IconButton>
         <div>
           <Text size="captionBold" color="onTertiary">

client/src/components/Design/components/DepositCheck/DepositCheck.tsx

@@ -15,7 +15,7 @@ const DepositCheck: React.FC<DepositCheckProps> = ({isDeposited = false}: Deposi
       <Text size="tiny" className="deposit-check-text">
         입금
       </Text>
-      {isDeposited ? <IconCheck size={12} color="primary" /> : <IconX color="gray" />}
+      {isDeposited ? <IconCheck size={12} color="primary" /> : <IconX size={12} color="gray" />}
     </div>
   );
 };

client/src/components/Design/components/Icons/Icon.stories.tsx

@@ -12,6 +12,7 @@ import {IconKakao} from './Icons/IconKakao';
 import {IconMeatballs} from './Icons/IconMeatballs';
 import {IconPictureSquare} from './Icons/IconPictureSquare';
 import {IconSearch} from './Icons/IconSearch';
+import {IconSetting} from './Icons/IconSetting';
 import {IconTrash} from './Icons/IconTrash';
 import {IconX} from './Icons/IconX';
 import {IconXCircle} from './Icons/IconXCircle';
@@ -101,14 +102,6 @@ export const Error: Story = {
   ),
 };
 
-export const X: Story = {
-  render: (args: React.ComponentProps<typeof IconX>) => <IconShowcase IconComponent={IconX} args={args} />,
-};
-
-export const XCircle: Story = {
-  render: (args: React.ComponentProps<typeof IconXCircle>) => <IconShowcase IconComponent={IconXCircle} args={args} />,
-};
-
 export const Kakao: Story = {
   render: (args: React.ComponentProps<typeof IconKakao>) => <IconShowcase IconComponent={IconKakao} args={args} />,
 };
@@ -129,6 +122,18 @@ export const Search: Story = {
   render: (args: React.ComponentProps<typeof IconSearch>) => <IconShowcase IconComponent={IconSearch} args={args} />,
 };
 
+export const Setting: Story = {
+  render: (args: React.ComponentProps<typeof IconSetting>) => <IconShowcase IconComponent={IconSetting} args={args} />,
+};
+
 export const Trash: Story = {
   render: (args: React.ComponentProps<typeof IconTrash>) => <IconShowcase IconComponent={IconTrash} args={args} />,
 };
+
+export const X: Story = {
+  render: (args: React.ComponentProps<typeof IconX>) => <IconShowcase IconComponent={IconX} args={args} />,
+};
+
+export const XCircle: Story = {
+  render: (args: React.ComponentProps<typeof IconXCircle>) => <IconShowcase IconComponent={IconXCircle} args={args} />,
+};

client/src/components/Design/components/Icons/Icons/IconSetting.tsx

@@ -0,0 +1,13 @@
+/** @jsxImportSource @emotion/react */
+import IconSettingSvg from '@assets/image/setting.svg';
+
+import {SvgProps} from '../Icon.type';
+import Svg from '../Svg';
+
+export const IconSetting = ({color = 'black', ...rest}: Omit<SvgProps, 'children'>) => {
+  return (
+    <Svg color={color} {...rest}>
+      <IconSettingSvg />
+    </Svg>
+  );
+};

client/src/components/Design/components/Top/EditableLine.tsx

@@ -30,6 +30,7 @@ export default function EditableLine({value, onChange}: Props) {
         css={css`
           display: flex;
           gap: 0.5rem;
+          align-items: center;
         `}
       >
         <input
@@ -48,7 +49,7 @@ export default function EditableLine({value, onChange}: Props) {
           value={value}
           onChange={onChange}
         />
-        <IconEdit />
+        <IconEdit size={16} />
       </div>
 
       <span