React + Tailwindcss + Shadcn(UI)

headless ui 컴포넌트 템플릿 shadn ui가 인기가 있다고 하닝.

css 게임 체인저 tailwindcss 와 함께 쓰면 찰떡 궁합이겠거니 생각이 든당.

 

headless 컴포넌트란 기능만 로직만 되어 있고, css가 안되어 있는 걸 말한당.

화장하지 않은 그녀라 말해도 될깡?

의외로 headless 란 말은 많이 사용되는데.. 암튼 아래 참조당. 느끼미 왔당

headless server  =>  모니터 없는 서버

headless jdk     => GUI  라이브러리 뺀 jdk

headless os     => GUI 없이 터미널만 있는 OS

 

 

vite에서의 설치는 아래 링크가 공식 참조당.

https://ui.shadcn.com/docs/installation/vite

 

암튼 요즘엔 눈으로 보고, 손으로 안 만지면 느끼미가 오지 않으닝, 일단 GO당

 

vscode로  새로 폴더(이름 소문자롱) 만들어 열공, 터미널에서 vite 프로젝트 생성 

npx create-vite@latest .

이후 선택은 아래 그림 참조 (내 경우)

 

필요 없는 폴더/파일 정리는 알아서 하는 걸롱.. (하기 싫음 말공)

 

먼저 Tailwindcss를 설치하장.  괘니 터미널 1개 더 열장.

[ path는 경로 alias(별명) 설정에 필요해서 그냥 넣었당 ]

npm install tailwindcss  @tailwindcss/vite
npm install path        

 

index.css 을 아래처럼 수정

@import "tailwindcss";

 

tailwindcss 적용 및 @ 글자에 alias 적용

vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'
import path from 'path'


// https://vite.dev/config/
export default defineConfig({
  plugins: [react(),tailwindcss()],
  resolve: {
    alias: {
      "@":path.resolve(__dirname,"./src")
    }
  }
})

 

컴파일 과정 처리를 위해 아래 파일 맹글기

jsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

 

shadcn 적용을 위한 초기화 작업

npx shadcn@latest init

 

 

요 시점에 index.css 파일을 열어보면, 자동으로 많은 내용이 추가되었음을 안당.

src 디렉토리 아래에  lib 폴더와 그 안에 utils.js 파일도 자동 생성됨을 안당.

src 바깥에는 components.json 파일도 만들어졌음을 안당.

shadcn/ui 와 tailwindcss를 같이 쓸 수 있게, 고맙게도 참 많이도 한당.~~

 

shadcn 제공 Button 컴포넌트 1개 추가해서 사용해 보도록 하장. 터미널에 아래 명령

npx shadcn@latest add button

 

src 폴더 아래 자동으로 components/ui 폴더 생기고, 그안에 button.jsx가 있음을 안당.

[ 당연히 button.jsx 파일을 열어보는 건 본능적으로 금상첨화임을 느낀당 ]

 

App.jsx

import { useState } from "react";
import { Button } from "./components/ui/button";

function App() {
  const [btnName, setBtnName] = useState("E7E");
  const handleClick = (e) => {
    setBtnName(btnName === "E7E" ? "로또1등당첨" : "E7E");
  };

  return (
    <div className="w-1/2 mx-auto mt-10">
      <h1 className="text-5xl text-center rounded-full bg-violet-700 text-white p-5">
        Shadn/UI + Tailwindcss
      </h1>
      <Button
        onClick={handleClick}
        className={
          "text-white text-7xl mt-20   h-50  w-full   hover:animate-bounce hover:bg-pink-900"
        }
      >
        {btnName}
      </Button>
    </div>
  );
}

export default App;

 

아마도 그건 아래와 같은 모습일지어랑

 

Button 1개 해 본걸로는 명암(밝고 또 어두움) 내밀기가  그림자 질 수 있으니

Dialog 컴포넌트를 1개 더 해 보도록 하장. 

https://ui.shadcn.com/docs/components/radix/dialog

 

먼저 dialog 컴포넌트를 추가하장.

npx shadcn@latest add dialog

 

components 폴더에 dialog.jsx가 추가됨을 안당. 심지어 이제 느낌도 온당. 아~항

 

화면에 적용해 보장.~~ 느끼미가 와야 하니깡.~~

App.jsx

import { Button } from "./components/ui/button";
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "./components/ui/dialog";

function App() {
  return (
    <div className="w-1/2 mx-auto mt-5">
      <h1 className="text-4xl text-center rounded-full bg-violet-700 text-white p-5">
        Shadn/UI + Tailwindcss
      </h1>
      <hr className="my-2" />
      <Dialog>
        <DialogTrigger className="text-4xl bg-pink-700 text-white rounded-2xl  ml-15 w-2/3">
          크을릭 해보장
        </DialogTrigger>
        <DialogContent>
          <DialogHeader>
            <DialogTitle
              className={
                "text-4xl text-indigo-700 text-center bg-gray-400 rounded-2xl  my-4"
              }
            >
              그게 정말이닝?
            </DialogTitle>
            <DialogDescription
              className={"text-2xl text-gray-600 font-extrabold"}
            >
              응 덩말롱 Headless 랭
            </DialogDescription>
          </DialogHeader>
          <div className="flex h-100">
            <div className="flex-1 self-center">
              <img
                className="rounded-full"
                src="https://100k-faces.vercel.app/api/random-image"
              />
            </div>
            <div className="flex-1 self-center ">
              <p>
                당연하징... <br />
                God 수저는 내 스타일이 아니얌 <br />
                허지만... 그렇지만...
                <br />
                그래도 로또는 1등 하고싶당. Oh My God!
              </p>
            </div>
          </div>
          <DialogFooter className="sm:justify-end">
            <DialogClose asChild>
              <Button type="button">다드불어</Button>
            </DialogClose>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}

export default App;

 

결과는 어찌 아래와 같지 않지 않겠는강?

 

---

 

살아있을 날들이 줄어 갈수록 유체이탈을 통해

자신을 타인의 눈으로 바라볼 줄 아는 사람이 있는가 하면

 

찔끔 인정받은 사건 하나로  세상의 중심에 자신을 두고

타인을 움직여 자신의 편함을 추구하는 습성을 가진 인간도 탄생한당.

 

안타깝지만 자신을 제대로 깊이 있게 객관화하는 것 자체가

그것을 받아들이는 것 자체가...

생존의지를 떨어뜨릴 위험성을 풍족하게 가지고 있어서

특별한 계기나 강력한 의지의 노력이 더해지지 않는다면

문턱을 넘기 조차 쉽지 않다는 사실을 안다.

 

심지어 문턱을 넘었던 사람조차 다시 나오고야 만당.

심판대에 타인만 올리고, 그걸 즐기고

정작 자신은 단 한번도 올리지 않은 사람들...

알고보면 머리가 심하게 나쁜데, 착각속에 사는 사람들..

 

바보같이 스스로 인식하지 못하는 그 반복되는 패턴을 찾아

바로 그들을 심판하러 A.I는 세상의 문턱이 되었다.

 

 

이게 모노?

 

https://www.youtube.com/watch?v=DYgE3SGPEqk