Skip to content

[김희수] Sprint4 #89

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
ByungyeonKim merged 3 commits into from
Aug 11, 2025
Merged

[김희수] Sprint4 #89

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2feec15
Finder의 반복적인 .DS_Store 파일 생성 막음
Jun 14, 2025
2b1286e
Feat: input별 focus out 이벤트 및 그에 따른 버튼 활성화 여부 확인 기능 추가
nizoo0516 Aug 4, 2025
be130dd
Feat: auth.css 파일 생성 및 login, signup 페이지의 공통 CSS 분리
nizoo0516 Aug 7, 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
130 changes: 130 additions & 0 deletions css/auth.css
View file
Open in desktop
Copy link
Collaborator

@ByungyeonKim ByungyeonKim Aug 8, 2025

Choose a reason for hiding this comment

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

공통 CSS를 auth.css로 분리하신 점, 너무 좋습니다!
폴더 구성을 현재 프로젝트 크기에 맞게 잘 구성해주셨네요. 👍

여기서, 각 클래스에 폰트 패밀리를 선언하지 않고 reset.css같은 파일에서 body 태그에 한번에 적용시키는 건 어떨까요? 텍스트 관련 속성은 body에서 정의 시 기본적으로 자식 요소에 상속되어 적용돼요.

다만 폼 컨트롤 관련 요소는 상속이 되지 않기 때문에 아래 선언들도 필요해요.

input,
button,
textarea,
select {
  font-family: inherit;
}

최신 CSS Reset에 대한 더 많은 내용은 아래 링크를 참고해 주세요.

Original file line number Diff line number Diff line change
@@ -0,0 +1,130 @@
/* login과 signup 페이지의 공통 CSS 분리 */

body {
display: flex;
justify-content: center;
margin-top: 50px;
}

#wrapper {
width: 100%;
max-width: 640px;
margin: 0 auto;
}

.logo {
display: block;
width: 396px;
margin: 0 auto;
margin-bottom: 40px;
}

.logo img {
display: block;
max-width: 100%;
height: auto;
}

.email_label,
.password_label {
display: flex;
flex-direction: column;
width: 100%;
font-family: "Pretendard", sans-serif;
font-size: 1.125rem;
font-weight: 700;
color: #1f2937;
margin-bottom: 15px;
}

.email_input,
.password_input {
width: 100%;
height: 56px;
font-family: "Pretendard", sans-serif;
font-size: 1rem;
font-weight: 400;
color: #1f2937;
background-color: #f3f4f6;
border: none;
border-radius: 12px;
padding: 0 25px;
}

.email_error,
.password_error {
font-family: "Pretendard", sans-serif;
font-size: 0.875rem;
font-weight: 600;
color: #f74747;
padding-left: 20px;
margin-top: 15px;
display: none;
}

.eye_wrapper {
position: relative;
}

.eye_icon {
width: 24px;
height: 24px;
position: absolute;
top: 15.5px;
right: 25px;
border: 0;
background-color: transparent;
cursor: pointer;
}

.eye_icon_img {
max-width: 100%;
height: auto;
display: block;
}

.simple_login {
display: flex;
justify-content: space-between;
align-items: center;
height: 74px;
padding: 0 23px;
margin: 24px 0;
font-family: "Pretendard", sans-serif;
font-size: 1rem;
font-weight: 500;
color: #1f2937;
background-color: #e6f2ff;
border-radius: 8px;
}

.login_sns {
display: flex;
gap: 15px;
}

.login_google,
.login_kakao {
width: 42px;
height: 42px;
}

.login_google img,
.login_kakao img {
max-width: 100%;
height: auto;
display: block;
}

/* 모바일용 CSS */

@media (min-width: 375px) and (max-width: 767px) {
#wrapper {
max-width: 400px;
padding: 0 16px;
}

.logo {
width: 198px;
}
}
166 changes: 27 additions & 139 deletions css/login.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,157 +1,45 @@
/* 공통 CSS */

body {
display: flex;
justify-content: center;
margin-top: 50px;
}

#wrapper {
width: 100%;
max-width: 640px;
margin: 0 auto;
}

.logo {
display: block;
width: 396px;
margin: 0 auto;
margin-bottom: 40px;
}

.logo img {
display: block;
max-width: 100%;
height: auto;
}

.login_formbox {
display: flex;
flex-direction: column;
width: 100%;
}

.email_label, .password_label {
display: flex;
flex-direction: column;
width: 100%;
font-family: 'Pretendard', sans-serif;
font-size: 1.125rem;
font-weight: 700;
color: #1F2937;
margin-bottom: 15px;
}

.email_input, .password_input {
width: 100%;
height: 56px;
font-family: 'Pretendard', sans-serif;
font-size: 1rem;
font-weight: 400;
color: #1F2937;
background-color: #F3F4F6;
border: none;
border-radius: 12px;
padding: 0 25px;
margin-bottom: 25px;
}

.eye_wrapper {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
}

.eye_icon {
width: 24px;
height: 24px;
position: absolute;
top: 15.5px;
right: 25px;
border: 0;
background-color: transparent;
cursor: pointer;
}

.eye_icon_img {
max-width: 100%;
height: auto;
display: block;
.password_label {
margin-top: 25px;
}

.login_btn {
height: 56px;
font-family: 'Pretendard', sans-serif;
font-size: 1.25rem;
font-weight: 600;
color: #F3F4F6;
background-color: #9CA3AF;
border: 0px;
border-radius: 40px;
cursor: pointer;
}

.login_btn:hover {
background-color: #1967D6;
}

.simple_login {
display: flex;
justify-content: space-between;
align-items: center;
height: 74px;
padding: 0 23px;
margin: 24px 0;
font-family: 'Pretendard', sans-serif;
font-size: 1rem;
font-weight: 500;
color: #1F2937;
background-color: #E6F2FF;
border-radius: 8px;
}

.login_sns {
display: flex;
gap: 15px;
height: 56px;
font-family: "Pretendard", sans-serif;
font-size: 1.25rem;
font-weight: 600;
color: #f3f4f6;
background-color: #1967d6;
border: 0px;
border-radius: 40px;
margin-top: 25px;
cursor: pointer;
}

.login_google, .login_kakao {
width: 42px;
height: 42px;
}

.login_google img, .login_kakao img {
max-width: 100%;
height: auto;
display: block;
.login_btn:disabled {
background-color: #9ca3af;
cursor: not-allowed;
pointer-events: none;
}

.sign_up {
display: flex;
justify-content: center;
gap: 5px;
font-family: 'Pretendard', sans-serif;
font-size: 0.875rem;
font-weight: 500;
display: flex;
justify-content: center;
gap: 5px;
font-family: "Pretendard", sans-serif;
font-size: 0.875rem;
font-weight: 500;
}

.sign_up p {
color: #1F2937;
color: #1f2937;
}

.sign_up a {
color: #3692FF;
color: #3692ff;
}

/* 모바일용 CSS */

@media (min-width: 375px) and (max-width: 767px) {
#wrapper {
max-width: 400px;
padding: 0 16px;
}

.logo {
width: 198px;
}
}


Loading
Loading