최정임
03-24
250324 최정임 병합
@d51bd36e568147a92bc080efd16c4c7c4903406e
--- client/resources/css/common/common.css
+++ client/resources/css/common/common.css
... | ... | @@ -19,21 +19,10 @@ |
| 19 | 19 |
background-color: #f6f6f6 !important; |
| 20 | 20 |
color: #999; |
| 21 | 21 |
} |
| 22 |
-select{
|
|
| 23 |
- border: 0; |
|
| 24 |
- font-size: 20px; |
|
| 25 |
- font-family: "Pretendard-L"; |
|
| 26 |
- color: #555; |
|
| 27 |
- appearance: none; |
|
| 28 |
- background-image: url(../../images/icon/select.png); |
|
| 29 |
- background-repeat: no-repeat; |
|
| 30 |
- background-position: right 0px center; |
|
| 31 |
- background-size: 17px; |
|
| 32 |
- option{
|
|
| 33 |
- |
|
| 34 |
- font-family: "Pretendard-L"; |
|
| 35 |
- } |
|
| 36 |
-} |
|
| 22 |
+ |
|
| 23 |
+ |
|
| 24 |
+ |
|
| 25 |
+ |
|
| 37 | 26 |
|
| 38 | 27 |
.w1500{width: 1500px; margin: 0 auto;}
|
| 39 | 28 |
.wfull{width: -webkit-fill-available;}
|
... | ... | @@ -54,6 +43,8 @@ |
| 54 | 43 |
} |
| 55 | 44 |
|
| 56 | 45 |
.mt-5{margin-top: 5px;}
|
| 46 |
+.mt-20{margin-top: 20px;}
|
|
| 47 |
+.mt-40{margin-top: 40px;}
|
|
| 57 | 48 |
|
| 58 | 49 |
.mb-5{margin-bottom: 5px;}
|
| 59 | 50 |
.mb-10{margin-bottom: 10px;}
|
--- client/resources/css/user/main.css
+++ client/resources/css/user/main.css
... | ... | @@ -13,6 +13,21 @@ |
| 13 | 13 |
font-size: 20px; color: #fff; |
| 14 | 14 |
} |
| 15 | 15 |
} |
| 16 |
+ select{
|
|
| 17 |
+ border: 0; |
|
| 18 |
+ font-size: 20px; |
|
| 19 |
+ font-family: "Pretendard-L"; |
|
| 20 |
+ color: #555; |
|
| 21 |
+ appearance: none; |
|
| 22 |
+ background-image: url(../../images/icon/select.png); |
|
| 23 |
+ background-repeat: no-repeat; |
|
| 24 |
+ background-position: right 0px center; |
|
| 25 |
+ background-size: 17px; |
|
| 26 |
+ option{
|
|
| 27 |
+ |
|
| 28 |
+ font-family: "Pretendard-L"; |
|
| 29 |
+ } |
|
| 30 |
+ } |
|
| 16 | 31 |
} |
| 17 | 32 |
|
| 18 | 33 |
.search-wrap{
|
... | ... | @@ -51,11 +66,11 @@ |
| 51 | 66 |
width: 150px; |
| 52 | 67 |
height: 75px; |
| 53 | 68 |
background: linear-gradient(-45deg,#1865c8, #4037aa ); |
| 54 |
- a{
|
|
| 69 |
+ |
|
| 55 | 70 |
font-family: "Pretendard-B"; |
| 56 | 71 |
color: #fff; |
| 57 | 72 |
font-size: 20px; |
| 58 |
- } |
|
| 73 |
+ |
|
| 59 | 74 |
} |
| 60 | 75 |
|
| 61 | 76 |
} |
... | ... | @@ -122,6 +137,69 @@ |
| 122 | 137 |
} |
| 123 | 138 |
} |
| 124 | 139 |
.new-update{
|
| 140 |
+ .tabs{
|
|
| 141 |
+ ul{display: flex;
|
|
| 142 |
+ justify-content: center; |
|
| 143 |
+ li:first-child::after{
|
|
| 144 |
+ content: ''; width: 3px; height: 30px; background-color: rgba(173, 176, 177, 0.2); |
|
| 145 |
+ margin: 0 38px 0 25px; |
|
| 146 |
+ |
|
| 147 |
+ } |
|
| 148 |
+ } |
|
| 149 |
+ .tab-title{
|
|
| 150 |
+ display: flex; |
|
| 151 |
+ align-items: center; |
|
| 152 |
+ gap: 13px; |
|
| 153 |
+ p{
|
|
| 154 |
+ cursor: pointer; |
|
| 155 |
+ font-family: "HAPPINESS-SANS-REGULAR"; |
|
| 156 |
+ color: #cccccc; |
|
| 157 |
+ font-size: 26px; |
|
| 158 |
+ b{
|
|
| 159 |
+ color: #cccccc; |
|
| 160 |
+ } |
|
| 161 |
+ } |
|
| 162 |
+ |
|
| 163 |
+ } |
|
| 164 |
+ .tab-title.active p{
|
|
| 165 |
+ color: #000; |
|
| 166 |
+ b{
|
|
| 167 |
+ color: #ff4141; |
|
| 168 |
+ } |
|
| 169 |
+ |
|
| 170 |
+ } |
|
| 171 |
+ .tab-content{
|
|
| 172 |
+ .content-wrap{
|
|
| 173 |
+ margin-top: -23px; |
|
| 174 |
+ } |
|
| 175 |
+ .box-wrap{
|
|
| 176 |
+ width: 454px; |
|
| 177 |
+ height: 370px; |
|
| 178 |
+ .box {
|
|
| 179 |
+ background-image: linear-gradient(#fff, #fff), |
|
| 180 |
+ linear-gradient(-45deg, #fff, #fff); |
|
| 181 |
+ background-origin: border-box; |
|
| 182 |
+ background-clip: content-box, border-box; |
|
| 183 |
+ border: 3px solid transparent; |
|
| 184 |
+ border-radius: 32px; |
|
| 185 |
+ } |
|
| 186 |
+ |
|
| 187 |
+ .box:hover {
|
|
| 188 |
+ background-image: linear-gradient(#fff, #fff), |
|
| 189 |
+ linear-gradient(-45deg, #ca3e49, #3d355d); |
|
| 190 |
+ } |
|
| 191 |
+ .tab-image{
|
|
| 192 |
+ width: 100%; |
|
| 193 |
+ height: 297px; |
|
| 194 |
+ object-fit: cover; |
|
| 195 |
+ border-radius: 30px; |
|
| 196 |
+ } |
|
| 197 |
+ |
|
| 198 |
+ } |
|
| 199 |
+ |
|
| 200 |
+ } |
|
| 201 |
+ |
|
| 202 |
+ } |
|
| 125 | 203 |
.title{
|
| 126 | 204 |
display: flex; |
| 127 | 205 |
align-items: flex-end; |
... | ... | @@ -204,68 +282,7 @@ |
| 204 | 282 |
} |
| 205 | 283 |
} |
| 206 | 284 |
} |
| 207 |
-.tabs{
|
|
| 208 |
- ul{display: flex;
|
|
| 209 |
- justify-content: center; |
|
| 210 |
- li:first-child::after{
|
|
| 211 |
- content: ''; width: 3px; height: 30px; background-color: rgba(173, 176, 177, 0.2); |
|
| 212 |
- margin: 0 38px 0 25px; |
|
| 213 |
- |
|
| 214 |
- } |
|
| 215 |
- } |
|
| 216 |
- .tab-title{
|
|
| 217 |
- display: flex; |
|
| 218 |
- align-items: center; |
|
| 219 |
- gap: 13px; |
|
| 220 |
- p{
|
|
| 221 |
- cursor: pointer; |
|
| 222 |
- font-family: "HAPPINESS-SANS-REGULAR"; |
|
| 223 |
- color: #cccccc; |
|
| 224 |
- font-size: 26px; |
|
| 225 |
- b{
|
|
| 226 |
- color: #cccccc; |
|
| 227 |
- } |
|
| 228 |
- } |
|
| 229 |
- |
|
| 230 |
- } |
|
| 231 |
- .tab-title.active p{
|
|
| 232 |
- b{
|
|
| 233 |
- color: #ff4141; |
|
| 234 |
- } |
|
| 235 |
- |
|
| 236 |
- } |
|
| 237 |
- .tab-content{
|
|
| 238 |
- .content-wrap{
|
|
| 239 |
- margin-top: -23px; |
|
| 240 |
- } |
|
| 241 |
- .box-wrap{
|
|
| 242 |
- width: 454px; |
|
| 243 |
- height: 370px; |
|
| 244 |
- .box {
|
|
| 245 |
- background-image: linear-gradient(#fff, #fff), |
|
| 246 |
- linear-gradient(-45deg, #fff, #fff); |
|
| 247 |
- background-origin: border-box; |
|
| 248 |
- background-clip: content-box, border-box; |
|
| 249 |
- border: 3px solid transparent; |
|
| 250 |
- border-radius: 32px; |
|
| 251 |
- } |
|
| 252 |
- |
|
| 253 |
- .box:hover {
|
|
| 254 |
- background-image: linear-gradient(#fff, #fff), |
|
| 255 |
- linear-gradient(-45deg, #ca3e49, #3d355d); |
|
| 256 |
- } |
|
| 257 |
- .tab-image{
|
|
| 258 |
- width: 100%; |
|
| 259 |
- height: 297px; |
|
| 260 |
- object-fit: cover; |
|
| 261 |
- border-radius: 30px; |
|
| 262 |
- } |
|
| 263 |
- |
|
| 264 |
- } |
|
| 265 |
- |
|
| 266 |
- } |
|
| 267 | 285 |
|
| 268 |
-} |
|
| 269 | 286 |
|
| 270 | 287 |
|
| 271 | 288 |
|
... | ... | @@ -310,8 +327,10 @@ |
| 310 | 327 |
} |
| 311 | 328 |
.swiper-button-prev {
|
| 312 | 329 |
background-image: url(../../images/prev-btn.png); |
| 313 |
- width: 94px !important; |
|
| 314 |
- height: 94px !important; |
|
| 330 |
+ width: 70px !important; |
|
| 331 |
+ height: 70px !important; |
|
| 332 |
+ border-radius: 50%; |
|
| 333 |
+ box-shadow: 1px 2px 8px 1px rgba(0, 0, 0, 0.08); |
|
| 315 | 334 |
} |
| 316 | 335 |
|
| 317 | 336 |
.swiper-button-prev:after, .swiper-rtl .swiper-button-prev:after{
|
... | ... | @@ -319,9 +338,11 @@ |
| 319 | 338 |
} |
| 320 | 339 |
.swiper-button-next {
|
| 321 | 340 |
background-image: url(../../images/next-btn.png); |
| 322 |
- width: 94px !important; |
|
| 323 |
- height: 94px !important; |
|
| 341 |
+ width: 70px !important; |
|
| 342 |
+ height: 70px !important; |
|
| 324 | 343 |
right: 66px; |
| 344 |
+ border-radius: 50%; |
|
| 345 |
+ box-shadow: 1px 2px 8px 1px rgba(0, 0, 0, 0.08); |
|
| 325 | 346 |
} |
| 326 | 347 |
|
| 327 | 348 |
.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after{
|
--- client/resources/css/user/sub.css
+++ client/resources/css/user/sub.css
... | ... | @@ -4,7 +4,7 @@ |
| 4 | 4 |
padding-top: 56px; |
| 5 | 5 |
|
| 6 | 6 |
h2 {
|
| 7 |
- font-family: "HAPPINESSSANSVF"; |
|
| 7 |
+ font-family: "HAPPINESS-SANS-title"; |
|
| 8 | 8 |
font-size: 40px; |
| 9 | 9 |
} |
| 10 | 10 |
|
... | ... | @@ -39,26 +39,43 @@ |
| 39 | 39 |
font-size: 18px; |
| 40 | 40 |
} |
| 41 | 41 |
|
| 42 |
- .pagination {
|
|
| 43 |
- margin-top: 20px; |
|
| 44 |
- display: flex; |
|
| 45 |
- align-items: center; |
|
| 42 |
+ |
|
| 43 |
+ /* pagination */ |
|
| 44 |
+ .pagination{
|
|
| 45 |
+ button{
|
|
| 46 |
+ width: 40px; |
|
| 47 |
+ height: 40px; |
|
| 48 |
+ margin: 0 4px; |
|
| 49 |
+ border: 1px solid #f0f1f4; |
|
| 50 |
+ background-color: #fff; |
|
| 51 |
+ border-radius: 50px; |
|
| 52 |
+ } |
|
| 53 |
+ button.page-number{
|
|
| 54 |
+ font-size: 20px; |
|
| 55 |
+ color: #555555; |
|
| 56 |
+ width: 40px; |
|
| 57 |
+ height: 40px; |
|
| 58 |
+ background-color: #f0f1f4; |
|
| 59 |
+ border-radius: 50px; |
|
| 60 |
+ } |
|
| 61 |
+ button.page-number.clicked{
|
|
| 62 |
+ background-color: #ce3e48; |
|
| 63 |
+ color: #fff; |
|
| 64 |
+ } |
|
| 65 |
+ .anticon{
|
|
| 66 |
+ svg{
|
|
| 67 |
+ font-size: 17px; |
|
| 68 |
+ path{
|
|
| 69 |
+ color: #636364; |
|
| 70 |
+ } |
|
| 71 |
+ } |
|
| 72 |
+ |
|
| 73 |
+ |
|
| 74 |
+ } |
|
| 46 | 75 |
} |
| 76 |
+ |
|
| 77 |
+ |
|
| 47 | 78 |
|
| 48 |
- .pagination select {
|
|
| 49 |
- margin-right: 10px; |
|
| 50 |
- } |
|
| 51 |
- |
|
| 52 |
- .pagination button {
|
|
| 53 |
- padding: 5px 10px; |
|
| 54 |
- margin: 0 5px; |
|
| 55 |
- cursor: pointer; |
|
| 56 |
- } |
|
| 57 |
- |
|
| 58 |
- .pagination button:disabled {
|
|
| 59 |
- background-color: #ccc; |
|
| 60 |
- cursor: not-allowed; |
|
| 61 |
- } |
|
| 62 | 79 |
} |
| 63 | 80 |
|
| 64 | 81 |
.sub-title-area {
|
... | ... | @@ -97,17 +114,23 @@ |
| 97 | 114 |
|
| 98 | 115 |
.btn-group {
|
| 99 | 116 |
gap: 10px; |
| 100 |
- button.cancel{
|
|
| 117 |
+ |
|
| 118 |
+ button.cancel {
|
|
| 101 | 119 |
width: 130px; |
| 102 | 120 |
background-color: #f9f9f9; |
| 103 | 121 |
border: 1px solid #636364; |
| 104 | 122 |
} |
| 105 |
- button.register{
|
|
| 123 |
+ |
|
| 124 |
+ button.register {
|
|
| 106 | 125 |
width: 130px; |
| 107 | 126 |
background-color: #ce3e48; |
| 108 | 127 |
color: #fff; |
| 128 |
+ a{
|
|
| 129 |
+ color: #fff; |
|
| 130 |
+ } |
|
| 109 | 131 |
} |
| 110 | 132 |
} |
| 133 |
+ |
|
| 111 | 134 |
form {
|
| 112 | 135 |
margin: 0 auto; |
| 113 | 136 |
border: 1px solid #dddddd; |
... | ... | @@ -124,6 +147,8 @@ |
| 124 | 147 |
dd {
|
| 125 | 148 |
display: flex; |
| 126 | 149 |
align-items: center; |
| 150 |
+ p{font-size: 20px; font-family: "Pretendard-L"; line-height: 30px;}
|
|
| 151 |
+ span{font-size: 20px; font-family: "Pretendard-SB";}
|
|
| 127 | 152 |
} |
| 128 | 153 |
|
| 129 | 154 |
label {
|
... | ... | @@ -155,6 +180,12 @@ |
| 155 | 180 |
display: flex; |
| 156 | 181 |
gap: 5px; |
| 157 | 182 |
|
| 183 |
+ .category-item {
|
|
| 184 |
+ display: flex; |
|
| 185 |
+ justify-content: space-between; |
|
| 186 |
+ margin-bottom: 10px; |
|
| 187 |
+ } |
|
| 188 |
+ |
|
| 158 | 189 |
li {
|
| 159 | 190 |
width: fit-content; |
| 160 | 191 |
border-radius: 3px; |
... | ... | @@ -162,12 +193,12 @@ |
| 162 | 193 |
font-family: "Pretendard-SB" !important; |
| 163 | 194 |
font-size: 14px; |
| 164 | 195 |
|
| 165 |
- &.category1 {
|
|
| 196 |
+ &:nth-child(odd) {
|
|
| 166 | 197 |
color: #a5067b; |
| 167 | 198 |
border: 1px solid #a5067b; |
| 168 | 199 |
} |
| 169 |
- |
|
| 170 |
- &.category2 {
|
|
| 200 |
+ |
|
| 201 |
+ &:nth-child(even) {
|
|
| 171 | 202 |
color: #007ac3; |
| 172 | 203 |
border: 1px solid #007ac3; |
| 173 | 204 |
} |
... | ... | @@ -246,7 +277,12 @@ |
| 246 | 277 |
} |
| 247 | 278 |
} |
| 248 | 279 |
|
| 249 |
- |
|
| 280 |
+.info-form{
|
|
| 281 |
+ dd{
|
|
| 282 |
+ img{margin-right: 17px;}
|
|
| 283 |
+ span{width: 118px;}
|
|
| 284 |
+ } |
|
| 285 |
+} |
|
| 250 | 286 |
|
| 251 | 287 |
/* 통합검색 */ |
| 252 | 288 |
.search-form {
|
... | ... | @@ -262,6 +298,10 @@ |
| 262 | 298 |
font-family: "Pretendard-SB"; |
| 263 | 299 |
width: 180px; |
| 264 | 300 |
flex-shrink: 0; |
| 301 |
+ } |
|
| 302 |
+ input[type="text"] {
|
|
| 303 |
+ background-color: #f6f6f6; |
|
| 304 |
+ border: 0; |
|
| 265 | 305 |
} |
| 266 | 306 |
} |
| 267 | 307 |
|
... | ... | @@ -322,118 +362,24 @@ |
| 322 | 362 |
} |
| 323 | 363 |
|
| 324 | 364 |
|
| 325 |
- input[type="text"] {
|
|
| 326 |
- background-color: #f6f6f6; |
|
| 327 |
- border: 0; |
|
| 328 |
- } |
|
| 329 |
- |
|
| 330 |
- input[type="date"] {
|
|
| 331 |
- position: relative; |
|
| 332 |
- width: 158px; |
|
| 333 |
- border-radius: 8px; |
|
| 334 |
- background: url(../../images/icon/calendar.png) no-repeat right 10px center / auto; |
|
| 335 |
- } |
|
| 336 |
- |
|
| 337 |
- input[type="date"]::placeholder {
|
|
| 338 |
- color: #fff; |
|
| 339 |
- ; |
|
| 340 |
- } |
|
| 341 |
- |
|
| 342 |
- input[type='date']::-webkit-calendar-picker-indicator {
|
|
| 343 |
- position: absolute; |
|
| 344 |
- left: 0; |
|
| 345 |
- top: 0; |
|
| 346 |
- width: 100%; |
|
| 347 |
- height: 100%; |
|
| 348 |
- background: transparent; |
|
| 349 |
- color: transparent; |
|
| 350 |
- cursor: pointer; |
|
| 351 |
- } |
|
| 352 |
- |
|
| 353 |
- input[type="checkbox"] {
|
|
| 354 |
- position: relative; |
|
| 355 |
- width: 22px; |
|
| 356 |
- height: 22px; |
|
| 357 |
- padding: 0; |
|
| 358 |
- accent-color: #544483; |
|
| 359 |
- /* This will change the checkbox color when checked */ |
|
| 360 |
- border: 1px solid #cccccc; |
|
| 361 |
- /* This controls the border color */ |
|
| 362 |
- border-radius: 4px; |
|
| 363 |
- /* Optional: rounded corners */ |
|
| 364 |
- background-color: #fff; |
|
| 365 |
- /* Default background */ |
|
| 366 |
- appearance: none; |
|
| 367 |
- /* Remove the default checkbox appearance */ |
|
| 368 |
- cursor: pointer; |
|
| 369 |
- } |
|
| 370 |
- |
|
| 371 |
- /* Checked state of the checkbox */ |
|
| 372 |
- input[type="checkbox"]:checked {
|
|
| 373 |
- background-color: #544483; |
|
| 374 |
- /* Custom background when checked */ |
|
| 375 |
- border-color: #544483; |
|
| 376 |
- /* Custom border color when checked */ |
|
| 377 |
- } |
|
| 378 |
- |
|
| 379 |
- input[type="checkbox"]:checked::before {
|
|
| 380 |
- content: ''; |
|
| 381 |
- background-image: url(../../images/check.png); |
|
| 382 |
- background-repeat: no-repeat; |
|
| 383 |
- position: absolute; |
|
| 384 |
- left: 2px; |
|
| 385 |
- top: 5px; |
|
| 386 |
- width: 15px; |
|
| 387 |
- height: 11px; |
|
| 388 |
- } |
|
| 389 |
- |
|
| 390 |
- input[type="checkbox"]:checked+label {
|
|
| 391 |
- color: rgba(0, 0, 0, 0.12); |
|
| 392 |
- /* Change the label color when checkbox is checked */ |
|
| 393 |
- } |
|
| 394 |
- |
|
| 395 |
- label {
|
|
| 396 |
- font-size: 17px; |
|
| 397 |
- font-family: "Pretendard-L"; |
|
| 398 |
- } |
|
| 399 |
- |
|
| 400 |
- /* 기본스타일 제거, 버튼 모양 재설정 */ |
|
| 401 |
- input[type='radio'] {
|
|
| 402 |
- flex-shrink: 0; |
|
| 403 |
- -webkit-appearance: none; |
|
| 404 |
- /* 웹킷 브라우저에서 기본 스타일 제거*/ |
|
| 405 |
- -moz-appearance: none; |
|
| 406 |
- /* 모질라 브라우저에서 기본 스타일 제거*/ |
|
| 407 |
- appearance: none; |
|
| 408 |
- /*기본 브라우저에서 기본 스타일 제거*/ |
|
| 409 |
- width: 22px; |
|
| 410 |
- height: 22px; |
|
| 411 |
- padding: 0; |
|
| 412 |
- border: 1px solid #ccc; |
|
| 413 |
- /*체크되지 않았을 때의 테두리 색상*/ |
|
| 414 |
- border-radius: 50%; |
|
| 415 |
- outline: none; |
|
| 416 |
- /*focus 시에 나타나는 기본 스타일 제거*/ |
|
| 417 |
- cursor: pointer; |
|
| 418 |
- } |
|
| 419 |
- |
|
| 420 |
- /* 체크 시 버튼 모양 스타일*/ |
|
| 421 |
- input[type='radio']:checked {
|
|
| 422 |
- background-color: #544483; |
|
| 423 |
- /*체크 시 내부 원 색상*/ |
|
| 424 |
- border: 4px solid #fff; |
|
| 425 |
- /*라인이 아닌, 라인과 원 사이 색상*/ |
|
| 426 |
- box-shadow: 0 0 0 1px #ccc; |
|
| 427 |
- /*라인*/ |
|
| 428 |
- } |
|
| 429 |
- |
|
| 365 |
+ |
|
| 430 | 366 |
|
| 431 | 367 |
} |
| 432 | 368 |
|
| 433 | 369 |
.search-result {
|
| 434 |
- select {
|
|
| 435 |
- width: 72px; |
|
| 370 |
+ .select-box{
|
|
| 371 |
+ width: 106px; |
|
| 372 |
+ border: 1px solid #cccccc; |
|
| 373 |
+ border-radius: 5px; |
|
| 374 |
+ flex-shrink: 0; |
|
| 375 |
+ padding: 10px; |
|
| 376 |
+ margin-left: 30px; |
|
| 377 |
+ select {
|
|
| 378 |
+ border: 0; |
|
| 379 |
+ font-size: 14px; |
|
| 380 |
+ } |
|
| 436 | 381 |
} |
| 382 |
+ |
|
| 437 | 383 |
|
| 438 | 384 |
.resultext {
|
| 439 | 385 |
.main-img {
|
... | ... | @@ -443,6 +389,7 @@ |
| 443 | 389 |
} |
| 444 | 390 |
|
| 445 | 391 |
display: flex; |
| 392 |
+ align-items: center; |
|
| 446 | 393 |
|
| 447 | 394 |
p {
|
| 448 | 395 |
width: max-content; |
... | ... | @@ -466,60 +413,130 @@ |
| 466 | 413 |
border-radius: 24px; |
| 467 | 414 |
padding: 30px; |
| 468 | 415 |
|
| 469 |
- .text-box {
|
|
| 416 |
+ |
|
| 417 |
+ } |
|
| 418 |
+ .text-box {
|
|
| 470 | 419 |
|
| 471 |
- p, |
|
| 420 |
+ p, |
|
| 421 |
+ li {
|
|
| 422 |
+ font-family: "Pretendard-L"; |
|
| 423 |
+ } |
|
| 424 |
+ |
|
| 425 |
+ .text {
|
|
| 426 |
+ width: 1048px; |
|
| 427 |
+ font-size: 16px; |
|
| 428 |
+ color: #555555; |
|
| 429 |
+ overflow: hidden; |
|
| 430 |
+ /* Hide any overflow */ |
|
| 431 |
+ text-overflow: ellipsis; |
|
| 432 |
+ /* Add an ellipsis at the end */ |
|
| 433 |
+ display: -webkit-box; |
|
| 434 |
+ -webkit-line-clamp: 2; |
|
| 435 |
+ /* Limit to 2 lines */ |
|
| 436 |
+ -webkit-box-orient: vertical; |
|
| 437 |
+ margin-bottom: 20px; |
|
| 438 |
+ } |
|
| 439 |
+ |
|
| 440 |
+ h5 {
|
|
| 441 |
+ font-family: "Pretendard-B"; |
|
| 442 |
+ font-size: 25px; |
|
| 443 |
+ margin-bottom: 20px; |
|
| 444 |
+ |
|
| 445 |
+ } |
|
| 446 |
+ |
|
| 447 |
+ .address {
|
|
| 448 |
+ font-size: 20px; |
|
| 449 |
+ margin-bottom: 18px; |
|
| 450 |
+ } |
|
| 451 |
+ |
|
| 452 |
+ .date {
|
|
| 453 |
+ ul {
|
|
| 454 |
+ display: flex; |
|
| 455 |
+ gap: 20px; |
|
| 456 |
+ } |
|
| 457 |
+ |
|
| 472 | 458 |
li {
|
| 473 |
- font-family: "Pretendard-L"; |
|
| 474 |
- } |
|
| 459 |
+ font-size: 17px; |
|
| 475 | 460 |
|
| 476 |
- .text {
|
|
| 477 |
- width: 1048px; |
|
| 478 |
- font-size: 16px; |
|
| 479 |
- color: #555555; |
|
| 480 |
- overflow: hidden; |
|
| 481 |
- /* Hide any overflow */ |
|
| 482 |
- text-overflow: ellipsis; |
|
| 483 |
- /* Add an ellipsis at the end */ |
|
| 484 |
- display: -webkit-box; |
|
| 485 |
- -webkit-line-clamp: 2; |
|
| 486 |
- /* Limit to 2 lines */ |
|
| 487 |
- -webkit-box-orient: vertical; |
|
| 488 |
- margin-bottom: 20px; |
|
| 489 |
- } |
|
| 490 |
- |
|
| 491 |
- h5 {
|
|
| 492 |
- font-family: "Pretendard-B"; |
|
| 493 |
- font-size: 25px; |
|
| 494 |
- margin-bottom: 20px; |
|
| 495 |
- } |
|
| 496 |
- |
|
| 497 |
- .address {
|
|
| 498 |
- font-size: 20px; |
|
| 499 |
- margin-bottom: 18px; |
|
| 500 |
- } |
|
| 501 |
- |
|
| 502 |
- .date {
|
|
| 503 |
- ul {
|
|
| 504 |
- display: flex; |
|
| 505 |
- gap: 20px; |
|
| 506 |
- } |
|
| 507 |
- |
|
| 508 |
- li {
|
|
| 509 |
- font-size: 17px; |
|
| 510 |
- |
|
| 511 |
- b {
|
|
| 512 |
- margin-left: 5px; |
|
| 513 |
- } |
|
| 461 |
+ b {
|
|
| 462 |
+ margin-left: 5px; |
|
| 514 | 463 |
} |
| 515 | 464 |
} |
| 516 | 465 |
} |
| 517 |
- |
|
| 518 | 466 |
} |
| 519 |
- |
|
| 467 |
+ .tabs{
|
|
| 468 |
+ .tab-box{display: flex;
|
|
| 469 |
+ justify-content: end; |
|
| 470 |
+ gap: 25px; |
|
| 471 |
+ } |
|
| 472 |
+ .tab-title{
|
|
| 473 |
+ display: flex; |
|
| 474 |
+ align-items: center; |
|
| 475 |
+ gap: 13px; |
|
| 476 |
+ p{
|
|
| 477 |
+ cursor: pointer; |
|
| 478 |
+ font-family: "HAPPINESS-SANS-REGULAR"; |
|
| 479 |
+ color: #cccccc; |
|
| 480 |
+ font-size: 17px; |
|
| 481 |
+ b{
|
|
| 482 |
+ color: #cccccc; |
|
| 483 |
+ } |
|
| 484 |
+ } |
|
| 485 |
+ |
|
| 486 |
+ } |
|
| 487 |
+ .tab-title.active p{
|
|
| 488 |
+ color: #000; |
|
| 489 |
+ |
|
| 490 |
+ b{
|
|
| 491 |
+ color: #ff4141; |
|
| 492 |
+ |
|
| 493 |
+ } |
|
| 494 |
+ |
|
| 495 |
+ } |
|
| 496 |
+ .tab-content{
|
|
| 497 |
+ .content-wrap{
|
|
| 498 |
+ margin-top: -23px; |
|
| 499 |
+ } |
|
| 500 |
+ .box-wrap{
|
|
| 501 |
+ width: 454px; |
|
| 502 |
+ height: 370px; |
|
| 503 |
+ .box {
|
|
| 504 |
+ background-image: linear-gradient(#fff, #fff), |
|
| 505 |
+ linear-gradient(-45deg, #fff, #fff); |
|
| 506 |
+ background-origin: border-box; |
|
| 507 |
+ background-clip: content-box, border-box; |
|
| 508 |
+ border: 3px solid transparent; |
|
| 509 |
+ border-radius: 32px; |
|
| 510 |
+ } |
|
| 511 |
+ |
|
| 512 |
+ .box:hover {
|
|
| 513 |
+ background-image: linear-gradient(#fff, #fff), |
|
| 514 |
+ linear-gradient(-45deg, #ca3e49, #3d355d); |
|
| 515 |
+ } |
|
| 516 |
+ .tab-image{
|
|
| 517 |
+ width: 100%; |
|
| 518 |
+ height: 297px; |
|
| 519 |
+ object-fit: cover; |
|
| 520 |
+ border-radius: 30px; |
|
| 521 |
+ } |
|
| 522 |
+ |
|
| 523 |
+ } |
|
| 524 |
+ |
|
| 525 |
+ } |
|
| 526 |
+ |
|
| 527 |
+ } |
|
| 528 |
+ .list-wrap{
|
|
| 529 |
+ border-top: 2px solid #000; |
|
| 530 |
+ &>li{
|
|
| 531 |
+ border-bottom: 2px solid #eeeeee; |
|
| 532 |
+ padding: 30px 10px; |
|
| 533 |
+ } |
|
| 534 |
+ } |
|
| 520 | 535 |
} |
| 521 | 536 |
|
| 522 |
-/* 등록페이지 */ |
|
| 537 |
+ |
|
| 538 |
+ |
|
| 539 |
+/*사진 기록물 등록페이지 */ |
|
| 523 | 540 |
.insert-form {
|
| 524 | 541 |
padding: 10px 0; |
| 525 | 542 |
border-top: 2px solid #000; |
... | ... | @@ -580,29 +597,40 @@ |
| 580 | 597 |
cursor: pointer; |
| 581 | 598 |
text-align: center; |
| 582 | 599 |
transition: background-color 0.3s ease; |
| 583 |
- |
|
| 600 |
+ |
|
| 584 | 601 |
} |
| 585 |
-.file-label > div p {
|
|
| 602 |
+ |
|
| 603 |
+.file-label>div p {
|
|
| 586 | 604 |
font-family: "Pretendard-B" !important; |
| 587 | 605 |
font-size: 20px !important; |
| 588 | 606 |
} |
| 607 |
+ |
|
| 589 | 608 |
/* Style the label on hover */ |
| 590 | 609 |
.file-label:hover {}
|
| 591 | 610 |
|
| 592 | 611 |
/* Style for the file names display */ |
| 593 | 612 |
.file-names {
|
| 594 |
- display: block; /* Make each file name appear on a new line */ |
|
| 613 |
+ display: block; |
|
| 614 |
+ /* Make each file name appear on a new line */ |
|
| 595 | 615 |
font-size: 16px; |
| 596 | 616 |
color: #333; |
| 597 |
- span{color: #dadada;}
|
|
| 598 |
- .file-wrap{
|
|
| 617 |
+ |
|
| 618 |
+ span {
|
|
| 619 |
+ color: #dadada; |
|
| 620 |
+ } |
|
| 621 |
+ |
|
| 622 |
+ .file-wrap {
|
|
| 599 | 623 |
border: 1px solid #dadada; |
| 600 | 624 |
border-radius: 10px; |
| 601 | 625 |
padding: 12px; |
| 602 |
- .file-name{
|
|
| 626 |
+ |
|
| 627 |
+ .file-name {
|
|
| 603 | 628 |
display: flex; |
| 604 | 629 |
align-items: center; |
| 605 |
- img{margin-right: 10px;}
|
|
| 630 |
+ |
|
| 631 |
+ img {
|
|
| 632 |
+ margin-right: 10px; |
|
| 633 |
+ } |
|
| 606 | 634 |
|
| 607 | 635 |
} |
| 608 | 636 |
} |
... | ... | @@ -610,44 +638,269 @@ |
| 610 | 638 |
|
| 611 | 639 |
|
| 612 | 640 |
/* 모달 */ |
| 613 |
-/* 모달 배경 스타일 */ |
|
| 614 | 641 |
.modal-overlay {
|
| 615 | 642 |
position: fixed; |
| 616 | 643 |
top: 0; |
| 617 | 644 |
left: 0; |
| 618 | 645 |
width: 100%; |
| 619 | 646 |
height: 100%; |
| 620 |
- background-color: rgba(0, 0, 0, 0.5); /* 배경 어두운 투명도 */ |
|
| 647 |
+ background-color: rgba(0, 0, 0, 0.5); |
|
| 648 |
+ /* 배경 어두운 투명도 */ |
|
| 621 | 649 |
display: flex; |
| 622 | 650 |
justify-content: center; |
| 623 | 651 |
align-items: center; |
| 624 | 652 |
z-index: 9999; |
| 625 |
- } |
|
| 626 |
- |
|
| 627 |
- /* 모달 콘텐츠 스타일 */ |
|
| 628 |
- .modal-content {
|
|
| 653 |
+} |
|
| 654 |
+ |
|
| 655 |
+.modal-content {
|
|
| 629 | 656 |
background-color: #fff; |
| 630 |
- padding: 20px; |
|
| 657 |
+ padding: 50px 35px; |
|
| 631 | 658 |
border-radius: 8px; |
| 632 |
- max-width: 400px; |
|
| 659 |
+ max-width: 1000px; |
|
| 633 | 660 |
width: 100%; |
| 634 | 661 |
text-align: center; |
| 635 |
- h2{
|
|
| 636 |
- |
|
| 662 |
+ |
|
| 663 |
+ h2 {
|
|
| 664 |
+ font-family: "Pretendard-B"; |
|
| 665 |
+ font-size: 30px; |
|
| 637 | 666 |
} |
| 638 |
- /* 닫기 버튼 스타일 */ |
|
| 639 |
- button {
|
|
| 640 |
- padding: 10px; |
|
| 641 |
- margin-top: 10px; |
|
| 642 |
- background-color: #007bff; |
|
| 643 |
- color: white; |
|
| 644 |
- border: none; |
|
| 645 |
- border-radius: 5px; |
|
| 667 |
+ .modal-search{
|
|
| 668 |
+ padding: 13px; |
|
| 669 |
+ background-color: rgba(0, 61, 97, 0.05); |
|
| 670 |
+ border-radius: 10px; |
|
| 671 |
+ input{
|
|
| 672 |
+ padding: 0px 20px; |
|
| 673 |
+ background-color: #fff; |
|
| 674 |
+ border-radius:5px; |
|
| 675 |
+ width: 300px; |
|
| 676 |
+ height: 45px; |
|
| 677 |
+ font-size: 16px; |
|
| 678 |
+ margin-right: 5px; |
|
| 679 |
+ } |
|
| 680 |
+ .search-btn{
|
|
| 681 |
+ display: flex; |
|
| 682 |
+ align-items: center; |
|
| 683 |
+ justify-content: center; |
|
| 684 |
+ width: 80px; |
|
| 685 |
+ height: 45px; |
|
| 686 |
+ gap: 5px; |
|
| 687 |
+ border-radius: 5px; |
|
| 688 |
+ p{
|
|
| 689 |
+ font-size: 16px; |
|
| 690 |
+ color: #fff; |
|
| 691 |
+ font-family: "Pretendard-SB"; |
|
| 692 |
+ } |
|
| 693 |
+ } |
|
| 694 |
+ } |
|
| 695 |
+ |
|
| 696 |
+ /* 닫기 버튼 스타일 */ |
|
| 697 |
+ button {
|
|
| 698 |
+ width: 40px; |
|
| 699 |
+ height: 40px; |
|
| 700 |
+ background-color: #000; |
|
| 701 |
+ color: white; |
|
| 702 |
+ border: none; |
|
| 703 |
+ border-radius: 50px; |
|
| 704 |
+ } |
|
| 705 |
+ button.closebtn{font-size: 20px;}
|
|
| 706 |
+ button:hover {
|
|
| 707 |
+ background-color: #0056b3; |
|
| 708 |
+ } |
|
| 709 |
+ .register-b{
|
|
| 710 |
+ width: 110px; |
|
| 711 |
+ height: 40px; |
|
| 712 |
+ font-size: 18px; |
|
| 713 |
+ background-color: #000; |
|
| 714 |
+ color: #fff; |
|
| 715 |
+ font-family: "Pretendard-M"; |
|
| 716 |
+ } |
|
| 717 |
+ |
|
| 718 |
+} |
|
| 719 |
+ |
|
| 720 |
+ |
|
| 721 |
+/* 사진기록물 상세페이지 */ |
|
| 722 |
+.gallery{
|
|
| 723 |
+ border: 0; |
|
| 724 |
+ dl{
|
|
| 725 |
+ padding: 30px 0 0 0; |
|
| 726 |
+ border-top: 2px solid #000; |
|
| 727 |
+ dd{
|
|
| 728 |
+ position: relative; |
|
| 729 |
+ background: #f6f6f6; |
|
| 730 |
+ padding: 25px 0px; |
|
| 731 |
+ p{flex: 1; font-size: 35px; text-align: center; font-family: "Pretendard-B"}
|
|
| 732 |
+ .date{
|
|
| 733 |
+ position: absolute; |
|
| 734 |
+ right: 30px; |
|
| 735 |
+ span{ font-family: "Pretendard-R"; font-size: 18px;}
|
|
| 736 |
+ img{
|
|
| 737 |
+ |
|
| 738 |
+ object-fit: contain; |
|
| 739 |
+ margin-right: 10px; |
|
| 740 |
+ } |
|
| 741 |
+ |
|
| 742 |
+ } |
|
| 743 |
+ |
|
| 744 |
+ |
|
| 745 |
+ } |
|
| 746 |
+ |
|
| 747 |
+ } |
|
| 748 |
+ .main-swiper{
|
|
| 749 |
+ .swiper{
|
|
| 750 |
+ width: 100%; |
|
| 751 |
+ .swiper-slide{
|
|
| 752 |
+ img{
|
|
| 753 |
+ height: 800px; |
|
| 754 |
+ width: 100%; |
|
| 755 |
+ object-fit: contain; |
|
| 756 |
+ } |
|
| 757 |
+ } |
|
| 758 |
+ |
|
| 759 |
+ } |
|
| 760 |
+ } |
|
| 761 |
+ .thumbnail{
|
|
| 762 |
+ padding: 30px 95px; |
|
| 763 |
+ background-color: #fff; |
|
| 764 |
+ .swiper{
|
|
| 765 |
+ width: 940px; |
|
| 766 |
+ height: 120px; |
|
| 767 |
+ .swiper-slide img {
|
|
| 768 |
+ width: -webkit-fill-available; |
|
| 769 |
+ } |
|
| 770 |
+ } |
|
| 771 |
+ } |
|
| 772 |
+ .swiper-button-prev, .swiper-button-next{
|
|
| 773 |
+ box-shadow: none ; |
|
| 774 |
+ } |
|
| 775 |
+ |
|
| 776 |
+ |
|
| 777 |
+} |
|
| 778 |
+ |
|
| 779 |
+ |
|
| 780 |
+ |
|
| 781 |
+ |
|
| 782 |
+ |
|
| 783 |
+/* 인풋 커스텀 */ |
|
| 784 |
+ |
|
| 785 |
+ |
|
| 786 |
+input[type="date"] {
|
|
| 787 |
+ position: relative; |
|
| 788 |
+ width: 158px; |
|
| 789 |
+ border-radius: 8px; |
|
| 790 |
+ background: url(../../images/icon/calendar.png) no-repeat right 10px center / auto; |
|
| 791 |
+} |
|
| 792 |
+ |
|
| 793 |
+input[type="date"]::placeholder {
|
|
| 794 |
+ color: #fff; |
|
| 795 |
+ ; |
|
| 796 |
+} |
|
| 797 |
+ |
|
| 798 |
+input[type='date']::-webkit-calendar-picker-indicator {
|
|
| 799 |
+ position: absolute; |
|
| 800 |
+ left: 0; |
|
| 801 |
+ top: 0; |
|
| 802 |
+ width: 100%; |
|
| 803 |
+ height: 100%; |
|
| 804 |
+ background: transparent; |
|
| 805 |
+ color: transparent; |
|
| 646 | 806 |
cursor: pointer; |
| 647 |
- } |
|
| 648 |
- |
|
| 649 |
- button:hover {
|
|
| 650 |
- background-color: #0056b3; |
|
| 651 |
- } |
|
| 652 |
- } |
|
| 653 |
- |
|
| 807 |
+} |
|
| 808 |
+ |
|
| 809 |
+input[type="checkbox"] {
|
|
| 810 |
+ position: relative; |
|
| 811 |
+ width: 22px; |
|
| 812 |
+ height: 22px; |
|
| 813 |
+ padding: 0; |
|
| 814 |
+ accent-color: #544483; |
|
| 815 |
+ /* This will change the checkbox color when checked */ |
|
| 816 |
+ border: 1px solid #cccccc; |
|
| 817 |
+ /* This controls the border color */ |
|
| 818 |
+ border-radius: 4px; |
|
| 819 |
+ /* Optional: rounded corners */ |
|
| 820 |
+ background-color: #fff; |
|
| 821 |
+ /* Default background */ |
|
| 822 |
+ appearance: none; |
|
| 823 |
+ /* Remove the default checkbox appearance */ |
|
| 824 |
+ cursor: pointer; |
|
| 825 |
+} |
|
| 826 |
+ |
|
| 827 |
+/* Checked state of the checkbox */ |
|
| 828 |
+input[type="checkbox"]:checked {
|
|
| 829 |
+ background-color: #544483; |
|
| 830 |
+ /* Custom background when checked */ |
|
| 831 |
+ border-color: #544483; |
|
| 832 |
+ /* Custom border color when checked */ |
|
| 833 |
+} |
|
| 834 |
+ |
|
| 835 |
+input[type="checkbox"]:checked::before {
|
|
| 836 |
+ content: ''; |
|
| 837 |
+ background-image: url(../../images/check.png); |
|
| 838 |
+ background-repeat: no-repeat; |
|
| 839 |
+ position: absolute; |
|
| 840 |
+ left: 2px; |
|
| 841 |
+ top: 5px; |
|
| 842 |
+ width: 15px; |
|
| 843 |
+ height: 11px; |
|
| 844 |
+} |
|
| 845 |
+ |
|
| 846 |
+input[type="checkbox"]:checked+label {
|
|
| 847 |
+ color: rgba(0, 0, 0, 0.12); |
|
| 848 |
+ /* Change the label color when checkbox is checked */ |
|
| 849 |
+} |
|
| 850 |
+ |
|
| 851 |
+input[type="checkbox"]+label, input[type='radio']+label {
|
|
| 852 |
+ font-size: 17px; |
|
| 853 |
+ font-family: "Pretendard-L"; |
|
| 854 |
+} |
|
| 855 |
+ |
|
| 856 |
+/* 기본스타일 제거, 버튼 모양 재설정 */ |
|
| 857 |
+input[type='radio'] {
|
|
| 858 |
+ flex-shrink: 0; |
|
| 859 |
+ -webkit-appearance: none; |
|
| 860 |
+ /* 웹킷 브라우저에서 기본 스타일 제거*/ |
|
| 861 |
+ -moz-appearance: none; |
|
| 862 |
+ /* 모질라 브라우저에서 기본 스타일 제거*/ |
|
| 863 |
+ appearance: none; |
|
| 864 |
+ /*기본 브라우저에서 기본 스타일 제거*/ |
|
| 865 |
+ width: 22px; |
|
| 866 |
+ height: 22px; |
|
| 867 |
+ padding: 0; |
|
| 868 |
+ border: 1px solid #ccc; |
|
| 869 |
+ /*체크되지 않았을 때의 테두리 색상*/ |
|
| 870 |
+ border-radius: 50%; |
|
| 871 |
+ outline: none; |
|
| 872 |
+ /*focus 시에 나타나는 기본 스타일 제거*/ |
|
| 873 |
+ cursor: pointer; |
|
| 874 |
+} |
|
| 875 |
+ |
|
| 876 |
+/* 체크 시 버튼 모양 스타일*/ |
|
| 877 |
+input[type='radio']:checked {
|
|
| 878 |
+ background-color: #544483; |
|
| 879 |
+ /*체크 시 내부 원 색상*/ |
|
| 880 |
+ border: 4px solid #fff; |
|
| 881 |
+ /*라인이 아닌, 라인과 원 사이 색상*/ |
|
| 882 |
+ box-shadow: 0 0 0 1px #ccc; |
|
| 883 |
+ /*라인*/ |
|
| 884 |
+} |
|
| 885 |
+ |
|
| 886 |
+ |
|
| 887 |
+ |
|
| 888 |
+/* table*/ |
|
| 889 |
+table{
|
|
| 890 |
+ width: 100%; |
|
| 891 |
+ border-collapse: collapse; |
|
| 892 |
+ border-top: 2px solid #000; |
|
| 893 |
+} |
|
| 894 |
+thead{background-color: #f6f6f6;}
|
|
| 895 |
+th{
|
|
| 896 |
+ font-family: "Pretendard-SB"; |
|
| 897 |
+ font-size: 18px; |
|
| 898 |
+} |
|
| 899 |
+tbody tr{
|
|
| 900 |
+ border-bottom: 1px solid #eeeeee; |
|
| 901 |
+ td{
|
|
| 902 |
+ font-size: 16px; |
|
| 903 |
+ font-family: "Pretendard-L"; |
|
| 904 |
+ } |
|
| 905 |
+} |
|
| 906 |
+td, th{padding: 10px 0; }
|
+++ client/resources/images/icon/addressicon.png
| Binary file is not shown |
+++ client/resources/images/icon/calendaricon.png
| Binary file is not shown |
+++ client/resources/images/icon/categoryicon.png
| Binary file is not shown |
+++ client/resources/images/icon/yearicon.png
| Binary file is not shown |
--- client/resources/images/next-btn.png
+++ client/resources/images/next-btn.png
| Binary file is not shown |
--- client/resources/images/prev-btn.png
+++ client/resources/images/prev-btn.png
| Binary file is not shown |
+++ client/resources/images/search_btn.png
| Binary file is not shown |
--- client/views/pages/AppRouter.js
+++ client/views/pages/AppRouter.js
... | ... | @@ -10,6 +10,7 @@ |
| 10 | 10 |
import TotalSearch from "./user/TotalSearch.vue"; |
| 11 | 11 |
import PicHistorySearch from "./user/PicHistorySearch.vue"; |
| 12 | 12 |
import PicHistoryInsert from "./user/PicHistoryInsert.vue"; |
| 13 |
+import PicHistoryDetail from "./user/PicHistoryDetail.vue"; |
|
| 13 | 14 |
|
| 14 | 15 |
const routes = [ |
| 15 | 16 |
{ path: "/", name: "MainPage", component: Main, meta: { authorization: ['ROLE_ADMIN', 'ROLE_USER']} },
|
... | ... | @@ -20,6 +21,7 @@ |
| 20 | 21 |
{ path: "/TotalSearch.page", name: "TotalSearch", component: TotalSearch },
|
| 21 | 22 |
{ path: "/PicHistorySearch.page", name: "PicHistorySearch", component: PicHistorySearch },
|
| 22 | 23 |
{ path: "/PicHistoryInsert.page", name: "PicHistoryInsert", component: PicHistoryInsert },
|
| 24 |
+ { path: "/PicHistoryDetail.page", name: "PicHistoryDetail", component: PicHistoryDetail },
|
|
| 23 | 25 |
|
| 24 | 26 |
|
| 25 | 27 |
]; |
--- client/views/pages/main/Main.vue
+++ client/views/pages/main/Main.vue
... | ... | @@ -171,7 +171,7 @@ |
| 171 | 171 |
nomedia: "client/resources/images/no_media.png", |
| 172 | 172 |
nobodo: "client/resources/images/no_bodo.png", |
| 173 | 173 |
direct: 'client/resources/images/direct-btn.png', |
| 174 |
- search: 'client/resources/images/icon/search.png', |
|
| 174 |
+ search: 'client/resources/images/icon/search_btn.png', |
|
| 175 | 175 |
selectedTab: "newPhoto", // Set initial tab index to 신규사진기록물 (first tab) |
| 176 | 176 |
tabs: [ |
| 177 | 177 |
{
|
+++ client/views/pages/user/PicHistoryDetail.vue
... | ... | @@ -0,0 +1,167 @@ |
| 1 | +<template> | |
| 2 | + <div class="content"> | |
| 3 | + <div class="sub-title-area mb-30"> | |
| 4 | + <h2>사진 기록물</h2> | |
| 5 | + <div class="breadcrumb-list"> | |
| 6 | + <ul> | |
| 7 | + <li><img :src="homeicon" alt="Home Icon"> | |
| 8 | + <p>기록물</p> | |
| 9 | + </li> | |
| 10 | + <li><img :src="righticon" alt=""></li> | |
| 11 | + <li>사진 기록물</li> | |
| 12 | + </ul> | |
| 13 | + </div> | |
| 14 | + </div> | |
| 15 | + <form action="" class="gallery"> | |
| 16 | + <dl class="mb-20"> | |
| 17 | + <dd> | |
| 18 | + <p>사진 기록물 제목1 | |
| 19 | + </p> | |
| 20 | + <div class="date flex align-center"> | |
| 21 | + <img :src="calendaricon" alt=""> | |
| 22 | + <span>2025.02.28</span> | |
| 23 | + </div> | |
| 24 | + </dd> | |
| 25 | + | |
| 26 | + </dl> | |
| 27 | + <div> | |
| 28 | + <div class="main-swiper"> | |
| 29 | + <swiper :style="{ | |
| 30 | + '--swiper-navigation-color': '#fff', | |
| 31 | + '--swiper-pagination-color': '#fff', | |
| 32 | + }" :loop="true" :spaceBetween="10" :thumbs="{ swiper: thumbsSwiper }" :modules="modules" | |
| 33 | + class="mySwiper2"> | |
| 34 | + <swiper-slide v-for="(item, index) in slides" :key="index"> | |
| 35 | + <img :src="item.img" :alt="item.alt" /> | |
| 36 | + </swiper-slide> | |
| 37 | + </swiper> | |
| 38 | + </div> | |
| 39 | + <div class="thumbnail"> | |
| 40 | + <swiper @swiper="setThumbsSwiper" :spaceBetween="10" :slidesPerView="4" :freeMode="true" | |
| 41 | + :watchSlidesProgress="true" :modules="modules" class="mySwiper" :navigation="{ | |
| 42 | + nextEl: '.swiper-button-next', | |
| 43 | + prevEl: '.swiper-button-prev' | |
| 44 | + }"> | |
| 45 | + <swiper-slide v-for="(item, index) in slides" :key="index" > | |
| 46 | + <img :src="item.img" :alt="item.alt" /> | |
| 47 | + </swiper-slide> | |
| 48 | + </swiper> | |
| 49 | + </div> | |
| 50 | + <div class="swiper-button-next"></div> | |
| 51 | + <div class="swiper-button-prev"></div> | |
| 52 | + </div> | |
| 53 | + </form> | |
| 54 | + | |
| 55 | + <h3>내용</h3> | |
| 56 | + <form action="" class=" info-form mb-50"> | |
| 57 | + <dl> | |
| 58 | + <dd> | |
| 59 | + <p> 대한민국 최대의 내륙 산업단지를 보유하고, 서울로부터 277km, 부산으로부터 167km 거리에 있으며, 면적은 615㎢로 경상북도 전체 면적의 3.2%에 달합니다. 인구는 | |
| 60 | + 41만 명이고, 선산읍, 고아읍, 산동읍을 비롯한 3읍, 5면, 17개 동으로 구성되어 있습니다.</p> | |
| 61 | + | |
| 62 | + </dd> | |
| 63 | + </dl> | |
| 64 | + </form> | |
| 65 | + | |
| 66 | + <h3>기본정보</h3> | |
| 67 | + <form action="" class="info-form mb-50"> | |
| 68 | + <dl> | |
| 69 | + <dd class="mb-20"> | |
| 70 | + <img :src="addressicon" alt=""> | |
| 71 | + <span>주소</span> | |
| 72 | + <p>경상북도 구미시 송정대로 55</p> | |
| 73 | + </dd> | |
| 74 | + <dd class="mb-20"> | |
| 75 | + <img :src="yearicon" alt=""> | |
| 76 | + <span>생산정보</span> | |
| 77 | + <p>2017</p> | |
| 78 | + | |
| 79 | + </dd> | |
| 80 | + <dd> | |
| 81 | + <img :src="categoryicon" alt=""> | |
| 82 | + <span>카테고리</span> | |
| 83 | + <ul class="category"> | |
| 84 | + <li v-if="resultitem.category1" class="category1">카테고리1</li> | |
| 85 | + <li v-if="resultitem.category2" class="category2">카테고리2</li> | |
| 86 | + </ul> | |
| 87 | + | |
| 88 | + </dd> | |
| 89 | + | |
| 90 | + </dl> | |
| 91 | + </form> | |
| 92 | + <div class="btn-group flex-end"> | |
| 93 | + <button class="signout" type="button" @click="fnDeleteUser">회원탈퇴</button> | |
| 94 | + <button class="update" type="button" @click="fnUpdateUser">수정</button> | |
| 95 | + </div> | |
| 96 | + </div> | |
| 97 | +</template> | |
| 98 | + | |
| 99 | +<script> | |
| 100 | +import axios from "axios"; | |
| 101 | +import { ref } from 'vue'; | |
| 102 | +import { updateUsers, logOutProc, updatePassword } from "../../../resources/api/user" | |
| 103 | +// Import Swiper Vue components | |
| 104 | +import { CaretRightOutlined, PauseOutlined } from '@ant-design/icons-vue'; | |
| 105 | +import { Swiper, SwiperSlide } from 'swiper/vue'; | |
| 106 | + | |
| 107 | +// Import Swiper styles | |
| 108 | +import 'swiper/css'; | |
| 109 | + | |
| 110 | +import 'swiper/css/free-mode'; | |
| 111 | +import 'swiper/css/navigation'; | |
| 112 | +import 'swiper/css/thumbs'; | |
| 113 | + | |
| 114 | +// import required modules | |
| 115 | +import { FreeMode, Navigation, Thumbs } from 'swiper/modules'; | |
| 116 | + | |
| 117 | +export default { | |
| 118 | + components: { | |
| 119 | + PauseOutlined, | |
| 120 | + CaretRightOutlined, | |
| 121 | + Swiper, | |
| 122 | + SwiperSlide, | |
| 123 | + }, | |
| 124 | + setup() { | |
| 125 | + const thumbsSwiper = ref(null); | |
| 126 | + | |
| 127 | + const setThumbsSwiper = (swiper) => { | |
| 128 | + thumbsSwiper.value = swiper; | |
| 129 | + }; | |
| 130 | + | |
| 131 | + return { | |
| 132 | + thumbsSwiper, | |
| 133 | + setThumbsSwiper, | |
| 134 | + modules: [FreeMode, Navigation, Thumbs], | |
| 135 | + }; | |
| 136 | + }, | |
| 137 | + data() { | |
| 138 | + return { | |
| 139 | + resultitem: { | |
| 140 | + category1: true, | |
| 141 | + category2: true, | |
| 142 | + }, | |
| 143 | + calendaricon: 'client/resources/images/icon/calendaricon.png', | |
| 144 | + homeicon: 'client/resources/images/icon/home.png', | |
| 145 | + erroricon: 'client/resources/images/icon/error.png', | |
| 146 | + righticon: 'client/resources/images/icon/right.png', | |
| 147 | + addressicon: 'client/resources/images/icon/addressicon.png', | |
| 148 | + yearicon: 'client/resources/images/icon/yearicon.png', | |
| 149 | + categoryicon: 'client/resources/images/icon/categoryicon.png', | |
| 150 | + slides: [ | |
| 151 | + { img: 'client/resources/images/visual.png', alt: 'Slide 1' }, | |
| 152 | + { img: 'client/resources/images/visual.png', alt: 'Slide 2' }, | |
| 153 | + { img: 'client/resources/images/visual.png', alt: 'Slide 3' }, | |
| 154 | + { img: 'client/resources/images/visual.png', alt: 'Slide 3' }, | |
| 155 | + // Add more slides as needed | |
| 156 | + ], | |
| 157 | + | |
| 158 | + }; | |
| 159 | + }, | |
| 160 | + methods: { | |
| 161 | + }, | |
| 162 | + watch: {}, | |
| 163 | + computed: { | |
| 164 | + }, | |
| 165 | + mounted() { }, | |
| 166 | +}; | |
| 167 | +</script>(파일 끝에 줄바꿈 문자 없음) |
--- client/views/pages/user/PicHistoryInsert.vue
+++ client/views/pages/user/PicHistoryInsert.vue
... | ... | @@ -1,85 +1,147 @@ |
| 1 | 1 |
<template> |
| 2 |
- <div class="content"> |
|
| 3 |
- <div class="sub-title-area mb-30"> |
|
| 4 |
- <h2>사진 기록물</h2> |
|
| 5 |
- <div class="breadcrumb-list"> |
|
| 6 |
- <ul> |
|
| 7 |
- <li><img :src="homeicon" alt="Home Icon"> |
|
| 8 |
- <p>기록물</p> |
|
| 9 |
- </li> |
|
| 10 |
- <li><img :src="righticon" alt=""></li> |
|
| 11 |
- <li>사진 기록물</li> |
|
| 12 |
- </ul> |
|
| 13 |
- </div> |
|
| 14 |
- </div> |
|
| 15 |
- <form action="" class="insert-form mb-50"> |
|
| 16 |
- <dl> |
|
| 17 |
- <dd> |
|
| 18 |
- <label for="id" class="require">제목</label> |
|
| 19 |
- <div class="wfull"><input type="text" id="id" value="" placeholder="제목을 입력하세요."></div> |
|
| 20 |
- </dd> |
|
| 21 |
- <div class="hr"></div> |
|
| 22 |
- <dd> |
|
| 23 |
- <label for="year">생산연도</label> |
|
| 24 |
- <input type="text" id="year" value="" placeholder="생산연도를 입력하세요"> |
|
| 25 |
- </dd> |
|
| 26 |
- <div class="hr"></div> |
|
| 27 |
- <dd> |
|
| 28 |
- <label for="address">주소</label> |
|
| 29 |
- <div class="wfull"><input type="text" id="address" value="" placeholder="주소를 입력하세요"></div> |
|
| 30 |
- </dd> |
|
| 31 |
- <div class="hr"></div> |
|
| 32 |
- <dd> |
|
| 33 |
- <label for="text">내용</label> |
|
| 34 |
- <textarea name="" id=""></textarea> |
|
| 35 |
- </dd> |
|
| 36 |
- <div class="hr"></div> |
|
| 37 |
- <dd> |
|
| 38 |
- <label for="category" class="flex align-center"> |
|
| 39 |
- <p>카테고리</p><button type="button" class="category-add" @click="openModal">추가하기</button> |
|
| 40 |
- </label> |
|
| 41 |
- <ul class="category"> |
|
| 42 |
- <li class="category1">카테고리1 <button class="cancel"><b>✕</b></button></li> |
|
| 43 |
- <li class="category2">카테고리2 <button class="cancel"><b>✕</b></button></li> |
|
| 44 |
- </ul> |
|
| 45 |
- </dd> |
|
| 46 |
- <div class="hr"></div> |
|
| 47 |
- <dd> |
|
| 48 |
- <label for="file" class="require">파일</label> |
|
| 49 |
- <ul class="wfull"> |
|
| 50 |
- <li class="flex align-center"> |
|
| 51 |
- <p>파일첨부</p> |
|
| 52 |
- <div class="invalid-feedback"><img :src="erroricon" alt=""><span>첨부파일은 10건까지 등록 가능하며, 건당 최대 100MB를 초과할 수 없습니다.</span></div> |
|
| 53 |
- </li> |
|
| 54 |
- <li class="file-insert"> |
|
| 55 |
- <input type="file" id="fileInput" class="file-input" multiple @change="showFileNames"> |
|
| 56 |
- <label for="fileInput" class="file-label mb-20"> |
|
| 57 |
- <div class="flex-center align-center"><img :src="fileicon" alt=""> |
|
| 58 |
- <p>파일첨부하기</p> |
|
| 2 |
+ <div class="content"> |
|
| 3 |
+ <div class="sub-title-area mb-30"> |
|
| 4 |
+ <h2>사진 기록물</h2> |
|
| 5 |
+ <div class="breadcrumb-list"> |
|
| 6 |
+ <ul> |
|
| 7 |
+ <li><img :src="homeicon" alt="Home Icon"> |
|
| 8 |
+ <p>기록물</p> |
|
| 9 |
+ </li> |
|
| 10 |
+ <li><img :src="righticon" alt=""></li> |
|
| 11 |
+ <li>사진 기록물</li> |
|
| 12 |
+ </ul> |
|
| 13 |
+ </div> |
|
| 14 |
+ </div> |
|
| 15 |
+ <form action="" class="insert-form mb-50"> |
|
| 16 |
+ <dl> |
|
| 17 |
+ <dd> |
|
| 18 |
+ <label for="id" class="require">제목</label> |
|
| 19 |
+ <div class="wfull"><input type="text" id="id" value="" placeholder="제목을 입력하세요."></div> |
|
| 20 |
+ </dd> |
|
| 21 |
+ <div class="hr"></div> |
|
| 22 |
+ <dd> |
|
| 23 |
+ <label for="year">생산연도</label> |
|
| 24 |
+ <input type="text" id="year" value="" placeholder="생산연도를 입력하세요"> |
|
| 25 |
+ |
|
| 26 |
+ </dd> |
|
| 27 |
+ <div class="hr"></div> |
|
| 28 |
+ <dd> |
|
| 29 |
+ <label for="address">주소</label> |
|
| 30 |
+ <div class="wfull"><input type="text" id="address" value="" placeholder="주소를 입력하세요"></div> |
|
| 31 |
+ |
|
| 32 |
+ </dd> |
|
| 33 |
+ <div class="hr"></div> |
|
| 34 |
+ <dd> |
|
| 35 |
+ <label for="text">내용</label> |
|
| 36 |
+ <textarea name="" id=""></textarea> |
|
| 37 |
+ |
|
| 38 |
+ </dd> |
|
| 39 |
+ <div class="hr"></div> |
|
| 40 |
+ <dd> |
|
| 41 |
+ <label for="category" class="flex align-center"> |
|
| 42 |
+ <p>카테고리</p><button type="button" class="category-add" @click="openModal">추가하기</button> |
|
| 43 |
+ </label> |
|
| 44 |
+ <ul class="category"> |
|
| 45 |
+ <li v-for="(category, index) in selectedCategories" :key="index" > |
|
| 46 |
+ {{ category }}
|
|
| 47 |
+ <button type="button" class="cancel" @click="removeCategory(index)"><b>✕</b></button> |
|
| 48 |
+ </li> |
|
| 49 |
+ </ul> |
|
| 50 |
+ |
|
| 51 |
+ </dd> |
|
| 52 |
+ <div class="hr"></div> |
|
| 53 |
+ <dd> |
|
| 54 |
+ <label for="file" class="require">파일</label> |
|
| 55 |
+ <ul class="wfull"> |
|
| 56 |
+ <li class="flex align-center"> |
|
| 57 |
+ <p>파일첨부</p> |
|
| 58 |
+ <div class="invalid-feedback"><img :src="erroricon" alt=""><span>첨부파일은 10건까지 등록 가능하며, 건당 최대 |
|
| 59 |
+ 100MB를 초과할 수 없습니다.</span></div> |
|
| 60 |
+ </li> |
|
| 61 |
+ <li class="file-insert"> |
|
| 62 |
+ <input type="file" id="fileInput" class="file-input" multiple @change="showFileNames"> |
|
| 63 |
+ <label for="fileInput" class="file-label mb-20"> |
|
| 64 |
+ <div class="flex-center align-center"><img :src="fileicon" alt=""> |
|
| 65 |
+ <p>파일첨부하기</p> |
|
| 66 |
+ </div> |
|
| 67 |
+ <p>파일을 첨부하시려면 이 영역으로 파일을 끌고 오거나 클릭해주세요</p> |
|
| 68 |
+ </label> |
|
| 69 |
+ <p class="mb-10">파일목록</p> |
|
| 70 |
+ <div id="fileNames" class="file-names"> |
|
| 71 |
+ <span v-if="fileNames.length === 0">선택된 파일이 없습니다.</span> |
|
| 72 |
+ <div v-for="(file, index) in fileNames" :key="index" class="flex-sp-bw mb-5 file-wrap"> |
|
| 73 |
+ <div class="file-name"> |
|
| 74 |
+ <!-- Corrected here: Use file.icon instead of fileicons.img --> |
|
| 75 |
+ <img :src="file.icon" alt="fileicon"> |
|
| 76 |
+ <p>{{ file.name }}</p>
|
|
| 77 |
+ </div> |
|
| 78 |
+ <button type="button" class="cancel" @click="removeFile(index)"><b>✕</b></button> |
|
| 79 |
+ </div> |
|
| 80 |
+ </div> |
|
| 81 |
+ </li> |
|
| 82 |
+ |
|
| 83 |
+ </ul> |
|
| 84 |
+ |
|
| 85 |
+ </dd> |
|
| 86 |
+ </dl> |
|
| 87 |
+ </form> |
|
| 88 |
+ |
|
| 89 |
+ <div class="btn-group flex-center"> |
|
| 90 |
+ <button class="cancel">취소</button> |
|
| 91 |
+ <button class="register">등록</button> |
|
| 92 |
+ </div> |
|
| 93 |
+ <div v-if="isModalOpen" class="modal-overlay" @click="closeModal"> |
|
| 94 |
+ <div class="modal-content" @click.stop> |
|
| 95 |
+ <div class="flex-sp-bw mb-20"> |
|
| 96 |
+ <h2>카테고리 조회</h2> |
|
| 97 |
+ <button @click="closeModal" class="closebtn">✕</button> |
|
| 59 | 98 |
</div> |
| 60 |
- <p>파일을 첨부하시려면 이 영역으로 파일을 끌고 오거나 클릭해주세요</p> |
|
| 61 |
- </label> |
|
| 62 |
- <p class="mb-10">파일목록</p> |
|
| 63 |
- <div id="fileNames" class="file-names"> |
|
| 64 |
- <span v-if="fileNames.length === 0">선택된 파일이 없습니다.</span> |
|
| 65 |
- <div v-for="(file, index) in fileNames" :key="index" class="flex-sp-bw mb-5 file-wrap"> |
|
| 66 |
- <div class="file-name"> |
|
| 67 |
- <!-- Corrected here: Use file.icon instead of fileicons.img --> |
|
| 68 |
- <img :src="file.icon" alt="fileicon"> |
|
| 69 |
- <p>{{ file.name }}</p>
|
|
| 70 |
- </div> |
|
| 71 |
- <button type="button" class="cancel" @click="removeFile(index)"><b>✕</b></button> |
|
| 99 |
+ <div class="modal-search flex-center mb-20"> |
|
| 100 |
+ <input type="text" placeholder="카테고리명을 입력하세요."> |
|
| 101 |
+ <button class="search-btn"><img :src="searchicon" alt=""> |
|
| 102 |
+ <p>검색</p> |
|
| 103 |
+ </button> |
|
| 72 | 104 |
</div> |
| 73 |
- </div> |
|
| 74 |
- </li> |
|
| 75 |
- </ul> |
|
| 76 |
- </dd> |
|
| 77 |
- </dl> |
|
| 78 |
- </form> |
|
| 79 |
- <div class="btn-group flex-center"> |
|
| 80 |
- <button class="cancel">취소</button> |
|
| 81 |
- <button class="register">등록</button> |
|
| 82 |
- </div> |
|
| 105 |
+ <table class="mb-10"> |
|
| 106 |
+ <thead> |
|
| 107 |
+ <tr> |
|
| 108 |
+ <th>카테고리 항목</th> |
|
| 109 |
+ <th>선택</th> |
|
| 110 |
+ </tr> |
|
| 111 |
+ </thead> |
|
| 112 |
+ <tbody> |
|
| 113 |
+ <tr v-for="item in items" :key="item.id"> |
|
| 114 |
+ <!-- Category 칼럼 --> |
|
| 115 |
+ <td> |
|
| 116 |
+ {{ item.category }}
|
|
| 117 |
+ </td> |
|
| 118 |
+ <!-- Checkbox 칼럼 --> |
|
| 119 |
+ <td> |
|
| 120 |
+ <input type="checkbox" v-model="item.selected" /> |
|
| 121 |
+ </td> |
|
| 122 |
+ </tr> |
|
| 123 |
+ </tbody> |
|
| 124 |
+ </table> |
|
| 125 |
+ <div class="flex-end mb-30"><button class="register-b " @click="registerCategories">등록</button></div> |
|
| 126 |
+ <div class="pagination"> |
|
| 127 |
+ |
|
| 128 |
+ <!-- Previous and Next Page Buttons --> |
|
| 129 |
+ <button> |
|
| 130 |
+ <DoubleLeftOutlined /> |
|
| 131 |
+ </button> |
|
| 132 |
+ <button @click="previousPage" :disabled="currentPage === 1"> |
|
| 133 |
+ <LeftOutlined /> |
|
| 134 |
+ </button> |
|
| 135 |
+ <button class="page-number clicked">1</button> |
|
| 136 |
+ <button @click="nextPage" :disabled="currentPage === totalPages"> |
|
| 137 |
+ <RightOutlined /> |
|
| 138 |
+ </button> |
|
| 139 |
+ <button> |
|
| 140 |
+ <DoubleRightOutlined /> |
|
| 141 |
+ </button> |
|
| 142 |
+ </div> |
|
| 143 |
+ </div> |
|
| 144 |
+ </div> |
|
| 83 | 145 |
</div> |
| 84 | 146 |
<div v-if="isModalOpen" class="modal-overlay" @click="closeModal"> |
| 85 | 147 |
<div class="modal-content" @click.stop> |
... | ... | @@ -90,22 +152,70 @@ |
| 90 | 152 |
</div> |
| 91 | 153 |
</template> |
| 92 | 154 |
<script> |
| 155 |
+import { DoubleLeftOutlined, LeftOutlined, RightOutlined, DoubleRightOutlined } from '@ant-design/icons-vue';
|
|
| 156 |
+ |
|
| 93 | 157 |
export default {
|
| 94 |
- data() {
|
|
| 95 |
- return {
|
|
| 96 |
- isModalOpen: false, |
|
| 97 |
- // Define the image sources |
|
| 98 |
- homeicon: 'client/resources/images/icon/home.png', |
|
| 99 |
- erroricon: 'client/resources/images/icon/error.png', |
|
| 100 |
- righticon: 'client/resources/images/icon/right.png', |
|
| 101 |
- fileicon: 'client/resources/images/icon/file.png', |
|
| 102 |
- fileNames: [], |
|
| 103 |
- }; |
|
| 104 |
- }, |
|
| 105 |
- methods: {
|
|
| 106 |
- showFileNames(event) {
|
|
| 107 |
- const files = event.target.files; |
|
| 108 |
- this.fileNames = []; // Clear previous file names |
|
| 158 |
+ components: {
|
|
| 159 |
+ DoubleLeftOutlined, |
|
| 160 |
+ LeftOutlined, |
|
| 161 |
+ RightOutlined, |
|
| 162 |
+ DoubleRightOutlined, |
|
| 163 |
+ }, |
|
| 164 |
+ |
|
| 165 |
+ data() {
|
|
| 166 |
+ return {
|
|
| 167 |
+ items: [ |
|
| 168 |
+ { id: 1, category: '카테고리 1', selected: false },
|
|
| 169 |
+ { id: 2, category: '카테고리 2', selected: false },
|
|
| 170 |
+ { id: 3, category: '카테고리 3', selected: false },
|
|
| 171 |
+ ], |
|
| 172 |
+ isModalOpen: false, |
|
| 173 |
+ // Define the image sources |
|
| 174 |
+ homeicon: 'client/resources/images/icon/home.png', |
|
| 175 |
+ erroricon: 'client/resources/images/icon/error.png', |
|
| 176 |
+ righticon: 'client/resources/images/icon/right.png', |
|
| 177 |
+ fileicon: 'client/resources/images/icon/file.png', |
|
| 178 |
+ searchicon: 'client/resources/images/icon/search.png', |
|
| 179 |
+ fileNames: [], |
|
| 180 |
+ selectedCategories: [], |
|
| 181 |
+ }; |
|
| 182 |
+ }, |
|
| 183 |
+ computed: {
|
|
| 184 |
+ filteredItems() {
|
|
| 185 |
+ // This could be modified to support filtering based on searchQuery |
|
| 186 |
+ return this.items.filter(item => |
|
| 187 |
+ item.category.includes(this.searchQuery) |
|
| 188 |
+ ); |
|
| 189 |
+ } |
|
| 190 |
+ }, |
|
| 191 |
+ methods: {
|
|
| 192 |
+ registerCategories() {
|
|
| 193 |
+ // Add selected categories to the displayed list |
|
| 194 |
+ this.selectedCategories = this.items |
|
| 195 |
+ .filter(item => item.selected) |
|
| 196 |
+ .map(item => item.category); |
|
| 197 |
+ this.closeModal(); // Close modal after registration |
|
| 198 |
+ }, |
|
| 199 |
+ removeCategory(index) {
|
|
| 200 |
+ // Remove category from the list |
|
| 201 |
+ this.selectedCategories.splice(index, 1); |
|
| 202 |
+ }, |
|
| 203 |
+ searchCategories() {
|
|
| 204 |
+ // You can implement search logic if needed |
|
| 205 |
+ }, |
|
| 206 |
+ nextPage() {
|
|
| 207 |
+ if (this.currentPage < this.totalPages) {
|
|
| 208 |
+ this.currentPage++; |
|
| 209 |
+ } |
|
| 210 |
+ }, |
|
| 211 |
+ previousPage() {
|
|
| 212 |
+ if (this.currentPage > 1) {
|
|
| 213 |
+ this.currentPage--; |
|
| 214 |
+ } |
|
| 215 |
+ }, |
|
| 216 |
+ showFileNames(event) {
|
|
| 217 |
+ const files = event.target.files; |
|
| 218 |
+ this.fileNames = []; // Clear previous file names |
|
| 109 | 219 |
|
| 110 | 220 |
for (let i = 0; i < files.length; i++) {
|
| 111 | 221 |
const file = files[i]; |
--- client/views/pages/user/PicHistorySearch.vue
+++ client/views/pages/user/PicHistorySearch.vue
... | ... | @@ -1,256 +1,412 @@ |
| 1 | 1 |
<template> |
| 2 |
- <div class="content"> |
|
| 3 |
- <div class="sub-title-area mb-30"> |
|
| 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"> |
|
| 9 |
- <p>기록물</p> |
|
| 10 |
- </li> |
|
| 11 |
- <li><img :src="righticon" alt=""></li> |
|
| 12 |
- <li>통합검색</li> |
|
| 13 |
- </ul> |
|
| 14 |
- </div> |
|
| 15 |
- </div> |
|
| 16 |
- <form action="search" class="search-form mb-40"> |
|
| 17 |
- <dl> |
|
| 18 |
- <dd class="mb-15"> |
|
| 19 |
- <p>검색범위</p> |
|
| 20 |
- <ul> |
|
| 21 |
- <li> |
|
| 22 |
- <input type="checkbox" id="allScope" v-model="isChkAllScope" @change="fnChkAllOptions('scope')" />
|
|
| 23 |
- <label for="allScope">전체</label> |
|
| 24 |
- </li> |
|
| 25 |
- <li v-for="(scope, idx) in searchType" :key="idx"> |
|
| 26 |
- <input type="checkbox" :id="idx" :name="searchType" :value="scope.key" v-model="searchReqDTO.searchType" @change="fnChkOption('scope')" />
|
|
| 27 |
- <label :for="idx">{{ scope.value }}</label>
|
|
| 28 |
- </li> |
|
| 29 |
- </ul> |
|
| 30 |
- </dd> |
|
| 31 |
- <dd class="mb-15"> |
|
| 32 |
- <p>검색어</p> |
|
| 33 |
- <div class="wfull"><input type="text" v-model="searchReqDTO.searchText"></div> |
|
| 34 |
- </dd> |
|
| 35 |
- <dd class="mb-15"> |
|
| 36 |
- <p>생산연도</p> |
|
| 37 |
- <input type="date" v-model="searchReqDTO.startYear"> |
|
| 38 |
- <p class="mark">~</p> |
|
| 39 |
- <input type="date" v-model="searchReqDTO.endYear"> |
|
| 40 |
- </dd> |
|
| 41 |
- <dd class="mb-20"> |
|
| 42 |
- <p>카테고리</p> |
|
| 43 |
- <ul> |
|
| 44 |
- <li v-for="(category, idx) of categorys" :key="idx"> |
|
| 45 |
- <input type="checkbox" :id="category.ctgryId" name="categorys" :value="category.ctgryId" v-model="searchReqDTO.searchCtgry" /> |
|
| 46 |
- <label :for="category.ctgryId">{{ category.ctgryNm }}</label>
|
|
| 47 |
- </li> |
|
| 48 |
- </ul> |
|
| 49 |
- </dd> |
|
| 50 |
- <dd class="mb-15"> |
|
| 51 |
- <p>정렬</p> |
|
| 52 |
- <ul> |
|
| 53 |
- <li v-for="(order, idx) of orders" :key="idx"> |
|
| 54 |
- <input type="radio" :id="order.key" name="orders" :value="order.key" v-model="searchReqDTO.order" /> |
|
| 55 |
- <label :for="order.key">{{ order.value }}</label>
|
|
| 56 |
- </li> |
|
| 57 |
- </ul> |
|
| 58 |
- </dd> |
|
| 59 |
- <div class="btn-group"> |
|
| 60 |
- <button class="reset"><img :src="reseticon" alt=""> |
|
| 61 |
- <p>초기화</p> |
|
| 62 |
- </button> |
|
| 63 |
- <button class="search"><img :src="searchicon" alt=""> |
|
| 64 |
- <p>검색</p> |
|
| 65 |
- </button> |
|
| 66 |
- </div> |
|
| 67 |
- </dl> |
|
| 68 |
- </form> |
|
| 69 |
- <div class="search-result"> |
|
| 70 |
- <ul> |
|
| 71 |
- <div class="flex-sp-bw mb-20"> |
|
| 72 |
- <div class="resultext wfull"> |
|
| 73 |
- <img :src="resulticon" alt=""> |
|
| 74 |
- <p>총 <b>{{ count }}개</b>의 사진 기록물이 검색되었습니다. </p>
|
|
| 75 |
- </div> |
|
| 76 |
- <select v-model="itemsPerPage" @change="changeItemsPerPage"> |
|
| 77 |
- <option :value="5" selected>5개</option> |
|
| 78 |
- <option :value="10">10개</option> |
|
| 79 |
- <option :value="15">15개</option> |
|
| 80 |
- </select> |
|
| 81 |
- </div> |
|
| 82 |
- <li v-for="(resultitem, index) in paginatedItems" :key="index" class="mb-30"> |
|
| 83 |
- <div class="result-box"> |
|
| 84 |
- <div class="main-img"><img :src="resultitem.img" alt=""></div> |
|
| 85 |
- <div class="text-box"> |
|
| 86 |
- <h5>{{ resultitem.title }}</h5>
|
|
| 87 |
- <p class="address">{{ resultitem.address }}</p>
|
|
| 88 |
- <p class="text">{{ resultitem.content }}</p>
|
|
| 89 |
- <div class="mb-20"> |
|
| 90 |
- <ul class="category"> |
|
| 91 |
- <li v-if="resultitem.category1" class="category1">카테고리1</li> |
|
| 92 |
- <li v-if="resultitem.category2" class="category2">카테고리2</li> |
|
| 93 |
- </ul> |
|
| 94 |
- </div> |
|
| 95 |
- <div class="date"> |
|
| 2 |
+ <div class="content"> |
|
| 3 |
+ <div class="sub-title-area mb-30"> |
|
| 4 |
+ <h2>사진 기록물</h2> |
|
| 5 |
+ <div class="breadcrumb-list"> |
|
| 96 | 6 |
<ul> |
| 97 |
- <li>생산연도 <b>{{ resultitem.year }}</b></li>
|
|
| 98 |
- <li>|</li> |
|
| 99 |
- <li>등록 <b>{{ resultitem.date }}</b></li>
|
|
| 7 |
+ <!-- Bind the image source dynamically for homeicon --> |
|
| 8 |
+ <li><img :src="homeicon" alt="Home Icon"> |
|
| 9 |
+ <p>기록물</p> |
|
| 10 |
+ </li> |
|
| 11 |
+ <li><img :src="righticon" alt=""></li> |
|
| 12 |
+ <li>통합검색</li> |
|
| 100 | 13 |
</ul> |
| 101 |
- </div> |
|
| 102 | 14 |
</div> |
| 103 |
- </div> |
|
| 104 |
- </li> |
|
| 105 |
- </ul> |
|
| 106 |
- <button> <router-link :to="{ path: '/PicHistoryInsert.page' }" class="insert">등록</router-link></button>
|
|
| 107 |
- <div class="pagination"> |
|
| 108 |
- <!-- Previous and Next Page Buttons --> |
|
| 109 |
- <button @click="previousPage" :disabled="currentPage === 1">Prev</button> |
|
| 110 |
- <span>{{ currentPage }} / {{ totalPages }}</span>
|
|
| 111 |
- <button @click="nextPage" :disabled="currentPage === totalPages">Next</button> |
|
| 112 |
- </div> |
|
| 15 |
+ </div> |
|
| 16 |
+ <form action="search" class="search-form mb-40"> |
|
| 17 |
+ <dl> |
|
| 18 |
+ <dd class="mb-15"> |
|
| 19 |
+ <p>검색범위</p> |
|
| 20 |
+ <ul> |
|
| 21 |
+ <li> |
|
| 22 |
+ <input type="checkbox" id="allScope" v-model="isChkAllScope" |
|
| 23 |
+ @change="fnChkAllOptions('scope')" />
|
|
| 24 |
+ <label for="allScope">전체</label> |
|
| 25 |
+ </li> |
|
| 26 |
+ <li v-for="(scope, idx) in searchType" :key="idx"> |
|
| 27 |
+ <input type="checkbox" :id="idx" :name="searchType" :value="scope.key" |
|
| 28 |
+ v-model="searchReqDTO.searchType" @change="fnChkOption('scope')" />
|
|
| 29 |
+ <label :for="idx">{{ scope.value }}</label>
|
|
| 30 |
+ </li> |
|
| 31 |
+ </ul> |
|
| 32 |
+ </dd> |
|
| 33 |
+ <dd class="mb-15"> |
|
| 34 |
+ <p>검색어</p> |
|
| 35 |
+ <div class="wfull"><input type="text" v-model="searchReqDTO.searchText"></div> |
|
| 36 |
+ </dd> |
|
| 37 |
+ <dd class="mb-15"> |
|
| 38 |
+ <p>생산연도</p> |
|
| 39 |
+ <input type="date" v-model="searchReqDTO.startYear"> |
|
| 40 |
+ <p class="mark">~</p> |
|
| 41 |
+ <input type="date" v-model="searchReqDTO.endYear"> |
|
| 42 |
+ </dd> |
|
| 43 |
+ <dd class="mb-20"> |
|
| 44 |
+ <p>카테고리</p> |
|
| 45 |
+ <ul> |
|
| 46 |
+ <li v-for="(category, idx) of categorys" :key="idx"> |
|
| 47 |
+ <input type="checkbox" :id="category.ctgryId" name="categorys" :value="category.ctgryId" |
|
| 48 |
+ v-model="searchReqDTO.searchCtgry" /> |
|
| 49 |
+ <label :for="category.ctgryId">{{ category.ctgryNm }}</label>
|
|
| 50 |
+ </li> |
|
| 51 |
+ </ul> |
|
| 52 |
+ </dd> |
|
| 53 |
+ <dd class="mb-15"> |
|
| 54 |
+ <p>정렬</p> |
|
| 55 |
+ <ul> |
|
| 56 |
+ <li v-for="(order, idx) of orders" :key="idx"> |
|
| 57 |
+ <input type="radio" :id="order.key" name="orders" :value="order.key" |
|
| 58 |
+ v-model="searchReqDTO.order" /> |
|
| 59 |
+ <label :for="order.key">{{ order.value }}</label>
|
|
| 60 |
+ </li> |
|
| 61 |
+ </ul> |
|
| 62 |
+ </dd> |
|
| 63 |
+ <div class="btn-group"> |
|
| 64 |
+ <button class="reset"><img :src="reseticon" alt=""> |
|
| 65 |
+ <p>초기화</p> |
|
| 66 |
+ </button> |
|
| 67 |
+ <button class="search"><img :src="searchicon" alt=""> |
|
| 68 |
+ <p>검색</p> |
|
| 69 |
+ </button> |
|
| 70 |
+ </div> |
|
| 71 |
+ |
|
| 72 |
+ </dl> |
|
| 73 |
+ |
|
| 74 |
+ </form> |
|
| 75 |
+ <div class="search-result"> |
|
| 76 |
+ <div class="tabs"> |
|
| 77 |
+ <div class="flex-sp-bw mb-20 align-center"> |
|
| 78 |
+ <div class="resultext "> |
|
| 79 |
+ <img :src="resulticon" alt=""> |
|
| 80 |
+ <p>총 <b>{{ count }}개</b>의 사진 기록물이 검색되었습니다. </p>
|
|
| 81 |
+ </div> |
|
| 82 |
+ <div class="flex"> |
|
| 83 |
+ <ul class="tab-box mb-20"> |
|
| 84 |
+ <li v-for="(tab, index) in tabs" :key="index" class="tab-title" |
|
| 85 |
+ :class="{ active: selectedTab === tab.id }" @click="selectTab(tab.id)">
|
|
| 86 |
+ <img :src="selectedTab === tab.id ? tab.activeImage : tab.inactiveImage" |
|
| 87 |
+ :alt="tab.title" class="tab-icon" /> |
|
| 88 |
+ <p><b>{{ tab.title }}</b></p>
|
|
| 89 |
+ </li> |
|
| 90 |
+ </ul> |
|
| 91 |
+ <div class="select-box"> |
|
| 92 |
+ <select v-model="itemsPerPage" @change="changeItemsPerPage"> |
|
| 93 |
+ <option :value="5" selected>5개</option> |
|
| 94 |
+ <option :value="10">10개</option> |
|
| 95 |
+ <option :value="15">15개</option> |
|
| 96 |
+ </select> |
|
| 97 |
+ </div> |
|
| 98 |
+ </div> |
|
| 99 |
+ |
|
| 100 |
+ </div> |
|
| 101 |
+ |
|
| 102 |
+ <div class="tab-content"> |
|
| 103 |
+ <!-- Loop through tabContents, and only display content that matches selectedTab --> |
|
| 104 |
+ <div v-for="(tabContent, idx) in tabContents" :key="idx"> |
|
| 105 |
+ <!-- Display content only if the tab's ID matches the selectedTab --> |
|
| 106 |
+ <div v-show="tabContent.id === selectedTab"> |
|
| 107 |
+ <!-- 카드형 Section (Card Layout) --> |
|
| 108 |
+ <div v-if="tabContent.viewType === 'card'"> |
|
| 109 |
+ <ul class="card-wrap"> |
|
| 110 |
+ <li v-for="(resultitem, index) in paginatedItems" :key="index" class="mb-30"> |
|
| 111 |
+ <div class="result-box"> |
|
| 112 |
+ <!-- Main Image Section --> |
|
| 113 |
+ <div class="main-img"> |
|
| 114 |
+ <img :src="resultitem.img" alt="" class="tab-image" /> |
|
| 115 |
+ </div> |
|
| 116 |
+ <!-- Text Section --> |
|
| 117 |
+ <div class="text-box"> |
|
| 118 |
+ <router-link :to="{ path: '/PicHistoryDetail.page' }">
|
|
| 119 |
+ <h5>{{ resultitem.title }}</h5>
|
|
| 120 |
+ </router-link> |
|
| 121 |
+ |
|
| 122 |
+ <p class="address">{{ resultitem.address }}</p>
|
|
| 123 |
+ <p class="text">{{ resultitem.content }}</p>
|
|
| 124 |
+ |
|
| 125 |
+ <div class="mb-20"> |
|
| 126 |
+ <ul class="category"> |
|
| 127 |
+ <li v-if="resultitem.category1" class="category1">카테고리1</li> |
|
| 128 |
+ <li v-if="resultitem.category2" class="category2">카테고리2</li> |
|
| 129 |
+ </ul> |
|
| 130 |
+ </div> |
|
| 131 |
+ |
|
| 132 |
+ <div class="date"> |
|
| 133 |
+ <ul> |
|
| 134 |
+ <li>생산연도 <b>{{ resultitem.year }}</b></li>
|
|
| 135 |
+ <li>|</li> |
|
| 136 |
+ <li>등록 <b>{{ resultitem.date }}</b></li>
|
|
| 137 |
+ </ul> |
|
| 138 |
+ </div> |
|
| 139 |
+ </div> |
|
| 140 |
+ </div> |
|
| 141 |
+ </li> |
|
| 142 |
+ </ul> |
|
| 143 |
+ |
|
| 144 |
+ <!-- Empty State if no results in paginatedItems --> |
|
| 145 |
+ <div v-if="paginatedItems.length === 0" class="no-results"> |
|
| 146 |
+ <p>등록된 게시물이 없습니다.</p> |
|
| 147 |
+ </div> |
|
| 148 |
+ </div> |
|
| 149 |
+ |
|
| 150 |
+ <!-- 리스트형 Section (List Layout) --> |
|
| 151 |
+ <div v-if="tabContent.viewType === 'list'"> |
|
| 152 |
+ <ul class="list-wrap"> |
|
| 153 |
+ <li v-for="(resultitem, index) in paginatedItems" :key="index" class="mb-30"> |
|
| 154 |
+ <div class="text-box"> |
|
| 155 |
+ <h5>{{ resultitem.title }}</h5>
|
|
| 156 |
+ <p class="address">{{ resultitem.address }}</p>
|
|
| 157 |
+ |
|
| 158 |
+ <div class="flex-sp-bw"> |
|
| 159 |
+ <div class="mb-20"> |
|
| 160 |
+ <ul class="category"> |
|
| 161 |
+ <li v-if="resultitem.category1" class="category1">카테고리1</li> |
|
| 162 |
+ <li v-if="resultitem.category2" class="category2">카테고리2</li> |
|
| 163 |
+ </ul> |
|
| 164 |
+ </div> |
|
| 165 |
+ |
|
| 166 |
+ <div class="date "> |
|
| 167 |
+ <ul> |
|
| 168 |
+ <li>생산연도 <b>{{ resultitem.year }}</b></li>
|
|
| 169 |
+ <li>|</li> |
|
| 170 |
+ <li>등록 <b>{{ resultitem.date }}</b></li>
|
|
| 171 |
+ </ul> |
|
| 172 |
+ </div> |
|
| 173 |
+ </div> |
|
| 174 |
+ </div> |
|
| 175 |
+ </li> |
|
| 176 |
+ </ul> |
|
| 177 |
+ |
|
| 178 |
+ <!-- Empty State if no results in paginatedItems --> |
|
| 179 |
+ <div v-if="paginatedItems.length === 0" class="no-results"> |
|
| 180 |
+ <p>등록된 게시물이 없습니다.</p> |
|
| 181 |
+ </div> |
|
| 182 |
+ </div> |
|
| 183 |
+ </div> |
|
| 184 |
+ </div> |
|
| 185 |
+ </div> |
|
| 186 |
+ </div> |
|
| 187 |
+ |
|
| 188 |
+ <div class="btn-group flex-end mt-40"><button class="register"> <router-link |
|
| 189 |
+ :to="{ path: '/PicHistoryInsert.page' }">등록</router-link></button></div>
|
|
| 190 |
+ <div class="pagination flex-center mt-40"> |
|
| 191 |
+ |
|
| 192 |
+ <!-- Previous and Next Page Buttons --> |
|
| 193 |
+ <button> |
|
| 194 |
+ <DoubleLeftOutlined /> |
|
| 195 |
+ </button> |
|
| 196 |
+ <button @click="previousPage" :disabled="currentPage === 1"> |
|
| 197 |
+ <LeftOutlined /> |
|
| 198 |
+ </button> |
|
| 199 |
+ <button class="page-number clicked">1</button> |
|
| 200 |
+ <button @click="nextPage" :disabled="currentPage === totalPages"> |
|
| 201 |
+ <RightOutlined /> |
|
| 202 |
+ </button> |
|
| 203 |
+ <button> |
|
| 204 |
+ <DoubleRightOutlined /> |
|
| 205 |
+ </button> |
|
| 206 |
+ </div> |
|
| 207 |
+ </div> |
|
| 113 | 208 |
</div> |
| 114 |
- </div> |
|
| 209 |
+ |
|
| 115 | 210 |
</template> |
| 116 | 211 |
<script> |
| 212 |
+import { DoubleLeftOutlined, LeftOutlined, RightOutlined, DoubleRightOutlined } from '@ant-design/icons-vue';
|
|
| 117 | 213 |
import { findAllCategoryProc } from "../../../resources/api/category"; // 카테고리 목록 검색
|
| 118 | 214 |
|
| 119 | 215 |
export default {
|
| 120 |
- data() {
|
|
| 121 |
- return {
|
|
| 122 |
- currentPage: 1, // Current page number |
|
| 123 |
- itemsPerPage: 5, |
|
| 124 |
- resulticon: "client/resources/images/icon/r-check.png", |
|
| 125 |
- homeicon: 'client/resources/images/icon/home.png', |
|
| 126 |
- searchicon: 'client/resources/images/icon/search.png', |
|
| 127 |
- reseticon: 'client/resources/images/icon/reset.png', |
|
| 128 |
- righticon: 'client/resources/images/icon/right.png', |
|
| 216 |
+ components: {
|
|
| 217 |
+ DoubleLeftOutlined, |
|
| 218 |
+ LeftOutlined, |
|
| 219 |
+ RightOutlined, |
|
| 220 |
+ DoubleRightOutlined, |
|
| 221 |
+ }, |
|
| 222 |
+ data() {
|
|
| 223 |
+ return {
|
|
| 224 |
+ selectedTab: 1, |
|
| 225 |
+ // 검색용 객체 |
|
| 226 |
+ searchReqDTO: {
|
|
| 227 |
+ searchType: [], |
|
| 228 |
+ searchText: null, |
|
| 229 |
+ startYear: null, |
|
| 230 |
+ endYear: null, |
|
| 231 |
+ searchTy: null, |
|
| 232 |
+ searchCtgry: [], |
|
| 233 |
+ order: "rgsde", |
|
| 234 |
+ }, |
|
| 235 |
+ tabs: [ |
|
| 129 | 236 |
|
| 130 |
- // 검색용 객체 |
|
| 131 |
- searchReqDTO: {
|
|
| 132 |
- searchType: [], |
|
| 133 |
- searchText: null, |
|
| 134 |
- startYear: null, |
|
| 135 |
- endYear: null, |
|
| 136 |
- searchTy: null, |
|
| 137 |
- searchCtgry: [], |
|
| 138 |
- order: "rgsde", |
|
| 139 |
- }, |
|
| 237 |
+ {
|
|
| 238 |
+ id: 1, |
|
| 239 |
+ title: "카드형", |
|
| 240 |
+ activeImage: "client/resources/images/mCont_ico1_on.png", // Active tab image |
|
| 241 |
+ inactiveImage: "client/resources/images/mCont_ico1_off.png", |
|
| 242 |
+ }, |
|
| 243 |
+ {
|
|
| 244 |
+ id: 2, |
|
| 245 |
+ title: "리스트형", |
|
| 246 |
+ activeImage: "client/resources/images/mCont_ico2_on.png", // Active tab image |
|
| 247 |
+ inactiveImage: "client/resources/images/mCont_ico2_off.png", |
|
| 248 |
+ }, |
|
| 249 |
+ ], |
|
| 250 |
+ tabContents: [ |
|
| 251 |
+ { id: 1, viewType: 'card', list: [{ sj: 'Item 1', rgsde: '2025-03-01', files: [{ filePath: 'image1.png' }] }] },
|
|
| 252 |
+ { id: 2, viewType: 'list', list: [{ sj: 'Item 2', rgsde: '2025-03-02', files: [{ filePath: 'image2.png' }] }] },
|
|
| 253 |
+ ], |
|
| 254 |
+ paginatedItems: [], |
|
| 255 |
+ resultitems: [ |
|
| 256 |
+ {
|
|
| 257 |
+ img: 'client/resources/images/img6.png', |
|
| 258 |
+ title: '사진 기록물 제목', |
|
| 259 |
+ address: '경상북도 구미시 송정대로 55', |
|
| 260 |
+ content: '대한민국 최대의 내륙 산업단지를 보유하고, 서울로부터 277km, 부산으로부터 167km 거리에 있으며, 면적은 615㎢로 경상북도 전체 면적의 3.2%에 달합니다. 인구는 41만 명이고, 선산읍, 고아읍, 산동읍을 비롯한 3읍, 5면, 17개 동으로 구성되어…', |
|
| 261 |
+ category1: true, |
|
| 262 |
+ category2: true, |
|
| 263 |
+ year: 2020, |
|
| 264 |
+ date: '2021-01-01' |
|
| 265 |
+ }, |
|
| 140 | 266 |
|
| 141 |
- isChkAllScope: false, // 검색범위 전체 체크 여부 |
|
| 142 |
- searchType: [ |
|
| 143 |
- { key: "sj", value: "제목" },
|
|
| 144 |
- { key: "cn", value: "내용" },
|
|
| 145 |
- { key: "adres", value: "주소" },
|
|
| 146 |
- ], // 검색범위 목록 |
|
| 147 |
- categorys: [], // 카테고리 목록 |
|
| 148 |
- orders: [ |
|
| 149 |
- { key: "rgsde", value: "최신" },
|
|
| 150 |
- { key: "rdcnt", value: "인기" },
|
|
| 151 |
- ], // 정렬 목록 |
|
| 152 |
- |
|
| 153 |
- searchResult: [], // 검색결과 |
|
| 154 |
- resultitems: [ |
|
| 155 |
- {
|
|
| 156 |
- img: 'client/resources/images/img6.png', |
|
| 157 |
- title: '사진 기록물 제목', |
|
| 158 |
- address: '경상북도 구미시 송정대로 55', |
|
| 159 |
- content: '대한민국 최대의 내륙 산업단지를 보유하고, 서울로부터 277km, 부산으로부터 167km 거리에 있으며, 면적은 615㎢로 경상북도 전체 면적의 3.2%에 달합니다. 인구는 41만 명이고, 선산읍, 고아읍, 산동읍을 비롯한 3읍, 5면, 17개 동으로 구성되어…', |
|
| 160 |
- category1: true, |
|
| 161 |
- category2: true, |
|
| 162 |
- year: 2020, |
|
| 163 |
- date: '2021-01-01' |
|
| 267 |
+ ], |
|
| 268 |
+ currentPage: 1, // Current page number |
|
| 269 |
+ itemsPerPage: 5, |
|
| 270 |
+ resulticon: "client/resources/images/icon/r-check.png", |
|
| 271 |
+ homeicon: 'client/resources/images/icon/home.png', |
|
| 272 |
+ searchicon: 'client/resources/images/icon/search.png', |
|
| 273 |
+ reseticon: 'client/resources/images/icon/reset.png', |
|
| 274 |
+ righticon: 'client/resources/images/icon/right.png', |
|
| 275 |
+ count: 23, |
|
| 276 |
+ checkOptions: [ |
|
| 277 |
+ '전체', |
|
| 278 |
+ '사진', |
|
| 279 |
+ '영상', |
|
| 280 |
+ '미디어 영상', |
|
| 281 |
+ '보도자료', |
|
| 282 |
+ ], |
|
| 283 |
+ checkOptions2: [ |
|
| 284 |
+ '전체', |
|
| 285 |
+ '제목', |
|
| 286 |
+ '내용', |
|
| 287 |
+ '주소', |
|
| 288 |
+ ], |
|
| 289 |
+ checkOptions3: [ |
|
| 290 |
+ '카테고리1', |
|
| 291 |
+ '카테고리2', |
|
| 292 |
+ '카테고리3', |
|
| 293 |
+ '카테고리4', |
|
| 294 |
+ '카테고리5', |
|
| 295 |
+ ], |
|
| 296 |
+ checkOptions4: [ |
|
| 297 |
+ '최신', |
|
| 298 |
+ '인기', |
|
| 299 |
+ ], |
|
| 300 |
+ isChkAllScope: false, // 검색범위 전체 체크 여부 |
|
| 301 |
+ searchType: [ |
|
| 302 |
+ { key: "sj", value: "제목" },
|
|
| 303 |
+ { key: "cn", value: "내용" },
|
|
| 304 |
+ { key: "adres", value: "주소" },
|
|
| 305 |
+ ], // 검색범위 목록 |
|
| 306 |
+ categorys: [], // 카테고리 목록 |
|
| 307 |
+ orders: [ |
|
| 308 |
+ { key: "rgsde", value: "최신" },
|
|
| 309 |
+ { key: "rdcnt", value: "인기" },
|
|
| 310 |
+ ], // 정렬 목록 |
|
| 311 |
+ }; |
|
| 312 |
+ }, |
|
| 313 |
+ computed: {
|
|
| 314 |
+ // Total number of pages |
|
| 315 |
+ totalPages() {
|
|
| 316 |
+ return Math.ceil(this.resultitems.length / this.itemsPerPage); |
|
| 164 | 317 |
}, |
| 165 |
- ] |
|
| 166 |
- }; |
|
| 167 |
- }, |
|
| 168 | 318 |
|
| 169 |
- computed: {
|
|
| 170 |
- // Total number of pages |
|
| 171 |
- totalPages() {
|
|
| 172 |
- return Math.ceil(this.resultitems.length / this.itemsPerPage); |
|
| 319 |
+ // Paginated items based on current page and items per page |
|
| 320 |
+ paginatedItems() {
|
|
| 321 |
+ const start = (this.currentPage - 1) * this.itemsPerPage; |
|
| 322 |
+ const end = start + this.itemsPerPage; |
|
| 323 |
+ return this.resultitems.slice(start, end); |
|
| 324 |
+ }, |
|
| 325 |
+ }, |
|
| 326 |
+ created() {
|
|
| 327 |
+ // 초기 데이터 세팅 |
|
| 328 |
+ this.isChkAllScope = true; |
|
| 329 |
+ this.searchReqDTO.searchType = this.searchType.map(item => item.key); |
|
| 330 |
+ this.searchReqDTO.order = this.orders[0].key |
|
| 331 |
+ |
|
| 332 |
+ this.fnFindCategorys(); // 카테고리 목록 조회 (검색조건 없음) |
|
| 333 |
+ }, |
|
| 334 |
+ methods: {
|
|
| 335 |
+ selectTab(tabId) {
|
|
| 336 |
+ this.selectedTab = tabId; // Update the selected tab index |
|
| 337 |
+ }, |
|
| 338 |
+ // Change the number of items displayed per page |
|
| 339 |
+ changeItemsPerPage() {
|
|
| 340 |
+ this.currentPage = 1; // Reset to first page when changing items per page |
|
| 341 |
+ }, |
|
| 342 |
+ previousPage() {
|
|
| 343 |
+ if (this.currentPage > 1) {
|
|
| 344 |
+ this.currentPage--; |
|
| 345 |
+ } |
|
| 346 |
+ }, |
|
| 347 |
+ |
|
| 348 |
+ // Go to the next page |
|
| 349 |
+ nextPage() {
|
|
| 350 |
+ if (this.currentPage < this.totalPages) {
|
|
| 351 |
+ this.currentPage++; |
|
| 352 |
+ } |
|
| 353 |
+ }, |
|
| 354 |
+ isChkAllScope: false, // 검색범위 전체 체크 여부 |
|
| 355 |
+ searchType: [ |
|
| 356 |
+ { key: "sj", value: "제목" },
|
|
| 357 |
+ { key: "cn", value: "내용" },
|
|
| 358 |
+ { key: "adres", value: "주소" },
|
|
| 359 |
+ ], // 검색범위 목록 |
|
| 360 |
+ categorys: [], // 카테고리 목록 |
|
| 361 |
+ orders: [ |
|
| 362 |
+ { key: "rgsde", value: "최신" },
|
|
| 363 |
+ { key: "rdcnt", value: "인기" },
|
|
| 364 |
+ ], // 정렬 목록 |
|
| 365 |
+ |
|
| 366 |
+ async fnFindCategorys() {
|
|
| 367 |
+ try {
|
|
| 368 |
+ const response = await findAllCategoryProc(); |
|
| 369 |
+ this.categorys = response.data.data.ctgry; |
|
| 370 |
+ } catch (error) {
|
|
| 371 |
+ if (error.response) {
|
|
| 372 |
+ console.log("에러 응답:", error.response.data);
|
|
| 373 |
+ } |
|
| 374 |
+ console.error("Error:", error);
|
|
| 375 |
+ } |
|
| 376 |
+ }, |
|
| 377 |
+ |
|
| 378 |
+ // 통합검색 |
|
| 379 |
+ async fnFindAllDatas() {
|
|
| 380 |
+ try {
|
|
| 381 |
+ let params = {};
|
|
| 382 |
+ if (this.searchReqDTO.searchRecord.length > 0) {
|
|
| 383 |
+ params.searchRecords = this.searchReqDTO.searchRecord.join(',');
|
|
| 384 |
+ } |
|
| 385 |
+ if (this.searchReqDTO.searchType.length > 0) {
|
|
| 386 |
+ params.searchTypes = this.searchReqDTO.searchType.join(',');
|
|
| 387 |
+ } |
|
| 388 |
+ if (this.searchReqDTO.searchCtgry.length > 0) {
|
|
| 389 |
+ params.searchCtgries = this.searchReqDTO.searchCtgry.join(',');
|
|
| 390 |
+ } |
|
| 391 |
+ params.searchText = this.searchReqDTO.searchText; |
|
| 392 |
+ params.startYear = this.searchReqDTO.startYear; |
|
| 393 |
+ params.endYear = this.searchReqDTO.endYear; |
|
| 394 |
+ params.order = this.searchReqDTO.order; |
|
| 395 |
+ |
|
| 396 |
+ // API 호출 |
|
| 397 |
+ const response = await findAllDatas(params); |
|
| 398 |
+ this.searchResult = response.data.data.searchResult; |
|
| 399 |
+ } catch (error) {
|
|
| 400 |
+ if (error.response) {
|
|
| 401 |
+ console.log("에러 응답:", error.response.data);
|
|
| 402 |
+ } |
|
| 403 |
+ console.error("Error:", error);
|
|
| 404 |
+ } |
|
| 405 |
+ }, |
|
| 173 | 406 |
}, |
| 174 | 407 |
|
| 175 |
- // Paginated items based on current page and items per page |
|
| 176 |
- paginatedItems() {
|
|
| 177 |
- const start = (this.currentPage - 1) * this.itemsPerPage; |
|
| 178 |
- const end = start + this.itemsPerPage; |
|
| 179 |
- return this.resultitems.slice(start, end); |
|
| 180 |
- }, |
|
| 181 |
- }, |
|
| 182 | 408 |
|
| 183 |
- created() {
|
|
| 184 |
- // 초기 데이터 세팅 |
|
| 185 |
- this.isChkAllScope = true; |
|
| 186 |
- this.searchReqDTO.searchType = this.searchType.map(item => item.key); |
|
| 187 |
- this.searchReqDTO.order = this.orders[0].key |
|
| 188 | 409 |
|
| 189 |
- this.fnFindCategorys(); // 카테고리 목록 조회 (검색조건 없음) |
|
| 190 |
- }, |
|
| 191 |
- |
|
| 192 |
- methods: {
|
|
| 193 |
- // Change the number of items displayed per page |
|
| 194 |
- changeItemsPerPage() {
|
|
| 195 |
- this.currentPage = 1; // Reset to first page when changing items per page |
|
| 196 |
- }, |
|
| 197 |
- |
|
| 198 |
- // Go to the previous page |
|
| 199 |
- previousPage() {
|
|
| 200 |
- if (this.currentPage > 1) {
|
|
| 201 |
- this.currentPage--; |
|
| 202 |
- } |
|
| 203 |
- }, |
|
| 204 |
- |
|
| 205 |
- // Go to the next page |
|
| 206 |
- nextPage() {
|
|
| 207 |
- if (this.currentPage < this.totalPages) {
|
|
| 208 |
- this.currentPage++; |
|
| 209 |
- } |
|
| 210 |
- }, |
|
| 211 |
- |
|
| 212 |
- // 카테고리 목록 조회 |
|
| 213 |
- async fnFindCategorys() {
|
|
| 214 |
- try {
|
|
| 215 |
- const response = await findAllCategoryProc(); |
|
| 216 |
- this.categorys = response.data.data.ctgry; |
|
| 217 |
- } catch (error) {
|
|
| 218 |
- if (error.response) {
|
|
| 219 |
- console.log("에러 응답:", error.response.data);
|
|
| 220 |
- } |
|
| 221 |
- console.error("Error:", error);
|
|
| 222 |
- } |
|
| 223 |
- }, |
|
| 224 |
- |
|
| 225 |
- // 통합검색 |
|
| 226 |
- async fnFindAllDatas() {
|
|
| 227 |
- try {
|
|
| 228 |
- let params = {};
|
|
| 229 |
- if (this.searchReqDTO.searchRecord.length > 0) {
|
|
| 230 |
- params.searchRecords = this.searchReqDTO.searchRecord.join(',');
|
|
| 231 |
- } |
|
| 232 |
- if (this.searchReqDTO.searchType.length > 0) {
|
|
| 233 |
- params.searchTypes = this.searchReqDTO.searchType.join(',');
|
|
| 234 |
- } |
|
| 235 |
- if (this.searchReqDTO.searchCtgry.length > 0) {
|
|
| 236 |
- params.searchCtgries = this.searchReqDTO.searchCtgry.join(',');
|
|
| 237 |
- } |
|
| 238 |
- params.searchText = this.searchReqDTO.searchText; |
|
| 239 |
- params.startYear = this.searchReqDTO.startYear; |
|
| 240 |
- params.endYear = this.searchReqDTO.endYear; |
|
| 241 |
- params.order = this.searchReqDTO.order; |
|
| 242 |
- |
|
| 243 |
- // API 호출 |
|
| 244 |
- const response = await findAllDatas(params); |
|
| 245 |
- this.searchResult = response.data.data.searchResult; |
|
| 246 |
- } catch (error) {
|
|
| 247 |
- if (error.response) {
|
|
| 248 |
- console.log("에러 응답:", error.response.data);
|
|
| 249 |
- } |
|
| 250 |
- console.error("Error:", error);
|
|
| 251 |
- } |
|
| 252 |
- }, |
|
| 253 |
- }, |
|
| 254 | 410 |
}; |
| 255 | 411 |
</script> |
| 256 | 412 |
<style scoped></style>(파일 끝에 줄바꿈 문자 없음) |
Add a comment
Delete comment
Once you delete this comment, you won't be able to recover it. Are you sure you want to delete this comment?