@ihabdevteam/core 0.337.0 → 0.339.0

package/CHANGELOG.md

@@ -7,6 +7,112 @@ All notable changes to this project will be documented in this file.
 > 적은 글이라, 지금 이름으로 고쳐 놓으면 그 시절에 그 이름으로 받은 사람이
 > 제 이야기를 못 찾는다.
 
+## 0.339.0 — 속에 넣은 로고 둘이 색을 바꿔치기하던 것을 막는다
+
+`BrandLogo` 의 `textColor` 길은 svg 를 **문서 속에 넣는다.** 내보낸 로고들이 같은 id 를 쓰고
+되부르고 있어서, 그 길로 로고 둘을 한 쪽에 놓으면 **뒤엣것이 앞엣것의 그라데이션을 썼다.**
+
+```
+id=linear-gradient     가진 파일 10   그 중 되부르는 파일 10
+id=b                   가진 파일  5   그 중 되부르는 파일  5
+```
+
+`url(#X)` 는 **문서 전체**에서 먼저 나온 `X` 에 걸린다. **오류는 안 났다 — 색만 틀렸다.**
+마스크 비가 틀렸을 때와 같은 꼴의 조용한 결함이고, 이달 들어 같은 꼴을 세 번째 만났다.
+
+### 고친 것
+
+- `BrandLogo` 가 속에 넣을 때 **그 로고만의 이름표**를 붙인다(`useId()`). 쓰는 쪽은 아무것도
+  안 바꿔도 된다 — 프롭도 그대로고, 보이는 것도 그대로다.
+- **되부르는 id 만** 바꾼다. `text`·`symbol` 은 아무도 `url(#…)` 로 안 가리켜 겹쳐도 해가 없고,
+  저 둘을 바꾸면 `BrandLogo.css` 의 `[id='text']` 가 못 집어 **글자색이 안 먹는다.**
+- 새 export: `namespaceSvgIds(svg, prefix)` (`hooks/useInlineSvg`).
+
+### 왜 파일을 고치지 않았나
+
+이 svg 들은 디자인 도구에서 내보내는 것이라 고쳐 두면 **다음 내보내기에 돌아오고, 그때는
+아무도 안 본다.** 그래서 **넣는 그 자리**에서 막았다.
+
+### 못 둘을 세웠다
+
+- `test/brandLogoInlineIds.test.tsx` — 로고 둘을 속에 넣어 id 가 겹치지 않는지, 되부름이 제
+  파일 안을 가리키는지, `text` 는 그대로인지. 네 가지로 깨 보고 넷 다 붉어지는 것을 봤다.
+- `test/logoInternalIds.test.ts` — **되부름의 꼴이 아는 둘뿐인지**(`fill="url(#…)"` · `xlink:href`).
+  `clip-path`·`mask`·`style` 로 가리키는 꼴이 들어오면 이름표가 안 붙어 **조용히 색이 틀리므로**
+  그때 운다. 뿌리 id 가 파일 이름과 같은 말을 쓰는지도 센다(아직 어긋난 37곳은 **까닭과 함께**
+  적어 두고, 고쳐진 것이 표에 남아 있으면 운다).
+- `test/fileNamesAreAscii.test.ts` — 저장소 파일 이름에 ASCII 밖 글자가 없는지. 맥은 한글을
+  자모로 흩어 적고(NFD) 리눅스·꾸러미는 모아 적어(NFC) **맥에서만 열리는 이름**이 생긴다.
+
+## 0.338.0 — 로고를 새로 받았다 — **이름이 바뀐다(소비자가 고쳐야 한다)**
+
+사장님이 `logo/` 를 새로 내셨다. **이름 규칙과 속 생김새가 둘 다 바뀌었고, 옛 이름은 없다.**
+
+### 바꿔야 하는 이름
+
+| 옛 이름 | 새 이름 |
+|---|---|
+| `Logo_speechear_kr.svg` | `Logo_SpeechEar_ko.svg` |
+| `Logo_speechearManager_kr.svg` | `Logo_SpeechEarManager_ko.svg` |
+| `Logo_IHAB_kr.svg` | `Logo_IHAB_ko.svg` |
+| `Logo_SDS_kr.svg` | `Logo_SL_ko.svg` |
+| `Symbol_speechear.svg` | `Symbol_SpeechEar.svg` |
+| `…_white.svg` | `…_mono.svg` |
+| `…_black.svg` · `…_textWhite.svg` | **없다** — 아래 참고 |
+
+규칙은 `Logo_<브랜드>_<ko|en>[_mono].svg` · `Symbol_<브랜드>[_mono].svg` 다.
+브랜드는 APEB · HTP · IHAB · SL · SpeechEar · SpeechEarManager · VRSL (SDS 가 SL 로, VRSL 이 새로).
+
+> **대소문자가 바뀐 것이 있다**(`speechear` → `SpeechEar`). 맥은 안 가리지만 **리눅스는 가린다** —
+> 그쪽 CI 에서만 404 가 난다. 코어도 `git` 에 옛 대소문자가 들어 있어 `git mv` 두 걸음으로 고쳤다.
+
+### 파일로 나누던 색을 **입히는 쪽으로** 바꿨다
+
+파일은 이제 둘이다 — 기본(제 색)과 `_mono`(단일톤, 흰색). 다른 색은 **`BrandLogo`** 가 낸다.
+
+```tsx
+import { BrandLogo } from '@ihabdevteam/core/components'
+<BrandLogo src={logo} alt="말귀 로고" />                        // 그대로
+<BrandLogo src={mono} alt="말귀 로고" tone="var(--color-gray)" /> // 한 톤(마스크)
+<BrandLogo src={logo} alt="말귀 로고" textColor="#fff" />         // 글자만 — 마크는 제 색
+```
+
+`textColor` 가 되는 까닭은 새 파일의 속 생김새다 — `<g id="text">` 는 `fill` 이 **없어 물려받고**,
+`<g id="symbol">` 은 **제 색을 들고 있다.** 그래서 속에 넣고 `fill` 만 주면 글자만 바뀐다.
+속에 넣는 몫은 `useInlineSvg` 에 있다 — 묶음에서는 svg 가 `data:` 라 바로 풀리고, 개발 중에는
+한 번 받아 쌓아 둔다(컴포넌트는 스스로 바깥에 손을 안 뻗는다).
+
+### 가로 칸을 줄였다 — **비가 크게 바뀐다**
+
+새 파일은 전부 `4000×240` 인데 그림은 x 563~2306 에서 끝나 **가로의 14~58%만** 쓰고 있었다.
+사장님 지시로 **오른쪽을 20 만 남기고** 줄였다(왼쪽은 안 건드렸다).
+
+```
+말귀 ko 583.33 · 말귀 en 1301.02 · 매니저 ko 1035.43 · 매니저 en 2067.72
+IHAB ko 891.76 · IHAB en 765.08  · HTP ko 1356.29   · HTP en 1332.72
+SL ko 1498.41  · SL en 2051.48   · APEB ko 1646.80  · APEB en 790.08
+VRSL ko 1768.41 · VRSL en 2326.29            (세로는 전부 240, 심볼은 240×240)
+```
+
+**높이만 주던 자리는 그대로 산다.** 폭을 박아 두었거나 비를 수로 적어 둔 자리는 어긋난다.
+
+### 비를 박아 둔 자리 셋이 **다 틀려 있었다**
+
+`WordTable.css` 와 `PassCardBgIHAB.css` 가 `264 / 100`(옛 파일 비)을 들고 있었고, 시험 하나는
+**그 옛 수를 지키라고 우기고** 있었다. 마스크는 비가 틀려도 `contain` 으로 들어맞게 그려
+**아무 오류가 안 난다** — 로고만 작아진다. 셋 다 고치고, CSS 의 비를 **파일과 대조하는** 못을 세웠다.
+
+같은 꼴을 `IHAB_OUTLINE_PATH` 에서도 밟았다 — `Symbol_IHAB` 의 viewBox 가 100 에서 240 으로
+커져, path 글자만 갈아 끼우면 **아무 오류 없이 2.4배로** 그려질 자리였다. 칸 크기를 함께
+내보내고 배경이 그것으로 셈하게 했다.
+
+### 못이 두 번 제 몫을 했다
+
+- `Logo_APEB_en_mono.svg` 가 칸도 묶음도 달랐다 — 못을 **세운 그날** 잡혔고 다시 받았다.
+- `Symbol_IHAB_mono.svg` 가 **126바이트**로 들어왔다. 꼬리표만 있고 그릴 마디가 없었는데
+  이름·짝·칸이 다 맞아 **다른 못은 전부 초록**이었다. 화면의 빈 네모를 보고서야 알았다.
+  이제 **그릴 마디가 있는지**를 센다(글자 수로는 안 센다 — 꼬리표만 늘어도 커진다).
+
 ## 0.337.0 — 다시 듣기 길이 **스스로 자취를 남긴다**(개발 모드)
 
 말귀_1 이 0.336.0 으로 재니 **고친 둘은 섰다**:
@@ -50,6 +156,27 @@ word-tts-speak fetch  0건      ← 0.335.0 의 게으름이 먹는다
 
 > 이번에 고친 것은 없다. **못 찾는 것을 못 찾는다고 적고, 찾을 자를 댔다.**
 
+### 뒤에 밝혀진 것 — **결함이 아니었다**
+
+0.337.0 의 자취로 말귀_1 이 다섯 줄을 하나씩 눌러 재니, **다섯 다 `끝까지 들었다`** 였다.
+멈추개는 한 번도 안 불렸고 경고 줄도 없었다.
+
+*"이름표가 1.15초에 되돌아간다"* 는 **티가 풀린 것이 아니라 소리가 정상으로 끝난 것**이었다 —
+낱말이 1초 안팎이라 그만큼에 끝난다. `play@6.43s` 도 **앞서 누른 다른 줄**의 사슬이 늦게 닿은
+것이었다(자를 걸어 두고 여러 번 누르면서 어느 누름의 자취인지 안 가렸다).
+
+**읽어서 못 찾은 까닭은 셋 다 안 돌았기 때문이다.** 코드가 맞았고 관찰이 틀렸다.
+
+차례도 설계대로 선다 — `['raw', 'urlResolver', 'fallbackUrlResolver']`. 앱이 넘긴 주소가
+**첫 차례**(0ms)로 쓰이고, 없는 줄만 리졸버로 간다(16ms). `raw` 로 끝난 넷은 **리졸버를 아예
+안 묻는다**(0.335.0 의 게으름).
+
+```
+(307) ① 수평 어긋남 0 · ② 기본 변형 · ③ 단추 5/5 · 소리 5/5 · 합성 호출 0건
+```
+
+**자취는 그대로 둔다.** 개발 모드에서만 찍고, 이번에 제 몫을 했다 — 네 번째 짐작을 막았다.
+
 ## 0.336.0 — `playOneShot` 이 **빈 주소를 막고 말한다**
 
 말귀_1 이 앱에서 잡았다:

package/README.md

@@ -346,7 +346,7 @@ setAssetBaseUrl('https://cdn.example.com/ihab-assets')
 이후 패키지 내부 로고/배경 이미지는 위 베이스 URL을 기준으로 해석됩니다. 소비자에서 로고를 사용하려면 권장 순서는:
 
 1. 앱의 퍼블릭(public) 디렉터리에 로고를 두고 호스팅
-2. 패키지에 포함된 로고를 직접 사용하려면(비권장) `import LogoUrl from '@ihabdevteam/core/logo/Logo_speechear_kr.svg'` 처럼 소비자의 번들러가 처리하도록 import
+2. 패키지에 포함된 로고를 직접 사용하려면(비권장) `import LogoUrl from '@ihabdevteam/core/logo/Logo_SpeechEar_ko.svg'` 처럼 소비자의 번들러가 처리하도록 import
 
 패키지 내 `exports`에 `"./logo/*": "./dist/logo/*"` 매핑을 추가했으나, 번들러/런타임 환경에 따라 서브패스 접근이 제한될 수 있으니 퍼블릭 호스팅을 우선 권장합니다.