@ihabdevteam/core 0.337.0 → 0.339.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (191) hide show
  1. package/CHANGELOG.md +127 -0
  2. package/README.md +1 -1
  3. package/dist/components.cjs.js +183 -183
  4. package/dist/components.esm.css +2 -2
  5. package/dist/hooks.cjs.js +3 -3
  6. package/dist/i18n.cjs.js +1 -1
  7. package/dist/ihabdevteam-core.cjs.js +188 -188
  8. package/dist/ihabdevteam-core.d.ts +97 -8
  9. package/dist/logo/Logo_APEB_en.svg +1 -0
  10. package/dist/logo/Logo_APEB_en_mono.svg +1 -0
  11. package/dist/logo/Logo_APEB_ko.svg +1 -0
  12. package/dist/logo/Logo_APEB_ko_mono.svg +1 -0
  13. package/dist/logo/Logo_HTP_en.svg +1 -0
  14. package/dist/logo/Logo_HTP_en_mono.svg +1 -0
  15. package/dist/logo/Logo_HTP_ko.svg +1 -0
  16. package/dist/logo/Logo_HTP_ko_mono.svg +1 -0
  17. package/dist/logo/Logo_IHAB_en.svg +1 -18
  18. package/dist/logo/Logo_IHAB_en_mono.svg +1 -0
  19. package/dist/logo/Logo_IHAB_ko.svg +1 -0
  20. package/dist/logo/Logo_IHAB_ko_mono.svg +1 -0
  21. package/dist/logo/Logo_SL_en.svg +1 -0
  22. package/dist/logo/Logo_SL_en_mono.svg +1 -0
  23. package/dist/logo/Logo_SL_ko.svg +1 -0
  24. package/dist/logo/Logo_SL_ko_mono.svg +1 -0
  25. package/dist/logo/Logo_SpeechEarManager_en.svg +1 -0
  26. package/dist/logo/Logo_SpeechEarManager_en_mono.svg +1 -0
  27. package/dist/logo/Logo_SpeechEarManager_ko.svg +1 -0
  28. package/dist/logo/Logo_SpeechEarManager_ko_mono.svg +1 -0
  29. package/dist/logo/Logo_SpeechEar_en.svg +1 -0
  30. package/dist/logo/Logo_SpeechEar_en_mono.svg +1 -0
  31. package/dist/logo/Logo_SpeechEar_ko.svg +1 -0
  32. package/dist/logo/Logo_SpeechEar_ko_mono.svg +1 -0
  33. package/dist/logo/Logo_VRSL_en.svg +1 -0
  34. package/dist/logo/Logo_VRSL_en_mono.svg +1 -0
  35. package/dist/logo/Logo_VRSL_ko.svg +1 -0
  36. package/dist/logo/Logo_VRSL_ko_mono.svg +1 -0
  37. package/dist/logo/Symbol_APEB.svg +1 -34
  38. package/dist/logo/Symbol_APEB_mono.svg +1 -0
  39. package/dist/logo/Symbol_HTP.svg +1 -14
  40. package/dist/logo/Symbol_HTP_mono.svg +1 -0
  41. package/dist/logo/Symbol_IHAB.svg +1 -14
  42. package/dist/logo/Symbol_IHAB_mono.svg +1 -0
  43. package/dist/logo/Symbol_SL.svg +1 -0
  44. package/dist/logo/Symbol_SL_mono.svg +1 -0
  45. package/dist/logo/Symbol_SpeechEar.svg +1 -0
  46. package/dist/logo/Symbol_SpeechEar_mono.svg +1 -0
  47. package/dist/logo/Symbol_VRSL.svg +1 -0
  48. package/dist/logo/Symbol_VRSL_mono.svg +1 -0
  49. package/dist/packages/core/src/components/BrandLogo.css +48 -0
  50. package/dist/packages/core/src/components/BrandLogo.d.ts +76 -0
  51. package/dist/packages/core/src/components/BrandLogo.js +28 -0
  52. package/dist/packages/core/src/components/Header.js +6 -6
  53. package/dist/packages/core/src/components/PassCard/PassCard.js +27 -22
  54. package/dist/packages/core/src/components/PassCard/PassCardBgIHAB.css +5 -3
  55. package/dist/packages/core/src/components/PassCard/PassCardBgIHAB.js +1 -1
  56. package/dist/packages/core/src/components/PassCard/PassCardBgLeftColorGrid.js +2 -2
  57. package/dist/packages/core/src/components/PassCard/PassCardBgSoundLine.js +1 -1
  58. package/dist/packages/core/src/components/PassCard/PassCardBgSoundLineV1.js +3 -3
  59. package/dist/packages/core/src/components/PassCard/PassCardBgSoundMove.js +8 -3
  60. package/dist/packages/core/src/components/PassCard/PassCardBgSoundMoveV1.js +10 -5
  61. package/dist/packages/core/src/components/PassCard/PassCardBgTalk.js +1 -1
  62. package/dist/packages/core/src/components/PassCard/PassCardBgTalkV1.js +1 -1
  63. package/dist/packages/core/src/components/PassCard/PassCardBgTheme.d.ts +7 -4
  64. package/dist/packages/core/src/components/PassCard/PassCardBgTwoCircle.js +2 -2
  65. package/dist/packages/core/src/components/PassCard/ihabOutlinePath.d.ts +15 -9
  66. package/dist/packages/core/src/components/PassCard/ihabOutlinePath.js +15 -16
  67. package/dist/packages/core/src/components/Table.js +6 -2
  68. package/dist/packages/core/src/components/Training/TrainingWordCard.css +14 -1
  69. package/dist/packages/core/src/components/Training/TrainingWordCard.js +7 -3
  70. package/dist/packages/core/src/components/WordTable.css +11 -6
  71. package/dist/packages/core/src/components/WordTable.js +1 -1
  72. package/dist/packages/core/src/components.d.ts +2 -0
  73. package/dist/packages/core/src/components.js +4 -0
  74. package/dist/packages/core/src/hooks/useInlineSvg.d.ts +34 -0
  75. package/dist/packages/core/src/hooks/useInlineSvg.js +133 -0
  76. package/dist/packages/core/src/hooks.d.ts +1 -0
  77. package/dist/packages/core/src/hooks.js +2 -0
  78. package/dist/packages/core/src/logo/Logo_APEB_en.svg +1 -0
  79. package/dist/packages/core/src/logo/Logo_APEB_en_mono.svg +1 -0
  80. package/dist/packages/core/src/logo/Logo_APEB_ko.svg +1 -0
  81. package/dist/packages/core/src/logo/Logo_APEB_ko_mono.svg +1 -0
  82. package/dist/packages/core/src/logo/Logo_HTP_en.svg +1 -0
  83. package/dist/packages/core/src/logo/Logo_HTP_en_mono.svg +1 -0
  84. package/dist/packages/core/src/logo/Logo_HTP_ko.svg +1 -0
  85. package/dist/packages/core/src/logo/Logo_HTP_ko_mono.svg +1 -0
  86. package/dist/packages/core/src/logo/Logo_IHAB_en.svg +1 -18
  87. package/dist/packages/core/src/logo/Logo_IHAB_en_mono.svg +1 -0
  88. package/dist/packages/core/src/logo/Logo_IHAB_ko.svg +1 -0
  89. package/dist/packages/core/src/logo/Logo_IHAB_ko_mono.svg +1 -0
  90. package/dist/packages/core/src/logo/Logo_SL_en.svg +1 -0
  91. package/dist/packages/core/src/logo/Logo_SL_en_mono.svg +1 -0
  92. package/dist/packages/core/src/logo/Logo_SL_ko.svg +1 -0
  93. package/dist/packages/core/src/logo/Logo_SL_ko_mono.svg +1 -0
  94. package/dist/packages/core/src/logo/Logo_SpeechEarManager_en.svg +1 -0
  95. package/dist/packages/core/src/logo/Logo_SpeechEarManager_en_mono.svg +1 -0
  96. package/dist/packages/core/src/logo/Logo_SpeechEarManager_ko.svg +1 -0
  97. package/dist/packages/core/src/logo/Logo_SpeechEarManager_ko_mono.svg +1 -0
  98. package/dist/packages/core/src/logo/Logo_SpeechEar_en.svg +1 -0
  99. package/dist/packages/core/src/logo/Logo_SpeechEar_en_mono.svg +1 -0
  100. package/dist/packages/core/src/logo/Logo_SpeechEar_ko.svg +1 -0
  101. package/dist/packages/core/src/logo/Logo_SpeechEar_ko_mono.svg +1 -0
  102. package/dist/packages/core/src/logo/Logo_VRSL_en.svg +1 -0
  103. package/dist/packages/core/src/logo/Logo_VRSL_en_mono.svg +1 -0
  104. package/dist/packages/core/src/logo/Logo_VRSL_ko.svg +1 -0
  105. package/dist/packages/core/src/logo/Logo_VRSL_ko_mono.svg +1 -0
  106. package/dist/packages/core/src/logo/Symbol_APEB.svg +1 -34
  107. package/dist/packages/core/src/logo/Symbol_APEB_mono.svg +1 -0
  108. package/dist/packages/core/src/logo/Symbol_HTP.svg +1 -14
  109. package/dist/packages/core/src/logo/Symbol_HTP_mono.svg +1 -0
  110. package/dist/packages/core/src/logo/Symbol_IHAB.svg +1 -14
  111. package/dist/packages/core/src/logo/Symbol_IHAB_mono.svg +1 -0
  112. package/dist/packages/core/src/logo/Symbol_SL.svg +1 -0
  113. package/dist/packages/core/src/logo/Symbol_SL_mono.svg +1 -0
  114. package/dist/packages/core/src/logo/Symbol_SpeechEar.svg +1 -0
  115. package/dist/packages/core/src/logo/Symbol_SpeechEar_mono.svg +1 -0
  116. package/dist/packages/core/src/logo/Symbol_VRSL.svg +1 -0
  117. package/dist/packages/core/src/logo/Symbol_VRSL_mono.svg +1 -0
  118. package/dist/packages/core/src/utils/assets.d.ts +3 -3
  119. package/dist/packages/core/src/utils/assets.js +3 -3
  120. package/dist/packages/core/src/version.d.ts +1 -1
  121. package/dist/packages/core/src/version.js +1 -1
  122. package/dist/utils.cjs.js +1 -1
  123. package/package.json +1 -1
  124. package/dist/logo/Logo_APEB.svg +0 -53
  125. package/dist/logo/Logo_APEB_black.svg +0 -42
  126. package/dist/logo/Logo_APEB_white.svg +0 -42
  127. package/dist/logo/Logo_HTP_kr.svg +0 -21
  128. package/dist/logo/Logo_HTP_kr_black.svg +0 -17
  129. package/dist/logo/Logo_HTP_kr_white.svg +0 -17
  130. package/dist/logo/Logo_IHAB_en_black.svg +0 -14
  131. package/dist/logo/Logo_IHAB_en_white.svg +0 -14
  132. package/dist/logo/Logo_IHAB_kr.svg +0 -18
  133. package/dist/logo/Logo_IHAB_kr_black.svg +0 -14
  134. package/dist/logo/Logo_IHAB_kr_white.svg +0 -14
  135. package/dist/logo/Logo_SDS_kr.svg +0 -22
  136. package/dist/logo/Logo_SDS_kr_black.svg +0 -18
  137. package/dist/logo/Logo_SDS_kr_white.svg +0 -18
  138. package/dist/logo/Logo_speechearManager_kr.svg +0 -20
  139. package/dist/logo/Logo_speechearManager_kr_black.svg +0 -21
  140. package/dist/logo/Logo_speechearManager_kr_textWhite.svg +0 -45
  141. package/dist/logo/Logo_speechearManager_kr_white.svg +0 -21
  142. package/dist/logo/Logo_speechear_kr.svg +0 -17
  143. package/dist/logo/Logo_speechear_kr_black.svg +0 -16
  144. package/dist/logo/Logo_speechear_kr_textWhite.svg +0 -42
  145. package/dist/logo/Logo_speechear_kr_white.svg +0 -16
  146. package/dist/logo/Symbol_APEB_black.svg +0 -15
  147. package/dist/logo/Symbol_APEB_white.svg +0 -15
  148. package/dist/logo/Symbol_HTP_black.svg +0 -10
  149. package/dist/logo/Symbol_HTP_white.svg +0 -10
  150. package/dist/logo/Symbol_IHAB_black.svg +0 -10
  151. package/dist/logo/Symbol_IHAB_white.svg +0 -10
  152. package/dist/logo/Symbol_SDS.svg +0 -14
  153. package/dist/logo/Symbol_SDS_black.svg +0 -10
  154. package/dist/logo/Symbol_SDS_white.svg +0 -10
  155. package/dist/logo/Symbol_speechear.svg +0 -15
  156. package/dist/logo/Symbol_speechear_black.svg +0 -16
  157. package/dist/logo/Symbol_speechear_white.svg +0 -16
  158. package/dist/packages/core/src/logo/Logo_APEB.svg +0 -53
  159. package/dist/packages/core/src/logo/Logo_APEB_black.svg +0 -42
  160. package/dist/packages/core/src/logo/Logo_APEB_white.svg +0 -42
  161. package/dist/packages/core/src/logo/Logo_HTP_kr.svg +0 -21
  162. package/dist/packages/core/src/logo/Logo_HTP_kr_black.svg +0 -17
  163. package/dist/packages/core/src/logo/Logo_HTP_kr_white.svg +0 -17
  164. package/dist/packages/core/src/logo/Logo_IHAB_en_black.svg +0 -14
  165. package/dist/packages/core/src/logo/Logo_IHAB_en_white.svg +0 -14
  166. package/dist/packages/core/src/logo/Logo_IHAB_kr.svg +0 -18
  167. package/dist/packages/core/src/logo/Logo_IHAB_kr_black.svg +0 -14
  168. package/dist/packages/core/src/logo/Logo_IHAB_kr_white.svg +0 -14
  169. package/dist/packages/core/src/logo/Logo_SDS_kr.svg +0 -22
  170. package/dist/packages/core/src/logo/Logo_SDS_kr_black.svg +0 -18
  171. package/dist/packages/core/src/logo/Logo_SDS_kr_white.svg +0 -18
  172. package/dist/packages/core/src/logo/Logo_speechearManager_kr.svg +0 -20
  173. package/dist/packages/core/src/logo/Logo_speechearManager_kr_black.svg +0 -21
  174. package/dist/packages/core/src/logo/Logo_speechearManager_kr_textWhite.svg +0 -45
  175. package/dist/packages/core/src/logo/Logo_speechearManager_kr_white.svg +0 -21
  176. package/dist/packages/core/src/logo/Logo_speechear_kr.svg +0 -17
  177. package/dist/packages/core/src/logo/Logo_speechear_kr_black.svg +0 -16
  178. package/dist/packages/core/src/logo/Logo_speechear_kr_textWhite.svg +0 -42
  179. package/dist/packages/core/src/logo/Logo_speechear_kr_white.svg +0 -16
  180. package/dist/packages/core/src/logo/Symbol_APEB_black.svg +0 -15
  181. package/dist/packages/core/src/logo/Symbol_APEB_white.svg +0 -15
  182. package/dist/packages/core/src/logo/Symbol_HTP_black.svg +0 -10
  183. package/dist/packages/core/src/logo/Symbol_HTP_white.svg +0 -10
  184. package/dist/packages/core/src/logo/Symbol_IHAB_black.svg +0 -10
  185. package/dist/packages/core/src/logo/Symbol_IHAB_white.svg +0 -10
  186. package/dist/packages/core/src/logo/Symbol_SDS.svg +0 -14
  187. package/dist/packages/core/src/logo/Symbol_SDS_black.svg +0 -10
  188. package/dist/packages/core/src/logo/Symbol_SDS_white.svg +0 -10
  189. package/dist/packages/core/src/logo/Symbol_speechear.svg +0 -15
  190. package/dist/packages/core/src/logo/Symbol_speechear_black.svg +0 -16
  191. package/dist/packages/core/src/logo/Symbol_speechear_white.svg +0 -16
@@ -1,14 +1 @@
1
- <svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <g clip-path="url(#clip0_2175_65186)">
3
- <path d="M41.6428 50.0001C41.6428 54.1965 38.2392 57.6001 34.0428 57.6001C29.8464 57.6001 26.4428 54.1965 26.4428 50.0001C26.4428 45.8036 29.8464 42.4001 34.0428 42.4001C38.2392 42.4001 41.6428 45.8036 41.6428 50.0001ZM18.8464 45.4393C16.3285 45.4393 14.2856 47.4822 14.2856 50.0001C14.2856 52.5179 16.3285 54.5608 18.8464 54.5608C21.3642 54.5608 23.4071 52.5179 23.4071 50.0001C23.4071 47.4822 21.3642 45.4393 18.8464 45.4393ZM66.7178 42.4001C62.5214 42.4001 59.1178 45.8036 59.1178 50.0001C59.1178 54.1965 62.5214 57.6001 66.7178 57.6001C70.9142 57.6001 74.3178 54.1965 74.3178 50.0001C74.3178 45.8036 70.9142 42.4001 66.7178 42.4001ZM81.1535 45.4393C78.6356 45.4393 76.5928 47.4822 76.5928 50.0001C76.5928 52.5179 78.6356 54.5608 81.1535 54.5608C83.6714 54.5608 85.7142 52.5179 85.7142 50.0001C85.7142 47.4822 83.6714 45.4393 81.1535 45.4393ZM49.9999 58.3572C45.8035 58.3572 42.3999 61.7608 42.3999 65.9572C42.3999 70.1536 45.8035 73.5572 49.9999 73.5572C54.1964 73.5572 57.5999 70.1536 57.5999 65.9572C57.5999 61.7608 54.1964 58.3572 49.9999 58.3572ZM34.0428 60.2572C30.8964 60.2572 28.3428 62.8072 28.3428 65.9572C28.3428 69.1072 30.8928 71.6572 34.0428 71.6572C37.1928 71.6572 39.7428 69.1072 39.7428 65.9572C39.7428 62.8072 37.1928 60.2572 34.0428 60.2572ZM18.8464 62.9179C17.1678 62.9179 15.8071 64.2786 15.8071 65.9572C15.8071 67.6358 17.1678 68.9965 18.8464 68.9965C20.5249 68.9965 21.8856 67.6358 21.8856 65.9572C21.8856 64.2786 20.5249 62.9179 18.8464 62.9179ZM66.7178 60.2572C63.5714 60.2572 61.0178 62.8072 61.0178 65.9572C61.0178 69.1072 63.5678 71.6572 66.7178 71.6572C69.8678 71.6572 72.4178 69.1072 72.4178 65.9572C72.4178 62.8072 69.8678 60.2572 66.7178 60.2572ZM81.1535 62.9179C79.4749 62.9179 78.1142 64.2786 78.1142 65.9572C78.1142 67.6358 79.4749 68.9965 81.1535 68.9965C82.8321 68.9965 84.1928 67.6358 84.1928 65.9572C84.1928 64.2786 82.8321 62.9179 81.1535 62.9179ZM49.9999 76.5965C47.4821 76.5965 45.4392 78.6393 45.4392 81.1572C45.4392 83.6751 47.4821 85.7179 49.9999 85.7179C52.5178 85.7179 54.5606 83.6751 54.5606 81.1572C54.5606 78.6393 52.5178 76.5965 49.9999 76.5965ZM34.0428 78.1143C32.3642 78.1143 31.0035 79.4751 31.0035 81.1536C31.0035 82.8322 32.3642 84.1929 34.0428 84.1929C35.7214 84.1929 37.0821 82.8322 37.0821 81.1536C37.0821 79.4751 35.7214 78.1143 34.0428 78.1143ZM66.7178 78.1143C65.0392 78.1143 63.6785 79.4751 63.6785 81.1536C63.6785 82.8322 65.0392 84.1929 66.7178 84.1929C68.3964 84.1929 69.7571 82.8322 69.7571 81.1536C69.7571 79.4751 68.3964 78.1143 66.7178 78.1143ZM49.9999 46.9608C48.3214 46.9608 46.9606 48.3215 46.9606 50.0001C46.9606 51.6786 48.3214 53.0393 49.9999 53.0393C51.6785 53.0393 53.0392 51.6786 53.0392 50.0001C53.0392 48.3215 51.6785 46.9608 49.9999 46.9608ZM49.9999 26.4429C45.8035 26.4429 42.3999 29.8465 42.3999 34.0429C42.3999 38.2393 45.8035 41.6429 49.9999 41.6429C54.1964 41.6429 57.5999 38.2393 57.5999 34.0429C57.5999 29.8465 54.1964 26.4429 49.9999 26.4429ZM34.0428 28.3429C30.8964 28.3429 28.3428 30.8929 28.3428 34.0429C28.3428 37.1929 30.8928 39.7429 34.0428 39.7429C37.1928 39.7429 39.7428 37.1929 39.7428 34.0429C39.7428 30.8929 37.1928 28.3429 34.0428 28.3429ZM18.8464 31.0036C17.1678 31.0036 15.8071 32.3643 15.8071 34.0429C15.8071 35.7215 17.1678 37.0822 18.8464 37.0822C20.5249 37.0822 21.8856 35.7215 21.8856 34.0429C21.8856 32.3643 20.5249 31.0036 18.8464 31.0036ZM66.7178 28.3429C63.5714 28.3429 61.0178 30.8929 61.0178 34.0429C61.0178 37.1929 63.5678 39.7429 66.7178 39.7429C69.8678 39.7429 72.4178 37.1929 72.4178 34.0429C72.4178 30.8929 69.8678 28.3429 66.7178 28.3429ZM81.1535 31.0036C79.4749 31.0036 78.1142 32.3643 78.1142 34.0429C78.1142 35.7215 79.4749 37.0822 81.1535 37.0822C82.8321 37.0822 84.1928 35.7215 84.1928 34.0429C84.1928 32.3643 82.8321 31.0036 81.1535 31.0036ZM49.9999 14.2858C47.4821 14.2858 45.4392 16.3286 45.4392 18.8465C45.4392 21.3643 47.4821 23.4072 49.9999 23.4072C52.5178 23.4072 54.5606 21.3643 54.5606 18.8465C54.5606 16.3286 52.5178 14.2858 49.9999 14.2858ZM34.0428 15.8072C32.3642 15.8072 31.0035 17.1679 31.0035 18.8465C31.0035 20.5251 32.3642 21.8858 34.0428 21.8858C35.7214 21.8858 37.0821 20.5251 37.0821 18.8465C37.0821 17.1679 35.7214 15.8072 34.0428 15.8072ZM66.7178 15.8072C65.0392 15.8072 63.6785 17.1679 63.6785 18.8465C63.6785 20.5251 65.0392 21.8858 66.7178 21.8858C68.3964 21.8858 69.7571 20.5251 69.7571 18.8465C69.7571 17.1679 68.3964 15.8072 66.7178 15.8072Z" fill="url(#paint0_linear_2175_65186)"/>
4
- </g>
5
- <defs>
6
- <linearGradient id="paint0_linear_2175_65186" x1="24.4856" y1="24.1036" x2="76.2749" y2="75.8965" gradientUnits="userSpaceOnUse">
7
- <stop offset="0.2" stop-color="#499CDF"/>
8
- <stop offset="0.8" stop-color="#4DCDC0"/>
9
- </linearGradient>
10
- <clipPath id="clip0_2175_65186">
11
- <rect width="100" height="100" fill="white"/>
12
- </clipPath>
13
- </defs>
14
- </svg>
1
+ <?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" width="240" height="240" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 240 240"><defs><linearGradient id="b" x1="48.56" y1="47.49" x2="193.57" y2="192.51" gradientUnits="userSpaceOnUse"><stop offset=".2" stop-color="#499cdf"/><stop offset=".8" stop-color="#4dcdc0"/></linearGradient></defs><path d="M96.6,120c0,11.75-9.53,21.28-21.28,21.28s-21.28-9.53-21.28-21.28,9.53-21.28,21.28-21.28,21.28,9.53,21.28,21.28ZM32.77,107.23c-7.05,0-12.77,5.72-12.77,12.77s5.72,12.77,12.77,12.77,12.77-5.72,12.77-12.77-5.72-12.77-12.77-12.77ZM166.81,98.72c-11.75,0-21.28,9.53-21.28,21.28s9.53,21.28,21.28,21.28,21.28-9.53,21.28-21.28-9.53-21.28-21.28-21.28ZM207.23,107.23c-7.05,0-12.77,5.72-12.77,12.77s5.72,12.77,12.77,12.77,12.77-5.72,12.77-12.77-5.72-12.77-12.77-12.77ZM120,143.4c-11.75,0-21.28,9.53-21.28,21.28s9.53,21.28,21.28,21.28,21.28-9.53,21.28-21.28-9.53-21.28-21.28-21.28ZM75.32,148.72c-8.81,0-15.96,7.14-15.96,15.96s7.14,15.96,15.96,15.96,15.96-7.14,15.96-15.96-7.14-15.96-15.96-15.96ZM32.77,156.17c-4.7,0-8.51,3.81-8.51,8.51s3.81,8.51,8.51,8.51,8.51-3.81,8.51-8.51-3.81-8.51-8.51-8.51ZM166.81,148.72c-8.81,0-15.96,7.14-15.96,15.96s7.14,15.96,15.96,15.96,15.96-7.14,15.96-15.96-7.14-15.96-15.96-15.96ZM207.23,156.17c-4.7,0-8.51,3.81-8.51,8.51s3.81,8.51,8.51,8.51,8.51-3.81,8.51-8.51-3.81-8.51-8.51-8.51ZM120,194.47c-7.05,0-12.77,5.72-12.77,12.77s5.72,12.77,12.77,12.77,12.77-5.72,12.77-12.77-5.72-12.77-12.77-12.77ZM75.32,198.72c-4.7,0-8.51,3.81-8.51,8.51s3.81,8.51,8.51,8.51,8.51-3.81,8.51-8.51-3.81-8.51-8.51-8.51ZM166.81,198.72c-4.7,0-8.51,3.81-8.51,8.51s3.81,8.51,8.51,8.51,8.51-3.81,8.51-8.51-3.81-8.51-8.51-8.51ZM120,111.49c-4.7,0-8.51,3.81-8.51,8.51s3.81,8.51,8.51,8.51,8.51-3.81,8.51-8.51-3.81-8.51-8.51-8.51ZM120,54.04c-11.75,0-21.28,9.53-21.28,21.28s9.53,21.28,21.28,21.28,21.28-9.53,21.28-21.28-9.53-21.28-21.28-21.28ZM75.32,59.36c-8.81,0-15.96,7.14-15.96,15.96s7.14,15.96,15.96,15.96,15.96-7.14,15.96-15.96-7.14-15.96-15.96-15.96ZM32.77,66.81c-4.7,0-8.51,3.81-8.51,8.51s3.81,8.51,8.51,8.51,8.51-3.81,8.51-8.51-3.81-8.51-8.51-8.51ZM166.81,59.36c-8.81,0-15.96,7.14-15.96,15.96s7.14,15.96,15.96,15.96,15.96-7.14,15.96-15.96-7.14-15.96-15.96-15.96ZM207.23,66.81c-4.7,0-8.51,3.81-8.51,8.51s3.81,8.51,8.51,8.51,8.51-3.81,8.51-8.51-3.81-8.51-8.51-8.51ZM120,20c-7.05,0-12.77,5.72-12.77,12.77s5.72,12.77,12.77,12.77,12.77-5.72,12.77-12.77-5.72-12.77-12.77-12.77ZM75.32,24.26c-4.7,0-8.51,3.81-8.51,8.51s3.81,8.51,8.51,8.51,8.51-3.81,8.51-8.51-3.81-8.51-8.51-8.51ZM166.81,24.26c-4.7,0-8.51,3.81-8.51,8.51s3.81,8.51,8.51,8.51,8.51-3.81,8.51-8.51-3.81-8.51-8.51-8.51Z" fill="url(#b)"/></svg>
@@ -0,0 +1 @@
1
+ <?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 240 240"><path d="M96.6,120c0,11.75-9.53,21.28-21.28,21.28s-21.28-9.53-21.28-21.28,9.53-21.28,21.28-21.28,21.28,9.53,21.28,21.28ZM32.77,107.23c-7.05,0-12.77,5.72-12.77,12.77s5.72,12.77,12.77,12.77,12.77-5.72,12.77-12.77-5.72-12.77-12.77-12.77ZM166.81,98.72c-11.75,0-21.28,9.53-21.28,21.28s9.53,21.28,21.28,21.28,21.28-9.53,21.28-21.28-9.53-21.28-21.28-21.28ZM207.23,107.23c-7.05,0-12.77,5.72-12.77,12.77s5.72,12.77,12.77,12.77,12.77-5.72,12.77-12.77-5.72-12.77-12.77-12.77ZM120,143.4c-11.75,0-21.28,9.53-21.28,21.28s9.53,21.28,21.28,21.28,21.28-9.53,21.28-21.28-9.53-21.28-21.28-21.28ZM75.32,148.72c-8.81,0-15.96,7.14-15.96,15.96s7.14,15.96,15.96,15.96,15.96-7.14,15.96-15.96-7.14-15.96-15.96-15.96ZM32.77,156.17c-4.7,0-8.51,3.81-8.51,8.51s3.81,8.51,8.51,8.51,8.51-3.81,8.51-8.51-3.81-8.51-8.51-8.51ZM166.81,148.72c-8.81,0-15.96,7.14-15.96,15.96s7.14,15.96,15.96,15.96,15.96-7.14,15.96-15.96-7.14-15.96-15.96-15.96ZM207.23,156.17c-4.7,0-8.51,3.81-8.51,8.51s3.81,8.51,8.51,8.51,8.51-3.81,8.51-8.51-3.81-8.51-8.51-8.51ZM120,194.47c-7.05,0-12.77,5.72-12.77,12.77s5.72,12.77,12.77,12.77,12.77-5.72,12.77-12.77-5.72-12.77-12.77-12.77ZM75.32,198.72c-4.7,0-8.51,3.81-8.51,8.51s3.81,8.51,8.51,8.51,8.51-3.81,8.51-8.51-3.81-8.51-8.51-8.51ZM166.81,198.72c-4.7,0-8.51,3.81-8.51,8.51s3.81,8.51,8.51,8.51,8.51-3.81,8.51-8.51-3.81-8.51-8.51-8.51ZM120,111.49c-4.7,0-8.51,3.81-8.51,8.51s3.81,8.51,8.51,8.51,8.51-3.81,8.51-8.51-3.81-8.51-8.51-8.51ZM120,54.04c-11.75,0-21.28,9.53-21.28,21.28s9.53,21.28,21.28,21.28,21.28-9.53,21.28-21.28-9.53-21.28-21.28-21.28ZM75.32,59.36c-8.81,0-15.96,7.14-15.96,15.96s7.14,15.96,15.96,15.96,15.96-7.14,15.96-15.96-7.14-15.96-15.96-15.96ZM32.77,66.81c-4.7,0-8.51,3.81-8.51,8.51s3.81,8.51,8.51,8.51,8.51-3.81,8.51-8.51-3.81-8.51-8.51-8.51ZM166.81,59.36c-8.81,0-15.96,7.14-15.96,15.96s7.14,15.96,15.96,15.96,15.96-7.14,15.96-15.96-7.14-15.96-15.96-15.96ZM207.23,66.81c-4.7,0-8.51,3.81-8.51,8.51s3.81,8.51,8.51,8.51,8.51-3.81,8.51-8.51-3.81-8.51-8.51-8.51ZM120,20c-7.05,0-12.77,5.72-12.77,12.77s5.72,12.77,12.77,12.77,12.77-5.72,12.77-12.77-5.72-12.77-12.77-12.77ZM75.32,24.26c-4.7,0-8.51,3.81-8.51,8.51s3.81,8.51,8.51,8.51,8.51-3.81,8.51-8.51-3.81-8.51-8.51-8.51ZM166.81,24.26c-4.7,0-8.51,3.81-8.51,8.51s3.81,8.51,8.51,8.51,8.51-3.81,8.51-8.51-3.81-8.51-8.51-8.51Z" fill="#fff"/></svg>
@@ -1,14 +1 @@
1
- <svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <g clip-path="url(#clip0_2175_65181)">
3
- <path d="M75.2535 24.7464C68.7892 18.2821 59.8606 14.2857 49.9999 14.2857C40.1392 14.2857 37.5214 24.5964 31.0606 31.0607C24.5964 37.525 14.2856 40.1893 14.2856 50C14.2856 59.8107 18.2821 68.7893 24.7464 75.2536C31.2106 81.7178 40.1392 85.7143 49.9999 85.7143C59.8606 85.7143 68.7892 81.7178 75.2535 75.2536C81.7178 68.7893 85.7142 59.8607 85.7142 50C85.7142 40.1393 81.7178 31.2107 75.2535 24.7464ZM62.6285 62.6286C59.3964 65.8607 54.9321 67.8571 49.9999 67.8571C45.0678 67.8571 40.6035 65.8571 37.3714 62.6286C34.1392 59.3964 32.1428 54.9321 32.1428 50C32.1428 45.0678 34.1428 40.6036 37.3714 37.3714C40.6035 34.1393 45.0678 32.1428 49.9999 32.1428C54.9321 32.1428 59.3964 34.1428 62.6285 37.3714C65.8606 40.6036 67.8571 45.0678 67.8571 50C67.8571 54.9321 65.8571 59.3964 62.6285 62.6286Z" fill="url(#paint0_linear_2175_65181)"/>
4
- </g>
5
- <defs>
6
- <linearGradient id="paint0_linear_2175_65181" x1="29.6392" y1="29.6393" x2="75.2535" y2="75.2536" gradientUnits="userSpaceOnUse">
7
- <stop offset="0.2" stop-color="#499CDF"/>
8
- <stop offset="0.8" stop-color="#4DCDC0"/>
9
- </linearGradient>
10
- <clipPath id="clip0_2175_65181">
11
- <rect width="100" height="100" fill="white"/>
12
- </clipPath>
13
- </defs>
14
- </svg>
1
+ <?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" width="240" height="240" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 240 240"><defs><linearGradient id="b" x1="62.99" y1="62.99" x2="190.71" y2="190.71" gradientUnits="userSpaceOnUse"><stop offset=".2" stop-color="#499cdf"/><stop offset=".8" stop-color="#4dcdc0"/></linearGradient></defs><path d="M190.71,49.29c-18.1-18.1-43.1-29.29-70.71-29.29s-34.94,28.87-53.03,46.97h0c-18.1,18.1-46.97,25.56-46.97,53.03s11.19,52.61,29.29,70.71c18.1,18.1,43.1,29.29,70.71,29.29s52.61-11.19,70.71-29.29c18.1-18.1,29.29-43.1,29.29-70.71s-11.19-52.61-29.29-70.71ZM155.36,155.36c-9.05,9.05-21.55,14.64-35.36,14.64s-26.31-5.6-35.36-14.64c-9.05-9.05-14.64-21.55-14.64-35.36s5.6-26.31,14.64-35.36c9.05-9.05,21.55-14.64,35.36-14.64s26.31,5.6,35.36,14.64c9.05,9.05,14.64,21.55,14.64,35.36s-5.6,26.31-14.64,35.36Z" fill="url(#b)"/></svg>
@@ -0,0 +1 @@
1
+ <?xml version="1.0" encoding="UTF-8"?><svg id="Symbol_IHAB_white" xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 240 240"><path id="symbol" d="M190.71,49.29c-18.1-18.1-43.1-29.29-70.71-29.29s-34.94,28.87-53.03,46.97h0c-18.1,18.1-46.97,25.56-46.97,53.03s11.19,52.61,29.29,70.71c18.1,18.1,43.1,29.29,70.71,29.29s52.61-11.19,70.71-29.29c18.1-18.1,29.29-43.1,29.29-70.71s-11.19-52.61-29.29-70.71ZM155.36,155.36c-9.05,9.05-21.55,14.64-35.36,14.64s-26.31-5.6-35.36-14.64c-9.05-9.05-14.64-21.55-14.64-35.36s5.6-26.31,14.64-35.36c9.05-9.05,21.55-14.64,35.36-14.64s26.31,5.6,35.36,14.64c9.05,9.05,14.64,21.55,14.64,35.36s-5.6,26.31-14.64,35.36Z" fill="#fff"/></svg>
@@ -0,0 +1 @@
1
+ <?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" width="240" height="240" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 240 240"><defs><linearGradient id="b" x1="48.04" y1="48.04" x2="188.79" y2="188.79" gradientUnits="userSpaceOnUse"><stop offset=".2" stop-color="#499cdf"/><stop offset=".8" stop-color="#4dcdc0"/></linearGradient></defs><path d="M140,60h-40V20h40v40ZM43.4,52.68l-20,34.64,34.64,20,20-34.64-34.64-20ZM23.4,152.68l20,34.64,34.64-20-20-34.64-34.64,20ZM161.96,72.68l20,34.64,34.64-20-20-34.64-34.64,20ZM140,200v-45.36l39.28,22.68c9.57,5.52,21.8,2.25,27.32-7.32,5.52-9.57,2.25-21.8-7.32-27.32l-69.28-40c-6.19-3.57-13.81-3.57-20,0-6.19,3.57-10,10.17-10,17.32v80c0,11.05,8.95,20,20,20s20-8.95,20-20Z" fill="url(#b)"/></svg>
@@ -0,0 +1 @@
1
+ <?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 240 240"><path d="M140,60h-40V20h40v40ZM43.4,52.68l-20,34.64,34.64,20,20-34.64-34.64-20ZM23.4,152.68l20,34.64,34.64-20-20-34.64-34.64,20ZM161.96,72.68l20,34.64,34.64-20-20-34.64-34.64,20ZM140,200v-45.36l39.28,22.68c9.57,5.52,21.8,2.25,27.32-7.32,5.52-9.57,2.25-21.8-7.32-27.32l-69.28-40c-6.19-3.57-13.81-3.57-20,0-6.19,3.57-10,10.17-10,17.32v80c0,11.05,8.95,20,20,20s20-8.95,20-20Z" fill="#fff"/></svg>
@@ -0,0 +1 @@
1
+ <?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 240 240"><path d="M183.92,56.08c-8.48-15.54-24.97-26.08-43.92-26.08h-60c-27.61,0-50,22.39-50,50v23.38l-19.22,21.15c-1.15,1.26-1.02,3.24.3,4.33,5.82,4.84,12.22,8.56,18.92,11.21.03,18.92,10.56,35.37,26.08,43.84,8.48,15.54,24.97,26.08,43.92,26.08h45.11c2.7,0,4.89,2.19,4.89,4.89,0,2.86,2.45,5.13,5.3,4.88,30.65-2.68,54.7-28.42,54.7-59.77v-60c0-18.95-10.54-35.44-26.08-43.92Z" fill="#4dcdc0"/><path d="M80,50c-16.57,0-30,13.43-30,30v80c0,8.66,2.21,16.81,6.08,23.92,7.1,3.88,15.25,6.08,23.92,6.08h80c16.57,0,30-13.43,30-30v-80c0-8.66-2.21-16.81-6.08-23.92-7.1-3.88-15.25-6.08-23.92-6.08h-80Z" fill="#499cdf"/><rect x="69" y="88" width="12" height="24" rx="6" ry="6" fill="#fff"/><path d="M111,140c-2.92,0-5.85-.75-8.5-2.28-2.39-1.38-3.21-4.44-1.82-6.83,1.38-2.39,4.44-3.21,6.83-1.82,2.74,1.58,6.21,1.13,8.44-1.1,1.08-1.08,1.76-2.45,1.97-3.95.9-6.37,3.71-12.42,8.14-17.5,2.64-3.02,4.03-6.9,3.93-10.92-.21-8.21-6.78-15.05-14.97-15.56-2.76-.18-5.42.33-7.88,1.51-2.49,1.19-5.48.12-6.66-2.37-1.19-2.49-.12-5.48,2.37-6.66,3.96-1.88,8.38-2.73,12.8-2.46,13.32.83,24.01,11.94,24.34,25.29.16,6.53-2.11,12.83-6.39,17.75-3.15,3.61-5.15,7.87-5.77,12.32-.52,3.67-2.18,7-4.8,9.63-3.27,3.27-7.62,4.97-12.02,4.97Z" fill="#fff"/></svg>
@@ -0,0 +1 @@
1
+ <?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 240 240"><g opacity=".5"><path d="M80,50c-16.57,0-30,13.43-30,30v80c0,8.66,2.21,16.81,6.08,23.92,7.1,3.88,15.25,6.08,23.92,6.08h80c16.57,0,30-13.43,30-30v-80c0-8.66-2.21-16.81-6.08-23.92-7.1-3.88-15.25-6.08-23.92-6.08h-80Z" fill="#fff"/></g><path d="M140,30h-60c-27.61,0-50,22.39-50,50v23.38l-19.22,21.15c-1.15,1.26-1.02,3.24.3,4.33,5.82,4.84,12.22,8.56,18.92,11.21.03,18.92,10.56,35.37,26.08,43.84-3.88-7.1-6.08-15.25-6.08-23.92v-80c0-16.57,13.43-30,30-30h80c8.66,0,16.81,2.21,23.92,6.08-8.48-15.54-24.97-26.08-43.92-26.08Z" fill="#fff"/><path d="M183.92,56.08c3.88,7.1,6.08,15.25,6.08,23.92v80c0,16.57-13.43,30-30,30h-80c-8.66,0-16.81-2.21-23.92-6.08,8.48,15.54,24.97,26.08,43.92,26.08h45.11c2.7,0,4.89,2.19,4.89,4.89,0,2.86,2.45,5.13,5.3,4.88,30.65-2.68,54.7-28.42,54.7-59.77v-60c0-18.95-10.54-35.44-26.08-43.92Z" fill="#fff"/><rect x="69" y="88" width="12" height="24" rx="6" ry="6" fill="#fff"/><path d="M111,140c-2.92,0-5.85-.75-8.5-2.28-2.39-1.38-3.21-4.44-1.82-6.83,1.38-2.39,4.44-3.21,6.83-1.82,2.74,1.58,6.21,1.13,8.44-1.1,1.08-1.08,1.76-2.45,1.97-3.95.9-6.37,3.71-12.42,8.14-17.5,2.64-3.02,4.03-6.9,3.93-10.92-.21-8.21-6.78-15.05-14.97-15.56-2.76-.18-5.42.33-7.88,1.51-2.49,1.19-5.48.12-6.66-2.37-1.19-2.49-.12-5.48,2.37-6.66,3.96-1.88,8.38-2.73,12.8-2.46,13.32.83,24.01,11.94,24.34,25.29.16,6.53-2.11,12.83-6.39,17.75-3.15,3.61-5.15,7.87-5.77,12.32-.52,3.67-2.18,7-4.8,9.63-3.27,3.27-7.62,4.97-12.02,4.97Z" fill="#fff"/></svg>
@@ -0,0 +1 @@
1
+ <?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" width="240" height="240" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 240 240"><defs><linearGradient id="b" x1="50.5" y1="50.5" x2="189.5" y2="189.5" gradientUnits="userSpaceOnUse"><stop offset=".2" stop-color="#499cdf"/><stop offset=".8" stop-color="#4dcdc0"/></linearGradient></defs><path d="M160,100c11.03,0,20,8.97,20,20s-8.97,20-20,20h-80c-11.03,0-20-8.97-20-20s8.97-20,20-20h80M160,50h-80c-38.66,0-70,31.34-70,70s31.34,70,70,70h80c38.66,0,70-31.34,70-70s-31.34-70-70-70h0Z" fill="url(#b)"/></svg>
@@ -0,0 +1 @@
1
+ <?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 240 240"><path d="M160,100c11.03,0,20,8.97,20,20s-8.97,20-20,20h-80c-11.03,0-20-8.97-20-20s8.97-20,20-20h80M160,50h-80c-38.66,0-70,31.34-70,70s31.34,70,70,70h80c38.66,0,70-31.34,70-70s-31.34-70-70-70h0Z" fill="#fff"/></svg>
@@ -0,0 +1,48 @@
1
+ /* **브랜드 로고** — 그대로 · 한 톤 · 글자만 다른 색. `BrandLogo.tsx` 의 머리글에 까닭이 있다. */
2
+
3
+ .brand-logo {
4
+ display: block;
5
+ /* 크기는 **부르는 쪽이 정한다** — 로고마다 가로세로 비가 크게 다르다(기본 로고는
6
+ 4000×240 처럼 아주 길다). 여기서 비를 박으면 그 로고만 맞고 나머지는 찌그러진다. */
7
+ max-width: 100%;
8
+ user-select: none;
9
+ }
10
+
11
+ /* ── 한 톤 — 마스크로 모양만 쓰고 색은 배경이 낸다 ──
12
+ `WordTable.css` 의 IHAB 로고가 이미 쓰던 규약이다. */
13
+ .brand-logo--tone {
14
+ display: inline-block;
15
+ background-color: var(--brand-logo-tone, currentColor);
16
+ -webkit-mask-image: var(--brand-logo-src);
17
+ mask-image: var(--brand-logo-src);
18
+ -webkit-mask-repeat: no-repeat;
19
+ mask-repeat: no-repeat;
20
+ -webkit-mask-size: contain;
21
+ mask-size: contain;
22
+ -webkit-mask-position: center;
23
+ mask-position: center;
24
+ }
25
+
26
+ /* ── 글자만 다른 색 — SVG 를 속에 넣고 그 묶음만 칠한다 ── */
27
+ .brand-logo--inline > svg {
28
+ display: block;
29
+ width: 100%;
30
+ height: 100%;
31
+ }
32
+
33
+ /* **`#text` 가 아니라 `[id="text"]` 로 집는다.**
34
+ 로고를 한 쪽에 둘 이상 속에 넣으면 같은 id 가 여럿이 된다. 그때 id 선택자는 자리에 따라
35
+ 달리 듣는 브라우저가 있고, 속성 선택자는 **있는 대로 다 집는다.** */
36
+ .brand-logo--inline [id='text'] {
37
+ fill: var(--brand-logo-text-color, currentColor);
38
+ }
39
+
40
+ /* 마스크는 **칸을 안 만든다** — `<span>` 만 두면 폭이 0 이다. 안 보이는 그림이 칸을 낸다.
41
+ `visibility: hidden` 이라 그려지지 않지만 자리는 차지한다(`display: none` 은 자리도 없앤다). */
42
+ .brand-logo__sizer {
43
+ display: block;
44
+ height: 100%;
45
+ width: auto;
46
+ max-width: 100%;
47
+ visibility: hidden;
48
+ }
@@ -0,0 +1,76 @@
1
+ import { type CSSProperties } from 'react';
2
+ import './BrandLogo.css';
3
+ /**
4
+ * **브랜드 로고를 그린다 — 그대로, 한 톤으로, 또는 글자만 다른 색으로.**
5
+ *
6
+ * 2026-10-15 에 사장님이 로고 파일을 새로 내시면서 **파일로 색을 나누던 것을 그만뒀다.**
7
+ * 전에는 한 로고에 `_white`·`_black`·`_textWhite` 파일이 따로 있었다. 이제 파일은 **둘**이다 —
8
+ * 기본(제 색)과 `_mono`(단일톤). 나머지 색은 **여기서 입힌다.**
9
+ *
10
+ * 그렇게 할 수 있는 까닭은 새 파일의 속 생김새다:
11
+ * ```
12
+ * <g id="text"> … fill 이 **없다** → 물려받는다
13
+ * <g id="symbol"> … fill="#4dcdc0" 따위 **제 색을 들고 있다**
14
+ * ```
15
+ * 그래서 **속에 넣고 `fill` 만 주면 글자만 바뀐다.** 심볼은 제 색을 지킨다.
16
+ *
17
+ * ## 세 가지로 그린다
18
+ *
19
+ * | 주는 것 | 그리는 법 | 왜 |
20
+ * |---|---|---|
21
+ * | 아무것도 안 줌 | `<img src>` | 가장 싸다. 전과 똑같다. |
22
+ * | `tone` | 마스크 + `background-color` | 단일톤을 **아무 색**으로. `_mono` 파일에 쓴다. |
23
+ * | `textColor` | SVG 를 **속에 넣고** `[id="text"]` 만 칠한다 | 심볼은 제 색, 글자만 다른 색. |
24
+ *
25
+ * 마스크 길은 `WordTable.css` 의 IHAB 로고가 이미 쓰던 규약이다 — 새로 지은 것이 아니다.
26
+ *
27
+ * ## 속에 넣는 길만 **값이 든다**
28
+ *
29
+ * 묶음(rollup)은 svg 를 `data:image/svg+xml,…` 로 **속에 담아** 준다 — 그때는 글자를 바로
30
+ * 꺼내 쓰므로 **받아 올 것이 없다.** 놀이터·앱(vite)에서는 주소라서 **한 번 받아 온다**
31
+ * (브라우저가 캐시한다). 그래서 `textColor` 를 줄 때만 그 값이 든다.
32
+ *
33
+ * **받아 온 글을 그대로 안 넣는다** — `<script>` 와 `on*` 꼬리표를 걷고 넣는다.
34
+ * 이 저장소가 인쇄 문서에서 같은 자리를 이미 막아 두었다(`wordTablePrint`).
35
+ *
36
+ * 받아 오는 몫은 **이 파일에 없다** — `hooks/useInlineSvg` 가 한다. 컴포넌트가 스스로
37
+ * 바깥에 손을 뻗지 않는 것이 이 저장소의 규약이다(`test/componentsDontFetch.test.ts`).
38
+ *
39
+ * @example
40
+ * ```tsx
41
+ * import logo from '@ihabdevteam/core/logo/Logo_SpeechEar_ko.svg'
42
+ * import mono from '@ihabdevteam/core/logo/Logo_SpeechEar_ko_mono.svg'
43
+ *
44
+ * <BrandLogo src={logo} alt="말귀 로고" /> // 그대로
45
+ * <BrandLogo src={mono} alt="말귀 로고" tone="var(--color-gray)" /> // 한 톤
46
+ * <BrandLogo src={logo} alt="말귀 로고" textColor="#fff" /> // 글자만 흰색
47
+ * ```
48
+ *
49
+ * @public
50
+ */
51
+ export interface BrandLogoProps {
52
+ /** 로고 주소 — `import` 한 svg 를 그대로 준다 */
53
+ src: string;
54
+ /**
55
+ * 읽어 줄 이름.
56
+ *
57
+ * **빈 글자를 일부러 줄 수 있다**(`alt=""`) — 옆에 같은 말을 적은 글이 있어 로고가 장식인
58
+ * 자리다. 안 주면 안 된다: 이 로고가 **어느 제품인지 알리는 유일한 수단**인 자리가 있다
59
+ * (이용권 카드). 그래서 `alt` 는 받되 **필수**다.
60
+ */
61
+ alt: string;
62
+ className?: string;
63
+ style?: CSSProperties;
64
+ /**
65
+ * 단일톤으로 물들일 색(아무 CSS 색). **`_mono` 파일에 쓴다** — 제 색이 있는 기본 파일에
66
+ * 쓰면 모양만 남고 색이 다 뭉개진다.
67
+ */
68
+ tone?: string;
69
+ /**
70
+ * 글자(`<g id="text">`)만 칠할 색. 심볼은 제 색을 지킨다.
71
+ * `tone` 과 **함께 주면 `tone` 이 이긴다** — 한 톤으로 칠한 위에 글자색은 뜻이 없다.
72
+ */
73
+ textColor?: string;
74
+ }
75
+ /** @public */
76
+ export default function BrandLogo({ src, alt, className, style, tone, textColor }: BrandLogoProps): import("react").JSX.Element;
@@ -0,0 +1,28 @@
1
+ 'use client';
2
+ import { jsx as _jsx } from "react/jsx-runtime";
3
+ import { useId } from 'react';
4
+ import { cx } from '../utils/cx';
5
+ import { useInlineSvg, stripActiveSvg, namespaceSvgIds } from '../hooks/useInlineSvg';
6
+ import './BrandLogo.css';
7
+ /** @public */
8
+ export default function BrandLogo({ src, alt, className, style, tone, textColor }) {
9
+ /* `tone` 이 이긴다 — 한 톤으로 칠한 위에 글자색은 뜻이 없다 */
10
+ const wantsInline = !tone && !!textColor;
11
+ /* **받아 오는 몫은 훅에 있다** — 컴포넌트는 바깥에 손을 안 뻗는다
12
+ (`test/componentsDontFetch.test.ts`). 묶음에서는 `data:` 라 바로 풀리고,
13
+ 놀이터·앱에서는 한 번 받아 쌓아 둔다. */
14
+ const svg = useInlineSvg(src, wantsInline);
15
+ /* **이 로고만의 이름표** — 속에 둘 넣었을 때 `url(#linear-gradient)` 가 엉키지 않게.
16
+ `useId()` 는 `:r1:` 처럼 돌려주는데 그 꼴을 `url(#…)` 안에 그대로 넣고 싶지 않아 글자만 남긴다. */
17
+ const uid = 'bl' + useId().replace(/[^a-zA-Z0-9]/g, '');
18
+ if (tone) {
19
+ /* 마스크는 **모양만** 쓴다 — 그래서 `_mono` 든 기본이든 실루엣이 같다.
20
+ `role="img"` 와 이름을 다는 까닭: `<img>` 가 아니라서 낭독기가 저절로 못 읽는다. */
21
+ return (_jsx("span", { className: cx('brand-logo', 'brand-logo--tone', className), role: alt ? 'img' : undefined, "aria-label": alt || undefined, "aria-hidden": alt ? undefined : true, style: { ...style, ['--brand-logo-src']: `url("${src}")`, ['--brand-logo-tone']: tone }, children: _jsx("img", { src: src, alt: "", "aria-hidden": "true", className: "brand-logo__sizer", draggable: false }) }));
22
+ }
23
+ if (wantsInline && svg) {
24
+ return (_jsx("span", { className: cx('brand-logo', 'brand-logo--inline', className), role: alt ? 'img' : undefined, "aria-label": alt || undefined, "aria-hidden": alt ? undefined : true, style: { ...style, ['--brand-logo-text-color']: textColor }, dangerouslySetInnerHTML: { __html: namespaceSvgIds(stripActiveSvg(svg), uid) } }));
25
+ }
26
+ /* 아직 못 받았거나 아무것도 안 줬으면 **그대로 그린다** — 글자색만 못 입을 뿐 로고는 선다 */
27
+ return _jsx("img", { src: src, alt: alt, className: cx('brand-logo', className), style: style, draggable: false });
28
+ }
@@ -14,18 +14,18 @@ import './Tooltip/Tooltip.css';
14
14
  import SideNav from './SideNav';
15
15
  import { resolveAssetUrl } from '../utils';
16
16
  import { isSafeOpenHref } from '../utils/safeHref';
17
- import LogoSvg from '../logo/Logo_speechear_kr.svg';
18
- import LogoManagerSvg from '../logo/Logo_speechearManager_kr.svg';
19
- import SymbolSvg from '../logo/Symbol_speechear.svg';
17
+ import LogoSvg from '../logo/Logo_SpeechEar_ko.svg';
18
+ import LogoManagerSvg from '../logo/Logo_SpeechEarManager_ko.svg';
19
+ import SymbolSvg from '../logo/Symbol_SpeechEar.svg';
20
20
  import './Header.css';
21
21
  /** @public */
22
22
  export function BrandIdentity({ appMode }) {
23
23
  const { t } = useTranslation();
24
24
  const isManager = appMode === 'manager';
25
25
  const logo = isManager
26
- ? (typeof LogoManagerSvg === 'string' && LogoManagerSvg) || resolveAssetUrl('logo/Logo_speechearManager_kr.svg')
27
- : (typeof LogoSvg === 'string' && LogoSvg) || resolveAssetUrl('logo/Logo_speechear_kr.svg');
28
- const symbol = (typeof SymbolSvg === 'string' && SymbolSvg) || resolveAssetUrl('logo/Symbol_speechear.svg');
26
+ ? (typeof LogoManagerSvg === 'string' && LogoManagerSvg) || resolveAssetUrl('logo/Logo_SpeechEarManager_ko.svg')
27
+ : (typeof LogoSvg === 'string' && LogoSvg) || resolveAssetUrl('logo/Logo_SpeechEar_ko.svg');
28
+ const symbol = (typeof SymbolSvg === 'string' && SymbolSvg) || resolveAssetUrl('logo/Symbol_SpeechEar.svg');
29
29
  /* **둘을 다 그려 두고 고르는 것은 CSS 가 한다.** 예전에는 여기서 화면 폭만 보고
30
30
  (`(min-width: 768px) and (max-width: 1023px)`) 심볼이냐 로고냐를 갈랐는데, **그 폭에서
31
31
  레일은 두 모양이다** — 접힌 72px 과, 호버·포커스로 펼친 220px. 펼친 220 은 넓은 화면과
@@ -9,14 +9,10 @@ import { derivePassCard, deriveDurationDays } from './passCardProduct';
9
9
  import './PassCard.css';
10
10
  import Tooltip from '../Tooltip/Tooltip';
11
11
  import MenuTooltip from '../Tooltip/MenuTooltip';
12
- import logoSpeechear from '../../logo/Logo_speechear_kr.svg';
13
- import logoSpeechear_white from '../../logo/Logo_speechear_kr_white.svg';
14
- import logoSpeechear_textWhite from '../../logo/Logo_speechear_kr_textWhite.svg';
15
- import logoSpeechear_black from '../../logo/Logo_speechear_kr_black.svg';
16
- import logoSpeechearManager from '../../logo/Logo_speechearManager_kr.svg';
17
- import logoSpeechearManager_white from '../../logo/Logo_speechearManager_kr_white.svg';
18
- import logoSpeechearManager_textWhite from '../../logo/Logo_speechearManager_kr_textWhite.svg';
19
- import logoSpeechearManager_black from '../../logo/Logo_speechearManager_kr_black.svg';
12
+ import logoSpeechear from '../../logo/Logo_SpeechEar_ko.svg';
13
+ import logoSpeechear_mono from '../../logo/Logo_SpeechEar_ko_mono.svg';
14
+ import logoSpeechearManager from '../../logo/Logo_SpeechEarManager_ko.svg';
15
+ import logoSpeechearManager_mono from '../../logo/Logo_SpeechEarManager_ko_mono.svg';
20
16
  import PassCardBgTwoCircle from './PassCardBgTwoCircle';
21
17
  import PassCardBgSoundMove from './PassCardBgSoundMove';
22
18
  import PassCardBgSoundMoveV1 from './PassCardBgSoundMoveV1';
@@ -26,19 +22,24 @@ import { recentlyTouched } from '../../hooks/touchToggle';
26
22
  /*
27
23
  * 로고 variant 정적 매핑 — base + color suffix 조합으로 SVG URL을 resolve.
28
24
  * (Vite 전용 import.meta.glob 대신 정적 import — Rollup CJS 빌드 호환)
25
+ *
26
+ * **갈래가 둘로 줄었다**(2026-10-15, 사장님이 로고 파일을 새로 내셨다).
27
+ * 전에는 `''`·`_white`·`_textWhite`·`_black` 넷이었다. 이제 **파일은 둘**이다 —
28
+ * 기본(제 색)과 `_mono`(단일톤). 나머지 색은 **파일을 더 두지 않고 입힌다**(아래 `--tone`).
29
+ *
30
+ * · `_white` → `_mono` 다. 몬오 파일이 흰색으로 차 있어 **보이는 것이 전과 같다.**
31
+ * · `_black` → 없다. 만료 카드는 `_mono` 를 **검정으로 물들여** 쓴다(마스크, 아래 참고).
32
+ * · `_textWhite` → 없다. **부르는 자리가 하나도 없었다** — 표에만 있고 아무도 안 썼다.
33
+ * 글자만 다른 색으로 쓰려면 이제 `BrandLogo` 의 `textColor` 로 한다(`brandLogo.tsx`).
29
34
  */
30
35
  const LOGO_VARIANTS = {
31
- Logo_speechear_kr: {
36
+ Logo_SpeechEar_ko: {
32
37
  '': logoSpeechear,
33
- '_white': logoSpeechear_white,
34
- '_textWhite': logoSpeechear_textWhite,
35
- '_black': logoSpeechear_black,
38
+ '_mono': logoSpeechear_mono,
36
39
  },
37
- Logo_speechearManager_kr: {
40
+ Logo_SpeechEarManager_ko: {
38
41
  '': logoSpeechearManager,
39
- '_white': logoSpeechearManager_white,
40
- '_textWhite': logoSpeechearManager_textWhite,
41
- '_black': logoSpeechearManager_black,
42
+ '_mono': logoSpeechearManager_mono,
42
43
  },
43
44
  };
44
45
  function resolveLogoUrl(base, color) {
@@ -52,8 +53,8 @@ const LOGO = {
52
53
  };
53
54
  /** type별 로고 base 파일명 — 색상 variant 접미사와 조합해 실제 파일 결정 */
54
55
  const LOGO_BASE = {
55
- speechear: 'Logo_speechear_kr',
56
- manager: 'Logo_speechearManager_kr',
56
+ speechear: 'Logo_SpeechEar_ko',
57
+ manager: 'Logo_SpeechEarManager_ko',
57
58
  };
58
59
  const MAX_TILT = 10;
59
60
  /**
@@ -237,10 +238,14 @@ export default function PassCard({ ariaLabel, product, showPrice = false, plan,
237
238
  const theme = getPassCardBgTheme(el);
238
239
  if (!logoSrc) {
239
240
  const base = LOGO_BASE[rType];
240
- // 만료 카드는 CSS에서 바탕을 흰색으로 통일하므로(.pass-card--expired .pass-card-bg),
241
- // 컬러 배경 전제로 고른 흰 로고 variant를 그대로 쓰면 로고가 사라진다.
242
- // 브랜드색도 뺀 상태이니 검정 로고로 맞춘다.
243
- const variant = state === 'expired' ? '_black' : (theme?.logoColor ?? '');
241
+ /* 만료 카드는 CSS에서 바탕을 흰색으로 통일하므로(`.pass-card--expired .pass-card-bg`),
242
+ 컬러 배경 전제로 고른 단일톤 로고를 **그대로 두면 흰 바탕에 흰 로고**라 사라진다.
243
+ 브랜드색도 뺀 상태이니 어두운 한 톤으로 맞춘다.
244
+
245
+ **전에는 `_black` 파일을 썼다. 그 파일이 없어졌다**(2026-10-15) — 단일톤은 `_mono`
246
+ 하나로 두고 **색을 입히기로** 정하셨다. 그래서 만료도 `_mono` 를 쓰되 아래
247
+ `pass-card__logo--tone` 이 마스크로 물들인다(`WordTable.css` 의 IHAB 로고와 같은 규약). */
248
+ const variant = state === 'expired' ? '_mono' : (theme?.logoColor ?? '');
244
249
  const resolved = resolveLogoUrl(base, variant);
245
250
  setResolvedLogoSrc(resolved);
246
251
  }
@@ -14,10 +14,12 @@
14
14
 
15
15
  /* 우측 상단 심볼 — -90도 회전 후 visible bbox가 top:12/right:12에 위치하도록.
16
16
  위치·마스크는 공통 .pass-card-bg__symbol이 담당하고 여기서는 차이만 둔다.
17
- 이 배경만 심볼이 아니라 가로 워드마크(Logo_IHAB_en, 264×100)라 폭이 정사각이
18
- 아니다 — <img width:auto>가 해주던 비율 유지를 span에서는 직접 계산해 준다. */
17
+ 이 배경만 심볼이 아니라 가로 워드마크(Logo_IHAB_en)라 폭이 정사각이 아니다 —
18
+ <img width:auto>가 해주던 비율 유지를 span에서는 직접 계산해 준다.
19
+ **수는 파일의 viewBox 다**(2026-10-15 에 264×100 에서 고쳤다. 비가 틀려도 마스크가
20
+ `contain` 으로 들어맞게 그려 아무 오류가 안 난다 — `test/logoFileShape.test.ts` 가 센다). */
19
21
  .pass-card-bg-ihab__symbol-top {
20
- width: calc(48px * 264 / 100);
22
+ width: calc(48px * 765.08 / 240);
21
23
  /* transform-origin: top right → 회전축이 layout box 우상단 */
22
24
  /* translate(-48px, 0): 회전 후 우측으로 빠져나간 visible 영역(원래 height만큼)을 다시 좌측으로 당김 */
23
25
  transform: translate(-48px, 0) rotate(-90deg);
@@ -9,7 +9,7 @@ import { injectPassCardBgTheme, clearPassCardBgTheme } from './PassCardBgTheme';
9
9
  export const passCardBgIhabTheme = {
10
10
  text: '#1a1a1a',
11
11
  sub: 'var(--color-lightGray)',
12
- logoBase: 'Logo_speechear_kr',
12
+ logoBase: 'Logo_SpeechEar_ko',
13
13
  copyrightColor: '#c9c9c9',
14
14
  };
15
15
  /** @public */
@@ -9,8 +9,8 @@ import { injectPassCardBgTheme, clearPassCardBgTheme } from './PassCardBgTheme';
9
9
  export const passCardBgLeftColorGridTheme = {
10
10
  text: '#ffffff',
11
11
  sub: 'var(--color-lightGray)',
12
- logoBase: 'Logo_speechearManager_kr',
13
- logoColor: '_white',
12
+ logoBase: 'Logo_SpeechEarManager_ko',
13
+ logoColor: '_mono',
14
14
  copyrightColor: '#ffffff',
15
15
  };
16
16
  /** @public */
@@ -10,7 +10,7 @@ import { injectPassCardBgTheme, clearPassCardBgTheme } from './PassCardBgTheme';
10
10
  export const passCardBgSoundLineTheme = {
11
11
  text: '#1a1a1a',
12
12
  sub: 'var(--color-lightGray)',
13
- logoBase: 'Logo_speechear_kr',
13
+ logoBase: 'Logo_SpeechEar_ko',
14
14
  copyrightColor: '#1a1a1a',
15
15
  };
16
16
  /** @public */
@@ -4,14 +4,14 @@ import { useId } from 'react';
4
4
  import { useParentBgTheme } from '../../hooks/useParentBgTheme';
5
5
  import './PassCardBg.css';
6
6
  import './PassCardBgSoundLineV1.css';
7
- import symbolIhab from '../../logo/Symbol_IHAB_white.svg';
7
+ import symbolIhab from '../../logo/Symbol_IHAB_mono.svg';
8
8
  import { injectPassCardBgTheme, clearPassCardBgTheme } from './PassCardBgTheme';
9
9
  /** @public */
10
10
  export const passCardBgSoundLineV1Theme = {
11
11
  text: '#ffffff',
12
12
  sub: 'var(--color-lightGray)',
13
- logoBase: 'Logo_speechear_kr',
14
- logoColor: '_white',
13
+ logoBase: 'Logo_SpeechEar_ko',
14
+ logoColor: '_mono',
15
15
  copyrightColor: '#ffffff',
16
16
  };
17
17
  /** @public */
@@ -1,7 +1,7 @@
1
1
  'use client';
2
2
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
3
  import { useParentBgTheme } from '../../hooks/useParentBgTheme';
4
- import { IHAB_OUTLINE_PATH } from './ihabOutlinePath';
4
+ import { IHAB_OUTLINE_PATH, IHAB_OUTLINE_BOX } from './ihabOutlinePath';
5
5
  import './PassCardBg.css';
6
6
  import './PassCardBgSoundMove.css';
7
7
  import symbolIhab from '../../logo/Symbol_IHAB.svg';
@@ -10,10 +10,15 @@ import { injectPassCardBgTheme, clearPassCardBgTheme } from './PassCardBgTheme';
10
10
  export const passCardBgSoundMoveTheme = {
11
11
  text: '#1a1a1a',
12
12
  sub: 'var(--color-lightGray)',
13
- logoBase: 'Logo_speechear_kr',
13
+ logoBase: 'Logo_SpeechEar_ko',
14
14
  copyrightColor: 'var(--color-main)',
15
15
  };
16
16
  /** 각 wave: scale, opacity */
17
+ /* **`scale` 이 뜻하는 지름**(이 그림의 viewBox 칸으로). 로고 원본이 100 칸이던 시절에는
18
+ `scale` 을 그대로 썼는데, 2026-10-15 에 원본이 240 칸이 되면서 그대로 두면 2.4배로
19
+ 그려졌다. 보이는 크기를 그때 그대로 두려고 이 수를 남기고, 배율을
20
+ `scale × WAVE_UNIT ÷ IHAB_OUTLINE_BOX` 로 센다 — 원본 칸이 또 바뀌어도 여기는 안 바뀐다. */
21
+ const WAVE_UNIT = 100;
17
22
  const WAVES = [
18
23
  { scale: 1.0, opacity: 0.55 },
19
24
  { scale: 2.0, opacity: 0.40 },
@@ -28,5 +33,5 @@ export default function PassCardBgSoundMove(_props = {}) {
28
33
  // viewBox: 300×189 (PassCard 비율). 소스 중심: 우하단
29
34
  const cx = 270;
30
35
  const cy = 170;
31
- return (_jsxs("div", { ref: ref, className: "pass-card-bg pass-card-bg-sound-move", "aria-hidden": "true", children: [_jsx("svg", { className: "pass-card-bg-sound-move__svg", viewBox: "0 0 300 189", preserveAspectRatio: "xMidYMid meet", xmlns: "http://www.w3.org/2000/svg", children: WAVES.map(({ scale, opacity }, i) => (_jsx("g", { transform: `translate(${cx} ${cy}) scale(${scale}) translate(-50 -50)`, opacity: opacity, children: _jsx("path", { d: IHAB_OUTLINE_PATH, fill: "none", stroke: stroke, strokeWidth: "1.5", vectorEffect: "non-scaling-stroke" }) }, i))) }), _jsx("span", { className: "pass-card-bg__symbol pass-card-bg-sound-move__symbol", style: { ['--symbol-url']: `url("${symbolIhab}")` } })] }));
36
+ return (_jsxs("div", { ref: ref, className: "pass-card-bg pass-card-bg-sound-move", "aria-hidden": "true", children: [_jsx("svg", { className: "pass-card-bg-sound-move__svg", viewBox: "0 0 300 189", preserveAspectRatio: "xMidYMid meet", xmlns: "http://www.w3.org/2000/svg", children: WAVES.map(({ scale, opacity }, i) => (_jsx("g", { transform: `translate(${cx} ${cy}) scale(${scale * WAVE_UNIT / IHAB_OUTLINE_BOX}) translate(${-IHAB_OUTLINE_BOX / 2} ${-IHAB_OUTLINE_BOX / 2})`, opacity: opacity, children: _jsx("path", { d: IHAB_OUTLINE_PATH, fill: "none", stroke: stroke, strokeWidth: "1.5", vectorEffect: "non-scaling-stroke" }) }, i))) }), _jsx("span", { className: "pass-card-bg__symbol pass-card-bg-sound-move__symbol", style: { ['--symbol-url']: `url("${symbolIhab}")` } })] }));
32
37
  }
@@ -1,20 +1,25 @@
1
1
  'use client';
2
2
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
3
  import { useParentBgTheme } from '../../hooks/useParentBgTheme';
4
- import { IHAB_OUTLINE_PATH } from './ihabOutlinePath';
4
+ import { IHAB_OUTLINE_PATH, IHAB_OUTLINE_BOX } from './ihabOutlinePath';
5
5
  import './PassCardBg.css';
6
6
  import './PassCardBgSoundMoveV1.css';
7
- import symbolIhab from '../../logo/Symbol_IHAB_white.svg';
7
+ import symbolIhab from '../../logo/Symbol_IHAB_mono.svg';
8
8
  import { injectPassCardBgTheme, clearPassCardBgTheme } from './PassCardBgTheme';
9
9
  /** @public */
10
10
  export const passCardBgSoundMoveV1Theme = {
11
11
  text: '#ffffff',
12
12
  sub: 'var(--color-lightGray)',
13
- logoBase: 'Logo_speechear_kr',
14
- logoColor: '_white',
13
+ logoBase: 'Logo_SpeechEar_ko',
14
+ logoColor: '_mono',
15
15
  copyrightColor: '#ffffff',
16
16
  };
17
17
  /** 각 wave: scale, opacity */
18
+ /* **`scale` 이 뜻하는 지름**(이 그림의 viewBox 칸으로). 로고 원본이 100 칸이던 시절에는
19
+ `scale` 을 그대로 썼는데, 2026-10-15 에 원본이 240 칸이 되면서 그대로 두면 2.4배로
20
+ 그려졌다. 보이는 크기를 그때 그대로 두려고 이 수를 남기고, 배율을
21
+ `scale × WAVE_UNIT ÷ IHAB_OUTLINE_BOX` 로 센다 — 원본 칸이 또 바뀌어도 여기는 안 바뀐다. */
22
+ const WAVE_UNIT = 100;
18
23
  const WAVES = [
19
24
  { scale: 1.0, opacity: 0.55 },
20
25
  { scale: 2.0, opacity: 0.40 },
@@ -29,5 +34,5 @@ export default function PassCardBgSoundMoveV1(_props = {}) {
29
34
  // viewBox: 300×189 (PassCard 비율). 소스 중심: 우하단
30
35
  const cx = 270;
31
36
  const cy = 170;
32
- return (_jsxs("div", { ref: ref, className: "pass-card-bg pass-card-bg-sound-move-v1", "aria-hidden": "true", children: [_jsx("svg", { className: "pass-card-bg-sound-move-v1__svg", viewBox: "0 0 300 189", preserveAspectRatio: "xMidYMid meet", xmlns: "http://www.w3.org/2000/svg", children: WAVES.map(({ scale, opacity }, i) => (_jsx("g", { transform: `translate(${cx} ${cy}) scale(${scale}) translate(-50 -50)`, opacity: opacity, children: _jsx("path", { d: IHAB_OUTLINE_PATH, fill: "none", stroke: stroke, strokeWidth: "1.5", vectorEffect: "non-scaling-stroke" }) }, i))) }), _jsx("span", { className: "pass-card-bg__symbol pass-card-bg-sound-move-v1__symbol", style: { ['--symbol-url']: `url("${symbolIhab}")` } })] }));
37
+ return (_jsxs("div", { ref: ref, className: "pass-card-bg pass-card-bg-sound-move-v1", "aria-hidden": "true", children: [_jsx("svg", { className: "pass-card-bg-sound-move-v1__svg", viewBox: "0 0 300 189", preserveAspectRatio: "xMidYMid meet", xmlns: "http://www.w3.org/2000/svg", children: WAVES.map(({ scale, opacity }, i) => (_jsx("g", { transform: `translate(${cx} ${cy}) scale(${scale * WAVE_UNIT / IHAB_OUTLINE_BOX}) translate(${-IHAB_OUTLINE_BOX / 2} ${-IHAB_OUTLINE_BOX / 2})`, opacity: opacity, children: _jsx("path", { d: IHAB_OUTLINE_PATH, fill: "none", stroke: stroke, strokeWidth: "1.5", vectorEffect: "non-scaling-stroke" }) }, i))) }), _jsx("span", { className: "pass-card-bg__symbol pass-card-bg-sound-move-v1__symbol", style: { ['--symbol-url']: `url("${symbolIhab}")` } })] }));
33
38
  }
@@ -9,7 +9,7 @@ import { injectPassCardBgTheme, clearPassCardBgTheme } from './PassCardBgTheme';
9
9
  export const passCardBgTalkTheme = {
10
10
  text: '#1a1a1a',
11
11
  sub: 'var(--color-lightGray)',
12
- logoBase: 'Logo_speechear_kr',
12
+ logoBase: 'Logo_SpeechEar_ko',
13
13
  copyrightColor: 'var(--color-main)',
14
14
  };
15
15
  /** @public */
@@ -9,7 +9,7 @@ import { injectPassCardBgTheme, clearPassCardBgTheme } from './PassCardBgTheme';
9
9
  export const passCardBgTalkV1Theme = {
10
10
  text: '#1a1a1a',
11
11
  sub: 'var(--color-lightGray)',
12
- logoBase: 'Logo_speechear_kr',
12
+ logoBase: 'Logo_SpeechEar_ko',
13
13
  copyrightColor: 'var(--color-main)',
14
14
  };
15
15
  /**
@@ -14,12 +14,15 @@ export interface PassCardBgTheme {
14
14
  /** 보조 텍스트 색상 — copyright 등 → --pass-card-sub */
15
15
  sub: string;
16
16
  /**
17
- * 배경에 어울리는 로고 색상 variant 접미사.
18
- * 예: '' (기본), '_white', '_black'
19
- * PassCard가 logoBase와 조합해 실제 파일을 결정할 때 참조.
17
+ * 배경에 어울리는 로고 색상 variant 접미사 — **`''`(기본) 또는 `'_mono'` 둘뿐이다.**
18
+ *
19
+ * 2026-10-15 에 로고 파일이 새로 나오면서 `_white`·`_black`·`_textWhite` 파일이 없어졌다.
20
+ * 단일톤은 `_mono` **하나**이고, 다른 색이 필요하면 파일을 더 두지 않고 **입힌다**
21
+ * (`BrandLogo` 의 `tone`·`textColor`). `_white` 를 적던 자리는 `_mono` 로 바뀌었다 —
22
+ * 그 파일이 흰색으로 차 있어 **보이는 것이 전과 같다.**
20
23
  */
21
24
  logoColor?: string;
22
- /** 좌측 로고 베이스 이름 (e.g. 'Logo_speechear_kr') */
25
+ /** 좌측 로고 베이스 이름 (e.g. 'Logo_SpeechEar_ko') */
23
26
  logoBase?: string;
24
27
  /** 카피라이트 텍스트 색상 → --pass-card-copyright */
25
28
  copyrightColor?: string;
@@ -3,13 +3,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
3
  import { useParentBgTheme } from '../../hooks/useParentBgTheme';
4
4
  import './PassCardBg.css';
5
5
  import './PassCardBgTwoCircle.css';
6
- import symbolIhab from '../../logo/Symbol_IHAB_white.svg';
6
+ import symbolIhab from '../../logo/Symbol_IHAB_mono.svg';
7
7
  import { injectPassCardBgTheme, clearPassCardBgTheme } from './PassCardBgTheme';
8
8
  /** @public */
9
9
  export const passCardBgTwoCircleTheme = {
10
10
  text: 'var(--color-pureBlack)',
11
11
  sub: 'var(--color-lightGray)',
12
- logoBase: 'Logo_speechear_kr',
12
+ logoBase: 'Logo_SpeechEar_ko',
13
13
  copyrightColor: '#1a1a1a',
14
14
  };
15
15
  /** @public */
@@ -1,12 +1,18 @@
1
1
  /**
2
- * IHAB 심볼의 외곽 path — 정원이 아니라 좌상단이 살짝 안쪽으로 들어간 비대칭 형태다.
3
- * 원본 viewBox 100×100, 중심 (50, 50).
2
+ * IHAB 심볼의 **바깥 외곽** path — 정원이 아니라 좌상단이 살짝 안쪽으로 들어간 비대칭이다.
4
3
  *
5
- * 이용권 카드 배경 둘(지금 것과 V1)이 이 아홉 줄을 각자 들고 있었다. 로고 모양은 바뀌면
6
- * 함께 바뀌어야 하는데, 두 벌이면 한쪽만 새 모양이 되어 화면마다 다른 로고가 뜬다.
7
- * 원본은 src/logo/Symbol_IHAB.svg 다. 그 파일의 path 는 **바깥 외곽 + 안쪽 구멍** 두 조각이
8
- * 이어져 있고, 여기 옮겨 적은 것은 그중 앞의 바깥 조각뿐이다(배경으로 깔 때는 구멍이
9
- * 필요 없다). 그림 파일이라 코드에서 직접 읽지 못해 옮겨 적되, 원본과 어긋나지 않는지는
10
- * ihabOutlinePath.test.ts 가 대조한다.
4
+ * 이용권 카드 배경 둘(지금 것과 V1)이 이 글자를 각자 들고 있었다. 로고 모양은 바뀌면 함께
5
+ * 바뀌어야 하는데, 두 벌이면 한쪽만 새 모양이 되어 **화면마다 다른 로고**가 뜬다.
6
+ *
7
+ * 원본은 `src/logo/Symbol_IHAB.svg` 다. 그 파일의 path 는 **바깥 외곽 + 안쪽 구멍** 두 조각이
8
+ * 이어져 있고, 여기 옮겨 적은 것은 그중 **앞의 바깥 조각**뿐이다(배경으로 깔 때 구멍은 필요
9
+ * 없다). 그림 파일이라 코드에서 직접 못 읽어 옮겨 적되, 어긋나지 않는지는
10
+ * `test/ihabOutlinePath.test.ts` 가 **글자 그대로** 대조한다.
11
+ *
12
+ * **칸이 바뀌면 그리는 쪽도 바뀐다**(2026-10-15). 사장님이 로고를 새로 내시면서 viewBox 가
13
+ * 100 에서 240 으로 커졌다. 글자만 갈아 끼우면 **아무 오류 없이 2.4배로** 그려진다 —
14
+ * 그래서 칸 크기를 함께 내보내고 그리는 쪽이 그것으로 셈한다. 다음에 또 바뀌면 여기 둘만 고친다.
11
15
  */
12
- export declare const IHAB_OUTLINE_PATH: string;
16
+ export declare const IHAB_OUTLINE_PATH = "M190.71,49.29c-18.1-18.1-43.1-29.29-70.71-29.29s-34.94,28.87-53.03,46.97h0c-18.1,18.1-46.97,25.56-46.97,53.03s11.19,52.61,29.29,70.71c18.1,18.1,43.1,29.29,70.71,29.29s52.61-11.19,70.71-29.29c18.1-18.1,29.29-43.1,29.29-70.71s-11.19-52.61-29.29-70.71Z";
17
+ /** 위 path 가 사는 칸 — 원본 `viewBox` 와 같다. 그리는 쪽이 중심·배율을 이것으로 센다. */
18
+ export declare const IHAB_OUTLINE_BOX = 240;