[정상인] sprint3 #85

SanginJeong · 2025-07-18T08:27:38Z

요구사항

기본

배포링크

공통

브라우저에 현재 보이는 화면의 영역(viewport) 너비를 기준으로 분기되는 반응형 디자인을 적용합니다.
PC: 1200px 이상
Tablet: 768px 이상 ~ 1199px 이하
Mobile: 375px 이상 ~ 767px 이하
375px 미만 사이즈의 디자인은 고려하지 않습니다

랜딩 페이지

Tablet 사이즈로 작아질 때 “판다마켓” 로고의 왼쪽에 여백 24px, “로그인” 버튼 오른쪽 여백 24px을 유지할 수 있도록 “판다마켓” 로고와 “로그인" 버튼의 간격이 가까워집니다.
Mobile 사이즈로 작아질 때 “판다마켓” 로고의 왼쪽에 여백 16px, “로그인” 버튼 오른쪽 여백 16px을 유지할 수 있도록 “판다마켓” 로고와 “로그인" 버튼의 간격이 가까워집니다.
화면 영역이 줄어들면 “Privacy Policy”, “FAQ”, “codeit-2024”이 있는 영역과 SNS 아이콘들이 있는 영역의 간격이 줄어듭니다.

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

Tablet 사이즈에서 내부 디자인은 PC사이즈와 동일합니다.
Mobile 사이즈에서 좌우 여백 16px 제외하고 내부 요소들이 너비를 모두 차지합니다.
Mobile 사이즈에서 내부 요소들의 너비는 기기의 너비가 커지는 만큼 커지지만 400px을 넘지 않습니다.

심화

페이스북, 카카오톡, 디스코드, 트위터 등 SNS에서 Linkbrary 랜딩 페이지(“/”) 공유 시 좌측 예시와 같은 미리보기를 볼 수 있도록 랜딩 페이지 메타 태그를 설정해 주세요.
미리보기에서 제목은 “판다 마켓”, 설명은 “일상의 모든 물건을 거래해보세요”로 설정합니다.
주소와 이미지는 자유롭게 설정하세요.

스크린샷

Tablet

Home

panda-market-sanginjeong netlify app_ (2)

Mobile

Home

Login

Signup

Preview

멘토에게

셀프 코드 리뷰를 통해 질문 이어가겠습니다.

kiJu2 · 2025-07-19T05:23:15Z

스프리트 미션 하시느라 수고 많으셨어요.
상인님 학습에 도움 되실 수 있게 꼼꼼히 리뷰 하도록 해보겠습니다. 😊

kiJu2 · 2025-07-19T05:23:42Z

크으 ~ 커밋 깔-끔하네요 👍👍

kiJu2 · 2025-07-19T05:29:44Z

.gitignore

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

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

kiJu2 · 2025-07-19T05:30:35Z

index.html

+    <meta property="og:title" content="판다마켓" />
+    <meta
+      property="og:url"
+      content="https://panda-market-sanginjeong.netlify.app/"
+    />
+    <meta property="og:description" content="일상의 모든 물건을 거래해보세요" />


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

kiJu2 · 2025-07-19T05:31:39Z

index.html

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


굿굿 ! 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"

/>

kiJu2 · 2025-07-19T05:39:01Z

index.html

+            <h2 class="description">
+              <span>일상의 모든 물건을</span>
+              <span>거래해 보세요</span>
+            </h2>


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

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

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

kiJu2 · 2025-07-19T05:42:59Z

pages/homePage/index.style.css

  gap: 12px;
 }
+
+@media screen and (max-width: 1199px) {


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

kiJu2 · 2025-07-19T05:43:49Z

pages/homePage/index.style.css

+  footer {
+    position: relative;
+  }


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

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

kiJu2 · 2025-07-19T05:45:22Z

pages/loginAndSignupPage/signupPage/signup.html

+          <input
+            class="form-input"
+            type="email"
+            placeholder="이메일을 입력해주세요"
+          />


required나 name 속성도 고려해볼 수 있겠어요 !

name: name 은 <form>을 사용해서 추 후 submit을 사용하여 접근할 때 사용될 수 있습니다.

required: required는 <form> 내부에서 서식을 작성하지 않았을 때 브라우저에서 유저에게 피드백을 줄 수 있습니다.

추가로 사용성을 고려하신다면 autofocus라는 속성도 고려해볼 수 있겠어요 😉
MDN - autofocus

kiJu2 · 2025-07-19T05:45:32Z

pages/loginAndSignupPage/signupPage/signup.html

+          <input
+            class="form-input"
+            type="text"
+            placeholder="닉네임을 입력해주세요"
+          />


<input>에 대한 속성과 관련하여

<input>에는 용이한 속성들이 상당히 많습니다 !

숫자의 범위를 지정하는 max, min

글자 수를 제한하는 maxLenght, minLenght

그 외 의외의 type들 date, email, file, image ...
제공되는 유용한 속성들을 모르고 개발하게 되면 자바스크립트로 만들게 되는 경우도 있어요.

예를 들어서 max라는 속성을 모르면 input 값이 입력되었을 때 값에 대한 유효성 검사를 하고 input에 값을 넣어주는 번거로운 일도 할 수도 있어요.
(제가 처음 개발할 때 그랬습니다... 🥲)

특히 리액트로 넘어가게되면 javascript가 html 접근하는 허들이 낮아지면서 위와 같은 사례가 종종 보여요.

그래서 특히 input과 관련하여서는 꼭 한번 즈음 mdn 공식 문서를 처음부터 끝까지 러프하게라도 읽어보시는걸 추천드려요.

kiJu2 · 2025-07-19T05:46:31Z

pages/loginAndSignupPage/signupPage/signup.html

            </button>
          </div>
-          <button class="form-submit-btn">회원가입</button>
+          <button class="form-submit-btn disabled" disabled>회원가입</button>


class를 새로 추가하지 않고 선택자로 지정해볼 수 있을 것 같아요 !

Suggested change

<button class="form-submit-btn disabled" disabled>회원가입</button>

<button class="form-submit-btn" disabled>회원가입</button>

.form-submit-btn:disabled { // ... }

kiJu2 · 2025-07-19T05:48:34Z

pages/loginAndSignupPage/loginPage/login.html

            </button>
          </div>
-          <button class="form-submit-btn">로그인</button>
+          <button class="form-submit-btn disabled" disabled>로그인</button>


(심화/생각해보기/제안) 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: 주로 브랜드의 주요 컬러를 의미합니다 ! 😊 판다마켓의 경우 파란색이죠 !

kiJu2 · 2025-07-19T05:49:09Z

수고하셨습니다 상인님 !
나날이 발전해가는게 느껴집니다 ㅎㅎㅎ
자바스크립트에서는 어떤 모습을 보여줄지 기대가 됩니다 😊😊

SanginJeong added 11 commits July 16, 2025 16:53

style: rename folder and file name

2f2ba51

style: reapply prettier

6f814b1

chore: convert PNG to SVG VectorImg

a28ace1

refactor: Change href after renaming file and folder

f1fdcb4

chore: add .gitignore and ignore .DS_Store

b191eb6

chore: remove tracked .DS_Store and add to .gitignore

af19623

style: mobile layout

c08402b

style: footer layout index.html

2734e3d

style: mobile layout loginPage

abac476

style: mobile layout signupPage

bad1c99

feat: append Open Graph

7459157

SanginJeong added the 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. label Jul 18, 2025

kiJu2 approved these changes Jul 19, 2025

View reviewed changes

kiJu2 merged commit 1320180 into codeit-bootcamp-frontend:Basic-정상인 Jul 19, 2025

	<button class="form-submit-btn disabled" disabled>회원가입</button>
	<button class="form-submit-btn" disabled>회원가입</button>

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

[정상인] sprint3 #85

[정상인] sprint3 #85

Uh oh!

Conversation

SanginJeong commented Jul 18, 2025

요구사항

기본

공통

랜딩 페이지

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

심화

스크린샷

Tablet

Home

Mobile

Home

Login

Signup

Preview

멘토에게

Uh oh!

kiJu2 commented Jul 19, 2025

Uh oh!

kiJu2 commented Jul 19, 2025

Uh oh!

Choose a reason for hiding this comment

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

Uh oh!

Choose a reason for hiding this comment

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

Uh oh!

Choose a reason for hiding this comment

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

Uh oh!

Choose a reason for hiding this comment

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

Uh oh!

Choose a reason for hiding this comment

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

Uh oh!

Choose a reason for hiding this comment

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

Uh oh!

Choose a reason for hiding this comment

required나 name 속성도 고려해볼 수 있겠어요 !

Uh oh!

Choose a reason for hiding this comment

<input>에 대한 속성과 관련하여

Uh oh!

Choose a reason for hiding this comment

class를 새로 추가하지 않고 선택자로 지정해볼 수 있을 것 같아요 !

Uh oh!

Choose a reason for hiding this comment

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

Uh oh!

kiJu2 commented Jul 19, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

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

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

`required`나 `name` 속성도 고려해볼 수 있겠어요 !

`<input>`에 대한 속성과 관련하여

`class`를 새로 추가하지 않고 선택자로 지정해볼 수 있을 것 같아요 !

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