Skip to content

[김보경] sprint2 #156

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

[김보경] sprint2 #156

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
97fd7a5
EdiR after PR Riview
BokyungCodes Mar 21, 2025
61b7e10
Add login.html
BokyungCodes Mar 21, 2025
4921f9e
Add signup.html and edit login.html
BokyungCodes Mar 21, 2025
10c1f2f
Finish login,signup css
BokyungCodes Mar 23, 2025
dbbd2a9
Add eye icon and css
BokyungCodes Mar 23, 2025
c825363
SprintMission2 complete
BokyungCodes 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
39 changes: 39 additions & 0 deletions colors.css
View file
Open in desktop
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.

💊 제안
css 변수들을 분리하신 점 좋습니다. 다만 figma에 정의된 색상 변수보다 수가 더 적은 것 같아요~

스크린샷 2025-03-13 오후 3 22 14 스크린샷 2025-03-13 오후 3 23 55

큰 이유가 없다면 figma와 동일하게 색상 변수를 선언하시는 것이 좋습니다.
그래야 figma에서 해당 색상 변수가 사용될때 확인하기 쉽고 색상값은 디자이너와 의사 소통할 일이 많은 값이라 소통 측면에서도 같은 이름을 쓰는 것이 좋기 때문입니다~

또한 클래스로 빼셔도 되지만 css variable로 선언하셔도 됩니다~

:root {
  --gray900:  #111827;
}

title {
  color: var(--gray900);
}

Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
.gray900 {
color: #111827;
}

.gray800 {
color: #1F2937;
}

.gray700 {
color: #374151;
}

.gray600 {
color: #4B5563;
}

.gray500 {
color: #6B7280;
}

.gray400 {
color: #9CA3AF;
}

.gray200 {
color: #E5E7EB;
}

.gray100 {
color: #F3F4F6;
}

.gray50 {
color: #F9FAFB;
}

.blue {
color: #3692FF;
}
Binary file added img/ic_eye_blind.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.
Binary file added img/ic_eye_open.png
View file
Open in desktop
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.

❗️ 수정요청
ic_eye_blind와 ic_eye_open 의 이미지 크기가 달라서 비밀번호 토글을 누를때마다 덜컹거리는 느낌이 들어요~
이를 css로 해결하실 수도 있지만 추천드리는 방법은, 두 이미지를 같은 사이즈로 추출하시는 겁니다.
ic_eye_blind가 더 클 수 밖에 없으니 ic_eye_open 이미지를 여백을 주어 동일한 크기로 추출하시는 것을 추천드려요!

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/ic_google.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.
Binary file added img/ic_kakaotalk.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.
13 changes: 7 additions & 6 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,13 +24,14 @@
<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard-dynamic-subset.css" />
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="colors.css">
</head>

<body>
<header id="header">
<div class="wrap-header">
<img src="./img/logo.png" alt="판다마켓 로고" />
<a href="/login">로그인</a>
<a href="./login.html">로그인</a>
</div>
</header>
<main>
Expand All @@ -41,7 +42,7 @@ <h2>일상의 모든 물건을<br />거래해 보세요</h2>
<button>구경하러 가기</button>
</div>
<div class="img-home">
<img src="./img/Img_home_top.png" />
<img src="./img/img_home_top.png" />
</div>
</div>
</section>
Expand All @@ -50,7 +51,7 @@ <h2>일상의 모든 물건을<br />거래해 보세요</h2>
<div class="box-about">
<div class="card-about">
<div class="img-about">
<img src="./img/Img_home_01.png" />
<img src="./img/img_home_01.png" />
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.

❗️ 수정요청
아마 여기서 이미지명을 바꿔주신 것을 보면 파일명도 수정하신 것 같아요! 다만 git은 대소문자 구분을 하지 못해, 지금 file changed에서 해당 이미지가 보이지 않는 것을 통해 파일명이 바뀌지 않은 것을 알 수 있습니다!
검색해보시고 수정해보세요.
참고하실만한 글도 첨부합니다~

blog1 blog2

</div>
<div class="txt-about">
<span>Hot item</span>
Expand All @@ -67,14 +68,14 @@ <h3>구매를 원하는<br />상품을 검색하세요</h3>
<p>구매하고 싶은 물품은 검색해서<br />쉽게 찾아보세요</p>
</div>
<div class="img-about">
<img src="./img/Img_home_02.png" />
<img src="./img/img_home_02.png" />
</div>
</div>
</div>
<div class="box-about">
<div class="card-about">
<div class="img-about">
<img src="./img/Img_home_03.png" />
<img src="./img/img_home_03.png" />
</div>
<div class="txt-about">
<span>Register</span>
Expand All @@ -91,7 +92,7 @@ <h3>판매를 원하는<br />상품을 등록하세요</h3>
<h4>믿을 수 있는<br />판다마켓 중고 거래</h4>
</div>
<div class="img-description">
<img src="./img/Img_home_bottom.png" />
<img src="./img/img_home_bottom.png" />
</div>
</div>
</section>
Expand Down
54 changes: 54 additions & 0 deletions login.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>판다마켓 로그인 페이지</title>

<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard-dynamic-subset.css" />
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="colors.css">
</head>

<body>
<div class="wrap-userinfo wrap-login">
<div class="box-userinfo">
<div class="wrap-logo">
<a href="./index.html"><img src="./img/logo.png" alt="판다마켓" /></a>
</div>
<div class="wrap-userform">
<form action="" method="POST" autocomplete="on">
<fieldset>
<legend>판다마켓 로그인</legend>
<div class="main-login">
<div class="wrap-input wrap-email">
<label for="email">이메일</label>
<input type="text" class="email" name="email" id="email" placeholder="[email protected]" required />
</div>
<div class="wrap-input wrap-pw">
<label for="pw">비밀번호</label>
<input type="password" class="pw" name="pw" id="pw" required />
</div>
<button type="submit" class="login-button">로그인</button>
</div>
</fieldset>
</form>
<div class="easy-login">
<p class="gray800">간편 로그인하기</p>
<div class="ic-sns">
<a href="https://www.google.com/" target="_blank"><img src="./img/ic_google.png" alt="구글 간편 로그인" /></a>
<a href="https://www.kakaocorp.com/page/" target="_blank"><img src="./img/ic_kakaotalk.png" alt="카카오톡 간편 로그인" /></a>
</div>
</div>
<div class="link-signup gray800">
<p>판다마켓이 처음이신가요?</p>
<a href="./signup.html">회원가입</a>
</div>
</div>
</div>
</div>
</body>
</html>

17 changes: 1 addition & 16 deletions reset.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
/* reset.css */

/* 모든 요소의 margin과 padding을 0으로 초기화 */
*,
*::before,
*::after {
Expand All @@ -9,44 +7,37 @@
box-sizing: border-box;
}

/* 기본적인 폰트 설정 (웹사이트의 기본 폰트) */
body {
font-family: 'Pretendard', sans-serif;
word-break: keep-all;
}

/* 텍스트 링크 스타일 초기화 */
a {
text-decoration: none;
color: inherit;
}

/* 기본적으로 목록 스타일 초기화 */
ul, ol {
list-style: none;
}

/* 테이블의 기본 스타일 초기화 */
table {
border-collapse: collapse;
width: 100%;
}

/* 이미지 기본 스타일 초기화 */
img {
max-width: 100%;
height: auto;
}

/* 버튼 기본 스타일 초기화 */
button {
font-family: 'Pretendard', sans-serif;
font-family: inherit;
background: none;
border: none;
cursor: pointer;
}

/* 폼 입력 요소 초기화 */
input,
textarea,
select {
Expand All @@ -56,13 +47,7 @@ select {
font-size: inherit;
}

/* 기본적으로 모든 div와 span의 스타일 초기화 */
div,
span {
display: block;
}

/* 기본적으로 모든 요소에 대해 불필요한 여백 제거 */
body, h1, h2, h3, h4, h5, h6, p {
margin-bottom: 0;
}
62 changes: 62 additions & 0 deletions signup.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>판다마켓 회원가입 페이지</title>

<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard-dynamic-subset.css" />
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="colors.css">
</head>

<body>
<div class="wrap-userinfo wrap-signup">
<div class="box-userinfo">
<div class="wrap-logo">
<a href="./index.html"><img src="./img/logo.png" alt="판다마켓" /></a>
</div>
<div class="wrap-userform">
<form action="" method="POST" autocomplete="on">
<fieldset>
<legend>판다마켓 회원가입</legend>
<div class="main-signup">
<div class="wrap-input wrap-email">
<label for="email">이메일</label>
<input type="email" class="email" name="email" id="email" placeholder="[email protected]" required />
</div>
<div class="wrap-input wrap-nickname">
<label for="nickname">닉네임</label>
<input type="text" class="nickname" name="nickname" id="nickname" placeholder="판다" required />
</div>
<div class="wrap-input wrap-pw">
<label for="pw">비밀번호</label>
<input type="password" class="pw" name="pw" id="pw" required />
</div>
<div class="wrap-input wrap-pwcheck">
<label for="pwcheck">비밀번호 확인</label>
<input type="text" class="pwcheck" name="pwcheck" id="pwcheck" required />
Comment on lines +39 to +40
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.

👍 칭찬
label과 Input을 연결해주신 점 좋습니다~

</div>
<button type="submit" class="signup-button">회원가입</button>
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.

💬 여담
button 태그의 type 속성들을 잘 명시해주셨어요~

참고로 type이 submit인 button의 경우 form에서 제출 이벤트가 발생하면, 해당 요소의 onclick 이벤트가 실행되게 됩니다.
이를 더 풀어서 말하자면 form 태그안의 input, button 과 같은 상호작용 요소에서 submit 이벤트, enter key 입력이 발생하면 해당 form 에서의 submit 이벤트가 실행된다는 것입니다.
유저 입장에서는 로그인이나 회원가입시 input, button에서 enter를 누르면 제출되는 것에 익숙하기 때문에 이를 신경써주시는 것이 좋습니다~

// case1: form에 onsubmit 이벤트 명시
<form onsubmit="login">
  <input /> // input에서 enter 키 입력시 onsubmit 이벤트 실행
  <button type="submit">login</button> // 해당 버튼 클릭 시 onsubmit 이벤트 실행
</form>

// case2: submit 버튼에 onclick 이벤트 명시
<form>
  <input /> // input에서 enter 키 입력시 button의 onclick 이벤트 실행
  <button type="submit" onclick="login">login</button>
</form>

mdn button

</div>
</fieldset>
</form>
<div class="easy-login">
<p class="gray800">간편 로그인하기</p>
<div class="ic-sns">
<a href="https://www.google.com/" target="_blank"><img src="./img/ic_google.png" alt="구글 간편 로그인" /></a>
<a href="https://www.kakaocorp.com/page/" target="_blank"><img src="./img/ic_kakaotalk.png" alt="카카오톡 간편 로그인" /></a>
</div>
</div>
<div class="link-signup gray800">
<p>이미 회원이신가요?</p>
<a href="./login.html">로그인</a>
</div>
</div>
</div>
</div>
</body>
</html>

Binary file added sprint-mission2-login.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.
Binary file added sprint-mission2-signup.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.
Loading
Loading