사용자 화면 · 마이페이지

1:1 문의 상세

MYP-012 · 2026. 01. 30

화면 이름 1:1 문의의 상세 내용
화면 위치 마이페이지 > 1:1문의 > 1:1문의의 상세 내용
화면 ID MYP-012
작성일 2026. 01. 30
MYP-012 MYP-012 MYP-012
Description
0 화면 접근 조건
  • 1:1 문의 상세 내용은 로그인 사용자만 접근 가능
    • 비로그인 상태에서 접근 시
      • 로그인 안내 모달(LOG-008) 노출
      • 로그인 완료 후 해당 문의 상세 화면으로 이동
1-1 1:1문의 상세내용 헤더
  • 구성
    • 뒤로가기 버튼
    • 문의 제목 영역
    • 문의 제목 영역에는 사용자가 등록한 1:1 문의 제목 텍스트 노출
  • 동작
    • 뒤로가기 버튼 클릭 시
      • 1:1문의 리스트 화면(MYP-011)로 이동
1-2 1:1문의 상세내용
  • 구성
    • 문의 작성일
    • 사용자 문의 본문 텍스트
    • 첨부 이미지 영역(있을 경우)
    • 이미지가 포함된 경우 썸네일 노출
1-3 1:1문의 답변 내용
  • 구성
    • ‘차트 답변' 구분 텍스트
    • 운영자 답변 본문
    • 운영자 답변이 등록된 경우에만 노출
1-4 1:1문의 추가 문의하기 버튼
  • 구성
    • 하단 고정 버튼 : 추가 문의하기
    • 버튼 클릭 시
      • 1:1 문의 등록 화면(MYP-011)으로 이동
      • 제목 자동 생성
        • (추가문의) 기존 문의 제목
2-1 1:1 문의 추가 문의 상세내용 헤더
  • 구성
    • 뒤로가기 버튼
    • 문의 제목 영역
    • 문의 제목 영역에는 (추가문의) + 기존 문의 제목 형태로 노출
  • 동작
    • 뒤로가기 버튼 클릭 시, 1:1 문의 리스트 화면(MYO-011)으로 이동
3 1:1문의 내역이 없는 화면
  • 노출 조건
    • 사용자의 1:1 문의 내역이 없는 경우
    • 1:1 문의 내용이 없습니다
  • 구성
    • 하단 고정 버튼 : 1:1 문의 하기
    • 버튼 클릭 시
      • 1:1문의 등록 화면(MYP-011)으로 이동
4 공통 규칙
  • 1:1 문의 상세 내용 화면은 읽기 전용
  • 문의 제목/본문 수정 기능은 제공하지 않음
  • 추가 문의는 항상 기존 문의를 기준으로 생성
  • 본 화면은 마이페이지 공통 규칙(MYP-001)을 따른다

Design Output

UI 디자인 산출물

위 스토리보드 기획을 CHAART OS 디자인 토큰으로 변환한 결과물. 실제 구현 시 참조할 최종 디자인.

9:41
1:1 문의 제목

20XX. XX. XX

사용자 1:1 문의의 등록 본문 내용입니다. 사용자 1:1 문의의 등록 본문 내용입니다. 사용자 1:1 문의의 등록 본문 내용입니다. 사용자 1:1 문의의 등록 본문 내용입니다.

* 차트 답변

차트 1:1 문의의 답변 내용입니다. 차트 1:1 문의의 답변 내용입니다. 차트 1:1 문의의 답변 내용입니다. 차트 1:1 문의의 답변 내용입니다. 차트 1:1 문의의 답변 내용입니다. 차트 1:1 문의의 답변 내용입니다.

추가 문의하기
9:41
(추가 문의) 1:1 문의 제목

20XX. XX. XX

사용자 1:1 문의의 등록 본문 내용입니다. 사용자 1:1 문의의 등록 본문 내용입니다. 사용자 1:1 문의의 등록 본문 내용입니다. 사용자 1:1 문의의 등록 본문 내용입니다. 사용자 1:1 문의의 등록 본문 내용입니다.

* 차트 답변

차트 1:1 문의의 답변 내용입니다. 차트 1:1 문의의 답변 내용입니다. 차트 1:1 문의의 답변 내용입니다. 차트 1:1 문의의 답변 내용입니다. 차트 1:1 문의의 답변 내용입니다. 차트 1:1 문의의 답변 내용입니다.

추가 문의하기
9:41
1:1 문의
MYP-012

1:1문의 내용이 없습니다

1:1 문의 하기
개발 구현 가이드 — MYP-012 1:1 문의 상세

Update History

2026.03.19sb-wireframe-frame 패턴 전환 (MKT 품질 통일), DS v2 연동, 구조 정합성 수정
2026.03.16구현 가이드 최신화 — Applied Design Tokens 통합, Description/디자인 산출물 기준 전면 재작성
2026.03.16구현 가이드 최신화 (8섹션 재작성)
2026.03.11추가 문의하기 / 1:1 문의 하기 CTA 레드 그라디언트 적용, 구현 가이드 추가 (7섹션)
2026.03.04초기 디자인 작성

Implementation Specification

1. 화면 구조 개요

  • 3개 화면 구성: 문의 상세(원본) / 추가 문의 상세 / Empty State(문의 없음)
  • 문의 상세: 상태바(44px) → 네비바(48px) → 날짜 영역 → 문의 본문 → 첨부 이미지(120px) → 차트 답변 → 하단 CTA "추가 문의하기"(50px) → 홈 인디케이터(34px)
  • Empty State: 상태바(44px) → 네비바(48px) → Paper-Catalog Hero(160px) → "1:1문의 내용이 없습니다" 중앙 텍스트 → 하단 CTA "1:1 문의 하기" → 홈 인디케이터(34px)
  • 전체 배경: --bg (#FAFAF8), 로그인 사용자만 접근 가능

2. 레이어 구조 + 치수

#영역높이/위치배경/스타일
1상태바44pxiOS 시스템 상태바
2네비게이션 바48px--bg (#FAFAF8), padding 0 24px, gap 12px
3스크롤 콘텐츠flex:1문의 원문 + 첨부 + 답변 (조건부)
4하단 CTA50px, absolute bottom:34px left:0 right:0, padding 0 24px--cta-gradient (linear-gradient 135deg #961E23 → #B22A30 → #961E23)
5홈 인디케이터34pxiOS 홈 바 영역
  • 네비바: 뒤로가기 아이콘(chevron-left, 20x20px, --charcoal #1A1A1A, stroke 1.5px, round/round) + 타이틀(--sans Pretendard 17px/700, --charcoal, ls: -0.02em)
  • 날짜: --mono TASA Orbiter 11px/400, --text-muted (#888888), ls: 0.02em, padding 12px 24px, border-bottom 1px solid rgba(26,26,26,0.06)
  • 문의 본문: --sans Pretendard 14px/400, --charcoal #1A1A1A, line-height 1.8, ls: -0.005em, padding 16px 24px
  • 첨부 이미지 영역: height 120px, --paper (#F0EDE6) 배경 + linen 텍스처 overlay, margin 0 24px, 이미지 placeholder 아이콘(24x24, --text-muted stroke, opacity 0.5)
  • 답변 라벨: --mono TASA Orbiter 11px/600, --text-muted, ls: 0.04em, text-transform: uppercase, "* 차트 답변"
  • 답변 본문: --sans Pretendard 14px/400, --charcoal, line-height 1.8, ls: -0.005em
  • CTA: height 50px, --cta-gradient 배경, --sans 15px/600, #FFFFFF, ls: -0.01em, R=0
  • Empty State 텍스트: --sans Pretendard 15px/500, --text-muted (#888888), ls: -0.01em, center, padding 60px 24px

3. 핵심 인터랙션

  • "추가 문의하기" CTA 탭: MYP-011의 문의 등록 폼으로 이동 (기존 문의와 연결하여 저장)
  • "1:1 문의 하기" CTA 탭 (Empty State): MYP-011의 새 문의 등록 폼으로 이동
  • 뒤로가기 버튼: MYP-011(1:1 문의 리스트)로 이동
  • 첨부 이미지 탭: 이미지 확대 뷰어 실행 (있는 경우)

4. 상태 변화

  • 답변완료: 문의 원문 + 첨부(있으면) + 차트 답변 표시, 하단 CTA "추가 문의하기"
  • 답변 대기: 문의 원문 + 첨부만 표시, 답변 섹션 숨김, 하단 CTA "추가 문의하기"
  • Empty State: Paper-Catalog Hero(160px, margin 16px 24px) + 안내 문구, 하단 CTA "1:1 문의 하기"
  • 첨부 이미지 없음: 첨부 영역 조건부 숨김
  • 추가 문의 상세: 헤더에 "(추가 문의)" 접두사 추가, 나머지 레이아웃 동일

5. 네비게이션 플로우

  • 진입: MYP-011(1:1 문의 리스트) → MYP-012(문의 상세)
  • 비로그인 접근: 로그인 안내 모달(LOG-009) → 로그인 완료 후 해당 상세로 이동
  • 뒤로가기: MYP-011(1:1 문의 리스트)로 이동
  • "추가 문의하기": MYP-011 등록 폼으로 이동 (기존 문의 연결)
  • "1:1 문의 하기" (Empty): MYP-011 등록 폼으로 이동

6. 에러 / 예외 처리

  • 비로그인 접근: 로그인 안내 모달(LOG-009) 표시
  • 문의 데이터 로드 실패: 에러 메시지 표시 + 재시도 버튼 제공
  • 첨부 이미지 로드 실패: placeholder 이미지(Paper 텍스처 + 아이콘) 표시
  • 삭제된 문의 접근: "존재하지 않는 문의입니다" 안내

7. 모션 스펙

  • 화면 전환: iOS push transition (right-to-left slide, 350ms)
  • 토스트: 하단에서 fadeIn 300ms, 2.5초 후 자동 dismiss fadeOut 300ms
  • 이미지 확대: scale(1→fullscreen) + dim overlay fadeIn 200ms

8. 여백 · 간격 요약

요소값
콘텐츠 좌우 패딩24px
네비바 gap12px
날짜 영역 패딩12px 24px
문의 본문 패딩16px 24px
첨부 이미지 영역height 120px, margin 0 24px
답변 섹션 패딩20px 24px 0
답변 라벨↔본문 간격8px (margin-bottom)
CTA 위치absolute bottom:34px, left/right:0, padding 0 24px
Empty State 패딩60px 24px (center)
Paper-Catalog Hero (Empty)height 160px, margin 16px 24px

9. 적용 디자인 토큰

  • 전체 배경: --bg → #FAFAF8
  • 헤더 타이틀: --sans · 17px · 700 → Pretendard, --charcoal
  • 날짜 텍스트: --mono · 11px → TASA Orbiter, --text-muted, ls: 0.02em
  • 문의 본문: --sans · 14px · 400 · line-height 1.8 → Pretendard, --charcoal
  • 첨부 이미지 영역: --paper + linen → Paper-Catalog 메타포
  • 답변 라벨: --mono · 11px · 600 · uppercase → TASA Orbiter, --text-muted
  • 하단 CTA 버튼: --cta-gradient bg · 50px → 직각, 15px, 600
  • Empty State 텍스트: --sans · 15px · 500 · --text-muted → center, 빈 상태 안내 문구
  • 구분선: rgba(26,26,26,0.06) → 1px solid, 섹션 분리
  • 좌우 패딩: 24px → 전체 콘텐츠 마진
  • Paper-Catalog Hero: --paper + linen → CHRT 모노그램 각인, 레드 악센트 바
← 이전 화면: MYP-011 다음 화면: MYP-013 →