메인 공지사항 추가

src/main/webapp/mobile/app/main.html

@@ -105,7 +105,114 @@
 
 	<div id="ITP_CONTAINER" class="fix">
 		<div class="itp_mobile_contents">
-
+			<div id="ITP_MAIN_CONTAINER">
+				<div class="itp_note_header">
+					<h1>> 공지사항</h1>
+				</div>
+				<div class="itp_note_bar">
+					<li>
+						<div class="itp_note_info">
+							<label>공지제목</label>
+							<span>:</span>
+							<div class="under fnNoteTitle">공지제목 테스트 ㅁㄴㅇㄻㄴㅇㄻ</div>
+						</div>
+						<div class="itp_note_info">
+							<label>공지일</label>
+							<span>:</span>
+							<div class="fnNoteDt">2020.20.20</div>
+						</div>
+					</li>
+					<li>
+						<div class="itp_note_info">
+							<label>공지제목</label>
+							<span>:</span>
+							<div class="under fnNoteTitle">공지제목 테스트 ㅁㄴㅇㄻㄴㅇㄻ</div>
+						</div>
+						<div class="itp_note_info">
+							<label>공지일</label>
+							<span>:</span>
+							<div class="fnNoteDt">2020.20.20</div>
+						</div>
+					</li>
+					<li>
+						<div class="itp_note_info">
+							<label>공지제목</label>
+							<span>:</span>
+							<div class="under fnNoteTitle">공지제목 테스트 ㅁㄴㅇㄻㄴㅇㄻㄴㅀㄹㄴㅇㅀㅎㄹㄴㄹㅇㅎㄹㄴㅇㅎㅀㄴㅇㅎㄹㄴㅇㅎㄹㄴㅇ</div>
+						</div>
+						<div class="itp_note_info">
+							<label>공지일</label>
+							<span>:</span>
+							<div class="fnNoteDt">2020.20.20</div>
+						</div>
+					</li>
+				</div>
+				<div class="itp_note_header">
+					<h1>> 운영정보</h1>
+				</div>
+				<div class="itp_oper_info_area">
+					<div class="itp_oper_info">
+						<label>구매요청건수</label>
+						<span>:</span>
+						<div class="fnNoteTitle">2 건</div>
+					</div>
+					<div class="itp_oper_info">
+						<label>입금액</label>
+						<span>:</span>
+						<div class="fnNoteTitle">12,000,000원</div>
+					</div>
+					<div class="itp_oper_info">
+						<label>미납금</label>
+						<span>:</span>
+						<div class="fnNoteTitle">1,000원</div>
+					</div>
+				</div>
+				<div class="itp_graph_area">
+					<div class="itp_graph_header">
+						<label>구매요청</label>
+						<select>
+							<option>가나다라마바사아</option>
+						</select>
+					</div>
+					<div id="ITP_GRAPH_INFO1"></div>
+				</div>
+				<div class="itp_graph_area">
+					<div class="itp_graph_header">
+						<label>구매요청</label>
+						<select>
+							<option>가나다라마바사아</option>
+						</select>
+					</div>
+					<div id="ITP_GRAPH_INFO2"></div>
+				</div>
+				<div class="itp_graph_area">
+					<div class="itp_graph_header">
+						<label>구매요청</label>
+						<select>
+							<option>가나다라마바사아</option>
+						</select>
+					</div>
+					<div id="ITP_GRAPH_INFO3"></div>
+				</div>
+				<div class="itp_graph_area">
+					<div class="itp_graph_header">
+						<label>구매요청</label>
+						<select>
+							<option>가나다라마바사아</option>
+						</select>
+					</div>
+					<div id="ITP_GRAPH_INFO4"></div>
+				</div>
+				<div class="itp_graph_area">
+					<div class="itp_graph_header">
+						<label>구매요청</label>
+						<select>
+							<option>가나다라마바사아</option>
+						</select>
+					</div>
+					<div id="ITP_GRAPH_INFO5"></div>
+				</div>
+			</div>
 		</div>
 	</div>
 	<footer id="ITP_FOOTER">

src/main/webapp/mobile/css/style.css

@@ -652,4 +652,26 @@ button.close {-webkit-appearance: none; padding: 0; cursor: pointer; background:
 .modal-footer .pop_btn_bar {float:right; margin-top:12px;}
 .modal-footer .btn {border-radius:6px; padding: 6px 12px;}
 
+/* 메인화면 공지사항 추가 */
+#ITP_MAIN_CONTAINER {position:relative;}
+#ITP_MAIN_CONTAINER .itp_note_header {width:100%; height:46px; padding:10px; border-bottom:1px solid #aaa; border-top:1px solid #aaa; background:#dce6f2;}
+#ITP_MAIN_CONTAINER .itp_note_header h1 {font-size:16pt; text-align:left; margin:0;}
+#ITP_MAIN_CONTAINER .itp_note_bar {height:180px;}
+#ITP_MAIN_CONTAINER .itp_note_bar li {border:1px solid #aaa; padding:5px; height:60px;}
+/* #ITP_MAIN_CONTAINER .itp_note_bar li:first-child  {border-top:none;} */
+#ITP_MAIN_CONTAINER .itp_note_bar li .itp_note_info {display:flex; height:24px;}
+#ITP_MAIN_CONTAINER .itp_note_bar li .itp_note_info label {font-size:12pt; text-align:left; width:62px;}
+#ITP_MAIN_CONTAINER .itp_note_bar li .itp_note_info span {width:14px;}
+#ITP_MAIN_CONTAINER .itp_note_bar li .itp_note_info div {text-overflow:ellipsis; overflow:hidden; white-space:nowrap; text-align:left; width:calc(100% - 76px);}
+#ITP_MAIN_CONTAINER .itp_note_bar li .itp_note_info .under {text-decoration: underline;}
+#ITP_MAIN_CONTAINER .itp_oper_info_area {border:1px solid #aaa; padding:5px;}
+#ITP_MAIN_CONTAINER .itp_oper_info_area .itp_oper_info {display:flex; height:24px;}
+#ITP_MAIN_CONTAINER .itp_oper_info_area .itp_oper_info label{font-size:12pt; text-align:left; width:90px;}
+#ITP_MAIN_CONTAINER .itp_oper_info_area .itp_oper_info span{width:14px;}
+#ITP_MAIN_CONTAINER .itp_oper_info_area .itp_oper_info div{text-overflow:ellipsis; overflow:hidden; white-space:nowrap; text-align: right; width:calc(100% - 114px);}
+#ITP_MAIN_CONTAINER .itp_graph_area {width:98%; height:300px; border:1px solid #aaa; margin:5px 1%;}
+#ITP_MAIN_CONTAINER .itp_graph_area .itp_graph_header {width:220px; margin:5px;}
+#ITP_MAIN_CONTAINER .itp_graph_area .itp_graph_header label {width:80px; font-size:14pt;}
+#ITP_MAIN_CONTAINER .itp_graph_area .itp_graph_header select {}
+#ITP_MAIN_CONTAINER #ITP_GRAPH_INFO {height:265px;}