-
-
- 저장한 링크를
- 공유해보세요
+ 
+
+
+
+ 저장한 링크를
+ 공유해 보세요
- 여러 링크를 폴더에 담고 공유할 수 있습니다.
- 가족, 친구, 동료들에게 쉽고 빠르게 링크를
+ 여러 링크를 폴더에 담고 공유할 수 있습니다. 가족, 친구, 동료들에게 쉽고 빠르게 링크를
공유해 보세요.
+ 
+
+
+
+ 저장한 링크를
+ 검색해 보세요
+
+ 중요한 정보들을 검색으로 쉽게 찾아보세요.
+ 
+
+
+
-
-
-
-
-
-
-
- 저장한 링크를
- 검색해 보세요
-
- 중요한 정보들을 검색으로 쉽게 찾아보세요.
-
-
-
-
-
-
-
-
\ No newline at end of file
+
+
+
diff --git a/javascript/signIn_btn.js b/javascript/signIn_btn.js
new file mode 100644
index 000000000..7307163b7
--- /dev/null
+++ b/javascript/signIn_btn.js
@@ -0,0 +1,21 @@
+import { userPw } from "./signIn_pw.js";
+import { userEmail } from "./signIn_email.js";
+
+const signInBtn = document.querySelector('#signin-btn');
+
+/* 로그인 체크 함수 */
+function signInChk () {
+ if( userEmail.value === "test@codeit.com" && userPw.value === "codeit101" ) { window.location.href = "../folder.html";
+ } else {
+ resetErr(userEmail);
+ resetErr(userPw);
+ printErr(userEmail, '이메일을 확인해주세요.');
+ printErr(userPw, '비밀번호를 확인해주세요.');
+ }
+}
+
+/* 이벤트 등록하기 */
+signInBtn.addEventListener( 'click', signInChk );
+signInBtn.addEventListener( 'click', function(){
+ e.preventDefault();
+} );
\ No newline at end of file
diff --git a/javascript/signIn_email.js b/javascript/signIn_email.js
new file mode 100644
index 000000000..8a412b5fe
--- /dev/null
+++ b/javascript/signIn_email.js
@@ -0,0 +1,48 @@
+const userEmail = document.querySelector('#user-email');
+const userInfo = { email: "test@codeit.com", pw: "codeit101", }
+
+/* 빨간 테두리와 에러 문구 리셋 함수 */
+function resetErr (el){
+ const errText = el.parentNode.querySelector('.fail-message');
+ if(errText){
+ errText.remove();
+ el.classList.remove('red-border');
+ }
+}
+
+/* 빨간 테두리와 에러 문구 추가 함수 */
+/* 근데 이게 적용되면 입력칸 색이 바뀝니다ㅜ */
+function printErr( el, text ) {
+ el.classList.add('red-border');
+ const span = document.createElement('span');
+ span.classList.add('fail-message');
+ span.textContent = text;
+ el.after(span);
+}
+
+/* 이메일 입력여부 체크 함수 */
+function emailEmptyChk () {
+ if( userEmail.value.length === 0 ) {
+ resetErr( userEmail );
+ printErr( userEmail, '이메일을 입력해주세요.');
+ }
+}
+
+/* 이메일 유효성 체크 함수 */
+function emailChk () {
+ let regex = new RegExp('[a-z0-9]+@[a-z]+\.[a-z]{2,3}');
+
+ if( userEmail.value && !regex.test(userEmail.value) ){
+ resetErr( userEmail );
+ printErr( userEmail, '올바른 이메일 주소가 아닙니다.');
+ } else if (userEmail.value && regex.test(userEmail.value)) {
+ resetErr( userEmail );
+ }
+}
+
+/* 이벤트 등록하기 */
+userEmail.addEventListener ('focusout', emailEmptyChk );
+userEmail.addEventListener ('focusout', emailChk );
+
+
+export { userEmail, resetErr, printErr, userInfo, emailChk, };
\ No newline at end of file
diff --git a/javascript/signIn_pw.js b/javascript/signIn_pw.js
new file mode 100644
index 000000000..0d1cc3874
--- /dev/null
+++ b/javascript/signIn_pw.js
@@ -0,0 +1,58 @@
+import { resetErr, printErr } from "./signIn_email.js";
+
+const userPw = document.querySelector('#user-password');
+const eyeImg = document.querySelector('.eye-image');
+
+/* 비밀번호 입력여부 체크 함수 */
+function pwEmptyChk () {
+ if( userPw.value.length === 0 ) {
+ resetErr( userPw );
+ printErr( userPw, '비밀번호를 입력해주세요.');
+ }
+}
+
+/* 비밀번호 유효성 체크 함수 */
+function pwChk () {
+ let regexPw = /^[A-Za-z0-9`~!@#\$%\^&\*\(\)\{\}\[\]\-_=\+\\|;:'"<>,\./\?]{8,20}$/;
+
+ if( userPw.value && !regexPw.test(userPw.value) ){
+ resetErr( userPw );
+ printErr( userPw, '비밀번호는 영문, 숫자 조합 8자 이상 입력해 주세요.');
+ } else if (userPw.value && regexPw.test(userPw.value)) {
+ resetErr( userPw );
+ }
+}
+
+/* 눈이미지와 비번 감추기 */
+function pwShowHide(){
+
+ if( userPw.type === "password"){
+ eyeImg.src = "./img/eye-on.svg"
+ userPw.type = "text";
+ } else if (userPw.type === "text"){
+ eyeImg.src = "./img/eye-off.svg"
+ userPw.type = "password";
+ }
+}
+
+
+/* 이벤트 등록하기 */
+userPw.addEventListener ('focusout', pwEmptyChk );
+userPw.addEventListener ('focusout', pwChk );
+eyeImg.addEventListener ('click', (e)=>{ e.preventDefault(); } );
+eyeImg.addEventListener ('click', pwShowHide );
+
+
+export { userPw, eyeImg, pwShowHide, pwEmptyChk, pwChk };
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/javascript/signUp_email.js b/javascript/signUp_email.js
new file mode 100644
index 000000000..84d1b2ffc
--- /dev/null
+++ b/javascript/signUp_email.js
@@ -0,0 +1,20 @@
+import { resetErr, printErr, userInfo } from "./signIn_email.js";
+
+const userEmail = document.querySelector('#user-email');
+
+/* 사용중인 이메일 체크 함수 */
+function emailDbChk () {
+ const { email } = userInfo;
+
+ if( userEmail.value === email ) {
+ resetErr( userEmail );
+ printErr( userEmail, '이미 사용 중인 이메일입니다.');
+ }
+}
+
+/* 이벤트 등록하기 */
+userEmail.addEventListener ('focusout', emailDbChk );
+
+
+
+
diff --git a/javascript/signUp_pw.js b/javascript/signUp_pw.js
new file mode 100644
index 000000000..64f719bbf
--- /dev/null
+++ b/javascript/signUp_pw.js
@@ -0,0 +1,19 @@
+import { resetErr, printErr } from "./signIn_email.js";
+import { userPw, eyeImg, pwShowHide, pwEmptyChk, pwChk } from "./signIn_pw.js";
+
+const userPw2 = document.querySelector('#user-password-confrim');
+
+/* 비밀번호 확인 일치하는지 체크 함수 */
+function pw2Chk () {
+ if( userPw2.value && userPw2.value !== userPw.value ) {
+ resetErr( userPw2 );
+ printErr( userPw2, '비밀번호가 일치하지 않아요.');
+ } else if ( userPw2.value && userPw2.value == userPw.value ) {
+ resetErr( userPw2 );
+ }
+}
+
+/* 이벤트 등록하기 */
+userPw2.addEventListener ('focusout', pw2Chk);
+
+export { userPw2, pw2Chk };
\ No newline at end of file
diff --git a/privacy.html b/privacy.html
new file mode 100644
index 000000000..e69de29bb
diff --git a/screenshot/index1.png b/screenshot/index1.png
deleted file mode 100644
index f9862112c..000000000
Binary files a/screenshot/index1.png and /dev/null differ
diff --git a/screenshot/index2.png b/screenshot/index2.png
deleted file mode 100644
index b69a72159..000000000
Binary files a/screenshot/index2.png and /dev/null differ
diff --git a/screenshot/index3.png b/screenshot/index3.png
deleted file mode 100644
index 329de5a7d..000000000
Binary files a/screenshot/index3.png and /dev/null differ
diff --git a/screenshot/index4.png b/screenshot/index4.png
deleted file mode 100644
index 59b16fc49..000000000
Binary files a/screenshot/index4.png and /dev/null differ
diff --git a/screenshot/signin.png b/screenshot/signin.png
deleted file mode 100644
index cb6d9565b..000000000
Binary files a/screenshot/signin.png and /dev/null differ
diff --git a/screenshot/signup.png b/screenshot/signup.png
deleted file mode 100644
index 4d2d6ce1a..000000000
Binary files a/screenshot/signup.png and /dev/null differ
diff --git a/sign.css b/sign.css
deleted file mode 100644
index 1bd783993..000000000
--- a/sign.css
+++ /dev/null
@@ -1,181 +0,0 @@
-:root {
- --linkbrary-primary: #6D6AFE;
- --linkbrary-red: #FF5B56;
- --linkbrary-black: #111322;
- --linkbrary-white: #ffffff;
- --linkbrary-gray-100: #3E3E43;
- --linkbrary-gray-60: #9FA6B2;
- --linkbrary-gray-20: #CCD5E3;
- --linkbrary-gray-10: #E7EFFB;
- --linkbrary-bg: #F0F6FF;
- --linkbrary-gradation: linear-gradient(91deg, #6D6AFE 0.12%, #6AE3FE 101.84%);
- --fandom-k-gra-blue-to-pink: linear-gradient(271deg, #FE578F -9.84%, #68E8F9 107.18%);
- --black: #000
-}
-
-* {
- box-sizing: border-box;
-}
-
-/* input {
- outline: none;
- border: none;
- background-color: none;
-} */
-
-html {
- font-family: Pretendard, sans-serif;
- word-break: keep-all;
-}
-
-body {
- margin: 0;
- font-size: 16px;
- font-weight: 400;
- line-height: 1.5;
- color: var(--black);
- background-color: var(--linkbrary-bg);
-}
-
-.wrap {
- margin: 238px auto;
- width: 400px;
-}
-
-.logo-sign {
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: 16px;
- margin-bottom: 30px;
-}
-
-.logo-btn {
- margin: 0;
- height: 38px;
-}
-
-.logo-sign p {
- margin: 0;
- text-align: center;
-}
-
-.sign-box {
- display: flex;
- justify-content: center;
- align-items: flex-start;
- gap: 8px;
-}
-
-.sign-btn {
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: 0;
-}
-
-.sign-btn a{
- text-decoration: none;
- font-weight: 600;
- line-height: normal;
- color: var(--linkbrary-primary);
-}
-
-.underline {
- width: 100%;
- height: 1px;
- background-color: var(--linkbrary-primary);
-}
-
-.input-box {
- position: relative;
- display: flex;
- flex-direction: column;
- gap: 12px;
- margin-bottom: 24px;
-}
-
-.label {
- font-size: 14px;
- line-height: normal;
-}
-
-.box {
- padding: 18px 15px;
- height: 60px;
- border-radius: 8px;
- border: 1px solid var(--linkbrary-gray-20);
- font-size: 16px;
- font-style: normal;
- font-weight: 400;
- line-height: 1.5;
- background-color: var(--linkbrary-white);
-}
-
-.box:focus{
- outline: none;
- border: 1px solid var(--linkbrary-primary);
-}
-
-.show-hide-icon {
- position: absolute;
- bottom: 22px;
- right: 15px;
- width: 16px;
- height: 16px;
-}
-
-.login-btn {
- width: 100%;
- height: 60px;
-}
-
-.bnt-cta.large {
- display: flex;
- justify-content: center;
- align-items: center;
- width: 400px;
- margin: 30px 0 32px;
- padding: 16px 20px;
- border: none;
- border-radius: 8px;
- text-decoration: none;
- font-size: 18px;
- font-weight: 600;
- color: #f5f5f5;
- background-image: var(--linkbrary-gradation);
- cursor: pointer;
-}
-
-.sns-login-btn {
- display: flex;
- justify-content: space-between;
- align-items: center;
- gap: 16px;
- width: 400px;
- padding: 12px 24px;
- border-radius: 8px;
- border: 1px solid var(--linkbrary-gray-20);
- background: var(--linkbrary-gray-10);
- cursor: pointer;
-}
-
-.sns-login-btn p {
- flex-grow: 1;
- margin: 0;
- font-size: 14px;
- font-weight: 400;
- line-height: normal;
- color: var(--linkbrary-gray-100, #373740);
-}
-
-.sns-btn {
- margin: 0;
- width: 42px;
- height: 42px;
- cursor: pointer;
-}
-
-.sns-btn img {
- width: 100%;
-}
\ No newline at end of file
diff --git a/signin.html b/signin.html
index 55ba9e070..2983cbafa 100644
--- a/signin.html
+++ b/signin.html
@@ -2,44 +2,51 @@
-
+
로그인
+
-
- 
+ 
- 
- 
- 
+
+