폴더구조.
폴더구조는 다음과 같다. 참고하면된다. (구조를 다르게할경우 설정을 다르게해야..)
next.js + tailwind
npx create-next-app@latest --typescript
tailwind 설치
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
tailwind설정. 해당 경로에 있는 파일유형을 파싱해서, css를 필요한 것만 익스포트 해준다.
(경로 잘못 설정하거나, 확장자를 잘못쓰거나 하면 css가 전혀 적용되지 않을 수 있으니 주의한다.)
//tailwind.config.js
module.exports = {
purge: [
// Use *.tsx if using TypeScript
"./src/pages/**/*.tsx",
],
theme: {
extend: {},
},
plugins: [],
};global.css 파일 내용을 아래와 같이 해준다.
/* ./src/styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
pages폴더 내부에 테스트 파일을 생성할 것이다.
// ./src/pages/test.tsx
import React from "react";
const Test = () => {
return (
<div>
<p className="underline">under</p>
</div>
);
};
export default Test;테스트해보자.
npm run devhttp://localhost:3000/test 에서 under텍스트 내부에 밑줄이 쳐져있다면 성공한것이다.
storybook
스토리북을 처음 설치한다면 전역으로 설치해준다.
npm i storybook -g
//해당 전역 설치가 안된다면, 아래를 시도해본다.
sudo npm i storybook -g스토리북에서도 포스트 css를 사용해야하므로, 아래 와같이 설치해준다.
npm i -D @storybook/addon-postcss
packge.json에서 웹팩 버젼에 대한 버전 조건을 지정한다.
// package.json
"resolutions": {
"@storybook/{app}/webpack": "^5"
}
이제 프로젝트에 스토리북을 초기화해줄 차례다.
터미널에서 아래와 같이 해준다.
(웹팩 5를 사용해서 스토리북을 빌드할거라는 뜻이다.)
npx sb init --builder webpack5
이제 스토리북 설정을 해줄것이다.
.storybook이라는 폴더가 있을텐데 아래와같이 바꿔주자.
(기본적으로 js라는 확장자를 가지고 있을텐데 아래 가이드에 확장자를 유념하며 적용시켜준다.
필자는 preview파일이 tsx라는 확장자가 필요하다는 사실을 1시간 넘게 삽질하고서야 알았다.-_-)
따라서 스토리북 내에서 css등을 임포트 해올 수 있도록 설정이 필요하다.
(대충 css를 각각 인식하니 잡아줘야한다는 뜻)
대략 ./storybook/main.ts,preview.tsx 두 파일에서 다루는것은 아래와 같다.
1. css 이거 써줘 (경로는...파일은..)
2. 스토리북 파일은 이 경로에 있다..npm run storybook실행시에 얘네 넣어줘
3.스토리북 빌드는 뭘로 할꺼야..
기타 경로나 알리아스에 대한 설정.
4.next에서 제공하는 Image component에 대한 내용.
// .storybook/main.js
const path = require("path");
module.exports = {
stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
/** Expose public folder to storybook as static */
staticDirs: ["../public"],
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
{
/**
* Fix Storybook issue with PostCSS@8
* @see https://github.com/storybookjs/storybook/issues/12668#issuecomment-773958085
*/
name: "@storybook/addon-postcss",
options: {
postcssLoaderOptions: {
implementation: require("postcss"),
},
},
},
],
core: {
builder: "webpack5",
},
webpackFinal: (config) => {
/**
* Add support for alias-imports
* @see https://github.com/storybookjs/storybook/issues/11989#issuecomment-715524391
*/
config.resolve.alias = {
...config.resolve?.alias,
"@": [path.resolve(__dirname, "../src/"), path.resolve(__dirname, "../")],
};
/**
* Fixes font import with /
* @see https://github.com/storybookjs/storybook/issues/12844#issuecomment-867544160
*/
config.resolve.roots = [
path.resolve(__dirname, "../public"),
"node_modules",
];
return config;
},
};
아래 잘 보면 global.css를 불러오는 것을 볼수 있다.(중요)
// .storybook/preview.js
import "../src/styles/globals.css";
import * as NextImage from "next/image";
const OriginalNextImage = NextImage.default;
Object.defineProperty(NextImage, "default", {
configurable: true,
value: (props) => <OriginalNextImage {...props} unoptimized />,
});
export const parameters = {
actions: { argTypesRegex: "^on[A-Z].*" },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
previewTabs: {
"storybook/docs/panel": { index: -1 },
},
};
이제 스토리북 셋팅이 끝나고, 정상적으로 구동되야한다.
npm run storybook
아마 에러가 날 수 있는데, 이부분은 꽤 많은 사람들이 지금 겪고있나본데 해결이 안되고있다.
여러 무한도전 끝에 해결했던 부분은 웹팩을 설치한다.
1. npm i webpack
2.npm run storybook
3.npm uni webpack
4.npm run storybook
?? 왜 되는거죠?
아무튼 셋팅 상태의 프로젝트를 아래 저장소에 공유한다. 필요하신분들은 쓰시면 되겠다.
프로젝트 기본 셋팅된 공개원격저장소 :
https://github.com/morpheus1991/next_ts_storybook_tailwind
참고 :
https://theodorusclarence.com/blog/nextjs-storybook-tailwind
https://storybook.js.org/blog/get-started-with-storybook-and-next-js/
이슈 참고 :
댓글