1. Button @수빈 조

   1. 기본 버튼
   2. 최신순 별점순 버튼 ( 클릭했을때 색이 변하는 )

2. Input @dinger

   1. 타입 두가지 ( 밑줄 , outline )

3. Modal @dinger

4. 페이지별 Header(ex. 장바구니, 마이페이지? ) - 직접 넣을건지 따로 뺄건지 선택해야할듯 @동영 육

5. 별점 @gyu

6. 텍스트필드 @김희진

7. Counter @김희진

8. Select @동영 육

9. Catagory - 카테고리랑 옵션을 props로 전달해서 유연하게 사용할수 있게! @수빈 조

10. Header

11. Footer

rest문법

import { ComponentProps, HTMLAttributes, InputHTMLAttributes, PropsWithChildren, ReactNode } from 'react'
import { cx } from '@emotion/css'

import * as S from './Button.styles'

interface ButtonProps extends ComponentProps<'button'> {
    variant?: ButtonVariant
    buttonType?: ButtonType
    isFullWidth?: boolean
    disabled?: boolean
    leftSlot?: ReactNode
}

// interface InputProps extends HTMLAttributes<HTMLInputElement> {
// interface InputProps extends ComponentProps<'input'> {
interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
    variant: 'outlined' | 'gyu'
}

function Input({ variant, ...rest }: InputProps) {
    const _variant = `variant_${variant}`

    return <input {...rest} />
}

export function Button({
    variant = 'contained',
    buttonType = 'primary',
    isFullWidth = false,
    disabled = false,
    leftSlot,
    children,
    ...rest
}: PropsWithChildren<ButtonProps>) {
    const _variant = `variant_${variant}`
    const _type = `type_${buttonType}`

    return (
        <>
            {/*<Input type='' />*/}
            <S.Button
                className={cx(_variant, _type, {
                    ['full-width']: isFullWidth,
                    disabled,
                })}
                disabled={disabled}
                {...rest}
            >
                {leftSlot && <S.Slot>{leftSlot}</S.Slot>}
                <span>{children}</span>
            </S.Button>
        </>
    )
}

type ButtonVariant = 'contained' | 'outlined' | 'text'
type ButtonType = 'primary' | 'error'