가이드

Loafacto Hub 앱 사용을 위한 가이드입니다.

모노레포 구조

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

환경 설정 (Supabase)

apps/web-ui/.env 파일에 Supabase 프로젝트 정보를 설정합니다.

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

TIP

.env 파일이 없거나 키가 없으면 앱은 실행되지만 로그인·회원가입이 비활성화됩니다. .env.example 파일을 복사해서 사용하세요.

Supabase 테이블 초기화

docs/ 폴더의 SQL 파일을 Supabase SQL Editor에서 순서대로 실행합니다.

파일	내용
01. supabase-user-roles.sql	사용자 역할 테이블
02. supabase-profiles.sql	프로필 테이블
03. supabase-storage-avatars.md	아바타 스토리지 설정
04. supabase-admin-users-rpc.sql	관리자용 RPC 함수
05. supabase-realtime-presence.md	실시간 Presence 설정
06. supabase-notices-table.sql	공지사항 테이블
07. supabase-changelog-table.sql	변경 내역 테이블
08. supabase-support-table.sql	제보·문의 테이블
09. supabase-support-attachments.sql	문의 첨부파일
10. supabase-support-my-inquiry-policy.sql	문의 RLS 정책
11. supabase-banners-table.sql	배너/팝업 테이블
12. supabase-delete-my-account.md	회원 탈퇴 정책
13. supabase-set-user-role-rpc.sql	역할 설정 RPC

앱 실행

각 앱은 독립적으로 실행합니다.

# 웹 앱 (web-ui)
cd apps/web-ui
npm run dev        # 개발 서버 (기본 포트 5173)
npm run build      # 빌드 → dist/
npm run preview    # 빌드 결과 미리보기

# 문서 사이트 (web-docs)
cd apps/web-docs
npm run dev        # 개발 서버 (기본 포트 5173)
npm run build      # 빌드 → .vitepress/dist/
npm run preview    # 빌드 결과 미리보기

앱 사용

1. 홈 (/): 기능 카드 목록이 표시됩니다. 로그인/회원가입 모달을 통해 인증합니다.
2. 챗봇 (/feature/:id): 빌더로 구성된 카테고리별 챗봇 화면으로 이동합니다.
3. 관리자 (/admin): 로그인 후 관리자 권한이 있으면 대시보드·기능 빌더·설정 등을 사용할 수 있습니다.

관리자 계정 설정

Supabase user_roles 테이블에 사용자 ID와 역할(super_admin 또는 operator)을 직접 등록하거나, set_user_role RPC 함수를 사용합니다.

-- 예시: 특정 사용자를 super_admin으로 설정
SELECT set_user_role('user-uuid', 'super_admin');

기능 빌더 사용

관리자 → 기능 빌더에서 카테고리를 선택한 뒤, 왼쪽 툴킷의 위젯을 캔버스로 드래그해 배치합니다. 위젯을 선택하면 오른쪽 패널에서 라벨·스타일·데이터 소스를 설정할 수 있으며, 변경 사항은 실제 기능 페이지에 반영됩니다.

• 기능 빌더 개요