ttipo/comrelay
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
e1bc5a1dfc44541feeec4aad495973a173817705
comrelay/docs/integration-progress.md
T
ttipo e1bc5a1dfc first commit
2026-06-16 17:12:08 +09:00

8.6 KiB
Raw Blame History

Relay 백엔드 연동 진행 현황

프론트 UI(목업)를 NestJS 백엔드에 단계적으로 연동하는 작업의 진행 기록. 계약/스키마 상세는 api-contract.md 참조. 최종 갱신: 2026-06-16 · 현재 위치: 2단계(저장소) 완료, 3단계(멤버) 대기

1. 작업 전략

  • 도메인별 수직 슬라이스: 한 도메인을 엔티티 → DTO → service → controller → Swagger → 프론트 composable → store → 페이지 목업 교체까지 끝내고 다음 도메인으로 이동. (수평 분할 아님)
  • 프론트는 백엔드 원시 데이터(타임스탬프/카운트)를 받아 표시용 파생값(상대시간·진행률·아바타 색상 등)은 shared/utils/format.ts에서 계산.
  • 모든 응답은 표준 래퍼 { success, data } / { success, error }. 에러 코드 맵은 CLAUDE.md SSOT.
  • 인증은 이메일+JWT만 먼저(소셜 로그인·이메일 인증은 8단계로 보류). access/refresh 모두 HttpOnly·Secure 쿠키.

단계 순서

0. 계약 정렬 ✅ → 1. 인증 ✅ → 2. 저장소 ✅
→ 3. 멤버 → 4. 업무 → 5. 업무 상세 부속 → 6. 활동 피드 → 7. 내 업무 → 8. 마무리

2. 완료된 단계

0단계 — 계약 정렬 ✅

  • docs/api-contract.md: 7개 도메인 전체 엔드포인트(요청/응답/권한), ID 전략, 파생 필드 규칙, 상태 머신, 비즈니스 에러 메커니즘을 단일 진실 공급원으로 정의.
  • 비즈니스 에러 메커니즘: backend/src/common/exceptions/business.exception.ts 의 BusinessException(code, message, status).
    • 전역 필터(http-exception.filter.ts)가 { code, message } 를 status 매핑보다 우선 처리 → 정확한 HTTP 상태를 유지하면서 사용자에게 구체 문구 노출.
    • 프론트 useApi 인터셉터는 BIZ_001 코드일 때 서버 message 를 우선 표시.
    • 기존 status→코드 매핑 구조는 그대로 유지(덧댄 우선 분기). BusinessException 을 쓰지 않으면 기존과 동일 동작.

1단계 — 인증 (이메일+JWT) ✅

백엔드 backend/src/modules/auth/, modules/user/

  • User 엔티티(UUID, email unique, password_hash select:false, name, role nullable).
  • UserService(Repository 기반): findById/findByEmail/findByEmailWithPassword/create/toPublic.
  • AuthService: 가입(중복 검사), 로그인 검증(bcryptjs), access/refresh 토큰 발급.
  • AuthController: POST /auth/signup·/login·/logout·/refresh(refresh 가드), GET /auth/me(access 가드). HttpOnly 쿠키 발급/제거.
  • JWT access/refresh 전략(쿠키에서 추출) + 가드 + @CurrentUser() 데코레이터.
  • main.ts 에 cookie-parser. JWT 시크릿은 backend/.env.{env}(커밋된 .example 포함).

프론트 frontend/src/

  • types/auth.ts, composables/useAuth.ts, stores/auth.store.ts(bootstrap/login/signup/logout).
  • composables/useApi.ts: 401→/auth/refresh 자동 1회 재시도, silent 플래그(부트스트랩 무알림), BIZ_001 서버 메시지 우선.
  • 라우터 가드: 최초 진입 시 /auth/me 세션 복원 + 미인증 리다이렉트(redirect 쿼리 보존).
  • LoginPage/SignupPage 실제 연동(소셜 버튼은 안내, 가입 즉시 자동 로그인), AppShell 아바타=실사용자 + 로그아웃 드롭다운.

로그인 실패 문구: BusinessException('BIZ_001', '이메일 또는 비밀번호가 올바르지 않습니다.', 401) / 중복 가입: 동일 패턴 409.

2단계 — 저장소(Repo) CRUD ✅

백엔드 backend/src/modules/repo/

  • Repo 엔티티: slugName(영문, 라우팅 id, unique), owner('marketing-team' 고정 상수), name(한글 표시제목), description, visibility, branch.
  • RepoMember 엔티티: repo↔user 조인, roleType(admin/member), isOwner, subRole, @Unique([repo, user]).
  • RepoService: 내 멤버십 저장소 목록 / 단건(멤버·공개 접근 체크) / 생성(생성자를 owner·admin 등록) / 수정(admin) / 삭제(owner).
  • GET/POST/PATCH/DELETE /repos[/:repoId] — 전부 JwtAuthGuard. 응답 RepoResponse(원시값; doneCount/totalCount=0, 4단계에서 집계).

프론트

  • shared/utils/format.ts: avatarColor(id 해시)·initialOf·relativeTimeKo·progressOf 추가.
  • types/repo.ts, composables/useRepo.ts, stores/repo.store.ts(API→기존 mock Repo/User 뷰로 매핑: 아바타 3명+moreCount, 진행률, 상대시간).
  • 페이지 연동: RepoListPage(목록·로딩/빈상태), RepoCreatePage(생성→상세), RepoDetailPage(헤더·진행률만), RepoSettingsPage(저장·삭제·이름변경 안내).

3. 남은 단계

3단계 — 멤버 관리

  • 백엔드: GET/POST/PATCH/DELETE /repos/:repoId/members(목록·초대·역할변경·제거), admin 권한 가드, owner 제거 불가.
  • 프론트: useMember/member.store, RepoMembersPage(초대 모달·역할 변경·제거) 연동.
  • RepoMember 엔티티는 2단계에서 이미 존재 → 데이터 계층은 일부 재사용.

4단계 — 업무(Task) CRUD + 상태 전이

  • 백엔드: Task(+ChecklistItem) 엔티티, GET/POST/PATCH/DELETE /repos/:repoId/tasks[/:taskId], POST .../status. 상태 머신 todo→prog→review→done/changes.
  • 저장소 doneCount/totalCount 실제 집계로 교체(현재 0 하드코딩).
  • 프론트: RepoDetailPage 업무 목록, TaskCreatePage, TaskDetailPage(지시자), TaskAssigneePage(담당자) 연동.

5단계 — 업무 상세 부속

  • 체크리스트 토글, 댓글/답글, 파일 첨부, 승인 워크플로우(승인 요청/승인/수정 요청).
  • 결정 필요: 파일 저장소(로컬 볼륨 vs S3/MinIO).

6단계 — 활동 피드

  • 2~5단계 행위를 이벤트로 적재(쓰기 API 없음, 읽기만). GET /repos/:repoId/activity.
  • 프론트: RepoActivityPage, TaskDetail 활동 탭.
  • 결정 필요: 활동 표현 — 현재 mock은 HTML 통문자열 → 구조화(타입+행위자+대상) 권장.

7단계 — 내 업무 집계

  • GET /tasks/assigned·/tasks/issued(저장소 횡단 집계). 프론트: MyTasksPage(담당/지시 탭).

8단계 — 마무리(선택)

  • 소셜 로그인(Google/Kakao), 이메일 인증, 알림, AI 에이전트 패널, Redis 캐싱, 전체 페이지네이션 통일.

4. 전환기 한계 (현재 시점)

  • RepoMembersPage·RepoActivityPage 는 아직 mock findRepo 사용 → 실제 생성한 저장소의 멤버/활동 탭은 "찾을 수 없음" 표시(각각 3·6단계에서 해소).
  • RepoDetail 업무 목록도 mock(4단계). 업무 모듈이 없어 모든 저장소 진행률은 0% / 시작 전.
  • src/mock/relay.mock.ts 는 아직 타입 정의(Repo/User/TaskStatus 등) + 미연동 화면 데이터 공급원으로 사용 중. 해당 도메인이 연동되면 데이터는 제거하고 타입만 src/types/ 로 이전.

5. 알아둘 사항 / 결정 기록

  • 엔티티 순환참조: 서로 참조하는 관계(예: Repo↔RepoMember)의 단일 클래스 관계 속성에는 TypeORM Relation<> 래퍼를 사용한다. 안 그러면 SWC 환경에서 Cannot access 'X' before initialization 크래시. → 4·5단계(Task↔Repo, Comment↔Task 등)에도 동일 적용.
  • bcrypt → bcryptjs: Docker 베이스가 node:20-alpine(빌드 도구 없음)이라 네이티브 모듈 bcrypt 대신 순수 JS bcryptjs 사용.
  • dev 도커 익명 볼륨: /app/node_modules 가 익명 볼륨이라 의존성 변경 시 up -d --build -V(익명 볼륨 갱신) 필요. --build 만으로는 기존 node_modules 볼륨이 재사용되어 새 패키지가 반영되지 않음.
  • owner 고정: 조직 모델이 없어 owner='marketing-team' 상수. 조직 도입 시 교체.
  • ID 전략: User/Repo PK=UUID, Repo 라우팅 식별자=slugName, Task=저장소 내 순번(#9, 4단계).

6. 실행 / 검증

# 개발 환경 기동 (의존성 변경 시 --build -V)
docker compose -f docker-compose.yml -f docker-compose.dev.yml --env-file .env.development up -d --build -V

# 백엔드 로그
docker compose -f docker-compose.yml -f docker-compose.dev.yml --env-file .env.development logs -f backend
  • 백엔드: npm run build / npm run lint (현재 0 error)
  • 프론트: npm run type-check / npm run lint / npm run build-only (현재 0 error)
  • dev synchronize=true 가 users·repos·repo_members 테이블 자동 생성. DB가 비어 있으므로 회원가입 후 로그인.
  • 포트: 프론트 5273, 백엔드 3100(/api), Swagger http://localhost:3100/api-docs.
Reference in New Issue View Git Blame Copy Permalink