메뉴 콘텐츠 통합 관리 및 설문 분석 플랫폼

P1 데모의 핵심 플로우를 확장하여, 매장 운영자가 메뉴 카테고리·가격·다국어 콘텐츠를 직접 관리하고 고객 설문 응답을 분석할 수 있는 통합 플랫폼을 구현합니다.

필터-그리드 상태 동기화 설계필터 칩 선택 상태와 카드 그리드 쿼리를 URL 파라미터로 동기화하는 구조를 설계합니다

설문 응답 집계 로직 구현클라이언트 사이드 응답 집계 알고리즘을 설계하고 Recharts로 카테고리별 분포를 시각화하는 구조를 구현합니다

다국어 콘텐츠 관리 모듈 설계운영자가 언어별 텍스트를 실시간 미리보기하며 편집할 수 있는 콘텐츠 관리 구조를 설계합니다

서비스 타입Web

업종데이터 분석

기술 스택

ReactTypeScriptTailwind CSSi18nextRechartsZustandFramer Motion

주요 기능

카테고리 필터 메뉴 갤러리
메뉴 콘텐츠 관리
설문 응답 분석 대시보드
다국어 콘텐츠 관리

Overview

프로젝트 개요

범위: 개발, 디자인, 기획

P1 데모의 핵심 플로우를 확장하여, 매장 운영자가 메뉴 카테고리·가격·다국어 콘텐츠를 직접 관리하고 고객 설문 응답을 분석할 수 있는 통합 플랫폼을 구현합니다. 필터 칩과 카드 그리드 기반의 검색형 메뉴 갤러리로 카탈로그 탐색 경험을 확장하고, 콘텐츠 관리·응답 분석 대시보드를 통합한 확장 프로젝트입니다.

요구사항 정의

프로젝트 핵심 과제

프로젝트 진행 시 해결한 핵심 기술 과제입니다.

카테고리 필터와 검색 상태가 늘어날수록 그리드 재계산 비용이 증가하는 성능 구조 설계

다국어 콘텐츠 관리 시 언어별 텍스트 길이 차이가 메뉴 카드 레이아웃에 미치는 영향 대응

설문 응답 분석 차트를 카테고리·언어별로 교차 필터링하는 집계 로직 설계

메뉴 콘텐츠 편집과 실시간 미리보기 간 상태 동기화 지연 없는 구조 설계

구현 내용

핵심 기능 상세

핵심 기능 1

카테고리 필터 메뉴 갤러리

고객·상담 직원이 좌측 카테고리 필터와 가격대 필터로 메뉴판(카탈로그)을 좁혀가며 카드 그리드 형태로 탐색할 수 있는 화면입니다. 카드를 클릭하면 상세 정보 drawer가 열립니다

핵심 기능 2

메뉴 콘텐츠 관리

매장 운영자가 메뉴 항목·카테고리·가격을 직접 등록·수정·삭제할 수 있는 콘텐츠 관리 화면입니다. 변경 사항은 즉시 메뉴 갤러리 화면에 반영됩니다

핵심 기능 3

설문 응답 분석 대시보드

P1 설문 데이터를 기반으로 언어별·카테고리별 응답 분포를 시각화하는 대시보드입니다. 어떤 시술·서비스 카테고리에 대한 관심이 높은지 한눈에 파악할 수 있습니다

핵심 기능 4

다국어 콘텐츠 관리

운영자가 언어별 메뉴 설명·설문 문항 텍스트를 직접 편집할 수 있는 화면입니다. 편집 중인 텍스트를 각 언어로 즉시 미리볼 수 있어 번역 누락을 줄일 수 있습니다

구현 과정

프로젝트 진행 단계

STEP 1

검색형 메뉴 갤러리 UI 설계

필터 칩 + 카드 그리드 레이아웃 설계, 웜 파치먼트 톤 에디토리얼 타이포 적용

STEP 2

메뉴 콘텐츠 관리 모듈 개발

메뉴/카테고리/가격 CRUD 화면 구현, Zustand 기반 클라이언트 상태 관리 적용

STEP 3

설문 응답 분석 대시보드 구현

Recharts 기반 응답 분포 시각화, 카테고리별 선호도 차트 4~6종 구현

STEP 4

다국어 콘텐츠 관리 화면 구현

언어별 텍스트 대조 편집 UI, 번역 누락 자동 감지 로직 설계

STEP 5

통합 QA 및 반응형 검증

필터·그리드·대시보드 간 상태 동기화 검증, 아이패드/데스크톱 반응형 QA

프로젝트 성과

주요 성과