diff --git a/asset/landing/KakaoTalk_20231103_112314340.png b/asset/landing/KakaoTalk_20231103_112314340.png new file mode 100644 index 000000000..fec0ee0b4 Binary files /dev/null and b/asset/landing/KakaoTalk_20231103_112314340.png differ diff --git a/asset/landing/_img1.png b/asset/landing/_img1.png new file mode 100644 index 000000000..6c6c327e5 Binary files /dev/null and b/asset/landing/_img1.png differ diff --git a/asset/landing/_img4.png b/asset/landing/_img4.png new file mode 100644 index 000000000..1c0365c9f Binary files /dev/null and b/asset/landing/_img4.png differ diff --git a/asset/landing/eye-off.svg b/asset/landing/eye-off.svg new file mode 100644 index 000000000..14f18d104 --- /dev/null +++ b/asset/landing/eye-off.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/asset/landing/eye-on.svg b/asset/landing/eye-on.svg new file mode 100644 index 000000000..2fa17e6c2 --- /dev/null +++ b/asset/landing/eye-on.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/asset/landing/img2.png b/asset/landing/img2.png new file mode 100644 index 000000000..95456f74e Binary files /dev/null and b/asset/landing/img2.png differ diff --git a/asset/landing/img3.png b/asset/landing/img3.png new file mode 100644 index 000000000..125c36b1c Binary files /dev/null and b/asset/landing/img3.png differ diff --git a/asset/signin/Component 2.png b/asset/signin/Component 2.png new file mode 100644 index 000000000..c7518e8b3 Binary files /dev/null and b/asset/signin/Component 2.png differ diff --git a/change.html b/change.html new file mode 100644 index 000000000..769d4e05a --- /dev/null +++ b/change.html @@ -0,0 +1,33 @@ + + + + + landinPage + + + +
+ ... +
+

WITHJ.NETLIFY.APP

+

Linkbrary

+

세상의 모든 정보를 쉽게 저장하고 관리해 보세요

+
+
+ + + + diff --git a/css/week1.css b/css/landing.css similarity index 82% rename from css/week1.css rename to css/landing.css index 00fe3142e..bca842516 100644 --- a/css/week1.css +++ b/css/landing.css @@ -1,4 +1,3 @@ - /* header */ * { box-sizing: border-box; @@ -123,6 +122,9 @@ section { line-height: 150%; width: 20rem; } +.mobileText { + display: none; +} .content-image { grid-area: image; @@ -130,12 +132,6 @@ section { } footer { - /*display: flex; - width: 100%; - height: 16rem; - padding-top: 3.2rem; - background-color:#111322; - justify-content: center;*/ display: flex; justify-content: center; width: 100%; @@ -265,7 +261,12 @@ footer { width: 22rem; margin-top: 0.6rem; } - + .ex > .description { + display: none; + } + .mobileText { + display: flex; + } section { flex-direction: column; align-items: center; @@ -288,6 +289,7 @@ footer { } .footer_box { padding: 2rem 2rem 4rem 2rem; + position: relative; } .footer_left { display: flex; @@ -304,21 +306,17 @@ footer { } .copyright { margin-top: 6.875rem; - position: relative; - bottom: -3.13rem; } -} -======= -.display1 { - background: #f0f6ff; - + .display1 { + background: #f0f6ff; + } } /* start header */ .header { display: flex; justify-content: space-between; align-items: center; - padding: 2.0rem 20.0rem; + padding: 2rem 20rem; position: fixed; background: #f0f6ff; top: 0; @@ -334,7 +332,7 @@ footer { linear-gradient(91deg, #6d6afe 0.12%, #6ae3fe 101.84%) ); cursor: pointer; - padding: 1.6rem 2.0rem; + padding: 1.6rem 2rem; text-decoration: none; } .login-text { @@ -342,14 +340,14 @@ footer { font-family: Pretendard; font-size: 1.8rem; font-style: normal; - font-weight: 60.0; + font-weight: 60; line-height: normal; } /* end header */ /* start content1 */ .content1 { - padding: 7.0rem 36.0rem; + padding: 7rem 36rem; text-align: center; } .sub-tilte { @@ -357,8 +355,8 @@ footer { font-family: Pretendard; font-size: 6.4rem; font-style: normal; - font-weight: 70.0; - line-height: 8.0rem; + font-weight: 70; + line-height: 8rem; } .sub-tilte > span { background: linear-gradient(91deg, #6d6afe 17.28%, #ff9f9f 74.98%); @@ -399,96 +397,96 @@ footer { /* end content1 */ /* start content2 */ -.content2{ +.content2 { display: flex; align-items: center; justify-content: center; gap: 15.7rem; - padding: 12.0rem 46.0rem 5.0rem; - - + padding: 12rem 46rem 5rem; } - .frame{ +.frame { display: flex; width: 29.1rem; flex-direction: column; align-items: center; - gap: 1.0rem; + gap: 1rem; } - #title{ +#title { font-family: Pretendard; font-size: 4.8rem; - font-weight: 70.0; + font-weight: 70; line-height: 5.8rem; letter-spacing: 0rem; text-align: left; -}/* 왜 안되는지 모르겠음*/ -#want-link{ - background: linear-gradient(96deg, #FE8A8A 1.72%, #A4CEFF 74.97%); -background-clip: text; --webkit-background-clip: text; --webkit-text-fill-color: transparent; -font-style: normal; -line-height: normal -} -.content2-comment{ -color: #6B6B6B; -font-family: Pretendard; -font-size: 1.6rem; -font-style: normal; -font-weight: 500; -line-height: 150% -} -.content2-imgs{ +} /* 왜 안되는지 모르겠음*/ +#want-link { + background: linear-gradient(96deg, #fe8a8a 1.72%, #a4ceff 74.97%); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + font-style: normal; + line-height: normal; +} +.content2-comment { + color: #6b6b6b; + font-family: Pretendard; + font-size: 1.6rem; + font-style: normal; + font-weight: 500; + line-height: 150%; +} +.content2-imgs { gap: 1.2rem; } -#care{ - background: linear-gradient(277deg, #6FBAFF 59.22%, #FFD88B 93.66%); -background-clip:text; --webkit-background-clip:text; --webkit-text-fill-color: transparent; -font-style: normal; -line-height: normal;} +#care { + background: linear-gradient(277deg, #6fbaff 59.22%, #ffd88b 93.66%); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + font-style: normal; + line-height: normal; +} -#share{ -background: linear-gradient(99deg, #6D7CCD 19.76%, rgba(82, 136, 133, 0.22) 52.69%); -background-clip:text; --webkit-background-clip:text; --webkit-text-fill-color: transparent; -font-style: normal; -line-height: normal;} -#search{ - background: var(--fandom-k-gra-blue-to-pink, linear-gradient(271deg, #FE578F -9.84%, #68E8F9 107.18%)); +#share { + background: linear-gradient( + 99deg, + #6d7ccd 19.76%, + rgba(82, 136, 133, 0.22) 52.69% + ); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + font-style: normal; + line-height: normal; +} +#search { + background: var( + --fandom-k-gra-blue-to-pink, + linear-gradient(271deg, #fe578f -9.84%, #68e8f9 107.18%) + ); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } -#content5-img{ +#content5-img { width: 61.9rem; height: 58.4rem; background-size: cover; } -#rever{ +#rever { flex-direction: row-reverse; } -footer{ - margin-top: 12.0rem; +footer { + margin-top: 12rem; padding: 3.2rem 10.4rem 6.4rem; display: flex; - background-color:#111322; + background-color: #111322; justify-content: space-between; align-items: center; color: white; } -a{text-decoration: none; -color: white;} - - - - - - - - - +a { + text-decoration: none; + color: white; +} diff --git a/css/week2.css b/css/signin.css similarity index 86% rename from css/week2.css rename to css/signin.css index 91f9db91b..01ed256e8 100644 --- a/css/week2.css +++ b/css/signin.css @@ -60,7 +60,7 @@ body { justify-content: center; align-items: center; border-radius: 0.8rem; - border: 1rem solid --light_gray; + border: 0.1rem solid #9fa6b2; background: var(--linkbrary-white, --white); } @@ -95,10 +95,7 @@ button { border: 1px solid var(--blue_gray); background: var(--mint_gray); } -.email > input > #signup-email:focus, -.password > input > #signup-password:focus { - border-color: var(--blue); -} + @media (max-width: 1199px) { .frame { padding: 20rem 40rem 29rem 40rem; @@ -135,3 +132,29 @@ button { padding: 0.6rem 2.4rem; } } +.email input:focus { + border: 1px solid blue; + outline: none; +} +.password input:focus { + border: 1px solid blue; + outline: none; +} +.error { + border: 1px solid red; +} + +.error-message, +.error-message2, +.login-message { + color: red; + display: none; +} +.eye { + position: relative; + top: -45px; + left: 400px; +} +.eye-on { + display: none; +} diff --git a/css/week2-1.css b/css/signup.css similarity index 83% rename from css/week2-1.css rename to css/signup.css index 337c63494..8e01473b1 100644 --- a/css/week2-1.css +++ b/css/signup.css @@ -66,19 +66,20 @@ body { border: 0.1rem solid gray; background: var(--linkbrary-white, #fff); } + .email > input > #signup-email:focus, .password > input > #signup-password:focus, .password2 > input > #signup-password2:focus { border-color: var(--blue); } -.password > img, +/* .password > img, .password2 > img { position: relative; top: -4.5rem; left: 40rem; -} -button { +} */ +.join-button { border-color: #f5f5f5; color: #f5f5f5; margin-top: 3rem; @@ -144,3 +145,33 @@ button { padding: 0.6rem 2.4rem; } } +.email input:focus { + border: 1px solid blue; + outline: none; +} +.password input:focus { + border: 1px solid blue; + outline: none; +} +.password2 input:focus { + border: 1px solid blue; + outline: none; +} +.error { + border: 1px solid red; +} + +.error-message, +.error-message2, +.error-message2-omt, +.join-message { + color: red; + display: none; +} +.eye-button { + position: relative; + top: -4.5rem; + left: 40rem; + border: none; + background-color: white; +} diff --git a/javascript/signin.js b/javascript/signin.js new file mode 100644 index 000000000..4c0a97851 --- /dev/null +++ b/javascript/signin.js @@ -0,0 +1,70 @@ +const emailInput = document.getElementById("signup-email"); +const errorMessage = document.getElementById("error-message"); +const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,4}$/; +if (localStorage.getItem("accessToken")) { + window.location.href = "./folder"; +} + +function showError(input, errorElement, errorMessage) { + input.classList.add("error"); + errorElement.innerText = errorMessage; + errorElement.style.display = "block"; + input.style.border = "1px solid #FF5B56"; +} + +function clearError(input, errorElement) { + input.classList.remove("error"); + errorElement.style.display = "none"; + errorElement.innerText = " "; + input.style.border = "1px solid #CCD5E3"; +} + +emailInput.addEventListener("focusout", function () { + if (emailInput.value === "") { + showError(emailInput, errorMessage, "이메일을 입력해주세요."); + } else if (!emailRegex.test(emailInput.value)) { + showError(emailInput, errorMessage, "올바른 이메일 주소가 아닙니다."); + } else { + clearError(emailInput, errorMessage); + } +}); + +const passwordInput = document.getElementById("signup-password"); +const errorMessage2 = document.getElementById("error-message2"); + +passwordInput.addEventListener("focusout", function () { + if (passwordInput.value.trim() === "") { + showError(passwordInput, errorMessage2, "비밀번호를 입력해 주세요."); + } else if ( + passwordInput.value.length < 8 || + !/^(?=.*[a-zA-Z])(?=.*\d)/.test(passwordInput.value) + ) { + showError( + passwordInput, + errorMessage2, + "비밀번호는 영문, 숫자 조합 8자 이상 입력해 주세요." + ); + } else { + clearError(passwordInput, errorMessage2); + } +}); +const [loginButtons] = document.getElementsByTagName("button"); +const [loginMessage] = document.getElementsByClassName("loginMessage"); +loginButtons.addEventListener("click", function (event) { + event.preventDefault(); + const data = { + email: emailInput.value, + password: passwordInput.value, + }; + fetch("https://bootcamp-api.codeit.kr/api/sign-in", { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify(data), + }) + .then((response) => response.json()) + .then((result) => { + console.log(result.data.accessToken); + localStorage.setItem("accessToken", result.data.accessToken); + window.location.href = "./folder"; + }); +}); diff --git a/javascript/signup.js b/javascript/signup.js new file mode 100644 index 000000000..277cd241c --- /dev/null +++ b/javascript/signup.js @@ -0,0 +1,96 @@ +const emailInput = document.getElementById("signup-email"); +const errorMessage = document.getElementById("error-message"); +const isEmailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,4}$/; +const passwordInput = document.getElementById("signup-password"); +const errorMessage2 = document.getElementById("error-message2"); +const passwordInputOmt = document.getElementById("signup-password2"); +const errorMessage2Omt = document.getElementById("error-message2-omt"); +const joinButton = document.querySelector("#join-button"); + +function showError(input, errorElement, errorMessage) { + input.classList.add("error"); + errorElement.innerText = errorMessage; + errorElement.style.display = "block"; + input.style.border = "1px solid #FF5B56"; +} + +function clearError(input, errorElement) { + input.classList.remove("error"); + errorElement.style.display = "none"; + errorElement.innerText = " "; + input.style.border = "1px solid #CCD5E3"; + joinButton.style.border = "none"; +} + +emailInput.addEventListener("focusout", function () { + if (emailInput.value === "") { + showError(emailInput, errorMessage, "이메일을 입력해주세요."); + } else if (!isEmailRegexemailRegex.test(emailInput.value)) { + showError(emailInput, errorMessage, "올바른 이메일 주소가 아닙니다."); + } else if (emailInput.value === "test@codeit.com") { + showError(emailInput, errorMessage, "이미 사용 중인 이메일입니다."); + } else { + clearError(emailInput, errorMessage); + } +}); + +passwordInput.addEventListener("focusout", function () { + if ( + passwordInput.value.length < 8 || + !/^(?=.*[a-zA-Z])(?=.*\d)/.test(passwordInput.value) + ) { + showError( + passwordInput, + errorMessage2, + "비밀번호는 영문, 숫자 조합 8자 이상 입력해 주세요." + ); + } else { + clearError(passwordInput, errorMessage2); + } +}); + +passwordInputOmt.addEventListener("input", function () { + if (passwordInput.value === passwordInputOmt.value) { + clearError(passwordInputOmt, errorMessage2Omt); + } else { + showError( + passwordInputOmt, + errorMessage2Omt, + "비밀번호가 일치하지 않습니다." + ); + } +}); +joinButton.addEventListener("click", function (event) { + event.preventDefault(); + const data = { + email: emailInput.value, + }; + fetch("https://bootcamp-api.codeit.kr/api/check-email", { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify(data), + }) + .then((response) => response.json()) + .then((result) => { + console.log(result.data.isUsagleNickname); + }); + + // if (result.data.isUsagleNickname) { + const newMember = { + email: emailInput.value, + password: passwordInput.value, + }; + // return newMember; + + fetch("https://bootcamp-api.codeit.kr/api/sign-up", { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify(newMember), + }) + .then((response) => response.json()) + .then((result) => { + // 서버 응답에 따른 처리 + localStorage.setItem("newMember", result.data.accessToken); + location.href = "folder.html"; + }); +}); diff --git a/week1.html b/langding.html similarity index 51% rename from week1.html rename to langding.html index 9c8a1b869..d3f4f6de8 100644 --- a/week1.html +++ b/langding.html @@ -3,7 +3,7 @@ Linkbrary - +
@@ -32,7 +32,10 @@

링크 추가하기 - +

@@ -50,7 +53,7 @@

링크의 내용이 담긴 카드들 @@ -70,7 +73,7 @@

폴더 이름 변경 기능 @@ -92,11 +95,17 @@

폴더 공유 기능
+
+

+ 여러 링크를 폴더에 담고 공유할 수 있습니다. 가족, 친구, 동료들에게 + 쉽고 빠르게 링크를 공유해 보세요. +

+
@@ -107,15 +116,20 @@

검색해 보세요

-

중요한 정보들을 검색으로 쉽게 찾아보세요.

+

+ 중요한 정보들을 검색으로 쉽게 찾아보세요. +

링크 검색 기능
+
+

중요한 정보들을 검색으로 쉽게 찾아보세요.

+