Commit @9759c5a031514479febffba4936fe5946e583741

최정임 03-26

250326 최정임 헤더 전체메뉴 추가

@9759c5a031514479febffba4936fe5946e583741

e0df0e3

9759c5a

client/resources/css/common/common.css

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

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

...	...	@@ -136,4 +136,16 @@
136	136	top: 20px;
137	137	}
138	138	}
139		-} (파일 끝에 줄바꿈 문자 없음)
	139	+}
	140	+
	141	+ /* 닫기 버튼 스타일 */
	142	+
	143	+ button.closebtn {
	144	+ font-size: 20px;
	145	+ width: 40px;
	146	+ height: 40px;
	147	+ background-color: #000;
	148	+ color: white;
	149	+ border: none;
	150	+ border-radius: 50px;
	151	+ }

e0df0e3

9759c5a

client/resources/css/user/layout.css

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

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


-header{
+header {
     width: 100%;
     position: fixed;
     top: 0;
     z-index: 20;
     background-color: #fff;
 }
-.container{
+
+.container {
     margin: 120px 0;
     position: relative;
 }
-.header-container{
+
+.header-container {
     width: 1500px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 24px 0;
     position: sticky;
-    .logo img{width: 174px; height: 69px;}
-    .nav-wrap{display: flex;}
 
-    nav{
-        & > ul{display: flex; gap: 102px;}
-        & > ul > li{font-size: 22px; position: relative;}
-        
-    & > ul > li:hover .submenu {
-        opacity: 1; /* hover시 보이도록 */
-        visibility: visible; /* hover시 보이도록 */
+    .logo img {
+        width: 174px;
+        height: 69px;
     }
-        .submenu{
-            position: absolute;
-            top: 51px;
-            left: 50%;
-            transform: translateX(-50%);
-            z-index: 2;
-            width: 180px;
-            padding: 30px 20px;
-            border-radius: 20px;
-            box-shadow: 1px 0px 20px 0px rgba(0, 0, 0, 0.15);
-            background-color: #fff;
-            opacity: 0; /* 기본적으로 숨김 */
-            visibility: hidden; /* 기본적으로 숨김 */
-            transition: opacity 0.3s ease, visibility 0.3s ease;
-            p{
-                padding-left: 10px;
-                font-size: 18px;
-                a{display: contents;}
-            }
-            p:hover{
-                background-color: #f9ebed;
-            }
+
+    .nav-wrap {
+        display: flex;
+    }
+
+    nav {
+        &>ul {
+            display: flex;
+            gap: 102px;
         }
-        .submenu::before{
-            content: "";
-            display: block;
-            width: 0;
-            height: 0;
-            border-left: 17px solid transparent;
-            border-right: 17px solid transparent;
-            border-bottom: 17px solid #fff;
-            position: absolute;
-            top: -15px;
-            left: 50%;
-            transform: translateX(-50%);
+
+        &>ul>li {
+            font-size: 22px;
+            position: relative;
+        }
+
+        &>ul>li:hover .submenu {
+            opacity: 1;
+            /* hover시 보이도록 */
+            visibility: visible;
+            /* hover시 보이도록 */
         }
     }
-    .auth-area{
-        display: flex; align-items: center; gap: 50px;
-        ul{display: flex; align-items: center; gap: 20px;}
-        li{ display: flex; align-items: center;
-            img{margin-right: 6px;}
-            a{font-size: 16px;}
+
+    .submenu {
+        position: absolute;
+        top: 51px;
+        left: 50%;
+        transform: translateX(-50%);
+        z-index: 2;
+        width: 180px;
+        padding: 30px 20px;
+        border-radius: 20px;
+        box-shadow: 1px 0px 20px 0px rgba(0, 0, 0, 0.15);
+        background-color: #fff;
+        opacity: 0;
+        /* 기본적으로 숨김 */
+        visibility: hidden;
+        /* 기본적으로 숨김 */
+        transition: opacity 0.3s ease, visibility 0.3s ease;
+
+        p {
+            padding-left: 10px;
+            font-size: 18px;
+
+            a {
+                display: contents;
+            }
         }
-        .line{width: 2px; height: 16px; background-color: #eeeeee;}
+
+        p:hover {
+            background-color: #f9ebed;
+        }
+    }
+
+    .submenu::before {
+        content: "";
+        display: block;
+        width: 0;
+        height: 0;
+        border-left: 17px solid transparent;
+        border-right: 17px solid transparent;
+        border-bottom: 17px solid #fff;
+        position: absolute;
+        top: -15px;
+        left: 50%;
+        transform: translateX(-50%);
+    }
+
+    .auth-area {
+        display: flex;
+        align-items: center;
+        gap: 50px;
+
+        ul {
+            display: flex;
+            align-items: center;
+            gap: 20px;
+        }
+
+        li {
+            display: flex;
+            align-items: center;
+
+            img {
+                margin-right: 6px;
+            }
+
+            a {
+                font-size: 16px;
+            }
+        }
+
+        .line {
+            width: 2px;
+            height: 16px;
+            background-color: #eeeeee;
+        }
     }
 }
 
-footer{
+footer {
     background-color: #333;
     border-top-left-radius: 50px;
     border-top-right-radius: 50px;
-    .footer-container{
-        display: flex; align-items: center; gap: 80px; padding: 35px 0;
-        ul{display: flex; align-items: center; gap: 20px; margin-bottom: 5px;}
-        li, p{
+
+    .footer-container {
+        display: flex;
+        align-items: center;
+        gap: 80px;
+        padding: 35px 0;
+
+        ul {
+            display: flex;
+            align-items: center;
+            gap: 20px;
+            margin-bottom: 5px;
+        }
+
+        li,
+        p {
             font-size: 18px;
             color: rgba(255, 255, 255, 0.5);
             font-family: "Pretendard-M";
         }
 
-        .line{width: 2px; height: 13px; background-color: rgba(255, 255, 255, 0.3);}
+        .line {
+            width: 2px;
+            height: 13px;
+            background-color: rgba(255, 255, 255, 0.3);
+        }
 
     }
-    
+
 }
 
-.scroll-up{position: fixed;     right: 5%;
-    bottom: 101px;}
+.scroll-up {
+    position: fixed;
+    right: 210px;
+    bottom: 101px;
+}

e0df0e3

9759c5a

client/resources/css/user/main.css

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

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

...	...	@@ -1,3 +1,101 @@
	1	+.overlay {
	2	+ position: fixed;
	3	+ top: 0;
	4	+ left: 0;
	5	+ width: 100%;
	6	+ height: 100%;
	7	+ background-color: rgba(0, 0, 0, 0.4);
	8	+ /* 배경 어두운 투명도 */
	9	+ display: flex;
	10	+ justify-content: center;
	11	+ align-items: center;
	12	+ z-index: 9999;
	13	+}
	14	+.all-menu{
	15	+ position: absolute;
	16	+ top: 0;
	17	+ left: 0;
	18	+ background-image: url(../../images/allmenu-bg.png);
	19	+ background-repeat: no-repeat;
	20	+ width: 100%;
	21	+ height: 420px;
	22	+ button.closebtn{
	23	+ position: absolute;
	24	+ top: 40px;
	25	+ right: 38px;
	26	+
	27	+ }
	28	+ nav {
	29	+ position: absolute;
	30	+ top: 80px;
	31	+ right: 210px;
	32	+ &>ul {
	33	+ display: flex;
	34	+ gap: 40px;
	35	+ }
	36	+
	37	+ &>ul>li {
	38	+
	39	+ z-index: 2;
	40	+ width: 270px;
	41	+ height: 237px;
	42	+ padding: 0;
	43	+ border-radius: 30px;
	44	+ background-color: #fbf3f4;
	45	+ position: relative;
	46	+ h6{
	47	+ font-size: 24px;
	48	+ text-align: center;
	49	+ line-height: 70px;
	50	+ width: 270px;
	51	+ height: 70px;
	52	+ background-image: linear-gradient(#fff, #fff),
	53	+ linear-gradient(-45deg, #ca3e49, #3d355d);
	54	+ background-origin: border-box;
	55	+ background-clip: content-box, border-box;
	56	+ border: 3px solid transparent;
	57	+ border-radius: 15px;
	58	+ font-family: "Pretendard-SB";
	59	+ }
	60	+
	61	+ }
	62	+ }
	63	+
	64	+ .submenu {
	65	+ padding: 40px 30px;
	66	+
	67	+
	68	+ p {
	69	+ position: relative;
	70	+ padding-left: 10px;
	71	+ font-size: 20px;
	72	+ color: #c23d4a;
	73	+ a {
	74	+ display: contents;
	75	+ font-family: "Pretendard-M";
	76	+ }
	77	+ }
	78	+
	79	+ p:hover a{
	80	+ color: #c23d4a;
	81	+ font-family: "Pretendard-B";
	82	+
	83	+ }
	84	+ p:hover a::after{
	85	+ content: '';
	86	+ background-image: url(../../images/hover.png);
	87	+ background-repeat: no-repeat;
	88	+ width: 27px;
	89	+ height: 27px;
	90	+ position: absolute;
	91	+ right: 10px;
	92	+ }
	93	+ }
	94	+
	95	+
	96	+
	97	+}
	98	+
1	99	.visual{
2	100	position: relative;
3	101	.pagination{
...	...	@@ -290,7 +388,7 @@
290	388	/* swiper */
291	389
292	390	.swiper {
293		- width:1620px;
	391	+ width:1600px;
294	392	height: 100%;
295	393	}
296	394	.swiper-wrapper{

e0df0e3

9759c5a

client/resources/css/user/sub.css

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

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


     width: 100%;
     height: 1px;
 }
+.hr.pink {
+    background-color: rgba(194, 61, 71, 0.1);
+    margin: 10px 0;
+    width: 100%;
+    height: 1px;
+}
 .content {
     width: 1500px;
     margin: 0 auto;

         padding: 30px;
         margin-bottom: 30px;
 
+        .main-img{
+            width: 320px;
+            height: 220px;
+            border-radius: 24px;
+            img{
+                width: 100%;
+                height: 100%;
+            }
+        }
     }
 
     .text-box {

             height: 45px;
             gap: 5px;
             border-radius: 5px;
-
+            background-color: #000;
             p {
                 font-size: 16px;
                 color: #fff;

         }
     }
 
-    /* 닫기 버튼 스타일 */
-    button {
-        width: 40px;
-        height: 40px;
-        background-color: #000;
-        color: white;
-        border: none;
-        border-radius: 50px;
-    }
 
-    button.closebtn {
-        font-size: 20px;
-    }
-
-    button:hover {
-        background-color: #0056b3;
-    }
 
     .register-b {
         width: 110px;

         background-color: #000;
         color: #fff;
         font-family: "Pretendard-M";
+        border-radius: 50px;
     }
 
 }

 input[type='radio']+label {
     font-size: 17px;
     font-family: "Pretendard-L";
+    width: 95px;
 }
 
 /* 기본스타일 제거, 버튼 모양 재설정 */

 td,
 th {
     padding: 10px 0;
-}
+}
+
+

9759c5a

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

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

Binary file is not shown

9759c5a

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

+++ client/resources/images/hover.png

Binary file is not shown

e0df0e3

9759c5a

client/views/layout/Header.vue

--- client/views/layout/Header.vue

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


                         <li v-if="$store.state.roles[0]?.authority === 'ROLE_ADMIN'"
                             @click="updateMenuStats('MENU_00000001')">기록물
                             <div class="submenu">
-                                <p>• <router-link :to="{ path: '/PicHistorySearch.page' }" >사진 기록물</router-link></p>
+                                <p>• <router-link :to="{ path: '/PicHistorySearch.page' }">사진 기록물</router-link></p>
                                 <div class="hr"></div>
-                                <p>• <router-link :to="{ path: '/VideoHistorySearch.page' }" >영상 기록물</router-link></p>
+                                <p>• <router-link :to="{ path: '/VideoHistorySearch.page' }">영상 기록물</router-link></p>
                             </div>
                         </li>
                         <li v-if="$store.state.roles[0]?.authority === 'ROLE_ADMIN'"
                             @click="updateMenuStats('MENU_00000004')">언론에서 바라본 구미시
                             <div class="submenu">
-                                <p>• <router-link :to="{ path: '/MediaVideoSearch.page' }" >미디어 영상</router-link></p>
+                                <p>• <router-link :to="{ path: '/MediaVideoSearch.page' }">미디어 영상</router-link></p>
                                 <div class="hr"></div>
-                                <p>• <router-link :to="{ path: '/NewsReleaseSearch.page' }" >보도자료</router-link></p>
+                                <p>• <router-link :to="{ path: '/NewsReleaseSearch.page' }">보도자료</router-link></p>
                             </div>
                         </li>
                         <li v-if="$store.state.roles[0]?.authority === 'ROLE_ADMIN'"
-                            @click="updateMenuStats('MENU_00000007')"><router-link :to="{ path: '/MemberManagement.page' }" >회원관리</router-link></li>
+                            @click="updateMenuStats('MENU_00000007')"><router-link
+                                :to="{ path: '/MemberManagement.page' }">회원관리</router-link></li>
                         <li v-if="$store.state.roles[0]?.authority === 'ROLE_ADMIN'"
-                            @click="updateMenuStats('MENU_00000008')"><router-link :to="{ path: '/CategoryManagement.page' }" >카테고리 관리</router-link></li>
+                            @click="updateMenuStats('MENU_00000008')"><router-link
+                                :to="{ path: '/CategoryManagement.page' }">카테고리 관리</router-link></li>
 
                         <li v-if="$store.state.roles[0]?.authority === 'ROLE_USER'"
                             @click="updateMenuStats('MENU_00000001')">기록물</li>

                         <a href="#" @click.prevent="logout">로그아웃</a>
                     </li>
                 </ul>
-                <a href="#" class="all-menu"><img src="../../resources/images/allmenu.png" alt=""></a>
+                <a href="#" class="all-menu-btn" @click="toggleMenu"><img src="../../resources/images/allmenu.png"
+                        alt=""></a>
+
             </div>
+        </div>
+        <div class="overlay"  v-if="isMenuOpen">
+            <div class="all-menu">
+    <button @click="closeMenu" class="closebtn">✕</button>
+    <div class="nav-wrap">
+        <nav>
+            <ul>
+                <li v-if="$store.state.roles[0]?.authority === 'ROLE_ADMIN'" @click="updateMenuStats('MENU_00000001')">
+                    <h6>기록물</h6>
+                    <div class="submenu">
+                        <p>• <router-link :to="{ path: '/PicHistorySearch.page' }" @click="closeMenu">사진 기록물</router-link></p>
+                        <div class="hr pink"></div>
+                        <p>• <router-link :to="{ path: '/VideoHistorySearch.page' }" @click="closeMenu">영상 기록물</router-link></p>
+                    </div>
+                </li>
+                <li v-if="$store.state.roles[0]?.authority === 'ROLE_ADMIN'" @click="updateMenuStats('MENU_00000004')">
+                    <h6>언론에서 바라본 구미시</h6>
+                    <div class="submenu">
+                        <p>• <router-link :to="{ path: '/MediaVideoSearch.page' }" @click="closeMenu">미디어 영상</router-link></p>
+                        <div class="hr pink"></div>
+                        <p>• <router-link :to="{ path: '/NewsReleaseSearch.page' }" @click="closeMenu">보도자료</router-link></p>
+                    </div>
+                </li>
+                <li v-if="$store.state.roles[0]?.authority === 'ROLE_ADMIN'" @click="updateMenuStats('MENU_00000007')">
+                    <h6>회원관리</h6>
+                    <div class="submenu">
+                        <p>• <router-link :to="{ path: '/MemberManagement.page' }" @click="closeMenu">회원관리</router-link></p>
+                    </div>
+                </li>
+                <li v-if="$store.state.roles[0]?.authority === 'ROLE_ADMIN'" @click="updateMenuStats('MENU_00000008')">
+                    <h6>카테고리 관리</h6>
+                    <div class="submenu">
+                        <p>• <router-link :to="{ path: '/CategoryManagement.page' }" @click="closeMenu">카테고리 관리</router-link></p>
+                    </div>
+                </li>
+
+                <li v-if="$store.state.roles[0]?.authority === 'ROLE_USER'" @click="updateMenuStats('MENU_00000001')">
+                    <router-link :to="{ path: '/PicHistorySearch.page' }" @click="closeMenu">기록물</router-link>
+                </li>
+                <li v-if="$store.state.roles[0]?.authority === 'ROLE_USER'" @click="updateMenuStats('MENU_00000004')">
+                    <router-link :to="{ path: '/MediaVideoSearch.page' }" @click="closeMenu">언론에서 바라본 구미시</router-link>
+                </li>
+            </ul>
+        </nav>
+    </div>
+</div>
+
         </div>
     </header>
 </template>

 import { logOutProc } from "../../resources/api/user"
 import { updateStatsByMenuId } from "../../resources/api/main"
 export default {
-  data() {
-    return {
-      // Define the image sources
-      logo: 'client/resources/images/logo.png',
-    };
-  },
-  methods: {
-    async updateMenuStats(menuId) {
-      try {
-        const response = await updateStatsByMenuId(menuId);
-        if (response.status === 200) {
-          console.log(`메뉴 ID ${menuId} 통계 업데이트 성공`);
-        }
-      } catch (error) {
-        console.error(`메뉴 ID ${menuId} 통계 업데이트 중 오류:`, error);
-      }
+    data() {
+        return {
+            isMenuOpen: false,
+            // Define the image sources
+            logo: 'client/resources/images/logo.png',
+        };
     },
-    logout() {
-      // 백엔드 로그아웃 API 호출
-      logOutProc()
-        .then(() => {
-          console.log('로그아웃 성공 - 서버 측 쿠키 삭제 완료');
-          this.$store.commit('setStoreReset'); // 로그아웃 성공 후 스토어 초기화
-          this.$router.push({ path: '/Login.page' }); // 로그인 페이지로 리다이렉트
-        })
-        .catch(err => {
-          console.error('로그아웃 처리 중 오류:', err);
-          this.$store.commit('setStoreReset'); // 오류가 있어도 스토어는 초기화
-          this.$router.push({ path: '/Login.page' }); // 로그인 페이지로 리다이렉트
-        });
-    },
+    methods: {
+        toggleMenu() {
+            this.isMenuOpen = !this.isMenuOpen;
+        },
+        // 메뉴 닫기
+        closeMenu() {
+            this.isMenuOpen = false;
+        },
+        async updateMenuStats(menuId) {
+            try {
+                const response = await updateStatsByMenuId(menuId);
+                if (response.status === 200) {
+                    console.log(`메뉴 ID ${menuId} 통계 업데이트 성공`);
+                }
+            } catch (error) {
+                console.error(`메뉴 ID ${menuId} 통계 업데이트 중 오류:`, error);
+            }
+        },
+        logout() {
+            // 백엔드 로그아웃 API 호출
+            logOutProc()
+                .then(() => {
+                    console.log('로그아웃 성공 - 서버 측 쿠키 삭제 완료');
+                    this.$store.commit('setStoreReset'); // 로그아웃 성공 후 스토어 초기화
+                    this.$router.push({ path: '/Login.page' }); // 로그인 페이지로 리다이렉트
+                })
+                .catch(err => {
+                    console.error('로그아웃 처리 중 오류:', err);
+                    this.$store.commit('setStoreReset'); // 오류가 있어도 스토어는 초기화
+                    this.$router.push({ path: '/Login.page' }); // 로그인 페이지로 리다이렉트
+                });
+        },
 
-  },
-  watch: {},
-  computed: {},
-  components: {},
-  mounted() { },
+    },
+    watch: {},
+    computed: {},
+    components: {},
+    mounted() { },
 };
 </script>

Add a comment

Open 0
Closed 0

List

...	...	@@ -4,6 +4,12 @@
4	4	width: 100%;
5	5	height: 1px;
6	6	}
	7	+.hr.pink {
	8	+ background-color: rgba(194, 61, 71, 0.1);
	9	+ margin: 10px 0;
	10	+ width: 100%;
	11	+ height: 1px;
	12	+}
7	13	.content {
8	14	width: 1500px;
9	15	margin: 0 auto;
...	...	@@ -445,6 +451,15 @@
445	451	padding: 30px;
446	452	margin-bottom: 30px;
447	453
	454	+ .main-img{
	455	+ width: 320px;
	456	+ height: 220px;
	457	+ border-radius: 24px;
	458	+ img{
	459	+ width: 100%;
	460	+ height: 100%;
	461	+ }
	462	+ }
448	463	}
449	464
450	465	.text-box {
...	...	@@ -770,7 +785,7 @@
770	785	height: 45px;
771	786	gap: 5px;
772	787	border-radius: 5px;
773		-
	788	+ background-color: #000;
774	789	p {
775	790	font-size: 16px;
776	791	color: #fff;
...	...	@@ -779,23 +794,7 @@
779	794	}
780	795	}
781	796
782		- /* 닫기 버튼 스타일 */
783		- button {
784		- width: 40px;
785		- height: 40px;
786		- background-color: #000;
787		- color: white;
788		- border: none;
789		- border-radius: 50px;
790		- }
791	797
792		- button.closebtn {
793		- font-size: 20px;
794		- }
795		-
796		- button:hover {
797		- background-color: #0056b3;
798		- }
799	798
800	799	.register-b {
801	800	width: 110px;
...	...	@@ -804,6 +803,7 @@
804	803	background-color: #000;
805	804	color: #fff;
806	805	font-family: "Pretendard-M";
	806	+ border-radius: 50px;
807	807	}
808	808
809	809	}
...	...	@@ -1205,6 +1205,7 @@
1205	1205	input[type='radio']+label {
1206	1206	font-size: 17px;
1207	1207	font-family: "Pretendard-L";
	1208	+ width: 95px;
1208	1209	}
1209	1210
1210	1211	/* 기본스타일 제거, 버튼 모양 재설정 */
...	...	@@ -1321,4 +1322,6 @@
1321	1322	td,
1322	1323	th {
1323	1324	padding: 10px 0;
1324		-} (파일 끝에 줄바꿈 문자 없음)
	1325	+}
	1326	+
	1327	+

...	...	@@ -1,98 +1,166 @@
1		-header{
	1	+header {
2	2	width: 100%;
3	3	position: fixed;
4	4	top: 0;
5	5	z-index: 20;
6	6	background-color: #fff;
7	7	}
8		-.container{
	8	+
	9	+.container {
9	10	margin: 120px 0;
10	11	position: relative;
11	12	}
12		-.header-container{
	13	+
	14	+.header-container {
13	15	width: 1500px;
14	16	display: flex;
15	17	align-items: center;
16	18	justify-content: space-between;
17	19	padding: 24px 0;
18	20	position: sticky;
19		- .logo img{width: 174px; height: 69px;}
20		- .nav-wrap{display: flex;}
21	21
22		- nav{
23		- & > ul{display: flex; gap: 102px;}
24		- & > ul > li{font-size: 22px; position: relative;}
25		-
26		- & > ul > li:hover .submenu {
27		- opacity: 1; /* hover시 보이도록 */
28		- visibility: visible; /* hover시 보이도록 */
	22	+ .logo img {
	23	+ width: 174px;
	24	+ height: 69px;
29	25	}
30		- .submenu{
31		- position: absolute;
32		- top: 51px;
33		- left: 50%;
34		- transform: translateX(-50%);
35		- z-index: 2;
36		- width: 180px;
37		- padding: 30px 20px;
38		- border-radius: 20px;
39		- box-shadow: 1px 0px 20px 0px rgba(0, 0, 0, 0.15);
40		- background-color: #fff;
41		- opacity: 0; /* 기본적으로 숨김 */
42		- visibility: hidden; /* 기본적으로 숨김 */
43		- transition: opacity 0.3s ease, visibility 0.3s ease;
44		- p{
45		- padding-left: 10px;
46		- font-size: 18px;
47		- a{display: contents;}
48		- }
49		- p:hover{
50		- background-color: #f9ebed;
51		- }
	26	+
	27	+ .nav-wrap {
	28	+ display: flex;
	29	+ }
	30	+
	31	+ nav {
	32	+ &>ul {
	33	+ display: flex;
	34	+ gap: 102px;
52	35	}
53		- .submenu::before{
54		- content: "";
55		- display: block;
56		- width: 0;
57		- height: 0;
58		- border-left: 17px solid transparent;
59		- border-right: 17px solid transparent;
60		- border-bottom: 17px solid #fff;
61		- position: absolute;
62		- top: -15px;
63		- left: 50%;
64		- transform: translateX(-50%);
	36	+
	37	+ &>ul>li {
	38	+ font-size: 22px;
	39	+ position: relative;
	40	+ }
	41	+
	42	+ &>ul>li:hover .submenu {
	43	+ opacity: 1;
	44	+ /* hover시 보이도록 */
	45	+ visibility: visible;
	46	+ /* hover시 보이도록 */
65	47	}
66	48	}
67		- .auth-area{
68		- display: flex; align-items: center; gap: 50px;
69		- ul{display: flex; align-items: center; gap: 20px;}
70		- li{ display: flex; align-items: center;
71		- img{margin-right: 6px;}
72		- a{font-size: 16px;}
	49	+
	50	+ .submenu {
	51	+ position: absolute;
	52	+ top: 51px;
	53	+ left: 50%;
	54	+ transform: translateX(-50%);
	55	+ z-index: 2;
	56	+ width: 180px;
	57	+ padding: 30px 20px;
	58	+ border-radius: 20px;
	59	+ box-shadow: 1px 0px 20px 0px rgba(0, 0, 0, 0.15);
	60	+ background-color: #fff;
	61	+ opacity: 0;
	62	+ /* 기본적으로 숨김 */
	63	+ visibility: hidden;
	64	+ /* 기본적으로 숨김 */
	65	+ transition: opacity 0.3s ease, visibility 0.3s ease;
	66	+
	67	+ p {
	68	+ padding-left: 10px;
	69	+ font-size: 18px;
	70	+
	71	+ a {
	72	+ display: contents;
	73	+ }
73	74	}
74		- .line{width: 2px; height: 16px; background-color: #eeeeee;}
	75	+
	76	+ p:hover {
	77	+ background-color: #f9ebed;
	78	+ }
	79	+ }
	80	+
	81	+ .submenu::before {
	82	+ content: "";
	83	+ display: block;
	84	+ width: 0;
	85	+ height: 0;
	86	+ border-left: 17px solid transparent;
	87	+ border-right: 17px solid transparent;
	88	+ border-bottom: 17px solid #fff;
	89	+ position: absolute;
	90	+ top: -15px;
	91	+ left: 50%;
	92	+ transform: translateX(-50%);
	93	+ }
	94	+
	95	+ .auth-area {
	96	+ display: flex;
	97	+ align-items: center;
	98	+ gap: 50px;
	99	+
	100	+ ul {
	101	+ display: flex;
	102	+ align-items: center;
	103	+ gap: 20px;
	104	+ }
	105	+
	106	+ li {
	107	+ display: flex;
	108	+ align-items: center;
	109	+
	110	+ img {
	111	+ margin-right: 6px;
	112	+ }
	113	+
	114	+ a {
	115	+ font-size: 16px;
	116	+ }
	117	+ }
	118	+
	119	+ .line {
	120	+ width: 2px;
	121	+ height: 16px;
	122	+ background-color: #eeeeee;
	123	+ }
75	124	}
76	125	}
77	126
78		-footer{
	127	+footer {
79	128	background-color: #333;
80	129	border-top-left-radius: 50px;
81	130	border-top-right-radius: 50px;
82		- .footer-container{
83		- display: flex; align-items: center; gap: 80px; padding: 35px 0;
84		- ul{display: flex; align-items: center; gap: 20px; margin-bottom: 5px;}
85		- li, p{
	131	+
	132	+ .footer-container {
	133	+ display: flex;
	134	+ align-items: center;
	135	+ gap: 80px;
	136	+ padding: 35px 0;
	137	+
	138	+ ul {
	139	+ display: flex;
	140	+ align-items: center;
	141	+ gap: 20px;
	142	+ margin-bottom: 5px;
	143	+ }
	144	+
	145	+ li,
	146	+ p {
86	147	font-size: 18px;
87	148	color: rgba(255, 255, 255, 0.5);
88	149	font-family: "Pretendard-M";
89	150	}
90	151
91		- .line{width: 2px; height: 13px; background-color: rgba(255, 255, 255, 0.3);}
	152	+ .line {
	153	+ width: 2px;
	154	+ height: 13px;
	155	+ background-color: rgba(255, 255, 255, 0.3);
	156	+ }
92	157
93	158	}
94		-
	159	+
95	160	}
96	161
97		-.scroll-up{position: fixed; right: 5%;
98		- bottom: 101px;} (파일 끝에 줄바꿈 문자 없음)
	162	+.scroll-up {
	163	+ position: fixed;
	164	+ right: 210px;
	165	+ bottom: 101px;
	166	+} (파일 끝에 줄바꿈 문자 없음)

Delete comment