카테고리수정정

src/components/category/CategoryBtn.vue

@@ -5,35 +5,33 @@
             type="button"
             class="btn"
             :class="{
-                'btn-outline-primary': selectedCategory !== 'all',
+            'btn-outline-primary': selectedCategory !== 'all',
-                'btn-primary': selectedCategory === 'all'
+            'btn-primary': selectedCategory === 'all'
             }"
             @click="selectCategory('all')"
         >
-        All
+            All
         </button>
         </li>
         <li v-for="category in lists" :key="category.value" class="mt-2 me-2">
-            <button
+        <button
-                type="button"
+            type="button"
-                class="btn"
+            class="btn"
-                :class="{
+            :class="{
-                    'btn-outline-primary': category.value !== selectedCategory,
+                'btn-outline-primary': category.value.toString() !== selectedCategory?.toString(),
-                    'btn-primary': category.value === selectedCategory
+                'btn-primary': category.value.toString() === selectedCategory?.toString()
                 }"
-                @click="selectCategory(category.value)"
+            @click="selectCategory(category.value)"
-            >
+        >
-                {{ category.label }}
+            {{ category.label }}
-            </button>
+        </button>
         </li>
     </ul>
-
 </template>
 
 <script setup>
-import { defineProps, ref, watch } from 'vue';
+import { defineProps, defineEmits, ref, watch } from 'vue';
 
-// lists prop 정의
 const props = defineProps({
     lists: {
         type: Array,
@@ -44,7 +42,7 @@ const props = defineProps({
         required: false,
     },
     selectedCategory: {
-        type: [String, Number],
+        type: String,
         default: null,
         required: false,
     },
@@ -63,4 +61,5 @@ watch(() => props.selectedCategory, (newVal) => {
     selectedCategory.value = newVal;
 });
 
+
 </script>