Commit @53d24f3773787507ff927301f11476e41d11054f

yanghyo 10-01

수업시간선택, 펴가방법 추가 수정

@53d24f3773787507ff927301f11476e41d11054f

70e7038

53d24f3

html/onSejong/manager/class/classMain.html

--- html/onSejong/manager/class/classMain.html

+++ html/onSejong/manager/class/classMain.html


 
     <!-- 페이지 plugin-->
     <script src="/resources/front/site/SITE_00000/js/common/vendor/swiper/swiper-bundle.js"></script>
+    <script src="../../../../resources/front/site/SITE_00000/js/common/vendor/chart/chart4.3.0.js"></script>
+    <script src="../../../../resources/front/site/SITE_00000/js/common/vendor/chart/chartjs-plugin-datalabels@2.0.js"></script>
     <!-- //페이지 plugin-->
     <!-- 공통 퍼블 layout: 개발시 삭제-->
     <script src="/resources/front/site/SITE_00000/js/_layout.js"></script>

                             </div>
                         </div>
                     </div>
-                    <section class="notice-area section sm">
+                    <section class="notice-box section sm">
                         <h3 class="notice-tit">📢 안내</h3>
                         <div class="notice-swiper-area">
                             <div class="swiper">

                                         <a href="#none">주요공지사항 표시1주요공지사항 표시1주요공지사항 표시1주요공지사항 표시1주요공지사항 표시1주요공지사항 표시1주요공지사항 표시1주요공지사항 표시1주요공지사항 표시1주요공지사항 표시1주요공지사항 표시1주요공지사항 표시1주요공지사항 표시1주요공지사항 표시1주요공지사항 표시1주요공지사항 표시1주요공지사항 표시1주요공지사항 표시1주요공지사항 표시1주요공지사항 표시1주요공지사항 표시1주요공지사항 표시1</a>
                                     </div>
                                     <div class="swiper-slide">
-                                        <a href="#none">주요공지사항 표시2</a>
+                                        <a href="#none">주요공지사항 표시1주요공지사항 표시1주요공지사항 표시1주요공지사항 표시1주요공지사항 표시1주요공지사항 표시1주요공지사항 표시1주요공지사항 표시1주요공지사항 표시1주요공지사항
+                                            표시1주요공지사항 표시1주요공지사항 표시1주요공지사항 표시1주요공지사항 표시1주요공지사항 표시1주요공지사항 표시1주요공지사항 표시1주요공지사항 표시1주요공지사항 표시1주요공지사항 표시1주요공지사항
+                                            표시1주요공지사항 표시1</a>
                                     </div>
                                 </div>
                             </div>
-                            <div class="swiper-fnc static sm">
+                            <div class="swiper-fnc static xsm">
                                 <div class="btn-group">
-                                    <button type="button" class="swiper-btn-playstop-toggle xsm">중지</button>
-                                    <button type="button" class="swiper-button-prev xsm">이전</button>
-                                    <button type="button" class="swiper-button-next xsm">다음</button>
+                                    <button type="button" class="swiper-btn-playstop-toggle">중지</button>
+                                    <button type="button" class="swiper-button-prev">이전</button>
+                                    <button type="button" class="swiper-button-next">다음</button>
                                 </div>
                             </div>
                         </div>

                                 </select>
                             </div>
                         </div>
-                        <div class="user-area">
-                            <ul class="user-list">
-                                <li>
-                                    <div class="profile lg">
-                                        <div class="img-area">
-                                            <figure>
-                                                <img src="/resources/front/site/SITE_00000/images/common/profile/profile.svg" alt="프로필 썸네일">
-                                            </figure>
-                                        </div>
+                        <ul class="user-state-list">
+                            <li>
+                                <div class="profile lg">
+                                    <div class="img-area">
+                                        <figure>
+                                            <img src="/resources/front/site/SITE_00000/images/common/profile/profile.svg" alt="프로필 썸네일">
+                                        </figure>
                                     </div>
-                                    <span class="">홍길동</span>
-                                </li>
-                                <li class="is-disabled">
-                                    <div class="profile lg">
-                                        <div class="img-area">
-                                            <figure>
-                                                <img src="/resources/front/site/SITE_00000/images/common/profile/profile.svg" alt="프로필 썸네일">
-                                            </figure>
-                                        </div>
+                                </div>
+                                <span class="label-state">홍길동</span>
+                            </li>
+                            <li class="is-active">
+                                <div class="profile lg">
+                                    <div class="img-area">
+                                        <figure>
+                                            <img src="/resources/front/site/SITE_00000/images/common/profile/profile.svg" alt="프로필 썸네일">
+                                        </figure>
                                     </div>
-                                    <span class="label-state">홍길동</span>
-                                </li>
-                            </ul>
-                        </div>
+                                </div>
+                                <span class="label-state">홍길동</span>
+                            </li>
+                            <li>
+                                <div class="profile lg">
+                                    <div class="img-area">
+                                        <figure>
+                                            <img src="/resources/front/site/SITE_00000/images/common/profile/profile.svg" alt="프로필 썸네일">
+                                        </figure>
+                                    </div>
+                                </div>
+                                <span class="label-state">홍길동</span>
+                            </li>
+                            <li class="is-active">
+                                <div class="profile lg">
+                                    <div class="img-area">
+                                        <figure>
+                                            <img src="/resources/front/site/SITE_00000/images/common/profile/profile.svg" alt="프로필 썸네일">
+                                        </figure>
+                                    </div>
+                                </div>
+                                <span class="label-state">홍길동</span>
+                            </li>
+                            <li>
+                                <div class="profile lg">
+                                    <div class="img-area">
+                                        <figure>
+                                            <img src="/resources/front/site/SITE_00000/images/common/profile/profile.svg" alt="프로필 썸네일">
+                                        </figure>
+                                    </div>
+                                </div>
+                                <span class="label-state">홍길동</span>
+                            </li>
+                            <li class="is-active">
+                                <div class="profile lg">
+                                    <div class="img-area">
+                                        <figure>
+                                            <img src="/resources/front/site/SITE_00000/images/common/profile/profile.svg" alt="프로필 썸네일">
+                                        </figure>
+                                    </div>
+                                </div>
+                                <span class="label-state">홍길동</span>
+                            </li>
+                            <li>
+                                <div class="profile lg">
+                                    <div class="img-area">
+                                        <figure>
+                                            <img src="/resources/front/site/SITE_00000/images/common/profile/profile.svg" alt="프로필 썸네일">
+                                        </figure>
+                                    </div>
+                                </div>
+                                <span class="label-state">홍길동</span>
+                            </li>
+                            <li class="is-active">
+                                <div class="profile lg">
+                                    <div class="img-area">
+                                        <figure>
+                                            <img src="/resources/front/site/SITE_00000/images/common/profile/profile.svg" alt="프로필 썸네일">
+                                        </figure>
+                                    </div>
+                                </div>
+                                <span class="label-state">홍길동</span>
+                            </li>
+                            <li>
+                                <div class="profile lg">
+                                    <div class="img-area">
+                                        <figure>
+                                            <img src="/resources/front/site/SITE_00000/images/common/profile/profile.svg" alt="프로필 썸네일">
+                                        </figure>
+                                    </div>
+                                </div>
+                                <span class="label-state">홍길동</span>
+                            </li>
+                            <li class="is-active">
+                                <div class="profile lg">
+                                    <div class="img-area">
+                                        <figure>
+                                            <img src="/resources/front/site/SITE_00000/images/common/profile/profile.svg" alt="프로필 썸네일">
+                                        </figure>
+                                    </div>
+                                </div>
+                                <span class="label-state">홍길동</span>
+                            </li>
+                             <li>
+                                <div class="profile lg">
+                                    <div class="img-area">
+                                        <figure>
+                                            <img src="/resources/front/site/SITE_00000/images/common/profile/profile.svg" alt="프로필 썸네일">
+                                        </figure>
+                                    </div>
+                                </div>
+                                <span class="label-state">홍길동</span>
+                            </li>
+                            <li class="is-active">
+                                <div class="profile lg">
+                                    <div class="img-area">
+                                        <figure>
+                                            <img src="/resources/front/site/SITE_00000/images/common/profile/profile.svg" alt="프로필 썸네일">
+                                        </figure>
+                                    </div>
+                                </div>
+                                <span class="label-state">홍길동</span>
+                            </li>
+                        </ul>
                     </section>
                     <section class="section sm">
                         <div class="section-tit-area">

                                 <h3 class="title-lg">학습 현황</h3>
                             </div>
                         </div>
-                        <div class="chart-section-area">
-                            <div class="chart-section">
+                        <div class="chart-summary-list">
+                            <li>
                                 <div class="txt-area">
-                                    <h4>수업 이수율</h4>
+                                    <h4 class="summary-tit">수업 이수율</h4>
                                     <p><em class="accent">3개</em> 수업게시물 중</p>
                                 </div>
                                 <div class="chart-area">
                                     <div class="chart">
                                         <canvas id="chart1" class="chart-doughnut"></canvas>
+                                        <span class="txt">0%</span>
                                     </div>
                                 </div>
-                            </div>
-                            <div class="chart-section">
+                            </li>
+                            <li>
                                 <div class="txt-area">
-                                    <h4>수업 이수율</h4>
+                                    <h4 class="summary-tit">수업 이수율</h4>
                                     <p><em class="accent">3개</em> 수업게시물 중</p>
                                 </div>
                                 <div class="chart-area">
                                     <div class="chart">
                                         <canvas id="chart2" class="chart-doughnut"></canvas>
+                                        <span class="txt">40%</span>
                                     </div>
                                 </div>
-                            </div>
+                            </li>
+                            <li>
+                                <div class="txt-area">
+                                    <h4 class="summary-tit">수업 이수율</h4>
+                                    <p><em class="accent">3개</em> 수업게시물 중</p>
+                                </div>
+                                <div class="chart-area">
+                                    <div class="chart">
+                                        <canvas id="chart3" class="chart-doughnut"></canvas>
+                                        <span class="txt">100%</span>
+                                    </div> 
+                                </div>
+                            </li>                            
                         </div>
                     </section>
                     <section class="section sm">

                                 </ul>
                             </div>
                             <div class="r-area">
-                                <select title="정렬 선택">시작일 순</select>
+                                <select title="정렬 선택">
+                                    <option>시작일 순</option>
+                                </select>
                             </div>
                         </div>
                         <div class="list-type">

                                     </tr>
                                 </thead>
                                 <tbody>
+                                    <tr>
+                                        <td>수업</td>
+                                        <td class=" align-left">
+                                            <a href="#none" class="table-title">[3차시] 인공지능과 수학</a>
+                                        </td>
+                                        <td>2025-12-11</td>
+                                        <td data-tit="완료인원(전체20명)">11명</td>
+                                    </tr>
+                                    <tr>
+                                        <td>수업</td>
+                                        <td class=" align-left">
+                                            <a href="#none" class="table-title">[3차시] 인공지능과 수학</a>
+                                        </td>
+                                        <td>2025-12-11</td>
+                                        <td data-tit="완료인원(전체20명)">11명</td>
+                                    </tr>
+                                    <tr>
+                                        <td>수업</td>
+                                        <td class=" align-left">
+                                            <a href="#none" class="table-title">[3차시] 인공지능과 수학</a>
+                                        </td>
+                                        <td>2025-12-11</td>
+                                        <td data-tit="완료인원(전체20명)">11명</td>
+                                    </tr>
+                                    <tr>
+                                        <td>수업</td>
+                                        <td class=" align-left">
+                                            <a href="#none" class="table-title">[3차시] 인공지능과 수학</a>
+                                        </td>
+                                        <td>2025-12-11</td>
+                                        <td data-tit="완료인원(전체20명)">11명</td>
+                                    </tr>
                                     <tr>
                                         <td>수업</td>
                                         <td class=" align-left">

     <div class="dim"></div>
 
     <script>
+        $(document).ready(function () {
+            //클래스 활동 분석 chart
+            createChartDoughnut('chart1', 0, gradientColorPrimary);
+            createChartDoughnut('chart2', 40, gradientColorPrimary);
+            createChartDoughnut('chart3', 100, gradientColorPrimary);
+        });
     </script>
 </body>
 

70e7038

53d24f3

html/onSejong/manager/class/pop_assessmentSet.html

--- html/onSejong/manager/class/pop_assessmentSet.html

+++ html/onSejong/manager/class/pop_assessmentSet.html


             <h1>평가방법 추가</h1>
         </div>
         <div class="pop-body">
-            <div class="bg-area">
-                <ul class="item-list">
-                    <li>
-                        <p class="title-xsm">평가방법1</p>
-                        <select title="평가방법 선택">
-                            <option>지필평가</option>
-                        </select>
-                        <select title="반영비율 선택">
-                            <option>50%</option>
-                        </select>
-                        <input type="text" class="flex1" placeholder="상세방법을 입력하세요.">
-                        <div class="fnc">
-                            <div class="btn-group">
-                                <button type="button" class="btn ghost sm ico-delete circle"></button>
-                            </div>
-                        </div>
-                    </li>
-                    <li>
-                        <p class="title-xsm">평가방법2</p>
-                        <select title="평가방법 선택">
-                            <option>수행평가</option>
-                        </select>
-                        <select title="반영비율 선택">
-                            <option>100%</option>
-                        </select>
-                        <input type="text" class="flex1" placeholder="상세방법을 입력하세요.">
-                        <div class="fnc">
-                            <div class="btn-group">
-                                <button type="button" class="btn ghost sm ico-delete circle"></button>
-                            </div>
-                        </div>
-                    </li>
-                </ul>
-                <div class="btn-fnc-cont">
-                    <button class="btn-add">추가</button>
-                </div>
+            <div class="write-type">
+                <table>
+                    <caption>평가방법 추가</caption>
+                    <colgroup>
+                        <col style="width: 160px;">
+                        <col>
+                    </colgroup>
+                    <tbody>
+                        <tr>
+                            <th scope="row">평가방법1</th>
+                            <td>
+                                <select title="평가선택">
+                                    <option>지필평가</option>
+                                    <option>수행평가</option>
+                                </select>
+                                <select title="비율 선택">
+                                    <option>50%</option>
+                                    <option>100%</option>
+                                </select>
+                               
+                                <div class="flex-box">
+                                    <input type="text" placeholder="상세방법을 입력하세요." title="상세방법을 입력" class="flex1">
+                                    <button type="button" class="btn ghost sm ico-delete circle">삭제</button>
+                                </div>
+                            </td>
+                        </tr>
+                        <tr>
+                            <th scope="row">평가방법1</th>
+                            <td>
+                                <select title="평가선택">
+                                    <option>지필평가</option>
+                                    <option>수행평가</option>
+                                </select>
+                                <select title="비율 선택">
+                                    <option>50%</option>
+                                    <option>100%</option>
+                                </select>
+                                <div class="flex-box">
+                                    <input type="text" placeholder="상세방법을 입력하세요." title="상세방법을 입력" class="flex1">
+                                    <button type="button" class="btn ghost sm ico-delete circle">삭제</button>
+                                </div>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
             </div>
         </div>
 

70e7038

53d24f3

html/onSejong/manager/class/pop_classTimeSet.html

--- html/onSejong/manager/class/pop_classTimeSet.html

+++ html/onSejong/manager/class/pop_classTimeSet.html


             <h1>수업시간 선택</h1>
         </div>
         <div class="pop-body">
-            <fieldset class="checkradio-area">
-                <legend>수업시간 선택</legend>
-                <div class="checkradio">
-                    <input type="radio" name="r1" id="r1-1" checked="">
-                    <label for="r1-1">지정된 시간</label>
+            <div class="fnc-area">
+                <div class="l-area">
+                    <div class="checkradio">
+                        <input type="radio" name="r1" id="r1-1" checked="">
+                        <label for="r1-1">지정된 시간</label>
+                    </div>
+                    <div class="checkradio">
+                        <input type="radio" name="r1" id="r1-2">
+                        <label for="r1-2">상시학습</label>
+                    </div>
                 </div>
-                <div class="checkradio">
-                    <input type="radio" name="r1" id="r1-2">
-                    <label for="r1-2">상시학습</label>
-                </div>
-            </fieldset>
-            <div class="write-type margin-top-md">
+            </div>
+            <div class="write-type">
                 <table>
                     <caption>수업시간 선택</caption>
                     <colgroup>

                         <tr>
                             <th scope="row">수업 시간1</th>
                             <td>
-                                <fieldset>
-                                    <legend>수업 시간 1</legend>
-                                    <select title="요일선택">
-                                        <option>요일선택</option>
-                                    </select>
+                                <select title="요일선택">
+                                    <option>요일선택</option>
+                                </select>
+                                <div class="flex-inline-box">
                                     <select title="시작시간 선택">
                                         <option>시작시간</option>
                                     </select>

                                     <select title="종료분 선택">
                                         <option>종료분</option>
                                     </select>
-                                    <button type="button" class="btn ghost sm ico-delete circle">
-                                        <span class="txt-hide">삭제</span>
-                                    </button>
-                                </fieldset>
+                                    <button type="button" class="btn ghost sm ico-delete circle">삭제</button>
+                                </div>
                             </td>
                         </tr>
                         <tr>
                             <th scope="row">수업 시간2</th>
                             <td>
-                                <fieldset>
-                                    <legend>수업 시간 2</legend>
-                                    <select title="요일선택">
-                                        <option>요일선택</option>
-                                    </select>
+                                <select title="요일선택">
+                                    <option>요일선택</option>
+                                </select>
+                                <div class="flex-inline-box">
                                     <select title="시작시간 선택">
                                         <option>시작시간</option>
                                     </select>

                                     <select title="종료분 선택">
                                         <option>종료분</option>
                                     </select>
-                                    <button type="button" class="btn ghost sm ico-delete circle">
-                                        <span class="txt-hide">삭제</span>
-                                    </button>
-                                </fieldset>
+                                    <button type="button" class="btn ghost sm ico-delete circle">삭제</button>
+                                </div>
                             </td>
                         </tr>
                     </tbody>
                 </table>
             </div>
-            <div class="btn-fnc-cont">
-                <button type="button" class="btn-add">추가</button>
+            <div class="btn-fnc-cont align-left ">
+                <button type="button" class="btn primary ico-plus">추가</button>
             </div>
         </div>
         <div class="pop-footer">

70e7038

53d24f3

resources/front/site/SITE_00000/css/common/component/_form.scss

--- resources/front/site/SITE_00000/css/common/component/_form.scss

+++ resources/front/site/SITE_00000/css/common/component/_form.scss


 		margin-right: 0;
 	}
 }
+.flex-inline-box {
+	display: inline-flex;
+	flex-wrap: wrap;
+    align-items: center;
+	gap: $spacing-xsm;
+}
 .date-box {
 	display:flex;
 	align-content: center;

70e7038

53d24f3

resources/front/site/SITE_00000/css/common/layout/_layout.scss

--- resources/front/site/SITE_00000/css/common/layout/_layout.scss

+++ resources/front/site/SITE_00000/css/common/layout/_layout.scss


     border: $stroke-secondary;
     background: $color-background-default-primary;
     padding:$spacing-sm;
+    height: fit-content;
     h2 {
         padding:$spacing-lg;
     }

70e7038

53d24f3

resources/front/site/SITE_00000/css/style.css

--- resources/front/site/SITE_00000/css/style.css

+++ resources/front/site/SITE_00000/css/style.css


   margin-right: 0;
 }
 
+.flex-inline-box {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  gap: 0.8rem;
+}
+
 .date-box {
   display: -webkit-box;
   display: -ms-flexbox;

   border: 0.1rem solid var(--color-stroke-default-tertiary);
   background: var(--color-background-default-primary);
   padding: 1.2rem;
+  height: -webkit-fit-content;
+  height: -moz-fit-content;
+  height: fit-content;
 }
 .lnb h2 {
   padding: 2.4rem;

70e7038

53d24f3

resources/front/site/SITE_00000/css/style.css.map

--- resources/front/site/SITE_00000/css/style.css.map

+++ resources/front/site/SITE_00000/css/style.css.map

This diff is too big to display.

70e7038

53d24f3

resources/front/site/SITE_00000/css/style.min.css

--- resources/front/site/SITE_00000/css/style.min.css

+++ resources/front/site/SITE_00000/css/style.min.css

This diff is too big to display.

70e7038

53d24f3

resources/front/site/SITE_00000/css/style.min.css.map

--- resources/front/site/SITE_00000/css/style.min.css.map

+++ resources/front/site/SITE_00000/css/style.min.css.map

This diff is too big to display.

Add a comment

Open 0
Closed 0

List

...	...	@@ -620,6 +620,12 @@
620	620	margin-right: 0;
621	621	}
622	622	}
	623	+.flex-inline-box {
	624	+ display: inline-flex;
	625	+ flex-wrap: wrap;
	626	+ align-items: center;
	627	+ gap: $spacing-xsm;
	628	+}
623	629	.date-box {
624	630	display:flex;
625	631	align-content: center;

...	...	@@ -786,6 +786,7 @@
786	786	border: $stroke-secondary;
787	787	background: $color-background-default-primary;
788	788	padding:$spacing-sm;
	789	+ height: fit-content;
789	790	h2 {
790	791	padding:$spacing-lg;
791	792	}

...	...	@@ -6363,6 +6363,18 @@
6363	6363	margin-right: 0;
6364	6364	}
6365	6365
	6366	+.flex-inline-box {
	6367	+ display: -webkit-inline-box;
	6368	+ display: -ms-inline-flexbox;
	6369	+ display: inline-flex;
	6370	+ -ms-flex-wrap: wrap;
	6371	+ flex-wrap: wrap;
	6372	+ -webkit-box-align: center;
	6373	+ -ms-flex-align: center;
	6374	+ align-items: center;
	6375	+ gap: 0.8rem;
	6376	+}
	6377	+
6366	6378	.date-box {
6367	6379	display: -webkit-box;
6368	6380	display: -ms-flexbox;
...	...	@@ -20808,6 +20820,9 @@
20808	20820	border: 0.1rem solid var(--color-stroke-default-tertiary);
20809	20821	background: var(--color-background-default-primary);
20810	20822	padding: 1.2rem;
	20823	+ height: -webkit-fit-content;
	20824	+ height: -moz-fit-content;
	20825	+ height: fit-content;
20811	20826	}
20812	20827	.lnb h2 {
20813	20828	padding: 2.4rem;

...	...	@@ -21,6 +21,8 @@
21	21
22	22	<!-- 페이지 plugin-->
23	23	<script src="/resources/front/site/SITE_00000/js/common/vendor/swiper/swiper-bundle.js"></script>
	24	+ <script src="../../../../resources/front/site/SITE_00000/js/common/vendor/chart/chart4.3.0.js"></script>
	25	+ <script src="../../../../resources/front/site/SITE_00000/js/common/vendor/chart/chartjs-plugin-datalabels@2.0.js"></script>
24	26	<!-- //페이지 plugin-->
25	27	<!-- 공통 퍼블 layout: 개발시 삭제-->
26	28	<script src="/resources/front/site/SITE_00000/js/_layout.js"></script>
...	...	@@ -126,7 +128,7 @@
126	128	</div>
127	129	</div>
128	130	</div>
129		- <section class="notice-area section sm">
	131	+ <section class="notice-box section sm">
130	132	<h3 class="notice-tit">📢 안내</h3>
131	133	<div class="notice-swiper-area">
132	134	<div class="swiper">
...	...	@@ -135,15 +137,17 @@
135	137	<a href="#none">주요공지사항 표시1주요공지사항 표시1주요공지사항 표시1주요공지사항 표시1주요공지사항 표시1주요공지사항 표시1주요공지사항 표시1주요공지사항 표시1주요공지사항 표시1주요공지사항 표시1주요공지사항 표시1주요공지사항 표시1주요공지사항 표시1주요공지사항 표시1주요공지사항 표시1주요공지사항 표시1주요공지사항 표시1주요공지사항 표시1주요공지사항 표시1주요공지사항 표시1주요공지사항 표시1주요공지사항 표시1</a>
136	138	</div>
137	139	<div class="swiper-slide">
138		- <a href="#none">주요공지사항 표시2</a>
	140	+ <a href="#none">주요공지사항 표시1주요공지사항 표시1주요공지사항 표시1주요공지사항 표시1주요공지사항 표시1주요공지사항 표시1주요공지사항 표시1주요공지사항 표시1주요공지사항 표시1주요공지사항
	141	+ 표시1주요공지사항 표시1주요공지사항 표시1주요공지사항 표시1주요공지사항 표시1주요공지사항 표시1주요공지사항 표시1주요공지사항 표시1주요공지사항 표시1주요공지사항 표시1주요공지사항 표시1주요공지사항
	142	+ 표시1주요공지사항 표시1</a>
139	143	</div>
140	144	</div>
141	145	</div>
142		- <div class="swiper-fnc static sm">
	146	+ <div class="swiper-fnc static xsm">
143	147	<div class="btn-group">
144		- <button type="button" class="swiper-btn-playstop-toggle xsm">중지</button>
145		- <button type="button" class="swiper-button-prev xsm">이전</button>
146		- <button type="button" class="swiper-button-next xsm">다음</button>
	148	+ <button type="button" class="swiper-btn-playstop-toggle">중지</button>
	149	+ <button type="button" class="swiper-button-prev">이전</button>
	150	+ <button type="button" class="swiper-button-next">다음</button>
147	151	</div>
148	152	</div>
149	153	</div>
...	...	@@ -160,30 +164,128 @@
160	164	</select>
161	165	</div>
162	166	</div>
163		- <div class="user-area">
164		- <ul class="user-list">
165		- <li>
166		- <div class="profile lg">
167		- <div class="img-area">
168		- <figure>
169		- <img src="/resources/front/site/SITE_00000/images/common/profile/profile.svg" alt="프로필 썸네일">
170		- </figure>
171		- </div>
	167	+ <ul class="user-state-list">
	168	+ <li>
	169	+ <div class="profile lg">
	170	+ <div class="img-area">
	171	+ <figure>
	172	+ <img src="/resources/front/site/SITE_00000/images/common/profile/profile.svg" alt="프로필 썸네일">
	173	+ </figure>
172	174	</div>
173		- <span class="">홍길동</span>
174		- </li>
175		- <li class="is-disabled">
176		- <div class="profile lg">
177		- <div class="img-area">
178		- <figure>
179		- <img src="/resources/front/site/SITE_00000/images/common/profile/profile.svg" alt="프로필 썸네일">
180		- </figure>
181		- </div>
	175	+ </div>
	176	+ <span class="label-state">홍길동</span>
	177	+ </li>
	178	+ <li class="is-active">
	179	+ <div class="profile lg">
	180	+ <div class="img-area">
	181	+ <figure>
	182	+ <img src="/resources/front/site/SITE_00000/images/common/profile/profile.svg" alt="프로필 썸네일">
	183	+ </figure>
182	184	</div>
183		- <span class="label-state">홍길동</span>
184		- </li>
185		- </ul>
186		- </div>
	185	+ </div>
	186	+ <span class="label-state">홍길동</span>
	187	+ </li>
	188	+ <li>
	189	+ <div class="profile lg">
	190	+ <div class="img-area">
	191	+ <figure>
	192	+ <img src="/resources/front/site/SITE_00000/images/common/profile/profile.svg" alt="프로필 썸네일">
	193	+ </figure>
	194	+ </div>
	195	+ </div>
	196	+ <span class="label-state">홍길동</span>
	197	+ </li>
	198	+ <li class="is-active">
	199	+ <div class="profile lg">
	200	+ <div class="img-area">
	201	+ <figure>
	202	+ <img src="/resources/front/site/SITE_00000/images/common/profile/profile.svg" alt="프로필 썸네일">
	203	+ </figure>
	204	+ </div>
	205	+ </div>
	206	+ <span class="label-state">홍길동</span>
	207	+ </li>
	208	+ <li>
	209	+ <div class="profile lg">
	210	+ <div class="img-area">
	211	+ <figure>
	212	+ <img src="/resources/front/site/SITE_00000/images/common/profile/profile.svg" alt="프로필 썸네일">
	213	+ </figure>
	214	+ </div>
	215	+ </div>
	216	+ <span class="label-state">홍길동</span>
	217	+ </li>
	218	+ <li class="is-active">
	219	+ <div class="profile lg">
	220	+ <div class="img-area">
	221	+ <figure>
	222	+ <img src="/resources/front/site/SITE_00000/images/common/profile/profile.svg" alt="프로필 썸네일">
	223	+ </figure>
	224	+ </div>
	225	+ </div>
	226	+ <span class="label-state">홍길동</span>
	227	+ </li>
	228	+ <li>
	229	+ <div class="profile lg">
	230	+ <div class="img-area">
	231	+ <figure>
	232	+ <img src="/resources/front/site/SITE_00000/images/common/profile/profile.svg" alt="프로필 썸네일">
	233	+ </figure>
	234	+ </div>
	235	+ </div>
	236	+ <span class="label-state">홍길동</span>
	237	+ </li>
	238	+ <li class="is-active">
	239	+ <div class="profile lg">
	240	+ <div class="img-area">
	241	+ <figure>
	242	+ <img src="/resources/front/site/SITE_00000/images/common/profile/profile.svg" alt="프로필 썸네일">
	243	+ </figure>
	244	+ </div>
	245	+ </div>
	246	+ <span class="label-state">홍길동</span>
	247	+ </li>
	248	+ <li>
	249	+ <div class="profile lg">
	250	+ <div class="img-area">
	251	+ <figure>
	252	+ <img src="/resources/front/site/SITE_00000/images/common/profile/profile.svg" alt="프로필 썸네일">
	253	+ </figure>
	254	+ </div>
	255	+ </div>
	256	+ <span class="label-state">홍길동</span>
	257	+ </li>
	258	+ <li class="is-active">
	259	+ <div class="profile lg">
	260	+ <div class="img-area">
	261	+ <figure>
	262	+ <img src="/resources/front/site/SITE_00000/images/common/profile/profile.svg" alt="프로필 썸네일">
	263	+ </figure>
	264	+ </div>
	265	+ </div>
	266	+ <span class="label-state">홍길동</span>
	267	+ </li>
	268	+ <li>
	269	+ <div class="profile lg">
	270	+ <div class="img-area">
	271	+ <figure>
	272	+ <img src="/resources/front/site/SITE_00000/images/common/profile/profile.svg" alt="프로필 썸네일">
	273	+ </figure>
	274	+ </div>
	275	+ </div>
	276	+ <span class="label-state">홍길동</span>
	277	+ </li>
	278	+ <li class="is-active">
	279	+ <div class="profile lg">
	280	+ <div class="img-area">
	281	+ <figure>
	282	+ <img src="/resources/front/site/SITE_00000/images/common/profile/profile.svg" alt="프로필 썸네일">
	283	+ </figure>
	284	+ </div>
	285	+ </div>
	286	+ <span class="label-state">홍길동</span>
	287	+ </li>
	288	+ </ul>
187	289	</section>
188	290	<section class="section sm">
189	291	<div class="section-tit-area">
...	...	@@ -191,29 +293,43 @@
191	293	<h3 class="title-lg">학습 현황</h3>
192	294	</div>
193	295	</div>
194		- <div class="chart-section-area">
195		- <div class="chart-section">
	296	+ <div class="chart-summary-list">
	297	+ <li>
196	298	<div class="txt-area">
197		- <h4>수업 이수율</h4>
	299	+ <h4 class="summary-tit">수업 이수율</h4>
198	300	<p><em class="accent">3개</em> 수업게시물 중</p>
199	301	</div>
200	302	<div class="chart-area">
201	303	<div class="chart">
202	304	<canvas id="chart1" class="chart-doughnut"></canvas>
	305	+ <span class="txt">0%</span>
203	306	</div>
204	307	</div>
205		- </div>
206		- <div class="chart-section">
	308	+ </li>
	309	+ <li>
207	310	<div class="txt-area">
208		- <h4>수업 이수율</h4>
	311	+ <h4 class="summary-tit">수업 이수율</h4>
209	312	<p><em class="accent">3개</em> 수업게시물 중</p>
210	313	</div>
211	314	<div class="chart-area">
212	315	<div class="chart">
213	316	<canvas id="chart2" class="chart-doughnut"></canvas>
	317	+ <span class="txt">40%</span>
214	318	</div>
215	319	</div>
216		- </div>
	320	+ </li>
	321	+ <li>
	322	+ <div class="txt-area">
	323	+ <h4 class="summary-tit">수업 이수율</h4>
	324	+ <p><em class="accent">3개</em> 수업게시물 중</p>
	325	+ </div>
	326	+ <div class="chart-area">
	327	+ <div class="chart">
	328	+ <canvas id="chart3" class="chart-doughnut"></canvas>
	329	+ <span class="txt">100%</span>
	330	+ </div>
	331	+ </div>
	332	+ </li>
217	333	</div>
218	334	</section>
219	335	<section class="section sm">
...	...	@@ -230,7 +346,9 @@
230	346	</ul>
231	347	</div>
232	348	<div class="r-area">
233		- <select title="정렬 선택">시작일 순</select>
	349	+ <select title="정렬 선택">
	350	+ <option>시작일 순</option>
	351	+ </select>
234	352	</div>
235	353	</div>
236	354	<div class="list-type">
...	...	@@ -251,6 +369,38 @@
251	369	</tr>
252	370	</thead>
253	371	<tbody>
	372	+ <tr>
	373	+ <td>수업</td>
	374	+ <td class=" align-left">
	375	+ <a href="#none" class="table-title">[3차시] 인공지능과 수학</a>
	376	+ </td>
	377	+ <td>2025-12-11</td>
	378	+ <td data-tit="완료인원(전체20명)">11명</td>
	379	+ </tr>
	380	+ <tr>
	381	+ <td>수업</td>
	382	+ <td class=" align-left">
	383	+ <a href="#none" class="table-title">[3차시] 인공지능과 수학</a>
	384	+ </td>
	385	+ <td>2025-12-11</td>
	386	+ <td data-tit="완료인원(전체20명)">11명</td>
	387	+ </tr>
	388	+ <tr>
	389	+ <td>수업</td>
	390	+ <td class=" align-left">
	391	+ <a href="#none" class="table-title">[3차시] 인공지능과 수학</a>
	392	+ </td>
	393	+ <td>2025-12-11</td>
	394	+ <td data-tit="완료인원(전체20명)">11명</td>
	395	+ </tr>
	396	+ <tr>
	397	+ <td>수업</td>
	398	+ <td class=" align-left">
	399	+ <a href="#none" class="table-title">[3차시] 인공지능과 수학</a>
	400	+ </td>
	401	+ <td>2025-12-11</td>
	402	+ <td data-tit="완료인원(전체20명)">11명</td>
	403	+ </tr>
254	404	<tr>
255	405	<td>수업</td>
256	406	<td class=" align-left">
...	...	@@ -444,6 +594,12 @@
444	594	<div class="dim"></div>
445	595
446	596	<script>
	597	+ $(document).ready(function () {
	598	+ //클래스 활동 분석 chart
	599	+ createChartDoughnut('chart1', 0, gradientColorPrimary);
	600	+ createChartDoughnut('chart2', 40, gradientColorPrimary);
	601	+ createChartDoughnut('chart3', 100, gradientColorPrimary);
	602	+ });
447	603	</script>
448	604	</body>
449	605

...	...	@@ -47,42 +47,51 @@
47	47	<h1>평가방법 추가</h1>
48	48	</div>
49	49	<div class="pop-body">
50		- <div class="bg-area">
51		- <ul class="item-list">
52		- <li>
53		- <p class="title-xsm">평가방법1</p>
54		- <select title="평가방법 선택">
55		- <option>지필평가</option>
56		- </select>
57		- <select title="반영비율 선택">
58		- <option>50%</option>
59		- </select>
60		- <input type="text" class="flex1" placeholder="상세방법을 입력하세요.">
61		- <div class="fnc">
62		- <div class="btn-group">
63		- <button type="button" class="btn ghost sm ico-delete circle"></button>
64		- </div>
65		- </div>
66		- </li>
67		- <li>
68		- <p class="title-xsm">평가방법2</p>
69		- <select title="평가방법 선택">
70		- <option>수행평가</option>
71		- </select>
72		- <select title="반영비율 선택">
73		- <option>100%</option>
74		- </select>
75		- <input type="text" class="flex1" placeholder="상세방법을 입력하세요.">
76		- <div class="fnc">
77		- <div class="btn-group">
78		- <button type="button" class="btn ghost sm ico-delete circle"></button>
79		- </div>
80		- </div>
81		- </li>
82		- </ul>
83		- <div class="btn-fnc-cont">
84		- <button class="btn-add">추가</button>
85		- </div>
	50	+ <div class="write-type">
	51	+ <table>
	52	+ <caption>평가방법 추가</caption>
	53	+ <colgroup>
	54	+ <col style="width: 160px;">
	55	+ <col>
	56	+ </colgroup>
	57	+ <tbody>
	58	+ <tr>
	59	+ <th scope="row">평가방법1</th>
	60	+ <td>
	61	+ <select title="평가선택">
	62	+ <option>지필평가</option>
	63	+ <option>수행평가</option>
	64	+ </select>
	65	+ <select title="비율 선택">
	66	+ <option>50%</option>
	67	+ <option>100%</option>
	68	+ </select>
	69	+
	70	+ <div class="flex-box">
	71	+ <input type="text" placeholder="상세방법을 입력하세요." title="상세방법을 입력" class="flex1">
	72	+ <button type="button" class="btn ghost sm ico-delete circle">삭제</button>
	73	+ </div>
	74	+ </td>
	75	+ </tr>
	76	+ <tr>
	77	+ <th scope="row">평가방법1</th>
	78	+ <td>
	79	+ <select title="평가선택">
	80	+ <option>지필평가</option>
	81	+ <option>수행평가</option>
	82	+ </select>
	83	+ <select title="비율 선택">
	84	+ <option>50%</option>
	85	+ <option>100%</option>
	86	+ </select>
	87	+ <div class="flex-box">
	88	+ <input type="text" placeholder="상세방법을 입력하세요." title="상세방법을 입력" class="flex1">
	89	+ <button type="button" class="btn ghost sm ico-delete circle">삭제</button>
	90	+ </div>
	91	+ </td>
	92	+ </tr>
	93	+ </tbody>
	94	+ </table>
86	95	</div>
87	96	</div>
88	97

...	...	@@ -47,18 +47,19 @@
47	47	<h1>수업시간 선택</h1>
48	48	</div>
49	49	<div class="pop-body">
50		- <fieldset class="checkradio-area">
51		- <legend>수업시간 선택</legend>
52		- <div class="checkradio">
53		- <input type="radio" name="r1" id="r1-1" checked="">
54		- <label for="r1-1">지정된 시간</label>
	50	+ <div class="fnc-area">
	51	+ <div class="l-area">
	52	+ <div class="checkradio">
	53	+ <input type="radio" name="r1" id="r1-1" checked="">
	54	+ <label for="r1-1">지정된 시간</label>
	55	+ </div>
	56	+ <div class="checkradio">
	57	+ <input type="radio" name="r1" id="r1-2">
	58	+ <label for="r1-2">상시학습</label>
	59	+ </div>
55	60	</div>
56		- <div class="checkradio">
57		- <input type="radio" name="r1" id="r1-2">
58		- <label for="r1-2">상시학습</label>
59		- </div>
60		- </fieldset>
61		- <div class="write-type margin-top-md">
	61	+ </div>
	62	+ <div class="write-type">
62	63	<table>
63	64	<caption>수업시간 선택</caption>
64	65	<colgroup>
...	...	@@ -69,11 +70,10 @@
69	70	<tr>
70	71	<th scope="row">수업 시간1</th>
71	72	<td>
72		- <fieldset>
73		- <legend>수업 시간 1</legend>
74		- <select title="요일선택">
75		- <option>요일선택</option>
76		- </select>
	73	+ <select title="요일선택">
	74	+ <option>요일선택</option>
	75	+ </select>
	76	+ <div class="flex-inline-box">
77	77	<select title="시작시간 선택">
78	78	<option>시작시간</option>
79	79	</select>
...	...	@@ -87,20 +87,17 @@
87	87	<select title="종료분 선택">
88	88	<option>종료분</option>
89	89	</select>
90		- <button type="button" class="btn ghost sm ico-delete circle">
91		- <span class="txt-hide">삭제</span>
92		- </button>
93		- </fieldset>
	90	+ <button type="button" class="btn ghost sm ico-delete circle">삭제</button>
	91	+ </div>
94	92	</td>
95	93	</tr>
96	94	<tr>
97	95	<th scope="row">수업 시간2</th>
98	96	<td>
99		- <fieldset>
100		- <legend>수업 시간 2</legend>
101		- <select title="요일선택">
102		- <option>요일선택</option>
103		- </select>
	97	+ <select title="요일선택">
	98	+ <option>요일선택</option>
	99	+ </select>
	100	+ <div class="flex-inline-box">
104	101	<select title="시작시간 선택">
105	102	<option>시작시간</option>
106	103	</select>
...	...	@@ -114,17 +111,15 @@
114	111	<select title="종료분 선택">
115	112	<option>종료분</option>
116	113	</select>
117		- <button type="button" class="btn ghost sm ico-delete circle">
118		- <span class="txt-hide">삭제</span>
119		- </button>
120		- </fieldset>
	114	+ <button type="button" class="btn ghost sm ico-delete circle">삭제</button>
	115	+ </div>
121	116	</td>
122	117	</tr>
123	118	</tbody>
124	119	</table>
125	120	</div>
126		- <div class="btn-fnc-cont">
127		- <button type="button" class="btn-add">추가</button>
	121	+ <div class="btn-fnc-cont align-left ">
	122	+ <button type="button" class="btn primary ico-plus">추가</button>
128	123	</div>
129	124	</div>
130	125	<div class="pop-footer">

Delete comment