Dation App - F&B 업무 지원 AI 플랫폼

📋 프로젝트 개요

Dation App은 F&B(Food & Beverage) 업계를 위한 AI 기반 업무 지원 플랫폼입니다. Google Gemini AI를 활용하여 제조업무, 품질관리, 문서작성 등의 업무를 효율적으로 지원하며, RAG(Retrieval-Augmented Generation) 시스템을 통해 관련 문서를 검색하여 정확한 답변을 제공합니다.

🏗️ 기술 스택

Frontend

React 19.1.0 - 사용자 인터페이스 구축
Vite 6.3.5 - 빌드 도구 및 개발 서버
CSS3 - 스타일링 및 반응형 디자인
React Markdown - 마크다운 렌더링 지원

AI & API

Google Generative AI (@google/generative-ai) - Gemini AI 모델 활용
Gemma 3 27B IT - 메인 LLM 모델
RAG (Retrieval-Augmented Generation) - 문서 검색 및 생성
텍스트 유사도 알고리즘 - 코사인 유사도 기반 문서 매칭

배포 & 인프라

Firebase Hosting - 정적 웹사이트 호스팅
Vite Proxy - 개발 환경 API 프록시
LocalStorage - 클라이언트 사이드 데이터 저장

📁 프로젝트 구조

dation_app/
├── public/                    # 정적 파일
│   ├── dation_logo.svg       # 로고
│   └── vite.svg
├── src/
│   ├── api/
│   │   └── mockApi.js        # Mock API 및 데이터 (BOM, SOP, 수신자 데이터)
│   ├── assets/               # 이미지 및 아이콘 (PNG, SVG)
│   ├── components/           # React 컴포넌트
│   │   ├── InputBox.jsx      # 입력 컴포넌트 (텍스트 + 이미지 업로드)
│   │   ├── LeftSidebar.jsx   # 좌측 사이드바 (메뉴 + 채팅 히스토리)
│   │   ├── MainContent.jsx   # 메인 채팅 인터페이스 (RAG + LLM)
│   │   ├── RightSidebar.jsx  # 우측 사이드바 (API 로그 + LLM 출력)
│   │   ├── TopHeader.jsx     # 상단 헤더 (LLM 선택 + 앱 배포)
│   │   ├── InteractionPage.jsx # 상호작용 페이지 (워크플로우)
│   │   ├── MakePromptsPage.jsx # 프롬프트 관리 페이지
│   │   ├── PromptCard.jsx    # 프롬프트 카드 컴포넌트
│   │   ├── PromptForm.jsx    # 프롬프트 작성 폼
│   │   ├── PromptItemCard.jsx # 프롬프트 아이템 카드
│   │   └── PromptFolderList.jsx # 프롬프트 폴더 목록
│   ├── utils/
│   │   ├── geminiApi.js      # Gemini AI API 연동
│   │   └── textSimilarity.js # 텍스트 유사도 계산 알고리즘
│   ├── App.jsx               # 메인 앱 컴포넌트 (상태 관리)
│   ├── main.jsx              # 앱 진입점
│   └── index.css             # 글로벌 스타일
├── firebase.json             # Firebase 설정
├── vite.config.js            # Vite 설정 (프록시 포함)
└── package.json              # 프로젝트 의존성

🚀 주요 기능

1. General 페이지 - 메인 채팅 인터페이스

AI 채팅: Gemini AI와의 실시간 대화
이미지 업로드: 클립보드 이미지 붙여넣기 지원
RAG 시스템: 문서 검색 기반 답변 생성
대화 저장/불러오기: Ctrl+S 단축키로 대화 저장
프롬프트 템플릿: 미리 정의된 프롬프트 카드
마크다운 렌더링: LLM 응답의 마크다운 지원

2. Interaction 페이지 - 업무 워크플로우

F&B 업무 지원: 제조, 품질관리, 문서작성 등
단계별 가이드: SOP, BOM, 수신자 검색 등
동적 폼 생성: 업무별 맞춤형 입력 폼
데이터 시각화: 테이블 형태로 데이터 표시
Intent 매칭: 사용자 입력을 기반으로 적절한 워크플로우 선택

3. Make Prompt 페이지 - 프롬프트 관리

폴더 구조: 카테고리별 프롬프트 관리
프롬프트 작성/편집: 새로운 프롬프트 생성 및 수정
템플릿 시스템: 재사용 가능한 프롬프트 템플릿
CRUD 작업: 프롬프트 생성, 읽기, 업데이트, 삭제

4. 사이드바 기능

좌측 사이드바: 저장된 대화 세션 관리, 메뉴 네비게이션
우측 사이드바: API 호출 로그 및 LLM 출력 표시, 유사도 분석

🔧 API 연동

Gemini AI API

// 환경 변수 설정 필요
VITE_MAIN_LLM_API_KEY=your_gemini_api_key

RAG API

개발 환경: Vite 프록시를 통한 로컬 API 호출
프로덕션: 직접 API 엔드포인트 호출
엔드포인트: https://api-llmops.banya.ai/api/v1/rags/retriever/b2f48bb4-3db2-49f0-8163-f53ed5c6a802

API 호출 로그 시스템

실시간 모니터링: API 호출 상태 실시간 표시
로그 타입: LLM, API, Source, Data 등
자동 정리: 3초 후 자동으로 로그 제거 (Source 제외)

📊 데이터 구조

Mock 데이터 (mockApi.js)

BOM 데이터: 제품별 원재료 구성 정보

const bomData = [
  ["제품명", "돼지고기", "돈지방", "정제수", ...],
  ["그릴리멜리햄(500g)", "87.64%", "", "O", ...],
  ["그릴리직화후랑크(250g)", "87.43%", "O", "O", ...]
];

SOP 데이터: 표준작업절차 정보
수신자 데이터: 업무 담당자 정보
프롬프트 데이터: 미리 정의된 프롬프트 템플릿

상태 관리 (App.jsx)

채팅 히스토리: 대화 내용 저장
저장된 세션: 로컬스토리지 기반 세션 관리
API 호출 로그: 실시간 API 상태 모니터링
LLM 출력: 마지막 LLM 응답 내용 저장

🎨 UI/UX 특징

반응형 디자인

좌측/우측 사이드바 토글 가능
모바일 친화적 레이아웃
CSS Grid/Flexbox 기반 레이아웃

사용자 경험

실시간 로딩 상태 표시
키보드 단축키 지원 (Ctrl+S)
드래그 앤 드롭 이미지 업로드
마크다운 렌더링 지원
애니메이션 효과 (fade-in/out)

컴포넌트별 기능

LeftSidebar

사용자 프로필 표시
메뉴 네비게이션 (General, Interaction, Make Prompt)
저장된 채팅 세션 목록
설정 링크 (banya.ai)

TopHeader

LLM 모델 선택 드롭다운
새 채팅/앱 배포 버튼
사이드바 토글 버튼

RightSidebar

API 호출 로그 실시간 표시
Source 로그 (문서 출처)
LLM 출력 내용 표시
유사도 분석 결과

🔄 워크플로우

1. 사용자 입력 처리

사용자 입력 → 텍스트/이미지 검증 → API 로그 생성

2. RAG 시스템

질의 → RAG API 호출 → 문서 검색 → 유사도 계산 → 컨텍스트 생성

3. LLM 처리

컨텍스트 + 사용자 입력 → Gemini API 호출 → 응답 생성 → 마크다운 렌더링

4. 로그 관리

API 호출 → 로그 생성 → UI 업데이트 → 자동 정리 (3초 후)

🛠️ 개발 가이드

새 컴포넌트 추가

src/components/ 디렉토리에 컴포넌트 생성
CSS 파일과 함께 스타일링
App.jsx에서 라우팅 추가
필요한 props 정의 및 전달

API 연동

src/utils/ 디렉토리에 API 함수 추가
환경 변수 설정
에러 핸들링 구현
로그 시스템 연동

데이터 추가

src/api/mockApi.js에 데이터 정의
컴포넌트에서 데이터 사용
타입 안정성 확보

📈 성능 최적화

React 최적화

React.memo: 불필요한 리렌더링 방지
useCallback/useMemo: 메모이제이션 활용
useRef: DOM 요소 직접 접근

이미지 최적화

압축 및 lazy loading
클립보드 이미지 처리
Base64 인코딩

코드 스플리팅

필요시에만 로드
동적 import 활용

🔍 문제 해결

일반적인 이슈

API 키 오류: 환경 변수 확인
프록시 오류: Vite 설정 확인
빌드 오류: 의존성 설치 확인
CORS 오류: 개발/프로덕션 환경 설정 확인

디버깅

브라우저 개발자 도구 활용
API 호출 로그 확인
React DevTools 사용
네트워크 탭에서 API 응답 확인

🚀 배포

개발 환경

npm run dev

프로덕션 빌드

npm run build

Firebase 배포

npm run deploy

🔐 환경 설정

필수 환경 변수

# .env 파일 생성
VITE_MAIN_LLM_API_KEY=your_gemini_api_key

개발 서버 설정

포트: Vite 기본 포트 (5173)
프록시: /api 경로를 https://api.banya.ai로 프록시

📝 주요 컴포넌트 설명

App.jsx (메인 상태 관리)

전체 앱 상태 관리
사이드바 토글 로직
메뉴 라우팅
API 로그 관리
세션 저장/불러오기

MainContent.jsx (메인 채팅)

RAG API 연동
이미지 업로드 처리
마크다운 렌더링
유사도 계산
에러 핸들링

InteractionPage.jsx (워크플로우)

업무 워크플로우 처리
동적 폼 생성
데이터 시각화
Gemini Intent 매칭
테이블 렌더링

MakePromptsPage.jsx (프롬프트 관리)

프롬프트 CRUD 작업
폴더 구조 관리
템플릿 시스템
폼 검증

🔧 유틸리티 함수

textSimilarity.js

preprocessText: 텍스트 전처리
getTermFrequency: 단어 빈도수 계산
calculateSimilarity: 코사인 유사도 계산

geminiApi.js

getGeminiIntent: 의도 매칭
getGeminiTextResponse: 텍스트/이미지 응답
fileToGenerativePart: 파일 변환

📄 라이선스

이 프로젝트는 내부 사용을 위한 비공개 프로젝트입니다.

👥 팀

개발팀: Banya AI Team
기술 스택: React, Vite, Firebase, Gemini AI
업계: F&B (Food & Beverage)
목적: F&B 업계 업무 자동화 및 AI 지원

이 문서는 프로젝트의 현재 상태를 반영하며, 지속적으로 업데이트됩니다.

Name		Name	Last commit message	Last commit date
Latest commit History 39 Commits
.firebase		.firebase
.github/workflows		.github/workflows
public		public
src		src
.env		.env
.firebaserc		.firebaserc
.gitignore		.gitignore
README.md		README.md
eslint.config.js		eslint.config.js
firebase.json		firebase.json
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
vite.config.js		vite.config.js

DAIOSFoundation/dation_app_nh

Folders and files

Latest commit

History

Repository files navigation