From 89e4d715fa929650a5904176e211f6abc318aede Mon Sep 17 00:00:00 2001 From: heonq Date: Mon, 30 Sep 2024 10:06:08 +0900 Subject: [PATCH 01/31] =?UTF-8?q?docs:=20=EB=AF=B8=EC=85=98=20=EC=9A=94?= =?UTF-8?q?=EA=B5=AC=EC=82=AC=ED=95=AD=20=EB=AC=B8=EC=84=9C=20=EC=9E=91?= =?UTF-8?q?=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/sprint3.md | 74 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 74 insertions(+) create mode 100644 docs/sprint3.md diff --git a/docs/sprint3.md b/docs/sprint3.md new file mode 100644 index 00000000..142e8948 --- /dev/null +++ b/docs/sprint3.md @@ -0,0 +1,74 @@ +# 스프린트 미션 3 요구사항 + +## 로그인, 회원가입 페이지 공통 + +### 기본 요구사항 + +- [ ] 로그인 및 회원가입 페이지의 이메일, 비밀번호, 비밀번호 확인 input에 필요한 유효성 검증 함수를 만들고 적용해 주세요. +- [ ] 이메일 input에서 focus out 할 때, 값이 없을 경우 input에 빨강색 테두리와 아래에 “이메일을 입력해주세요.” 빨강색 에러 메세지를 보입니다. +- [ ] 이메일 input에서 focus out 할 때, 이메일 형식에 맞지 않는 경우 input에 빨강색 테두리와 아래에 “잘못된 이메일 형식입니다” 빨강색 에러 메세지를 보입니다. +- [ ] 비밀번호 input에서 focus out 할 때, 값이 없을 경우 아래에 “비밀번호를 입력해주세요.” 에러 메세지를 보입니다 +- [ ] 비밀번호 input에서 focus out 할 때, 값이 8자 미만일 경우 아래에 “비밀번호를 8자 이상 입력해주세요.” 에러 메세지를 보입니다. +- [ ] input 에 빈 값이 있거나 에러 메세지가 있으면 ‘로그인’ 버튼은 비활성화 됩니다. +- [ ] Input 에 유효한 값을 입력하면 ‘로그인' 버튼이 활성화 됩니다. +- [ ] 활성화된 ‘로그인’ 버튼을 누르면 “/items” 로 이동합니다 + +### 심화 요구사항 + +- [ ] 브라우저에 현재 보이는 화면의 영역(viewport) 너비를 기준으로 분기되는 반응형 디자인을 적용합니다. (참고: https://www.codeit.kr/topics/responsive-web-publishing) + + - PC: 1200px 이상 + - Tablet: 744px 이상 ~ 1199px 이하 + - Mobile: 375px 이상 ~ 743px 이하 + - 375px 미만 사이즈의 디자인은 고려하지 않습니다. + +- [ ] Tablet 사이즈에서 내부 디자인은 PC사이즈와 동일합니다. +- [ ] Mobile 사이즈에서 좌우 여백 16px 제외하고 내부 요소들이 너비를 모두 차지합니다. +- [ ] Mobile 사이즈에서 내부 요소들의 너비는 기기의 너비가 커지는 만큼 커지지만 400px을 넘지 않습니다. +- [ ] 비밀번호 및 비밀번호 확인 입력란에 눈 모양 아이콘 클릭 시 비밀번호 표시/숨기기 토글이 가능합니다. 기본 상태는 비밀번호 숨김으로 설정합니다. + +## 로그인 페이지 + +### 기본 요구사항 + +- [ ] 이메일과 비밀번호를 입력하고 로그인 버튼을 누른 후, 다음 조건을 참조하여 로그인 성공 여부를 alert 메시지로 출력합니다. +- [ ] 만약 입력한 이메일이 데이터베이스(USER_DATA)에 없거나, 이메일은 일치하지만 비밀번호가 틀린 경우, '비밀번호가 일치하지 않습니다.'라는 메시지를 alert로 표시합니다 +- [ ] 만약 입력한 이메일이 데이터베이스에 존재하고, 비밀번호도 일치할 경우, “/items”로 이동합니다. + +### 심화 요구사항 + +- [ ] 오류 메시지 모달을 구현합니다. 모달 내 내용은 alert 메시지와 동일합니다. + +## 회원가입 페이지 + +### 기본 요구사항 + +- [ ] 회원가입을 위해 이메일, 닉네임, 비밀번호, 비밀번호 확인을 입력한 뒤, 회원가입 버튼을 클릭하세요. 그 후에는 다음 조건에 따라 회원가입 가능 여부를 alert로 알려주세요. +- [ ] 입력한 이메일이 이미 데이터베이스(USER_DATA)에 존재하는 경우, '사용 중인 이메일입니다'라는 메시지를 alert로 표시합니다. +- [ ] 입력한 이메일이 데이터베이스(USER_DATA)에 없는 경우, 회원가입이 성공적으로 처리되었으므로 로그인 페이지(”/login”)로 이동합니다. + +### 심화 요구사항 + +- [ ] 오류 메시지 모달을 구현합니다. 모달 내 내용은 alert 메시지와 동일합니다. + +## 랜딩 페이지 + +### 심화 요구사항 + +- [ ] 브라우저에 현재 보이는 화면의 영역(viewport) 너비를 기준으로 분기되는 반응형 디자인을 적용합니다. (참고: https://www.codeit.kr/topics/responsive-web-publishing) + + - PC: 1200px 이상 + - Tablet: 744px 이상 ~ 1199px 이하 + - Mobile: 375px 이상 ~ 743px 이하 + - 375px 미만 사이즈의 디자인은 고려하지 않습니다. + +- [ ] PC, Tablet 사이즈의 이미지 크기는 고정값을 사용합니다. +- [ ] Mobile 사이즈의 이미지는 좌우 여백 32px을 제외하고 이미지 영역이 꽉 차게 구현합니다. (이때 가로가 커지는 비율에 맞춰 세로도 커져야 합니다.) +- [ ] Tablet 사이즈로 작아질 때 최소 좌우 여백이 “판다마켓” 로고의 왼쪽에 여백 24px, “로그인” 버튼 오른쪽 여백 24px을 유지할 수 있도록 “판다마켓” 로고와 “로그인" 버튼의 간격이 가까워집니다. +- [ ] Mobile 사이즈로 작아질 때 최소 좌우 여백이 “판다마켓” 로고의 왼쪽에 여백 16px, “로그인” 버튼 오른쪽 여백 16px을 유지할 수 있도록 “판다마켓” 로고와 “로그인" 버튼의 간격이 가까워집니다. +- [ ] Mobile 사이즈 너비가 커지면, “Privacy Policy”, “FAQ”, “codeit-2023”이 있는 영역과 SNS 아이콘들이 있는 영역의 사이 간격이 커집니다. + +- [ ] 페이스북, 카카오톡, 디스코드, 트위터 등 SNS에서 판다마켓 랜딩 페이지(“/”) 공유 시 미리보기를 볼 수 있도록 랜딩 페이지 메타 태그를 설정합니다. +- [ ] 미리보기에서 제목은 “판다마켓”, 설명은 “일상에서 모든 물건을 거래해보세요”로 설정합니다. +- [ ] 주소와 이미지는 자유롭게 설정하세요. +- [ ] 로그인, 회원가입 페이지에 공통으로 사용하는 로직이 있다면, 반복하지 않고 공통된 로직을 모듈로 분리해 사용해 주세요. From c52b9852eafe83ad0feae9057174e8a856bbdc64 Mon Sep 17 00:00:00 2001 From: heonq Date: Mon, 30 Sep 2024 14:32:08 +0900 Subject: [PATCH 02/31] =?UTF-8?q?style:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8,?= =?UTF-8?q?=ED=9A=8C=EC=9B=90=EA=B0=80=EC=9E=85=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EB=B3=80=EA=B2=BD=20?= =?UTF-8?q?=EB=B0=8F=20=ED=83=9C=EA=B7=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/styles/sign.css | 27 ++++++++++++++++++++++++++- login/index.html | 22 ++++++++++++++-------- signup/index.html | 14 +++++++++++++- 3 files changed, 53 insertions(+), 10 deletions(-) diff --git a/assets/styles/sign.css b/assets/styles/sign.css index 18774811..fc867006 100644 --- a/assets/styles/sign.css +++ b/assets/styles/sign.css @@ -7,6 +7,7 @@ --social-login-bg-color: #e6f2ff; --sign-up-link-font-color: #3182f6; --password-visible-button-color: #4b5563; + --warning-invalid-color: #f74747; } html { @@ -52,6 +53,12 @@ header img { height: auto; } +form > section { + margin-bottom: 2.4rem; + display: flex; + flex-direction: column; +} + label { margin-bottom: 1.6rem; font-size: 1.8rem; @@ -63,7 +70,6 @@ button { width: 100%; height: 5.6rem; border: none; - margin-bottom: 2.4rem; } input { @@ -73,6 +79,10 @@ input { font-weight: 400; } +input.error { + border: solid 1px var(--warning-invalid-color); +} + input:focus { outline: 1px solid var(--input-focus-border-color); } @@ -88,6 +98,7 @@ button { font-size: 2rem; line-height: 3.2rem; font-weight: 600; + margin-bottom: 2.4rem; } .social-login { @@ -144,3 +155,17 @@ button { color: var(--password-visible-button-color); cursor: pointer; } + +.message { + display: none; +} + +.message.show { + display: block; + font-size: 1.5rem; + line-height: 1.8rem; + font-weight: 600; + color: var(--warning-invalid-color); + padding-left: 16px; + padding-top: 8px; +} diff --git a/login/index.html b/login/index.html index 79e8592d..00e9351d 100644 --- a/login/index.html +++ b/login/index.html @@ -33,14 +33,20 @@
- - - -
- - -
- +
+ + +

+
+
+ +
+ + +
+

+
+
+
@@ -46,7 +53,7 @@

- +

- +
-
+
Search

구매를 원하는 상품을 검색하세요

-

구매하고 싶은 물품은 검색해서 쉽게 찾아보세요

+

구매하고 싶은 물품은 검색해서 쉽게 찾아보세요

구매를 원하는 상품을 검색하세요
Register

판매를 원하는 상품을 등록하세요

-

- 어떤 물건이든 판매하고 싶은 상품을 쉽게 등록하세요 -

+

어떤 물건이든 판매하고 싶은 상품을 쉽게 등록하세요

From fab2a2b6df6a3bfb2d15114fb16819214ba55009 Mon Sep 17 00:00:00 2001 From: heonq Date: Tue, 1 Oct 2024 19:57:45 +0900 Subject: [PATCH 19/31] =?UTF-8?q?chore:=20=EA=B3=B5=EC=9C=A0=20=EC=8B=9C?= =?UTF-8?q?=20=EB=AF=B8=EB=A6=AC=EB=B3=B4=EA=B8=B0=EB=A5=BC=20=EC=84=A4?= =?UTF-8?q?=EC=A0=95=ED=95=A0=20=EB=A9=94=ED=83=80=20=ED=83=9C=EA=B7=B8=20?= =?UTF-8?q?=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/sprint3.md | 8 ++++---- index.html | 15 +++++++++++++++ 2 files changed, 19 insertions(+), 4 deletions(-) diff --git a/docs/sprint3.md b/docs/sprint3.md index ec8cb1b6..e22785dc 100644 --- a/docs/sprint3.md +++ b/docs/sprint3.md @@ -68,7 +68,7 @@ - [x] Mobile 사이즈로 작아질 때 최소 좌우 여백이 “판다마켓” 로고의 왼쪽에 여백 16px, “로그인” 버튼 오른쪽 여백 16px을 유지할 수 있도록 “판다마켓” 로고와 “로그인" 버튼의 간격이 가까워집니다. - [x] Mobile 사이즈 너비가 커지면, “Privacy Policy”, “FAQ”, “codeit-2023”이 있는 영역과 SNS 아이콘들이 있는 영역의 사이 간격이 커집니다. -- [ ] 페이스북, 카카오톡, 디스코드, 트위터 등 SNS에서 판다마켓 랜딩 페이지(“/”) 공유 시 미리보기를 볼 수 있도록 랜딩 페이지 메타 태그를 설정합니다. -- [ ] 미리보기에서 제목은 “판다마켓”, 설명은 “일상에서 모든 물건을 거래해보세요”로 설정합니다. -- [ ] 주소와 이미지는 자유롭게 설정하세요. -- [ ] 로그인, 회원가입 페이지에 공통으로 사용하는 로직이 있다면, 반복하지 않고 공통된 로직을 모듈로 분리해 사용해 주세요. +- [x] 페이스북, 카카오톡, 디스코드, 트위터 등 SNS에서 판다마켓 랜딩 페이지(“/”) 공유 시 미리보기를 볼 수 있도록 랜딩 페이지 메타 태그를 설정합니다. +- [x] 미리보기에서 제목은 “판다마켓”, 설명은 “일상에서 모든 물건을 거래해보세요”로 설정합니다. +- [x] 주소와 이미지는 자유롭게 설정하세요. +- [x] 로그인, 회원가입 페이지에 공통으로 사용하는 로직이 있다면, 반복하지 않고 공통된 로직을 모듈로 분리해 사용해 주세요. diff --git a/index.html b/index.html index c42625ae..6da1aeb8 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,21 @@ + + + + + + + + + Panda Market From f22ed98f14db27fe9b32c92f195d6ab9dd877f2e Mon Sep 17 00:00:00 2001 From: heonq Date: Tue, 1 Oct 2024 20:08:24 +0900 Subject: [PATCH 20/31] =?UTF-8?q?style:=20=EB=9E=9C=EB=94=A9=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/styles/home.css | 16 ++++++++++++++-- index.html | 2 +- 2 files changed, 15 insertions(+), 3 deletions(-) diff --git a/assets/styles/home.css b/assets/styles/home.css index 08352978..d6b14db5 100644 --- a/assets/styles/home.css +++ b/assets/styles/home.css @@ -189,6 +189,11 @@ header { word-break: keep-all; } +.main-page-text { + display: flex; + flex-direction: column; +} + .main-page-text.first { max-width: 28rem; } @@ -209,9 +214,12 @@ header { word-break: keep-all; } +.main-page-text.align-left { + align-items: start; + text-align: left; +} + .main-page-text.align-right { - display: flex; - flex-direction: column; align-items: end; text-align: right; } @@ -343,6 +351,10 @@ footer { max-width: 34rem; } + .sub-title { + margin-bottom: 1.6rem; + } + .main-content-container { flex-direction: column; width: 69.6rem; diff --git a/index.html b/index.html index 6da1aeb8..00238fae 100644 --- a/index.html +++ b/index.html @@ -88,7 +88,7 @@

인기 상품을 확인해 보세요

Search -

구매를 원하는 상품을 검색하세요

+

구매를 원하는 상품을 검색하세요

구매하고 싶은 물품은 검색해서 쉽게 찾아보세요

Date: Wed, 2 Oct 2024 11:38:20 +0900 Subject: [PATCH 21/31] =?UTF-8?q?style:=20=EB=9E=9C=EB=94=A9=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=ED=83=9C=EA=B7=B8=20=EB=B0=8F=20=EC=8A=A4?= =?UTF-8?q?=ED=83=80=EC=9D=BC=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/styles/home.css | 11 ++++++----- index.html | 6 +++--- 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/assets/styles/home.css b/assets/styles/home.css index d6b14db5..61c57a0e 100644 --- a/assets/styles/home.css +++ b/assets/styles/home.css @@ -27,7 +27,7 @@ main { width: 100%; } -header { +nav { width: 100%; height: 7rem; display: flex; @@ -37,7 +37,7 @@ header { background-color: var(--header-bg-color); } -.header-container { +.nav-container { width: 100%; max-width: 152rem; margin: 0 20rem; @@ -51,7 +51,7 @@ header { } .login-button { - width: 12.8rem; + min-width: 12.8rem; height: 4.8rem; border: none; border-radius: 0.8rem; @@ -277,7 +277,7 @@ footer { } @media (max-width: 1199px) { - .header-container { + .nav-container { margin: 0 2.4rem; } @@ -379,7 +379,7 @@ footer { } @media (max-width: 743px) { - .header-container { + .nav-container { margin: 0 1.6rem; } @@ -412,6 +412,7 @@ footer { .description { font-size: 1.6rem; + line-height: 1.92rem; } .description.first { diff --git a/index.html b/index.html index 00238fae..de481425 100644 --- a/index.html +++ b/index.html @@ -40,8 +40,8 @@
-
-
+
+
From d567ce850a470077380a9b7b5f009916783b89a9 Mon Sep 17 00:00:00 2001 From: heonq Date: Sat, 5 Oct 2024 12:59:38 +0900 Subject: [PATCH 23/31] =?UTF-8?q?fix:=20=EC=BD=94=EB=93=9C=20=EC=98=A4?= =?UTF-8?q?=ED=83=80=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/scripts/core/sign.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/scripts/core/sign.js b/assets/scripts/core/sign.js index 7390d5db..04e9da2e 100644 --- a/assets/scripts/core/sign.js +++ b/assets/scripts/core/sign.js @@ -55,7 +55,7 @@ class Sign { getValues() { return Object.values(this.inputs).reduce((acc, input, index) => { - return { ...acc, [object.keys(this.inputs)[index]]: input.value }; + return { ...acc, [Object.keys(this.inputs)[index]]: input.value }; }, {}); } From 3f1f036b93d0a20685f4217bc8a5c3cb52279bd4 Mon Sep 17 00:00:00 2001 From: heonq Date: Sat, 5 Oct 2024 23:19:47 +0900 Subject: [PATCH 24/31] =?UTF-8?q?feat:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8/?= =?UTF-8?q?=ED=9A=8C=EC=9B=90=EA=B0=80=EC=9E=85=20=EC=9D=B8=ED=92=8B=20?= =?UTF-8?q?=EA=B4=80=EB=A6=AC=20=EA=B8=B0=EB=8A=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 기존에 함수로 구현했던 기능을 sign 클래스에 추가하고 이를 사용하도록 수정 - 에러 메시지를 숨길 때 aria-hidden 속성을 true로 변경 --- assets/scripts/core/sign.js | 16 ++++++++++++++-- assets/scripts/utils/toggleInputError.js | 12 ------------ login/index.html | 4 ++-- signup/index.html | 8 ++++---- 4 files changed, 20 insertions(+), 20 deletions(-) delete mode 100644 assets/scripts/utils/toggleInputError.js diff --git a/assets/scripts/core/sign.js b/assets/scripts/core/sign.js index 04e9da2e..ab838243 100644 --- a/assets/scripts/core/sign.js +++ b/assets/scripts/core/sign.js @@ -1,5 +1,4 @@ import $ from "../utils/query.js"; -import toggleInputError from "../utils/toggleInputError.js"; class Sign { constructor() { @@ -23,12 +22,25 @@ class Sign { $("#submit-button").disabled = Object.values(this.inputValidState).some((state) => !state); } + toggleInputError(e, message = "") { + const errorMessageNode = e.closest("section").querySelector(".message"); + errorMessageNode.innerText = message; + if (message.length) { + e.target.classList.add("error"); + errorMessageNode.setAttribute("aria-hidden", false); + return errorMessageNode.classList.add("show"); + } + e.target.classList.remove("error"); + errorMessageNode.setAttribute("aria-hidden", true); + errorMessageNode.classList.remove("show"); + } + setInputs() { Object.values(this.inputs).forEach((input, index) => { input.addEventListener("focusout", (e) => { const { value } = e.target; const message = this.validateMethods[index](value); - toggleInputError(e, message); + this.toggleInputError(e, message); const keys = Object.keys(this.inputs); this.setState({ [keys[index]]: message.length === 0 }); }); diff --git a/assets/scripts/utils/toggleInputError.js b/assets/scripts/utils/toggleInputError.js deleted file mode 100644 index f0e5fbee..00000000 --- a/assets/scripts/utils/toggleInputError.js +++ /dev/null @@ -1,12 +0,0 @@ -const toggleInputError = (e, message = "") => { - const targetNode = e.target.closest("section").querySelector(".message"); - targetNode.innerText = message; - if (message.length) { - e.target.classList.add("error"); - return targetNode.classList.add("show"); - } - e.target.classList.remove("error"); - targetNode.classList.remove("show"); -}; - -export default toggleInputError; diff --git a/login/index.html b/login/index.html index fe56b690..da8f61ef 100644 --- a/login/index.html +++ b/login/index.html @@ -43,7 +43,7 @@
-

+
@@ -51,7 +51,7 @@
-

+ diff --git a/signup/index.html b/signup/index.html index adc95c78..9f1a80b1 100644 --- a/signup/index.html +++ b/signup/index.html @@ -35,12 +35,12 @@
-

+
-

+
@@ -48,7 +48,7 @@
-

+
@@ -56,7 +56,7 @@
-

+ From 8d67925c319136dafcd7496403a860a89728440f Mon Sep 17 00:00:00 2001 From: heonq Date: Sun, 6 Oct 2024 14:49:50 +0900 Subject: [PATCH 25/31] =?UTF-8?q?fix:=EB=A1=9C=EA=B7=B8=EC=9D=B8/=ED=9A=8C?= =?UTF-8?q?=EC=9B=90=EA=B0=80=EC=9E=85=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?= =?UTF-8?q?=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/scripts/core/sign.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/scripts/core/sign.js b/assets/scripts/core/sign.js index ab838243..46eeaa71 100644 --- a/assets/scripts/core/sign.js +++ b/assets/scripts/core/sign.js @@ -23,7 +23,7 @@ class Sign { } toggleInputError(e, message = "") { - const errorMessageNode = e.closest("section").querySelector(".message"); + const errorMessageNode = e.target.closest("section").querySelector(".message"); errorMessageNode.innerText = message; if (message.length) { e.target.classList.add("error"); From 6a4175163d7392e629dda292b0e9d3e878eb79df Mon Sep 17 00:00:00 2001 From: heonq Date: Sun, 6 Oct 2024 14:50:18 +0900 Subject: [PATCH 26/31] =?UTF-8?q?style:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8/?= =?UTF-8?q?=ED=9A=8C=EC=9B=90=EA=B0=80=EC=9E=85=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/styles/sign.css | 1 + 1 file changed, 1 insertion(+) diff --git a/assets/styles/sign.css b/assets/styles/sign.css index 2cabd938..f17d76cd 100644 --- a/assets/styles/sign.css +++ b/assets/styles/sign.css @@ -103,6 +103,7 @@ button { button:disabled { background-color: var(--main-grey-color); + cursor: not-allowed; } .social-login { From 2bfc1e0c982c8d277a56129b42286c42df6e4eaf Mon Sep 17 00:00:00 2001 From: heonq Date: Sun, 6 Oct 2024 15:20:28 +0900 Subject: [PATCH 27/31] =?UTF-8?q?style:=20=EB=9E=9C=EB=94=A9=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/styles/home.css | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/assets/styles/home.css b/assets/styles/home.css index 0b49bb67..1f664bd9 100644 --- a/assets/styles/home.css +++ b/assets/styles/home.css @@ -340,12 +340,20 @@ footer { max-width: 60rem; } + .main-title { + font-size: 3.2rem; + line-height: 4.2rem; + margin-bottom: 2.4rem; + } + .description { + font-size: 1.8rem; + line-height: 2.6rem; max-width: 30rem; } .main-page:nth-of-type(3) .description { - max-width: 34rem; + max-width: 27rem; } .sub-title { @@ -409,7 +417,8 @@ footer { .main-title { font-size: 2.4rem; - margin: 0; + line-height: 3.36rem; + margin-bottom: 1.6rem; } .description { From 4230149ba04cfc5e882b90a4e6d42daf955e5468 Mon Sep 17 00:00:00 2001 From: heonq Date: Sun, 6 Oct 2024 15:44:49 +0900 Subject: [PATCH 28/31] =?UTF-8?q?style:=20=EB=9E=9C=EB=94=A9=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/styles/home.css | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/assets/styles/home.css b/assets/styles/home.css index 1f664bd9..2ee1869e 100644 --- a/assets/styles/home.css +++ b/assets/styles/home.css @@ -415,9 +415,15 @@ footer { width: 24rem; } + .sub-title { + font-size: 1.6rem; + line-height: 2.6rem; + margin-bottom: 0.8rem; + } + .main-title { font-size: 2.4rem; - line-height: 3.36rem; + line-height: 3.2rem; margin-bottom: 1.6rem; } From b50523ca97c31ec410964efcba9cad66d4ede643 Mon Sep 17 00:00:00 2001 From: heonq Date: Thu, 10 Oct 2024 10:22:05 +0900 Subject: [PATCH 29/31] =?UTF-8?q?refactor:=20sign=20=ED=81=B4=EB=9E=98?= =?UTF-8?q?=EC=8A=A4=20=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/scripts/core/sign.js | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/assets/scripts/core/sign.js b/assets/scripts/core/sign.js index 46eeaa71..81bbf181 100644 --- a/assets/scripts/core/sign.js +++ b/assets/scripts/core/sign.js @@ -2,13 +2,16 @@ import $ from "../utils/query.js"; class Sign { constructor() { + // 인풋 값의 유효성 상태를 저장하는 객체 this.inputValidState = {}; + // 페이지의 인풋 DOM요소 this.inputs = {}; - this.validateMethods = []; + // 인풋 값의 유효성검사 메소드 + this.validateMethods = {}; } init() { - this.setInputs(); + this.handleInputFocusout(); this.setFormSubmit(); this.setCloseButton(); this.handleToggleButton(); @@ -35,16 +38,15 @@ class Sign { errorMessageNode.classList.remove("show"); } - setInputs() { - Object.values(this.inputs).forEach((input, index) => { - input.addEventListener("focusout", (e) => { + handleInputFocusout() { + for (const key in this.inputs) { + this.inputs[key].addEventListener("focusout", (e) => { const { value } = e.target; - const message = this.validateMethods[index](value); + const message = this.validateMethods[key](value); this.toggleInputError(e, message); - const keys = Object.keys(this.inputs); - this.setState({ [keys[index]]: message.length === 0 }); + this.setState({ [key]: message.length === 0 }); }); - }); + } } setFormSubmit() { From 53428936f64423be2146573e59081e75c4c3a398 Mon Sep 17 00:00:00 2001 From: heonq Date: Thu, 10 Oct 2024 10:23:31 +0900 Subject: [PATCH 30/31] =?UTF-8?q?refactor:=20Sign=20=ED=81=B4=EB=9E=98?= =?UTF-8?q?=EC=8A=A4=20=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - submit 성공 시와 실패 시 실행할 메소드 분리 --- assets/scripts/core/sign.js | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/assets/scripts/core/sign.js b/assets/scripts/core/sign.js index 81bbf181..053f310b 100644 --- a/assets/scripts/core/sign.js +++ b/assets/scripts/core/sign.js @@ -75,14 +75,20 @@ class Sign { onSubmit() {} + handleSubmitSuccess() { + window.location.href = "../items/index.html"; + } + + handleSubmitFailure(message) { + this.showModal(message); + } + togglePasswordVisibility(e) { const { target } = e; target.classList.toggle("fa-eye-slash"); target.classList.toggle("fa-eye"); const input = target.closest("div").querySelector("input"); - const TYPES = ["text", "password"]; - const inputType = input.type; - input.type = TYPES[Number(inputType === TYPES[0])]; + input.type === "text" ? (input.type = "password") : (input.type = "text"); } handleToggleButton() { From c639bf507e28d39a54dbda27e288382978bff81a Mon Sep 17 00:00:00 2001 From: heonq Date: Thu, 10 Oct 2024 10:24:42 +0900 Subject: [PATCH 31/31] =?UTF-8?q?refactor:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8,?= =?UTF-8?q?=ED=9A=8C=EC=9B=90=EA=B0=80=EC=9E=85=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/scripts/login.js | 18 +++++++++++++++--- assets/scripts/signup.js | 34 ++++++++++++++++++++++------------ 2 files changed, 37 insertions(+), 15 deletions(-) diff --git a/assets/scripts/login.js b/assets/scripts/login.js index ce0cf535..9269beed 100644 --- a/assets/scripts/login.js +++ b/assets/scripts/login.js @@ -16,15 +16,27 @@ class LoginForm extends Sign { [KEYS.email]: $("#email"), [KEYS.password]: $("#password"), }; - this.validateMethods = [validator.validateEmail, validator.validatePassword]; + this.validateMethods = { + [KEYS.email]: validator.validateEmail, + [KEYS.password]: validator.validatePassword, + }; } onSubmit() { const values = this.getValues(); const matchingAccount = USER_DATA.find((data) => data.email === values.email); matchingAccount?.password === values.password - ? (window.location.href = "../items/index.html") - : this.showModal(ERROR_MESSAGES.passwordNotMatch); + ? this.handleLoginSuccess() + : this.handleLoginFailure(ERROR_MESSAGES.passwordNotMatch); + } + + handleLoginSuccess() { + super.handleSubmitSuccess(); + // 이후 추가 로직 작성 + } + handleLoginFailure(message) { + super.handleSubmitFailure(message); + // 이후 추가 로직 작성 } } diff --git a/assets/scripts/signup.js b/assets/scripts/signup.js index 4093bdf4..5163be38 100644 --- a/assets/scripts/signup.js +++ b/assets/scripts/signup.js @@ -20,22 +20,32 @@ class signupForm extends Sign { [KEYS.password]: $("#password"), [KEYS.confirmPassword]: $("#confirm-password"), }; - this.validateMethods = [ - validator.validateEmail, - validator.validateNickname, - validator.validatePassword, - validator.validatePassword, - ]; + this.validateMethods = { + [KEYS.email]: validator.validateEmail, + [KEYS.nickname]: validator.validateNickname, + [KEYS.password]: validator.validatePassword, + [KEYS.confirmPassword]: validator.validatePassword, + }; } onSubmit() { const values = this.getValues(); - const matchingAccount = USER_DATA.find((data) => data.email === values.email); - matchingAccount - ? this.showModal(ERROR_MESSAGES.emailAlreadyInUse) - : values.password === values.confirmPassword - ? (window.location.href = "../items/index.html") - : this.showModal(ERROR_MESSAGES.passwordNotMatch); + const emailAlreadyInUse = USER_DATA.find((data) => data.email === values.email); + const passwordMatch = values.password === values.confirmPassword; + emailAlreadyInUse + ? this.handleSignupFailure(ERROR_MESSAGES.emailAlreadyInUse) + : !passwordMatch + ? this.handleSignupFailure(ERROR_MESSAGES.passwordNotMatch) + : this.handleSignupSuccess(); + } + + handleSignupSuccess() { + super.handleSubmitSuccess(); + // 이후 추가 로직 작성 + } + handleSignupFailure(message) { + super.handleSubmitFailure(message); + // 이후 추가 로직 작성 } }