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

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

@@ -0,0 +1,16 @@
+import type { Ref } from 'react';
+import type { InputProps as AriaInputProps } from 'react-aria-components';
+import { Input as AriaInput } from 'react-aria-components';
+
+import { twMerge } from 'tailwind-merge';
+
+import style from './style';
+
+export interface InputProps extends AriaInputProps {
+  className?: string;
+  ref?: Ref<HTMLInputElement>;
+}
+export default function Input(props: InputProps) {
+  const { className, ...restProps } = props;
+  return <AriaInput className={twMerge(style().input(), className)} {...restProps} />;
+}

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>
+  );
+};

web-app/app/shared/components/inputGroup/index.ts

@@ -0,0 +1,6 @@
+import InternalInput from './Input';
+import { InputGroup as InternalInputGroup } from './InputGroup';
+
+export const InputGroup = Object.assign(InternalInputGroup, {
+  Input: InternalInput,
+});