[CHORE] 프로젝트 초기 셋팅

[jaeml06]

🚩 연관 이슈

closed #9

📝 작업 내용

Next.js 최신 + TypeScript + ESLint + Tailwind 기본 구성 적용

• src/app 기반 App Router 구조 생성
• 기본 설정 파일 추가: next.config.ts, tsconfig.json, eslint.config.mjs, postcss.config.mjs
• globals.css에 Tailwind v4 기본 임포트 구성
• esLint에 사용하지 않는 import/변수 자동 감지, import 정렬 규칙 강제 적용

Storybook 연동

• Storybook 스크립트 추가: storybook, build-storybook
• src/Page.stories.tsx 예시 설정

Prettier + Tailwind 클래스 정렬 + ESLint 충돌 방지

• .prettierrc에 제공된 설정 적용 + prettier-plugin-tailwindcss 플러그인 추가
• .prettierignore 추가(빌드/캐시/아웃풋 제외)
• ESLint에서 eslint-config-prettier 적용하여 규칙 충돌 방지
• 포맷 스크립트 추가: format, format:check

commitlint + lefthook 훅 설정

• commitlint.config.ts 생성(Conventional Commits + 팀 라벨 포함)
• lefthook.yml로 pre-commit(타입체크/ESLint/Prettier 체크), commit-msg(커밋 메시지 검사) 구성
• typecheck 스크립트 추가 + prepare로 훅 자동 설치
• lint-staged로 스테이징된 파일만 lint가 적용되도록 구성

🗣️ 리뷰 요구사항 (선택)

이후 추가적인 설정이 필요합니다.

• 자동PR작성과 commit 작성
• cursor이용 시, cursor룰 작성
• Playwright, Figma MCP 도입
• 자동 리뷰 봇 도입 : 코드레빗, 제미나이, (가능하다면 코드리뷰봇 제작)
• spec-kit 도입(확인한 바로 ai 연동의 경우, 추가적인 비용 발생가능성이 있음. 추가적으로 학습 필요)

해당 설정도 후에 함꼐 이야기하면서 도입해보도록하겠습니다.

추가적으로 타입검사를 commit전에 실시하는 것이 좋을 지, push전에 실시하는 것이 좋을지 고민입니다. typecheck가 전체 프로젝트를 대상으로 실행되기 때문에 pre-commit 시간이 길 수 있다고 판단해서, push 직전에 한번 진행하는 것이 적절해보이기도 합니다.