다국어 터치 설문 상담 키오스크

고객이 매장 방문 시 아이패드 초기 화면에서 한국어·영어·일본어·중국어 중 원하는 언어를 큰 터치 카드로 선택하면, 이후 모든 설문·메뉴판 화면이 즉시 해당 언어로 전환됩니다.

• i18next + react-i18next로 언어팩 JSON을 네임스페이스 단위로 분리해 지연 로딩 구조로 설계
• React Context API로 현재 언어 상태를 전역 관리하여 모든 하위 화면에 즉시 반영되는 구조 적용
• 언어 선택 카드형 UI에 국기 아이콘 + 88px 이상의 큰 터치 타겟을 적용해 오조작을 방지

i18next 네임스페이스 분리 구조로 설문·메뉴판 텍스트를 4개 언어 리소스로 관리하는 다국어 아키텍처를 구현합니다.

고객이 사진과 텍스트로 구성된 선택지를 터치해 시술·상담 관련 설문에 응답하는 화면입니다. 큰 카드형 버튼과 명확한 선택 피드백으로 태블릿 환경에서 직관적으로 조작할 수 있습니다.

• 단일 선택·다중 선택 문항을 동일 컴포넌트로 처리하는 제네릭 StepQuestion 컴포넌트 설계
• useReducer로 단계별 응답 상태를 누적 관리하여 뒤로 가기 시에도 이전 응답을 복원하는 구조 적용
• 카드 선택 시 즉시 시각 피드백(테두리 강조 + 체크 아이콘)을 주는 터치 인터랙션 패턴 구현

useReducer 기반 단계별 응답 상태 관리로 뒤로 가기·재선택 시에도 응답 이력이 보존되는 설문 엔진을 구현합니다.

설문 단계를 넘어갈 때 스텝퍼 진행률이 갱신되며 부드러운 화면 전환 애니메이션과 함께 다음 질문으로 이동합니다. 현재 진행 상태를 한눈에 파악할 수 있는 상단 스텝 인디케이터를 포함합니다.

• Framer Motion AnimatePresence로 단계 전환 시 슬라이드+페이드 트랜지션을 컴포넌트 레벨에서 재사용 가능하게 구현
• 스텝퍼 컴포넌트를 현재 단계/전체 단계 수 기반으로 동적 렌더링하는 구조 설계
• 트랜지션 진행 중 중복 터치를 막기 위한 인터랙션 락(lock) 상태 관리 적용

AnimatePresence 기반 단계 전환 트랜지션과 동적 스텝퍼를 결합해 진행 상황을 시각적으로 인지할 수 있는 설문 흐름을 구현합니다.

설문 완료 후 고객의 응답 조합을 분석해 관련성이 높은 시술·서비스 카테고리로 분류된 메뉴판(카탈로그) 화면으로 자동 연결합니다. 상담 시 직원이 바로 활용할 수 있도록 가격과 소요 시간을 함께 노출합니다.

• 설문 응답 조합 → 카테고리 스코어를 계산하는 룰 기반 매핑 테이블 설계
• 최고 스코어 카테고리로 자동 스크롤 + 하이라이트되는 메뉴판 카탈로그 뷰 구현
• 가격·소요 시간 정보를 카드 배지로 노출하는 메뉴 항목 컴포넌트 설계

룰 기반 응답-카테고리 매핑 로직으로 설문 결과를 메뉴판 카탈로그의 특정 카테고리·항목과 자동 연결하는 구조를 구현합니다.