Commit @9edc4aa35dec4cff692e35a82090ee4673164984

정다정 2024-09-11

240911 정다정 대화지문 단어,문장 설명 추가

@9edc4aa35dec4cff692e35a82090ee4673164984

2504a47

9edc4aa

client/views/pages/main/Chapter/Chapter1_1.vue

--- client/views/pages/main/Chapter/Chapter1_1.vue

+++ client/views/pages/main/Chapter/Chapter1_1.vue


 <template>
-  <div id="Chapter1_1" 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">
-      <span class="title mr40">1. Hello WORLD</span>
-      <span class="subtitle">my name is dd</span>
-    </div>
-    <div class="flex justify-between align-center">
-      <div class="pre-btn" @click="goToPage('Chapter1')"><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="imgGroup">
-          <img src="../../../../resources/img/img35_s.png" data-num="1">
-
+    <div id="Chapter1_1" 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="textareaGroup">
-          <textarea>Bike lanes are important because they ket, bike riders and all other people safe. Before bike lanes, people rode on the sidewalk or in the same lanes as the cars on the street. Riding a bike on the sidewalk can cause you to crash into someone who is walking by. And riding a bike in the same lanes as cars can be unsafe, too, Bikes move more slowly than cars, so people driving behind bikes will try to go around them. These cars could hit the bike riders or other cars. </textarea>
-          <div id="popup" class="popup">
-            <div class="imgGroup mb10">
-              <img src="../../../../resources/img/img36_s.png" data-num="1">
+        <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>
-              <h3>sidewalk</h3>
-             <div class="flex align-center  justify-center mt10">
-                <p class="yellow-box">명</p>
-                <span class="title1">보도</span>
-             </div>
-          </div>
+            <div class="flex">
+                <TextToImage />
+                <button class="completeBtn" @click="complete">학습 종료</button>
+            </div>
         </div>
-      </div>
-      <div class="next-btn" @click="goToPage('Chapter1_2')"><img src="../../../../resources/img/right.png" alt=""></div>
+        <div class="flex justify-between align-center">
+            <div class="pre-btn" style="visibility: hidden" @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 align-center ml50 mb15" style="margin-top: -30px; gap: 10px">
+                    <h4>설명에 맞춰 영어 문장의 의미를 이해해봅시다. 대화문을 클릭해보세요!</h4>
+                    <div class="listen-btn">
+                        <img src="../../../../resources/img/btn10_s.png" alt="" @click="playAudio" />
+                        <audio
+                            id="audio-player"
+                            src="client/resources/audio/passage/passage_explanation.mp3"
+                            preload="auto"
+                        ></audio>
+                    </div>
+                </div>
+                <div class="flex justify-center" style="gap: 50px">
+                    <div class="readGroup">
+                        <div>
+                            <div class="textbox">
+                                <article
+                                    v-for="(line, index) in combinedLines"
+                                    :key="index"
+                                    :class="['flex', 'align-center', '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"
+                                        @click="handleSelectLine(line)"
+                                        :style="getStyle(line)"
+                                    >
+                                        {{ line }}
+                                    </p>
+
+                                    <p
+                                        v-if="index % 2 !== 0"
+                                        class="read mr40"
+                                        @click="handleSelectLine(line)"
+                                        :style="getStyle(line)"
+                                    >
+                                        {{ 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 class="button-box">
+                        <button class="word" @click="wordQuestion">단어 설명</button>
+                        <button class="passage" @click="passageQuestion">문장 설명</button>
+                    </div>
+                </div>
+            </div>
+            <div class="next-btn" @click="goToNextPage">
+                <img src="../../../../resources/img/right.png" alt="" />
+            </div>
+        </div>
+        <div class="popup-wrap" v-if="popupOpen">
+            <div class="popup-container flex-column">
+                <div class="popup-header flex align-center">
+                    <p>선생님의 한 마디</p>
+                    <img
+                        class="look-btn"
+                        @click="handlePopupClose"
+                        src="../../../../resources/img/btn25_93t_normal.png"
+                        alt=""
+                    />
+                </div>
+                <div>
+                    <p class="popup-content mt30" v-html="formattedExplanation"></p>
+                </div>
+            </div>
+        </div>
     </div>
-  </div>
 </template>
 
 <script>
+import TextToImage from '../../../component/TextToImage.vue';
+import axios from 'axios';
 export default {
-  data() {
-    return {
-    }
-  },
-  methods: {
-    goToPage(page) {
-      this.$router.push({ name: page });
-    }
-  },
-  watch: {
+    data() {
+        return {
+            text_data: null, // 받아온 지문 정보
+            speakerA_name: null,
+            speakerB_name: null,
+            speakerA: [],
+            speakerB: [],
 
-  },
-  computed: {
+            seq: this.$store.getters.seqNum,
+            selectedLine: null, // 선택한 지문
+            explanation_response: null, // 설명 응답
 
-  },
-  components: {
-  },
-  mounted() {
-    const textArea = this.$refs.textArea;
-      const popup = this.$refs.popup;
+            popupOpen: false,
+        };
+    },
+    methods: {
+        complete() {
+            const { unit_id, book_id } = this.$route.query;
+            this.$router.push({
+                name: 'Dashboard',
+                query: { value: this.seq, unit_id, book_id },
+            });
+        },
+        goToPage(page) {
+            this.$router.push({ name: page });
+        },
+        goToNextPage() {
+            alert('지문 학습 완료!');
+            this.complete();
+        },
+        // 대화 지문 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 = {};
 
-      textArea.addEventListener('mousemove', (event) => {
-         const text = textArea.value;
-         const words = text.split(' ');
-         const selectionStart = textArea.selectionStart;
-         const selectionEnd = textArea.selectionEnd;
+            lines.forEach((line) => {
+                const [speaker, message] = line.trim().split(':');
 
-         if (selectionStart !== selectionEnd) {
-            const selectedText = text.substring(selectionStart, selectionEnd);
-            const rect = textArea.getBoundingClientRect();
-            popup.style.left = `${event.clientX}px`;
-            popup.style.top = `${event.clientY + window.scrollY}px`;
-            popup.innerHTML = `You selected: ${selectedText}`;
-            popup.style.display = 'block';
-         } else {
-            popup.style.display = 'none';
-         }
-      });
+                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());
+                }
+            });
 
-      document.addEventListener('click', (event) => {
-         if (!textArea.contains(event.target) && !popup.contains(event.target)) {
-            popup.style.display = 'none';
-         }
-      });
-  }
+            this.speakerA_name = speakers.speakerA_name;
+            this.speakerB_name = speakers.speakerB_name;
+        },
+
+        playAudio() {
+            const audio = document.getElementById('audio-player');
+            audio.play();
+            console.log('playing');
+        },
+
+        // 검색할 지문 선택
+        handleSelectLine(line) {
+            this.selectedLine = line;
+            // console.log('선택된 지문 : ', this.selectedLine);
+        },
+
+        getStyle(line) {
+            return {
+                backgroundColor: this.selectedLine === line ? '#ffc980' : '',
+                fontSize: this.selectedLine === line ? '40px' : '',
+                boxShadow: this.selectedLine === line ? 'rgba(0, 0, 0, 0.24) 0px 3px 8px' : '',
+                fontWeight: this.selectedLine === line ? 'bold' : '',
+                cursour: 'pointer',
+            };
+        },
+
+        // 단어 설명
+        wordQuestion() {
+            // console.log('line : ', this.selectedLine);
+            if (this.selectedLine === null) {
+                alert('궁금한 대화문을 선택해주세요');
+                return;
+            }
+            axios({
+                url: 'http://165.229.169.32:35716/word_question',
+                method: 'post',
+                headers: {
+                    'Content-Type': 'application/json; charset=UTF-8',
+                },
+                data: {
+                    word: this.selectedLine,
+                },
+            })
+                .then((response) => {
+                    // console.log('word 지문 응답 : ', response.data.explanation);
+                    this.explanation_response = response.data.explanation;
+                    this.handlePopupOpen();
+                })
+                .catch((err) => {
+                    console.log('word 지문 에러 : ', err);
+                });
+        },
+
+        // 지문 설명
+        passageQuestion() {
+            // console.log('line : ', this.selectedLine);
+            if (this.selectedLine === null) {
+                alert('궁금한 대화문을 선택해주세요');
+                return;
+            }
+            axios({
+                url: 'http://165.229.169.32:35716/passage_question',
+                method: 'post',
+                headers: {
+                    'Content-Type': 'application/json; charset=UTF-8',
+                },
+                data: {
+                    passage: this.selectedLine,
+                },
+            })
+                .then((response) => {
+                    // console.log('passage 지문 응답 : ', response.data.explanation);
+                    this.explanation_response = response.data.explanation;
+                    this.handlePopupOpen();
+                })
+                .catch((err) => {
+                    console.log('passage 지문 에러 : ', err);
+                });
+        },
+
+        /* 팝업 */
+        handlePopupOpen() {
+            this.popupOpen = true;
+        },
+
+        handlePopupClose() {
+            this.popupOpen = false;
+            this.explanation_response = null;
+            this.selectedLine = null;
+        },
+    },
+    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;
+        },
+        // 지문 포맷팅
+        formattedExplanation() {
+            return this.explanation_response.replace(/\n/g, '<br>').replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
+        },
+    },
+    components: {
+        TextToImage: TextToImage,
+    },
+    mounted() {
+        this.fetchText();
+    },
+};
+</script>
+
+<style scoped>
+.completeBtn {
+    margin-right: 100px;
+    background-color: #ffba08;
+    padding: 10px 30px;
+    border-radius: 10px;
+    font-size: 28px;
+    font-family: 'ONEMobilePOPOTF';
 }
-</script>
+
+.button-box {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-evenly;
+}
+
+.button-box button {
+    font-family: 'ONEMobilePOPOTF';
+    font-size: 25px;
+    color: #fff;
+    padding: 20px 70px;
+    border-radius: 15px;
+    box-shadow: rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;
+}
+
+.word {
+    background-color: #28b863;
+}
+
+.passage {
+    background-color: #9528b7;
+}
+
+.popup-container {
+    background-color: #fff;
+    position: absolute;
+    width: 120rem;
+    height: 60rem;
+    padding: 30px;
+    border-radius: 10px;
+    top: 25rem;
+    left: 40rem;
+    overflow: scroll;
+    overflow-x: hidden;
+}
+
+.popup-header {
+    justify-content: space-between;
+}
+
+.popup-header p {
+    font-size: 30px;
+    font-family: 'ONEMobilePOPOTF';
+    color: #6327b9;
+}
+
+.popup-content {
+    font-size: 24px;
+    padding: 20px;
+}
+</style>

2504a47

9edc4aa

client/views/pages/main/Chapter/Chapter1_2.vue

--- client/views/pages/main/Chapter/Chapter1_2.vue

+++ client/views/pages/main/Chapter/Chapter1_2.vue


             this.$router.push({ name: page });
         },
         goToNextPage() {
-            alert('지문 학습 완료!');
+            // alert('지문 학습 완료!');
             this.complete();
+            this.goToPage('Chapter1_1');
         },
         // 대화 지문 API
         async fetchText() {

Add a comment

Open 0
Closed 0

List

...	...	@@ -110,8 +110,9 @@
110	110	this.$router.push({ name: page });
111	111	},
112	112	goToNextPage() {
113		- alert('지문 학습 완료!');
	113	+ // alert('지문 학습 완료!');
114	114	this.complete();
	115	+ this.goToPage('Chapter1_1');
115	116	},
116	117	// 대화 지문 API
117	118	async fetchText() {

...	...	@@ -1,88 +1,373 @@
1	1	<template>
2		- <div id="Chapter1_1" class="content-wrap">
3		- <div style="margin: 30px 0px 50px; width: 20%">
4		- <router-link to="/MyPlan.page">
5		- <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div>
6		- </router-link>
7		- </div>
8		- <div class="title-box mb25 flex align-center mt40">
9		- <span class="title mr40">1. Hello WORLD</span>
10		- <span class="subtitle">my name is dd</span>
11		- </div>
12		- <div class="flex justify-between align-center">
13		- <div class="pre-btn" @click="goToPage('Chapter1')"><img src="../../../../resources/img/left.png" alt=""></div>
14		- <div class="content title-box">
15		- <p class="title mt25 title-bg">step1. Hello WORLD</p>
16		-
17		- <div class="imgGroup">
18		- <img src="../../../../resources/img/img35_s.png" data-num="1">
19		-
	2	+ <div id="Chapter1_1" class="content-wrap">
	3	+ <div style="margin: 30px 0px 50px; width: 20%">
	4	+ <router-link to="/MyPlan.page">
	5	+ <div class="logo mb25">
	6	+ <img src="../../../../resources/img/logo2.png" alt="" />
	7	+ </div>
	8	+ </router-link>
20	9	</div>
21		- <div class="textareaGroup">
22		- <textarea>Bike lanes are important because they ket, bike riders and all other people safe. Before bike lanes, people rode on the sidewalk or in the same lanes as the cars on the street. Riding a bike on the sidewalk can cause you to crash into someone who is walking by. And riding a bike in the same lanes as cars can be unsafe, too, Bikes move more slowly than cars, so people driving behind bikes will try to go around them. These cars could hit the bike riders or other cars. </textarea>
23		- <div id="popup" class="popup">
24		- <div class="imgGroup mb10">
25		- <img src="../../../../resources/img/img36_s.png" data-num="1">
	10	+ <div class="title-box mb25 flex align-center mt40" style="justify-content: space-between">
	11	+ <div>
	12	+ <span class="title mr40">1. Hello WORLD</span>
	13	+ <span class="subtitle">my name is dd</span>
26	14	</div>
27		- <h3>sidewalk</h3>
28		- <div class="flex align-center justify-center mt10">
29		- <p class="yellow-box">명</p>
30		- <span class="title1">보도</span>
31		- </div>
32		- </div>
	15	+ <div class="flex">
	16	+ <TextToImage />
	17	+ <button class="completeBtn" @click="complete">학습 종료</button>
	18	+ </div>
33	19	</div>
34		- </div>
35		- <div class="next-btn" @click="goToPage('Chapter1_2')"><img src="../../../../resources/img/right.png" alt=""></div>
	20	+ <div class="flex justify-between align-center">
	21	+ <div class="pre-btn" style="visibility: hidden" @click="goToPage('Chapter1_1')">
	22	+ <img src="../../../../resources/img/left.png" alt="" />
	23	+ </div>
	24	+ <div class="content title-box">
	25	+ <p class="title mt25 title-bg">step1. Hello WORLD</p>
	26	+ <div class="flex align-center ml50 mb15" style="margin-top: -30px; gap: 10px">
	27	+ <h4>설명에 맞춰 영어 문장의 의미를 이해해봅시다. 대화문을 클릭해보세요!</h4>
	28	+ <div class="listen-btn">
	29	+ <img src="../../../../resources/img/btn10_s.png" alt="" @click="playAudio" />
	30	+ <audio
	31	+ id="audio-player"
	32	+ src="client/resources/audio/passage/passage_explanation.mp3"
	33	+ preload="auto"
	34	+ ></audio>
	35	+ </div>
	36	+ </div>
	37	+ <div class="flex justify-center" style="gap: 50px">
	38	+ <div class="readGroup">
	39	+ <div>
	40	+ <div class="textbox">
	41	+ <article
	42	+ v-for="(line, index) in combinedLines"
	43	+ :key="index"
	44	+ :class="['flex', 'align-center', 'mb10', { 'justify-end': index % 2 !== 0 }]"
	45	+ >
	46	+ <div v-if="index % 2 === 0" class="icon mr40">
	47	+ <img src="../../../../resources/img/img37_s.png" alt="" />
	48	+ <p class="name">{{ speakerA_name }}</p>
	49	+ </div>
	50	+ <p
	51	+ v-if="index % 2 === 0"
	52	+ class="read"
	53	+ @click="handleSelectLine(line)"
	54	+ :style="getStyle(line)"
	55	+ >
	56	+ {{ line }}
	57	+ </p>
	58	+
	59	+ <p
	60	+ v-if="index % 2 !== 0"
	61	+ class="read mr40"
	62	+ @click="handleSelectLine(line)"
	63	+ :style="getStyle(line)"
	64	+ >
	65	+ {{ line }}
	66	+ </p>
	67	+ <div v-if="index % 2 !== 0" class="icon">
	68	+ <img src="../../../../resources/img/img37_s.png" alt="" />
	69	+ <p class="name">{{ speakerB_name }}</p>
	70	+ </div>
	71	+ </article>
	72	+ </div>
	73	+ </div>
	74	+ </div>
	75	+ <div class="button-box">
	76	+ <button class="word" @click="wordQuestion">단어 설명</button>
	77	+ <button class="passage" @click="passageQuestion">문장 설명</button>
	78	+ </div>
	79	+ </div>
	80	+ </div>
	81	+ <div class="next-btn" @click="goToNextPage">
	82	+ <img src="../../../../resources/img/right.png" alt="" />
	83	+ </div>
	84	+ </div>
	85	+ <div class="popup-wrap" v-if="popupOpen">
	86	+ <div class="popup-container flex-column">
	87	+ <div class="popup-header flex align-center">
	88	+ <p>선생님의 한 마디</p>
	89	+ <img
	90	+ class="look-btn"
	91	+ @click="handlePopupClose"
	92	+ src="../../../../resources/img/btn25_93t_normal.png"
	93	+ alt=""
	94	+ />
	95	+ </div>
	96	+ <div>
	97	+ <p class="popup-content mt30" v-html="formattedExplanation"></p>
	98	+ </div>
	99	+ </div>
	100	+ </div>
36	101	</div>
37		- </div>
38	102	</template>
39	103
40	104	<script>
	105	+import TextToImage from '../../../component/TextToImage.vue';
	106	+import axios from 'axios';
41	107	export default {
42		- data() {
43		- return {
44		- }
45		- },
46		- methods: {
47		- goToPage(page) {
48		- this.$router.push({ name: page });
49		- }
50		- },
51		- watch: {
	108	+ data() {
	109	+ return {
	110	+ text_data: null, // 받아온 지문 정보
	111	+ speakerA_name: null,
	112	+ speakerB_name: null,
	113	+ speakerA: [],
	114	+ speakerB: [],
52	115
53		- },
54		- computed: {
	116	+ seq: this.$store.getters.seqNum,
	117	+ selectedLine: null, // 선택한 지문
	118	+ explanation_response: null, // 설명 응답
55	119
56		- },
57		- components: {
58		- },
59		- mounted() {
60		- const textArea = this.$refs.textArea;
61		- const popup = this.$refs.popup;
	120	+ popupOpen: false,
	121	+ };
	122	+ },
	123	+ methods: {
	124	+ complete() {
	125	+ const { unit_id, book_id } = this.$route.query;
	126	+ this.$router.push({
	127	+ name: 'Dashboard',
	128	+ query: { value: this.seq, unit_id, book_id },
	129	+ });
	130	+ },
	131	+ goToPage(page) {
	132	+ this.$router.push({ name: page });
	133	+ },
	134	+ goToNextPage() {
	135	+ alert('지문 학습 완료!');
	136	+ this.complete();
	137	+ },
	138	+ // 대화 지문 API
	139	+ async fetchText() {
	140	+ axios({
	141	+ url: '/text/selectOneText.json',
	142	+ method: 'post',
	143	+ headers: {
	144	+ 'Content-Type': 'application/json; charset=UTF-8',
	145	+ },
	146	+ data: {
	147	+ textId: this.textId,
	148	+ },
	149	+ })
	150	+ .then((response) => {
	151	+ this.text_data = response.data[0].text_cnt;
	152	+ this.splitConversation();
	153	+ })
	154	+ .catch((err) => {
	155	+ console.log('지문 에러 : ', err);
	156	+ });
	157	+ },
	158	+ // 대화 지문 split
	159	+ splitConversation() {
	160	+ const lines = this.text_data.split('/');
	161	+ const speakers = {};
62	162
63		- textArea.addEventListener('mousemove', (event) => {
64		- const text = textArea.value;
65		- const words = text.split(' ');
66		- const selectionStart = textArea.selectionStart;
67		- const selectionEnd = textArea.selectionEnd;
	163	+ lines.forEach((line) => {
	164	+ const [speaker, message] = line.trim().split(':');
68	165
69		- if (selectionStart !== selectionEnd) {
70		- const selectedText = text.substring(selectionStart, selectionEnd);
71		- const rect = textArea.getBoundingClientRect();
72		- popup.style.left = `${event.clientX}px`;
73		- popup.style.top = `${event.clientY + window.scrollY}px`;
74		- popup.innerHTML = `You selected: ${selectedText}`;
75		- popup.style.display = 'block';
76		- } else {
77		- popup.style.display = 'none';
78		- }
79		- });
	166	+ if (!speakers.speakerA_name && !speakers.speakerB_name) {
	167	+ // 첫 번째 발화자를 speakerA_name으로 설정
	168	+ speakers.speakerA_name = speaker.trim();
	169	+ this.speakerA.push(message.trim());
	170	+ } else if (
	171	+ speakers.speakerA_name &&
	172	+ !speakers.speakerB_name &&
	173	+ speakers.speakerA_name !== speaker.trim()
	174	+ ) {
	175	+ // 두 번째 발화자를 speakerB_name으로 설정
	176	+ speakers.speakerB_name = speaker.trim();
	177	+ this.speakerB.push(message.trim());
	178	+ } else if (speaker.trim() === speakers.speakerA_name) {
	179	+ // speakerA_name에 내용 추가
	180	+ this.speakerA.push(message.trim());
	181	+ } else if (speaker.trim() === speakers.speakerB_name) {
	182	+ // speakerB_name에 내용 추가
	183	+ this.speakerB.push(message.trim());
	184	+ }
	185	+ });
80	186
81		- document.addEventListener('click', (event) => {
82		- if (!textArea.contains(event.target) && !popup.contains(event.target)) {
83		- popup.style.display = 'none';
84		- }
85		- });
86		- }
	187	+ this.speakerA_name = speakers.speakerA_name;
	188	+ this.speakerB_name = speakers.speakerB_name;
	189	+ },
	190	+
	191	+ playAudio() {
	192	+ const audio = document.getElementById('audio-player');
	193	+ audio.play();
	194	+ console.log('playing');
	195	+ },
	196	+
	197	+ // 검색할 지문 선택
	198	+ handleSelectLine(line) {
	199	+ this.selectedLine = line;
	200	+ // console.log('선택된 지문 : ', this.selectedLine);
	201	+ },
	202	+
	203	+ getStyle(line) {
	204	+ return {
	205	+ backgroundColor: this.selectedLine === line ? '#ffc980' : '',
	206	+ fontSize: this.selectedLine === line ? '40px' : '',
	207	+ boxShadow: this.selectedLine === line ? 'rgba(0, 0, 0, 0.24) 0px 3px 8px' : '',
	208	+ fontWeight: this.selectedLine === line ? 'bold' : '',
	209	+ cursour: 'pointer',
	210	+ };
	211	+ },
	212	+
	213	+ // 단어 설명
	214	+ wordQuestion() {
	215	+ // console.log('line : ', this.selectedLine);
	216	+ if (this.selectedLine === null) {
	217	+ alert('궁금한 대화문을 선택해주세요');
	218	+ return;
	219	+ }
	220	+ axios({
	221	+ url: 'http://165.229.169.32:35716/word_question',
	222	+ method: 'post',
	223	+ headers: {
	224	+ 'Content-Type': 'application/json; charset=UTF-8',
	225	+ },
	226	+ data: {
	227	+ word: this.selectedLine,
	228	+ },
	229	+ })
	230	+ .then((response) => {
	231	+ // console.log('word 지문 응답 : ', response.data.explanation);
	232	+ this.explanation_response = response.data.explanation;
	233	+ this.handlePopupOpen();
	234	+ })
	235	+ .catch((err) => {
	236	+ console.log('word 지문 에러 : ', err);
	237	+ });
	238	+ },
	239	+
	240	+ // 지문 설명
	241	+ passageQuestion() {
	242	+ // console.log('line : ', this.selectedLine);
	243	+ if (this.selectedLine === null) {
	244	+ alert('궁금한 대화문을 선택해주세요');
	245	+ return;
	246	+ }
	247	+ axios({
	248	+ url: 'http://165.229.169.32:35716/passage_question',
	249	+ method: 'post',
	250	+ headers: {
	251	+ 'Content-Type': 'application/json; charset=UTF-8',
	252	+ },
	253	+ data: {
	254	+ passage: this.selectedLine,
	255	+ },
	256	+ })
	257	+ .then((response) => {
	258	+ // console.log('passage 지문 응답 : ', response.data.explanation);
	259	+ this.explanation_response = response.data.explanation;
	260	+ this.handlePopupOpen();
	261	+ })
	262	+ .catch((err) => {
	263	+ console.log('passage 지문 에러 : ', err);
	264	+ });
	265	+ },
	266	+
	267	+ /* 팝업 */
	268	+ handlePopupOpen() {
	269	+ this.popupOpen = true;
	270	+ },
	271	+
	272	+ handlePopupClose() {
	273	+ this.popupOpen = false;
	274	+ this.explanation_response = null;
	275	+ this.selectedLine = null;
	276	+ },
	277	+ },
	278	+ watch: {},
	279	+ computed: {
	280	+ textId() {
	281	+ //console.log("지문 화면 아이디 : ", this.$store.getters.getTextId);
	282	+ return this.$store.getters.getTextId;
	283	+ },
	284	+ combinedLines() {
	285	+ const maxLength = Math.max(this.speakerA.length, this.speakerB.length);
	286	+ const lines = [];
	287	+
	288	+ for (let i = 0; i < maxLength; i++) {
	289	+ if (i < this.speakerA.length) {
	290	+ lines.push(this.speakerA[i]);
	291	+ }
	292	+ if (i < this.speakerB.length) {
	293	+ lines.push(this.speakerB[i]);
	294	+ }
	295	+ }
	296	+ return lines;
	297	+ },
	298	+ // 지문 포맷팅
	299	+ formattedExplanation() {
	300	+ return this.explanation_response.replace(/\n/g, '<br>').replace(/\\(.?)\\*/g, '<strong>$1</strong>');
	301	+ },
	302	+ },
	303	+ components: {
	304	+ TextToImage: TextToImage,
	305	+ },
	306	+ mounted() {
	307	+ this.fetchText();
	308	+ },
	309	+};
	310	+</script>
	311	+
	312	+<style scoped>
	313	+.completeBtn {
	314	+ margin-right: 100px;
	315	+ background-color: #ffba08;
	316	+ padding: 10px 30px;
	317	+ border-radius: 10px;
	318	+ font-size: 28px;
	319	+ font-family: 'ONEMobilePOPOTF';
87	320	}
88		-</script> (No newline at end of file)
	321	+
	322	+.button-box {
	323	+ display: flex;
	324	+ flex-direction: column;
	325	+ align-items: center;
	326	+ justify-content: space-evenly;
	327	+}
	328	+
	329	+.button-box button {
	330	+ font-family: 'ONEMobilePOPOTF';
	331	+ font-size: 25px;
	332	+ color: #fff;
	333	+ padding: 20px 70px;
	334	+ border-radius: 15px;
	335	+ box-shadow: rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;
	336	+}
	337	+
	338	+.word {
	339	+ background-color: #28b863;
	340	+}
	341	+
	342	+.passage {
	343	+ background-color: #9528b7;
	344	+}
	345	+
	346	+.popup-container {
	347	+ background-color: #fff;
	348	+ position: absolute;
	349	+ width: 120rem;
	350	+ height: 60rem;
	351	+ padding: 30px;
	352	+ border-radius: 10px;
	353	+ top: 25rem;
	354	+ left: 40rem;
	355	+ overflow: scroll;
	356	+ overflow-x: hidden;
	357	+}
	358	+
	359	+.popup-header {
	360	+ justify-content: space-between;
	361	+}
	362	+
	363	+.popup-header p {
	364	+ font-size: 30px;
	365	+ font-family: 'ONEMobilePOPOTF';
	366	+ color: #6327b9;
	367	+}
	368	+
	369	+.popup-content {
	370	+ font-size: 24px;
	371	+ padding: 20px;
	372	+}
	373	+</style>

Delete comment