File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<div id="Chapter1_2" class="content-wrap">
<div style="margin: 30px 0px 50px; width: 20%">
<router-link to="/MyPlan.page">
<div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt="" /></div>
</router-link>
</div>
<div class="title-box mb25 flex align-center mt40" style="justify-content: space-between">
<div>
<span class="title mr40">1. Hello WORLD</span>
<span class="subtitle">my name is dd</span>
</div>
<button class="completeBtn" @click="complete">학습 종료</button>
</div>
<div class="flex justify-between align-center">
<div class="pre-btn" @click="goToPage('Chapter1_1')"><img src="../../../../resources/img/left.png" alt="" /></div>
<div class="content title-box">
<p class="title mt25 title-bg">step1. Hello WORLD</p>
<div class="flex justify-center">
<div class="readGroup">
<h4>각 인물들의 대화를 집중해서 읽어보세요</h4>
<div>
<div class="textbox">
<article v-for="(line, index) in combinedLines" :key="index" :class="['flex', 'align-start', 'mb10', { 'justify-end': index % 2 !== 0 }]">
<div v-if="index % 2 === 0" class="icon mr40">
<img src="../../../../resources/img/img37_s.png" alt="" />
<p class="name">{{ speakerA_name }}</p>
</div>
<p v-if="index % 2 === 0" class="read">{{ line }}</p>
<p v-if="index % 2 !== 0" class="read mr40">{{ line }}</p>
<div v-if="index % 2 !== 0" class="icon">
<img src="../../../../resources/img/img37_s.png" alt="" />
<p class="name">{{ speakerB_name }}</p>
</div>
</article>
</div>
</div>
</div>
</div>
</div>
<div class="next-btn" @click="goToPage('Chapter1_3')"><img src="../../../../resources/img/right.png" alt="" /></div>
</div>
<TextToImage />
</div>
</template>
<script>
import TextToImage from "../../../component/TextToImage.vue";
import axios from "axios";
export default {
data() {
return {
text_data: null, // 받아온 지문 정보
speakerA_name: null,
speakerB_name: null,
speakerA: [],
speakerB: [],
};
},
methods: {
complete() {
const { unit_id, book_id } = this.$route.query;
this.$router.push({ name: "Dashboard", query: { value: 1, unit_id, book_id } });
},
goToPage(page) {
this.$router.push({ name: page });
},
// 대화 지문 API
async fetchText() {
axios({
url: "/text/selectOneText.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: {
textId: this.textId,
},
})
.then((response) => {
this.text_data = response.data[0].text_cnt;
this.splitConversation();
})
.catch((err) => {
console.log("지문 에러 : ", err);
});
},
// 대화 지문 split
splitConversation() {
const lines = this.text_data.split("/");
const speakers = {};
lines.forEach((line) => {
const [speaker, message] = line.trim().split(":");
if (!speakers.speakerA_name && !speakers.speakerB_name) {
// 첫 번째 발화자를 speakerA_name으로 설정
speakers.speakerA_name = speaker.trim();
this.speakerA.push(message.trim());
} else if (speakers.speakerA_name && !speakers.speakerB_name && speakers.speakerA_name !== speaker.trim()) {
// 두 번째 발화자를 speakerB_name으로 설정
speakers.speakerB_name = speaker.trim();
this.speakerB.push(message.trim());
} else if (speaker.trim() === speakers.speakerA_name) {
// speakerA_name에 내용 추가
this.speakerA.push(message.trim());
} else if (speaker.trim() === speakers.speakerB_name) {
// speakerB_name에 내용 추가
this.speakerB.push(message.trim());
}
});
this.speakerA_name = speakers.speakerA_name;
this.speakerB_name = speakers.speakerB_name;
},
},
watch: {},
computed: {
textId() {
//console.log("지문 화면 아이디 : ", this.$store.getters.getTextId);
return this.$store.getters.getTextId;
},
combinedLines() {
const maxLength = Math.max(this.speakerA.length, this.speakerB.length);
const lines = [];
for (let i = 0; i < maxLength; i++) {
if (i < this.speakerA.length) {
lines.push(this.speakerA[i]);
}
if (i < this.speakerB.length) {
lines.push(this.speakerB[i]);
}
}
return lines;
},
},
components: {
TextToImage: TextToImage,
},
mounted() {
this.fetchText();
},
};
</script>
<style>
.completeBtn {
margin-right: 100px;
background-color: #ffba08;
padding: 10px 30px;
border-radius: 10px;
font-size: 28px;
font-family: "ONEMobilePOPOTF";
}
</style>