design: InputButton 반응형

src/common/components/Button/index.tsx

@@ -1,9 +1,10 @@
 import { useId, type ButtonHTMLAttributes, type ReactNode } from 'react';
 import { Link, To } from 'react-router-dom';
 
+import { useDevice } from '@hooks/useDevice';
 import ButtonLoading from 'views/loadings/ButtonLoading';
 
-import { container, outsideBox, paddings } from './style.css';
+import { buttonFontVar, container, outsideBox, paddings } from './style.css';
 
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement | HTMLAnchorElement> {
   children?: ReactNode;
@@ -25,6 +26,7 @@ const Button = ({
   isLink = false,
   ...buttonElementProps
 }: ButtonProps) => {
+  const DEVICE_TYPE = useDevice();
   const { disabled, type = 'button' } = buttonElementProps;
   const Tag = isLink ? Link : 'button';
 
@@ -44,7 +46,7 @@ const Button = ({
       disabled={isLoading || disabled}
       {...buttonElementProps}>
       <div
-        className={`${container[isLoading || disabled ? 'disabled' : buttonStyle]} ${paddings[padding]} ${className}`}>
+        className={`${container[isLoading || disabled ? 'disabled' : buttonStyle]} ${paddings[padding]} ${buttonFontVar[DEVICE_TYPE]} ${className}`}>
         {isLoading ? <ButtonLoading width={loadingWidth} /> : children}
       </div>
     </Tag>

src/common/components/Button/style.css.ts

@@ -39,7 +39,6 @@ const containerBase = style({
   width: 'fit-content',
   borderRadius: 12,
   transition: 'background-color 0.3s ease-out',
-  ...theme.font.TITLE_5_18_SB,
 
   selectors: {
     '&:disabled, &:disabled:hover': {
@@ -122,3 +121,15 @@ export const container = styleVariants({
     },
   ],
 });
+
+export const buttonFontVar = styleVariants({
+  DESK: {
+    ...theme.font.TITLE_5_18_SB,
+  },
+  TAB: {
+    ...theme.font.TITLE_5_18_SB,
+  },
+  MOB: {
+    ...theme.font.TITLE_6_16_SB,
+  },
+});

src/common/components/Input/components/InputButton/index.tsx

@@ -1,12 +1,14 @@
 import Button from '@components/Button';
+import { useDevice } from '@hooks/useDevice';
 
-import { textWidth } from './style.css';
+import { buttonVar } from './style.css';
 import { InputButtonProps } from './types';
 
 // TextBox 내부 InputLine 우측 버튼
 const InputButton = ({ isLoading, text, ...props }: InputButtonProps) => {
+  const DEVICE_TYPE = useDevice();
   return (
-    <Button isLoading={isLoading} className={textWidth} {...props}>
+    <Button isLoading={isLoading} className={buttonVar[DEVICE_TYPE]} {...props}>
       {text}
     </Button>
   );

src/common/components/Input/components/InputButton/style.css.ts

@@ -1,5 +1,26 @@
-import { style } from '@vanilla-extract/css';
+import { style, styleVariants } from '@vanilla-extract/css';
 
-export const textWidth = style({
-  width: 148,
+export const button = style({
+  paddingLeft: 0,
+  paddingRight: 0,
+});
+export const buttonVar = styleVariants({
+  DESK: [
+    button,
+    {
+      width: 148,
+    },
+  ],
+  TAB: [
+    button,
+    {
+      width: 116,
+    },
+  ],
+  MOB: [
+    button,
+    {
+      width: 99,
+    },
+  ],
 });