diff --git a/sprint1/index.html b/sprint1/index.html deleted file mode 100644 index 08ec4fc8..00000000 --- a/sprint1/index.html +++ /dev/null @@ -1,84 +0,0 @@ - - - - - - 판다마켓 - - - -
-
- - 로그인 -
-
-
- -
-
- Img_home_01 -
- Hot item -

인기 상품을 확인해 보세요

-

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

-
-
-
-
-
- Img_home_02 -
- Search -

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

-

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

-
-
-
-
-
- -
- Register -

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

-

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

-
-
-
- -
- - - \ No newline at end of file diff --git a/sprint1/style.css b/sprint1/style.css deleted file mode 100644 index e6846e1c..00000000 --- a/sprint1/style.css +++ /dev/null @@ -1,283 +0,0 @@ -/* - 2025.04.01 - 스프린트 미션 1 - 박연희 -*/ - -* { - box-sizing: border-box; - margin: 0; - padding: 0; - text-decoration: none; -} -a { - color: inherit; -} - -/* 폰트 */ -@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; -} - -/* 버튼 btn */ -.btn { - cursor: pointer; - display: inline-block; - text-align: center; - white-space: nowrap; -} -.btn_large { - padding: 12px 124px; - border-radius: 40px; - font-size: 20px; -} -.btn_medium { - padding: 11px 71px; - border-radius: 40px; - font-size: 18px; -} -.btn_small { - padding: 8px 23px; - border-radius: 8px; - font-size: 16px; -} -.btn-color1 { - color: #ffffff; - background-color: #3692FF; -} - -/* 기본넓이 */ -.default-width { - max-width: 1920px; - margin: 0 auto; - transition: 0.5s; -} - -/* body */ -body { - font-family: 'Pretendard-Regular'; - background-color: #ffffff; - color: #374151; - font-weight: 400; -} - -/* header */ -.header-inner { - display: flex; - justify-content: space-between; - align-items: center; - height: 70px; -} -.logo-mobile { - display: none; -} - -/* section */ -section { - display: flex; - justify-content: center; - align-items: center; - padding: 0 25px; -} -section h1 { - font-size: 40px; - line-height: 1.5; - max-width: 320px; - word-break: keep-all; -} -section img { - min-width: 100px; - max-width: 588px; - width: 100%; -} - -/* main > banner-section */ -.banner-section { - background-color: #CFE5FF; -} -.banner-section .item { - margin-top: 100px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; -} -.banner-section .btn { - margin-top: 32px; -} -.banner-section img { - margin-top: 200px; -} - -/* main > content-section */ -.content-section { - height: 720px; -} -.content-box { - display: flex; - justify-content: center; - align-items: center; - border-radius: 13px; - background-color: #FCFCFC; - gap: 25px; -} -.content-box.reverse { - flex-direction: row-reverse; - text-align: right; -} -.content-box h1 { - margin-bottom: 24px; -} -.content-box p { - color: #374151; - font-size: 24px; - line-height: 1.3; - max-width: 320px; - word-break: keep-all; -} -.content-badge { - display: inline-block; - margin-bottom: 12px; - color: #3692FF; - font-size: 18px; - font-weight: bold; -} - -/* footer */ -footer { - height: 160px; - background-color: #111827; - color: #ffffff; - font-size: 16px; -} -footer .default-width { - display: flex; - justify-content: space-between; - flex-wrap: wrap; - gap: 20px; - padding-top: 32px; -} -footer .copyRight { - color: #9CA3AF; - font-weight: 400; -} -footer .support-btn, -footer .sns-btn { - display: flex; -} -footer .support-btn { - color: #E5E7EB; - gap: 15px; -} -footer .sns-btn { - text-align: right; - gap: 12px; -} - -/* 반응형 */ -@media (max-width: 1950px) { - .default-width { - padding: 0 200px; - } -} -@media (max-width: 1350px) { - .default-width { - padding: 0 25px; - } -} -/* 타블렛 */ -@media (max-width: 768px) { - /* section */ - section { - background-color: #FCFCFC; - } - section h1 { - max-width: none; - } - /* section > banner-section */ - section.banner-section, - .content-box.reverse { - flex-direction: column; - } - section.banner-section h1{ - text-align: center; - } - /* section > content-box */ - .content-box { - flex-direction: column; - align-items: normal; - } - .content-box h1 { - font-size: 32px; - } - .content-box p { - font-size: 18px; - } - .content-box.reverse p { - float: right; - } -} - -@media (max-width: 460px) { - /* footer */ - footer p { - order: 3; - } - footer .support-btn { - order: 1; - } - footer .sns-btn { - order: 2; - } -} - -@media (max-width: 375px) { - .default-width, - section { - padding: 0 18px; - } - /* header */ - .logo-img { - display: none; - } - .logo-mobile { - display: block; - } - /* section > banner-section */ - section.banner-section h1 { - font-size: 32px; - max-width: 240px; - } - .banner-section .btn { - margin-top: 18px; - } - .banner-section img { - margin-top: 120px; - } - /* section > content-section */ - .content-section { - height: 450px; - } - .btn_large { - padding: 11px 71px; - border-radius: 40px; - font-size: 18px; - } - .content-box h1 { - font-size: 24px; - margin-bottom: 16px; - } - .content-badge, - .content-box p { - font-size: 16px; - } - .content-badge { - margin-bottom: 8px; - } - .content-box p { - max-width: 200px; - } -} \ No newline at end of file diff --git a/sprint2/images/Img_home_01.png b/sprint2/images/Img_home_01.png deleted file mode 100644 index 5c01d637..00000000 Binary files a/sprint2/images/Img_home_01.png and /dev/null differ diff --git a/sprint2/images/Img_home_02.png b/sprint2/images/Img_home_02.png deleted file mode 100644 index df1ed620..00000000 Binary files a/sprint2/images/Img_home_02.png and /dev/null differ diff --git a/sprint2/images/Img_home_03.png b/sprint2/images/Img_home_03.png deleted file mode 100644 index 3a2f16e3..00000000 Binary files a/sprint2/images/Img_home_03.png and /dev/null differ diff --git a/sprint2/images/Img_home_bottom.png b/sprint2/images/Img_home_bottom.png deleted file mode 100644 index ca4ffb43..00000000 Binary files a/sprint2/images/Img_home_bottom.png and /dev/null differ diff --git a/sprint2/images/Img_home_top.png b/sprint2/images/Img_home_top.png deleted file mode 100644 index 11a34727..00000000 Binary files a/sprint2/images/Img_home_top.png and /dev/null differ diff --git a/sprint2/images/Img_inquiry_empty.png b/sprint2/images/Img_inquiry_empty.png deleted file mode 100644 index 3b9a7c6b..00000000 Binary files a/sprint2/images/Img_inquiry_empty.png and /dev/null differ diff --git a/sprint2/images/Img_reply_empty.png b/sprint2/images/Img_reply_empty.png deleted file mode 100644 index c845cc10..00000000 Binary files a/sprint2/images/Img_reply_empty.png and /dev/null differ diff --git a/sprint2/images/ic_facebook.png b/sprint2/images/ic_facebook.png deleted file mode 100644 index 8a99d0de..00000000 Binary files a/sprint2/images/ic_facebook.png and /dev/null differ diff --git a/sprint2/images/ic_instagram.png b/sprint2/images/ic_instagram.png deleted file mode 100644 index 774ba83f..00000000 Binary files a/sprint2/images/ic_instagram.png and /dev/null differ diff --git a/sprint2/images/ic_twitter.png b/sprint2/images/ic_twitter.png deleted file mode 100644 index 75f85548..00000000 Binary files a/sprint2/images/ic_twitter.png and /dev/null differ diff --git a/sprint2/images/ic_youtube.png b/sprint2/images/ic_youtube.png deleted file mode 100644 index 19e6e6ce..00000000 Binary files a/sprint2/images/ic_youtube.png and /dev/null differ diff --git a/sprint2/images/img_default.png b/sprint2/images/img_default.png deleted file mode 100644 index be9f57c1..00000000 Binary files a/sprint2/images/img_default.png and /dev/null differ diff --git a/sprint2/images/img_logo.png b/sprint2/images/img_logo.png deleted file mode 100644 index 64228065..00000000 Binary files a/sprint2/images/img_logo.png and /dev/null differ diff --git a/sprint2/images/img_logo_m.png b/sprint2/images/img_logo_m.png deleted file mode 100644 index 386b9c09..00000000 Binary files a/sprint2/images/img_logo_m.png and /dev/null differ diff --git a/sprint2/css/common.css b/sprint4/css/common.css similarity index 57% rename from sprint2/css/common.css rename to sprint4/css/common.css index 77f9fa9a..f99d9cb8 100644 --- a/sprint2/css/common.css +++ b/sprint4/css/common.css @@ -10,13 +10,13 @@ --spacing-left-right-16: 0 18px; /* 색상 */ - --color-white: #ffffff; + --color-white: #fff; --color-Primary-100: #3692FF; --color-Primary-200: #1967D6; --color-Primary-300: #1251AA; --color-error-red: #F74747; --color-gray900: #111827; - --color-gray800: #1F2937; + --color-gray800: #1F2937; --color-gray700: #374151; --color-gray600: #4B5563; --color-gray500: #6B7280; @@ -26,7 +26,7 @@ --color-gray100: #F9FAFB; --color-background-skyblue: #CFE5FF; --color-background-content: #FCFCFC; - --color-background-white: #ffffff; + --color-background-white: #fff; /* 폰트 사이즈 */ --font-size-xxs: 12px; @@ -40,7 +40,6 @@ --font-size-title-lg: 40px; /* 굵기 */ - --font-weight-400: 400; --font-weight-500: 500; --font-weight-600: 600; --font-weight-700: 700; @@ -52,38 +51,26 @@ --border-radius-xs: 8px; } -/* body */ body { font-family: 'Pretendard'; background-color: var(--color-background-white); color: var(--color-gray700); - font-weight: 400; } -/* label input */ label { font-weight: var(--font-weight-700); font-size: var(--font-size-lg); } + input { padding: 14px 24px; font-size: var(--font-size-md); background-color: var(--color-gray200); - border: none; border-radius: var(--border-radius-sm); } -/* 비밀번호 숨김, 보이기 이미지 */ -input.visibility__toggle--off { - padding: 14px 48px 14px 24px; - background-image: url(../images/btn_visibility_off_24px.png); - background-repeat: no-repeat; - background-position: calc(100% - 24px); -} -input.visibility__toggle--on { - padding: 14px 48px 14px 24px; - background-image: url(../images/btn_visibility_on_24px.png); - background-repeat: no-repeat; - background-position: calc(100% - 24px); + +input::placeholder { + color: var(--color-gray400); } /* 버튼 btn */ @@ -93,26 +80,35 @@ input.visibility__toggle--on { text-align: center; white-space: nowrap; } + .btn--large { padding: 12px 124px; border-radius: var(--border-radius-lg); font-size: var(--font-size-xl); } + .btn--medium { padding: 11px 71px; border-radius: var(--border-radius-lg); font-size: var(--font-size-lg); } + .btn--small { padding: 8px 23px; border-radius: var(--border-radius-xs); font-size: var(--font-size-md); } + .btn--color1 { color: #ffffff; background-color: var(--color-Primary-100); } +button:disabled { + background-color: var(--color-gray400); + cursor: auto; +} + /* 기본넓이 */ .default-width { max-width: 1920px; @@ -126,44 +122,25 @@ input.visibility__toggle--on { justify-content: center; align-items: center; } + .flex-reverse { flex-direction: row-reverse; text-align: right; } -.fl{float: left !important;} -.fr{float: right !important;} - -.mt0{margin-top:0 !important} -.mt10{margin-top:10px !important} -.mt20{margin-top:20px !important} -.mt30{margin-top:30px !important} -.mt40{margin-top:40px !important} -.mt50{margin-top:50px !important} - -.mb0{margin-bottom:0 !important} -.mb10{margin-bottom:10px !important} -.mb20{margin-bottom:20px !important} -.mb24{margin-bottom:24px !important} -.mb30{margin-bottom:30px !important} -.mb40{margin-bottom:40px !important} -.mb50{margin-bottom:50px !important} - -.mr0{margin-right:0 !important} -.mr10{margin-right:10px !important} -.mr20{margin-right:20px !important} -.mr30{margin-right:30px !important} -.mr40{margin-right:40px !important} -.mr50{margin-right:50px !important} - -.ml0{margin-left:0 !important} -.ml10{margin-left:10px !important} -.ml20{margin-left:20px !important} -.ml30{margin-left:30px !important} -.ml40{margin-left:40px !important} -.ml50{margin-left:50px !important} - -.pt0{padding-top:0 !important} -.pl0{padding-left:0 !important} -.pr0{padding-right:0 !important} -.pb0{padding-bottom:0 !important} \ No newline at end of file +.mt0{margin-top:0} +.mt10{margin-top:10px} +.mt20{margin-top:20px} + +.mb0{margin-bottom:0} +.mb10{margin-bottom:10px} +.mb20{margin-bottom:20px} +.mb24{margin-bottom:24px} + +.mr0{margin-right:0} +.mr10{margin-right:10px} +.mr20{margin-right:20px} + +.ml0{margin-left:0} +.ml10{margin-left:10px} +.ml20{margin-left:20px} \ No newline at end of file diff --git a/sprint2/css/font.css b/sprint4/css/font.css similarity index 99% rename from sprint2/css/font.css rename to sprint4/css/font.css index 2b63a6ea..baf897fc 100644 --- a/sprint2/css/font.css +++ b/sprint4/css/font.css @@ -13,6 +13,7 @@ url('../font/Pretendard-Bold.woff2') format('woff2'), url('../font/Pretendard-Bold.woff') format('woff'); } + @font-face { font-family: 'Pretendard'; font-style: normal; @@ -22,6 +23,7 @@ url('../font/Pretendard-SemiBold.woff2') format('woff2'), url('../font/Pretendard-SemiBold.woff') format('woff'); } + @font-face { font-family: 'Pretendard'; font-style: normal; @@ -31,6 +33,7 @@ url('../font/Pretendard-Medium.woff2') format('woff2'), url('../font/Pretendard-Medium.woff') format('woff'); } + @font-face { font-family: 'Pretendard'; font-style: normal; diff --git a/sprint4/css/layout-auth.css b/sprint4/css/layout-auth.css new file mode 100644 index 00000000..87c51e6e --- /dev/null +++ b/sprint4/css/layout-auth.css @@ -0,0 +1,117 @@ +/* + 레이아웃 스타일 / 로그인 회원가입 + layout_login +*/ + +/* 전체 사이즈 */ +body { + padding: 16px; +} + +.auth-page { + width: 100%; + max-width: 400px; + margin: 0 auto; + padding-top: 150px; + color: var(--color-gray800); +} + +/* 헤더와 헤더 로고 */ +.auth__header { + margin-bottom: 40px; + text-align: center; +} + +.auth__logo a { + display: inline-block; +} + +.auth__logo-img { + margin: auto; + width: 198px; +} + +/* 로그인과 회원가입 input 박스 */ +.auth__input-group { + position: relative; + display: flex; + flex-direction: column; + gap: 16px; + margin-bottom: 24px; +} + +.password__toggle { + position: absolute; + right: 16px; + top: 51px; + width: 24px; + height: 24px; + background-image: url(../images/btn_visibility_off_24px.png); + cursor: pointer; +} + +.password__toggle.on { + background-image: url(../images/btn_visibility_on_24px.png); +} + +/* 인풋 유효성 검사 */ +.auth__input.invalid { + border: 1px solid var(--color-error-red); +} +.auth__input.valid { + border: 1px solid var(--color-Primary-100); +} +span.invalid { + color: var(--color-error-red); +} + +/* 로그인 버튼 */ +.auth__btn { + width: 100%; +} + +/* 간편 로그인 영역 */ +.auth__simple-login { + display: grid; + grid-template: 1fr / auto 1fr auto auto; + gap: 16px; + align-items: center; + padding: 16px 23px; + background-color: #E6F2FF; + border-radius: var(--border-radius-xs); +} + +.auth__simple-login-title { + font-size: var(--font-size-md); + font-weight: var(--font-weight-500); + grid-column: 1 / span 2; +} + +/* auth__signup 회원가입 & 로그인 페이지 이동 */ +.auth__signup { + text-align: center; + font-size: var(--font-size-sm); + font-weight: var(--font-weight-500); +} + +.auth__signup-button { + margin-left: 5px; + color: var(--color-Primary-100); + text-decoration: underline; +} + + +/* 타블렛 (768px~) */ +@media (min-width: 768px) { + body { + padding: 0; + } + + .auth-page { + max-width: 640px; + } + + .auth__logo-img { + width: auto; + } +} \ No newline at end of file diff --git a/sprint2/css/layout.css b/sprint4/css/layout-home.css similarity index 72% rename from sprint2/css/layout.css rename to sprint4/css/layout-home.css index 04a80076..d9df48cc 100644 --- a/sprint2/css/layout.css +++ b/sprint4/css/layout-home.css @@ -1,5 +1,5 @@ /* - 레이아웃 스타일 + 레이아웃 스타일 / 홈 layout_main */ @@ -15,10 +15,10 @@ background-color: var(--color-background-white); z-index: 99; } + .header__logo-img { - display: none; -} -.header__logo-img--mobile { + width: auto; + height: auto; display: block; } @@ -26,6 +26,7 @@ .main { padding-top: 70px; } + /* 메인 베너 */ .main__banner { flex-direction: column; @@ -35,25 +36,30 @@ padding: var(--spacing-left-right-16); gap: 50px; } + .banner__content { flex-direction: column; margin-top: 80px; width: 240px; } + .banner__title { margin-bottom: 18px; text-align: center; font-size: var(--font-size-title-md); word-break: keep-all; } + /* 컨텐츠 영역 */ .main__section { padding: 0 16px 45px; } + .content__box { display: flex; flex-direction: column; } + .content__badge { padding-top: 24px; display: inline-block; @@ -61,12 +67,14 @@ font-size: var(--font-size-md); font-weight: var(--font-weight-700); } + .content__title { padding: 8px 0px 16px; font-size: var(--font-size-xxl); font-weight: var(--font-weight-700); word-break: keep-all; } + .content__desc { max-width: 200px; line-height: 1.3; @@ -74,6 +82,7 @@ font-weight: var(--font-weight-500); word-break: keep-all; } + .flex-reverse .content__desc { float: right; } @@ -91,57 +100,45 @@ background-color: var(--color-gray900); font-size: var(--font-size-md); } + .footer__copyright { color: var(--color-gray400); - font-weight: var(--font-weight-400); } + .footer__support, .footer__sns { display: flex; } + .footer__support { color: var(--color-gray300); gap: 15px; } + .footer__sns { text-align: right; gap: 12px; } + .footer__copyright { order: 3; } + .footer__support { order: 1; } + .footer__sns { order: 2; } /*** 반응형 ***/ -/* 모바일 푸터 (768px~) */ -@media (min-width: 460px) { - .footer__copyright { - order: 1; - } - .footer__support { - order: 2; - } - .footer__sns { - order: 3; - } -} /* 타블렛 (768px~) */ @media (min-width: 768px) { /* 헤더 영역 */ - .header__inner { + .header { padding: var(--spacing-left-right-24); } - .header__logo-img { - display: block; - } - .header__logo-img--mobile { - display: none; - } /* 배너 영역 */ .main__banner { @@ -149,16 +146,20 @@ padding: var(--spacing-left-right-24); gap: 150px; } + .banner__content { width: auto; } + .banner__title { font-size: var(--font-size-title-lg); } + .btn--medium { padding: 12px 124px; font-size: var(--font-size-xl); } + .banner--bottom .banner__content { margin-top: 150px; width: 295px; @@ -168,12 +169,15 @@ .main__section { padding: 0 24px 55px; } + .content__badge { font-size: var(--font-size-lg); } + .content__title { font-size: var(--font-size-title-md); } + .content__desc { font-size: var(--font-size-lg); } @@ -183,15 +187,28 @@ padding: var(--spacing-left-right-24); padding-top: 32px; } + + .footer__copyright { + order: 1; + } + + .footer__support { + order: 2; + } + + .footer__sns { + order: 3; + } } -/* 테스크탑 (950px~) */ -@media (min-width: 950px) { +/* 테스크탑 (1200px~) */ +@media (min-width: 1200px) { /* 컨텐츠 영역 이미지 */ .home-section img { min-width: 100px; max-width: 588px; width: 100%; } + .banner__title, .content__title { font-size: var(--font-size-title-lg); @@ -204,9 +221,11 @@ justify-content: center; gap: 0; } + .banner__title { text-align: left; } + .banner__image { margin-top: 200px; } @@ -217,6 +236,7 @@ justify-content: center; align-items: center; } + .content__box { flex-direction: row; justify-content: center; @@ -225,70 +245,8 @@ border-radius: var(--border-radius-sm); gap: 30px; } + .content__box.flex-reverse { flex-direction: row-reverse; } - -} - -/* - 레이아웃 스타일 - layout_login -*/ - -/* 전체 사이즈 */ -.auth-page { - color: var(--color-gray800); - max-width: 640px; - margin: 0 auto; - padding-top: 150px; -} - -/* 헤더와 헤더 로고 */ -.auth__header { - margin-bottom: 40px; -} -.auth__logo-img { - margin: auto; -} - -/* 로그인과 회원가입 input 박스 */ -.auth__input-group { - display: flex; - flex-direction: column; - gap: 16px; - margin-bottom: 24px; -} - -/* 로그인 버튼 */ -.auth__btn--login { - width: 100%; -} - -/* 간편 로그인 영역 */ -.auth__simple-login { - display: grid; - grid-template: 1fr / auto 1fr auto auto; - gap: 16px; - align-items: center; - padding: 16px 23px; - background-color: #E6F2FF; - border-radius: var(--border-radius-xs); -} -.auth__simple-login-title { - font-size: var(--font-size-md); - font-weight: var(--font-weight-500); - grid-column: 1 / span 2; -} - -/* auth__signup 회원가입 & 로그인 페이지 이동 */ -.auth__signup { - text-align: center; - font-size: var(--font-size-sm); - font-weight: var(--font-weight-500); -} -.auth__signup-button { - margin-left: 5px; - color: var(--color-Primary-100); - text-decoration: underline; } \ No newline at end of file diff --git a/sprint2/css/reset.css b/sprint4/css/reset.css similarity index 93% rename from sprint2/css/reset.css rename to sprint4/css/reset.css index 4910ef2a..22fe5aa8 100644 --- a/sprint2/css/reset.css +++ b/sprint4/css/reset.css @@ -1,5 +1,4 @@ /* - 2025 04 11 스타일 초기화 */ @@ -60,8 +59,14 @@ a { color: inherit; text-decoration: none; } + button { border: none; color: inherit; background-color: inherit; +} + +input { + outline: none; + border: none; } \ No newline at end of file diff --git a/sprint2/css/style.css b/sprint4/css/style.css similarity index 54% rename from sprint2/css/style.css rename to sprint4/css/style.css index ad8d60b6..74c5242d 100644 --- a/sprint2/css/style.css +++ b/sprint4/css/style.css @@ -1,5 +1,4 @@ /* - 2025.04.11 스프린트 미션 박연희 */ @@ -7,5 +6,4 @@ @import "reset.css"; /* 스타일 초기화 */ @import "font.css"; /* 폰트 */ -@import "common.css"; /* 공통 전역 스타일 */ -@import "layout.css"; /* 레이아웃 스타일 */ \ No newline at end of file +@import "common.css"; /* 공통 전역 스타일 */ \ No newline at end of file diff --git a/sprint2/font/Pretendard-Bold.woff b/sprint4/font/Pretendard-Bold.woff similarity index 100% rename from sprint2/font/Pretendard-Bold.woff rename to sprint4/font/Pretendard-Bold.woff diff --git a/sprint2/font/Pretendard-Bold.woff2 b/sprint4/font/Pretendard-Bold.woff2 similarity index 100% rename from sprint2/font/Pretendard-Bold.woff2 rename to sprint4/font/Pretendard-Bold.woff2 diff --git a/sprint2/font/Pretendard-Medium.woff b/sprint4/font/Pretendard-Medium.woff similarity index 100% rename from sprint2/font/Pretendard-Medium.woff rename to sprint4/font/Pretendard-Medium.woff diff --git a/sprint2/font/Pretendard-Medium.woff2 b/sprint4/font/Pretendard-Medium.woff2 similarity index 100% rename from sprint2/font/Pretendard-Medium.woff2 rename to sprint4/font/Pretendard-Medium.woff2 diff --git a/sprint2/font/Pretendard-Regular.woff b/sprint4/font/Pretendard-Regular.woff similarity index 100% rename from sprint2/font/Pretendard-Regular.woff rename to sprint4/font/Pretendard-Regular.woff diff --git a/sprint2/font/Pretendard-Regular.woff2 b/sprint4/font/Pretendard-Regular.woff2 similarity index 100% rename from sprint2/font/Pretendard-Regular.woff2 rename to sprint4/font/Pretendard-Regular.woff2 diff --git a/sprint2/font/Pretendard-SemiBold.woff b/sprint4/font/Pretendard-SemiBold.woff similarity index 100% rename from sprint2/font/Pretendard-SemiBold.woff rename to sprint4/font/Pretendard-SemiBold.woff diff --git a/sprint2/font/Pretendard-SemiBold.woff2 b/sprint4/font/Pretendard-SemiBold.woff2 similarity index 100% rename from sprint2/font/Pretendard-SemiBold.woff2 rename to sprint4/font/Pretendard-SemiBold.woff2 diff --git a/sprint1/images/Img_home_01.png b/sprint4/images/Img_home_01.png similarity index 100% rename from sprint1/images/Img_home_01.png rename to sprint4/images/Img_home_01.png diff --git a/sprint1/images/Img_home_02.png b/sprint4/images/Img_home_02.png similarity index 100% rename from sprint1/images/Img_home_02.png rename to sprint4/images/Img_home_02.png diff --git a/sprint1/images/Img_home_03.png b/sprint4/images/Img_home_03.png similarity index 100% rename from sprint1/images/Img_home_03.png rename to sprint4/images/Img_home_03.png diff --git a/sprint1/images/Img_home_bottom.png b/sprint4/images/Img_home_bottom.png similarity index 100% rename from sprint1/images/Img_home_bottom.png rename to sprint4/images/Img_home_bottom.png diff --git a/sprint1/images/Img_home_top.png b/sprint4/images/Img_home_top.png similarity index 100% rename from sprint1/images/Img_home_top.png rename to sprint4/images/Img_home_top.png diff --git a/sprint1/images/Img_inquiry_empty.png b/sprint4/images/Img_inquiry_empty.png similarity index 100% rename from sprint1/images/Img_inquiry_empty.png rename to sprint4/images/Img_inquiry_empty.png diff --git a/sprint1/images/Img_reply_empty.png b/sprint4/images/Img_reply_empty.png similarity index 100% rename from sprint1/images/Img_reply_empty.png rename to sprint4/images/Img_reply_empty.png diff --git a/sprint2/images/btn_visibility_off_24px.png b/sprint4/images/btn_visibility_off_24px.png similarity index 100% rename from sprint2/images/btn_visibility_off_24px.png rename to sprint4/images/btn_visibility_off_24px.png diff --git a/sprint2/images/btn_visibility_on_24px.png b/sprint4/images/btn_visibility_on_24px.png similarity index 100% rename from sprint2/images/btn_visibility_on_24px.png rename to sprint4/images/btn_visibility_on_24px.png diff --git a/sprint1/images/ic_facebook.png b/sprint4/images/ic_facebook.png similarity index 100% rename from sprint1/images/ic_facebook.png rename to sprint4/images/ic_facebook.png diff --git a/sprint2/images/ic_google.png b/sprint4/images/ic_google.png similarity index 100% rename from sprint2/images/ic_google.png rename to sprint4/images/ic_google.png diff --git a/sprint1/images/ic_instagram.png b/sprint4/images/ic_instagram.png similarity index 100% rename from sprint1/images/ic_instagram.png rename to sprint4/images/ic_instagram.png diff --git a/sprint2/images/ic_kakao.png b/sprint4/images/ic_kakao.png similarity index 100% rename from sprint2/images/ic_kakao.png rename to sprint4/images/ic_kakao.png diff --git a/sprint1/images/ic_twitter.png b/sprint4/images/ic_twitter.png similarity index 100% rename from sprint1/images/ic_twitter.png rename to sprint4/images/ic_twitter.png diff --git a/sprint1/images/ic_youtube.png b/sprint4/images/ic_youtube.png similarity index 100% rename from sprint1/images/ic_youtube.png rename to sprint4/images/ic_youtube.png diff --git a/sprint1/images/img_default.png b/sprint4/images/img_default.png similarity index 100% rename from sprint1/images/img_default.png rename to sprint4/images/img_default.png diff --git a/sprint2/images/img_login.png b/sprint4/images/img_login.png similarity index 100% rename from sprint2/images/img_login.png rename to sprint4/images/img_login.png diff --git a/sprint1/images/img_logo.png b/sprint4/images/img_logo.png similarity index 100% rename from sprint1/images/img_logo.png rename to sprint4/images/img_logo.png diff --git a/sprint1/images/img_logo_m.png b/sprint4/images/img_logo_m.png similarity index 100% rename from sprint1/images/img_logo_m.png rename to sprint4/images/img_logo_m.png diff --git a/sprint2/index.html b/sprint4/index.html similarity index 66% rename from sprint2/index.html rename to sprint4/index.html index c99b7a55..4805ad9d 100644 --- a/sprint2/index.html +++ b/sprint4/index.html @@ -1,17 +1,25 @@ + + + + + 판다마켓 + +
로그인 @@ -64,16 +72,21 @@

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

+
+ Privacy Policy + FAQ +
+
+ facebook 로고 + twitter 로고 + youtube 로고 + instagram 로고 +
+ + \ No newline at end of file diff --git a/sprint2/login.html b/sprint4/login.html similarity index 66% rename from sprint2/login.html rename to sprint4/login.html index 13fdd34c..5fa86254 100644 --- a/sprint2/login.html +++ b/sprint4/login.html @@ -1,11 +1,14 @@ + 판다마켓 + +
@@ -16,31 +19,37 @@
-
+
- +
- + +
- +
- -
-
+
+ + \ No newline at end of file diff --git a/sprint4/script/auth.js b/sprint4/script/auth.js new file mode 100644 index 00000000..7b2c7e8e --- /dev/null +++ b/sprint4/script/auth.js @@ -0,0 +1,150 @@ +// 로그인, 회원가입 유효성 검사 +const DOM = { + form: document.getElementById('auth__form'), + emailInput: document.getElementById('email'), + nickNameInput: document.getElementById('nickname'), + passwordInput: document.getElementById('password'), + passwordConfirmInput: document.getElementById('password-confirm'), + authBtn: document.querySelector('.auth__btn'), +} + +// input 에러 메세지 삭제 +function clearError(input){ + const inputEl = input.nextElementSibling; + if(inputEl && inputEl.classList.contains('invalid') ){ + inputEl.remove(); + } + input.classList.remove('invalid'); +} + +// input 에러 메세지 추가 +function showError(input, text){ + clearError(input); + const span = document.createElement('span'); + span.className = 'invalid'; + span.textContent = text; + input.insertAdjacentElement('afterend', span); + input.classList.add('invalid'); +} + +// input 값 체크 +const validationStatus = { + email: false, + nickName: false, + password: false, + passwordConfirm: false, +}; + +// input 유효성 검사 +function validateInput(inputEl) { + inputEl.value = inputEl.value.trim() + if (inputEl.classList.contains('input--email')) { + if (!inputEl.value) { + showError(inputEl, "이메일을 입력해주세요."); + validationStatus.email = false; + } else if(!/^\S+@\S+\.\S+$/.test(inputEl.value)) { + showError(inputEl, "올바른 이메일 형식이 아닙니다."); + validationStatus.email = false; + } else { + clearError(inputEl); + validationStatus.email = true; + } + } else if (inputEl.classList.contains('input--nickname')) { + if (!inputEl.value) { + inputEl.classList.remove('valid'); + showError(inputEl, "닉네임을 입력해주세요."); + validationStatus.nickName = false; + } else { + clearError(inputEl); + inputEl.classList.add('valid'); + validationStatus.nickName = true; + } + } else if (inputEl.classList.contains('input--password')) { + if (!inputEl.value) { + showError(inputEl, "비밀번호를 입력해주세요."); + validationStatus.password = false; + } else if(inputEl.value.length < 8) { + showError(inputEl, "비밀번호는 최소 8자 이상이어야 합니다."); + validationStatus.password = false; + } else { + clearError(inputEl); + validationStatus.password = true; + } + } else if (inputEl.classList.contains('input--password-confirm')) { + const passwordValue = DOM.passwordInput.value; + if(!inputEl.value || inputEl.value !== passwordValue){ + showError(inputEl, "비밀번호가 일치하지 않습니다."); + validationStatus.passwordConfirm = false; + } else { + clearError(inputEl); + validationStatus.passwordConfirm = true; + } + } + authBtnValidity(); +} + +// 비밀번호 보이기 토글 +function visibilityPassword(form){ + const toggleBtnAll = form.querySelectorAll('.password__toggle'); + for(const toggleBtn of toggleBtnAll) { + toggleBtn.addEventListener('click', () => { + let input = toggleBtn.parentElement.querySelector('input') + if (!input) return; // 토글 버튼에 input이 없을 경우 중단됨 + + const type = input.type === 'password' ? 'text' : 'password'; + input.type = type; + toggleBtn.classList.toggle('on'); + }); + } +} + +const singUpInputPage = DOM.passwordConfirmInput && DOM.nickNameInput; + +// 버튼 활성화 +function authBtnValidity(){ + const singInValidation = validationStatus.email && validationStatus.password; + const singUpValidation = validationStatus.passwordConfirm && validationStatus.nickName; + + if(singUpInputPage != null){ + // 회원가입 + DOM.authBtn.disabled = !(singInValidation && singUpValidation); + }else{ + // 로그인 + DOM.authBtn.disabled = !(singInValidation); + } +} + +// 페이지 초기화 함수 +function initPage() { + const inputs = [DOM.emailInput, DOM.passwordInput]; // 로그인 + if (DOM.passwordConfirmInput) inputs.push(DOM.passwordConfirmInput); // 회원가입: 비밀번호 확인 + if (DOM.nickNameInput) inputs.push(DOM.nickNameInput); // 회원가입: 닉네임 + + // input focus out 메세지 제어 + inputs.forEach(input => { + input.addEventListener('focusout', () => validateInput(input)); + }); + + // 비밀번호 보이기 토글 기능 초기화 + visibilityPassword(DOM.form); + + // 첫 번째 input에 포커스 + DOM.form.querySelector('.auth__input').focus(); + // DOM.form.querySelector('.auth__input')?.focus(); + + DOM.authBtn.addEventListener('click', (e) => { + e.preventDefault(); // 유효성 검사를 위한 페이지를 새로 고침방지 + + inputs.forEach(input => validateInput(input)); // 모든 input 검사 + + const isValid = singUpInputPage //비밀번호 확인 & 닉네임 존재 유무 확인 후 값 넘김 + ? validationStatus.email && validationStatus.password && validationStatus.passwordConfirm && validationStatus.nickName + : validationStatus.email && validationStatus.password; + + if (isValid) { + location.href = "/items.html"; // 페이지 이동 + } + }); +} +// DOMContentLoaded 이벤트에 페이지 초기화 함수 연결 +window.addEventListener("DOMContentLoaded", initPage); \ No newline at end of file diff --git a/sprint2/signup.html b/sprint4/signup.html similarity index 55% rename from sprint2/signup.html rename to sprint4/signup.html index 79046405..10dc5cf3 100644 --- a/sprint2/signup.html +++ b/sprint4/signup.html @@ -1,11 +1,14 @@ + 판다마켓 + +
@@ -16,35 +19,50 @@
-
+
- +
+ +
+ + +
+
- + +
- + +
- +
- -
-
+
+ + \ No newline at end of file