230315(수)

// ButtonComponent.ts
import { BaseComponent } from '../Base';
import { ButtonComponentStyle } from '../../style/components/ButtonComponent.css';

export class ButtonComponent extends BaseComponent<HTMLElement> {
  constructor(content: string, type?: string) {
    super(
        `<button class='${ButtonComponentStyle}' type='${type}'>${content}</button>`,
    );

    if (this.element.getAttribute('type') === 'flexible') {
      this.element.style.width = '4rem';
    }
  }
}

// ButtonComponent.css.ts
import { style } from '@vanilla-extract/css';

export const ButtonComponentStyle = style({
  display: 'flex',
  flexDirection: 'row',
  justifyContent: 'center',
  alignItems: 'center',
  padding: '0px 10px',

  position: 'absolute',
  width: '10rem',
  height: '2rem',
  // left: '20px',
  // top: '20px',

  background:
      'linear-gradient(174.6deg, #FFFFFF 4.31%, #FED15F 50.01%, #FEBE30 95.71%)',

  border: '1px solid var(--color-yellow-300)',
  borderRadius: '4px',
  fontStyle: 'normal',
  fontWeight: '600',
  fontSize: '11px',
  lineHeight: '13px',
  textAlign: 'center',
  letterSpacing: '-0.06em',

  ':hover': {
    cursor: 'pointer',
  },
});

// vite.config.js
// 개인적으로 여기서 엄청 헤맸기 때문에 기억하기 위해 작성해두는 예시 코드
import { defineConfig } from 'vite';
import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
import { viteStaticCopy } from 'vite-plugin-static-copy';

export default defineConfig({
  base: './', // This sets the base path for all generated URLs to './'
  // Other configuration options...
  plugins: [
    vanillaExtractPlugin(),
    viteStaticCopy({
      targets: [
        {
          src: 'assets',
          dest: '',
        },
      ],
    }),
  ],
});