메인페이지 요구사항

로그인 기능 구현

https://yamoo9.github.io/front-end-master/lecture/html-pay-grouping-elements.html

야무쌤 강의 참조.

[여백]
피그마 시안 토대로 작업 중

[코딩 컨벤션]
팀원들과 협의 후 class 이름 수정할 계획

• html
• css

.swiper {
  height: 370px;
  margin : 0 auto;
  max-width: 1920px;
  min-width: 1050px;
  margin-bottom: 1rem;
  display: flex;
  justify-content: center;
}

.swiper .swiper-slide{
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative;
}

위 부분은 놔뒀습니다. 의존성 그대로 두고 코드 그대로 사용 하시면 될 거 같아요! 메인swiper에서도 사용 가능할 것 같습니다.

이하 코드는 주석처리 하시고

• js
  const data와 리턴하는 함수를 지워버렸습니다.

상단 배너 구현하기

• 이메일과 비밀번호의 유효성을 확인합니다.
  • 이메일 조건 : 최소 @, . 포함
  • 비밀번호 조건 : 8자 이상 입력
  • 이메일과 비밀번호가 모두 입력되어 있고, 조건을 만족해야 제출 버튼이 활성화 되도록 구현해주세요.

유효성 검사

//ajax 호출
			$.ajax({
				//요청 서비스 url 지정
				url : "/contact/add.do",
				//메소드 타입 지정
				type : "POST",
				//요청 시 서버로 전달할 데이터 지정
				data : param,
				//요청 성공 시 동작할 콜백 함수 지정
				success : function(data) {
					console.log(data);
					//p요소에 서버로부터 응답받은 데이터 표출
					$("#resp").html(data);
				}
			});

출처 : https://moonhy7.tistory.com/entry/Ajax-08

정리가 기가 맥히는 블로그(ajax)

https://velog.io/@surim014/AJAX%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80

실시간으로 e.target을 사용하여 아이디와 비밀번호 등을 입력시 각각의 입력한 인풋 밑에 에러메세지가 띄어주게 구현하던 중 이벤트 위임이 잘 작동하지 않아서 에러메세지가 모든 인풋에 뿌려지는 오류 발생🥲

1. 알 수 없는 원인으로 인해 swiper 버튼 작동 안됨.

스와이퍼가 조금 꼬였는데, 내일 해결 해 보겠습니다...

2. add to cart 실행 시 swiper배너가 가장 위로 뜨는 문제 발생

z-index 로 해결 안됨.

img, input 태그 마지막에 / 붙여놓으면 좋을것같습니다!

[예시]

<img src="./assets/..."  alt="..."/>
<input type="text" />

배너에서 next, prev 버튼의 기능을 구현한다.

• 버튼 기능
• 버튼 포지셔닝
• 버튼 마이크로 애니메이션 => 드롭다운.js 유틸화 시키기
• 버튼 디자인

[원인]
ARIA 사용 규칙이 부족하여 마크업 라이트 하우스 접근성 결과가 65점이 나옴.

[해결]
특정 요소에 역할정의, 사용자에게 정보제공을위해 role(역할)을 부여하고,
ARIA 사용규칙을 최대한 준수(aria-hidden="true" 를 적절히 사용, 키보드 사용성 보장)
준수 결과 라이트 하우스 접근성 결과가 88점이 나옴.

dropDown 기능 구현. 리펙토링 하기

main 페이지의 popup 기능 구현

• HTML, CSS 작업
• JS : button 클릭 시 display: none; 설정
• JS : 오늘 하루 안 보기 기능 처리
• 버튼의 클릭 범위 지정하기

23.02.03 17:50 result (완료)

23.02.03 14:30 result

daum 주소검색 API 이용.

코딩 컨벤션

• 마크업
  • div 사용했을 때 type 잘 써져있는가
  • 시맨틱 한 태그가 사용되었는가.
• css
  • flex
  • 여백
  • 선택자 스타일
  • 단위(rem, vh, px)
• bem 등의 클래스 네이밍
• tap 접근성 체크
• alt 속성은 잘 대체 되었는가
• device width 에 따른 디자인 변화를 고려

제안이지만 당장 도입해야 합니다. "누군가"의 깃 레포에서 발견했고, 사진은 style.css의 내용 입니다. 일단 제가 해두겠습니다.

client\assets\icons\footer-icon 폴더에

• Blog.svg
• FaceBook.svg
• Instagram.svg
• NaverPost.svg
• Youtube.svg

파일 등록

• 회원가입 페이지 마크업 하기

회원가입 전체 동의 선택/해제 로직 구현 -> 반복문 이용.

메인페이지에 머지했던 코드를 각각 비교하고 합의점 도입하기

보화님 : product-list 레이아웃 무너지는 오류 수정