refactor: Button, TextInput style overriding을 위해 className 추가, TextIn…

…put width 변경
oduck-team · Aug 26, 2023 · 3faf41b · 3faf41b
1 parent e174438
commit 3faf41b
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 3 deletions.
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
@@ -16,6 +16,7 @@ export interface ButtonProps extends ComponentProps<"button"> {
   readonly size?: Size;
   readonly isBlock?: boolean;
   readonly icon?: React.ReactNode;
+  readonly className?: string;
 }
 
 export default function Button({
@@ -27,6 +28,7 @@ export default function Button({
   isBlock = false,
   icon,
   children,
+  className = "",
   ...props
 }: ButtonProps) {
   const isIconOnly = icon !== undefined && !children;
@@ -38,6 +40,7 @@ export default function Button({
         color={color}
         size={size}
         type={type}
+        className={className}
         {...props}
       >
         <IconWrapper>{icon}</IconWrapper>
@@ -53,6 +56,7 @@ export default function Button({
       size={size}
       type={type}
       isBlock={isBlock}
+      className={className}
       {...props}
     >
       <ContentWrapper>

diff --git a/src/components/TextInput/index.tsx b/src/components/TextInput/index.tsx
@@ -5,6 +5,7 @@ import { Message, TextInputBox, TextInputContainer } from "./style";
 export interface TextInputProps extends ComponentProps<"input"> {
   readonly warn?: boolean;
   readonly message?: string;
+  readonly className?: string;
 }
 
 export interface TextInputBoxProps extends ComponentProps<"input"> {
@@ -15,10 +16,11 @@ export default function TextInput({
   warn = false,
   message = "",
   style,
+  className = "",
   ...rest
 }: TextInputProps) {
   return (
-    <TextInputContainer style={style}>
+    <TextInputContainer style={style} className={className}>
       <TextInputBox warn={warn} {...rest}></TextInputBox>
       {warn && message !== "" && <Message>{message}</Message>}
     </TextInputContainer>

diff --git a/src/components/TextInput/style.ts b/src/components/TextInput/style.ts
@@ -8,7 +8,7 @@ export const TextInputBox = styled.input<TextInputBoxProps>`
     return css`
       ${theme.typo["body-2-r"]};
       display: flex;
-      width: 328px;
+      width: 100%;
       height: 40px;
       padding: 0px 1rem;
       justify-content: space-between;
@@ -52,5 +52,5 @@ export const Message = styled.div`
 `;
 
 export const TextInputContainer = styled.div`
-  width: fit-content;
+  width: 328px;
 `;