[토이프로젝트] MailBadara - (9) 디자인 리뉴얼

MailBadara 리뉴얼 배경

 

한참 묵혀두고 있다가 일주일 전부터 디자인을 갈아엎기 시작했다. 빨리 배포하려고 디자인은 1도 신경 안 쓰고 개떡같이 만들긴 했지만, 만들고나서 내가 보기에도 너무 구렸다. 시험 기간도 겹치고 다른 일들도 겹쳐서 미루고 미루다가 2024년 신년을 맞아 뜯어고치기로 했다.

 

그렇다고 코드 리팩토링을 한 건 아니고 디자인만 리뉴얼했다. 

 

Background

 

내가 보기에도 정말 구리다. 밋밋하게 흰 배경은 하기 싫어서 react-particles라는 인터랙티브 배경 라이브러리를 써봤는데.. 좋은지는 나도 모르겠다.. 이번 리뉴얼에는 원래 하고 싶었던 우주 배경을 도입하기로 했다.

 

Department 섹션

단순하게 테이블로 나열하기보다는 모바일 웹뷰에서도 보기 쉽도록 slider 방식으로 구현하고 싶었다. swiper 라이브러리를 한 번 써봤는데 간단하게 여러 slider를 구현할 수 있어서 좋은 것 같다.

 

 

 

Swiper 라이브러리 이슈

export default function DepartmentPage() {
  const [departmentBoardList, setDepartmentBoardList] = useState<
    DeaprtmentList[]
  >([]);

  useEffect(() => {
    const fetch = async () => {
      try {
        const res = await axios.get("/api/department/board");
        if (res.data.type === "SUCCESS") {
          setDepartmentBoardList(res.data.data);
        }
      } catch (error) {
        console.error("Error:", error);
      }
    };
    fetch();
  }, []);

  return (
    <section
      ref={ref}
      className="flex flex-col items-center justify-center w-full min-h-screen"
    >
      <Swiper
        modules={[
          Navigation,
          Pagination,
          Scrollbar,
          A11y,
          Autoplay,
          EffectFade,
          EffectCube,
        ]}
        navigation
        pagination={{ clickable: true }}
        scrollbar={{ draggable: true }}
        onSwiper={(swiper) => console.log(swiper)}
        onSlideChange={() => console.log("slide change")}
        autoplay={{ delay: 2000, disableOnInteraction: false }}
        effect="slide"
        className="w-full sm:w-3/4"
        centeredSlides
        slidesPerView={1}
        spaceBetween={10}
        breakpoints={{
          320: {
            slidesPerView: 1,
            spaceBetween: 20,
          },
          480: {
            slidesPerView: 2,
            spaceBetween: 30,
          },
          640: {
            slidesPerView: 3,
            spaceBetween: 50,
          },
        }}
      >
        {/** 문제의 부분 */
        departmentBoardList.map((data) => (
          <SwiperSlide
            key={data.code}
            className="flex items-center justify-center"
          >
            <DepartmentBoard data={data} />
          </SwiperSlide>
        ))}
      </Swiper>
      <div className="text-xl font-bold text-center text-white animate-scale-up-down">
        ⬆️Click me to see more⬆️
      </div>
    </section>
  );
}

 

<Swiper>

   <SwiperSlide>

     <DepartmentBoard />

  </SwiperSlide>

</Swiper>

 

DepartmentBoard를 SwiperSlide로 감싼 건 똑같은데 DepartmentBoard 자체를 SwiperSlide로 구현할 경우에는 slide가 제대로 작동하지 않는다. SwiperSlide를 밖으로 빼내고 DepartmentBoard 밖에서 감싸는 형태면 작동한다. 분명 웹 html 구조는 똑같은데.. 신기한 일이다.

 

 

반응형

이번에 구현할 때는 모바일 웹뷰에서도 보기 쉽도록 tailwindcss 반응형을 사용하여 디자인했다.

 

슬라이더가 3개에서 1개로 줄었다.