Commit @d5b510fb0b877419f116d526a334a886a89f4237

류윤주 04-09

250409 류윤주 메인 수정

@d5b510fb0b877419f116d526a334a886a89f4237

d5b510f

client/resources/img/admin/ico_month.svg (added)

+++ client/resources/img/admin/ico_month.svg

...	...	@@ -0,0 +1,59 @@
	1	+<?xml version="1.0" encoding="utf-8"?>
	2	+<!-- Generator: Adobe Illustrator 24.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
	3	+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="298px"
	4	+ height="262px" viewBox="0 0 298 262" style="enable-background:new 0 0 298 262;" xml:space="preserve">
	5	+<style type="text/css">
	6	+ .st0{display:none;}
	7	+ .st1{display:inline;}
	8	+ .st2{clip-path:url(#SVGID_2_);fill:#003517;}
	9	+ .st3{clip-path:url(#SVGID_2_);fill:#005B29;}
	10	+ .st4{clip-path:url(#SVGID_2_);fill:#FFFFFF;}
	11	+ .st5{clip-path:url(#SVGID_4_);fill:#008943;}
	12	+ .st6{clip-path:url(#SVGID_4_);fill:none;stroke:#008943;stroke-width:10;stroke-miterlimit:10;}
	13	+ .st7{clip-path:url(#SVGID_4_);fill:#FFFFFF;}
	14	+</style>
	15	+<g id="레이어_1" class="st0">
	16	+ <g class="st1">
	17	+ <defs>
	18	+ <rect id="SVGID_1_" width="298" height="262"/>
	19	+ </defs>
	20	+ <clipPath id="SVGID_2_">
	21	+ <use xlink:href="#SVGID_1_" style="overflow:visible;"/>
	22	+ </clipPath>
	23	+ <path class="st2" d="M213,238h-51v-33.8c0-6.9-5.1-12.6-12-12.6c-6.9,0-12,5.7-12,12.6V238H86.8c-6.9,0-12.6,5.1-12.6,12
	24	+ c0,6.9,5.7,12,12.6,12H213c6.9,0,12.6-5.1,12.6-12C225.6,243.1,219.9,238,213,238"/>
	25	+ <path class="st3" d="M0,152v15.4C0,188.2,18,206,38.8,206H261c20.8,0,37-17.8,37-38.6V152H0z"/>
	26	+ <path class="st4" d="M298,36.1C298,15.3,281.8,0,261,0H38.8C18,0,0,15.3,0,36.1V152h298V36.1z"/>
	27	+ <path class="st3" d="M142.9,113.8c-9.4,0-18.3-3.7-24.9-10.3c-6.7-6.7-10.3-15.5-10.3-24.9c0-9.4,3.7-18.3,10.3-24.9
	28	+ c6.7-6.7,15.5-10.3,24.9-10.3c9.4,0,18.3,3.7,24.9,10.3c13.7,13.7,13.7,36.1,0,49.8C161.1,110.1,152.3,113.8,142.9,113.8
	29	+ M142.9,63.3c-4.1,0-7.9,1.6-10.8,4.5c-2.9,2.9-4.5,6.7-4.5,10.8c0,4.1,1.6,7.9,4.5,10.8s6.7,4.5,10.8,4.5c4.1,0,7.9-1.6,10.8-4.5
	30	+ c5.9-5.9,5.9-15.6,0-21.5C150.8,64.9,147,63.3,142.9,63.3"/>
	31	+ <path class="st3" d="M183.8,130.3c-2.6,0-5.1-1-7.1-2.9l-23.1-23.1c-3.9-3.9-3.9-10.2,0-14.1c3.9-3.9,10.2-3.9,14.1,0l23.1,23.1
	32	+ c3.9,3.9,3.9,10.2,0,14.1C189,129.3,186.4,130.3,183.8,130.3"/>
	33	+ </g>
	34	+</g>
	35	+<g id="레이어_2">
	36	+ <g>
	37	+ <defs>
	38	+ <rect id="SVGID_3_" x="19.3" y="2.6" width="259.3" height="258.7"/>
	39	+ </defs>
	40	+ <clipPath id="SVGID_4_">
	41	+ <use xlink:href="#SVGID_3_" style="overflow:visible;"/>
	42	+ </clipPath>
	43	+ <path class="st5" d="M274.4,61.2c0-18-15.1-32.5-33.1-32.5H56.8c-18,0-33.1,14.5-33.1,32.5v29.3h250.7V61.2z"/>
	44	+ <path class="st6" d="M274.4,61.2c0-18-15.1-32.5-33.1-32.5H56.8c-18,0-33.1,14.5-33.1,32.5v29.3h250.7V61.2z"/>
	45	+ <path class="st7" d="M23.6,90.5V224c0,18,15.1,33.1,33.1,33.1h184.5c18,0,33.1-15.1,33.1-33.1V90.5H23.6z"/>
	46	+ <path class="st6" d="M23.6,90.5V224c0,18,15.1,33.1,33.1,33.1h184.5c18,0,33.1-15.1,33.1-33.1V90.5H23.6z"/>
	47	+ <path class="st7" d="M170.7,28.6c0,12-9.7,21.7-21.7,21.7s-21.7-9.7-21.7-21.7c0-12,9.7-21.7,21.7-21.7S170.7,16.6,170.7,28.6"/>
	48	+ <path class="st6" d="M170.7,28.6c0,12-9.7,21.7-21.7,21.7s-21.7-9.7-21.7-21.7c0-12,9.7-21.7,21.7-21.7S170.7,16.6,170.7,28.6z"/>
	49	+ <path class="st5" d="M85.3,184.1c7-5.5,12.3-2.1,15,0.3c3.7,3.4,9.4,5.8,15.1,5.8c5.1,0,8.5-2.4,8.5-6c0-3.7-3.6-6.1-8.5-6.1
	50	+ c-3.1,0-5.3,0.2-8.5,0.3c-5.7,0.2-12.4-5.4-12.4-11.7c0-7,7.1-10.7,12.4-10.7c3.3,0,4.5,0.1,7.6,0.1c4.2,0,7.5-2,7.5-5.6
	51	+ c0-3.6-3.4-5.5-7.5-5.5c-4.4,0-8.5,1.9-11.9,4.9c-3.7,3.4-9.8,6.2-16.5,1.2c-5.7-4.3-5.8-9.7-2.9-14.3c6-9.4,18-15.6,33.8-15.6
	52	+ c17.1,0,32.4,9.7,32.4,25.2c0,9.9-4,16.4-14.6,20.1v0.2c11.5,2.9,16.4,10.6,16.4,21.2c0,16.4-14.7,26-35.5,26
	53	+ c-14.7,0-27.1-4.8-33.8-15.1C78.5,194.4,79.7,188.6,85.3,184.1"/>
	54	+ <path class="st5" d="M160.9,136c8.4-6.7,24.1-14.5,33.7-14.5c8.5,0,13.9,5.6,14.8,14.4c1.7,15.8,1.7,49.6-0.7,65.3
	55	+ c-1.2,8.1-4.7,13-12.9,13c-8.2,0-13.8-2.8-14.6-10.9c-1.7-16.5-2.7-37-1.7-50.5c-2.2,2.1-3.7,2.7-7.4,4.1
	56	+ c-4.4,1.6-11.2,1.7-15-4.9C153.4,144.9,156.5,139.5,160.9,136"/>
	57	+ </g>
	58	+</g>
	59	+</svg>

d5b510f

client/resources/img/admin/ico_today.svg (added)

+++ client/resources/img/admin/ico_today.svg

...	...	@@ -0,0 +1,100 @@
	1	+<?xml version="1.0" encoding="utf-8"?>
	2	+<!-- Generator: Adobe Illustrator 24.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
	3	+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="298px"
	4	+ height="262px" viewBox="0 0 298 262" style="enable-background:new 0 0 298 262;" xml:space="preserve">
	5	+<style type="text/css">
	6	+ .st0{display:none;}
	7	+ .st1{display:inline;}
	8	+ .st2{clip-path:url(#SVGID_2_);fill:#003517;}
	9	+ .st3{clip-path:url(#SVGID_2_);fill:#005B29;}
	10	+ .st4{clip-path:url(#SVGID_2_);fill:#FFFFFF;}
	11	+ .st5{clip-path:url(#SVGID_4_);fill:#008943;}
	12	+ .st6{clip-path:url(#SVGID_4_);fill:none;stroke:#008943;stroke-width:10;stroke-miterlimit:10;}
	13	+ .st7{clip-path:url(#SVGID_4_);fill:#FFFFFF;}
	14	+ .st8{clip-path:url(#SVGID_6_);fill:#008943;}
	15	+ .st9{clip-path:url(#SVGID_6_);fill:none;stroke:#008943;stroke-width:10;stroke-miterlimit:10;}
	16	+ .st10{clip-path:url(#SVGID_6_);fill:#FFFFFF;}
	17	+</style>
	18	+<g id="레이어_1" class="st0">
	19	+ <g class="st1">
	20	+ <defs>
	21	+ <rect id="SVGID_1_" width="298" height="262"/>
	22	+ </defs>
	23	+ <clipPath id="SVGID_2_">
	24	+ <use xlink:href="#SVGID_1_" style="overflow:visible;"/>
	25	+ </clipPath>
	26	+ <path class="st2" d="M213,238h-51v-33.8c0-6.9-5.1-12.6-12-12.6c-6.9,0-12,5.7-12,12.6V238H86.8c-6.9,0-12.6,5.1-12.6,12
	27	+ c0,6.9,5.7,12,12.6,12H213c6.9,0,12.6-5.1,12.6-12C225.6,243.1,219.9,238,213,238"/>
	28	+ <path class="st3" d="M0,152v15.4C0,188.2,18,206,38.8,206H261c20.8,0,37-17.8,37-38.6V152H0z"/>
	29	+ <path class="st4" d="M298,36.1C298,15.3,281.8,0,261,0H38.8C18,0,0,15.3,0,36.1V152h298V36.1z"/>
	30	+ <path class="st3" d="M142.9,113.8c-9.4,0-18.3-3.7-24.9-10.3c-6.7-6.7-10.3-15.5-10.3-24.9c0-9.4,3.7-18.3,10.3-24.9
	31	+ c6.7-6.7,15.5-10.3,24.9-10.3c9.4,0,18.3,3.7,24.9,10.3c13.7,13.7,13.7,36.1,0,49.8C161.1,110.1,152.3,113.8,142.9,113.8
	32	+ M142.9,63.3c-4.1,0-7.9,1.6-10.8,4.5c-2.9,2.9-4.5,6.7-4.5,10.8c0,4.1,1.6,7.9,4.5,10.8s6.7,4.5,10.8,4.5c4.1,0,7.9-1.6,10.8-4.5
	33	+ c5.9-5.9,5.9-15.6,0-21.5C150.8,64.9,147,63.3,142.9,63.3"/>
	34	+ <path class="st3" d="M183.8,130.3c-2.6,0-5.1-1-7.1-2.9l-23.1-23.1c-3.9-3.9-3.9-10.2,0-14.1c3.9-3.9,10.2-3.9,14.1,0l23.1,23.1
	35	+ c3.9,3.9,3.9,10.2,0,14.1C189,129.3,186.4,130.3,183.8,130.3"/>
	36	+ </g>
	37	+</g>
	38	+<g id="레이어_2" class="st0">
	39	+ <g class="st1">
	40	+ <defs>
	41	+ <rect id="SVGID_3_" x="19.3" y="2.6" width="259.3" height="258.7"/>
	42	+ </defs>
	43	+ <clipPath id="SVGID_4_">
	44	+ <use xlink:href="#SVGID_3_" style="overflow:visible;"/>
	45	+ </clipPath>
	46	+ <path class="st5" d="M274.4,61.2c0-18-15.1-32.5-33.1-32.5H56.8c-18,0-33.1,14.5-33.1,32.5v29.3h250.7V61.2z"/>
	47	+ <path class="st6" d="M274.4,61.2c0-18-15.1-32.5-33.1-32.5H56.8c-18,0-33.1,14.5-33.1,32.5v29.3h250.7V61.2z"/>
	48	+ <path class="st7" d="M23.6,90.5V224c0,18,15.1,33.1,33.1,33.1h184.5c18,0,33.1-15.1,33.1-33.1V90.5H23.6z"/>
	49	+ <path class="st6" d="M23.6,90.5V224c0,18,15.1,33.1,33.1,33.1h184.5c18,0,33.1-15.1,33.1-33.1V90.5H23.6z"/>
	50	+ <path class="st7" d="M170.7,28.6c0,12-9.7,21.7-21.7,21.7s-21.7-9.7-21.7-21.7c0-12,9.7-21.7,21.7-21.7S170.7,16.6,170.7,28.6"/>
	51	+ <path class="st6" d="M170.7,28.6c0,12-9.7,21.7-21.7,21.7s-21.7-9.7-21.7-21.7c0-12,9.7-21.7,21.7-21.7S170.7,16.6,170.7,28.6z"/>
	52	+ <path class="st5" d="M85.3,184.1c7-5.5,12.3-2.1,15,0.3c3.7,3.4,9.4,5.8,15.1,5.8c5.1,0,8.5-2.4,8.5-6c0-3.7-3.6-6.1-8.5-6.1
	53	+ c-3.1,0-5.3,0.2-8.5,0.3c-5.7,0.2-12.4-5.4-12.4-11.7c0-7,7.1-10.7,12.4-10.7c3.3,0,4.5,0.1,7.6,0.1c4.2,0,7.5-2,7.5-5.6
	54	+ c0-3.6-3.4-5.5-7.5-5.5c-4.4,0-8.5,1.9-11.9,4.9c-3.7,3.4-9.8,6.2-16.5,1.2c-5.7-4.3-5.8-9.7-2.9-14.3c6-9.4,18-15.6,33.8-15.6
	55	+ c17.1,0,32.4,9.7,32.4,25.2c0,9.9-4,16.4-14.6,20.1v0.2c11.5,2.9,16.4,10.6,16.4,21.2c0,16.4-14.7,26-35.5,26
	56	+ c-14.7,0-27.1-4.8-33.8-15.1C78.5,194.4,79.7,188.6,85.3,184.1"/>
	57	+ <path class="st5" d="M160.9,136c8.4-6.7,24.1-14.5,33.7-14.5c8.5,0,13.9,5.6,14.8,14.4c1.7,15.8,1.7,49.6-0.7,65.3
	58	+ c-1.2,8.1-4.7,13-12.9,13c-8.2,0-13.8-2.8-14.6-10.9c-1.7-16.5-2.7-37-1.7-50.5c-2.2,2.1-3.7,2.7-7.4,4.1
	59	+ c-4.4,1.6-11.2,1.7-15-4.9C153.4,144.9,156.5,139.5,160.9,136"/>
	60	+ </g>
	61	+</g>
	62	+<g id="레이어_3">
	63	+ <g>
	64	+ <defs>
	65	+ <rect id="SVGID_5_" x="19.1" y="3.6" width="259.8" height="254.8"/>
	66	+ </defs>
	67	+ <clipPath id="SVGID_6_">
	68	+ <use xlink:href="#SVGID_5_" style="overflow:visible;"/>
	69	+ </clipPath>
	70	+ <path class="st8" d="M92.7,24.1c0-7.9-6.4-14.3-14.3-14.3h-16c-7.9,0-14.3,6.4-14.3,14.3v213.8c0,7.9,6.4,14.3,14.3,14.3h16
	71	+ c7.9,0,14.3-6.4,14.3-14.3V24.1z"/>
	72	+ <path class="st9" d="M92.7,24.1c0-7.9-6.4-14.3-14.3-14.3h-16c-7.9,0-14.3,6.4-14.3,14.3v213.8c0,7.9,6.4,14.3,14.3,14.3h16
	73	+ c7.9,0,14.3-6.4,14.3-14.3V24.1z"/>
	74	+ <path class="st10" d="M274.5,29.4c0-11.8-9.6-21.4-21.4-21.4H115.9C104,8,94.5,17.6,94.5,29.4v203.2c0,11.8,9.6,21.4,21.4,21.4
	75	+ h137.2c11.8,0,21.4-9.6,21.4-21.4V29.4z"/>
	76	+ <path class="st9" d="M274.5,29.4c0-11.8-9.6-21.4-21.4-21.4H115.9C104,8,94.5,17.6,94.5,29.4v203.2c0,11.8,9.6,21.4,21.4,21.4
	77	+ h137.2c11.8,0,21.4-9.6,21.4-21.4V29.4z"/>
	78	+ <path class="st10" d="M62.5,57.1H33.8c-5.7,0-10.2-4.6-10.2-10.2c0-5.7,4.6-10.2,10.2-10.2h28.7c5.7,0,10.2,4.6,10.2,10.2
	79	+ C72.7,52.5,68.1,57.1,62.5,57.1"/>
	80	+ <path class="st9" d="M62.5,57.1H33.8c-5.7,0-10.2-4.6-10.2-10.2c0-5.7,4.6-10.2,10.2-10.2h28.7c5.7,0,10.2,4.6,10.2,10.2
	81	+ C72.7,52.5,68.1,57.1,62.5,57.1z"/>
	82	+ <path class="st10" d="M62.5,143.2H33.8c-5.7,0-10.2-4.6-10.2-10.2c0-5.7,4.6-10.2,10.2-10.2h28.7c5.7,0,10.2,4.6,10.2,10.2
	83	+ C72.7,138.6,68.1,143.2,62.5,143.2"/>
	84	+ <path class="st9" d="M62.5,143.2H33.8c-5.7,0-10.2-4.6-10.2-10.2c0-5.7,4.6-10.2,10.2-10.2h28.7c5.7,0,10.2,4.6,10.2,10.2
	85	+ C72.7,138.6,68.1,143.2,62.5,143.2z"/>
	86	+ <path class="st10" d="M62.5,227.2H33.8c-5.7,0-10.2-4.6-10.2-10.2c0-5.7,4.6-10.2,10.2-10.2h28.7c5.7,0,10.2,4.6,10.2,10.2
	87	+ C72.7,222.6,68.1,227.2,62.5,227.2"/>
	88	+ <path class="st9" d="M62.5,227.2H33.8c-5.7,0-10.2-4.6-10.2-10.2c0-5.7,4.6-10.2,10.2-10.2h28.7c5.7,0,10.2,4.6,10.2,10.2
	89	+ C72.7,222.6,68.1,227.2,62.5,227.2z"/>
	90	+ <path class="st8" d="M231.5,194c3.1,11.1-3.7,19-15.2,19h-65c-11.5,0-18.3-7.9-15.2-19l14.3-50.5c3.1-11.1,15-19.6,26.5-19.6h14
	91	+ c11.4,0,23.4,8.6,26.5,19.6L231.5,194z"/>
	92	+ <path class="st9" d="M231.5,194c3.1,11.1-3.7,19-15.2,19h-65c-11.5,0-18.3-7.9-15.2-19l14.3-50.5c3.1-11.1,15-19.6,26.5-19.6h14
	93	+ c11.4,0,23.4,8.6,26.5,19.6L231.5,194z"/>
	94	+ <path class="st8" d="M224.1,88.8c0,22.3-18.1,40.4-40.4,40.4c-22.3,0-40.4-18.1-40.4-40.4c0-22.3,18.1-40.4,40.4-40.4
	95	+ C206.1,48.4,224.1,66.5,224.1,88.8"/>
	96	+ <path class="st9" d="M224.1,88.8c0,22.3-18.1,40.4-40.4,40.4c-22.3,0-40.4-18.1-40.4-40.4c0-22.3,18.1-40.4,40.4-40.4
	97	+ C206.1,48.4,224.1,66.5,224.1,88.8z"/>
	98	+ </g>
	99	+</g>
	100	+</svg>

d5b510f

client/resources/img/admin/ico_total.svg (added)

+++ client/resources/img/admin/ico_total.svg

...	...	@@ -0,0 +1,28 @@
	1	+<?xml version="1.0" encoding="utf-8"?>
	2	+<!-- Generator: Adobe Illustrator 24.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
	3	+<svg version="1.1" id="레이어_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
	4	+ y="0px" width="298px" height="262px" viewBox="0 0 298 262" style="enable-background:new 0 0 298 262;" xml:space="preserve">
	5	+<style type="text/css">
	6	+ .st0{clip-path:url(#SVGID_2_);fill:#003517;}
	7	+ .st1{clip-path:url(#SVGID_2_);fill:#005B29;}
	8	+ .st2{clip-path:url(#SVGID_2_);fill:#FFFFFF;}
	9	+</style>
	10	+<g>
	11	+ <defs>
	12	+ <rect id="SVGID_1_" width="298" height="262"/>
	13	+ </defs>
	14	+ <clipPath id="SVGID_2_">
	15	+ <use xlink:href="#SVGID_1_" style="overflow:visible;"/>
	16	+ </clipPath>
	17	+ <path class="st0" d="M213,238h-51v-33.8c0-6.9-5.1-12.6-12-12.6c-6.9,0-12,5.7-12,12.6V238H86.8c-6.9,0-12.6,5.1-12.6,12
	18	+ c0,6.9,5.7,12,12.6,12H213c6.9,0,12.6-5.1,12.6-12C225.6,243.1,219.9,238,213,238"/>
	19	+ <path class="st1" d="M0,152v15.4C0,188.2,18,206,38.8,206H261c20.8,0,37-17.8,37-38.6V152H0z"/>
	20	+ <path class="st2" d="M298,36.1C298,15.3,281.8,0,261,0H38.8C18,0,0,15.3,0,36.1V152h298V36.1z"/>
	21	+ <path class="st1" d="M142.9,113.8c-9.4,0-18.3-3.7-24.9-10.3c-6.7-6.7-10.3-15.5-10.3-24.9c0-9.4,3.7-18.3,10.3-24.9
	22	+ c6.7-6.7,15.5-10.3,24.9-10.3c9.4,0,18.3,3.7,24.9,10.3c13.7,13.7,13.7,36.1,0,49.8C161.1,110.1,152.3,113.8,142.9,113.8
	23	+ M142.9,63.3c-4.1,0-7.9,1.6-10.8,4.5c-2.9,2.9-4.5,6.7-4.5,10.8c0,4.1,1.6,7.9,4.5,10.8s6.7,4.5,10.8,4.5c4.1,0,7.9-1.6,10.8-4.5
	24	+ c5.9-5.9,5.9-15.6,0-21.5C150.8,64.9,147,63.3,142.9,63.3"/>
	25	+ <path class="st1" d="M183.8,130.3c-2.6,0-5.1-1-7.1-2.9l-23.1-23.1c-3.9-3.9-3.9-10.2,0-14.1c3.9-3.9,10.2-3.9,14.1,0l23.1,23.1
	26	+ c3.9,3.9,3.9,10.2,0,14.1C189,129.3,186.4,130.3,183.8,130.3"/>
	27	+</g>
	28	+</svg>

0691376

d5b510f

client/resources/scss/admin/content.scss

--- client/resources/scss/admin/content.scss

+++ client/resources/scss/admin/content.scss


         background-color: var(--tk-white);
         border-radius: 0 0 2rem 2rem;
         height: calc(100% - 45px);
-        grid-auto-rows: min-content;
         // max-height: fit-content;
     
         .layout {

                 }
             }
     
+        }
+
+        &.overflow-y{
+            overflow-y: auto;
         }
     
     }

         gap: 3rem;
         margin-bottom: 5rem;
     
-        .first-box,
-        .two-box,
-        .three-box {
+        >div{
             flex: 0 0 calc(33.333% - 2rem);
             max-width: calc(33.333% - 2rem);
             padding: 2rem;
-            border-radius: var(--tk-rd-12);
-            text-align: center;
-            border: 1px solid var(--tk-gray-10);
-    
-    
+            @include radius(20);
+            background-color: var(--tk-gray-5);
+            border: 1px solid var(--tk-gray-30);
+
+            .between{
+                @include flex-layout(flex, center, space-between)
+            }
+
+            span{
+                display: block;
+                width: 50px;
+                height: 50px;
+                background-repeat: no-repeat;
+                background-position: center;
+                background-size: contain;
+            }
+
+            &.first-box{
+                span{
+                    background-image: url(#{$url}/admin/ico_today.svg);
+                }
+            }
+            &.two-box{
+                span{
+                    background-image: url(#{$url}/admin/ico_month.svg);
+                }
+            }
+            &.three-box {
+                background-color: var(--tk-main-50);
+                .box-title{
+                    color: var(--tk-white);
+                }
+                span{
+                    background-image: url(#{$url}/admin/ico_total.svg);
+                }
+         
+
+            }
+
+
+
+            .box-content{
+                min-width: 120px;
+                text-align: center;
+                font-size: 3rem;
+                font-weight: 700;
+                padding: 1rem 2rem;
+                background-color: var(--tk-white);
+                @include radius(50);
+
+            }
         }
     }
+
     
     .chart-wrap {
         padding: 3rem;

                                 &:last-child{
                                     border-radius: 0 0 1rem 0;
                                 }
+
+                                border-bottom: 0;
     
                             }
                         }

0691376

d5b510f

client/resources/scss/common/component/_tree.scss

--- client/resources/scss/common/component/_tree.scss

+++ client/resources/scss/common/component/_tree.scss


         .child-node {
             padding-left: 1.5rem;
             border-radius: var(--tk-rd-12);
-            margin-bottom: 1rem;
+            // margin-bottom: 1rem;
 
             .node-wrap.selected{
                 background-color: var(--tk-primary);

0691376

d5b510f

client/views/pages/adm/boardManagement/template/commonTemplate/CommonSelectListOne.vue

--- client/views/pages/adm/boardManagement/template/commonTemplate/CommonSelectListOne.vue

+++ client/views/pages/adm/boardManagement/template/commonTemplate/CommonSelectListOne.vue


               </div>
               <span>등록일시 | {{ bbsCn.regDt }}</span>
             </div>
-            <div class="form-content grid-none" :style="bbsMng.cmntUseYn == 'Y' ? 'min-height: fit-content;' : ''">
-              <div style="min-height: 27rem;">
+            <div class="form-content grid-none overflow-y">
+              <div   ref="first">
                 <div
                   class="editor5"
                   style="width: 100%;height: 100%;"
                   v-html="sanitizedContent"
                 ></div>
               </div>
-              <div class="layout border-bottom pb10">
+              <div class="layout border-top border-bottom pb10"   ref="two">
                   <p class="form-title">첨부파일</p>
                   <div v-if="fileList.length == 0">
                     <label>첨부된 파일이 없습니다.</label>

                   </ul>
                 </div>
                  <!-- 댓글 -->
-                <div v-if="bbsMng.cmntUseYn == 'Y'" class="comment-box">
+                <div v-if="bbsMng.cmntUseYn == 'Y'" class="comment-box"   ref="three">
                   <div class="layout w_100 mb30">
                       <p class="comment-head">댓글</p>
                       <textarea

     isReply(isReply) {
       this.getCmntList();
     },
+    updateHeight() {
+      this.$nextTick(() => {
+        const first = this.$refs.first;
+        const two = this.$refs.two;
+        const three = this.$refs.three;
+
+        let total = 0;
+        if (two) total += two.offsetHeight;
+        if (three) total += three.offsetHeight;
+
+        if (first) {
+          first.style.minHeight = `calc(100% - ${total}px - 30px)`;
+          first.style.maxHeight = `auto`;
+        }
+      });
+    },
   },
   watch: {
     $route(to, from) {

         (this.InputCmnt = ""), (this.upCmntId = null), this.fnSelectOne();
         this.getCmntList();
       }
+    },
+    bbsMng: {
+      handler() {
+        this.$nextTick(() => {
+          this.updateHeight();
+        });
+      },
+      deep: true,
     },
   },
   computed: {

   components: {
     CommentItem: CommentItem,
   },
-  mounted() {},
+  mounted() {
+    this.updateHeight();
+
+    // 창 크기 변경 시에도 대응하고 싶다면:
+    window.addEventListener('resize', this.updateHeight);
+  },
+  beforeUnmount() {
+    window.removeEventListener('resize', this.updateHeight);
+  },
 };
 </script>

0691376

d5b510f

client/views/pages/adm/boardManagement/template/galleryTemplate/GallerySelectListOne.vue

--- client/views/pages/adm/boardManagement/template/galleryTemplate/GallerySelectListOne.vue

+++ client/views/pages/adm/boardManagement/template/galleryTemplate/GallerySelectListOne.vue


                 </div>
                 <span>등록일시 | {{ bbsCn.regDt }}</span>
               </div>
-              <div class="form-content grid-none " style="max-height: auto;">
-                <div>
+              <div class="form-content grid-none overflow-y">
+                <div ref="first">
                     <div class="gallery-wrap">
                       <swiper-container
                         class="mySwiper"

                     >
                     </div>
                 </div>
-                <div class="layout border-bottom">
+                <div class="layout  border-top border-bottom pb10"  ref="two">
                   <p class="form-title">첨부파일</p>
                   <div v-if="fileList.length == 0">
                     <label>첨부된 파일이 없습니다.</label>

                   </ul>
                 </div>
                 <!-- 댓글 -->
-                <div v-if="bbsMng.cmntUseYn == 'Y'" class="comment-box">
+                <div v-if="bbsMng.cmntUseYn == 'Y'" class="comment-box"  ref="three">
                   <div class="layout w_100 mb30">
                       <p class="comment-head">댓글</p>
                       <textarea

     isReply(isReply) {
       this.getCmntList();
     },
+    updateHeight() {
+      this.$nextTick(() => {
+        const first = this.$refs.first;
+        const two = this.$refs.two;
+        const three = this.$refs.three;
+
+        let total = 0;
+        if (two) total += two.offsetHeight;
+        if (three) total += three.offsetHeight;
+
+        if (first) {
+          first.style.minHeight = `calc(100% - ${total}px - 30px)`;
+          first.style.maxHeight = `auto`;
+        }
+      });
+    },
   },
   watch: {
     $route(to, from) {

         this.updateVwCnt(); // 조회수 업데이트 함수
       }
     },
+    bbsMng: {
+      handler() {
+        this.$nextTick(() => {
+          this.updateHeight();
+        });
+      },
+      deep: true,
+    },
   },
   computed: {
     sanitizedContent() {

   components: {
     CommentItem: CommentItem,
   },
-  mounted() {},
+  mounted() {
+    this.updateHeight();
+
+    // 창 크기 변경 시에도 대응하고 싶다면:
+    window.addEventListener('resize', this.updateHeight);
+  },
+  beforeUnmount() {
+    window.removeEventListener('resize', this.updateHeight);
+  },
 };
 </script>
 

0691376

d5b510f

client/views/pages/adm/boardManagement/template/videoTemplate/VideoSelectListOne.vue

--- client/views/pages/adm/boardManagement/template/videoTemplate/VideoSelectListOne.vue

+++ client/views/pages/adm/boardManagement/template/videoTemplate/VideoSelectListOne.vue


                 </div>
                 <span>등록일시 | {{ bbsCn.regDt }}</span>
               </div>
-              <div class="form-content grid-none" :style="bbsMng.cmntUseYn == 'Y' ? 'height: fit-content;' : ''">
-                <div>
+              <div class="form-content grid-none overflow-y" >
+                <div ref="first">
                   <div class="video-zone">
                     <div class="iframe-container">
                       <iframe

                     v-html="sanitizedContent"
                   ></div>
                 </div>
-                <div class="layout border-bottom">
+                <div class="layout  border-top border-bottom pb10" ref="two">
                   <p class="form-title">첨부파일</p>
                   <div v-if="fileList.length == 0">
                     <label>첨부된 파일이 없습니다.</label>

                   </ul>
                 </div>
                 <!-- 댓글 -->
-                <div v-if="bbsMng.cmntUseYn == 'Y'" class="comment-box">
+                <div v-if="bbsMng.cmntUseYn == 'Y'" class="comment-box" ref="three">
                   <div class="layout w_100 mb30">
                       <p class="comment-head">댓글</p>
                       <textarea

     isReply(isReply) {
       this.getCmntList();
     },
+    updateHeight() {
+      this.$nextTick(() => {
+        const first = this.$refs.first;
+        const two = this.$refs.two;
+        const three = this.$refs.three;
+
+        let total = 0;
+        if (two) total += two.offsetHeight;
+        if (three) total += three.offsetHeight;
+
+        if (first) {
+          first.style.minHeight = `calc(100% - ${total}px - 30px)`;
+          first.style.maxHeight = `auto`;
+        }
+      });
+    },
   },
   watch: {
     $route(to, from) {

         this.updateVwCnt(); // 조회수 업데이트 함수
       }
     },
+    bbsMng: {
+      handler() {
+        this.$nextTick(() => {
+          this.updateHeight();
+        });
+      },
+      deep: true,
+    },
   },
   computed: {
     sanitizedContent() {

   components: {
     CommentItem: CommentItem,
   },
-  mounted() {},
+  mounted() {
+    this.updateHeight();
+
+    // 창 크기 변경 시에도 대응하고 싶다면:
+    window.addEventListener('resize', this.updateHeight);
+  },
+  beforeUnmount() {
+    window.removeEventListener('resize', this.updateHeight);
+  },
 };
 </script>
 

0691376

d5b510f

client/views/pages/adm/main/Main.vue

--- client/views/pages/adm/main/Main.vue

+++ client/views/pages/adm/main/Main.vue


         <div class="middle-zone">
           <div class="first-box">
             <div class="box">
-              <p class="box-title">오늘 방문자 수</p>
-              <p class="box-content text-rg">
-                {{ cntnStats.dayCnt.toLocaleString("ko-KR") }}
-              </p>
+              <div class="between">
+                <div>
+                  <p class="box-title">오늘 방문자 수</p>
+                  <span></span>
+                </div>
+                <p class="box-content">
+                  {{ cntnStats.dayCnt.toLocaleString("ko-KR") }}
+                </p>
+              </div>
             </div>
           </div>
           <div class="two-box">
             <div class="box">
-              <p class="box-title">이번달 방문자 수</p>
-              <p class="box-content text-rg">
-                {{ cntnStats.mmCnt.toLocaleString("ko-KR") }}
-              </p>
+              <div class="between">
+                <div>
+                  <p class="box-title">이번달 방문자 수</p>
+                  <span></span>
+                </div>
+                <p class="box-content">
+                  {{ cntnStats.mmCnt.toLocaleString("ko-KR") }}
+                </p>
+              </div>
             </div>
           </div>
           <div class="three-box">
             <div class="box">
-              <p class="box-title">총 방문자 수</p>
-              <p class="box-content text-rg">
-                {{ cntnStats.totalCnt.toLocaleString("ko-KR") }}
-              </p>
+              <div class="between">
+                <div>
+                  <p class="box-title">총 방문자 수</p>
+                  <span></span>
+                </div>
+                <p class="box-content">
+                  {{ cntnStats.totalCnt.toLocaleString("ko-KR") }}
+                </p>
+              </div>
             </div>
           </div>
         </div>

Add a comment

Open 0
Closed 0

List

...	...	@@ -146,7 +146,6 @@
146	146	background-color: var(--tk-white);
147	147	border-radius: 0 0 2rem 2rem;
148	148	height: calc(100% - 45px);
149		- grid-auto-rows: min-content;
150	149	// max-height: fit-content;
151	150
152	151	.layout {
...	...	@@ -249,6 +248,10 @@
249	248	}
250	249	}
251	250
	251	+ }
	252	+
	253	+ &.overflow-y{
	254	+ overflow-y: auto;
252	255	}
253	256
254	257	}
...	...	@@ -368,19 +371,64 @@
368	371	gap: 3rem;
369	372	margin-bottom: 5rem;
370	373
371		- .first-box,
372		- .two-box,
373		- .three-box {
	374	+ >div{
374	375	flex: 0 0 calc(33.333% - 2rem);
375	376	max-width: calc(33.333% - 2rem);
376	377	padding: 2rem;
377		- border-radius: var(--tk-rd-12);
378		- text-align: center;
379		- border: 1px solid var(--tk-gray-10);
380		-
381		-
	378	+ @include radius(20);
	379	+ background-color: var(--tk-gray-5);
	380	+ border: 1px solid var(--tk-gray-30);
	381	+
	382	+ .between{
	383	+ @include flex-layout(flex, center, space-between)
	384	+ }
	385	+
	386	+ span{
	387	+ display: block;
	388	+ width: 50px;
	389	+ height: 50px;
	390	+ background-repeat: no-repeat;
	391	+ background-position: center;
	392	+ background-size: contain;
	393	+ }
	394	+
	395	+ &.first-box{
	396	+ span{
	397	+ background-image: url(#{$url}/admin/ico_today.svg);
	398	+ }
	399	+ }
	400	+ &.two-box{
	401	+ span{
	402	+ background-image: url(#{$url}/admin/ico_month.svg);
	403	+ }
	404	+ }
	405	+ &.three-box {
	406	+ background-color: var(--tk-main-50);
	407	+ .box-title{
	408	+ color: var(--tk-white);
	409	+ }
	410	+ span{
	411	+ background-image: url(#{$url}/admin/ico_total.svg);
	412	+ }
	413	+
	414	+
	415	+ }
	416	+
	417	+
	418	+
	419	+ .box-content{
	420	+ min-width: 120px;
	421	+ text-align: center;
	422	+ font-size: 3rem;
	423	+ font-weight: 700;
	424	+ padding: 1rem 2rem;
	425	+ background-color: var(--tk-white);
	426	+ @include radius(50);
	427	+
	428	+ }
382	429	}
383	430	}
	431	+
384	432
385	433	.chart-wrap {
386	434	padding: 3rem;
...	...	@@ -436,6 +484,8 @@
436	484	&:last-child{
437	485	border-radius: 0 0 1rem 0;
438	486	}
	487	+
	488	+ border-bottom: 0;
439	489
440	490	}
441	491	}

...	...	@@ -215,8 +215,8 @@
215	215	</div>
216	216	<span>등록일시 \| {{ bbsCn.regDt }}</span>
217	217	</div>
218		- <div class="form-content grid-none" :style="bbsMng.cmntUseYn == 'Y' ? 'height: fit-content;' : ''">
219		- <div>
	218	+ <div class="form-content grid-none overflow-y" >
	219	+ <div ref="first">
220	220	<div class="video-zone">
221	221	<div class="iframe-container">
222	222	<iframe
...	...	@@ -236,7 +236,7 @@
236	236	v-html="sanitizedContent"
237	237	></div>
238	238	</div>
239		- <div class="layout border-bottom">
	239	+ <div class="layout border-top border-bottom pb10" ref="two">
240	240	<p class="form-title">첨부파일</p>
241	241	<div v-if="fileList.length == 0">
242	242	<label>첨부된 파일이 없습니다.</label>
...	...	@@ -254,7 +254,7 @@
254	254	</ul>
255	255	</div>
256	256	<!-- 댓글 -->
257		- <div v-if="bbsMng.cmntUseYn == 'Y'" class="comment-box">
	257	+ <div v-if="bbsMng.cmntUseYn == 'Y'" class="comment-box" ref="three">
258	258	<div class="layout w_100 mb30">
259	259	<p class="comment-head">댓글</p>
260	260	<textarea
...	...	@@ -549,6 +549,22 @@
549	549	isReply(isReply) {
550	550	this.getCmntList();
551	551	},
	552	+ updateHeight() {
	553	+ this.$nextTick(() => {
	554	+ const first = this.$refs.first;
	555	+ const two = this.$refs.two;
	556	+ const three = this.$refs.three;
	557	+
	558	+ let total = 0;
	559	+ if (two) total += two.offsetHeight;
	560	+ if (three) total += three.offsetHeight;
	561	+
	562	+ if (first) {
	563	+ first.style.minHeight = `calc(100% - ${total}px - 30px)`;
	564	+ first.style.maxHeight = `auto`;
	565	+ }
	566	+ });
	567	+ },
552	568	},
553	569	watch: {
554	570	$route(to, from) {
...	...	@@ -564,6 +580,14 @@
564	580	this.updateVwCnt(); // 조회수 업데이트 함수
565	581	}
566	582	},
	583	+ bbsMng: {
	584	+ handler() {
	585	+ this.$nextTick(() => {
	586	+ this.updateHeight();
	587	+ });
	588	+ },
	589	+ deep: true,
	590	+ },
567	591	},
568	592	computed: {
569	593	sanitizedContent() {
...	...	@@ -576,7 +600,15 @@
576	600	components: {
577	601	CommentItem: CommentItem,
578	602	},
579		- mounted() {},
	603	+ mounted() {
	604	+ this.updateHeight();
	605	+
	606	+ // 창 크기 변경 시에도 대응하고 싶다면:
	607	+ window.addEventListener('resize', this.updateHeight);
	608	+ },
	609	+ beforeUnmount() {
	610	+ window.removeEventListener('resize', this.updateHeight);
	611	+ },
580	612	};
581	613	</script>
582	614

...	...	@@ -34,7 +34,7 @@
34	34	.child-node {
35	35	padding-left: 1.5rem;
36	36	border-radius: var(--tk-rd-12);
37		- margin-bottom: 1rem;
	37	+ // margin-bottom: 1rem;
38	38
39	39	.node-wrap.selected{
40	40	background-color: var(--tk-primary);

...	...	@@ -156,15 +156,15 @@
156	156	</div>
157	157	<span>등록일시 \| {{ bbsCn.regDt }}</span>
158	158	</div>
159		- <div class="form-content grid-none" :style="bbsMng.cmntUseYn == 'Y' ? 'min-height: fit-content;' : ''">
160		- <div style="min-height: 27rem;">
	159	+ <div class="form-content grid-none overflow-y">
	160	+ <div ref="first">
161	161	<div
162	162	class="editor5"
163	163	style="width: 100%;height: 100%;"
164	164	v-html="sanitizedContent"
165	165	></div>
166	166	</div>
167		- <div class="layout border-bottom pb10">
	167	+ <div class="layout border-top border-bottom pb10" ref="two">
168	168	<p class="form-title">첨부파일</p>
169	169	<div v-if="fileList.length == 0">
170	170	<label>첨부된 파일이 없습니다.</label>
...	...	@@ -182,7 +182,7 @@
182	182	</ul>
183	183	</div>
184	184	<!-- 댓글 -->
185		- <div v-if="bbsMng.cmntUseYn == 'Y'" class="comment-box">
	185	+ <div v-if="bbsMng.cmntUseYn == 'Y'" class="comment-box" ref="three">
186	186	<div class="layout w_100 mb30">
187	187	<p class="comment-head">댓글</p>
188	188	<textarea
...	...	@@ -493,6 +493,22 @@
493	493	isReply(isReply) {
494	494	this.getCmntList();
495	495	},
	496	+ updateHeight() {
	497	+ this.$nextTick(() => {
	498	+ const first = this.$refs.first;
	499	+ const two = this.$refs.two;
	500	+ const three = this.$refs.three;
	501	+
	502	+ let total = 0;
	503	+ if (two) total += two.offsetHeight;
	504	+ if (three) total += three.offsetHeight;
	505	+
	506	+ if (first) {
	507	+ first.style.minHeight = `calc(100% - ${total}px - 30px)`;
	508	+ first.style.maxHeight = `auto`;
	509	+ }
	510	+ });
	511	+ },
496	512	},
497	513	watch: {
498	514	$route(to, from) {
...	...	@@ -501,6 +517,14 @@
501	517	(this.InputCmnt = ""), (this.upCmntId = null), this.fnSelectOne();
502	518	this.getCmntList();
503	519	}
	520	+ },
	521	+ bbsMng: {
	522	+ handler() {
	523	+ this.$nextTick(() => {
	524	+ this.updateHeight();
	525	+ });
	526	+ },
	527	+ deep: true,
504	528	},
505	529	},
506	530	computed: {
...	...	@@ -514,6 +538,14 @@
514	538	components: {
515	539	CommentItem: CommentItem,
516	540	},
517		- mounted() {},
	541	+ mounted() {
	542	+ this.updateHeight();
	543	+
	544	+ // 창 크기 변경 시에도 대응하고 싶다면:
	545	+ window.addEventListener('resize', this.updateHeight);
	546	+ },
	547	+ beforeUnmount() {
	548	+ window.removeEventListener('resize', this.updateHeight);
	549	+ },
518	550	};
519	551	</script>

...	...	@@ -14,8 +14,8 @@
14	14	</div>
15	15	<span>등록일시 \| {{ bbsCn.regDt }}</span>
16	16	</div>
17		- <div class="form-content grid-none " style="max-height: auto;">
18		- <div>
	17	+ <div class="form-content grid-none overflow-y">
	18	+ <div ref="first">
19	19	<div class="gallery-wrap">
20	20	<swiper-container
21	21	class="mySwiper"
...	...	@@ -53,7 +53,7 @@
53	53	>
54	54	</div>
55	55	</div>
56		- <div class="layout border-bottom">
	56	+ <div class="layout border-top border-bottom pb10" ref="two">
57	57	<p class="form-title">첨부파일</p>
58	58	<div v-if="fileList.length == 0">
59	59	<label>첨부된 파일이 없습니다.</label>
...	...	@@ -71,7 +71,7 @@
71	71	</ul>
72	72	</div>
73	73	<!-- 댓글 -->
74		- <div v-if="bbsMng.cmntUseYn == 'Y'" class="comment-box">
	74	+ <div v-if="bbsMng.cmntUseYn == 'Y'" class="comment-box" ref="three">
75	75	<div class="layout w_100 mb30">
76	76	<p class="comment-head">댓글</p>
77	77	<textarea
...	...	@@ -379,6 +379,22 @@
379	379	isReply(isReply) {
380	380	this.getCmntList();
381	381	},
	382	+ updateHeight() {
	383	+ this.$nextTick(() => {
	384	+ const first = this.$refs.first;
	385	+ const two = this.$refs.two;
	386	+ const three = this.$refs.three;
	387	+
	388	+ let total = 0;
	389	+ if (two) total += two.offsetHeight;
	390	+ if (three) total += three.offsetHeight;
	391	+
	392	+ if (first) {
	393	+ first.style.minHeight = `calc(100% - ${total}px - 30px)`;
	394	+ first.style.maxHeight = `auto`;
	395	+ }
	396	+ });
	397	+ },
382	398	},
383	399	watch: {
384	400	$route(to, from) {
...	...	@@ -394,6 +410,14 @@
394	410	this.updateVwCnt(); // 조회수 업데이트 함수
395	411	}
396	412	},
	413	+ bbsMng: {
	414	+ handler() {
	415	+ this.$nextTick(() => {
	416	+ this.updateHeight();
	417	+ });
	418	+ },
	419	+ deep: true,
	420	+ },
397	421	},
398	422	computed: {
399	423	sanitizedContent() {
...	...	@@ -406,7 +430,15 @@
406	430	components: {
407	431	CommentItem: CommentItem,
408	432	},
409		- mounted() {},
	433	+ mounted() {
	434	+ this.updateHeight();
	435	+
	436	+ // 창 크기 변경 시에도 대응하고 싶다면:
	437	+ window.addEventListener('resize', this.updateHeight);
	438	+ },
	439	+ beforeUnmount() {
	440	+ window.removeEventListener('resize', this.updateHeight);
	441	+ },
410	442	};
411	443	</script>
412	444

...	...	@@ -31,26 +31,41 @@
31	31	<div class="middle-zone">
32	32	<div class="first-box">
33	33	<div class="box">
34		- <p class="box-title">오늘 방문자 수</p>
35		- <p class="box-content text-rg">
36		- {{ cntnStats.dayCnt.toLocaleString("ko-KR") }}
37		- </p>
	34	+ <div class="between">
	35	+ <div>
	36	+ <p class="box-title">오늘 방문자 수</p>
	37	+ <span></span>
	38	+ </div>
	39	+ <p class="box-content">
	40	+ {{ cntnStats.dayCnt.toLocaleString("ko-KR") }}
	41	+ </p>
	42	+ </div>
38	43	</div>
39	44	</div>
40	45	<div class="two-box">
41	46	<div class="box">
42		- <p class="box-title">이번달 방문자 수</p>
43		- <p class="box-content text-rg">
44		- {{ cntnStats.mmCnt.toLocaleString("ko-KR") }}
45		- </p>
	47	+ <div class="between">
	48	+ <div>
	49	+ <p class="box-title">이번달 방문자 수</p>
	50	+ <span></span>
	51	+ </div>
	52	+ <p class="box-content">
	53	+ {{ cntnStats.mmCnt.toLocaleString("ko-KR") }}
	54	+ </p>
	55	+ </div>
46	56	</div>
47	57	</div>
48	58	<div class="three-box">
49	59	<div class="box">
50		- <p class="box-title">총 방문자 수</p>
51		- <p class="box-content text-rg">
52		- {{ cntnStats.totalCnt.toLocaleString("ko-KR") }}
53		- </p>
	60	+ <div class="between">
	61	+ <div>
	62	+ <p class="box-title">총 방문자 수</p>
	63	+ <span></span>
	64	+ </div>
	65	+ <p class="box-content">
	66	+ {{ cntnStats.totalCnt.toLocaleString("ko-KR") }}
	67	+ </p>
	68	+ </div>
54	69	</div>
55	70	</div>
56	71	</div>

Delete comment