Skip to content

[정지원] sprint3 #132

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
dongqui merged 5 commits into from
Apr 17, 2025
Merged

[정지원] sprint3 #132

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
adf9f22
refactor: 미션2 피드백 반영
Jiw0nJ Apr 14, 2025
f71bc5e
feat: index.html 부분 반응형 디자인 적용
Jiw0nJ Apr 16, 2025
298bb5c
feat: auth(login, signup) 기능 반응형 디자인 적용
Jiw0nJ Apr 16, 2025
5633a30
feat: 미리보기 meta 태그 추가
Jiw0nJ Apr 16, 2025
c640eac
refactor: 스프린트 미션3 완료
Jiw0nJ Apr 16, 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
Binary file added images/logo/og-img.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 images/logo/pandaMarket-Logo-mobile.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 modified images/logo/pandaMarket-Logo.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.
25 changes: 16 additions & 9 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,13 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta property="og:image" content="/images/logo/og-img.png" />
Copy link
Collaborator

@dongqui dongqui Apr 17, 2025

Choose a reason for hiding this comment

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

og 태그를 잘 넣어주셨네요! 👍

<meta
property="og:url"
content="https://sprintmission-jiwon.netlify.app/"
/>
<meta property="og:title" content="판다마켓" />
<meta property="og:description" content="일상의 모든 물건을 거래해보세요" />
<title>판다마켓</title>
<link rel="icon" href="/images/logo/favicon.ico" />
<link
Expand All @@ -21,8 +28,8 @@
<a href="/"
><img
class="logo"
src="/images/logo/pandaMarket-Logo.png"
alt="판다마켓 logo"
src="/images/logo/pandaMarket-Logo-mobile.png"
alt="판다마켓 로고"
/></a>
<a id="linkToLogin" class="button" href="login.html">로그인</a>
</header>
Expand Down Expand Up @@ -58,7 +65,12 @@
</p>
</div>
</div>
<div class="content">
<div class="content reverse">
<img
class="content-img"
src="/images/home/Img_content_02.png"
alt="상품 검색"
/>
<div class="content-description">
<div class="content-tag">Search</div>
<div class="content-title">
Expand All @@ -70,11 +82,6 @@
쉽게 찾아보세요
</p>
</div>
<img
class="content-img"
src="/images/home/Img_content_02.png"
alt="상품 검색"
/>
</div>
<div class="content">
<img
Expand Down Expand Up @@ -108,7 +115,7 @@

<!-- footer -->
<footer>
<div>@codeit - 2025</div>
<div class="copyright">@codeit - 2025</div>
<div class="footer-menu">
<a href="privacy.html">Privacy Policy</a>
<a href="faq.html">FAQ</a>
Expand Down
36 changes: 22 additions & 14 deletions login.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
<img
src="/images/logo/pandaMarket-Logo.png"
alt="판다마켓 logo"
width="396"
width="198"
Copy link
Collaborator

@dongqui dongqui Apr 17, 2025

Choose a reason for hiding this comment

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

반응형에 따른 초기 이미지 크기를 정하기 위해 picture를 사용하실 수 있어요!

/>
</a>
</div>
Expand All @@ -48,31 +48,39 @@
name="password"
placeholder="비밀번호를 입력해주세요"
/>
<img
src="/images/icon/auth/eye-invisible.svg"
alt="비밀번호 숨김"
class="password-show"
width="24"
/>
<button class="password-show">
<img
src="/images/icon/auth/eye-invisible.svg"
alt="비밀번호 숨김"
width="24"
/>
</button>
</div>
</div>
<!-- 나중에 페이지 연결 예정 -->
<a href="#" id="auth-button" class="button btn-round">로그인</a>
<button type="submit" class="button btn-round auth-button" disabled>
로그인
</button>
</form>

<!-- 간편 로그인 -->
<div class="login-simple">
<div class="login-simple-title">간편 로그인 하기</div>
<div class="login-simple-social">
<a href="https://www.google.com/"
><img
<a href="https://www.google.com/">
<img
src="/images/icon/sns/google.png"
alt="google login"
width="42"
/></a>
<a href="https://www.kakaocorp.com/page/"
><img src="/images/icon/sns/kakao.png" alt="kakao login" width="42"
/></a>
/>
</a>
<a href="https://www.kakaocorp.com/page/">
<img
src="/images/icon/sns/kakao.png"
alt="kakao login"
width="42"
/>
</a>
</div>
</div>

Expand Down
32 changes: 18 additions & 14 deletions signup.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
<img
src="/images/logo/pandaMarket-Logo.png"
alt="판다마켓 logo"
width="396"
width="198"
/>
</a>
</div>
Expand Down Expand Up @@ -56,12 +56,13 @@
name="password"
placeholder="비밀번호를 입력해주세요"
/>
<img
src="/images/icon/auth/eye-invisible.svg"
alt="비밀번호 숨김"
class="password-show"
width="24"
/>
<button class="password-show">
<img
src="/images/icon/auth/eye-invisible.svg"
alt="비밀번호 숨김"
width="24"
/>
</button>
</div>
</div>
<div class="input-form">
Expand All @@ -73,16 +74,19 @@
name="verifyPassword"
placeholder="비밀번호를 다시 입력해주세요"
/>
<img
src="/images/icon/auth/eye-visible.svg"
alt="비밀번호 보임"
class="password-show"
width="24"
/>
<button class="password-show">
<img
src="/images/icon/auth/eye-visible.svg"
alt="비밀번호 보임"
width="24"
/>
</button>
</div>
</div>
<!-- 나중에 페이지 연결 예정 -->
<a href="#" id="auth-button" class="button btn-round">회원가입</a>
<button type="submit" class="button btn-round auth-button" disabled>
회원가입
</button>
</form>

<!-- 간편 로그인 -->
Expand Down
68 changes: 58 additions & 10 deletions styles/auth.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,36 @@
.auth-container {
max-width: 640px;
margin: 60px auto;
max-width: 400px;
width: 100%;
margin: 24px auto;
padding: 0 16px;
color: var(--gray800);
}

/* 로고 */
.logo-wrapper {
text-align: center;
margin-bottom: 40px;
margin-bottom: 24px;
}

/* 로그인 폼 */
.input-form {
.auth-container form {
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 24px;
}

.input-form {
display: flex;
flex-direction: column;
gap: 8px;
}

.input-form label {
display: block;
font-weight: 700;
font-size: var(--font-size-2lg);
line-height: var(--line-height-2lg);
margin-bottom: 16px;
font-size: var(--font-size-md);
line-height: var(--line-height-md);
}

input {
Expand All @@ -31,6 +41,10 @@ input {
background-color: var(--gray100);
}

input::placeholder {
color: var(--gray400);
}

input:focus {
outline-color: var(--primary100);
}
Expand All @@ -47,9 +61,8 @@ input:focus {
cursor: pointer;
}

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

/* 간편 로그인하기 */
Expand All @@ -60,7 +73,6 @@ input:focus {
background-color: #e6f2ff;
border-radius: 8px;
margin-bottom: 24px;

display: flex;
align-items: center;
justify-content: space-between;
Expand Down Expand Up @@ -89,3 +101,39 @@ input:focus {
color: var(--primary100);
text-decoration: underline;
}

@media (min-width: 768px) {
.auth-container {
max-width: 640px;
margin: 48px auto;
padding: 0;
}

/* 로고 */
.logo-wrapper {
margin-bottom: 40px;
}

.logo-wrapper img {
width: 396px;
}
/* 로그인 폼 */
.auth-container form {
gap: 24px;
}

.input-form {
gap: 16px;
}

.input-form label {
font-size: var(--font-size-2lg);
line-height: var(--line-height-2lg);
}
}

@media (min-width: 1200px) {
.auth-container {
margin: 60px auto;
}
}
56 changes: 43 additions & 13 deletions styles/global.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,14 +68,8 @@ img {
vertical-align: bottom;
}

span {
font-size: 40px;
font-weight: 700;
line-height: 56px;
letter-spacing: 0.02em;
}

/* ------------------------------------- */
/* Mobile First로 진행(Mobile → Tablet → PC)*/

body {
color: var(--gray700);
Expand All @@ -86,7 +80,7 @@ body {
header {
width: 100%;
height: 70px;
padding: 0 200px;
padding: 0 16px;
display: flex;
align-items: center;
justify-content: space-between;
Expand All @@ -99,20 +93,21 @@ header {
}

footer {
width: 100%;
height: 160px;
padding: 32px 400px 108px;
padding: 32px 32px 30px;
color: var(--gray400);
background-color: var(--gray900);
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 60px;
}

.container {
max-width: 1120px;
margin: 0 auto;
width: 100%;
padding: 0 16px;
}

.button {
Expand All @@ -125,9 +120,9 @@ footer {
}

.btn-round {
font-size: var(--font-size-xl);
font-size: var(--font-size-2lg);
font-weight: 600;
padding: 16px 124px;
padding: 12px 71px;
border-radius: 9999px;
}

Expand All @@ -144,3 +139,38 @@ footer {
cursor: default;
pointer-events: none;
}

@media (min-width: 768px) {
Copy link
Collaborator

@dongqui dongqui Apr 17, 2025

Choose a reason for hiding this comment

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

레이아웃과 관련된 부분들은 이제 슬슬 global에서 분리해도 좋을 거 같네요~!
image
불필요하게 리소스가 받아지고 있습니다 :)

header {
padding: 0 24px;
}

footer {
padding: 32px 104px 108px 104px;
}

.container {
padding: 0 24px;
}

.btn-round {
font-size: var(--font-size-xl);
font-weight: 600;
padding: 16px 124px;
border-radius: 9999px;
}
}

@media (min-width: 1200px) {
header {
padding: 0 200px;
}

footer {
padding: 32px 200px 108px 200px;
}

.container {
padding: 0;
}
}
Loading
Loading