# Tenant frontend

## 레이아웃과 컴포넌트

Tenant 공개 화면은 `resources/views/tenant/layouts/base.blade.php`, tenant 관리자는 `resources/views/tenant/layouts/tenant-admin.blade.php`를 사용한다. 공용 Blade component는 `resources/views/components`, tenant 전용 component는 tenant view 영역에 둔다. 반복 UI는 `x-ui.*`, 큰 영역은 component/partial로 분리한다.

## Theme과 skin

현재 default 테마는 `resources/views/tenant/themes/default`와 `resources/css/themes/default.css`에 있다. base layout이 HTML/head/asset을 담당하고 테마 view는 본문, theme CSS는 테마 스타일을 담당한다. Board skin/theme의 구체 분기는 실제 board view/controller를 우선 확인한다.

Header/Footer 디자인 CSS는 `resources/css/tenant/headers`와 `resources/css/tenant/footers`에 분리한다. default 디자인 asset은 tenant base에서 로드하고 visual asset은 design marker가 있을 때 dynamic import한다.

## CSS와 Vite

Tailwind CSS와 프로젝트 디자인 유틸리티를 사용하며 `resources/css/app.css`가 주요 입력이다. Vite entry는 `vite.config.js`의 Laravel input에 등록되어 있고, `resources/js/app.js`는 TipTap/AI/Pixabay 모듈을 DOM marker가 있을 때 동적 import한다. CSS/JS 변경과 safelist 변경 뒤에는 `npm run build`가 필요하다.

## JS 초기화

기능 marker와 selector는 Blade와 JS에서 함께 변경한다. create/edit가 같은 form component를 쓰는 경우 두 DOM을 모두 확인하고, 조건부 요소는 JS에서 optional로 처리한다. 초기화 오류가 후속 기능을 막지 않도록 콘솔 오류와 dynamic import 실패를 확인한다.

Header/Footer Design은 Theme와 분리한다. `tenant-header.js`는 menu/submenu/search/Escape/resize 공용 상태를 관리하고, `tenant/headers/visual.js`는 visual Header의 scroll 및 전용 시각 상태만 관리한다. visual asset은 해당 design marker가 있을 때 dynamic import되며, 전용 CSS의 색상은 Theme의 `--color-*` token을 소비한다.

## 페이지 구성 계획

현재 구현과 향후 방향을 구분한다. Header/Footer Design 선택은 구현되었지만, 이를 Pages Builder/Section Builder로 확장하는 것은 범위 밖이다.

```text
Site
├─ Header Design   (구현: default/visual 독립 선택)
├─ Content
│  ├─ Pages
│  └─ Boards
└─ Footer Design   (구현: default/visual 독립 선택)
```

## UI 규칙

기존 테마 토큰(`c-main`, `c-muted`, `bg-base`, `bg-surface` 등)과 기존 공용 component를 우선 사용한다. inline style과 임의 CSS를 새로 만들지 않으며, DB HTML용 Tailwind 클래스는 safelist에 등록하고 build로 확인한다. 접근성 label, button type, keyboard/모바일 상태, 이미지 alt를 함께 점검한다.