Frontend Wiki

프로젝트 이름 Frontend Wiki

FE설계

1단계 : 기술 스택 선정

2단계 : 유저 플로우차트

3단계 : 프로젝트 도메인 테크스펙

• 3-1. 공통 도메인

• 3-2. 유저 / 인증 도메인

서비스 바로가기

Frontend Repository

목차

• 개발 일정
• 컨벤션 룰
• 트러블 슈팅
• 사용 라이브러리
• 디자인 시스템
• 배포 환경 및 CI/CD 파이프라인
• 코드 품질 관리 도구
• 테스트 전략

개발 일정

기간	주요 작업
MM/DD ~	작업 내용

컨벤션 룰

코드 컨벤션 (Prettier & ESLint)

네이밍 규칙

항목	케이스 규칙
폴더명, 파일명, 변수 및 함수명, 서버 응답 데이터	camelCase
컴포넌트명	PascalCase

Prettier

옵션	값	설명
trailingComma
tabWidth
semi
singleQuote
bracketSpacing
jsxBracketSameLine
printWidth

ESLint

항목	설정 내용
기본 설정
TypeScript 설정
글로벌 환경
무시 폴더
플러그인
커스텀 룰

깃 브랜치 전략

기본 브랜치

브랜치	설명
main
dev

작업 브랜치 네이밍 규칙

브랜치 타입	네이밍 패턴
기능 추가	feature/#이슈번호
버그 수정	bug/#이슈번호
리팩토링	refactor/#이슈번호

커밋 메세지

커밋 유형	설명
feat
fix
docs
style
refactor
test
chore
design
comment
rename
remove
BREAKING CHANGE
HOTFIX

PR 컨벤션

예시: Feature - 메인 페이지 UI 구현

태그	의미	설명
코드 구조 개선
성능 개선
코드/파일 제거
버그 수정
긴급 수정
기능 추가
UI/스타일 수정
변경 사항 되돌리기
브랜치 병합
주석 추가/수정
DB 관련 변경

트러블 슈팅

• 1. 트러블 슈팅 제목

사용 라이브러리

라이브러리	역할 / 설명
예시 라이브러리명	설명 작성

디자인 시스템

• 1. 컬러 시스템
• 2. 폰트 시스템
• 3. 컴포넌트 구조

배포 환경 및 CI/CD 파이프라인

구성 내용 작성

코드 품질 관리 도구

도구	역할	목적
도구명

테스트 전략

도구	역할	목적
도구명