fix: Apply changes

dani784601 · Oct 21, 2024 · dbeb78f · dbeb78f
1 parent e67a75e
commit dbeb78f
Show file tree

Hide file tree

Showing 8 changed files with 48 additions and 51 deletions.
diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz
diff --git a/package.json b/package.json
@@ -8,7 +8,7 @@
     "deploy": "gh-pages -d docs"
   },
   "homepage": "https://dani784601.github.io/3-sprint-mission-fe",
-  "packageManager": "[email protected].0",
+  "packageManager": "[email protected].1",
   "devDependencies": {
     "gh-pages": "^6.2.0",
     "jsdoc": "^4.0.3",

diff --git a/src/apis/fetch.js b/src/apis/fetch.js
@@ -1,6 +1,5 @@
 export const BASE_URL = new URL('https://sprint-mission-api.vercel.app/');
 
-
 /**
  *
  * @param { 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE' } method
@@ -21,11 +20,10 @@ export const fetchReq = async (method, path, payload) => {
   try {
     const response = await fetch(new URL(path, BASE_URL), options);
     if (!response.ok) {
-      throw new Error(`HTTP error! status: ${response.status}`);
+      throw new Error(`HTTP error status ${response?.status}`);
     }
     return response;
   } catch (error) {
-    console.error('Fetch error:', error.message);
-    throw error;
+    throw new Error("Fetch request failed", { cause: error });
   }
 };
diff --git a/src/apis/main.js b/src/apis/main.js
@@ -10,7 +10,7 @@ const getRandomCatImage = async () => {
     return src[0].url;
   } catch (error) {
     console.error('이미지 가져오기 실패:', error);
-    return ''; // 또는 기본 이미지 URL을 반환합니다.
+    return '';
   }
 }
 const testImgSrc = await getRandomCatImage();
@@ -42,22 +42,42 @@ const runTest = async (service, newEntity, updatedEntity, testQueryObj, serviceN
   for (const func of Object.keys(service)) {
     if (typeof service[func] !== 'function') continue;
     try {
-      // 'get'과 'list'를 동시에 포함하는지 테스트하는 정규식
       if (/(?=.*get)(?=.*list)/i.test(func)) {
-        logResult(func, true);
+        const res = await service[func](testQueryObj());
+        assert(res.ok);
+        logResult(`GET 리스트&쿼리 요청 성공(${func})`, true);
       }
       if (/create/.test(func)) {
-        logResult(func, true);
+        const res = await service[func](newEntity);
+        assert(res.ok);
+        logResult(`POST 생성 요청 성공(${func})`, true);
       }
-      // 오직 'get'만 포함하는지 테스트하는 정규식
       if ((/get(?!.*list)/i).test(func)) {
-        logResult(func, true);
+        try {
+          const res = await service[func](-1);
+          assert(res.ok);
+          logResult(`GET 존재하지 않는 ID(-1) 요청시 404 반환(${func})`, false);
+        } catch (error) {
+          logResult(`GET 존재하지 않는 ID(-1) 요청시 404 반환(${func})`, true);
+        }
       }
       if ((/patch/).test(func)) {
-        logResult(func, true);
+        try {
+          const res = await service[func](-1, updatedEntity);
+          assert(res.ok);
+          logResult(`PATCH 존재하지 않는 ID(-1) 요청시 404 반환(${func})`, false);
+        } catch (error) {
+          logResult(`PATCH 존재하지 않는 ID(-1) 요청시 404 반환(${func})`, true);
+        }
       }
       if ((/delete/).test(func)) {
-        logResult(func, true);
+        try {
+          const res = await service[func](-1);
+          assert(res.ok);
+          logResult(`DELETE 존재하지 않는 ID(-1) 요청시 404 반환(${func})`, false);
+        } catch (error) {
+          logResult(`존재하지 않는 ID(-1) 요청시 404 반환(${func})`, true);
+        }
       }
     } catch (error) {
       logResult(func, false, error.message);

diff --git a/src/apis/service/ArticleService.js b/src/apis/service/ArticleService.js
@@ -5,7 +5,7 @@ const path = new URL('/articles', BASE_URL);
 /**
  * 게시글 등록
  * @typedef { Object } Article
- * @property { number } id - 게시글 ID
+ * @property { number | undefined } id - 게시글 ID
  * @property { string } title - 제목
  * @property { string } content - 내용
  * @property { string } image - 이미지 URL

diff --git a/src/apis/service/ProductService.js b/src/apis/service/ProductService.js
@@ -4,6 +4,7 @@ const path = new URL('/products', BASE_URL);
 
 /**
  * @typedef {Object} Product
+ * @property { number | undefined } id - 상품 ID
  * @property {string} name - 상품명
  * @property {string} description - 설명
  * @property {number} price - 가격

diff --git a/src/pages/sign-in.html b/src/pages/sign-in.html
@@ -31,7 +31,7 @@
   <main class="min-h-screen">
     <article class="login-container grid justify-center gap-10 mb-gap-6 py-15 tb-pt-12 mb-pt-6 px-13 mb-px-4">
       <section class="flex justify-center">
-        <a href="/" aria-label="홈으로">
+        <a href="/src/index.html" aria-label="홈으로">
           <img class="flex justify-center mb-w-49.5 mx-auto" src="../images/logo/panda-market-logo.png" alt="판다마켓 로고"
             width="396" height="132">
         </a>
@@ -49,7 +49,7 @@
               <div class="grid">
                 <input class="pr-12" type="password" minlength="8" autocomplete="current-password" id="password"
                   name="password" placeholder="비밀번호를 입력해주세요" required />
-                <input type="checkbox" name="show-password" />
+                <input type="checkbox" name="show-password" aria-label="toggle password visibility" />
               </div>
               <p class="form-error-msg"></p>
             </div>
@@ -62,10 +62,10 @@
           <p class="text-lg gray800 font-medium">간편 로그인하기</p>
           <div class="flex gap-4">
             <a href="https://www.google.com/" aria-label="구글 간편 로그인">
-              <img src="../images/logo/google-login.png" width="42" alt="">
+              <img src="../images/logo/google-login.png" width="42" alt="구글 로그인">
             </a>
             <a href="https://www.kakaocorp.com/page/" aria-label="카카오톡 간편 로그인">
-              <img src="../images/logo/kakao-login.png" width="42" alt="">
+              <img src="../images/logo/kakao-login.png" width="42" alt="카카오톡 로그인">
             </a>
           </div>
         </div>
@@ -121,7 +121,7 @@
       }, { signal: signal });
 
       submitBtn.addEventListener('click', (e) => {
-        inputs.forEach(el => el.reportValidity());
+        inputs.forEach(input => input.reportValidity());
         if (Array.from(inputs).every(el => el.validity.valid)) {
           if (USER_DATA_MAP.has(userEmail.value) && USER_DATA_MAP.get(userEmail.value) === userPassword.value) {
             window.location.href = '/src/pages/items.html';

diff --git a/src/pages/sign-up.html b/src/pages/sign-up.html
@@ -100,22 +100,11 @@
     </dialog>
   </main>
   <script type="module">
-    import { setVisibleInput } from '../utils/formUtils.js'
+    import { toggleInputVisibility, setValidationMsg } from '../utils/formUtils.js'
 
     const controller = new AbortController();
     const signal = controller.signal;
-    const errMsgType = {
-      email: {
-        typeMismatch: '잘못된 이메일 형식입니다.'
-      },
-      nickname: {},
-      password: {
-        tooShort: '비밀번호를 8자 이상 입력해주세요'
-      },
-      ['check-password']: {
-        customError: '비밀번호가 일치하지 않습니다.'
-      }
-    }
+
     window.addEventListener('DOMContentLoaded', () => {
       const form = document.querySelector('form');
       const showPwdBtn = form.querySelectorAll('input[name="show-password"]');
@@ -125,7 +114,7 @@
 
       for (const input of inputs) {
         userInputs[input.id] = input;
-        input.addEventListener('change', () => {
+        input.addEventListener('input', () => {
           if (input.id === 'check-password') {
             if (input.value !== userInputs.password.value) {
               input.setCustomValidity(errMsgType[input.id].customError);
@@ -137,37 +126,26 @@
             userInputs['check-password'].value = '';
           }
           input.checkValidity();
-          const formData = new FormData(form);
-          const errMsg = input.nextElementSibling.tagName === 'P' ? input.nextElementSibling : input.parentElement.nextElementSibling;
-          errMsg.classList.add('fade-in');
-          if (input.validity.valid === true) {
-            errMsg.textContent = '';
-          } else {
-            for (const errType in input.validity) {
-              if (errType !== 'valid' && input.validity[errType] === true) {
-                errMsg.textContent = errMsgType[input.id][errType] ?? input.placeholder;
-
-              }
-            }
-          }
         }, { signal: signal });
       }
 
       for (const btn of showPwdBtn) {
         btn.addEventListener('click', (e) => {
-          setVisibleInput(e);
+          toggleInputVisibility(e);
         }, { signal: signal });
       }
+
       form.addEventListener('formdata', (e) => {
         if (Array.from(inputs).every(input => input.validity.valid)) {
           button.classList.replace('bg-gray400', 'bg-primary');
         } else {
           button.classList.replace('bg-primary', 'bg-gray400');
         }
       }, { signal: signal });
-      button.onclick = () => {
+
+      button.addEventListener('click', () => {
         inputs.forEach(input => input.reportValidity());
-        if ([...inputs].every(input => input.validity.valid)) {
+        if (Array.from(inputs).every(el => el.validity.valid)) {
           if (USER_DATA_MAP.has(userInputs.email.value)) {
             document.querySelector('dialog p').textContent = '사용 중인 이메일입니다.';
             document.querySelector('dialog button').onclick = () => {
@@ -182,9 +160,9 @@
           }
           document.querySelector('dialog').showModal();
         }
-      }
+      });
     });
-    window.addEventListener('beforeunload', () => {
+    window.addEventListener('unload', () => {
       controller.abort();
     });
   </script>