와이어프레임 / 35-화면설계 / wireframes / 화면-07 고객센터

화면 07 · 고객센터 — 와이어프레임

파이프라인 ③단계 · 구조 뼈대(SOT) · Figma 정본 역추출 · 클릭 가능(prototype)
출처: fileKey=9FQdVis1fCSZCqhcfqTvWO · page nodeId=545:199 "07. 고객 센터" · 허브 노트: 화면-07-고객센터.md
5개 섹션 · 15개 상태 프레임 · 기기 375×812 · 최종 테마: 다크(와이어프레임은 구조만 회색으로 본다)
고객센터 메인(/customer)은 신설하지 않는다(arwen_docs#111). 세 목록(공지·FAQ·문의)은 각각 전역 진입점(예: 푸터 Support → /customer/inquiry)에서 들어온다. 목록끼리의 이동은 앱 전역 메뉴로 하므로 이 화면군 밖이다.

▶ 흐름 모드: 요소를 눌러 화면 이동 ▦ 전체 모드: 핫스팟 클릭 시 대상으로 스크롤 ①②③ 요소 번호 = 아래 주석 동작·이동·데이터·규칙·상태 유형 태그

07_01 · 공지사항 (Notice)

운영자가 등록한 서비스 공지를 최신순으로 읽는다. 줄을 누르면 상세로 넘어간다. 사용자는 읽기만 한다.

공지 · 목록
‹ Notice 1

Notice

›2
›
›
›
›
  • 주석 · 공지 목록 기본
  • 1이동헤더 뒤로(layout / header). 고객센터 진입 전 화면으로 (이 화면군 밖).
  • 2이동공지 줄(제목+날짜+icon-arrow-big-24) → 공지 상세.
  • ·데이터공지 목록 GET /cs/notices(최신순). FE notice/NoticeView.vue · [[BoardNotice]] 엔티티.
  • ·규칙공지는 읽기 전용. 글은 운영자가 CMS에서 등록한다.
공지 · 상세
‹ Notice 1

공지 제목 2

2026. 05. 01

  • 1이동뒤로 → 공지 목록.
  • 2데이터공지 한 건 GET /cs/notice/{idx}. 제목·날짜 아래 본문을 스크롤로 읽는다. FE notice/NoticeDetailView.vue.

07_02 · 자주 묻는 질문 (FAQ)

자주 묻는 질문을 접힌 채 나열한다. 질문을 누르면 아래로 답변이 펼쳐진다(아코디언 패턴). 읽기 전용이다.

FAQ · 목록(접힘)
‹ FAQ 1

FAQ

⌄2
⌄
⌄
⌄
⌄
  • 주석 · FAQ 목록 기본
  • 1이동헤더 뒤로 → 고객센터 진입 전 (이 화면군 밖).
  • 2동작질문 줄(질문 + 펼침 화살표 icon-arrow-big-24)을 누르면 아래로 답변이 펼쳐진다.
  • ·데이터FAQ 목록 GET /cs/faqs. FE faq/FaqView.vue · faq/FaqAccordion.vue · [[BoardFaq]] 엔티티.
  • ·규칙읽기 전용. 펼침·접힘은 아코디언(accordion) 동작.
FAQ · 펼침(open)
‹ FAQ

FAQ

⌃1
⌄
⌄
⌄
  • 1상태펼친 질문 아래에 구분선 + 답변이 나타난다. 다시 누르면 접힘(→ FAQ 목록). 여러 개를 각각 열고 닫는다.

07_03 · 1대1 문의 — 목록

운영자에게 직접 묻는 1대1 문의. 등록한 문의가 없으면 빈 화면, 있으면 분류·처리상태와 함께 목록으로 보인다.

문의 · 없을 때(empty)
‹ 1:1 Inquiry 1

No inquiries found. 2

등록된 문의가 없습니다.

Contact us 3
  • 주석 · 문의 빈 화면
  • 1이동헤더 뒤로 → 진입 전 (이 화면군 밖).
  • 2상태문의 0건 → 빈 상태 그림 + "No inquiries found." 안내. 데이터 GET /cs/inquiries가 빈 배열.
  • 3이동"Contact us"(button / CTA) → 문의글 작성.
  • ·규칙푸터 "Support" 링크가 이 문의 화면(/customer/inquiry)으로 온다. 고객센터 메인은 미신설. 근거: arwen_docs#111.
문의 · 목록(list)
‹ 1:1 Inquiry

1:1 Inquiry

Sign-up Inquiry · Pending 2
›
Membership Inquiry · Answered 3
›
Contact us 4
  • 주석 · 문의 목록
  • 2이동문의 줄(분류 · 처리상태 · 제목 · 날짜) → 문의 보기. Pending=답변 대기.
  • 3상태Answered=답변 완료. 처리상태는 두 가지(Pending·Answered).
  • 4이동하단 "Contact us" → 새 문의 작성.
  • ·데이터문의 목록 GET /cs/inquiries. FE inquiry/InquiryView.vue · inquiry/InquiryListItem.vue · [[BoardInquiry]] 엔티티.

07_03_01 · 1대1 문의 — 문의글 작성

분류·제목·내용을 입력하고 이미지를 첨부해 새 문의를 등록한다. 등록 전 확인 팝업이 뜬다.

작성 · default
‹ 1:1 Inquiry 1
Category
Select a category 2
Title
Enter a title 3
Content
Enter your inquiry 4
Attachment
＋5
Submit 6
  • 주석 · 문의 작성 기본
  • 1이동뒤로 → 문의 목록.
  • 2동작문의 분류 선택(드롭다운 Input / input-icon). 필수.
  • 3동작제목 입력(Input / Text_field).
  • 4동작내용 입력(Input / input-textarea).
  • 5동작이미지 첨부(icon-plus-24). 첨부는 [[BoardInquiryImages]]에 저장.
  • 6데이터등록 실행 POST /cs/inquiry(이미지 포함 멀티파트) → 확인 팝업. FE inquiry/InquiryRegisterView.vue.
작성 · filled(첨부)
‹ 1:1 Inquiry
Category
Sign-up Inquiry
Title
I can’t log in.
Content
Attachment 1
×
×
＋
Submit
  • 1상태입력칸을 채우고 이미지 2장 첨부. 썸네일마다 삭제(×, icon-close-24), 오른쪽에 추가(＋) 버튼.
작성 · 등록 확인 팝업
‹ 1:1 Inquiry
Category
Sign-up Inquiry
Title
I can’t log in.
Content
Submit

문의를 등록할까요?

작성한 내용으로 문의를 보냅니다.

취소
확인 1
  • 1데이터등록 확인 팝업(popup + dim). "확인" → POST /cs/inquiry 실행 후 문의 목록. "취소" → 작성 유지.

07_03_02 · 1대1 문의 — 문의글 보기

내 문의와 운영자 답변을 본다. 첨부 이미지 확대, 추가 문의 달기, 삭제까지 이 화면군에서 처리한다.

보기 · 답변 대기(Pending)
‹ 1:1 Inquiry 1
Sign-up Inquiry · Pending 2

2026. 05. 01

3
Delete 4
Edit 5
  • 주석 · 문의 보기 기본
  • 1이동뒤로 → 문의 목록.
  • 2상태분류 + 처리상태. Pending=아직 답변 없음.
  • 3이동첨부 이미지 썸네일 클릭 → 크게 보기. FE inquiry/InquiryImageExpend.vue.
  • 4이동"Delete" → 삭제 확인 팝업(DELETE /cs/inquiry/{idx}).
  • 5이동"Edit" → 작성 화면 재사용으로 수정(PATCH /cs/inquiry/{idx}).
  • ·데이터문의 한 건 GET /cs/inquiry/{idx}. FE inquiry/InquiryDetailView.vue · inquiry/InquiryInfo.vue · [[BoardInquiry]] 엔티티.
보기 · 답변 완료(Answered)
‹ 1:1 Inquiry
Membership Inquiry · Answered 1

2026. 04. 01

Answer 2
Additional Inquiry
Write an additional inquiry 3
Delete 4
Submit 5
  • 주석 · 답변 완료
  • 1상태처리상태 Answered=답변 완료. 화면이 답변 분량만큼 늘어난다.
  • 2요소운영자 답변(회색 말풍선). 운영자가 CMS에서 작성.
  • 3동작추가 문의 입력칸(Input / input-textarea).
  • 4이동"Delete" → 삭제 확인 팝업.
  • 5데이터"Submit" → 추가 문의 등록 확인 팝업. PUT /cs/inquiry/{idx}([[BoardInquiryExtra]]). FE inquiry/InquiryAdditionalView.vue.
보기 · 추가 문의글
‹ 1:1 Inquiry
Membership Inquiry · Answered

2026. 04. 01

Answer
Additional Inquiry 1
Delete
Submit
  • 1상태추가 문의를 등록한 뒤. "Additional Inquiry" 영역에 내가 덧붙인 글이 구분선 아래로 쌓인다. PUT /cs/inquiry/{idx} 반영 · [[BoardInquiryExtra]].
보기 · 이미지 크게(팝업)
‹ 1:1 Inquiry
Sign-up Inquiry · Pending
✕ 1
  • 1이동첨부 이미지를 화면 가운데 크게 표시. 닫기(icon-close-32) → 문의 보기로. FE inquiry/InquiryImageExpend.vue.
보기 · 삭제 확인 팝업
‹ 1:1 Inquiry
Sign-up Inquiry · Pending
Delete
Edit

문의를 삭제할까요?

삭제하면 되돌릴 수 없습니다.

취소
삭제 1
  • 1데이터삭제 확인(popup + dim). "삭제" → DELETE /cs/inquiry/{idx} 후 목록. "취소" → 문의 보기 유지.
보기 · 추가 문의 등록 팝업
‹ 1:1 Inquiry
Membership Inquiry · Answered
Answer
Delete
Submit

추가 문의를 등록할까요?

답변 아래에 추가 문의가 달립니다.

취소
확인 1
  • 1데이터추가 문의 등록 확인. "확인" → PUT /cs/inquiry/{idx} 후 추가 문의글 반영. "취소" → 답변 화면 유지.

이 와이어프레임은 파이프라인 뼈대(SOT)이자 클릭 가능한 프로토타입이다. 번호 주석은 곧 ②화면설계 단계의 실질(동작·이동·엔드포인트·규칙)이다. 화면 구조가 바뀌면 이 파일을 갱신하고, 허브 노트 화면-07-고객센터.md의 wireframe: 필드가 이 파일을 가리킨다. 엔드포인트·엔티티 근거는 [[web-api-cs-product-terms-엔드포인트]]와 [[BoardNotice]]·[[BoardFaq]]·[[BoardInquiry]]·[[BoardInquiryExtra]]·[[BoardInquiryImages]]에 있다.