king
1d3dac3bec
1) 검색 입력란이 거대했던 버그 .cf24-filters 가 세로 flex 인데 .cf24-search 에 flex:0 1 320px 을 줬다. 세로 방향에서는 flex-basis 가 '높이'로 적용돼 입력란이 320px 짜리 상자가 됐다. height:32px 로 한 줄에 고정했고, 그만큼 목록이 더 보인다. 2) 목록 550px 요청대로 왼쪽을 550px 로 넓혔다. 남은 폭(약 290px)이 상품명 몫이라 대부분 한 줄에 들어가고, 수정일도 월-일 시:분까지 보여준다. 컬럼은 번호·상품명·진열·판매·수정 5개 그대로다. 3) 문법 강조 편집기 색칠된 <pre> 위에 투명한 <textarea> 를 겹치는 방식으로 직접 구현했다. 외부 라이브러리를 쓰지 않는 이유는 자체 호스팅 원칙이다(CDN 의존 금지). 태그·속성이름· 속성값·주석·기호를 색으로 구분하고 Tab 은 들여쓰기로 쓴다. 두 층의 글자가 어긋나지 않으려면 폰트·줄높이·padding·줄바꿈 규칙이 완전히 같아야 한다. 특히 높이는 <pre> 의 scrollHeight 를 기준으로 textarea 에 지정한다 — textarea 의 scrollHeight 를 쓰면 두 줄쯤 더 잡혀 어긋난다(실측 830 vs 792, 브라우저에서 확인 후 수정). 20만 자를 넘으면 강조를 끈다. 4) 소스 정리(포맷)와 저장 반영 store.format_html 을 추가했다. 화면 표시와 저장에 같은 함수를 쓰므로 화면에서 본 정리된 소스가 그대로 카페24에 저장된다. 렌더링을 바꾸지 않는 것을 최우선으로 했다. HTML 에서 공백은 의미가 있어서 인라인 요소 사이에 줄바꿈을 넣으면 화면에 공백이 생긴다 — 이미지 사이가 벌어지는 고전적인 사고다. 그래서 블록 요소 경계에서만 줄을 나누고 img·br·span·a 는 블록 목록에서 일부러 뺐다. <style>·<script>·<pre>·<textarea> 안쪽은 한 글자도 건드리지 않는다. 내용이 한 줄뿐인 짧은 블록은 다시 한 줄로 합친다. 멱등성을 테스트로 고정했다. 처음 구현은 <style> 안 빈 줄이 실행마다 한 줄씩 늘어나 멱등이 깨졌고(테스트가 잡음), 앞뒤 빈 줄을 버리도록 고쳤다. 편집하지 않고 다시 적용해도 저장값이 계속 달라지면 버전 이력이 의미를 잃는다. 닫는 태그가 빠진 HTML 이 흔하므로 들여쓰기 상한(12)을 뒀고, 어떤 이유로든 실패하면 원본을 그대로 돌려준다. 검증: 유닛테스트 41개 통과(신규 8개 — 블록 분리·인라인 보존(이미지 붙음)·style 원문 보존·멱등·짧은 블록 합치기·깨진 HTML 내성·속성값 미변경·정리+인코딩 왕복). 브라우저 실측: 검색란 32px, 목록 550px/편집기 750px, 오버레이 두 층 높이 일치 (편집 전 792=792, 20줄 추가 후 1175=1175), 토큰 색상 적용, 가로 스크롤 없음. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
DBX 메인 페이지
Google Workspace 계정으로 로그인한 뒤 허용된 사용자만 업무 메뉴에 접근하는 FastAPI 웹앱입니다.
Nginx Proxy Manager(NPM) 뒤에서 Docker 컨테이너로 실행하는 구성을 기준으로 작성했습니다.
접속 허용 계정
허용 목록은 app/main.py의 ALLOWED_EMAILS에서 서버 측으로 검사합니다.
Google OAuth 설정
Google Cloud Console에서 OAuth 클라이언트를 만들고 아래 값을 등록합니다.
| 항목 | 값 |
|---|---|
| 승인된 JavaScript 원본 | https://dbx.no1king.freeddns.org |
| 승인된 리디렉션 URI (운영) | https://dbx.no1king.freeddns.org/auth/google |
| 승인된 리디렉션 URI (로컬) | http://localhost:8080/auth/google |
Google 로그인 화면에서 hd=dbxcorp.co.kr 힌트를 보내지만,
실제 접근 제한은 서버에서 이메일 도메인과 허용 계정 목록으로 다시 검사합니다.
환경 변수
| 변수 | 설명 |
|---|---|
GOOGLE_CLIENT_ID |
Google OAuth 클라이언트 ID |
GOOGLE_CLIENT_SECRET |
Google OAuth 클라이언트 보안 비밀 |
SESSION_SECRET_KEY |
세션 쿠키 서명용 랜덤 문자열 |
SESSION_COOKIE_SECURE |
HTTPS 환경 true / 로컬 HTTP false |
PUBLIC_BASE_URL |
외부 접속 주소 (예: https://dbx.no1king.freeddns.org) |
CS_ORDER_URL |
CS 발주 업무 버튼 이동 주소 |
CUSTOMER_ORDER_LIST_URL |
고객 주문리스트 프로그램 버튼 이동 주소 |
로컬 Docker 테스트
# 1. 환경 변수 파일 준비
copy .env.local.example .env.local
# .env.local 을 열어 Google OAuth 키 등 실제 값으로 수정
# 2. 이미지 빌드 및 컨테이너 실행
docker compose -f docker-compose.local.yml up --build
# 3. 브라우저에서 확인
# http://localhost:8080
Google 로컬 OAuth 주의
Google Cloud Console → OAuth 클라이언트 → 승인된 리디렉션 URI에
http://localhost:8080/auth/google를 반드시 추가해야 합니다.
서버 배포 (Ubuntu + NPM)
NPM은 dbx.no1king.freeddns.org → http://192.168.0.194:80 으로 이미 설정되어 있습니다.
# 서버에서 실행
# 1. 저장소 클론
git clone https://gitea.no1king.freeddns.org/king/dbx-main.git
cd dbx-main
# 2. 환경 변수 파일 준비
cp .env.example .env
# .env 를 열어 실제 값으로 수정
nano .env
# 3. 이미지 빌드 및 백그라운드 실행
docker compose up --build -d
# 4. 로그 확인
docker compose logs -f
업데이트 배포
git pull
docker compose up --build -d
컨테이너 관리
docker compose ps # 상태 확인
docker compose down # 중지
docker compose restart web # 재시작
폰트
app/static/fonts/ 에 Pretendard 폰트가 포함되어 있습니다.
| 파일 | 굵기 |
|---|---|
Pretendard-Thin.ttf |
100 (얇음) |
Pretendard-Regular.ttf |
400 (기본) |
Pretendard-Bold.ttf |
700 (굵음) |