Skip to content

[배수민] Sprint4 #133

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
addiescode-sj merged 8 commits into from
May 14, 2025
Merged

[배수민] Sprint4 #133

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
1b78b7a
fix: 스프린트2 수정사항 반영
Apr 19, 2025
8061b81
feat: 홈화면 반응형 작업
Apr 21, 2025
7f62fff
feat: 로그인 회원가입 화면 반응형 작업
Apr 21, 2025
61f616e
fix: 메타태그 링크 수정
Apr 21, 2025
a3078eb
fix: 스프린트2 수정사항 추가
Apr 21, 2025
1a489d0
fix: 스프린트3 css 파일 분리
Apr 26, 2025
440da35
feat: 스프린트4 미션 JS 추가
Apr 29, 2025
8f60c74
fix: 비밀번호 확인 유효성체크 수정
May 2, 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
190 changes: 190 additions & 0 deletions css/base/common.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,190 @@
body {
font-family: "Pretendard Variable";
}

a {
cursor: pointer;
}

input {
font-family: "Pretendard Variable";
font-size: var(--font-size-xs);
color: var(--color-secondary-800);
background-color: var(--color-secondary-100);
padding: 16px 20px;
border-radius: 12px;
height: 56px;
border: none;
}

input::placeholder {
color: var(--color-secondary-400);
font-size: var(--font-size-xs);
}

input.success {
outline: 1px solid var(--color-primary-100);
}

input.error {
outline: 1px solid var(--color-error);
}

input {
outline: none;
}

label {
font-size: var(--font-size-sm);
font-weight: 700;
color: var(--color-secondary-800);
}

.btn {
background-color: var(--color-primary-100);
text-decoration: none;
color: var(--color-secondary-100);
padding: 12px 20px;
display: flex;
justify-content: center;
align-items: center;
font-weight: 600;
}

.btn-small {
border-radius: var(--border-radius-sm);
min-width: 128px;
height: 48px;
font-size: var(--font-size-xs);
}

.btn-large {
border-radius: var(--border-radius-lg);
width: 240px;
height: 48px;
font-size: var(--font-size-sm);
}

.btn a {
text-decoration: none;
color: var(--color-secondary-100);
}

.btn:disabled {
background-color: var(--color-secondary-400);
}

.msg {
font-size: 14px;
font-weight: 600;
padding-left: 16px;
display: none;
color: var(--color-error);
}

.msg.error {
display: block;
}

/* 폼 관련 공통 CSS */
.form__container {
display: flex;
justify-content: center;
align-items: center;
padding: 16px;
}

@media screen and (min-width: 1200px) {
.form__container {
padding: 0;
}
}

.form__container__content {
flex-grow: 1;
display: flex;
flex-direction: column;
max-width: 400px;
width: 100%;
}

@media screen and (min-width: 768px) {
.form__container__content {
max-width: 640px;
}
}

.form__container__content a {
display: block;
text-align: center;
}

.form__container__logo {
margin-bottom: 20px;
max-width: 198px;
}

@media screen and (min-width: 768px) {
.form__container__logo {
max-width: 396px;
}
}

.form__container__label {
display: flex;
flex-direction: column;
margin-bottom: 24px;
gap: 16px;
}

.form__container__input {
width: 100%;
flex-grow: 1;
}

.form__container__input__wrap {
position: relative;
}

.form__container__input__wrap img {
position: absolute;
top: 50%;
right: 20px;
transform: translate(0, -50%);
}

.form__container button {
margin-bottom: 24px;
width: 100%;
}

.form__container__banner {
background-color: var(--color-background-light-blue);
border-radius: 8px;
padding: 16px 23px;
font-size: var(--font-size-sm);
font-weight: 500;
color: var(--color-secondary-800);
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
}

.form__container__banner__icon {
display: flex;
gap: 16px;
}

.form__container__signup {
display: flex;
justify-content: center;
gap: 4px;
font-size: var(--font-size-xxs);
font-weight: 500;
color: var(--color-secondary-800);
}

.form__container__signup a {
color: var(--color-primary-100);
}
Comment on lines +161 to +190
Copy link
Collaborator

@addiescode-sj addiescode-sj May 2, 2025

Choose a reason for hiding this comment

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

요런건 특정 페이지 (예: signup.html)에서만 쓰이지않을까요? 재사용될필요가 있는지 확인해보고, 없다면 전역 스타일 (공용 스타일)을 처리하는 파일에서는 배제하도록할까요?

Copy link
Collaborator Author

@summerDev96 summerDev96 May 22, 2025

Choose a reason for hiding this comment

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

넵! 로그인, 회원가입 공통 CSS 파일 추가하여 사용하려고 합니다

8 changes: 0 additions & 8 deletions css/reset.css → css/base/reset.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,6 @@
box-sizing: border-box;
}

input {
border: none;
}

input:focus {
outline: none;
}

button {
border: none;
}
36 changes: 7 additions & 29 deletions css/common.css → css/base/variables.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,38 +17,16 @@
--color-error: #f74747;

/* Font Sizes */
--font-size-xs: 12px;
--font-size-sm: 13px;
--font-size-md: 14px;
--font-size-lg: 16px;
--font-size-2lg: 18px;
--font-size-xl: 20px;
--font-size-2xl: 24px;
--font-size-3xl: 32px;
--font-size-4xl: 40px;
--font-size-xxs: 14px;
--font-size-xs: 16px;
--font-size-sm: 18px;
--font-size-lg: 20px;
--font-size-xl: 24px;
--font-size-2xl: 32px;
--font-size-3xl: 40px;

/* Border Radius */
--border-radius-sm: 8px;
--border-radius-md: 12px;
--border-radius-lg: 40px;
}

body {
font-family: "Pretendard Variable";
}

a {
cursor: pointer;
}

input::placeholder {
color: var(--color-secondary-400);
font-size: var(--font-size-lg);
font-weight: 400;
}

input {
color: var(--color-secondary-800);
font-size: var(--font-size-lg);
font-weight: 400;
}
Loading
Loading