공통 컴포런트에서 받은 데이타를 현재 페이지에 넘기기

nuxt/app.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="app">
+  <div v-if="isMounted" id="app">
     <div>
       <h1>Ant Design Button Demo</h1>
       <a-button type="primary" @click="handleClick">Click Me</a-button>
@@ -30,7 +30,6 @@
     </div>
 
     <h1>사용자 목록</h1>
-    <!-- 데이터가 로드되면 목록을 출력하고, 로드되지 않았으면 로딩 메시지를 표시 -->
     <ul v-if="users.length">
       <li v-for="user in users" :key="user.id">
         {{ user.name }} - {{ user.phone }}
@@ -38,31 +37,54 @@
     </ul>
     <p v-else>Loading...</p>
   </div>
+
+  <div v-if="isMounted" class="container">
+    <div class="search-area">
+      <DateSearch @search="handleSearch" />
+    </div>
+
+    <div class="results-area">
+      <ul v-if="results.length">
+        <li v-for="(item, index) in results" :key="index">
+          {{ item }}
+        </li>
+      </ul>
+      <p v-else>검색 결과가 없습니다.</p>
+    </div>
+  </div>
 </template>
 
 <script setup>
 import { ref, onMounted } from 'vue';
 import axios from 'axios';
-import { Button } from 'ant-design-vue';
+import DateSearch from './components/DateSearch.vue';
 
 const users = ref([]);
 const selectedOption = ref('');
-const radioOption = ref('option1'); // 기본 선택값 설정
+const radioOption = ref('option1');
+const results = ref([]);
+const isMounted = ref(false); // 마운트 상태를 확인하는 플래그
 
 const handleClick = () => {
   alert('Button clicked!');
 };
 
+const handleSearch = async ({ startDate, endDate }) => {
+  results.value.push(startDate);
+  results.value.push(endDate);
+};
+
 const fetchUsers = async () => {
   try {
-    const response = await axios.get('/api/all'); // 엔드포인트를 적절히 변경
-    users.value = response.data; // 데이터를 users 배열에 저장
+    const response = await axios.get('/api/all');
+    users.value = response.data;
   } catch (error) {
     console.error('데이터를 가져오는 중 오류가 발생했습니다:', error);
   }
 };
 
 onMounted(() => {
+  isMounted.value = true;
   fetchUsers();
 });
 </script>
@@ -73,4 +95,20 @@ onMounted(() => {
   flex-direction: column;
   margin-top: 20px;
 }
-</style>
+
+.search-area, .results-area {
+  width: 80%;
+  margin: 20px 0;
+  padding: 20px;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+}
+
+.search-area {
+  background-color: #f9f9f9;
+}
+
+.results-area {
+  background-color: #ffffff;
+}
+</style>

nuxt/components/DateSearch.vue

@@ -0,0 +1,37 @@
+<!-- DateSearch.vue -->
+<template>
+  <div>
+    <label for="start-date">시작 날짜:</label>
+    <input type="date" v-model="startDate" id="start-date" />
+
+    <label for="end-date">종료 날짜:</label>
+    <input type="date" v-model="endDate" id="end-date" />
+
+    <button @click="searchData">검색</button>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, defineEmits } from 'vue';
+
+const startDate = ref('');
+const endDate = ref('');
+const emit = defineEmits(['search']);
+const searchData = () => {
+  emit('search', { startDate: startDate.value, endDate: endDate.value });
+};
+
+const today = new Date();
+const tomorrow = new Date();
+tomorrow.setDate(today.getDate() + 1);
+startDate.value = formatDate(today);
+endDate.value = formatDate(tomorrow);
+
+function formatDate(date) {
+  return date.toISOString().split('T')[0];
+}
+</script>
+
+<style scoped>
+/* 필요한 스타일 */
+</style>