From f78f096af551c8a105717f54ce9054d742f7dcd8 Mon Sep 17 00:00:00 2001
From: daniel LEE <leejk0523@gmail.com>
Date: Sun, 3 Nov 2024 09:01:02 +0900
Subject: [PATCH] =?UTF-8?q?=EA=B3=B5=ED=86=B5=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=9F=B0=ED=8A=B8=EC=97=90=EC=84=9C=20=EB=B0=9B=EC=9D=80=20?=
 =?UTF-8?q?=EB=8D=B0=EC=9D=B4=ED=83=80=EB=A5=BC=20=ED=98=84=EC=9E=AC=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=EC=97=90=20=EB=84=98=EA=B8=B0?=
 =?UTF-8?q?=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nuxt/app.vue                   | 52 +++++++++++++++++++++++++++++-----
 nuxt/components/DateSearch.vue | 37 ++++++++++++++++++++++++
 2 files changed, 82 insertions(+), 7 deletions(-)
 create mode 100644 nuxt/components/DateSearch.vue

diff --git a/nuxt/app.vue b/nuxt/app.vue
index cefe07f..c29ddd3 100644
--- a/nuxt/app.vue
+++ b/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>
\ No newline at end of file
+
+.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>
diff --git a/nuxt/components/DateSearch.vue b/nuxt/components/DateSearch.vue
new file mode 100644
index 0000000..6c7dd5e
--- /dev/null
+++ b/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>