우혜리

버튼

• 블루보틀 페이지의 버튼은 모두 anchor 태그를 사용하기 때문에 버튼 css파일을 따로 만들어서

  각 페이지에 임포트 후 anchor 태그에 .btn / .btn-outline 을 클래스에 추가하면 사용할 수 있게 만들었음.

슬라이드

• 자바스크립트를 안쓰고 만들었다가 중간 검사 이후 강사님 피드백으로 Ai의 도움을 받아 자바스크립트 활용으로 전면 수정
• 호버시 양옆으로 버튼이 보여서 클릭하면 슬라이드 가능
• 스크린리더 이용자와 키보드 이용자를 고려하여 aria-label과 tab-index를 활용
  • 키보드 방향키로 슬라이드 좌우로 움직임
  • tab키로 페이지 버튼 선택 가능
• 슬라이드들이 시각적 장식보다는 홍보목적의 하나의 주제를 가지는 구획이라고 판단하여 section 태그를 사용했음

1. 메인슬라이드
   • 그렇게 구현된 메인슬라이드
2. 카페슬라이드(메인슬라이드활용)
   • 메인 슬라이드를 컴포넌트로 활용하여 구현함.

제품 슬라이드

• 제품카드 컴포넌트를 활용해서 슬라이드로 만들었음.
• 그리드로 제품 카드 나열 후 overflow hidden으로 필요한 부분만 보이게 하는 걸로 슬라이드 구현

챗봇위젯

• 체크박스로 구현 했다가 중간 점검 때 슬비쌤에게 피드백을 받고 버튼으로 수정했음.
• 팝오버로 구현하려고 시도 하였다가 키보드 접근성과 모달안에 운영시간 팝업을 한번 더 만들어야 해서 자바스크립트로 구현하였습니다.
• 다른 페이지로 넘어가는 건 anchor, 페이지 내에서 작동해아 하는 건 버튼으로 구현하려고 노력했음
• 키보드 사용자를 고려하여 Esc를 누르면 팝업이 닫힘.