# 카페24 상품 상세페이지 관리 모듈 (cafe24) > 카페24 관리자 페이지에 직접 들어가지 않고 상품 상세페이지를 조회·편집·예약 > 적용하고, 언제든 이전 상태로 되돌리기 위한 운영용 모듈. > main-app ERP 에 편입된 **모듈**이다(별도 앱/포트 아님). 인증은 기존 Google > OAuth + 권한키 `cafe24` 를 재사용한다. --- ## 1. 구조 — 왜 두 곳으로 나눴나 향후 **카페24 주문관리**(주문 조회·송장 일괄등록·취소/반품/교환)를 같은 프로젝트에 추가할 예정이다. 그래서 카페24 인증/전송은 상품관리에 종속시키지 않고 공통 계층으로 분리했다. ``` app/integrations/cafe24/ ← 공통 (상품관리 + 향후 주문관리 공유) ├─ config.py 환경변수 → Cafe24Config (하드코딩 금지) ├─ crypto.py 토큰 Fernet 암복호화 ├─ oauth.py 인증 URL / code→token / refresh ├─ tokens.py TokenService — 저장·만료판정·자동갱신(행 잠금) ├─ client.py Cafe24Client — 전송·재시도·401/429/5xx·호출간격·API 로그 ├─ products.py 상품 엔드포인트 래퍼 (향후 orders.py 를 형제로 추가) └─ errors.py 공통 예외 app/modules/cafe24/ ← 상품관리 모듈 ├─ router.py 루트 라우터(prefix=/cafe24) + 서브 라우터 결합 ├─ routes_products.py 2분할 화면 · 편집기 조각 · 적용(쓰기) ├─ routes_schedules.py 예약 등록·목록·취소 ├─ worker.py 예약 실행기 (compose 서비스 dbx-cafe24-worker) ├─ routes_system.py 연결(OAuth)·상태·API 로그·작업 로그 ├─ common.py 가드/컨텍스트 헬퍼 (순환 import 방지로 분리) ├─ db.py Cafe24Store (cafe24_db, psycopg3 raw SQL) ├─ store.py 순수 로직 — 상수·상태전이·재시도 규칙·검증 ├─ tests/ DB/네트워크 없는 유닛테스트 └─ templates/cafe24/ _nav.html · products.html(2분할) · _editor.html(오른쪽 조각) · schedules.html · system.html ``` **규칙: 라우터에서 `httpx`/`requests` 를 직접 부르지 않는다.** 반드시 `app.integrations.cafe24` 의 `Cafe24Client` 를 통한다(재시도·로그·토큰 갱신이 한 곳에 모여 있어야 하기 때문). 핸들러는 `async def` 가 아니라 **`def`(동기)** 로 선언한다. 카페24 API·DB 호출이 블로킹이므로 FastAPI 스레드풀에서 돌게 두는 편이 이벤트 루프를 막지 않는다. --- ## 2. 화면 / 경로 | 경로 | 화면 | 권한 | | --- | --- | --- | | `GET /cafe24/` | 2분할 화면 (`q`, `display`, `selling`, `selected`) | `cafe24` | | `GET /cafe24/products/{product_no}/pane` | 오른쪽 편집기 조각 (JS 가 가져감) | `cafe24` | | `GET /cafe24/products/{product_no}` | → `/cafe24/?selected=` 로 리다이렉트(옛 주소) | `cafe24` | | `POST /cafe24/products/{product_no}/apply` | 편집한 HTML 을 카페24에 즉시 적용 | `cafe24` | | `GET /cafe24/schedules` | 예약 목록 · 취소 | `cafe24` | | `POST /cafe24/schedules` | 예약 등록 (편집기에서) | `cafe24` | | `POST /cafe24/schedules/{id}/cancel` | 대기 중 예약 취소 | `cafe24` | | `GET /cafe24/schedules/preview/{product_no}` | 현재 진열/판매 상태 (JSON) | `cafe24` | | `GET /cafe24/system` | 연결 상태 · API 로그 · 작업 로그 | `cafe24` | | `GET /cafe24/system/oauth/start` | 카페24 인증 시작 | **admin** | | `GET /cafe24/oauth/callback` | 카페24 콜백 (code→토큰) | **admin** | | `POST /cafe24/system/oauth/disconnect` | 저장된 토큰 삭제 | **admin** | | `GET /cafe24/health` | 포털 카드 상태 점 | 없음 | --- ### 2-1. 상품관리 화면 구성 (2분할) ``` ┌─ 550px ───────────────────┬───────── 남은 폭 전부 ─────────┐ │ 상품명 검색(한 줄) │ 상품 이름 · 번호 · 진열/판매 │ │ ☑진열중 ☑판매중 (기본 체크) │ 상세설명 HTML 편집기 │ │ ── 목록(전체, 스크롤) ── │ (PC/모바일 공통 · 문법 강조) │ │ 번호 상품명 진열 판매 수정 │ [메모][복사][다시 읽기][적용] │ │ (제목행 클릭 = 정렬) │ ▸ 버전 이력 │ │ │ │ └───────────────────────────┴─────────────────────────────────┘ ``` - 검색 입력란은 **한 줄 높이로 고정**한다(`height: 32px`). `.cf24-filters` 가 세로 flex 이므로 `flex-basis` 를 주면 그 값이 **높이**로 적용돼 입력란이 거대해진다. 실제로 그 사고가 있었다 — flex 방향을 항상 확인할 것. - **왼쪽은 전체 목록**(페이지 없음). `list_all_products` 로 페이지를 넘겨가며 전부 받는다(1회 100개, 상한 1000개). 필터를 한 페이지에만 적용하면 다음 페이지의 해당 상품이 빠지기 때문이다. - **필터**는 `진열중`/`판매중` 체크박스이며 **중복 선택 시 AND** 다. 문서에 없는 API 파라미터에 기대지 않고 받아온 뒤 파이썬에서 걸러낸다. **기본값은 둘 다 체크**다. 체크박스는 해제 상태면 아무 값도 보내지 않으므로, 폼에 표식(`f=1`)을 함께 넣어 "첫 방문"과 "사용자가 일부러 해제함"을 구분한다. 표식이 없으면 기본값(둘 다 체크)으로 보고, 있으면 실제 체크 상태를 따른다. 이 표식은 `_list_query` 가 링크·리다이렉트에도 이어 붙여 해제 상태가 유지된다. - **정렬**은 제목행 클릭(오름↔내림 토글). 브라우저에서 처리하므로 전체를 받아둔 덕분에 목록 전체가 대상이 된다. - **상품 클릭 시 오른쪽만 교체**한다(`/pane` 조각을 fetch → 삽입). 목록을 다시 받지 않으므로 카페24 호출이 1회로 끝난다. JS 실패 시 각 행의 링크로 정상 동작한다. - 편집기 상단에 **상품 다이렉트 주소**(고객이 보는 상세페이지 URL)와 「주소 복사」· 「쇼핑몰에서 열기」를 둔다. 주소는 `CAFE24_SHOP_URL` 기준으로 만들고, 미설정 시 카페24 기본 도메인(`https://.cafe24.com`)으로 대체한다 — 커스텀 도메인은 `mall_id` 로 알 수 없으므로 환경변수가 필요하다. - 편집 중 다른 상품을 클릭하거나 페이지를 벗어나면 **저장 안 됨 경고**가 뜬다. - **캐시 금지.** 화면·조각 응답에 `Cache-Control: no-store` 를 붙이고 조각 fetch 에도 `cache: "no-store"` 를 건다. 캐시된 조각이 다시 그려지면 카페24 관리자에서 값을 바꾼 뒤에도 예전 소스가 보이고, 그것을 그대로 편집하면 남의 수정을 덮어쓴다. 편집기의 **[다시 읽기]** 버튼으로 언제든 현재값을 강제로 다시 받을 수 있다. - `.erp-page` 의 `max-width` 를 이 화면에서만 풀어 편집 영역을 넓게 쓴다. 이때 `box-sizing: border-box` 를 함께 줘야 한다(안 주면 padding 이 폭에 더해져 문서에 가로 스크롤이 생긴다). --- ### 2-2. 편집기 (문법 강조 · 소스 정리) **문법 강조** — 색칠된 `
` 위에 **투명한 `