시작하기

• package manager인 pnpm의 버전을 고정시킵니다.

  brew install corepack
  corepack install --global pnpm@8.6.10
  corepack use pnpm@8.6.10

• pnpm package로 모듈을 세팅합니다.

  pnpm i
  pnpm dev

• 위와 같이 시작 시 내부의 레포지토리가 모두 실행됩니다. 특정 레포지토리만 실행(적용)시키고 싶다면 아래와 같이 실행시킬 수 있습니다.

  pnpm dev --filter=main
  pnpm i typescript --filter=admin

폴더구조

보일러플레이트는 아래와 같이 모노레포의 형식으로 구성되어 있습니다.

🚀 boilerplate-monorepo
│
├─ .env.sample
├─ apps
│  └─ main
│     ├─ public
│     └─ src
│         ├─ app
│         └─ lib
│
├─ configs
│  ├─ eslint
|  ├─ next
|  ├─ prettier
│  ├─ tailwindcss
│  └─ typescript
│
├─ docs
│  ├─ .storybook
│  ├─ __mocks__
│  └─ stories
│     ├─ template
│     └─ ui
│
└─ packages
   ├─ core
   │  ├─ models
   │  │   ├─ prisma/schema
   │  │   └─ src
   │  │       └─ types
   │  ├─ react
   │  │   ├─ actions
   │  │   ├─ hooks
   │  │   └─ zustand
   │  └─ utils
   │
   ├─ design-system
   │  ├─ editor
   │  ├─ icon
   │  ├─ template
   │  └─ ui
   │
   ├─ lib
   │  ├─ hooks
   │  └─ utils
   │
   └─ providers
      ├─ auth
      ├─ channeltalk
      ├─ inngest
      ├─ posthog
      ├─ resend
      ├─ slack
      ├─ solapi
      └─ supabase

디렉토리	폴더/파일명	용도	참고
/apps		각 레포지토리가 존재하는 폴더	main, admin 등..
	/main/src/app	페이지 구성
	/main/src/lib	1. constants 2. utils 3. hooks - 커스텀훅
/configs		설정 파일 관리 ⚙️ eslint ⚙️ next ⚙️ prettier ⚙️ tailwindcss ⚙️ typescript
/docs		Storybook을 통해 생성된 내부 컴포넌트 가이드 문서
	/docs/.storybook	Storybook 설정 파일
	/docs/mocks	모킹 데이터
	/docs/stories/template	Storybook 템플릿
	/docs/stories/ui	Storybook UI 컴포넌트
/packages		프로젝트 전반에 걸쳐 사용되는 다양한 의존성 패키지들을 관리
	/packages/core	프로젝트의 핵심 모델, 서비스 및 유틸리티
	/packages/core/models	🧰 Prisma 스키마 및 타입 정의
	/packages/core/react	🧰 리액트 관련 액션, 훅 및 zustand 스토어	스토어(전역상태관리)의 파일 이름은 use-xxx-store 형식으로 표현합니다. (예. use-bear-store)
	/packages/core/utils	🧰 공통 유틸리티 함수
	/packages/design-system	UI 컴포넌트들로 구성 📌 template 1. 자체 제작 컴포넌트들 2. 전역적으로 사용되는 커스텀 컴포넌트 📌 ui shadcn/ui ↗️ 를 기반으로한 기초 컴포넌트들
	/packages/providers	다양한 서비스 로직 관리 🎯auth:next-auth 인증에서 사용되는 서비스 로직 관리 (예. 사용자 세션 등) 🎯channeltalk: 채널톡 API 관련 로직 🎯inngest: inngest 관련 서비스 로직 🎯posthog: posthog 관련 서비스 로직 🎯resend: 이메일 발송 API 🎯slack: 슬랙 알림 발송 API 🎯solapi: SolAPI 관련 서비스 로직 🎯supabase: Supabase에 이미지/파일 업로드 시 사용되는 서비스 로직 관리
/	.env.sample	환경변수 파일 예시

스타일링

기본적으로 TailwindCSS를 바탕으로 스타일링 합니다.

다만, 색상과 radius는 /app/globals.css에 선언된 변수를 통해 관리되기 때문에 해당 값을 수정해야 합니다.

그래서 자체 솔루션을 통해 내부 디자인 시스템과 연동한 d-nexus ↗️ 에서 스타일 시트 코드를 생성하고 사용할 수 있습니다.