add new method refactor

src/views/AddMerchView.vue

@@ -1,7 +1,9 @@
 <script setup>
 import router from '@/router/index.js'
 import { computed, ref } from 'vue'
-import { apiClient } from '@/services/apiClient.js'
+import { useMerchApi } from '@/api/merch.js'
+
+const { addMerch } = useMerchApi()
 
 const mandarakeLink = 'https://order.mandarake.co.jp/order/listPage/list?soldOut=1&keyword='
 
@@ -59,13 +61,13 @@ const payload = computed(() => {
   }
 })
 
-const addMerch = async () => {
-  const response = await apiClient.post('/merch/', payload.value)
-  if (response.status === 200) {
-    router.push({ name: 'collection' })
-  } else {
-    console.log("Add merch error: ", response)
+const addNewMerch = async () => {
+  try {
+    await addMerch(payload)
+  } catch (error) {
+    console.log(error)
   }
+  router.push({ name: "collection" })
 }
 </script>
 
@@ -98,7 +100,7 @@ const addMerch = async () => {
       </div>
 
       <div class="mt-10 c-center">
-        <n-button class="w360" type="primary" @click="addMerch">Add</n-button>
+        <n-button class="w360" type="primary" @click="addNewMerch">Add</n-button>
       </div>
     </n-form>
   </n-card>