diff --git a/.DS_Store b/.DS_Store
index 09539476..7f5011b9 100644
Binary files a/.DS_Store and b/.DS_Store differ
diff --git "a/\355\214\220\353\213\244\353\247\210\354\274\223/.DS_Store" "b/\355\214\220\353\213\244\353\247\210\354\274\223/.DS_Store"
index 375f33f1..da3c3faa 100644
Binary files "a/\355\214\220\353\213\244\353\247\210\354\274\223/.DS_Store" and "b/\355\214\220\353\213\244\353\247\210\354\274\223/.DS_Store" differ
diff --git "a/\355\214\220\353\213\244\353\247\210\354\274\223/api/common/common.js" "b/\355\214\220\353\213\244\353\247\210\354\274\223/api/common/common.js"
new file mode 100644
index 00000000..1670cda9
--- /dev/null
+++ "b/\355\214\220\353\213\244\353\247\210\354\274\223/api/common/common.js"
@@ -0,0 +1,19 @@
+export function responseInterceptor (response) {
+    if(response.status === 200 || response.status === 201 || response.status === 204) {
+        console.log('성공')
+        return response.json().then((res) => ({ isSuccess : true, status : response.status, data:res }));
+    } else {
+        console.log('실패')
+        return response.json().then((res) => ({ isSuccess : false, status : response.status, data:res }));
+    }
+
+    // return response.json().then((res) => ({ isSuccess : 
+    //     response.status === 200 || response.status === 201 || response.status === 204
+    //     , status : response.status, data:res }));
+}
+
+export function handleError (error) {
+    console.log(error)
+    throw errors
+}
+
diff --git "a/\355\214\220\353\213\244\353\247\210\354\274\223/api/common/constant.js" "b/\355\214\220\353\213\244\353\247\210\354\274\223/api/common/constant.js"
new file mode 100644
index 00000000..1c6466e5
--- /dev/null
+++ "b/\355\214\220\353\213\244\353\247\210\354\274\223/api/common/constant.js"
@@ -0,0 +1,3 @@
+
+
+export const apiUrl = "https://sprint-mission-api.vercel.app"
\ No newline at end of file
diff --git "a/\355\214\220\353\213\244\353\247\210\354\274\223/api/main.js" "b/\355\214\220\353\213\244\353\247\210\354\274\223/api/main.js"
new file mode 100644
index 00000000..36b0fbbe
--- /dev/null
+++ "b/\355\214\220\353\213\244\353\247\210\354\274\223/api/main.js"
@@ -0,0 +1,41 @@
+import { ArticleService } from "./services/ArticleService.js";
+import { ProductService } from "./services/ProductService.js";
+
+
+
+
+//articleservice
+const getArticleList = await ArticleService.getArticleList(1, 10, "aa")
+console.log(getArticleList)
+
+const getArticle = await ArticleService.getArticle(2)
+console.log(getArticle)
+
+const createArticle = await ArticleService.createArticle('제목','내용2','sdf.jpg')
+console.log(createArticle)
+
+const patchArticle = await ArticleService.patchArticle('aaa','제목','내용2','sdf.jpg')
+console.log(patchArticle)
+
+const deleteArticle = await ArticleService.deleteArticle(764)
+console.log(deleteArticle)
+
+
+
+
+//productservice
+const getProductList = await ProductService.getProductList(2, 2, "수정")
+console.log(getProductList)
+
+const getProduct = await ProductService.getProduct(2)
+console.log(getProduct)
+
+const createProduct = await ProductService.createProduct('수정','dd',123,'a',['asf'],['sef.jpg'])
+console.log(createProduct)
+
+const patchProduct = await ProductService.patchProduct(80, '수정', 'fff', '333', 'aaa', ['ssf'],['asf.jpg'])
+console.log(patchProduct)
+
+const deleteProduct = await ProductService.deleteProduct(370)
+console.log(deleteProduct)
+
diff --git "a/\355\214\220\353\213\244\353\247\210\354\274\223/api/package.json" "b/\355\214\220\353\213\244\353\247\210\354\274\223/api/package.json"
new file mode 100644
index 00000000..45e8d5a3
--- /dev/null
+++ "b/\355\214\220\353\213\244\353\247\210\354\274\223/api/package.json"
@@ -0,0 +1,3 @@
+{
+    "type" : "module"
+}
\ No newline at end of file
diff --git "a/\355\214\220\353\213\244\353\247\210\354\274\223/api/services/ArticleService.js" "b/\355\214\220\353\213\244\353\247\210\354\274\223/api/services/ArticleService.js"
new file mode 100644
index 00000000..58088b82
--- /dev/null
+++ "b/\355\214\220\353\213\244\353\247\210\354\274\223/api/services/ArticleService.js"
@@ -0,0 +1,98 @@
+import { responseInterceptor, handleError } from "../common/common.js";
+import { apiUrl } from "../common/constant.js";
+
+/**
+ * 게시글 목록 조회
+ * 
+ * @param page 페이지
+ * @param pageSize 페이지당 몇개 올 지
+ * @param keyword 키워드
+ */
+function getArticleList(page, pageSize, keyword){
+    return fetch(`${apiUrl}/articles?page=${page}&pageSize=${pageSize}&keyword=${keyword}`)
+    .then((response) => responseInterceptor(response))
+    .catch((error) => handleError(error))
+}
+
+async function getArticle(id){
+
+    return fetch(`https://sprint-mission-api.vercel.app/articles/${id}`, {
+        method : 'GET',
+        headers : {
+            'Content-Type' : 'application/json',
+        }
+    })
+    .then((response) => responseInterceptor(response))
+    .catch((error) => handleError(error))
+  
+//    .then(function(response){
+//     return responseInterceptor(response)
+//    })
+
+
+}
+
+/**
+ * 게시글생성
+ * 
+ * @param title 제목
+ * @param content 내용
+ * @param img 이미지 링크
+ */
+function createArticle(title, content, img) {
+
+    if (!title || !content || !img) return false;
+    const requestBody = {
+        title : title,
+        content : content,
+        image : img
+    }
+    return fetch('https://sprint-mission-api.vercel.app/articles', {
+        method : 'POST',
+        body : JSON.stringify(requestBody),
+        headers : {
+            'Content-Type' : 'application/json',
+        }
+    })
+    .then((response) => responseInterceptor(response))
+    .catch((error) => handleError(error))
+}
+
+function patchArticle(id, title, content, img) {
+    const requestBody = {
+        title : title,
+        content : content,
+        image : img
+    }
+
+    return fetch(`https://sprint-mission-api.vercel.app/articles/${id}`, {
+        method : 'PATCH',
+        body : JSON.stringify(requestBody),
+        headers : {
+            'Content-Type' : 'application/json',
+        }
+    })
+    .then((response) => responseInterceptor(response))
+    .catch((error) => handleError(error))
+    
+}
+
+function deleteArticle(id) {
+    return fetch(`https://sprint-mission-api.vercel.app/articles/${id}`, {
+        method : 'DELETE',
+        headers : {
+            'Content-Type' : 'application/json',
+        },
+    })
+    .then((response) => responseInterceptor(response))
+    .catch((error) => handleError(error))
+}
+
+export const ArticleService = {
+    getArticleList,
+    getArticle,
+    createArticle,
+    patchArticle,
+    deleteArticle
+}
+
diff --git "a/\355\214\220\353\213\244\353\247\210\354\274\223/api/services/ProductService.js" "b/\355\214\220\353\213\244\353\247\210\354\274\223/api/services/ProductService.js"
new file mode 100644
index 00000000..8b825030
--- /dev/null
+++ "b/\355\214\220\353\213\244\353\247\210\354\274\223/api/services/ProductService.js"
@@ -0,0 +1,136 @@
+// import { responseInterceptor, handleError } from "../common/common.js";
+import { apiUrl } from "../common/constant.js";
+
+
+
+async function getProductList(page, pageSize, keyword){
+    try {
+        
+        const requestBody = {
+            page : page,
+            pageSize : pageSize,
+            keyword : keyword
+        }
+        
+        const response = await fetch(`${apiUrl}/products?page=${page}&pageSize=${pageSize}&keyword=${keyword}`)
+        const data = await response.json()
+              
+        if(response.status === 200 || response.status === 201 || response.status === 204) {
+            console.log('성공')
+        }
+        return {
+            isSuccess : true,
+            status : response.status,
+            data : data
+        }
+    } catch(err) {
+        console.log('이게 에러임', err)
+        return "err catch"
+    }
+}
+
+async function getProduct(id){
+    try{
+        const response = await fetch(`${apiUrl}/products/${id}`)
+    
+        const data = await response.json()
+        return {
+            isSuccess : true,
+            status : response.status,
+            data : data
+        }
+    } catch(err) {
+        console.log('이게 에러임', err)
+        return "err catch"
+    }
+}
+
+async function createProduct(name, description, price, manufacturer, tags, images){
+    try{
+        const requestBody = {
+            name : name,
+            description : description,
+            price : price,
+            manufacturer : manufacturer,
+            tags: tags,
+            images: images
+        }
+    
+        const response = await fetch(`${apiUrl}/products`, {
+            method : 'POST',
+            body : JSON.stringify(requestBody),
+            headers : {
+                'Content-Type' : 'application/json',
+            }
+        })
+        
+        const data = await response.json()
+        return {
+            isSuccess : true,
+            status : response.status,
+            data : data
+        }
+    } catch(err) {
+        console.log('이게 에러임', err)
+        return "err catch"
+    }
+}
+
+async function patchProduct(id, name, description, price, tags, images){
+    try{
+        const requestBody = {
+            "name": name,
+            "description": description,
+            "price": price,
+            "tags": tags,
+            "images": images
+          }
+    
+        const response = await fetch(`${apiUrl}/products/${id}`,{
+            method : 'PATCH',
+            body : JSON.stringify(requestBody),
+            headers : {
+                'Content-Type' : 'application/json',
+            }
+        })
+        const data = await response.json()
+        return {
+            isSuccess : true,
+            status : response.status,
+            data : data
+        }
+    } catch(err) {
+        console.log('이게 에러임', err)
+        return "err catch"
+    }
+}
+
+async function deleteProduct(id){
+    const response = await fetch(`${apiUrl}/products/${id}`, {
+        method : 'DELETE',
+        headers : {
+            'Content-Type' : 'application/json',
+        }
+    })
+    if (response.status === 204) {
+        return {
+            isSuccess : true,
+            status : response.status,
+            data : null
+        }
+    } else {
+        return {
+            isSuccess : false,
+            status : response.status,
+            data : null
+        }
+    }
+}
+
+export const ProductService = {
+    getProductList,
+    getProduct,
+    createProduct,
+    patchProduct,
+    deleteProduct
+}
\ No newline at end of file