앱 개요

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
에디터	Tiptap (Markdown / 공동편집)
공동편집	Yjs + y-websocket + CollaborationCaret (원격 커서)
백엔드	Supabase (Auth, Database, Storage, Realtime) + FastAPI (Hub API)
언어	TypeScript (strict)

모노레포 구조

loafacto-hub/
├── apps/
│   ├── web-ui/         # Vue 3 웹 앱 (메인 서비스)
│   ├── web-docs/       # VitePress 문서 사이트
│   └── backend-server/ # FastAPI 백엔드 서버 (AI 에이전트, RAG, MCP, 태스크, Git 연동)
└── resources/
    └── supabase/       # Supabase SQL 스크립트 및 설정

web-ui 소스 구조

apps/web-ui/src/
├── components/
│   ├── feature-widgets/      # 기능 빌더 위젯 컴포넌트
│   ├── builder-config/       # 위젯별 설정 패널 컴포넌트
│   ├── admin/                # 관리자 공통 패널 (Help, Notify, Inquiry 등)
│   ├── CollaborativeEditor.vue # Tiptap + Yjs 기반 공동편집 에디터
│   ├── DocsFolderTree.vue    # 문서 폴더 트리
│   ├── MarkdownContent.vue   # 마크다운 렌더러
│   ├── NotificationFab.vue   # 알림 FAB
│   └── ...
├── composables/              # useToast, usePresence 등
├── config/
│   └── builderComponents.ts  # 기능 빌더 컴포넌트 레지스트리
├── i18n/                     # 다국어 (ko, en)
│   └── locales/
├── layouts/                  # AdminLayout 등
├── lib/
│   ├── supabase.ts           # Supabase 클라이언트
│   └── siteSettings.ts       # 백엔드 사이트 설정 헬퍼
├── pages/
│   ├── admin/                # 관리자 전용 페이지
│   ├── HomePage.vue
│   ├── ChatPage.vue          # /feature/chatbot 챗봇
│   ├── CommunityPage.vue     # /feature/community 커뮤니티
│   ├── TasksPage.vue         # /feature/tasks 태스크 관리
│   ├── GitHubPage.vue        # /feature/github 저장소
│   ├── DocsPage.vue          # /feature/docs 문서 (공동편집)
│   ├── DynamicFeaturePage.vue # /feature/:id 빌더 기반 동적 페이지
│   ├── FeaturePreviewPage.vue # /preview/feature/:id 미리보기
│   ├── SetupPage.vue         # /setup 설치 마법사
│   └── ...
├── plugins/                  # vuetify 플러그인
├── router/                   # Vue Router 설정
├── stores/                   # Pinia 스토어
├── types/                    # TypeScript 타입 정의
└── utils/                    # featureExportVue, themeColors 등

실행 및 빌드

bash

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

환경 변수

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

VITE_SUPABASE_URL=https://your-project.supabase.co
VITE_SUPABASE_ANON_KEY=your-anon-key
VITE_API_URL=http://localhost:8000
VITE_COLLAB_WS_URL=ws://localhost:1234   # (선택) 공동편집 y-websocket 주소

VITE_SUPABASE_URL / VITE_SUPABASE_ANON_KEY — Supabase 프로젝트 연결. 없으면 로그인·회원가입이 비활성화됩니다.
VITE_API_URL — FastAPI 백엔드 서버 주소. 에이전트, RAG, MCP, 태스크, GitHub/Gitea, 문서, 피처 빌더 상태 저장 등 백엔드 API 호출에 사용됩니다. 없으면 http://localhost:8000 기본값으로 동작합니다.
VITE_COLLAB_WS_URL — 문서 공동편집(Tiptap + Yjs)용 y-websocket 서버. 미설정 시 단독 편집만 가능합니다.

셋업 마법사 (`/setup`)

미설치 상태에서 앱 진입 시 라우터 가드가 자동으로 /setup으로 보냅니다. 설치가 완료되면(backend /api/v1/setup/status) 이후 정상 라우팅이 활성화됩니다.

Supabase 연동

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

Supabase 주요 연동 기능

기능	설명
인증 (Auth)	이메일/비밀번호 로그인, 회원가입, 비밀번호 재설정, Google OAuth, 세션 복원
역할 (Roles)	`user_roles` 테이블 + `get_my_role` RPC로 관리자 역할 확인
Presence	Supabase Realtime으로 접속자 현황 (`usePresence`)
공지사항	`notices` 테이블 CRUD
변경 내역	`changelog` 테이블 CRUD
제보·문의	`support` 테이블 + 첨부파일
배너/팝업	`banners` 테이블
프로필	`profiles` 테이블 + Storage 아바타
AI/에이전트	`llm_models`, `conversations`, `ai_request_logs` 테이블 (백엔드 서버 경유)
피처 빌더	레이아웃 상태는 백엔드 API(`VITE_API_URL`) 통해 사이트 설정 JSON으로 저장

백엔드 API 연동

VITE_API_URL로 연결되는 FastAPI 백엔드는 다음 도메인 API를 제공합니다. 프론트의 각 스토어(stores/*.ts)가 해당 엔드포인트를 호출합니다.

도메인	백엔드 라우터	프론트 스토어
셋업	`/api/v1/setup/*`	`setup`
사용자	`/api/v1/users/*`	(auth 보강)
챗봇/대화	`/api/v1/chat/`, `/conversations/`	`conversations`
에이전트	`/api/v1/agents/`, `/settings/server-agents/`	`agents`
MCP 서버	`/api/v1/mcp/`, `/mcp_public/`	`mcpServers`
API 키	`/api/v1/api-keys/*`	`apiKeys`
RAG 문서	`/api/v1/rag/*`	`ragDocuments`
LLM 모델	`/api/v1/llm-models/*`	`aiModelConfig`
태스크	`/api/v1/tasks/*`	`tasks`
GitHub	`/api/v1/github/*`	`github`
Gitea	`/api/v1/gitea/*`	`gitea`
문서	`/api/v1/documents/*`	`documents`
커뮤니티	`/api/v1/community/*`	(페이지 직접 호출)
알림	`/api/v1/notifications/*`	`notifications`
통합/웹훅	`/api/v1/integrations/`, `/webhooks/`	(페이지 직접 호출)
시스템/통계/로그	`/api/v1/system/`, `/stats/`, `/logs/*`	`auditLog` 등

다국어 (i18n)

라이브러리: Vue I18n
지원 언어: 한국어(ko), 영어(en) — src/i18n/locales/
관리자 다국어 관리(/admin/i18n)에서 키별 오버라이드를 저장할 수 있으며, stores/i18nOverrides와 연동됩니다.
메시지 안에 @를 표기할 때는 vue-i18n 파서 충돌을 막기 위해 반드시 {'@'}로 이스케이프합니다.

앱 개요 ​

기술 스택 ​

모노레포 구조 ​

web-ui 소스 구조 ​

실행 및 빌드 ​

환경 변수 ​

셋업 마법사 (/setup) ​

Supabase 연동 ​

Supabase 주요 연동 기능 ​

백엔드 API 연동 ​

다국어 (i18n) ​