하석형 하석형 05-28
Merge branch 'master' of http://210.180.118.83/jhpark/cms_frontend
@34db55e3a4ceacad1cee20039e61deb1efdbdf8a
 
client/resources/css/common.css (added)
+++ client/resources/css/common.css
@@ -0,0 +1,12 @@
+@charset "utf-8";
+
+.flex{display: flex; }
+.justify-between{justify-content: space-between;}
+.justify-start{justify-content: start;}
+
+.align-center{align-items: center;}
+
+
+.mb20{margin-bottom: 2rem;}
+.mb15{margin-bottom: 1.5rem;}
+.mb30{margin-bottom: 3rem;}(파일 끝에 줄바꿈 문자 없음)
 
client/resources/css/header.css (added)
+++ client/resources/css/header.css
@@ -0,0 +1,162 @@
+@charset "utf-8";
+.logo {
+    width: 150px;
+}
+.user-wrap {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+    font-size: 1.7rem;
+    
+}
+
+.user-wrap header {
+    width: 100%;
+    background-color: #fff;
+    border-bottom: 1px solid #C6C6C6;
+    position: relative;
+    z-index: 2;
+    margin-bottom: 3rem;
+    
+}
+
+.user-wrap header.company-header {
+    width: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    position: absolute;
+    z-index: 2;
+    border-bottom: 1px solid #aaa;
+}
+.header-wrap{
+    width: 1400px;
+     margin: 0 auto;}
+.company-sub-menu {
+    background-color: rgba(0, 0, 0, 0.5)
+}
+
+.company-sub-menu li>a,
+.company-sub-menu li>p {
+    border: 1px solid #fff;
+    color: #fff;
+}
+
+.msub-menu {
+    display: none;
+}
+
+.msub-menu li>a,
+.msub-menu li>p {
+    display: block;
+    width: 100%;
+    border: 0;
+    padding: 1rem;
+    font-size: 1.6rem;
+    text-align: left;
+}
+
+.msub-menu.show,
+.sub-menu.show {
+    display: block;
+}
+
+.msub-menu.show {
+    border-bottom: 1px solid #eee;
+}
+.main-menu{
+    &:hover{
+        &::before{
+            content: '';
+            position: absolute;
+            display: block;
+            top: 88px;
+            left: 0;
+            width: 100%;
+            height: 150px;
+            background: #fff;
+            z-index: 1;
+        }
+    }
+    
+}
+.main-menu>li>a,
+.main-menu>li>p {
+    display: block;
+    text-align: center;
+    font-size: 1.8rem;
+    font-weight: 700;
+    height: 6rem;
+    line-height: 6rem;
+}
+.main-menu > li {
+    position: relative; 
+    min-width: 160px;
+    &:hover {
+        &::after {
+            position: absolute;
+            bottom: calc(var(--krds-spacer-4) * -1);
+            left: 50%;
+            bottom: 0;
+            content: "";
+            transition: width 0.4s ease-in-out, height 0.4s ease-in-out; 
+            width: 0;
+            height: 0.4rem;
+            background-color: var(--green);
+            transform: translateX(-50%);
+        }
+    }
+
+    &:hover::after {
+        width: 100%; 
+    }
+}
+header.company-header .main-menu>li>a,
+header.company-header .main-menu>li>p {
+    color: var(--white);
+}
+
+
+
+.main-menu>li:hover>a,
+.main-menu>li:hover>p,
+.user-wrap header.company-header .main-menu>li:hover>a,
+.user-wrap header.company-header .main-menu>li:hover>p {
+    color: var(--green);
+}
+
+.pc-menu{
+
+}
+
+.sub-menu {
+    width: 100%;
+    height: 150px;
+    position: absolute;
+    background-color: #fff;
+    min-width: 160px;
+    z-index: 1;
+    display: none;
+    padding: 0 !important;
+    left: 0;
+    bottom: -2px;
+    transform: translateY(100%);
+}
+
+.sub-menu-inner{
+    display: block;
+    width: 100%;
+}
+
+.sub-menu li>a,
+.sub-menu li>p {
+    display: block;
+    width: 100%;
+    border-radius: 0 10px 0 10px;
+    padding: 1.3rem 0;
+    font-size: 1.6rem;
+    text-align: center;
+    font-weight: 700;
+    &:hover{
+        color: var(--green);
+    }
+}
+.mobile-menu{display: none;}(파일 끝에 줄바꿈 문자 없음)
 
client/resources/css/header_column.css (added)
+++ client/resources/css/header_column.css
@@ -0,0 +1,221 @@
+@charset "utf-8";
+.logo {
+    width: 150px;
+    height: 80px;
+}
+.user-wrap {
+    display: flex;
+    justify-content: space-between;
+    min-height: 100vh;
+    font-size: 1.7rem;
+}
+
+.user-wrap header {
+    width: 30rem;
+    padding: 2rem 0 0 2rem;
+    background-color: #fff;
+    border-right: 1px solid #C6C6C6;
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    z-index: 200;
+    .header{
+        display: block;
+    }
+}
+.main-menu{display: block;
+    &::before{
+        
+    }
+    &:hover{
+    }
+    > li{padding: 2rem 0; height: 6rem;}
+}
+
+.main-menu>li>a,
+.main-menu>li>p {
+    display: block;
+    font-size: 1.8rem;
+    font-family: "yungju";
+    text-align: left;
+}
+
+header.company-header .main-menu>li>a,
+header.company-header .main-menu>li>p {
+    color: var(--white);
+}
+
+.main-menu>li.active>a,
+.main-menu>li.active>p {
+    border-bottom: 2px solid var(--green);
+    color: var(--green);
+}
+
+.main-menu>li:hover>a,
+.main-menu>li:hover>p,
+.user-wrap header.company-header .main-menu>li:hover>a,
+.user-wrap header.company-header .main-menu>li:hover>p {
+    color: var(--green);
+
+}
+
+.sub-menu {
+    position: absolute;
+    background-color: #fff;
+    min-width: 160px;
+    height: 100%;
+    z-index: 1;
+    display: none;
+    left: 30rem;
+    top: 0;
+    padding-top: 11rem;
+}
+
+.sub-menu-inner{
+    li{
+        /* max-width: 25%; */
+        padding-left: 10px;
+    }
+}
+
+.sub-menu li>a,
+.sub-menu li>p {
+    display: block;
+    width: 100%;
+    border-radius: 0 10px 0 10px;
+    padding: 1rem;
+    font-size: 1.6rem;
+    text-align: left;
+    font-weight: 600;
+    &:hover{
+        color: var(--green);
+    }
+}
+
+
+.company-sub-menu {
+    background-color: rgba(0, 0, 0, 0.5)
+}
+
+.company-sub-menu li>a,
+.company-sub-menu li>p {
+    border: 1px solid #fff;
+    color: #fff;
+}
+
+.msub-menu {
+    display: none;
+}
+
+.msub-menu li>a,
+.msub-menu li>p {
+    display: block;
+    width: 100%;
+    border: 0;
+    padding: 1rem;
+    font-size: 1.6rem;
+    text-align: left;
+}
+
+.msub-menu.show,
+.sub-menu.show {
+    display: block;
+}
+
+.msub-menu.show {
+    border-bottom: 1px solid #eee;
+}
+.sub-sub-menu{
+    padding: 0;
+}
+.sub-sub-menu>li{
+    padding: 0;
+    p{
+        padding: 1rem 0 1rem 2rem;
+        font-weight: 500;
+    }
+}
+.sub-sub-menu>li>a {
+    display: block;
+    width: 100%;
+    font-size: 1.6rem;
+    text-align: center;
+}
+
+.sub-menu>li>a:hover,
+.sub-sub-menu>li>a:hover {
+    background-color: var(--sky-green);
+}
+
+/* 
+.user-wrap nav ul.main-menu li{
+    position: relative;
+}
+.user-wrap ul.main-menu > li{
+    padding: 2rem 3.5rem;
+}
+.user-wrap ul.main-menu > li > a,
+.user-wrap ul.main-menu > li > p{
+    display: block;
+    font-size: 1.8rem;
+    font-family: "yungju";
+
+}
+
+.user-wrap ul.main-menu > li > p.active {
+   border-bottom: 3px solid var(--green);
+   color: var(--green);
+}
+
+
+.user-wrap nav ul.sub-menu {
+    overflow: hidden;
+    position: absolute;
+    width: 100%;
+    background-color: #fff;
+    z-index: 4;
+    bottom: -2px;
+    left: 0;
+    transform: translateY(100%);
+    transition: max-height 1.8s ease-in-out, opacity 0.5s ease-in-out;
+}
+
+.user-wrap nav ul.sub-menu li a {
+    display: block;
+    text-align: center;
+    font-size: 1.6rem;
+    padding: 5px 0;
+}
+
+.navbg {
+    overflow: hidden;
+    background-color: #fff;
+    border-bottom: 1px solid var(--sky-green);
+    box-shadow: 0 5px 10px var(--light);
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    transform: translateY(100%);
+    width: 100%;
+    z-index: 3;
+    transition: height 0.6s ease-in-out;
+} */
+
+/* 메인 */
+
+.user-wrap .main-warp {
+    flex-grow: 1;
+    margin-left: 16rem;
+    margin-top: 3rem;
+}
+.user-info-wrap{margin-right: 2rem;}
+
+.page {
+    width: 100%;
+    height: 100vh;
+}
+
+.content-page {
+    width: 100%;
+    height: calc(100% - 66px);
+}(파일 끝에 줄바꿈 문자 없음)
client/resources/scss/common/base/_reset.scss
--- client/resources/scss/common/base/_reset.scss
+++ client/resources/scss/common/base/_reset.scss
@@ -9,7 +9,7 @@
 	word-break: keep-all;
 	word-wrap: break-word;
 	-webkit-tap-highlight-color : transparent;
-	overflow: hidden;
+	// overflow: hidden;
 
 	// scroll-behavior: smooth;
 }
@@ -23,7 +23,7 @@
 
 #root {
 	width: 100%;
-	height: 100%;
+	// height: 100%;
 }
 
 *:focus {
@@ -130,7 +130,7 @@
 	min-width: 100%;
 }
 img {
-	max-width: 100%;
+	// max-width: 100%;
 	vertical-align: top;
 }
 ul,
client/views/index.html
--- client/views/index.html
+++ client/views/index.html
@@ -11,6 +11,12 @@
   <!-- 공통css -->
   <link rel="stylesheet" href="/client/resources/lib/swiper/swiper-bundle.min.css">
   <link rel="stylesheet" href="/client/build/assets/css/app.css">
+  <link rel="stylesheet" href="/client/resources/css/header.css">
+  <link rel="stylesheet" href="/client/resources/css/common.css">
+  <!-- <link rel="stylesheet" href="/client/resources/css/header_column.css"> -->
+  <link rel="stylesheet" href="/client/views/themes/tema_v2/css/component.css">
+  <link rel="stylesheet" href="/client/views/themes/tema_v2/css/main.css">
+  <link rel="stylesheet" href="/client/views/themes/tema_v2/css/style.css">
  
   <!-- 스크립트 -->
   <script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
client/views/layout/UserHeader.vue
--- client/views/layout/UserHeader.vue
+++ client/views/layout/UserHeader.vue
@@ -12,7 +12,8 @@
           <!-- <p class="white detail-text">문의전화</p> -->
           <p>☎ 054)639-6161~3</p>
         </div>
-        <div class="user-info mobile-menu">
+        <UserMenu />
+        <div class="user-info ">
           <div class="flex align-center">
             <button class="user-name cursor" @click="fnLink">
               {{ mbrNm }}님
@@ -21,7 +22,6 @@
             <button v-else class="logout-btn" @click="fnlogin">로그인</button>
           </div>
         </div>
-        <UserMenu />
         <!-- <div class="flex justify-end align-center user-info-wrap">
 
           <div class="user-info pc-menu">
client/views/pages/user/portal/main/Main.vue
--- client/views/pages/user/portal/main/Main.vue
+++ client/views/pages/user/portal/main/Main.vue
@@ -15,89 +15,79 @@
             <div class="swiper-button-prev button"></div>
             <div class="swiper-button-next button"></div>
           </div>
-          <div class="gd-4 pr0 ">
-  
-            <!-- 검색창 -->
-            <div class="community-zone mb20">
-              <div class="box-out-title flex justify-between align-center">
-  
-              </div>
-              <div class="search-bar text-ct" tabindex="0">
-                <div class="box">
-                  <p>통합검색</p>
-                  <div class="bar"></div>
-                  <input type="text" class="search-input" placeholder="검색어를 입력하세요." v-model="search.searchText"
-                    @keyup.enter="totalSearch" />
-                  <button class="icon-button search-button" @click="totalSearch">
-                    <svg-icon type="mdi" :path="this.$iconPath()" class="search-icon"></svg-icon>
+           <!-- 검색창 -->
+          <div class="search-top-box">
+              <div class="sch-form-wrap">
+                <div class="sch-input">
+                  <input type="text" id="keyword_search" class="form-control" placeholder="키워드 입력" title="키워드 입력">
+                  <button type="button" class=" btn-ico ico-sch btn-exec">
+                    <span class="sr-only">검색</span>
                   </button>
                 </div>
               </div>
             </div>
-            <div class="">
-  
-              <div class="box-out-title flex justify-between align-center">
-                <p>공지사항(목록형)</p>
-                <router-link to="/portal/BBS_MNG_000000000000027/list.page" class=" flex align-center">
-                  <p class="mr5">바로가기</p>
-                  <svg-icon type="mdi" :width="15" :height="15" :path="this.$iconPath('mdiArrowRight')"></svg-icon>
-                </router-link>
+          
+        </div>
+           
+          <div class="mb30">
+
+            <div class="box-out-title flex justify-between align-center">
+              <p>공지사항(목록형)</p>
+              <router-link to="/portal/BBS_MNG_000000000000027/list.page" class=" flex align-center">
+                <p class="mr5">바로가기</p>
+                <svg-icon type="mdi" :width="15" :height="15" :path="this.$iconPath('mdiArrowRight')"></svg-icon>
+              </router-link>
+            </div>
+            <div class="box">
+              <div class="tab-nav mb15">
+                <ul class="flex align-center" style="gap: 30px;">
+                  <li v-for="(item, idx) in codeList" :key="idx" :value="item.cd" :class="{
+                    ' ': true,
+                    activeTab: activeTab === item.cd,
+                  }" @click="showTab(item.cd)">
+                    <p>{{ item.cdNm }}</p>
+                  </li>
+                </ul>
               </div>
-              <div class="box">
-                <div class="tab-nav mb15">
-                  <ul class="flex align-center" style="gap: 30px;">
-                    <li v-for="(item, idx) in codeList" :key="idx" :value="item.cd" :class="{
-                      ' ': true,
-                      activeTab: activeTab === item.cd,
-                    }" @click="showTab(item.cd)">
-                      <p>{{ item.cdNm }}</p>
-                    </li>
-                  </ul>
-                </div>
-                <div class="tab-content">
-                  <div>
-                    <div class="list_news flex justify-between" style="gap: 20px;">
-                      <ul>
-                        <li class="leli">
-                          <a href="" title="천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)">천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)</a>
-                          <span>2025.01.08</span>
-                        </li>
-                        <li class="leli">
-                          <a href="" title="천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)">천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)</a>
-                          <span>2025.01.08</span>
-                        </li>
-                        <li class="leli">
-                          <a href="" title="천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)">천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)</a>
-                          <span>2025.01.08</span>
-                        </li>
-                      </ul>
-                      <ul>
-                        <li class="leli">
-                          <a href="" title="천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)">천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)</a>
-                          <span>2025.01.08</span>
-                        </li>
-                        <li class="leli">
-                          <a href="" title="천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)">천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)</a>
-                          <span>2025.01.08</span>
-                        </li>
-                        <li class="leli">
-                          <a href="" title="천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)">천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)</a>
-                          <span>2025.01.08</span>
-                        </li>
-                      </ul>
-                    </div>
+              <div class="tab-content">
+                <div>
+                  <div class="list_news flex justify-between" style="gap: 20px;">
+                    <ul>
+                      <li class="leli">
+                        <a href="" title="천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)">천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)</a>
+                        <span>2025.01.08</span>
+                      </li>
+                      <li class="leli">
+                        <a href="" title="천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)">천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)</a>
+                        <span>2025.01.08</span>
+                      </li>
+                      <li class="leli">
+                        <a href="" title="천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)">천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)</a>
+                        <span>2025.01.08</span>
+                      </li>
+                    </ul>
+                    <ul>
+                      <li class="leli">
+                        <a href="" title="천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)">천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)</a>
+                        <span>2025.01.08</span>
+                      </li>
+                      <li class="leli">
+                        <a href="" title="천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)">천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)</a>
+                        <span>2025.01.08</span>
+                      </li>
+                      <li class="leli">
+                        <a href="" title="천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)">천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)</a>
+                        <span>2025.01.08</span>
+                      </li>
+                    </ul>
                   </div>
                 </div>
-  
               </div>
+
             </div>
-  
           </div>
-  
-  
-        </div>
         <!-- 바로가기 -->
-        <div class="community-zone mb20">
+        <div class="community-zone mb30">
           <div class="box-out-title flex justify-between align-center">
             <p>바로가기</p>
           </div>
client/views/themes/tema_v2/css/component.css
--- client/views/themes/tema_v2/css/component.css
+++ client/views/themes/tema_v2/css/component.css
@@ -2,8 +2,8 @@
 
 /* box */
 .content {
-    width: 100%;
-    height: 100%;
+    width: 1400px;
+    margin: 0 auto;
 }
 
 .row {
@@ -926,15 +926,25 @@
     
   }
   li.swiper-slide{height: 383px;}
-  .swiper-slide{height: 296px;}
+  .swiper-slide{height: 296px; }
   .swiper-slide img {
     width: 100%;
     height: 100%;
     background-color: #aaa;
     text-align: center;
   }
+ .community-zone{position: relative; overflow: hidden;
+    .search-top-box{
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%) translateY(-50%);
+        top: 50%;
+        z-index: 100;
+    }
+} 
 .visual-zone {
-    position: relative;
+    background-color: aliceblue;
+    height: 25rem;
     .button {
       font-size: 0;
       border: none;
@@ -951,7 +961,8 @@
       z-index: 1;
 
     }
-    .swiper-slide{height: 100%;}
+    .swiper-slide{height: 100%;
+    }
     /* 이전 버튼 (prev) */
     .swiper-button-prev {
         left: 20x;
@@ -971,7 +982,7 @@
   
     /* 다음 버튼 (next) */
     .swiper-button-next {
-        right: 20px;
+        right: 10px;
       &::after {
         content: '';  /* content 속성을 추가하여 ::after 가상 요소를 제대로 표시 */
         background-image: url(../img/next.svg);
Add a comment
List