@loword/loword-design-system 0.2.1 → 0.2.3

package/dist/utils/utils.js

@@ -1,10 +1,99 @@
 /**
- * 현재 경로가 해당 링크의 경로와 **정확히** 일치하는지 판별합니다.
+ * URL 파싱용 더미 origin. `new URL()`에 base 를 주면 상대 경로·`..` 해석과
+ * 쿼리스트링·해시 분리를 표준 파서가 대신 처리한다.
+ */
+const PARSE_BASE = 'http://ld.local';
+/**
+ * 퍼센트 인코딩을 되돌립니다. `decodeURIComponent` 가 아니라 `decodeURI` 를 쓰는
+ * 이유는 `%2F` 같은 예약 문자까지 풀면 경로 구분자가 늘어나 세그먼트 경계가
+ * 어긋나기 때문입니다. 잘못된 인코딩이면 원문 그대로 비교합니다.
+ */
+const safeDecode = (value) => {
+    try {
+        return decodeURI(value);
+    }
+    catch {
+        return value;
+    }
+};
+/**
+ * 비교 가능한 형태로 경로를 정규화합니다.
+ *
+ * - origin·쿼리스트링·해시 제거 (`https://a.com/foo?x=1#y` → `/foo`)
+ * - 상대 경로와 `.`·`..` 해석 (`foo/../bar` → `/bar`)
+ * - 중복 슬래시 축약 (`/foo//bar` → `/foo/bar`)
+ * - 끝 슬래시 제거 (루트 `/` 는 유지)
+ * - 퍼센트 인코딩 해제 (`/%EC%83%81%ED%92%88` → `/상품`)
+ *
+ * 대소문자는 구분합니다. 경로는 대소문자를 구분하는 것이 표준이고, 서로 다른
+ * 라우트를 같은 것으로 묶으면 오히려 오탐이 됩니다.
+ */
+const toComparablePath = (value) => {
+    let pathname;
+    try {
+        ({ pathname } = new URL(value, PARSE_BASE));
+    }
+    catch {
+        // URL 로 해석되지 않는 문자열(예: 'http://')은 정규화 없이 원문을 쓴다.
+        return value;
+    }
+    const collapsed = safeDecode(pathname).replace(/\/{2,}/g, '/');
+    return collapsed.length > 1 && collapsed.endsWith('/')
+        ? collapsed.slice(0, -1)
+        : collapsed;
+};
+/**
+ * 현재 경로가 해당 링크의 경로에 속하는지 판별합니다.
+ *
+ * `href` 와 정확히 같거나 `href` 의 **하위 경로**면 활성으로 봅니다.
+ * `/products/items` 같은 상세 페이지에서도 상위 메뉴 `/products` 가 켜져 있어야
+ * 하기 때문입니다.
+ *
+ * 단순 `startsWith` 는 쓰지 않습니다. 세그먼트 경계(`/`)를 요구해서
+ * `/foo-bar` 가 `/foo` 에 걸리는 오탐을 막습니다. 루트(`/`)는 모든 경로의
+ * 접두사이므로 정확히 일치할 때만 활성입니다.
+ *
+ * 쿼리스트링과 해시는 비교하지 않습니다. `/search?q=A` 와 `/search?q=B` 는 같은
+ * 페이지이므로 검색어가 바뀌어도 메뉴가 꺼지면 안 됩니다. 반대로 `href` 를
+ * `/orders?status=done` 처럼 쿼리로 구분하는 메뉴는 서로 구별되지 않습니다.
+ *
+ * 주의: 항목 단위 판정이라 `/admin` 과 `/admin/group` 이 둘 다 메뉴에 있으면
+ * `/admin/group` 에서 두 항목이 함께 활성이 됩니다. 하나만 켜려면 호출부에서
+ * 가장 긴 매칭을 골라야 합니다.
+ */
+export const isActivePath = (pathname, href) => {
+    const current = toComparablePath(pathname);
+    const target = toComparablePath(href);
+    if (target === '/')
+        return current === '/';
+    return current === target || current.startsWith(`${target}/`);
+};
+/**
+ * 후보 경로 목록 중 현재 경로에 **가장 구체적으로** 맞는 하나를 고릅니다.
+ * 맞는 것이 없으면 `null` 입니다.
  *
- * 접두사(prefix) 비교는 쓰지 않습니다. `startsWith`로 판별하면 `/admin`이
- * `/admin/group`·`/admin-group`까지 활성으로 잡아 여러 메뉴가 동시에 켜집니다.
+ * `isActivePath` 는 항목 단위 판정이라 `/admin` 과 `/admin/group` 이 둘 다 후보면
+ * `/admin/group` 에서 두 항목이 함께 활성이 됩니다. 메뉴에서 하나만 켜려면
+ * 후보 전체를 보고 가장 긴 경로를 골라야 합니다.
+ *
+ * 정규화한 경로 길이로 비교하므로 `/foo` 와 `/foo/` 처럼 같은 경로를 가리키는
+ * 표기 차이는 우열을 만들지 않고, 동률이면 먼저 나온 후보를 씁니다.
+ * 반환값은 정규화 이전의 원본 문자열이라 호출부에서 `===` 로 항목을 찾을 수 있습니다.
  */
-export const isActivePath = (pathname, href) => pathname === href;
+export const findActivePath = (pathname, candidates) => {
+    let matched = null;
+    let matchedLength = -1;
+    for (const candidate of candidates) {
+        if (!isActivePath(pathname, candidate))
+            continue;
+        const length = toComparablePath(candidate).length;
+        if (length > matchedLength) {
+            matched = candidate;
+            matchedLength = length;
+        }
+    }
+    return matched;
+};
 /** 숫자를 정수로 내림 후 천 단위 콤마를 붙인 문자열로 변환합니다 (LDChart 툴팁 표시용). */
 export const formatNumberWithComma = (num = 0) => {
     if (isNaN(num)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loword/loword-design-system",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "description": "로워드 디자인 시스템 컴포넌트 패키지(Tailwind v4)",
   "keywords": [
     "react",

package/src/styles/components/editor.css

@@ -30,6 +30,20 @@
   .prose :is(strong, b) {
     color: inherit !important;
   }
+
+  /* prose 기본값은 블록 요소에 상하 대칭 여백(my)을 준다. 문서 처음/끝에서는
+     그 여백이 컨테이너 안쪽 빈 공간으로 보이므로 제거한다.
+     기준을 .prose가 아니라 .ProseMirror로 잡는 이유: LDViewer는 prose를
+     EditorContent 래퍼에 주므로 본문 블록이 .prose의 손자가 된다.
+     직계 자식(>)으로 한정하지 않는 이유: li > p, blockquote > p처럼 중첩된
+     블록도 자기 부모의 처음/끝이면 같은 규칙이 적용돼야 한다. */
+  .ProseMirror :first-child {
+    margin-top: 0;
+  }
+
+  .ProseMirror :last-child {
+    margin-bottom: 0;
+  }
 }
 
 /* 이미지 정렬 스타일 */