<template>
  <div class="layout" :class="{ 'code-collapsed': isCollapsed }">
    <HomeButton />
    <div class="reveal" ref="revealRef">
      <div class="slides">
        <section
          v-for="slide in slides"
          :key="slide.key"
          :data-key="slide.key"
        >
          <h2 v-html="slide.title" />
          <ul>
            <li v-for="(bullet, i) in slide.bullets" :key="i" v-html="bullet" />
          </ul>

          <div v-if="slide.images && slide.images.length > 0" class="slide-images">
            <img 
              v-for="(imgUrl, idx) in slide.images" 
              :key="idx" 
              :src="imgUrl" 
              class="inline-image"
            />
          </div>
          <pre v-if="slide.code?.html"><code class="language-html"></code></pre>
          <pre v-if="slide.code?.css"><code class="language-css"></code></pre>
          <pre v-if="slide.code?.js"><code class="language-javascript"></code></pre>
        </section>

        <section>
          <h1 id="toc_30">👏🏽</h1>
          <h2 id="수고하셨어요-o">수고하셨어요 ^o^</h2>
        </section>
      </div>
    </div>

    <CodeEditor
      :html="currentCode.html"
      :css="currentCode.css"
      :js="currentCode.js"
      @update="onCodeUpdate"
    />
  </div>
</template>


<script>
import HomeButton from "@/components/HomeButton.vue";

import Reveal from "reveal.js/dist/reveal.js";
import "reveal.js/dist/reveal.css";
import initializeReveal from "@/assets/js/revealSetup.js";
import CodeEditor from '@/components/services/editor/CodeEditor.vue';

export default {
	components: {
		HomeButton: HomeButton,
    CodeEditor: CodeEditor
	},
	data() {
		return {
			isCollapsed: false,
      currentKey: '', 
      slides: [
        {
          key: 'heading',
          title: 'Heading 태그 (h1 ~ h6) <a href="https://ko.khanacademy.org/computing/computer-programming/html-css/intro-to-html/pt/html-basics" target="_blank"><i class="fa-solid fa-file-code"></i></a>',
          bullets: [
'&lt;h1&gt; ~ &lt;h6&gt;는 제목을 나타냅니다.',
'숫자가 커질수록 중요도는 낮아지고 글자 크기도 작아집니다.'
          ],
          images: [],
          code: {
            html: `<h1>가장 중요한 제목</h1>\n<h2>두 번째 제목</h2>\n<h3>세 번째 제목</h3>\n<h4>네 번째 제목</h4>\n<h5>다섯 번째 제목</h5>\n<h6>여섯 번째 제목</h6>`,
            css: `h1 { color: red; }`,
            js: `console.log('heading js');`
          }
        },
        {
  key: "htmlPTag",
  title: 'HTML p 태그 <a href="https://ko.khanacademy.org/computing/computer-programming/html-css/intro-to-html/pt/html-basics" target="_blank"><i class="fa-solid fa-file-code"></i></a>',
  bullets: [
    '&lt;p&gt; 태그는 문단(paragraph)을 나타냅니다.',
    '기본적으로 위아래 여백이 있으며, 텍스트를 구분할 때 사용됩니다.',
    '여러 개의 &lt;p&gt; 태그를 사용하면 문단을 나눌 수 있습니다.'
  ],
  images: [],
  code: {
    html: `<p>이것은 첫 번째 문단입니다.</p>
<p>이것은 두 번째 문단입니다.</p>`,
    css: `p {
  color: #333;
  font-size: 16px;
  line-height: 1.6;
}`,
    js: `// JavaScript는 필요하지 않습니다.`
  }
},

{
  key: "htmlAcrosticSimple",
  title: '실습: 제목을 정해서 삼행시를 지어보세요! <a href="https://ko.khanacademy.org/computing/computer-programming/html-css/intro-to-html/pc/challenge-write-a-poem" target="_blank"><i class="fa-solid fa-file-code"></i></a>',
  bullets: [
    "HTML의 `h`, `p`, `br` 태그만 사용합니다.",
    "삼행시의 각 줄은 &lt;p&gt; 태그로 나눠 작성합니다.",
    "&lt;br&gt; 태그로 줄바꿈을 추가로 넣을 수 있습니다.",
    "삼행시 형식에 따라 각 줄 앞 글자를 강조(&lt;strong&gt;)해봅니다."
  ],
  images: [],
  code :{
  html: `
    
  `,
  css: `
    p {
      font-size: 1.1em;
      margin-bottom: 0.6em;
    }
    strong {
      color: #2a7ae2;
    }
  `,
  js: ""
  }
},
        {
          key: 'aTag',
          title: '&lt;a&gt; 태그 <a href="https://ko.khanacademy.org/computing/computer-programming/html-css/html-tags-continued/pt/html-links" target="_blank"><i class="fa-solid fa-file-code"></i></a>',
          bullets: [
'하이퍼링크를 생성합니다.',
'&lt;href&gt;는 목적지 주소, &lt;target&gt;은 새창 여부 등을 설정합니다.'
          ],
          images: [],
          code: {
            html: `<a href="https://naver.com" target="_blank">Visit Example</a>`,
            css: '',
            js: ''
          }
        },
        {
          key: 'imgTag',
          title: '&lt;img&gt; 태그 <a href="https://ko.khanacademy.org/computing/computer-programming/html-css/intro-to-html/pt/html-images" target="_blank"><i class="fa-solid fa-file-code"></i></a>',
          bullets: [
'이미지를 문서에 삽입합니다.',
'&lt;src&gt;는 이미지 경로, &lt;alt&gt;는 대체 텍스트를 지정합니다.'
          ],
          images: [],
          code: {
            html: `<img src="https://swhcoding.com/app/assets/img/logo.png" alt="예시 이미지">`,
            css: '',
            js: ''
          }
        },
{
  key: "htmlImageLinkQuiz",
  title: '실습: 이미지를 클릭하면 좋아하는 유튜브 링크를 띄워보세요! <a href="https://ko.khanacademy.org/computing/computer-programming/html-css/intro-to-html/pc/challenge-a-picture-perfect-trip" target="_blank"><i class="fa-solid fa-file-code"></i></a> ',
  bullets: [
    "&lt;a&gt; 태그를 사용하여 링크를 만듭니다.",
    "&lt;img&gt; 태그를 &lt;a&gt; 태그 안에 사용해 이미지를 보여줍니다.",
    "이미지 클릭 시 링크가 새 창에서 열리도록 `target=\"_blank\"`를 사용합니다.",
    "자바스크립트 없이도 하이퍼링크 기능을 구현할 수 있습니다."
  ],
  images: [],
  code : {
  html: `
    <h3>🎯 좋아하는 유튜브 영상 공유하기</h3>
    <p>아래 이미지를 클릭하면 유튜브 링크가 새 창에서 열립니다.</p>

  `,
  css: `
    img {
      border: 2px solid #ccc;
      border-radius: 8px;
      transition: transform 0.2s;
    }

    img:hover {
      transform: scale(1.05);
      border-color: #f00;
    }
  `,
  js: ""
  }
},
        {
          key: 'htmlList',
          title: 'HTML 리스트 문법 <a href="https://ko.khanacademy.org/computing/computer-programming/html-css/intro-to-html/pt/html-lists" target="_blank"><i class="fa-solid fa-file-code"></i></a>',
          bullets: [
'&lt;ul&gt;은 순서 없는 리스트를 생성합니다.',
'&lt;ol&gt;은 순서 있는 리스트를 생성합니다.',
'&lt;li&gt;는 리스트 항목을 나타냅니다.',
'리스트는 중첩하여 만들 수도 있습니다.'
          ],
          images: [],
          code: {
            html: `
<h3>비순차 리스트 (ul)</h3>
<ul>
  <li>사과</li>
  <li>바나나</li>
  <li>포도</li>
</ul>

<h3>순차 리스트 (ol)</h3>
<ol>
  <li>준비</li>
  <li>시작</li>
  <li>완료</li>
</ol>

<h3>중첩 리스트</h3>
<ul>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>Backend</li>
</ul>
              `,
            css: `
ul, ol {
  margin: 10px 0;
  padding-left: 20px;
}
ul ul {
  list-style-type: circle;
}
ol {
  list-style-type: decimal;
}
              `,
            js: ''
          }
        },
{
  key: "htmlScheduleFoodListQuiz",
  title: '실습: 오늘 일과표 + 음식 리스트 만들기 <a href="https://ko.khanacademy.org/computing/computer-programming/html-css/intro-to-html/pc/challenge-your-learning-list" target="_blank"><i class="fa-solid fa-file-code"></i></a> <a href="https://ko.khanacademy.org/computing/computer-programming/html-css/html-tags-continued/pc/challenge-links-you-love" target="_blank"><i class="fa-solid fa-file-code"></i></a>',
  bullets: [
    "오늘 하루 일과를 &lt;ol&gt; 태그로 앞에 숫자를 붙여 정리해보세요.",
    "한 줄 띄우고, &lt;ul&gt; 태그를 사용하여 먹고 싶은 음식 리스트를 작성합니다.",
    "각 음식 이름은 &lt;li&gt; 태그안에 &lt;a&gt; 태그로 감싸서, 클릭 시 해당 음식 사진이 열리도록 합니다.",
    "각 음식 사진은 인터넷에서 링크를 찾아 href 속성에 넣고 `target=\"_blank\"` 속성을 추가하세요.",
    "자바스크립트는 사용하지 않습니다."
  ],
  images: [],
  code : {
  html: `
    <h3>📅 오늘의 일과표</h3>

    <br>

    <h3>🍽️ 먹고 싶은 음식 리스트</h3>
    
  `,
  css: `
    ol, ul {
      padding-left: 20px;
    }
    a {
      color: #3366cc;
      text-decoration: none;
    }
    a:hover {
      text-decoration: underline;
    }
  `,
  js: ""
  }
},
        {
          key: 'htmlTable',
          title: 'HTML 테이블 <a href="https://ko.khanacademy.org/computing/computer-programming/html-css/html-tags-continued/pt/html-tables" target="_blank"><i class="fa-solid fa-file-code"></i></a>',
          bullets: [
'&lt;table&gt; 태그는 표(table)를 만듭니다.',
'&lt;tr&gt; (table row)는 행(row)을 나타냅니다.',
'&lt;th&gt; (table header)는 제목 셀을 나타내며 기본적으로 굵고 가운데 정렬됩니다.',
'&lt;td&gt; (table data)는 일반 셀을 나타냅니다.',
'표에 테두리나 간격을 주기 위해 `border`, `cellpadding`, `cellspacing` 속성을 쓸 수 있습니다.'
          ],
          images: [],
          code: {
            html: `
<h3>HTML 테이블 예시</h3>
<table border="1" cellpadding="8">
  <tr>
    <th>이름</th>
    <th>나이</th>
    <th>직업</th>
  </tr>
  <tr>
    <td>홍길동</td>
    <td>30</td>
    <td>개발자</td>
  </tr>
  <tr>
    <td>김유신</td>
    <td>28</td>
    <td>디자이너</td>
  </tr>
</table>
              `,
            css: `
table {
  border-collapse: collapse;
  width: 100%;
}
th {
  background-color: #f2f2f2;
}
th, td {
  border: 1px solid #ccc;
  text-align: center;
}
              `,
            js: ''
          }
        },

        {
          key: 'htmlTableAdvanced',
          title: 'HTML 테이블 고급 문법',
          bullets: [
'&lt;thead&gt;는 표의 헤더(제목) 영역을, &lt;tbody&gt;는 본문 데이터를 묶습니다.',
'&lt;colspan&gt;은 셀이 가로 방향으로 여러 칸을 병합합니다.',
'&lt;rowspan&gt;은 셀이 세로 방향으로 여러 행을 병합합니다.'
          ],
          images: [],
          code: {
            html: `
<h3>고급 HTML 테이블 예시</h3>
<table>
  <thead>
    <tr>
      <th rowspan="2">이름</th>
      <th colspan="2">연락처</th>
    </tr>
    <tr>
      <th>이메일</th>
      <th>전화번호</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>홍길동</td>
      <td>hong@example.com</td>
      <td>010-1234-5678</td>
    </tr>
    <tr>
      <td>김유신</td>
      <td>kim@example.com</td>
      <td>010-8765-4321</td>
    </tr>
  </tbody>
</table>
              `,
            css: `
table {
  border-collapse: collapse;
  width: 100%;
  margin-top: 10px;
}
th, td {
  border: 1px solid #666;
  padding: 8px;
  text-align: center;
}
thead {
  background-color: #f0f0f0;
}
              `,
            js: ''
          }
        },
{
  key: "htmlTableFamilyQuiz",
  title: '퀴즈: 아빠, 엄마, 나의 나이, 생일, 좋아하는 음식을 표로 표현해보세요 <a href="https://ko.khanacademy.org/computing/computer-programming/html-css/html-tags-continued/pc/challenge-the-dinner-table" target="_blank"><i class="fa-solid fa-file-code"></i></a>',
  bullets: [
    "테이블 태그만 사용하세요 (JS 사용 금지)"
  ],
  images: ['/coding/html/table.png'],
  code :{
  html: `<table border="1" cellpadding="8" cellspacing="0">
</table>`,
  css: `
table {
  border-collapse: collapse;
  width: 100%;
}
th {
  background-color: #f0f0f0;
  vertical-align: middle;
  width: 100px;
}
td {
  padding: 6px 12px;
}
  `,
  js: ""
}
},
        {
          key: 'htmlIframe',
          title: 'HTML iframe 문법',
          bullets: [
'&lt;iframe&gt;은 다른 웹 페이지나 문서를 현재 페이지에 삽입할 때 사용됩니다.',
'`src` 속성으로 삽입할 문서의 URL을 지정합니다.',
'`width`, `height` 속성으로 크기를 조정할 수 있습니다.',
'보안 또는 제한된 표시를 위해 `sandbox`, `allow` 등의 속성도 사용할 수 있습니다.'
          ],
          images: [],
          code: {
            html: `
<h3>기본 iframe 예시</h3>
<iframe src="https://www.example.com" width="100%" height="200" title="예제 사이트"></iframe>

<h3>YouTube 동영상 포함</h3>
<iframe width="560" height="315"
  src="https://www.youtube.com/embed/dQw4w9WgXcQ"
  title="YouTube video player"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen>
</iframe>
              `,
            css: `
iframe {
  border: 2px solid #ccc;
  border-radius: 6px;
  margin-bottom: 20px;
}
              `,
            js: ''
          }
        },
{
  key: "htmlIframeQuiz",
  title: "퀴즈: 구글, 유튜브 사이트를 각각 띄워봅시다!",
  bullets: [
    "테이블의 첫 열에는 사이트 이름을 적습니다.",
    "두 번째 열에는 각 사이트를 iframe으로 띄웁니다.",
    "iframe 크기는 적당히 조절해서 보이게 하세요.",
    "자바스크립트 없이, 테이블과 iframe 태그만 사용하세요."
  ],
  images: [],
  code : {
  html: `
<table border="1" cellpadding="8" cellspacing="0" style="width: 100%; table-layout: fixed;">
  <tr>
    <th>사이트</th>
    <th>사이트 보기</th>
  </tr>
  <tr>
    <td>네이버</td>
    <td><iframe src="https://www.naver.com" width="300" height="200" style="border:none;"></iframe></td>
  </tr>
</table>
  `,
  css: `
table {
  border-collapse: collapse;
}
th, td {
  text-align: center;
  vertical-align: middle;
}
  `,
  js: ""
}
},
        {
          key: 'divTag',
          title: '&lt;div&gt; 태그',
          bullets: [
'블록 요소이며, 레이아웃 구성이나 그룹화에 사용됩니다.',
'스타일이나 스크립트를 적용할 때 많이 사용됩니다.'
          ],
          images: [],
          code: {
            html: `<div class="box"><p>내용이 들어가는 영역입니다.</p></div>`,
            css: `.box { padding: 1em; background: #eee; }`,
            js: ''
          }
        },
        {
  key: "cssFontStyleInlineSplit",
  title: 'CSS: 글자 크기, 색상, 배경색 (각 속성별 예시) <a href="https://ko.khanacademy.org/computing/computer-programming/html-css/intro-to-css/pt/css-basics" target="_blank"><i class="fa-solid fa-file-code"></i></a>',
  bullets: [
    "`font-size`: 글자의 크기를 설정합니다. (예: `18px`, `1.5em`)",
    "`color`: 글자의 색상을 지정합니다. (예: `red`, `#333`)",
    "`background-color`: 요소의 배경색을 설정합니다. (예: `yellow`, `#f0f0f0`)",
    "`style` 속성을 이용하면 태그마다 직접 지정할 수 있습니다.",
    "&lt;span&gt; 태그를 이용해 특정 부분에만 스타일을 적용할 수 있어요."
  ],
  images: [],
  code : {
  html: `
<p style="font-size: 24px;">이 문장은 큰 글꼴 크기로 표시됩니다.</p>
<p style="color: green;">이 문장은 <span style="font-size: 24px;">초록색</span>으로 표시됩니다.</p>
<p style="background-color: lightgray;">이 문장은 밝은 회색 배경을 가집니다.</p>
  `,
  css: ``,
  js: ``
  }
},

{
  key: "htmlPartialStylePractice",
  title: '실습: 특정 글자만 색깔과 크기를 다르게 바꿔보세요! <a href="https://ko.khanacademy.org/computing/computer-programming/html-css/intro-to-css/pc/challenge-colorful-creature" target="_blank"><i class="fa-solid fa-file-code"></i></a>',
  bullets: [
    "본문 전체는 초록색, 그중 '초록색' 글자만 글자 크기 24px로 키워봅시다.",
    "배경색은 하늘색(skyblue), 제목은 빨간색으로 유지해요.",
    "`style` 속성으로 개별 스타일을 지정합니다."
  ],
  images: ['/coding/html/style-quiz.png'],
  code :{
  html: `
    <!DOCTYPE html>
    <html>
      <head><title>부분 스타일 연습</title></head>
      <body style="">
        <h1 style="">제목입니다</h1>
        <p style="">
          이것은 <span style="">초록색</span>이고 글자 크기가 다릅니다.
        </p>
      </body>
    </html>
  `,
  css: ``,
  js: ``
    }
},
        {
          key: 'htmlClassId',
          title: 'HTML class 와 id 속성 <a href="https://ko.khanacademy.org/computing/computer-programming/html-css/intro-to-css/pt/css-selecting-by-id" target="_blank"><i class="fa-solid fa-file-code"></i></a> <a href="https://ko.khanacademy.org/computing/computer-programming/html-css/intro-to-css/pt/css-selecting-by-class" target="_blank"><i class="fa-solid fa-file-code"></i></a>',
          bullets: [
'`class`는 여러 요소에 공통 스타일을 적용할 때 사용합니다.',
'`id`는 문서 내에서 유일한 요소를 식별할 때 사용합니다.',
'CSS에서는 `.클래스명`으로 class 스타일을, `#아이디명`으로 id 스타일을 지정합니다.',
'하나의 요소에 여러 개의 class를 적용할 수 있습니다.'
          ],
          images: [],
          code: {
            html: `
<h3 class="section-title">class 예제</h3>
<p class="highlight">이 문장은 class 스타일이 적용된 문장입니다.</p>

<h3 id="main-title">id 예제</h3>
<p id="main-text">이 문장은 고유한 id 스타일을 따릅니다.</p>
              `,
            css: `
.section-title {
  color: navy;
  font-weight: bold;
  margin-bottom: 10px;
}

.highlight {
  background-color: #f9f9a9;
  padding: 8px;
  border-left: 5px solid gold;
}

#main-title {
  color: darkred;
  font-size: 1.5rem;
}

#main-text {
  color: #444;
  font-style: italic;
  border-bottom: 1px dotted #999;
}
              `,
            js: ''
          }
        },

{
  key: "htmlEmojiFontAwesomeWithCopy",
  title: "HTML 문법: FontAwesome 이모지 사용법 & 복사 붙여넣기 방법",
  bullets: [
    "FontAwesome은 웹에서 다양한 아이콘과 이모지를 쉽게 쓸 수 있는 라이브러리입니다.",
    "FontAwesome 공식 사이트에서 원하는 이모지를 찾아 아이콘 이름을 확인하세요: https://fontawesome.com/icons/categories/emoji",
    "원하는 아이콘을 클릭하면 클래스 이름(예: fa-regular fa-face-smile)을 알 수 있어요.",
    "이 클래스를 &lt;i&gt; 태그 안에 넣으면 아이콘이 나타납니다.",
    "페이지 &lt;head&gt; 안에 FontAwesome CDN 링크를 꼭 추가해야 합니다.",
    "직접 이모지를 검색한 다음 복사해 HTML에 붙여넣을 수도 있습니다.",
    "윈도우: `윈도우 키 + .` (점) 누르면 이모지 창이 열려 바로 복사 가능해요.",
    "맥: `Ctrl + Cmd + Space` 로 이모지 선택창을 열어 복사할 수 있습니다."
  ],
  images: [],
  code :{
  html: `
    <!-- FontAwesome CDN 추가 (head 안에 넣기) -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />

    <p>FontAwesome 아이콘 예시:</p>
    <p>기본 웃는 얼굴 아이콘: <i class="fa-regular fa-face-smile"></i></p>
    <p>빨간 하트 아이콘: <i class="fa-solid fa-heart" style="color:red;"></i></p>
    <p>큰 웃는 얼굴 아이콘: <i class="fa-regular fa-face-smile fa-3x"></i></p>

    <hr>

    <p>직접 이모지 복사 붙여넣기 예시:</p>
    <p>😊 😍 🎉 👍 🚀</p>

    <p><small>윈도우: <kbd>윈도우 키 + . (점)</kbd> <br> 맥: <kbd>Ctrl + Cmd + Space</kbd></small></p>
  `,
  css: ``,
  js: ``
  }
},
{
  key: "htmlFavoriteAnimalsQuizWithFavorite",
  title: '퀴즈: 좋아하는 동물 5종류를 소개해봅시다! <a href="https://ko.khanacademy.org/computing/computer-programming/html-css/intro-to-css/pc/challenge-seasonal-ids" target="_blank"><i class="fa-solid fa-file-code"></i></a> <a href="https://ko.khanacademy.org/computing/computer-programming/html-css/intro-to-css/pc/challenge-apples-and-bananas-classes" target="_blank"><i class="fa-solid fa-file-code"></i></a>',
  bullets: [
    "class를 사용해 동물 이름을 분홍색으로 스타일링합니다.",
    "특별히 좋아하는 동물은 id를 사용해 파란색으로 스타일링합니다.",
    "자바스크립트 없이 HTML과 CSS만 사용하세요."
  ],
  images: ['/coding/html/imozi.png'],
  code :{
  html: `
<div>
  <h2 class="animal-name" id="favorite-animal">🐱고양이</h2>
  <p>고양이는 귀여운 반려동물로, 독립적인 성격을 가지고 있습니다.</p>
</div>
  `,
  css: `
.animal-name {
  color: pink;
}

#favorite-animal {
  color: blue;
}
  `,
  js: ""
}
},
        {
          key: 'media',
          title: 'HTML5 Video와 Audio 태그',
          bullets: [
'비디오를 삽입하려면 &lt;video&gt; 태그를 사용합니다.',
'`controls` 속성으로 재생 컨트롤을 표시할 수 있습니다.',
'오디오를 삽입하려면 &lt;audio&gt; 태그를 사용합니다.',
'둘 다 여러 포맷을 지원하여 호환성을 높일 수 있습니다.'
          ],
          images: [],
          code: {
            html: `
<video controls width="320" height="240" poster="https://via.placeholder.com/320x240?text=Video+Placeholder">
  <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" type="video/webm">
  <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4">
  브라우저가 video 태그를 지원하지 않습니다.
</video>

<audio controls>
  <source src="https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3" type="audio/mpeg">
  브라우저가 audio 태그를 지원하지 않습니다.
</audio>
                  `,
            css: `
video, audio {
  display: block;
  margin-bottom: 1em;
  max-width: 100%;
}
              `,
            js: ``
          }
        },
        {
          key: 'htmlWithJS',
          title: 'HTML에서 JavaScript 적용하기',
          bullets: [
'&lt;script&gt; 태그 대신 외부·내부 스크립트를 분리해 관리할 수도 있습니다.',
'HTML 요소를 JS에서 선택한 뒤 `addEventListener`로 이벤트를 연결합니다.',
'`defer`·`async` 속성을 이용하면 로딩 순서를 제어할 수 있습니다.'
          ],
          images: [],
          code: {
            html: `
<button id="changeBtn">클릭해 보세요</button>
<p id="message">안녕하세요!</p>
              `,
            css: `
button {
  padding: 8px 16px;
  font-size: 16px;
  cursor: pointer;
}
#message {
  margin-top: 10px;
  color: green;
  font-weight: bold;
}
              `,
            js: `
// 버튼과 메시지 요소 선택
const btn = document.getElementById('changeBtn');
const msg = document.getElementById('message');

// 클릭 이벤트 연결
btn.addEventListener('click', () => {
  msg.textContent = 'JavaScript가 작동했어요!';
});
              `
          }
        },
        
        {
          key: 'svg-0',
          title: 'HTML5 SVG 기초',
          bullets: [
'SVG는 벡터 그래픽을 표현하는 XML 기반 이미지 형식입니다.',
'&lt;svg&gt; 태그 안에 도형, 경로 등을 정의합니다.',
'벡터라 크기 조절해도 해상도가 깨지지 않습니다.',
'주요 도형: &lt;circle&gt;, &lt;rect&gt;, &lt;line&gt;, &lt;polygon&gt;, &lt;path&gt; 등이 있습니다.'
          ],
          images: [],
          code: {
            html: `
<svg width="200" height="150" style="border:1px solid #ccc;">
  <circle cx="50" cy="75" r="40" stroke="blue" stroke-width="3" fill="lightblue" />
  <rect x="110" y="30" width="70" height="90" stroke="green" stroke-width="3" fill="lightgreen" />
  <line x1="0" y1="0" x2="200" y2="150" stroke="red" stroke-width="2" />
</svg>
                  `,
            css: `
svg {
  display: block;
  margin: 1em auto;
}
              `,
            js: ``
          }
        },
        {
          key: 'svg-1',
          title: 'HTML5 SVG 고급 (클릭 시 색상 변경)',
          bullets: [
'도형을 클릭하면 색상이 검정에서 하얀색으로 변경됩니다.'
          ],
          images: [],
          code: {
            html: `
<svg id="mySvg" width="250" height="150" style="border:1px solid #ccc; cursor:pointer;">
  <circle cx="50" cy="75" r="40" stroke="black" stroke-width="3" fill="black" />
  <rect x="110" y="30" width="70" height="90" stroke="black" stroke-width="3" fill="black" />
  <line x1="0" y1="0" x2="200" y2="150" stroke="black" stroke-width="2" />
</svg>
<div id="result" style="margin-top:1em;"></div>
                  `,
            css: `
svg {
  display: block;
  margin: 1em auto;
}
                  `,
            js: `
const svg = document.getElementById('mySvg');

svg.addEventListener('click', (event) => {
  const target = event.target;
  if (target.tagName === 'circle' || target.tagName === 'rect') {
    const currentFill = target.getAttribute('fill');
    if (currentFill === 'black') {
      target.setAttribute('fill', 'white');
      document.getElementById('result').textContent = target.tagName + ' 색상이 하얀색으로 변경되었습니다.';
    } else {
      target.setAttribute('fill', 'black');
      document.getElementById('result').textContent = target.tagName + ' 색상이 검정색으로 변경되었습니다.';
    }
  }
});
                  `
          }
        }


      ]

		};
	},


  computed: {
    currentSlide() {
      return this.slides.find(slide => slide.key === this.currentKey) || {};
    },
    currentCode() {
      return this.currentSlide.code || { html: '', css: '', js: '' };
    }
  },
	methods: {
		goSlide(number) {
      if (this.deck) {
        this.deck.slide(number);
      } else {
        console.error("Reveal 인스턴스가 초기화되지 않았습니다.");
      }
		},
    onCodeUpdate({ html, css, js }) {
      const slide = this.slides.find(s => s.key === this.currentKey);
      if (slide) {
        slide.code = { html, css, js };
        this.updateCodeBlock(Reveal.getCurrentSlide());
      }
    },
    updateCodeBlock(slide) {
      if (!slide) return;
      const key = slide.dataset.key;
      if (!key) return;
      this.currentKey = key;

      const current = this.slides.find(s => s.key === key);
      if (!current) return;

      const codeEl = slide.querySelector("code.language-html");
      if (codeEl) {
        codeEl.textContent = current.code?.html || '';
        if (window.hljs) hljs.highlightElement(codeEl);
      }
      const cssEl = slide.querySelector("code.language-css");
      if (cssEl) {
        cssEl.textContent = current.code?.css || '';
        if (window.hljs) hljs.highlightElement(cssEl);
      }
      const jsEl = slide.querySelector("code.language-javascript");
      if (jsEl) {
        jsEl.textContent = current.code?.js || '';
        if (window.hljs) hljs.highlightElement(jsEl);
      }    
    },
    
	},
	mounted() {
		// ✅ 3. ref로 지정한 DOM 엘리먼트를 넘겨주고, 인스턴스를 this.deck에 저장합니다.
		this.deck = initializeReveal(this.$refs.revealRef, false);
		
    // 약간 지연 시켜서 초기 렌더링 이후 실행
    setTimeout(() => {
      // ✅ 수정 후: 우리가 마운트할 때 만든 인스턴스(this.deck) 호출
      const slide = this.deck.getCurrentSlide();
      
      this.currentKey = slide?.dataset?.key || '';
      this.updateCodeBlock(slide);
    }, 100);

    // ✅ 4. 전역 Reveal.addEventListener 대신 인스턴스의 on 메서드 사용
		this.deck.on('slidechanged', (event) => {
      this.updateCodeBlock(event.currentSlide);
    });

	},
  unmounted() {
        // ✅ 5. 여기가 핵심! 페이지를 벗어날 때 Reveal 객체를 메모리에서 완전히 파괴합니다.
        if (this.deck) {
            this.deck.destroy();
        }
  }
};
</script>

<style scoped>
/* @import url('@/assets/js/plugins/reveal-js/css/reset.css'); */
@import url('@/assets/js/plugins/reveal-js/css/reveal.css');
@import url('@/assets/js/plugins/reveal-js/css/theme/white.css');
@import url('@/assets/js/plugins/reveal-js/plugin/highlight/github.css');
@import url('@/assets/js/plugins/reveal-js/plugin/chalkboard/style.css');
@import url('@/assets/js/plugins/reveal-js/plugin/customcontrols/style.css');
@import url('@/assets/js/plugins/reveal-js/plugin/menu/menu.css');
@import url('@/assets/css/reveal-lecture.css');


.layout {
  display: flex;
  flex-direction: row;
  height: 100vh; /* 전체 높이 채우기 */
}

.reveal {
  flex: 0 0 60%;
  /* overflow: auto; */
  transition: flex-basis 0.3s ease;
}
.code-editor-wrapper {
  flex: 0 0 40%;
  border-left: 1px solid #ccc;
  overflow: auto;
  transition: width 0.3s ease;
}

/* 접혔을 때 */
.layout.code-collapsed .reveal {
  flex-basis: 100%;
}
.layout.code-collapsed .code-editor-wrapper {
  flex-basis: 40px; /* 접힌 상태 너비 */
  width: auto; /* 핵심: 최소 크기 유지 */
}


/* 코드 블록 전체 스타일 오버라이드 */
.reveal pre code {
  height: 150px;
  font-size: 1.3rem;         /* 폰트 크기 키움 */
  line-height: 1.6;
  /*background: #f9f9f9 !important;   밝은 회색 배경 */
  color: #333 !important;    /* 진한 글자색 */
  padding: 1rem;
  border-radius: 8px;
  font-family: 'Fira Code', 'Courier New', monospace;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.reveal section ul li {
  font-size: 1.7rem; /* 원하는 크기로 조절 가능 */
  line-height: 1.6;
}

</style>