diff --git a/index.css b/index.css index a9aad74..1a289c6 100644 --- a/index.css +++ b/index.css @@ -2457,6 +2457,27 @@ letter-spacing: -0.006em; white-space: pre-line; flex: 1; + margin: 0; +} + +.comp2-lyrics-paragraphs { + display: flex; + flex-direction: column; + gap: 1rem; + flex: 1; +} + +.comp2-lyrics-para-section { + display: flex; + flex-direction: column; + gap: 0.3rem; +} + +.comp2-lyrics-tag { + font-size: 12px; + font-weight: 700; + color: #379599; + letter-spacing: 0.05em; } /* 소셜 연결 섹션 */ diff --git a/src/pages/Dashboard/CompletionContent.tsx b/src/pages/Dashboard/CompletionContent.tsx index 66de911..9315678 100755 --- a/src/pages/Dashboard/CompletionContent.tsx +++ b/src/pages/Dashboard/CompletionContent.tsx @@ -483,11 +483,31 @@ const CompletionContent: React.FC = ({
{t('completion.lyrics')} -

- {songCompletionData - ? (songCompletionData.lyrics || t('completion.noLyricsBGM')) - : t('completion.sampleLyrics')} -

+ {(() => { + const lyricsText = songCompletionData + ? (songCompletionData.lyrics || '') + : t('completion.sampleLyrics'); + if (!songCompletionData?.lyrics) { + return

{lyricsText}

; + } + const lines = lyricsText.split('\n').filter((l: string) => l.trim()); + const size = Math.ceil(lines.length / 3); + const sections = [ + { tag: '[Verse]', lines: lines.slice(0, size) }, + { tag: '[Chorus]', lines: lines.slice(size, size * 2) }, + { tag: '[Outro]', lines: lines.slice(size * 2) }, + ].filter(s => s.lines.length > 0); + return ( +
+ {sections.map((section, i) => ( +
+ {section.tag} +

{section.lines.join('\n')}

+
+ ))} +
+ ); + })()}