Commit @898c5d7f3aafd64090638d7148d67b82cc015d40

898c5d7

client/resources/css/common/common.css (added)

+++ client/resources/css/common/common.css

...	...	@@ -0,0 +1,66 @@
	1	+*{
	2	+ padding: 0; margin: 0; color: #333;
	3	+ font-family: "Pretendard-R";
	4	+}
	5	+
	6	+html{font-size: 10px;}
	7	+
	8	+a{text-decoration: none; display: block;}
	9	+li{list-style: none;}
	10	+button{border: 0; background: none; cursor: pointer;}
	11	+input{border: 0;}
	12	+input::placeholder{color: #999999;}
	13	+input[type="checkbox"]{
	14	+ width: 15px;
	15	+ height: 15px;
	16	+}
	17	+input[readonly] {
	18	+ background-color: #f6f6f6 !important;
	19	+ color: #999;
	20	+}
	21	+select{
	22	+ border: 0;
	23	+ font-size: 20px;
	24	+ font-family: "Pretendard-L";
	25	+ color: #555;
	26	+ appearance: none;
	27	+ background-image: url(../../images/icon/select.png);
	28	+ background-repeat: no-repeat;
	29	+ background-position: right 0px center;
	30	+ background-size: 17px;
	31	+ option{
	32	+
	33	+ font-family: "Pretendard-L";
	34	+ }
	35	+}
	36	+
	37	+.w1500{width: 1500px; margin: 0 auto;}
	38	+.wfull{width: -webkit-fill-available;}
	39	+
	40	+.flex-end{
	41	+ display: flex;
	42	+ justify-content: end;
	43	+}
	44	+
	45	+.mt-5{margin-top: 5px;}
	46	+
	47	+.mb-10{margin-bottom: 10px;}
	48	+.mb-25{margin-bottom: 25px;}
	49	+.mb-50{margin-bottom: 50px;}
	50	+.mb-60{margin-bottom: 60px;}
	51	+.mb-110{margin-bottom: 110px;}
	52	+
	53	+
	54	+.btn-group button{
	55	+ padding: 15px 30px;
	56	+ border-radius: 10px;
	57	+ font-size: 20px;
	58	+ &.signout{
	59	+ border: 1px solid #ce3e48;
	60	+ color: #ce3e48;
	61	+ }
	62	+ &.update{
	63	+ border: 1px solid #275cbd;
	64	+ color: #275cbd;
	65	+ }
	66	+}(파일 끝에 줄바꿈 문자 없음)

898c5d7

client/resources/css/common/font.css (added)

+++ client/resources/css/common/font.css

...	...	@@ -0,0 +1,51 @@
	1	+@font-face {
	2	+ font-family: "Pretendard-B";
	3	+ src: url(../../font/Pretendard-Bold.ttf);
	4	+}
	5	+@font-face {
	6	+ font-family: "Pretendard-SB";
	7	+ src: url(../../font/Pretendard-SemiBold.ttf);
	8	+}
	9	+@font-face {
	10	+ font-family: "Pretendard-EB";
	11	+ src: url(../../font/Pretendard-ExtraBold.ttf);
	12	+}
	13	+
	14	+@font-face {
	15	+ font-family: "Pretendard-R";
	16	+ src: url(../../font/Pretendard-Regular.ttf);
	17	+}
	18	+
	19	+@font-face {
	20	+ font-family: "Pretendard-M";
	21	+ src: url(../../font/Pretendard-Medium.ttf);
	22	+}
	23	+
	24	+@font-face {
	25	+ font-family: "Pretendard-L";
	26	+ src: url(../../font/Pretendard-Light.ttf);
	27	+}
	28	+@font-face {
	29	+ font-family: "Pretendard-EL";
	30	+ src: url(../../font/Pretendard-ExtraLight.ttf);
	31	+}
	32	+@font-face {
	33	+ font-family: "HAPPINESSSANSVF";
	34	+ src: url(../../font/HAPPINESSSANSVF.ttf);
	35	+}
	36	+@font-face {
	37	+ font-family: "HAPPINESS-SANS-REGULAR";
	38	+ src: url(../../font/HAPPINESS-SANS-REGULAR.OTF);
	39	+}
	40	+@font-face {
	41	+ font-family: "HAPPINESS-SANS-BOLD";
	42	+ src: url(../../font/HAPPINESS-SANS-BOLD.OTF);
	43	+}
	44	+@font-face {
	45	+ font-family: "HAPPINESS-SANS-title";
	46	+ src: url(../../font/Happiness-Sans-Title.ttf);
	47	+}
	48	+@font-face {
	49	+ font-family: "MIWON";
	50	+ src: url(../../font/MIWON.OTF);
	51	+}

898c5d7

client/resources/css/user/board.css (added)

+++ client/resources/css/user/board.css

@@ -0,0 +1,0 @@

898c5d7

client/resources/css/user/layout.css (added)

+++ client/resources/css/user/layout.css

...	...	@@ -0,0 +1,48 @@
	1	+.container{
	2	+ min-height: 100vh;
	3	+}
	4	+.header-container{
	5	+ width: 1500px;
	6	+ display: flex;
	7	+ align-items: center;
	8	+ justify-content: space-between;
	9	+ padding: 24px 0;
	10	+ position: sticky;
	11	+ .logo img{width: 174px; height: 69px;}
	12	+ .nav-wrap{display: flex;}
	13	+
	14	+ nav{
	15	+ ul{display: flex; gap: 102px;}
	16	+ li{font-size: 22px;}
	17	+ }
	18	+ .auth-area{
	19	+ display: flex; align-items: center; gap: 50px;
	20	+ ul{display: flex; align-items: center; gap: 20px;}
	21	+ li{ display: flex; align-items: center;
	22	+ img{margin-right: 6px;}
	23	+ a{font-size: 16px;}
	24	+ }
	25	+ .line{width: 2px; height: 16px; background-color: #eeeeee;}
	26	+ }
	27	+}
	28	+
	29	+footer{
	30	+ background-color: #333;
	31	+ border-top-left-radius: 50px;
	32	+ border-top-right-radius: 50px;
	33	+ .footer-container{
	34	+ display: flex; align-items: center; gap: 80px; padding: 35px 0;
	35	+ ul{display: flex; align-items: center; gap: 20px; margin-bottom: 5px;}
	36	+ li, p{
	37	+ font-size: 18px;
	38	+ color: rgba(255, 255, 255, 0.5);
	39	+ font-family: "Pretendard-M";
	40	+ }
	41	+
	42	+ .line{width: 2px; height: 13px; background-color: rgba(255, 255, 255, 0.3);}
	43	+
	44	+ }
	45	+
	46	+}
	47	+
	48	+.scroll-up{position: fixed; right: 0; bottom: 0;}(파일 끝에 줄바꿈 문자 없음)

898c5d7

client/resources/css/user/main.css (added)

+++ client/resources/css/user/main.css

...	...	@@ -0,0 +1,203 @@
	1	+.visual{position: relative;}
	2	+.pagination{
	3	+ color: #fff;
	4	+ font-size: 20px;
	5	+ position: absolute;
	6	+
	7	+}
	8	+.search-wrap{
	9	+ position: absolute;
	10	+ bottom: 174px;
	11	+ left: 50%;
	12	+ transform: translateX(-50%);
	13	+ z-index: 10;
	14	+ display: flex;
	15	+ gap: 20px;
	16	+ .search-area{
	17	+ padding-left: 40px;
	18	+ display: flex;
	19	+ align-items: center;
	20	+ gap: 25px;
	21	+ background-color: #fff;
	22	+ width: 687px;
	23	+ height: 76px;
	24	+ border-radius: 38px;
	25	+ position: relative;
	26	+ .search-btn{
	27	+ position: absolute;
	28	+ right: 0;
	29	+ top: 0;
	30	+ }
	31	+ }
	32	+ .line{
	33	+ width: 2px;
	34	+ height: 20px;
	35	+ background-color: #cccccc;
	36	+ }
	37	+ input{font-size: 20px; font-family: "Pretendard-L";}
	38	+ input::placeholder{color: #555;}
	39	+ .total-btn{
	40	+ font-family: "Pretendard-B";
	41	+ color: #fff;
	42	+ font-size: 20px;
	43	+ border-radius: 37.5px;
	44	+ width: 150px;
	45	+ height: 75px;
	46	+ background: linear-gradient(-45deg,#1865c8, #4037aa )
	47	+ }
	48	+
	49	+}
	50	+
	51	+.current-status{
	52	+ background-color: #f6f6f6;
	53	+ padding: 30px 0;
	54	+ .board{
	55	+ position: relative;
	56	+ padding: 49px 0px;
	57	+ background-color: #fff;
	58	+ border-radius: 50px;
	59	+ ul{display: flex; gap: 37px;
	60	+ margin-right: 37px;
	61	+ justify-content: end;}
	62	+ li {
	63	+ .labeling{
	64	+ display: flex;
	65	+ align-self: center;
	66	+ justify-content: center;
	67	+ margin-bottom: 14px;
	68	+ }
	69	+ .count{
	70	+ font-family: "Pretendard-EB";
	71	+ font-size: 32px;
	72	+ background-color: #f6f6f6;
	73	+ border-radius: 15px;
	74	+ width: 150px;
	75	+ height: 70px;
	76	+ line-height: 70px;
	77	+ text-align: center;
	78	+ &.all{
	79	+ background-color: #fbefef;
	80	+ color: #dd1b1b;
	81	+ }
	82	+ }
	83	+
	84	+ }
	85	+ .line{width: 2px; height: 110px; background-color: #eeeeee;}
	86	+ span{font-size: 22px; font-family: "Pretendard-SB";}
	87	+ img{margin-right: 10px; object-fit: contain;}
	88	+ }
	89	+ .current-btn {
	90	+ background-image: url(../../images/direct-btn-bg.png);
	91	+ background-repeat: no-repeat;
	92	+ position: absolute;
	93	+ width: 375px;
	94	+ height: 247px;
	95	+ top: 0;
	96	+ button{
	97	+ position: absolute;
	98	+ top: 40px;
	99	+ right: 60px;
	100	+ display: flex;
	101	+ align-items: center;
	102	+ gap: 40px;
	103	+ span{
	104	+ font-family: "MIWON";
	105	+ font-size: 30px;
	106	+ color: #fff;
	107	+ }
	108	+ }
	109	+
	110	+ }
	111	+}
	112	+
	113	+.tabs{
	114	+ ul{display: flex;
	115	+ justify-content: center;
	116	+ li:first-child::after{
	117	+ content: ''; width: 3px; height: 30px; background-color: rgba(173, 176, 177, 0.2);
	118	+ margin: 0 38px 0 25px;
	119	+
	120	+ }
	121	+ }
	122	+ .tab-title{
	123	+ display: flex;
	124	+ align-items: center;
	125	+ gap: 13px;
	126	+ p{
	127	+ cursor: pointer;
	128	+ font-family: "HAPPINESS-SANS-REGULAR";
	129	+ color: #cccccc;
	130	+ font-size: 26px;
	131	+ b{
	132	+ color: #cccccc;
	133	+ }
	134	+ }
	135	+
	136	+ }
	137	+ .tab-title.active p{
	138	+ color: #000;
	139	+ b{
	140	+ color: #ff4141;
	141	+ }
	142	+ }
	143	+
	144	+}
	145	+
	146	+
	147	+/* swiper */
	148	+
	149	+.swiper {
	150	+ width:1620px;
	151	+ height: 100%;
	152	+ }
	153	+ .swiper-wrapper{
	154	+ width: 1500px !important;
	155	+ margin: 0 auto;
	156	+ }
	157	+ .swiper-slide {
	158	+ text-align: center;
	159	+ font-size: 18px;
	160	+ background: #fff;
	161	+
	162	+ /* Center slide text vertically */
	163	+ display: flex;
	164	+ justify-content: center;
	165	+ align-items: center;
	166	+ }
	167	+
	168	+ .swiper-slide img {
	169	+ display: block;
	170	+ height: 100%;
	171	+ object-fit: cover;
	172	+ }
	173	+.swiper-horizontal > .swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-horizontal{
	174	+ width: 30rem !important;
	175	+ top: 407px !important;
	176	+ left: 50% !important;
	177	+ transform: translateX(-50%);
	178	+}
	179	+.swiper-pagination-progressbar{
	180	+ background-color: #fff !important;
	181	+}
	182	+.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{
	183	+ background-color: #4557a4 !important;
	184	+}
	185	+.swiper-button-prev {
	186	+ background-image: url(../../images/prev-btn.png);
	187	+ width: 94px !important;
	188	+ height: 94px !important;
	189	+}
	190	+
	191	+.swiper-button-prev:after, .swiper-rtl .swiper-button-prev:after{
	192	+ content: '' !important;
	193	+}
	194	+.swiper-button-next {
	195	+ background-image: url(../../images/next-btn.png);
	196	+ width: 94px !important;
	197	+ height: 94px !important;
	198	+ right: 66px;
	199	+}
	200	+
	201	+.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after{
	202	+ content: '' !important;
	203	+}(파일 끝에 줄바꿈 문자 없음)

898c5d7

client/resources/css/user/sub.css (added)

+++ client/resources/css/user/sub.css

...	...	@@ -0,0 +1,96 @@
	1	+.content{
	2	+ width: 1500px;
	3	+ margin: 0 auto;
	4	+ padding-top: 56px;
	5	+ h2{ font-family: "HAPPINESSSANSVF"; font-size: 40px;}
	6	+ h3{ font-family: "Pretendard-B"; font-size: 25px;
	7	+ position: relative;
	8	+ padding-left: 20px;
	9	+ margin-bottom: 20px;
	10	+ &::before{
	11	+ content: '';
	12	+ background: url(../../images/icon/subtitle.png);
	13	+ width: 7px;
	14	+ top: 11px;
	15	+ left: 0;
	16	+ height: 17px;
	17	+ display: block;
	18	+ position: absolute;
	19	+ }
	20	+ }
	21	+}
	22	+
	23	+.sub-title-area{display: flex; justify-content: space-between; align-items: flex-end;}
	24	+.breadcrumb-list{
	25	+ ul{display: flex; align-items: center; gap: 15px;}
	26	+ li{font-size: 16px; font-family: "Pretendard-SB"; color: #000;}
	27	+}
	28	+form{
	29	+ margin: 0 auto;
	30	+ border: 1px solid #dddddd;
	31	+ border-radius: 20px;
	32	+ input{padding: 15px; border: 1px solid #dddddd; border-radius: 5px;
	33	+ font-size: 16px;
	34	+ }
	35	+}
	36	+.login-form{
	37	+ width: 600px;
	38	+ padding: 50px 60px;
	39	+ label{
	40	+ color: #666;
	41	+ font-size: 16px;
	42	+ display: block;
	43	+ margin-bottom: 6px;
	44	+ }
	45	+
	46	+ button{font-size: 22px; font-family: "Pretendard-B"; background: linear-gradient(132deg,#3e355c, #763954 );
	47	+ width: 100%; padding: 19px 0; border-radius: 15px; margin-top: 10px;
	48	+ img{margin: 0 12px 0 0;}
	49	+ span{color: #fff;}
	50	+ }
	51	+ .check-area{
	52	+ input{margin-right: 5px;}
	53	+ }
	54	+}
	55	+
	56	+.info-form, .pwchange-form{
	57	+ dd{display: flex; align-items: center;}
	58	+ padding: 30px 50px;
	59	+ label{
	60	+ position: relative;
	61	+ width: 200px;
	62	+ display: block;
	63	+ color: #000;
	64	+ font-size: 18px;
	65	+ &.require::after {
	66	+ position: absolute;
	67	+ top: 5px;
	68	+ padding-left: 3px;
	69	+ content: "*";
	70	+ color: #df2d2d;
	71	+ }
	72	+ }
	73	+ .hr{background-color: #eeeeee; margin: 10px 0;
	74	+ width: 100%;
	75	+ height: 1px;
	76	+ }
	77	+
	78	+}
	79	+.pwchange-form{
	80	+ input{
	81	+ width:40%;
	82	+ }
	83	+}
	84	+.invalid-feedback {
	85	+ display: flex; align-items: center; gap: 4px;
	86	+ background-color: #fbf1f2;
	87	+ border: 1px solid #ce3e48;
	88	+ border-radius: 20px;
	89	+ padding: 8px 24px;
	90	+ margin-left: 20px;
	91	+ span{font-size: 14px; color: #e22d2d; font-family: "Pretendard-EL"; }
	92	+}
	93	+
	94	+.btn-group{
	95	+ gap: 10px;
	96	+}(파일 끝에 줄바꿈 문자 없음)

898c5d7

client/resources/font/HAPPINESS-SANS-BOLD.OTF (Binary) (added)

+++ client/resources/font/HAPPINESS-SANS-BOLD.OTF

Binary file is not shown

898c5d7

client/resources/font/HAPPINESS-SANS-REGULAR.OTF (Binary) (added)

+++ client/resources/font/HAPPINESS-SANS-REGULAR.OTF

Binary file is not shown

898c5d7

client/resources/font/HAPPINESSSANSVF.TTF (Binary) (added)

+++ client/resources/font/HAPPINESSSANSVF.TTF

Binary file is not shown

898c5d7

client/resources/font/Happiness-Sans-Title.ttf (Binary) (added)

+++ client/resources/font/Happiness-Sans-Title.ttf

Binary file is not shown

898c5d7

client/resources/font/MIWON.OTF (Binary) (added)

+++ client/resources/font/MIWON.OTF

Binary file is not shown

898c5d7

client/resources/font/Pretendard-Black.ttf (Binary) (added)

+++ client/resources/font/Pretendard-Black.ttf

Binary file is not shown

898c5d7

client/resources/font/Pretendard-Bold.ttf (Binary) (added)

+++ client/resources/font/Pretendard-Bold.ttf

Binary file is not shown

898c5d7

client/resources/font/Pretendard-ExtraBold.ttf (Binary) (added)

+++ client/resources/font/Pretendard-ExtraBold.ttf

Binary file is not shown

898c5d7

client/resources/font/Pretendard-ExtraLight.ttf (Binary) (added)

+++ client/resources/font/Pretendard-ExtraLight.ttf

Binary file is not shown

898c5d7

client/resources/font/Pretendard-Light.ttf (Binary) (added)

+++ client/resources/font/Pretendard-Light.ttf

Binary file is not shown

898c5d7

client/resources/font/Pretendard-Medium.ttf (Binary) (added)

+++ client/resources/font/Pretendard-Medium.ttf

Binary file is not shown

898c5d7

client/resources/font/Pretendard-Regular.ttf (Binary) (added)

+++ client/resources/font/Pretendard-Regular.ttf

Binary file is not shown

898c5d7

client/resources/font/Pretendard-SemiBold.ttf (Binary) (added)

+++ client/resources/font/Pretendard-SemiBold.ttf

Binary file is not shown

898c5d7

client/resources/font/Pretendard-Thin.ttf (Binary) (added)

+++ client/resources/font/Pretendard-Thin.ttf

Binary file is not shown

898c5d7

client/resources/images/allmenu.png (Binary) (added)

+++ client/resources/images/allmenu.png

Binary file is not shown

898c5d7

client/resources/images/direct-btn-bg.png (Binary) (added)

+++ client/resources/images/direct-btn-bg.png

Binary file is not shown

898c5d7

client/resources/images/direct-btn.png (Binary) (added)

+++ client/resources/images/direct-btn.png

Binary file is not shown

898c5d7

client/resources/images/icon/error.png (Binary) (added)

+++ client/resources/images/icon/error.png

Binary file is not shown

898c5d7

client/resources/images/icon/home.png (Binary) (added)

+++ client/resources/images/icon/home.png

Binary file is not shown

898c5d7

client/resources/images/icon/icon1.png (Binary) (added)

+++ client/resources/images/icon/icon1.png

Binary file is not shown

898c5d7

client/resources/images/icon/icon2.png (Binary) (added)

+++ client/resources/images/icon/icon2.png

Binary file is not shown

898c5d7

client/resources/images/icon/icon3.png (Binary) (added)

+++ client/resources/images/icon/icon3.png

Binary file is not shown

898c5d7

client/resources/images/icon/icon4.png (Binary) (added)

+++ client/resources/images/icon/icon4.png

Binary file is not shown

898c5d7

client/resources/images/icon/icon5.png (Binary) (added)

+++ client/resources/images/icon/icon5.png

Binary file is not shown

898c5d7

client/resources/images/icon/lock.png (Binary) (added)

+++ client/resources/images/icon/lock.png

Binary file is not shown

898c5d7

client/resources/images/icon/logout-box-line.png (Binary) (added)

+++ client/resources/images/icon/logout-box-line.png

Binary file is not shown

898c5d7

client/resources/images/icon/right.png (Binary) (added)

+++ client/resources/images/icon/right.png

Binary file is not shown

898c5d7

client/resources/images/icon/search.png (Binary) (added)

+++ client/resources/images/icon/search.png

Binary file is not shown

898c5d7

client/resources/images/icon/select.png (Binary) (added)

+++ client/resources/images/icon/select.png

Binary file is not shown

898c5d7

client/resources/images/icon/subtitle.png (Binary) (added)

+++ client/resources/images/icon/subtitle.png

Binary file is not shown

898c5d7

client/resources/images/icon/top.png (Binary) (added)

+++ client/resources/images/icon/top.png

Binary file is not shown

898c5d7

client/resources/images/icon/user-settings-line.png (Binary) (added)

+++ client/resources/images/icon/user-settings-line.png

Binary file is not shown

898c5d7

client/resources/images/logo.png (Binary) (added)

+++ client/resources/images/logo.png

Binary file is not shown

898c5d7

client/resources/images/logo_footer.png (Binary) (added)

+++ client/resources/images/logo_footer.png

Binary file is not shown

898c5d7

client/resources/images/next-btn.png (Binary) (added)

+++ client/resources/images/next-btn.png

Binary file is not shown

898c5d7

client/resources/images/pic-btn-click.png (Binary) (added)

+++ client/resources/images/pic-btn-click.png

Binary file is not shown

898c5d7

client/resources/images/prev-btn.png (Binary) (added)

+++ client/resources/images/prev-btn.png

Binary file is not shown

898c5d7

client/resources/images/video-btn.png (Binary) (added)

+++ client/resources/images/video-btn.png

Binary file is not shown

898c5d7

client/resources/images/visual.png (Binary) (added)

+++ client/resources/images/visual.png

Binary file is not shown

c45650f

898c5d7

client/views/App.vue

--- client/views/App.vue

+++ client/views/App.vue


 <template>
-  <router-view />
+ <div class="wrapper">
+    <Header />
+    <div class="container "><router-view /></div>
+    <Footer />
+    <button class="scroll-up">
+      <img src="../resources/images/icon/top.png" alt="">
+    </button>
+  </div>
 </template>
 <script>
-export default {}
+import Header from './layout/Header.vue';
+import Footer from './layout/Footer.vue';
+
+export default {
+
+  components: {
+    Header: Header,
+    Footer: Footer,
+  }
+}
 </script>
 <style></style>

c45650f

898c5d7

client/views/index.html

--- client/views/index.html

+++ client/views/index.html


   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <meta name="description" content="Node Vue Web">
+  <link rel="stylesheet" href="../client/resources/css/common/common.css">
+  <link rel="stylesheet" href="../client/resources/css/common/font.css">
+  <link rel="stylesheet" href="../client/resources/css/user/board.css">
+  <link rel="stylesheet" href="../client/resources/css/user/layout.css">
+  <link rel="stylesheet" href="../client/resources/css/user/main.css">
+  <link rel="stylesheet" href="../client/resources/css/user/sub.css">
   <title>구미시 디지털 아카이브</title>
 </head>
 <body>

898c5d7

client/views/layout/Footer.vue (added)

+++ client/views/layout/Footer.vue

...	...	@@ -0,0 +1,25 @@
	1	+<template>
	2	+ <footer>
	3	+ <div class="footer-container w1500">
	4	+ <div class="logo-wrap">
	5	+ <a href="#" class="logo"><img src="../../resources/images/logo_footer.png" alt=""></a>
	6	+ </div>
	7	+ <div class="info-area">
	8	+ <ul>
	9	+ <li>(39281) 경상북도 구미시 송정대로 55</li>
	10	+ <li>
	11	+ <div class="line"></div>
	12	+ </li>
	13	+ <li>대표전화 : 054-480-6114
	14	+ </li>
	15	+ <li>
	16	+ <div class="line"></div>
	17	+ </li>
	18	+ <li>팩스 : 054-452-5529
	19	+ </li>
	20	+ </ul>
	21	+ <p>Copyright© 2025. Gumi-Si. ALL RIGHTS RESERVED.</p>
	22	+ </div>
	23	+ </div>
	24	+ </footer>
	25	+</template>(파일 끝에 줄바꿈 문자 없음)

898c5d7

client/views/layout/Header.vue (added)

+++ client/views/layout/Header.vue

...	...	@@ -0,0 +1,43 @@
	1	+<template>
	2	+
	3	+ <header>
	4	+ <div class="header-container w1500">
	5	+ <div class="logo-wrap">
	6	+ <router-link :to="{path : '/'}" class="logo"><img :src="logo" alt=""></router-link>
	7	+ </div>
	8	+ <div class="nav-wrap">
	9	+ <nav>
	10	+ <ul>
	11	+ <li>기록물</li>
	12	+ <li>언론에서 바라본 구미시</li>
	13	+ <li>회원관리</li>
	14	+ <li>카테고리 관리</li>
	15	+ </ul>
	16	+ </nav>
	17	+ </div>
	18	+ <div class="auth-area">
	19	+ <ul>
	20	+ <li><img src="../../resources/images/icon/user-settings-line.png" alt="">
	21	+ <router-link :to="{path : '/MyInfo.page'}">관리자</router-link></li>
	22	+ <li>
	23	+ <div class="line"></div>
	24	+ </li>
	25	+ <li><img src="../../resources/images/icon/logout-box-line.png" alt="">
	26	+ <router-link :to="{path : '/Login.page'}">로그인</router-link>
	27	+ </li>
	28	+ </ul>
	29	+ <a href="#" class="all-menu"><img src="../../resources/images/allmenu.png" alt=""></a>
	30	+ </div>
	31	+ </div>
	32	+ </header>
	33	+</template>
	34	+<script>
	35	+ export default {
	36	+ data() {
	37	+ return {
	38	+ // Define the image sources
	39	+ logo: 'client/resources/images/logo.png',
	40	+ };
	41	+ }
	42	+ };
	43	+</script>(파일 끝에 줄바꿈 문자 없음)

898c5d7

client/views/layout/Menu.vue (added)

+++ client/views/layout/Menu.vue

@@ -0,0 +1,0 @@

c45650f

898c5d7

client/views/pages/AppRouter.js

--- client/views/pages/AppRouter.js

+++ client/views/pages/AppRouter.js


 import { createWebHistory, createRouter } from "vue-router";
 
 // 공통페이지
+import Login from "./login/Login.vue";
+import MyInfo from "./user/MyInfo.vue";
 import Main from "./main/Main.vue";
 import NotFound from "./etc/NotFound.vue";
 
 const routes = [
   { path: "/", name: "MainPage", component: Main },
+  { path: "/Login.page", name: "Login", component: Login },
+  { path: "/MyInfo.page", name: "MyInfo", component: MyInfo },
   { path: "/notFound.page", name: "NotFoundPage", component: NotFound },
 ];
 

898c5d7

client/views/pages/login/Login.vue (added)

+++ client/views/pages/login/Login.vue

...	...	@@ -0,0 +1,47 @@
	1	+<template>
	2	+ <div class="content">
	3	+ <div class="sub-title-area mb-110">
	4	+ <h2>로그인</h2>
	5	+ <div class="breadcrumb-list">
	6	+ <ul>
	7	+ <!-- Bind the image source dynamically for homeicon -->
	8	+ <li><img :src="homeicon" alt="Home Icon"></li>
	9	+ <li><img :src="righticon" alt="Home Icon"></li>
	10	+ <li>로그인</li>
	11	+ </ul>
	12	+ </div>
	13	+ </div>
	14	+ <form action="login" class="login-form">
	15	+ <dl>
	16	+ <dd class="mb-25">
	17	+ <label for="id">아이디</label>
	18	+ <input type="text" id="id" class="wfull" placeholder="아이디를 입력하세요.">
	19	+ </dd>
	20	+
	21	+ <dd class="mb-10">
	22	+ <label for="pw">비밀번호</label>
	23	+ <input type="text" id="pw" class="wfull" placeholder="비밀번호를 입력하세요.">
	24	+ </dd>
	25	+ <dd class="check-area flex-end mb-25">
	26	+ <input type="checkbox" class="margin-top">
	27	+ <label for="save">아이디 저장</label>
	28	+ </dd>
	29	+ </dl>
	30	+ <!-- Bind the image source dynamically for loginicon -->
	31	+ <button><img :src="loginicon" alt="Login Icon"><span>로그인</span></button>
	32	+ </form>
	33	+ </div>
	34	+</template>
	35	+
	36	+<script>
	37	+export default {
	38	+ data() {
	39	+ return {
	40	+ // Define the image sources
	41	+ homeicon: 'client/resources/images/icon/home.png',
	42	+ loginicon: 'client/resources/images/icon/lock.png',
	43	+ righticon: 'client/resources/images/icon/right.png',
	44	+ };
	45	+ }
	46	+};
	47	+</script>

c45650f

898c5d7

client/views/pages/main/Main.vue

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

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


 <template>
-  <h1>메인화면</h1>
-</template>
-<script>
-export default {
+  <div class="visual mb-50">
+    <swiper :loop="true" :spaceBetween="30" :centeredSlides="true" :pagination="{
+      type: 'progressbar',
+    }" :navigation="true" :modules="modules" class="mySwiper ">
+      <swiper-slide v-for="(item, index) in slides" :key="index" >
+        <img :src="item.img" :alt="item.alt" />
+      </swiper-slide>
+      <div class="pagination">
+        <div class="page-count">1/3</div>
 
-}
+      </div>
+    </swiper>
+    <div class="search-wrap">
+
+      <div class="search-area">
+        <select name="" id="">
+          <option value="" selected>전체</option>
+          <option value="">사진</option>
+          <option value="">영상</option>
+          <option value="">미디어 영상</option>
+          <option value="">보도자료</option>
+        </select>
+        <div class="line"></div>
+        <input type="text" placeholder="검색어를 입력하세요">
+        <button class="search-btn"><img :src="search" alt=""></button>
+      </div>
+      <div class="total-search">
+        <button class="total-btn">상세검색</button>
+      </div>
+    </div>
+  </div>
+  <div class="current-status mb-60">
+    <div class="board w1500">
+      <ul>
+        <li>
+          <div class="labeling"><img :src="icon1" alt=""><span>전체</span></div>
+          <div class="count all">520</div>
+        </li>
+        <li class="line"></li>
+        <li>
+          <div class="labeling"><img :src="icon2" alt=""><span>사진</span></div>
+          <div class="count">520</div>
+        </li>
+        <li class="line"></li>
+        <li>
+          <div class="labeling"><img :src="icon3" alt=""><span>영상</span></div>
+          <div class="count">520</div>
+        </li>
+        <li class="line"></li>
+        <li>
+          <div class="labeling"><img :src="icon4" alt=""><span>미디어</span></div>
+          <div class="count">520</div>
+        </li>
+        <li class="line"></li>
+        <li>
+          <div class="labeling"><img :src="icon5" alt=""><span>보도자료</span></div>
+          <div class="count">520</div>
+        </li>
+      </ul>
+      <div class="current-btn"> <button><span>기록물 현황</span><img :src="direct" alt=""></button></div>
+    </div>
+  </div>
+  <div class="new-update w1500">
+    <div class="tabs">
+        <ul>
+          <li v-for="(tab, index) in tabs" :key="index" class="tab-title" :class="{ active: selectedTab === index }"
+            @click="selectTab(index)">
+            <img
+            :src="selectedTab === index ? tab.activeImage : tab.inactiveImage"
+            :alt="tab.title"
+            class="tab-icon"
+          />
+            <p><b>{{ tab.title }}</b>&nbsp;기록물</p>
+          </li>
+        </ul>
+      <div class="tab-content">
+        <div v-if="selectedTab === 0" class="new-pic">
+          <p>{{ tabs[0].content }}</p>
+        </div>
+        <div v-if="selectedTab === 1" class="new-video">
+          <p>{{ tabs[1].content }}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref } from 'vue';
+// Import Swiper Vue components
+import { Swiper, SwiperSlide } from 'swiper/vue';
+
+// Import Swiper styles
+import 'swiper/css';
+
+import 'swiper/css/pagination';
+import 'swiper/css/navigation';
+
+
+// import required modules
+import { Autoplay, Pagination, Navigation } from 'swiper/modules';
+export default {
+  components: {
+    Swiper,
+    SwiperSlide,
+  },
+  setup() {
+    return {
+      modules: [Autoplay, Pagination, Navigation],
+    };
+  },
+  data() {
+    return {
+      selectedTab: 0, // Set initial tab index to 0 (first tab)
+      tabs: [
+        { title: "신규 사진", content: "This is the content for Tab 1", activeImage: "client/resources/images/pic-btn-click.png", // Active tab image
+        inactiveImage: "client/resources/images/pic-btn-click.png"},
+        { title: "신규 영상", content: "This is the content for Tab 2",activeImage: "client/resources/images/video-btn.png", // Active tab image
+        inactiveImage: "client/resources/images/video-btn.png"},
+      ],
+      direct: 'client/resources/images/direct-btn.png',
+      search: 'client/resources/images/icon/search.png',
+      icon1: 'client/resources/images/icon/icon1.png',
+      icon2: 'client/resources/images/icon/icon2.png',
+      icon3: 'client/resources/images/icon/icon3.png',
+      icon4: 'client/resources/images/icon/icon4.png',
+      icon5: 'client/resources/images/icon/icon5.png',
+      slides: [
+        { img: 'client/resources/images/visual.png', alt: 'Slide 1' },
+        { img: 'client/resources/images/visual.png', alt: 'Slide 2' },
+        { img: 'client/resources/images/visual.png', alt: 'Slide 3' },
+        // Add more slides as needed
+      ],
+      autoplay: {
+        delay: 2500, // Delay in milliseconds
+        disableOnInteraction: false, // Autoplay won't stop when interacting
+      },
+      pagination: {
+        clickable: true, // Allow clicking pagination
+      },
+      navigation: true, // Enable navigation buttons (prev/next)
+    };
+  },
+  methods: {
+    selectTab(index) {
+      this.selectedTab = index; // Update the selected tab index
+    },
+  },
+};
 </script>
-<style></style>
+
+<style scoped></style>

898c5d7

client/views/pages/user/MyInfo.vue (added)

+++ client/views/pages/user/MyInfo.vue

...	...	@@ -0,0 +1,69 @@
	1	+<template>
	2	+ <div class="content">
	3	+ <div class="sub-title-area mb-110">
	4	+ <h2>내 정보 수정</h2>
	5	+ <div class="breadcrumb-list">
	6	+ <ul>
	7	+ <li><img :src="homeicon" alt="Home Icon"></li>
	8	+ <li><img :src="righticon" alt="Home Icon"></li>
	9	+ <li>내 정보 수정</li>
	10	+ </ul>
	11	+ </div>
	12	+ </div>
	13	+ <h3>기본정보</h3>
	14	+ <form action="" class="info-form mb-50">
	15	+ <dl>
	16	+ <dd >
	17	+ <label for="id" class="require">아이디</label>
	18	+ <input type="text" id="id" value="admin" readonly>
	19	+ </dd>
	20	+ <div class="hr"></div>
	21	+
	22	+ <dd >
	23	+ <label for="name" class="require">이름</label>
	24	+ <input type="text" id="name" value="관리자">
	25	+
	26	+ </dd>
	27	+
	28	+ </dl>
	29	+ </form>
	30	+ <h3>비밀번호 변경</h3>
	31	+ <form action="" class="pwchange-form mb-50">
	32	+ <dl>
	33	+ <dd >
	34	+ <label for="id">아이디</label>
	35	+ <input type="text" id="id" placeholder="아이디를 입력하세요.">
	36	+ </dd>
	37	+ <div class="hr"></div>
	38	+ <dd >
	39	+ <label for="pw">비밀번호</label>
	40	+ <input type="text" id="pw" placeholder="비밀번호를 입력하세요.">
	41	+ <div class="invalid-feedback"><img :src="erroricon" alt=""><span>영문, 숫자, 특수문자를 최소 한가지씩 조합하고 8자 이상 ~ 20자 이내로 입력해주세요.</span></div>
	42	+ </dd>
	43	+ <div class="hr"></div>
	44	+ <dd >
	45	+ <label for="pw">비밀번호</label>
	46	+ <input type="text" id="pw" placeholder="비밀번호를 입력하세요.">
	47	+
	48	+ </dd>
	49	+ </dl>
	50	+ </form>
	51	+ <div class="btn-group flex-end">
	52	+ <button class="signout">회원탈퇴</button>
	53	+ <button class="update">수정</button>
	54	+ </div>
	55	+ </div>
	56	+</template>
	57	+
	58	+<script>
	59	+export default {
	60	+ data() {
	61	+ return {
	62	+ // Define the image sources
	63	+ homeicon: 'client/resources/images/icon/home.png',
	64	+ erroricon: 'client/resources/images/icon/error.png',
	65	+ righticon: 'client/resources/images/icon/right.png',
	66	+ };
	67	+ }
	68	+};
	69	+</script>

898c5d7

client/views/pages/user/TotalSearch.vue (added)

+++ client/views/pages/user/TotalSearch.vue

...	...	@@ -0,0 +1,47 @@
	1	+<template>
	2	+ <div class="content">
	3	+ <div class="sub-title-area mb-110">
	4	+ <h2>통합검색</h2>
	5	+ <div class="breadcrumb-list">
	6	+ <ul>
	7	+ <!-- Bind the image source dynamically for homeicon -->
	8	+ <li><img :src="homeicon" alt="Home Icon"></li>
	9	+ <li><img :src="righticon" alt=""></li>
	10	+ <li>통합검색</li>
	11	+ </ul>
	12	+ </div>
	13	+ </div>
	14	+ <form action="login" class="login-form">
	15	+ <dl>
	16	+ <dd class="mb-25">
	17	+ <label for="id">아이디</label>
	18	+ <input type="text" id="id" class="wfull" placeholder="아이디를 입력하세요.">
	19	+ </dd>
	20	+
	21	+ <dd class="mb-10">
	22	+ <label for="pw">비밀번호</label>
	23	+ <input type="text" id="pw" class="wfull" placeholder="비밀번호를 입력하세요.">
	24	+ </dd>
	25	+ <dd class="check-area flex-end mb-25">
	26	+ <input type="checkbox" class="margin-top">
	27	+ <label for="save">아이디 저장</label>
	28	+ </dd>
	29	+ </dl>
	30	+ <!-- Bind the image source dynamically for loginicon -->
	31	+ <button><img :src="loginicon" alt="Login Icon"><span>로그인</span></button>
	32	+ </form>
	33	+ </div>
	34	+</template>
	35	+
	36	+<script>
	37	+export default {
	38	+ data() {
	39	+ return {
	40	+ // Define the image sources
	41	+ homeicon: 'client/resources/images/icon/home.png',
	42	+ loginicon: 'client/resources/images/icon/lock.png',
	43	+ righticon: 'client/resources/images/icon/right.png',
	44	+ };
	45	+ }
	46	+};
	47	+</script>

c45650f

898c5d7

package.json

--- package.json

+++ package.json

...	...	@@ -10,6 +10,7 @@
10	10	"file-loader": "^6.2.0",
11	11	"fs": "0.0.1-security",
12	12	"new-line": "^1.1.1",
	13	+ "swiper": "^11.2.5",
13	14	"vue": "3.2.40",
14	15	"vue-loader": "^17.2.2",
15	16	"vue-router": "^4.3.2",
...	...	@@ -32,6 +33,7 @@
32	33	"devDependencies": {
33	34	"html-webpack-plugin": "^5.6.0",
34	35	"rimraf": "^6.0.1",
	36	+ "url-loader": "^4.1.1",
35	37	"vue-style-loader": "^4.1.3"
36	38	}
37		-} (파일 끝에 줄바꿈 문자 없음)
	39	+}

...	...	@@ -1,7 +1,23 @@
1	1	<template>
2		- <router-view />
	2	+ <div class="wrapper">
	3	+ <Header />
	4	+ <div class="container "><router-view /></div>
	5	+ <Footer />
	6	+ <button class="scroll-up">
	7	+ <img src="../resources/images/icon/top.png" alt="">
	8	+ </button>
	9	+ </div>
3	10	</template>
4	11	<script>
5		-export default {}
	12	+import Header from './layout/Header.vue';
	13	+import Footer from './layout/Footer.vue';
	14	+
	15	+export default {
	16	+
	17	+ components: {
	18	+ Header: Header,
	19	+ Footer: Footer,
	20	+ }
	21	+}
6	22	</script>
7	23	<style></style> (파일 끝에 줄바꿈 문자 없음)

...	...	@@ -5,6 +5,12 @@
5	5	<meta http-equiv="X-UA-Compatible" content="IE=edge">
6	6	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7	7	<meta name="description" content="Node Vue Web">
	8	+ <link rel="stylesheet" href="../client/resources/css/common/common.css">
	9	+ <link rel="stylesheet" href="../client/resources/css/common/font.css">
	10	+ <link rel="stylesheet" href="../client/resources/css/user/board.css">
	11	+ <link rel="stylesheet" href="../client/resources/css/user/layout.css">
	12	+ <link rel="stylesheet" href="../client/resources/css/user/main.css">
	13	+ <link rel="stylesheet" href="../client/resources/css/user/sub.css">
8	14	<title>구미시 디지털 아카이브</title>
9	15	</head>
10	16	<body>

...	...	@@ -1,11 +1,15 @@
1	1	import { createWebHistory, createRouter } from "vue-router";
2	2
3	3	// 공통페이지
	4	+import Login from "./login/Login.vue";
	5	+import MyInfo from "./user/MyInfo.vue";
4	6	import Main from "./main/Main.vue";
5	7	import NotFound from "./etc/NotFound.vue";
6	8
7	9	const routes = [
8	10	{ path: "/", name: "MainPage", component: Main },
	11	+ { path: "/Login.page", name: "Login", component: Login },
	12	+ { path: "/MyInfo.page", name: "MyInfo", component: MyInfo },
9	13	{ path: "/notFound.page", name: "NotFoundPage", component: NotFound },
10	14	];
11	15

...	...	@@ -1,9 +1,153 @@
1	1	<template>
2		- <h1>메인화면</h1>
3		-</template>
4		-<script>
5		-export default {
	2	+ <div class="visual mb-50">
	3	+ <swiper :loop="true" :spaceBetween="30" :centeredSlides="true" :pagination="{
	4	+ type: 'progressbar',
	5	+ }" :navigation="true" :modules="modules" class="mySwiper ">
	6	+ <swiper-slide v-for="(item, index) in slides" :key="index" >
	7	+ <img :src="item.img" :alt="item.alt" />
	8	+ </swiper-slide>
	9	+ <div class="pagination">
	10	+ <div class="page-count">1/3</div>
6	11
7		-}
	12	+ </div>
	13	+ </swiper>
	14	+ <div class="search-wrap">
	15	+
	16	+ <div class="search-area">
	17	+ <select name="" id="">
	18	+ <option value="" selected>전체</option>
	19	+ <option value="">사진</option>
	20	+ <option value="">영상</option>
	21	+ <option value="">미디어 영상</option>
	22	+ <option value="">보도자료</option>
	23	+ </select>
	24	+ <div class="line"></div>
	25	+ <input type="text" placeholder="검색어를 입력하세요">
	26	+ <button class="search-btn"><img :src="search" alt=""></button>
	27	+ </div>
	28	+ <div class="total-search">
	29	+ <button class="total-btn">상세검색</button>
	30	+ </div>
	31	+ </div>
	32	+ </div>
	33	+ <div class="current-status mb-60">
	34	+ <div class="board w1500">
	35	+ <ul>
	36	+ <li>
	37	+ <div class="labeling"><img :src="icon1" alt=""><span>전체</span></div>
	38	+ <div class="count all">520</div>
	39	+ </li>
	40	+ <li class="line"></li>
	41	+ <li>
	42	+ <div class="labeling"><img :src="icon2" alt=""><span>사진</span></div>
	43	+ <div class="count">520</div>
	44	+ </li>
	45	+ <li class="line"></li>
	46	+ <li>
	47	+ <div class="labeling"><img :src="icon3" alt=""><span>영상</span></div>
	48	+ <div class="count">520</div>
	49	+ </li>
	50	+ <li class="line"></li>
	51	+ <li>
	52	+ <div class="labeling"><img :src="icon4" alt=""><span>미디어</span></div>
	53	+ <div class="count">520</div>
	54	+ </li>
	55	+ <li class="line"></li>
	56	+ <li>
	57	+ <div class="labeling"><img :src="icon5" alt=""><span>보도자료</span></div>
	58	+ <div class="count">520</div>
	59	+ </li>
	60	+ </ul>
	61	+ <div class="current-btn"> <button><span>기록물 현황</span><img :src="direct" alt=""></button></div>
	62	+ </div>
	63	+ </div>
	64	+ <div class="new-update w1500">
	65	+ <div class="tabs">
	66	+ <ul>
	67	+ <li v-for="(tab, index) in tabs" :key="index" class="tab-title" :class="{ active: selectedTab === index }"
	68	+ @click="selectTab(index)">
	69	+ <img
	70	+ :src="selectedTab === index ? tab.activeImage : tab.inactiveImage"
	71	+ :alt="tab.title"
	72	+ class="tab-icon"
	73	+ />
	74	+ <p><b>{{ tab.title }}</b> 기록물</p>
	75	+ </li>
	76	+ </ul>
	77	+ <div class="tab-content">
	78	+ <div v-if="selectedTab === 0" class="new-pic">
	79	+ <p>{{ tabs[0].content }}</p>
	80	+ </div>
	81	+ <div v-if="selectedTab === 1" class="new-video">
	82	+ <p>{{ tabs[1].content }}</p>
	83	+ </div>
	84	+ </div>
	85	+ </div>
	86	+ </div>
	87	+</template>
	88	+
	89	+<script>
	90	+import { ref } from 'vue';
	91	+// Import Swiper Vue components
	92	+import { Swiper, SwiperSlide } from 'swiper/vue';
	93	+
	94	+// Import Swiper styles
	95	+import 'swiper/css';
	96	+
	97	+import 'swiper/css/pagination';
	98	+import 'swiper/css/navigation';
	99	+
	100	+
	101	+// import required modules
	102	+import { Autoplay, Pagination, Navigation } from 'swiper/modules';
	103	+export default {
	104	+ components: {
	105	+ Swiper,
	106	+ SwiperSlide,
	107	+ },
	108	+ setup() {
	109	+ return {
	110	+ modules: [Autoplay, Pagination, Navigation],
	111	+ };
	112	+ },
	113	+ data() {
	114	+ return {
	115	+ selectedTab: 0, // Set initial tab index to 0 (first tab)
	116	+ tabs: [
	117	+ { title: "신규 사진", content: "This is the content for Tab 1", activeImage: "client/resources/images/pic-btn-click.png", // Active tab image
	118	+ inactiveImage: "client/resources/images/pic-btn-click.png"},
	119	+ { title: "신규 영상", content: "This is the content for Tab 2",activeImage: "client/resources/images/video-btn.png", // Active tab image
	120	+ inactiveImage: "client/resources/images/video-btn.png"},
	121	+ ],
	122	+ direct: 'client/resources/images/direct-btn.png',
	123	+ search: 'client/resources/images/icon/search.png',
	124	+ icon1: 'client/resources/images/icon/icon1.png',
	125	+ icon2: 'client/resources/images/icon/icon2.png',
	126	+ icon3: 'client/resources/images/icon/icon3.png',
	127	+ icon4: 'client/resources/images/icon/icon4.png',
	128	+ icon5: 'client/resources/images/icon/icon5.png',
	129	+ slides: [
	130	+ { img: 'client/resources/images/visual.png', alt: 'Slide 1' },
	131	+ { img: 'client/resources/images/visual.png', alt: 'Slide 2' },
	132	+ { img: 'client/resources/images/visual.png', alt: 'Slide 3' },
	133	+ // Add more slides as needed
	134	+ ],
	135	+ autoplay: {
	136	+ delay: 2500, // Delay in milliseconds
	137	+ disableOnInteraction: false, // Autoplay won't stop when interacting
	138	+ },
	139	+ pagination: {
	140	+ clickable: true, // Allow clicking pagination
	141	+ },
	142	+ navigation: true, // Enable navigation buttons (prev/next)
	143	+ };
	144	+ },
	145	+ methods: {
	146	+ selectTab(index) {
	147	+ this.selectedTab = index; // Update the selected tab index
	148	+ },
	149	+ },
	150	+};
8	151	</script>
9		-<style></style> (파일 끝에 줄바꿈 문자 없음)
	152	+
	153	+<style scoped></style>

Delete comment