<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>