Commit @5fa62fb09bc0f94fc42640c48e285f3a5b3b1b8c

류윤주 07-22

250722 류윤주 수정

@5fa62fb09bc0f94fc42640c48e285f3a5b3b1b8c

ee0e506

5fa62fb

client/resources/scss/admin/content.scss

--- client/resources/scss/admin/content.scss

+++ client/resources/scss/admin/content.scss


 
 }
 
-.sidemenu {
-    width: 350px;
+.side-content{
+    width: 400px;
+    height: 100%;
+    @include flex-layout(flex, flex-start, space-between, column);
     margin-right: 20px;
-
-    .myinfo {
-        text-align: center;
-        padding: 25px 20px 20px 20px;
-        margin-bottom: 20px;
-        border-radius: 20px;
-        background: linear-gradient(to bottom, #1F3F99, #3354CE);
+        .myinfo {
+            width: 100%;
+            text-align: center;
+            padding: 25px 20px 20px 20px;
+            margin-bottom: 20px;
+            border-radius: 20px;
+            background: linear-gradient(to bottom, #1F3F99, #3354CE);
 
         .name-box {
             margin-bottom: 30px;

 
     }
 
-    .menu-box {
-        summary {
-            cursor: pointer;
-            border: 1px solid #213F9A;
-            color: #000;
-            display: flex;
-            justify-content: space-between;
-            font-size: 17px;
-            text-align: left;
-            padding: 10px 15px;
-            border-radius: 10px;
-
-            .icon {
-                display: none;
-            }
-        }
-
-        margin-top: 20px;
-
-        ul {
-            padding: 10px 10px 0px 10px;
-        }
-
-        li {
-            margin-bottom: 10px;
-
-            a {
-                display: flex;
-                justify-content: space-between;
-                width: 100%;
-            }
-
-
-        }
-    }
-    .menu-box.danil{
-        a{display: block;
-            cursor: pointer;
-            border: 1px solid #213F9A;
-            color: #000;
-           
-            font-size: 17px;
-            text-align: left;
-            padding: 10px 15px;
-            border-radius: 10px;
-            margin-bottom: 10px;
-            li{
-                display: flex;
-                justify-content: space-between;
-                margin-bottom: 0px;
-                .icon {
-                    display: none;
-                }
-            }
-        }
-        a.active-link{
-            background: #213F9A;
-            li{
-                p{
-                    color: #fff;
-                }
-                .icon {
-                    display: block;
-                }
-            }
-        }
-    }
-    .boxs {
+        .boxs {
         background-color: #fff;
         border-radius: 20px;
         padding: 20px;
         margin-bottom: 20px;
+
+        &:last-child {
+            margin-bottom: 0;
+        }
 
         .box {
             display: flex;

 
     }
 
+}
+
+.sidemenu {
+    width: 350px;
+    margin-right: 20px;
+
+
+
+    .menu-box {
+        summary {
+            cursor: pointer;
+            border: 1px solid #213F9A;
+            color: #000;
+            display: flex;
+            justify-content: space-between;
+            font-size: 17px;
+            text-align: left;
+            padding: 10px 15px;
+            border-radius: 10px;
+
+            .icon {
+                display: none;
+            }
+        }
+
+        margin-top: 20px;
+
+        ul {
+            padding: 10px 10px 0px 10px;
+        }
+
+        li {
+            margin-bottom: 10px;
+
+            a {
+                display: flex;
+                justify-content: space-between;
+                width: 100%;
+            }
+
+
+        }
+    }
+    .menu-box.danil{
+        a{display: block;
+            cursor: pointer;
+            border: 1px solid #213F9A;
+            color: #000;
+           
+            font-size: 17px;
+            text-align: left;
+            padding: 10px 15px;
+            border-radius: 10px;
+            margin-bottom: 10px;
+            li{
+                display: flex;
+                justify-content: space-between;
+                margin-bottom: 0px;
+                .icon {
+                    display: none;
+                }
+            }
+        }
+        a.active-link{
+            background: #213F9A;
+            li{
+                p{
+                    color: #fff;
+                }
+                .icon {
+                    display: block;
+                }
+            }
+        }
+    }
+
     .router-link-active p {
         color: #213F9A;
         /* 원하는 색상으로 변경 */

 
         .blue-box {
             width: 550px;
+            height: calc(100% - 46px);
             background-color: #D7DCF1;
             border-radius: 10px;
             padding: 32px;

     mark {
         background-color: transparent;
     }
+}
+
+.schedule-zone{
+    @include flex-layout(flex, stretch);
+    height: calc(100% - 311px);
+    gap: 4rem;
+    .fc-direction-ltr{
+        width: 550px;
+    }
 }

ee0e506

5fa62fb

client/resources/scss/admin/layout.scss

--- client/resources/scss/admin/layout.scss

+++ client/resources/scss/admin/layout.scss


 .container{height: 100%; padding: 2rem; background-color: #EFF1FA;}
 .main-wrap{
     display: flex;
+    height: calc(100% - 60px);
     .sidemenu{flex-shrink: 0;}
-    .content{width: 100%; padding: 30px; background-color: #fff; border-radius: 20px;}
+    .content{
+        width: 100%;
+        padding: 30px; 
+        background-color: #fff; 
+        border-radius: 20px;
+    }
 }

ee0e506

5fa62fb

client/resources/scss/common/base/_reset.scss

--- client/resources/scss/common/base/_reset.scss

+++ client/resources/scss/common/base/_reset.scss


 	font-size: var(--#{$prefix}fz-body-md);
 	overflow-x: hidden;
 }
+
+#root{
+	width: 100%;
+	height: 100%;
+}
 *:focus {
 	@include focus();
 }

ee0e506

5fa62fb

client/views/component/GoogleCalendar.vue

--- client/views/component/GoogleCalendar.vue

+++ client/views/component/GoogleCalendar.vue


 <template>
-    <div>
-      <FullCalendar  :options="calendarOptions" />
-    </div>
-  </template>
-  
-  <script>
-  import { ref, onMounted } from 'vue';
-  import FullCalendar from '@fullcalendar/vue3';
-  import dayGridPlugin from '@fullcalendar/daygrid';
+  <FullCalendar :options="calendarOptions" />
+</template>
 
+<script>
+import FullCalendar from '@fullcalendar/vue3'
+import dayGridPlugin from '@fullcalendar/daygrid'
 
-  
-  // gapi 스크립트 로드 함수
-  function loadGapiScript() {
-    return new Promise((resolve, reject) => {
-      const script = document.createElement('script');
-      script.src = 'https://apis.google.com/js/api.js';
-      script.onload = resolve; // 로드 성공
-      script.onerror = reject; // 로드 실패
-      document.head.appendChild(script);
-    });
-  }
-  
-  export default {
-    name: 'GoogleCalendar',
-    components: {
-      FullCalendar
-    },
-    setup() {
-      const events = ref([]);
-      const calendarOptions = ref({
+// gapi 스크립트 로드 함수
+function loadGapiScript() {
+  return new Promise((resolve, reject) => {
+    const script = document.createElement('script');
+    script.src = 'https://apis.google.com/js/api.js';
+    script.onload = resolve;
+    script.onerror = reject;
+    document.head.appendChild(script);
+  });
+}
+
+export default {
+  name: 'GoogleCalendar',
+  components: {
+    FullCalendar
+  },
+  data() {
+    return {
+      events: [],
+      calendarOptions: {
         plugins: [dayGridPlugin],
         initialView: 'dayGridMonth',
         events: [],
+        locale: 'ko',
         titleFormat: {
-  year: 'numeric',
-  month: '2-digit'
-},
-      locale: 'ko', // 한국어로 설정
-      headerToolbar: {
-        left: 'prev,next today',
-        center: 'title',
-        right: 'dayGridMonth,dayGridWeek,dayGridDay'
-      },
-      buttonText: {
-        today: '오늘',
-        month: '월',
-        week: '주',
-        day: '일'
-      },
-      showNonCurrentDates: false,
-      fixedWeekCount: false, 
-      });
-
-      const loadClient = () => {
+          year: 'numeric',
+          month: '2-digit'
+        },
+        headerToolbar: {
+          left: 'prev,next today',
+          center: 'title',
+          right: 'dayGridMonth,dayGridWeek,dayGridDay'
+        },
+        buttonText: {
+          today: '오늘',
+          month: '월',
+          week: '주',
+          day: '일'
+        },
+        showNonCurrentDates: false,
+        fixedWeekCount: false
+      }
+    }
+  },
+  mounted() {
+    this.initGoogleApi();
+  },
+  methods: {
+    async initGoogleApi() {
+      try {
+        await loadGapiScript();
         if (window.gapi) {
-          window.gapi.client.init({
-            apiKey: 'AIzaSyCNthSbTXgMrCG_dbuIhnk9BEVlp0ME5gM', // 공개 캘린더에 접근하기 위한 API Key
-            discoveryDocs: ['https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest'],
-          }).then(() => {
-            loadCalendarEvents();  // 공개 캘린더 이벤트 불러오기
-          }).catch(error => {
-            console.error('Error initializing gapi client:', error);
-          });
+          window.gapi.load('client', this.loadClient);
         } else {
-          console.error('gapi is not defined');
+          console.error('gapi is not defined after loading script');
         }
-      };
-  
-      const loadCalendarEvents = () => {
-        window.gapi.client.calendar.events.list({
-          calendarId: 'ko.south_korea#holiday@group.v.calendar.google.com', // 공개 캘린더 ID
-          timeMin: new Date().toISOString(), // 현재 시점 이후의 이벤트 가져오기
-          showDeleted: false,
-          singleEvents: true,
-          orderBy: 'startTime',
-        }).then((response) => {
-          events.value = response.result.items;
-          calendarOptions.value.events = events.value.map(event => ({
-            title: event.summary,
-            start: event.start.dateTime || event.start.date,
-            end: event.end.dateTime || event.end.date
-          }));
-        }).catch(error => {
-          console.error('Error loading calendar events:', error);
-        });
-      };
-  
-      onMounted(async () => {
-        try {
-          await loadGapiScript();
-          if (window.gapi) {
-            window.gapi.load('client', loadClient);
-          } else {
-            console.error('gapi is not defined after loading script');
-          }
-        } catch (error) {
-          console.error('Error loading gapi script:', error);
-        }
-      });
-  
-      return {
-        calendarOptions
-      };
+      } catch (error) {
+        console.error('Error loading gapi script:', error);
+      }
     },
-  };
-  </script>
-  
-  <style scoped>
-  .fc .fc-daygrid-day-frame {
+    loadClient() {
+      window.gapi.client.init({
+        apiKey: 'AIzaSyCNthSbTXgMrCG_dbuIhnk9BEVlp0ME5gM',
+        discoveryDocs: ['https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest'],
+      }).then(() => {
+        this.loadCalendarEvents();
+      }).catch(error => {
+        console.error('Error initializing gapi client:', error);
+      });
+    },
+    loadCalendarEvents() {
+      window.gapi.client.calendar.events.list({
+        calendarId: 'ko.south_korea#holiday@group.v.calendar.google.com',
+        timeMin: new Date().toISOString(),
+        showDeleted: false,
+        singleEvents: true,
+        orderBy: 'startTime',
+      }).then((response) => {
+        this.events = response.result.items;
+        this.calendarOptions.events = this.events.map(event => ({
+          title: event.summary,
+          start: event.start.dateTime || event.start.date,
+          end: event.end.dateTime || event.end.date
+        }));
+      }).catch(error => {
+        console.error('Error loading calendar events:', error);
+      });
+    }
+  }
+}
+</script>
+
+<style scoped>
+::v-deep(.fc .fc-daygrid-day-frame) {
   background-color: #fff !important;
 }
-</style>
+
+::v-deep(.fc-icon-chevron-right::before),
+::v-deep(.fc-icon-chevron-left::before) {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+</style>

ee0e506

5fa62fb

client/views/pages/main/Main.vue

--- client/views/pages/main/Main.vue

+++ client/views/pages/main/Main.vue


 <template>
-    <div class="sidemenu">
+    <div class="side-content">
         <div class="myinfo">
             <div class="name-box">
                 <div class="img-area">

             </div>
             <div class="boxs" style="width: 100%;">
                 <div class="title">
-                    <h2>오늘의 주요 </h2>
+                    <h2>프로젝트 현황</h2>
                     <div class="sub">더보기<img :src="moreicon" alt=""></div>
                 </div>
                 <div class="board tbl-wrap">

                 </div>
             </div>
         </div>
-        <GoogleCalendar />
+        <div class="schedule-zone">
+            <GoogleCalendar />
+            <div class="boxs">
+                <div class="title">
+                    <h2>오늘의 주요 일정</h2>
+                    <!-- <div class="sub">더보기<img :src="moreicon" alt=""></div> -->
+                </div>
+            </div>
+        </div>
     </div>
 </template>
 

ee0e506

client/views/pages/main/Main2.vue (deleted)

--- client/views/pages/main/Main2.vue

...	...	@@ -1,24 +0,0 @@
	1	-<template>
	2	- <div>Main2.vue</div>
	3	-</template>
	4	-
	5	-<script>
	6	-export default {
	7	- data () {
	8	- return {
	9	- }
	10	- },
	11	- methods: {
	12	-
	13	- },
	14	- watch: {
	15	-
	16	- },
	17	- computed: {
	18	-
	19	- },
	20	- mounted() {
	21	- console.log('Main2 mounted');
	22	- }
	23	-}
	24	-</script>(파일 끝에 줄바꿈 문자 없음)

Add a comment

Open 0
Closed 0

List

...	...	@@ -1,5 +1,5 @@
1	1	<template>
2		- <div class="sidemenu">
	2	+ <div class="side-content">
3	3	<div class="myinfo">
4	4	<div class="name-box">
5	5	<div class="img-area">
...	...	@@ -86,7 +86,7 @@
86	86	</div>
87	87	<div class="boxs" style="width: 100%;">
88	88	<div class="title">
89		- <h2>오늘의 주요 </h2>
	89	+ <h2>프로젝트 현황</h2>
90	90	<div class="sub">더보기<img :src="moreicon" alt=""></div>
91	91	</div>
92	92	<div class="board tbl-wrap">
...	...	@@ -107,7 +107,15 @@
107	107	</div>
108	108	</div>
109	109	</div>
110		- <GoogleCalendar />
	110	+ <div class="schedule-zone">
	111	+ <GoogleCalendar />
	112	+ <div class="boxs">
	113	+ <div class="title">
	114	+ <h2>오늘의 주요 일정</h2>
	115	+ <!-- <div class="sub">더보기<img :src="moreicon" alt=""></div> -->
	116	+ </div>
	117	+ </div>
	118	+ </div>
111	119	</div>
112	120	</template>
113	121

...	...	@@ -50,16 +50,18 @@
50	50
51	51	}
52	52
53		-.sidemenu {
54		- width: 350px;
	53	+.side-content{
	54	+ width: 400px;
	55	+ height: 100%;
	56	+ @include flex-layout(flex, flex-start, space-between, column);
55	57	margin-right: 20px;
56		-
57		- .myinfo {
58		- text-align: center;
59		- padding: 25px 20px 20px 20px;
60		- margin-bottom: 20px;
61		- border-radius: 20px;
62		- background: linear-gradient(to bottom, #1F3F99, #3354CE);
	58	+ .myinfo {
	59	+ width: 100%;
	60	+ text-align: center;
	61	+ padding: 25px 20px 20px 20px;
	62	+ margin-bottom: 20px;
	63	+ border-radius: 20px;
	64	+ background: linear-gradient(to bottom, #1F3F99, #3354CE);
63	65
64	66	.name-box {
65	67	margin-bottom: 30px;
...	...	@@ -247,78 +249,15 @@
247	249
248	250	}
249	251
250		- .menu-box {
251		- summary {
252		- cursor: pointer;
253		- border: 1px solid #213F9A;
254		- color: #000;
255		- display: flex;
256		- justify-content: space-between;
257		- font-size: 17px;
258		- text-align: left;
259		- padding: 10px 15px;
260		- border-radius: 10px;
261		-
262		- .icon {
263		- display: none;
264		- }
265		- }
266		-
267		- margin-top: 20px;
268		-
269		- ul {
270		- padding: 10px 10px 0px 10px;
271		- }
272		-
273		- li {
274		- margin-bottom: 10px;
275		-
276		- a {
277		- display: flex;
278		- justify-content: space-between;
279		- width: 100%;
280		- }
281		-
282		-
283		- }
284		- }
285		- .menu-box.danil{
286		- a{display: block;
287		- cursor: pointer;
288		- border: 1px solid #213F9A;
289		- color: #000;
290		-
291		- font-size: 17px;
292		- text-align: left;
293		- padding: 10px 15px;
294		- border-radius: 10px;
295		- margin-bottom: 10px;
296		- li{
297		- display: flex;
298		- justify-content: space-between;
299		- margin-bottom: 0px;
300		- .icon {
301		- display: none;
302		- }
303		- }
304		- }
305		- a.active-link{
306		- background: #213F9A;
307		- li{
308		- p{
309		- color: #fff;
310		- }
311		- .icon {
312		- display: block;
313		- }
314		- }
315		- }
316		- }
317		- .boxs {
	252	+ .boxs {
318	253	background-color: #fff;
319	254	border-radius: 20px;
320	255	padding: 20px;
321	256	margin-bottom: 20px;
	257	+
	258	+ &:last-child {
	259	+ margin-bottom: 0;
	260	+ }
322	261
323	262	.box {
324	263	display: flex;
...	...	@@ -442,6 +381,82 @@
442	381
443	382	}
444	383
	384	+}
	385	+
	386	+.sidemenu {
	387	+ width: 350px;
	388	+ margin-right: 20px;
	389	+
	390	+
	391	+
	392	+ .menu-box {
	393	+ summary {
	394	+ cursor: pointer;
	395	+ border: 1px solid #213F9A;
	396	+ color: #000;
	397	+ display: flex;
	398	+ justify-content: space-between;
	399	+ font-size: 17px;
	400	+ text-align: left;
	401	+ padding: 10px 15px;
	402	+ border-radius: 10px;
	403	+
	404	+ .icon {
	405	+ display: none;
	406	+ }
	407	+ }
	408	+
	409	+ margin-top: 20px;
	410	+
	411	+ ul {
	412	+ padding: 10px 10px 0px 10px;
	413	+ }
	414	+
	415	+ li {
	416	+ margin-bottom: 10px;
	417	+
	418	+ a {
	419	+ display: flex;
	420	+ justify-content: space-between;
	421	+ width: 100%;
	422	+ }
	423	+
	424	+
	425	+ }
	426	+ }
	427	+ .menu-box.danil{
	428	+ a{display: block;
	429	+ cursor: pointer;
	430	+ border: 1px solid #213F9A;
	431	+ color: #000;
	432	+
	433	+ font-size: 17px;
	434	+ text-align: left;
	435	+ padding: 10px 15px;
	436	+ border-radius: 10px;
	437	+ margin-bottom: 10px;
	438	+ li{
	439	+ display: flex;
	440	+ justify-content: space-between;
	441	+ margin-bottom: 0px;
	442	+ .icon {
	443	+ display: none;
	444	+ }
	445	+ }
	446	+ }
	447	+ a.active-link{
	448	+ background: #213F9A;
	449	+ li{
	450	+ p{
	451	+ color: #fff;
	452	+ }
	453	+ .icon {
	454	+ display: block;
	455	+ }
	456	+ }
	457	+ }
	458	+ }
	459	+
445	460	.router-link-active p {
446	461	color: #213F9A;
447	462	/* 원하는 색상으로 변경 */
...	...	@@ -538,6 +553,7 @@
538	553
539	554	.blue-box {
540	555	width: 550px;
	556	+ height: calc(100% - 46px);
541	557	background-color: #D7DCF1;
542	558	border-radius: 10px;
543	559	padding: 32px;
...	...	@@ -1477,4 +1493,13 @@
1477	1493	mark {
1478	1494	background-color: transparent;
1479	1495	}
	1496	+}
	1497	+
	1498	+.schedule-zone{
	1499	+ @include flex-layout(flex, stretch);
	1500	+ height: calc(100% - 311px);
	1501	+ gap: 4rem;
	1502	+ .fc-direction-ltr{
	1503	+ width: 550px;
	1504	+ }
1480	1505	} (파일 끝에 줄바꿈 문자 없음)

...	...	@@ -32,6 +32,12 @@
32	32	.container{height: 100%; padding: 2rem; background-color: #EFF1FA;}
33	33	.main-wrap{
34	34	display: flex;
	35	+ height: calc(100% - 60px);
35	36	.sidemenu{flex-shrink: 0;}
36		- .content{width: 100%; padding: 30px; background-color: #fff; border-radius: 20px;}
	37	+ .content{
	38	+ width: 100%;
	39	+ padding: 30px;
	40	+ background-color: #fff;
	41	+ border-radius: 20px;
	42	+ }
37	43	} (파일 끝에 줄바꿈 문자 없음)

...	...	@@ -18,6 +18,11 @@
18	18	font-size: var(--#{$prefix}fz-body-md);
19	19	overflow-x: hidden;
20	20	}
	21	+
	22	+#root{
	23	+ width: 100%;
	24	+ height: 100%;
	25	+}
21	26	*:focus {
22	27	@include focus();
23	28	}

...	...	@@ -1,114 +1,113 @@
1	1	<template>
2		- <div>
3		- <FullCalendar :options="calendarOptions" />
4		- </div>
5		- </template>
6		-
7		- <script>
8		- import { ref, onMounted } from 'vue';
9		- import FullCalendar from '@fullcalendar/vue3';
10		- import dayGridPlugin from '@fullcalendar/daygrid';
	2	+ <FullCalendar :options="calendarOptions" />
	3	+</template>
11	4
	5	+<script>
	6	+import FullCalendar from '@fullcalendar/vue3'
	7	+import dayGridPlugin from '@fullcalendar/daygrid'
12	8
13		-
14		- // gapi 스크립트 로드 함수
15		- function loadGapiScript() {
16		- return new Promise((resolve, reject) => {
17		- const script = document.createElement('script');
18		- script.src = 'https://apis.google.com/js/api.js';
19		- script.onload = resolve; // 로드 성공
20		- script.onerror = reject; // 로드 실패
21		- document.head.appendChild(script);
22		- });
23		- }
24		-
25		- export default {
26		- name: 'GoogleCalendar',
27		- components: {
28		- FullCalendar
29		- },
30		- setup() {
31		- const events = ref([]);
32		- const calendarOptions = ref({
	9	+// gapi 스크립트 로드 함수
	10	+function loadGapiScript() {
	11	+ return new Promise((resolve, reject) => {
	12	+ const script = document.createElement('script');
	13	+ script.src = 'https://apis.google.com/js/api.js';
	14	+ script.onload = resolve;
	15	+ script.onerror = reject;
	16	+ document.head.appendChild(script);
	17	+ });
	18	+}
	19	+
	20	+export default {
	21	+ name: 'GoogleCalendar',
	22	+ components: {
	23	+ FullCalendar
	24	+ },
	25	+ data() {
	26	+ return {
	27	+ events: [],
	28	+ calendarOptions: {
33	29	plugins: [dayGridPlugin],
34	30	initialView: 'dayGridMonth',
35	31	events: [],
	32	+ locale: 'ko',
36	33	titleFormat: {
37		- year: 'numeric',
38		- month: '2-digit'
39		-},
40		- locale: 'ko', // 한국어로 설정
41		- headerToolbar: {
42		- left: 'prev,next today',
43		- center: 'title',
44		- right: 'dayGridMonth,dayGridWeek,dayGridDay'
45		- },
46		- buttonText: {
47		- today: '오늘',
48		- month: '월',
49		- week: '주',
50		- day: '일'
51		- },
52		- showNonCurrentDates: false,
53		- fixedWeekCount: false,
54		- });
55		-
56		- const loadClient = () => {
	34	+ year: 'numeric',
	35	+ month: '2-digit'
	36	+ },
	37	+ headerToolbar: {
	38	+ left: 'prev,next today',
	39	+ center: 'title',
	40	+ right: 'dayGridMonth,dayGridWeek,dayGridDay'
	41	+ },
	42	+ buttonText: {
	43	+ today: '오늘',
	44	+ month: '월',
	45	+ week: '주',
	46	+ day: '일'
	47	+ },
	48	+ showNonCurrentDates: false,
	49	+ fixedWeekCount: false
	50	+ }
	51	+ }
	52	+ },
	53	+ mounted() {
	54	+ this.initGoogleApi();
	55	+ },
	56	+ methods: {
	57	+ async initGoogleApi() {
	58	+ try {
	59	+ await loadGapiScript();
57	60	if (window.gapi) {
58		- window.gapi.client.init({
59		- apiKey: 'AIzaSyCNthSbTXgMrCG_dbuIhnk9BEVlp0ME5gM', // 공개 캘린더에 접근하기 위한 API Key
60		- discoveryDocs: ['https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest'],
61		- }).then(() => {
62		- loadCalendarEvents(); // 공개 캘린더 이벤트 불러오기
63		- }).catch(error => {
64		- console.error('Error initializing gapi client:', error);
65		- });
	61	+ window.gapi.load('client', this.loadClient);
66	62	} else {
67		- console.error('gapi is not defined');
	63	+ console.error('gapi is not defined after loading script');
68	64	}
69		- };
70		-
71		- const loadCalendarEvents = () => {
72		- window.gapi.client.calendar.events.list({
73		- calendarId: 'ko.south_korea#holiday@group.v.calendar.google.com', // 공개 캘린더 ID
74		- timeMin: new Date().toISOString(), // 현재 시점 이후의 이벤트 가져오기
75		- showDeleted: false,
76		- singleEvents: true,
77		- orderBy: 'startTime',
78		- }).then((response) => {
79		- events.value = response.result.items;
80		- calendarOptions.value.events = events.value.map(event => ({
81		- title: event.summary,
82		- start: event.start.dateTime \|\| event.start.date,
83		- end: event.end.dateTime \|\| event.end.date
84		- }));
85		- }).catch(error => {
86		- console.error('Error loading calendar events:', error);
87		- });
88		- };
89		-
90		- onMounted(async () => {
91		- try {
92		- await loadGapiScript();
93		- if (window.gapi) {
94		- window.gapi.load('client', loadClient);
95		- } else {
96		- console.error('gapi is not defined after loading script');
97		- }
98		- } catch (error) {
99		- console.error('Error loading gapi script:', error);
100		- }
101		- });
102		-
103		- return {
104		- calendarOptions
105		- };
	65	+ } catch (error) {
	66	+ console.error('Error loading gapi script:', error);
	67	+ }
106	68	},
107		- };
108		- </script>
109		-
110		- <style scoped>
111		- .fc .fc-daygrid-day-frame {
	69	+ loadClient() {
	70	+ window.gapi.client.init({
	71	+ apiKey: 'AIzaSyCNthSbTXgMrCG_dbuIhnk9BEVlp0ME5gM',
	72	+ discoveryDocs: ['https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest'],
	73	+ }).then(() => {
	74	+ this.loadCalendarEvents();
	75	+ }).catch(error => {
	76	+ console.error('Error initializing gapi client:', error);
	77	+ });
	78	+ },
	79	+ loadCalendarEvents() {
	80	+ window.gapi.client.calendar.events.list({
	81	+ calendarId: 'ko.south_korea#holiday@group.v.calendar.google.com',
	82	+ timeMin: new Date().toISOString(),
	83	+ showDeleted: false,
	84	+ singleEvents: true,
	85	+ orderBy: 'startTime',
	86	+ }).then((response) => {
	87	+ this.events = response.result.items;
	88	+ this.calendarOptions.events = this.events.map(event => ({
	89	+ title: event.summary,
	90	+ start: event.start.dateTime \|\| event.start.date,
	91	+ end: event.end.dateTime \|\| event.end.date
	92	+ }));
	93	+ }).catch(error => {
	94	+ console.error('Error loading calendar events:', error);
	95	+ });
	96	+ }
	97	+ }
	98	+}
	99	+</script>
	100	+
	101	+<style scoped>
	102	+::v-deep(.fc .fc-daygrid-day-frame) {
112	103	background-color: #fff !important;
113	104	}
114		-</style> (파일 끝에 줄바꿈 문자 없음)
	105	+
	106	+::v-deep(.fc-icon-chevron-right::before),
	107	+::v-deep(.fc-icon-chevron-left::before) {
	108	+ position: absolute;
	109	+ top: 50%;
	110	+ left: 50%;
	111	+ transform: translate(-50%, -50%);
	112	+}
	113	+</style>

Delete comment