diff --git a/css/login.css b/css/login.css deleted file mode 100644 index b5d0be368..000000000 --- a/css/login.css +++ /dev/null @@ -1,232 +0,0 @@ -/* 모든 요소의 크기를 테두리 포함하도록 설정 */ -* { - box-sizing: border-box; -} - -@font-face { - font-family: "Pretendard-Regular"; - src: url("https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff") - format("woff"); - font-weight: 400; - font-style: normal; -} - -body { - font-family: "Pretendard-Regular", "Noto Sans KR", Arial, sans-serif; - display: flex; - justify-content: center; - align-items: center; - height: 100vh; -} - -.login { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - width: 640px; -} - -.logo__container { - display: flex; - justify-content: center; - align-items: center; - width: 396px; - height: 132px; - gap: 8px; - padding-bottom: 40px; -} - -.logo__link { - text-decoration: none; - color: #3692ff; -} - -.logo__title { - font-size: 66px; - font-weight: 700; - line-height: 89.56px; -} - -.login__container { - display: flex; - flex-direction: column; - gap: 24px; - width: 100%; -} - -.form__container { - display: flex; - flex-direction: column; - gap: 24px; -} - -.form__group { - display: flex; - flex-direction: column; - gap: 16px; - width: 100%; -} - -.form__group-input { - height: 56px; - border-radius: 12px; - border: 0px; - background-color: #f3f4f6; - padding: 15px 24px; - width: 100%; -} - -.form__group-input, -.form__group-input::placeholder { - font-size: 16px; - line-height: 26px; - font-weight: 400; -} - -.error { - border: 2px solid red; -} - -.email__error-message, -.password__error-message { - color: red; - padding: 0px 16px; - display: none; - font-size: 14px; - line-height: 24px; - font-weight: 600; - transform: translateY(-8px); -} - -.form__group-label { - font-size: 18px; - font-weight: 700; - line-height: 26px; -} - -.form__group-input-container { - position: relative; -} - -.form__group-img { - position: absolute; - right: 24px; - top: 15px; -} - -.login-button { - width: 100%; - height: 56px; - border-radius: 40px; - background-color: #9ca3af; - display: flex; - justify-content: center; - align-items: center; - text-decoration: none; - color: #f3f4f6; - font-size: 20px; - line-height: 32px; - font-weight: 600; - border: 0; -} - -.login-button:hover { - cursor: pointer; -} - -.social-login__container { - display: flex; - justify-content: space-between; - align-items: center; - padding: 16px 23px; - width: 100%; - border-radius: 8px; - background-color: #e6f2ff; -} - -.social-login__icon { - display: flex; - justify-content: center; - align-items: center; - gap: 16px; -} - -.social-login__container > p { - font-size: 16px; - line-height: 26px; - font-weight: 500; - color: #1f2937; -} - -.sign-up__container { - display: flex; - justify-content: center; - align-items: center; - gap: 4px; -} - -.sign-up__container > p { - font-size: 14px; - font-weight: 500; - line-height: 24px; - color: #1f2937; -} - -.sign-up__link { - font-size: 14px; - line-height: 16px; - font-weight: 500; - color: #3692ff; -} - -@media screen and (max-width: 767px) { - .login { - padding: 0 16px; - width: 100%; - max-width: 100%; - margin: 0 auto; - } - - .logo__container { - width: 100%; - height: auto; - padding-bottom: 24px; - } - - .logo__img { - width: 51px; - height: auto; - } - - .logo__title { - font-size: 34px; - line-height: 44px; - } - - .form__container { - gap: 16px; - } - - .form__group { - gap: 8px; - } - - .form__group-label { - font-size: 14px; - line-height: 24px; - } - - .login-button { - font-size: 20px; - line-height: 32px; - } - - .social-login__icon { - gap: 16px; - } - - .sign-up__container { - gap: 4x; - } -} diff --git a/css/main.css b/css/main.css deleted file mode 100644 index e99794658..000000000 --- a/css/main.css +++ /dev/null @@ -1,363 +0,0 @@ -* { - box-sizing: border-box; -} - -@font-face { - font-family: "Pretendard-Regular"; - src: url("https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff") - format("woff"); - font-weight: 400; - font-style: normal; -} - -body { - font-family: "Pretendard-Regular"; -} - -a { - text-decoration: none; - cursor: pointer; -} - -.header { - position: fixed; - width: 100%; - height: 70px; - top: 0; -} - -.header__container { - display: flex; - justify-content: space-between; - align-items: center; - box-sizing: border-box; - margin: 0 auto; - padding: 9.5px 0px; - max-width: 1120px; -} - -.header__logo { - display: flex; - align-items: center; - gap: 8.5px; -} - -.header__logo span { - font-size: 26px; - font-weight: 700; - color: #3692ff; -} - -.header__login-button { - width: 128px; - height: 48px; - background: #3692ff; - border-radius: 8px; - font-size: 16px; - font-weight: 600; - color: #f3f4f6; - display: flex; - justify-content: center; - align-items: center; - line-height: 26px; -} - -.main-banner { - margin-top: 67px; -} - -.main-banner, -.sub-banner { - background: #cfe5ff; -} - -.main-banner__container, -.sub-banner__container { - margin: 0 auto; - width: 100%; - max-width: 1110px; -} - -.main-banner__img, -.sub-banner__img { - width: 100%; - height: auto; -} - -.main-banner__container { - display: flex; - align-items: center; - padding-top: 200px; - gap: 7px; -} - -.main-banner__text-container { - display: flex; - flex-direction: column; - gap: 32px; - padding-bottom: 60px; -} - -.main-banner__title, -.sub-banner__title, -.feature-section__content-box__title { - font-size: 40px; - font-weight: 700; - color: #374151; - line-height: 56px; - white-space: nowrap; -} - -.main-banner__cta { - width: 357px; - color: #f9fafb; - background-color: #3692ff; - height: 56px; - border-radius: 40px; - display: flex; - justify-content: center; - align-items: center; - font-size: 20px; - font-weight: 600; - line-height: 32px; -} - -.feature-section { - padding: 138px 0; - width: 100%; - margin: 0 auto; -} - -.feature-section__container { - display: flex; - justify-content: center; - align-items: center; - padding: 0 23.5px; - gap: 64px; - background-color: #fcfcfc; - max-width: 100%; - width: 988px; - margin: 0 auto; -} - -.feature-section__content-box { - display: flex; - flex-direction: column; - justify-content: center; - align-items: flex-start; - gap: 12px; -} - -.feature-section__content-box__label { - color: #3692ff; - font-size: 18px; - font-weight: 700; - line-height: 26px; -} - -.feature-section__content-box__title { - padding-bottom: 12px; -} - -.feature-section__content-box__description { - font-size: 24px; - font-weight: 500; - line-height: 32px; - color: #374151; - white-space: nowrap; -} - -.feature-section__image-left { - order: 2; -} - -.feature-section__content-box--right { - text-align: right; - align-items: flex-end; -} - -.sub-banner__container { - display: flex; - gap: 69px; - justify-content: space-between; - align-items: center; - padding-top: 143px; -} - -.footer-section { - width: 100%; - height: 160px; - background-color: #111827; -} - -.footer-container { - width: 1120px; - display: flex; - justify-content: space-between; - align-items: center; - margin: 0 auto; - padding-top: 32.5px; - max-width: 100%; -} - -.footer-ul { - display: flex; - justify-content: space-between; - align-items: center; - width: 100%; -} - -.footer-ul > li a { - font-size: 16px; - font-weight: 400; - line-height: 19.09px; -} - -.footer-ul > li:first-child { - color: #9ca3af; -} - -.footer-ul > li:nth-child(2) { - display: flex; - gap: 30px; -} - -.footer-ul > li:nth-child(2) > a { - color: #e5e7eb; -} - -.footer-ul > li:last-child { - display: flex; - gap: 12px; -} - -@media screen and (max-width: 1199px) { - .header__container { - padding: 9.5px 24px; - } - - .main-banner__container, - .sub-banner__container { - flex-direction: column; - padding-top: 84px; - } - - .main-banner__container { - gap: 0px; - } - - .main-banner__container > .main-banner__title br { - display: none; - } - - .main-banner__title { - text-align: center; - } - - .main-banner__text-container { - padding-bottom: 211px; - gap: 24px; - align-items: center; - } - - .feature-section { - padding: 24px; - } - - .feature-section__container { - flex-direction: column; - align-items: flex-start; - background-color: #ffffff; - padding: 0px; - gap: 24px; - } - - .feature-section__content-box { - text-align: left; - width: 100%; - gap: 16px; - } - - .feature-section__content-box__title { - padding-bottom: 8px; - font-size: 32px; - } - - .feature-section__content-box__title > br { - display: none; - } - - .feature-section__content-box__description { - font-size: 18px; - line-height: 26px; - } - - .feature-section__content-box__description--right { - text-align: right; - } - - .feature-section__image { - width: 100%; - height: auto; - } - - .feature-section__image-left { - order: 0; - } - - .sub-banner__container { - padding-top: 201px; - gap: 217px; - } - - .footer-container { - width: 536px; - } -} - -@media screen and (max-width: 767px) { - .header__container { - padding: 9.5px 16px; - } - - .header__logo-img { - display: none; - } - - .main-banner__text-container { - padding-bottom: 132px; - } - - .main-banner__title, - .sub-banner__title { - font-size: 32px; - line-height: 44.8px; - } - - .main-banner__cta { - width: 240px; - font-size: 18px; - line-height: 26px; - } - .feature-section__content-box { - gap: 8px; - } - - .feature-section__content-box__label { - font-size: 16px; - } - - .feature-section__content-box__title { - font-size: 24px; - line-height: 32px; - } - - .feature-section__content-box__description { - font-size: 16px; - } - - .sub-banner__container { - padding-top: 121px; - gap: 131px; - } -} diff --git a/css/signup.css b/css/signup.css deleted file mode 100644 index 2edde8e49..000000000 --- a/css/signup.css +++ /dev/null @@ -1,243 +0,0 @@ -/* 모든 요소의 크기를 테두리 포함하도록 설정 */ -* { - box-sizing: border-box; -} - -@font-face { - font-family: "Pretendard-Regular"; - src: url("https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff") - format("woff"); - font-weight: 400; - font-style: normal; -} - -html { - height: 100%; -} - -body { - font-family: "Pretendard-Regular"; - display: flex; - justify-content: center; - align-items: center; - height: 100%; -} - -.signup { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - width: 640px; -} - -.logo__container { - display: flex; - justify-content: center; - align-items: center; - width: 396px; - height: 132px; - gap: 8px; - padding-bottom: 40px; -} - -.logo__link { - text-decoration: none; - color: #3692ff; -} - -h1 { - font-size: 66px; - font-weight: 700; - line-height: 89.56px; -} - -.signup__container { - display: flex; - flex-direction: column; - gap: 24px; - width: 100%; -} - -.form__container { - display: flex; - flex-direction: column; - gap: 24px; -} - -.form__group { - display: flex; - flex-direction: column; - gap: 16px; - width: 100%; -} - -.form__group-input { - height: 56px; - border-radius: 12px; - border: 0px; - background-color: #f3f4f6; - padding: 15px 24px; - width: 100%; -} - -.form__group-input:focus { - border: 1px solid #3692ff; - outline: none; -} - -.form__group-input::placeholder { - font-size: 16px; - line-height: 26px; - font-weight: 400; -} - -.error { - border: 2px solid red; -} - -.email__error-message, -.password__error-message, -.nickname__error-message, -.checked-password__error-message { - color: red; - padding: 0px 16px; - display: none; - font-size: 14px; - line-height: 24px; - font-weight: 600; - transform: translateY(-8px); -} - -.form__group-label { - font-size: 18px; - font-weight: 700; - line-height: 26px; -} - -.form__group-input-container { - position: relative; -} - -.form__group-img { - position: absolute; - top: 15px; - right: 24px; -} - -.signup-button { - width: 100%; - height: 56px; - border-radius: 40px; - background-color: #9ca3af; - display: flex; - justify-content: center; - align-items: center; - text-decoration: none; - color: #f3f4f6; - font-size: 20px; - line-height: 32px; - font-weight: 600; - border: 0; -} - -.signup-button:hover, -.form__group-img:hover { - cursor: pointer; -} - -.social-login__container { - display: flex; - justify-content: space-between; - align-items: center; - padding: 16px 23px; - width: 100%; - border-radius: 8px; - background-color: #e6f2ff; -} - -.social-login__icon { - display: flex; - justify-content: center; - align-items: center; - gap: 16px; -} - -.social-login__container > p { - font-size: 16px; - line-height: 26px; - font-weight: 500; - color: #1f2937; -} - -.login__container { - display: flex; - justify-content: center; - align-items: center; - gap: 4px; -} - -.login__container > p { - font-size: 14px; - font-weight: 500; - line-height: 24px; - color: #1f2937; -} - -.login__link { - font-size: 14px; - line-height: 16px; - font-weight: 500; - color: #3692ff; -} - -@media screen and (max-width: 767px) { - .signup { - padding: 0 16px; - width: 100%; - max-width: 100%; - margin: 0 auto; - } - - .logo__container { - width: 100%; - height: auto; - padding-bottom: 24px; - } - - .logo__img { - width: 51px; - height: auto; - } - - .logo__link-header { - font-size: 34px; - line-height: 44px; - } - - .form__container { - gap: 16px; - } - - .form__group { - gap: 8px; - } - - .form__group-label { - font-size: 14px; - line-height: 24px; - } - - .signup-button { - font-size: 20px; - line-height: 32px; - } - - .social-login__icon { - gap: 16px; - } - - .login__container { - gap: 4x; - } -} diff --git a/img/Img_home_top.png b/img/Img_home_top.png deleted file mode 100644 index 7ce56caaa..000000000 Binary files a/img/Img_home_top.png and /dev/null differ diff --git a/img/banner-img.png b/img/banner-img.png deleted file mode 100644 index 58b29043e..000000000 Binary files a/img/banner-img.png and /dev/null differ diff --git a/img/close-eyes.png b/img/close-eyes.png deleted file mode 100644 index 5dc09fbe1..000000000 Binary files a/img/close-eyes.png and /dev/null differ diff --git a/img/google-icon.png b/img/google-icon.png deleted file mode 100644 index f75dc7616..000000000 Binary files a/img/google-icon.png and /dev/null differ diff --git a/img/hot-items-img.png b/img/hot-items-img.png deleted file mode 100644 index 249652e34..000000000 Binary files a/img/hot-items-img.png and /dev/null differ diff --git a/img/ic_facebook.png b/img/ic_facebook.png deleted file mode 100644 index a3e343c77..000000000 Binary files a/img/ic_facebook.png and /dev/null differ diff --git a/img/ic_instagram.png b/img/ic_instagram.png deleted file mode 100644 index c47e044d1..000000000 Binary files a/img/ic_instagram.png and /dev/null differ diff --git a/img/ic_twitter.png b/img/ic_twitter.png deleted file mode 100644 index 3f74b730a..000000000 Binary files a/img/ic_twitter.png and /dev/null differ diff --git a/img/ic_youtube.png b/img/ic_youtube.png deleted file mode 100644 index 874150b0b..000000000 Binary files a/img/ic_youtube.png and /dev/null differ diff --git a/img/kakaotalk-icon.png b/img/kakaotalk-icon.png deleted file mode 100644 index bd7678005..000000000 Binary files a/img/kakaotalk-icon.png and /dev/null differ diff --git a/img/open-eyes.png b/img/open-eyes.png deleted file mode 100644 index 32765f0b2..000000000 Binary files a/img/open-eyes.png and /dev/null differ diff --git a/img/register-img.png b/img/register-img.png deleted file mode 100644 index eb0d6cd26..000000000 Binary files a/img/register-img.png and /dev/null differ diff --git a/img/search-img.png b/img/search-img.png deleted file mode 100644 index 84d8629f1..000000000 Binary files a/img/search-img.png and /dev/null differ diff --git "a/img/\355\201\260\355\214\220\353\213\244\354\226\274\352\265\264.png" "b/img/\355\201\260\355\214\220\353\213\244\354\226\274\352\265\264.png" deleted file mode 100644 index e74e7d911..000000000 Binary files "a/img/\355\201\260\355\214\220\353\213\244\354\226\274\352\265\264.png" and /dev/null differ diff --git a/index.html b/index.html deleted file mode 100644 index 2d27ea61d..000000000 --- a/index.html +++ /dev/null @@ -1,145 +0,0 @@ - - - - - - - - 판다마켓 - - -
-
- - -
-
-
-
-
-

- 일상의 모든 물건을
- 거래해 보세요 -

- 구경하러 가기 -
- 손인사 하는 판다 -
-
-
-
- 핫 아이템 -
-

Hot item

-

- 인기 상품을
- 확인해 보세요 -

-

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

-
-
-
-
-
- 검색 아이템 -
-

Search

-

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

-

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

-
-
-
-
-
- 등록 아이템 -
-

Register

-

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

-

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

-
-
-
-
-
-
-

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

-
- 서브 배너 이미지 -
-
- - - diff --git a/js/inputFocus.js b/js/inputFocus.js deleted file mode 100644 index 6358c62d6..000000000 --- a/js/inputFocus.js +++ /dev/null @@ -1,76 +0,0 @@ -document.addEventListener("DOMContentLoaded", () => { - const inputEmail = document.getElementById("email"); - const inputPassword = document.getElementById("password"); - const emailErrorMessage = document.querySelector(".email__error-message"); - const passwordErrorMessage = document.querySelector( - ".password__error-message" - ); - const loginButton = document.querySelector(".login-button"); - - function disabledLoginButton() { - // display가 block 상태이면 결국 에러메세지가 이미 출력중 - if ( - emailErrorMessage.textContent === "" && - passwordErrorMessage.textContent === "" - ) { - loginButton.disabled = false; - loginButton.style.backgroundColor = "#3692ff"; - } else { - loginButton.disabled = true; - loginButton.style.backgroundColor = "#9ca3af"; - } - } - - // 이메일 유효성 검사 함수 - // 정규식을 활용하여 이메일 형식 검사 및 value값 유무 확인 - function validateEmail() { - const emailValue = inputEmail.value.trim(); - const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; // 이메일 정규식 - - if (!emailValue) { - emailErrorMessage.textContent = "이메일을 입력해주세요."; - emailErrorMessage.style.display = "block"; - inputEmail.classList.add("error"); - } else if (!emailRegex.test(emailValue)) { - emailErrorMessage.textContent = "잘못된 이메일 형식입니다."; - emailErrorMessage.style.display = "block"; - inputEmail.classList.add("error"); - } else { - emailErrorMessage.textContent = ""; - emailErrorMessage.style.display = "block"; - inputEmail.classList.remove("error"); - } - - disabledLoginButton(); - } - - // 비밀번호 8자리이상인지, 비밀번호의 value값 유무 확인하는 함수 - function validatePassword() { - const passwordValue = inputPassword.value.trim(); - - if (!passwordValue) { - passwordErrorMessage.textContent = "비밀번호를 입력해주세요."; - passwordErrorMessage.style.display = "block"; - inputPassword.classList.add("error"); - } else if (passwordValue.length < 8) { - passwordErrorMessage.textContent = "비밀번호를 8자이상 입력해주세요."; - passwordErrorMessage.style.display = "block"; - inputPassword.classList.add("error"); - } else { - passwordErrorMessage.textContent = ""; - passwordErrorMessage.style.display = "none"; - inputPassword.classList.remove("error"); - } - - disabledLoginButton(); - } - - inputEmail.addEventListener("focusout", validateEmail); - inputPassword.addEventListener("focusout", validatePassword); - - // loginButton 클릭 시 /items로 이동 - loginButton.addEventListener("click", (e) => { - e.preventDefault(); - window.location.href = "/items"; - }); -}); diff --git a/js/signup.js b/js/signup.js deleted file mode 100644 index 5b81a73fd..000000000 --- a/js/signup.js +++ /dev/null @@ -1,125 +0,0 @@ -document.addEventListener("DOMContentLoaded", () => { - const inputEmail = document.getElementById("email"); - const inputPassword = document.getElementById("password"); - const emailErrorMessage = document.querySelector(".email__error-message"); - const passwordErrorMessage = document.querySelector( - ".password__error-message" - ); - const inputNickname = document.getElementById("nickname"); - const nicknameErrorMessage = document.querySelector( - ".nickname__error-message" - ); - const checkedPassword = document.getElementById("checked-password"); - const checkedPasswordErrorMessage = document.querySelector( - ".checked-password__error-message" - ); - const signupButton = document.querySelector(".signup-button"); - - // 회원가입 버튼 활성/비활성 시키는 함수 - function disabledLoginButton() { - // display가 block 상태이면 결국 에러메세지가 이미 출력중 - if ( - emailErrorMessage.textContent === "" && - passwordErrorMessage.textContent === "" && - nicknameErrorMessage.textContent === "" && - checkedPasswordErrorMessage.textContent === "" - ) { - signupButton.disabled = false; - signupButton.style.backgroundColor = "#3692ff"; - } else { - signupButton.disabled = true; - signupButton.style.backgroundColor = "#9ca3af"; - } - } - - // 이메일 유효성 검사 함수 - // 정규식을 활용하여 이메일 형식 검사 및 value값 유무 확인 - function validateEmail() { - const emailValue = inputEmail.value.trim(); - const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; // 이메일 정규식 - - if (!emailValue) { - emailErrorMessage.textContent = "이메일을 입력해주세요."; - emailErrorMessage.style.display = "block"; - inputEmail.classList.add("error"); - } else if (!emailRegex.test(emailValue)) { - emailErrorMessage.textContent = "잘못된 이메일 형식입니다."; - emailErrorMessage.style.display = "block"; - inputEmail.classList.add("error"); - } else { - emailErrorMessage.textContent = ""; - emailErrorMessage.style.display = "block"; - inputEmail.classList.remove("error"); - } - - disabledLoginButton(); - } - - // 비밀번호 8자리이상인지, 비밀번호의 value값 유무 확인하는 함수 - function validatePassword() { - const passwordValue = inputPassword.value.trim(); - - if (!passwordValue) { - passwordErrorMessage.textContent = "비밀번호를 입력해주세요."; - passwordErrorMessage.style.display = "block"; - inputPassword.classList.add("error"); - } else if (passwordValue.length < 8) { - passwordErrorMessage.textContent = "비밀번호를 8자이상 입력해주세요."; - passwordErrorMessage.style.display = "block"; - inputPassword.classList.add("error"); - } else { - passwordErrorMessage.textContent = ""; - passwordErrorMessage.style.display = "none"; - inputPassword.classList.remove("error"); - } - - disabledLoginButton(); - } - - //닉네임 값 유무를 확인하는 함수 - function validateNickname() { - const nicknameValue = inputNickname.value.trim(); - - if (!nicknameValue) { - nicknameErrorMessage.textContent = "닉네임을 입력해주세요."; - nicknameErrorMessage.style.display = "block"; - inputNickname.classList.add("error"); - } else { - nicknameErrorMessage.textContent = ""; - nicknameErrorMessage.style.display = "none"; - inputNickname.classList.remove("error"); - } - - disabledLoginButton(); - } - - // 입력된 비밀번호가 일치하는지 확인하는 함수 - function validateCheckedPassword() { - const passwordValue = inputPassword.value.trim(); - const checkedPasswordValue = checkedPassword.value.trim(); - - if (passwordValue !== checkedPasswordValue) { - checkedPasswordErrorMessage.textContent = "비밀번호가 일치하지 않습니다."; - checkedPasswordErrorMessage.style.display = "block"; - checkedPassword.classList.add("error"); - } else { - checkedPasswordErrorMessage.textContent = ""; - checkedPasswordErrorMessage.style.display = "none"; - checkedPassword.classList.remove("error"); - } - console.log(passwordValue, checkedPasswordValue); - disabledLoginButton(); - } - - // 이벤트리스너 - inputEmail.addEventListener("focusout", validateEmail); - inputPassword.addEventListener("focusout", validatePassword); - inputNickname.addEventListener("focusout", validateNickname); - checkedPassword.addEventListener("focusout", validateCheckedPassword); - - // signupButton 클릭 시 /signin로 이동 - signupButton.addEventListener("click", (e) => { - e.preventDefault(); - window.location.href = "/signin"; - }); -}); diff --git a/login.html b/login.html deleted file mode 100644 index 389ecffc2..000000000 --- a/login.html +++ /dev/null @@ -1,80 +0,0 @@ - - - - - - - - 로그인 - - -
-
- - 판다얼굴 - -

판다마켓

 -
-
-
-
- - - -
-
- -
- - 비밀번호 가림 이미지 -
- -
- -
- - -
-
- - - diff --git a/package-lock.json b/package-lock.json index a1e590ee6..3d6312751 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,7 @@ "@testing-library/user-event": "^13.5.0", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-router-dom": "^7.0.1", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" } @@ -3953,6 +3954,11 @@ "@types/node": "*" } }, + "node_modules/@types/cookie": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz", + "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==" + }, "node_modules/@types/eslint": { "version": "8.44.2", "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.44.2.tgz", @@ -14671,6 +14677,52 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.0.1.tgz", + "integrity": "sha512-WVAhv9oWCNsja5AkK6KLpXJDSJCQizOIyOd4vvB/+eHGbYx5vkhcmcmwWjQ9yqkRClogi+xjEg9fNEOd5EX/tw==", + "dependencies": { + "@types/cookie": "^0.6.0", + "cookie": "^1.0.1", + "set-cookie-parser": "^2.6.0", + "turbo-stream": "2.4.0" + }, + "engines": { + "node": ">=20.0.0" + }, + "peerDependencies": { + "react": ">=18", + "react-dom": ">=18" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + } + } + }, + "node_modules/react-router-dom": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.0.1.tgz", + "integrity": "sha512-duBzwAAiIabhFPZfDjcYpJ+f08TMbPMETgq254GWne2NW1ZwRHhZLj7tpSp8KGb7JvZzlLcjGUnqLxpZQVEPng==", + "dependencies": { + "react-router": "7.0.1" + }, + "engines": { + "node": ">=20.0.0" + }, + "peerDependencies": { + "react": ">=18", + "react-dom": ">=18" + } + }, + "node_modules/react-router/node_modules/cookie": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz", + "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==", + "engines": { + "node": ">=18" + } + }, "node_modules/react-scripts": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", @@ -15480,6 +15532,11 @@ "node": ">= 0.8.0" } }, + "node_modules/set-cookie-parser": { + "version": "2.7.1", + "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz", + "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==" + }, "node_modules/setprototypeof": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz", @@ -16512,6 +16569,11 @@ "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" }, + "node_modules/turbo-stream": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/turbo-stream/-/turbo-stream-2.4.0.tgz", + "integrity": "sha512-FHncC10WpBd2eOmGwpmQsWLDoK4cqsA/UT/GqNoaKOQnT8uzhtCbg3EoUDMvqpOSAI0S26mr0rkjzbOO6S3v1g==" + }, "node_modules/type-check": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", diff --git a/package.json b/package.json index 7ff0d6b58..30d5af03c 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "@testing-library/user-event": "^13.5.0", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-router-dom": "^7.0.1", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" }, diff --git a/public/favicon.ico b/public/favicon.ico deleted file mode 100644 index a11777cc4..000000000 Binary files a/public/favicon.ico and /dev/null differ diff --git a/public/index.html b/public/index.html index aa069f27c..21b8800f6 100644 --- a/public/index.html +++ b/public/index.html @@ -1,43 +1,12 @@ - + - - - - - - - React App + 판다 마켓 -
- diff --git a/public/logo192.png b/public/logo192.png deleted file mode 100644 index fc44b0a37..000000000 Binary files a/public/logo192.png and /dev/null differ diff --git a/public/logo512.png b/public/logo512.png deleted file mode 100644 index a4e47a654..000000000 Binary files a/public/logo512.png and /dev/null differ diff --git a/public/manifest.json b/public/manifest.json deleted file mode 100644 index 080d6c77a..000000000 --- a/public/manifest.json +++ /dev/null @@ -1,25 +0,0 @@ -{ - "short_name": "React App", - "name": "Create React App Sample", - "icons": [ - { - "src": "favicon.ico", - "sizes": "64x64 32x32 24x24 16x16", - "type": "image/x-icon" - }, - { - "src": "logo192.png", - "type": "image/png", - "sizes": "192x192" - }, - { - "src": "logo512.png", - "type": "image/png", - "sizes": "512x512" - } - ], - "start_url": ".", - "display": "standalone", - "theme_color": "#000000", - "background_color": "#ffffff" -} diff --git a/public/robots.txt b/public/robots.txt deleted file mode 100644 index e9e57dc4d..000000000 --- a/public/robots.txt +++ /dev/null @@ -1,3 +0,0 @@ -# https://www.robotstxt.org/robotstxt.html -User-agent: * -Disallow: diff --git a/signup.html b/signup.html deleted file mode 100644 index 4363b669d..000000000 --- a/signup.html +++ /dev/null @@ -1,112 +0,0 @@ - - - - - - - - 회원가입 - - -
-
- - 판다얼굴 - -

판다마켓

 -
-
-
-
- - - -
-
- - - -
-
- -
- - 비밀번호 가림 이미지 -
- -
-
- -
- - 비밀번호 가림 이미지 -
- -
- -
- - -
-
- - - diff --git a/src/Api.js b/src/Api.js new file mode 100644 index 000000000..e6979ea58 --- /dev/null +++ b/src/Api.js @@ -0,0 +1,13 @@ +export async function productList({ orderBy = "recent", pageSize = 10 }) { + const query = `page=1&pageSize=${pageSize}&orderBy=${orderBy}`; + const response = await fetch( + `https://panda-market-api.vercel.app/products?${query}` + ); + if (!response.ok) { + throw new Error("제품목록을 가지고 오는데 실패했습니다."); + } + const date = await response.json(); + return date; +} + +export default productList; diff --git a/src/App.css b/src/App.css deleted file mode 100644 index 74b5e0534..000000000 --- a/src/App.css +++ /dev/null @@ -1,38 +0,0 @@ -.App { - text-align: center; -} - -.App-logo { - height: 40vmin; - pointer-events: none; -} - -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } -} - -.App-header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; -} - -.App-link { - color: #61dafb; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} diff --git a/src/App.js b/src/App.js deleted file mode 100644 index 378457572..000000000 --- a/src/App.js +++ /dev/null @@ -1,25 +0,0 @@ -import logo from './logo.svg'; -import './App.css'; - -function App() { - return ( -
-
- logo -

- Edit src/App.js and save to reload. -

- - Learn React - -
-
- ); -} - -export default App; diff --git a/src/App.jsx b/src/App.jsx new file mode 100644 index 000000000..51f561d13 --- /dev/null +++ b/src/App.jsx @@ -0,0 +1,27 @@ +import { Route, Routes, BrowserRouter, Navigate } from "react-router-dom"; +import Header from "./components/Header/Header.jsx"; +import Home from "./pages/Home/Home.jsx"; +import AddItem from "./pages/AddItem/AddItem.jsx"; +import Items from "./pages/Items/Items.jsx"; +import "./css/Reset.css"; +import "./css/Global.css"; + +function App() { + return ( +
+ +
+ + } + > + }> + }> + + +
+ ); +} + +export default App; diff --git a/src/App.test.js b/src/App.test.js deleted file mode 100644 index 1f03afeec..000000000 --- a/src/App.test.js +++ /dev/null @@ -1,8 +0,0 @@ -import { render, screen } from '@testing-library/react'; -import App from './App'; - -test('renders learn react link', () => { - render(); - const linkElement = screen.getByText(/learn react/i); - expect(linkElement).toBeInTheDocument(); -}); diff --git a/src/components/Header/Header.css b/src/components/Header/Header.css new file mode 100644 index 000000000..3b4f7c965 --- /dev/null +++ b/src/components/Header/Header.css @@ -0,0 +1,43 @@ +.header { + height: 70px; + border-bottom: 1px solid #dfdfdf; +} + +.header-nav__container { + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px 200px; +} + +.header-nav { + display: flex; + justify-content: center; + align-items: center; + gap: 32px; +} + +.logo__container { + display: flex; + justify-content: space-between; + align-items: center; + width: 153px; +} + +.logo__text { + font-size: 26px; + font-weight: 700; + line-height: 34px; + color: #3692ff; +} + +.header-menu__container { + display: flex; +} + +.header-menu__text { + padding: 15px 21px; + font-size: 18px; + line-height: 26px; + font-weight: 700; +} diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx new file mode 100644 index 000000000..80535e8c8 --- /dev/null +++ b/src/components/Header/Header.jsx @@ -0,0 +1,24 @@ +import React from "react"; +import PandaImg from "../../img/pandaLogo__header.png"; +import UserImg from "../../img/userImg.png"; +import "./Header.css"; + +export default function Header() { + return ( +
+
+
+
+ 판다 로고 이미지 +

판다마켓

+
+
+

자유게시판

+

중고마켓

+
+
+ 사용자 이미지 +
+
+ ); +} diff --git a/src/components/ItemList/ItemList.css b/src/components/ItemList/ItemList.css new file mode 100644 index 000000000..e68f5dd86 --- /dev/null +++ b/src/components/ItemList/ItemList.css @@ -0,0 +1,14 @@ +.ItemList-ul.flex { + display: flex; + justify-content: center; + align-items: center; + gap: 24px; +} + +.ItemList-ul.grid { + display: grid; + grid-template-columns: repeat(5, 1fr); + justify-content: center; + align-items: center; + gap: 24px; +} diff --git a/src/components/ItemList/ItemList.jsx b/src/components/ItemList/ItemList.jsx new file mode 100644 index 000000000..f02e6b8fa --- /dev/null +++ b/src/components/ItemList/ItemList.jsx @@ -0,0 +1,17 @@ +import React from "react"; +import Products from "../Products/Products.jsx"; +import "./ItemList.css"; + +export default function ItemList({ items, layoutType }) { + return ( + + ); +} diff --git a/src/components/Products/Product.css b/src/components/Products/Product.css new file mode 100644 index 000000000..90ba25a8b --- /dev/null +++ b/src/components/Products/Product.css @@ -0,0 +1,44 @@ +.product { + display: flex; + flex-direction: column; + gap: 16px; +} + +.product-img { + border-radius: 16px; + object-fit: cover; +} + +.product-img.flex { + width: 282px; + height: 282px; +} + +.product-img.grid { + width: 221px; + height: 221px; +} + +.product-name { + font-size: 14px; + font-weight: 500; + line-height: 24px; +} + +.favorite-count__container { + display: flex; + gap: 4px; +} + +.product-price { + font-size: 16px; + font-weight: 700; + line-height: 26px; +} + +.product-favoriteCount { + color: #4b5563; + font-size: 12px; + font-weight: 500; + line-height: 18px; +} diff --git a/src/components/Products/Products.jsx b/src/components/Products/Products.jsx new file mode 100644 index 000000000..99667b855 --- /dev/null +++ b/src/components/Products/Products.jsx @@ -0,0 +1,21 @@ +import React from "react"; +import "./Product.css"; +import heartImg from "../../img/heartIcon.png"; + +export default function Products({ item, layoutType }) { + return ( +
+ 제품 이미지 +

{item.name}

+

{item.price}

+
+ 하트이미지 +

{item.favoriteCount}

+
+
+ ); +} diff --git a/src/css/Global.css b/src/css/Global.css new file mode 100644 index 000000000..e2b2e1679 --- /dev/null +++ b/src/css/Global.css @@ -0,0 +1,20 @@ +.App { + background-color: #fcfcfc; + font-family: "Pretendard-Regular"; +} + +* { + box-sizing: border-box; +} + +@font-face { + font-family: "Pretendard-Regular"; + src: url("https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff") + format("woff"); + font-weight: 400; + font-style: normal; +} + +p { + color: #1f2937; +} diff --git a/css/reset.css b/src/css/Reset.css similarity index 100% rename from css/reset.css rename to src/css/Reset.css diff --git a/src/img/heartIcon.png b/src/img/heartIcon.png new file mode 100644 index 000000000..bd7e864de Binary files /dev/null and b/src/img/heartIcon.png differ diff --git "a/img/\355\214\220\353\213\244\354\226\274\352\265\264.png" b/src/img/pandaLogo__header.png similarity index 100% rename from "img/\355\214\220\353\213\244\354\226\274\352\265\264.png" rename to src/img/pandaLogo__header.png diff --git a/src/img/userImg.png b/src/img/userImg.png new file mode 100644 index 000000000..0844dd1db Binary files /dev/null and b/src/img/userImg.png differ diff --git a/src/index.css b/src/index.css deleted file mode 100644 index ec2585e8c..000000000 --- a/src/index.css +++ /dev/null @@ -1,13 +0,0 @@ -body { - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; -} diff --git a/src/index.js b/src/index.js index d563c0fb1..db7b51ca3 100644 --- a/src/index.js +++ b/src/index.js @@ -1,17 +1,6 @@ -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import App from './App'; -import reportWebVitals from './reportWebVitals'; +import ReactDOM from "react-dom/client"; -const root = ReactDOM.createRoot(document.getElementById('root')); -root.render( - - - -); +import App from "./App"; -// If you want to start measuring performance in your app, pass a function -// to log results (for example: reportWebVitals(console.log)) -// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals -reportWebVitals(); +const root = ReactDOM.createRoot(document.getElementById("root")); +root.render(); diff --git a/src/logo.svg b/src/logo.svg deleted file mode 100644 index 9dfc1c058..000000000 --- a/src/logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/js/login.js b/src/pages/AddItem/AddItem.css similarity index 100% rename from js/login.js rename to src/pages/AddItem/AddItem.css diff --git a/src/pages/AddItem/AddItem.jsx b/src/pages/AddItem/AddItem.jsx new file mode 100644 index 000000000..2d23dfadf --- /dev/null +++ b/src/pages/AddItem/AddItem.jsx @@ -0,0 +1,5 @@ +import React from "react"; + +export default function AddItem() { + return
; +} diff --git a/src/pages/Home/Home.css b/src/pages/Home/Home.css new file mode 100644 index 000000000..5a084e16a --- /dev/null +++ b/src/pages/Home/Home.css @@ -0,0 +1,76 @@ +.products-section { + width: 1200px; + max-width: 1200px; + height: auto; + margin: 0 auto; + padding-top: 24px; +} + +.favorite-products__container, +.all-products__container { + display: flex; + flex-direction: column; + justify-content: center; + gap: 16px; +} + +.favorite-products__container { + padding-bottom: 40px; +} + +.all-products__container { + padding-bottom: 43px; +} + +.products-section__title--best, +.products-section__title--all { + font-size: 20px; + font-weight: 700; + line-height: 32px; + color: #111827; +} + +.all-products__header { + display: flex; + justify-content: space-between; +} + +.all-products__search-container { + display: flex; + gap: 12px; + align-items: center; +} + +.all-products__add-button { + text-decoration: none; + padding: 8px 23px; + height: 42px; + border: none; + border-radius: 8px; + font-size: 16px; + font-weight: 500; + line-height: 26px; + background-color: #3692ff; + color: #f3f4f6; + text-align: center; +} + +.all-products__input { + width: 325px; + height: 42px; + border-radius: 12px; + border: none; + background-color: #f3f4f6; + padding-left: 16px; +} + +.dropDown-products { + width: 130px; + height: 42px; + border: 1px solid #e5e7eb; + border-radius: 12px; +} + +.dropDown-option__recent { + border-top-left-radius: 8px; +} diff --git a/src/pages/Home/Home.jsx b/src/pages/Home/Home.jsx new file mode 100644 index 000000000..44e8a199d --- /dev/null +++ b/src/pages/Home/Home.jsx @@ -0,0 +1,79 @@ +import { useEffect, useState } from "react"; +import productList from "../../Api.js"; +import ItemList from "../../components/ItemList/ItemList.jsx"; +import "./Home.css"; +import { Link } from "react-router-dom"; + +function Home() { + const [allItems, setAllItems] = useState([]); + const [bestItems, setBestItems] = useState([]); + const [selectedOption, setSelectedOption] = useState("최신순"); + const loadAllItems = async () => { + try { + const { list } = await productList({ orderBy: "recent" }); + setAllItems(list); + } catch (error) { + console.error("전체 상품 데이터를 불러오는 중 오류 발생:", error.message); + } + }; + + const loadBestItems = async () => { + try { + const { list } = await productList({ orderBy: "favorite", pageSize: 4 }); + setBestItems(list); + } catch (error) { + console.error( + "베스트 상품 데이터를 불러오는 중 오류 발생:", + error.message + ); + } + }; + + useEffect(() => { + loadAllItems(); + loadBestItems(); + }, []); + + const handleOptionClick = (e) => { + setSelectedOption(e.target.value); + }; + + return ( +
+
+

베스트 상품

+ +
+
+
+

전체 상품

+
+ + + 상품 등록하기 + + +
+
+ +
+
+ ); +} + +export default Home; diff --git a/src/pages/Items/Items.css b/src/pages/Items/Items.css new file mode 100644 index 000000000..e69de29bb diff --git a/src/pages/Items/Items.jsx b/src/pages/Items/Items.jsx new file mode 100644 index 000000000..2bb95a20b --- /dev/null +++ b/src/pages/Items/Items.jsx @@ -0,0 +1,5 @@ +import React from "react"; + +export default function Items() { + return
; +} diff --git a/src/reportWebVitals.js b/src/reportWebVitals.js deleted file mode 100644 index 5253d3ad9..000000000 --- a/src/reportWebVitals.js +++ /dev/null @@ -1,13 +0,0 @@ -const reportWebVitals = onPerfEntry => { - if (onPerfEntry && onPerfEntry instanceof Function) { - import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { - getCLS(onPerfEntry); - getFID(onPerfEntry); - getFCP(onPerfEntry); - getLCP(onPerfEntry); - getTTFB(onPerfEntry); - }); - } -}; - -export default reportWebVitals; diff --git a/src/setupTests.js b/src/setupTests.js deleted file mode 100644 index 8f2609b7b..000000000 --- a/src/setupTests.js +++ /dev/null @@ -1,5 +0,0 @@ -// jest-dom adds custom jest matchers for asserting on DOM nodes. -// allows you to do things like: -// expect(element).toHaveTextContent(/react/i) -// learn more: https://github.com/testing-library/jest-dom -import '@testing-library/jest-dom';