Commit @47eb4d35df253fdeb633362e0f32e8230cdd91ff

홍아랑 09-10

240910 홍아랑 대시보드, ai대시보드 css 수정

@47eb4d35df253fdeb633362e0f32e8230cdd91ff

0a3468a

47eb4d3

client/resources/css/style.css

--- client/resources/css/style.css

+++ client/resources/css/style.css


 /* 회원가입 */
 .join-box {
-    width: 800px;
-    margin: 0 auto;
+  width: 800px;
+  margin: 0 auto;
 }
-.join-box input[type='radio'] {
-    display: inline-block;
-    width: 24px !important;
-    height: 24px;
-    margin: -2px 10px 0 0;
-    vertical-align: middle;
-    cursor: pointer;
-    -moz-border-radius: 50%;
-    border-radius: 50%;
-    border: 3px solid #ffffff;
-    accent-color: #ffba08;
+.join-box input[type="radio"] {
+  display: inline-block;
+  width: 24px !important;
+  height: 24px;
+  margin: -2px 10px 0 0;
+  vertical-align: middle;
+  cursor: pointer;
+  -moz-border-radius: 50%;
+  border-radius: 50%;
+  border: 3px solid #ffffff;
+  accent-color: #ffba08;
 }
 
 .find-table tr {
-    border-top: #a3a5aa 1px solid;
-    border-bottom: #a3a5aa 1px solid;
+  border-top: #a3a5aa 1px solid;
+  border-bottom: #a3a5aa 1px solid;
 }
 .find-table .thead {
-    background-color: #eaedf4;
+  background-color: #eaedf4;
 }
 /* 로그인페이지 */
 .login-container {
-    padding: 20px 20px;
-    background-image: url('../img/bg.png');
+  padding: 20px 20px;
+  background-image: url("../img/bg.png");
 }
 
 .login h2 {
-    font-size: 30px;
-    color: #fff;
-    font-family: 'ONEMobilePOPOTF';
-    font-weight: 100;
+  font-size: 30px;
+  color: #fff;
+  font-family: "ONEMobilePOPOTF";
+  font-weight: 100;
 }
 
 .login-box {
-    width: 712px;
-    /* height: 560px; */
-    margin: 0 auto;
+  width: 712px;
+  /* height: 560px; */
+  margin: 0 auto;
 }
 
 .login-form {
-    background-color: #fff;
-    padding: 60px 45px;
-    border-radius: 20px;
+  background-color: #fff;
+  padding: 60px 45px;
+  border-radius: 20px;
 }
 
 .login-form .title {
-    font-family: 'ONEMobileOTF-Bold';
-    font-size: 24px;
-    width: 230px;
+  font-family: "ONEMobileOTF-Bold";
+  font-size: 24px;
+  width: 230px;
 }
 .login-form .help {
-    margin-left: 170px;
+  margin-left: 170px;
 }
-.login-form input[type='text'],
-.login-form input[type='password'] {
-    border: 3px solid #ffd56b;
-    border-radius: 10px;
-    padding: 22px 19px;
-    width: 100%;
-    font-size: 24px;
+.login-form input[type="text"],
+.login-form input[type="password"] {
+  border: 3px solid #ffd56b;
+  border-radius: 10px;
+  padding: 22px 19px;
+  width: 100%;
+  font-size: 24px;
 }
 .login-form input:focus {
-    outline: 3px solid #ffba0a;
-    border: 0 !important; /* 클릭 시 테두리 색상 변경 */
+  outline: 3px solid #ffba0a;
+  border: 0 !important; /* 클릭 시 테두리 색상 변경 */
 }
-.login-form .search-wrap input[type='text'],
+.login-form .search-wrap input[type="text"],
 .login-form .search-wrap select {
-    border: 3px solid #ffd56b;
-    border-radius: 10px;
-    padding: 22px 19px;
-    width: 100%;
-    font-size: 24px;
+  border: 3px solid #ffd56b;
+  border-radius: 10px;
+  padding: 22px 19px;
+  width: 100%;
+  font-size: 24px;
 }
 .login-form .search-wrap button {
-    top: 24px;
-    right: 2rem;
+  top: 24px;
+  right: 2rem;
 }
 .login-btn {
-    position: relative;
+  position: relative;
 }
 
 .login-btn p {
-    position: absolute;
-    top: 42%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    font-family: 'ONEMobilePOPOTF';
-    font-size: 36px;
+  position: absolute;
+  top: 42%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-family: "ONEMobilePOPOTF";
+  font-size: 36px;
 }
 
 /* ------------------------학생 --------------------- */
 /* 헤더 */
 .notice {
-    position: relative;
-    cursor: pointer;
+  position: relative;
+  cursor: pointer;
 }
 .notice p {
-    position: absolute;
-    top: 3px;
-    right: 6px;
-    color: #fff;
-    font-weight: bold;
+  position: absolute;
+  top: 3px;
+  right: 6px;
+  color: #fff;
+  font-weight: bold;
 }
 
 .header article {
-    background-color: #f8f9fb;
-    border-radius: 10px;
-    padding: 22px 19px;
-    width: 100%;
-    font-size: 24px;
+  background-color: #f8f9fb;
+  border-radius: 10px;
+  padding: 22px 19px;
+  width: 100%;
+  font-size: 24px;
 }
 /* 레이아웃 */
 .side {
-    width: 42rem;
+  width: 42rem;
 }
 
 .main-wrap {
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-    padding: 50px 40px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  padding: 50px 40px;
 }
 
 .main-wrap {
-    width: 134rem;
-    height: 70rem;
-    background-color: #fff;
-    border-radius: 10px;
-    position: absolute;
-    right: 60px;
-    top: 179px;
-    z-index: 1;
+  width: 134rem;
+  height: 70rem;
+  background-color: #fff;
+  border-radius: 10px;
+  position: absolute;
+  right: 60px;
+  top: 179px;
+  z-index: 1;
 }
 
 .header img {
-    margin-left: 20px;
-    object-fit: contain;
+  margin-left: 20px;
+  object-fit: contain;
 }
 
 /* 사이드 */
 .side button p {
-    font-size: 24px;
+  font-size: 24px;
 }
 
 .side .profile {
-    height: 24rem;
-    background-color: #fff;
-    border-radius: 10px;
-    padding: 25px 48px;
-    font-size: 16px;
-    font-family: 'ONEMobileOTF-Regular';
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  /* height: 24rem; */
+  /* background-color: #fff; */
+  border-radius: 10px;
+  padding: 30px 20px 0px;
+  font-size: 16px;
+  font-family: "ONEMobileOTF-Regular";
+  /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); */
 }
 
 .side .name {
-    font-family: 'ONEMobilePOPOTF';
-    font-size: 24px;
+  font-family: "ONEMobilePOPOTF";
+  font-size: 24px;
 }
+
 .name {
-    font-family: 'ONEMobilePOPOTF';
-    font-size: 24px;
+  font-family: "ONEMobilePOPOTF";
+  font-size: 24px;
 }
 .side .profile img {
-    object-fit: contain;
+  object-fit: contain;
 }
 
 .side .profile span {
-    font-family: 'Pretendard';
-    font-weight: bold;
-    font-size: 14px;
+  font-family: "Pretendard";
+  font-weight: bold;
+  font-size: 14px;
 }
 
 .side .profile span.brown {
-    color: #331600;
+  color: #331600;
 }
 
 .side .ask {
-    height: 32rem;
-    background-color: #fff;
-    border-radius: 10px;
-    padding: 25px 48px;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  height: 32rem;
+  background-color: #fff;
+  border-radius: 10px;
+  padding: 25px 48px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 }
 
 .side .ask .memo {
-    background-image: url('../img/img10_s.png');
-    background-repeat: no-repeat;
-    width: 324px;
-    height: 174px;
-    position: relative;
-    padding: 25px 30px;
+  background-image: url("../img/img10_s.png");
+  background-repeat: no-repeat;
+  width: 324px;
+  height: 174px;
+  position: relative;
+  padding: 25px 30px;
 }
 
 .side .ask .memo textarea {
-    background-color: #ddf0ff;
-    width: -webkit-fill-available;
-    height: 117px;
+  background-color: #ddf0ff;
+  width: -webkit-fill-available;
+  height: 117px;
 }
 
 .side .ask button {
-    padding: 10px 30px;
-    border: #ffd56b 3px solid;
-    border-radius: 30px;
-    font-family: 'ONEMobilePOPOTF';
-    font-size: 18px;
-    color: #331600;
+  padding: 10px 30px;
+  border: #ffd56b 3px solid;
+  border-radius: 30px;
+  font-family: "ONEMobilePOPOTF";
+  font-size: 18px;
+  color: #331600;
 }
 
 /* 메뉴 */
 .menu {
-    margin-top: 63px;
-    width: 1324px;
-    position: absolute;
-    left: 579px;
+  /* margin-top: 63px;
+  width: 1324px;
+  position: absolute;
+  left: 579px; */
 }
 
 .menu a:first-child button {
-    /* background-image: url('../../resources/img/btn04_s.png'); */
-    color: #6327b9;
-    width: 186px;
+  /* background-image: url('../../resources/img/btn04_s.png'); */
+  width: 186px;
 }
 
 .menu a:nth-child(2) button {
-    background-image: url('../../resources/img/btn06_s.png');
-    width: 225px;
+  /* background-image: url('../../resources/img/btn06_s.png'); */
+  width: 225px;
 }
 
 .menu a:last-child button {
-    background-image: url('../../resources/img/btn05_s.png');
-    width: 207px;
+  /* background-image: url('../../resources/img/btn05_s.png'); */
+  width: 207px;
 }
 
 .menu a:first-child button.active {
-    background-image: url('../../resources/img/btn04_1_s.png');
-    width: 252px;
-    /* 마이페이지 활성화 이미지 */
+  /* background-image: url('../../resources/img/btn04_1_s.png'); */
+  /* width: 252px; */
+  /* 마이페이지 활성화 이미지 */
 }
 
 .menu a:nth-child(2) button.active {
-    background-image: url('../../resources/img/btn06_1_s.png');
-    width: 297px;
-    /* 대시보드 활성화 이미지 */
+  /* background-image: url('../../resources/img/btn06_1_s.png'); */
+  /* width: 297px; */
+  /* 대시보드 활성화 이미지 */
 }
 
 .menu a:last-child button.active {
-    background-image: url('../../resources/img/btn05_1_s.png');
-    width: 259px;
-    /* 학습일정계획 활성화 이미지 */
+  /* background-image: url('../../resources/img/btn05_1_s.png'); */
+  /* width: 259px; */
+  /* 학습일정계획 활성화 이미지 */
 }
 
 .menu button p {
-    font-size: 32px;
-    color: #fff;
-    height: 50px;
+  font-size: 32px;
+  color: #8c8c8c;
+  height: 50px;
 }
 
 .menu button {
-    background-repeat: no-repeat;
-    height: 72px;
-    text-align: -webkit-center;
+  background-repeat: no-repeat;
+  height: 72px;
+  text-align: -webkit-center;
 }
 
 .menu button.active {
-    height: 118px;
-    margin-top: -18px;
+  /* height: 118px; */
+  /* margin-top: -18px; */
 }
 
 .menu button p.active {
-    display: none;
-    /* 원하는 색상으로 변경 */
+  /* display: none; */
+  /* 원하는 색상으로 변경 */
+  color: #6327b9;
 }
+
 /* 마이페이지 */
 .look-btn {
-    cursor: pointer;
+  cursor: pointer;
 }
 .mypage .class {
-    background-image: url('../img/btn46_12s_normal.png');
-    width: 286px;
-    height: 114px;
-    padding: 11px 25px 40px 25px;
-    cursor: pointer;
+  background-image: url("../img/btn46_12s_normal.png");
+  width: 286px;
+  height: 114px;
+  padding: 11px 25px 40px 25px;
+  cursor: pointer;
 }
 
 .mypage .class img {
-    width: 35px;
-    height: 100%;
+  width: 35px;
+  height: 100%;
 }
 .mypage .class .box {
-    background-color: transparent;
-    padding: 0;
+  background-color: transparent;
+  padding: 0;
 }
 .mypage .class .box > div {
-    height: 35px;
+  height: 35px;
 }
 .mypage .photobook {
-    background-image: url('../img/img199_12p.png');
-    width: 367px;
-    height: 182px;
-    padding: 20px 50px 20px 40px;
-    color: #fff;
+  background-image: url("../img/img199_12p.png");
+  width: 367px;
+  height: 182px;
+  padding: 20px 50px 20px 40px;
+  color: #fff;
 }
 .mypage .textbook {
-    font-family: 'ONEMobilePOPOTF';
+  font-family: "ONEMobilePOPOTF";
 }
 .mypage .photobook .title1 {
-    font-family: 'ONEMobilePOPOTF';
-    font-weight: 100;
+  font-family: "ONEMobilePOPOTF";
+  font-weight: 100;
 }
 .mypage .textbook .text {
-    border-radius: 12px 12px 0px 0px;
-    height: 68px;
+  border-radius: 12px 12px 0px 0px;
+  height: 68px;
 }
 .mypage .textbook .box {
-    height: fit-content;
-    text-align: center;
-    padding: 10px;
+  height: fit-content;
+  text-align: center;
+  padding: 10px;
 }
 .mypage .book-red .text {
-    background-color: #db2b39;
+  background-color: #db2b39;
 }
 /* .mypage .textbook:nth-child(2) .text */
 .mypage .book-blue .text {
-    background-color: #2d7dd2;
+  background-color: #2d7dd2;
 }
 .mypage .book-navy .text {
-    background-color: #3066be;
+  background-color: #3066be;
 }
 .mypage .book-gray > .text {
-    background-color: #f7f8f9;
+  background-color: #f7f8f9;
 }
 
 .mypage .book-purple > .text {
-    background-color: #9528b7;
+  background-color: #9528b7;
 }
 
 .mypage .textbook .box {
-    text-align: center;
-    padding: 10px;
+  text-align: center;
+  padding: 10px;
 }
 .mypage .book-red {
-    border: #db2b39 solid 6px;
+  border: #db2b39 solid 6px;
 }
 /* .mypage .textbook:nth-child(2) .text */
 .mypage .book-blue {
-    border: #2d7dd2 solid 6px;
+  border: #2d7dd2 solid 6px;
 }
 .mypage .book-navy {
-    border: #3066be solid 6px;
+  border: #3066be solid 6px;
 }
 .mypage .book-gray {
-    border: #8c8e92 solid 1px;
+  border: #8c8e92 solid 1px;
 }
 .mypage .book-purple {
-    border: #9528b7 solid 6px;
+  border: #9528b7 solid 6px;
 }
 
 .mypage em.orange {
-    color: #ffba08;
+  color: #ffba08;
 }
 
 .mypage em.navy {
-    color: #3066be;
+  color: #3066be;
 }
 
 .mypage em.blue {
-    color: #2d7dd2;
+  color: #2d7dd2;
 }
 
 .mypage em.red {
-    color: #db2b39;
+  color: #db2b39;
 }
 
 .mypage em.purple {
-    color: #9528b7;
+  color: #9528b7;
 }
 
 .myphoto > div {
-    background-image: url('../img/img207_15s.png');
-    width: 1011px;
-    height: 558px;
-    padding: 30px 60px;
-    margin: 0 auto;
+  background-image: url("../img/img207_15s.png");
+  width: 1011px;
+  height: 558px;
+  padding: 30px 60px;
+  margin: 0 auto;
 }
 .tab-btn {
-    position: relative;
-    color: #568bfa;
+  position: relative;
+  color: #568bfa;
 }
 .tab-btn p.custom-style {
-    color: #fff;
+  color: #fff;
 }
 
 .tab-btn p {
-    position: absolute;
-    top: 46%;
-    right: 7%;
-    transform: translate(-50%, -50%);
-    font-family: 'ONEMobilePOPOTF';
-    font-size: 36px;
+  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: 10000;
+  width: max-content;
+  position: absolute;
+  right: 45px;
+  z-index: 10000;
 }
 .myphoto .class {
-    border-radius: 0px;
-    padding: 10px;
+  border-radius: 0px;
+  padding: 10px;
 }
 .myphoto .class .box {
-    background-color: transparent;
-    border-radius: 0px;
-    padding: 0;
+  background-color: transparent;
+  border-radius: 0px;
+  padding: 0;
 }
 .myphoto .class .member::before {
-    content: '';
-    background-image: url('../img/btn47_15s_normal.png');
-    width: 16px;
-    height: 14px;
-    position: absolute;
-    left: -28px;
-    top: 4px;
+  content: "";
+  background-image: url("../img/btn47_15s_normal.png");
+  width: 16px;
+  height: 14px;
+  position: absolute;
+  left: -28px;
+  top: 4px;
 }
 .myphoto .photo {
-    cursor: pointer;
+  cursor: pointer;
 }
 .myphoto .photo .title2 {
-    color: #8c8e92;
+  color: #8c8e92;
 }
 .myphoto .tab-box {
-    margin: 40px 0px 20px 50px;
+  margin: 40px 0px 20px 50px;
 }
 .myphoto .photo:hover .class {
-    transform: rotate(2deg);
+  transform: rotate(2deg);
 }
 .myphoto .popup-wrap .date {
-    position: relative;
+  position: relative;
 }
 .myphoto .popup-wrap .date::before {
-    content: '';
-    background-image: url('../img/img183_91t.png');
-    width: 20px;
-    height: 22px;
-    position: absolute;
-    left: -28px;
+  content: "";
+  background-image: url("../img/img183_91t.png");
+  width: 20px;
+  height: 22px;
+  position: absolute;
+  left: -28px;
 }
 /* 학습일정계획 */
 .myplan .popup-wrap article {
-    max-height: 400px;
-    overflow-x: auto;
+  max-height: 400px;
+  overflow-x: auto;
 }
 .myplan {
-    padding-right: 10px;
+  padding-right: 10px;
 }
 .myplan .yellow-box {
-    background-color: #fff8e9;
-    border: 1px solid #ffba08;
-    padding: 4rem;
-    position: relative;
-    border-radius: 10px;
+  background-color: #fff8e9;
+  border: 1px solid #ffba08;
+  padding: 4rem;
+  position: relative;
+  border-radius: 10px;
 }
 .yellow-btn {
-    background-image: url('../img/btn08_s.png');
-    width: 181px;
-    height: 60px;
-    padding: 5px 20px;
-    font-size: 28px;
-    font-family: 'ONEMobilePOP';
+  background-image: url("../img/btn08_s.png");
+  width: 181px;
+  height: 60px;
+  padding: 5px 20px;
+  font-size: 28px;
+  font-family: "ONEMobilePOP";
 }
 .myplan .table-wrap .title2 {
-    color: #464749;
+  color: #464749;
 }
-.myplan input[type='checkbox'] {
-    width: 30px;
-    height: 30px;
+.myplan input[type="checkbox"] {
+  width: 30px;
+  height: 30px;
 }
 .myplan .ui-checkbox::before {
-    width: 11px;
-    height: 14px;
+  width: 11px;
+  height: 14px;
 }
 .myplan table tr {
-    border-top: #c6c6c6 1px solid;
-    border-bottom: #c6c6c6 1px solid;
+  border-top: #c6c6c6 1px solid;
+  border-bottom: #c6c6c6 1px solid;
 }
 .myplan .imgGroup img {
-    width: 349px;
-    height: 312px;
+  width: 349px;
+  height: 312px;
 }
+
 /* 대시보드 */
 .main {
-    max-height: 600px;
-    overflow: auto;
+  max-height: 600px;
+  overflow: auto;
 }
 
 .main .race-wrap {
-    background-image: url('../img/img20_1_s.png');
-    background-repeat: no-repeat;
-    width: 1242px;
-    height: 599px;
-    position: relative;
+  background-image: url("../img/new_img/board/background.png");
+  background-repeat: no-repeat;
+  width: 1249px;
+  height: 653px;
+  position: relative;
+}
+
+.main .race-wrap-ai {
+  background-image: url("../img/new_img/ai_board/background.png");
+  background-repeat: no-repeat;
+  width: 1249px;
+  height: 653px;
+  position: relative;
 }
 
 .complete-wrap {
-    width: 1244px;
-    height: 617px;
+  width: 1244px;
+  height: 617px;
 }
 
 button p {
-    font-family: 'ONEMobilePOPOTF';
-    width: max-content;
+  font-family: "ONEMobilePOPOTF";
+  width: max-content;
 }
 
 .race-wrap .title-box {
-    position: absolute;
-    top: -3px;
-    left: 50px;
-    text-align: center;
-    background-image: url('../img/img15_s.png');
-    width: 336px;
-    height: 145px;
+  position: absolute;
+  top: -3px;
+  left: 50px;
+  text-align: center;
+  background-image: url("../img/img15_s.png");
+  width: 336px;
+  height: 145px;
 }
 
 .race-wrap .title-box .title {
-    font-size: 32px;
-    font-family: 'ONEMobilePOPOTF';
+  font-size: 32px;
+  font-family: "ONEMobilePOPOTF";
 }
 
 .race-wrap .title-box .subtitle {
-    font-size: 16px;
-    background-color: #441e03;
-    color: #fff;
-    padding: 5px 15px;
-    width: fit-content;
-    border-radius: 20px;
-    display: inline-block;
-    font-family: 'ONEMobileOTF-Bold';
+  font-size: 16px;
+  background-color: #441e03;
+  color: #fff;
+  padding: 5px 15px;
+  width: fit-content;
+  border-radius: 20px;
+  display: inline-block;
+  font-family: "ONEMobileOTF-Bold";
 }
 .race-wrap .title-box .subtitle2 {
 }
 .race-box {
-    width: 1063px;
-    height: 516px;
-    position: absolute;
-    left: 114px;
-    top: 60px;
+  width: 1063px;
+  height: 516px;
+  position: absolute;
+  left: 114px;
+  top: 60px;
 }
 
 .race-box .rcon,
 .race-box .lcon {
-    gap: 42px;
-    width: 1063px;
+  gap: 128px;
+  width: 1125px;
 }
 
 .rabbit-start {
-    position: absolute;
-    top: -45px;
-    left: 393px;
+  position: absolute;
+  top: -30px;
+  left: 556px;
 }
 .rabbit-end {
-    position: absolute;
-    bottom: 24px;
-    right: 40px;
+  position: absolute;
+  bottom: 24px;
+  right: 40px;
 }
 
 .rabbit img {
-    transform: scaleX(-1);
+  transform: scaleX(-1);
 }
 
 .race-btn {
-    position: relative;
-    cursor: pointer;
+  position: relative;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
-.race-btn p {
-    position: absolute;
-    text-align: center;
-    width: 76px;
-    top: 16px;
-    right: 9px;
-    font-family: 'ONEMobilePOPOTF';
-    font-size: 28px;
-    color: #3a241d;
+.race-btn p,
+.race-btn .popTxt p {
+  position: absolute;
+  text-align: center;
+  width: fit-content;
+  /* top: 16px; */
+  /* right: 9px; */
+  font-family: "ONEMobilePOPOTF";
+  font-size: 28px;
+  color: #3a241d;
+  white-space: nowrap;
 }
 
 .race-btn p.long {
-    width: fit-content;
+  width: fit-content;
 }
 /* .popup-yellow{
   background-image: url('../img/img139_72s.png');

 } */
 /* 사진촬영 */
 .camera {
-    background-color: #000;
+  background-color: #000;
 }
 .camera .header {
-    height: 110px;
-    background-color: #eaedf4;
-    padding: 0 60px;
+  height: 110px;
+  background-color: #eaedf4;
+  padding: 0 60px;
 }
 .camera .body {
-    width: 1435px;
-    height: 810px;
-    margin: 0 auto;
+  width: 1435px;
+  height: 810px;
+  margin: 0 auto;
 }
 .stickers button {
-    margin: 5px;
-    text-align: center;
+  margin: 5px;
+  text-align: center;
 }
 .frame {
-    background-image: url('../img/img142_76s.png');
-    width: 993px;
-    height: 634px;
-    padding: 55px;
-    text-align: center;
+  background-image: url("../img/img142_76s.png");
+  width: 993px;
+  height: 634px;
+  padding: 55px;
+  text-align: center;
 }
 .frame .photo {
-    width: 845px;
-    height: 476px;
-    margin: 0 auto;
+  width: 845px;
+  height: 476px;
+  margin: 0 auto;
 }
 .frame .photo img {
-    width: inherit;
+  width: inherit;
 }
 /* 학습을 마친 친구들 */
 .complete-wrap h2 {
-    font-size: 32px;
-    color: #331600;
-    font-family: 'ONEMobilePOPOTF';
-    font-weight: 100;
+  font-size: 32px;
+  color: #331600;
+  font-family: "ONEMobilePOPOTF";
+  font-weight: 100;
 }
 .complete-wrap img {
-    width: inherit;
+  width: inherit;
 }
 .complete-wrap .photo {
-    cursor: pointer;
-    width: 200px;
-    height: 130px;
+  cursor: pointer;
+  width: 200px;
+  height: 130px;
 }
 /* 챕터 */
 .time-hint {
-    position: absolute;
-    top: 50px;
-    right: 50px;
-    text-align: center;
+  position: absolute;
+  top: 50px;
+  right: 50px;
+  text-align: center;
 }
 .hint-btn {
-    background-image: url('../img/btn01.png');
-    width: 110px;
-    height: 45px;
-    padding: 5px 20px;
-    font-size: 28px;
-    font-family: 'ONEMobilePOP';
+  background-image: url("../img/btn01.png");
+  width: 110px;
+  height: 45px;
+  padding: 5px 20px;
+  font-size: 28px;
+  font-family: "ONEMobilePOP";
 }
 .content-wrap {
-    margin: 10px 60px 0 60px;
+  margin: 10px 60px 0 60px;
 }
 
 .content-wrap::before {
-    /* background-image: url('../img/logo2.png'); */
-    background-size: 155px 58px;
-    width: 155px;
-    height: 58px;
-    content: '';
-    display: block;
-    position: absolute;
-    top: -72px;
+  /* background-image: url('../img/logo2.png'); */
+  background-size: 155px 58px;
+  width: 155px;
+  height: 58px;
+  content: "";
+  display: block;
+  position: absolute;
+  top: -72px;
 }
 
 .content-wrap > .title-box {
-    margin-left: 75px;
+  margin-left: 75px;
 }
 
 .content p.title-bg {
-    width: max-content;
-    height: max-content;
-    background: linear-gradient(to right, #eaedf4, rgba(255, 255, 255, 0));
-    padding: 20px 60px;
-    margin-bottom: 30px;
+  width: max-content;
+  height: max-content;
+  background: linear-gradient(to right, #eaedf4, rgba(255, 255, 255, 0));
+  padding: 20px 60px;
+  margin-bottom: 30px;
 }
 
 .content {
-    position: relative;
-    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1);
-    width: 93%;
-    height: 710px;
-    background-color: #fff;
-    border-radius: 20px;
+  position: relative;
+  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1);
+  width: 93%;
+  height: 710px;
+  background-color: #fff;
+  border-radius: 20px;
 }
 
 /* step1 */
 .videoCon {
-    position: relative;
-    text-align: center;
-    width: 100%;
-    display: inline-block;
+  position: relative;
+  text-align: center;
+  width: 100%;
+  display: inline-block;
 }
 
 .videoCon .videoStart {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translateY(-50%) translateX(-50%);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translateY(-50%) translateX(-50%);
 }
 
 .look-text {
-    position: absolute;
-    right: 60px;
-    bottom: 0;
+  position: absolute;
+  right: 60px;
+  bottom: 0;
 }
 
 .look-text button {
-    position: relative;
+  position: relative;
 }
 
 .look-text p {
-    position: absolute;
-    top: 45%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    font-size: 28px;
+  position: absolute;
+  top: 45%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 28px;
 }
 
 /* step1-1 */
 .imgGroup,
 .textareaGroup {
-    width: 100%;
-    text-align: center;
+  width: 100%;
+  text-align: center;
 }
 
 .textareaGroup {
-    margin-top: 40px;
+  margin-top: 40px;
 }
 
 .textareaGroup textarea {
-    width: 1460px;
-    height: 200px;
-    background-color: #eff2f7;
-    border-radius: 10px;
-    padding: 30px 40px;
-    line-height: 30px;
-    font-size: 24px;
-    font-family: 'Pretendard-Regular';
+  width: 1460px;
+  height: 200px;
+  background-color: #eff2f7;
+  border-radius: 10px;
+  padding: 30px 40px;
+  line-height: 30px;
+  font-size: 24px;
+  font-family: "Pretendard-Regular";
 }
 
 /* step1-1-팝업 */
 .popup {
-    /* display: none; */
-    position: absolute;
-    width: 355px;
-    height: 327px;
-    background-color: white;
-    border: 3px solid #ffbd14;
-    border-radius: 10px;
-    padding: 20px 40px;
+  /* display: none; */
+  position: absolute;
+  width: 355px;
+  height: 327px;
+  background-color: white;
+  border: 3px solid #ffbd14;
+  border-radius: 10px;
+  padding: 20px 40px;
 }
 
 .popup h3 {
-    font-size: 42px;
+  font-size: 42px;
 }
 
 .popup .yellow-box {
-    width: 33px;
-    height: 33px;
-    color: #ffba08;
-    background-color: #fff3d7;
-    padding: 7px;
-    border-radius: 5px;
-    margin-right: 10px;
+  width: 33px;
+  height: 33px;
+  color: #ffba08;
+  background-color: #fff3d7;
+  padding: 7px;
+  border-radius: 5px;
+  margin-right: 10px;
 }
 
 /* step1-2 */
 .readGroup h4 {
-    font-size: 20px;
-    margin-bottom: 10px;
+  font-size: 20px;
+  margin-bottom: 10px;
 }
 .readGroup > div {
-    background-image: url('../img/img38_1_s.png');
-    width: 1282px;
-    height: 492px;
-    padding: 10px;
+  background-image: url("../img/img38_1_s.png");
+  width: 1282px;
+  height: 492px;
+  padding: 10px;
 }
 .readGroup .textbox {
-    height: calc(100% - 51px);
-    overflow-y: auto;
-    padding: 20px;
+  height: calc(100% - 51px);
+  overflow-y: auto;
+  padding: 20px;
 }
 .readGroup .icon {
-    text-align: center;
+  text-align: center;
 }
 
 .readGroup p.read {
-    width: max-content;
-    border-radius: 10px;
-    font-size: 24px;
-    font-family: 'Pretendard-Regular';
-    background-color: #eaedf4;
-    padding: 10px 20px;
+  width: max-content;
+  border-radius: 10px;
+  font-size: 24px;
+  font-family: "Pretendard-Regular";
+  background-color: #eaedf4;
+  padding: 10px 20px;
 }
 
 /* step1-3 */
 .listenGroup .title-bg {
-    position: absolute;
-    z-index: 1;
+  position: absolute;
+  z-index: 1;
 }
 
 .listenGroup img.bg {
-    position: absolute;
-    top: 0;
-    width: 100%;
-    height: 710px;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 710px;
 }
 
 .listenGroup .listen-btn {
-    position: absolute;
-    top: 77%;
-    left: 50%;
-    transform: translateY(-50%) translateX(-50%);
+  position: absolute;
+  top: 77%;
+  left: 50%;
+  transform: translateY(-50%) translateX(-50%);
 }
 
 .listenGroup .textbox {
-    position: absolute;
-    top: 45%;
-    left: 31%;
-    transform: translate(-50%, -50%);
-    /* width: 900px; */
+  position: absolute;
+  top: 45%;
+  left: 31%;
+  transform: translate(-50%, -50%);
+  /* width: 900px; */
 }
 .dropGroup .textbox {
-    position: absolute;
-    top: 45%;
-    left: 53%;
-    transform: translate(-50%, -50%);
-    /* width: 900px; */
+  position: absolute;
+  top: 45%;
+  left: 53%;
+  transform: translate(-50%, -50%);
+  /* width: 900px; */
 }
 
 .listenGroup .textbox p {
-    font-size: 28px;
-    line-height: 45px;
-    width: 100%;
+  font-size: 28px;
+  line-height: 45px;
+  width: 100%;
 }
 p.textbox {
-    width: 100%;
+  width: 100%;
 }
 .listenGroup p.title {
-    font-size: 42px;
-    text-shadow: 0px 0px 0 #fff, 0px 0px 0 #fff, 0px 0px 0 #fff, 0px 0px 0 #fff;
-    -webkit-text-stroke-width: 0px;
-    -webkit-text-stroke-color: #fff;
-    font-family: 'ONEMobilePOP';
-    margin-bottom: 25px;
+  font-size: 42px;
+  text-shadow: 0px 0px 0 #fff, 0px 0px 0 #fff, 0px 0px 0 #fff, 0px 0px 0 #fff;
+  -webkit-text-stroke-width: 0px;
+  -webkit-text-stroke-color: #fff;
+  font-family: "ONEMobilePOP";
+  margin-bottom: 25px;
 }
 
 /* step2 */
 .vocaGroup {
-    width: 1380px;
+  width: 1380px;
 }
 .vocaGroup h3 {
-    font-size: 42px;
+  font-size: 42px;
 }
 
 .vocaGroup .yellow-box {
-    width: 33px;
-    height: 33px;
-    color: #ffba08;
-    background-color: #fff3d7;
-    padding: 7px;
-    border-radius: 5px;
-    margin-right: 10px;
+  width: 33px;
+  height: 33px;
+  color: #ffba08;
+  background-color: #fff3d7;
+  padding: 7px;
+  border-radius: 5px;
+  margin-right: 10px;
 }
 
 .vocaGroup .imgGroup {
-    width: max-content;
+  width: max-content;
 }
 
 /* step2_1 */
 .mic-btn {
-    position: relative;
-    background-image: url('../img/img44_s.png');
-    width: 315px;
-    height: 315px;
+  position: relative;
+  background-image: url("../img/img44_s.png");
+  width: 315px;
+  height: 315px;
 }
 .mic-btn img {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 }
 
 .readGroup section p,
 .readGroup section input {
-    width: 780px;
-    height: 65px;
-    border-radius: 10px;
-    padding: 20px;
-    text-align: center;
-    font-size: 28px;
+  width: 780px;
+  height: 65px;
+  border-radius: 10px;
+  padding: 20px;
+  text-align: center;
+  font-size: 28px;
 }
 
 /* step2_2 */
 .popTxt {
-    position: relative;
+  position: relative;
 }
 
 h4 {
-    font-size: 20px;
+  font-size: 20px;
 }
 
 input.speak {
-    background-color: #fff8e9;
-    border: 0;
+  background-color: #fff8e9;
+  border: 0;
 }
 p.read-ai {
-    border: 3px solid #ffba08;
+  border: 3px solid #ffba08;
 }
 
 /* step2_3 */
 .yellow-box-big {
-    width: 60px;
-    height: 60px;
-    color: #ffba08;
-    background-color: #fff3d7;
-    padding: 13px;
-    border-radius: 10px;
-    margin-right: 10px;
-    font-size: 32px;
+  width: 60px;
+  height: 60px;
+  color: #ffba08;
+  background-color: #fff3d7;
+  padding: 13px;
+  border-radius: 10px;
+  margin-right: 10px;
+  font-size: 32px;
 }
 .btnGroup {
-    width: 560px;
+  width: 560px;
 }
 .time-bg {
-    text-align: center;
-    font-family: 'neodgm';
-    background-image: url('../img/img55_s.png');
-    width: 110px;
-    height: 128px;
+  text-align: center;
+  font-family: "neodgm";
+  background-image: url("../img/img55_s.png");
+  width: 110px;
+  height: 128px;
 }
 .time-bg > div {
-    position: relative;
+  position: relative;
 }
 .time {
-    position: absolute;
-    top: 70px;
-    left: 50%;
-    transform: translate(-50%, -50%);
+  position: absolute;
+  top: 70px;
+  left: 50%;
+  transform: translate(-50%, -50%);
 }
 .second {
-    font-size: 51px;
-    font-family: 'neodgm';
-    color: #752aff;
+  font-size: 51px;
+  font-family: "neodgm";
+  color: #752aff;
 }
 .time .text {
-    font-size: 21px;
-    color: #752aff;
+  font-size: 21px;
+  color: #752aff;
 }
 
 /* step2_5 */
 .dropGroup .popTxt {
-    position: relative;
-    width: fit-content;
+  position: relative;
+  width: fit-content;
 }
 .dropGroup .popTxt img:last-child {
-    position: relative;
+  position: relative;
 }
 .dropGroup span {
-    font-size: 36px;
-    font-family: 'Pretendard-Bold';
+  font-size: 36px;
+  font-family: "Pretendard-Bold";
 }
 .dropGroup button {
-    position: absolute;
+  position: absolute;
 }
 .dropGroup button p {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 }
 .dragGroup article {
-    position: absolute;
+  position: absolute;
 }
 .dragGroup button {
-    position: relative;
+  position: relative;
 }
 .dragGroup button p {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 }
 
 /* step2_11 */
 .inputGroup {
-    position: relative;
-    background-color: #fff3d7;
-    border: #ffba08 2px solid;
-    border-radius: 10px;
-    padding: 15px 20px;
-    min-height: 100px;
-    min-width: 300px;
-    font-size: 28px;
+  position: relative;
+  background-color: #fff3d7;
+  border: #ffba08 2px solid;
+  border-radius: 10px;
+  padding: 15px 20px;
+  min-height: 100px;
+  min-width: 300px;
+  font-size: 28px;
 }
 .inputGroup::before {
-    background-image: url('../img/img89_43s.png');
-    background-size: 58px 20px;
-    width: 58px;
-    height: 20px;
-    content: '';
-    display: block;
-    position: absolute;
-    top: 93px;
+  background-image: url("../img/img89_43s.png");
+  background-size: 58px 20px;
+  width: 58px;
+  height: 20px;
+  content: "";
+  display: block;
+  position: absolute;
+  top: 93px;
 }
 .inputGroup input {
-    border: #cae5ff 1px solid;
-    border-radius: 5px;
-    padding: 10px 20px;
-    width: min-content;
-    font-size: 28px;
+  border: #cae5ff 1px solid;
+  border-radius: 5px;
+  padding: 10px 20px;
+  width: min-content;
+  font-size: 28px;
 }
 
 /* step3_2 */
 .inputbox {
-    border: #ffe029 solid 5px;
-    border-radius: 10px;
-    padding: 20px;
-    background-color: #fff3d7;
-    width: min-content;
+  border: #ffe029 solid 5px;
+  border-radius: 10px;
+  padding: 20px;
+  background-color: #fff3d7;
+  width: min-content;
 }
 
 .next-btn,
 .pre-btn {
-    cursor: pointer;
+  cursor: pointer;
 }
 
 .listen-btn {
-    cursor: pointer;
+  cursor: pointer;
 }
 
 /* 퀴즈 결과 */
 .result-box {
-    max-height: 400px;
-    overflow: auto;
-    padding-right: 10px;
+  max-height: 400px;
+  overflow: auto;
+  padding-right: 10px;
 }
 
 /* ------------------------학생 --------------------- */
 
 /* ------------------------선생님 --------------------- */
 .side_t {
-    background-color: #fff;
-    width: 360px;
-    /* height: 100%; */
-    padding: 25px 40px;
+  background-color: #fff;
+  width: 360px;
+  /* height: 100%; */
+  padding: 25px 40px;
 }
 
 details {
-    margin: 5px 0 10px;
+  margin: 5px 0 10px;
 }
 details a {
-    display: block;
+  display: block;
 }
 details > summary {
-    font-size: 24px;
-    font-family: 'ONEMobilePOP';
-    padding: 10px;
-    outline: 0;
-    border-radius: 5px;
-    cursor: pointer;
-    transition: background 0.5s;
-    text-align: left;
+  font-size: 24px;
+  font-family: "ONEMobilePOP";
+  padding: 10px;
+  outline: 0;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background 0.5s;
+  text-align: left;
 }
 details > summary::-webkit-details-marker {
-    background: #444;
-    color: #fff;
-    background-size: contain;
-    transform: rotate3d(0, 0, 1, 90deg);
-    transition: transform 0.25s;
+  background: #444;
+  color: #fff;
+  background-size: contain;
+  transform: rotate3d(0, 0, 1, 90deg);
+  transition: transform 0.25s;
 }
 details[open] > summary::-webkit-details-marker {
-    transform: rotate3d(0, 0, 1, 180deg);
+  transform: rotate3d(0, 0, 1, 180deg);
 }
 details[open] > summary ~ * {
-    animation: reveal 0.5s;
+  animation: reveal 0.5s;
 }
 .tpt {
-    font-family: 'Pretendard-SemiBold';
-    font-size: 20px;
-    padding: 5px;
-    line-height: 25px;
-    cursor: pointer;
+  font-family: "Pretendard-SemiBold";
+  font-size: 20px;
+  padding: 5px;
+  line-height: 25px;
+  cursor: pointer;
 }
 .side_t .tpt {
-    margin: 5px 0 10px 30px;
+  margin: 5px 0 10px 30px;
 }
 .side_t .tpt:hover {
-    background-color: #fff;
-    border: 1px solid #ffba08;
-    border-radius: 5px;
-    text-decoration: underline;
-    text-decoration-color: #ffba08;
-    text-decoration-thickness: 3px;
+  background-color: #fff;
+  border: 1px solid #ffba08;
+  border-radius: 5px;
+  text-decoration: underline;
+  text-decoration-color: #ffba08;
+  text-decoration-thickness: 3px;
 }
 @keyframes reveal {
-    from {
-        opacity: 0;
-        transform: translate3d(0, -30px, 0);
-    }
-    to {
-        opacity: 1;
-        transform: translate3d(0, 0, 0);
-    }
+  from {
+    opacity: 0;
+    transform: translate3d(0, -30px, 0);
+  }
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
 }
 
 select {
-    min-width: 128px;
-    border-radius: 5px;
-    padding: 10px 20px;
-    font-size: 18px;
+  min-width: 128px;
+  border-radius: 5px;
+  padding: 10px 20px;
+  font-size: 18px;
 }
 select option {
-    font-size: 20px;
-    font-weight: bold;
+  font-size: 20px;
+  font-weight: bold;
 }
 
 .class {
-    background-color: #f8f9fb;
-    border-radius: 10px;
-    padding: 25px;
-    font-size: 19px;
-    width: max-content;
+  background-color: #f8f9fb;
+  border-radius: 10px;
+  padding: 25px;
+  font-size: 19px;
+  width: max-content;
 }
 .class .title1,
 .textbook .title1 {
-    font-family: 'ONEMobilePOP';
-    font-weight: 100;
+  font-family: "ONEMobilePOP";
+  font-weight: 100;
 }
 .class .box {
-    background-color: #eaedf4;
-    border-radius: 10px;
-    padding: 10px;
+  background-color: #eaedf4;
+  border-radius: 10px;
+  padding: 10px;
 }
 .class .member {
-    font-size: 20px;
-    color: #75767a;
-    position: relative;
+  font-size: 20px;
+  color: #75767a;
+  position: relative;
 }
 .class .member::before {
-    content: '';
-    background-image: url('../img/img171_82t.png');
-    width: 20px;
-    height: 22px;
-    position: absolute;
-    left: -28px;
+  content: "";
+  background-image: url("../img/img171_82t.png");
+  width: 20px;
+  height: 22px;
+  position: absolute;
+  left: -28px;
 }
 .class .btnGroup,
 .textbook .text .btnGroup {
-    width: initial;
+  width: initial;
 }
 .class button,
 .textbook button {
-    font-size: 19px;
-    font-family: 'Pretendard-Regular';
+  font-size: 19px;
+  font-family: "Pretendard-Regular";
 }
 .textbook {
-    width: 100%;
-    border: #ffba08 solid 6px;
-    border-radius: 20px;
-    font-size: 19px;
+  width: 100%;
+  border: #ffba08 solid 6px;
+  border-radius: 20px;
+  font-size: 19px;
 }
 .textbook-add {
-    width: 300px;
-    height: 354px;
-    background-color: #f8f9fb;
-    border: #75767a solid 2px;
-    border-radius: 20px;
-    font-size: 19px;
+  width: 300px;
+  height: 354px;
+  background-color: #f8f9fb;
+  border: #75767a solid 2px;
+  border-radius: 20px;
+  font-size: 19px;
 }
 .textbook .box {
-    height: 250px;
+  height: 250px;
 }
 .textbook .text {
-    height: 97px;
-    background-color: #ffba08;
-    border-radius: 0px 0px 12px 12px;
-    padding: 20px;
+  height: 97px;
+  background-color: #ffba08;
+  border-radius: 0px 0px 12px 12px;
+  padding: 20px;
 }
 .textbook-add {
-    position: relative;
+  position: relative;
 }
 .textbook-add button {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 }
 
 .search-wrap {
-    position: relative;
+  position: relative;
 }
 .search-wrap select {
-    font-size: 20px;
-    width: 13rem;
-    background-color: #fff;
-    border: 0;
-    border-bottom: 1px solid #a4a4a4;
-    border-radius: 0;
+  font-size: 20px;
+  width: 13rem;
+  background-color: #fff;
+  border: 0;
+  border-bottom: 1px solid #a4a4a4;
+  border-radius: 0;
 }
 .search-wrap input {
-    font-size: 20px;
-    width: 40rem;
-    border: 0;
-    border-bottom: 1px solid #c8c8c8;
+  font-size: 20px;
+  width: 40rem;
+  border: 0;
+  border-bottom: 1px solid #c8c8c8;
 }
 .search-wrap button {
-    position: absolute;
-    right: 1rem;
-    top: 9px;
+  position: absolute;
+  right: 1rem;
+  top: 9px;
 }
 .input-icon {
-    display: block;
-    width: 30px;
-    height: 30px;
-    font-size: 1.9rem;
-    color: #000;
-    cursor: pointer;
+  display: block;
+  width: 30px;
+  height: 30px;
+  font-size: 1.9rem;
+  color: #000;
+  cursor: pointer;
 }
 /* 테이블 */
 .table-pagination button,
 .table-pagination button,
 .table-pagination button {
-    font-size: 2rem;
-    font-family: 'Pretendard-Regular';
-    height: 40px;
-    width: 40px;
-    border-radius: 0.5rem;
+  font-size: 2rem;
+  font-family: "Pretendard-Regular";
+  height: 40px;
+  width: 40px;
+  border-radius: 0.5rem;
 }
 
 .table-pagination .selected-btn,
 .table-pagination .selected-btn,
 .table-pagination .selected-btn {
-    background-color: #ffba08;
-    color: #fff;
-    font-family: 'Pretendard-Bold';
+  background-color: #ffba08;
+  color: #fff;
+  font-family: "Pretendard-Bold";
 }
 .new-btn {
-    padding: 10px 30px;
-    font-size: 20px;
-    font-family: 'Pretendard-Bold';
-    border-radius: 5px;
-    background-color: #fff3d7;
+  padding: 10px 30px;
+  font-size: 20px;
+  font-family: "Pretendard-Bold";
+  border-radius: 5px;
+  background-color: #fff3d7;
 }
 .new-btn:hover {
-    background-color: #ffba08;
-    color: #fff;
+  background-color: #ffba08;
+  color: #fff;
 }
 
 /* 팝업 */
 .popup-wrap {
-    position: fixed;
-    background-color: rgba(0, 0, 0, 0.283);
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
+  position: fixed;
+  background-color: rgba(0, 0, 0, 0.283);
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
 }
 
 .popup-box {
-    position: fixed;
-    min-width: 670px;
-    /* min-height: 219px; */
-    background-color: var(--color-white);
-    top: 50%;
-    left: 5%;
-    right: 5%;
-    transform: translateY(-50%);
-    border: 1px solid var(--color-gray);
-    border-radius: 1rem;
-    padding: 3rem;
-    z-index: 11111;
+  position: fixed;
+  min-width: 670px;
+  /* min-height: 219px; */
+  background-color: var(--color-white);
+  top: 50%;
+  left: 5%;
+  right: 5%;
+  transform: translateY(-50%);
+  border: 1px solid var(--color-gray);
+  border-radius: 1rem;
+  padding: 3rem;
+  z-index: 11111;
 }
 
 .popup-title {
-    font-family: 'ONEMobilePOPOTF';
-    font-size: 32px;
+  font-family: "ONEMobilePOPOTF";
+  font-size: 32px;
 }
 .popup-wrap .search-wrap input,
 .popup-wrap .search-wrap select {
-    position: relative;
-    font-size: 20px;
-    width: 100%;
-    border-radius: 10px;
-    border: 1px solid #ffdf9a;
-    height: 50px;
+  position: relative;
+  font-size: 20px;
+  width: 100%;
+  border-radius: 10px;
+  border: 1px solid #ffdf9a;
+  height: 50px;
 }
 .popup-wrap .search-wrap button {
-    position: absolute;
-    right: 1rem;
-    top: 9px;
+  position: absolute;
+  right: 1rem;
+  top: 9px;
 }
 
 /* 공지등록 */
 .board-wrap {
-    border-top: 1px #606060 solid;
-    border-bottom: 1px #606060 solid;
-    padding: 20px 0;
+  border-top: 1px #606060 solid;
+  border-bottom: 1px #606060 solid;
+  padding: 20px 0;
 }
 .board-wrap label {
-    width: 13rem;
+  width: 13rem;
 }
 .board-wrap textarea {
-    min-height: 25rem;
-    font-size: 20px;
-    width: 100%;
+  min-height: 25rem;
+  font-size: 20px;
+  width: 100%;
 }
 input.data-wrap,
 textarea.data-wrap {
-    width: -webkit-fill-available;
-    padding: 1.2rem;
-    border-radius: 0.8rem;
-    border: 1px solid #8c8e92;
+  width: -webkit-fill-available;
+  padding: 1.2rem;
+  border-radius: 0.8rem;
+  border: 1px solid #8c8e92;
 }
 .wrap {
-    border: 1px solid var(--color-lightGray);
-    padding: 2rem;
-    position: relative;
-    border-radius: 10px;
-    background-color: #fff;
+  border: 1px solid var(--color-lightGray);
+  padding: 2rem;
+  position: relative;
+  border-radius: 10px;
+  background-color: #fff;
 }
 .mypage .wrap {
-    overflow-x: auto;
+  overflow-x: auto;
 }
 .wrap section {
-    width: max-content;
+  width: max-content;
 }
 .wrap .wrap-bg {
-    background-color: #f7f8fa;
-    padding: 20px;
-    border-radius: 10px;
-    height: 20rem;
-    width: -webkit-fill-available;
+  background-color: #f7f8fa;
+  padding: 20px;
+  border-radius: 10px;
+  height: 20rem;
+  width: -webkit-fill-available;
 }
 .wrap .wrap-bg > div {
-    text-align: center;
+  text-align: center;
 }
 .wrap .progress-bar {
-    height: 40px;
+  height: 40px;
 }
 .wrap .progress-bar-fill {
-    height: 40px;
+  height: 40px;
 }
 .wrap details .title2 {
-    width: 160px;
+  width: 160px;
 }
 .wrap details span {
-    width: 110px;
-    text-align: end;
+  width: 110px;
+  text-align: end;
 }
 
 .bookmanage-btn {
-    padding: 20px 30px;
-    font-size: 20px;
-    font-family: 'Pretendard-Bold';
-    border-radius: 5px;
-    border: #ffba08 solid 2px;
-    cursor: pointer;
+  padding: 20px 30px;
+  font-size: 20px;
+  font-family: "Pretendard-Bold";
+  border-radius: 5px;
+  border: #ffba08 solid 2px;
+  cursor: pointer;
 }
 
 .hidden-tr {
-    display: none;
+  display: none;
 }
 .show-tr {
-    background-color: #fff3d7;
+  background-color: #fff3d7;
 }
 .show-tr div {
-    margin: 10px;
+  margin: 10px;
 }
 .show-tr table {
-    background-color: #fff;
+  background-color: #fff;
 }
 
 /* 로드맵 */
 .mypage .big {
-    width: 48%;
-    height: 100%;
+  width: 48%;
+  height: 100%;
 }
 .mypage .big > .text {
-    border-radius: 19px 19px 0px 0px;
-    border-bottom: 1px solid #8c8e92;
+  border-radius: 19px 19px 0px 0px;
+  border-bottom: 1px solid #8c8e92;
 }
 .mypage .big > .box {
-    overflow-x: auto;
-    margin: 4rem 3rem;
-    height: 100%;
-    max-height: calc(100% - 16rem);
+  overflow-x: auto;
+  margin: 4rem 3rem;
+  height: 100%;
+  max-height: calc(100% - 16rem);
 }
 .dropbox {
-    color: #8c8e92;
-    border: #8c8e92 dotted 1px;
-    background-color: #eaedf4;
-    border-radius: 20px;
-    min-height: 20rem;
+  color: #8c8e92;
+  border: #8c8e92 dotted 1px;
+  background-color: #eaedf4;
+  border-radius: 20px;
+  min-height: 20rem;
 }
 .dropbox p {
-    line-height: 20rem;
+  line-height: 20rem;
 }
 
 /* 단원 버튼 */
 .unit-pagination button {
-    font-size: 2rem;
-    font-family: 'Pretendard-Regular';
-    padding: 5px 30px;
-    border: #c6c6c6 3px solid;
-    border-radius: 5px;
-    color: #331600;
-    background-color: #eaedf4;
+  font-size: 2rem;
+  font-family: "Pretendard-Regular";
+  padding: 5px 30px;
+  border: #c6c6c6 3px solid;
+  border-radius: 5px;
+  color: #331600;
+  background-color: #eaedf4;
 }
 
 .unit-pagination .selected-btn {
-    background-color: #c6c6c6;
-    /* color: #fff; */
-    font-family: 'Pretendard-ExtraBold';
+  background-color: #c6c6c6;
+  /* color: #fff; */
+  font-family: "Pretendard-ExtraBold";
 }
 /* ------------------------선생님 --------------------- */

0a3468a

47eb4d3

client/views/pages/main/AIDashboard.vue

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

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


 <template>
-    <p class="title1" v-show="isHidden">오늘 공부를 다했어요! 너무 고생했어요!</p>
-    <div class="main" v-show="!isHidden">
-        <div class="race-wrap">
-            <div class="title-box">
-                <p class="title" style="margin-top: 8rem;">AI 학습 보드</p>
-            </div>
-            <div class="race-box">
-                <div class="rabbit-start"><img src="../../../resources/img/img09_s.png" alt=""></div>
-                <div class="rcon flex justify-end mb5">
-                    <div class="race-btn" @click="goToPage('Chapter1')">
-                        <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
-                            data-num="1">
-                            <img :src="item.imgSrc1">
-                            <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
-                        </button>
-                        <p>지문1</p>
-                    </div>
-                    <div class="race-btn" @click="goToPage('Chapter2')">
-                        <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
-                            data-num="2">
-                            <img :src="item.imgSrc1">
-                            <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
-                        </button>
-                        <p>단어장</p>
-                    </div>
-                </div>
-                <div class="lcon flex justify-between mb5">
-                    <div class="race-btn" @click="goToPage('Chapter7')">
-                        <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
-                            data-num="7">
-                            <img :src="item.imgSrc1">
-                            <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
-                        </button>
-                        <p>문제1</p>
-                    </div>
-                    <div class="race-btn" @click="goToPage('Chapter6')">
-                        <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
-                            data-num="6">
-                            <img :src="item.imgSrc1">
-                            <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
-                        </button>
-                        <p>단어장</p>
-                    </div>
-                    <div class="race-btn" @click="goToPage('Chapter5')">
-                        <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
-                            data-num="5">
-                            <img :src="item.imgSrc1">
-                            <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
-                        </button>
-                        <p>지문2</p>
-                    </div>
-                    <div class="race-btn" @click="goToPage('Chapter4')">
-                        <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
-                            data-num="4">
-                            <img :src="item.imgSrc1">
-                            <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
-                        </button>
-                        <p>문제2</p>
-                    </div>
-                    <div class="race-btn" @click="goToPage('Chapter3')">
-                        <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
-                            data-num="3">
-                            <img :src="item.imgSrc1">
-                            <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
-                        </button>
-                        <p>문제1</p>
-                    </div>
-                </div>
-                <div class="rcon flex">
-                    <div class="race-btn" @click="goToPage('Chapter8')">
-                        <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
-                            data-num="8">
-                            <img :src="item.imgSrc3">
-                            <img :src="item.imgSrc4" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
-                        </button>
-                        <p class="long">중간 평가</p>
-                    </div>
-                    <div class="race-btn" @click="goToPage('Chapter9')">
-                        <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
-                            data-num="9">
-                            <img :src="item.imgSrc1">
-                            <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
-                        </button>
-                        <p>지문3</p>
-                    </div>
-                    <div class="race-btn" @click="goToPage('Chapter10')">
-                        <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
-                            data-num="10">
-                            <img :src="item.imgSrc1">
-                            <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
-                        </button>
-                        <p>단어장</p>
-                    </div>
-
-                    <div class="race-btn">
-                        <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
-                            data-num="11">
-                            <img :src="item.imgSrc3">
-                            <img :src="item.imgSrc4" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
-                        </button>
-                        <p class="long">최종 평가</p>
-                    </div>
-                </div>
-                <div class="rabbit-end" @click="ShowPopup"><img src="../../../resources/img/img138_72s.png" alt="">
-                </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>
-
-                    <div class="mb30 text-ct">
-                        <p class="title1 mb20">1단원이 끝났습니다!</p>
-                        <p class="title1"><em class="yellow">기념사진</em>을 촬영하러 가요</p>
-                    </div>
-                    <div class="flex justify-center">
-                        <button type="button" title="사진촬영" class="new-btn" @click="openCameraModal">
-                            사진 촬영
-                        </button>
-                    </div>
-                </div>
-            </div>
-
-            <!-- 카메라 모달 -->
-            <article v-show="showCameraModal" class="popup-wrap">
-                <div class="popup-box" style="top: 500px; left:500px">
-                    <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>
-                        </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; ">
-                                <canvas ref="canvas" style="pointer-events: none;"></canvas>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="flex justify-center mt20">
-                        <button class="new-btn" @click="takePhoto">사진 찍기</button>
-                    </div>
-                </div>
-            </article>
-
+  <p class="title1" v-show="isHidden">오늘 공부를 다했어요! 너무 고생했어요!</p>
+  <div class="main" v-show="!isHidden">
+    <div class="race-wrap-ai">
+      <div class="race-box">
+        <div class="rabbit-start">
+          <img src="../../../resources/img/new_img/rabbit.png" alt="" />
         </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="width: 100%; height: 100px;">
-                <p>학습 종료하기</p>
+        <!-- 1번째줄 -->
+        <div
+          class="rcon flex justify-end mb5"
+          style="position: relative; top: 24px"
+        >
+          <!-- 1 -->
+          <div class="race-btn" @click="goToPage('Chapter1')">
+            <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/ai_board/racebtn_1.png"
+                />
+                <img
+                  src="../../../resources/img/new_img/icon/clear_img.png"
+                  :style="{
+                    display: item.isSecondImageVisible ? 'block' : 'none',
+                  }"
+                  class="clear-img"
+                />
+              </div>
+              <p :class="!item.isSecondImageVisible ? 'before-clear' : 'clear'">
+                <img
+                  v-if="item.isSecondImageVisible"
+                  src="../../../resources/img/new_img/icon/complete_icon.png"
+                  alt="Complete Icon"
+                  class="complete-icon"
+                />
+                지문1
+              </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>
-                    </div>
-                </div>
-            </article>
-            <article class="popup-wrap" v-show="searchOpen">
-                <div class="popup-box ">
-                    <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>
-                        </button>
-                    </div>
-                    <div class="box">
-                        <div style="width: 910px;"><img src="../../../resources/img/img140_747s.png" alt=""></div>
-                    </div>
-                    <div class="flex justify-between mt20">
-                        <div class="text  flex">
-                            <p class="title2 date ml30">2024-08-06</p>
-                            <span class=" title1 ml30">1단원을 마친 <em class="yellow">가나다</em>친구</span>
-                        </div>
-                        <div class="title2 flex align-center" style="gap: 10px;"><svg-icon type="mdi" :path="mdiHeart"
-                                style="color: #FFBA08;"></svg-icon>
-                            <p><em class="yellow">1</em></p>
-                        </div>
-                    </div>
-                </div>
-            </article>
+            <!-- <p>지문1</p> -->
+          </div>
+          <!-- 2 -->
+          <div class="race-btn" @click="goToPage('Chapter2')">
+            <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/ai_board/racebtn_2.png"
+                />
+                <img
+                  src="../../../resources/img/new_img/icon/clear_img.png"
+                  :style="{
+                    display: item.isSecondImageVisible ? 'block' : 'none',
+                  }"
+                  class="clear-img"
+                  style="position: absolute; left: 16px"
+                />
+              </div>
+              <p :class="!item.isSecondImageVisible ? 'before-clear' : 'clear'">
+                <img
+                  v-if="item.isSecondImageVisible"
+                  src="../../../resources/img/new_img/icon/complete_icon.png"
+                  alt="Complete Icon"
+                  class="complete-icon"
+                />
+                단어장
+              </p>
+            </button>
+            <!-- <p>단어장</p> -->
+          </div>
         </div>
+        <!-- 2번째 줄 -->
+        <div class="lcon flex justify-between mb5">
+          <!-- 7 -->
+          <div class="race-btn" @click="goToPage('Chapter7')">
+            <button
+              class="popTxt"
+              v-for="(item, index) in items"
+              :key="index"
+              @click="toggleImage(index)"
+              data-num="7"
+            >
+              <div class="image-container">
+                <img
+                  src="../../../resources/img/new_img/ai_board/racebtn_7.png"
+                />
+                <img
+                  src="../../../resources/img/new_img/icon/clear_img.png"
+                  :style="{
+                    display: item.isSecondImageVisible ? 'block' : 'none',
+                  }"
+                  class="clear-img"
+                  style="position: absolute; top: 85px"
+                />
+              </div>
+              <p :class="!item.isSecondImageVisible ? 'before-clear' : 'clear'">
+                <img
+                  v-if="item.isSecondImageVisible"
+                  src="../../../resources/img/new_img/icon/complete_icon.png"
+                  alt="Complete Icon"
+                  class="complete-icon"
+                />
+                문제1
+              </p>
+            </button>
+            <!-- <p>문제1</p> -->
+          </div>
+          <!-- 6 -->
+          <div class="race-btn" @click="goToPage('Chapter6')">
+            <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/ai_board/racebtn_6.png"
+                />
+                <img
+                  src="../../../resources/img/new_img/icon/clear_img.png"
+                  :style="{
+                    display: item.isSecondImageVisible ? 'block' : 'none',
+                  }"
+                  class="clear-img"
+                />
+              </div>
+              <p :class="!item.isSecondImageVisible ? 'before-clear' : 'clear'">
+                <img
+                  v-if="item.isSecondImageVisible"
+                  src="../../../resources/img/new_img/icon/complete_icon.png"
+                  alt="Complete Icon"
+                  class="complete-icon"
+                />
+                단어장
+              </p>
+            </button>
+            <!-- <p>단어장</p> -->
+          </div>
+          <!-- 5 -->
+          <div
+            class="race-btn"
+            @click="goToPage('Chapter5')"
+            style="position: relative; left: -31px"
+          >
+            <button
+              class="popTxt"
+              v-for="(item, index) in items"
+              :key="index"
+              @click="toggleImage(index)"
+              data-num="5"
+              style="position: absolute; top: -77px; left: 30px"
+            >
+              <div class="image-container">
+                <img
+                  src="../../../resources/img/new_img/ai_board/racebtn_5.png"
+                />
+                <img
+                  src="../../../resources/img/new_img/icon/clear_img.png"
+                  :style="{
+                    display: item.isSecondImageVisible ? 'block' : 'none',
+                  }"
+                  class="clear-img"
+                />
+              </div>
+              <p :class="!item.isSecondImageVisible ? 'before-clear' : 'clear'">
+                <img
+                  v-if="item.isSecondImageVisible"
+                  src="../../../resources/img/new_img/icon/complete_icon.png"
+                  alt="Complete Icon"
+                  class="complete-icon"
+                />
+                지문2
+              </p>
+            </button>
+            <!-- <p>지문2</p> -->
+          </div>
+          <!-- 4 -->
+          <div class="race-btn" @click="goToPage('Chapter4')">
+            <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/ai_board/racebtn_4.png"
+                />
+                <img
+                  src="../../../resources/img/new_img/icon/clear_img.png"
+                  :style="{
+                    display: item.isSecondImageVisible ? 'block' : 'none',
+                  }"
+                  class="clear-img"
+                />
+              </div>
+              <p :class="!item.isSecondImageVisible ? 'before-clear' : 'clear'">
+                <img
+                  v-if="item.isSecondImageVisible"
+                  src="../../../resources/img/new_img/icon/complete_icon.png"
+                  alt="Complete Icon"
+                  class="complete-icon"
+                />
+                문제2
+              </p>
+            </button>
+            <!-- <p>문제2</p> -->
+          </div>
+          <!-- 3 -->
+          <div
+            class="race-btn"
+            @click="goToPage('Chapter3')"
+            style="right: 12px"
+          >
+            <button
+              class="popTxt"
+              v-for="(item, index) in items"
+              :key="index"
+              @click="toggleImage(index)"
+              data-num="3"
+              style="top: -46px; position: relative"
+            >
+              <div class="image-container">
+                <img
+                  src="../../../resources/img/new_img/ai_board/racebtn_3.png"
+                />
+                <img
+                  src="../../../resources/img/new_img/icon/clear_img.png"
+                  :style="{
+                    display: item.isSecondImageVisible ? 'block' : 'none',
+                  }"
+                  class="clear-img"
+                />
+              </div>
+              <p :class="!item.isSecondImageVisible ? 'before-clear' : 'clear'">
+                <img
+                  v-if="item.isSecondImageVisible"
+                  src="../../../resources/img/new_img/icon/complete_icon.png"
+                  alt="Complete Icon"
+                  class="complete-icon"
+                />
+                문제1
+              </p>
+            </button>
+            <!-- <p>문제1</p> -->
+          </div>
+        </div>
+        <!-- 3번째 줄 -->
+        <div class="rcon flex" style="position: relative; top: -23px">
+          <!-- 8 -->
+          <div class="race-btn" @click="goToPage('Chapter8')">
+            <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/ai_board/racebtn_8.png"
+                />
+                <img
+                  src="../../../resources/img/new_img/icon/clear_img.png"
+                  :style="{
+                    display: item.isSecondImageVisible ? 'block' : 'none',
+                  }"
+                  class="clear-img"
+                />
+              </div>
+              <p :class="!item.isSecondImageVisible ? 'before-clear' : 'clear'">
+                <img
+                  v-if="item.isSecondImageVisible"
+                  src="../../../resources/img/new_img/icon/complete_icon.png"
+                  alt="Complete Icon"
+                  class="complete-icon"
+                />
+                중간 평가
+              </p>
+            </button>
+            <!-- <p class="long">중간 평가</p> -->
+          </div>
+          <!-- 9 -->
+          <div class="race-btn" @click="goToPage('Chapter9')">
+            <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/ai_board/racebtn_9.png"
+                />
+                <img
+                  src="../../../resources/img/new_img/icon/clear_img.png"
+                  :style="{
+                    display: item.isSecondImageVisible ? 'block' : 'none',
+                  }"
+                  class="clear-img"
+                />
+              </div>
+              <p :class="!item.isSecondImageVisible ? 'before-clear' : 'clear'">
+                <img
+                  v-if="item.isSecondImageVisible"
+                  src="../../../resources/img/new_img/icon/complete_icon.png"
+                  alt="Complete Icon"
+                  class="complete-icon"
+                />
+                지문3
+              </p>
+            </button>
+            <!-- <p>지문3</p> -->
+          </div>
+          <!-- 10 -->
+          <div class="race-btn" @click="goToPage('Chapter10')">
+            <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/ai_board/racebtn_10.png"
+                />
+                <img
+                  src="../../../resources/img/new_img/icon/clear_img.png"
+                  :style="{
+                    display: item.isSecondImageVisible ? 'block' : 'none',
+                  }"
+                  class="clear-img"
+                />
+              </div>
+              <p :class="!item.isSecondImageVisible ? 'before-clear' : 'clear'">
+                <img
+                  v-if="item.isSecondImageVisible"
+                  src="../../../resources/img/new_img/icon/complete_icon.png"
+                  alt="Complete Icon"
+                  class="complete-icon"
+                />
+                단어장
+              </p>
+            </button>
+            <!-- <p>단어장</p> -->
+          </div>
+          <!-- 11 -->
+          <div class="race-btn">
+            <button
+              class="popTxt"
+              v-for="(item, index) in items"
+              :key="index"
+              @click="toggleImage(index)"
+              data-num="11"
+            >
+              <div class="image-container">
+                <img
+                  src="../../../resources/img/new_img/ai_board/racebtn_11.png"
+                />
+                <img
+                  src="../../../resources/img/new_img/icon/clear_img.png"
+                  :style="{
+                    display: item.isSecondImageVisible ? 'block' : 'none',
+                  }"
+                  class="clear-img"
+                />
+              </div>
+              <p :class="!item.isSecondImageVisible ? 'before-clear' : 'clear'">
+                <img
+                  v-if="item.isSecondImageVisible"
+                  src="../../../resources/img/new_img/icon/complete_icon.png"
+                  alt="Complete Icon"
+                  class="complete-icon"
+                />
+                최종 평가
+              </p>
+            </button>
+            <!-- <p class="long">최종 평가</p> -->
+          </div>
+        </div>
+        <div class="rabbit-end" @click="ShowPopup">
+          <!-- <img src="../../../resources/img/img138_72s.png" alt="" /> -->
+        </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>
+
+          <div class="mb30 text-ct">
+            <p class="title1 mb20">1단원이 끝났습니다!</p>
+            <p class="title1">
+              <em class="yellow">기념사진</em>을 촬영하러 가요
+            </p>
+          </div>
+          <div class="flex justify-center">
+            <button
+              type="button"
+              title="사진촬영"
+              class="new-btn"
+              @click="openCameraModal"
+            >
+              사진 촬영
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- 카메라 모달 -->
+      <article v-show="showCameraModal" class="popup-wrap">
+        <div class="popup-box" style="top: 500px; left: 500px">
+          <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>
+            </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"
+                />
+                <canvas ref="canvas" style="pointer-events: none"></canvas>
+              </div>
+            </div>
+          </div>
+          <div class="flex justify-center mt20">
+            <button class="new-btn" @click="takePhoto">사진 찍기</button>
+          </div>
+        </div>
+      </article>
     </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"
+        />
+        <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>
+          </div>
+        </div>
+      </article>
+      <article class="popup-wrap" v-show="searchOpen">
+        <div class="popup-box">
+          <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>
+            </button>
+          </div>
+          <div class="box">
+            <div style="width: 910px">
+              <img src="../../../resources/img/img140_747s.png" alt="" />
+            </div>
+          </div>
+          <div class="flex justify-between mt20">
+            <div class="text flex">
+              <p class="title2 date ml30">2024-08-06</p>
+              <span class="title1 ml30"
+                >1단원을 마친 <em class="yellow">가나다</em>친구</span
+              >
+            </div>
+            <div class="title2 flex align-center" style="gap: 10px">
+              <svg-icon
+                type="mdi"
+                :path="mdiHeart"
+                style="color: #ffba08"
+              ></svg-icon>
+              <p><em class="yellow">1</em></p>
+            </div>
+          </div>
+        </div>
+      </article>
+    </div>
+  </div>
 </template>
 
 <script>
-import SvgIcon from '@jamescoyle/vue-icon';
-import { mdiMagnify, mdiHeart, mdiWindowClose } from '@mdi/js';
-import axios from 'axios';
+import SvgIcon from "@jamescoyle/vue-icon";
+import { mdiMagnify, mdiHeart, mdiWindowClose } from "@mdi/js";
+import axios from "axios";
 
-//은진 
+//은진
 
 export default {
-    data() {
-        return {
-            items: [
-                {
-                    imgSrc1: 'client/resources/img/img11_1_s.png',
-                    imgSrc2: 'client/resources/img/img12_1_s.png',
-                    imgSrc3: 'client/resources/img/img11_2_s.png',
-                    imgSrc4: 'client/resources/img/img12_2_s.png',
-                    isSecondImageVisible: false
-                },
-            ],
-            mdiWindowClose: mdiWindowClose,
-            mdiHeart: mdiHeart,
-            showModal: false,
-            searchOpen: false,  // 사진 상세보기 모달창
-            searchOpen2: false, // 단원 마친 후, 사진 촬영 여부 선택 모달창
-            showCameraModal: false, // 카메라 모달창 
-            photoTaken: false,
-            photo: null,    //캡쳐 사진 
-            stream: null,
-
-            isHidden: false,
-            images: [],
-
-
-        }
-    },
-    methods: {
-        async findFile(file_mng_id) {
-            try {
-                const res = await axios({
-                    url: "/file/find.json",
-                    method: "post",
-                    headers: {
-                        "Content-Type": "application/json; charset=UTF-8",
-                    },
-                    data: {
-                        file_mng_id: file_mng_id,
-                    },
-                });
-                return res.data.list[0];
-            } catch (error) {
-                console.log("result - error : ", error);
-                return null;
-            }
+  data() {
+    return {
+      items: [
+        {
+          imgSrc1: "client/resources/img/img11_1_s.png",
+          imgSrc2: "client/resources/img/img12_1_s.png",
+          imgSrc3: "client/resources/img/img11_2_s.png",
+          imgSrc4: "client/resources/img/img12_2_s.png",
+          isSecondImageVisible: false,
         },
-        fetchImage() {
-            axios({
-                url: "/photo/photoUnitList.json",
-                method: "post",
-                headers: {
-                    "Content-Type": "application/json; charset=UTF-8",
-                },
-                data: {
-                    unitId: "UNIT_000000000000001", // 수정해야함
-                    sclsId: "1"
-                }
+      ],
+      mdiWindowClose: mdiWindowClose,
+      mdiHeart: mdiHeart,
+      showModal: false,
+      searchOpen: false, // 사진 상세보기 모달창
+      searchOpen2: false, // 단원 마친 후, 사진 촬영 여부 선택 모달창
+      showCameraModal: false, // 카메라 모달창
+      photoTaken: false,
+      photo: null, //캡쳐 사진
+      stream: null,
+
+      isHidden: false,
+      images: [],
+    };
+  },
+  methods: {
+    async findFile(file_mng_id) {
+      try {
+        const res = await axios({
+          url: "/file/find.json",
+          method: "post",
+          headers: {
+            "Content-Type": "application/json; charset=UTF-8",
+          },
+          data: {
+            file_mng_id: file_mng_id,
+          },
+        });
+        return res.data.list[0];
+      } catch (error) {
+        console.log("result - error : ", error);
+        return null;
+      }
+    },
+    fetchImage() {
+      axios({
+        url: "/photo/photoUnitList.json",
+        method: "post",
+        headers: {
+          "Content-Type": "application/json; charset=UTF-8",
+        },
+        data: {
+          unitId: "UNIT_000000000000001", // 수정해야함
+          sclsId: "1",
+        },
+      })
+        .then((response) => {
+          this.file_mng_id = response.data;
+
+          const findFilePromises = this.file_mng_id.map((id) =>
+            this.findFile(id.file_mng_id)
+          );
+
+          return Promise.all(findFilePromises);
+        })
+        .then((fileResults) => {
+          // Format file results to include image URL
+          this.images = fileResults
+            .map((file) => {
+              if (file) {
+                return {
+                  url: "http://165.229.169.113:9080/" + `${file.fileRpath}`,
+                  fileId: file.fileId,
+                  fileNm: file.fileNm,
+                  // Add any other properties you need here
+                };
+              }
+              return null;
             })
-                .then(response => {
-                    this.file_mng_id = response.data;
-
-                    const findFilePromises = this.file_mng_id.map(id =>
-                        this.findFile(id.file_mng_id)
-                    );
-
-                    return Promise.all(findFilePromises);
-                })
-                .then(fileResults => {
-                    // Format file results to include image URL
-                    this.images = fileResults.map(file => {
-                        if (file) {
-                            return {
-                                url: "http://165.229.169.113:9080/" + `${file.fileRpath}`,
-                                fileId: file.fileId,
-                                fileNm: file.fileNm,
-                                // Add any other properties you need here
-                            };
-                        }
-                        return null;
-                    }).filter(image => image !== null);
-                })
-                .catch(error => {
-                    console.error("Error fetching images:", error);
-                });
-        },
-        goToPageImg(page) {
-            const canvas = document.querySelector('canvas');
-            const dataURL = canvas.toDataURL('image/png');
-
-            this.$router.push({ name: page, query: { image: encodeURIComponent(dataURL) } });
-        },
-        finishSchedule() {
-            this.isHidden = true;
-        },
-        toggleImage(index) {
-            this.items[index].isSecondImageVisible = !this.items[index].isSecondImageVisible;
-        },
-        ShowPopup() {
-            this.searchOpen2 = true;
-        },
-        goToPage(page) {
-            this.$router.push({ name: page });
-        },
-        openCameraModal() {
-            this.closeModal();
-
-            this.showCameraModal = true;
-            navigator.mediaDevices.getUserMedia({ video: true })
-                .then(stream => {
-                    const modalVideo = this.$refs.modalVideoElement;
-                    modalVideo.srcObject = stream;
-                    this.stream = stream;
-                })
-                .catch(error => {
-                    console.log("error>>>>>>>>", error);
-                });
-        },
-        closeModal() {  //웹캠 및 모든 팝업 닫기
-            // this.showModal = false;
-            this.searchOpen = false;
-            this.searchOpen2 = false;
-            this.showCameraModal = false;
-            this.photoTaken = false;
-            this.photo = null;
-
-            //스트림 종료
-            if (this.stream) {
-                let tracks = this.stream.getTracks();
-                tracks.forEach(track => track.stop());
-                this.stream = null;
-            }
-        },
-
-
-        //은진
-        onVideoLoaded() {
-            const video = this.$refs.modalVideoElement;
-            const canvas = this.$refs.canvas;
-            const ctx = canvas.getContext('2d');
-
-            canvas.width = video.videoWidth;
-            canvas.height = video.videoHeight;
-        }, takePhoto() {
-            const video = this.$refs.modalVideoElement;
-            const canvas = this.$refs.canvas;
-            const ctx = canvas.getContext('2d');
-
-            ctx.save(); // 현재 상태 저장
-
-            // 캔버스 좌우 반전
-            ctx.scale(-1, 1);
-            ctx.drawImage(video, -canvas.width, 0, canvas.width, canvas.height);
-
-            ctx.restore();
-
-            const overlayImg = new Image();
-            overlayImg.src = 'client/resources/img/camera-rabbit.png';
-            overlayImg.onload = () => {
-                const overlayWidth = canvas.width * 0.4;
-                const overlayHeight = (overlayImg.height / overlayImg.width) * overlayWidth;
-                const overlayX = canvas.width - overlayWidth;
-                const overlayY = canvas.height - overlayHeight;
-
-                // 오버레이 이미지 그리기
-                ctx.drawImage(overlayImg, overlayX, overlayY, overlayWidth, overlayHeight);
-
-                // 사진 저장 함수 호출
-                // this.savePhoto('PhotoEdit');
-                const dataURL = canvas.toDataURL('image/png');
-                this.$router.push({ name: 'PhotoEdit', query: { image: encodeURIComponent(dataURL) } });
-            };
-        },
-
-
-        buttonSearch() {
-            this.searchOpen = true;
-        },
-        buttonSearch2() {
-            this.searchOpen2 = true;
-        },
-        closeBtn() {
-            this.searchOpen = false;
-        },
+            .filter((image) => image !== null);
+        })
+        .catch((error) => {
+          console.error("Error fetching images:", error);
+        });
     },
-    components: {
-        SvgIcon,
+    goToPageImg(page) {
+      const canvas = document.querySelector("canvas");
+      const dataURL = canvas.toDataURL("image/png");
+
+      this.$router.push({
+        name: page,
+        query: { image: encodeURIComponent(dataURL) },
+      });
     },
-    mounted() {
-        console.log('main mounted');
-
-        this.onVideoLoaded();
-        this.fetchImage();
-
-        if (this.$route.query.reCapture == 'true') {
-            this.openCameraModal()
-        }
-
+    finishSchedule() {
+      this.isHidden = true;
     },
-    computed() {
-
+    toggleImage(index) {
+      this.items[index].isSecondImageVisible =
+        !this.items[index].isSecondImageVisible;
     },
-}
+    ShowPopup() {
+      this.searchOpen2 = true;
+    },
+    goToPage(page) {
+      this.$router.push({ name: page });
+    },
+    openCameraModal() {
+      this.closeModal();
+
+      this.showCameraModal = true;
+      navigator.mediaDevices
+        .getUserMedia({ video: true })
+        .then((stream) => {
+          const modalVideo = this.$refs.modalVideoElement;
+          modalVideo.srcObject = stream;
+          this.stream = stream;
+        })
+        .catch((error) => {
+          console.log("error>>>>>>>>", error);
+        });
+    },
+    closeModal() {
+      //웹캠 및 모든 팝업 닫기
+      // this.showModal = false;
+      this.searchOpen = false;
+      this.searchOpen2 = false;
+      this.showCameraModal = false;
+      this.photoTaken = false;
+      this.photo = null;
+
+      //스트림 종료
+      if (this.stream) {
+        let tracks = this.stream.getTracks();
+        tracks.forEach((track) => track.stop());
+        this.stream = null;
+      }
+    },
+
+    //은진
+    onVideoLoaded() {
+      const video = this.$refs.modalVideoElement;
+      const canvas = this.$refs.canvas;
+      const ctx = canvas.getContext("2d");
+
+      canvas.width = video.videoWidth;
+      canvas.height = video.videoHeight;
+    },
+    takePhoto() {
+      const video = this.$refs.modalVideoElement;
+      const canvas = this.$refs.canvas;
+      const ctx = canvas.getContext("2d");
+
+      ctx.save(); // 현재 상태 저장
+
+      // 캔버스 좌우 반전
+      ctx.scale(-1, 1);
+      ctx.drawImage(video, -canvas.width, 0, canvas.width, canvas.height);
+
+      ctx.restore();
+
+      const overlayImg = new Image();
+      overlayImg.src = "client/resources/img/camera-rabbit.png";
+      overlayImg.onload = () => {
+        const overlayWidth = canvas.width * 0.4;
+        const overlayHeight =
+          (overlayImg.height / overlayImg.width) * overlayWidth;
+        const overlayX = canvas.width - overlayWidth;
+        const overlayY = canvas.height - overlayHeight;
+
+        // 오버레이 이미지 그리기
+        ctx.drawImage(
+          overlayImg,
+          overlayX,
+          overlayY,
+          overlayWidth,
+          overlayHeight
+        );
+
+        // 사진 저장 함수 호출
+        // this.savePhoto('PhotoEdit');
+        const dataURL = canvas.toDataURL("image/png");
+        this.$router.push({
+          name: "PhotoEdit",
+          query: { image: encodeURIComponent(dataURL) },
+        });
+      };
+    },
+
+    buttonSearch() {
+      this.searchOpen = true;
+    },
+    buttonSearch2() {
+      this.searchOpen2 = true;
+    },
+    closeBtn() {
+      this.searchOpen = false;
+    },
+  },
+  components: {
+    SvgIcon,
+  },
+  mounted() {
+    console.log("main mounted");
+
+    this.onVideoLoaded();
+    this.fetchImage();
+
+    if (this.$route.query.reCapture == "true") {
+      this.openCameraModal();
+    }
+  },
+  computed() {},
+};
 </script>
 
 <style>
 .body {
-    width: 1435px;
-    height: auto;
-    margin: 0 auto;
+  width: 1435px;
+  height: auto;
+  margin: 0 auto;
 }
 
 #container {
-    position: relative;
-    margin: auto;
-    border: 10px #333 solid;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: 100;
+  position: relative;
+  margin: auto;
+  border: 10px #333 solid;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 100;
 }
 
-
 video {
-    width: 100%;
-    height: 100%;
-    background-color: #666;
+  width: 100%;
+  height: 100%;
+  background-color: #666;
 }
 
 .mirrored {
-    transform: scaleX(-1);
+  transform: scaleX(-1);
 }
 
 .new-btn:disabled {
-    background-color: #FFF3D7;
-    cursor: not-allowed;
+  background-color: #fff3d7;
+  cursor: not-allowed;
 }
 
 /* button {

 } */
 
 .sticker {
-    position: absolute;
-    cursor: move;
+  position: absolute;
+  cursor: move;
 }
 
 .sticker-handle {
-    width: 15px;
-    height: 15px;
-    background: rgba(255, 255, 255, 0.521);
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    cursor: nwse-resize;
-    font-size: 13px;
-    font-weight: bolder;
-    color: rgb(63, 63, 63);
+  width: 15px;
+  height: 15px;
+  background: rgba(255, 255, 255, 0.521);
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  cursor: nwse-resize;
+  font-size: 13px;
+  font-weight: bolder;
+  color: rgb(63, 63, 63);
 }
 
 .sticker-delete {
-    position: absolute;
-    top: 0;
-    right: 0;
-    background: rgba(255, 0, 0, 0.425);
-    color: white;
-    padding: 5px;
-    cursor: pointer;
+  position: absolute;
+  top: 0;
+  right: 0;
+  background: rgba(255, 0, 0, 0.425);
+  color: white;
+  padding: 5px;
+  cursor: pointer;
 }
 
 .toolbar {
-    display: flex;
-    justify-content: center;
-    margin-top: 10px;
+  display: flex;
+  justify-content: center;
+  margin-top: 10px;
 }
 
 .toolbar button {
-    margin: 5px;
-    padding: 5px 10px;
-    cursor: pointer;
+  margin: 5px;
+  padding: 5px 10px;
+  cursor: pointer;
 }
 
 .toolbar input {
-    margin: 5px;
+  margin: 5px;
 }
 
 .rabbit-end {
-    cursor: pointer;
+  cursor: pointer;
 }
 
 .camera-rabbit {
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    width: 40%;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: 40%;
 }
-</style>
+
+.rabbit-start img {
+  transform: scaleX(-1);
+}
+
+.image-container {
+  position: relative;
+  display: inline-block;
+}
+
+.clear-img {
+  position: absolute;
+  top: -27px;
+  left: 0;
+  width: 100px;
+  height: 100px;
+  z-index: 1;
+}
+
+.race-btn p.before-clear {
+  /* width: auto; */
+  font-size: 20px;
+  line-height: 1.6;
+  color: #ffffff;
+  background-color: rgba(48, 48, 48, 0.562);
+  padding: 6px;
+  border-radius: 8px;
+  /* border: 1px solid rgba(255, 255, 255, 0.2); */
+  margin-bottom: 20px;
+  /* box-shadow: none; */
+  position: static;
+}
+
+.race-btn p.clear {
+  /* width: auto; */
+  font-size: 20px;
+  line-height: 1.6;
+  color: #333;
+  background-color: #f9f9f9;
+  padding: 6px;
+  border-radius: 8px;
+  /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); */
+  margin-bottom: 20px;
+  position: static;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.race-box .lcon {
+  display: flex;
+  align-items: center;
+}
+</style>

0a3468a

47eb4d3

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
+    class="title1"
+    v-else-if="state === 'notRegistered'"
+    style="position: absolute; top: 50%; transform: translate(0, -50%)"
+  >
     <div>
-      <h3>지금은 학습 루트가 등록이 안됐어요! 학습 일정에서 학습루트를 등록해볼까요?</h3>
-    <button type="button" title="바로가기" class="yellow-btn" @click="goToPage2('MyPlan2')">바로가기</button>
+      <h3>
+        지금은 학습 루트가 등록이 안됐어요! 학습 일정에서 학습루트를
+        등록해볼까요?
+      </h3>
+      <button
+        type="button"
+        title="바로가기"
+        class="yellow-btn"
+        @click="goToPage2('MyPlan2')"
+      >
+        바로가기
+      </button>
     </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 class="race-wrap">
-      <div class="title-box">
+      <!-- <div class="title-box">
         <p class="title" style="margin-top: 7rem">{{ titleUnitName }}</p>
         <p class="subtitle">{{ titleBookName }}</p>
-      </div>
+      </div> -->
       <div class="race-box">
         <div class="rabbit-start">
-          <img src="../../../resources/img/img09_s.png" alt="" :style="{ display: rabbitPos[0] ? 'block' : 'none' }" />
+          <img
+            src="../../../resources/img/new_img/rabbit.png"
+            alt=""
+            :style="{ display: rabbitPos[0] ? 'block' : 'none' }"
+          />
         </div>
-        <div class="rcon flex justify-end mb5">
+        <!-- 1번째줄 -->
+        <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/img09_s.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">
-              <img :src="labeledItems[0].label.length >= 4
-                ? item.imgSrc3
-                : item.imgSrc1
-                " :style="{ display: !rabbitCompl[1] ? 'block' : 'none' }" />
-              <img :src="labeledItems[0].label.length >= 4
-                ? item.imgSrc4
-                : item.imgSrc2
-                " :style="{ display: rabbitCompl[1] ? 'block' : 'none' }" />
+            <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"
+                />
+              </div>
             </button>
-            <p>{{ labeledItems[0].label }}</p>
+            <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"
+              />
+              {{ labeledItems[0].label }}
+            </p>
           </div>
+          <!-- 2 -->
           <div class="race-btn" @click="[storeLearningId(labeledItems[1])]">
             <div class="rabbit-running">
-              <img src="../../../resources/img/img09_s.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">
-              <img :src="labeledItems[1].label.length >= 4
-                ? item.imgSrc3
-                : item.imgSrc1
-                " :style="{ display: !rabbitCompl[2] ? 'block' : 'none' }" />
-              <img :src="labeledItems[1].label.length >= 4
-                ? item.imgSrc4
-                : item.imgSrc2
-                " :style="{ display: rabbitCompl[2] ? 'block' : 'none' }" />
+            <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"
+                />
+              </div>
             </button>
-            <p>{{ labeledItems[1].label }}</p>
+            <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"
+              />
+              {{ labeledItems[1].label }}
+            </p>
           </div>
         </div>
+        <!-- 2번째줄 -->
         <div class="lcon flex justify-between mb5">
+          <!-- 7 -->
           <div class="race-btn" @click="[storeLearningId(labeledItems[6])]">
-            <div class="rabbit-running">
-              <img src="../../../resources/img/img09_s.png" alt=""
-                :style="{ display: rabbitPos[7] ? 'block' : 'none' }" />
+            <div class="rabbit-running" style="top: -71px">
+              <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">
-              <img :src="labeledItems[6].label.length >= 4
-                ? item.imgSrc3
-                : item.imgSrc1
-                " :style="{ display: !rabbitCompl[7] ? 'block' : 'none' }" />
-              <img :src="labeledItems[6].label.length >= 4
-                ? item.imgSrc4
-                : item.imgSrc2
-                " :style="{ display: rabbitCompl[7] ? 'block' : 'none' }" />
+            <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"
+                />
+              </div>
             </button>
-            <p>{{ labeledItems[6].label }}</p>
+            <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>
-          <div class="race-btn" @click="[storeLearningId(labeledItems[5]),]">
+          <!-- 6 -->
+          <div class="race-btn" @click="[storeLearningId(labeledItems[5])]">
             <div class="rabbit-running">
-              <img src="../../../resources/img/img09_s.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">
-              <img :src="labeledItems[5].label.length >= 4
-                ? item.imgSrc3
-                : item.imgSrc1
-                " :style="{ display: !rabbitCompl[6] ? 'block' : 'none' }" />
-              <img :src="labeledItems[5].label.length >= 4
-                ? item.imgSrc4
-                : item.imgSrc2
-                " :style="{ display: rabbitCompl[6] ? 'block' : 'none' }" />
+            <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"
+                />
+              </div>
             </button>
-            <p>{{ labeledItems[5].label }}</p>
+            <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"
+              />
+              {{ labeledItems[5].label }}
+            </p>
           </div>
-          <div class="race-btn" @click="[storeLearningId(labeledItems[4])]">
+          <!-- 5 -->
+          <div
+            class="race-btn"
+            @click="[storeLearningId(labeledItems[4])]"
+            style="position: relative; left: -31px"
+          >
             <div class="rabbit-running">
-              <img src="../../../resources/img/img09_s.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">
-              <img :src="labeledItems[4].label.length >= 4
-                ? item.imgSrc3
-                : item.imgSrc1
-                " :style="{ display: !rabbitCompl[5] ? 'block' : 'none' }" />
-              <img :src="labeledItems[4].label.length >= 4
-                ? item.imgSrc4
-                : item.imgSrc2
-                " :style="{ display: rabbitCompl[5] ? 'block' : 'none' }" />
+            <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"
+                />
+              </div>
             </button>
-            <p>{{ labeledItems[4].label }}</p>
+            <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"
+              />
+              {{ labeledItems[4].label }}
+            </p>
           </div>
+          <!-- 4 -->
           <div class="race-btn" @click="[storeLearningId(labeledItems[3])]">
             <div class="rabbit-running">
-              <img src="../../../resources/img/img09_s.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">
-              <img :src="labeledItems[3].label.length >= 4
-                ? item.imgSrc3
-                : item.imgSrc1
-                " :style="{ display: !rabbitCompl[4] ? 'block' : 'none' }" />
-              <img :src="labeledItems[3].label.length >= 4
-                ? item.imgSrc4
-                : item.imgSrc2
-                " :style="{ display: rabbitCompl[4] ? 'block' : 'none' }" />
+            <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"
+                />
+              </div>
             </button>
-            <p>{{ labeledItems[3].label }}</p>
+            <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"
+              />
+              {{ labeledItems[3].label }}
+            </p>
           </div>
-          <div class="race-btn" @click="[storeLearningId(labeledItems[2])]">
+          <!-- 3 -->
+          <div
+            class="race-btn"
+            @click="[storeLearningId(labeledItems[2])]"
+            style="right: 12px"
+          >
             <div class="rabbit-running">
-              <img src="../../../resources/img/img09_s.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">
-              <img :src="labeledItems[2].label.length >= 4
-                ? item.imgSrc3
-                : item.imgSrc1
-                " :style="{ display: !rabbitCompl[3] ? 'block' : 'none' }" />
-              <img :src="labeledItems[2].label.length >= 4
-                ? item.imgSrc4
-                : item.imgSrc2
-                " :style="{ display: rabbitCompl[3] ? 'block' : 'none' }" />
+            <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"
+                />
+              </div>
             </button>
-            <p>{{ labeledItems[2].label }}</p>
+            <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"
+              />
+              {{ labeledItems[2].label }}
+            </p>
           </div>
         </div>
-        <div class="rcon flex">
-          <div class="race-btn" @click="
-            [storeLearningId(labeledItems[7]),]
-            ">
+        <!-- 3번째줄 -->
+        <div class="rcon flex" style="position: relative; top: -23px">
+          <!-- 8 -->
+          <div class="race-btn" @click="[storeLearningId(labeledItems[7])]">
             <div class="rabbit-running">
-              <img src="../../../resources/img/img09_s.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">
-              <img :src="labeledItems[7].label.length >= 4
-                ? item.imgSrc3
-                : item.imgSrc1
-                " :style="{ display: !rabbitCompl[8] ? 'block' : 'none' }" />
-              <img :src="labeledItems[7].label.length >= 4
-                ? item.imgSrc4
-                : item.imgSrc2
-                " :style="{ display: rabbitCompl[8] ? 'block' : 'none' }" />
+            <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"
+                />
+              </div>
             </button>
-            <p class="long">{{ labeledItems[7].label }}</p>
+            <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"
+              />
+              {{ labeledItems[7].label }}
+            </p>
           </div>
+          <!-- 9 -->
           <div class="race-btn" @click="[storeLearningId(labeledItems[8])]">
             <div class="rabbit-running">
-              <img src="../../../resources/img/img09_s.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">
-              <img :src="labeledItems[8].label.length >= 4
-                ? item.imgSrc3
-                : item.imgSrc1
-                " :style="{ display: !rabbitCompl[9] ? 'block' : 'none' }" />
-              <img :src="labeledItems[8].label.length >= 4
-                ? item.imgSrc4
-                : item.imgSrc2
-                " :style="{ display: rabbitCompl[9] ? 'block' : 'none' }" />
+            <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"
+                />
+              </div>
             </button>
-            <p>{{ labeledItems[8].label }}</p>
+            <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"
+              />
+              {{ labeledItems[8].label }}
+            </p>
           </div>
+          <!-- 10 -->
           <div class="race-btn" @click="[storeLearningId(labeledItems[9])]">
             <div class="rabbit-running">
-              <img src="../../../resources/img/img09_s.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">
-              <img :src="labeledItems[9].label.length >= 4
-                ? item.imgSrc3
-                : item.imgSrc1
-                " :style="{ display: !rabbitCompl[10] ? 'block' : 'none' }" />
-              <img :src="labeledItems[9].label.length >= 4
-                ? item.imgSrc4
-                : item.imgSrc2
-                " :style="{ display: rabbitCompl[10] ? 'block' : 'none' }" />
+            <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"
+                />
+              </div>
             </button>
-            <p>{{ labeledItems[9].label }}</p>
+            <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"
+              />
+              {{ labeledItems[9].label }}
+            </p>
           </div>
-
-          <div class="race-btn" @click="
-            [storeLearningId(labeledItems[10]),]
-            ">
+          <!-- 11 -->
+          <div class="race-btn" @click="[storeLearningId(labeledItems[10])]">
             <div class="rabbit-running">
-              <img src="../../../resources/img/img09_s.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">
-              <img :src="labeledItems[10].label.length >= 4
-                ? item.imgSrc3
-                : item.imgSrc1
-                " :style="{ display: !rabbitCompl[11] ? 'block' : 'none' }" />
-              <img :src="labeledItems[10].label.length >= 4
-                ? item.imgSrc4
-                : item.imgSrc2
-                " :style="{ display: rabbitCompl[11] ? 'block' : 'none' }" />
+            <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"
+                />
+              </div>
             </button>
-            <p class="long">{{ labeledItems[10].label }}</p>
+            <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"
+              />
+              {{ labeledItems[10].label }}
+            </p>
           </div>
         </div>
         <div class="race-btn">
           <div class="rabbit-running" style="display: flex">
-            <img class="rabbit-end" src="../../../resources/img/img138_72s.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="width: 100%; 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>

             this.titleUnitName = this.roadmapData[0].unit_nm;
             this.titleBookName = this.roadmapData[0].book_nm;
             this.labeledItems = this.processedRoadmap;
-            console.log(this.roadmapData, this.labeledItems)
+            console.log(this.roadmapData, this.labeledItems);
           } else {
             this.state = "noProblem";
           }

     },
     goToPage2(page, unit_id) {
       this.$router.push({
-        name: page, query: {
+        name: page,
+        query: {
           unit_id: unit_id,
         },
       });

           "Content-Type": "application/json; charset=UTF-8",
         },
         data: {
-          evalId: evaldata.learning_id
+          evalId: evaldata.learning_id,
         },
       })
-        .then(response => {
+        .then((response) => {
           const payload = {
             learning_id: response.data,
             label: evaldata.label,
-            seqNum: evaldata.seqNum
+            seqNum: evaldata.seqNum,
           };
 
           // Vuex 뮤테이션 호출
-          this.$store.commit('setLearningData', payload);
+          this.$store.commit("setLearningData", payload);
           this.handleProblemDetail(response.data[0]);
           this.goToPage(this.problemType);
         })
-        .catch(error => {
+        .catch((error) => {
           console.error("fetchData - error: ", error);
           return [];
         });
     },
 
     handleProblemDetail(item) {
-
       if (item.prblm_type_id === "prblm_type_001") {
         this.problemType = "Chapter3";
       } else if (item.prblm_type_id === "prblm_type_002") {

 </script>
 
 <style scoped>
+.complete-wrap img {
+  width: auto;
+}
 .body {
   width: 1435px;
   height: auto;

 
 .rabbit-running {
   position: absolute;
-  bottom: 40px;
-  right: 110px;
+  /* bottom: 40px; */
+  /* right: 110px; */
+  top: -118px;
   z-index: 10000;
   transform: scaleX(-1);
   transition: all 0.5s ease-in-out;

   width: 40%;
 }
 
-.race-btn p {
-  width: auto;
+.race-btn p.clear {
+  /* width: auto; */
+  font-size: 20px;
+  line-height: 1.6;
+  color: #333;
+  background-color: #f9f9f9;
+  padding: 6px;
+  border-radius: 8px;
+  /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); */
+  margin-bottom: 20px;
+  position: static;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.race-btn p.before-clear {
+  /* width: auto; */
+  font-size: 20px;
+  line-height: 1.6;
+  color: #ffffff;
+  background-color: rgba(119, 119, 119, 0.815);
+  padding: 6px;
+  border-radius: 8px;
+  /* border: 1px solid rgba(255, 255, 255, 0.2); */
+  margin-bottom: 20px;
+  /* box-shadow: none; */
+  position: static;
+}
+
+.race-box .lcon {
+  display: flex;
+  align-items: center;
+}
+.lcon .race-btn .rabbit-running {
+  transform: scaleX(1);
+}
+
+.rabbit-start img {
+  transform: scaleX(-1);
+}
+
+.image-container {
+  position: relative;
+  display: inline-block;
+}
+
+.clear-img {
+  position: absolute;
+  top: -27px;
+  left: 0;
+  width: 100px;
+  height: 100px;
+  z-index: 1;
 }
 </style>

Add a comment

Open 0
Closed 0

List

Delete comment