From 0a055a605cb2dd0042a3aa64eeea114b05c9ddd4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EC=84=B1=EA=B2=BD?= <skkim@o2o.kr>
Date: Tue, 12 May 2026 15:43:55 +0900
Subject: [PATCH] =?UTF-8?q?=EA=B0=80=EC=82=AC=20=EB=85=B8=EC=B6=9C=20?=
 =?UTF-8?q?=ED=98=95=EC=8B=9D=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.css                                 | 21 ++++++++++++++++
 src/pages/Dashboard/CompletionContent.tsx | 30 +++++++++++++++++++----
 2 files changed, 46 insertions(+), 5 deletions(-)

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<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
-                        ? (songCompletionData.lyrics || t('completion.noLyricsBGM'))
-                        : t('completion.sampleLyrics')}
-                    </p>
+                    {(() => {
+                      const lyricsText = songCompletionData
+                        ? (songCompletionData.lyrics || '')
+                        : t('completion.sampleLyrics');
+                      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>