diff --git a/.github/delete-merged-branch-config.yml b/.github/workflows/delete-merged-branch-config.yml similarity index 76% rename from .github/delete-merged-branch-config.yml rename to .github/workflows/delete-merged-branch-config.yml index 2a6d27be..d5493361 100644 --- a/.github/delete-merged-branch-config.yml +++ b/.github/workflows/delete-merged-branch-config.yml @@ -4,12 +4,11 @@ on: pull_request: types: [closed] -permissions: - pull-requests: write - 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/Faq.html b/Faq.html new file mode 100644 index 00000000..987bb671 --- /dev/null +++ b/Faq.html @@ -0,0 +1,20 @@ + + + + + + 판다마켓 - FAQ + + + + + + +

임시 FAQ 페이지

+ + diff --git a/homepage.html b/homepage.html new file mode 100644 index 00000000..d002f5bd --- /dev/null +++ b/homepage.html @@ -0,0 +1,9 @@ + + + + + + Document + + + diff --git a/images/anyicons/passwardcancel.svg b/images/anyicons/passwardcancel.svg new file mode 100644 index 00000000..d11f7ab5 --- /dev/null +++ b/images/anyicons/passwardcancel.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/images/anyicons/passwardeye.svg b/images/anyicons/passwardeye.svg new file mode 100644 index 00000000..35a75305 --- /dev/null +++ b/images/anyicons/passwardeye.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/home/bottom-banner-image.png b/images/home/bottom-banner-image.png new file mode 100644 index 00000000..2de8d597 Binary files /dev/null and b/images/home/bottom-banner-image.png differ diff --git a/images/home/feature1-image.png b/images/home/feature1-image.png new file mode 100644 index 00000000..4684b9a7 Binary files /dev/null and b/images/home/feature1-image.png differ diff --git a/images/home/feature2-image.png b/images/home/feature2-image.png new file mode 100644 index 00000000..31e20b97 Binary files /dev/null and b/images/home/feature2-image.png differ diff --git a/images/home/feature3-image.png b/images/home/feature3-image.png new file mode 100644 index 00000000..5b8084a7 Binary files /dev/null and b/images/home/feature3-image.png differ diff --git a/images/home/hero-image.png b/images/home/hero-image.png new file mode 100644 index 00000000..d28fb652 Binary files /dev/null and b/images/home/hero-image.png differ diff --git a/images/logo/favicon.ico b/images/logo/favicon.ico new file mode 100644 index 00000000..9fecc692 Binary files /dev/null and b/images/logo/favicon.ico differ diff --git a/images/logo/no-panda-logo.png b/images/logo/no-panda-logo.png new file mode 100644 index 00000000..386b9c09 Binary files /dev/null and b/images/logo/no-panda-logo.png differ diff --git a/images/logo/panda-market-logo.png b/images/logo/panda-market-logo.png new file mode 100644 index 00000000..a1dc1c6a Binary files /dev/null and b/images/logo/panda-market-logo.png differ diff --git a/images/social/facebook-logo.svg b/images/social/facebook-logo.svg new file mode 100644 index 00000000..8491c2f8 --- /dev/null +++ b/images/social/facebook-logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/social/google-logo.png b/images/social/google-logo.png new file mode 100644 index 00000000..b7756f76 Binary files /dev/null and b/images/social/google-logo.png differ diff --git a/images/social/instagram-logo.svg b/images/social/instagram-logo.svg new file mode 100644 index 00000000..c83306f8 --- /dev/null +++ b/images/social/instagram-logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/social/kakaotalk-logo.svg b/images/social/kakaotalk-logo.svg new file mode 100644 index 00000000..09fae80e --- /dev/null +++ b/images/social/kakaotalk-logo.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/images/social/panda-maket-share.png b/images/social/panda-maket-share.png new file mode 100644 index 00000000..47df680d Binary files /dev/null and b/images/social/panda-maket-share.png differ diff --git a/images/social/twitter-logo.svg b/images/social/twitter-logo.svg new file mode 100644 index 00000000..14a6069a --- /dev/null +++ b/images/social/twitter-logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/social/youtube-logo.svg b/images/social/youtube-logo.svg new file mode 100644 index 00000000..5fcc0ff3 --- /dev/null +++ b/images/social/youtube-logo.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/index.html b/index.html new file mode 100644 index 00000000..e68cc58d --- /dev/null +++ b/index.html @@ -0,0 +1,167 @@ + + + + + + 판다마켓 + + + + + + + + + + + + + + + + + + +
+ 판다마켓 홈 + 로그인 +
+ +
+ + +
+
+ 인기 상품 +
+

Hot item

+

인기 상품을
확인해 보세요

+

+ 가장 HOT한 중고거래 물품을
판다마켓에서 확인해 보세요 +

+
+
+ +
+
+

Search

+

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

+

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

+
+ 검색 기능 +
+ +
+ 판매 상품 등록 +
+

Register

+

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

+

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

+
+
+
+ +
+
+
+

+ 믿을 수 있는 +
+ 판다마켓 중고거래 +

+
+ 바텀배너이미지 +
+
+
+ + + + diff --git a/items.html b/items.html new file mode 100644 index 00000000..a515835d --- /dev/null +++ b/items.html @@ -0,0 +1,20 @@ + + + + + + 판다마켓 - 상품 리스트 + + + + + + +

임시 상품 리스트 페이지

+ + diff --git a/javascript/login&signuppage/login.js b/javascript/login&signuppage/login.js new file mode 100644 index 00000000..a9af9dda --- /dev/null +++ b/javascript/login&signuppage/login.js @@ -0,0 +1,92 @@ +const emailInput = document.getElementById("emailInput"); +const emailError = document.getElementById("emailError"); +const passwordInput = document.getElementById("passwardinput"); +const passwordError = document.getElementById("passwordError"); +const loginButton = document.getElementById("loginButton"); +const togglePassword = document.getElementById("togglePassword"); + +/* 이미지 파일 경로 설정 */ +const eyeOpenSrc = "./images/anyicons/passwardeye.svg"; +const eyeSlashSrc = "./images/anyicons/passwardcancel.svg"; + +/* 초기 상태 설정 */ +let isPasswordVisible = false; + +/* 이메일 정규표현식 */ +const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + +/* 유효성 검사 상태 변수 */ +let isEmailValid = false; +let isPasswordValid = false; + +/* 📌 유효성 검사 후 버튼 활성화 체크 */ +const updateButtonState = () => { + if (isEmailValid && isPasswordValid) { + loginButton.disabled = false; + } else { + loginButton.disabled = true; + } +}; + +/* 📌 이메일 Focus Out 체크 */ +emailInput.addEventListener("focusout", () => { + const value = emailInput.value.trim(); + + if (!value) { + emailInput.classList.add("error"); + emailError.textContent = "이메일을 입력해주세요."; + emailError.style.display = "block"; + isEmailValid = false; + } else if (!emailPattern.test(value)) { + emailInput.classList.add("error"); + emailError.textContent = "잘못된 이메일 형식입니다."; + emailError.style.display = "block"; + isEmailValid = false; + } else { + emailInput.classList.remove("error"); + emailError.style.display = "none"; + isEmailValid = true; + } + updateButtonState(); +}); + +/* 📌 비밀번호 Focus Out 체크 */ +passwordInput.addEventListener("focusout", () => { + const value = passwordInput.value.trim(); + + if (!value) { + passwordInput.classList.add("error"); + passwordError.textContent = "비밀번호를 입력해주세요."; + passwordError.style.display = "block"; + isPasswordValid = false; + } else if (value.length < 8) { + passwordInput.classList.add("error"); + passwordError.textContent = "비밀번호를 8자 이상 입력해주세요."; + passwordError.style.display = "block"; + isPasswordValid = false; + } else { + passwordInput.classList.remove("error"); + passwordError.style.display = "none"; + isPasswordValid = true; + } + updateButtonState(); +}); + +/* 📌 버튼 클릭 시 페이지 이동 */ +loginButton.addEventListener("click", () => { + if (isEmailValid && isPasswordValid) { + window.location.href = "/items"; + } +}); + +/* 클릭 이벤트 */ +togglePassword.addEventListener("click", () => { + isPasswordVisible = !isPasswordVisible; + if (isPasswordVisible) { + passwordInput.type = "text"; + togglePassword.src = eyeOpenSrc; + } else { + passwordInput.type = "password"; + togglePassword.src = eyeSlashSrc; + } +}); diff --git a/javascript/login&signuppage/signup.js b/javascript/login&signuppage/signup.js new file mode 100644 index 00000000..627fec0d --- /dev/null +++ b/javascript/login&signuppage/signup.js @@ -0,0 +1,158 @@ +const emailInput = document.getElementById("emailInput"); +const nicknameInput = document.getElementById("nicknameInput"); +const passwordInput = document.getElementById("passwordInput"); +const passwordConfirmInput = document.getElementById("passwordConfirmInput"); +const signupButton = document.getElementById("signup-button"); + +const emailError = document.getElementById("emailError"); +const nicknameError = document.getElementById("nicknameError"); +const passwordError = document.getElementById("passwordError"); +const passwordConfirmError = document.getElementById("passwordConfirmError"); + +const togglePassword = document.getElementById("togglePassword"); +const togglePasswordConfirm = document.getElementById("togglePasswordConfirm"); + +/* 이미지 파일 경로 설정 */ +const eyeOpenSrc = "./images/anyicons/passwardeye.svg"; +const eyeSlashSrc = "./images/anyicons/passwardcancel.svg"; + +/* 초기 상태 */ +let isPasswordVisible = false; +let isPasswordConfirmVisible = false; + +/* 이메일 정규표현식 */ +const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + +/* 유효성 상태 */ +let isEmailValid = false; +let isNicknameValid = false; +let isPasswordValid = false; +let isPasswordMatch = false; + +/* 비밀번호 보이기/숨기기 토글 */ +togglePassword.addEventListener("click", () => { + isPasswordVisible = !isPasswordVisible; + if (isPasswordVisible) { + passwordInput.type = "text"; + togglePassword.src = eyeOpenSrc; + } else { + passwordInput.type = "password"; + togglePassword.src = eyeSlashSrc; + } +}); + +/* 비밀번호 확인 보이기/숨기기 토글 */ +togglePasswordConfirm.addEventListener("click", () => { + isPasswordConfirmVisible = !isPasswordConfirmVisible; + if (isPasswordConfirmVisible) { + passwordConfirmInput.type = "text"; + togglePasswordConfirm.src = eyeOpenSrc; + } else { + passwordConfirmInput.type = "password"; + togglePasswordConfirm.src = eyeSlashSrc; + } +}); + +/* 📌 유효성 검사 함수 */ +const validateEmail = () => { + const value = emailInput.value.trim(); + if (!value) { + emailInput.classList.add("error"); + emailError.textContent = "이메일을 입력해주세요."; + emailError.style.display = "block"; + isEmailValid = false; + } else if (!emailPattern.test(value)) { + emailInput.classList.add("error"); + emailError.textContent = "잘못된 이메일 형식입니다."; + emailError.style.display = "block"; + isEmailValid = false; + } else { + emailInput.classList.remove("error"); + emailError.style.display = "none"; + isEmailValid = true; + } +}; + +const validateNickname = () => { + const value = nicknameInput.value.trim(); + if (!value) { + nicknameInput.classList.add("error"); + nicknameError.textContent = "닉네임을 입력해주세요."; + nicknameError.style.display = "block"; + isNicknameValid = false; + } else { + nicknameInput.classList.remove("error"); + nicknameError.style.display = "none"; + isNicknameValid = true; + } +}; + +const validatePassword = () => { + const value = passwordInput.value.trim(); + if (!value) { + passwordInput.classList.add("error"); + passwordError.textContent = "비밀번호를 입력해주세요."; + passwordError.style.display = "block"; + isPasswordValid = false; + } else if (value.length < 8) { + passwordInput.classList.add("error"); + passwordError.textContent = "비밀번호를 8자 이상 입력해주세요."; + passwordError.style.display = "block"; + isPasswordValid = false; + } else { + passwordInput.classList.remove("error"); + passwordError.style.display = "none"; + isPasswordValid = true; + } +}; + +const validatePasswordConfirm = () => { + const value = passwordConfirmInput.value.trim(); + if (value !== passwordInput.value.trim()) { + passwordConfirmInput.classList.add("error"); + passwordConfirmError.textContent = "비밀번호가 일치하지 않습니다."; + passwordConfirmError.style.display = "block"; + isPasswordMatch = false; + } else { + passwordConfirmInput.classList.remove("error"); + passwordConfirmError.style.display = "none"; + isPasswordMatch = true; + } +}; + +/* 📌 입력 변경 시 실시간 검증 */ +emailInput.addEventListener("focusout", () => { + validateEmail(); + updateButtonState(); +}); + +nicknameInput.addEventListener("focusout", () => { + validateNickname(); + updateButtonState(); +}); + +passwordInput.addEventListener("focusout", () => { + validatePassword(); + updateButtonState(); +}); + +passwordConfirmInput.addEventListener("focusout", () => { + validatePasswordConfirm(); + updateButtonState(); +}); + +/* 📌 유효성 검사 후 버튼 활성화 체크 */ +const updateButtonState = () => { + if (isEmailValid && isNicknameValid && isPasswordValid && isPasswordMatch) { + signupButton.disabled = false; + } else { + signupButton.disabled = true; + } +}; + +/* 📌 회원가입 버튼 클릭 시 페이지 이동 */ +signupButton.addEventListener("click", () => { + if (isEmailValid && isNicknameValid && isPasswordValid && isPasswordMatch) { + window.location.href = "./login.html"; + } +}); diff --git a/login.html b/login.html new file mode 100644 index 00000000..a8c4c62d --- /dev/null +++ b/login.html @@ -0,0 +1,86 @@ + + + + + + 판다마켓 - 로그인 + + + + + + + +
+ + + +
+
+ + + +
+
+ +
+ + passwardtoggle +
+ +
+ +
+
간편 로그인하기
+ +
+
+ 판다마켓은 처음이신가요? + 회원가입 +
+
+
+ + + diff --git a/privacy.html b/privacy.html new file mode 100644 index 00000000..7f7d63cd --- /dev/null +++ b/privacy.html @@ -0,0 +1,20 @@ + + + + + + 판다마켓 - 이용약관 + + + + + + +

임시 이용약관 페이지

+ + diff --git a/signup.html b/signup.html new file mode 100644 index 00000000..d7e5e54a --- /dev/null +++ b/signup.html @@ -0,0 +1,131 @@ + + + + + + + 판다마켓 회원가입 + + + + + + + + +
+ + + +
+ + + + + + + + + + + + +
+ 이미 회원이신가요? + 로그인 +
+
+
+ + + + diff --git a/styles/global.css b/styles/global.css new file mode 100644 index 00000000..dbfe25fc --- /dev/null +++ b/styles/global.css @@ -0,0 +1,82 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +/* 링크가 상위 요소 또는 설정된 기본 텍스트 색상과 동일하게 표현되길 원한다면 a 태그에 명시적으로 color: inherit을 지정해 줘야 합니다. */ +a { + text-decoration: none; + color: inherit; +} + +button { + background: none; + border: none; + outline: none; + box-shadow: none; + cursor: pointer; +} + +img { + vertical-align: bottom; +} + +body { + color: #374151; + word-break: keep-all; + font-family: "Pretendard", sans-serif; +} + +#footerMenu { + display: flex; + gap: 30px; + color: #e5e7eb; +} + +#socialMedia { + display: flex; + gap: 12px; +} + +.wrapper { + max-width: 1200px; + margin: 0 auto; + width: 100%; +} + +h1 { + font-size: 40px; + font-weight: 700; + line-height: 56px; + letter-spacing: 0.02em; +} + +.button { + background-color: #3692ff; + color: #ffffff; + display: inline-flex; + align-items: center; + justify-content: center; +} + +.button:hover { + background-color: #1967d6; +} + +.button:focus { + background-color: #1251aa; +} + +.button:disabled { + background-color: #9ca3af; + cursor: default; + pointer-events: none; +} + +.pill-button { + font-size: 20px; + font-weight: 700; + border-radius: 999px; + padding: 16px 124px; +} diff --git a/styles/homepage/home.css b/styles/homepage/home.css new file mode 100644 index 00000000..dc0175e0 --- /dev/null +++ b/styles/homepage/home.css @@ -0,0 +1,356 @@ +.banner { + background-color: #cfe5ff; + height: 540px; + display: flex; + align-items: center; + justify-content: center; + background-repeat: no-repeat; + background-position: 80% bottom; + background-size: 55%; + position: relative; + overflow: hidden; +} + +#login-Link-Button { + font-size: 16px; + font-weight: 600; + border-radius: 8px; + padding: 12px 23px; + width: 128px; + height: 48px; +} + +.top-wrapper { + display: flex; + flex-direction: row; + height: 340px; + margin-top: auto; + width: 1110px; +} + +.bottom-wrapper { + display: flex; + flex-direction: row; + height: 397px; + margin-top: auto; + width: 1110px; +} + +.bottom-banner { + position: relative; + background-color: #cfe5ff; + height: 540px; + display: flex; + justify-content: center; + align-items: center; + background-repeat: no-repeat; + background-position: 80% bottom; + background-size: 55%; + overflow: hidden; +} + +#bottom-text { + width: 364px; + display: flex; + justify-content: center; + align-items: center; +} + +#footer-Menu { + display: flex; + gap: 30px; + color: #e5e7eb; +} + +#social-Media { + gap: 12px; + display: flex; +} + +#features { + padding-bottom: 138px; +} + +.banner .pill-button { + margin-top: 32px; +} + +.feature { + margin: 138px 0; + display: flex; + align-items: center; + gap: 5%; + background-color: #fcfcfc; + padding: 0 24px; +} + +.feature:nth-child(2) { + text-align: right; +} + +.feature-content { + flex: 1; +} + +.feature-tag { + color: #3692ff; + font-size: 18px; + line-height: 25px; + font-weight: 700; + margin-bottom: 12px; +} + +.feature-description { + font-size: 24px; + font-weight: 500; + line-height: 120%; + letter-spacing: 0.08em; + margin-top: 24px; +} + +header { + position: sticky; + top: 0; + width: 100%; + height: 70px; + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 200px; + background-color: #ffffff; + border-bottom: 1px solid #dfdfdf; + z-index: 9999; +} + +footer { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + gap: 366px; + justify-content: center; + justify-items: center; + align-items: center; + background-color: #111827; + color: #9ca3af; + display: flex; + padding: 32px 0 108px; + font-size: 16px; + white-space: nowrap; +} + +@media (max-width: 1199px) { + header { + padding: 0 24px; + } + + .banner { + height: 771px; + } + + .top-wrapper { + flex-direction: column; + height: 771px; + align-items: center; + justify-content: space-between; + } + + #top-banner-text { + margin-top: 84px; + display: flex; + flex-direction: column; + align-items: center; + margin-bottom: 24px; + } + + #bottom-text { + text-align: center; + } + + #features { + display: flex; + gap: 52px; + flex-direction: column; + align-items: center; + } + + .feature:nth-child(2) { + flex-direction: column-reverse; + gap: 20px; + } + + .feature img { + width: 696px; + height: auto; + } + + .feature h1 { + font-size: 32px; + } + + .feature p { + font-size: 18px; + } + + .feature h1 br { + display: none; + } + + .feature { + flex-direction: column; + margin: 0 0 52px 0; + gap: 5%; + padding: 0; + width: 100%; + min-width: 696px; + } + + .feature-content { + width: 696px; + margin-top: 24px; + } + + .bottom-wrapper { + flex-direction: column; + align-items: center; + justify-content: space-between; + padding-top: 201px; + height: 100%; + gap: 217px; + margin: 0; + } + + br { + display: none; + } + + .bottom-banner { + height: 927px; + align-items: center; + justify-items: center; + } + + .wrapper { + padding: 24px 0 56px; + } + + header { + padding: 0 16px; + } + + footer { + padding: 32px 0 108px; + font-size: 16px; + gap: 63px; + color: #e5e7eb; + } +} + +@media (max-width: 767px) { + #top-banner-text h1 { + font-size: 32px; + line-height: 140%; + } + + .feature-description br { + display: inline; + } + + #top-banner-text { + text-align: center; + margin-bottom: 18px; + font-size: 32px; + } + + .responsive-img { + content: url("/images/logo/no-panda-logo.png"); + } + + #hero-banner { + width: 448px; + height: 204px; + } + + #features { + flex-direction: column; + padding: 52px 0 83px; + justify-content: center; + align-items: center; + } + + .feature { + min-width: 344px; + } + .feature-content { + width: 344px; + } + + .feature img { + width: 344px; + height: 259px; + } + + .feature h1 { + font-size: 24px; + } + + .feature p { + font-size: 16px; + } + + .bottom-banner { + height: 540px; + } + .bottom-banner h1 { + font-size: 32px; + } + + .bottom-wrapper { + gap: 131px; + padding-top: 121px; + } + + footer { + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: auto auto; + gap: 16px; + justify-items: center; + align-items: center; + padding: 32px 32px 30px; + color: #cfcfcf; + } + + #footer-codeit { + grid-column: 1 / 2; + grid-row: 2 / 3; + justify-self: start; + } + + #footer-Menu { + color: #cfcfcf; + grid-column: 1 / 2; + grid-row: 1 / 2; + display: flex; + gap: 30px; + justify-content: start; + width: 100%; + } + + #social-Media { + grid-column: 2 / 3; + grid-row: 1 / 2; + display: flex; + gap: 12px; + justify-content: end; + width: 100%; + } + + #bottom-Banner-img { + width: 375px; + height: 198px; + } + + .pill-button { + font-size: 18px; + padding: 12px 71px; + } +} diff --git a/styles/signup&loginpage/login.css b/styles/signup&loginpage/login.css new file mode 100644 index 00000000..1e37d269 --- /dev/null +++ b/styles/signup&loginpage/login.css @@ -0,0 +1,222 @@ +/* 로그인 페이지 전체 스타일 */ +body { + margin: 0; + padding: 0; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + font-family: "Pretendard"; +} + +.loginpage { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + margin: 231px 640px; +} +/* 로그인 페이지 전체 스타일 */ + +/* 로고 스타일 */ +#mainlogo { + width: 396px; + height: 132px; +} +/* 로고 스타일 */ + +/* 로그인 섹션 스타일 */ +.loginsection { + font-weight: 700; + font-size: 18px; + margin-top: 40px; +} + +/* 로그인 라벨 스타일 */ +.loginlabel { + display: block; + margin-bottom: 16px; +} + +/* 로그인 인풋 스타일 */ +.logininput { + width: 640px; + height: 56px; + background-color: #f3f4f6; + border-radius: 12px; + border: 0px solid #3182f6; + padding-left: 24px; + padding-top: 16px; + padding-bottom: 16px; +} + +input::placeholder { + color: #9ca3af; + font-size: 16px; +} + +.logininput:focus { + border-color: #3692ff; + outline: none; + box-shadow: 0 0 5px rgba(74, 144, 226, 0.5); +} + +.error-message { + color: #f74747; + font-size: 14px; + margin-top: 8px; +} + +.logininput.error { + border: 1px solid #f74747 !important; +} + +/* 이메일 박스 스타일 */ +#emailbox { + margin-bottom: 24px; +} + +/* 비밀번호 스타일 적용 */ +.password-wrapper { + position: relative; + width: 640px; +} + +#passwardinput { + width: 100%; + padding-right: 48px; +} + +#togglePassword { + position: absolute; + right: 16px; + top: 50%; + transform: translateY(-50%); + width: 24px; + height: 24px; + cursor: pointer; + opacity: 0.6; +} +#togglePassword:hover { + opacity: 1; +} +/* 로그인 섹션 스타일 */ + +/* 로그인 버튼 */ +#loginButton { + margin-top: 24px; + margin-bottom: 24px; + width: 640px; + height: 56px; +} +/* 로그인 버튼 */ + +/* 간편 로그인 하기 섹션 스타일 */ +.socialloginsection { + width: 640px; + height: 74px; + background-color: #e6f2ff; + margin-bottom: 24px; + gap: 10px; + padding: 16px 23px; + border-radius: 8px; + + display: flex; + align-items: center; + justify-content: space-between; +} + +#sociallogintext { + font-weight: 500; + line-height: 26px; + font-size: 16px; + color: #374151; + margin: 0; +} + +#socialloginicon { + display: flex; + gap: 12px; +} + +#socialloginicon img { + width: 36px; + height: 36px; + cursor: pointer; +} +/* 간편 로그인 하기 스타일 */ + +/* 회원가입 */ + +#gosignup { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + gap: 4px; +} + +#signuplink { + color: #3692ff; + text-decoration: underline; + font-weight: 500; + cursor: pointer; +} + +/* 회원가입 */ + +@media (max-width: 767px) { + /* 최상단 login 페이지 설정 */ + .loginpage { + display: flex; + justify-content: center; + padding: 0 16px; + } + /* 메인 로고 설정 */ + #mainlogo { + width: 100%; + max-width: 396px; + height: auto; + object-fit: contain; + } + + /* 내부 로그인 섹션 설정 */ + .loginsection { + width: 100%; + max-width: 400px; + } + + /* 입력 필드, 버튼 설정 */ + .logininput, + #passwardinput, + #loginButton { + width: 100%; + margin-bottom: 12px; + } + + /* 비밀번호 input과 아이콘 정렬 */ + .password-wrapper { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + max-width: 400px; + } + + /* 소셜 로그인 설정 */ + .socialloginsection { + width: 100%; + max-width: 400px; + margin-bottom: 16px; + } + + /* 회원가입 링크 설정 */ + #gosignup { + text-align: center; + margin-top: 16px; + } + + #togglePassword { + top: 41%; + } +} diff --git a/styles/signup&loginpage/signup.css b/styles/signup&loginpage/signup.css new file mode 100644 index 00000000..501daf59 --- /dev/null +++ b/styles/signup&loginpage/signup.css @@ -0,0 +1,241 @@ +/* 회원가입 페이지 전체 스타일 */ +body { + margin: 0; + padding: 0; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + font-family: "Pretendard"; +} + +.signup-page { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + margin: 231px 640px; +} +/* 회원가입 페이지 전체 스타일 */ + +/* 로고 스타일 */ +#main-logo { + width: 396px; + height: 132px; +} +/* 로고 스타일 */ + +/* 회원가입 섹션 스타일 */ +.signup-section { + font-weight: 700; + font-size: 18px; + margin-top: 40px; +} + +/* 회원가입 라벨 스타일 */ +.signup-label { + display: block; + margin-bottom: 16px; +} + +/* 인풋 스타일 */ +.password-wrapper { + position: relative; + width: 640px; +} + +#togglePasswordConfirm, +#togglePassword { + position: absolute; + right: 16px; + top: 50%; + transform: translateY(-50%); + width: 24px; + height: 24px; + cursor: pointer; + opacity: 0.6; +} +#togglePasswordConfirm:hover, +#togglePassword:hover { + opacity: 1; +} + +.login-input { + width: 640px; + height: 56px; + background-color: #f3f4f6; + border-radius: 12px; + border: 0px solid #3182f6; + padding-left: 24px; + padding-top: 16px; + padding-bottom: 16px; +} + +.login-input:focus { + border-color: #3692ff; + outline: none; + box-shadow: 0 0 5px rgba(74, 144, 226, 0.5); +} + +/* 에러 메시지 스타일 */ +.error-message { + color: #f74747; + font-size: 14px; + margin-top: 8px; +} + +/* 에러 발생 시 input 스타일 */ +.login-input.error { + border: 1px solid #f74747 !important; +} + +input::placeholder { + color: #9ca3af; + font-size: 16px; +} + +/* 회원가입 박스 스타일 */ +.signup-box { + margin-bottom: 24px; +} + +.password-wrapper { + position: relative; + width: 640px; +} + +#passward-input { + width: 100%; + padding-right: 48px; +} + +#toggle-Password { + position: absolute; + right: 16px; + top: 50%; + transform: translateY(-50%); + width: 24px; + height: 24px; + cursor: pointer; + opacity: 0.6; +} +#toggle-Password:hover { + opacity: 1; +} +/* 로그인 섹션 스타일 */ + +/* 회원가입 버튼 */ +#signup-button { + margin-bottom: 24px; + width: 640px; + height: 56px; +} +/* 로그인 버튼 */ + +/* 간편 로그인 하기 섹션 스타일 */ +.social-login-section { + width: 640px; + height: 74px; + background-color: #e6f2ff; + margin-bottom: 24px; + gap: 10px; + padding: 16px 23px; + border-radius: 8px; + + display: flex; + align-items: center; + justify-content: space-between; +} + +#social-login-text { + font-weight: 500; + line-height: 26px; + font-size: 16px; + color: #374151; + margin: 0; +} + +#social-login-icon { + display: flex; + gap: 12px; +} + +#social-login-icon img { + width: 36px; + height: 36px; + cursor: pointer; +} +/* 간편 로그인 하기 스타일 */ + +/* 회원가입 */ + +#go-login { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + gap: 4px; +} + +#login-link { + color: #3692ff; + text-decoration: underline; + font-weight: 500; + cursor: pointer; +} + +/* 회원가입 */ + +@media (max-width: 767px) { + /* 페이지 전체 설정 */ + .signup-page { + display: flex; + justify-content: center; /* 수평 가운데 정렬 */ + padding: 0 16px; /* 좌우 16px 여백 */ + } + + /* 회원가입 섹션 설정 */ + .signup-section { + width: 100%; + max-width: 400px; /* 최대 400px까지만 확장 */ + } + + /* 로고 설정 */ + #main-logo { + width: 100%; + max-width: 396px; /* 원본 크기 최대 제한 */ + height: auto; /* 비율 유지하며 축소 */ + } + + /* 인풋 필드 및 버튼 설정 */ + .login-input, + #passward-input, + #signup-button { + width: 100%; + max-width: 400px; + } + + /* 비밀번호 input과 아이콘 정렬 */ + .password-wrapper { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + max-width: 400px; + } + + /* 소셜 로그인 설정 */ + .social-login-section { + width: 100%; + max-width: 400px; + margin-bottom: 16px; + } + + /* 로그인 링크 설정 */ + #go-login { + text-align: center; + margin-top: 16px; + width: 100%; + max-width: 400px; + } +}