diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index a8581477..aec547e1 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -2,14 +2,23 @@ ### 기본 -- [x] -- [] -- [] +- [0] 아래로 스크롤 해도 상단 네비게이션 바(Global Navigation Bar)가 최상단에 고정됩니다. +- [0] 판다마켓" 클릭 시 루트 페이지("/")로 이동합니다.(새로고침) +- [0] 로그인 페이지, 회원가입 페이지 모두 로고 위 상단 여백이 동일합니다. +- [0] SNS 아이콘들은 클릭시 각각 실제 서비스 홈페이지로 이동합니다. + +### 로그인 페이지 + +- [0] "회원가입"버튼 클릭 시 "/signup" 페이지로 이동합니다. + +### 회원가입 페이지 + +- [0] "로그인"버튼 클릭 시 "/login" 페이지로 이동합니다. ### 심화 -- [x] -- [] +- [x] palette에 있는 color값들을 css 변수로 등록하고 사용해 주세요. +- [0] 비밀번호 input 요소 위에 비밀번호를 확인할 수 있는 아이콘을 추가해 주세요. ## 주요 변경사항 diff --git a/css/auth.css b/css/auth.css new file mode 100644 index 00000000..06617c16 --- /dev/null +++ b/css/auth.css @@ -0,0 +1,103 @@ +.auth-container { + max-width: 640px; + margin: 60px auto; + text-align: center; +} + +.logo-container { + margin-bottom: 40px; +} + +.auth-form { + width: 100%; + max-width: 640px; + margin: 0 auto; +} + +.input-group { + margin-bottom: 24px; + text-align: left; +} + +.input-group label { + display: block; + font-weight: 500; + margin-bottom: 16px; + font-size: 16px; + color: #1f2937; +} + +.input-group input { + width: 100%; + max-width: 640px; + padding: 12px; + font-size: 16px; + background-color: #f5f5f5; + color: #1f2937; + border: none; + border-radius: 5px; + box-sizing: border-box; + outline: none; +} + +.input-group input:focus { + background-color: #e0e0e0; + color: #1f2937; +} + +.password-wrapper { + position: relative; + display: flex; + align-items: center; +} + +.password-wrapper input { + width: 100%; + padding-right: 40px; +} + +.toggle-password { + position: absolute; + right: 12px; + cursor: pointer; +} + +.auth-button { + width: 100%; + max-width: 640px; + padding: 16px; + font-size: 18px; + font-weight: 600; + border-radius: 40px; + background-color: #3692ff; + color: white; + cursor: pointer; + border: none; +} + +.auth-button:hover { + background-color: #1967d6; +} + +.social-login { + background-color: #e6f2ff; + border-radius: 8px; + padding: 16px 23px; + margin: 24px auto; + display: flex; + align-items: center; + justify-content: space-between; + max-width: 640px; +} + +.social-icons { + display: flex; + gap: 16px; +} + +.auth-footer { + font-weight: 500; + font-size: 15px; + max-width: 640px; + margin: 0 auto; +} diff --git a/css/components.css b/css/components.css new file mode 100644 index 00000000..8d96c8af --- /dev/null +++ b/css/components.css @@ -0,0 +1,32 @@ +.button { + background-color: #3692ff; + color: #ffffff; + display: inline-flex; + align-items: center; + justify-content: center; + padding: 12px 24px; + border-radius: 8px; + font-size: 16px; + font-weight: 600; +} + +.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/css/forms.css b/css/forms.css new file mode 100644 index 00000000..0ce9222d --- /dev/null +++ b/css/forms.css @@ -0,0 +1,21 @@ +input { + width: 100%; + padding: 12px; + border: 1px solid #ccc; + border-radius: 5px; + font-size: 16px; +} + +input:focus { + border-color: #3692ff; + outline: none; +} + +.form-container { + max-width: 400px; + margin: auto; + padding: 20px; + background: #f9f9f9; + border-radius: 8px; + box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); +} diff --git a/css/global.css b/css/global.css new file mode 100644 index 00000000..5df34b0b --- /dev/null +++ b/css/global.css @@ -0,0 +1,30 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + color: #374151; + word-break: keep-all; + font-family: "Pretendard", sans-serif; +} + +a { + text-decoration: none; + color: inherit; +} + +button { + background: none; + border: none; + outline: none; + box-shadow: none; + cursor: pointer; +} + +.wrapper { + max-width: 1200px; + margin: 0 auto; + width: 100%; +} diff --git a/css/home.css b/css/home.css new file mode 100644 index 00000000..bfbccf3b --- /dev/null +++ b/css/home.css @@ -0,0 +1,52 @@ +.banner { + background-color: #cfe5ff; + height: 540px; + display: flex; + align-items: center; + background-repeat: no-repeat; + background-position: 80% bottom; + background-size: 55%; +} + +#hero { + background-image: url("../images/home/Img_home_top.png"); +} + +#bottomBanner { + background-image: url("../images/home/Img_home_bottom.png"); +} + +#features { + padding-bottom: 138px; +} + +.feature { + padding: 138px 0; + display: flex; + align-items: center; + gap: 5%; +} + +.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; +} diff --git a/css/layout.css b/css/layout.css new file mode 100644 index 00000000..5ea9bfa6 --- /dev/null +++ b/css/layout.css @@ -0,0 +1,40 @@ +header { + position: fixed; + 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: 1000; +} + +#loginLinkButton { + font-size: 16px; + font-weight: 600; + border-radius: 8px; + padding: 11.5px 23px; +} + +footer { + background-color: #111827; + color: #9ca3af; + display: flex; + justify-content: space-between; + align-items: center; + padding: 32px 200px 108px 200px; + font-size: 16px; +} + +#footerMenu { + display: flex; + gap: 30px; + color: #e5e7eb; +} + +#socialMedia { + display: flex; + gap: 12px; +} diff --git a/css/main.css b/css/main.css deleted file mode 100644 index bf37d4fc..00000000 --- a/css/main.css +++ /dev/null @@ -1,100 +0,0 @@ -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -img { - vertical-align: bottom; -} - -h1 { - font-size: 40px; - font-weight: 700; - line-height: 56px; - letter-spacing: 0.02em; -} - -body { - color: #374151; - word-break: keep-all; - font-family: "Pretendard", sans-serif; -} - -header { - width: 100%; - height: 70px; - display: flex; - justify-content: space-between; - align-items: center; - background-color: #ffffff; - padding: 0px 200px; - border-bottom: 1px solid #dfdfdf; -} - -#mainLoginBtn { - font-size: 16px; - font-weight: 600; - padding: 12px 23px; - border-radius: 8px; -} - -.button { - background-color: #3692ff; - color: #ffffff; - display: inline-flex; - align-items: center; - justify-content: center; -} - -#topBanner { - background-image: url("/images/home/Img_home_top.png") !important; -} - -footer { - background-color: #111827; - color: #9ca3af; - padding: 32px 200px 108px 200px; - display: flex; - justify-content: space-between; - align-items: center; - font-size: 16px; -} - -.productInfo { - padding: 138px 0px; - display: flex; - align-items: center; - gap: 63px; -} - -.wrapper { - max-width: 1200px; - margin: 0 auto; - width: 100%; -} - -.bannerImage { - background-color: #cfe5ff; - height: 540px; - display: flex; - align-items: center; - background-size: 55%; - background-repeat: no-repeat; - background-position: 80% bottom; -} - -#bottomBanner { - background-image: url("/images/home/Img_home_bottom.png"); -} - -#footerMeun { - display: flex; - gap: 30px; - color: #e5e7eb; -} - -#social { - display: flex; - gap: 12px; -} diff --git a/images/login_icon/eye-invisible.svg b/images/login_icon/eye-invisible.svg new file mode 100644 index 00000000..92252b05 --- /dev/null +++ b/images/login_icon/eye-invisible.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/images/login_icon/eye-visible.svg b/images/login_icon/eye-visible.svg new file mode 100644 index 00000000..35a75305 --- /dev/null +++ b/images/login_icon/eye-visible.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/logo/panda-market-logo.png b/images/logo/logo.png similarity index 100% rename from images/logo/panda-market-logo.png rename to images/logo/logo.png diff --git a/images/socialIcon/google-logo.png b/images/socialIcon/google-logo.png new file mode 100644 index 00000000..199f3d62 Binary files /dev/null and b/images/socialIcon/google-logo.png differ diff --git a/images/socialIcon/kakao-logo.png b/images/socialIcon/kakao-logo.png new file mode 100644 index 00000000..bfadc1d3 Binary files /dev/null and b/images/socialIcon/kakao-logo.png differ diff --git a/index.html b/index.html index d97076cf..1c81b526 100644 --- a/index.html +++ b/index.html @@ -10,156 +10,70 @@ rel="stylesheet" as="style" crossorigin - href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css" - /> + href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css" /> - + + + + +
- 판다마켓 로고 - 로그인 + 판다마켓 홈 + 로그인
-
+ -
-
- 인기 상품 확인 -
-
-

- Hot item -

-

인기 상품을
확인해 보세요

-

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

-
+
+
+ 인기 상품 +
+

Hot item

+

인기 상품을
확인해 보세요

+

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

- -
-
-
-

- Search -

-

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

-

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

-
+
+
+

Search

+

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

+

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

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

- Register -

-

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

-

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

-
+
+ 판매 상품 등록 +
+

Register

+

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

+

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

-
+
diff --git a/login.html b/login.html index 2520211f..80f2723c 100644 --- a/login.html +++ b/login.html @@ -3,7 +3,56 @@ - Login + 판다마켓 로그인 + + + + + + - + + +
+
+ 판다마켓 홈 +
+ +
+
+ + +
+
+ +
+ + 비밀번호 감추기 +
+
+ +
+ +
+

간편 로그인하기

+ +
+ +
+ 판다마켓이 처음이신가요? + 회원가입 +
+
+ diff --git a/signup.html b/signup.html new file mode 100644 index 00000000..5bd7cde1 --- /dev/null +++ b/signup.html @@ -0,0 +1,78 @@ + + + + + + 회원가입 - 판다마켓 + + + + + + + + + +
+
+ 판다마켓 홈 +
+ +
+
+ + +
+ +
+ + +
+ +
+ +
+ + 비밀번호 감추기 +
+
+ +
+ +
+ + 비밀번호 감추기 +
+
+ + +
+ +
+

간편 로그인하기

+ +
+ +
+ 이미 계정이 있으신가요? + 로그인 +
+
+ +