dpdpdndn 블로그

FE-38-stage2-integration-wiring

NEW8 min read

[FE-38] 2단계 배선 (등급 칩 · 추천도 섹션 · 업로드 CTA)

작업 내용 (설계 의도)

근거: 지원 관리 확장 FE 웹 설계 S-24 지원 추천도·S-15 관심 공고 보관함·컴포넌트 트리·티켓 분해 · Wave DAG > 단계 2·Single Writer per File 검증 > 단계 2 wave 3·Testing Plan > 반드시 커버할 실패·엣지 경로(30), 지원 관리 확장 TDD 2단계 — 지원 추천도 API 계약.

변경 사항

  • 단계 2 wave 3의 통합 배선 티켓입니다. wave 2의 6티켓이 만든 컴포넌트·시트를 기존 화면에 연결합니다. 배선을 별도 wave로 뺀 이유는 같은 wave 두 티켓이 같은 파일을 수정하는 상황(Single Writer per File 위반)을 피하기 위해서입니다 — 공유 파일 수정이 이 티켓 하나로 모입니다.
  • 보관함 카드(S-15)에 등급 칩 + 점수만 노출합니다([강력 추천 92]). 근거는 상세에서만 보여 줍니다 — 목록 카드에 축별 근거를 넣으면 카드가 비대해지고 “오늘 무엇을 결정해야 하나”라는 화면 목적이 흐려집니다.
  • 보관함 카드의 recommendation은 단계별 점진 노출 대상이라 항상 nullable입니다. null이면 등급 칩과 점수를 렌더하지 않습니다 — 0점·미평가 문구로 대체하지 않습니다(recommendation.evaluation 플래그 OFF 구간의 정상 동작).
  • 공고 상세(S-04)에 추천도 섹션을 신설하고 FE-36의 표시 컴포넌트를 배선합니다. 섹션이 useRecommendation을 호출하는 컨테이너이고 하위 컴포넌트는 props만 받습니다.
  • 추천도 조회 404(RECOMMENDATION_NOT_FOUND)이면 섹션 자체를 렌더하지 않습니다. 2단계 배포 전이거나 아직 평가되지 않은 공고의 정상 상태이므로 에러로 표현하지 않습니다. 단 확정 프로필이 있는 경우에는 “아직 평가하지 않았어요 / 관심으로 분류하면 다음 평가에 포함돼요” 1줄로 다음 행동을 안내합니다.
  • 부분 실패 격리가 이 티켓의 핵심 요구입니다 — 추천도 조회가 404든 5xx든 공고 상세의 다른 섹션(기본 정보·관리 상태·매칭 등)은 정상 렌더되어야 합니다. 5xx는 섹션 내 축소형 ErrorState + [다시 시도]로 격리하고 페이지 전체를 에러 화면으로 바꾸지 않습니다.
  • 서류 보관함(S-20)과 계열 상세(S-21)의 업로드 CTA에 FE-33의 DocumentUploadSheet를 연결합니다. S-21에서 여는 경우 seriesId를 고정해 “새 버전 올리기” 문맥이 유지되게 합니다.
  • 업로드 성공 후 무효화 경로를 확인합니다 — 보관함에서 올리면 계열 목록이, 계열 상세에서 올리면 그 계열 상세가 갱신되어야 합니다.

롤백: 배선 커밋만 되돌리면 wave 2 산출물이 화면에 노출되지 않을 뿐 기존 화면은 그대로 동작합니다.

의존

  • FE-33 — DocumentUploadSheet(배선 대상).
  • FE-36 — 추천도 표시 컴포넌트 4종과 useRecommendation(배선 대상).
  • FE-32 · FE-34 — 업로드 CTA 자리를 만든 서류 화면 2종.
  • FE-24 — 보관함 카드(WatchlistCard) 원본.
  • FE-29 — 공고 상세의 단계 1 섹션 배선. 같은 파일을 이어서 수정합니다.
  • BE-66 — 추천도 노출 계약·플래그 확정.

다이어그램

처리 흐름

sequenceDiagram
    participant User as 사용자
    participant Detail as JobPostingDetailPage
    participant Section as RecommendationSection
    participant Hook as useRecommendation
    User->>Detail: 공고 상세 진입
    Detail->>Section: jobPostingId 전달
    Section->>Hook: 추천도 조회
    Hook-->>Section: 200 또는 404/5xx
    Section-->>User: 섹션 렌더 또는 미렌더
    Detail-->>User: 다른 섹션은 항상 정상 렌더

컴포넌트 의존

flowchart LR
    Detail[JobPostingDetailPage] --> Section[RecommendationSection]
    Section --> Hook[useRecommendation]
    Section --> Card[RecommendationScoreCard]
    Section --> Axis[RecommendationAxisList]
    Card --> Cap[RecommendationCapNotice]
    WCard[WatchlistCard] --> GradeChip[RecommendationGradeChip]
    DocList[DocumentSeriesListPage] --> Sheet[DocumentUploadSheet]
    DocDetail[DocumentSeriesDetailPage] --> Sheet

테스트 케이스

  • 보관함 카드의 recommendation이 채워져 있으면 등급 칩과 점수가 보이고 축별 근거는 보이지 않는다.
  • 보관함 카드의 recommendation이 null이면 등급 칩·점수가 렌더되지 않고 0점·미평가 문구로 대체되지 않는다.
  • 공고 상세에서 추천도 200 응답이면 점수 카드·축 목록·상한 안내가 배선되어 렌더된다.
  • 추천도 조회가 404이면 추천도 섹션이 렌더되지 않고 공고 상세의 다른 섹션은 정상 렌더된다.
  • 추천도 조회가 5xx이면 섹션 내 축소 ErrorState + [다시 시도]가 보이고 페이지 전체가 에러 화면으로 바뀌지 않는다.
  • 추천도 404이면서 확정 프로필이 있는 경우 “아직 평가하지 않았어요” 1줄 안내가 보인다.
  • 서류 보관함의 업로드 CTA를 누르면 업로드 시트가 열리고 계열 선택이 비어 있는 상태로 시작한다.
  • 계열 상세의 “새 버전 올리기”를 누르면 업로드 시트가 seriesId가 고정된 상태로 열린다.
  • 보관함에서 업로드가 성공하면 계열 목록 쿼리가 무효화되어 새 계열·버전이 반영된다.
  • 계열 상세에서 업로드가 성공하면 그 계열 상세 쿼리가 무효화되어 새 버전이 목록 최상단에 보인다.
  • 추천도 섹션이 로딩 중일 때 스켈레톤이 보이고 다른 섹션은 이미 렌더되어 있다.
  • 배선된 화면들이 .dark 클래스 환경에서 렌더되고 하드코딩 색을 0건 사용한다.

그래프 뷰