fix: IconButton / TextButton 요소를 button으로 변경

- IconButton 변경하면서 Icon을 감싸고있던 i 요소의 line-height 0으로 변경
J1P5 · Nov 28, 2024 · 5a071c5 · 5a071c5
1 parent 4113436
commit 5a071c5
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 5 deletions.
diff --git a/src/components/atoms/Button/IconButton/styled.ts b/src/components/atoms/Button/IconButton/styled.ts
@@ -2,9 +2,14 @@ import styled from "@emotion/styled";
 import { IIconButtonProps } from ".";
 
 export const IconButtonWrapper: ReturnType<
-  typeof styled.div<IIconButtonProps>
-> = styled.div<IIconButtonProps>`
-  width: fit-content;
+  typeof styled.button<IIconButtonProps>
+> = styled.button<IIconButtonProps>`
+  // 버튼 스타일 초기화
+  outline: none;
+  border: none;
+
+  //
+  //width: fit-content;
 
   display: flex;
   justify-content: center;

diff --git a/src/components/atoms/Button/TextButton/styled.ts b/src/components/atoms/Button/TextButton/styled.ts
@@ -3,8 +3,13 @@ import { css } from "@emotion/react";
 import { ITextButtonProps } from ".";
 
 export const TextButtonWrapper: ReturnType<
-  typeof styled.div<ITextButtonProps>
-> = styled.div<ITextButtonProps>`
+  typeof styled.button<ITextButtonProps>
+> = styled.button<ITextButtonProps>`
+  // 버튼 스타일 초기화
+  outline: none;
+  border: none;
+
+  //
   display: inline-flex;
   align-items: center;
   justify-content: center;

diff --git a/src/components/atoms/Icon/styled.ts b/src/components/atoms/Icon/styled.ts
@@ -16,5 +16,6 @@ export const IconSizes = {
  */
 export const IconWrapper: ReturnType<typeof styled.i<IIconProps>> =
   styled.i<IIconProps>`
+    line-height: 0;
     font-size: ${(props) => IconSizes[props.size!]};
   `;