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

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

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