1:1 문의

작성 취소 안내

작성을 취소하고 이동하시겠어요?

Implementation Specification

1. 화면 구조 개요

• 3개 화면 구성: 문의 리스트 / 문의 등록 폼 / 작성 취소 모달
• 문의 리스트: 상태바(44px) → 네비바(48px) → Paper-Catalog Hero(140px, margin 12px 24px) → 문의 항목 리스트 → 하단 CTA "1:1 문의 하기" → 홈 인디케이터(34px)
• 문의 등록 폼: 상태바(44px) → 네비바(48px) → 안내 문구 → 입력 필드(140px) → 이미지 첨부 버튼(44px) → 동의 체크 → 제출 CTA(50px) → 홈 인디케이터(34px)
• 작성 취소 모달: 중앙 배치 텍스트 + 하단 버튼 쌍(취소/이동, 각 50px)
• 전체 배경: --bg (#FAFAF8), 로그인 사용자만 접근 가능

2. 레이어 구조 + 치수

• 네비바: 뒤로가기 아이콘(chevron-left, 20x20px, --charcoal #1A1A1A, stroke 1.5px, round/round) + 타이틀(--sans Pretendard 17px/700, --charcoal, ls: -0.02em)
• 리스트 제목: --sans Pretendard 14px/500, --charcoal #1A1A1A, ls: -0.01em
• 리스트 날짜: --mono TASA Orbiter 11px/400, --text-muted (#888888), ls: 0.02em
• 추가 문의 라벨: --sans Pretendard 12px/400, --text-muted, ls: -0.01em
• 필수 라벨: --sans Pretendard 12px/600, --red-brand (#961E23), ls: -0.01em
• 안내 본문: --sans Pretendard 13px/400, --charcoal, line-height 1.7, ls: -0.005em
• 운영시간 안내: --mono TASA Orbiter 11px/400, --text-muted, ls: 0.02em
• 입력 필드: height 140px, border 1px solid rgba(26,26,26,0.12), --bg 배경, padding 12px, border-radius: 0
• 이미지 첨부 버튼: height 44px, --charcoal (#1A1A1A) 배경, --sans 13px/600, #FFFFFF 텍스트, ls: -0.01em, R=0
• 동의 안내: --sans Pretendard 11px/400, --text-secondary (#555555), line-height 1.7
• 체크박스: 18x18px, border 1px solid rgba(26,26,26,0.18), R=0
• CTA 버튼: height 50px, --cta-gradient 배경, --sans 15px/600, #FFFFFF 텍스트, ls: -0.01em, R=0
• 모달 타이틀: --sans Pretendard 18px/700, --charcoal, ls: -0.02em, center
• 모달 설명: --sans Pretendard 18px/500, --text-secondary, ls: -0.01em, center
• 모달 취소 버튼: flex:1, 50px, --text-secondary (#555555) 배경, 14px/600, #FFFFFF, R=0
• 모달 이동 버튼: flex:1, 50px, --charcoal (#1A1A1A) 배경, 14px/600, #FFFFFF, R=0

3. 핵심 인터랙션

• 리스트 항목 탭: 문의 상세(MYP-012)로 이동
• "1:1 문의 하기" CTA 탭: 문의 등록 폼으로 전환
• 텍스트 입력: 140px textarea에 문의 내용 입력
• 이미지 첨부: "이미지를 추가해주세요" 버튼 탭 → 이미지 피커 실행, jpeg/jpg/png/bmp만 허용
• 동의 체크박스: 상담정보 수집 동의 체크 → 제출 버튼 활성화
• "제출하기" CTA 탭: 필수 항목 검증 → 제출 → 리스트로 이동 + 토스트 "문의가 접수되었어요"
• 작성 중 뒤로가기: 작성 중인 내용이 있으면 작성 취소 모달 표시

4. 상태 변화

• 동의 미체크: 제출 버튼 비활성화 상태(opacity 감소 또는 disabled 스타일)
• 동의 체크: 제출 버튼 활성화(--cta-gradient 배경)
• 필수 미입력 시: 해당 필드 border --red-brand 1px solid + 에러 메시지 표시
• 작성 취소 모달: dim overlay 위에 중앙 모달 표시

5. 네비게이션 플로우

• 진입: MYP-001 → 1:1 문의 리스트(MYP-011)
• 비로그인 접근: 로그인 안내 모달(LOG-009) 노출 → 로그인 완료 후 MYP-011로 이동
• 리스트 → 상세: 항목 탭 → MYP-012 (문의 상세)
• 리스트 → 등록 폼: "1:1 문의 하기" CTA 탭
• 등록 폼 뒤로가기 (작성 중): 작성 취소 모달 → "이동" 탭 → 리스트로 복귀 / "취소" 탭 → 폼 유지
• 제출 완료: 리스트로 복귀 + 성공 토스트

6. 에러 / 예외 처리

• 필수 항목 미입력: 토스트 "문의 내용을 입력해주세요"
• 개인정보 동의 미체크: 토스트 "상담정보 수집 동의가 필요합니다"
• 문의 등록 실패: 토스트 "문의 접수에 실패했어요. 잠시 후 다시 시도해주세요." + 폼 유지
• 이미지 확장자 불일치: jpeg/jpg/png/bmp 외 파일 선택 시 에러 안내

7. 모션 스펙

• 화면 전환 (리스트↔등록폼): iOS push transition (right-to-left slide, 350ms)
• 작성 취소 모달: dim overlay fadeIn 200ms + 모달 scale(0.95→1) + opacity(0→1) 250ms ease-out
• 토스트: 하단에서 fadeIn 300ms, 2.5초 후 자동 dismiss fadeOut 300ms
• 체크박스 체크: scale bounce 150ms ease-out

8. 여백 · 간격 요약

9. 적용 디자인 토큰

• 전체 배경: --bg → #FAFAF8
• 헤더 타이틀: --sans · 17px · 700 → Pretendard, --charcoal
• 리스트 제목: --sans · 14px · 500 → Pretendard, --charcoal
• 리스트 날짜: --mono · 11px → TASA Orbiter, --text-muted
• 하단 CTA 버튼: --cta-gradient bg · 50px → 직각, 15px, 600
• 필수 라벨: --red-brand · 12px · 600 → #961E23
• 입력 필드 border: rgba(26,26,26,0.12) → 1px solid, 직각 (R=0)
• 이미지 첨부 버튼: --charcoal bg · 44px → 직각, 13px, 600 weight
• 동의 안내 텍스트: --sans · 11px · --text-secondary → line-height: 1.7
• 체크박스: 18x18px · border → 직각, rgba(26,26,26,0.18) border
• 모달 타이틀: --sans · 18px · 700 → center, --charcoal
• 모달 Secondary 버튼: --text-secondary bg → "취소" 버튼
• Paper-Catalog Hero: --paper + linen → CHRT 모노그램 각인, 레드 악센트 바