+ 
- 
+ 
Hot item
-+
가장 HOT한 중고거래 물품을
판다 마켓에서 확인해 보세요
@@ -64,10 +64,10 @@
Search
-+
구매하고 싶은 물품은 검색해서
쉽게 찾아보세요
@@ -87,10 +87,10 @@
Register
-+
어떤 물건이든 판매하고 싶은 상품을 쉽게 등록하세요 diff --git a/src/assets/icons/google_icon.png b/src/assets/icons/google_icon.png deleted file mode 100644 index 63a81231..00000000 Binary files a/src/assets/icons/google_icon.png and /dev/null differ diff --git a/src/assets/icons/google_icon.svg b/src/assets/icons/google_icon.svg new file mode 100644 index 00000000..337f73e4 --- /dev/null +++ b/src/assets/icons/google_icon.svg @@ -0,0 +1,9 @@ + diff --git a/src/assets/icons/kakaotalk_icon.png b/src/assets/icons/kakaotalk_icon.png deleted file mode 100644 index 8c25d9f9..00000000 Binary files a/src/assets/icons/kakaotalk_icon.png and /dev/null differ diff --git a/src/assets/icons/kakaotalk_icon.svg b/src/assets/icons/kakaotalk_icon.svg new file mode 100644 index 00000000..46853fcf --- /dev/null +++ b/src/assets/icons/kakaotalk_icon.svg @@ -0,0 +1,4 @@ + diff --git a/src/assets/icons/temp b/src/assets/icons/temp deleted file mode 100644 index e69de29b..00000000 diff --git a/src/pages/login.html b/src/pages/login.html index 7dbaf68f..9d658c7e 100644 --- a/src/pages/login.html +++ b/src/pages/login.html @@ -32,10 +32,10 @@
간편 로그인하기
diff --git a/src/pages/signup.html b/src/pages/signup.html index 289c1d37..77933252 100644 --- a/src/pages/signup.html +++ b/src/pages/signup.html @@ -43,10 +43,10 @@간편 로그인하기
diff --git a/src/scripts/formUtils.js b/src/scripts/formUtils.js new file mode 100644 index 00000000..24f2ba24 --- /dev/null +++ b/src/scripts/formUtils.js @@ -0,0 +1,56 @@ +const visibilityConfig = { + password: { + type: "text", + src: "/src/assets/icons/visibility_off_btn.svg", + alt: "비밀번호 숨기기", + }, + text: { + type: "password", + src: "/src/assets/icons/visibility_on_btn.svg", + alt: "비밀번호 보기", + }, +}; + +export function setVisibilityToggle(inputWrapperSelector) { + const inputWrappers = document.querySelectorAll(inputWrapperSelector); + + inputWrappers.forEach((wrapper) => { + wrapper.addEventListener("click", (event) => { + const clickedElement = event.target; + + if (clickedElement.classList.contains("input-icon")) { + const passwordInput = wrapper.querySelector("input"); + const toggleButton = clickedElement; + + const nextState = passwordInput.type === "password" ? visibilityConfig["password"] : visibilityConfig["text"]; + + passwordInput.type = nextState.type; + toggleButton.src = nextState.src; + toggleButton.alt = nextState.alt; + } + }); + }); +} + +export function setButtonDisable(parent, buttonClass) { + const button = parent.querySelector(buttonClass); + + // 초기 상태 및 입력값 검증 함수 + function validateInputs() { + const inputs = parent.querySelectorAll("input"); + const allFilled = Array.from(inputs).every(input => input.value.trim() !== ""); + button.disabled = !allFilled; + } + + /* + 초기 상태에 button을 disabled로 설정하였으나 + 안전성과 일관성을 위해 호출 + */ + validateInputs(); + + parent.addEventListener("input", (event) => { + if (event.target.tagName === "INPUT") { + validateInputs(); + } + }); + } \ No newline at end of file diff --git a/src/scripts/global.js b/src/scripts/global.js deleted file mode 100644 index 4c2c195d..00000000 --- a/src/scripts/global.js +++ /dev/null @@ -1,49 +0,0 @@ -export function setVisibilityToggle(inputWrapperSelector) { - const inputWrapperList = document.querySelectorAll(inputWrapperSelector); - - inputWrapperList.forEach((wrapper) => { - wrapper.addEventListener("click", event => { - const target = event.target; - if(target.classList.contains("input-icon")) { - const input = wrapper.querySelector("input"); - const icon = target; - - if (input.type === "password") - { - input.type = "text"; - icon.src = "/src/assets/icons/visibility_off_btn.svg"; - icon.alt = "비밀번호 숨기기"; - } - else - { - input.type = "password"; - icon.src = "/src/assets/icons/visibility_on_btn.svg"; - icon.alt = "비밀번호 보기"; - } - } - }) - }) -} - -export function setButtonDisable(parent, buttonClass) { - const button = parent.querySelector(buttonClass); - - // 초기 상태 및 입력값 검증 함수 - function validateInputs() { - const inputs = parent.querySelectorAll("input"); - const allFilled = Array.from(inputs).every(input => input.value.trim() !== ""); - button.disabled = !allFilled; - } - - /* - 초기 상태에 button을 disabled로 설정하였으나 - 안전성과 일관성을 위해 호출 - */ - validateInputs(); - - parent.addEventListener("input", (event) => { - if (event.target.tagName === "INPUT") { - validateInputs(); - } - }); - } \ No newline at end of file diff --git a/src/scripts/pages/login.js b/src/scripts/pages/login.js index c66515e7..c8d99cfc 100644 --- a/src/scripts/pages/login.js +++ b/src/scripts/pages/login.js @@ -1,4 +1,4 @@ -import { setVisibilityToggle, setButtonDisable } from "/src/scripts/global.js"; +import { setVisibilityToggle, setButtonDisable } from "/src/scripts/formUtils.js"; setVisibilityToggle(".input-wrapper"); diff --git a/src/scripts/pages/signup.js b/src/scripts/pages/signup.js index c66515e7..c8d99cfc 100644 --- a/src/scripts/pages/signup.js +++ b/src/scripts/pages/signup.js @@ -1,4 +1,4 @@ -import { setVisibilityToggle, setButtonDisable } from "/src/scripts/global.js"; +import { setVisibilityToggle, setButtonDisable } from "/src/scripts/formUtils.js"; setVisibilityToggle(".input-wrapper"); diff --git a/src/styles/index.css b/src/styles/index.css index c679753d..34efeb3f 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -41,7 +41,6 @@ header { display: flex; flex-direction: column; gap: 32px; - width: 357px; height: 260px; } @@ -76,7 +75,6 @@ header { align-items: center; padding: 0 24px; gap: 64px; - height: 444px; border-radius: 12px; background-color: #FCFCFC; } @@ -92,19 +90,19 @@ header { .main-content-right-text { display: flex; flex-direction: column; - width: 350px; gap: 12px; align-items: flex-start; text-align: left; + padding-right: 72px; } .main-content-left-text { display: flex; flex-direction: column; - width: 350px; gap: 12px; align-items: flex-end; text-align: right; + padding-left: 72px; } .main-content-text-header { @@ -166,7 +164,9 @@ footer { .footer-content { display: flex; align-items: center; + flex-wrap: wrap-reverse; width: 1120px; + gap: 60px; justify-content: space-between; } @@ -193,7 +193,207 @@ footer { gap: 12px; } -.social-network-icons li { +.social-network-icons img { width: 20px; - height: 20px; +} + +@media (max-width: 1199px) { + .header-content { + margin: 0 24px; + } + + .main-title { + height: auto; + padding-top: 84px; + } + + .main-title-content { + display: flex; + flex-direction: column; + gap: 8px; + align-items: center; + } + + .main-title-content-left { + align-items: center; + gap: 24px; + } + + .main-title-h1 { + text-align: center; + width: auto; + } + + .main-title-h1 br { + display: none; + } + + .main-block { + display: flex; + align-items: center; + justify-content: center; + height: auto; + padding: 24px 24px; + } + + .main-block:nth-of-type(2n) .main-content { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 24px; + height: auto; + padding: 0px 0px; + background-color: white; + } + + .main-block:nth-of-type(2n + 1) .main-content { + display: flex; + flex-direction: column-reverse; + align-items: flex-end; + gap: 24px; + height: auto; + padding: 0px 0px; + background-color: white; + } + + .main-content-picture { + width: auto; + height: auto; + } + + .main-content-picture img { + border-radius: 14px; + } + + .main-content-text-title { + font-size: 32px; + font-weight: 700; + line-height: 42px; + } + + .main-content-text-title br { + display: none; + } + + .main-bottom { + height: auto; + padding-top: 200px; + } + + .main-bottom-content { + display: flex; + flex-direction: column; + gap: 200px; + align-items: center; + } + + .main-bottom-content-left { + text-align: center; + } + + .main-bottom-content-right { + width: auto; + height: auto; + } + + .footer-content { + width: 536px; + } +} + +@media (max-width: 767px) { + .header-content { + margin: 0 16px; + } + + .main-title { + height: auto; + padding-top: 48px; + } + + .main-title-content { + display: flex; + gap: 8px; + align-items: center; + } + + .main-title-content-left { + gap: 18px; + } + + .main-title-h1 { + font-size: 32px; + line-height: 44px; + } + + .main-title-h1 br { + display: block; + } + + .visit-button { + padding: 12px 72px; + font-size: 18px; + line-height: 26px; + } + + .main-block { + display: flex; + align-items: center; + justify-content: center; + padding: 20px 15px; + height: auto; + } + + .main-block:nth-of-type(2n) .main-content { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 24px; + height: auto; + padding: 0px 0px; + background-color: white; + } + + .main-block:nth-of-type(2n + 1) .main-content { + display: flex; + flex-direction: column-reverse; + align-items: flex-end; + gap: 24px; + height: auto; + padding: 0px 0px; + background-color: white; + } + + .main-content-picture { + width: auto; + height: auto; + } + + .main-content-picture img { + border-radius: 7px; + } + + .main-content-text-title { + font-size: 24px; + font-weight: 700; + line-height: 32px; + } + + .main-content-text-title br { + display: none; + } + + .main-bottom-content { + gap: 100px; + } + + .main-bottom-content-left { + font-size: 32px; + font-weight: 700; + line-height: 44px; + } + + .codeit-logo { + flex: 1 1 100%; + } } \ No newline at end of file diff --git a/src/styles/pages/login.css b/src/styles/pages/login.css index c84569d5..25b85820 100644 --- a/src/styles/pages/login.css +++ b/src/styles/pages/login.css @@ -133,4 +133,10 @@ main { line-height: 17px; text-decoration: underline; color: #3692FF; +} + +@media (max-width: 767px) { + body { + padding: 16px; + } } \ No newline at end of file diff --git a/src/styles/pages/signup.css b/src/styles/pages/signup.css index a0ddd46a..c8824938 100644 --- a/src/styles/pages/signup.css +++ b/src/styles/pages/signup.css @@ -2,7 +2,8 @@ body { display: flex; align-items: center; justify-content: center; - height: 100vh; + min-height: 100vh; + padding: 40px; } main { @@ -133,4 +134,10 @@ main { line-height: 17px; text-decoration: underline; color: #3692FF; +} + +@media (max-width: 767px) { + body { + padding: 40px 16px; + } } \ No newline at end of file