hyoseung/english-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: show today 10 words list on learn start screen
All checks were successful
Build and Deploy / build-and-deploy (push) Successful in 12s
Details

Browse Source
This commit is contained in:
deploy 2026-05-18 01:04:57 +00:00
parent 75036d3d82
commit 95ee186b52
1 changed files with 48 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
src/views/LearnView.vue
View File

@ -4,12 +4,28 @@
<div class="loading">단어 불러오는 중...</div> <div class="loading">단어 불러오는 중...</div>
</div> </div>
<div v-else-if="!started" class="card start-card"> <div v-else-if="!started" class="start-wrap">
<div style="font-size:4rem;margin-bottom:1rem">📖</div> <div class="card start-card">
<h2 style="margin-bottom:0.5rem">오늘의 단어 학습</h2> <div style="font-size:3rem;margin-bottom:0.75rem">📖</div>
<p style="color:#718096;margin-bottom:0.5rem">총 <strong>{{ words.length }}개</strong> 단어를 학습합니다</p> <h2 style="margin-bottom:0.3rem">오늘의 단어 학습</h2>
<p style="color:#a0aec0;font-size:0.85rem;margin-bottom:2rem">카드를 클릭하면 뜻이 나타납니다</p> <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" @click="start">학습 시작</button> <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>
<div v-else-if="!finished"> <div v-else-if="!finished">
@ -106,6 +122,12 @@ const badgeMap = {
words_500: { emoji: '👑', name: '단어 500' }, 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 let xpTimer = null
onMounted(async () => { onMounted(async () => {
@ -115,7 +137,6 @@ onMounted(async () => {
}) })
const start = () => { started.value = true } const start = () => { started.value = true }
const flip = () => { flipped.value = !flipped.value } const flip = () => { flipped.value = !flipped.value }
const showXp = (xp) => { const showXp = (xp) => {
@ -153,7 +174,26 @@ const prev = () => {
</script> </script>
<style scoped> <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; } .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; } .card-badges { position: absolute; top: 1rem; right: 1rem; display: flex; gap: 0.3rem; }