주소 component

src/components/input/ArrInput.vue

@@ -0,0 +1,128 @@
+<template>
+    <div class="mb-2">
+        <div class="d-flex align-items-center">
+            <label :for="name" class="col-md-2 col-form-label">
+                {{ title }}
+                <span :class="isEssential ? 'link-danger' : 'd-none'">*</span>
+            </label>
+            <button type="button" class="btn btn-sm btn-primary" @click="openAddressSearch">주소찾기</button>
+        </div>
+
+        <div class="col-md-12">
+            <div class="d-flex mb-3">
+                <input
+                    :id="name"
+                    class="form-control me-2 w-25"
+                    type="text"
+                    v-model="postcode"
+                    placeholder="우편번호"
+                    readonly
+                />
+
+                <input
+                    class="form-control"
+                    type="text"
+                    v-model="address"
+                    placeholder="기본주소"
+                    readonly
+                />
+
+            </div>
+
+            <div>
+                <input
+                    class="form-control"
+                    type="text"
+                    v-model="detailAddress"
+                    placeholder="상세주소"
+                    @input="updateDetailAddress"
+                    :maxLength="maxlength"
+                />
+            </div>
+
+            <div class="invalid-feedback" :class="isAlert ? 'd-block' : ''">{{ title }}를 확인해주세요.</div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+
+const props = defineProps({
+    title: {
+        type: String,
+        default: '라벨',
+        required: true,
+    },
+    name: {
+        type: String,
+        default: 'nameplz',
+        required: true,
+    },
+    isEssential: {
+        type: Boolean,
+        default: false,
+        required: false,
+    },
+    maxlength: {
+        type: Number,
+        default: 30,
+        required: false,
+    },
+    isAlert: {
+        type: Boolean,
+        default: false,
+        required: false,
+    },
+});
+
+const emits = defineEmits(['update:data', 'update:alert']);
+
+// 주소 관련 상태 관리
+const postcode = ref('');
+const address = ref('');
+const detailAddress = ref('');
+
+// 주소 검색 팝업 열기
+const openAddressSearch = () => {
+    new window.daum.Postcode({
+        oncomplete: (data) => {
+            postcode.value = data.zonecode;
+            address.value = data.address;
+
+            // 전체 주소 데이터 내보내기
+            emitAddressData();
+
+            // 상세주소 입력 필드로 포커스 이동
+            setTimeout(() => {
+                const detailInput = document.querySelector('input[placeholder="상세주소"]');
+                if (detailInput) detailInput.focus();
+            }, 100);
+        }
+    }).open();
+};
+
+// 상세주소 업데이트
+const updateDetailAddress = (event) => {
+    detailAddress.value = event.target.value;
+    emitAddressData();
+};
+
+// 전체 주소 데이터 내보내기
+const emitAddressData = () => {
+    const fullAddress = {
+        postcode: postcode.value,
+        address: address.value,
+        detailAddress: detailAddress.value,
+        fullAddress: `${address.value} ${detailAddress.value}`.trim()
+    };
+    emits('update:data', fullAddress);
+};
+
+// isAlert를 false로 설정
+watch([postcode, address], ([newPostcode, newAddress]) => {
+    if (newPostcode && newAddress) {
+        emits('update:alert', false);
+    }
+});
+</script>