37 lines
2.1 KiB
Markdown
37 lines
2.1 KiB
Markdown
# 화면 바꾸기
|
|
|
|
| 바꾸려는 것 | 방법 | 빌드 |
|
|
|---|---|---|
|
|
| 서비스 이름, 로고, 하단 저작권 표기 | 관리자 페이지 > 설정 | 필요 없음 |
|
|
| 이름의 기본값 | 환경변수 `PSITRANSFER_APP_NAME`, `PSITRANSFER_APP_OWNER`, `PSITRANSFER_APP_FROM_YEAR` | 필요 없음 |
|
|
| 화면의 문구 | `lang/ko.js` (한국어), `lang/en.js` (기본) | 필요 없음, 서버 재시작 |
|
|
| 색, 간격, 글꼴 | `app/src/styles.css` 맨 위의 CSS 변수 (`--accent` 등) | `npm run build` |
|
|
| 화면 구성 | `app/src/pages/*.vue`, `app/src/components/*.vue` | `npm run build` |
|
|
| 모든 페이지의 `<head>`에 넣을 것 (스타일, 스크립트) | `public/pug/partials/head_custom.pug` | 필요 없음, 서버 재시작 |
|
|
|
|
## 구조
|
|
|
|
서버는 얇은 HTML 껍데기([public/pug/page.pug](../public/pug/page.pug))만 만들고, 실제 화면은 브라우저에서
|
|
Vue 3 앱(`app/`)이 그립니다. 업로드, 다운로드, 관리자 세 화면이 하나의 스크립트(`public/app/main.js`)로
|
|
동작하고, 어느 화면인지는 껍데기의 `<body data-page="...">`가 알려 줍니다.
|
|
|
|
```bash
|
|
npm --prefix app ci # 처음 한 번
|
|
npm run build # app/src를 public/app으로 빌드
|
|
```
|
|
|
|
도커 이미지는 빌드 과정에서 이 빌드를 함께 하므로 따로 할 필요가 없습니다.
|
|
|
|
## 색 바꾸기
|
|
|
|
`app/src/styles.css`의 맨 위에 라이트 모드와 다크 모드의 색이 변수로 모여 있습니다.
|
|
강조색은 `--accent`(버튼, 선택된 항목)와 `--accent-soft`/`--accent-ink`(연한 배경과 그 위의 글자)입니다.
|
|
로고에는 영향을 주지 않습니다.
|
|
|
|
## 로고 파일
|
|
|
|
기본 로고는 `public/assets/logo.svg`(임의로 만든 아이콘)입니다. 관리자 설정에서 올린 로고가 있으면 그것이 우선하고,
|
|
설정 폴더(`/data/.settings`)에 저장됩니다. 코드를 바꾸지 않고 로고를 교체하려면 관리자 페이지를 쓰세요.
|
|
|
|
> 업데이트할 때 충돌을 줄이려면 `app/src`를 크게 바꾸는 것보다 관리자 설정, 환경변수, `head_custom.pug`를 먼저 활용하세요.
|