[천권희] Sprint2 #80

alexgoni · 2024-03-20T08:45:29Z

요구사항

해당 미션 피그마 링크

Sprint 2 Figma Link

기본

로그인 페이지, 회원가입 페이지 공통
- 아래로 스크롤 해도 상단 네비게이션 바(Global Navigation Bar)가 최상단에 고정됩니다.
- “판다마켓" 로고 클릭 시 루트 페이지(“/”)로 이동합니다.
- 로그인 페이지, 회원가입 페이지 모두 로고 위 상단 여백이 동일합니다.
- input 요소에 focus in 일 때, 테두리 색상은 #3692FF입니다.
- input 요소에 focus out 일 때, 테두리는 없습니다.
- SNS 아이콘들은 클릭시 각각 실제 서비스 홈페이지로 이동합니다.
로그인 페이지
- “회원가입”버튼 클릭 시 “/signup” 페이지로 이동합니다.
회원가입 페이지
- “로그인”버튼 클릭 시 “/login” 페이지로 이동합니다.
배포
- Netlify에 파일 배포가 아닌 포크한 Github 레포지토리로 연결합니다.

심화

palette에 있는 color값들을 css 변수로 등록하고 사용해 주세요.
비밀번호 input 요소 위에 비밀번호를 확인할 수 있는 아이콘을 추가해 주세요.

주요 변경사항

판다마켓 로그인 / 회원가입 UI 개발
github와 연결하여 netlify 배포

테스트 방법

배포 주소

https://panda-market-alexgoni.netlify.app/

로컬 테스트 방법

index.html 파일 브라우저에서 열기
Live Server를 이용해 로컬 환경에서 서버 실행

스크린샷

로그인 페이지
회원가입 페이지

멘토에게

프레임워크를 사용하지 않고 html, css, js로만 이루어진 프로젝트에서 모든 html 파일들이 같은 head 태그를 공유하는 방법이 있는지 궁금합니다.
셀프 코드 리뷰를 통해 질문 이어가겠습니다.

wonsss · 2024-03-24T05:51:38Z

login.html

@@ -2,8 +2,87 @@
 <html lang="en">


ko 로 변경해주세요 😄

fix: sprint2 수정 사항 반영

또 까먹었네요!
매번 꼼꼼하게 봐주셔서 감사합니다 :)

wonsss · 2024-03-24T05:54:52Z

login.html

+        <label for="password">비밀번호</label>
+        <div class="password-container">
+          <input
+            id="password"
+            name="password"
+            type="password"
+            placeholder="비밀번호를 입력해주세요"
+          />


label과 input을 잘 연관시키셨네요! 👍 이렇게 연관시키면, label 클릭 시 연관된 input에 focus 가게 되어 사용성이 더 좋아집니다. 웹접근성에도 도움이 되구요.

<label> 을 <input> 요소와 연관시키려면, <input> 에 id 속성을 넣어야합니다. 그런 다음 <label> 에 id 와 같은 값의 for 속성을 넣어야합니다.

참고: https://developer.mozilla.org/ko/docs/Web/HTML/Element/label

감사합니다! 👍

wonsss · 2024-03-24T05:59:29Z

login.html

+          <img
+            class="password-eye"
+            src="assets/icon/password_eye.svg"
+            alt="password-eye"
+          />


이미지의 height 속성과 width 속성은 언제나 명시하는 것이 좋습니다. 이 속성들이 명시되어 있으면 웹 페이지가 로드될 때 브라우저가 해당 이미지를 위한 적절한 공간을 남겨둘 수 있지만, 이 속성들이 명시되어 있지 않으면 브라우저는 이미지의 크기를 알 수 없어 필요한 공간을 남겨둘 수 없게 됩니다. 따라서 이미지가 로딩되는 순간 페이지의 레이아웃이 변경되는 결과를 초래할 수 있습니다.

fix: sprint2 수정 사항 반영
피드백 사항에 맞추어 수정하였습니다.

로딩 시 레이아웃이 변경될 수도 있다는 것을 배웠습니다!

wonsss · 2024-03-24T06:01:41Z

login.html

+      </div>
+
+      <div class="form__block">
+        <button class="form__submit-btn">로그인</button>


button 태그의 type 속성의 기본값은 submit입니다. 양식 제출용 버튼이 아니라면 type 특성을 button으로 지정하는걸 잊지 마세요. 기본값에서는 버튼을 눌렀을 때 양식 데이터를 제출하고, (존재하지 않는) 응답을 불러오려고 시도하는 과정에서 문서의 현재 상태가 사라질 수 있습니다.

참고로 이 경우 form 요소 내에서 사용하는 form submit용 button 역할인 거 같은데, 그렇다면 생략해도 되지만 type="submit"으로 명시하는 것이 의도를 알 수 있어 더 좋습니다.

button 태그의 type 속성: 버튼의 행동 방식. 가능한 값은 다음과 같습니다.
-submit: 버튼이 서버로 양식 데이터를 제출합니다. 지정하지 않은 경우 기본값이며, 유효하지 않은 값일 때도 사용합니다.
-reset: 처럼, 모든 컨트롤을 초깃값으로 되돌립니다.
-button: 기본 행동이 없으며 클릭했을 때 아무것도 하지 않습니다. 클라이언트측 스크립트와 연결할 수 있습니다.
https://developer.mozilla.org/ko/docs/Web/HTML/Element/button

fix: sprint2 수정 사항 반영
피드백 사항에 맞추어 수정하였습니다.

넵 명시하는 것이 의도를 더 드러낼 수 있겠네요!

wonsss · 2024-03-24T06:02:12Z

login.html

+          <a
+            href="https://www.google.com/"
+            target="_blank"
+            rel="noopener noreferrer"
+          >


a 요소에 적절한 속성을 넣어주셨네요 👍

감사합니다 👍

wonsss · 2024-03-24T06:02:55Z

login.html

+      /></a>
+    </div>
+
+    <form class="login-form">


form 요소 내에 input들과 submit button 을 잘 넣어서 시맨틱한 form을 잘 만들어주셨어요 👍

감사합니다! 👍

wonsss · 2024-03-24T06:03:51Z

signup.html

+        <input
+          id="email"
+          name="email"
+          type="email"


input의 type에도 여러 가지 종류가 있죠.
email을 입력하는 input에는 이와 같이 email type을 해주시면 좋습니다. 👍

wonsss · 2024-03-24T06:04:26Z

signup.html

+          <input
+            id="password"
+            name="password"
+            type="password"


wonsss · 2024-03-24T06:07:56Z

signup.html

+          <input
+            id="password-confirm"
+            name="password-confirm"
+            type="password"
+            placeholder="비밀번호를 다시 한 번 입력해주세요"
+          />


autocomplete 라는 속성도 있어요. ㅎㅎ 내용 확인해보시고 필요한 경우에 적용해보세요. UX에 도움이 됩니다.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password#allowing_autocomplete

fix: sprint2 수정 사항 반영

넵 autocomplete 속성을 배우게 되었습니다
적용 시에 이전에 입력한 비밀번호가 자동으로 채워지는 것 확인했습니다.

개발 시에 자동으로 채워지는 것이 채워진 이전의 스타일을 확인할 수가 없어
나중에 적용하도록 하겠습니다.

추가적으로 각 input 태그에 required 속성이 필요할 것 같아 적용했습니다!

wonsss · 2024-03-24T14:09:03Z

styles/variables.css

 /* z-index */

 :root {
+  --GNB: 999;
  --title-with-img: 2;
  --img: 1;
 }


z-index도 css 변수로 관리하셨군요 👍 꼼꼼함이 멋지세요

넵 감사합니다!

상세한 코드 리뷰 감사합니다!😊

wonsss

안녕하세요. 권희님. Sprint2 미션도 아주 잘 해주셨네요 👍
이전에 개발 공부 경험이 있으셔서, 지금 미션이 조금 쉬우실 수도 있으실 것 같아요.
이 기간에 더욱 기본을 탄탄하게 다지고 깊게 공부하실 것을 추천드려요! 특히 자바스크립트!
변경 요청할 부분이 크진 않아서 이번 미션은 Approve하고 merge할게요!
리뷰 남겨드린 내용 참고 부탁드려요~!

wonsss · 2024-03-24T14:40:22Z

프레임워크를 사용하지 않고 html, css, js로만 이루어진 프로젝트에서 모든 html 파일들이 같은 head 태그를 공유하는 방법이 있는지 궁금합니다.

비슷한 질문이 SOF 에 있는데 참고해보시면 좋을 것 같네요.
https://stackoverflow.com/questions/60838111/make-same-head-available-to-all-pages

이러한 것은 보통 Server Side에서 할 수 있고, Client Side에서 하시려면 모듈 번들러를 사용하셔야 할 거예요.
그런데 그건 지금 단계에서 불필요한 복잡도를 주는 것 같아서 참고만 해보셔도 좋을 것 같습니다.

alexgoni added 16 commits March 20, 2024 14:46

docs: sprint2 기능 목록 업데이트

b5974a4

feat: GNB 고정

70f664b

feat: 로그인 페이지 html 작성

8eb64a9

feat: 회원가입 페이지 html 작성

96de86d

feat: auth 페이지 레이아웃 설정

b88aa66

feat: form input styling

f54355b

feat: form submit button styling

8ff8f84

feat: 간편 로그인 styling

c0660a4

feat: link styling

46ba36c

feat: 비밀번호 눈모양 아이콘 추가

3ffee7f

chore: css 변수 등록

a02b4ee

feat: user event styling

c1113df

feat: 로그인 페이지 스타일 회원가입 페이지에 적용

2487453

feat: sns 이동 기능 구현

599ef13

fix: 로고 클릭 시 메인 페이지로 이동

079e887

fix: 회원가입 페이지에도 sns 이동 적용

4f4ce29

alexgoni requested a review from wonsss March 20, 2024 08:45

alexgoni added the 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. label Mar 20, 2024

wonsss approved these changes Mar 24, 2024

View reviewed changes

wonsss merged commit 08713af into codeit-bootcamp-frontend:part1-천권희 Mar 24, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[천권희] Sprint2 #80

[천권희] Sprint2 #80

alexgoni commented Mar 20, 2024

wonsss Mar 24, 2024

alexgoni Mar 27, 2024 •

edited

Loading

wonsss Mar 24, 2024

alexgoni Mar 27, 2024

wonsss Mar 24, 2024

alexgoni Mar 27, 2024

wonsss Mar 24, 2024

alexgoni Mar 27, 2024

wonsss Mar 24, 2024

alexgoni Mar 27, 2024

wonsss Mar 24, 2024

alexgoni Mar 27, 2024

wonsss Mar 24, 2024

wonsss Mar 24, 2024

wonsss Mar 24, 2024

alexgoni Mar 27, 2024

wonsss Mar 24, 2024

alexgoni Mar 27, 2024

wonsss left a comment

wonsss commented Mar 24, 2024 •

edited

Loading

[천권희] Sprint2 #80

[천권희] Sprint2 #80

Conversation

alexgoni commented Mar 20, 2024

요구사항

해당 미션 피그마 링크

기본

심화

주요 변경사항

테스트 방법

배포 주소

로컬 테스트 방법

스크린샷

멘토에게

Choose a reason for hiding this comment

alexgoni Mar 27, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

wonsss left a comment

Choose a reason for hiding this comment

wonsss commented Mar 24, 2024 • edited Loading

alexgoni Mar 27, 2024 •

edited

Loading

wonsss commented Mar 24, 2024 •

edited

Loading