[Vuejs] 설문양식

<div class="form_box title">
  <div>
    <div class="form_title">
      에이스침대 매트리스 공동구매
    </div>
    <div class="form_warning">
      * 본 상품은 시제품이 아닌 공동구매 한정 프로모션 상품입니다.
    </div>
    <div class="form_warning">
      * 신청접수 후 매트리스 생산 및 순차배송이 진행되므로 설치까지 약 1달의 시간이 소요됩니다.
    </div>
    <div class="form_warning">
      * 주문시 상품제작이라 상품 배송일 지정 이후 개인의 단순변심으로 인한 환불은 불가합니다
    </div>
    <div class="form_warning">
      * A/S기간은 구매 후 2년입니다.
    </div>
    <div class="form_warning">
      * 2개 이상 구매시 상품 제작, 배송 혼선을 방지하기 위해 건당 설문 작성 부탁드립니다.
    </div>
    <div class="form_warning">
      문의전화 : 010-5593-4662
    </div>
  </div>
</div>
<div class="form_box">
  <label for="username"><div class="number">1.</div> 구매자 성함</label>
  <input
    v-model="name"
    placeholder="답변을 입력해주세요."
    required
  >

  <label for="nickname"><div class="number">2.</div> 구매자 연락처 (- 제외)</label>
  <input
    v-model="phone"
    placeholder="답변을 입력해주세요."
    required
  >

  <label for="password"><div class="number">3.</div> 배송희망일</label>
  <input
    v-model="deliveryDate"
    placeholder="답변을 입력해주세요."
    required
  >
  <label for="password"><div class="number">4.</div> 주소</label>

  <div class="wrap_sub">
    <input
      id="postcode"
      v-model="zonecode"
      placeholder="우편 번호"
      class="postcode"
    >
    <div
      class="button_grey"
      @click="execDaumPostcode"
    >
      주소검색
    </div>
  </div>
  <input
    id="roadAddress"
    v-model="basicAddress"
    placeholder="기본 주소"
  >
  <div class="desktop"/>
  <div>
    <input
      id="detailAddress"
      v-model="detailAddress"
      placeholder="상세 주소"
    >
  </div>
  <label for="password"><div class="number">5.</div> 상품명</label>
  <div class="product_warning">
    독립형포켓스프링 제품은 현재 에이스 본사에서 리뉴얼 진행중으로 주문이 불가합니다. 이점 참고 부탁드립니다.
  </div>
  <div class="radio-group">
    <label class="radio-label">
      <input
        v-model="selectedBedType"
        type="radio"
        name="radioGroup"
        value="highest"
        class="radio-input"
      >
      하이브리드 최고급형
    </label>

    <label class="radio-label">
      <input
        v-model="selectedBedType"
        type="radio"
        name="radioGroup"
        value="ace"
        class="radio-input"
      >
      에이스 스위트 코지
    </label>

    <label class="radio-label">
      <input
        v-model="selectedBedType"
        type="radio"
        name="radioGroup"
        value="intermediate"
        class="radio-input"
      >
      에이스 중급형
    </label>
  </div>
  <label for="password"><div class="number">6.</div> 상품사이즈</label>
  <div class="radio-group">
    <label class="radio-label">
      <input
        v-model="selectedBedSize"
        type="radio"
        name="sizeGroup"
        value="single"
        class="radio-input"
      >
      싱글 (1000*2000)
    </label>

    <label class="radio-label">
      <input
        v-model="selectedBedSize"
        type="radio"
        name="sizeGroup"
        value="supersingle"
        class="radio-input"
      >
      슈퍼싱글 (1100*2000)
    </label>

    <label class="radio-label">
      <input
        v-model="selectedBedSize"
        type="radio"
        name="sizeGroup"
        value="double"
        class="radio-input"
      >
      더블 (1400*2000)
    </label>
    <label class="radio-label">
      <input
        v-model="selectedBedSize"
        type="radio"
        name="sizeGroup"
        value="queen"
        class="radio-input"
      >
      퀸 (1500*2000)
    </label>
    <label class="radio-label">
      <input
        v-model="selectedBedSize"
        type="radio"
        name="sizeGroup"
        value="king"
        class="radio-input"
      >
      킹 (1600*2000)
    </label>
    <label class="radio-label">
      <input
        v-model="selectedBedSize"
        type="radio"
        name="sizeGroup"
        value="largeking"
        class="radio-input"
      >
      라지킹 (1800*2000)
    </label>
  </div>
  <label for="password"><div class="number">7.</div> 결제방식</label>
  <div class="radio-group">
    <label class="radio-label">
      <input
        v-model="selectedPaymentMethod"
        type="radio"
        name="payGroup"
        value="bank"
        class="radio-input"
      >
      계좌이체
    </label>

    <label class="radio-label">
      <input
        v-model="selectedPaymentMethod"
        type="radio"
        name="payGroup"
        value="card"
        class="radio-input"
      >
      카드결제
    </label>
  </div>
  <div class="wrap_button">
    <div
      class="button_okay"
      @click="requestSubmit"
    >
      제출
    </div>
  </div>
</div>

<style lang="scss" scoped>

.wrap_screen {
  padding: 10px;
  background-color: #F7F8FB;
}
.signin_title {
  padding-bottom: 20px;
  font-size: 25px;
  line-height: 40px;
  text-align: center;
  transition: opacity 1s ease-in;
}

.signin_subtitle {
  margin-top: 30px;
  margin-bottom: 40px;
  font-size: 20px;
  text-align: center;
  transition: opacity 1s ease-in;
}

.wrap_signin {
  align-items: center;
  justify-content: center;
}

.wrap_answer {
  display: flex;
  align-items: center;
  justify-content: center;
}

.answer {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 500px;
  min-height: 46px;
  margin-top: 20px;
  font-size: 16px;
  cursor: pointer;
  background-color: rgb(255, 255, 255);
  border: 1px solid rgb(225, 225, 225);
  border-radius: 60px;
}

.center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.next {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 30px;
  margin-top: 20px;
  color: white;
  cursor: pointer;
  background-color: #1F89F6;
  border-radius: 46px;
}

.selected {
  background-color: rgb(231, 231, 231); /* Change this to your desired color */
}

.form_box {
  width: 700px;
  padding: 20px;
  margin: 37px auto;
  background-color: white;
  border-radius: 7px;
  box-shadow: 0 0 10px rgba(97, 97, 97, 0.1);
}

label {
  display: block;
  margin-top: 10px;
  margin-bottom: 15px;
  font-weight: 600;
}

input {
  box-sizing: border-box;
  width: 100%;
  padding: 12px 10px;
  margin-bottom: 16px;
  font-size: 14px;
  color: #222222b3;
  background-color: #f7f8fb;
  border: 1px solid transparent;
  border-radius: 8px;
}

input::placeholder {
  color: #b8b8b8b3;
}

.button_okay {
  width: 100px;
  padding: 10px 20px;
  color: white;
  text-align: center;
  cursor: pointer;
  background: #1F89F6;
  border-radius: 20px;
}

.wrap_button {
  display: flex;
  gap: 10px;
  justify-content: right;
}

.number {
  display: inline-block;
  font-size: bold;
  color: #1F89F6;
}

.button_grey {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 40px;
  margin-bottom: 16px;
  color: white;
  cursor: pointer;
  background-color: #a0a0a0;
  border-radius: 4px;
}

.wrap_sub {
  display: flex;
  align-items: center;
}

.postcode {
  width: 100px;
  margin-right: 20px;
}

.product_warning {
  padding-bottom: 10px;
  padding-left: 10px;
  font-size: 12px;
  color: grey;
}

.radio-group {
  flex-direction: column; /* 세로로 배치 */
  padding-bottom: 10px;
}

.radio-label {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 12px 10px;
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 500 !important;
  color: #222222b3;
  cursor: pointer;
  background-color: #f7f8fb;
  border: 1px solid transparent;
  border-radius: 8px;
}

.radio-input {
  position: relative;
  appearance: none;
  width: 15px;
  height: 15px;
  margin-right: 5px;
  margin-bottom: 0;
  cursor: pointer;
  border: 2px solid #9f9f9f;
  border-radius: 50%;
  outline: none;
}

.radio-input:checked {
  color: white;
  content: '\2713';
  background-color: #1F89F6;
  border-color: #1F89F6;
}

.radio-input:checked + .radio-label {
  background-color: blue !important;
}

.radio-input::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  color: white;
  content: '\2713';
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.radio-input:checked::before {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 10px;
  height: 10px;
  margin-bottom: 1px;
  margin-left: 2px;
  color: white;
  content: '\2713';
  background-color: #1F89F6;
  border-color: #1F89F6;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.radio-text {
  margin-left: 5px;
}

.form_title {
  padding: 10px 0;
  font-size: 22px;
  font-weight: 700;
}

.form_warning {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 500;
  color: #7a7a7a;
}

.title {
  border-top: 5px solid #1F89F6;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}

.picture {
  width: 300px;
  height: 300px;
  background-color: #eeeeee;
}
</style>