feat: button, calendar, datePicker, input, pagination, icons 추가

web-app/app/shared/components/inputGroup/InputGroup.tsx

@@ -0,0 +1,51 @@
+import { type PropsWithChildren } from 'react';
+
+import { twMerge } from 'tailwind-merge';
+import { tv } from 'tailwind-variants';
+
+export interface InputGroupProps extends PropsWithChildren {
+  className?: string;
+  innerClassName?: string;
+  isReadOnly?: boolean;
+}
+const style = tv({
+  slots: {
+    container: 'relative flex flex-col justify-center items-start bg-white',
+    base: [
+      'h-9',
+      'flex',
+      'items-center',
+      'text-sm',
+      'text-kc-black-34',
+      'leading-[18px]',
+      'border',
+      'border-kc-gray-be',
+      'has-data-focused:border-kc-black-34',
+      'has-data-hovered:border-kc-black-34',
+      'has-data-disabled:bg-kc-gray-eb',
+      'has-data-disabled:text-kc-gray-99',
+      'has-data-disabled:border-kc-gray-be',
+      'has-data-invalid:border-kc-red',
+      'has-data-invalid:has-data-focused:border-kc-red',
+      'has-data-invalid:has-data-hovered:border-kc-red',
+      'w-full',
+      'has-[[type=number]]:leading-6',
+    ],
+    input: ['w-full', 'px-3', 'outline-0', '[&[type=number]]:pr-1.5'],
+  },
+  variants: {
+    isReadOnly: {
+      true: {
+        base: 'bg-kc-yellow-secondary has-data-hovered:border-kc-gray-be has-data-focused:border-kc-gray-be',
+      },
+    },
+  },
+});
+export const InputGroup = ({ className, innerClassName, isReadOnly = false, children }: InputGroupProps) => {
+  const styles = style({ isReadOnly });
+  return (
+    <div className={twMerge(styles.container(), className)}>
+      <div className={twMerge(styles.base(), innerClassName)}>{children}</div>
+    </div>
+  );
+};