1) turbo 테일윈드 템플릿으로 monorepo 생성하기

pnpm dlx create-turbo@latest --example with-tailwind

2) apps/storybook 에 storybook 설치하기

cd apps
mkdir storybook
cd storybook
pnpm dlx storybook@latest init

3) packages/ui > packages/shared 로 변경

• 이때 package.json 의 "name" 도 꼭 수정해주어야 함
• 각 app 폴더의 next.config.js 도 수정해주어야 함
• 검색에서 /ui 검색후 나오는 것 모두 /shared 로 변경

4) apps 폴더 원하는대로 바꾸고, lock파일 삭제후 다시 pnpm install

rm pnpm-lock.yaml
pnpm install

5) apps 폴더 하위의 각 app 폴더의 package.json 수정

"scripts": {
	"dev": "next dev --port 3000" // 포트는 3000으로 통일
	//....

6) 각 apps 의 필요한 곳에서 의존성 설치

pnpm add @tanstack/react-query @tanstack/react-query-devtools react-hook-form react-icons tailwind-merge

7) .vscode/settings.json 수정

{
	"eslint.workingDirectories": [
		{
			"mode": "auto"
		}
	],
	"editor.codeActionsOnSave": {
		"source.organizeImports": "always",
		"source.fixAll.eslint": "always"
	},
	"editor.formatOnSave": true
}

8) .prettierrc.json 파일 설정

{
	"semi": true,
	"singleQuote": true,
	"trailingComma": "all",
	"printWidth": 108,
	"tabWidth": 4,
	"endOfLine": "auto",
	"arrowParens": "always",
	"bracketSpacing": true,
	"useTabs": false
}

9) env 는 각 app 폴더에 각각 넣기

추가.

1) @repo 모듈 못찾는 문제 해결을 위해 .vscode 에 아래 내용 추가

{
	"eslint.workingDirectories": [
		{
			"mode": "auto"
		}
	],
}

3) pnpm install 실행

4) packages/shared 빌드 없이 사용할 수 있도록 tailwind.config.ts 수정

// apps/ 하위 storybook 제외 모든 app의 tailwind.config.ts 파일에서 본 내용 적용
import sharedConfig from '@repo/tailwind-config';
import type { Config } from 'tailwindcss';

const config: Pick<Config, 'content' | 'presets'> = {
	content: [
		// app content
		`src/**/*.{js,ts,jsx,tsx}`,
		// 아래 부분을 추가!
		'../../packages/shared/*.{js,ts,jsx,tsx}',
	],
	presets: [sharedConfig],
};

export default config;

5) packages/shared/package.json 에서 "main" 삭제 및 "exports"추가

{
	"name": "@repo/shared",
	"version": "0.0.0",
	"sideEffects": [
		"**/*.css"
	],
	"files": [
		"dist"
	],
	// 아래 exports 부분 추가됨
	"exports": {
		"./styles.css": "./src/styles.css",
		"./components": "./src/components/index.ts"
	},
	"license": "MIT",
	"scripts": {
		"build": "tailwindcss -i ./src/styles.css -o ./dist/index.css",
		"lint": "eslint src/",
		"dev": "tailwindcss -i ./src/styles.css -o ./dist/index.css --watch",
		"type-check": "tsc --noEmit"
	},
	"peerDependencies": {
		"react": "^18.2.0"
	},
	"devDependencies": {
		"@repo/eslint-config": "workspace:*",
		"@repo/tailwind-config": "workspace:*",
		"@repo/typescript-config": "workspace:*",
		"@types/react": "^18.2.61",
		"autoprefixer": "^10.4.18",
		"postcss": "^8.4.35",
		"tailwindcss": "^3.4.1",
		"typescript": "^5.3.3"
	}
}

6) shared/index 삭제 후, shared/src/components 에 index.ts 추가

// packages/shared/src/components/index.ts
export { default as Card } from './card';
// 이런 식으로 공통 컴포넌트들 생길 때 마다 계속 익스포트를 추가해줘야 함 

7) 각 app 의 컴포넌트에서 정상적으로 임포트 되는 것을 확인!