0819.md

0. radix ui로 tab을 만들어줄거에요.

1. vite를 깔거에요.

1-1. vite와 @vitejs/plugin-react를 devDependency로 설치!

bun add -d vite @vitejs/plugin-react

1-2. vite.contig.ts 설정을 해줄거에요.

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  server: {
    port: 3000,
  },
  // options 객체
  plugins: [react()],
});

1-3. vite의 명령어(command)를 package.json의 scripts에 추가합니다.

{
  // ...
  "scripts": {
    "start": "vite",
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  }
  // ...
}

2. daisy ui를 깔 건데 그 전에 tailwind ui도 깔 거에요.

2-1 tailwind 설치

tailwind vite 설치 공식 문서

bun add -d tailwindcss postcss autoprefixer
bun run tailwindcss init -p

2-2 tailwind.config.js

2-3 daisyui 설치

daisyui 설치 공식 문서

bun add daisyui

2-4 daisyui 설정

과제

drawer 만들어보기

drawer component

pallete를 컴포넌트로 만들어보기

선택칸 하나 더 만들기 - 적용 각각 되게 할 수 있음 하기

마이페이지 디자인해오기

trigger 너비 맞추기

---

다음주 화요일 daisy ui로 갈아타기 drawer 만들기 선택칸 완성하기