Commit @2c68f894bcc9c059b4f7dc61391a25743213a619

최정임 03-20

250320 최정임 사진기록물 퍼블리싱

@2c68f894bcc9c059b4f7dc61391a25743213a619

0d1df87

2c68f89

client/resources/css/common/common.css

--- client/resources/css/common/common.css

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


     padding: 0; margin: 0;  color: #000;
     font-family: "Pretendard-R";
 }
-
 html{font-size: 10px;}
 
 a{text-decoration: none; display: block;}
 li{list-style: none;}
 button{border: 0; background: none; cursor: pointer;}
-input{border: 0;}
+input{border: 0; flex-shrink: 0;}
 input::placeholder{color: #999999;}
 input[type="checkbox"]{
     width: 15px;

 .wfull{width: -webkit-fill-available;}
 
 .flex{display: flex;}
+.align-center{align-items: center;}
 .flex-end{
     display: flex;
     justify-content: end;
+}
+.flex-center{
+    display: flex;
+    justify-content: center;
 }
 .flex-sp-bw{
     display: flex;

 
 .mt-5{margin-top: 5px;}
 
+.mb-5{margin-bottom: 5px;}
 .mb-10{margin-bottom: 10px;}
 .mb-15{margin-bottom: 15px;}
 .mb-20{margin-bottom: 20px;}

0d1df87

2c68f89

client/resources/css/user/layout.css

--- client/resources/css/user/layout.css

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


 .container{
-    min-height: 100vh;
 }
 .header-container{
     width: 1500px;

0d1df87

2c68f89

client/resources/css/user/main.css

--- client/resources/css/user/main.css

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


-.visual{position: relative;}
-.pagination{
-    color: #fff;
-    font-size: 20px;
-    position: absolute;
-    bottom: 10.5rem;
-    right: 58rem;
-    z-index: 50;
-    display: flex;
-    .page-count{color: #fff;}
-    button .anticon {
-        font-size: 20px;  color: #fff;
+.visual{
+    position: relative;
+    .pagination{
+        color: #fff;
+        font-size: 20px;
+        position: absolute;
+        bottom: 10.5rem;
+        right: 58rem;
+        z-index: 50;
+        display: flex;
+        .page-count{color: #fff;}
+        button .anticon {
+            font-size: 20px;  color: #fff;
+        }
     }
 }
+
 .search-wrap{
     position: absolute;
     bottom: 174px;

0d1df87

2c68f89

client/resources/css/user/sub.css

--- client/resources/css/user/sub.css

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


             position: absolute;
         }
     }
-    .gopage{
+
+    .gopage {
         font-family: "Pretendard-L";
         font-size: 17px;
         text-align: right;
-        
+
     }
-    .gopage::after{
+
+    .gopage::after {
         content: '\2192';
         font-size: 18px;
+    }
+
+    .pagination {
+        margin-top: 20px;
+        display: flex;
+        align-items: center;
+    }
+
+    .pagination select {
+        margin-right: 10px;
+    }
+
+    .pagination button {
+        padding: 5px 10px;
+        margin: 0 5px;
+        cursor: pointer;
+    }
+
+    .pagination button:disabled {
+        background-color: #ccc;
+        cursor: not-allowed;
     }
 }
 

 
     li {
         font-size: 16px;
-        font-family: "Pretendard-SB";
-        color: #000;
+
+        p {
+            font-size: 16px;
+            color: #000;
+            font-family: "Pretendard-L";
+        }
+
+        &:first-child {
+            display: flex;
+            align-items: center;
+        }
+
+        &:last-child {
+            font-family: "Pretendard-SB";
+        }
     }
 }
 

         border: 1px solid #dddddd;
         border-radius: 5px;
         font-size: 16px;
+        width: inherit;
+    }
+
+    dd {
+        display: flex;
+        align-items: center;
+    }
+
+    label {
+        position: relative;
+        width: 200px;
+        display: block;
+        font-size: 18px;
+        flex-shrink: 0;
+
+        &.require::after {
+            position: absolute;
+            top: 5px;
+            padding-left: 3px;
+            content: "*";
+            color: #df2d2d;
+        }
+    }
+
+    .hr {
+        background-color: #eeeeee;
+        margin: 10px 0;
+        width: 100%;
+        height: 1px;
+    }
+}
+
+/* 카테고리 */
+.category {
+    display: flex;
+    gap: 5px;
+
+    li {
+        width: fit-content;
+        border-radius: 3px;
+        padding: 5px 10px;
+        font-family: "Pretendard-SB" !important;
+        font-size: 14px;
+
+        &.category1 {
+            color: #a5067b;
+            border: 1px solid #a5067b;
+        }
+
+        &.category2 {
+            color: #007ac3;
+            border: 1px solid #007ac3;
+        }
+
+        button {
+            margin-left: 15px;
+        }
     }
 }
 

 /* 내정보 */
 .info-form,
 .pwchange-form {
-    dd {
-        display: flex;
-        align-items: center;
-    }
 
     padding: 30px 50px;
-
-    label {
-        position: relative;
-        width: 200px;
-        display: block;
-        font-size: 18px;
-
-        &.require::after {
-            position: absolute;
-            top: 5px;
-            padding-left: 3px;
-            content: "*";
-            color: #df2d2d;
-        }
-    }
-
-    .hr {
-        background-color: #eeeeee;
-        margin: 10px 0;
-        width: 100%;
-        height: 1px;
-    }
 
 }
 

 
 /* 통합검색 */
 .search-form {
-    dl{
+    dl {
         padding: 35px 75px;
-        dd{
+
+        dd {
             display: flex;
             align-items: center;
+
             p {
                 font-size: 18px;
                 font-family: "Pretendard-SB";
                 width: 180px;
+                flex-shrink: 0;
             }
         }
-        .mark{width: fit-content; margin: 0 11px;}
+
+        .mark {
+            width: fit-content;
+            margin: 0 11px;
+        }
 
     }
-    
+
     background-image: linear-gradient(#fff, #fff),
-        linear-gradient(-45deg, #ca3e49, #3f355c);
+    linear-gradient(-45deg, #ca3e49, #3f355c);
     background-origin: border-box;
-    background-clip: content-box, border-box;
+    background-clip: content-box,
+    border-box;
     border: 3px solid transparent;
     border-radius: 32px;
 
-  
-    .btn-group{
+
+    .btn-group {
         display: flex;
         justify-content: center;
-        button{
+
+        button {
             display: flex;
             align-items: center;
             justify-content: center;

             font-family: "Pretendard-B";
             font-size: 16px;
             border-radius: 30px;
-            &.reset{
-                border: 1px solid #ccc;                
+
+            &.reset {
+                border: 1px solid #ccc;
             }
-            &.search{                
+
+            &.search {
                 background: linear-gradient(132deg, #3e355c, #763954);
-                p{
+
+                p {
                     color: #fff;
                 }
             }
         }
     }
-    ul{display: flex; gap: 15px;}
-    li{display: flex; align-items: center; width: 125px; gap: 12px;}
-   
 
-    input[type="text"]{
+    ul {
+        display: flex;
+        gap: 15px;
+    }
+
+    li {
+        display: flex;
+        align-items: center;
+        width: 125px;
+        gap: 12px;
+    }
+
+
+    input[type="text"] {
         background-color: #f6f6f6;
-        width: 84%;
         border: 0;
     }
-    input[type="date"]{
+
+    input[type="date"] {
         position: relative;
         width: 158px;
         border-radius: 8px;
-        background: url(../../images/icon/calendar.png) no-repeat right 10px center /
-     auto;
+        background: url(../../images/icon/calendar.png) no-repeat right 10px center / auto;
     }
-    input[type="date"]::placeholder{color: #fff;;}
+
+    input[type="date"]::placeholder {
+        color: #fff;
+        ;
+    }
+
     input[type='date']::-webkit-calendar-picker-indicator {
-        position: absolute; 
+        position: absolute;
         left: 0;
         top: 0;
         width: 100%;
         height: 100%;
-        background: transparent; 
-        color: transparent; 
+        background: transparent;
+        color: transparent;
         cursor: pointer;
-      }
-      
+    }
+
     input[type="checkbox"] {
         position: relative;
         width: 22px;

         appearance: none;
         /* Remove the default checkbox appearance */
         cursor: pointer;
-        /* Optional: cursor pointer to indicate it is clickable */
     }
 
     /* Checked state of the checkbox */

         border-color: #544483;
         /* Custom border color when checked */
     }
+
     input[type="checkbox"]:checked::before {
         content: '';
         background-image: url(../../images/check.png);

         width: 15px;
         height: 11px;
     }
-    input[type="checkbox"]:checked + label {
-        color: rgba(0, 0, 0, 0.12); /* Change the label color when checkbox is checked */
+
+    input[type="checkbox"]:checked+label {
+        color: rgba(0, 0, 0, 0.12);
+        /* Change the label color when checkbox is checked */
     }
 
-    label{
+    label {
         font-size: 17px;
         font-family: "Pretendard-L";
     }
-   
-/* 기본스타일 제거, 버튼 모양 재설정 */
-input[type='radio'] {
-    flex-shrink:0;
-    -webkit-appearance: none; /* 웹킷 브라우저에서 기본 스타일 제거*/
-    -moz-appearance: none; /* 모질라 브라우저에서 기본 스타일 제거*/ 
-    appearance: none; /*기본 브라우저에서 기본 스타일 제거*/
-    width: 22px;
-    height: 22px;
-    padding: 0;
-    border: 1px solid #ccc; /*체크되지 않았을 때의 테두리 색상*/
-    border-radius: 50%;
-    outline: none; /*focus 시에 나타나는 기본 스타일 제거*/
-    cursor: pointer;
-  }
-  /* 체크 시 버튼 모양 스타일*/
-  input[type='radio']:checked {
-    background-color: #544483; /*체크 시 내부 원 색상*/
-    border: 4px solid #fff; /*라인이 아닌, 라인과 원 사이 색상*/
-    box-shadow: 0 0 0 1px #ccc; /*라인*/
-  }
+
+    /* 기본스타일 제거, 버튼 모양 재설정 */
+    input[type='radio'] {
+        flex-shrink: 0;
+        -webkit-appearance: none;
+        /* 웹킷 브라우저에서 기본 스타일 제거*/
+        -moz-appearance: none;
+        /* 모질라 브라우저에서 기본 스타일 제거*/
+        appearance: none;
+        /*기본 브라우저에서 기본 스타일 제거*/
+        width: 22px;
+        height: 22px;
+        padding: 0;
+        border: 1px solid #ccc;
+        /*체크되지 않았을 때의 테두리 색상*/
+        border-radius: 50%;
+        outline: none;
+        /*focus 시에 나타나는 기본 스타일 제거*/
+        cursor: pointer;
+    }
+
+    /* 체크 시 버튼 모양 스타일*/
+    input[type='radio']:checked {
+        background-color: #544483;
+        /*체크 시 내부 원 색상*/
+        border: 4px solid #fff;
+        /*라인이 아닌, 라인과 원 사이 색상*/
+        box-shadow: 0 0 0 1px #ccc;
+        /*라인*/
+    }
+
 
 }
-.search-result{
-    .resultext{
-        .main-img{
+
+.search-result {
+    select {
+        width: 72px;
+    }
+
+    .resultext {
+        .main-img {
             width: 320px;
             height: 220px;
             border-radius: 24px;
         }
+
         display: flex;
-        p{
+
+        p {
+            width: max-content;
             font-family: "Pretendard-L";
             font-size: 17px;
-            b{
+
+            b {
                 color: #ce3e48;
             }
         }
-        img{object-fit: contain;}
+
+        img {
+            object-fit: contain;
+        }
     }
-   .result-box{
-    display: flex;
-    justify-content: space-between;
-    border: 1px solid #ddd;
-    border-radius: 24px;
-    padding: 30px;
-    .text-box{
-        p,li{font-family: "Pretendard-L";}
-        .text{
-            width: 1048px;
-            font-size: 16px;
-            color: #555555;
-            overflow: hidden; /* Hide any overflow */
-            text-overflow: ellipsis; /* Add an ellipsis at the end */
-            display: -webkit-box;
-            -webkit-line-clamp: 2; /* Limit to 2 lines */
-            -webkit-box-orient: vertical;
-            margin-bottom: 20px;
-        }
-        h5{
-            font-family: "Pretendard-B";
-            font-size: 25px;          
-            margin-bottom: 20px;  
-        }
-        .address{            
-            font-size: 20px;
-            margin-bottom: 18px;
-        }
-        .category {
-            margin-bottom: 20px;
-            ul{
-                display: flex;
-                gap: 5px;
+
+    .result-box {
+        display: flex;
+        justify-content: space-between;
+        border: 1px solid #ddd;
+        border-radius: 24px;
+        padding: 30px;
+
+        .text-box {
+
+            p,
+            li {
+                font-family: "Pretendard-L";
             }
-            li{
-                width: fit-content;
-                border-radius: 3px;
-                padding: 5px 10px;
-                font-family: "Pretendard-SB";
-                font-size: 14px;  
-                &.category1{
-                    color: #a5067b;
-                    border: 1px solid #a5067b;
+
+            .text {
+                width: 1048px;
+                font-size: 16px;
+                color: #555555;
+                overflow: hidden;
+                /* Hide any overflow */
+                text-overflow: ellipsis;
+                /* Add an ellipsis at the end */
+                display: -webkit-box;
+                -webkit-line-clamp: 2;
+                /* Limit to 2 lines */
+                -webkit-box-orient: vertical;
+                margin-bottom: 20px;
+            }
+
+            h5 {
+                font-family: "Pretendard-B";
+                font-size: 25px;
+                margin-bottom: 20px;
+            }
+
+            .address {
+                font-size: 20px;
+                margin-bottom: 18px;
+            }
+
+            .date {
+                ul {
+                    display: flex;
+                    gap: 20px;
                 }
-                &.category2{
-                    color: #007ac3;
-                    border: 1px solid #007ac3;
+
+                li {
+                    font-size: 17px;
+
+                    b {
+                        margin-left: 5px;
+                    }
                 }
             }
         }
-        .date{
-            ul{display: flex; gap: 20px;}
-            li{font-size: 17px;
-                b{margin-left: 5px;}
-            }
-        }
+
     }
-    
-   }
-    
+
 }
 
+/* 등록페이지 */
+.insert-form {
+    padding: 10px 0;
+    border-top: 2px solid #000;
+    border-left: 0;
+    border-right: 0;
+    border-bottom: 1px solid #eee;
+    border-radius: 0;
+
+    dl {
+        dd {
+            padding: 0 24px;
+
+            li {
+                p {
+                    font-family: "Pretendard-L";
+                    font-size: 16px;
+                }
+            }
+        }
+
+        textarea {
+            min-height: 425px;
+            width: 100%;
+        }
+
+        .category-add {
+            width: 72px;
+            height: 29px;
+            color: #fff;
+            background-color: #000;
+            border-radius: 15px;
+            margin-left: 10px;
+        }
+    }
+
+    .invalid-feedback {
+        border: 0;
+        background-color: transparent;
+        margin-left: 0;
+    }
+
+}
+
+.file-input {
+    display: none;
+}
+
+/* Style the custom label (the clickable button) */
+.file-label {
+    display: inline-block;
+    padding: 25px 0px;
+    width: 100%;
+    background-color: #f6f6f6;
+    border: 2px dashed #dadada;
+    color: white;
+    font-size: 16px;
+    border-radius: 10px;
+    cursor: pointer;
+    text-align: center;
+    transition: background-color 0.3s ease;
+    
+}
+.file-label > div p {
+    font-family: "Pretendard-B" !important;
+    font-size: 20px !important;
+}
+/* Style the label on hover */
+.file-label:hover {}
+
+/* Style for the file names display */
+.file-names {
+    display: block; /* Make each file name appear on a new line */
+    font-size: 16px;
+    color: #333;
+    span{color: #dadada;}
+    .file-wrap{
+        border: 1px solid #dadada;
+        border-radius: 10px;
+        padding: 12px;
+        .file-name{
+            display: flex;
+            align-items: center;
+            img{margin-right: 10px;}
+
+        }
+    }
+}

2c68f89

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

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

Binary file is not shown

2c68f89

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

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

Binary file is not shown

2c68f89

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

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

Binary file is not shown

2c68f89

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

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

Binary file is not shown

2c68f89

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

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

Binary file is not shown

2c68f89

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

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

Binary file is not shown

0d1df87

2c68f89

client/views/pages/AppRouter.js

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

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


 import NotFound from "./etc/NotFound.vue";
 
 import TotalSearch from "./user/TotalSearch.vue";
-import PicHistory from "./user/PicHistory.vue";
+import PicHistorySearch from "./user/PicHistorySearch.vue";
+import PicHistoryInsert from "./user/PicHistoryInsert.vue";
 
 const routes = [
   { path: "/", name: "MainPage", component: Main, meta: { authorization: ['ROLE_ADMIN', 'ROLE_USER']} },

   { path: "/notFound.page", name: "NotFoundPage", component: NotFound },
 
   { path: "/TotalSearch.page", name: "TotalSearch", component: TotalSearch },
-  { path: "/PicHistory.page", name: "PicHistory", component: PicHistory },
+  { path: "/PicHistorySearch.page", name: "PicHistorySearch", component: PicHistorySearch },
+  { path: "/PicHistoryInsert.page", name: "PicHistoryInsert", component: PicHistoryInsert },
 
 
 ];

0d1df87

2c68f89

client/views/pages/login/Login.vue

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

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


             <div class="breadcrumb-list">
                 <ul>
                     <!-- Bind the image source dynamically for homeicon -->
-                    <li><img :src="homeicon" alt="Home Icon"></li>
+                    <li><img :src="homeicon" alt="Home Icon"><p></p></li>
                     <li><img :src="righticon" alt="Home Icon"></li>
                     <li>로그인</li>
                 </ul>

0d1df87

2c68f89

client/views/pages/user/MyInfo.vue

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

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

...	...	@@ -4,7 +4,7 @@
4	4	<h2>내 정보 수정</h2>
5	5	<div class="breadcrumb-list">
6	6	<ul>
7		- <li><img :src="homeicon" alt="Home Icon"></li>
	7	+ <li><img :src="homeicon" alt="Home Icon"><p></p></li>
8	8	<li><img :src="righticon" alt="Home Icon"></li>
9	9	<li>내 정보 수정</li>
10	10	</ul>

2c68f89

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

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

...	...	@@ -0,0 +1,142 @@
	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	+
	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 class="category-add">추가하기</button>
	43	+ </label>
	44	+ <ul class="category">
	45	+ <li class="category1">카테고리1 <button class="cancel"><b>✕</b></button></li>
	46	+ <li class="category2">카테고리2 <button class="cancel"><b>✕</b></button></li>
	47	+ </ul>
	48	+
	49	+ </dd>
	50	+ <div class="hr"></div>
	51	+ <dd>
	52	+ <label for="file" class="require">파일</label>
	53	+ <ul class="wfull">
	54	+ <li class="flex align-center">
	55	+ <p>파일첨부</p>
	56	+ <div class="invalid-feedback"><img :src="erroricon" alt=""><span>첨부파일은 10건까지 등록 가능하며, 건당 최대
	57	+ 100MB를 초과할 수 없습니다.</span></div>
	58	+ </li>
	59	+ <li class="file-insert">
	60	+ <input type="file" id="fileInput" class="file-input" multiple @change="showFileNames">
	61	+ <label for="fileInput" class="file-label mb-20">
	62	+ <div class="flex-center align-center"><img :src="fileicon" alt="">
	63	+ <p>파일첨부하기</p>
	64	+ </div>
	65	+ <p>파일을 첨부하시려면 이 영역으로 파일을 끌고 오거나 클릭해주세요</p>
	66	+ </label>
	67	+ <p class="mb-10">파일목록</p>
	68	+ <div id="fileNames" class="file-names">
	69	+ <span v-if="fileNames.length === 0">선택된 파일이 없습니다.</span>
	70	+ <div v-for="(file, index) in fileNames" :key="index" class="flex-sp-bw mb-5 file-wrap">
	71	+ <div class="file-name">
	72	+ <!-- Corrected here: Use file.icon instead of fileicons.img -->
	73	+ <img :src="file.icon" alt="fileicon">
	74	+ <p>{{ file.name }}</p>
	75	+ </div>
	76	+ <button class="cancel" @click="removeFile(index)"><b>✕</b></button>
	77	+ </div>
	78	+ </div>
	79	+ </li>
	80	+
	81	+ </ul>
	82	+
	83	+ </dd>
	84	+ </dl>
	85	+ </form>
	86	+
	87	+ <div class="btn-group flex-center">
	88	+ <button class="signout">회원탈퇴</button>
	89	+ <button class="update">수정</button>
	90	+ </div>
	91	+ </div>
	92	+</template>
	93	+
	94	+<script>
	95	+export default {
	96	+ data() {
	97	+ return {
	98	+ // Define the image sources
	99	+ homeicon: 'client/resources/images/icon/home.png',
	100	+ erroricon: 'client/resources/images/icon/error.png',
	101	+ righticon: 'client/resources/images/icon/right.png',
	102	+ fileicon: 'client/resources/images/icon/file.png',
	103	+ fileNames: [],
	104	+ };
	105	+ },
	106	+ methods: {
	107	+ showFileNames(event) {
	108	+ const files = event.target.files;
	109	+ this.fileNames = []; // Clear previous file names
	110	+
	111	+ for (let i = 0; i < files.length; i++) {
	112	+ const file = files[i];
	113	+ const fileType = file.name.split('.').pop().toLowerCase(); // Get file extension
	114	+
	115	+ // Set default icon
	116	+ let iconPath = this.fileicons;
	117	+
	118	+ // Determine the icon based on file type
	119	+ if (['jpg', 'jpeg', 'png', 'gif'].includes(fileType)) {
	120	+ iconPath = 'client/resources/images/icon/imgicon.png'; // Example for image files
	121	+ } else if (['pdf'].includes(fileType)) {
	122	+ iconPath = 'client/resources/images/icon/pdficon.png'; // Example for PDF files
	123	+ } else if (['xls'].includes(fileType)) {
	124	+ iconPath = 'client/resources/images/icon/excelicon.png'; // Example for audio files
	125	+ } else if (['hwp'].includes(fileType)) {
	126	+ iconPath = 'client/resources/images/icon/hwpicon.png'; // Example for video files
	127	+ }
	128	+
	129	+ // Push the file name and corresponding icon to the fileNames array
	130	+ this.fileNames.push({
	131	+ name: file.name,
	132	+ icon: iconPath
	133	+ });
	134	+ }
	135	+ },
	136	+ removeFile(index) {
	137	+ // Remove file from the list
	138	+ this.fileNames.splice(index, 1);
	139	+ }
	140	+ }
	141	+};
	142	+</script>

0d1df87

2c68f89

client/views/pages/user/PicHistorySearch.vue (Renamed from client/views/pages/user/PicHistory.vue)

--- client/views/pages/user/PicHistory.vue

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


             <div class="breadcrumb-list">
                 <ul>
                     <!-- Bind the image source dynamically for homeicon -->
-                    <li><img :src="homeicon" alt="Home Icon"></li>
+                    <li><img :src="homeicon" alt="Home Icon"><p>기록물</p></li>
                     <li><img :src="righticon" alt=""></li>
                     <li>통합검색</li>
                 </ul>

         </div>
         <form action="search" class="search-form mb-40">
             <dl>
-                <dd class="mb-15">
-                    <p>기록유형</p>
-                    <ul>
-                        <li v-for="(option, index) in checkOptions" :key="index">
-                            <input type="checkbox" :id="'check_button_' + index" :name="'check_button_' + index" />
-                            <label :for="'check_button_' + index">{{ option }}</label>
-                        </li>
-                    </ul>
-                </dd>
                 <dd class="mb-15">
                     <p>검색범위</p>
                     <ul>

                 </dd>
                 <dd class="mb-15">
                     <p>검색어</p>
-                    <input type="text">
+                    <div class="wfull"><input type="text"></div>
                 </dd>
                 <dd class="mb-15">
                     <p>생산연도</p>

         </form>
         <div class="search-result">
             <ul>
-                <li v-for="(resultitem, index) in resultitems" :key="index" class="mb-30">
-                    <div class="flex-sp-bw mb-20">
-                        <div class="resultext">
-                            <img :src="resulticon" alt="">
-                            <p>총 <b>{{ resultitem.count }}개</b>의 사진 기록물이 검색되었습니다. </p>
-                        </div>
-                        <router-link :to="{ path: '/' }" class="gopage">모두보기</router-link>
+                <div class="flex-sp-bw mb-20">
+                    <div class="resultext wfull">
+                        <img :src="resulticon" alt="">
+                        <p>총 <b>{{ count }}개</b>의 사진 기록물이 검색되었습니다. </p>
                     </div>
+                    <select v-model="itemsPerPage" @change="changeItemsPerPage">
+                    <option :value="5" selected>5개</option>
+                    <option :value="10">10개</option>
+                    <option :value="15">15개</option>
+                </select>
+
+                </div>
+                <li v-for="(resultitem, index) in paginatedItems" :key="index" class="mb-30">
+
                     <div class="result-box">
                         <div class="main-img"><img :src="resultitem.img" alt=""></div>
                         <div class="text-box">
                             <h5>{{ resultitem.title }}</h5>
                             <p class="address">{{ resultitem.address }}</p>
                             <p class="text">{{ resultitem.content }}</p>
-                            <div class="category">
-                                <ul>
+                            <div class="mb-20">
+                                <ul class="category">
                                     <li v-if="resultitem.category1" class="category1">카테고리1</li>
-            <li v-if="resultitem.category2" class="category2">카테고리2</li>
+                                    <li v-if="resultitem.category2" class="category2">카테고리2</li>
                                 </ul>
                             </div>
                             <div class="date">

                     </div>
                 </li>
             </ul>
+            <button> <router-link :to="{ path: '/PicHistoryInsert.page' }" class="insert">등록</router-link></button>
+            <div class="pagination">
+              
+                <!-- Previous and Next Page Buttons -->
+                <button @click="previousPage" :disabled="currentPage === 1">Prev</button>
+                <span>{{ currentPage }} / {{ totalPages }}</span>
+                <button @click="nextPage" :disabled="currentPage === totalPages">Next</button>
+            </div>
         </div>
     </div>
 </template>

 export default {
     data() {
         return {
+            currentPage: 1, // Current page number
+            itemsPerPage: 5,
             resulticon: "client/resources/images/icon/r-check.png",
             homeicon: 'client/resources/images/icon/home.png',
             searchicon: 'client/resources/images/icon/search.png',
             reseticon: 'client/resources/images/icon/reset.png',
             righticon: 'client/resources/images/icon/right.png',
+            count: 23,
             checkOptions: [
                 '전체',
                 '사진',

             ],
             resultitems: [
                 {
-                    count: 5,
                     img: 'client/resources/images/img6.png',
                     title: '사진 기록물 제목',
                     address: '경상북도 구미시 송정대로 55',

                     date: '2021-01-01'
                 },
                 {
-                    count: 3,
                     img: 'client/resources/images/img6.png',
                     title: '영상 기록물 제목',
                     address: '경상북도 구미시 송정대로 55',

                     date: '2022-01-01'
                 },
                 {
-                    count: 3,
                     img: 'client/resources/images/img6.png',
                     title: '미디어 영상 제목',
                     address: '경상북도 구미시 송정대로 55',

                     date: '2022-01-01'
                 },
                 {
-                    count: 3,
                     img: 'client/resources/images/img6.png',
                     title: '보도자료 제목',
                     address: '경상북도 구미시 송정대로 55',

                 },
             ]
         };
-    }
+    },
+    computed: {
+        // Total number of pages
+        totalPages() {
+            return Math.ceil(this.resultitems.length / this.itemsPerPage);
+        },
+
+        // Paginated items based on current page and items per page
+        paginatedItems() {
+            const start = (this.currentPage - 1) * this.itemsPerPage;
+            const end = start + this.itemsPerPage;
+            return this.resultitems.slice(start, end);
+        },
+    },
+    methods: {
+        // Change the number of items displayed per page
+        changeItemsPerPage() {
+            this.currentPage = 1; // Reset to first page when changing items per page
+        },
+
+        // Go to the previous page
+        previousPage() {
+            if (this.currentPage > 1) {
+                this.currentPage--;
+            }
+        },
+
+        // Go to the next page
+        nextPage() {
+            if (this.currentPage < this.totalPages) {
+                this.currentPage++;
+            }
+        },
+    },
 };
 </script>
+<style scoped>
+
+</style>

0d1df87

2c68f89

client/views/pages/user/TotalSearch.vue

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

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


             <div class="breadcrumb-list">
                 <ul>
                     <!-- Bind the image source dynamically for homeicon -->
-                    <li><img :src="homeicon" alt="Home Icon"></li>
+                    <li><img :src="homeicon" alt="Home Icon"><p></p></li>
                     <li><img :src="righticon" alt=""></li>
                     <li>통합검색</li>
                 </ul>

                 </dd>
                 <dd class="mb-15">
                     <p>검색어</p>
-                    <input type="text">
+                    <div class="wfull"><input type="text"></div>
                 </dd>
                 <dd class="mb-15">
                     <p>생산연도</p>

                             <img :src="resulticon" alt="">
                             <p>총 <b>{{ resultitem.count }}개</b>의 사진 기록물이 검색되었습니다. </p>
                         </div>
-                        <router-link :to="{ path: '/' }" class="gopage">모두보기</router-link>
+                        <router-link :to="{ path: '/' + resultitem.id }" class="gopage">모두보기</router-link>
                     </div>
                     <div class="result-box">
                         <div class="main-img"><img :src="resultitem.img" alt=""></div>

                             <h5>{{ resultitem.title }}</h5>
                             <p class="address">{{ resultitem.address }}</p>
                             <p class="text">{{ resultitem.content }}</p>
-                            <div class="category">
-                                <ul>
+                            <div class="mb-20">
+                                <ul class="category">
                                     <li v-if="resultitem.category1" class="category1">카테고리1</li>
             <li v-if="resultitem.category2" class="category2">카테고리2</li>
                                 </ul>

                     category1: true,
                     category2: true,
                     year: 2020,
-                    date: '2021-01-01'
+                    date: '2021-01-01',
+                    id: 'PicHistorySearch.page'
                 },
                 {
                     count: 3,

Add a comment

Open 0
Closed 0

List

...	...	@@ -2,13 +2,12 @@
2	2	padding: 0; margin: 0; color: #000;
3	3	font-family: "Pretendard-R";
4	4	}
5		-
6	5	html{font-size: 10px;}
7	6
8	7	a{text-decoration: none; display: block;}
9	8	li{list-style: none;}
10	9	button{border: 0; background: none; cursor: pointer;}
11		-input{border: 0;}
	10	+input{border: 0; flex-shrink: 0;}
12	11	input::placeholder{color: #999999;}
13	12	input[type="checkbox"]{
14	13	width: 15px;
...	...	@@ -40,9 +39,14 @@
40	39	.wfull{width: -webkit-fill-available;}
41	40
42	41	.flex{display: flex;}
	42	+.align-center{align-items: center;}
43	43	.flex-end{
44	44	display: flex;
45	45	justify-content: end;
	46	+}
	47	+.flex-center{
	48	+ display: flex;
	49	+ justify-content: center;
46	50	}
47	51	.flex-sp-bw{
48	52	display: flex;
...	...	@@ -51,6 +55,7 @@
51	55
52	56	.mt-5{margin-top: 5px;}
53	57
	58	+.mb-5{margin-bottom: 5px;}
54	59	.mb-10{margin-bottom: 10px;}
55	60	.mb-15{margin-bottom: 15px;}
56	61	.mb-20{margin-bottom: 20px;}

...	...	@@ -1,5 +1,4 @@
1	1	.container{
2		- min-height: 100vh;
3	2	}
4	3	.header-container{
5	4	width: 1500px;

...	...	@@ -1,17 +1,20 @@
1		-.visual{position: relative;}
2		-.pagination{
3		- color: #fff;
4		- font-size: 20px;
5		- position: absolute;
6		- bottom: 10.5rem;
7		- right: 58rem;
8		- z-index: 50;
9		- display: flex;
10		- .page-count{color: #fff;}
11		- button .anticon {
12		- font-size: 20px; color: #fff;
	1	+.visual{
	2	+ position: relative;
	3	+ .pagination{
	4	+ color: #fff;
	5	+ font-size: 20px;
	6	+ position: absolute;
	7	+ bottom: 10.5rem;
	8	+ right: 58rem;
	9	+ z-index: 50;
	10	+ display: flex;
	11	+ .page-count{color: #fff;}
	12	+ button .anticon {
	13	+ font-size: 20px; color: #fff;
	14	+ }
13	15	}
14	16	}
	17	+
15	18	.search-wrap{
16	19	position: absolute;
17	20	bottom: 174px;

...	...	@@ -26,15 +26,38 @@
26	26	position: absolute;
27	27	}
28	28	}
29		- .gopage{
	29	+
	30	+ .gopage {
30	31	font-family: "Pretendard-L";
31	32	font-size: 17px;
32	33	text-align: right;
33		-
	34	+
34	35	}
35		- .gopage::after{
	36	+
	37	+ .gopage::after {
36	38	content: '\2192';
37	39	font-size: 18px;
	40	+ }
	41	+
	42	+ .pagination {
	43	+ margin-top: 20px;
	44	+ display: flex;
	45	+ align-items: center;
	46	+ }
	47	+
	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;
38	61	}
39	62	}
40	63
...	...	@@ -53,8 +76,21 @@
53	76
54	77	li {
55	78	font-size: 16px;
56		- font-family: "Pretendard-SB";
57		- color: #000;
	79	+
	80	+ p {
	81	+ font-size: 16px;
	82	+ color: #000;
	83	+ font-family: "Pretendard-L";
	84	+ }
	85	+
	86	+ &:first-child {
	87	+ display: flex;
	88	+ align-items: center;
	89	+ }
	90	+
	91	+ &:last-child {
	92	+ font-family: "Pretendard-SB";
	93	+ }
58	94	}
59	95	}
60	96
...	...	@@ -68,6 +104,63 @@
68	104	border: 1px solid #dddddd;
69	105	border-radius: 5px;
70	106	font-size: 16px;
	107	+ width: inherit;
	108	+ }
	109	+
	110	+ dd {
	111	+ display: flex;
	112	+ align-items: center;
	113	+ }
	114	+
	115	+ label {
	116	+ position: relative;
	117	+ width: 200px;
	118	+ display: block;
	119	+ font-size: 18px;
	120	+ flex-shrink: 0;
	121	+
	122	+ &.require::after {
	123	+ position: absolute;
	124	+ top: 5px;
	125	+ padding-left: 3px;
	126	+ content: "*";
	127	+ color: #df2d2d;
	128	+ }
	129	+ }
	130	+
	131	+ .hr {
	132	+ background-color: #eeeeee;
	133	+ margin: 10px 0;
	134	+ width: 100%;
	135	+ height: 1px;
	136	+ }
	137	+}
	138	+
	139	+/* 카테고리 */
	140	+.category {
	141	+ display: flex;
	142	+ gap: 5px;
	143	+
	144	+ li {
	145	+ width: fit-content;
	146	+ border-radius: 3px;
	147	+ padding: 5px 10px;
	148	+ font-family: "Pretendard-SB" !important;
	149	+ font-size: 14px;
	150	+
	151	+ &.category1 {
	152	+ color: #a5067b;
	153	+ border: 1px solid #a5067b;
	154	+ }
	155	+
	156	+ &.category2 {
	157	+ color: #007ac3;
	158	+ border: 1px solid #007ac3;
	159	+ }
	160	+
	161	+ button {
	162	+ margin-left: 15px;
	163	+ }
71	164	}
72	165	}
73	166
...	...	@@ -111,34 +204,8 @@
111	204	/* 내정보 */
112	205	.info-form,
113	206	.pwchange-form {
114		- dd {
115		- display: flex;
116		- align-items: center;
117		- }
118	207
119	208	padding: 30px 50px;
120		-
121		- label {
122		- position: relative;
123		- width: 200px;
124		- display: block;
125		- font-size: 18px;
126		-
127		- &.require::after {
128		- position: absolute;
129		- top: 5px;
130		- padding-left: 3px;
131		- content: "*";
132		- color: #df2d2d;
133		- }
134		- }
135		-
136		- .hr {
137		- background-color: #eeeeee;
138		- margin: 10px 0;
139		- width: 100%;
140		- height: 1px;
141		- }
142	209
143	210	}
144	211
...	...	@@ -171,33 +238,42 @@
171	238
172	239	/* 통합검색 */
173	240	.search-form {
174		- dl{
	241	+ dl {
175	242	padding: 35px 75px;
176		- dd{
	243	+
	244	+ dd {
177	245	display: flex;
178	246	align-items: center;
	247	+
179	248	p {
180	249	font-size: 18px;
181	250	font-family: "Pretendard-SB";
182	251	width: 180px;
	252	+ flex-shrink: 0;
183	253	}
184	254	}
185		- .mark{width: fit-content; margin: 0 11px;}
	255	+
	256	+ .mark {
	257	+ width: fit-content;
	258	+ margin: 0 11px;
	259	+ }
186	260
187	261	}
188		-
	262	+
189	263	background-image: linear-gradient(#fff, #fff),
190		- linear-gradient(-45deg, #ca3e49, #3f355c);
	264	+ linear-gradient(-45deg, #ca3e49, #3f355c);
191	265	background-origin: border-box;
192		- background-clip: content-box, border-box;
	266	+ background-clip: content-box,
	267	+ border-box;
193	268	border: 3px solid transparent;
194	269	border-radius: 32px;
195	270
196		-
197		- .btn-group{
	271	+
	272	+ .btn-group {
198	273	display: flex;
199	274	justify-content: center;
200		- button{
	275	+
	276	+ button {
201	277	display: flex;
202	278	align-items: center;
203	279	justify-content: center;
...	...	@@ -206,45 +282,62 @@
206	282	font-family: "Pretendard-B";
207	283	font-size: 16px;
208	284	border-radius: 30px;
209		- &.reset{
210		- border: 1px solid #ccc;
	285	+
	286	+ &.reset {
	287	+ border: 1px solid #ccc;
211	288	}
212		- &.search{
	289	+
	290	+ &.search {
213	291	background: linear-gradient(132deg, #3e355c, #763954);
214		- p{
	292	+
	293	+ p {
215	294	color: #fff;
216	295	}
217	296	}
218	297	}
219	298	}
220		- ul{display: flex; gap: 15px;}
221		- li{display: flex; align-items: center; width: 125px; gap: 12px;}
222		-
223	299
224		- input[type="text"]{
	300	+ ul {
	301	+ display: flex;
	302	+ gap: 15px;
	303	+ }
	304	+
	305	+ li {
	306	+ display: flex;
	307	+ align-items: center;
	308	+ width: 125px;
	309	+ gap: 12px;
	310	+ }
	311	+
	312	+
	313	+ input[type="text"] {
225	314	background-color: #f6f6f6;
226		- width: 84%;
227	315	border: 0;
228	316	}
229		- input[type="date"]{
	317	+
	318	+ input[type="date"] {
230	319	position: relative;
231	320	width: 158px;
232	321	border-radius: 8px;
233		- background: url(../../images/icon/calendar.png) no-repeat right 10px center /
234		- auto;
	322	+ background: url(../../images/icon/calendar.png) no-repeat right 10px center / auto;
235	323	}
236		- input[type="date"]::placeholder{color: #fff;;}
	324	+
	325	+ input[type="date"]::placeholder {
	326	+ color: #fff;
	327	+ ;
	328	+ }
	329	+
237	330	input[type='date']::-webkit-calendar-picker-indicator {
238		- position: absolute;
	331	+ position: absolute;
239	332	left: 0;
240	333	top: 0;
241	334	width: 100%;
242	335	height: 100%;
243		- background: transparent;
244		- color: transparent;
	336	+ background: transparent;
	337	+ color: transparent;
245	338	cursor: pointer;
246		- }
247		-
	339	+ }
	340	+
248	341	input[type="checkbox"] {
249	342	position: relative;
250	343	width: 22px;
...	...	@@ -261,7 +354,6 @@
261	354	appearance: none;
262	355	/* Remove the default checkbox appearance */
263	356	cursor: pointer;
264		- /* Optional: cursor pointer to indicate it is clickable */
265	357	}
266	358
267	359	/* Checked state of the checkbox */
...	...	@@ -271,6 +363,7 @@
271	363	border-color: #544483;
272	364	/* Custom border color when checked */
273	365	}
	366	+
274	367	input[type="checkbox"]:checked::before {
275	368	content: '';
276	369	background-image: url(../../images/check.png);
...	...	@@ -281,113 +374,224 @@
281	374	width: 15px;
282	375	height: 11px;
283	376	}
284		- input[type="checkbox"]:checked + label {
285		- color: rgba(0, 0, 0, 0.12); /* Change the label color when checkbox is checked */
	377	+
	378	+ input[type="checkbox"]:checked+label {
	379	+ color: rgba(0, 0, 0, 0.12);
	380	+ /* Change the label color when checkbox is checked */
286	381	}
287	382
288		- label{
	383	+ label {
289	384	font-size: 17px;
290	385	font-family: "Pretendard-L";
291	386	}
292		-
293		-/* 기본스타일 제거, 버튼 모양 재설정 */
294		-input[type='radio'] {
295		- flex-shrink:0;
296		- -webkit-appearance: none; /* 웹킷 브라우저에서 기본 스타일 제거*/
297		- -moz-appearance: none; /* 모질라 브라우저에서 기본 스타일 제거*/
298		- appearance: none; /기본 브라우저에서 기본 스타일 제거/
299		- width: 22px;
300		- height: 22px;
301		- padding: 0;
302		- border: 1px solid #ccc; /체크되지 않았을 때의 테두리 색상/
303		- border-radius: 50%;
304		- outline: none; /focus 시에 나타나는 기본 스타일 제거/
305		- cursor: pointer;
306		- }
307		- /* 체크 시 버튼 모양 스타일*/
308		- input[type='radio']:checked {
309		- background-color: #544483; /체크 시 내부 원 색상/
310		- border: 4px solid #fff; /라인이 아닌, 라인과 원 사이 색상/
311		- box-shadow: 0 0 0 1px #ccc; /라인/
312		- }
	387	+
	388	+ /* 기본스타일 제거, 버튼 모양 재설정 */
	389	+ input[type='radio'] {
	390	+ flex-shrink: 0;
	391	+ -webkit-appearance: none;
	392	+ /* 웹킷 브라우저에서 기본 스타일 제거*/
	393	+ -moz-appearance: none;
	394	+ /* 모질라 브라우저에서 기본 스타일 제거*/
	395	+ appearance: none;
	396	+ /기본 브라우저에서 기본 스타일 제거/
	397	+ width: 22px;
	398	+ height: 22px;
	399	+ padding: 0;
	400	+ border: 1px solid #ccc;
	401	+ /체크되지 않았을 때의 테두리 색상/
	402	+ border-radius: 50%;
	403	+ outline: none;
	404	+ /focus 시에 나타나는 기본 스타일 제거/
	405	+ cursor: pointer;
	406	+ }
	407	+
	408	+ /* 체크 시 버튼 모양 스타일*/
	409	+ input[type='radio']:checked {
	410	+ background-color: #544483;
	411	+ /체크 시 내부 원 색상/
	412	+ border: 4px solid #fff;
	413	+ /라인이 아닌, 라인과 원 사이 색상/
	414	+ box-shadow: 0 0 0 1px #ccc;
	415	+ /라인/
	416	+ }
	417	+
313	418
314	419	}
315		-.search-result{
316		- .resultext{
317		- .main-img{
	420	+
	421	+.search-result {
	422	+ select {
	423	+ width: 72px;
	424	+ }
	425	+
	426	+ .resultext {
	427	+ .main-img {
318	428	width: 320px;
319	429	height: 220px;
320	430	border-radius: 24px;
321	431	}
	432	+
322	433	display: flex;
323		- p{
	434	+
	435	+ p {
	436	+ width: max-content;
324	437	font-family: "Pretendard-L";
325	438	font-size: 17px;
326		- b{
	439	+
	440	+ b {
327	441	color: #ce3e48;
328	442	}
329	443	}
330		- img{object-fit: contain;}
	444	+
	445	+ img {
	446	+ object-fit: contain;
	447	+ }
331	448	}
332		- .result-box{
333		- display: flex;
334		- justify-content: space-between;
335		- border: 1px solid #ddd;
336		- border-radius: 24px;
337		- padding: 30px;
338		- .text-box{
339		- p,li{font-family: "Pretendard-L";}
340		- .text{
341		- width: 1048px;
342		- font-size: 16px;
343		- color: #555555;
344		- overflow: hidden; /* Hide any overflow */
345		- text-overflow: ellipsis; /* Add an ellipsis at the end */
346		- display: -webkit-box;
347		- -webkit-line-clamp: 2; /* Limit to 2 lines */
348		- -webkit-box-orient: vertical;
349		- margin-bottom: 20px;
350		- }
351		- h5{
352		- font-family: "Pretendard-B";
353		- font-size: 25px;
354		- margin-bottom: 20px;
355		- }
356		- .address{
357		- font-size: 20px;
358		- margin-bottom: 18px;
359		- }
360		- .category {
361		- margin-bottom: 20px;
362		- ul{
363		- display: flex;
364		- gap: 5px;
	449	+
	450	+ .result-box {
	451	+ display: flex;
	452	+ justify-content: space-between;
	453	+ border: 1px solid #ddd;
	454	+ border-radius: 24px;
	455	+ padding: 30px;
	456	+
	457	+ .text-box {
	458	+
	459	+ p,
	460	+ li {
	461	+ font-family: "Pretendard-L";
365	462	}
366		- li{
367		- width: fit-content;
368		- border-radius: 3px;
369		- padding: 5px 10px;
370		- font-family: "Pretendard-SB";
371		- font-size: 14px;
372		- &.category1{
373		- color: #a5067b;
374		- border: 1px solid #a5067b;
	463	+
	464	+ .text {
	465	+ width: 1048px;
	466	+ font-size: 16px;
	467	+ color: #555555;
	468	+ overflow: hidden;
	469	+ /* Hide any overflow */
	470	+ text-overflow: ellipsis;
	471	+ /* Add an ellipsis at the end */
	472	+ display: -webkit-box;
	473	+ -webkit-line-clamp: 2;
	474	+ /* Limit to 2 lines */
	475	+ -webkit-box-orient: vertical;
	476	+ margin-bottom: 20px;
	477	+ }
	478	+
	479	+ h5 {
	480	+ font-family: "Pretendard-B";
	481	+ font-size: 25px;
	482	+ margin-bottom: 20px;
	483	+ }
	484	+
	485	+ .address {
	486	+ font-size: 20px;
	487	+ margin-bottom: 18px;
	488	+ }
	489	+
	490	+ .date {
	491	+ ul {
	492	+ display: flex;
	493	+ gap: 20px;
375	494	}
376		- &.category2{
377		- color: #007ac3;
378		- border: 1px solid #007ac3;
	495	+
	496	+ li {
	497	+ font-size: 17px;
	498	+
	499	+ b {
	500	+ margin-left: 5px;
	501	+ }
379	502	}
380	503	}
381	504	}
382		- .date{
383		- ul{display: flex; gap: 20px;}
384		- li{font-size: 17px;
385		- b{margin-left: 5px;}
386		- }
387		- }
	505	+
388	506	}
389		-
390		- }
391		-
	507	+
392	508	}
393	509
	510	+/* 등록페이지 */
	511	+.insert-form {
	512	+ padding: 10px 0;
	513	+ border-top: 2px solid #000;
	514	+ border-left: 0;
	515	+ border-right: 0;
	516	+ border-bottom: 1px solid #eee;
	517	+ border-radius: 0;
	518	+
	519	+ dl {
	520	+ dd {
	521	+ padding: 0 24px;
	522	+
	523	+ li {
	524	+ p {
	525	+ font-family: "Pretendard-L";
	526	+ font-size: 16px;
	527	+ }
	528	+ }
	529	+ }
	530	+
	531	+ textarea {
	532	+ min-height: 425px;
	533	+ width: 100%;
	534	+ }
	535	+
	536	+ .category-add {
	537	+ width: 72px;
	538	+ height: 29px;
	539	+ color: #fff;
	540	+ background-color: #000;
	541	+ border-radius: 15px;
	542	+ margin-left: 10px;
	543	+ }
	544	+ }
	545	+
	546	+ .invalid-feedback {
	547	+ border: 0;
	548	+ background-color: transparent;
	549	+ margin-left: 0;
	550	+ }
	551	+
	552	+}
	553	+
	554	+.file-input {
	555	+ display: none;
	556	+}
	557	+
	558	+/* Style the custom label (the clickable button) */
	559	+.file-label {
	560	+ display: inline-block;
	561	+ padding: 25px 0px;
	562	+ width: 100%;
	563	+ background-color: #f6f6f6;
	564	+ border: 2px dashed #dadada;
	565	+ color: white;
	566	+ font-size: 16px;
	567	+ border-radius: 10px;
	568	+ cursor: pointer;
	569	+ text-align: center;
	570	+ transition: background-color 0.3s ease;
	571	+
	572	+}
	573	+.file-label > div p {
	574	+ font-family: "Pretendard-B" !important;
	575	+ font-size: 20px !important;
	576	+}
	577	+/* Style the label on hover */
	578	+.file-label:hover {}
	579	+
	580	+/* Style for the file names display */
	581	+.file-names {
	582	+ display: block; /* Make each file name appear on a new line */
	583	+ font-size: 16px;
	584	+ color: #333;
	585	+ span{color: #dadada;}
	586	+ .file-wrap{
	587	+ border: 1px solid #dadada;
	588	+ border-radius: 10px;
	589	+ padding: 12px;
	590	+ .file-name{
	591	+ display: flex;
	592	+ align-items: center;
	593	+ img{margin-right: 10px;}
	594	+
	595	+ }
	596	+ }
	597	+} (파일 끝에 줄바꿈 문자 없음)

...	...	@@ -8,7 +8,8 @@
8	8	import NotFound from "./etc/NotFound.vue";
9	9
10	10	import TotalSearch from "./user/TotalSearch.vue";
11		-import PicHistory from "./user/PicHistory.vue";
	11	+import PicHistorySearch from "./user/PicHistorySearch.vue";
	12	+import PicHistoryInsert from "./user/PicHistoryInsert.vue";
12	13
13	14	const routes = [
14	15	{ path: "/", name: "MainPage", component: Main, meta: { authorization: ['ROLE_ADMIN', 'ROLE_USER']} },
...	...	@@ -17,7 +18,8 @@
17	18	{ path: "/notFound.page", name: "NotFoundPage", component: NotFound },
18	19
19	20	{ path: "/TotalSearch.page", name: "TotalSearch", component: TotalSearch },
20		- { path: "/PicHistory.page", name: "PicHistory", component: PicHistory },
	21	+ { path: "/PicHistorySearch.page", name: "PicHistorySearch", component: PicHistorySearch },
	22	+ { path: "/PicHistoryInsert.page", name: "PicHistoryInsert", component: PicHistoryInsert },
21	23
22	24
23	25	];

...	...	@@ -5,7 +5,7 @@
5	5	<div class="breadcrumb-list">
6	6	<ul>
7	7	<!-- Bind the image source dynamically for homeicon -->
8		- <li><img :src="homeicon" alt="Home Icon"></li>
	8	+ <li><img :src="homeicon" alt="Home Icon"><p></p></li>
9	9	<li><img :src="righticon" alt="Home Icon"></li>
10	10	<li>로그인</li>
11	11	</ul>

Delete comment