✔️ Main Page 만들어내기

가장 내용이 많은 페이지이자,
링크를 타고 들어오면 제일 먼저 보여지기에
신경도 많이 쓰이고 작업도 오래, 그리고 끝까지 수정사항이 많았던 페이지이다.

아래 작업들을 진행하면서 고충이었던 부분,
그리고 내가 어떻게 해결해나갔는지에 대해 정리하며
다음에는 좀 더 빨리 해결할 수 있길 바라본다 :)

• Swiper
• 좋아요 버튼
• 댓글 submit
• toast message

---

📌 사진 Swiper 기능

프로젝트 처음 기획했을 때 제일 어려울 것 같다 느껴진 기능,,,
작업 하다보니 이건 어려운것도 아니었다는걸 깨닫긴 했지만
기획하기 전에는 왠지 다가가기 어려운 느낌이었다ㅎ

인스타그램처럼 만들어야 했기에 사진을 볼 때 클릭해서 보는게 아니라
손으로 밀어넘겨서 봐야 했기 때문에 찾다찾다 결국
그냥 Swiper 라이브러리를 사용하게 되었다.
( 손수 만들어내고 싶었지만, 다른 작업들이 나를 기다리고 있었기에... )

1. 환경설정하기

$ yarn add swiper을 통해 패키지를 설치한다.
그리고 swiper 패키지는 스타일링이 scss로 되어있기 때문에 같이 설치해주었다.

2. 원하는 기능 설정하기

환경 설정이 완료되면

import React from 'react';
import { Swiper, SwiperSlide } from "swiper/react";
import SwiperCore, { Pagination } from "swiper";

import "swiper/swiper.scss";
import "swiper/components/pagination/pagination.scss";

SwiperCore.use([Pagination]);

function SwiperComponent() {
  return (
    <Swiper
      style={{height:"373px"}}
      className="swiper-container"
      spaceBetween={50}
      slidesPerView={1}
      pagination={{clickable: true}}
     >
       <SwiperSlide className="swiper-slide">
         <img />
       </SipwerSlide>
     </Swiper>
  );
}

export default SwiperComponent;

기본적으로 Swiper컴포넌트를 젤 최상위 컴포넌트로 감싸야하고
그 안에 들어갈 content들은 SwiperSlide에 담아주어야 한다.
그렇게 되면 이미 scss로 스타일링된 것들이 적용된다.

내가 사용한 옵션들만 정리해보자면,

• spaceBetween : 각 슬라이더 사이의 간격. 개발자 콘솔로 보면 props에 입력된 숫자가 margin-right로 추가되어있다.
• slidesPerView : 한 페이지에 넣을 슬라이드 갯수. 나는 사진 한장씩을 넘기며 보고 싶었기에 1로 설정했다.
• pagination : 슬라이더 하단에 페이지 갯수대로 생기는 buttlet button. 기본 스타일링은 active 상태인건 파란색, 아닌건 회색 버튼으로 되어있다. 인스타그램도 그런 스타일로 되어있길래 따로 커스텀하지는 않았다.

이외의 많은 옵션들에 대해서는 하단의 사이트를 참고하면 좋을 것 같다 :)

3. 리팩토링

처음에는 SwiperSlide 안에 사용할 이미지들을 일일이 넣어주었다.
그러다 코드리뷰를 통해 ethan이 map을 이용해서 배열로 좀 더 간편하게 정리하면 좋을 것 같다는 말에
코드샌드박스에서 이리저리 연습해본 후 작성한 코드는

...
const sliders = [
  {src : "/img/IMG1.png", alt : "slider img1"},
  {src : "/img/IMG2.png", alt : "slider img2"},
  {src : "/img/IMG3.png", alt : "slider img3"}
];
return (
  <Swiper
      style={{height:"373px"}}
      className="swiper-container"
      spaceBetween={50}
      slidesPerView={1}
      pagination={{clickable: true}}
  >
      {sliders.map((slider) => {
        return (
            <SwiperSlide className="swiper-slide" key={slider.src}>
              <SlideImg src={slider.src} alt={slider.alt} />
            </SwiperSlide>
        );
      })}
  </Swiper>

4. 스타일링

결혼식 날짜와 디데이를 계산해서 매일 적용될 수 있게 하고 싶었는데,
마땅한 위치를 찾지 못하다가 결국
swiper에서 첫 페이지에 추가해서 넣기로 했다.
Date를 사용해서 날짜 계산을 하였고

const todayDate = new Date();
todayDate.setHours(0);
todayDate.setMinutes(0);
todayDate.setSeconds(0,0);
const weddingDate = new Date("2021/12/31");

const weddingDay = 
      (weddingDay.getDate() - todayDate.getDate()) / (1000 * 60 * 60 * 24);

SwiperSlide 첫 페이지에 position:absolute로 사진 상단에 붙혀버렸다.

5. 결과물

덕분에 구현할 수 있었습니다. 감사합니다 :)

• https://swiperjs.com/react
• https://enfanthoon.tistory.com/166