Skip to content
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

Jump to bottom

[김태완] sprint4 #110

Closed
wants to merge 3 commits into from
Closed

[김태완] sprint4 #110

wants to merge 3 commits into from

Conversation

twtwkim
Copy link
Collaborator

@twtwkim twtwkim commented Sep 21, 2024

요구사항

기본

sprint2

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

  • “판다마켓" 로고 클릭 시 루트 페이지(“/”)로 이동합니다.
  • 로그인 페이지, 회원가입 페이지 모두 로고 위 상단 여백이 동일합니다.
  • input 요소에 focus in 일 때, 테두리 색상은 #3692FF입니다.
  • input 요소에 focus out 일 때, 테두리는 없습니다.
  • SNS 아이콘들은 클릭시 각각 실제 서비스 홈페이지로 이동합니다.
    로그인 페이지
  • “회원가입”버튼 클릭 시 “/signup” 페이지로 이동합니다.
    회원가입 페이지
  • “로그인”버튼 클릭 시 “/login” 페이지로 이동합니다.

sprint3

  • 브라우저에 현재 보이는 화면의 영역(viewport) 너비를 기준으로 분기되는 반응형 디자인을 적용합니다.
  • Tablet 사이즈로 작아질 때 “판다마켓” 로고의 왼쪽에 여백 24px, “로그인” 버튼 오른쪽 여백 24px을 유지할 수 있도록 “판다마켓” 로고와 “로그인" 버튼의 간격이 가까워집니다.
  • Mobile 사이즈로 작아질 때 “판다마켓” 로고의 왼쪽에 여백 16px, “로그인” 버튼 오른쪽 여백 16px을 유지할 수 있도록 “판다마켓” 로고와 “로그인" 버튼의 간격이 가까워집니다.
  • 화면 영역이 줄어들면 “Privacy Policy”, “FAQ”, “codeit-2024”이 있는 영역과 SNS 아이콘들이 있는 영역의 간격이 줄어듭니다.
    로그인, 회원가입 페이지 공통
  • Tablet 사이즈에서 내부 디자인은 PC사이즈와 동일합니다.
  • Mobile 사이즈에서 좌우 여백 16px 제외하고 내부 요소들이 너비를 모두 차지합니다.
  • Mobile 사이즈에서 내부 요소들의 너비는 기기의 너비가 커지는 만큼 커지지만 400px을 넘지 않습니다.

sprint4

  • input 창에 값 입력시 로그인/회원가입 버튼 활성화, 미입력시 비활성화
  • [] input 창에 미입력시 에러 문구

심화

sprint2

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

sprint3

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

주요 변경사항

  • sprint1 리뷰 내용 반영
  • sprint2~3 요구사항 반영
  • sprint4 요구사항 일부 반영(input 태그 값 입력시 버튼 활성화)

멘토에게

  • 지난번 리뷰 내용중 이미지 태그 alt 를 반드시 작성하라고 하셨습니다! 참고 걸어주신 문서 잘 보았습니다. 실제 현업에서도 alt를 이미지를 글로 풀어 쓰는 수준으로 작성하는지 궁금합니다!
  • a태그와 button 태그를 같이 사용하지 않는다는 말씀을 해주셨는데, html에서는 button 태그 사용시 link를 어떻게 걸어야 하는지 궁금합니다!
  • 코드 중 main-ad 섹션에서 이미지 태그를 사용했습니다. 이때, background-image의 contain을 줬을때처럼 브라우저 크기 조절할 때마다 이미지 크기를 변경할 수 있는 방법이 있을까요??
  • 감사합니다!!

@twtwkim twtwkim requested a review from lang92 September 21, 2024 16:05
@twtwkim twtwkim added 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. 미완성🫠 죄송합니다.. labels Sep 21, 2024
@twtwkim twtwkim changed the title add sprint2~3 and part of sprint4 [김태완] sprint4 Sep 21, 2024
lang92
lang92 reviewed Sep 30, 2024
View reviewed changes
Copy link
Collaborator

@lang92 lang92 left a comment •
edited
Loading

Choose a reason for hiding this comment

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

리뷰 확인해 주세요! (+conflict가 있네요?)

지난번 리뷰 내용중 이미지 태그 alt 를 반드시 작성하라고 하셨습니다! 참고 걸어주신 문서 잘 보았습니다. 실제 현업에서도 alt를 이미지를 글로 풀어 쓰는 수준으로 작성하는지 궁금합니다!

==> 저는 사실 저정도로 길게 작성하지는 않고, 주변에서도 저정도까지 길게 쓴 경우는 본 적이 없긴 합니다.. ㅎㅎ

a태그와 button 태그를 같이 사용하지 않는다는 말씀을 해주셨는데, html에서는 button 태그 사용시 link를 어떻게 걸어야 하는지 궁금합니다!

==> button의 click 이벤트 발생 시 특정 페이지로 이동하는 자바스크립트 로직을 작성해야 합니다.

코드 중 main-ad 섹션에서 이미지 태그를 사용했습니다. 이때, background-image의 contain을 줬을때처럼 브라우저 크기 조절할 때마다 이미지 크기를 변경할 수 있는 방법이 있을까요??

==> object-fit 속성을 사용해 보세요. 지금 작성하신 질문과 유사하게 구글링해보시면 아마 동일한 키워드가 나왔을 것도 같네요!

CSS/login.css Outdated
Comment on lines 1 to 5
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
Copy link
Collaborator

Choose a reason for hiding this comment

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

모든 css 파일에 공통적으로 들어가는데, 이런 경우 common.css/global.css와 같이 파일 전체에 전반적으로 적용할 스타일을 따로 모아주는 식으로 관리하면 좋습니다.

CSS/index.css Outdated
Comment on lines 152 to 168
font-family: "Pretendard";
color: #3692FF;
margin-bottom: 12px;
}

.bigtext{
font-family: "Pretendard";
font-size: 40px;
font-weight: 700;
line-height: 56px;
letter-spacing: 2%;
color: #374151;
margin-bottom: 24px;
}

.smalltext{
font-family: "Pretendard";
Copy link
Collaborator

Choose a reason for hiding this comment

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

font는 html 혹은 body 태그에서 한번에 적용할 수 있습니다.
(input, textarea, select 등에는 개별 적용하셔야 합니다)

CSS/index.css Outdated
Comment on lines 227 to 229
margin-left: 400px;
margin-right: 400px;
margin-top: 32px;
Copy link
Collaborator

Choose a reason for hiding this comment

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

단축 속성으로 작성하면 깔끔하겠네요!

Suggested change
margin-left: 400px;
margin-right: 400px;
margin-top: 32px;
margin: 32px 400px 0;

register.html Outdated
<input class="input-tag email" type="email" placeholder="이메일을 입력해주세요">
<div class="error email-error"></div>
<p class="input-name">닉네임</p>
<input class="input-tag" type="username" placeholder="닉네임을 입력해주세요">
Copy link
Collaborator

Choose a reason for hiding this comment

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

input의 type 속성에는 username이라는 값이 존재하지 않습니다.

register.html Outdated
<input class="input-tag" type="passwordConfirm" placeholder="비밀호를 다시 한 번 입력해주세요">
<img class="password-icon" src="./image/gnb/btn_visibility_on_24px.png" alt="비밀번호 안보이게">
</div>
<div class="error passwordConfirm-error"></div>
Copy link
Collaborator

Choose a reason for hiding this comment

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

존재하지 않는 naming convention이네요!
camelCase와 kebab-case가 섞인 모습입니다.

Suggested change
<div class="error passwordConfirm-error"></div>
<div class="error password-confirm-error"></div>

login.html Outdated
</div>
<div class="error password-error"></div>
<div class="login-button">
<a class="Btn" href="./items.html">로그인</a>
Copy link
Collaborator

Choose a reason for hiding this comment

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

Suggested change
<a class="Btn" href="./items.html">로그인</a>
<a class="btn" href="./items.html">로그인</a>

@twtwkim
Copy link
Collaborator Author

twtwkim commented Oct 2, 2024

@lang92 멘토님! conflict는 해결했습니다.
이번 리뷰에서도 많이 배웠습니다. 감사합니다!

@twtwkim twtwkim closed this Oct 2, 2024
@twtwkim twtwkim reopened this Oct 2, 2024
@twtwkim twtwkim closed this Oct 2, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@lang92 lang92 lang92 left review comments

Assignees
No one assigned
Labels
매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. 미완성🫠 죄송합니다..
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@twtwkim @lang92