From 95ee186b5237cbbaa8af52295c4d571d81682f01 Mon Sep 17 00:00:00 2001
From: deploy <deploy@wageulwageul.com>
Date: Mon, 18 May 2026 01:04:57 +0000
Subject: [PATCH] feat: show today 10 words list on learn start screen

---
 src/views/LearnView.vue | 56 +++++++++++++++++++++++++++++++++++------
 1 file changed, 48 insertions(+), 8 deletions(-)

diff --git a/src/views/LearnView.vue b/src/views/LearnView.vue
index d2f3afb..b167eec 100644
--- a/src/views/LearnView.vue
+++ b/src/views/LearnView.vue
@@ -4,12 +4,28 @@
       <div class="loading">단어 불러오는 중...</div>
     </div>
 
-    <div v-else-if="!started" class="card start-card">
-      <div style="font-size:4rem;margin-bottom:1rem">📖</div>
-      <h2 style="margin-bottom:0.5rem">오늘의 단어 학습</h2>
-      <p style="color:#718096;margin-bottom:0.5rem">총 <strong>{{ words.length }}개</strong> 단어를 학습합니다</p>
-      <p style="color:#a0aec0;font-size:0.85rem;margin-bottom:2rem">카드를 클릭하면 뜻이 나타납니다</p>
-      <button class="btn btn-primary" style="font-size:1rem;padding:0.8rem 2.5rem" @click="start">학습 시작</button>
+    <div v-else-if="!started" class="start-wrap">
+      <div class="card start-card">
+        <div style="font-size:3rem;margin-bottom:0.75rem">📖</div>
+        <h2 style="margin-bottom:0.3rem">오늘의 단어 학습</h2>
+        <p style="color:#718096;margin-bottom:1.5rem;font-size:0.9rem">오늘의 단어 <strong>{{ words.length }}개</strong>를 학습합니다</p>
+        <button class="btn btn-primary" style="font-size:1rem;padding:0.8rem 2.5rem;width:100%" @click="start">학습 시작</button>
+      </div>
+
+      <div class="card" style="padding:1.2rem">
+        <h3 style="font-size:0.95rem;color:#4a5568;margin-bottom:1rem">오늘의 단어 10개</h3>
+        <div class="today-word-list">
+          <div v-for="(word, idx) in words" :key="word.id" class="today-word-item">
+            <span class="today-word-num">{{ idx + 1 }}</span>
+            <div class="today-word-body">
+              <div class="today-word-en">{{ word.english }}</div>
+              <div v-if="word.pronunciation" class="today-word-pron">[{{ word.pronunciation }}]</div>
+            </div>
+            <div class="today-word-ko">{{ word.korean }}</div>
+            <span class="badge" :class="diffBadge(word.difficulty)">{{ word.difficulty }}</span>
+          </div>
+        </div>
+      </div>
     </div>
 
     <div v-else-if="!finished">
@@ -106,6 +122,12 @@ const badgeMap = {
   words_500: { emoji: '👑', name: '단어 500' },
 }
 
+const diffBadge = (d) => {
+  if (d === 'beginner') return 'badge-green'
+  if (d === 'advanced') return 'badge-purple'
+  return 'badge-blue'
+}
+
 let xpTimer = null
 
 onMounted(async () => {
@@ -115,7 +137,6 @@ onMounted(async () => {
 })
 
 const start = () => { started.value = true }
-
 const flip = () => { flipped.value = !flipped.value }
 
 const showXp = (xp) => {
@@ -153,7 +174,26 @@ const prev = () => {
 </script>
 
 <style scoped>
-.start-card { text-align: center; padding: 3rem; }
+.start-wrap { display: flex; flex-direction: column; gap: 1rem; }
+.start-card { text-align: center; padding: 2rem; }
+
+.today-word-list { display: flex; flex-direction: column; gap: 0.6rem; }
+.today-word-item {
+  display: flex; align-items: center; gap: 0.75rem;
+  padding: 0.6rem 0.8rem; border-radius: 10px;
+  background: #f7fafc; border: 1px solid #e2e8f0;
+}
+.today-word-num {
+  width: 22px; height: 22px; border-radius: 50%;
+  background: linear-gradient(135deg, #667eea, #764ba2);
+  color: white; font-size: 0.72rem; font-weight: 700;
+  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
+}
+.today-word-body { flex: 1; min-width: 0; }
+.today-word-en { font-weight: 700; font-size: 0.95rem; color: #2d3748; }
+.today-word-pron { font-size: 0.72rem; color: #a0aec0; }
+.today-word-ko { font-size: 0.88rem; color: #4a5568; flex-shrink: 0; }
+
 .progress-bar-fill { height: 100%; background: linear-gradient(90deg, #48bb78, #38a169); border-radius: 99px; transition: width 0.4s; }
 .card-badges { position: absolute; top: 1rem; right: 1rem; display: flex; gap: 0.3rem; }