react+storybook+tailwind

타입스크립트 기반으로 스토리북과 테일윈드를 사용해서 컴퍼넌트를 만들어보았다.

근데 아래와 같은 기본인풋 타입인데도 불구하고 돈을 내란다

아예 새로 만드는게 나을꺼같은데 뭐가 장점인지 모르겠다

스토리북은 하나 만들어 놓으면 좋겠지만 시간이 너무 오래걸린다

찾아보니 mui도 있었지만 이것도 커스텀하는데 시간이 너무 오래 소요된다고 한다

 

 

 

 

 

npm create vite@latest
project name : design-system-test
select a framework : react
select a variant : typescript

npm install

##https://www.npmjs.com/package/jason-kang-ui 여기 링크대로 진행
1. npm install jason-kang-ui

2. src> main.txt파일에 
import 'jason-kang-ui/index.css';

npm run dev 화면 보는 명령어

##깃설정
git init
git add .
git commit -m "initial commit"

##스토리북 설정
https://storybook.js.org/docs/builders/vite
1.
npx storybook@latest init

내 노드가 16.19.0 이라서 이런 문구가 뜬다
To run Storybook you need to have Node.js 18 or higher
nvm -v  (nvm은 노드버젼을 여러개 설치할수있는거)
특정 노드 버전설치
nvm install 16.13.0 
nvm install lts (최신버전)
nvm use 20.14.0  (이렇게 콘솔창에 뜨면 이걸 코멘트 창에 입력)

스토리북에 configure your projcet 이페이지는 스토리북설명이 들어가있어서 나중에 삭제하면된다

2.
npm install @storybook/builder-vite --save-dev


커밋
git add .
git commit -m "install storybook"


테일윈드 홈페이지
https://tailwindcss.com/docs/guides/vite

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

tailwind.config.js 파일을 하단에 추가해준다 타입스크립트를 컴파일해주도록 설정하는 부분
content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],


index.css파일에 하단에 저걸 넣어준다
@tailwind base;
@tailwind components;
@tailwind utilities;

git add .
git commit -m "install tailwindcss"

폰트 설치
구글에서 fontsource notosasncjkkr 이거 치면
https://www.npmjs.com/package/@fontsource/noto-sans-kr 여기 보면 설치하는게 나온다
npm install @fontsource/noto-sans-kr

main.tsx
폰트 임포트 해준다
import "@fontsource/noto-sans-kr/400.css"
import "@fontsource/noto-sans-kr/700.css"

src>stories>Button.stories.ts
이걸 복사해서 컴퍼넌트를 복사해서 이름바꿔서 사용한다

npm run storybook

src안에 components폴더를 만들어서 안에 컴퍼넌트를 위치이동

.storybook>preview.ts (스트로북에 폰트설정)
import "@fontsource/noto-sans-kr/400.css";
import "@fontsource/noto-sans-kr/700.css";
import "../src/index.css";


#####레이블 컴포넌트

interface ILabelProps {
  htmlFor: string;
  children: string;
}

export default function Label({ htmlFor, children }: ILabelProps) {
  return (
    <label htmlFor={htmlFor} className="text-sm text-primary">{children}</label>
  );
}

assets 에셋에 이미지를 넣어주는경우 각각 임포트 시켜야해서
public폴더안에 넣어주는걸로 실행하는 방식선택!!