+

+.myphoto{

+  

+  background-image: url('../img/img207_15s.png');

+  width: 1011px;

+  height: 558px;

+  padding: 30px;

+  margin: 0 auto;

+}

+.tab-btn{position: relative; color: #568BFA;}

+.tab-btn p.custom-style{color: #FFF;}

+

+.tab-btn p {

+  position: absolute;

+  top: 46%;

+  right: 7%;

+  transform: translate(-50%, -50%);

+  font-family: 'ONEMobilePOPOTF';

+  font-size: 36px;

+  

+}

+.myphoto .btnGroup{

+  width: max-content; 

+    position: absolute;

+    right: 45px;

+    z-index: -1;

+}

+.tab-box{

+  margin: 80px 60px 20px 60px;

+}

+

+

+import PhotoBook from './main/PhotoBook.vue';

+            { path: '/PhotoBook.page', name: 'PhotoBook', component: PhotoBook },

+                            <div class="box" style="gap: 5px;" >

+                                <button @click="selectedTab = 'tab4'; goToPage('PhotoBook')" type="button" title="글쓰기" class="new-btn">

+   바로가기

+</button>

+

+<template>

+    <div class="title-box flex justify-between mb20">

+        <p class="title">내 사진첩</p>

+    </div>

+    <div class="myphoto mb30">

+        <div class="title-box flex justify-end mb40">

+            <select name="" id="">

+                <option value="">A반</option>

+            </select>

+        </div>

+        <div class="btnGroup">

+            <button @click="selectedTab = 'tab1'" type="button" title="글쓰기" class="tab-btn">

+                <img v-if="selectedTab !== 'tab1'" src="../../../resources/img/btn49_15s_normal.png" alt="">

+                <img v-else src="../../../resources/img/btn49_15s_click.png" alt="">

+                <p :class="{ 'custom-style': selectedTab === 'tab1' }">1</p>

+            </button>

+        </div>

+        <div v-if="selectedTab === 'tab1'" class="tab-box">

+            <div class="class photo">

+                <div class="box gd-col2" style="gap: 10px;" @click="goToPage('ClassDetail')">

+                    <div><img src="../../../resources/img/img210_15s.png" alt=""></div>

+                </div>

+                <div class="text flex justify-between mt20">

+                    <p class="title1">A반</p>

+                    <span class="member">20명</span>

+                </div>

+               

+            </div>

+

+        </div>

+    </div>

+</template>

+

+<script>

+import SvgIcon from '@jamescoyle/vue-icon';

+import { mdiMagnify, } from '@mdi/js';

+import { mdilArrowRight } from '@mdi/light-js';

+import ProgressBar from '../../component/ProgressBar.vue';

+

+

+export default {

+    data() {

+        return {

+            selectedTab: 'tab1',

+            mdiMagnify: mdiMagnify,

+            mdilArrowRight: mdilArrowRight,

+            timer: "00:00",

+            progress: 20

+        }

+    },

+    methods: {

+        goToPage(page) {

+            this.$router.push({ name: page });

+        },

+        increaseProgress() {

+            if (this.progress < 100) {

+                this.progress += 10;

+            }

+        },

+        showConfirm(type) {

+            let message = '';

+            if (type === 'cancel') {

+                message = '삭제하시겠습니까?';

+            } else if (type === 'reset') {

+                message = '초기화하시겠습니까?';

+            } else if (type === 'save') {

+                message = '등록하시겠습니까?';

+            }

+

+            if (confirm(message)) {

+                this.goBack();

+            }

+        },

+    },

+    watch: {

+

+    },

+    computed: {

+

+    },

+    components: {

+        SvgIcon,

+        ProgressBar

+    },

+    mounted() {

+        console.log('Main2 mounted');

+    }

+}

+</script>(파일 끝에 줄바꿈 문자 없음)