Frontend Wiki

🧭 Frontend Team Wiki

이 문서는 프론트엔드 팀의 기술, 규칙, 결정사항, 운영 방식을 기록하고 공유하기 위한 위키입니다. 모든 변경 사항은 문서화 및 날짜 기록을 원칙으로 합니다.

---

1. 프로젝트 개요

2. 기술 스택 및 선정 이유

3. 아키텍처 및 구조

4. WebView 애플리케이션 구조

5. 협업용 컨벤션 정의

---

🗂️ 참고 자료

공식 문서

기술	문서
Stackflow	https://stackflow.so
TanStack Query	https://tanstack.com/query/latest
Zustand	https://zustand.docs.pmnd.rs
Ky	https://github.com/sindresorhus/ky
TailwindCSS 4	https://tailwindcss.com/docs
CVA	https://cva.style
@webview-bridge	https://github.com/gronxb/webview-bridge
openapi-typescript	https://openapi-ts.dev
Expo	https://docs.expo.dev

서비스 URL

환경	URL
프로덕션 웹	https://hellocs.site
API	https://api.hellocs.site
API Docs (Swagger)	https://api.hellocs.site/v3/api-docs
Grafana	https://hellocs.site/grafana/

---

✨ 8. 사용 팁 및 규칙

8-1 개발 시작

# Web
cd web && pnpm install && pnpm dev        # http://localhost:5173

# Mobile
cd mobile && npm install && npm start     # Expo dev server

8-2 API 타입 재생성

백엔드 API가 변경됐을 때 실행:

cd web && pnpm generate:api-models

.env에 API_SWAGGER_URL 설정 필요.

8-3 새 페이지 추가 체크리스트

• src/pages/<feature>/<PageName>.tsx 생성
• src/app/stackflow-route.tsx에 { name, component, path } 등록
• 필요 시 src/api/<feature>/, src/model/<feature>/ 추가

8-4 새 브릿지 기능 추가 체크리스트

• mobile/bridge/index.ts의 AppBridgeType에 메서드 시그니처 추가
• bridge() 구현체에 실제 로직 작성
• 웹에서 window.bridge.xxx() 호출로 검증

8-5 협업 주의사항

• api-models.ts는 자동생성 파일 — 직접 수정 금지, pnpm generate:api-models로만 갱신
• 커밋 메시지 형식 미준수 시 commitlint 훅이 거부함
• main 브랜치 push 시 GitHub Actions가 자동 빌드 + 배포 트리거됨 (web 경로 변경 시)
• ESLint import 순서 위반 시 CI에서 실패 — 로컬에서 pnpm lint 먼저 확인

8-6 Vite 개발 프록시

로컬 개발 시 아래 경로는 https://hellocs.site로 프록시됨:

• /api/
• /v3/
• /swagger-ui/

---