Commit @c60ea9b63fca2e1da68e98fbfb5201a9efd9e27d

정다정 2024-09-11

240911 정다정 그림생성 검색바로 변경

@c60ea9b63fca2e1da68e98fbfb5201a9efd9e27d

c60ea9b

client/resources/img/new_img/icon/search-icon.png (Binary) (added)

+++ client/resources/img/new_img/icon/search-icon.png

Binary file is not shown

9771f7c

c60ea9b

client/views/component/TextToImage.vue

--- client/views/component/TextToImage.vue

+++ client/views/component/TextToImage.vue


 <template>
-    <div class="flex justify-center align-center" style="margin-top : 30px">
-        <div class="content title-box aibox">
-            <p class="title mt25 title-bg">모르는 단어를 물어봐~!</p>
-            <div class="propmt-container">
-                <div class="input-conatiner">
-                    <input v-model="word" @keyup.enter="startProgress(word)"/>
-                    <button @click="startProgress(word)"> <p> 생성하기 </p> </button>
+    <div class="flex justify-center align-center">
+        <div class="propmt-container">
+            <div class="input-conatiner">
+                <input v-model="word" @keyup.enter="startProgress(word)" />
+                <button @click="startProgress(word)">
+                    <img src="../../resources/img/new_img/icon/search-icon.png" style="width: 52px" />
+                </button>
+            </div>
+        </div>
+        <div class="modal-container flex" v-if="!modalClose">
+            <div class="progress-container" v-if="progressWidth < 100 && progressWidth > 1">
+                <div class="progress-bar" :style="{ width: progressWidth + '%' }">{{ Math.floor(progressWidth) }}%</div>
+                <!-- 로딩 이미지 -->
+                <div class="loading-container">
+                    <img src="../../resources/img/jumpingRabbit.gif" alt="Loading" class="loading-gif" />
+                    <p>잠깐만 기다려봐~</p>
                 </div>
-                <div class="progress-container">
-                    <div class="progress-bar" :style="{ width: progressWidth + '%' }">{{ Math.floor(progressWidth) }}%</div>
-                    
-                    <!-- 로딩 이미지 -->
-                    <div v-if="progressWidth < 100 && progressWidth > 1" class="loading-container">
-                        <img src="../../resources/img/jumpingRabbit.gif" alt="Loading" class="loading-gif"/>
-                        <p> 잠깐만 기다려봐~ </p>
-                    </div>
-
-                </div>
-                <div v-if="visibleWord" class="result-container">
-                    <img :src="imageSrc"/>
+            </div>
+            <div v-if="visibleWord" class="result-container">
+                <div class="flex align-center modal-box">
+                    <img :src="imageSrc" />
                     <div class="word-container">
-                        <h2> {{ inputWord }}  </h2>
+                        <h2>{{ inputWord }}</h2>
                     </div>
                 </div>
+                <button @click="handleModalClose">
+                    <img src="../../resources/img/btn25_93t_normal.png" alt="" style="width: auto" />
+                </button>
             </div>
         </div>
     </div>
-    
 </template>
 
 <script>

     data() {
         return {
             progressWidth: 0,
-            inputWord : "",
+            inputWord: '',
 
-            // 하드 코딩 -> 수정 필요 : API
-            word : "",
-            imageSrc : "",
+            word: '',
+            imageSrc: '',
             imageData: null, // 서버에서 받아온 이미지 데이터 저장
 
-            visibleWord : false,
+            visibleWord: false,
+            modalClose: true, // 초기 상태 === 닫힘
         };
     },
-    mounted() {
-        
-    },
+    mounted() {},
     methods: {
         // 상태 진행 바(progress bar)
         startProgress(word) {
+            this.modalClose = false;
+
             if (this.progressWidth == 100) {
                 this.resetProgress();
             }

                     clearInterval(progressInterval);
                     this.visibleWord = true;
 
-                     // 진행이 완료된 후에 이미지 데이터 렌더링
+                    // 진행이 완료된 후에 이미지 데이터 렌더링
                     if (this.imageData) {
                         this.imageSrc = this.imageUrl;
                     }

             this.inputWord = word;
             this.visibleWord = false;
         },
-        
+
         resetProgress() {
             this.progressWidth = 0;
             this.visibleWord = false;
-            this.imageSrc = ""; // 이미지 URL 초기화
+            this.imageSrc = ''; // 이미지 URL 초기화
             this.imageData = null; // 이미지 데이터 초기화
+            this.word = '';
+        },
+
+        handleModalClose() {
+            this.resetProgress();
+            this.modalClose = true;
+            console.log('모달 상태 : ', this.modalClose);
         },
 
         // 이미지 API
-        async getAiImage(){
-            const url = "http://takensoftai.iptime.org:20200/generate_json";
+        async getAiImage() {
+            const url = 'http://takensoftai.iptime.org:20200/generate_json';
             // console.log(`word : ${this.word}`);
             try {
                 const response = await axios({
                     url: url,
-                    method: "post",
+                    method: 'post',
                     headers: {
-                        "Content-Type": "application/json; charset=UTF-8",
+                        'Content-Type': 'application/json; charset=UTF-8',
                     },
                     responseType: 'arraybuffer',
                     data: {
-                        text: this.word
+                        text: this.word,
                     },
                 });
-                
+
                 // console.log(`응답 : ${response}`);
 
                 // 바이너리 데이터 -> Blob으로 변환

             } catch (err) {
                 console.log(err);
             }
-        }
-    }
-}
+        },
+    },
+};
 </script>
 
 <style>
-.propmt-container{
-    padding: 0px 50px 30px 50px;
+.propmt-container {
+    /*padding: 0px 50px 30px 50px;*/
 }
 /* 입력 컨테이너  */
-.input-conatiner{
+.input-conatiner {
     display: flex;
     align-items: center;
-    gap: 30px;
-    height: 50px;
+    width: 80rem;
 }
-.input-conatiner input{
+.input-conatiner input {
     width: 90%;
     height: 100%;
     padding: 10px 30px;

     border-radius: 10px;
     box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
     outline: none;
-    font-size : 28px;
+    font-size: 28px;
 }
-.input-conatiner button{
+.input-conatiner button {
     width: 15%;
     height: 100%;
     border: none;
     border-radius: 10px;
     cursor: pointer;
-    background-color: #ffba08;
+    /*background-color: #ffba08;*/
     display: flex;
     justify-content: center;
     align-items: center;
 }
 
-.input-conatiner button p{
-    font-size : 28px;
+.input-conatiner button p {
+    font-size: 28px;
 }
 
 /* 진행 상태바 */
 .progress-container {
-    width: 100%;
+    width: 50rem;
+    height: fit-content;
     background-color: #ffffff;
-    border-radius: 5px;
+    border-radius: 10px;
     overflow: hidden;
-    margin-top: 20px;
-    display : flex;
+    display: flex;
     flex-direction: column;
-    gap :30px;
+    gap: 30px;
+    padding: 30px;
 }
 
 .progress-bar {

     text-align: center;
     line-height: 30px;
     color: white;
-    border : none;
+    border: none;
     border-radius: 5px;
     transition: width 0.3s;
-    font-size : 20px;
+    font-size: 20px;
 }
 
 /* 로딩 gif */
-.loading-container{
-    display : flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 30px;
-    text-align: center;
-    margin-top : 30px;
-    padding-bottom : 40px;
-}
-.loading-gif{
-    width: 25%;
-    border-radius: 500px;
-}
-.loading-container p {
-    font-size : 25px;
-}
-
-/* 결과 container */
-.result-container{
-    margin-top: 30px;
+.loading-container {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 30px;
+    text-align: center;
 }
-.result-container img{
-    width : 30%;
+.loading-gif {
+    width: 52%;
+    border-radius: 500px;
 }
-.word-container{
+.loading-container p {
+    font-size: 25px;
+}
+
+/* 결과 container */
+.result-container {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    background-color: #fff;
+    padding: 30px;
+    border-radius: 10px;
+    width: 50rem;
+    height: 100%;
+}
+.result-container img {
+    width: 60%;
+}
+.word-container {
     width: 30%;
     text-align: center;
     padding: 20px 0px;

     gap: 15px;
 }
 .word-container h2 {
-    font-size : 28px;
+    font-size: 28px;
 }
 
-.aibox{
+.aibox {
     display: flex;
     flex-direction: column;
     justify-content: center;
     height: auto;
     padding: 30px 0px;
 }
+
+.modal-container {
+    width: 50rem;
+    height: 40rem;
+    border-radius: 10px;
+    z-index: 100;
+    position: absolute;
+    top: 25rem;
+    right: 10%;
+    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
+}
+
+.modal-box {
+    gap: 30px;
+    margin-top: 10%;
+    margin-left: 5%;
+}
 </style>

9771f7c

c60ea9b

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

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

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


 <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 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>
-      </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"
-        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 justify-center">
-          <div class="readGroup">
-            <h4>각 인물들의 대화를 집중해서 읽어보세요</h4>
+        <div class="title-box mb25 flex align-center mt40" style="justify-content: space-between">
             <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>
+                <span class="title mr40">1. Hello WORLD</span>
+                <span class="subtitle">my name is dd</span>
             </div>
-          </div>
+            <div class="flex">
+                <TextToImage />
+                <button class="completeBtn" @click="complete">학습 종료</button>
+            </div>
         </div>
-      </div>
-      <div class="next-btn" @click="goToNextPage">
-        <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 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="goToNextPage">
+                <img src="../../../../resources/img/right.png" alt="" />
+            </div>
+        </div>
     </div>
-    <TextToImage />
-  </div>
 </template>
 
 <script>
-import TextToImage from "../../../component/TextToImage.vue";
-import axios from "axios";
+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: [],
+    data() {
+        return {
+            text_data: null, // 받아온 지문 정보
+            speakerA_name: null,
+            speakerB_name: null,
+            speakerA: [],
+            speakerB: [],
 
-      seq: this.$store.getters.seqNum,
-    };
-  },
-  methods: {
-    complete() {
-      const { unit_id, book_id } = this.$route.query;
-      this.$router.push({
-        name: "Dashboard",
-        query: { value: this.seq, unit_id, book_id },
-      });
+            seq: this.$store.getters.seqNum,
+        };
     },
-    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",
+    methods: {
+        complete() {
+            const { unit_id, book_id } = this.$route.query;
+            this.$router.push({
+                name: 'Dashboard',
+                query: { value: this.seq, unit_id, book_id },
+            });
         },
-        data: {
-          textId: this.textId,
+        goToPage(page) {
+            this.$router.push({ name: page });
         },
-      })
-        .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 = {};
+        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 = {};
 
-      lines.forEach((line) => {
-        const [speaker, message] = line.trim().split(":");
+            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());
-        }
-      });
+                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;
+            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 = [];
+    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;
+            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();
-  },
+    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";
+    margin-right: 100px;
+    background-color: #ffba08;
+    padding: 10px 30px;
+    border-radius: 10px;
+    font-size: 28px;
+    font-family: 'ONEMobilePOPOTF';
 }
 </style>

Add a comment

Open 0
Closed 0

List

...	...	@@ -1,32 +1,35 @@
1	1	<template>
2		- <div class="flex justify-center align-center" style="margin-top : 30px">
3		- <div class="content title-box aibox">
4		- <p class="title mt25 title-bg">모르는 단어를 물어봐~!</p>
5		- <div class="propmt-container">
6		- <div class="input-conatiner">
7		- <input v-model="word" @keyup.enter="startProgress(word)"/>
8		- <button @click="startProgress(word)"> <p> 생성하기 </p> </button>
	2	+ <div class="flex justify-center align-center">
	3	+ <div class="propmt-container">
	4	+ <div class="input-conatiner">
	5	+ <input v-model="word" @keyup.enter="startProgress(word)" />
	6	+ <button @click="startProgress(word)">
	7	+ <img src="../../resources/img/new_img/icon/search-icon.png" style="width: 52px" />
	8	+ </button>
	9	+ </div>
	10	+ </div>
	11	+ <div class="modal-container flex" v-if="!modalClose">
	12	+ <div class="progress-container" v-if="progressWidth < 100 && progressWidth > 1">
	13	+ <div class="progress-bar" :style="{ width: progressWidth + '%' }">{{ Math.floor(progressWidth) }}%</div>
	14	+ <!-- 로딩 이미지 -->
	15	+ <div class="loading-container">
	16	+ <img src="../../resources/img/jumpingRabbit.gif" alt="Loading" class="loading-gif" />
	17	+ <p>잠깐만 기다려봐~</p>
9	18	</div>
10		- <div class="progress-container">
11		- <div class="progress-bar" :style="{ width: progressWidth + '%' }">{{ Math.floor(progressWidth) }}%</div>
12		-
13		- <!-- 로딩 이미지 -->
14		- <div v-if="progressWidth < 100 && progressWidth > 1" class="loading-container">
15		- <img src="../../resources/img/jumpingRabbit.gif" alt="Loading" class="loading-gif"/>
16		- <p> 잠깐만 기다려봐~ </p>
17		- </div>
18		-
19		- </div>
20		- <div v-if="visibleWord" class="result-container">
21		- <img :src="imageSrc"/>
	19	+ </div>
	20	+ <div v-if="visibleWord" class="result-container">
	21	+ <div class="flex align-center modal-box">
	22	+ <img :src="imageSrc" />
22	23	<div class="word-container">
23		- <h2> {{ inputWord }} </h2>
	24	+ <h2>{{ inputWord }}</h2>
24	25	</div>
25	26	</div>
	27	+ <button @click="handleModalClose">
	28	+ <img src="../../resources/img/btn25_93t_normal.png" alt="" style="width: auto" />
	29	+ </button>
26	30	</div>
27	31	</div>
28	32	</div>
29		-
30	33	</template>
31	34
32	35	<script>
...	...	@@ -36,22 +39,22 @@
36	39	data() {
37	40	return {
38	41	progressWidth: 0,
39		- inputWord : "",
	42	+ inputWord: '',
40	43
41		- // 하드 코딩 -> 수정 필요 : API
42		- word : "",
43		- imageSrc : "",
	44	+ word: '',
	45	+ imageSrc: '',
44	46	imageData: null, // 서버에서 받아온 이미지 데이터 저장
45	47
46		- visibleWord : false,
	48	+ visibleWord: false,
	49	+ modalClose: true, // 초기 상태 === 닫힘
47	50	};
48	51	},
49		- mounted() {
50		-
51		- },
	52	+ mounted() {},
52	53	methods: {
53	54	// 상태 진행 바(progress bar)
54	55	startProgress(word) {
	56	+ this.modalClose = false;
	57	+
55	58	if (this.progressWidth == 100) {
56	59	this.resetProgress();
57	60	}
...	...	@@ -72,7 +75,7 @@
72	75	clearInterval(progressInterval);
73	76	this.visibleWord = true;
74	77
75		- // 진행이 완료된 후에 이미지 데이터 렌더링
	78	+ // 진행이 완료된 후에 이미지 데이터 렌더링
76	79	if (this.imageData) {
77	80	this.imageSrc = this.imageUrl;
78	81	}
...	...	@@ -86,31 +89,38 @@
86	89	this.inputWord = word;
87	90	this.visibleWord = false;
88	91	},
89		-
	92	+
90	93	resetProgress() {
91	94	this.progressWidth = 0;
92	95	this.visibleWord = false;
93		- this.imageSrc = ""; // 이미지 URL 초기화
	96	+ this.imageSrc = ''; // 이미지 URL 초기화
94	97	this.imageData = null; // 이미지 데이터 초기화
	98	+ this.word = '';
	99	+ },
	100	+
	101	+ handleModalClose() {
	102	+ this.resetProgress();
	103	+ this.modalClose = true;
	104	+ console.log('모달 상태 : ', this.modalClose);
95	105	},
96	106
97	107	// 이미지 API
98		- async getAiImage(){
99		- const url = "http://takensoftai.iptime.org:20200/generate_json";
	108	+ async getAiImage() {
	109	+ const url = 'http://takensoftai.iptime.org:20200/generate_json';
100	110	// console.log(`word : ${this.word}`);
101	111	try {
102	112	const response = await axios({
103	113	url: url,
104		- method: "post",
	114	+ method: 'post',
105	115	headers: {
106		- "Content-Type": "application/json; charset=UTF-8",
	116	+ 'Content-Type': 'application/json; charset=UTF-8',
107	117	},
108	118	responseType: 'arraybuffer',
109	119	data: {
110		- text: this.word
	120	+ text: this.word,
111	121	},
112	122	});
113		-
	123	+
114	124	// console.log(`응답 : ${response}`);
115	125
116	126	// 바이너리 데이터 -> Blob으로 변환
...	...	@@ -124,23 +134,22 @@
124	134	} catch (err) {
125	135	console.log(err);
126	136	}
127		- }
128		- }
129		-}
	137	+ },
	138	+ },
	139	+};
130	140	</script>
131	141
132	142	<style>
133		-.propmt-container{
134		- padding: 0px 50px 30px 50px;
	143	+.propmt-container {
	144	+ /padding: 0px 50px 30px 50px;/
135	145	}
136	146	/* 입력 컨테이너 */
137		-.input-conatiner{
	147	+.input-conatiner {
138	148	display: flex;
139	149	align-items: center;
140		- gap: 30px;
141		- height: 50px;
	150	+ width: 80rem;
142	151	}
143		-.input-conatiner input{
	152	+.input-conatiner input {
144	153	width: 90%;
145	154	height: 100%;
146	155	padding: 10px 30px;
...	...	@@ -148,34 +157,35 @@
148	157	border-radius: 10px;
149	158	box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
150	159	outline: none;
151		- font-size : 28px;
	160	+ font-size: 28px;
152	161	}
153		-.input-conatiner button{
	162	+.input-conatiner button {
154	163	width: 15%;
155	164	height: 100%;
156	165	border: none;
157	166	border-radius: 10px;
158	167	cursor: pointer;
159		- background-color: #ffba08;
	168	+ /background-color: #ffba08;/
160	169	display: flex;
161	170	justify-content: center;
162	171	align-items: center;
163	172	}
164	173
165		-.input-conatiner button p{
166		- font-size : 28px;
	174	+.input-conatiner button p {
	175	+ font-size: 28px;
167	176	}
168	177
169	178	/* 진행 상태바 */
170	179	.progress-container {
171		- width: 100%;
	180	+ width: 50rem;
	181	+ height: fit-content;
172	182	background-color: #ffffff;
173		- border-radius: 5px;
	183	+ border-radius: 10px;
174	184	overflow: hidden;
175		- margin-top: 20px;
176		- display : flex;
	185	+ display: flex;
177	186	flex-direction: column;
178		- gap :30px;
	187	+ gap: 30px;
	188	+ padding: 30px;
179	189	}
180	190
181	191	.progress-bar {
...	...	@@ -185,42 +195,43 @@
185	195	text-align: center;
186	196	line-height: 30px;
187	197	color: white;
188		- border : none;
	198	+ border: none;
189	199	border-radius: 5px;
190	200	transition: width 0.3s;
191		- font-size : 20px;
	201	+ font-size: 20px;
192	202	}
193	203
194	204	/* 로딩 gif */
195		-.loading-container{
196		- display : flex;
197		- flex-direction: column;
198		- align-items: center;
199		- gap: 30px;
200		- text-align: center;
201		- margin-top : 30px;
202		- padding-bottom : 40px;
203		-}
204		-.loading-gif{
205		- width: 25%;
206		- border-radius: 500px;
207		-}
208		-.loading-container p {
209		- font-size : 25px;
210		-}
211		-
212		-/* 결과 container */
213		-.result-container{
214		- margin-top: 30px;
	205	+.loading-container {
215	206	display: flex;
216	207	flex-direction: column;
217	208	align-items: center;
218	209	gap: 30px;
	210	+ text-align: center;
219	211	}
220		-.result-container img{
221		- width : 30%;
	212	+.loading-gif {
	213	+ width: 52%;
	214	+ border-radius: 500px;
222	215	}
223		-.word-container{
	216	+.loading-container p {
	217	+ font-size: 25px;
	218	+}
	219	+
	220	+/* 결과 container */
	221	+.result-container {
	222	+ display: flex;
	223	+ flex-direction: row;
	224	+ align-items: flex-start;
	225	+ background-color: #fff;
	226	+ padding: 30px;
	227	+ border-radius: 10px;
	228	+ width: 50rem;
	229	+ height: 100%;
	230	+}
	231	+.result-container img {
	232	+ width: 60%;
	233	+}
	234	+.word-container {
224	235	width: 30%;
225	236	text-align: center;
226	237	padding: 20px 0px;
...	...	@@ -231,14 +242,31 @@
231	242	gap: 15px;
232	243	}
233	244	.word-container h2 {
234		- font-size : 28px;
	245	+ font-size: 28px;
235	246	}
236	247
237		-.aibox{
	248	+.aibox {
238	249	display: flex;
239	250	flex-direction: column;
240	251	justify-content: center;
241	252	height: auto;
242	253	padding: 30px 0px;
243	254	}
	255	+
	256	+.modal-container {
	257	+ width: 50rem;
	258	+ height: 40rem;
	259	+ border-radius: 10px;
	260	+ z-index: 100;
	261	+ position: absolute;
	262	+ top: 25rem;
	263	+ right: 10%;
	264	+ box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
	265	+}
	266	+
	267	+.modal-box {
	268	+ gap: 30px;
	269	+ margin-top: 10%;
	270	+ margin-left: 5%;
	271	+}
244	272	</style>

...	...	@@ -1,192 +1,182 @@
1	1	<template>
2		- <div id="Chapter1_2" 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="" />
	2	+ <div id="Chapter1_2" 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>
7	9	</div>
8		- </router-link>
9		- </div>
10		- <div
11		- class="title-box mb25 flex align-center mt40"
12		- style="justify-content: space-between"
13		- >
14		- <div>
15		- <span class="title mr40">1. Hello WORLD</span>
16		- <span class="subtitle">my name is dd</span>
17		- </div>
18		- <button class="completeBtn" @click="complete">학습 종료</button>
19		- </div>
20		- <div class="flex justify-between align-center">
21		- <div
22		- class="pre-btn"
23		- style="visibility: hidden"
24		- @click="goToPage('Chapter1_1')"
25		- >
26		- <img src="../../../../resources/img/left.png" alt="" />
27		- </div>
28		- <div class="content title-box">
29		- <p class="title mt25 title-bg">step1. Hello WORLD</p>
30		- <div class="flex justify-center">
31		- <div class="readGroup">
32		- <h4>각 인물들의 대화를 집중해서 읽어보세요</h4>
	10	+ <div class="title-box mb25 flex align-center mt40" style="justify-content: space-between">
33	11	<div>
34		- <div class="textbox">
35		- <article
36		- v-for="(line, index) in combinedLines"
37		- :key="index"
38		- :class="[
39		- 'flex',
40		- 'align-start',
41		- 'mb10',
42		- { 'justify-end': index % 2 !== 0 },
43		- ]"
44		- >
45		- <div v-if="index % 2 === 0" class="icon mr40">
46		- <img src="../../../../resources/img/img37_s.png" alt="" />
47		- <p class="name">{{ speakerA_name }}</p>
48		- </div>
49		- <p v-if="index % 2 === 0" class="read">{{ line }}</p>
50		-
51		- <p v-if="index % 2 !== 0" class="read mr40">{{ line }}</p>
52		- <div v-if="index % 2 !== 0" class="icon">
53		- <img src="../../../../resources/img/img37_s.png" alt="" />
54		- <p class="name">{{ speakerB_name }}</p>
55		- </div>
56		- </article>
57		- </div>
	12	+ <span class="title mr40">1. Hello WORLD</span>
	13	+ <span class="subtitle">my name is dd</span>
58	14	</div>
59		- </div>
	15	+ <div class="flex">
	16	+ <TextToImage />
	17	+ <button class="completeBtn" @click="complete">학습 종료</button>
	18	+ </div>
60	19	</div>
61		- </div>
62		- <div class="next-btn" @click="goToNextPage">
63		- <img src="../../../../resources/img/right.png" alt="" />
64		- </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 justify-center">
	27	+ <div class="readGroup">
	28	+ <h4>각 인물들의 대화를 집중해서 읽어보세요</h4>
	29	+ <div>
	30	+ <div class="textbox">
	31	+ <article
	32	+ v-for="(line, index) in combinedLines"
	33	+ :key="index"
	34	+ :class="['flex', 'align-start', 'mb10', { 'justify-end': index % 2 !== 0 }]"
	35	+ >
	36	+ <div v-if="index % 2 === 0" class="icon mr40">
	37	+ <img src="../../../../resources/img/img37_s.png" alt="" />
	38	+ <p class="name">{{ speakerA_name }}</p>
	39	+ </div>
	40	+ <p v-if="index % 2 === 0" class="read">{{ line }}</p>
	41	+
	42	+ <p v-if="index % 2 !== 0" class="read mr40">{{ line }}</p>
	43	+ <div v-if="index % 2 !== 0" class="icon">
	44	+ <img src="../../../../resources/img/img37_s.png" alt="" />
	45	+ <p class="name">{{ speakerB_name }}</p>
	46	+ </div>
	47	+ </article>
	48	+ </div>
	49	+ </div>
	50	+ </div>
	51	+ </div>
	52	+ </div>
	53	+ <div class="next-btn" @click="goToNextPage">
	54	+ <img src="../../../../resources/img/right.png" alt="" />
	55	+ </div>
	56	+ </div>
65	57	</div>
66		- <TextToImage />
67		- </div>
68	58	</template>
69	59
70	60	<script>
71		-import TextToImage from "../../../component/TextToImage.vue";
72		-import axios from "axios";
	61	+import TextToImage from '../../../component/TextToImage.vue';
	62	+import axios from 'axios';
73	63	export default {
74		- data() {
75		- return {
76		- text_data: null, // 받아온 지문 정보
77		- speakerA_name: null,
78		- speakerB_name: null,
79		- speakerA: [],
80		- speakerB: [],
	64	+ data() {
	65	+ return {
	66	+ text_data: null, // 받아온 지문 정보
	67	+ speakerA_name: null,
	68	+ speakerB_name: null,
	69	+ speakerA: [],
	70	+ speakerB: [],
81	71
82		- seq: this.$store.getters.seqNum,
83		- };
84		- },
85		- methods: {
86		- complete() {
87		- const { unit_id, book_id } = this.$route.query;
88		- this.$router.push({
89		- name: "Dashboard",
90		- query: { value: this.seq, unit_id, book_id },
91		- });
	72	+ seq: this.$store.getters.seqNum,
	73	+ };
92	74	},
93		- goToPage(page) {
94		- this.$router.push({ name: page });
95		- },
96		- goToNextPage() {
97		- alert("지문 학습 완료!");
98		- this.complete();
99		- },
100		- // 대화 지문 API
101		- async fetchText() {
102		- axios({
103		- url: "/text/selectOneText.json",
104		- method: "post",
105		- headers: {
106		- "Content-Type": "application/json; charset=UTF-8",
	75	+ methods: {
	76	+ complete() {
	77	+ const { unit_id, book_id } = this.$route.query;
	78	+ this.$router.push({
	79	+ name: 'Dashboard',
	80	+ query: { value: this.seq, unit_id, book_id },
	81	+ });
107	82	},
108		- data: {
109		- textId: this.textId,
	83	+ goToPage(page) {
	84	+ this.$router.push({ name: page });
110	85	},
111		- })
112		- .then((response) => {
113		- this.text_data = response.data[0].text_cnt;
114		- this.splitConversation();
115		- })
116		- .catch((err) => {
117		- console.log("지문 에러 : ", err);
118		- });
119		- },
120		- // 대화 지문 split
121		- splitConversation() {
122		- const lines = this.text_data.split("/");
123		- const speakers = {};
	86	+ goToNextPage() {
	87	+ alert('지문 학습 완료!');
	88	+ this.complete();
	89	+ },
	90	+ // 대화 지문 API
	91	+ async fetchText() {
	92	+ axios({
	93	+ url: '/text/selectOneText.json',
	94	+ method: 'post',
	95	+ headers: {
	96	+ 'Content-Type': 'application/json; charset=UTF-8',
	97	+ },
	98	+ data: {
	99	+ textId: this.textId,
	100	+ },
	101	+ })
	102	+ .then((response) => {
	103	+ this.text_data = response.data[0].text_cnt;
	104	+ this.splitConversation();
	105	+ })
	106	+ .catch((err) => {
	107	+ console.log('지문 에러 : ', err);
	108	+ });
	109	+ },
	110	+ // 대화 지문 split
	111	+ splitConversation() {
	112	+ const lines = this.text_data.split('/');
	113	+ const speakers = {};
124	114
125		- lines.forEach((line) => {
126		- const [speaker, message] = line.trim().split(":");
	115	+ lines.forEach((line) => {
	116	+ const [speaker, message] = line.trim().split(':');
127	117
128		- if (!speakers.speakerA_name && !speakers.speakerB_name) {
129		- // 첫 번째 발화자를 speakerA_name으로 설정
130		- speakers.speakerA_name = speaker.trim();
131		- this.speakerA.push(message.trim());
132		- } else if (
133		- speakers.speakerA_name &&
134		- !speakers.speakerB_name &&
135		- speakers.speakerA_name !== speaker.trim()
136		- ) {
137		- // 두 번째 발화자를 speakerB_name으로 설정
138		- speakers.speakerB_name = speaker.trim();
139		- this.speakerB.push(message.trim());
140		- } else if (speaker.trim() === speakers.speakerA_name) {
141		- // speakerA_name에 내용 추가
142		- this.speakerA.push(message.trim());
143		- } else if (speaker.trim() === speakers.speakerB_name) {
144		- // speakerB_name에 내용 추가
145		- this.speakerB.push(message.trim());
146		- }
147		- });
	118	+ if (!speakers.speakerA_name && !speakers.speakerB_name) {
	119	+ // 첫 번째 발화자를 speakerA_name으로 설정
	120	+ speakers.speakerA_name = speaker.trim();
	121	+ this.speakerA.push(message.trim());
	122	+ } else if (
	123	+ speakers.speakerA_name &&
	124	+ !speakers.speakerB_name &&
	125	+ speakers.speakerA_name !== speaker.trim()
	126	+ ) {
	127	+ // 두 번째 발화자를 speakerB_name으로 설정
	128	+ speakers.speakerB_name = speaker.trim();
	129	+ this.speakerB.push(message.trim());
	130	+ } else if (speaker.trim() === speakers.speakerA_name) {
	131	+ // speakerA_name에 내용 추가
	132	+ this.speakerA.push(message.trim());
	133	+ } else if (speaker.trim() === speakers.speakerB_name) {
	134	+ // speakerB_name에 내용 추가
	135	+ this.speakerB.push(message.trim());
	136	+ }
	137	+ });
148	138
149		- this.speakerA_name = speakers.speakerA_name;
150		- this.speakerB_name = speakers.speakerB_name;
	139	+ this.speakerA_name = speakers.speakerA_name;
	140	+ this.speakerB_name = speakers.speakerB_name;
	141	+ },
151	142	},
152		- },
153		- watch: {},
154		- computed: {
155		- textId() {
156		- //console.log("지문 화면 아이디 : ", this.$store.getters.getTextId);
157		- return this.$store.getters.getTextId;
158		- },
159		- combinedLines() {
160		- const maxLength = Math.max(this.speakerA.length, this.speakerB.length);
161		- const lines = [];
	143	+ watch: {},
	144	+ computed: {
	145	+ textId() {
	146	+ //console.log("지문 화면 아이디 : ", this.$store.getters.getTextId);
	147	+ return this.$store.getters.getTextId;
	148	+ },
	149	+ combinedLines() {
	150	+ const maxLength = Math.max(this.speakerA.length, this.speakerB.length);
	151	+ const lines = [];
162	152
163		- for (let i = 0; i < maxLength; i++) {
164		- if (i < this.speakerA.length) {
165		- lines.push(this.speakerA[i]);
166		- }
167		- if (i < this.speakerB.length) {
168		- lines.push(this.speakerB[i]);
169		- }
170		- }
171		- return lines;
	153	+ for (let i = 0; i < maxLength; i++) {
	154	+ if (i < this.speakerA.length) {
	155	+ lines.push(this.speakerA[i]);
	156	+ }
	157	+ if (i < this.speakerB.length) {
	158	+ lines.push(this.speakerB[i]);
	159	+ }
	160	+ }
	161	+ return lines;
	162	+ },
172	163	},
173		- },
174		- components: {
175		- TextToImage: TextToImage,
176		- },
177		- mounted() {
178		- this.fetchText();
179		- },
	164	+ components: {
	165	+ TextToImage: TextToImage,
	166	+ },
	167	+ mounted() {
	168	+ this.fetchText();
	169	+ },
180	170	};
181	171	</script>
182	172
183	173	<style>
184	174	.completeBtn {
185		- margin-right: 100px;
186		- background-color: #ffba08;
187		- padding: 10px 30px;
188		- border-radius: 10px;
189		- font-size: 28px;
190		- font-family: "ONEMobilePOPOTF";
	175	+ margin-right: 100px;
	176	+ background-color: #ffba08;
	177	+ padding: 10px 30px;
	178	+ border-radius: 10px;
	179	+ font-size: 28px;
	180	+ font-family: 'ONEMobilePOPOTF';
191	181	}
192	182	</style>

Delete comment