codeit-sprint-fullstack · mdeeno · Dec 18, 2025 · Dec 18, 2025
diff --git a/ArticleService.js b/ArticleService.js
@@ -0,0 +1,136 @@
+// [ ]  'https://panda-market-api-crud.vercel.app/docs/#/Article'
+// API를 이용하여 아래 함수들을 구현해 주세요.
+
+// [ ]  fetch 혹은 axios 를 이용해 주세요.
+// [ ] 응답의 상태 코드가 2XX가 아닐 경우, 에러메시지를 콘솔에 출력해 주세요.
+// [ ]  .then() 메서드를 이용하여 비동기 처리를 해주세요.
+// [ ]  .catch() 를 이용하여 오류 처리를 해주세요.
+
+const articleUrl = 'https://panda-market-api-crud.vercel.app/articles';
+
+// [ ] getArticleList() : GET 메서드를 사용해 주세요.
+// [ ] page, pageSize, keyword 쿼리 파라미터를 이용해 주세요.
+export function getArticleList(page = 1, pageSize = 10, keyword = '') {
+  // 쿼리 생성
+  const listQuery = new URLSearchParams({
+    page,
+    pageSize,
+    keyword,
+  }).toString();
+
+  fetch(`${articleUrl}?${listQuery}`)
+    .then((response) => {
+      if (!response.ok) {
+        throw new Error(
+          `조회 실패, status: ${response.status}, text: ${response.statusText}`
+        );
+      }
+      return response.json();
+    })
+    .then((data) => {
+      console.log('게시글 목록:', data);
+    })
+    .catch((error) => {
+      console.error(error);
+      throw error;
+    });
+}
+
+// [ ] getArticle() : GET 메서드를 사용해 주세요.
+export function getArticle(id) {
+  fetch(`${articleUrl}/${id}`)
+    .then((response) => {
+      if (!response.ok) {
+        throw new Error(
+          `데이터 조회 실패, , status: ${response.status}, text: ${response.statusText}`
+        );
+      }
+      return response.json();
+    })
+    .then((data) => {
+      console.log(`게시글(${id}) 조회 성공:`, data);
+    })
+    .catch((error) => {
+      console.error(error);
+      throw error;
+    });
+}
+
+// [ ] createArticle() : POST 메서드를 사용해 주세요.
+// [ ] request body에 title, content, image 를 포함해 주세요.
+export function createArticle(title, content, image) {
+  fetch(articleUrl, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({
+      title,
+      content,
+      image,
+    }),
+  })
+    .then((response) => {
+      if (!response.ok) {
+        throw new Error(
+          `게시글 등록 실패, status: ${response.status}, text: ${response.statusText}`
+        );
+      }
+      return response.json();
+    })
+    .then((data) => {
+      console.log('게시물 등록 성공:', data);
+    })
+    .catch((error) => {
+      console.error(error);
+      throw error;
+    });
+}
+
+// [ ] patchArticle() : PATCH 메서드를 사용해 주세요.
+export function patchArticle(id, data) {
+  fetch(`${articleUrl}/${id}`, {
+    method: 'PATCH',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(data),
+  })
+    .then((response) => {
+      if (!response.ok) {
+        throw new Error(
+          `게시글 수정 실패, status: ${response.status}, text: ${response.statusText}`
+        );
+      }
+      return response.json();
+    })
+    .then((data) => {
+      console.log(`게시글(${id}) 수정 성공:`, data);
+    })
+    .catch((error) => {
+      console.error(error);
+      throw error;
+    });
+}
+
+// [ ] deleteArticle() : DELETE 메서드를 사용해 주세요.
+export function deleteArticle(id) {
+  fetch(`${articleUrl}/${id}`, {
+    method: 'DELETE',
+  })
+    .then((response) => {
+      if (!response.ok) {
+        throw new Error(
+          `게시글 삭제 실패, status: ${response.status}, text: ${response.statusText}`
+        );
+      }
+      return response.json().catch(() => ({ message: '삭제 성공(내용 없음)' }));
+    })
+    .then((data) => {
+      console.log(`게시글(${id}) 삭제 성공:`, data);
+    })
+    .catch((error) => {
+      console.error(error);
+      throw error;
+    });
+}
diff --git a/ProductService.js b/ProductService.js
@@ -0,0 +1,122 @@
+// [ ]  'https://panda-market-api-crud.vercel.app/docs/#/Product'
+// API를 이용하여 아래 함수들을 구현해 주세요.
+
+// [ ]  async/await 을 이용하여 비동기 처리를 해주세요.
+// [ ]  try/catch 를 이용하여 오류 처리를 해주세요.
+
+const productUrl = 'https://panda-market-api-crud.vercel.app/products';
+
+// [ ] getProductList() : GET 메서드를 사용해 주세요.
+// [ ] page, pageSize, keyword 쿼리 파라미터를 이용해 주세요.
+export async function getProductList(page = 1, pageSize = 10, keyword = '') {
+  try {
+    const listQuery = new URLSearchParams({
+      page,
+      pageSize,
+      keyword,
+    }).toString();
+
+    const response = await fetch(`${productUrl}?${listQuery}`);
+
+    if (!response.ok) {
+      throw new Error(`상품 목록 조회 실패, status: ${response.status}, text: ${response.statusText}`);
+    }
+    const data = await response.json();
+    console.log('상품목록:', data);
+  } catch (error) {
+    console.error(error);
+    throw error;
+  }
+}
+
+// [ ] getProduct() : GET 메서드를 사용해 주세요.
+export async function getProduct(id) {
+  try {
+    const response = await fetch(`${productUrl}/${id}`);
+
+    if (!response.ok) {
+      throw new Error(`상품 상세 조회 실패, status: ${response.status}, text: ${response.statusText}`);
+    }
+
+    const data = await response.json();
+    console.log(`상품 (${id}) 조회 성공:`, data);
+  } catch (error) {
+    console.error(error);
+    throw error;
+  }
+}
+
+// [ ] createProduct() : POST 메서드를 사용해 주세요.
+// [ ] request body에 name, description, price, tags, images 를 포함해 주세요.
+export async function createProduct(name, description, price, tags, images) {
+  try {
+    const response = await fetch(productUrl, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        name,
+        description,
+        price,
+        tags,
+        images,
+      }),
+    });
+
+    if (!response.ok) {
+      throw new Error(`상품 등록 실패, status: ${response.status}, text: ${response.statusText}`);
+    }
+
+    const data = await response.json();
+    console.log('상품 등록 성공:', data);
+  } catch (error) {
+    console.error(error);
+    throw error;
+  }
+}
+
+// [ ] patchProduct() : PATCH 메서드를 사용해 주세요.
+export async function patchProduct(id, data) {
+  try {
+    const response = await fetch(`${productUrl}/${id}`, {
+      method: 'PATCH',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(data),
+    });
+
+    if (!response.ok) {
+      throw new Error(`상품 수정 실패, status: ${response.status}, text: ${response.statusText}`);
+    }
+
+    const result = await response.json();
+    console.log(`상품(${id}) 수정 성공:`, result);
+  } catch (error) {
+    console.error(error);
+    throw error;
+  }
+}
+
+// [ ] deleteProduct() : DELETE 메서드를 사용해 주세요.
+export async function deleteProduct(id) {
+  try {
+    const response = await fetch(`${productUrl}/${id}`, {
+      method: 'DELETE',
+    });
+
+    if (!response.ok) {
+      throw new Error(`상품 삭제 실패, status: ${response.status}, text: ${response.statusText}`);
+    }
+
+    const data = await response
+      .json()
+      .catch(() => ({ message: '삭제 성공(내용 없음)' }));
+
+    console.log(`상품(${id}) 삭제 성공:`, data);
+  } catch (error) {
+    console.error(error);
+    throw error;
+  }
+}
diff --git a/README.md b/README.md
@@ -6,8 +6,9 @@
 반응형 웹 디자인을 적용하여 다양한 디바이스에서 최적화된 화면을 제공하며, 공통된 디자인 시스템을 통해 일관성 있는 UI를 구축했습니다.
 
 ## 2. 구현 기능 및 페이지
+
 ### 2-1. 랜딩 페이지
 
 ### 2-2. 로그인 페이지
 
-### 2-3. 회원가입 페이지
+### 2-3. 회원가입 페이지
diff --git a/index.html b/index.html
@@ -1,6 +1,21 @@
 <!DOCTYPE html>
 <html lang="ko">
   <head>
+    <!-- Google tag (gtag.js) -->
+    <!-- <script
+      async
+      src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"
+    ></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag('js', new Date());
+
+      gtag('config', 'G-XXXXXXXXXX'); // 여기에 측정 ID 수정필요
+    </script> -->
+
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>판다마켓</title>
@@ -15,33 +30,33 @@
   </head>
   <body>
     <header>
-      <a class="header_logo" href="/">
+      <a class="headerLogo" href="/">
         <img src="./img/logo.svg" alt="판다마켓 로고" />
-        <h1 class="sr-only">판다마켓 메인 페이지</h1>
+        <h1 class="srOnly">판다마켓 메인 페이지</h1>
       </a>
-      <a class="login-btn" href="./login.html">로그인</a>
+      <a class="loginBtn" href="./login.html">로그인</a>
     </header>
 
     <main>
       <section id="hero">
-        <div class="hero_container">
+        <div class="heroContainer">
           <h2>
             일상의 모든 물건을
             <br />
             거래해 보세요
           </h2>
-          <a class="item_btn" href="./items.html">구경하러 가기</a>
+          <a class="itemBtn" href="./items.html">구경하러 가기</a>
         </div>
       </section>
 
       <section id="feature">
         <!-- 핫 아이템 섹션 -->
-        <div class="feature_item">
-          <div class="img_box">
+        <div class="featureItem">
+          <div class="imgBox">
             <img src="./img/hot_item.png" alt="인기 상품 예시 이미지" />
           </div>
-          <div class="text_box">
-            <a class="sub_title">Hot item</a>
+          <div class="textBox">
+            <a class="subTitle">Hot item</a>
             <h2>
               인기 상품을
               <br />
@@ -56,12 +71,12 @@ <h3>
         </div>
 
         <!-- 서치 섹션 -->
-        <div class="feature_item">
-          <div class="img_box">
+        <div class="featureItem">
+          <div class="imgBox">
             <img src="./img/search.png" alt="검색 예시 이미지" />
           </div>
-          <div class="text_box">
-            <a class="sub_title">Search</a>
+          <div class="textBox">
+            <a class="subTitle">Search</a>
             <h2>
               구매를 원하는
               <br />
@@ -76,12 +91,12 @@ <h3>
         </div>
 
         <!-- 레지스터 섹션 -->
-        <div class="feature_item">
-          <div class="img_box">
+        <div class="featureItem">
+          <div class="imgBox">
             <img src="./img/register.png" alt="레지스터 예시 이미지" />
           </div>
-          <div class="text_box">
-            <a class="sub_title">Register</a>
+          <div class="textBox">
+            <a class="subTitle">Register</a>
             <h2>
               판매를 원하는
               <br />
@@ -99,7 +114,7 @@ <h3>
 
       <!-- bottom 배너 섹션 -->
       <section id="bottom">
-        <div class="bottom_container">
+        <div class="bottomContainer">
           <h2>
             믿을 수 있는
             <br />
@@ -110,14 +125,14 @@ <h2>
     </main>
     <footer>
       <div id="footer">
-        <div id="footer_left">
+        <div id="footerLeft">
           <a>@codeit - 2024</a>
         </div>
-        <div id="footer_center">
+        <div id="footerCenter">
           <a href="./privacy.html">Privacy Policy</a>
           <a href="./faq.html">FAQ</a>
         </div>
-        <div id="sns_icon">
+        <div id="snsIcon">
           <a href="https://www.facebook.com/">
             <img src="./img/ic_facebook.png" alt="페이스북 바로가기" />
           </a>