0 Fork 0

Files

T

root c62630e22d feat(ui): apply inquiry list and modal design

Apply the supplied inquiry layout to the list and native write/detail dialogs while preserving existing API requests, author controls, attachments, comments and search. Keep legacy entry links and confirm before discarding drafts.

Validation: 98 tests and syntax checks pass; mocked Chromium desktop/mobile and six author/session visibility scenarios pass.

2026-11-02 13:11:47 +09:00

5.4 KiB

Raw Blame History

EG-BIM Q&A 로그인·화면·저장 흐름

기준일: 2026-11-02. 스테이징 qa-test.baroncs.co.kr, 운영 qa.baroncs.co.kr의 현재 구조를 설명한다. 이번 UI 개편은 프론트에 한정하며 Worker API·DB·SSO 설정을 변경하지 않는다.

로그인과 화면 진입

Q&A는 기존 Worker의 OIDC Authorization Code + PKCE와 HttpOnly 세션을 사용한다. 홈페이지에서 토큰을 전달하지 않는다. 보호된 페이지에 세션 없이 접근하면 Worker가 /auth/login?return_url=...로 보내며, 인증 후 원래 경로와 쿼리로 돌아온다. 작성자와 회사·부서는 GET /auth/session의 검증된 정보로 표시한다.

주소·사용자 동작	화면
`/egbim/`, `/egbim/index.html`	문의 목록
문의등록 / `?view=write`	목록 위 작성 모달
글 제목 / `?view=detail&id=<UUID>`	목록 위 해당 글 상세 모달
`/egbim/write.html`	프론트에서 `/egbim/?view=write`로 replace 이동
`/egbim/detail.html?id=<UUID>`	프론트에서 `/egbim/?view=detail&id=<UUID>`로 replace 이동

구형 주소도 Worker의 기존 로그인 보호를 거친다. 새로고침과 직접 링크는 URL에 지정한 모달을 복원한다. 모달의 열기·닫기는 브라우저 뒤로·앞으로 이동과 연결한다. 목록 위에서 열었을 때 검색어·분류·내 글·페이지·스크롤을 유지한다. 작성·수정·댓글 초안이나 파일 선택 변경이 있으면 닫기 전에 폐기를 확인한다.

flowchart TD
    A[Q&A 주소 진입] --> B{Q&A 세션 유효?}
    B -->|아니오| C[기존 OIDC SSO 로그인]
    C --> D[callback 검증·세션 발급]
    D --> A
    B -->|예| E[목록 + URL에 지정한 모달]
    E --> F[GET /auth/session]
    F --> G[작성자·회사·부서 표시]
    G --> H[작성 모달 입력·검증]
    H --> I{첨부파일 있음?}
    I -->|아니오| J[POST /api/feedbacks JSON]
    I -->|예| K[POST /api/feedbacks multipart images]
    J --> L[기존 Worker: 세션·조직 확인 후 ABC 전달]
    K --> L
    L --> M{저장 성공?}
    M -->|예| N[목록 갱신·해당 글 상세 모달]
    M -->|아니오| O[모달 오류 표시·입력과 파일 유지]

작성·첨부 저장

브라우저는 기존 UUID v7 생성 방식으로 feedbackId를 만들고 아래 필드를 보낸다. 회사·부서·작성자·이메일 칸은 읽기 전용이며, 서버가 기존 세션·조직 조회 결과에서 작성자 정보를 결정한다.

{
  "feedbackId": "<UUID v7>",
  "title": "문의 제목",
  "contents": "문의 내용",
  "Category": "GENERAL_QNA",
  "is_secret": "false"
}

첨부가 없으면 JSON으로 전송한다.
첨부가 있으면 같은 필드와 반복 images 파일 필드를 FormData에 넣는다. Content-Type의 boundary는 브라우저가 지정한다.
기존 Worker가 세션과 첨부를 검증하고 API Key 및 서버 작성자 정보를 붙여 ABC에 전달한다. 파일당 제한은 30MB다.
브라우저가 presign API나 R2 PUT을 직접 호출하지 않는다. API base가 빈 문자열이면 현재 호스트의 Worker를 사용한다.
API 성공 후 기존 localStorage 캐시를 갱신하고 상세 모달을 연다. 실패를 로컬 저장 성공으로 처리하지 않는다.
등록 중에는 중복 클릭과 모달 닫기를 막고, 실패하면 입력·파일을 유지하며 재시도할 수 있게 한다.

상세·수정·댓글

동작	기존 Worker 요청
목록	`GET /api/feedbacks?limit=100&page=...`
상세	`GET /api/feedbacks/{id}`
수정	`PATCH /api/feedbacks/{id}`: `title`, `contents`, `Category`, `is_secret`
삭제	`DELETE /api/feedbacks/{id}`
댓글 조회·등록	`GET/POST /api/feedbacks/{id}/comments`
댓글 수정·삭제	`PATCH/DELETE /api/feedbacks/{id}/comments/{commentId}`
완료 확인	`POST /api/feedbacks/{id}/completion-confirmation`

댓글 텍스트는 JSON content, 이미지 첨부 시에는 multipart content와 반복 attachments 필드를 사용한다. 기존 다중 이미지·형식·30MB 제한과 미리보기를 유지한다. 폐기된 미리보기와 모달을 닫을 때 임시 Blob URL을 해제한다.

수정·삭제 버튼은 검증된 기본 requester UUID가 해당 게시글·댓글의 작성자 ID와 같을 때만 표시한다. 이름·이메일 일치로 권한을 부여하지 않는다. 로그인 확인 중·세션 만료·확인 실패·작성자 ID 없음 상태에서는 숨긴다. 게시글과 댓글의 소유자는 각각 판단한다.

수정·완료 확인은 목록에도 반영하고, 삭제 후에는 목록으로 돌아간다. 늦게 도착한 이전 상세 응답은 닫힌 모달의 분리된 DOM에서 처리해 현재 모달을 덮지 않는다. 오류는 모달 안에 표시한다.

확인과 배포

기본 검사: npm run check, npm test.
별도 브라우저 검사: npm run test:ui. Playwright/Chromium 준비와 검증 범위는 UI 작업 목록을 참고한다. 모든 요청을 모의 처리하며 실제 서버 데이터를 변경하지 않는다.
원격 push는 사용자가 진행한다. 스테이징은 기존 main push 자동 배포, 운영은 기존 수동 배포 절차를 사용한다.
실제 로그인·관리페이지 저장 연동은 스테이징 배포 후 확인한다. 모의 API 검증만으로 실서버 검증 완료로 표시하지 않는다.

5.4 KiB Raw Blame History