GitHub - checkmo2025/FE · GitHub

Skip to content

Latest commit

History

Folders and files

Name		Name	Last commit message	Last commit date
.github		.github
.husky		.husky
docs		docs
public		public
src		src
.gitignore		.gitignore
README.md		README.md
RESPONSIVE_AUDIT_REPORT.md		RESPONSIVE_AUDIT_REPORT.md
eslint.config.mjs		eslint.config.mjs
instrumentation-client.ts		instrumentation-client.ts
instrumentation.ts		instrumentation.ts
next.config.ts		next.config.ts
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
postcss.config.mjs		postcss.config.mjs
sentry.edge.config.ts		sentry.edge.config.ts
sentry.server.config.ts		sentry.server.config.ts
tailwind.config.js		tailwind.config.js
tsconfig.json		tsconfig.json

Repository files navigation

🎨 프론트엔드 개발 컨벤션

🌳 깃 브랜치 전략

main 브랜치 👑 서비스 배포용 브랜치 👑 팀장만 직접 관리하고 머지 가능
develop 브랜치 🛠️ 개발 기능 통합 브랜치 새로운 기능은 항상 이 브랜치를 기준으로 브랜치 생성

🔖 브랜치 명명 규칙

유형	형식	설명	예시
✨ 기능 추가	`feat-[이슈번호]`	새로운 UI/기능 개발	`feat-100`
♻️ 리팩토링	`refactor-[이슈번호]`	코드 구조 개선	`refactor-28`
🐛 버그 수정	`bug-[이슈번호]`	UI/UX 버그 수정	`bug-23`
🎨 코드 포맷팅, CSS 수정	`style-[이슈번호]`	코드 포맷팅, CSS 수정 등 기능에 영향 없는 스타일 변경	`style-123`
🔨 잡무성 작업	`chore-[이슈번호]`	주석, 콘솔 제거, 의존성 관리	`chore-102`
📝 문서 수정	`docs-[이슈번호]`	문서 수정 (README 등)	`docs-23`
🚀 빌드 설정	`build-[이슈번호]`	빌드 설정, 의존성 패키지	`build-12`
✅ 테스트 코드 추가/수정	`test-[이슈번호]`	테스트 코드 추가 / 수정	`test-12`

📝 커밋/PR 컨벤션

타입	설명	예시
✨ `feat`	새로운 기능 추가	`feat: 검색 기능 추가`
♻️ `refactor`	리팩토링	`refactor: header 컴포넌트 구조 개선`
🐛 `bug`	버그 수정	`bug: 모바일 메뉴 토글 오류 수정`
🎨 `style`	스타일, 포맷, 세미콜론 등 코드 비동작 변경	`style: 코드 정렬 및 들여쓰기 수정`
📝 `docs`	문서 수정	`docs: README 배포 방법 추가`
✅ `test`	테스트 코드 추가/수정	`test: 로그인 테스트 케이스 추가`
📦 `build`	빌드 시스템, 의존성 설정	`build: Vite 설정 파일 수정`
🚀 `ci`	CI 설정 변경	`ci: GitHub Actions 수정`
🔨 `chore`	그 외 잡무 (예: 콘솔 제거)	`chore: 불필요한 주석 제거`

🤝 PR (Pull Request) 전략

main 브랜치 PR: 👑 팀장 승인 → 머지 가능
그 외 브랜치 PR: 👥 최소 1명 이상 리뷰어 승인 → 머지

💻 코드 컨벤션 (JavaScript / React 기준)

항목	규칙	예시
컴포넌트명	`PascalCase`	`UserCard`, `MainLayout`
변수/함수명	`camelCase`	`handleClick`, `userName`
상수	`UPPER_SNAKE_CASE`	`DEFAULT_LIMIT`, `API_URL`
파일명	`PascalCase`	`ProfilePage.tsx`
스타일 클래스명	`camelCase` or `BEM`	`buttonPrimary`, `card__title`
CSS 파일	- 상의 필요

⚛️ React 컴포넌트 규칙

props 구조 분해 ✅ const Button = ({ text, onClick }) => {}
조건부 렌더링 ✅ isLoading && <Spinner />
커스텀 훅 ✅ use 접두사 필수: useFetch, useToggle
useEffect ✅ 의존성 배열 명시: useEffect(() => { ... }, [value])

🧹 스타일링 (CSS/SCSS)

방식: CSS Module, TailwindCSS, styled-components 중 하나 사용
공통 변수: :root, variables.css로 색상, 여백 등 관리
클래스명: 역할 기반 명명 (searchInput, formWrapper 등)

🧰 Lint & Formatter

Prettier 사용

About

check-mo-psi.vercel.app

Resources

Custom properties

Stars

0 stars

Watchers

0 watching

Forks

Report repository

Releases

Packages

Contributors

Languages