diff --git a/.github/workflows/delete-merged-branch-config.yml b/.github/workflows/delete-merged-branch-config.yml new file mode 100644 index 000000000..d54933615 --- /dev/null +++ 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/auth/main.js b/auth/main.js new file mode 100644 index 000000000..5ef8203cb --- /dev/null +++ b/auth/main.js @@ -0,0 +1,94 @@ +import { + displayError, + resetError, + validateInput, + validationState, +} from "./utill/validation.js"; +import { ERROR_MESSAGE } from "./utill/constant.js"; +import { user } from "./utill/db.js"; + +const form = document.querySelector(".sign-form"); +const inputs = form.querySelectorAll("input"); + +const submit = document.querySelector(".cta"); +const authType = submit.dataset.auth; + +const emailInput = document.querySelector('.sign-input[type="email"]'); +const passwordInput = document.querySelector('.sign-input[type="password"]'); +const confirmPasswordInput = document.querySelector(".confirm-password"); + +const focusHandler = (e) => { + if (e.target.tagName === "INPUT") { + const errorMessage = validateInput(e.target); + displayError(e.target, errorMessage); + } +}; + +const submitHandler = (e) => { + e.preventDefault(); + resetError(); + let isValid = true; + let account = {}; + + inputs.forEach((input) => { + const { type, value, name } = input; + if (validationState[name] === undefined) { + const errorMessage = validateInput(input); + if (errorMessage) { + displayError(input, errorMessage); + isValid = false; + } + } else if (!validationState[name]) { + displayError( + input, + ERROR_MESSAGE[authType]["INVALID_" + type.toUpperCase()] + ); + isValid = false; + } + account[name] = value; + }); + + let isSubmit = false; + + if (authType === "signin" && isValid) { + if (account.email !== user.email) { + displayError(emailInput, ERROR_MESSAGE[authType]["INVALID_EMAIL"]); + isValid = false; + } else if (account.password !== user.password) { + console.log(account, user); + displayError(passwordInput, ERROR_MESSAGE[authType]["INVALID_PASSWORD"]); + isValid = false; + } else { + isSubmit = true; + } + } + + if (authType === "signup" && isValid) { + if (account.email === user.email) { + displayError(emailInput, ERROR_MESSAGE[authType]["EXIST_EMAIL"]); + isValid = false; + } else if (passwordInput.value !== confirmPasswordInput.value) { + displayError( + confirmPasswordInput, + ERROR_MESSAGE[authType]["PASSWORD_EQUAL"] + ); + isValid = false; + } + if (isValid) { + isSubmit = true; + } + } + if (isSubmit) { + form.submit(); + } +}; + +const keyupHandler = (e) => { + if (e.key === "Enter") { + submit.click(); + } +}; + +form.addEventListener("focusout", focusHandler); +form.addEventListener("submit", submitHandler); +document.addEventListener("keyup", keyupHandler); diff --git a/auth/signin.html b/auth/signin.html index e09d332f8..7be6f589e 100644 --- a/auth/signin.html +++ b/auth/signin.html @@ -26,21 +26,25 @@

-
+
- +
-
+
+
- - +
+ + +
+
- +
소셜 로그인 @@ -54,5 +58,7 @@
+ + diff --git a/auth/signup.html b/auth/signup.html index 46145299d..8658f2cad 100644 --- a/auth/signup.html +++ b/auth/signup.html @@ -26,28 +26,41 @@

-
+
- +
+ +
+
-
+
- - +
+ + +
+
-
+
- - +
+ + +
+
- +
다른 방식으로 가입하기 @@ -61,5 +74,7 @@
+ + diff --git a/auth/styles.css b/auth/styles.css index 0d73c38c9..fdfb1af74 100644 --- a/auth/styles.css +++ b/auth/styles.css @@ -80,6 +80,7 @@ header { .sign-input { padding: 1.8rem 1.5rem; border-radius: 0.8rem; + width: 100%; border: 0.1rem solid var(--gray-3); font-size: 1.6rem; line-height: 150%; @@ -89,9 +90,15 @@ header { border-color: var(--primary); } +.error-message { + font-size: 1.4rem; + color: var(--Red); +} + .eye-button { position: absolute; - bottom: 2.2rem; + top: 50%; + transform: translateY(-50%); right: 1.5rem; width: 1.6rem; height: 1.6rem; diff --git a/auth/utill/constant.js b/auth/utill/constant.js new file mode 100644 index 000000000..bbf1870f5 --- /dev/null +++ b/auth/utill/constant.js @@ -0,0 +1,16 @@ +export const ERROR_MESSAGE = { + signin: { + EMPTY_EMAIL: "이메일을 입력해주세요.", + EMPTY_PASSWORD: "비밀번호를 입력해주세요.", + INVALID_EMAIL: "이메일을 확인해주세요", + INVALID_PASSWORD: "비밀번호를 확인해주세요.", + }, + signup: { + EMPTY_EMAIL: "이메일을 입력해주세요.", + EMPTY_PASSWORD: "비밀번호를 입력해주세요.", + INVALID_EMAIL: "올바른 이메일 주소가 아닙니다.", + INVALID_PASSWORD: "비밀번호는 영문, 숫자 조합 8자 이상 입력해 주세요.", + EXIST_EMAIL: "이미 존재하는 이메일입니다.", + PASSWORD_EQUAL: "비밀번호가 일치하지 않아요.", + }, +}; diff --git a/auth/utill/db.js b/auth/utill/db.js new file mode 100644 index 000000000..96406a305 --- /dev/null +++ b/auth/utill/db.js @@ -0,0 +1,4 @@ +export const user = { + email: "test@codeit.com", + password: "codeit101", +}; diff --git a/auth/utill/toggle.js b/auth/utill/toggle.js new file mode 100644 index 000000000..29923a7a6 --- /dev/null +++ b/auth/utill/toggle.js @@ -0,0 +1,14 @@ +document.querySelectorAll(".eye-button").forEach((button) => { + button.addEventListener("click", function () { + const input = this.previousElementSibling; + const img = this.querySelector("img"); + + if (input.type === "password") { + input.type = "text"; + img.src = "../images/eye-on.svg"; + } else { + input.type = "password"; + img.src = "../images/eye-off.svg"; + } + }); +}); diff --git a/auth/utill/validation.js b/auth/utill/validation.js new file mode 100644 index 000000000..21e481343 --- /dev/null +++ b/auth/utill/validation.js @@ -0,0 +1,50 @@ +// validation.js +import { ERROR_MESSAGE } from "./constant.js"; +import { user } from "./db.js"; + +const submit = document.querySelector(".cta"); +const authType = submit.dataset.auth; + +export const validationState = {}; + +const PATTERN = { + email: + /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i, + password: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/, + "confirm-password": /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/, +}; + +const getErrorMessage = (name, condition) => { + const errorType = condition ? "EMPTY_" : "INVALID_"; + return ERROR_MESSAGE[authType][errorType + name.toUpperCase()]; +}; + +export function validateInput(input) { + const { name, value } = input; + let errorMessage = ""; + + if (value === "") { + errorMessage = getErrorMessage(name, true); + } else if (!PATTERN[name].test(value)) { + errorMessage = getErrorMessage(name, false); + } else if ( + authType === "signup" && + name === "email" && + value === user.email + ) { + errorMessage = ERROR_MESSAGE[authType]["EXIST_EMAIL"]; + } + + validationState[name] = !errorMessage; + + return errorMessage; +} + +export function resetError() { + const errorMessages = document.querySelectorAll(".error-message"); + errorMessages.forEach((message) => (message.textContent = "")); +} +export function displayError(input, errorMessage) { + const errorDisplay = input.parentNode.nextElementSibling; + errorDisplay.textContent = errorMessage; +} diff --git a/folder.html b/folder.html new file mode 100644 index 000000000..68628bdd1 --- /dev/null +++ b/folder.html @@ -0,0 +1,11 @@ + + + + + + Document + + +
folder 페이지
+ +