230316(목)

export interface Base {
  attachTo(parent: HTMLElement, position?: InsertPosition): void;
}

export class BaseComponent<T extends HTMLElement> implements Base {
  protected readonly element: T;
  constructor(htmlString: string) {
    const template = document.createElement('template');
    template.innerHTML = htmlString;
    this.element = template.content.firstElementChild! as T;
  }

  attachTo(parent: HTMLElement, position: InsertPosition = 'afterbegin') {
    parent.insertAdjacentElement(position, this.element);
  }
}

import { BaseComponent } from '../Base';
import { TextComponentStyle } from '../../../style/components/basic/TextComponent.css';

export class TextComponent extends BaseComponent<HTMLSpanElement> {
  constructor(
    text: string,
    color: string = '',
    fontSize: string = '',
    fontWeight: string = '',
  ) {
    super(`<span class='${TextComponentStyle}'>${text}</span>`);
    this.element.style.color = color;
    this.element.style.fontSize = fontSize;
    this.element.style.fontWeight = fontWeight;
  }
}

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

export const TextComponentStyle = style({
  display: 'block',
  color: 'var(--color-white)',
  fontSize: 'var(--font-md)',
  fontWeight: 'var(--weight-regular)',
  textAlign: 'center',
});

import { BaseComponent } from '../../Base';
import { ImageComponent } from '../../basic/ImageComponent';
import { SearchBarComponent } from './SearchBarComponent';
import { TwoRowTextComponent } from './TwoRowTextComponent';
import { SymbolTextComponent } from '../SymbolTextComponent';
import { NavBarMainComponentStyle } from '../../../../style/components/navbar/main/NavBarMainComponent.css';

export class NavBarMainComponent extends BaseComponent<HTMLElement> {
  constructor() {
    super(`<section class='${NavBarMainComponentStyle}'></section>`);
    const logo = new ImageComponent(
      'assets/nav-bar/logo.svg',
      '6rem',
      '2.5rem',
    );
    const shippingAddress = new TwoRowTextComponent('배송처', '대한민국');
    const searchBar = new SearchBarComponent();
    const nation = new SymbolTextComponent('assets/nav-bar/flag-un.svg', 'UN');
    const login = new TwoRowTextComponent('안녕하세요, 로그인', '계정 및 목록');
    const myPage = new TwoRowTextComponent('반품', '& 주문');
    const cart = new SymbolTextComponent('assets/nav-bar/cart.svg', '장바구니');
    cart.attachTo(this.element);
    myPage.attachTo(this.element);
    login.attachTo(this.element);
    nation.attachTo(this.element);
    searchBar.attachTo(this.element);
    shippingAddress.attachTo(this.element);
    logo.attachTo(this.element);
  }
}

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

export const NavBarMainComponentStyle = style({
  display: 'flex',
  flexDirection: 'row',
  justifyContent: 'space-between',
  alignItems: 'center',
  width: '100%',
  height: '3.5rem',
  padding: '.5rem 1rem',
  backgroundColor: 'var(--color-black)',
});