Skip to content

[정해성] sprint3 #125

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 3 commits into from
May 2, 2025
Merged

[정해성] sprint3 #125

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
39d3992
스프린트 미션3 1차 완성본
Sea0Soda Apr 25, 2025
d407c34
스프린트 미션3 2차 완성본
Sea0Soda Apr 28, 2025
3b56e6c
style: 피드백 기반 스타일 구조 개선 및 반응형 최적화
Sea0Soda 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
46 changes: 38 additions & 8 deletions .github/pull_request_template.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,24 +2,54 @@

### 기본

- [x]
- []
- []
- [x] Github에 PR(Pull Request)을 만들어서 미션을 제출합니다.
- [x] 피그마 디자인에 맞게 페이지를 만들어 주세요.
- [x] React와 같은 UI 라이브러리를 사용하지 않고 진행합니다.

### 심화
### 체크리스트 [기본]

- [x]
- []
#### 공통

- [x] Viewport 너비 기준 반응형 디자인 적용
- [x] PC: 1200px 이상
- [x] Tablet: 768px 이상 ~ 1199px 이하
- [x] Mobile: 375px 이상 ~ 767px 이하
- [x] 375px 미만 사이즈는 고려하지 않음

#### 랜딩 페이지

- [x] Tablet: 로고 좌측 24px, 로그인 버튼 우측 24px 여백 유지
- [x] Mobile: 로고 좌측 16px, 로그인 버튼 우측 16px 여백 유지
- [x] 화면이 줄어들면 푸터 영역 간격이 줄어듦

#### 로그인 & 회원가입 페이지 공통

- [x] Tablet: PC 디자인 동일하게 유지
- [x] Mobile: 좌우 여백 16px, 요소 최대 너비 400px 제한

### 체크리스트 [심화]

- [x] 랜딩 페이지에 Open Graph 메타 태그 적용
- [ ] 제목: “판다 마켓”
- [ ] 설명: “일상의 모든 물건을 거래해보세요”
- [ ] 주소/이미지: 자유 설정

---

## 주요 변경사항

-
-
- 반응형 레이아웃 구현
- 메타 태그 설정 (OG 태그)
- 모바일 최적화 스타일링 반영

---

## 스크린샷

![image](이미지url)

---

## 멘토에게

-
Expand Down
121 changes: 82 additions & 39 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,27 +9,30 @@
<body>
<header>
<div class="header-inner">
<a class="logo" href="/" aria-label="홈페이지로 이동합니다">
<img
class="logo_img"
src="./assets/icons/panda_logo.svg"
alt="판다마켓 로고 이미지"
/>
<h1>판다마켓</h1>
</a>
<a class="login" href="/login">로그인</a>
</div>
<a class="logo" href="/" aria-label="홈페이지로 이동합니다">
<img
class="logo_img"
src="./assets/icons/panda_logo.svg"
alt="판다마켓 로고 이미지"
/>
<h1>판다마켓</h1>
</a>
<a class="login" href="/login">로그인</a>
</div>
</header>
<div class="banner">
<div class="banner-container">
<div class="banner-content">
<p class="banner-text">
일상의 모든 물건을<br />
거래해 보세요
일상의 모든 물건을<br class="line-break-main" />거래해 보세요
</p>
<a href="href_link/item.html" class="button">구경하러 가기</a>
</div>
<img src="assets/images/banner.png" alt="판다마켓 상품 홍보 배너" />
<img
src="assets/images/banner.png"
alt="판다마켓 상품 홍보 배너"
class="first_banner_img"
/>
</div>
</div>
<div class="banner_2">
Expand All @@ -44,11 +47,12 @@ <h1>판다마켓</h1>
<div class="banner-text-right">
<div class="hot_logo">Hot Item</div>
<div class="hot_main">
인기 상품을<br />
인기 상품을<span class="line-break"> <br /> </span>
확인해 보세요
</div>
<div class="hot_footer">
가장 HOT한 중고거래 물품을 판다 마켓에서 확인해 보세요
가장 HOT한 중고거래 물품을 <br />
판다 마켓에서 확인해 보세요
</div>
</div>
</div>
Expand All @@ -58,7 +62,7 @@ <h1>판다마켓</h1>
<div class="search-section">
<div class="banner3-search">Search</div>
<div class="banner3-main">
구매를 원하는<br />
구매를 원하는<span class="line-break"> <br /> </span>
상품을 검색하세요
</div>
<div class="banner3-footer">
Expand All @@ -67,7 +71,11 @@ <h1>판다마켓</h1>
</div>
</div>
<div class="banner3-right">
<img src="assets/images/Img_home_02.png" alt="상품 검색 배너" />
<img
src="assets/images/Img_home_02.png"
alt="상품 검색 배너"
class="banner3_img"
/>
</div>
</div>
</div>
Expand All @@ -81,44 +89,79 @@ <h1>판다마켓</h1>
<div class="register-section">
Register
<div class="banner4_main">
판매를 원하는<br />
판매를 원하는<span class="line-break"> <br /> </span>
상품을 등록하세요
</div>
<div class="banner4_footer">
어떤 물건이든 판매하고 싶은 상품을 쉽게 등록하세요
어떤 물건이든 판매하고 싶은 상품을<br />
쉽게 등록하세요
</div>
</div>
</div>
</div>
<div class="banner5">
<div class="banner5_container">
<div class="banner5_left">믿을 수 있는<br> 판다마켓 중고 거래</div>
<img src="assets/images/Img_home_bottom.png" alt="팬더둘이 서로 손흔들며 소통하고있는 사진" />
<div class="banner5_left">
믿을 수 있는<br />
판다마켓 중고 거래
</div>
<img
src="assets/images/Img_home_bottom.png"
alt="팬더둘이 서로 손흔들며 소통하고있는 사진"
class="banner5_img"
loading="lazy"
/>
</div>
</div>

<footer>
<div class="footer_container">
<div class="footer_content">
<span>©codeit - 2024</span>
<div class="footer_center">
<a class="privacy" href="href_link/privacy_policy.html">Privacy Policy</a>
<a class="faq" href="href_link/FAQ.html">FAQ</a>
</div>
<div class="footer_icons">
<a href="https://www.facebook.com/" target="_blank" rel="noopener noreferrer">
<img src="assets/icons/ic_facebook.png" alt="페이스북으로 이동하는 아이콘">
</a>
<a href="https://x.com/" target="_blank" rel="noopener noreferrer">
<img src="assets/icons/ic_twitter.png" alt="트위터로 이동하는 아이콘">
</a>
<a href="https://youtube.com/" target="_blank" rel="noopener noreferrer">
<img src="assets/icons/ic_youtube.png" alt="유튜브로 이동하는 아이콘">
</a>
<a href="https://instagram.com/" target="_blank" rel="noopener noreferrer">
<img src="assets/icons/ic_instagram.png" alt="인스타그램으로 이동하는 아이콘">
</a>
</div>
<div class="footer_center">
<a class="privacy" href="href_link/privacy_policy.html"
>Privacy Policy</a
>
<a class="faq" href="href_link/FAQ.html">FAQ</a>
</div>
<div class="footer_icons">
<a
href="https://www.facebook.com/"
target="_blank"
rel="noopener noreferrer"
>
<img
src="assets/icons/ic_facebook.png"
alt="페이스북으로 이동하는 아이콘"
/>
</a>
<a href="https://x.com/" target="_blank" rel="noopener noreferrer">
<img
src="assets/icons/ic_twitter.png"
alt="트위터로 이동하는 아이콘"
/>
</a>
<a
href="https://youtube.com/"
target="_blank"
rel="noopener noreferrer"
>
<img
src="assets/icons/ic_youtube.png"
alt="유튜브로 이동하는 아이콘"
/>
</a>
<a
href="https://instagram.com/"
target="_blank"
rel="noopener noreferrer"
>
<img
src="assets/icons/ic_instagram.png"
alt="인스타그램으로 이동하는 아이콘"
/>
</a>
</div>
</div>
</div>
</footer>
Expand Down
10 changes: 7 additions & 3 deletions login/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,11 @@
<div class="page-wrapper">
<div class="login_container">
<a href="/" class="login_logo">
<img src="/assets/icons/판다 얼굴.png" />
<img
src="/assets/icons/판다 얼굴.png"
class="logo_img"
alt="판다 로고"
/>
<span class="logo_text">판다마켓</span>
</a>
<form class="login_form_container">
Expand All @@ -21,7 +25,7 @@
name="email"
type="email"
class="login_input"
placeholder="[email protected]"
placeholder="이메일을 입력해주세요"
autocomplete="email"
/>
<label for="password" class="password_label">비밀번호</label>
Expand All @@ -31,7 +35,7 @@
id="password"
name="password"
class="login_input"
placeholder="●●●●●●●●"
placeholder="비밀번호를 입력해주세요"
/>
<button
type="button"
Expand Down
54 changes: 50 additions & 4 deletions login/login.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,18 @@ html {
font-family: 'Pretendard-Regular';
}

:root {
--container-max-width: 400px;
--container-padding: 0 16px;
}

@media (min-width: 768px) and (max-width: 1199px) {
:root {
--container-max-width: 640px;
--container-padding: 0 24px;
}
}

.page-wrapper {
display: flex;
align-items: center;
Expand Down Expand Up @@ -162,11 +174,10 @@ html {
}

.login_footer {
margin-bottom: 0;
margin-top: 8px;
text-align: center;
font-size: 12px;
color: var(--gray500);
position: absolute;
bottom: 16px;
}

Expand Down Expand Up @@ -209,10 +220,45 @@ html {
}

.signup_container .login_footer {
position: absolute;
bottom: -30px;
width: 100%;
text-align: center;
font-size: 12px;
color: var(--gray500);
}

/* 모바일 화면 (최대 767px)용 반응형 스타일 */

@media (max-width: 767px) {
.login_container,
.signup_container {
width: 100%;
max-width: 400px;
padding: 0 16px;
box-sizing: border-box;
}
.logo_img {
width: 52px;
height: 52px;
object-fit: contain;
}

.logo_text {
font-size: 33.17px;
margin-left: 8px;
}

.login_logo {
display: flex;
align-items: center;
gap: 0;
width: fit-content;
}
}

@media (min-width: 768px) and (max-width: 1199px) {
.login_container,
.signup_container {
padding: 0 24px;
max-width: 640px;
}
}
Loading
Loading