1. Project 진행조건
-- 배너창입니다. 단, 보편적으로 화살표나 아래 점들로 구성되어 칸 구분이 되어 있는 배너창이 아닌, 수동(모바일 상에서 드래그)으로 좌우로 움직이고, 다시 탭을 해야 멈추는 그러한 형태입니다.
즉, 위아래 스크롤과 유사하지만, 이것을 좌우로 구현하는 부분입니다.
https://doqtqu.tistory.com/25 위 레퍼런스에 가보시면, 한 번의 액션으로 다음 슬라이드로 넘어가는 창이 나오는데, 이번에 개발하는 것은, 그 각각의 창에 대한 구분 기준이 없는, 다시 손을 댈 때 멈추는 그러한 좌우 슬라이드 입니다.
- 또한 강하게(혹은 길게) 드래그 액션을 취할 떄는 더 많이 좌우로 움직이고,
- 상대적으로 약할 때는 그 움직임의 정도가 약해집니다.
-- 좌우 슬라이드 메뉴 창입니다.
메뉴가 좌우 슬라이드와 연계되어 진행됩니다.**
- 상단 메뉴가 고정되어 있고(아래 칸과 연계)
- 하단의 해당 내용이, 그 상단 메뉴의 하이어라키 안에서
- 좌우로, 움직일 수 있습니다. (3개 한정)
2. 결과물
https://example2-f6bce.web.app/
제시 조건의 요구사항을 제대로 파악하지 못한 점이 아쉬웠고, 이 때문에 너무 많은 시간을 소요한 것이 화가 났다...
3. 코드
1. 가로 스크롤 배너
웹 모바일 모두 신경을 써야했기 때문에, 생각보다 고민이 많이 들었다.
처음에는 다양한 swipe api 를 사용했지만, 배너의 창 구분을 없애는 것이 힘들었고, javascript로 작성시 비효율적이라
판단하고, 기본적인 css에 집중하기로 했다.
배너 자체를 wrapper div를 만들어 안에 모두 넣었고, overflow: scroll로 설정해서 자연스레 넘치는 배너들은 scroll로 통제하고, 모바일에서는 swipe로 통제가 가능해졌다.
Wrapper div자체의 노출 크기를 조절하여 원하는 만큼 노출이 가능해졌고, 칸 구별이 없는 배너를 완성시킬 수 있었다.
배너와 스와이프 자체에 너무 집중한 나머지
생각보다 해답은 간단했다. overflow: scroll로 해당시켜두고, weap-vertical의 width를 지정해주었다.
지정된 70%의 너비 안에서 넘어가는 p 태그들을 pc에서는 스크롤 바를 통해, 모바일에서는 스와이프를 통해서
'끊기지 않게' 컨트롤할 수 있는 banner를 만들 수 있었다.
2. 좌우 슬라이드 메뉴창
상단 메뉴가 고정되어 있고, 하단의 내용이 상단 메뉴의 하이어라키 안에서 좌우로 움직일 수 있는 요구사항이었다.
먼저 설정된 만큼 슬라이드 + 좌우로 움직이는 content를 담을 칸을 만들어야 했다.
글을 쓸 칸 을 3개를 만들고, 이 칸들의 이동도 설정해야 했고, swiper 라는 api를 선택했다.
글을 담 는 칸 자체를 배너처럼 설정하여 사용자들의 접근성을 향상시키고, 디자인적 요소들을 개선할 수 있었다.
두 번째, 하단의 내용이 바뀔 때, 사용자에게 바뀌었다는 사인을 주어야 했다.
몇 번째 페이지에 있는지 페이지 이동 시 알려주어야 했는데, swiper 내부 기능을 쓰려다가 요구사항과 안 맞는다고 판단.
Swiper 기능 중 현재 보여지고 있는 페이지는 class name에 active가 append 되는 점을 참고하여 js를 활용하기로 했다. Swipe 시, active 되는 class 를 찾고, 그 class의 id를 가져와서, 상단 메뉴의 3개의 칸들과 연결했습니다. Background color를 바꿈으로써 사용자에게 정보를 전달했다
텍스트를 제외하면
<swiper mySwiper>
<swiper-wrapper id= targetid>
<swiper-slide id=slide1>
<swiper-slide id=slide2>
<swiper-slide id=slide3>
이렇게 div를 구성했다
swiper 기본 api js로 기본 틀을 구성하고,
js 코드로 변화감지 함수인 mutations를 활용, 자식들의 classname을 가져온다
그 classname 중에 원하는 값을 active로 만들어주고(미리 삭제해주는 이유는 중첩을 막기 위해서다)
css로 background color 만 바꿔주었다(default로 slide1을 active로 설정해주었다)
살짝 꼼수느낌이 나지만, 미션을 클리어였다!!!
이로서 힘들었던 스쿼드 2주차 마무리...!!!!!
