TIL : 23-06-25

오늘 한 일

• 테오 스프린트

---

테오 스프린트 : 코드 리뷰

버튼 font-size 관련하여...

시작하기 버튼이 존재하는데, 디자인대로 하면 시작하기가 두 줄로 보이는 문제가 발생했다.

.swiper-slide button {
  width: 14.438rem;
  height: 3.188rem;
  border-radius: 1.688rem;
  border: 0;
  background-color: #ffe4d0;
  font-size: 18px; // 글씨가 너무 커서 두 줄이 됨
  padding: 0.75rem 5.375rem;
  font-family: 'Cafe24Oneprettynight';
  cursor: pointer;
}

그래서 임의로 font-size를 14px로 해두었는데, 디지이너님으로부터 수정 요청을 받게 되었다.

해결 방안

• width를 100%로 하고 padding을 주거나
• width를 그대로 두고(14.438rem) padding을 제거하는

위의 두 가지 방식이 존재하였다. 그래서 padding을 제거하는 식으로 해결하였다.

useEffect 위치 관련하여...

import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
import 'swiper/css/pagination';
import { Pagination } from 'swiper';
import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';
import styled from '@emotion/styled';

const LandingPage = () => {
  const router = useRouter();
  const [initialSlide, setInitialSlide] = useState<number | null>(null);

  // 첫방문 유저 캐러셀 상태 제어
  useEffect(() => {
    localStorage.getItem('isFirstVisitor') ? setInitialSlide(2) : setInitialSlide(0);
  }, []);

  const handleStart = () => {
    localStorage.setItem('isFirstVisitor', 'true');
    router.push('/cake');
  };

  interface SlideStyles {
    backgroundColor?: string;
    width: string;
    height: string;
    display: string;
    marginTop: string;
    alignItems: string;
    flexDirection?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
  }

  const slideStyles: any = {};

  const slides = [
    {
      img: '/landing/intro1.svg',
      text: `친구가 생일인데 색다르게 
축하해주고 싶지 않나요?`,
    },
    {
      img: '/landing/intro2.svg',
      text: `나만의 케이크를 제작하여
친구를 감동시켜주세요!`,
      comment: '그럼 시작해볼까요?',
    },
    {
      img: '/landing/intro3.svg',
      backgroundColor: 'white',
      text: '시작하기',
    },
  ];

  // 초기 슬라이드가 설정되기 전에는 캐러셀이나 다른 컨텐츠가 렌더링 방지
  if (initialSlide === null) {
    return null;
  }

  return (
    <Root>
      <Swiper
        initialSlide={initialSlide}
        modules={[Pagination]}
        spaceBetween={0}
        pagination={{
          clickable: true,
        }}
      >
        {slides.map((slide, index) => (
          <SwiperSlide key={index}>
            <Container $backgroundColor={slide.backgroundColor}>
              <ImageContainer>
                <img src={slide.img} />
                {slide.text === '시작하기' ? <button onClick={handleStart}>{slide.text}</button> : slide.text} <br />
                <br />
                {slide.comment}
              </ImageContainer>
            </Container>
          </SwiperSlide>
        ))}
      </Swiper>
    </Root>
  );
};

export default LandingPage;

...

위 코드를 살펴보면

  // 첫방문 유저 캐러셀 상태 제어
  useEffect(() => {
    localStorage.getItem('isFirstVisitor') ? setInitialSlide(2) : setInitialSlide(0);
  }, []);

해당 코드는 상단에 위치하는 것을 확인할 수 있음.
이때 useEffect는 return 앞에 위치하는 것이 좋다는 피드백을 받음.
(이유에 대해서는 추후 업로드 예정)

import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
import 'swiper/css/pagination';
import { Pagination } from 'swiper';
import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';
import styled from '@emotion/styled';

const LandingPage = () => {
  const router = useRouter();
  const [initialSlide, setInitialSlide] = useState<number | null>(null);

  const handleStart = () => {
    localStorage.setItem('isFirstVisitor', 'true');
    router.push('/cake');
  };

  interface SlideStyles {
    backgroundColor?: string;
    width: string;
    height: string;
    display: string;
    marginTop: string;
    alignItems: string;
    flexDirection?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
  }

  const slideStyles: any = {};

  const slides = [
    {
      img: '/landing/intro1.svg',
      text: `친구가 생일인데 색다르게 
축하해주고 싶지 않나요?`,
    },
    {
      img: '/landing/intro2.svg',
      text: `나만의 케이크를 제작하여
친구를 감동시켜주세요!`,
      comment: '그럼 시작해볼까요?',
    },
    {
      img: '/landing/intro3.svg',
      backgroundColor: 'white',
      text: '시작하기',
    },
  ];

    // 첫방문 유저 캐러셀 상태 제어
  useEffect(() => {
    localStorage.getItem('isFirstVisitor') ? setInitialSlide(2) : setInitialSlide(0);
  }, []);

  // 초기 슬라이드가 설정되기 전에는 캐러셀이나 다른 컨텐츠가 렌더링 방지
  if (initialSlide === null) {
    return null;
  }

  return (
    <Root>
      <Swiper
        initialSlide={initialSlide}
        modules={[Pagination]}
        spaceBetween={0}
        pagination={{
          clickable: true,
        }}
      >
        {slides.map((slide, index) => (
          <SwiperSlide key={index}>
            <Container $backgroundColor={slide.backgroundColor}>
              <ImageContainer>
                <img src={slide.img} />
                {slide.text === '시작하기' ? <button onClick={handleStart}>{slide.text}</button> : slide.text} <br />
                <br />
                {slide.comment}
              </ImageContainer>
            </Container>
          </SwiperSlide>
        ))}
      </Swiper>
    </Root>
  );
};

export default LandingPage;

...

따라서 위 코드처럼 변경이 가능함.