Skip to content

[정상인] sprint3 #85

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
kiJu2 merged 11 commits into from
Jul 19, 2025
Merged

[정상인] sprint3 #85

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
2f2ba51
style: rename folder and file name
SanginJeong Jul 16, 2025
6f814b1
style: reapply prettier
SanginJeong Jul 16, 2025
a28ace1
chore: convert PNG to SVG VectorImg
SanginJeong Jul 16, 2025
f1fdcb4
refactor: Change href after renaming file and folder
SanginJeong Jul 16, 2025
b191eb6
chore: add .gitignore and ignore .DS_Store
SanginJeong Jul 16, 2025
af19623
chore: remove tracked .DS_Store and add to .gitignore
SanginJeong Jul 16, 2025
c08402b
style: mobile layout
SanginJeong Jul 18, 2025
2734e3d
style: footer layout index.html
SanginJeong Jul 18, 2025
abac476
style: mobile layout loginPage
SanginJeong Jul 18, 2025
bad1c99
style: mobile layout signupPage
SanginJeong Jul 18, 2025
7459157
feat: append Open Graph
SanginJeong Jul 18, 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 removed .DS_Store
View file
Open in desktop
Binary file not shown.
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Copy link
Collaborator

@kiJu2 kiJu2 Jul 19, 2025

Choose a reason for hiding this comment

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

굿굿! gitignore를 추가하셨군요 👍👍

이제 형상관리를 더욱 체계적으로 관리해봅시다 😉

Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
.DS_Store
Binary file removed images/btn_visibility_on_24px.png
View file
Open in desktop
Binary file not shown.
3 changes: 3 additions & 0 deletions images/visibility-icon.svg
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.
40 changes: 26 additions & 14 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,16 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta property="og:title" content="판다마켓" />
<meta
property="og:url"
content="https://panda-market-sanginjeong.netlify.app/"
/>
<meta property="og:description" content="일상의 모든 물건을 거래해보세요" />
Comment on lines +6 to +11
Copy link
Collaborator

@kiJu2 kiJu2 Jul 19, 2025

Choose a reason for hiding this comment

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

훌륭합니다 ! 메타태그를 잘 적용하셨네요 ~! 👍

<meta
property="og:image"
content="https://panda-market-sanginjeong.netlify.app/images/logo.png"
/>
Comment on lines +12 to +15
Copy link
Collaborator

@kiJu2 kiJu2 Jul 19, 2025

Choose a reason for hiding this comment

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

굿굿 ! og 이미지까지 적용 너무 좋습니다 ! 👍

다만, 도메인이 변경된다면 해당 코드도 수정되겠군요 !
앞의 URL을 생략해볼 수도 있을 것 같아요 !

Suggested change
<meta
property="og:image"
content="https://panda-market-sanginjeong.netlify.app/images/logo.png"
/>
<meta
property="og:image"
content="/images/logo.png"
/>

<title>판다마켓</title>
<link rel="shortcut icon" href="./images/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="./pages/homePage/index.style.css" />
Expand All @@ -17,18 +27,20 @@
alt="nav-logo"
style="width: 153px; height: 51px"
/></a>
<a href="./pages/login and signup/loginPage/login.html"><button class="login-btn">로그인</button></a>
<a href="./pages/loginAndSignupPage/loginPage/login.html"
><button class="login-btn">로그인</button></a
>
</nav>
</header>

<section class="landing">
<section class="landing landing-top">
<div class="container">
<div class="landing-area">
<div class="landing-area-left">
<h1 class="description">
일상의 모든 물건을<br />
거래해 보세요
</h1>
<h2 class="description">
<span>일상의 모든 물건을</span>
<span>거래해 보세요</span>
</h2>
Comment on lines +40 to +43
Copy link
Collaborator

@kiJu2 kiJu2 Jul 19, 2025

Choose a reason for hiding this comment

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

h 태그는 순차적으로 기입하는 것을 권장드립니다 !

h1 다음은 h2. 그리고 h3...
이런식으로 순차적으로 기입할 것을 MDN에서 권장하고 있습니다. 😊
현재 상인님의 코드는 h1이 생략 된 후 h2부터 시작하는 것으로 보이네요 😉

MDN: 제목 단계를 건너뛰는 것을 피하세요. 언제나 <h1>로 시작해서, <h2>, 순차적으로 기입하세요.

<a href="/items"
><button class="items-btn">구경하러 가기</button></a
>
Expand Down Expand Up @@ -57,23 +69,23 @@ <h1 class="description">
<p class="title">Hot item</p>
<div>
<h2 class="description">
인기 상품을<br />
확인해 보세요
<span>인기 상품을</span>
<span>확인해 보세요</span>
</h2>
<p class="sub-description">
가장 HOT한 중고거래 물품을<br />
span가장 HOT한 중고거래 물품을<br />
판다 마켓에서 확인해 보세요
</p>
</div>
</div>
</section>

<section class="main-wrap container">
<section class="main-wrap container section-search">
<div class="search-left">
<p class="title">Search</p>
<h2 class="description">
구매를 원하는<br />
상품을 검색하세요
<span>구매를 원하는</span>
<span>상품을 검색하세요</span>
</h2>
<p class="sub-description">
구매하고 싶은 물품은 검색해서<br />
Expand Down Expand Up @@ -101,8 +113,8 @@ <h2 class="description">
<p class="title">Register</p>
<div>
<h2 class="description">
판매를 원하는<br />
상품을 등록하세요
<span>판매를 원하는</span>
<span>상품을 등록하세요</span>
</h2>
<p class="sub-description">
어떤 물건이든 판매하고 싶은 상품을<br />
Expand Down
100 changes: 94 additions & 6 deletions pages/homePage/index.style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ nav {
}

.landing {
background-color: #CFE5FF;
background-color: #cfe5ff;
width: 100%;
height: 540px;
}
Expand All @@ -55,24 +55,27 @@ nav {
display: flex;
}

.landing-area-left{
.landing-area-left {
flex: 4;
display: flex;
flex-direction: column;
justify-content: center;
gap: 32px;
}

.landing-area-right{
.landing-area-right {
flex: 8;
}

.description {
font-weight: 700;
font-size: 40px;
line-height: 140%;
gap: 5px;
margin: 0;
color: var(--gray700);
display: flex;
flex-direction: column;
}

.sub-description {
Expand All @@ -87,13 +90,16 @@ nav {
gap: 64px;
width: 988px;
padding: 138px 0;
box-sizing: border-box;
}

.hot-item-left, .register-left {
.hot-item-left,
.register-left {
flex: 7;
}

.hot-item-right, .register-right {
.hot-item-right,
.register-right {
flex: 5;
display: flex;
flex-direction: column;
Expand Down Expand Up @@ -138,7 +144,7 @@ footer {
align-items: center;
}

.footer-left > p{
.footer-left > p {
color: var(--gray400);
}

Expand All @@ -158,3 +164,85 @@ footer {
align-items: center;
gap: 12px;
}

@media screen and (max-width: 1199px) {
Copy link
Collaborator

@kiJu2 kiJu2 Jul 19, 2025

Choose a reason for hiding this comment

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

굿굿 ! 미디어 쿼리를 잘 적용하셨네요 👍

header {
padding: 9px 24px;
}
Comment on lines +169 to +171
Copy link
Collaborator

@kiJu2 kiJu2 Jul 19, 2025

Choose a reason for hiding this comment

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

(제안) 만약 스타일 선택자 목적이라면 태그보다는 class를 선택자로 사용하는게 어떨까요?

클래스는 재사용이 가능하며, 자유롭게 태그에 스타일을 붙일 수 있어서 유지보수에 용이하므로 단순히 스타일을 위해서라면 class를 추천드려요 !

좀 더 자세히 🤔

유지보수가 어려워질 수 있어요.

특정 p 태그에만 다른 스타일을 적용하려면 추가적인 선택자를 작성하거나 기존 스타일을 덮어써야 하므로 유지보수가 어려워집니다.

태그 의미를 명확히 부여하기 어려워요.

스타일링을 태그에 직접 적용하면, 태그가 어떤 의미를 가지는지 어렵기에 가독성이 보다 좋지 못할 수 있어요.

만약 다음 코드의 스타일을 태그 선택자로만 지정한다면 ?

<p class="error-message">오류가 발생했습니다.</p>

물론 전역적인 것을 의미한다면 일정 허용될 수 있어요.

예를 들어서 p의 기본 마진을 없애고 싶다면 다음과 같이 작성할 수 있을거예요:

p {
    margin: 0;
}

그렇지만 특정 스타일을 지정하고 싶다면 다음과 같이 작성해볼 수 있어요:

.paragraph {
    font-size: 16px;
    color: #333;
}

.highlight {
    background-color: yellow;
}

.container {
width: 100%;
}
.main-wrap {
padding: 24px;
}

.landing {
height: 927px;
}

.landing-top {
padding-top: 74px;
}

.landing-top a {
text-align: center;
}
.landing-area {
flex-direction: column;
align-items: center;
height: 100%;
}

.landing-area-right {
flex: none;
}

.description {
flex-direction: row;
}

.main-wrap {
flex-direction: column;
gap: 24px;
}

.section-search {
flex-direction: column-reverse;
}

.footer-area {
width: 536px;
}
}

@media screen and (max-width: 767px) {
header {
padding: 9px 16px;
}

.description{
flex-direction: column;
}

.landing-top .description {
align-items: center;
}

.items-btn {
padding: 12px 71px;
width: 100%;
}

footer {
position: relative;
}
Comment on lines +236 to +238
Copy link
Collaborator

@kiJu2 kiJu2 Jul 19, 2025

Choose a reason for hiding this comment

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

해당 태그 스타일도 같은 피드백에 해당됩니다 ~!

footer나 header는 하나의 문서에 여러개 존재할 수 있으므로 제안드려봅니다 😉


.footer-area {
width: 311px;
}

.footer-left {
position: absolute;
bottom: 20%;
}
}
24 changes: 24 additions & 0 deletions ...login and signup/login & signup.style.css → ...ginAndSignupPage/loginAndSignup.style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,12 @@
text-align: center;
}

.form-logo {
width: 396px;
height: 132px;
margin-bottom: 24px;
}

.login-signup-form {
display: flex;
flex-direction: column;
Expand Down Expand Up @@ -117,3 +123,21 @@
color: var(--blue);
line-height: 100%;
}

.disabled {
background-color: var(--gray400);
}

@media screen and (max-width: 767px) {
.form-logo {
width: 198px;
height: 66px;
}
.wrap {
max-width: 400px;
margin: 0 auto;
}
.form-area {
padding: 231px 16px;
}
}
34 changes: 20 additions & 14 deletions pages/login and signup/loginPage/login.html → ...s/loginAndSignupPage/loginPage/login.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,36 +3,42 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>판다마켓 - 로그인</title>
<link rel="shortcut icon" href="../../../images/favicon.ico" type="image/x-icon">
<link
rel="shortcut icon"
href="../../../images/favicon.ico"
type="image/x-icon"
/>
<link rel="stylesheet" href="../../../style.css" />
<link rel="stylesheet" href="../login & signup.style.css" />
<link rel="stylesheet" href="../loginAndSignup.style.css" />
</head>
<body>
<main class="wrap">
<div class="form-area">
<div class="form-logo-area">
<a href="../../../index.html">
<img
src="../../../images/logo.png"
alt="logo"
style="width: 396px; height: 132px"
/>
<img class="form-logo" src="../../../images/logo.png" alt="logo" />
</a>
</div>
<form class="login-signup-form">
<label class="form-label">이메일</label>
<input class="form-input" type="email" />
<input
class="form-input"
type="email"
placeholder="이메일을 입력해주세요"
/>
<label class="form-label">비밀번호</label>
<div class="password-input-area">
<input class="form-input" type="password" style="width: 100%" />
<input
class="form-input"
type="password"
style="width: 100%"
placeholder="비밀번호를 입력해주세요"
/>
<button type="button" class="visibility-img">
<img
src="../../../images/btn_visibility_on_24px.png"
alt="visibility"
/>
<img src="../../../images/visibility-icon.svg" alt="visibility" />
</button>
</div>
<button class="form-submit-btn">로그인</button>
<button class="form-submit-btn disabled" disabled>로그인</button>
Copy link
Collaborator

@kiJu2 kiJu2 Jul 19, 2025

Choose a reason for hiding this comment

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

(심화/생각해보기/제안) submit-btn은 '기능'을 의미해요. 스타일 이름은 "어떤 스타일인지"를 목표로 네이밍을 작성해보면 어떨까요?

Suggested change
<button class="form-submit-btn disabled" disabled>로그인</button>
<button class="button button-primary">로그인</button>

만약, 현재 submit-btn과 같은 스타일의 "장바구니에 담기" 라는 버튼이 존재한다면 클래스 이름이 어떻게 될까요?

submit-btn 클래스로 작성한다면 submit이라는 "기능"을 목적으로 하는 클래스 이름을 넣게 될거예요. 혹은 중복된 스타일과 다른 클래스 이름인 button-add-wish와 같은 클래스 이름을 가지게 돼요. 이는 재사용성을 저하시킬거예요.
차라리 해당 클래스가 "어떤 스타일을 포함하는가?"에 목적을 두어 네이밍을 한다면 더욱 재사용하기 용이할거라고 생각해서 제안드립니다 😊

priamry: 주로 브랜드의 주요 컬러를 의미합니다 ! 😊 판다마켓의 경우 파란색이죠 !

</form>

<div class="easy-login-area">
Expand Down
Loading
Loading