From 05c39ed977aa5286540a1590cc997f5fc8101a5d Mon Sep 17 00:00:00 2001
From: daniel LEE <leejk0523@gmail.com>
Date: Sat, 2 Nov 2024 14:08:45 +0900
Subject: [PATCH] =?UTF-8?q?=EB=B2=84=ED=8A=BC,=20=EB=9D=BC=EB=94=94?=
 =?UTF-8?q?=EC=98=A4,=20=EC=BD=A4=EB=B3=B4=EB=B0=95=EC=8A=A4=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .idea/vcs.xml                  |  1 -
 nuxt/app.vue                   | 91 +++++++++++++++++++++-------------
 nuxt/nuxt.config.ts            |  3 ++
 nuxt/package.json              |  1 +
 nuxt/plugins/ant-design-vue.js |  8 +--
 nuxt/yarn.lock                 |  2 +-
 6 files changed, 67 insertions(+), 39 deletions(-)

diff --git a/.idea/vcs.xml b/.idea/vcs.xml
index 8395ab5..94a25f7 100644
--- a/.idea/vcs.xml
+++ b/.idea/vcs.xml
@@ -2,6 +2,5 @@
 <project version="4">
   <component name="VcsDirectoryMappings">
     <mapping directory="$PROJECT_DIR$" vcs="Git" />
-    <mapping directory="$PROJECT_DIR$/vue" vcs="Git" />
   </component>
 </project>
\ No newline at end of file
diff --git a/nuxt/app.vue b/nuxt/app.vue
index 5fa286f..cefe07f 100644
--- a/nuxt/app.vue
+++ b/nuxt/app.vue
@@ -1,5 +1,34 @@
 <template>
   <div id="app">
+    <div>
+      <h1>Ant Design Button Demo</h1>
+      <a-button type="primary" @click="handleClick">Click Me</a-button>
+    </div>
+
+    <div>
+      <h1>타입 선택</h1>
+      <div class="select-container">
+        <a-select v-model:value="selectedOption" placeholder="옵션을 선택하세요" style="width: 200px">
+          <a-select-option value="option1">옵션 1</a-select-option>
+          <a-select-option value="option2">옵션 2</a-select-option>
+          <a-select-option value="option3">옵션 3</a-select-option>
+        </a-select>
+        <br>
+        <p>선택한 옵션: {{ selectedOption }}</p>
+      </div>
+    </div>
+
+    <div>
+      <h2>옵션 선택</h2>
+      <a-radio-group v-model:value="radioOption">
+        <a-radio value="option1">옵션 1</a-radio>
+        <a-radio value="option2">옵션 2</a-radio>
+        <a-radio value="option3">옵션 3</a-radio>
+      </a-radio-group>
+      <br><br>
+      <p>선택한 옵션: {{ radioOption }}</p>
+    </div>
+
     <h1>사용자 목록</h1>
     <!-- 데이터가 로드되면 목록을 출력하고, 로드되지 않았으면 로딩 메시지를 표시 -->
     <ul v-if="users.length">
@@ -11,43 +40,37 @@
   </div>
 </template>
 
-<script>
-import {ref, onMounted} from 'vue';
-import axios from 'axios'; // axios 불러오기
+<script setup>
+import { ref, onMounted } from 'vue';
+import axios from 'axios';
+import { Button } from 'ant-design-vue';
 
-export default {
-  name: 'App',
-  setup() {
-    const users = ref([]); // 사용자 목록을 저장할 ref 변수
+const users = ref([]);
+const selectedOption = ref('');
+const radioOption = ref('option1'); // 기본 선택값 설정
 
-    const fetchUsers = async () => {
-      try {
-        const response = await axios.get('/api/all'); // 엔드포인트를 적절히 변경
-        users.value = response.data; // 데이터를 users 배열에 저장
-      } catch (error) {
-        console.error('데이터를 가져오는 중 오류가 발생했습니다:', error);
-      }
-    };
-
-    // 컴포넌트가 마운트될 때 fetchUsers 함수를 호출하여 데이터 가져오기
-    onMounted(() => {
-      fetchUsers();
-    });
-
-    return {
-      users,
-    };
-  },
+const handleClick = () => {
+  alert('Button clicked!');
 };
+
+const fetchUsers = async () => {
+  try {
+    const response = await axios.get('/api/all'); // 엔드포인트를 적절히 변경
+    users.value = response.data; // 데이터를 users 배열에 저장
+  } catch (error) {
+    console.error('데이터를 가져오는 중 오류가 발생했습니다:', error);
+  }
+};
+
+onMounted(() => {
+  fetchUsers();
+});
 </script>
 
-<style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: left;
-  color: #2c3e50;
-  margin-top: 60px;
+<style scoped>
+.select-container {
+  display: flex;
+  flex-direction: column;
+  margin-top: 20px;
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/nuxt/nuxt.config.ts b/nuxt/nuxt.config.ts
index cbdc4b7..58156a5 100644
--- a/nuxt/nuxt.config.ts
+++ b/nuxt/nuxt.config.ts
@@ -4,5 +4,8 @@ export default defineNuxtConfig({
   devtools: { enabled: true },
   plugins: [
     '~/plugins/ant-design-vue.js'
+  ],
+  css: [
+    'ant-design-vue/dist/reset.css'
   ]
 })
diff --git a/nuxt/package.json b/nuxt/package.json
index 7c0002b..d202a06 100644
--- a/nuxt/package.json
+++ b/nuxt/package.json
@@ -10,6 +10,7 @@
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
+    "@ant-design/icons-vue": "^7.0.1",
     "ant-design-vue": "^4.2.5",
     "axios": "^1.7.7",
     "nuxt": "^3.13.2",
diff --git a/nuxt/plugins/ant-design-vue.js b/nuxt/plugins/ant-design-vue.js
index df5cd99..9dec42f 100644
--- a/nuxt/plugins/ant-design-vue.js
+++ b/nuxt/plugins/ant-design-vue.js
@@ -1,5 +1,7 @@
-import Vue from 'vue';
+import { defineNuxtPlugin } from '#app';
 import Antd from 'ant-design-vue';
-import 'ant-design-vue/dist/antd.css';
+import 'ant-design-vue/dist/reset.css';
 
-Vue.use(Antd);
+export default defineNuxtPlugin((nuxtApp) => {
+    nuxtApp.vueApp.use(Antd);
+});
\ No newline at end of file
diff --git a/nuxt/yarn.lock b/nuxt/yarn.lock
index 80a5a6a..c52928e 100644
--- a/nuxt/yarn.lock
+++ b/nuxt/yarn.lock
@@ -22,7 +22,7 @@
   resolved "https://registry.yarnpkg.com/@ant-design/icons-svg/-/icons-svg-4.4.2.tgz#ed2be7fb4d82ac7e1d45a54a5b06d6cecf8be6f6"
   integrity sha512-vHbT+zJEVzllwP+CM+ul7reTEfBR0vgxFe7+lREAsAA7YGsYpboiq2sQNeQeRvh09GfQgs/GyFEvZpJ9cLXpXA==
 
-"@ant-design/icons-vue@^7.0.0":
+"@ant-design/icons-vue@^7.0.0", "@ant-design/icons-vue@^7.0.1":
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/@ant-design/icons-vue/-/icons-vue-7.0.1.tgz#83de301771fadd03f3890e627314102405c31c22"
   integrity sha512-eCqY2unfZK6Fe02AwFlDHLfoyEFreP6rBwAZMIJ1LugmfMiVgwWDYlp1YsRugaPtICYOabV1iWxXdP12u9U43Q==