[Nuxt UI] Tailwind와 상생하는 방법....

역시... UI 라이브러리를 신중하게 선택했어야 했다.

 

Nuxt를 설치하면 기본적으로 Nuxt UI가 설치되어 있다. 

Antd만 해보았던 지라 호기심에 한 번 써보기로 했음.

 

첫번째 난관은 tailwind css가 설치되어 있음에도 불구하고,

tailwind css가 화면에 나오지 않았던 것.

tailwind도 css 인지라.. 충분히 퍼블리셔가 컨트롤 가능하다고 생각했는데,

설치부터 문제가 발생하니 오기가 생겼다.

그래서 nuxt를 10번은 설치하고 지우고 반복한 듯.

default 셋팅도 100번 뒤집어 엎은 듯 하다.

 

플젝 초반에 시간이 있기 때문에 썼지.. 안그랬으면 antd로 바로 넘어갔을 것 같다.
지피티한테 nuxt셋팅을 계속 물어봤더니 나중에 '질문을 바탕으로 나를 솔직하게 욕해줘.' 했을 때,
'너는 그거 하나 못하고 왜 계속 물어보냐. 그것도 못하냐?' 면서 혼났다ㅋㅋㅋ

내가 이 플젝 셋팅을 뒤집을 수 있었던 이유 : 
- 내 스탈은 원래 개발자 셋팅을 받아서 커스텀 한다.
- 하지만 이번 플젝에서는 개발자 셋팅이 완전 기본이었다.(nuxt3 깡통)
- 플젝의 완전 초반부터 시작했다. 뭐 나온게 없어서 그냥 기본을 만지고 놀았다. 
- git에서 내 전용 브랜치를 사용해 완전히 새로운 환경으로 해도 된다는 개발자와의 협의가 있었다.
- scss를 따로 분리했다. pages에서도 개발자가 쓰는 폴더와 분리했다.
  -- 원래는 개발자의 셋팅을 따라 개발이 되어 있으면 되어 있는 대로, 아니면 아닌대로 작업에 들어간다.
  -- 가끔 개발이 먼저 들어간 사이트의 경우에는 퍼블인지, 개발인지 모를 정도로 코드가 섞여 있다.
  -- 사실 그래도 괜찮다고 생각하는 것은 퍼블 산출물이 꼭 페이지여야 한다는 고정관념은 의미없다고 생각해서다.
   ---- 퍼블 산출물은 퍼블리싱 가이드다.
  -- 퍼블 산출물은 개발과 섞여 있어야 하고, css도 개발자와 함께 써야 사이트에서 무엇이 문제인지 빠릿하게 파악해서 유지보수가 가능한다고 본다. (가끔 개발자가 넣은 인라인 CSS 덕지덕지 페이지는 내가 한게 아니니까 문제 찾기가 오히려 쉽...)

 - 암튼 그러합니다.

 

 

Nuxt UI에서 각각의 컴포넌트에는 ui라는 props가 있다.

이 props는 tailwind class를 추가할 수 있는데, 꼭  tailwind class가 아니어도 적용된다.

tailwind 밭에 갑자기 던져진 나로서는... 이렇게 컨트롤이 어려웠나 싶을 정도로 고생했다.

제일 문제는, 이 컴포넌트 녀석들이 온리 tailwind class만 가지고 있다는 것.

 

일반적으로 퍼블 작업을 한다고 하면,

버튼의 경우, 아래와 같이  그 ui가 기본 ui와 식별될 수 있는 고유(?) class 를 붙여준다.

<button type="button" class="btn">버튼</button>

 

 

그런데 버튼에... 이게 뭔데? tailwind야?

(왜 css를 class를 빙자해서 화면에 같이 뿌려주고 있는거야?ㅋㅋㅋㅋ)

(반응형이나 다크모드 때는 여기 class 1.5배는 더 넣어야 되는데, 이럴거면 예전부터 css 분리한 사이트들은 작업자들이 바보니? 다 이유가 있는 건데..... -_-...)

<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted">
  Button
</button>

 

그럼 내가 여기에 다른 css를 주고 싶으면... "btn" 같은 class를 추가해줘야 되는데, 어떡해야 하냐고....

(tailwind 기본 코드, 가령 relative 같은데에다가 background:orange 이런 css 추가하면 사이트가 주홍빛으로 물들텐데?)

 

그럴 때 쓰는 게 ui 라는 props다.

ui props 에서는 component에서 적절한 dom을 찾아 class를 추가해주기 때문에

내가 넣고 싶은 slot을 잘 찾아서 넣어주면 된다.

 

component에서 직접 css 추가도 가능은 하다.

이 방법이 간편하기 때문에 플젝에서 대부분 이 방식으로 작업을 하긴 했음.

상위에 하나의 키가 되는 class만 추가 되면 안쪽은 어떻게든 만져지니까...

<UButton class="btn">컴포넌트에 class 추가</UButton>

 

 

그러나 이 방법이 안되는 컴포넌트가 하나 있었으니, Modal이다.

오류인 것 같긴 한데, Modal 컴포넌트에 class 추가 했을 때, close 버튼에 추가 된다.

그걸 극복하기 위해, UModal 컴포넌트를 다시 컴포넌트화 한 다음, 

거기다 공통으로 ui props를 추가했다.

<template>
  <UModal
    :title="modalTitle"
    :close="{
      color: 'primary',
      variant: '',
      class: 'modal-close',
    }"
    v-model:open="open"
    :overlay="false"
    :ui="{ wrapper: `size-${modalSize}` }" // 사이즈를 위한 class 추가
  >
    <slot name="button"></slot>
    <template #body>
      <div :class="`modal-con ${modalId ? modalId : ''}`">
        <slot name="body"></slot>
      </div>
    </template>
    <template #footer>
      <slot name="footer"></slot>
    </template>
  </UModal>
</template>

 

 

다음에 Nuxt UI를 사용하게 된다면(내가 구축한다면 안쓴다...)

Modal은 이 형태 고정일 듯 하다.

 

두 달을 열심히 달려왔는데, 아직도 구축은 한 달이 더 남은 듯.

끝까지 유종의 미를 거두길 바라며....