codeit-sprint-fullstack · seobew · Nov 17, 2024 · Oct 29, 2024 · Oct 29, 2024 · Oct 29, 2024
diff --git a/project/README.md b/project/README.md
@@ -0,0 +1 @@
+성민의 판다마켓 프로젝트입니다.
diff --git a/project/faq.html b/project/faq.html
diff --git a/project/img/Ic_google.png b/project/img/Ic_google.png
diff --git a/project/img/Ic_kakao.png b/project/img/Ic_kakao.png
diff --git a/project/img/Img_home_bottom.png b/project/img/Img_home_bottom.png
diff --git a/project/img/Img_home_top.png b/project/img/Img_home_top.png
diff --git a/project/img/Img_section2.png b/project/img/Img_section2.png
diff --git a/project/img/Img_section3.png b/project/img/Img_section3.png
diff --git a/project/img/btn_visibility_off.png b/project/img/btn_visibility_off.png
diff --git a/project/img/btn_visibility_on.png b/project/img/btn_visibility_on.png
diff --git a/project/img/ic_facebook.png b/project/img/ic_facebook.png
diff --git a/project/img/ic_instagram.png b/project/img/ic_instagram.png
diff --git a/project/img/ic_twitter.png b/project/img/ic_twitter.png
diff --git a/project/img/ic_youtube.png b/project/img/ic_youtube.png
diff --git a/project/img/img_section1.png b/project/img/img_section1.png
diff --git a/project/img/logo.png b/project/img/logo.png
diff --git a/project/img/panda.png b/project/img/panda.png
diff --git a/project/index.html b/project/index.html
@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<html lang="ko">
+
+    <head>
+        <meta charset="utf-8">
+        <title>판다마켓</title>
+        <link rel="stylesheet" href="reset.css">
+        <link rel="stylesheet" href="style.css">
+        <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable.min.css" />
+        <!-- Google tag (gtag.js) -->
+        <script async src="https://www.googletagmanager.com/gtag/js?id=G-66ECRB99MR"></script>
+        <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', 'G-66ECRB99MR');
+</script>
+    </head>
+
+    <body>
+        <div id="container">
+            <nav id="NavigationBar">
+                <div id="NavigationBar_inner">
+                    <a href="index.html"><img id="img_panda" src="img/panda.png"></a>
+                    <span id="box1">
+                        <a id ="LoginButton" href="login.html">
+                            로그인
+                        </a>
+                        <div id="box2"></div>
+                    </span>
+                </div>
+            </nav>
+
+            <header id="header">
+                <div id="header_inner">
+                    <div id="header_inner_left">
+                        <span id="header_text">일상의 모든 물건을 <br>거래해 보세요</span>
+                        <a id ="button" href="items.html">
+                            구경하러 가기
+                        </a>
+                    </div>
+                    <div id="header_inner_right">
+                    </div>
+                </div>
+            </header>
+
+            <section class="section">
+                <div class="section_box">
+                    <img src="img/img_section1.png">
+                    <div class="section_inner">
+                        <div class="text_top">Hot item</div>
+                        <div class="text_mid">인기 상품을<br>확인해 보세요</div>
+                        <div class="text_bot">가장 HOT 한 중고거래 물품을<br>판다 마켓에서 확인해 보세요</div>
+                    </div>
+                </div>
+            </section>
+
+            <section class="section">
+                <div class="section_box">
+                    <div class="section_inner opp">
+                        <div class="text_top">Search</div>
+                        <div class="text_mid">구매를 원하는<br>상품을 검색하세요</div>
+                        <div class="text_bot">구매하고 싶은 물품은 검색해서<br>쉽게 찾아보세요</div>
+                    </div>
+                    <img src="img/img_section2.png">
+                </div>
+            </section>
+
+            <section class="section">
+                <div class="section_box btw">
+                    <img src="img/img_section3.png">
+                    <div class="section_inner">
+                        <div class="text_top">Register</div>
+                        <div class="text_mid">판매를 원하는<br>상품을 등록하세요</div>
+                        <div class="text_bot">어떤 물건이든 판매하고 싶은 상품을<br>쉽게 등록하세요</div>
+                    </div>
+                </div>
+            </section>
+
+
+            <div class="section2">
+                <div class="section2_inner">
+                    <div class="text">믿을 수 있는 <br>판다마켓 중고 거래</div>
+                    <div class="img_box"><img src="img/Img_home_bottom.png"></div>
+                </div>
+            </div>
+
+
+            <footer id="bottom">
+                <div id="bottom_inner">
+
+                    <span id="group1">©codeit - 2024 </span>
+
+                    <span id="group2">
+                        <a class="bottom_text" href="privacy.html" >
+                            Privacy Policy
+                        </a>
+                        <a class="bottom_text" href="faq.html">
+                            FAQ
+                        </a>
+                    </span>
+
+                    <span id="group3"> 
+                        <a class="icon" href="https://www.facebook.com/">
+                            <img src="img/ic_facebook.png">
+                        </a>
+                        <a class="icon" href="https://www.twitter.com/">
+                            <img src="img/ic_twitter.png">
+                        </a>
+                        <a class="icon" href="https://www.youtube.com/">
+                            <img src="img/ic_youtube.png">
+                        </a>
+                        <a class="icon" href="https://www.instagram.com/">
+                            <img src="img/ic_instagram.png">
+                        </a>
+                    </span>
+
+                </div>
+            </div>
+
+
+        </footer>
+    </body>
+
+</html>
diff --git a/project/items.html b/project/items.html
diff --git a/project/login.html b/project/login.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="ko">
+    <head>
+        <meta charset="utf-8">
+        <title>판다마켓</title>
+        <link rel="stylesheet" href="reset.css">
+        <link rel="stylesheet" href="style_login.css">
+        <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable.min.css" />
+    </head>
+    <body>
+        <div class="modal hidden">
+            <div class="error_msg">
+                <p>비밀번호가 일치하지 않습니다.</p>
+                <button type="button" id="error_msg_button">확인</button>
+            </div> 
+        </div>
+
+
+        <div id="box">
+            <a id="section0" href="index.html"></a>
+
+            <form id="section1">
+                <label class="section1_box"><span class="box_name">이메일</span>
+                    <input name="email" placeholder="이메일을 입력해주세요" id="section1_emailbox" required>
+                </label>
+                <label class="section1_box"><span class="box_name">비밀번호</span>
+                    <div class="password-container">
+                        <input type="password" name="password" placeholder="비밀번호를 입력해주세요" id="section1_pwbox" required>
+                        <img src="img/btn_visibility_off.png" class="icon_eyes">
+                    </div>
+                </label>
+                <button type="button" id="section1_button" disabled>로그인</button>
+
+                <div id="section1_social">
+                    <div id="section1_socialinner">
+                        간편 로그인하기
+                        <span id="section1_socialbox">
+                            <a href="https://www.google.com/">
+                                <img src="img/ic_google.png">
+                            </a>
+                            <a href="https://www.kakaocorp.com/page/">
+                                <img src="img/ic_kakao.png">
+                            </a>
+                        </span>
+                    </div>
+                </div>
+
+                <div id="section1_signup">판다마켓이 처음이신가요? <a class="login_text" href="signup.html">회원가입</a>
+                </div>
+            </form>
+        </div>
+        <script src="login.js"></script>
+    </body>
+</html>
diff --git a/project/login.js b/project/login.js
@@ -0,0 +1,156 @@
+const USER_DATA = [
+    { email: '[email protected]', password: "codeit101!" },
+    { email: '[email protected]', password: "codeit202!" },
+    { email: '[email protected]', password: "codeit303!" },
+    { email: '[email protected]', password: "codeit404!" },
+    { email: '[email protected]', password: "codeit505!" },
+    { email: '[email protected]', password: "codeit606!" },
+]
+
+
+// 비밀번호 암호화 해제/설정 버튼
+let icons = document.querySelectorAll('.icon_eyes');
+icons.forEach(icon => {
+    icon.addEventListener('click',function () { 
+        const input = icon.previousElementSibling;
+        let type = input.getAttribute('type');
+        if(type === 'password'){
+            type ='text';
+            icon.setAttribute('src','img/btn_visibility_on.png')
+        }
+        else{
+            type='password';
+            icon.setAttribute('src','img/btn_visibility_off.png')
+        }
+        input.setAttribute('type',type);
+    })
+});
+
+
+// 변수들
+let button = document.querySelector('#section1_button');
+let inputbox = document.querySelectorAll('#section1 input');
+const email_pattern =/^[a-zA-Z0-9]+@[a-zA-Z]+\.+[a-zA-Z]/;
+const pw_pattern=/^.{8,}/;
+let email_check =false;//형식이 올바른지 확인
+let pw_check =false;//형식이 올바른지 확인
+let modal =document.querySelector('.modal');
+let error_button = document.querySelector('#error_msg_button');
+
+
+
+
+
+const make_alret_msg = (input,text)=>{
+    let box = input.closest('.section1_box')
+    if(!box.querySelector('.alert')){
+        input.style.border =  '0.125rem solid red';
+        let alert_msg = document.createElement('div');
+        alert_msg.textContent = text;
+        alert_msg.className = 'alert';
+        box.append(alert_msg);
+
+    }
+    else{
+        input.style.border =  '0.125rem solid red';
+        box.querySelector('.alert').textContent = text;
+    }
+}
+
+
+//입력 값이 올바른지 체크
+inputbox.forEach(input=>{
+    input.addEventListener('blur',function(){
+        if(input.id === "section1_emailbox"){// 이메일인지 비밀번호인지 확인 -> 이메일이면
+            if(input.value===''){ // 아무것도 입력 안하면
+                make_alret_msg(input,'이메일을 입력해주세요.');
+            }
+            else if(!email_pattern.test(input.value)){
+                make_alret_msg(input,'잘못된 이메일 형식입니다.');
+            }
+            else if(email_pattern.test(input.value)){
+                if(input.parentElement.querySelector('.alert')) {
+                    input.parentElement.querySelector('.alert').remove();
+                }
+                input.style.border =  'none';
+            }
+        }
+
+        else if(input.id === "section1_pwbox"){// 이메일인지 비밀번호인지 확인 -> 비밀번호면
+            if(input.value===''){ // 아무것도 입력 안하면
+                make_alret_msg(input,'비밀번호를 입력해주세요.');
+
+            }
+            else if(!pw_pattern.test(input.value)){
+                make_alret_msg(input,'비밀번호를 8자 이상 입력해주세요.');
+            }
+            else if(pw_pattern.test(input.value)){
+                if(input.closest('.section1_box').querySelector('.alert')) {
+                    input.closest('.section1_box').querySelector('.alert').remove();
+                }
+                input.style.border =  'none';
+            }
+        }
+    })
+})
+
+const check_input= () =>{
+
+    if(pw_check === true && email_check === true){
+        button.style.backgroundColor ='#3692FF';
+        button.disabled = false;
+    }
+    else{
+        button.style.backgroundColor ='#9CA3AF';
+        button.disabled = true;
+    }
+}
+
+inputbox.forEach(input=>{
+    input.addEventListener('input',()=>{
+        console.log(input.value);
+        if(input.id === "section1_emailbox"){
+            if(email_pattern.test(input.value)){
+                email_check=true;
+                // if(input.value)
+            }
+            else{
+                email_check=false;
+            }
+        }
+
+        else if(input.id === "section1_pwbox"){
+            if(pw_pattern.test(input.value)){
+                pw_check = true;
+            }
+            else{
+                pw_check = false;
+            }
+        }
+    })
+    input.addEventListener('focus',()=>{
+        input.style.border =  '0.125rem solid #3692FF';
+    });
+
+    input.addEventListener('input',check_input);
+
+});
+
+button.addEventListener('click',()=>{
+    const email_input = document.querySelector('#section1_emailbox').value;
+    const pw_input = document.querySelector('#section1_pwbox').value;
+    const user_exist = USER_DATA.some(user => user.email === email_input && user.password === pw_input);
+    if(pw_check === true && email_check === true ){
+        if(!user_exist){ 
+            modal.classList.remove('hidden');
+        }
+        else{
+            location.href = 'items.html';
+        }
+    }
+});
+
+
+error_button.addEventListener('click',()=>{
+    modal.classList.add('hidden');
+})
diff --git a/project/privacy.html b/project/privacy.html