5주차 위클리미션 요구사항 구현

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5501
+}

week5/js/signin.js

@@ -1,25 +1,22 @@
 import { correct, errorMessage, emptyInput, errorPrint } from "./utils.js";
-
 const input = document.querySelectorAll('.input');
 const eye = document.querySelectorAll('.eye');
 const pwInput = document.getElementById('signin-password');
 const emailInput = document.getElementById('signin-email');
 const btnLogin = document.querySelector('.btn-login');
 
 // 로그인 버튼 클릭 시 페이지 이동
-function login(e){
-  e.preventDefault();
-
+function login(){
   const { email, password } = correct.userInfo;
 
   if(emailInput.value !== '' && pwInput.value !== ''){
-    if(emailInput.value === email && pwInput.value === password) {
+    if(emailInput.value === email && pwInput.value === password){
       location.href = './folder.html';
     }else{
       emailInput.classList.add('active');
-      pwInput.classList.add('active');
-      errorPrint(emailInput, errorMessage.check);
-      errorPrint(pwInput, errorMessage.check);
+    pwInput.classList.add('active');
+    errorPrint(emailInput, errorMessage.check);
+    errorPrint(pwInput, errorMessage.check);
     }
   }else{
     emailInput.classList.add('active');
@@ -42,8 +39,39 @@ function eyeToggle(e){
   }
 }
 
-btnLogin.addEventListener('click', login);
+// 로그인 api
+async function userLogin(){
+  try{
+    const data = {
+      email: '[email protected]',
+      password: 'sprint101',
+    }
+    const response = await fetch('https://bootcamp-api.codeit.kr/api/sign-in',{
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(data),
+    })
+
+    const { email, password } = data;
+    const takeToken = await response.json();
+    const token = await takeToken.data.accessToken;
+    localStorage.setItem('accessToken', token);
+
+    if(localStorage.getItem('accessToken')) login(email, password);
+  }catch(error){
+    console.log(error);
+  }  
+}
+
+btnLogin.addEventListener('click', (e) => {
+  e.preventDefault();
+  login();
+  userLogin(emailInput, pwInput);
+});
 eye.forEach((el) => el.addEventListener('click', eyeToggle))
 input.forEach((el) => {el.addEventListener('focusout', emptyInput)})
 
 
+

week5/js/signup.js

@@ -7,11 +7,9 @@ const eye = document.querySelectorAll('.eye');
 const btnJoin = document.querySelector('.btn-box .btn-join');
 
 // 회원가입 버튼 클릭 시 페이지 이동
-function join(e){
-  e.preventDefault();
-
+function join(){
   const { email } = correct.userInfo;
-
+  
   if(emailInput.value !== email){
     if(pwInput.value !== '' && pwCheckInput.value !== '') location.href = './folder.html';
   }else{
@@ -50,10 +48,71 @@ function eyeToggle(e){
   }
 }
 
-btnJoin.addEventListener('click', join);
+// 이메일 중복체크 api
+async function emailCheck(){
+  if(emailInput.value === '') return;
+
+  try{
+    const data = {
+      email: emailInput.value,
+    }
+
+    const response = await fetch('https://bootcamp-api.codeit.kr/api/check-email',{
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(data),
+    })
+
+    if(response.status === 200){
+      const { email } = data;
+      join(email);
+    }
+  }catch(error){
+    console.log(error);
+  }  
+}
+
+// 회원가입 api
+async function userJoin(emailInput, pwInput, pwCheckInput){
+  if(emailInput.value === '' && pwInput.value === '') return;
+
+  try{
+    const data = {
+      email: emailInput.value,
+      password: pwInput.value,
+      passwordCheck: pwCheckInput,
+    }
+
+    const response = await fetch('https://bootcamp-api.codeit.kr/api/sign-up',{
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(data),
+    })
+
+    const { email, password } = data;
+    const takeToken = await response.json();
+    const token = await takeToken.data.accessToken;
+    localStorage.setItem('accessToken', token);
+
+    if(localStorage.getItem('accessToken')) join(email, password);
+  }catch(error){
+    console.log(error);
+  }  
+}
+
+btnJoin.addEventListener('click', (e) => {
+  e.preventDefault();
+  join();
+  emailCheck(emailInput);
+  userJoin(emailInput, pwInput);
+});
 eye.forEach((el) => el.addEventListener('click', eyeToggle))
 input.forEach((el) => {el.addEventListener('focusout', ({ target }) => {
   emptyInput({ target });
-  pwCheck();   
+  pwCheck();  
 })})
 

week5/signin.html

@@ -65,6 +65,5 @@ <h1 class="logo">
   </div>
   <script type="module" src="./js/utils.js"></script>
   <script type="module" src="./js/signin.js"></script>
-  <script type="module" src="./js/login_check.js"></script>
 </body>
 </html>

week5/signup.html

@@ -75,6 +75,5 @@ <h1 class="logo">
   </div>
   <script type="module" src="./js/utils.js"></script>
   <script type="module" src="./js/signup.js"></script>
-  <script type="module" src="./js/join_check.js"></script>
 </body>
 </html>