From 8d93d09dac74d301361be25dffea2cb0ec5c7c39 Mon Sep 17 00:00:00 2001 From: king Date: Fri, 14 Aug 2026 17:10:17 +0900 Subject: [PATCH] =?UTF-8?q?fix(cafe24):=20=EC=98=88=EC=95=BD=C2=B7?= =?UTF-8?q?=EB=B2=84=EC=A0=84=EC=9D=B4=EB=A0=A5=EC=9D=84=20=ED=8E=BC?= =?UTF-8?q?=EC=B3=90=EB=8F=84=20=ED=8E=B8=EC=A7=91=EA=B8=B0=20=ED=81=AC?= =?UTF-8?q?=EA=B8=B0=20=EC=9C=A0=EC=A7=80=20=E2=80=94=20=EC=98=A4=EB=A5=B8?= =?UTF-8?q?=EC=AA=BD=20=EC=B9=B8=EB=A7=8C=20=EC=8A=A4=ED=81=AC=EB=A1=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 「예약 적용」이나 「버전 이력」을 펼치면 코드 칸이 눌려 작아졌다. .cf24-code 와 .cf24-editor-form 이 flex: 1 1 auto 라 아래 내용이 늘어나면 그만큼 편집기가 줄어드는 구조였다 — 펼칠 때마다 보고 있던 위치를 잃는다. 둘을 flex: 0 0 auto 로 바꾸고 코드 칸에 height: 56vh 를 줬다. 무엇을 펼쳐도 높이가 그대로이고, 늘어난 내용은 아래로 밀리며 오른쪽 칸(.cf24-pane-editor)이 스크롤된다. vh 를 쓴 것은 창 크기에 적응하기 위함이다(고정 px 는 작은 화면에서 넘친다). 56vh 는 실측으로 고른 값이다. 62vh 는 접힌 상태에서도 51px 넘쳐 요약줄이 잘렸고, 56vh 는 넘침 0 이라 두 요약줄이 스크롤 없이 보인다. calc(100% - 260px) 은 342px 까지 줄어 편집 영역이 너무 좁았다. 검증(브라우저 실측): 접힘/펼침 모두 코드 칸 506px 동일, 접힘 시 넘침 0, 펼치면 오른쪽 칸이 498px 스크롤, 오른쪽 칸을 200px 스크롤해도 색칠 층·줄 번호·textarea 정렬 유지, 페이지 가로 스크롤 없음, 편집 영역 25줄. 유닛테스트 61개 통과. Co-Authored-By: Claude Opus 5 --- app/modules/cafe24/templates/cafe24/products.html | 2 +- app/modules/cafe24/templates/cafe24/schedules.html | 2 +- app/modules/cafe24/templates/cafe24/system.html | 2 +- app/static/cafe24.css | 12 +++++++++--- docs/CAFE24_MODULE.md | 4 ++++ 5 files changed, 16 insertions(+), 6 deletions(-) diff --git a/app/modules/cafe24/templates/cafe24/products.html b/app/modules/cafe24/templates/cafe24/products.html index ad81358..13bc7ee 100644 --- a/app/modules/cafe24/templates/cafe24/products.html +++ b/app/modules/cafe24/templates/cafe24/products.html @@ -1,7 +1,7 @@ {% extends "erp_base.html" %} {% block head_extra %} - + {% endblock %} {% block content %} diff --git a/app/modules/cafe24/templates/cafe24/schedules.html b/app/modules/cafe24/templates/cafe24/schedules.html index f1b4809..0158b7a 100644 --- a/app/modules/cafe24/templates/cafe24/schedules.html +++ b/app/modules/cafe24/templates/cafe24/schedules.html @@ -1,7 +1,7 @@ {% extends "erp_base.html" %} {% block head_extra %} - + {% endblock %} {% block content %} diff --git a/app/modules/cafe24/templates/cafe24/system.html b/app/modules/cafe24/templates/cafe24/system.html index 2f99d16..3b4994a 100644 --- a/app/modules/cafe24/templates/cafe24/system.html +++ b/app/modules/cafe24/templates/cafe24/system.html @@ -1,7 +1,7 @@ {% extends "erp_base.html" %} {% block head_extra %} - + {% endblock %} {% block content %} diff --git a/app/static/cafe24.css b/app/static/cafe24.css index 4446d1d..35db0aa 100644 --- a/app/static/cafe24.css +++ b/app/static/cafe24.css @@ -217,11 +217,13 @@ flex: 0 0 auto; } +/* 편집 폼과 코드 칸은 **줄어들지 않는다.** 아래 「예약 적용」·「버전 이력」을 펼치면 + 코드 칸이 눌리는 대신 내용이 아래로 밀리고 오른쪽 칸(.cf24-pane-editor)이 스크롤된다. + flex: 1 1 auto 였을 때는 펼칠 때마다 편집기가 작아져 작업하던 위치를 잃었다. */ .cf24-editor-form { display: flex; flex-direction: column; - flex: 1 1 auto; - min-height: 0; + flex: 0 0 auto; gap: var(--sp-8, 8px); } @@ -276,7 +278,11 @@ 스크롤 동기화 방식은 크기 계산이 아예 필요 없어 어긋날 여지가 없다. */ .cf24-code { position: relative; - flex: 1 1 auto; + /* 화면 높이에 맞춰 크되(창 크기에 적응), 무엇을 펼쳐도 이 높이를 유지한다. + 56vh 는 접힌 상태에서 「예약 적용」·「버전 이력」 요약줄까지 스크롤 없이 + 들어오는 값이다(실측: 62vh 는 51px 넘쳤고 56vh 는 0). */ + flex: 0 0 auto; + height: 56vh; min-height: 340px; overflow: hidden; border: 1px solid var(--color-subtle-ash, #e5e5e5); diff --git a/docs/CAFE24_MODULE.md b/docs/CAFE24_MODULE.md index fc5c426..975dd8f 100644 --- a/docs/CAFE24_MODULE.md +++ b/docs/CAFE24_MODULE.md @@ -130,6 +130,10 @@ app/modules/cafe24/ ← 상품관리 모듈 - **줄바꿈하지 않고 가로로 스크롤한다**(`white-space: pre` + `wrap="off"`). 줄바꿈을 허용하면 한 논리 줄이 여러 행이 되어 줄 번호가 맞지 않는다. - 줄 번호 칸은 코드 영역 왼쪽의 **독립 박스**다(가로 스크롤과 무관하며 세로만 따라간다). +- 코드 칸 높이는 `56vh` **고정**이다(`flex: 0 0 auto`). 아래 「예약 적용」·「버전 이력」을 + 펼쳐도 편집기가 눌리지 않고 내용이 아래로 밀리며 오른쪽 칸이 스크롤된다. `flex: 1 1 auto` + 였을 때는 펼칠 때마다 편집기가 작아져 작업 위치를 잃었다. 56vh 는 접힌 상태에서 두 + 요약줄까지 스크롤 없이 들어오는 값이다(실측: 62vh 는 51px 넘침, 56vh 는 0). - 20만 자를 넘으면 강조를 끄고 평문으로 보여준다(타이핑마다 재색칠하면 느려짐). - 색: 태그 초록 / 속성이름 갈색 / 속성값 남색 / 주석 회색 기울임 / 기호 회색.