Skip to content

[이찬호] Sprint4 #159

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
GANGYIKIM merged 10 commits into from
Mar 28, 2025
Merged

[이찬호] Sprint4 #159

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
7fa14e5
refactor: 미디어 쿼리 조건 수정 및 불필요한 주석 제거
LeeCh0129 Mar 22, 2025
b52d166
refactor: CSS 파일 중복 제거 및 구조 개선
LeeCh0129 Mar 22, 2025
a1b39e6
style: 반응형 타이포그래피 스타일 개선
LeeCh0129 Mar 22, 2025
4e87cd0
feat: 유틸리티 클래스 CSS 파일 추가
LeeCh0129 Mar 23, 2025
e688923
feat: 폼 유효성 검사 함수 구현(공통)
LeeCh0129 Mar 23, 2025
74f703e
feat: 로그인 폼 유효성 검사 구현
LeeCh0129 Mar 23, 2025
1359246
feat: 회원가입 폼 유효성 검사 구현
LeeCh0129 Mar 23, 2025
19dea31
feat: 로그인 폼 비밀번호 표시/숨김 기능 추가
LeeCh0129 Mar 23, 2025
90b5d5f
feat: 회원가입 폼 비밀번호 표시/숨김 기능 추가
LeeCh0129 Mar 23, 2025
f014f51
fix: 로고 이미지 여백 제거
LeeCh0129 Mar 23, 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
34 changes: 0 additions & 34 deletions css/auth.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,40 +69,6 @@
height: 24px;
}

/* 버튼 스타일 */
.button {
background-color: var(--primary-100);
color: #ffffff;
display: inline-flex;
align-items: center;
justify-content: center;
}

.button:hover {
background-color: var(--primary-200);
}

.button:focus {
background-color: var(--primary-300);
}

.button:disabled {
background-color: var(--gray-400);
cursor: default;
pointer-events: none;
}

.pill-button {
font-size: 20px;
font-weight: 700;
border-radius: 999px;
padding: 16px 126px;
}

.full-width {
width: 100%;
}

/* 소셜 로그인 */
.social-login-container {
background-color: #e6f2ff;
Expand Down
18 changes: 0 additions & 18 deletions css/banner.css
View file
Open in desktop

This file was deleted.

51 changes: 33 additions & 18 deletions css/buttons.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,4 @@
.login-btn {
background-color: var(--primary-100);
color: #ffffff;
width: 128px;
height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 600;
border-radius: 8px;
margin-right: 200px;
}

.login-btn:hover {
background-color: var(--primary-200);
}

/* 공통 버튼 스타일 */
.button {
background-color: var(--primary-100);
color: #ffffff;
Expand All @@ -32,13 +15,45 @@
background-color: var(--primary-300);
}

.button:disabled {
background-color: var(--gray-400);
cursor: default;
pointer-events: none;
}
Comment on lines +18 to +22
Copy link
Collaborator

@GANGYIKIM GANGYIKIM Mar 28, 2025

Choose a reason for hiding this comment

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

💊 제안
하단에 btn-disabled라는 클래스를 통해 구현하신 것을 봤는데, 유틸 클래스로 나누실 거라도 기본적인 것들은 공통으로 작성하시는 것이 더 좋아보여요. 그래서 cursor같은 값들은 그냥 button:disabled 에 기본적으로 추가해주시는 것을 추천드려요.


/* 둥근 버튼 스타일 */
.pill-button {
font-size: 20px;
font-weight: 700;
border-radius: 999px;
padding: 16px 124px;
}

/* 로그인 버튼 스타일 */
.login-btn {
background-color: var(--primary-100);
color: #ffffff;
width: 128px;
height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 600;
border-radius: 8px;
margin-right: 200px;
}

.login-btn:hover {
background-color: var(--primary-200);
}

/* 배너 내 버튼 스타일 */
.banner .pill-button {
margin-top: 32px;
}

/* 전체 너비 버튼 스타일 */
.full-width {
width: 100%;
}
7 changes: 0 additions & 7 deletions css/feature-elements.css
View file
Open in desktop

This file was deleted.

25 changes: 16 additions & 9 deletions css/responsive.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
/* 대형 데스크탑 (1920px 이상) */
@media (min-width: 1920px) {
.header,
.main-banner,
Expand All @@ -10,7 +9,6 @@
max-width: 1520px;
}

/* 배너 배경 이미지 조정 */
#hero {
background-size: 45%;
background-position: 85% bottom;
Expand All @@ -21,13 +19,11 @@
background-position: 85% bottom;
}

/* 배너 컨테이너 최대 너비 제한 */
.wrapper {
max-width: 1520px;
}
}

/* 중형-대형 데스크탑 (1600px 이하) */
@media (max-width: 1600px) {
.logo {
margin-left: 100px;
Expand All @@ -47,7 +43,6 @@
}
}

/* PC (1200px 이상) */
@media (min-width: 1200px) {
.logo {
margin-left: 200px;
Expand All @@ -63,12 +58,16 @@
}
}

/* 태블릿 (768px 이상 ~ 1199px 이하) */
@media (min-width: 768px) and (max-width: 1199px) {
.logo {
margin-left: 24px;
}

h2 {
font-size: 32px;
line-height: 44px;
}

.login-btn {
margin-right: 24px;
}
Expand Down Expand Up @@ -152,7 +151,6 @@
}

.feature img {
/* width: 85%; */
width: auto;
padding: 0 24px;
margin: 0 auto;
Expand All @@ -164,8 +162,7 @@
}
}

/* 모바일 (375px 이상 ~ 767px 이하) */
@media (min-width: 375px) and (max-width: 767px) {
@media (max-width: 767px) {
.header {
height: 60px;
}
Expand All @@ -174,6 +171,16 @@
margin-left: 16px;
}

h1 {
Copy link
Collaborator

@GANGYIKIM GANGYIKIM Mar 28, 2025

Choose a reason for hiding this comment

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

💊 제안
찬호님께서 잘 작성하셨겠지만 염려가 되어 코멘트 남깁니다~
태그 선택자는 해당 태그가 모든 페이지에 걸쳐 적용되어야 하는 스타일링 외에는 사용을 추천드리지 않습니다~
위의 경우도 프로젝트가 확장되다보면 변경될 수 있으니 가능한 class를 사용하시는 것을 추천드릴께요~

font-size: 32px;
line-height: 44px;
}

h2 {
font-size: 24px;
line-height: 34px;
}

.login-btn {
margin-right: 16px;
font-size: 14px;
Expand Down
19 changes: 19 additions & 0 deletions css/sections.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,3 +7,22 @@
position: relative;
overflow: hidden;
}

.banner {
background-color: #cfe5ff;
height: 540px;
display: flex;
align-items: center;
background-repeat: no-repeat;
background-position: 80% bottom;
background-size: 55%;
transition: background-size 0.3s ease, padding 0.3s ease;
}

#hero {
background-image: url("../public/images/img_home_top.png");
}

#bottomBanner {
background-image: url("../public/images/img_home_bottom.png");
}
8 changes: 8 additions & 0 deletions css/typography.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,14 @@ h2 {
letter-spacing: 0.02em;
}

.feature-tag {
color: var(--primary-100);
font-size: 18px;
line-height: 25px;
font-weight: 700;
margin-bottom: 12px;
}

.feature-description {
font-size: 24px;
font-weight: 500;
Expand Down
Loading
Loading