Skip to content

[유동환] sprint4 #168

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 8 commits into from
Apr 2, 2025
Merged

[유동환] sprint4 #168

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
ea08891
fix style.css tablet,desktop footer
TopiaYu Mar 24, 2025
fdacc68
Delete login.css, signup.css
TopiaYu Mar 25, 2025
71bc8ed
Add meta tag for sns preview
TopiaYu Mar 25, 2025
91bd9c8
Add login.js, fix login.css,html for login.js
TopiaYu Mar 25, 2025
08a306e
Add login.js ; email,password field, login button status
TopiaYu Mar 30, 2025
7972705
fix logo size, input padding
TopiaYu Mar 30, 2025
d42a39c
Add signup.js, add button disabled
TopiaYu Apr 1, 2025
8a190ea
Add color as var
TopiaYu Apr 1, 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
6 changes: 6 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,12 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="or:url" content="scintillating-ganache-14d305.netlify.app">
<meta property="og:title" content="판다마켓">
<meta property="og:type" content="website">
<meta property="og:image" content="image/typography.png">
<meta property="og:description" content="일상의 모든 물건을 거래해보세요">

<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable.min.css" />
<link rel="stylesheet" href="style.css">
<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/reset.min.css"/> -->
Expand Down
83 changes: 64 additions & 19 deletions login-Signup.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,32 @@
box-sizing: border-box;
}

:root {
--gray50: #F9FAFB;
--gray100: #F3F4F6;
--gray200: #E5E7EB;
--gray400: #9CA3AF;
--gray500: #6B7280;
--gray600: #4B5563;
--gray700: #374151;
--gray800: #1F2937;
--gray900: #111827;
--blue: #3692FF;
}
Comment on lines +5 to +16
Copy link
Collaborator

@GANGYIKIM GANGYIKIM Apr 2, 2025

Choose a reason for hiding this comment

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

💊 제안
색상변수가 해당 파일과 style.css에 모두 선언되어 있네요.
이런 경우 같은 이름을 가지고 있지만 각각 선언되어 있어서 유지보수 및 작성시 좋지 않습니다!
가능하면 common.css나 variables.css와 같은 파일을 만들어서 모든 페이지에서 공용으로 사용되는 스타일들은 그쪽으로 빼주세요. 참고로 common.css라고 네이밍을 하면 공용코드의 의미이고 variables.css는 색상변수를 모아두는 파일이라는 의미입니다!


@media (min-width: 375px) {

/* 버튼 관련 */
.buttons {
width: 100%;
height: 56px;
border-radius: 40px;
background-color: #9CA3AF;
background-color: var(--gray400);
Copy link
Collaborator

@GANGYIKIM GANGYIKIM Apr 2, 2025

Choose a reason for hiding this comment

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

👍 칭찬
색상 변수 추가하시고 사용하신 것 좋아요!

display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
color: #F3F4F6;
color: var(--gray100);
margin-bottom: 24px;
font-size: 20px;
font-weight: 600;
Expand Down Expand Up @@ -49,34 +62,46 @@
margin-bottom: 24px;
}

#logo img:first-child {
.logo-image img:first-child {
width: 52px;
}

#logo img:last-child {
.logo-text img:last-child {
width: 133px;
}

/* 폼테그 관련 */
form {
display: flex;
flex-direction: column;
color: #1F2937;
color: var(--gray800);
font-size: 18px;
font-weight: 700;
}

form > label {
form label {
margin-bottom: 8px;
}

form > input {
form input {
width: 100%;
height: 56px;
border: 0;
background-color: #F3F4F6;
background-color: var(--gray100);
border-radius: 12px;
margin-top: 16px;
margin-bottom: 16px;
padding: 0 16px;
}

.error-message{
margin-bottom: 9px;
padding-left: 16px;
font-size: 14px;
font-weight: 600;
line-height: 24px;
color: red;
padding-left: 16px;
}

input::placeholder {
Expand All @@ -90,7 +115,7 @@
flex-direction: row;
align-items: center;
justify-content: space-between;
background-color: #E6F2FF;
background-color: var(--gray50);
padding: 16px 23px;
border-radius: 8px;
margin-bottom: 24px;
Expand Down Expand Up @@ -123,7 +148,7 @@
}

.footer a {
color: #3692FF;
color: var(--blue);
}
}

Expand All @@ -133,12 +158,12 @@
width: 100%;
height: 56px;
border-radius: 40px;
background-color: #9CA3AF;
background-color: var(--gray400);
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
color: #F3F4F6;
color: var(--gray100);
margin-bottom: 24px;
font-size: 20px;
font-weight: 600;
Expand All @@ -156,7 +181,7 @@

container {
margin-top: 231px;
width: 640px;
max-width: 600px;
height: auto;
}

Expand All @@ -170,6 +195,14 @@
margin-bottom: 40px;
}

.logo-image img:first-child {
width: 103px;
}

.logo-text img:last-child {
width: 266px;
}

/* 폼테그 관련 */
form {
display: flex;
Expand All @@ -179,17 +212,29 @@
font-weight: 700;
}

form > label {
form label {
margin-bottom: 16px;
}

form > input {
form input {
width: 100%;
height: 56px;
border: 0;
background-color: #F3F4F6;
background-color: var(--gray100);
border-radius: 12px;
margin-bottom: 24px;
margin-top: 16px;
margin-bottom: 8px;
padding: 0 16px;
}

.error-message{
margin-bottom: 18px;
padding-left: 16px;
font-size: 14px;
font-weight: 600;
line-height: 24px;
color: red;
padding-left: 16px;
}

input::placeholder {
Expand All @@ -203,7 +248,7 @@
flex-direction: row;
align-items: center;
justify-content: space-between;
background-color: #E6F2FF;
background-color: var(--gray50);
padding: 16px 23px;
border-radius: 8px;
margin-bottom: 24px;
Expand Down Expand Up @@ -232,6 +277,6 @@
}

.footer a {
color: #3692FF;
color: var(--blue);
}
}
110 changes: 0 additions & 110 deletions login.css
View file
Open in desktop

This file was deleted.

25 changes: 18 additions & 7 deletions login.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,16 +11,26 @@
<container>
<div id="logo">
<a href="index.html">
<img src="./image/logo.png" alt="판다마켓 로고">
<img src="./image/typography.png" alt="판다마켓 로고 텍스트">
</a>
<div class="logo-image">
<img src="./image/logo.png" alt="판다마켓 로고">
</div>
<div class="logo-text">
<img src="./image/typography.png" alt="판다마켓 로고 텍스트">
</div>
</a>
</div>
<form>
<label for="email">이메일</label>
<input type="email" id="email" name="user-email" placeholder="이메일을 입력해주세요">
<label for="password">비밀번호</label>
<div class="email-field">
<label for="email">이메일</label>
<input type="email" id="email" name="user-email" placeholder="이메일을 입력해주세요">
<div class="error-message"></div>
</div>
<div class="password-field">
<label for="password">비밀번호</label>
<input type="password" id="password" name="user-password" placeholder="비밀번호를 입력해주세요">
<button type="submit" class="login-button buttons">
<div class="error-message"></div>
</div>
<button type="button" class="login-button buttons" onclick="location.href='./items.html'" disabled>
Copy link
Collaborator

@GANGYIKIM GANGYIKIM Apr 2, 2025

Choose a reason for hiding this comment

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

❗️ 수정요청
로그인 버튼은 해당 form에서 submit 이벤트에 해당하므로 button type은 submit이 적절합니다.

Suggested change
<button type="button" class="login-button buttons" onclick="location.href='./items.html'" disabled>
<button type="submit" class="login-button buttons" onclick="location.href='./items.html'" disabled>

로그인
</button>
</form>
Expand All @@ -40,5 +50,6 @@
<a href="./signup.html">회원가입</a>
</div>
</container>
<script src="login.js"></script>
Copy link
Collaborator

@GANGYIKIM GANGYIKIM Apr 2, 2025

Choose a reason for hiding this comment

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

💊 제안

아마 script 태그를 HTML의 하단에 배치하신 이유가 script가 문서의 렌더링을 막지 않도록 하기 위해서이실 것 같아요.
하지만, script 태그에 defer나 async 속성을 사용하면 이런 문제를 해결할 수 있기 때문에 반드시 하단에 배치할 필요는 없습니다!
또한 script 태그는 상단에 있는게 구조 파악에서도 유리하기 때문에 상단 head 태그에 두시는 것을 추천드려요~

script async
script defer

지금과 같은 경우 DOM을 조작하는 JS 이니 defer 속성을 추가하시면 되겠습니다~

</body>
</html>
Loading
Loading