Commit @d35d8f2d1a5ba9fa9c5aac008bde88cae84b76f8

이은진 09-11
240911 이은진 대시보드 css 수정
@d35d8f2d1a5ba9fa9c5aac008bde88cae84b76f8
d35d8f2
client/resources/img/new_img/dashboard/btn.png (Binary) (added)
+++ client/resources/img/new_img/dashboard/btn.png
Binary file is not shown
d35d8f2
client/resources/img/new_img/dashboard/rabbit.png (Binary) (added)
+++ client/resources/img/new_img/dashboard/rabbit.png
Binary file is not shown
7210304
d35d8f2
client/views/pages/main/Dashboard.vue
--- client/views/pages/main/Dashboard.vue
+++ client/views/pages/main/Dashboard.vue

 <template>
-  <p
-    class="title1"
-    v-if="state === 'finish'"
-    style="position: absolute; top: 50%; transform: translate(0, -50%)"
-  >
+  <p class="title1" v-if="state === 'finish'" style="position: absolute; top: 50%; transform: translate(0, -50%)">
     오늘 공부를 다했어요! 너무 고생했어요!
   </p>
-  <div
-    class="title1"
-    v-else-if="state === 'notRegistered'"
-    style="position: absolute; top: 50%; transform: translate(0, -50%)"
-  >
-    <div>
-      <h3>
-        지금은 학습 루트가 등록이 안됐어요! 학습 일정에서 학습루트를
+  <div class="title1" v-else-if="state === 'notRegistered'"
+    style="position: absolute;top: 50%;transform: translate(-50%, -50%);left: 50%;">
+    <div class="title-box" style="text-align: center;">
+      <img src="../../../resources/img/new_img/dashboard/rabbit.png">
+      <h3 class="title" style=" margin-top: 1em; letter-spacing: 2px; line-height: 42px; font-size: 30px">
+        지금은 학습 루트가 등록이 안됐어요! <br> 학습 일정에서 학습루트를
         등록해볼까요?
       </h3>
-      <button
-        type="button"
-        title="바로가기"
-        class="yellow-btn"
-        @click="goToPage2('MyPlan2')"
-      >
-        바로가기
-      </button>
+      <div @click="goToPage2('MyPlan2')" style="cursor: pointer; margin-top: 2em;">
+        <img src="../../../resources/img/new_img/dashboard/btn.png">
+      </div>
     </div>
   </div>
-  <p
-    class="title1"
-    v-else-if="state === 'noProblem'"
-    style="position: absolute; top: 50%; transform: translate(0, -50%)"
-  >
+  <p class="title1" v-else-if="state === 'noProblem'"
+    style="position: absolute; top: 50%; transform: translate(0, -50%)">
     교재에 등록된 문제가 없습니다.
   </p>
   <div v-else class="main">

       </div> -->
       <div class="race-box">
         <div class="rabbit-start">
-          <img
-            src="../../../resources/img/new_img/rabbit.png"
-            alt=""
-            :style="{ display: rabbitPos[0] ? 'block' : 'none' }"
-          />
+          <img src="../../../resources/img/new_img/rabbit.png" alt=""
+            :style="{ display: rabbitPos[0] ? 'block' : 'none' }" />
         </div>
         <!-- 1번째줄 -->
-        <div
-          class="rcon flex justify-end mb5"
-          style="position: relative; top: 24px"
-        >
+        <div class="rcon flex justify-end mb5" style="position: relative; top: 24px">
           <!-- 1 -->
           <div class="race-btn" @click="[storeLearningId(labeledItems[0])]">
             <div class="rabbit-running">
-              <img
-                src="../../../resources/img/new_img/rabbit.png"
-                alt=""
-                :style="{ display: rabbitPos[1] ? 'block' : 'none' }"
-              />
+              <img src="../../../resources/img/new_img/rabbit.png" alt=""
+                :style="{ display: rabbitPos[1] ? 'block' : 'none' }" />
             </div>
-            <button
-              class="popTxt"
-              v-for="(item, index) in items"
-              :key="index"
-              @click="toggleImage(index)"
-              data-num="1"
-            >
+            <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="1">
               <div class="image-container">
-                <img
-                  src="../../../resources/img/new_img/board/racebtn_1.png"
-                  alt="Race Button"
-                  class="base-img"
-                />
-                <img
-                  v-if="rabbitCompl[1]"
-                  src="../../../resources/img/new_img/icon/clear_img.png"
-                  alt="Clear Icon"
-                  class="clear-img"
-                />
+                <img src="../../../resources/img/new_img/board/racebtn_1.png" alt="Race Button" class="base-img" />
+                <img v-if="rabbitCompl[1]" src="../../../resources/img/new_img/icon/clear_img.png" alt="Clear Icon"
+                  class="clear-img" />
               </div>
             </button>
             <p :class="!rabbitCompl[1] ? 'before-clear' : 'clear'">
-              <img
-                v-if="rabbitCompl[1]"
-                src="../../../resources/img/new_img/icon/complete_icon.png"
-                alt="Complete Icon"
-                class="complete-icon"
-              />
+              <img v-if="rabbitCompl[1]" src="../../../resources/img/new_img/icon/complete_icon.png" alt="Complete Icon"
+                class="complete-icon" />
               {{ labeledItems[0].label }}
             </p>
           </div>
           <!-- 2 -->
           <div class="race-btn" @click="[storeLearningId(labeledItems[1])]">
             <div class="rabbit-running">
-              <img
-                src="../../../resources/img/new_img/rabbit.png"
-                alt=""
-                :style="{ display: rabbitPos[2] ? 'block' : 'none' }"
-              />
+              <img src="../../../resources/img/new_img/rabbit.png" alt=""
+                :style="{ display: rabbitPos[2] ? 'block' : 'none' }" />
             </div>
-            <button
-              class="popTxt"
-              v-for="(item, index) in items"
-              :key="index"
-              @click="toggleImage(index)"
-              data-num="2"
-            >
+            <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="2">
               <div class="image-container">
-                <img
-                  src="../../../resources/img/new_img/board/racebtn_2.png"
-                  alt="Race Button"
-                  class="base-img"
-                />
-                <img
-                  v-if="rabbitCompl[2]"
-                  src="../../../resources/img/new_img/icon/clear_img.png"
-                  alt="Clear Icon"
-                  class="clear-img"
-                  style="position: absolute; left: 16px"
-                />
+                <img src="../../../resources/img/new_img/board/racebtn_2.png" alt="Race Button" class="base-img" />
+                <img v-if="rabbitCompl[2]" src="../../../resources/img/new_img/icon/clear_img.png" alt="Clear Icon"
+                  class="clear-img" style="position: absolute; left: 16px" />
               </div>
             </button>
             <p :class="!rabbitCompl[2] ? 'before-clear' : 'clear'">
-              <img
-                v-if="rabbitCompl[2]"
-                src="../../../resources/img/new_img/icon/complete_icon.png"
-                alt="Complete Icon"
-                class="complete-icon"
-              />
+              <img v-if="rabbitCompl[2]" src="../../../resources/img/new_img/icon/complete_icon.png" alt="Complete Icon"
+                class="complete-icon" />
               {{ labeledItems[1].label }}
             </p>
           </div>

           <!-- 7 -->
           <div class="race-btn" @click="[storeLearningId(labeledItems[6])]">
             <div class="rabbit-running" style="top: -71px">
-              <img
-                src="../../../resources/img/new_img/rabbit.png"
-                alt=""
-                :style="{ display: rabbitPos[7] ? 'block' : 'none' }"
-              />
+              <img src="../../../resources/img/new_img/rabbit.png" alt=""
+                :style="{ display: rabbitPos[7] ? 'block' : 'none' }" />
             </div>
-            <button
-              class="popTxt"
-              v-for="(item, index) in items"
-              :key="index"
-              @click="toggleImage(index)"
-              data-num="7"
-              style="top: -53px; position: relative"
-            >
+            <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="7"
+              style="top: -53px; position: relative">
               <div class="image-container">
-                <img
-                  src="../../../resources/img/new_img/board/racebtn_7.png"
-                  alt="Race Button"
-                  class="base-img"
-                />
-                <img
-                  v-if="rabbitCompl[7]"
-                  src="../../../resources/img/new_img/icon/clear_img.png"
-                  alt="Clear Icon"
-                  class="clear-img"
-                  style="position: absolute; top: 85px"
-                />
+                <img src="../../../resources/img/new_img/board/racebtn_7.png" alt="Race Button" class="base-img" />
+                <img v-if="rabbitCompl[7]" src="../../../resources/img/new_img/icon/clear_img.png" alt="Clear Icon"
+                  class="clear-img" style="position: absolute; top: 85px" />
               </div>
             </button>
-            <p
-              :class="!rabbitCompl[7] ? 'before-clear' : 'clear'"
-              style="position: relative; top: -53px; left: -10px"
-            >
-              <img
-                v-if="rabbitCompl[7]"
-                src="../../../resources/img/new_img/icon/complete_icon.png"
-                alt="Complete Icon"
-                class="complete-icon"
-              />
+            <p :class="!rabbitCompl[7] ? 'before-clear' : 'clear'" style="position: relative; top: -53px; left: -10px">
+              <img v-if="rabbitCompl[7]" src="../../../resources/img/new_img/icon/complete_icon.png" alt="Complete Icon"
+                class="complete-icon" />
               {{ labeledItems[6].label }}
             </p>
           </div>
           <!-- 6 -->
           <div class="race-btn" @click="[storeLearningId(labeledItems[5])]">
             <div class="rabbit-running">
-              <img
-                src="../../../resources/img/new_img/rabbit.png"
-                alt=""
-                :style="{ display: rabbitPos[6] ? 'block' : 'none' }"
-              />
+              <img src="../../../resources/img/new_img/rabbit.png" alt=""
+                :style="{ display: rabbitPos[6] ? 'block' : 'none' }" />
             </div>
-            <button
-              class="popTxt"
-              v-for="(item, index) in items"
-              :key="index"
-              @click="toggleImage(index)"
-              data-num="6"
-            >
+            <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="6">
               <div class="image-container">
-                <img
-                  src="../../../resources/img/new_img/board/racebtn_6.png"
-                  alt="Race Button"
-                  class="base-img"
-                />
-                <img
-                  v-if="rabbitCompl[6]"
-                  src="../../../resources/img/new_img/icon/clear_img.png"
-                  alt="Clear Icon"
-                  class="clear-img"
-                />
+                <img src="../../../resources/img/new_img/board/racebtn_6.png" alt="Race Button" class="base-img" />
+                <img v-if="rabbitCompl[6]" src="../../../resources/img/new_img/icon/clear_img.png" alt="Clear Icon"
+                  class="clear-img" />
               </div>
             </button>
             <p :class="!rabbitCompl[6] ? 'before-clear' : 'clear'">
-              <img
-                v-if="rabbitCompl[6]"
-                src="../../../resources/img/new_img/icon/complete_icon.png"
-                alt="Complete Icon"
-                class="complete-icon"
-              />
+              <img v-if="rabbitCompl[6]" src="../../../resources/img/new_img/icon/complete_icon.png" alt="Complete Icon"
+                class="complete-icon" />
               {{ labeledItems[5].label }}
             </p>
           </div>
           <!-- 5 -->
-          <div
-            class="race-btn"
-            @click="[storeLearningId(labeledItems[4])]"
-            style="position: relative; left: -31px"
-          >
+          <div class="race-btn" @click="[storeLearningId(labeledItems[4])]" style="position: relative; left: -31px">
             <div class="rabbit-running">
-              <img
-                src="../../../resources/img/new_img/rabbit.png"
-                alt=""
-                :style="{ display: rabbitPos[5] ? 'block' : 'none' }"
-              />
+              <img src="../../../resources/img/new_img/rabbit.png" alt=""
+                :style="{ display: rabbitPos[5] ? 'block' : 'none' }" />
             </div>
-            <button
-              class="popTxt"
-              v-for="(item, index) in items"
-              :key="index"
-              @click="toggleImage(index)"
-              data-num="5"
-            >
+            <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="5">
               <div class="image-container">
-                <img
-                  src="../../../resources/img/new_img/board/racebtn_5.png"
-                  alt="Race Button"
-                  class="base-img"
-                />
-                <img
-                  v-if="rabbitCompl[5]"
-                  src="../../../resources/img/new_img/icon/clear_img.png"
-                  alt="Clear Icon"
-                  class="clear-img"
-                />
+                <img src="../../../resources/img/new_img/board/racebtn_5.png" alt="Race Button" class="base-img" />
+                <img v-if="rabbitCompl[5]" src="../../../resources/img/new_img/icon/clear_img.png" alt="Clear Icon"
+                  class="clear-img" />
               </div>
             </button>
             <p :class="!rabbitCompl[5] ? 'before-clear' : 'clear'">
-              <img
-                v-if="rabbitCompl[5]"
-                src="../../../resources/img/new_img/icon/complete_icon.png"
-                alt="Complete Icon"
-                class="complete-icon"
-              />
+              <img v-if="rabbitCompl[5]" src="../../../resources/img/new_img/icon/complete_icon.png" alt="Complete Icon"
+                class="complete-icon" />
               {{ labeledItems[4].label }}
             </p>
           </div>
           <!-- 4 -->
           <div class="race-btn" @click="[storeLearningId(labeledItems[3])]">
             <div class="rabbit-running">
-              <img
-                src="../../../resources/img/new_img/rabbit.png"
-                alt=""
-                :style="{ display: rabbitPos[4] ? 'block' : 'none' }"
-              />
+              <img src="../../../resources/img/new_img/rabbit.png" alt=""
+                :style="{ display: rabbitPos[4] ? 'block' : 'none' }" />
             </div>
-            <button
-              class="popTxt"
-              v-for="(item, index) in items"
-              :key="index"
-              @click="toggleImage(index)"
-              data-num="4"
-            >
+            <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="4">
               <div class="image-container">
-                <img
-                  src="../../../resources/img/new_img/board/racebtn_4.png"
-                  alt="Race Button"
-                  class="base-img"
-                />
-                <img
-                  v-if="rabbitCompl[4]"
-                  src="../../../resources/img/new_img/icon/clear_img.png"
-                  alt="Clear Icon"
-                  class="clear-img"
-                />
+                <img src="../../../resources/img/new_img/board/racebtn_4.png" alt="Race Button" class="base-img" />
+                <img v-if="rabbitCompl[4]" src="../../../resources/img/new_img/icon/clear_img.png" alt="Clear Icon"
+                  class="clear-img" />
               </div>
             </button>
             <p :class="!rabbitCompl[4] ? 'before-clear' : 'clear'">
-              <img
-                v-if="rabbitCompl[4]"
-                src="../../../resources/img/new_img/icon/complete_icon.png"
-                alt="Complete Icon"
-                class="complete-icon"
-              />
+              <img v-if="rabbitCompl[4]" src="../../../resources/img/new_img/icon/complete_icon.png" alt="Complete Icon"
+                class="complete-icon" />
               {{ labeledItems[3].label }}
             </p>
           </div>
           <!-- 3 -->
-          <div
-            class="race-btn"
-            @click="[storeLearningId(labeledItems[2])]"
-            style="right: 12px"
-          >
+          <div class="race-btn" @click="[storeLearningId(labeledItems[2])]" style="right: 12px">
             <div class="rabbit-running">
-              <img
-                src="../../../resources/img/new_img/rabbit.png"
-                alt=""
-                :style="{ display: rabbitPos[3] ? 'block' : 'none' }"
-              />
+              <img src="../../../resources/img/new_img/rabbit.png" alt=""
+                :style="{ display: rabbitPos[3] ? 'block' : 'none' }" />
             </div>
-            <button
-              class="popTxt"
-              v-for="(item, index) in items"
-              :key="index"
-              @click="toggleImage(index)"
-              data-num="3"
-            >
+            <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="3">
               <div class="image-container">
-                <img
-                  src="../../../resources/img/new_img/board/racebtn_3.png"
-                  alt="Race Button"
-                  class="base-img"
-                />
-                <img
-                  v-if="rabbitCompl[3]"
-                  src="../../../resources/img/new_img/icon/clear_img.png"
-                  alt="Clear Icon"
-                  class="clear-img"
-                />
+                <img src="../../../resources/img/new_img/board/racebtn_3.png" alt="Race Button" class="base-img" />
+                <img v-if="rabbitCompl[3]" src="../../../resources/img/new_img/icon/clear_img.png" alt="Clear Icon"
+                  class="clear-img" />
               </div>
             </button>
             <p :class="!rabbitCompl[3] ? 'before-clear' : 'clear'">
-              <img
-                v-if="rabbitCompl[3]"
-                src="../../../resources/img/new_img/icon/complete_icon.png"
-                alt="Complete Icon"
-                class="complete-icon"
-              />
+              <img v-if="rabbitCompl[3]" src="../../../resources/img/new_img/icon/complete_icon.png" alt="Complete Icon"
+                class="complete-icon" />
               {{ labeledItems[2].label }}
             </p>
           </div>

           <!-- 8 -->
           <div class="race-btn" @click="[storeLearningId(labeledItems[7])]">
             <div class="rabbit-running">
-              <img
-                src="../../../resources/img/new_img/rabbit.png"
-                alt=""
-                :style="{ display: rabbitPos[8] ? 'block' : 'none' }"
-              />
+              <img src="../../../resources/img/new_img/rabbit.png" alt=""
+                :style="{ display: rabbitPos[8] ? 'block' : 'none' }" />
             </div>
-            <button
-              class="popTxt"
-              v-for="(item, index) in items"
-              :key="index"
-              @click="toggleImage(index)"
-              data-num="8"
-            >
+            <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="8">
               <div class="image-container">
-                <img
-                  src="../../../resources/img/new_img/board/racebtn_8.png"
-                  alt="Race Button"
-                  class="base-img"
-                />
-                <img
-                  v-if="rabbitCompl[8]"
-                  src="../../../resources/img/new_img/icon/clear_img.png"
-                  alt="Clear Icon"
-                  class="clear-img"
-                />
+                <img src="../../../resources/img/new_img/board/racebtn_8.png" alt="Race Button" class="base-img" />
+                <img v-if="rabbitCompl[8]" src="../../../resources/img/new_img/icon/clear_img.png" alt="Clear Icon"
+                  class="clear-img" />
               </div>
             </button>
             <p :class="!rabbitCompl[8] ? 'before-clear' : 'clear'">
-              <img
-                v-if="rabbitCompl[8]"
-                src="../../../resources/img/new_img/icon/complete_icon.png"
-                alt="Complete Icon"
-                class="complete-icon"
-              />
+              <img v-if="rabbitCompl[8]" src="../../../resources/img/new_img/icon/complete_icon.png" alt="Complete Icon"
+                class="complete-icon" />
               {{ labeledItems[7].label }}
             </p>
           </div>
           <!-- 9 -->
           <div class="race-btn" @click="[storeLearningId(labeledItems[8])]">
             <div class="rabbit-running">
-              <img
-                src="../../../resources/img/new_img/rabbit.png"
-                alt=""
-                :style="{ display: rabbitPos[9] ? 'block' : 'none' }"
-              />
+              <img src="../../../resources/img/new_img/rabbit.png" alt=""
+                :style="{ display: rabbitPos[9] ? 'block' : 'none' }" />
             </div>
-            <button
-              class="popTxt"
-              v-for="(item, index) in items"
-              :key="index"
-              @click="toggleImage(index)"
-              data-num="9"
-            >
+            <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="9">
               <div class="image-container">
-                <img
-                  src="../../../resources/img/new_img/board/racebtn_9.png"
-                  alt="Race Button"
-                  class="base-img"
-                />
-                <img
-                  v-if="rabbitCompl[9]"
-                  src="../../../resources/img/new_img/icon/clear_img.png"
-                  alt="Clear Icon"
-                  class="clear-img"
-                />
+                <img src="../../../resources/img/new_img/board/racebtn_9.png" alt="Race Button" class="base-img" />
+                <img v-if="rabbitCompl[9]" src="../../../resources/img/new_img/icon/clear_img.png" alt="Clear Icon"
+                  class="clear-img" />
               </div>
             </button>
             <p :class="!rabbitCompl[9] ? 'before-clear' : 'clear'">
-              <img
-                v-if="rabbitCompl[9]"
-                src="../../../resources/img/new_img/icon/complete_icon.png"
-                alt="Complete Icon"
-                class="complete-icon"
-              />
+              <img v-if="rabbitCompl[9]" src="../../../resources/img/new_img/icon/complete_icon.png" alt="Complete Icon"
+                class="complete-icon" />
               {{ labeledItems[8].label }}
             </p>
           </div>
           <!-- 10 -->
           <div class="race-btn" @click="[storeLearningId(labeledItems[9])]">
             <div class="rabbit-running">
-              <img
-                src="../../../resources/img/new_img/rabbit.png"
-                alt=""
-                :style="{ display: rabbitPos[10] ? 'block' : 'none' }"
-              />
+              <img src="../../../resources/img/new_img/rabbit.png" alt=""
+                :style="{ display: rabbitPos[10] ? 'block' : 'none' }" />
             </div>
-            <button
-              class="popTxt"
-              v-for="(item, index) in items"
-              :key="index"
-              @click="toggleImage(index)"
-              data-num="10"
-            >
+            <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
+              data-num="10">
               <div class="image-container">
-                <img
-                  src="../../../resources/img/new_img/board/racebtn_10.png"
-                  alt="Race Button"
-                  class="base-img"
-                />
-                <img
-                  v-if="rabbitCompl[10]"
-                  src="../../../resources/img/new_img/icon/clear_img.png"
-                  alt="Clear Icon"
-                  class="clear-img"
-                />
+                <img src="../../../resources/img/new_img/board/racebtn_10.png" alt="Race Button" class="base-img" />
+                <img v-if="rabbitCompl[10]" src="../../../resources/img/new_img/icon/clear_img.png" alt="Clear Icon"
+                  class="clear-img" />
               </div>
             </button>
             <p :class="!rabbitCompl[10] ? 'before-clear' : 'clear'">
-              <img
-                v-if="rabbitCompl[10]"
-                src="../../../resources/img/new_img/icon/complete_icon.png"
-                alt="Complete Icon"
-                class="complete-icon"
-              />
+              <img v-if="rabbitCompl[10]" src="../../../resources/img/new_img/icon/complete_icon.png"
+                alt="Complete Icon" class="complete-icon" />
               {{ labeledItems[9].label }}
             </p>
           </div>
           <!-- 11 -->
           <div class="race-btn" @click="[storeLearningId(labeledItems[10])]">
             <div class="rabbit-running">
-              <img
-                src="../../../resources/img/new_img/rabbit.png"
-                alt=""
-                :style="{ display: rabbitPos[11] ? 'block' : 'none' }"
-              />
+              <img src="../../../resources/img/new_img/rabbit.png" alt=""
+                :style="{ display: rabbitPos[11] ? 'block' : 'none' }" />
             </div>
-            <button
-              class="popTxt"
-              v-for="(item, index) in items"
-              :key="index"
-              @click="toggleImageAndShowPopup(index, '11')"
-              data-num="11"
-            >
+            <button class="popTxt" v-for="(item, index) in items" :key="index"
+              @click="toggleImageAndShowPopup(index, '11')" data-num="11">
               <div class="image-container">
-                <img
-                  src="../../../resources/img/new_img/board/racebtn_11.png"
-                  alt="Race Button"
-                  class="base-img"
-                />
-                <img
-                  v-if="rabbitCompl[11]"
-                  src="../../../resources/img/new_img/icon/clear_img.png"
-                  alt="Clear Icon"
-                  class="clear-img"
-                />
+                <img src="../../../resources/img/new_img/board/racebtn_11.png" alt="Race Button" class="base-img" />
+                <img v-if="rabbitCompl[11]" src="../../../resources/img/new_img/icon/clear_img.png" alt="Clear Icon"
+                  class="clear-img" />
               </div>
             </button>
             <p :class="!rabbitCompl[11] ? 'before-clear' : 'clear'">
-              <img
-                v-if="rabbitCompl[11]"
-                src="../../../resources/img/new_img/icon/complete_icon.png"
-                alt="Complete Icon"
-                class="complete-icon"
-              />
+              <img v-if="rabbitCompl[11]" src="../../../resources/img/new_img/icon/complete_icon.png"
+                alt="Complete Icon" class="complete-icon" />
               {{ labeledItems[10].label }}
             </p>
           </div>
         </div>
         <div class="race-btn">
           <div class="rabbit-running" style="display: flex">
-            <img
-              class="rabbit-end"
-              src="../../../resources/img/new_img/rabbit.png"
-              alt=""
-              :style="{ display: rabbitEnd ? 'block' : 'none' }"
-            />
-            <img
-              class="fireworks-end"
-              src="../../../resources/img/fireworks.gif"
-              alt=""
-              :style="{ display: rabbitEnd ? 'block' : 'none' }"
-            />
+            <img class="rabbit-end" src="../../../resources/img/new_img/rabbit.png" alt=""
+              :style="{ display: rabbitEnd ? 'block' : 'none' }" />
+            <img class="fireworks-end" src="../../../resources/img/fireworks.gif" alt=""
+              :style="{ display: rabbitEnd ? 'block' : 'none' }" />
           </div>
         </div>
       </div>

       <!-- 팝업 -->
       <div v-show="searchOpen2" class="popup-wrap">
         <div class="popup-box">
-          <button
-            type="button"
-            class="popup-close-btn"
-            style="position: absolute; top: 10px; right: 10px"
-            @click="closeModal"
-          >
-            <svg-icon
-              type="mdi"
-              :path="mdiWindowClose"
-              class="close-btn"
-            ></svg-icon>
+          <button type="button" class="popup-close-btn" style="position: absolute; top: 10px; right: 10px"
+            @click="closeModal">
+            <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
           </button>
 
           <div class="mb30 text-ct">

             </p>
           </div>
           <div class="flex justify-center">
-            <button
-              type="button"
-              title="사진촬영"
-              class="new-btn"
-              @click="openCameraModal"
-            >
+            <button type="button" title="사진촬영" class="new-btn" @click="openCameraModal">
               사진 촬영
             </button>
           </div>

           <div class="flex mb10 justify-between">
             <p class="popup-title">사진 촬영</p>
             <button type="button" class="popup-close-btn" @click="closeModal">
-              <svg-icon
-                type="mdi"
-                :path="mdiWindowClose"
-                class="close-btn"
-              ></svg-icon>
+              <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
             </button>
           </div>
           <div class="box">
             <div style="width: 100%">
               <div id="container" ref="container">
-                <video
-                  v-if="!photoTaken"
-                  autoplay="true"
-                  ref="modalVideoElement"
-                  class="mirrored"
-                  @canplay="onVideoLoaded"
-                  style="position: absolute; height: 100%"
-                ></video>
-                <img
-                  src="../../../resources/img/camera-rabbit.png"
-                  class="camera-rabbit"
-                  style="position: absolute"
-                />
+                <video v-if="!photoTaken" autoplay="true" ref="modalVideoElement" class="mirrored"
+                  @canplay="onVideoLoaded" style="position: absolute; height: 100%"></video>
+                <img src="../../../resources/img/camera-rabbit.png" class="camera-rabbit" style="position: absolute" />
                 <canvas ref="canvas" style="pointer-events: none"></canvas>
               </div>
             </div>

     </div>
 
     <div class="complete-wrap myphoto">
-      <button
-        class="login-btn mt10"
-        type="submit"
-        style="width: 100%"
-        @click="finishSchedule"
-      >
-        <img
-          src="../../../resources/img/btn07_s.png"
-          alt=""
-          style="height: 100px"
-        />
+      <button class="login-btn mt10" type="submit" style="width: 100%" @click="finishSchedule">
+        <img src="../../../resources/img/btn07_s.png" alt="" style="height: 100px" />
         <p>학습 종료하기</p>
       </button>
       <h2 class="mb40 mt10">이 단원을 끝낸 친구들</h2>

       <article class="flex-column">
         <div class="flex-row">
           <div class="flex" style="gap: 5px; flex-wrap: wrap">
-            <div
-              v-for="(image, index) in images"
-              :key="image.fileId"
-              @click="buttonSearch(image)"
-              class="photo"
-              style="margin-bottom: 5px"
-            >
-              <img
-                :src="image.url"
-                :alt="image.fileNm"
-                reloadable="true"
-                style="height: 100%"
-              />
+            <div v-for="(image, index) in images" :key="image.fileId" @click="buttonSearch(image)" class="photo"
+              style="margin-bottom: 5px">
+              <img :src="image.url" :alt="image.fileNm" reloadable="true" style="height: 100%" />
             </div>
           </div>
         </div>

         <div class="popup-box" style="top: 50%">
           <div class="flex mb10 justify-between">
             <button type="button" class="popup-close-btn" @click="closeModal">
-              <svg-icon
-                type="mdi"
-                :path="mdiWindowClose"
-                class="close-btn"
-              ></svg-icon>
+              <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
             </button>
           </div>
           <div class="box">
             <div style="width: 910px; height: 680px">
-              <img
-                :src="selectedImage.image"
-                alt="Image"
-                @error="onImageError"
-                reloadable="true"
-              />
+              <img :src="selectedImage.image" alt="Image" @error="onImageError" reloadable="true" />
             </div>
           </div>
           <div class="flex justify-between mt20">
             <div class="text flex">
               <p class="title2 date ml30">{{ selectedImage.date }}</p>
-              <span class="title1 ml30"
-                >{{ selectedImage.unit }}을 마친
-                <em class="yellow">{{ selectedImage.name }}</em
-                >친구</span
-              >
+              <span class="title1 ml30">{{ selectedImage.unit }}을 마친
+                <em class="yellow">{{ selectedImage.name }}</em>친구</span>
             </div>
             <div class="title2 flex align-center" style="gap: 10px">
-              <svg-icon
-                v-if="!isHeartFilled"
-                type="mdi"
-                :path="mdiHeartOutline"
-                @click="
-                  toggleHeart(selectedImage.heart, selectedImage.fileMngId)
-                "
-                style="color: #ffba08; cursor: pointer"
-              ></svg-icon>
-              <svg-icon
-                v-if="isHeartFilled"
-                type="mdi"
-                :path="mdiHeart"
-                @click="
-                  toggleHeart(selectedImage.heart, selectedImage.fileMngId)
-                "
-                style="color: #ffba08; cursor: pointer"
-              ></svg-icon>
+              <svg-icon v-if="!isHeartFilled" type="mdi" :path="mdiHeartOutline" @click="
+                toggleHeart(selectedImage.heart, selectedImage.fileMngId)
+                " style="color: #ffba08; cursor: pointer"></svg-icon>
+              <svg-icon v-if="isHeartFilled" type="mdi" :path="mdiHeart" @click="
+                toggleHeart(selectedImage.heart, selectedImage.fileMngId)
+                " style="color: #ffba08; cursor: pointer"></svg-icon>
               <p>
                 <em class="yellow">{{ selectedImage.heart }}</em>
               </p>

 .complete-wrap img {
   width: auto;
 }
+
 .body {
   width: 1435px;
   height: auto;

   display: flex;
   align-items: center;
 }
+
 .lcon .race-btn .rabbit-running {
   transform: scaleX(1);
 }
Add a comment
Open 0
Closed 0
List
Delete comment
