Commit @1b9a87819e3f0d9ba78e0992b10e8914c011b7ee

최정임 03-21

250321 최정임 메인 게시글없는경우 추가

@1b9a87819e3f0d9ba78e0992b10e8914c011b7ee

67f611b

1b9a878

client/resources/css/user/sub.css

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

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


     }
 }
 
+
+.btn-group {
+    gap: 10px;
+    button.cancel{
+        width: 130px;
+        background-color: #f9f9f9;
+        border: 1px solid #636364;
+    }
+    button.register{
+        width: 130px;
+        background-color: #ce3e48;
+        color: #fff;
+    }
+}
 form {
     margin: 0 auto;
     border: 1px solid #dddddd;

     }
 }
 
-.btn-group {
-    gap: 10px;
-}
+
 
 /* 통합검색 */
 .search-form {

 
         }
     }
-}
+}
+
+
+/* 모달 */
+/* 모달 배경 스타일 */
+.modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5); /* 배경 어두운 투명도 */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999;
+  }
+  
+  /* 모달 콘텐츠 스타일 */
+  .modal-content {
+    background-color: #fff;
+    padding: 20px;
+    border-radius: 8px;
+    max-width: 400px;
+    width: 100%;
+    text-align: center;
+    h2{
+        
+    }
+      /* 닫기 버튼 스타일 */
+  button {
+    padding: 10px;
+    margin-top: 10px;
+    background-color: #007bff;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+  }
+  
+  button:hover {
+    background-color: #0056b3;
+  }
+  }
+  

1b9a878

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

+++ client/resources/images/no_bodo.png

Binary file is not shown

1b9a878

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

+++ client/resources/images/no_img.png

Binary file is not shown

1b9a878

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

+++ client/resources/images/no_media.png

Binary file is not shown

67f611b

1b9a878

client/views/pages/main/Main.vue

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

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

...	...	@@ -76,6 +76,33 @@
76	76	</div>
77	77	</div>
78	78	</div>
	79	+ <!-- 게시물이 없는 경우 -->
	80	+ <div class="new-pic">
	81	+ <div class="box-wrap">
	82	+ <div class="box">
	83	+ <img :src="noimg" class="tab-image" />
	84	+ <div class="info">
	85	+ <p>등록된 게시물이 없습니다.</p>
	86	+ </div>
	87	+ </div>
	88	+ </div>
	89	+ <div class="box-wrap">
	90	+ <div class="box">
	91	+ <img :src="noimg" class="tab-image" />
	92	+ <div class="info">
	93	+ <p>등록된 게시물이 없습니다.</p>
	94	+ </div>
	95	+ </div>
	96	+ </div>
	97	+ <div class="box-wrap">
	98	+ <div class="box">
	99	+ <img :src="noimg" class="tab-image" />
	100	+ <div class="info">
	101	+ <p>등록된 게시물이 없습니다.</p>
	102	+ </div>
	103	+ </div>
	104	+ </div>
	105	+ </div>
79	106	</div>
80	107	</template>
81	108	</div>
...	...	@@ -96,16 +123,37 @@
96	123	</div>
97	124	</div>
98	125	</div>
	126	+ <!-- 게시글이 없는 경우 -->
	127	+ <div class="media-wrap">
	128	+ <div class="media-box">
	129	+ <img :src="nomedia" :alt="mediaContent.title" class="media-image" />
	130	+ <div class="info">
	131	+ <p>등록된 게시글이 없습니다.</p>
	132	+ </div>
	133	+ </div>
	134	+ <div class="media-box">
	135	+ <img :src="nomedia" :alt="mediaContent.title" class="media-image" />
	136	+ <div class="info">
	137	+ <p>등록된 게시글이 없습니다.</p>
	138	+ </div>
	139	+ </div>
	140	+ </div>
99	141	</div>
100	142	<div class="new-bodo">
101	143	<div class="title mb-30">
102		- <h4>신규 미디어 영상</h4>
	144	+ <h4>신규 보도 자료</h4>
103	145	<router-link :to="{ path: '/' }" class="gopage">더보기</router-link>
104	146	</div>
105	147	<ul>
106	148	<li v-for="(bodoContent, index) in bodoContent" :key="index" class="info">
107	149	<p>{{ bodoContent.content }}</p>
108	150	<span>{{ bodoContent.date }}</span>
	151	+ </li>
	152	+ </ul>
	153	+ <!-- 게시글이 없는 경우 -->
	154	+ <ul>
	155	+ <li class="info">
	156	+ <img :src="nobodo" alt="">
109	157	</li>
110	158	</ul>
111	159	</div>
...	...	@@ -147,6 +195,9 @@
147	195	},
148	196	data() {
149	197	return {
	198	+ noimg: "client/resources/images/no_img.png",
	199	+ nomedia: "client/resources/images/no_media.png",
	200	+ nobodo: "client/resources/images/no_bodo.png",
150	201	selectedTab: "newPhoto", // Set initial tab index to 신규사진기록물 (first tab)
151	202	tabs: [
152	203	{

67f611b

1b9a878

client/views/pages/user/PicHistoryInsert.vue

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

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


             <dl>
                 <dd>
                     <label for="id" class="require">제목</label>
-                    <div class="wfull"><input type="text" id="id" value="" placeholder="제목을 입력하세요." ></div>
+                    <div class="wfull"><input type="text" id="id" value="" placeholder="제목을 입력하세요."></div>
                 </dd>
                 <div class="hr"></div>
                 <dd>

                 <div class="hr"></div>
                 <dd>
                     <label for="address">주소</label>
-                    <div class="wfull"><input type="text" id="address" value="" placeholder="주소를 입력하세요" ></div>
+                    <div class="wfull"><input type="text" id="address" value="" placeholder="주소를 입력하세요"></div>
 
                 </dd>
                 <div class="hr"></div>

                 <div class="hr"></div>
                 <dd>
                     <label for="category" class="flex align-center">
-                        <p>카테고리</p><button class="category-add">추가하기</button>
+                        <p>카테고리</p><button type="button" class="category-add" @click="openModal">추가하기</button>
                     </label>
                     <ul class="category">
                         <li class="category1">카테고리1 <button class="cancel"><b>✕</b></button></li>

                                         <img :src="file.icon" alt="fileicon">
                                         <p>{{ file.name }}</p>
                                     </div>
-                                    <button class="cancel" @click="removeFile(index)"><b>✕</b></button>
+                                    <button type="button" class="cancel" @click="removeFile(index)"><b>✕</b></button>
                                 </div>
                             </div>
                         </li>

         </form>
 
         <div class="btn-group flex-center">
-            <button class="signout">회원탈퇴</button>
-            <button class="update">수정</button>
+            <button class="cancel">취소</button>
+            <button class="register">등록</button>
+        </div>
+    </div>
+    <div v-if="isModalOpen" class="modal-overlay" @click="closeModal">
+        <div class="modal-content" @click.stop>
+            <h2>모달 제목</h2>
+            <p>모달의 내용이 여기에 들어갑니다.</p>
+            <button @click="closeModal">닫기</button>
         </div>
     </div>
 </template>

 export default {
     data() {
         return {
+            isModalOpen: false,
             // Define the image sources
             homeicon: 'client/resources/images/icon/home.png',
             erroricon: 'client/resources/images/icon/error.png',

         removeFile(index) {
             // Remove file from the list
             this.fileNames.splice(index, 1);
+            console.log(removeFile)
+        },
+        openModal() {
+            this.isModalOpen = true;
+        },
+        // 모달 닫기
+        closeModal() {
+            this.isModalOpen = false;
         }
     }
 };

Add a comment

Open 0
Closed 0

List

...	...	@@ -94,6 +94,20 @@
94	94	}
95	95	}
96	96
	97	+
	98	+.btn-group {
	99	+ gap: 10px;
	100	+ button.cancel{
	101	+ width: 130px;
	102	+ background-color: #f9f9f9;
	103	+ border: 1px solid #636364;
	104	+ }
	105	+ button.register{
	106	+ width: 130px;
	107	+ background-color: #ce3e48;
	108	+ color: #fff;
	109	+ }
	110	+}
97	111	form {
98	112	margin: 0 auto;
99	113	border: 1px solid #dddddd;
...	...	@@ -232,9 +246,7 @@
232	246	}
233	247	}
234	248
235		-.btn-group {
236		- gap: 10px;
237		-}
	249	+
238	250
239	251	/* 통합검색 */
240	252	.search-form {
...	...	@@ -594,4 +606,48 @@
594	606
595	607	}
596	608	}
597		-} (파일 끝에 줄바꿈 문자 없음)
	609	+}
	610	+
	611	+
	612	+/* 모달 */
	613	+/* 모달 배경 스타일 */
	614	+.modal-overlay {
	615	+ position: fixed;
	616	+ top: 0;
	617	+ left: 0;
	618	+ width: 100%;
	619	+ height: 100%;
	620	+ background-color: rgba(0, 0, 0, 0.5); /* 배경 어두운 투명도 */
	621	+ display: flex;
	622	+ justify-content: center;
	623	+ align-items: center;
	624	+ z-index: 9999;
	625	+ }
	626	+
	627	+ /* 모달 콘텐츠 스타일 */
	628	+ .modal-content {
	629	+ background-color: #fff;
	630	+ padding: 20px;
	631	+ border-radius: 8px;
	632	+ max-width: 400px;
	633	+ width: 100%;
	634	+ text-align: center;
	635	+ h2{
	636	+
	637	+ }
	638	+ /* 닫기 버튼 스타일 */
	639	+ button {
	640	+ padding: 10px;
	641	+ margin-top: 10px;
	642	+ background-color: #007bff;
	643	+ color: white;
	644	+ border: none;
	645	+ border-radius: 5px;
	646	+ cursor: pointer;
	647	+ }
	648	+
	649	+ button:hover {
	650	+ background-color: #0056b3;
	651	+ }
	652	+ }
	653	+

...	...	@@ -16,7 +16,7 @@
16	16	<dl>
17	17	<dd>
18	18	<label for="id" class="require">제목</label>
19		- <div class="wfull"><input type="text" id="id" value="" placeholder="제목을 입력하세요." ></div>
	19	+ <div class="wfull"><input type="text" id="id" value="" placeholder="제목을 입력하세요."></div>
20	20	</dd>
21	21	<div class="hr"></div>
22	22	<dd>
...	...	@@ -27,7 +27,7 @@
27	27	<div class="hr"></div>
28	28	<dd>
29	29	<label for="address">주소</label>
30		- <div class="wfull"><input type="text" id="address" value="" placeholder="주소를 입력하세요" ></div>
	30	+ <div class="wfull"><input type="text" id="address" value="" placeholder="주소를 입력하세요"></div>
31	31
32	32	</dd>
33	33	<div class="hr"></div>
...	...	@@ -39,7 +39,7 @@
39	39	<div class="hr"></div>
40	40	<dd>
41	41	<label for="category" class="flex align-center">
42		- <p>카테고리</p><button class="category-add">추가하기</button>
	42	+ <p>카테고리</p><button type="button" class="category-add" @click="openModal">추가하기</button>
43	43	</label>
44	44	<ul class="category">
45	45	<li class="category1">카테고리1 <button class="cancel"><b>✕</b></button></li>
...	...	@@ -73,7 +73,7 @@
73	73	<img :src="file.icon" alt="fileicon">
74	74	<p>{{ file.name }}</p>
75	75	</div>
76		- <button class="cancel" @click="removeFile(index)"><b>✕</b></button>
	76	+ <button type="button" class="cancel" @click="removeFile(index)"><b>✕</b></button>
77	77	</div>
78	78	</div>
79	79	</li>
...	...	@@ -85,8 +85,15 @@
85	85	</form>
86	86
87	87	<div class="btn-group flex-center">
88		- <button class="signout">회원탈퇴</button>
89		- <button class="update">수정</button>
	88	+ <button class="cancel">취소</button>
	89	+ <button class="register">등록</button>
	90	+ </div>
	91	+ </div>
	92	+ <div v-if="isModalOpen" class="modal-overlay" @click="closeModal">
	93	+ <div class="modal-content" @click.stop>
	94	+ <h2>모달 제목</h2>
	95	+ <p>모달의 내용이 여기에 들어갑니다.</p>
	96	+ <button @click="closeModal">닫기</button>
90	97	</div>
91	98	</div>
92	99	</template>
...	...	@@ -95,6 +102,7 @@
95	102	export default {
96	103	data() {
97	104	return {
	105	+ isModalOpen: false,
98	106	// Define the image sources
99	107	homeicon: 'client/resources/images/icon/home.png',
100	108	erroricon: 'client/resources/images/icon/error.png',
...	...	@@ -136,6 +144,14 @@
136	144	removeFile(index) {
137	145	// Remove file from the list
138	146	this.fileNames.splice(index, 1);
	147	+ console.log(removeFile)
	148	+ },
	149	+ openModal() {
	150	+ this.isModalOpen = true;
	151	+ },
	152	+ // 모달 닫기
	153	+ closeModal() {
	154	+ this.isModalOpen = false;
139	155	}
140	156	}
141	157	};

Delete comment