fix: 장수일람 특기 설명 줄바꿈을 공통 처리한다

app/game-frontend/src/components/directory/DirectoryTooltip.vue

@@ -1,9 +1,14 @@
 <script setup lang="ts">
-defineProps<{
+import { computed } from 'vue';
+import { splitLegacyLineBreaks } from '../../utils/legacyDescription';
+
+const props = defineProps<{
     title: string;
     description?: string | null;
     testId?: string;
 }>();
+
+const descriptionLines = computed(() => splitLegacyLineBreaks(props.description ?? ''));
 </script>
 
 <template>
@@ -16,7 +21,10 @@ defineProps<{
         <slot />
         <span v-if="description" class="directory-tooltip__content" role="tooltip">
             <strong>{{ title }}</strong>
-            <span>{{ description }}</span>
+            <span class="directory-tooltip__description"
+                ><template v-for="(line, index) in descriptionLines" :key="index"
+                    >{{ line }}<br v-if="index < descriptionLines.length - 1" /></template
+            ></span>
         </span>
     </span>
 </template>

app/game-frontend/src/components/ui/RichTooltip.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, useSlots, watch } from 'vue';
+import { splitLegacyLineBreaks } from '../../utils/legacyDescription';
 import tippy, { type Instance, type Placement } from 'tippy.js';
 import 'tippy.js/dist/tippy.css';
 
@@ -28,7 +29,7 @@ let instance: Instance | null = null;
 const descriptionLines = computed(() => {
     const source = Array.isArray(props.description) ? props.description : [props.description ?? ''];
     return source
-        .flatMap((line) => line.split(/<br\s*\/?\s*>|\r?\n/giu))
+        .flatMap(splitLegacyLineBreaks)
         .map((line) => line.trim())
         .filter(Boolean);
 });

app/game-frontend/src/utils/legacyDescription.ts

@@ -0,0 +1,5 @@
+/**
+ * 카탈로그 설명의 Ref 줄바꿈만 해석한다. 반환값은 반드시 text interpolation으로
+ * 렌더링하며 HTML로 삽입하지 않는다. 빈 줄과 공백의 표시 정책은 소비자가 정한다.
+ */
+export const splitLegacyLineBreaks = (value: string): string[] => value.split(/<br\s*\/?\s*>|\r\n?|\n/giu);

app/game-frontend/src/views/InheritView.vue

@@ -4,6 +4,7 @@ import { usePageExit } from '../composables/usePageExit';
 import { formatServerDateTime } from '@sammo-ts/common/time/ServerDateTime';
 import { JosaUtil } from '@sammo-ts/common/util/JosaUtil';
 import { computed, onMounted, reactive, ref } from 'vue';
+import { splitLegacyLineBreaks } from '../utils/legacyDescription';
 import { trpc } from '../utils/trpc';
 import { useGameFeedback } from '../composables/useGameFeedback';
 
@@ -207,7 +208,6 @@ const specialNameMap = computed(() => {
     }
     return map;
 });
-const splitLegacyLineBreaks = (value: string): string[] => value.split(/<br\s*\/?\s*>|\r?\n/giu);
 const selectedSpecialWarInfo = computed(
     () => status.value?.availableSpecialWar.find((entry) => entry.key === nextSpecialKey.value)?.info ?? ''
 );