codeit-bootcamp-frontend · yunsusu · Sep 3, 2023 · Nov 6, 2023 · Nov 17, 2023 · Nov 17, 2023
diff --git a/.github/workflows/delete-merged-branch-config.yml b/.github/workflows/delete-merged-branch-config.yml
@@ -0,0 +1,14 @@
+name: delete branch on close pr
+
+on:
+  pull_request:
+    types: [closed]
+
+jobs:
+  delete-branch:
+    runs-on: ubuntu-latest
+    steps:
+      - name: delete branch
+        uses: SvanBoxel/delete-merged-branch@main
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
diff --git a/index.html b/index.html
@@ -1,5 +1,10 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="ko">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta property="og:type" content="website">
     <meta property="og:url" content="https://delicate-pothos-2f6cca.netlify.app/">
     <meta property="og:title" content="Linkbrary">
@@ -17,6 +22,8 @@
 
     <title>Linkbrary</title>
     <link rel="stylesheet" href="style.css">
+
+    <!-- <script defer src="js/custom.js"></script> -->
 </head>
 
 <body id="main_index">
@@ -66,7 +73,6 @@ <h2><span>원하는 링크</span>를
                 한 공간에 저장하세요
             </p>
         </div>
-
     </section>
 
     <section id="sec2" class="sec">
@@ -145,7 +151,6 @@ <h2 class="pc_text">저장한 링크를
             <p class="codeit_pc">©codeit - 2023</p>
 
             <div class="foot_mid">
-
                 <a href="/privacy">Privacy Policy</a>
 
                 <a href="/faq">FAQ</a>

diff --git a/js/sign.js b/js/sign.js
@@ -0,0 +1,15 @@
+function setmessage(a,b){
+    let message = document.createElement("p");
+    message.innerHTML = a;
+    message.classList.add("input_warning",b);
+    return message;
+}
+function wrong(a,b,c){
+    if(b){
+        c.parentElement.replaceChild(a, b);
+    }else{
+        c.parentElement.append(a);
+    }
+}
+
+export {setmessage,wrong}
diff --git a/js/sign_name.js b/js/sign_name.js
@@ -0,0 +1,15 @@
+export const eye = document.querySelector('.eye');
+export const pwd = document.querySelector('#pwd');
+export const mail = document.querySelector("#mail");
+export const submit = document.querySelector("#submit");
+export const pwdWarning = eye.nextElementSibling;
+export const mailWarning = mail.nextElementSibling;
+export const email_format = /^([0-9a-zA-Z_\.-]+)@([0-9a-zA-Z_-]+)(\.[0-9a-zA-Z_-]+){1,2}$/;
+export const eye1 = document.querySelector('.eye1');
+export const eye2 = document.querySelector('.eye2');
+export const eyes = document.querySelector('.eye');
+export const pwd1 = document.querySelector('.pwd1');
+export const pwd2 = document.querySelector('.pwd2');
+export const input = document.querySelectorAll("input");
+export const upform = document.querySelectorAll("#signup_form");
+export const pwd_ei = /^[A-Za-z]+$|^\d+$/;
diff --git a/js/signin.js b/js/signin.js
@@ -0,0 +1,10 @@
+import { eye_toggle, mail_focusout,login_go,pwd_focusout,input_ing} from "./signin_func.js"
+
+import {eye ,pwd ,mail, submit, pwdWarning,mailWarning,email_format} from "./sign_name.js"
+
+eye.addEventListener('click', eye_toggle);
+mail.addEventListener("focusout",mail_focusout);
+submit.addEventListener("click",login_go);
+pwd.addEventListener("focusout", pwd_focusout);
+mail.addEventListener("input",input_ing)
+pwd.addEventListener("input",input_ing)
diff --git a/js/signin_func.js b/js/signin_func.js
@@ -0,0 +1,118 @@
+import {eye ,pwd ,mail, submit, pwdWarning,mailWarning,email_format} from "./sign_name.js"
+import {setmessage, wrong} from "./sign.js"
+
+if(window.localStorage.getItem("codeitToken")){
+    location.replace("../folder")
+}
+
+function login_wrong_pwd(){
+    let mailWarning = mail.nextElementSibling;
+    let pwdWarning = eye.nextElementSibling;
+    pwd.style.borderColor = "#ff5b56";
+    let pwd_nologin = setmessage("비밀번호를 확인해주세요.")
+    if(pwdWarning || mailWarning){
+        pwd.parentElement.replaceChild(pwd_nologin, pwdWarning);
+    }else if(pwdWarning && !mailWarning){
+        pwd.parentElement.replaceChild(pwd_nologin, pwdWarning);
+    }else if(!pwdWarning && mailWarning){
+        pwd.parentElement.append(pwd_nologin);
+    }else{
+        pwd.parentElement.append(pwd_nologin);
+    }
+}
+
+function login_wrong_mail(){
+    let mailWarning = mail.nextElementSibling;
+    let mail_nologin = setmessage("이메일을 확인해주세요.");
+    mail.style.borderColor = "#ff5b56";
+    if(pwdWarning || mailWarning){
+        mail.parentElement.replaceChild(mail_nologin, mailWarning);
+    }else if(pwdWarning && !mailWarning){
+        mail.parentElement.append(mail_nologin);
+    }else if(!pwdWarning && mailWarning){
+        mail.parentElement.replaceChild(mail_nologin, mailWarning);
+    }else{
+        mail.parentElement.append(mail_nologin);
+    }
+}
+
+function eye_toggle(){
+    for(let i = 0; i<eye.children.length; i++){
+        eye.children[i].classList.toggle("eye_none");
+    }
+
+    if(pwd.type == 'password'){
+        pwd.type = 'text';
+    }else{
+        pwd.type = 'password';
+    };
+}
+function mail_focusout(a){
+    let mail_null = setmessage("이메일을 입력해주세요.")
+    let mail_wrong = setmessage("올바른 이메일 주소가 아닙니다.");
+    let mailWarning = mail.nextElementSibling;
+    if(mail.value === ""){
+        mail.style.borderColor = "#ff5b56";
+        wrong(mail_null,mailWarning,mail);
+    }else if(!email_format.test(mail.value)){
+        mail.style.borderColor = "#ff5b56";
+        wrong(mail_wrong,mailWarning,mail);
+    }else{
+        mail.style.borderColor = "#ccd5e3";
+    }
+}
+function login_go(e){
+    e.preventDefault()
+    if(mail.value === "test@codeit.com" && pwd.value === "sprint101"){
+        const logining = {
+            email:mail.value,
+            password : pwd.value,
+        }
+        fetch("https://bootcamp-api.codeit.kr/api/sign-in",{
+            method : 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body : JSON.stringify(logining),
+        })
+            .then((response)=> response.json())
+            .then((result)=> {console.log(result.data.accessToken)
+                window.localStorage.setItem("codeitToken", result.data.accessToken)
+            })
+            .catch((error)=>{console.log(error)})
+            .finally(()=>{location.replace("../folder")})
+
+    }else if(mail.value === "test@codeit.com" && pwd.value !== "sprint101"){
+        e.preventDefault()
+        login_wrong_pwd()
+    }else if(mail.value !== "test@codeit.com" && pwd.value !== "sprint101"){
+        e.preventDefault()
+        login_wrong_pwd()
+        login_wrong_mail()
+    }
+}
+function pwd_focusout(){
+    let pwdWarning = eye.nextElementSibling;
+    let pwd_null = setmessage("비밀번호를 입력해주세요.")
+    if(pwd.value === ""){
+        pwd.style.borderColor = "#ff5b56";
+        wrong(pwd_null,pwdWarning,pwd)
+    }else{
+        pwd.style.borderColor = "#ccd5e3";
+    }
+}
+function input_ing(e) {
+    if (e.target.name === "pwd") {
+        let eyeSibling = eye.nextElementSibling;
+        if (eyeSibling) {
+            eyeSibling.remove();
+        }
+    } else {
+        let targetSibling = e.target.nextElementSibling;
+        if (targetSibling) {
+            e.target.parentElement.removeChild(targetSibling);
+        }
+    }
+}
+
+export { eye_toggle, mail_focusout, login_go,pwd_focusout,input_ing};
diff --git a/js/signup.js b/js/signup.js
@@ -0,0 +1,22 @@
+import {eye_toggle, mail_focusout, pwd_focusout, input_ing,login_go,keyenter} from "./signup_func.js"
+import {eye1,eye2,pwd1, pwd2, mail, submit, input, email_format, pwd_ei,upform} from "./sign_name.js"
+
+eye1.addEventListener('click', function () {
+    eye_toggle(eye1, pwd1);
+});
+eye2.addEventListener('click', function () {
+    eye_toggle(eye2, pwd2);
+});
+pwd1.addEventListener("focusout", function(){
+    pwd_focusout(pwd1, eye1)
+});
+pwd2.addEventListener("focusout", function(){
+    pwd_focusout(pwd2, eye2)
+});
+
+mail.addEventListener("focusout",mail_focusout);
+mail.addEventListener("input",input_ing)
+pwd1.addEventListener("input",input_ing)
+pwd2.addEventListener("input",input_ing)
+submit.addEventListener("click",login_go);
+window.addEventListener("keypress",keyenter)
diff --git a/js/signup_func.js b/js/signup_func.js
@@ -0,0 +1,117 @@
+import {eye1,eye2,pwd1, pwd2, mail, email_format, pwd_ei,upform, pwd} from "./sign_name.js"
+import {wrong, setmessage} from "./sign.js"
+
+if(window.localStorage.getItem("codeitToken")){
+    location.replace("../folder")
+}
+
+function eye_toggle(eye, pwd){
+    for(let i = 0; i<eye.children.length; i++){
+        eye.children[i].classList.toggle("eye_none");
+    }
+    if(pwd.type == 'password'){
+        pwd.type = 'text';
+    }else{
+        pwd.type = 'password';
+    };
+}
+function mail_focusout(a){
+    let mailWarning = mail.nextElementSibling;
+    let mail_null = setmessage("이메일을 입력해주세요.", 'mail');
+    let mail_wrong = setmessage("올바른 이메일 주소가 아닙니다.",'mail');
+
+    if(mail.value === ""){
+        mail.style.borderColor = "#ff5b56";
+        wrong(mail_null,mailWarning,mail);
+    }else if(!email_format.test(mail.value)){
+        mail.style.borderColor = "#ff5b56";
+        wrong(mail_wrong,mailWarning,mail)
+    }else {
+        mail.style.borderColor = "#ccd5e3";
+        mail.parentElement.removeChild(mail.nextElementSibling);
+    }
+}
+
+function pwd_focusout(pwd, eye) {
+    let pwdWarning = eye.nextElementSibling;
+    let pwdWarning2 = eye2.nextElementSibling;
+    let pwd_null = setmessage("비밀번호를 입력해주세요.",'pwd');
+    let pwd_no = setmessage("비밀번호가 일치하지 않아요.",'pwd')
+    let pwd_eight = setmessage("비밀번호는 영문, 숫자 조합 8자 이상 입력해주세요.",'pwd')
+    pwd.style.borderColor = "#ff5b56";
+
+    if(pwd.value === ""){
+        wrong(pwd_null,pwdWarning,pwd)
+    }else if(pwd1.value !== pwd2.value && pwd2.value !== "" && pwd === pwd2){
+        wrong(pwd_no,pwdWarning,pwd)
+    }else if(pwd.value.length < 8 || pwd_ei.test(pwd.value)){
+        wrong(pwd_eight,pwdWarning,pwd)
+    }else if(pwd.value.length > 8 || !pwd_ei.test(pwd.value) && pwd1.value == pwd2.value && pwd1.value!==""&& pwd2.value!==""){
+        pwd1.style.borderColor = "#ccd5e3";
+        pwd2.style.borderColor = "#ccd5e3";
+        pwdWarning.remove();
+        pwdWarning2.remove();
+    }else{
+        pwd.style.borderColor = "#ccd5e3";
+        if (pwdWarning) pwdWarning.remove();
+    }
+}
+function input_ing(e) {
+    if (e.target.name === "pwd1" || e.target.name === "pwd2") {
+        const eye = (e.target.name === "pwd1") ? eye1 : eye2;
+        eye.nextElementSibling.remove();
+    }
+}
+
+async function login_go(e){
+    e.preventDefault()
+    let mail_eight = setmessage("이미 사용 중인 이메일입니다.",'mail');
+    let mailWarning = mail.nextElementSibling;
+
+    const mailcheck = {
+        email: mail.value,
+    }
+    try{
+        const response = await fetch("https://bootcamp-api.codeit.kr/api/check-email",{
+            method : 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body : JSON.stringify(mailcheck),
+        })
+        const result = await response.json()
+        const message = result.error ? result.error.message : null;
+        console.log(message)
+        if(message === "이미 존재하는 이메일입니다."){
+                e.preventDefault()
+                mail.style.borderColor = "#ff5b56";
+                wrong(mail_eight,mailWarning,mail);
+        }else if(pwd1.value === pwd2.value){
+            const signup = {
+                email: mail.value,
+                password: pwd1.value,
+            };
+            const responseSignUp = await fetch("https://bootcamp-api.codeit.kr/api/sign-up", {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(signup),
+            });
+
+            const resultSignUp = await responseSignUp.json();
+            window.localStorage.setItem("codeitToken", resultSignUp.data.accessToken)
+            location.replace("../folder")
+        }
+    } catch(error){
+        console.log(error)
+    }
+
+}
+function keyenter(e){
+    if(e.key === 'Enter'){
+        console.log(123)
+        upform.submit()
+    }
+}
+export {eye_toggle, mail_focusout, pwd_focusout, input_ing,login_go,keyenter}
diff --git a/js/signup_let.js b/js/signup_let.js
@@ -0,0 +1,11 @@
+export let eye1 = document.querySelector('.eye1');
+export let eye2 = document.querySelector('.eye2');
+export let eyes = document.querySelector('.eye');
+export let pwd1 = document.querySelector('.pwd1');
+export let pwd2 = document.querySelector('.pwd2');
+export let mail = document.querySelector("#mail");
+export let submit = document.querySelector("#submit");
+export let input = document.querySelectorAll("input");
+export let upform = document.querySelectorAll("#signup_form");
+export let email_format = /^([0-9a-zA-Z_\.-]+)@([0-9a-zA-Z_-]+)(\.[0-9a-zA-Z_-]+){1,2}$/;
+export const pwd_ei = /^[A-Za-z]+$|^\d+$/;
diff --git a/signin/index.html b/signin/index.html
@@ -8,7 +8,7 @@
     <title>signup</title>
     <link rel="stylesheet" href="../style.css">
 
-    <script defer src="../js/custom.js"></script>
+    <script defer type="module" src="../js/signin.js"></script>
 </head>
 
 <body id="signin">
@@ -29,7 +29,7 @@ <h1><a href="/"><img src="../img/logo.png" alt="logo" /></a></h1>
                     <div class="input_inner">
                         <label for="pwd">비밀번호</label>
                         <div class="pwd">
-                            <input type="password" name="pwd" id="pwd" />
+                            <input type="password" name="pwd" id="pwd" class="pwd" />
                             <div class="eye">
                                 <img src="../img/eye-off.png" alt="eye-off" class="eye_off" />
                                 <img src="../img/eye-on.png" alt="eye-on" class="eye_on eye_none" />