온보딩 페이지 로직 변경: 디바이스 환경에 따른 이동 방식 수정

[ongheong]

📝 관련 이슈

MOD-33

💻 작업 내용

1. 사용 환경에 따라 온보딩 페이지 이동 방식을 나누었습니다.

• 기존에는 온보딩 페이지에서 하단의 "다음" 버튼을 눌러 단계를 이동했지만, 모바일에서는 swipe 방식이 더 직관적이라는 사용자 피드백이 있었습니다.
• 다른 모바일 웹사이트들에서 터치가 가능한 경우 swipe를, 그렇지 않은 경우 좌우 버튼을 사용하고 있는 점을 참고했습니다.

• 이를 바탕으로 터치 기능이 지원되는 환경에서는 swipe로, 지원되지 않는 데스크탑 환경에서는 좌우 네비게이션 버튼을 제공하도록 변경했습니다.

• 자연스러운 swipe 효과를 위해, 여러 기능을 지원하고 사용자가 많은 swiper 라이브러리를 사용했습니다.
• 실행 환경이 터치 기능을 지원하는지 판단하는 객체를 통해 swiper의 동작을 나누었습니다.

2. 온보딩 페이지에서의 swipe 이외의 추가 수정사항을 반영했습니다.

• 하단 버튼을 “시작하기” 버튼으로 수정하고, 해당 버튼 클릭 시 홈페이지로 이동하도록 바꿨습니다.

• 하단 버튼으로 기능이 옮겨져 더 이상 필요없는 상단 "건너뛰기" 버튼을 제거했습니다.

• 2, 3, 4번째 온보딩 페이지의 로티 이미지가 여러 화면 사이즈에서 같은 위치에 있도록 수정했습니다.

  position: absolute;
  width: 90%;
  top: 70%;
  // 중앙 정렬 코드
  left: 50%;
  transform: translate(-50%, -50%);

✅ 테스트 리스트 (선택)

• swiper 라이브러리 적용 후 vite-bundle-visualizer를 사용해 번들 크기를 확인했습니다.
• 압축 후 크기가 40kb 정도로 작고, 추후 온보딩 페이지에 lazy loading이 적용되므로 따로 최적화가 필요하진 않을 것 같습니다!

📸 스크린샷

• 순서대로 모바일, 데스크탑에서의 온보딩 페이지 화면입니다.

👻 리뷰 요구사항 (선택)

[yoouyeon]

온보딩 페이지 변경사항 확인했습니다! 꼼꼼하게 레퍼런스까지 찾아서 여러 디바이스 환경까지 고려해주신 부분이 멋집니다...!🥹👏👍 저는 이렇게 환경에 따라 다르게 ui를 구성해 본 경험이 없어서 이번에 질문이 좀 많네요... ㅜㅜ 고생 많으셨습니당!!! 👍

[yoouyeon]

정말 정말 사소한 부분이긴 한데,, 혹시 swiper 관련 css import 하는 부분 위쪽에 빈 줄을 땨로 추가하신 것은 어떤 이유인가요...?
스타일 코드를 분리하기 위해서라기엔 16번째 줄에 index.style을 import하는 곳에는 따로 구분하는 부분이 없고, swiper 관련 파일들을 구분하기 위해서라기엔 Swiper 컴포넌트를 import하는 곳이랑은 분리되어 있어서 궁금했습니다 😂

[ongheong]

swiper 관련 파일 import를 쉽게 확인하기 위해 띄워두었습니다! Swiper 컴포넌트도 같이 두고 싶었는데, 컴포넌트 import를 스타일 밑으로 두면 lint 에러가 나서 위에 따로 두었습니다.
그런데 생각해보니 다음처럼 index.style import를 가장 마지막에 두면 해결되더라구요! 꼼꼼하게 봐주셔서 감사합니당 🤗

import Header from '@/common/components/Header';
import Onboarding1 from '@/assets/pngs/Onboarding1.png';
/** swiper 관련 파일 */
import { Swiper, SwiperSlide } from 'swiper/react';
import { Navigation, Pagination } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import * as S from './index.style';

[yoouyeon]

swiper를 스타일링하는 부분이 전역 스타일로 지정되어 있는데,
아래처럼 styled를 이용해서 Swiper 컴포넌트를 스타일링 할 수 있어요!
만약에 전역으로 해 둘 특별한 이유가 없다면 온보딩 페이지에서 사용하는 코드들은 가까운 위치에 두면 나중에 코드 파악하기에 좋을 것 같아요!

import { Swiper } from 'swiper/react';
import styled from 'styled-components';

export const StyledSwiper = styled(Swiper)``; // 이름은 대충 지었습니다...

[ongheong]

ㅎㅎ 주석이 너무 귀엽네요
넵 Swiper 컴포넌트를 extend하는 방식으로 수정하겠습니다! 다른 css 선택자들도 다음처럼 적용할 수 있을 것 같습니당

import styled from 'styled-components';
import { Swiper } from 'swiper/react';

export const CustomSwiper = styled(Swiper)`
  .swiper-button-next,
  .swiper-button-prev {
    margin: 0 10px;
  }

  .swiper-pagination-bullet-active {
    width: ${props => props.theme.unit[16]};
    border-radius: ${props => props.theme.radius.default};
  }
`;

[ongheong]

코드 리뷰 반영해서 다음과 같이 수정되었습니다! 모두 반영되었는지 한번 확인해주세요 🙇🏻‍♀️🙇🏻‍♀️

• onboarding 페이지에서 swiper 모듈 import 코드들의 위치를 변경했습니다. 0e065d7
• Swiper의 스타일을 확장한 CustomSwiper 스타일 컴포넌트를 만들어, 기존 globalStyles.ts에 있던 swiper 관련 스타일 코드들을 옮겼습니다. b451b1c
• 특정 화면 너비(768px) 이하는 터치 가능, 초과는 물리 버튼을 지원하도록 변경했습니다. c11846c

[yoouyeon]

변경사항 확인했습니다!!!!!! 화면 너비 따라 잘 적용되네요 👏👏👏👏 수고 많으셨습니다~!! 👍👍