greenwhale/app/pages/contact/support.vue

<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>