앱 개요

Loafacto Hub 웹 앱은 Vue 3 기반의 SPA이며, 모노레포(loafacto-hub) 내 apps/web-ui/에 위치합니다. 홈·챗봇 기능 페이지·관리자·기능 빌더를 하나의 프로젝트에서 제공합니다.

기술 스택

구분	기술
프레임워크	Vue 3 (Composition API, <script setup>)
빌드	Vite
라우팅	Vue Router 4
상태	Pinia
UI	Vuetify 3
다국어	Vue I18n (한국어, 영어)
그리드 레이아웃	vue3-grid-layout-next
백엔드	Supabase (Auth, Database, Storage, Realtime)
언어	TypeScript

모노레포 구조

loafacto-hub/
├── apps/
│   ├── web-ui/        # Vue 3 웹 앱 (메인 서비스)
│   ├── web-docs/      # VitePress 문서 사이트
│   ├── backend-server/ # 백엔드 서버
│   └── win-client/    # 윈도우 클라이언트
├── docs/              # Supabase SQL 스크립트 및 설계 문서
└── supabase/          # Supabase 관련 설정

web-ui 소스 구조

apps/web-ui/src/
├── components/
│   ├── feature-widgets/      # 기능 빌더 위젯 컴포넌트
│   ├── builder-config/       # 위젯별 설정 패널 컴포넌트
│   └── admin/                # 관리자 공통 패널 컴포넌트
├── composables/              # useToast, usePresence 등
├── config/
│   └── builderComponents.ts  # 기능 빌더 컴포넌트 레지스트리
├── i18n/                     # 다국어 (ko, en)
│   └── locales/
├── layouts/                  # AdminLayout 등
├── lib/
│   └── supabase.ts           # Supabase 클라이언트
├── pages/
│   ├── admin/                # 관리자 전용 페이지
│   ├── HomePage.vue
│   ├── ChatPage.vue          # /feature/:id 챗봇 페이지
│   └── ...
├── plugins/                  # vuetify 플러그인
├── router/                   # Vue Router 설정
├── stores/                   # Pinia 스토어
├── types/                    # TypeScript 타입 정의
└── utils/                    # 유틸리티

실행 및 빌드

cd apps/web-ui
npm run dev       # 개발 서버 (기본 포트 5173)
npm run build     # 빌드 → dist/
npm run preview   # 빌드 결과 로컬 서빙

Supabase 연동

apps/web-ui/.env 파일에 아래 환경변수를 설정합니다.

VITE_SUPABASE_URL=https://your-project.supabase.co
VITE_SUPABASE_ANON_KEY=your-anon-key

• 클라이언트: src/lib/supabase.ts — getSupabase() / isSupabaseConfigured()
• 환경변수가 없으면 앱은 실행되지만 로그인·회원가입이 비활성화됩니다.

Supabase 주요 연동 기능

기능	설명
인증 (Auth)	이메일/비밀번호 로그인, 회원가입, 비밀번호 재설정, 세션 복원
역할 (Roles)	user_roles 테이블 + get_my_role RPC로 관리자 역할 확인
Presence	Supabase Realtime으로 접속자 현황 (usePresence)
공지사항	notices 테이블 CRUD
변경 내역	changelog 테이블 CRUD
제보·문의	support 테이블 + 첨부파일
배너/팝업	banners 테이블
프로필	profiles 테이블 + Storage 아바타

다국어 (i18n)

• 라이브러리: Vue I18n
• 지원 언어: 한국어(ko), 영어(en) — src/i18n/locales/
• 관리자 다국어 관리(/admin/i18n)에서 키별 오버라이드를 저장할 수 있으며, stores/i18nOverrides와 연동됩니다.