Skip to content

[강희정] sprint3 #154

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dongqui merged 5 commits into from
May 19, 2025
Merged

[강희정] sprint3 #154

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
d5adae5
fix: sprint2 수정사항 수정
tansxx Apr 21, 2025
af395d9
✨ Feat: 메인 반응형 추가
tansxx May 14, 2025
c23f6ed
✨ feat: 로그인, 회원가입 페이지 반응형 추가
tansxx May 15, 2025
2cab567
🐛 fix: 모바일 반응형 수정
tansxx May 16, 2025
d1ec5f6
🐛 fix: tablet 메인 배너 텍스트 위치 수정
tansxx May 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified panda-market/assets/.DS_Store
View file
Open in desktop
Binary file not shown.
Binary file added panda-market/assets/images/img_landing.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
32 changes: 32 additions & 0 deletions panda-market/assets/images/panda_face.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
177 changes: 120 additions & 57 deletions panda-market/assets/styles/signup.css → panda-market/assets/styles/auth.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
/* signup.css */
/* auth.css */

/* 기본 설정 */
* {
box-sizing: border-box;
}
Expand All @@ -8,26 +10,42 @@
padding: 0;
}

.signup-page {
display: flex;
width: 100%;
max-width: 1920px;
padding: 231px 0;
justify-content: center;
align-items: center;
background: #fcfcfc;
label,
span {
color: var(--secondary-800);
}

.signup-container {
input {
display: flex;
width: 640px;
flex-direction: column;
justify-content: center;
align-items: flex-start;
padding: 12px 16px;
gap: 10px;
border-radius: 12px;
outline: none;
border: 2px solid rgba(49, 130, 246, 0);
background: var(--Cool-Gray-100, #f3f4f6);
box-sizing: border-box;
}

input::placeholder {
color: var(--Secondary-400, #9ca3af);
}

/* 공통 레이아웃 */
.auth-page {
display: flex;
width: 100%;
height: 100%;
/* padding: 231px 0; */
justify-content: center;
align-items: center;
gap: 40px;
flex-shrink: 0;
background: #fcfcfc;
}

.signup-logo {
.auth-container {
display: flex;
width: 640px;
flex-direction: column;
Expand All @@ -36,12 +54,12 @@
flex-shrink: 0;
}

.signup-logo img {
.auth-logo img {
width: 396px;
height: 132px;
}

.signup-form {
.auth-form {
display: flex;
flex-direction: column;
align-items: center;
Expand All @@ -56,25 +74,6 @@
gap: 16px;
}

label {
color: var(--secondary-800);
}

input {
display: flex;
width: 640px;
flex-direction: column;
justify-content: center;
align-items: flex-start;
padding: 12px 16px;
gap: 10px;
border-radius: 12px;
outline: none;
border: 2px solid rgba(49, 130, 246, 0);
background: var(--Cool-Gray-100, #f3f4f6);
box-sizing: border-box;
}

.password-wrapper,
.password-check-wrapper {
width: 100%;
Expand All @@ -96,22 +95,6 @@ input {
cursor: pointer;
}

.btn-signup {
display: flex;
width: 640px;
height: 56px;
padding: 16px 124px;
justify-content: center;
align-items: center;
gap: 10px;
border-radius: 40px;
border: none;
background: var(--primary-100);
color: var(--Cool-Gray-100, #f3f4f6);
text-align: center;
cursor: pointer;
}

.easy-login {
display: flex;
width: 640px;
Expand All @@ -123,7 +106,6 @@ input {
border-radius: 8px;
border: none;
background: #e6f2ff;
box-sizing: border-box;
}

.sns-buttons {
Expand All @@ -145,10 +127,57 @@ input {
}

span {
color: var(--secondary-800);
white-space: nowrap;
}

/* 로그인 */
.btn-login {
display: flex;
width: 640px;
height: 56px;
padding: 16px 124px;
justify-content: center;
align-items: center;
gap: 10px;
border-radius: 40px;
border: none;
background: var(--Secondary-400, #9ca3af);
color: white;
text-align: center;
cursor: pointer;
}

.join-guide {
color: var(--secondary-800);
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 24px;
}

.join-guide a {
color: var(--primary-100);
line-height: normal;
text-decoration-line: underline;
}

/* 회원가입 */
.btn-signup {
Copy link
Collaborator

@dongqui dongqui May 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

login과 같은 버튼 아닌가요!? 🤣 공통 스타일을 재활용 하시면 유지 보수에 좋습니다 :)

display: flex;
width: 640px;
height: 56px;
padding: 16px 124px;
justify-content: center;
align-items: center;
gap: 10px;
border-radius: 40px;
border: none;
background: var(--Secondary-400, #9ca3af);
color: white;
text-align: center;
cursor: pointer;
}

.login-guide {
color: var(--secondary-800);
font-size: 14px;
Expand All @@ -161,9 +190,43 @@ span {
color: var(--primary-100);
line-height: normal;
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-skip-ink: none;
text-decoration-thickness: auto;
text-underline-offset: auto;
text-underline-position: from-font;
}

@media (max-width: 768px) {
.auth-page {
height: 100%;
overflow-y: hidden;
padding: 0 16px;
}

.auth-container {
width: 100%;
max-width: 400px;
gap: 16px;
}

.auth-logo img {
width: 196px;
}

input,
.btn-login,
.form-group,
.easy-login,
.btn-signup {
width: 100%;
max-width: 400px;
}

.easy-login {
Copy link
Collaborator

@dongqui dongqui May 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image
디자인 시안을 확인해 주세요 :)

display: flex;
align-items: center;
justify-content: flex-start;
gap: 16px;
width: 343px;
height: 74px;
padding: 16px 23px;
border-radius: 8px;
background: #e6f2ff;
}
}
Loading
Loading