가사 노출 형식 변경

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;
 }
 
 /* 소셜 연결 섹션 */

src/pages/Dashboard/CompletionContent.tsx

@@ -483,11 +483,31 @@ const CompletionContent: React.FC<CompletionContentProps> = ({
                   <div className="comp2-meta-divider"></div>
                   <div className="comp2-lyrics-section">
                     <span className="comp2-meta-label">{t('completion.lyrics')}</span>
-                    <p className="comp2-lyrics-text">
+                    {(() => {
-                      {songCompletionData
+                      const lyricsText = songCompletionData
-                        ? (songCompletionData.lyrics || t('completion.noLyricsBGM'))
+                        ? (songCompletionData.lyrics || '')
-                        : t('completion.sampleLyrics')}
+                        : t('completion.sampleLyrics');
-                    </p>
+                      if (!songCompletionData?.lyrics) {
+                        return <p className="comp2-lyrics-text">{lyricsText}</p>;
+                      }
+                      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 (
+                        <div className="comp2-lyrics-paragraphs">
+                          {sections.map((section, i) => (
+                            <div key={i} className="comp2-lyrics-para-section">
+                              <span className="comp2-lyrics-tag">{section.tag}</span>
+                              <p className="comp2-lyrics-text">{section.lines.join('\n')}</p>
+                            </div>
+                          ))}
+                        </div>
+                      );
+                    })()}
                   </div>
                 </div>
               </div>