king
07626bcaf8
상세설명 API 경로가 틀려 있던 것을 실물 확인으로 바로잡았다.
`/admin/products/{no}/description` 은 존재하지 않는다(운영몰 호출 결과
`No API found.`). 상세설명은 상품 리소스의 필드이므로 GET/PUT 을
`/admin/products/{no}` 로 옮겼고, PUT body 는 {"request": {...}} 다.
PC/모바일 상세설명이 별도 필드라는 것도 확인됐다. `separated_mobile_description`
('T'/'F') 이 분리 사용 여부이며, 미분리 상품을 수정할 때 description 만 바꾸면
모바일이 어긋난다. Descriptions 데이터클래스에 이 플래그와 불일치 여부를 담아
화면에서 경고로 노출한다.
목록 응답에는 description 이 없어(확인됨) 상세설명은 상품 1건씩 조회한다.
그래서 목록 화면에 미리보기를 뿌리지 않는다 — 상품 87개면 87호출이라 호출
제한에 걸린다.
화면은 읽기 전용이다(편집·적용은 Phase 3~4). 목록은 카페24를 매번 조회해
현재값을 보여주고, 결과를 cafe24_products 에 UPSERT 해둔다(예약·로그 화면에서
API 없이 상품명을 쓰기 위함).
상단 탭의 예약관리가 404 였으므로 Phase 5 안내 화면을 붙였다.
토큰 만료 시각이 화면에 +00:00 로 보이던 것도 고쳤다. 컬럼이 timestamptz 라
psycopg 가 UTC 로 돌려주는 값을 그대로 출력하고 있었다(시각 자체는 정확했다).
검증: 유닛테스트 23개 통과(신규 7개 — 상세설명 경로가 /description 으로
되돌아가지 않는지, PUT payload 모양, 미분리 플래그 파싱, 페이징 clamp).
라우트 8개 등록 확인. 실제 화면은 서버 배포 후 확인 필요.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
161 lines
3.5 KiB
CSS
161 lines
3.5 KiB
CSS
/* 카페24 상품관리 모듈 전용 스타일.
|
|
전역(erp.css) 은 건드리지 않는다. 클래스 접두사: cf24-
|
|
색상은 erp.css 의 :root 토큰을 재사용한다. */
|
|
|
|
/* .erp-page 는 flex column + overflow-y:auto 다. 자식의 flex-shrink 기본값이
|
|
1 이라 내용이 화면보다 길면 카드가 눌려 잘리고(스크롤도 안 생긴다),
|
|
시스템 화면의 [카페24 연결] 버튼처럼 카드 아래쪽이 사라진다.
|
|
축소를 막아 넘친 만큼 .erp-page 가 스크롤하게 한다.
|
|
이 파일은 카페24 템플릿에서만 로드되므로 다른 모듈에는 영향이 없다. */
|
|
.erp-page > * {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.cf24-card {
|
|
margin-bottom: var(--sp-16, 16px);
|
|
}
|
|
|
|
.cf24-card-head {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--sp-8, 8px);
|
|
margin-bottom: var(--sp-12, 12px);
|
|
}
|
|
|
|
.cf24-card-head h3 {
|
|
margin: 0;
|
|
font-size: var(--text-heading, 18px);
|
|
letter-spacing: -0.45px;
|
|
}
|
|
|
|
.cf24-muted {
|
|
color: var(--color-midtone-gray, #737373);
|
|
font-size: var(--text-caption, 12px);
|
|
}
|
|
|
|
.cf24-err {
|
|
color: var(--color-callout-red, #c22b10);
|
|
}
|
|
|
|
.cf24-nowrap {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* 상태 배지 */
|
|
.cf24-badge-ok {
|
|
background: var(--color-success-green, #10c22b);
|
|
color: #fff;
|
|
}
|
|
|
|
.cf24-badge-off {
|
|
background: var(--color-ghost-gray, #f2f2f2);
|
|
color: var(--color-rich-black, #0a0a0a);
|
|
}
|
|
|
|
/* 안내/오류 배너 */
|
|
.cf24-flash {
|
|
padding: var(--sp-10, 10px) var(--sp-12, 12px);
|
|
border-radius: var(--r-lg, 10px);
|
|
margin-bottom: var(--sp-12, 12px);
|
|
font-size: var(--text-body, 14px);
|
|
}
|
|
|
|
.cf24-flash-ok {
|
|
background: #eefaf0;
|
|
border: 1px solid var(--color-success-green, #10c22b);
|
|
}
|
|
|
|
.cf24-flash-err {
|
|
background: #fdefec;
|
|
border: 1px solid var(--color-callout-red, #c22b10);
|
|
}
|
|
|
|
/* 키-값 표 */
|
|
.cf24-kv th {
|
|
width: 180px;
|
|
text-align: left;
|
|
color: var(--color-midtone-gray, #737373);
|
|
font-weight: 500;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.cf24-actions {
|
|
display: flex;
|
|
gap: var(--sp-8, 8px);
|
|
align-items: center;
|
|
margin-top: var(--sp-12, 12px);
|
|
}
|
|
|
|
.cf24-warn {
|
|
color: var(--color-callout-red, #c22b10);
|
|
font-size: var(--text-caption, 12px);
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* 검색 도구모음 / 페이지 이동 */
|
|
.cf24-toolbar {
|
|
display: flex;
|
|
gap: var(--sp-8, 8px);
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
margin-bottom: var(--sp-12, 12px);
|
|
}
|
|
|
|
.cf24-search {
|
|
flex: 0 1 320px;
|
|
padding: var(--sp-8, 8px) var(--sp-12, 12px);
|
|
border: 1px solid var(--color-subtle-ash, #e5e5e5);
|
|
border-radius: var(--r-lg, 10px);
|
|
font-size: var(--text-body, 14px);
|
|
}
|
|
|
|
.cf24-pager {
|
|
display: flex;
|
|
gap: var(--sp-12, 12px);
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-top: var(--sp-16, 16px);
|
|
}
|
|
|
|
/* 상세설명 HTML 원문 */
|
|
.cf24-label {
|
|
display: block;
|
|
margin: var(--sp-16, 16px) 0 var(--sp-8, 8px);
|
|
font-size: var(--text-caption, 12px);
|
|
font-weight: 500;
|
|
color: var(--color-midtone-gray, #737373);
|
|
}
|
|
|
|
.cf24-html {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: var(--sp-12, 12px);
|
|
border: 1px solid var(--color-subtle-ash, #e5e5e5);
|
|
border-radius: var(--r-lg, 10px);
|
|
background: var(--color-ghost-gray, #f2f2f2);
|
|
font-family: var(--font-geist-mono, ui-monospace, monospace);
|
|
font-size: 12px;
|
|
line-height: 1.6;
|
|
white-space: pre;
|
|
overflow: auto;
|
|
resize: vertical;
|
|
}
|
|
|
|
/* 넓은 로그 표는 카드 안에서만 가로 스크롤 */
|
|
.cf24-scroll {
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.cf24-scroll code {
|
|
font-family: var(--font-geist-mono, ui-monospace, monospace);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.cf24-empty {
|
|
padding: var(--sp-24, 24px);
|
|
}
|
|
|
|
.cf24-empty h3 {
|
|
margin: 0 0 var(--sp-8, 8px);
|
|
}
|