Commit @fc7c56a128b7809178eaa7ab423721cfcf444473

홍아랑 2024-08-14

240814 홍아랑 지문 영상 파트 코드 수정

@fc7c56a128b7809178eaa7ab423721cfcf444473

f866aa2

fc7c56a

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

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

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


 <template>
-    <div id="Chapter1" 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 id="Chapter1" 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>
-        <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"><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="videoCon">
-                    <div ref="youtubePlayer" class="youtube-player"></div>
-                </div>
-            </div>
-            <div class="next-btn" @click="goToPage('Chapter1_2')"><img src="../../../../resources/img/right.png" alt=""></div>
-        </div>
-        <TextToImage />
+      </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">
+        <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="videoCon">
+          <div ref="youtubePlayer" class="youtube-player"></div>
+        </div>
+      </div>
+      <div class="next-btn" @click="goToPage('Chapter1_2')">
+        <img src="../../../../resources/img/right.png" alt="" />
+      </div>
+    </div>
+    <TextToImage />
+  </div>
 </template>
 
 <script>
-import TextToImage from '../../../component/TextToImage.vue';
+import TextToImage from "../../../component/TextToImage.vue";
 
 export default {
-    components: {
-        TextToImage
+  components: {
+    TextToImage,
+  },
+  methods: {
+    goToPage(page) {
+      this.$router.push({ name: page });
     },
-    methods: {
-        goToPage(page) {
-            this.$router.push({ name: page });
-        },
-        loadYouTubeAPI() {
-            return new Promise((resolve, reject) => {
-                if (window.YT && window.YT.Player) {
-                    resolve(); // API가 이미 로드된 경우
-                } else {
-                    const script = document.createElement('script');
-                    script.src = 'https://www.youtube.com/iframe_api';
-                    script.onload = () => {
-                        // 스크립트가 로드되면, `YT` 객체가 준비될 때까지 기다립니다.
-                        const checkYTReady = setInterval(() => {
-                            if (window.YT && window.YT.Player) {
-                                clearInterval(checkYTReady);
-                                resolve();
-                            }
-                        }, 100); // 100ms마다 `YT` 객체가 준비되었는지 확인
-                    };
-                    script.onerror = () => reject(new Error('Failed to load the YouTube API script'));
-                    document.body.appendChild(script);
-                }
-            });
-        },
-        initializePlayer() {
-            if (!window.YT || !window.YT.Player) {
-                console.error('YouTube Player is not available');
-                return;
-            }
-            new window.YT.Player(this.$refs.youtubePlayer, {
-                height: '550',
-                width: '950',
-                videoId: 'VloEiK4Ihj8', // 비디오 ID
-                events: {
-                    'onReady': this.onPlayerReady
-                }
-            });
-        },
-        onPlayerReady(event) {
-            event.target.playVideo(); // 비디오가 준비되면 자동 재생
+    loadYouTubeAPI() {
+      return new Promise((resolve, reject) => {
+        if (window.YT && window.YT.Player) {
+          resolve(); // API가 이미 로드된 경우
+        } else {
+          const script = document.createElement("script");
+          script.src = "https://www.youtube.com/iframe_api";
+          script.onload = () => {
+            // 스크립트가 로드되면, `YT` 객체가 준비될 때까지 기다립니다.
+            const checkYTReady = setInterval(() => {
+              if (window.YT && window.YT.Player) {
+                clearInterval(checkYTReady);
+                resolve();
+              }
+            }, 100); // 100ms마다 `YT` 객체가 준비되었는지 확인
+          };
+          script.onerror = () =>
+            reject(new Error("Failed to load the YouTube API script"));
+          document.body.appendChild(script);
         }
+      });
     },
-    mounted() {
-        this.loadYouTubeAPI()
-            .then(() => {
-                this.initializePlayer();
-            })
-            .catch(error => {
-                console.error('Error loading YouTube API:', error);
-            });
-    }
-}
+    initializePlayer() {
+      if (!window.YT || !window.YT.Player) {
+        console.error("YouTube Player is not available");
+        return;
+      }
+      new window.YT.Player(this.$refs.youtubePlayer, {
+        height: "550",
+        width: "950",
+        videoId: "VloEiK4Ihj8", // 비디오 ID
+        events: {
+          onReady: this.onPlayerReady,
+        },
+      });
+    },
+    onPlayerReady(event) {
+      event.target.playVideo(); // 비디오가 준비되면 자동 재생
+    },
+  },
+  mounted() {
+    this.loadYouTubeAPI()
+      .then(() => {
+        this.initializePlayer();
+      })
+      .catch((error) => {
+        console.error("Error loading YouTube API:", error);
+      });
+  },
+};
 </script>
 
 <style scoped>
 .youtube-player {
-    width: 950px; /* 플레이어의 가로 크기 */
-    height: 550px; /* 플레이어의 세로 크기 */
+  width: 950px; /* 플레이어의 가로 크기 */
+  height: 550px; /* 플레이어의 세로 크기 */
 }
 </style>

Add a comment

Open 0
Closed 0

List

...	...	@@ -1,93 +1,100 @@
1	1	<template>
2		- <div id="Chapter1" 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>
	2	+ <div id="Chapter1" 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	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"><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		- <div class="videoCon">
17		- <div ref="youtubePlayer" class="youtube-player"></div>
18		- </div>
19		- </div>
20		- <div class="next-btn" @click="goToPage('Chapter1_2')"><img src="../../../../resources/img/right.png" alt=""></div>
21		- </div>
22		- <TextToImage />
	8	+ </router-link>
23	9	</div>
	10	+ <div class="title-box mb25 flex align-center mt40">
	11	+ <span class="title mr40">1. Hello WORLD</span>
	12	+ <span class="subtitle">my name is dd</span>
	13	+ </div>
	14	+ <div class="flex justify-between align-center">
	15	+ <div class="pre-btn">
	16	+ <img src="../../../../resources/img/left.png" alt="" />
	17	+ </div>
	18	+ <div class="content title-box">
	19	+ <p class="title mt25 title-bg">step1. Hello WORLD</p>
	20	+ <div class="videoCon">
	21	+ <div ref="youtubePlayer" class="youtube-player"></div>
	22	+ </div>
	23	+ </div>
	24	+ <div class="next-btn" @click="goToPage('Chapter1_2')">
	25	+ <img src="../../../../resources/img/right.png" alt="" />
	26	+ </div>
	27	+ </div>
	28	+ <TextToImage />
	29	+ </div>
24	30	</template>
25	31
26	32	<script>
27		-import TextToImage from '../../../component/TextToImage.vue';
	33	+import TextToImage from "../../../component/TextToImage.vue";
28	34
29	35	export default {
30		- components: {
31		- TextToImage
	36	+ components: {
	37	+ TextToImage,
	38	+ },
	39	+ methods: {
	40	+ goToPage(page) {
	41	+ this.$router.push({ name: page });
32	42	},
33		- methods: {
34		- goToPage(page) {
35		- this.$router.push({ name: page });
36		- },
37		- loadYouTubeAPI() {
38		- return new Promise((resolve, reject) => {
39		- if (window.YT && window.YT.Player) {
40		- resolve(); // API가 이미 로드된 경우
41		- } else {
42		- const script = document.createElement('script');
43		- script.src = 'https://www.youtube.com/iframe_api';
44		- script.onload = () => {
45		- // 스크립트가 로드되면, `YT` 객체가 준비될 때까지 기다립니다.
46		- const checkYTReady = setInterval(() => {
47		- if (window.YT && window.YT.Player) {
48		- clearInterval(checkYTReady);
49		- resolve();
50		- }
51		- }, 100); // 100ms마다 `YT` 객체가 준비되었는지 확인
52		- };
53		- script.onerror = () => reject(new Error('Failed to load the YouTube API script'));
54		- document.body.appendChild(script);
55		- }
56		- });
57		- },
58		- initializePlayer() {
59		- if (!window.YT \|\| !window.YT.Player) {
60		- console.error('YouTube Player is not available');
61		- return;
62		- }
63		- new window.YT.Player(this.$refs.youtubePlayer, {
64		- height: '550',
65		- width: '950',
66		- videoId: 'VloEiK4Ihj8', // 비디오 ID
67		- events: {
68		- 'onReady': this.onPlayerReady
69		- }
70		- });
71		- },
72		- onPlayerReady(event) {
73		- event.target.playVideo(); // 비디오가 준비되면 자동 재생
	43	+ loadYouTubeAPI() {
	44	+ return new Promise((resolve, reject) => {
	45	+ if (window.YT && window.YT.Player) {
	46	+ resolve(); // API가 이미 로드된 경우
	47	+ } else {
	48	+ const script = document.createElement("script");
	49	+ script.src = "https://www.youtube.com/iframe_api";
	50	+ script.onload = () => {
	51	+ // 스크립트가 로드되면, `YT` 객체가 준비될 때까지 기다립니다.
	52	+ const checkYTReady = setInterval(() => {
	53	+ if (window.YT && window.YT.Player) {
	54	+ clearInterval(checkYTReady);
	55	+ resolve();
	56	+ }
	57	+ }, 100); // 100ms마다 `YT` 객체가 준비되었는지 확인
	58	+ };
	59	+ script.onerror = () =>
	60	+ reject(new Error("Failed to load the YouTube API script"));
	61	+ document.body.appendChild(script);
74	62	}
	63	+ });
75	64	},
76		- mounted() {
77		- this.loadYouTubeAPI()
78		- .then(() => {
79		- this.initializePlayer();
80		- })
81		- .catch(error => {
82		- console.error('Error loading YouTube API:', error);
83		- });
84		- }
85		-}
	65	+ initializePlayer() {
	66	+ if (!window.YT \|\| !window.YT.Player) {
	67	+ console.error("YouTube Player is not available");
	68	+ return;
	69	+ }
	70	+ new window.YT.Player(this.$refs.youtubePlayer, {
	71	+ height: "550",
	72	+ width: "950",
	73	+ videoId: "VloEiK4Ihj8", // 비디오 ID
	74	+ events: {
	75	+ onReady: this.onPlayerReady,
	76	+ },
	77	+ });
	78	+ },
	79	+ onPlayerReady(event) {
	80	+ event.target.playVideo(); // 비디오가 준비되면 자동 재생
	81	+ },
	82	+ },
	83	+ mounted() {
	84	+ this.loadYouTubeAPI()
	85	+ .then(() => {
	86	+ this.initializePlayer();
	87	+ })
	88	+ .catch((error) => {
	89	+ console.error("Error loading YouTube API:", error);
	90	+ });
	91	+ },
	92	+};
86	93	</script>
87	94
88	95	<style scoped>
89	96	.youtube-player {
90		- width: 950px; /* 플레이어의 가로 크기 */
91		- height: 550px; /* 플레이어의 세로 크기 */
	97	+ width: 950px; /* 플레이어의 가로 크기 */
	98	+ height: 550px; /* 플레이어의 세로 크기 */
92	99	}
93	100	</style>

Delete comment