-
-
- 저장한 링크를
- 공유해보세요
+ 
+
+
+
+ 저장한 링크를
+ 공유해 보세요
- 여러 링크를 폴더에 담고 공유할 수 있습니다.
- 가족, 친구, 동료들에게 쉽고 빠르게 링크를
+ 여러 링크를 폴더에 담고 공유할 수 있습니다. 가족, 친구, 동료들에게 쉽고 빠르게 링크를
공유해 보세요.
+ 
+
+
+
+ 저장한 링크를
+ 검색해 보세요
+
+ 중요한 정보들을 검색으로 쉽게 찾아보세요.
+ 
+
+
+
-
-
-
-
-
-
-
- 저장한 링크를
- 검색해 보세요
-
- 중요한 정보들을 검색으로 쉽게 찾아보세요.
-
-
-
-
-
-
-
-
\ 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
deleted file mode 100644
index 55ba9e070..000000000
--- a/signin.html
+++ /dev/null
@@ -1,45 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/signin/signIn.js b/signin/signIn.js
new file mode 100644
index 000000000..d199c61c7
--- /dev/null
+++ b/signin/signIn.js
@@ -0,0 +1,104 @@
+import {
+ EMAIL_REGEX,
+ PW_REGEX,
+ resetErr,
+ printErr,
+ codeitApi,
+} from "../utils/utils.js";
+
+export const userEmail = document.querySelector('#user-email');
+export const userPw = document.querySelector('#user-password');
+export const eyeImg = document.querySelector('.eye-image');
+export const signInForm = document.querySelector('.sign-form');
+
+/* 이메일 체크 (미입력, 유효성) */
+function emailChk( email ) {
+ resetErr( email );
+ if( email.value.length === 0 ){
+ printErr( email, '이메일을 입력해주세요.');
+ return false;
+ }
+ if( !EMAIL_REGEX.test( email.value )){
+ printErr( email, '올바른 이메일 주소가 아닙니다.');
+ return false;
+ }
+ return true;
+}
+
+userEmail.addEventListener('focusout',(e) => emailChk( e.target ) );
+
+/* 비밀번호 체크 (미입력, 유효성) */
+export function pwChk( pw ){
+ resetErr( pw );
+ if ( pw.value.length === 0 ){
+ printErr( pw, '비밀번호를 입력해주세요.');
+ return false;
+ }
+ if ( !PW_REGEX.test( pw.value ) ){
+ printErr( pw, '비밀번호는 영문, 숫자 조합 8자 이상 입력해 주세요.');
+ return false;
+ }
+ return true;
+}
+
+userPw.addEventListener('focusout', (e) => pwChk( e.target ) );
+
+/* 눈이미지와 비번 감추기 */
+export 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";
+ }
+}
+
+eyeImg.addEventListener('click', (e)=>{
+ e.preventDefault();
+ pwShowHide();
+} );
+
+/* 로그인 시도 함수 */
+async function signInSubmit(e) {
+ e.preventDefault();
+
+ const emailResult = emailChk( userEmail );
+ const pwResult = pwChk( userPw );
+ const userInfo = {
+ email : userEmail.value,
+ password : userPw.value,
+ };
+ const p = new Promise(( resolve, reject ) => {
+ if( emailResult && pwResult ){
+ resolve( accessApi( userInfo, 'sign-in' ) ),
+ reject(
+ resetErr( userEmail ),
+ resetErr( userPw ),
+ printErr( userEmail, '이메일을 확인해주세요.'),
+ printErr( userPw, '비밀번호를 확인해주세요.'),)
+ }
+ })
+}
+
+/* 로그인, 회원가입시 api 요청과 응답을 받기 */
+export async function accessApi( userInfo, path ){
+ try {
+ const response = await fetch(`${codeitApi}/${path}`,{
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json"
+ },
+ body: JSON.stringify( userInfo ),
+ });
+ if( response.ok ){
+ const result = await response.json();
+ localStorage.setItem( 'signInAccessToken', result.accessToken );
+ location.href = "../folder.html";
+ }
+ } catch (error){
+ throw new Error('실패했습니다.');
+ }
+}
+
+signInForm.addEventListener( 'submit', signInSubmit );
diff --git a/signin/signin.html b/signin/signin.html
new file mode 100644
index 000000000..9ed6f73a9
--- /dev/null
+++ b/signin/signin.html
@@ -0,0 +1,50 @@
+
+
+
+
+
로그인
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/signup.html b/signup.html
deleted file mode 100644
index a4d345b3b..000000000
--- a/signup.html
+++ /dev/null
@@ -1,50 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/signup/signUp.js b/signup/signUp.js
new file mode 100644
index 000000000..be3efd40c
--- /dev/null
+++ b/signup/signUp.js
@@ -0,0 +1,126 @@
+import {
+ EMAIL_REGEX,
+ PW_REGEX,
+ resetErr,
+ printErr,
+ codeitApi,
+} from "../utils/utils.js";
+
+import {
+ userEmail,
+ userPw,
+ signInForm,
+ pwChk,
+ accessApi,
+} from "../signin/signIn.js";
+
+const userPw2 = document.querySelector('#user-password-confrim');
+const eyeImg2 = document.querySelector('.eye-image2');
+
+/* 이메일 체크 (미입력, 유효성, 가입이력조회) */
+async function emailChk( email ) {
+ resetErr( email );
+ if( email.value.length === 0 ){
+ printErr( email, '이메일을 입력해주세요.');
+ return false;
+ }
+ if( !EMAIL_REGEX.test( email.value )){
+ printErr( email, '올바른 이메일 주소가 아닙니다.');
+ return false;
+ }
+ if( email.value && EMAIL_REGEX.test( email.value ) ){
+ const result = await emailDuplicateChk( userEmail, 'check-email' );
+ if( !result ){
+ printErr( email, '이미 사용 중인 이메일입니다.');
+ return false;
+ }
+ }
+ return true;
+}
+
+userEmail.addEventListener('focusout',(e) => emailChk( e.target ) );
+
+/* 이메일 중복 체크 (서버에 요청) */
+async function emailDuplicateChk( email, path ){
+ const inputEmail = {
+ "email" : email.value,
+ };
+ try {
+ const response = await fetch(`${codeitApi}/${path}`,{
+ method: "POST",
+ headers: {
+ "Content-Type" : "application/json",
+ },
+ body: JSON.stringify( inputEmail ),
+ });
+ if ( response.ok ){
+ const result = await response.json();
+ return result;
+ }
+ } catch (error){
+ console.log(error);
+ }
+};
+
+/* 비밀번호 체크 (미입력, 유효성) */
+userPw.addEventListener('focusout', (e) => pwChk( e.target ) );
+
+/* 비밀번호 확인 체크 (미입력, 유효성, 일치성) */
+export function pw2Chk( pw2 ){
+ resetErr( pw2 );
+ if ( pw2.value.length === 0 ){
+ printErr( pw2, '비밀번호를 입력해주세요.');
+ return false;
+ }
+ if ( !PW_REGEX.test( pw2.value ) ){
+ printErr( pw2, '비밀번호는 영문, 숫자 조합 8자 이상 입력해 주세요.');
+ return false;
+ }
+ if ( pw2.value !== userPw.value ){
+ printErr( pw2, '비밀번호가 일치하지 않아요.');
+ return false;
+ }
+ return true;
+}
+
+userPw2.addEventListener('focusout', (e) => pw2Chk( e.target ) );
+
+/* 눈이미지와 비번 감추기 _ 비번 확인 */
+export function pw2ShowHide(e){
+ if( userPw2.type === "password"){
+ eyeImg2.src = "../img/eye-on.svg"
+ userPw2.type = "text";
+ } else if (userPw2.type === "text"){
+ eyeImg2.src = "../img/eye-off.svg"
+ userPw2.type = "password";
+ }
+}
+
+eyeImg2.addEventListener('click', (e)=>{
+ e.preventDefault();
+ pw2ShowHide();
+} );
+
+/* 회원가입 시도 함수 */
+async function signInSubmit(e) {
+ e.preventDefault();
+
+ const emailResult = emailChk( userEmail );
+ const pwResult = pwChk( userPw );
+ const pw2Result = pw2Chk( userPw2 );
+ const userInfo = {
+ email : userEmail.value,
+ password : userPw.value,
+ };
+ const p = new Promise(( resolve, reject ) => {
+ if( emailResult && pwResult && pw2Result ){
+ resolve( accessApi( userInfo, 'api/sign-up' ) ),
+ reject(
+ printErr( userEmail, '이메일을 확인해주세요.'),
+ printErr( userPw, '비밀번호를 확인해주세요.'),
+ printErr( userPw2, '비밀번호를 확인해주세요.'))
+ }
+ })
+}
+
+signInForm.addEventListener( 'submit', signInSubmit );
diff --git a/signup/signup.html b/signup/signup.html
new file mode 100644
index 000000000..e1839eedf
--- /dev/null
+++ b/signup/signup.html
@@ -0,0 +1,71 @@
+
+
+
+
+
회원가입
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/utils/utils.js b/utils/utils.js
new file mode 100644
index 000000000..00406b81f
--- /dev/null
+++ b/utils/utils.js
@@ -0,0 +1,23 @@
+export const EMAIL_REGEX = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/;
+export const PW_REGEX = /^[A-Za-z0-9`~!@#\$%\^&\*\(\)\{\}\[\]\-_=\+\\|;:'"<>,\./\?]{8,20}$/;
+export const testUser = { email: "test@codeit.com", pw: "codeit101", }
+export const codeitApi = 'https://bootcamp-api.codeit.kr/api';
+
+/* 빨간 테두리와 에러 문구 리셋 함수 */
+export function resetErr ( el ){
+ const errText = el.parentNode.querySelector( '.fail-message' );
+ if( errText ){
+ errText.remove();
+ el.classList.remove( 'red-border' );
+ }
+}
+
+/* 빨간 테두리와 에러 문구 추가 함수 */
+/* 근데 이게 적용되면 입력칸 색이 바뀝니다 -> (크롬)브라우저의 문제 */
+export 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);
+}
- 로그인
- 
- 
- 
+
+ 
+
+
+ 
- 
+ 
+ 
+