버튼, 라디오, 콤보박스 추가

.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>

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,14 +40,18 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import { ref, onMounted } from 'vue';
-import axios from 'axios'; // axios 불러오기
+import axios from 'axios';
+import { Button } from 'ant-design-vue';
 
-export default {
+const users = ref([]);
-  name: 'App',
+const selectedOption = ref('');
-  setup() {
+const radioOption = ref('option1'); // 기본 선택값 설정
-    const users = ref([]); // 사용자 목록을 저장할 ref 변수
+
+const handleClick = () => {
+  alert('Button clicked!');
+};
 
 const fetchUsers = async () => {
   try {
@@ -29,25 +62,15 @@ export default {
   }
 };
 
-    // 컴포넌트가 마운트될 때 fetchUsers 함수를 호출하여 데이터 가져오기
 onMounted(() => {
   fetchUsers();
 });
-
-    return {
-      users,
-    };
-  },
-};
 </script>
 
-<style>
+<style scoped>
-#app {
+.select-container {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
+  display: flex;
-  -webkit-font-smoothing: antialiased;
+  flex-direction: column;
-  -moz-osx-font-smoothing: grayscale;
+  margin-top: 20px;
-  text-align: left;
-  color: #2c3e50;
-  margin-top: 60px;
 }
 </style>

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'
   ]
 })

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",

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);
+});

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==