chore(#11): FE/BE/Embedded 코드 스타일 및 PR 자동 검사 도입

[AI-WonYJ]

🍀 이슈 번호

• closed: chore: FE/BE/Embedded 코드 스타일 및 PR 자동 검사 도입 #11

---

📝 변경 사항

• BE 코드 스타일 설정을 추가했습니다.

  • backend/pyproject.toml 추가
  • Ruff lint/format 설정 추가
  • Python import 정렬 및 포맷팅 적용
  • backend/requirements-dev.txt 추가

• FE 코드 스타일 설정을 추가했습니다.

  • frontend/package.json 추가
  • frontend/package-lock.json 추가
  • frontend/.prettierrc 추가
  • frontend/.prettierignore 추가
  • HTML/CSS/JS/JSON 파일에 Prettier 포맷팅 적용

• Embedded 코드 스타일 설정을 추가했습니다.

  • embedded/ssccam/.clang-format 추가
  • ESP32-CAM C source/header 파일에 clang-format 포맷팅 적용

• PR 자동 검사 workflow를 추가했습니다.

  • GitHub Actions에서 BE Ruff 검사 실행
  • GitHub Actions에서 FE Prettier 검사 실행
  • GitHub Actions에서 Embedded clang-format 검사 실행

• 코드 스타일 검사 방법을 문서화했습니다.

  • docs/code-style.md 추가
  • FE/BE/Embedded 로컬 검사 명령어 정리
  • PR 전 확인할 명령어 정리

---

🎯 목적

SSCCounter는 하나의 monorepo 안에서 FE, BE, Embedded 코드를 함께 관리합니다.

여러 사람이 동시에 작업할 경우 코드 스타일이 달라지거나, PR마다 포맷팅 방식이 달라져 불필요한 diff와 리뷰 비용이 발생할 수 있습니다.

이번 변경의 목적은 다음과 같습니다.

• FE, BE, Embedded의 코드 스타일 기준 명확화
• PR 단계에서 자동으로 코드 스타일 위반 여부 확인
• 로컬에서도 동일한 lint/format check를 수행할 수 있도록 문서화
• 이후 Coolify 배포, GHCR 이미지 빌드, public/device API 분리 작업 전에 기본 품질 게이트 마련

---

📂 적용 범위

• backend/

  • pyproject.toml
  • requirements-dev.txt
  • main.py

• frontend/

  • .prettierrc
  • .prettierignore
  • package.json
  • package-lock.json
  • index.html
  • css/*.css
  • js/*.js
  • data/*.json

• embedded/ssccam/

  • .clang-format
  • main/*.c
  • main/*.h

• .github/workflows/

  • 코드 스타일 검사 workflow 추가

• docs/

  • code-style.md

---

🖥️ 주요 코드 설명

BE: Ruff 설정

[tool.ruff]
line-length = 88
target-version = "py312"

[tool.ruff.lint]
select = ["E", "F", "I", "B", "UP"]

[tool.ruff.format]
quote-style = "double"
indent-style = "space"
line-ending = "auto"

BE에서는 Ruff를 사용해 lint, import 정렬, format check를 수행하도록 구성했습니다.

FE: Prettier 설정

{
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "singleQuote": true,
  "semi": true,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "htmlWhitespaceSensitivity": "css"
}

FE.에서 Prettier를 사용해 HTML, CSS, JavaScript, JSON 파일의 포맷팅 기준을 통일했습니다.

Embedded: clang-format 설정

BasedOnStyle: LLVM
IndentWidth: 4
TabWidth: 4
UseTab: Never
ColumnLimit: 100
BreakBeforeBraces: Attach
SortIncludes: false

Embedded에서는 ESP32-CAM source/header 파일을 대상으로 clang-format을 적용했습니다.

GitHub Actions

PR 생성 및 수정 시 다음 검사가 자동 실행됩니다.

Backend Ruff
Frontend Prettier
Embedded clang-format

---

📋 체크리스트

• Merge 대상 브랜치가 올바른가?
• 코드가 정상적으로 빌드되는가?
• 최종 코드가 에러 없이 잘 동작하는가?
• 전체 변경사항이 500줄을 넘지 않는가?
• 관련 테스트 코드를 작성했는가?
• 기존 테스트가 모두 통과하는가?
• 코드 스타일(ESLint, Prettier)을 준수하는가?

---

📌 참고 사항

로컬에서 아래 검사를 수행했습니다.

• BE

cd backend
python -m ruff check .
python -m ruff format --check .

• FE

cd frontend
npm run format:check

• Embedded

git ls-files 'embedded/ssccam/**/*.c' 'embedded/ssccam/**/*.h' \
  | xargs clang-format --dry-run -Werror

이번 PR에서 ESLint는 도입하지 않았습니다. 필요 시 JS 코드 규모가 커지는 시점에 별도 이슈로 추가할 예정입니다.