Merge remote-tracking branch 'origin/master'

app/assets/scss/style.scss

@@ -1,5 +1,4 @@
 @import "pretendard/dist/web/static/pretendard.css";
-
 * {
     font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
     &::after, &::before{

app/assets/scss/sub.scss

@@ -0,0 +1,134 @@
+/** 탑 비쥬얼 공통 모듈 **/
+#top--visual{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  
+  height:100%;
+  width: 100%;
+
+  &.contact{
+    background: url(/img/top_ban_contact.jpg) no-repeat top;
+    background-attachment: fixed;  
+    background-size: contain;
+  }
+
+  .inner--content{
+    max-height: 440px;
+    min-height: 440px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    > h1{
+      color:#FFF;
+      text-align: center;      
+      font-size: 48px;      
+      font-weight: 800;
+      display: flex;      
+      align-items: center;
+      justify-content: center;
+    }
+    nav{
+      position: absolute;
+      bottom:0px;
+      left:50%;
+      transform: translateX(-50%);
+      >ul{
+        display: flex;
+        align-items: center;
+        justify-content: center;        
+        >li{
+          position: relative;
+          padding:24px 0px;
+          margin-right:81px;
+          
+          &:last-child{
+            margin-right:0px;
+            &:after{
+              display: none;
+            }
+          }
+
+          &:after{
+            content:'';
+            display: block;
+            width:1px;
+            height:12px;
+            opacity: .5;
+            background: #fff;
+            position: absolute;
+            top:50%;
+            transform: translateY(-50%);
+            right:-41px;
+          }
+
+          a{
+            color:#FFF;            
+            font-size: 14px;
+            font-style: normal;
+            font-weight: 700;            
+            white-space: nowrap;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-wrap: nowrap;
+            gap:4px;
+            i{
+              min-width:20px;
+              height:20px;
+              width:20px;   
+              svg{
+                transition: transform 0.3s ease;
+              }           
+              &.active svg {
+                transform: rotate(180deg);
+                transition: transform 0.3s ease;
+              }
+            }
+          }
+          > ul{
+            position: absolute;
+            top:60px;
+            left:50%;
+            transform: translateX(-50%);
+            background: #fff;
+            padding:16px;
+            max-height: 0;
+            overflow: hidden;
+            opacity: 0;
+            visibility: hidden;
+            transition: all 0.3s ease;
+
+            &.show {
+              max-height: 200px;
+              opacity: 1;
+              visibility: visible;
+            }
+
+            li{
+              display: flex;
+              align-items: center;
+              justify-content: flex-start;
+              width:100%;
+              margin-bottom:16px;
+              &:last-child{
+                margin-bottom:0px;              
+              }
+              a{
+                color:#515973;
+                font-size: 14px;
+                font-style: normal;
+                font-weight: 700;              
+                text-align: left;
+                &:hover{ 
+                  color:#00A654;
+                }
+              }
+            }
+          }      
+        }
+      }
+    }
+  }
+}

app/components/topVisual.vue

@@ -0,0 +1,76 @@
+<template>  
+    <section id="top--visual" :class="className">
+      <div class="inner--content">
+        <h1>{{ title }}</h1>
+        <nav>
+          <ul>
+            <li>
+              <NuxtLink to="/">
+                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+                  <mask id="mask0_127_65147" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
+                  <rect width="20" height="20" fill="#D9D9D9"/>
+                  </mask>
+                  <g mask="url(#mask0_127_65147)">
+                  <path d="M3.75 17.0833V7.70833L10 3L16.25 7.70833V17.0833H11.5833V11.5H8.41667V17.0833H3.75Z" fill="white"/>
+                  </g>
+                </svg>
+              </NuxtLink>            
+            </li>
+            <li v-for="(nav, index) in navigation" :key="nav.name" @mouseenter="showDropdown(index)" @mouseleave="hideDropdown">
+              <NuxtLink :to="nav.link">{{ nav.name }}
+                <i v-if="nav.gnbList" :class="{ 'active': openDropdown === index }">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+                    <mask id="mask0_127_68809" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
+                    <rect width="20" height="20" fill="#D9D9D9"/>
+                    </mask>
+                    <g mask="url(#mask0_127_68809)">
+                    <path d="M9.99935 12.9372L5.29102 8.20801L6.16602 7.33301L9.99935 11.1663L13.8327 7.33301L14.7077 8.20801L9.99935 12.9372Z" fill="white"/>
+                    </g>
+                  </svg>
+                </i>
+              </NuxtLink>
+              <ul v-if="nav.gnbList" :class="{ 'show': openDropdown === index }">
+                <li v-for="gnb in nav.gnbList" :key="gnb.name">
+                  <NuxtLink :to="gnb.link">{{ gnb.name }}</NuxtLink>
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </section>
+</template>
+
+<script>
+export default {
+  name: 'TopVisual',
+  props: {
+    className: {
+      type: String,
+      required: true
+    },
+    title: {
+      type: String,
+      required: true
+    },
+    navigation: {
+      type: Array,
+      required: true
+    }    
+  },
+  data() {
+    return {
+      openDropdown: null
+    }
+  },
+  methods: {
+    showDropdown(index) {
+      this.openDropdown = index;
+    },
+    hideDropdown() {
+      this.openDropdown = null;
+    }
+  }
+}
+</script>
+

app/pages/contact/support.vue

@@ -0,0 +1,134 @@
+<template>
+  <main>
+    <TopVisual :className="className" :title="title" :navigation="navigation" />
+    <section>
+      <div class="inn--container">
+        <h2>고객센터</h2>
+        <div class="form--contents--wrap">
+          <div class="form--contents">
+            <h3>작성자 (성명)</h3>
+            <div>
+              <input type="text" placeholder="성명을 입력해주세요" />
+            </div>
+          </div>
+          <div class="form--contents">
+            <h3>직책</h3>
+            <div>
+              <input type="text" placeholder="연락처를 입력해주세요" />
+            </div>
+          </div>
+          <div class="form--contents">
+            <h3>회사명</h3>
+            <div>
+              <input type="text" placeholder="이메일을 입력해주세요" />
+            </div>
+          </div>
+          <div class="form--contents">
+            <h3>연락처</h3>
+            <div>
+              <select>
+                <option value="010">010</option>
+                <option value="010">010</option>
+                <option value="010">010</option>
+              </select>              
+              <input type="text" placeholder="" />
+              <input type="text" placeholder="" />
+            </div>
+          </div>
+          <div class="form--contents">
+            <h3>아메일</h3>
+            <div>
+              <input type="text" placeholder="이메일을 입력해주세요" />
+            </div>
+          </div>
+          <div class="form--contents">
+            <h3>제목</h3>
+            <div>
+              <input type="text" placeholder="제목을 입력해주세요" />
+            </div>
+          </div>
+          <div class="form--contents">
+            <h3>문의항목</h3>
+            <div>
+              <input type="radio" id="01" name="01" />
+              <label for="01">원료</label>
+              <input type="radio" id="02" name="02" />
+              <label for="02">제품</label>
+              <input type="radio" id="03" name="03" />
+              <label for="03">기술</label>
+              <input type="radio" id="04" name="04" />
+              <label for="04">기타</label>              
+            </div>
+          </div>
+          <div class="form--contents">
+            <h3>제목</h3>
+            <div>
+              <input type="text" placeholder="제목을 입력해주세요" />
+            </div>
+          </div>
+
+          <div class="form--contents">
+            <h3>내용</h3>
+            <div>
+              에디터 자리
+            </div>
+          </div>          
+          
+          <div class="form--contents">
+            <h3>개인 정보 수집 및 이용 동의</h3>
+            <div>
+              그린웨일 글로벌 주식회사 (‘www.greenwhaleglobal.com’이하 '그린웨일 글로벌')은(는) 「개인정보 보호법」 제30조에 따라 정부주체의 개인정보를 보호하고 이와 관련한 고충을 신속하고 원활하게 처리할 수 있도록 하기 위하여 다음과 같이 개인정보 처리방침을 수립·공개합니다.
+이 개인정보처리방침은 2022년 11월 01일부터 적용됩니다.<br/><br/>
+제1조(개인정보의 처리 목적)<br/><br/>
+그린웨일 글로벌은 다음의 목적을 위하여 개인정보를 처리합니다. 처리하고 있는 개인정보는 다음의 목적 이외의 용도로는 이용되지 않으며 이용 목적이 변경되는 경우에는 「개인정보 보호법」 제18조에 따라 별도의 동의를 받는 등 필요한 조치를 이행할 예정입니다.<br/><br/>
+재화 또는 서비스 제공: 맞춤 서비스 제공을 목적으로 개인정보를 처리합니다.
+            </div>
+            <div>
+              <h4>개인정보 수집 및 이용에 동의합니까?.</h4>
+
+              <div>
+                <input type="radio" id="01" name="01" />
+                <label for="01">동의합니다.</label>
+                <input type="radio" id="02" name="02" />
+                <label for="02">동의하지 않습니다.</label>">                
+              </div>
+            </div>
+          </div>
+          <div class="form--contents">
+            <div class="btn--wrap">
+              "보내기"
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </main>
+</template>
+<script>
+import TopVisual from '~/components/topVisual.vue'
+
+export default {
+  name: "support",
+  components: {
+    TopVisual
+  },
+  data() {
+    return {
+      className: "contact",
+      title: "Contact",
+      navigation: [                
+        { name: "Contact", 
+          link: "/contact" ,
+          gnbList : [
+            { name: "공지사항", link: "/" },
+            { name: "FAQ", link: "/" },
+            { name: "고객센터", link: "/" }
+          ]
+        },        
+        { name: "오시는길", link: "/contact/support" }        
+      ],
+      
+    }
+  }
+};  
+</script>

nuxt.config.ts

@@ -18,7 +18,10 @@ export default defineNuxtConfig({
   ui: {
     colorMode: false
   },
-  css: ['~/assets/styles/style.css'],
+  css: [
+    '~/assets/styles/style.css',
+    '~/assets/styles/sub.css'
+  ],
   compatibilityDate: '2025-07-15',
   devtools: { enabled: false },
   devServer: {