baron_qa_write/docs/qa-inquiry-ui-redesign-tasks.md

S/W 문의 UI 개편 작업 목록

• 작성일: 2026-11-02
• 대상: EG-BIM Q&A 목록·문의 작성·문의 상세
• 디자인 기준: SW문의_소스패키지와 사용자가 제공한 목록·상세 모달·작성 모달 스크린샷 3장
• 현재 단계: 프론트 UI 구현 및 모의 API 회귀 검증 완료. 원격 push·스테이징 실서버 확인·운영 배포는 대기 중.

1. 사용자 선택으로 확정한 범위

항목	확정 내용
작성·상세 표시	목록 위에 뜨는 페이지 내부 모달로 전환. 원본의 <dialog> 방식 기준
기존 주소	기존 작성·상세 주소 연결 유지
소프트웨어	EG-BIM 탭만 가운데 표시. TOVA·GAIA 탭은 오픈 전까지 숨김
디자인 적용 범위	문의 화면·작성·상세 영역. 홈페이지 헤더·전체 메뉴·푸터는 제외
입력 중 닫기	입력 변경이 있으면 폐기 여부를 확인한 뒤 닫기
원격지원	https://939.co.kr/saman/ 활성화. 원본처럼 새 창으로 열기

이번 문서는 현행 한국어 Q&A를 기준으로 한다. 소스 패키지의 영문 페이지는 별도 확대 범위다. 위 선택 항목은 확정됐으며 다시 선택받을 필요가 없다.

2. 소스 확인 결과

확인 파일	확인한 내용	적용 방향
SW문의_소스패키지/ko/inquiry.html	목록과 작성·상세 <dialog>가 한 문서에 있음	화면 구조·배치 기준
SW문의_소스패키지/assets/css/inquiry.css	이미지 히어로, 곡선 탭, 검색·표·버튼, 반응형, 모달 스타일	문의 영역 스타일을 추려 적용
SW문의_소스패키지/assets/js/inquiry.js	예시 게시물·공지 생성, 모달 열기/닫기, 미리보기 등록 안내	모달 UX를 참고하고 실제 데이터 처리는 기존 Q&A 로직으로 연결
SW문의_소스패키지/assets/js/inquiry-copy.js	예시 데이터·상태명·KO/EN 미리보기 문구	실제 서비스 문구와 상태명으로 정리
SW문의_소스패키지/assets/img/inquiry-hero.webp	스크린샷의 상단 배경 이미지	해당 자산 사용
SW문의_소스패키지/ko/{egbim,tova,gaia}/img/	제품 로고와 모바일용 EG-BIM 심볼	EG-BIM 탭과 추후 오픈할 숨긴 탭의 자산으로 보존
SW문의_소스패키지/assets/js/common.js, baron-sso-*.js, _include/	홈페이지 메뉴·헤더·푸터와 별도 SSO 흐름에 의존	Q&A의 기존 Worker SSO 유지. 필요한 디자인 자산만 반영
egbim/app.js, src/index.js	실제 API·SSO·첨부·댓글·검색·작성자 버튼 처리	기능 이전의 기준

원본의 등록은 저장 API를 호출하지 않고 미리보기 문구만 표시한다. 상세에도 실제 첨부·댓글·수정·삭제·완료 확인 UI가 없다. 따라서 HTML/CSS 전체 복사만으로 기존 기능이 유지되지 않으며, 현재 기능을 새 화면 구조에 연결해야 한다.

docs/관리페이지 md 파일/detail-popup-window-tasks.md는 관리페이지의 별도 브라우저 창 작업 기록이다. 이번에 확정한 Q&A 모달 전환과는 다른 화면의 기록이다.

3. 목표 화면

목록

• 상단 S/W 문의 이미지 배경과 설명 문구를 스크린샷에 맞춘다.
• 반투명 배경의 제품 탭과 선택된 EG-BIM 탭의 곡선·로고·색상을 반영한다.
• 홈페이지 헤더를 제외하므로 원본의 헤더 높이 보정용 상단 여백을 함께 조정한다.
• 문의 내역 제목, 원격지원 버튼, 둥근 분류 필터·검색창, 표·페이지 이동·문의등록 버튼을 맞춘다.
• TOVA·GAIA는 오픈 전까지 숨기고 EG-BIM 탭을 가운데 배치한다.
• 실제 문의 데이터와 현행 검색·상태 표시를 사용한다. 예시 공지·예시 고객 데이터·미리보기 문구는 배포 화면에 넣지 않는다.

작성 모달

• 원본의 중앙 모달, 제목과 구분선, 닫기 버튼, 데스크톱 2열·모바일 1열 폼 구성을 반영한다.
• 서비스는 EG-BIM으로 고정한다. TOVA·GAIA로 잘못 등록할 수 없어야 한다.
• 회사·부서·작성자·이메일 칸은 현재 SSO 정보로 자동 표시하며 읽기 전용으로 구성한다.
• 문의 구분·제목·내용·첨부파일에 기존 비밀글 체크 UI를 더한다.
• 작성자 정보의 저장 원본은 기존 Worker의 세션·조직 조회 결과를 유지한다.
• 등록 중 상태, 필수값 오류, 첨부 오류와 API 오류를 모달 안에서 표시한다.

상세·수정 모달

• 원본처럼 제목·닫기 버튼·구분선·작성 정보·본문·하단 버튼 순서로 구성한다.
• 본문 아래에 첨부 목록·다운로드, 완료 안내·확인, 댓글·이미지, 댓글 입력 영역을 추가한다.
• 작성자에게만 게시글 수정·삭제 버튼을 표시한다. 댓글 버튼은 각 댓글 작성자에게만 표시한다.
• 수정은 상세 모달의 편집 모드로 연결하고, 저장·취소 후 상세 보기로 복귀한다.
• 댓글과 첨부로 내용이 길어져도 모달 내부에서 스크롤하고 목록의 위치는 유지한다.

기본 모달 크기는 원본의 최대 폭 780px·최대 높이 88dvh·둥근 모서리·어두운 배경을 출발점으로 한다. 상세에 추가되는 기능은 이 구조 안에서 배치하고, 작은 화면의 실제 사용성을 검증한다.

4. 반드시 유지할 기능

기능	개편 후 유지 기준
SSO 로그인	기존 /auth/*, Q&A 세션 쿠키, 로그인 후 복귀 흐름 유지
회사·부서	Worker의 org-context 매핑 유지. 폼의 수동 입력으로 대체하지 않음
목록 검색	fuzzy 검색·초성·띄어쓰기·오타 허용, 정확한 제목 우선 정렬 유지
목록 수집·필터	100건 이후 페이지 수집, 분류·내 글 필터, 로딩·부분 실패 표시 유지
문의 작성	기존 구분·제목·내용 검증과 실제 저장 흐름 유지
문의 첨부	다중 첨부·파일당 30MB, 기존 multipart 업로드와 상세 다운로드 유지
비밀글	작성·수정 체크, 목록의 잠금 표시와 기존 조회 정책 유지
문의 수정·삭제	기존 API 연결과 작성자 전용 버튼 표시 유지
댓글	실제 댓글 조회·등록·수정·삭제와 작성자별 버튼 표시 유지
댓글 이미지	다중 이미지·파일당 30MB, 이미지 형식 검증·미리보기·썸네일 유지
처리 상태	현행 신규·접수·진행중·완료·보류 의미 유지
완료 확인	작성자에게 표시하는 처리 완료 안내·완료 확인·확인 후 상태 갱신 유지
기존 데이터	저장된 작성자·회사·부서·첨부·댓글을 그대로 사용. UI 작업으로 과거 데이터 재매핑하지 않음

원본의 상태 예시는 문의접수/답변완료/검토중/패치예정이고 현행 상태와 다르다. 배지의 디자인을 적용하면서 현행 상태 의미를 임의로 치환하거나 보류 상태를 누락하지 않는다.

5. 화면 전환·주소 연결안

내부 상태 URL은 아래 형태를 구현 기준안으로 사용한다. 기존 주소를 통해 들어오는 사용자도 같은 모달을 볼 수 있도록 연결한다.

진입	연결할 화면
/egbim/, /egbim/index.html	새 목록
목록의 문의등록	목록 위 작성 모달. 예: /egbim/?view=write
목록 제목 클릭	해당 글의 상세 모달. 예: /egbim/?view=detail&id=<글 UUID>
/egbim/write.html	목록과 작성 모달로 연결
/egbim/detail.html?id=<글 UUID>	목록과 해당 글의 상세 모달로 연결

flowchart LR
    A[문의 목록] -->|문의등록| B[작성 모달]
    A -->|글 제목| C[상세 모달]
    B -->|저장 성공| C
    C -->|작성자 수정| D[상세 편집 모드]
    D -->|저장 또는 취소| C
    B -->|닫기| A
    C -->|닫기 또는 삭제 완료| A

• 모달 URL로 직접 접속·새로고침해도 해당 화면을 복원한다.
• 브라우저 뒤로·앞으로 이동과 모달 열기·닫기를 일치시킨다.
• 모달을 닫을 때 목록의 검색어·분류·내 글 조건·페이지·스크롤을 보존한다.
• 등록 성공 시 작성 모달에서 해당 글의 상세 모달로 전환하고 목록도 갱신한다.
• 수정·댓글 변경·완료 확인 후 상세와 목록의 관련 상태를 동기화한다.
• 삭제 성공 시 목록으로 복귀하고, 마지막 페이지가 비면 유효한 페이지로 보정한다.
• 세션 만료 시 기존 로그인 흐름을 사용하고 로그인 후 원래 작성·상세 진입 주소를 복원한다.

6. 실제 API 연결 유지

아래는 브라우저가 사용하는 현재 Worker 경로다. 원본 목업의 폼 이름을 그대로 전송하지 않고 기존 요청 형식을 연결한다.

동작	기존 경로·방식	유지할 처리
로그인 사용자 확인	GET /auth/session	인증된 사용자·조직 정보 표시
목록	GET /api/feedbacks?limit=100&page=...	페이지 수집·검색·필터
작성	POST /api/feedbacks	텍스트는 JSON, 첨부는 multipart의 images 필드
상세	GET /api/feedbacks/{id}	실제 본문·작성자·첨부·상태
수정·삭제	PATCH/DELETE /api/feedbacks/{id}	기존 수정 가능 필드와 저장 형식
댓글 조회·등록	GET/POST /api/feedbacks/{id}/comments	텍스트 또는 multipart의 attachments 이미지 필드
댓글 수정·삭제	PATCH/DELETE /api/feedbacks/{id}/comments/{commentId}	실제 댓글 ID와 작성자 연결
완료 확인	POST /api/feedbacks/{id}/completion-confirmation	기존 완료 확인 처리

이번 범위에서 새 DB나 별도 업로드 API를 도입할 필요는 없다. TOVA·GAIA를 숨겨 두므로 제품별 API 키·프로젝트·채널 설정 확대도 이번 작업의 선행 조건이 아니다.

7. 단계별 작업 목록

P0. 분석·범위 확정 — 완료

• 원본 HTML·CSS·JS·이미지 목록 확인.
• 원본이 실제 저장 기능이 없는 디자인 목업임을 확인.
• 현행 목록·작성·상세 및 Worker API의 기능 대조.
• 사용자 제공 스크린샷 3장을 디자인 기준으로 반영.
• 모달 전환·기존 주소 유지·EG-BIM 우선·헤더/푸터 제외 결정.
• 입력 변경 확인 후 닫기·원본 원격지원 주소 활성화 결정.

P1. 스타일·자산 적용

• UI-01 문의 전용 스타일 범위를 정하고 기존 공통 버튼·폼·레이아웃과의 충돌을 정리한다.
• UI-02 히어로 이미지·제품 로고·필요한 폰트만 배포 자산으로 정리하고 상대 경로를 맞춘다.
• UI-03 목록의 히어로·곡선 탭·필터·검색창·표·페이지 이동·등록 버튼을 원본 기준으로 구성한다.
• UI-04 TOVA·GAIA를 숨기고 EG-BIM 탭을 데스크톱·모바일에서 가운데 배치한다.
• UI-05 원격지원 링크를 확정 주소로 연결하고 새 창 안내와 noopener noreferrer를 유지한다.
• UI-06 실제 데이터가 없는 예시 공지·예시 댓글 수·미리보기 문구를 제거한다. 댓글 수 배지가 필요하면 실제 API 제공값을 확인하고 연결하며, 행마다 댓글 API를 추가 호출하는 방식은 피한다.

P2. 모달·주소·상태 구성

• UI-07 목록·작성·상세의 데이터 처리와 화면 표시를 분리하고, 모달을 다시 열어도 이벤트가 중복 등록되지 않도록 구성한다.
• UI-08 작성·상세 모달의 열기·닫기·전환과 목록 상태 보존을 구현한다.
• UI-09 URL 직접 진입·새로고침·뒤로/앞으로 이동을 연결한다.
• UI-10 기존 write.html, detail.html?id=... 주소를 새 모달 진입으로 연결하고 로그인 복귀도 확인한다.
• UI-11 입력 변경 확인을 닫기 X·취소·ESC·배경 클릭·뒤로 이동에 동일하게 적용한다. 확인을 취소하면 입력과 선택한 파일을 보존한다.
• UI-12 상세 안의 미등록 댓글·편집 중 댓글도 닫기 시 입력 변경 확인 대상에 포함한다.
• UI-13 모달을 닫거나 다른 글을 열었을 때 이전 글의 늦은 응답이 새 화면을 덮지 않도록 처리한다.
• UI-14 포커스 진입·모달 밖 이동 제한·닫은 뒤 포커스 복귀·배경 스크롤 잠금을 구현한다. 삭제로 원래 행이 사라지면 목록의 적절한 위치로 포커스를 돌린다.

P3. 실제 작성·상세 기능 이전

• UI-15 현재 SSO 확인과 회사·부서 매핑을 작성 모달의 읽기 전용 정보에 연결한다.
• UI-16 문의 구분·제목·내용·비밀글·첨부파일과 기존 검증·등록 중 상태를 연결한다.
• UI-17 등록 성공 시 전체 페이지 이동 대신 상세 모달을 열고 목록을 갱신한다. 실패 시 입력과 파일 선택 상태를 유지한다.
• UI-18 상세 본문·작성 정보·한국 시간 등록일·비밀글 표시·첨부 목록 및 다운로드를 연결한다.
• UI-19 작성자 UUID가 일치할 때만 게시글 수정·삭제 버튼을 표시하고 수정 폼·저장·취소·삭제 완료 흐름을 연결한다.
• UI-20 댓글 조회·등록·수정·삭제, 댓글 이미지 첨부·미리보기·썸네일을 연결한다.
• UI-21 게시글 작성자와 댓글 작성자를 각각 판단한다. 다른 사람의 게시글 안에 있는 본인 댓글에는 댓글 버튼을 표시한다.
• UI-22 완료 안내·완료 확인 버튼·확인 완료 표시와 목록 상태 갱신을 연결한다.
• UI-23 모달 안의 성공·오류 안내를 표시하고, 반복 열기·닫기 때 오류·수정 상태·이전 글의 댓글·이미지가 남지 않도록 초기화한다.
• UI-24 실제로 폐기된 첨부·댓글 이미지 미리보기의 임시 URL을 정리한다.

P4. 반응형·회귀 검증

• UI-25 데스크톱 목록·작성·상세 화면을 제공 스크린샷과 비교한다.
• UI-26 모바일에서 제품 탭·가로 스크롤 표·1열 작성 폼·모달 내부 스크롤·하단 버튼을 확인한다.
• UI-27 작성자·타인·동명이인·작성자 ID 없음·세션 확인 중/만료/실패 조건에서 게시글과 댓글 버튼의 실제 가시성을 검사한다. 새 .inquiry-button에도 hidden 속성이 적용되도록 한다.
• UI-28 오타·초성·띄어쓰기 검색, 100건 이후 데이터, 분류·내 글·페이지 이동 회귀를 검사한다.
• UI-29 JSON 작성·다중 첨부 작성·비밀글·첨부 다운로드·댓글 이미지·수정/삭제·완료 확인을 모의 API와 브라우저에서 검사한다.
• UI-30 반복 모달 열기·등록/저장 중 상태·닫기 확인 취소·오류 후 재시도·다른 글의 늦은 응답을 검사한다.
• UI-31 기존 작성자·댓글·검색·Worker 테스트를 새 화면 진입에 맞춰 유지하고 npm run check, npm test를 통과시킨다.

P5. 자산 배포·문서 정리

• UI-32 scripts/upload-r2.sh가 새 CSS·JS·이미지·로고를 업로드하도록 경로를 확인하고 WebP의 MIME을 image/webp로 지정한다.
• UI-33 기존 주소 연결 파일도 배포 목록에 유지하고 CSS·JS 버전을 갱신한다.
• UI-34 현행 3개 페이지 전이 설명을 목록·모달 흐름과 실제 multipart API 기준으로 갱신한다. 구형 presign·로컬 저장 전용 설명을 구현 기준으로 사용하지 않는다.
• UI-35 변경 커밋과 검증 결과를 정리한다. 원격 push는 기존 요청대로 사용자가 진행한다.
• UI-36 스테이징 자동 배포 성공 후 실제 로그인·조직 정보·작성·첨부·댓글·비밀글·기존 주소를 확인한다.
• UI-37 운영 적용 시 기존 수동 운영 배포 절차를 따른다. UI 개편을 이유로 운영 API 설정이나 SSO client/callback을 임의로 교체하지 않는다.

8. 예상 변경 파일

파일·영역	작업
egbim/index.html	새 목록과 작성·상세 모달의 화면 구조
egbim/write.html, egbim/detail.html	기존 주소의 진입 연결
egbim/app.js 및 필요 시 문의 전용 JS	기존 기능 연결·모달 수명주기·URL 상태 처리
assets/styles.css 및 문의 전용 CSS	원본 디자인·기능 확장 영역·반응형·숨김 처리
assets/ 아래 문의용 자산	히어로·로고·필요한 폰트
src/index.js	변경 없음. 기존 로그인 보호·API·SSO·조직 처리 유지
scripts/upload-r2.sh	새 자산 경로·MIME 확인
tests/page-*.test.js, 필요 시 Worker 라우팅 검사	목록·모달·기능·기존 주소 회귀
README.md, docs/qa-login-to-save-transition.md	화면 구조·진입 주소·현재 API 흐름 설명

원본 패키지는 비교 기준으로 보존한다. 필요한 자산을 선별해 서비스 경로에 반영하며 패키지 전체와 홈페이지 공통 인증 스크립트를 그대로 배포하지 않는다.

9. 완료 기준

• 제공한 세 화면의 배경·탭·목록·폼·모달 디자인을 반영했다.
• 작성·상세를 목록 위 모달로 열며 기존 URL로도 같은 글·작성 화면에 진입한다.
• 회사·부서가 SSO 조직 정보로 표시되고 기존 작성자 식별자를 유지한다.
• 첨부·댓글·비밀글·수정/삭제·완료 확인이 실제 기존 API로 동작한다.
• 게시글·댓글 버튼이 실제 작성자에게만 보이며 로그인 확인 전에도 잘못 노출되지 않는다.
• fuzzy 검색과 전체 페이지 수집·필터·페이지 이동을 유지한다.
• 입력 변경 후 닫기는 확인을 거치며, 닫기 취소 시 입력과 파일을 보존한다.
• 모달을 닫아도 목록 조건·위치가 유지되고 새 글·수정·삭제 결과가 반영된다.
• TOVA·GAIA 숨김·EG-BIM 탭 중앙 배치와 확정된 원격지원 링크가 동작한다.
• 예시 데이터·미리보기 전용 문구가 남지 않고 모바일·키보드 사용과 회귀 검증을 통과했다.

10. 구현·검증 결과

변경은 정적 HTML/CSS/JS와 자산 업로드 MIME·검증·문서에 한정했다. Worker·API 계약·DB·SSO 설정·기존 배포 트리거는 변경하지 않았다. 기존 주소는 프론트의 assets/inquiry/entry.js로 연결하며, 새 화면은 기존 API를 그대로 호출한다. 원본 패키지 전체를 서비스 자산으로 복사하지 않았다.

• npm run check, npm test: 기존 94개와 구형 주소 연결 4개, 총 98개 테스트 통과.
• R2 업로드 검사: 새 하위 경로의 진입 JS와 WebP 이미지가 기존 배포 경로에 포함되며 MIME은 각각 application/javascript, image/webp다.
• Chromium 데스크톱 1900×1000, 모바일 390×844에서 제공 스크린샷과 비교했다. 모바일 표는 기존 열을 유지한 가로 스크롤, 작성 폼은 1열, 모달은 내부 스크롤이다.
• 모의 API 브라우저 검사: fuzzy 검색·페이지 이동·목록 조건 보존·JSON/다중 첨부 작성·비밀글·첨부 링크·게시글 수정/삭제·댓글 수정/삭제/이미지 등록·완료 확인 통과.
• 모달 검사: 기존 URL·직접 진입·새로고침·뒤로/앞으로·X/ESC/배경 닫기·입력 폐기 확인·파일 유지·등록 실패 재시도·등록 중 닫기 방지·반복 열기·이전 글의 늦은 응답·키보드 모달 밖 이동 제한 통과.
• 권한 검사: 작성자·타인·동명이인/ID 없음·만료/오래된 저장값·세션 조회 실패·세션 응답 대기의 6조건에서 게시글/댓글 버튼 실제 가시성을 검사했다.
• 100건 이후 페이지 수집·분류·내 글·초성·오타·띄어쓰기와 기존 Worker/API 회귀는 기본 테스트에서 확인했다.

위 체크는 로컬 및 모의 API 기준이다. 실제 SSO 로그인·관리페이지 DB 저장·실제 파일 다운로드/업로드 확인은 UI-36에 남겨 두었으며, UI-37 운영 배포도 아직 수행하지 않았다. 사용자가 push한 뒤 스테이징 배포 결과를 확인한다.

브라우저 회귀 검증

tests/browser/inquiry-ui.mjs는 Playwright와 Chromium이 있는 별도 검증 환경에서 실행한다. 앱 의존성에는 브라우저 패키지를 추가하지 않았다. 모든 네트워크 요청을 모의 API 또는 로컬 정적 파일로 처리하고 외부 요청은 차단한다.

# Playwright와 해당 Chromium이 이미 설치된 환경
npm run test:ui

# 검증 도구가 저장소 밖에 설치되어 있는 경우
PLAYWRIGHT_MODULE=/absolute/path/to/playwright-core \
CHROMIUM_EXECUTABLE_PATH=/absolute/path/to/chromium \
npm run test:ui

기본 스크린샷 출력 위치는 임시 디렉토리의 qa-inquiry-ui/다. UI_SCREENSHOT_DIR로 바꿀 수 있으며, 데스크톱·모바일 목록/작성/상세 6장을 생성한다. 실제 사용자 세션·API Key는 필요하지 않다.