Next.js 기반 CRM 개발 환경 설정 가이드
kargulstudio/sales-crm
Next.js 16, React 19, Tailwind CSS 4를 기반으로 구축된 영업 관리 시스템(CRM) 개발 환경을 제공하는 보일러플레이트입니다.
- 프로젝트의 일관성과 품질 유지를 위해 `CONVENTIONS.md` 숙지가 필수이며, SEO 메타데이터 설정과 다양한 이미지 최적화 스크립트를 갖추고 있습니다.
- 초기 단계부터 명확한 가이드라인과 최적화 과정을 강제하여, 장기적으로 높은 수준의 품질과 확장 가능한 아키텍처를 보장하는 것이 핵심입니다.
- 성공적인 개발을 위해서는 환경 변수 설정이나 CSS 토큰 사용 등 제시된 모든 명시적 개발 규칙들을 철저히 준수해야 합니다.
이 보일러플레이트는 Next.js 16, React 19, Tailwind CSS 4를 기반으로 구축된 영업 관리 시스템(CRM)의 개발 환경을 제공합니다. 프로젝트의 일관성과 품질 유지를 위해 컴포넌트나 페이지 작성 전 `CONVENTIONS.md` 문서를 숙지해야 합니다. 초기 설정은 `npm install`과 `npm run dev` 명령어로 시작할 수 있으며, 로컬에서는 http://localhost:3000에서 개발 서버에 접근 가능합니다.
프로젝트를 시작할 때에는 `lib/seo.ts` 파일에서 사이트 이름, URL 등 SEO 메타데이터를 설정하고, `app/globals.css`의 `@layer base` 타입 스케일과 `--padding-section-*` 을 디자인에 맞게 조정해야 합니다. 또한, 이미지 최적화를 위해 `npm run to:avif`와 같은 전용 스크립트가 제공되며, `npm run lint`를 통해 ESLint 검사를 수행할 수 있습니다.
이 개발 환경은 단순히 코드를 작성하는 것을 넘어, 높은 수준의 품질과 확장성을 유지하도록 설계되었습니다. 개발 규칙을 담은 `CONVENTIONS.md` 외에도, 관련 Next.js 버전을 다룬 `AGENTS.md`, 그리고 자산 로딩 최적화에 대한 내용을 포함하는 `OPTIMIZATION.md` 등 상세한 가이드라인 문서를 제공합니다.
용어 풀이
- 토큰
- AI 모델이 글을 처리하는 단위. 단어보다 작은 조각이며 사용량과 요금을 셀 때 기준이 돼요.
- 에이전트
- 목표를 받으면 스스로 계획을 세우고 도구를 써서 여러 단계의 작업을 해내는 AI.
개발 환경 설정을 시작하려면 어떤 명령어를 사용해야 하나요?
`npm install`과 `npm run dev` 명령어로 프로젝트를 시작할 수 있어요. 로컬에서는 http://localhost:3000에서 개발 서버에 접근하여 작업할 수 있습니다.
SEO 메타데이터 설정이나 디자인 조정은 어디서 해야 하나요?
사이트 이름과 URL 같은 SEO 메타데이터는 `lib/seo.ts` 파일에서 설정해야 해요. 또한, 디자인에 맞게 `app/globals.css`의 `@layer base` 타입 스케일과 `--padding-section-*` 토큰을 조정할 수 있어요.
프로젝트 품질 유지를 위한 가이드라인 문서는 무엇이 있나요?
개발 규칙은 `CONVENTIONS.md`에 담겨 있으며, 에이전트 관련 내용은 `AGENTS.md`, 자산 로딩 최적화에 대한 정보는 `OPTIMIZATION.md` 등 상세한 가이드 문서들이 제공돼요.