<template>
	
	<!-- Start Header/Navigation -->
    <HomeButton />
    <!-- End Header/Navigation -->

	<div class="reveal" ref="revealRef">
      <div class="slides">
  
  
  
<section>
	<!-- <p class="pb-5 mb-5"> -->
		<h1>💻 진로체험</h1>
	<!-- </p> -->

	<table class="table caption-top table-borderless table-responsive card-1 p-4">
		<caption>중. 고등학생 대상</caption>
		<thead>
			<tr class="border-bottom">
			<th>
				<span class="ml-2">주제</span>
			</th>
			<th>
				<span class="ml-4">Action</span>
			</th>
			</tr>
		</thead>
  <tbody>
    <tr class="border-bottom">
		<td>
			<div class="p-2">
				<span class="font-weight-bold">프로그래머가 하는 일 - 프로그램이 만들어지는 과정</span>
			</div>
		</td>
		<td>
			<div class="p-2 icons">
				<i class="fa fa-share" @click="goSlide(1)"></i>
			</div>			
		</td>
	</tr>
    <tr class="border-bottom">
		<td>
			<div class="p-2">
				<span class="font-weight-bold">SW 진로</span>
			</div>
		</td>
		<td>
			<div class="p-2 icons">
				<i class="fa fa-share" @click="goSlide(3)"></i>
			</div>			
		</td>
	</tr>
	<tr class="border-bottom">
		<td>
			<div class="p-2">
				<span class="font-weight-bold">분야별 학습언어</span>
			</div>
		</td>
		<td>
			<div class="p-2 icons">
				<i class="fa fa-share" @click="goSlide(4)"></i>
			</div>
		</td>
	</tr>
	<tr class="border-bottom">
		<td>
			<div class="p-2">
				<span class="font-weight-bold">파이썬 터틀 실습</span>
			</div>
		</td>
		<td>
			<div class="p-2 icons">
				<i class="fa fa-share" @click="goSlide(5)"></i>
			</div>			
		</td>
	</tr>
	<tr class="border-bottom">
		<td>
			<div class="p-2">
				<span class="font-weight-bold">파이썬 리스트 실습</span>
			</div>
		</td>
		<td>
			<div class="p-2 icons">
				<i class="fa fa-share" @click="goSlide(6)"></i>
			</div>			
		</td>
	</tr>
  </tbody>
</table>

</section>
<section>
	<h2 class="pb-2">프로그래머가 하는 일 - 프로그램이 만들어지는 과정 </h2>
	<div class="row justify-content-around">
          <div class="col-md-4">
            <div class="card mb-3 text-left">
              <div class="card-header fs-4 fw-bold bg-warning text-white">어플 제작</div>
              <img src="/school/2.png" alt="프로그램이 만들어지는 과정" height="500px"/>
            </div>
          </div>
          <div class="col-md-7 ml-auto">
            <div class="row">
              <div class="card mb-3 text-left">
                <div class="card-header fs-4 fw-bold bg-warning text-white">데이터 수집</div>
                <ol class="list-group list-group-flush">
                  <li class="list-group-item">가맹점 등록 및 관리 페이지
                    <br><span class="fs-6 px-3">> 위치정보, 한식/분식 등 분야 등등..</span>
                  </li>
                  <li class="list-group-item">사용자 관리 페이지</li>
                  <li class="list-group-item">국내 지도 정보
                    <br><span class="fs-6 px-3">> 위도, 경도, 주소록</span>
                  </li>
                  <li class="list-group-item">주문 시 사용자 정보를 통해 데이터 가공
                    <br><span class="fs-6 px-3">> 연령별, 성별, 지역별 많이 주문하는 사람들의 취향 및 가격 대를 프로그램을 통해 가공</span>
                  </li>
                </ol>
              </div>
            </div>
            <div class="row">
              <div class="card mb-3 text-left">
                <div class="card-header fs-4 fw-bold bg-warning text-white">데이터 보관</div>
                <ol class="list-group list-group-flush">
                  <li class="list-group-item">위의 수집 데이터를 데이터 저장소에 저장 및 관리</li>
                </ol>
              </div>
            </div>
          </div>
        </div>
</section>
<section>
	<h2 class="pb-2">프로그램이 만들어지는 과정</h2>
	<img src="/school/3.png" height="600px"/>
</section>
<section>
	<h2 class="pb-2">SW 진로</h2>
	<img src="/school/domestic_curriculum_flow.png" height="600px"/>
</section>
<section>
	<h2 class="pb-2">분야별 학습언어</h2>
	<img src="/school/coding_field.png" height="600px"/>
</section>
<section>
	<h2 class="pb-2">파이썬 터틀 실습</h2>
	<div class="row justify-content-around">
          <div class="col-md-3">
            <div class="row">
              <div class="card mb-3 text-left">
                <div class="card-header fs-4 fw-bold bg-primary text-white">테스트 사이트</div>
                <li class="list-group-item"><a href="https://trinket.io/turtle" target="_blank">trinket.io</a></li>
              </div>
            </div>
            <div class="row">
              <div class="card mb-3 text-left">
                <div class="card-header fs-4 fw-bold bg-primary text-white">샘플 코드</div>
                <pre class="text-start">
import turtle

t = turtle.Turtle()
t.down()
a=0
while a &lt; 360:
    a=a+1
    t.fd(1)
    t.right(1)
                </pre>
              </div>
            </div>
          </div>
          <div class="col-md-8 ml-auto">
            <div class="row">
              <div class="card mb-3 text-left">
                <div class="card-header fs-4 fw-bold bg-primary text-white">터틀 문법</div>
                <table class="table table-sm table-hover" style="table-layout: fixed;">
					<thead>
						<tr>
							<th width="10%">스크립트</th>
							<th width="30%">기능</th>
							<th width="30%">표현</th>
							<th width="30%">같은 표현</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>동작</td>
							<td>앞으로 이동</td>
							<td>t.forward(10)</td>
							<td>t.fd(10)</td>
						</tr>
						<tr>
							<td>동작</td>
							<td>뒤로 이동</td>
							<td>t.back(10)</td>
							<td>t.bk(10)</td>
						</tr>
						<tr>
							<td>동작</td>
							<td>오른쪽 회전</td>
							<td>t.right(10)</td>
							<td>t.rt(10)</td>
						</tr>
						<tr>
							<td>동작</td>
							<td>왼쪽 회전</td>
							<td>t.left(10)</td>
							<td>t.lt(10)</td>
						</tr>
						<tr>
							<td>동작</td>
							<td>특정좌표로 이동</td>
							<td>t.goto(100, -150)</td>
							<td></td>
						</tr>
						<tr>
							<td>펜</td>
							<td>펜 내리기</td>
							<td>t.pendown()</td>
							<td>t.pd() or t.down()</td>
						</tr>
						<tr>
							<td>펜</td>
							<td>펜 올리기</td>
							<td>t.penup()</td>
							<td>t.pu() or t.up()</td>
						</tr>
						<tr>
							<td>펜</td>
							<td>펜 색깔</td>
							<td>t.color('red')</td>
							<td>t.color('#ff0000')</td>
						</tr>
						<tr>
							<td>펜</td>
							<td>펜 크기</td>
							<td>t.pensize(5)</td>
							<td></td>
						</tr>
						<tr>
							<td>펜</td>
							<td>펜 속도</td>
							<td>t.speed('fast')</td>
							<td></td>
						</tr>
						<tr>
							<td>펜</td>
							<td>펜 모양</td>
							<td>t.shape('turtle')</td>
							<td></td>
						</tr>
						<tr>
							<td>배경</td>
							<td>배경 색깔</td>
							<td>t.bgcolor('blue')</td>
							<td></td>
						</tr>
						<tr>
							<td>배경</td>
							<td>지우기</td>
							<td>t.clear()</td>
							<td></td>
						</tr>
					</tbody>
				</table>
            </div>
          </div>
        </div>
      </div>
</section>
<section>
	<h2 class="pb-2">파이썬 리스트 실습</h2>
	<div class="row justify-content-around">
          <div class="col-md-4">
            <div class="row">
              <div class="card mb-3 text-left">
                <div class="card-header fs-4 fw-bold bg-success text-white">언어선정</div>
                <li class="list-group-item"><a href="https://survey.stackoverflow.co/2022/#section-most-popular-technologies-programming-scripting-and-markup-languages" target="_blank">Stackoverflow Survey</a></li>
              </div>
            </div>
            <div class="row">
              <div class="card mb-3 text-left">
                <div class="card-header fs-4 fw-bold bg-success text-white">온라인 에디터</div>
                <li class="list-group-item">구글에서 'Python Online' 검색</li>
                <li class="list-group-item"><a href="https://www.programiz.com/python-programming/online-compiler/" target="_blank">Link</a></li>
              </div>
            </div>
          </div>
          <div class="col-md-7 ml-auto">
            <div class="row">
              <div class="card mb-3 text-left">
                <div class="card-header fs-4 fw-bold bg-success text-white">Python 문법</div>
                <pre class="text-start">
  a=0
  print(a)

  while a&lt5:
    a=a+1
    print(a)

  b=[1,2,3]
  print(b[0])
  print(b[1])
  print(b[-1])
                </pre>
              </div>
            </div>
            <div class="row">
              <div class="card mb-3 text-left">
                <div class="card-header fs-4 fw-bold bg-success text-white">퀴즈</div>
                <li class="list-group-item">Q1. [1,2,3,4,5] 리스트의 항목을 차례대로 출력하세요.</li>
                <li class="list-group-item">Q2. [1,2,3,4,5] 리스트의 항목을 거꾸로 출력하세요.</li>
                <li class="list-group-item">Q3. [1,2,3,4,5] 리스트의 항목들을 모두 합산하여 출력하세요.</li>
              </div>
            </div>
          </div>
        </div>
</section>

<section>
	<img src="/school/sum.png" height="600px"/>
</section>

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


</div>
</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";

export default {
	components: {
		HomeButton: HomeButton,
	},
	data() {
		return {
			
		};
	},
	methods: {
		goSlide(number) {
			if (this.deck) {
				this.deck.slide(number);
			} else {
				console.error("Reveal 인스턴스가 초기화되지 않았습니다.");
			}
		},
	},
  	mounted() {
		// ✅ 3. ref로 지정한 DOM 엘리먼트를 넘겨주고, 인스턴스를 this.deck에 저장합니다.
    	this.deck = initializeReveal(this.$refs.revealRef, false);

		// ✅ 4. 전역 Reveal.addEventListener 대신 인스턴스의 on 메서드 사용
    	this.deck.on('slidechanged', (event) => {
			console.log("Slide is now " + event.indexh);
		});
 	},
	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/monokai.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');


.img-fluid {
    max-width: 100%;
    height: auto;
}
</style>